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>
|
||||
let foo;
|
||||
let bar = (foo = 1);
|
||||
function a() {
|
||||
bar = (foo = 1);
|
||||
}
|
||||
</script>
|
||||
|
||||
<h1>{foo} {bar}</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