mirror of https://github.com/sveltejs/svelte
Conduitry
5 years ago
commit
1e9925baa9
@ -1,10 +0,0 @@
|
|||||||
module.exports = Object.assign(
|
|
||||||
{},
|
|
||||||
require('./mocharc.js'),
|
|
||||||
{
|
|
||||||
fullTrace: true,
|
|
||||||
require: [
|
|
||||||
'source-map-support/register'
|
|
||||||
]
|
|
||||||
}
|
|
||||||
);
|
|
||||||
@ -0,0 +1,9 @@
|
|||||||
|
---
|
||||||
|
question: Are there any books?
|
||||||
|
---
|
||||||
|
|
||||||
|
There are a few books:
|
||||||
|
|
||||||
|
- [Svelte Handbook](https://flaviocopes.com/page/download-svelte-handbook/) by Flavio Copes
|
||||||
|
- [Svelte 3 Up and Running](https://www.amazon.com/dp/B08D6T6BKS/) by Alessandro Segala
|
||||||
|
- [Svelte and Sapper in Action](https://www.manning.com/books/svelte-and-sapper-in-action) by R. Mark Volkmann
|
||||||
@ -0,0 +1 @@
|
|||||||
|
main.svelte-xyz button.svelte-xyz.svelte-xyz{background-color:red}main.svelte-xyz div.svelte-xyz>button.svelte-xyz{background-color:blue}
|
||||||
@ -0,0 +1,14 @@
|
|||||||
|
<style>
|
||||||
|
main button {
|
||||||
|
background-color: red;
|
||||||
|
}
|
||||||
|
|
||||||
|
main div > button {
|
||||||
|
background-color: blue;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<main>
|
||||||
|
<div>
|
||||||
|
<button type="submit">Blue</button>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
@ -0,0 +1,45 @@
|
|||||||
|
export default {
|
||||||
|
warnings: [
|
||||||
|
{
|
||||||
|
code: "css-unused-selector",
|
||||||
|
message: 'Unused CSS selector "article > *"',
|
||||||
|
frame: `
|
||||||
|
1: <style>
|
||||||
|
2: article > * {
|
||||||
|
^
|
||||||
|
3: font-size: 36px;
|
||||||
|
4: }`,
|
||||||
|
pos: 10,
|
||||||
|
start: { character: 10, column: 1, line: 2 },
|
||||||
|
end: { character: 21, column: 12, line: 2 }
|
||||||
|
},
|
||||||
|
{
|
||||||
|
code: "css-unused-selector",
|
||||||
|
message: 'Unused CSS selector "article *"',
|
||||||
|
frame: `
|
||||||
|
4: }
|
||||||
|
5:
|
||||||
|
6: article * {
|
||||||
|
^
|
||||||
|
7: font-size: 36px;
|
||||||
|
8: }`,
|
||||||
|
pos: 49,
|
||||||
|
start: { character: 49, column: 1, line: 6 },
|
||||||
|
end: { character: 58, column: 10, line: 6 }
|
||||||
|
},
|
||||||
|
{
|
||||||
|
code: "css-unused-selector",
|
||||||
|
message: 'Unused CSS selector ".article > *"',
|
||||||
|
frame: `
|
||||||
|
8: }
|
||||||
|
9:
|
||||||
|
10: .article > * {
|
||||||
|
^
|
||||||
|
11: font-size: 48px;
|
||||||
|
12: }`,
|
||||||
|
pos: 86,
|
||||||
|
start: { character: 86, column: 1, line: 10 },
|
||||||
|
end: { character: 98, column: 13, line: 10 }
|
||||||
|
}
|
||||||
|
]
|
||||||
|
};
|
||||||
@ -0,0 +1 @@
|
|||||||
|
div.svelte-xyz>.svelte-xyz{color:orange}
|
||||||
@ -0,0 +1,23 @@
|
|||||||
|
<style>
|
||||||
|
article > * {
|
||||||
|
font-size: 36px;
|
||||||
|
}
|
||||||
|
|
||||||
|
article * {
|
||||||
|
font-size: 36px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.article > * {
|
||||||
|
font-size: 48px;
|
||||||
|
}
|
||||||
|
|
||||||
|
div > * {
|
||||||
|
color: orange;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<p>
|
||||||
|
Svelte REPLs are svelte.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
@ -0,0 +1,53 @@
|
|||||||
|
/* generated by Svelte vX.Y.Z */
|
||||||
|
import {
|
||||||
|
SvelteComponent,
|
||||||
|
detach,
|
||||||
|
init,
|
||||||
|
insert,
|
||||||
|
noop,
|
||||||
|
safe_not_equal,
|
||||||
|
space,
|
||||||
|
text
|
||||||
|
} from "svelte/internal";
|
||||||
|
|
||||||
|
function create_fragment(ctx) {
|
||||||
|
let t0;
|
||||||
|
let t1;
|
||||||
|
let t2_value = import.meta.url + "";
|
||||||
|
let t2;
|
||||||
|
|
||||||
|
return {
|
||||||
|
c() {
|
||||||
|
t0 = text(/*url*/ ctx[0]);
|
||||||
|
t1 = space();
|
||||||
|
t2 = text(t2_value);
|
||||||
|
},
|
||||||
|
m(target, anchor) {
|
||||||
|
insert(target, t0, anchor);
|
||||||
|
insert(target, t1, anchor);
|
||||||
|
insert(target, t2, anchor);
|
||||||
|
},
|
||||||
|
p: noop,
|
||||||
|
i: noop,
|
||||||
|
o: noop,
|
||||||
|
d(detaching) {
|
||||||
|
if (detaching) detach(t0);
|
||||||
|
if (detaching) detach(t1);
|
||||||
|
if (detaching) detach(t2);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
function instance($$self) {
|
||||||
|
const url = import.meta.url;
|
||||||
|
return [url];
|
||||||
|
}
|
||||||
|
|
||||||
|
class Component extends SvelteComponent {
|
||||||
|
constructor(options) {
|
||||||
|
super();
|
||||||
|
init(this, options, instance, create_fragment, safe_not_equal, {});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Component;
|
||||||
@ -0,0 +1,6 @@
|
|||||||
|
<script>
|
||||||
|
const url = import.meta.url;
|
||||||
|
</script>
|
||||||
|
|
||||||
|
{url}
|
||||||
|
{import.meta.url}
|
||||||
@ -0,0 +1,3 @@
|
|||||||
|
export default {
|
||||||
|
html: `2048 2048`
|
||||||
|
};
|
||||||
@ -0,0 +1,5 @@
|
|||||||
|
<script>
|
||||||
|
const num = 2_048;
|
||||||
|
</script>
|
||||||
|
|
||||||
|
{num} {2_048}
|
||||||
@ -0,0 +1,3 @@
|
|||||||
|
export default {
|
||||||
|
html: `<h1>2 2 xxx 5 6</h1>`
|
||||||
|
};
|
||||||
@ -0,0 +1,16 @@
|
|||||||
|
<script>
|
||||||
|
import { writable } from 'svelte/store';
|
||||||
|
|
||||||
|
let eid = writable(1);
|
||||||
|
let foo;
|
||||||
|
let u;
|
||||||
|
let v;
|
||||||
|
let w;
|
||||||
|
[u, v, w] = [
|
||||||
|
{id: eid = writable(foo = 2), name: 'xxx'},
|
||||||
|
5,
|
||||||
|
writable(6)
|
||||||
|
];
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<h1>{foo} {$eid} {u.name} {v} {$w}</h1>
|
||||||
@ -1,6 +1,9 @@
|
|||||||
<script>
|
<script>
|
||||||
let foo;
|
let foo;
|
||||||
let bar = (foo = 1);
|
let bar = (foo = 1);
|
||||||
|
function a() {
|
||||||
|
bar = (foo = 1);
|
||||||
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<h1>{foo} {bar}</h1>
|
<h1>{foo} {bar}</h1>
|
||||||
|
|||||||
@ -1,9 +1,14 @@
|
|||||||
<script>
|
<script>
|
||||||
let foo1;
|
let foo1;
|
||||||
let foo2;
|
let foo2;
|
||||||
for (let bar = (foo1 = 0); bar < 5; bar += 1) {
|
for (let bar = (foo1 = 0); bar < 5; bar += 1) {
|
||||||
foo2 = foo1;
|
foo2 = foo1;
|
||||||
}
|
}
|
||||||
|
function a() {
|
||||||
|
for (let bar = (foo1 = 0); bar < 5; bar += 1) {
|
||||||
|
foo2 = foo1;
|
||||||
|
}
|
||||||
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<h1>{foo1} {foo2}</h1>
|
<h1>{foo1} {foo2}</h1>
|
||||||
|
|||||||
@ -0,0 +1,32 @@
|
|||||||
|
export default {
|
||||||
|
html: `
|
||||||
|
<p>a: {"foo":3,"bar":2}</p>
|
||||||
|
<p>b: {"foo":3}</p>
|
||||||
|
<button></button>
|
||||||
|
<button></button>
|
||||||
|
`,
|
||||||
|
skip_if_ssr: true,
|
||||||
|
|
||||||
|
async test({ assert, component, target, window }) {
|
||||||
|
const [btn1, btn2] = target.querySelectorAll('button');
|
||||||
|
const click = new window.MouseEvent('click');
|
||||||
|
|
||||||
|
await btn1.dispatchEvent(click);
|
||||||
|
|
||||||
|
assert.htmlEqual(target.innerHTML, `
|
||||||
|
<p>a: {"foo":4,"bar":2}</p>
|
||||||
|
<p>b: {"foo":4,"baz":0}</p>
|
||||||
|
<button></button>
|
||||||
|
<button></button>
|
||||||
|
`);
|
||||||
|
|
||||||
|
await btn2.dispatchEvent(click);
|
||||||
|
|
||||||
|
assert.htmlEqual(target.innerHTML, `
|
||||||
|
<p>a: {"foo":5,"bar":2}</p>
|
||||||
|
<p>b: {"foo":5,"qux":0}</p>
|
||||||
|
<button></button>
|
||||||
|
<button></button>
|
||||||
|
`);
|
||||||
|
}
|
||||||
|
};
|
||||||
@ -0,0 +1,24 @@
|
|||||||
|
<script>
|
||||||
|
import { writable } from '../../../../store';
|
||||||
|
|
||||||
|
const a = writable({ foo: 1, bar: 2 });
|
||||||
|
$a.foo = 3;
|
||||||
|
|
||||||
|
const b = writable({ foo: 1, bar: 2 });
|
||||||
|
$b = { foo: 3 };
|
||||||
|
|
||||||
|
function update() {
|
||||||
|
$a.foo = $a.foo + 1;
|
||||||
|
$b = { foo: $b.foo + 1, qux: 0 };
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<p>a: {JSON.stringify($a)}</p>
|
||||||
|
<p>b: {JSON.stringify($b)}</p>
|
||||||
|
|
||||||
|
<button on:click={() => {
|
||||||
|
$a.foo = $a.foo + 1;
|
||||||
|
$b = { foo: $b.foo + 1, baz: 0 };
|
||||||
|
}} />
|
||||||
|
|
||||||
|
<button on:click={update} />
|
||||||
@ -0,0 +1,3 @@
|
|||||||
|
export default {
|
||||||
|
html: `31 42`
|
||||||
|
};
|
||||||
@ -0,0 +1,16 @@
|
|||||||
|
<script>
|
||||||
|
import { writable } from 'svelte/store';
|
||||||
|
const context = {
|
||||||
|
store1: writable(31),
|
||||||
|
store2: writable(42)
|
||||||
|
};
|
||||||
|
let store1;
|
||||||
|
let store2;
|
||||||
|
({
|
||||||
|
store1,
|
||||||
|
store2
|
||||||
|
} = context);
|
||||||
|
</script>
|
||||||
|
|
||||||
|
{$store1}
|
||||||
|
{$store2}
|
||||||
@ -0,0 +1,15 @@
|
|||||||
|
export default {
|
||||||
|
test({ assert, component, target, window, raf }) {
|
||||||
|
component.visible = true;
|
||||||
|
|
||||||
|
const div = target.querySelector('div');
|
||||||
|
|
||||||
|
assert.equal(div.value, 0);
|
||||||
|
|
||||||
|
raf.tick(200);
|
||||||
|
|
||||||
|
div.value = 'test';
|
||||||
|
component.visible = false;
|
||||||
|
assert.equal(div.value, 'test');
|
||||||
|
}
|
||||||
|
};
|
||||||
@ -0,0 +1,17 @@
|
|||||||
|
<script>
|
||||||
|
export let visible = false;
|
||||||
|
export let value = 0;
|
||||||
|
|
||||||
|
function foo(node, params) {
|
||||||
|
return {
|
||||||
|
duration: 100,
|
||||||
|
tick: () => {
|
||||||
|
node.value = value;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
{#if visible}
|
||||||
|
<div transition:foo={{value}}></div>
|
||||||
|
{/if}
|
||||||
@ -0,0 +1 @@
|
|||||||
|
[]
|
||||||
@ -0,0 +1,6 @@
|
|||||||
|
<script>
|
||||||
|
const url = import.meta.url;
|
||||||
|
</script>
|
||||||
|
|
||||||
|
{url}
|
||||||
|
{import.meta.url}
|
||||||
Loading…
Reference in new issue