mirror of https://github.com/sveltejs/svelte
Simon Holthausen
3 years ago
commit
d2dba3248f
@ -0,0 +1,12 @@
|
|||||||
|
export default {
|
||||||
|
html: `
|
||||||
|
<h1>1</h1>
|
||||||
|
<h1>2</h1>
|
||||||
|
<h1>3</h1>
|
||||||
|
<h1>5</h1>
|
||||||
|
<h1>10</h1>
|
||||||
|
<h1>20</h1>
|
||||||
|
<h1>30</h1>
|
||||||
|
<h1>6</h1>
|
||||||
|
`
|
||||||
|
};
|
||||||
@ -0,0 +1,15 @@
|
|||||||
|
<script>
|
||||||
|
let [first, second, ...[third, ...[, fifth]]] = [1, 2, 3, 4, 5];
|
||||||
|
let [one, two, ...[three, ...{ length }]] = [10, 20, 30, 40, 50, 60, 70, 80, 90];
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<h1>{first}</h1>
|
||||||
|
<h1>{second}</h1>
|
||||||
|
<h1>{third}</h1>
|
||||||
|
<h1>{fifth}</h1>
|
||||||
|
|
||||||
|
<h1>{one}</h1>
|
||||||
|
<h1>{two}</h1>
|
||||||
|
<h1>{three}</h1>
|
||||||
|
<h1>{length}</h1>
|
||||||
|
|
||||||
@ -0,0 +1,69 @@
|
|||||||
|
export default {
|
||||||
|
props: {
|
||||||
|
thePromise: new Promise(_ => {})
|
||||||
|
},
|
||||||
|
|
||||||
|
html: `
|
||||||
|
loading...
|
||||||
|
`,
|
||||||
|
|
||||||
|
async test({ assert, component, target }) {
|
||||||
|
await (component.thePromise = Promise.resolve([1, 2, 3, 4, 5, 6, 7, 8]));
|
||||||
|
|
||||||
|
assert.htmlEqual(
|
||||||
|
target.innerHTML,
|
||||||
|
`
|
||||||
|
<p>a: 1</p>
|
||||||
|
<p>b: 2</p>
|
||||||
|
<p>c: 5</p>
|
||||||
|
<p>remaining length: 3</p>
|
||||||
|
`
|
||||||
|
);
|
||||||
|
|
||||||
|
await (component.thePromise = Promise.resolve([9, 10, 11, 12, 13, 14, 15]));
|
||||||
|
|
||||||
|
assert.htmlEqual(
|
||||||
|
target.innerHTML,
|
||||||
|
`
|
||||||
|
<p>a: 9</p>
|
||||||
|
<p>b: 10</p>
|
||||||
|
<p>c: 13</p>
|
||||||
|
<p>remaining length: 2</p>
|
||||||
|
`
|
||||||
|
);
|
||||||
|
|
||||||
|
try {
|
||||||
|
await (component.thePromise = Promise.reject([16, 17, 18, 19, 20, 21, 22]));
|
||||||
|
} catch (e) {
|
||||||
|
// do nothing
|
||||||
|
}
|
||||||
|
|
||||||
|
assert.htmlEqual(
|
||||||
|
target.innerHTML,
|
||||||
|
`
|
||||||
|
<p>c: 16</p>
|
||||||
|
<p>d: 17</p>
|
||||||
|
<p>e: 18</p>
|
||||||
|
<p>f: 19</p>
|
||||||
|
<p>g: 22</p>
|
||||||
|
`
|
||||||
|
);
|
||||||
|
|
||||||
|
try {
|
||||||
|
await (component.thePromise = Promise.reject([23, 24, 25, 26, 27, 28, 29, 30, 31]));
|
||||||
|
} catch (e) {
|
||||||
|
// do nothing
|
||||||
|
}
|
||||||
|
|
||||||
|
assert.htmlEqual(
|
||||||
|
target.innerHTML,
|
||||||
|
`
|
||||||
|
<p>c: 23</p>
|
||||||
|
<p>d: 24</p>
|
||||||
|
<p>e: 25</p>
|
||||||
|
<p>f: 26</p>
|
||||||
|
<p>g: 29</p>
|
||||||
|
`
|
||||||
|
);
|
||||||
|
}
|
||||||
|
};
|
||||||
@ -0,0 +1,18 @@
|
|||||||
|
<script>
|
||||||
|
export let thePromise;
|
||||||
|
</script>
|
||||||
|
|
||||||
|
{#await thePromise}
|
||||||
|
loading...
|
||||||
|
{:then [ a, b, ...[,, c, ...{ length } ]]}
|
||||||
|
<p>a: {a}</p>
|
||||||
|
<p>b: {b}</p>
|
||||||
|
<p>c: {c}</p>
|
||||||
|
<p>remaining length: {length}</p>
|
||||||
|
{:catch [c, ...[d, e, f, ...[,,g]]]}
|
||||||
|
<p>c: {c}</p>
|
||||||
|
<p>d: {d}</p>
|
||||||
|
<p>e: {e}</p>
|
||||||
|
<p>f: {f}</p>
|
||||||
|
<p>g: {g}</p>
|
||||||
|
{/await}
|
||||||
@ -0,0 +1,19 @@
|
|||||||
|
export default {
|
||||||
|
html: '<div>12 120 70, 30+4=34</div>',
|
||||||
|
async test({ component, target, assert }) {
|
||||||
|
component.promise1 = Promise.resolve({width: 5, height: 6});
|
||||||
|
component.promise2 = Promise.reject({width: 6, height: 7});
|
||||||
|
|
||||||
|
await Promise.resolve();
|
||||||
|
assert.htmlEqual(target.innerHTML, `
|
||||||
|
<div>30 300 110, 50+6=56</div>
|
||||||
|
<div>42 420 130, 60+7=67</div>
|
||||||
|
`);
|
||||||
|
|
||||||
|
component.constant = 20;
|
||||||
|
assert.htmlEqual(target.innerHTML, `
|
||||||
|
<div>30 600 220, 100+6=106</div>
|
||||||
|
<div>42 840 260, 120+7=127</div>
|
||||||
|
`);
|
||||||
|
}
|
||||||
|
};
|
||||||
@ -0,0 +1,23 @@
|
|||||||
|
<script>
|
||||||
|
export let promise1 = {width: 3, height: 4};
|
||||||
|
export let promise2 = {width: 5, height: 7};
|
||||||
|
export let constant = 10;
|
||||||
|
|
||||||
|
function calculate(width, height, constant) {
|
||||||
|
return { area: width * height, volume: width * height * constant };
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
{#await promise1 then { width, height }}
|
||||||
|
{@const {area, volume} = calculate(width, height, constant)}
|
||||||
|
{@const perimeter = (width + height) * constant}
|
||||||
|
{@const [_width, ...[_height, ...[sum]]] = [width * constant, height, width * constant + height]}
|
||||||
|
<div>{area} {volume} {perimeter}, {_width}+{_height}={sum}</div>
|
||||||
|
{/await}
|
||||||
|
|
||||||
|
{#await promise2 catch { width, height }}
|
||||||
|
{@const {area, volume} = calculate(width, height, constant)}
|
||||||
|
{@const perimeter = (width + height) * constant}
|
||||||
|
{@const [_width, ...[_height, ...[sum]]] = [width * constant, height, width * constant + height]}
|
||||||
|
<div>{area} {volume} {perimeter}, {_width}+{_height}={sum}</div>
|
||||||
|
{/await}
|
||||||
@ -0,0 +1,30 @@
|
|||||||
|
export default {
|
||||||
|
html: `
|
||||||
|
<div>12 120 70, 30+4=34</div>
|
||||||
|
<div>35 350 120, 50+7=57</div>
|
||||||
|
<div>48 480 140, 60+8=68</div>
|
||||||
|
`,
|
||||||
|
async test({ component, target, assert }) {
|
||||||
|
component.constant = 20;
|
||||||
|
|
||||||
|
assert.htmlEqual(target.innerHTML, `
|
||||||
|
<div>12 240 140, 60+4=64</div>
|
||||||
|
<div>35 700 240, 100+7=107</div>
|
||||||
|
<div>48 960 280, 120+8=128</div>
|
||||||
|
`);
|
||||||
|
|
||||||
|
component.boxes = [
|
||||||
|
{width: 3, height: 4},
|
||||||
|
{width: 4, height: 5},
|
||||||
|
{width: 5, height: 6},
|
||||||
|
{width: 6, height: 7}
|
||||||
|
];
|
||||||
|
|
||||||
|
assert.htmlEqual(target.innerHTML, `
|
||||||
|
<div>12 240 140, 60+4=64</div>
|
||||||
|
<div>20 400 180, 80+5=85</div>
|
||||||
|
<div>30 600 220, 100+6=106</div>
|
||||||
|
<div>42 840 260, 120+7=127</div>
|
||||||
|
`);
|
||||||
|
}
|
||||||
|
};
|
||||||
@ -0,0 +1,19 @@
|
|||||||
|
<script>
|
||||||
|
export let boxes = [
|
||||||
|
{width: 3, height: 4},
|
||||||
|
{width: 5, height: 7},
|
||||||
|
{width: 6, height: 8},
|
||||||
|
];
|
||||||
|
export let constant = 10;
|
||||||
|
|
||||||
|
function calculate(width, height, constant) {
|
||||||
|
return { area: width * height, volume: width * height * constant };
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
{#each boxes as { width, height }}
|
||||||
|
{@const {area, volume} = calculate(width, height, constant)}
|
||||||
|
{@const perimeter = (width + height) * constant}
|
||||||
|
{@const [_width, ...[_height, ...[sum]]] = [width * constant, height, width * constant + height]}
|
||||||
|
<div>{area} {volume} {perimeter}, {_width}+{_height}={sum}</div>
|
||||||
|
{/each}
|
||||||
@ -0,0 +1,25 @@
|
|||||||
|
<script>
|
||||||
|
import { writable } from 'svelte/store';
|
||||||
|
|
||||||
|
const THING = { a: 1, b: { c: 2, d: [3, 4, writable(5), 6, 7] }, e: [6], h: 8 };
|
||||||
|
const default_g = 9;
|
||||||
|
|
||||||
|
export let { a, b: { c, d: [d_one, ...[, ...[d_three, ...{ length }]]], f }, e: [e_one], g = default_g } = THING;
|
||||||
|
export const { a: A, b: { c: C } } = THING;
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
a: {a},
|
||||||
|
b: {typeof b},
|
||||||
|
c: {c},
|
||||||
|
d_one: {d_one},
|
||||||
|
d_three: {$d_three},
|
||||||
|
length: {length},
|
||||||
|
f: {f},
|
||||||
|
g: {g},
|
||||||
|
e: {typeof e},
|
||||||
|
e_one: {e_one},
|
||||||
|
A: {A},
|
||||||
|
C: {C}
|
||||||
|
</div>
|
||||||
|
<div>{JSON.stringify(THING)}</div>
|
||||||
@ -0,0 +1,9 @@
|
|||||||
|
export default {
|
||||||
|
html: `
|
||||||
|
<div>a: 1, b: undefined, c: 2, d_one: 3, d_three: 5, length: 2, f: undefined, g: 9, e: undefined, e_one: 6, A: 1, C: 2</div>
|
||||||
|
<div>{"a":1,"b":{"c":2,"d":[3,4,{},6,7]},"e":[6],"h":8}</div>
|
||||||
|
<br>
|
||||||
|
<div>a: a, b: undefined, c: 2, d_one: d_one, d_three: 5, length: 7, f: f, g: g, e: undefined, e_one: 6, A: 1, C: 2</div>
|
||||||
|
<div>{"a":1,"b":{"c":2,"d":[3,4,{},6,7]},"e":[6],"h":8}</div>
|
||||||
|
`
|
||||||
|
};
|
||||||
@ -0,0 +1,7 @@
|
|||||||
|
<script>
|
||||||
|
import A from './A.svelte';
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<A />
|
||||||
|
<br />
|
||||||
|
<A a="a" d_one="d_one" list_one="list_one" f="f" list_two_b="list_two_b" g="g" A="A" C="C" length={7} />
|
||||||
@ -0,0 +1,23 @@
|
|||||||
|
<script>
|
||||||
|
import { writable } from "svelte/store";
|
||||||
|
|
||||||
|
let default_b = 5;
|
||||||
|
const LIST = [1, 2, 3, { a: 4 }, [5, writable(6), writable(7), 8]];
|
||||||
|
export const [
|
||||||
|
x,
|
||||||
|
,
|
||||||
|
...[, { a: list_two_a, b: list_two_b = default_b }, [, ...{ length: y }]]
|
||||||
|
] = LIST;
|
||||||
|
export let [
|
||||||
|
l,
|
||||||
|
m,
|
||||||
|
,
|
||||||
|
...[{ a: n, b: o = default_b }, [p, q, ...[r, ...{ length: s }]]]
|
||||||
|
] = LIST;
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
x: {x}, list_two_a: {list_two_a}, list_two_b: {list_two_b}, y: {y}, l: {l}, m: {m},
|
||||||
|
n: {n}, o: {o}, p: {p}, q: {$q}, r: {$r}, s: {s}
|
||||||
|
</div>
|
||||||
|
<div>{JSON.stringify(LIST)}</div>
|
||||||
@ -0,0 +1,19 @@
|
|||||||
|
export default {
|
||||||
|
html: `
|
||||||
|
<div>x: 1, list_two_a: 4, list_two_b: 5, y: 3, l: 1, m: 2, n: 4, o: 5, p: 5, q: 6, r: 7, s: 1</div>
|
||||||
|
<div>[1,2,3,{"a":4},[5,{},{},8]]</div>
|
||||||
|
<br><div>x: 1, list_two_a: 4, list_two_b: 5, y: 3, l: l, m: m, n: n, o: o, p: p, q: q, r: r, s: s</div>
|
||||||
|
<div>[1,2,3,{"a":4},[5,{},{},8]]</div>
|
||||||
|
`,
|
||||||
|
|
||||||
|
async test({ component, assert, target }) {
|
||||||
|
await component.update();
|
||||||
|
|
||||||
|
assert.htmlEqual(target.innerHTML, `
|
||||||
|
<div>x: 1, list_two_a: 4, list_two_b: 5, y: 3, l: 1, m: 2, n: 4, o: 5, p: 5, q: 6, r: 7, s: 1</div>
|
||||||
|
<div>[1,2,3,{"a":4},[5,{},{},8]]</div>
|
||||||
|
<br><div>x: 1, list_two_a: 4, list_two_b: 5, y: 3, l: LL, m: MM, n: NN, o: OO, p: PP, q: QQ, r: RR, s: SS</div>
|
||||||
|
<div>[1,2,3,{"a":4},[5,{},{},8]]</div>
|
||||||
|
`);
|
||||||
|
}
|
||||||
|
};
|
||||||
@ -0,0 +1,36 @@
|
|||||||
|
<script>
|
||||||
|
import A from "./A.svelte";
|
||||||
|
import { writable } from "svelte/store";
|
||||||
|
|
||||||
|
let x = "x",
|
||||||
|
list_two_a = "list_two_a",
|
||||||
|
list_two_b = "list_two_b",
|
||||||
|
y = writable("y"),
|
||||||
|
l = "l",
|
||||||
|
m = "m",
|
||||||
|
n = "n",
|
||||||
|
o = "o",
|
||||||
|
p = "p",
|
||||||
|
q = writable("q"),
|
||||||
|
r = writable("r"),
|
||||||
|
s = "s";
|
||||||
|
|
||||||
|
export function update() {
|
||||||
|
x = "XX";
|
||||||
|
list_two_a = "LIST_TWO_A";
|
||||||
|
list_two_b = "LIST_TWO_B";
|
||||||
|
y = writable("YY");
|
||||||
|
l = "LL";
|
||||||
|
m = "MM";
|
||||||
|
n = "NN";
|
||||||
|
o = "OO";
|
||||||
|
p = "PP";
|
||||||
|
q = writable("QQ");
|
||||||
|
r = writable("RR");
|
||||||
|
s = "SS";
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<A />
|
||||||
|
<br />
|
||||||
|
<A {x} {list_two_a} {list_two_b} {y} {l} {m} {n} {o} {p} {q} {r} {s} />
|
||||||
@ -0,0 +1,31 @@
|
|||||||
|
export default {
|
||||||
|
before_test() {
|
||||||
|
Object.defineProperties(window.document, {
|
||||||
|
fullscreenElement: {
|
||||||
|
value: null,
|
||||||
|
configurable: true
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
|
// copied from window-binding
|
||||||
|
// there's some kind of weird bug with this test... it compiles with the wrong require.extensions hook for some bizarre reason
|
||||||
|
skip_if_ssr: true,
|
||||||
|
|
||||||
|
async test({ assert, target, window, component }) {
|
||||||
|
const event = new window.Event('fullscreenchange');
|
||||||
|
|
||||||
|
const div = target.querySelector('div');
|
||||||
|
|
||||||
|
Object.defineProperties(window.document, {
|
||||||
|
fullscreenElement: {
|
||||||
|
value: div,
|
||||||
|
configurable: true
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
window.document.dispatchEvent(event);
|
||||||
|
|
||||||
|
assert.equal(component.fullscreen, div);
|
||||||
|
}
|
||||||
|
};
|
||||||
@ -0,0 +1,7 @@
|
|||||||
|
<script>
|
||||||
|
export let fullscreen;
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<svelte:document bind:fullscreenElement={fullscreen}/>
|
||||||
|
|
||||||
|
<div />
|
||||||
@ -0,0 +1,24 @@
|
|||||||
|
export default {
|
||||||
|
props: {
|
||||||
|
array: [
|
||||||
|
[1, 2, 3, 4, 5],
|
||||||
|
[6, 7, 8],
|
||||||
|
[9, 10, 11, 12],
|
||||||
|
[13, 14, 15, 16, 17, 18, 19, 20, 21, 22]
|
||||||
|
]
|
||||||
|
},
|
||||||
|
|
||||||
|
html: `
|
||||||
|
<p>First: 1, Second: 2, Third: 3, Elements remaining: 2</p>
|
||||||
|
<p>First: 6, Second: 7, Third: 8, Elements remaining: 0</p>
|
||||||
|
<p>First: 9, Second: 10, Third: 11, Elements remaining: 1</p>
|
||||||
|
<p>First: 13, Second: 14, Third: 15, Elements remaining: 7</p>
|
||||||
|
`,
|
||||||
|
|
||||||
|
test({ assert, component, target }) {
|
||||||
|
component.array = [[23, 24, 25, 26, 27, 28, 29]];
|
||||||
|
assert.htmlEqual( target.innerHTML, `
|
||||||
|
<p>First: 23, Second: 24, Third: 25, Elements remaining: 4</p>
|
||||||
|
`);
|
||||||
|
}
|
||||||
|
};
|
||||||
@ -0,0 +1,9 @@
|
|||||||
|
<script>
|
||||||
|
export let array;
|
||||||
|
</script>
|
||||||
|
|
||||||
|
{#each array as [first, second, ...[third, ...{ length }]]}
|
||||||
|
<p>
|
||||||
|
First: {first}, Second: {second}, Third: {third}, Elements remaining: {length}
|
||||||
|
</p>
|
||||||
|
{/each}
|
||||||
@ -1,8 +1,10 @@
|
|||||||
<script>
|
<script>
|
||||||
export let width;
|
export let width;
|
||||||
export let height;
|
export let height;
|
||||||
|
export let devicePixelRatio;
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<svelte:window bind:innerWidth={width} bind:innerHeight={height}/>
|
<svelte:window bind:innerWidth={width} bind:innerHeight={height} bind:devicePixelRatio={devicePixelRatio}/>
|
||||||
|
|
||||||
<div>{width}x{height}</div>
|
<div>{width}x{height}</div>
|
||||||
|
<div>{devicePixelRatio}</div>
|
||||||
|
|||||||
@ -1,8 +1,8 @@
|
|||||||
[
|
[
|
||||||
{
|
{
|
||||||
"code": "invalid-rest-eachblock-binding",
|
"code": "invalid-rest-eachblock-binding",
|
||||||
"message": "...rest operator will create a new object and binding propagation with original object will not work",
|
"message": "The rest operator (...) will create a new object and binding 'rest' with the original object will not work",
|
||||||
"start": { "line": 8, "column": 24 },
|
"start": { "line": 8, "column": 27 },
|
||||||
"end": { "line": 8, "column": 31 }
|
"end": { "line": 8, "column": 31 }
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
|
|||||||
@ -1,8 +1,8 @@
|
|||||||
[
|
[
|
||||||
{
|
{
|
||||||
"code": "invalid-rest-eachblock-binding",
|
"code": "invalid-rest-eachblock-binding",
|
||||||
"message": "...rest operator will create a new object and binding propagation with original object will not work",
|
"message": "The rest operator (...) will create a new object and binding 'rest' with the original object will not work",
|
||||||
"start": { "line": 5, "column": 32 },
|
"start": { "line": 5, "column": 35 },
|
||||||
"end": { "line": 5, "column": 39 }
|
"end": { "line": 5, "column": 39 }
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
|
|||||||
@ -0,0 +1,9 @@
|
|||||||
|
<script>
|
||||||
|
const a = [[1, 2, 3, 4, 5]];
|
||||||
|
</script>
|
||||||
|
|
||||||
|
{#each a as [first, second, ...[third, ...{ length }]]}
|
||||||
|
<p>{first}, {second}, {length}</p>
|
||||||
|
<input bind:value={third} />
|
||||||
|
<input bind:value={length} />
|
||||||
|
{/each}
|
||||||
@ -0,0 +1,26 @@
|
|||||||
|
[
|
||||||
|
{
|
||||||
|
"code": "invalid-rest-eachblock-binding",
|
||||||
|
"end": {
|
||||||
|
"column": 37,
|
||||||
|
"line": 5
|
||||||
|
},
|
||||||
|
"message": "The rest operator (...) will create a new object and binding 'third' with the original object will not work",
|
||||||
|
"start": {
|
||||||
|
"column": 32,
|
||||||
|
"line": 5
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"code": "invalid-rest-eachblock-binding",
|
||||||
|
"end": {
|
||||||
|
"column": 50,
|
||||||
|
"line": 5
|
||||||
|
},
|
||||||
|
"message": "The rest operator (...) will create a new object and binding 'length' with the original object will not work",
|
||||||
|
"start": {
|
||||||
|
"column": 44,
|
||||||
|
"line": 5
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
@ -1,8 +1,8 @@
|
|||||||
[
|
[
|
||||||
{
|
{
|
||||||
"code": "invalid-rest-eachblock-binding",
|
"code": "invalid-rest-eachblock-binding",
|
||||||
"message": "...rest operator will create a new object and binding propagation with original object will not work",
|
"message": "The rest operator (...) will create a new object and binding 'rest' with the original object will not work",
|
||||||
"start": { "line": 5, "column": 25 },
|
"start": { "line": 5, "column": 28 },
|
||||||
"end": { "line": 5, "column": 32 }
|
"end": { "line": 5, "column": 32 }
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
|
|||||||
Loading…
Reference in new issue