mirror of https://github.com/sveltejs/svelte
Conduitry
6 years ago
commit
71c397d3c1
@ -0,0 +1,73 @@
|
|||||||
|
import { INode } from '../../../nodes/interfaces';
|
||||||
|
import { trim_end, trim_start } from '../../../../utils/trim';
|
||||||
|
import { link } from '../../../../utils/link';
|
||||||
|
|
||||||
|
// similar logic from `compile/render_dom/wrappers/Fragment`
|
||||||
|
// We want to remove trailing whitespace inside an element/component/block,
|
||||||
|
// *unless* there is no whitespace between this node and its next sibling
|
||||||
|
export default function remove_whitespace_children(children: INode[], next?: INode): INode[] {
|
||||||
|
const nodes: INode[] = [];
|
||||||
|
let last_child: INode;
|
||||||
|
let i = children.length;
|
||||||
|
while (i--) {
|
||||||
|
const child = children[i];
|
||||||
|
|
||||||
|
if (child.type === 'Text') {
|
||||||
|
if (child.should_skip()) {
|
||||||
|
continue;
|
||||||
|
}
|
||||||
|
|
||||||
|
let { data } = child;
|
||||||
|
|
||||||
|
if (nodes.length === 0) {
|
||||||
|
const should_trim = next
|
||||||
|
? next.type === 'Text' &&
|
||||||
|
/^\s/.test(next.data) &&
|
||||||
|
trimmable_at(child, next)
|
||||||
|
: !child.has_ancestor('EachBlock');
|
||||||
|
|
||||||
|
if (should_trim) {
|
||||||
|
data = trim_end(data);
|
||||||
|
if (!data) continue;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// glue text nodes (which could e.g. be separated by comments) together
|
||||||
|
if (last_child && last_child.type === 'Text') {
|
||||||
|
last_child.data = data + last_child.data;
|
||||||
|
continue;
|
||||||
|
}
|
||||||
|
|
||||||
|
nodes.unshift(child);
|
||||||
|
link(last_child, last_child = child);
|
||||||
|
} else {
|
||||||
|
nodes.unshift(child);
|
||||||
|
link(last_child, last_child = child);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const first = nodes[0];
|
||||||
|
if (first && first.type === 'Text') {
|
||||||
|
first.data = trim_start(first.data);
|
||||||
|
if (!first.data) {
|
||||||
|
first.var = null;
|
||||||
|
nodes.shift();
|
||||||
|
|
||||||
|
if (nodes[0]) {
|
||||||
|
nodes[0].prev = null;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return nodes;
|
||||||
|
}
|
||||||
|
|
||||||
|
function trimmable_at(child: INode, next_sibling: INode): boolean {
|
||||||
|
// Whitespace is trimmable if one of the following is true:
|
||||||
|
// The child and its sibling share a common nearest each block (not at an each block boundary)
|
||||||
|
// The next sibling's previous node is an each block
|
||||||
|
return (
|
||||||
|
next_sibling.find_nearest(/EachBlock/) ===
|
||||||
|
child.find_nearest(/EachBlock/) || next_sibling.prev.type === 'EachBlock'
|
||||||
|
);
|
||||||
|
}
|
||||||
@ -0,0 +1,5 @@
|
|||||||
|
export const reserved_keywords = new Set(["$$props", "$$restProps"]);
|
||||||
|
|
||||||
|
export function is_reserved_keyword(name) {
|
||||||
|
return reserved_keywords.has(name);
|
||||||
|
}
|
||||||
@ -0,0 +1,4 @@
|
|||||||
|
export function link<T extends { next?: T; prev?: T }>(next: T, prev: T) {
|
||||||
|
prev.next = next;
|
||||||
|
if (next) next.prev = prev;
|
||||||
|
}
|
||||||
@ -0,0 +1 @@
|
|||||||
|
<div>Hello world</div>
|
||||||
@ -0,0 +1,2 @@
|
|||||||
|
<main>This should be thrown away</main>
|
||||||
|
<div>hello</div>
|
||||||
@ -0,0 +1 @@
|
|||||||
|
export default {};
|
||||||
@ -0,0 +1 @@
|
|||||||
|
<div>Hello world</div>
|
||||||
@ -0,0 +1 @@
|
|||||||
|
<div>Hello world</div>
|
||||||
@ -0,0 +1 @@
|
|||||||
|
<main>This should be thrown away</main>
|
||||||
@ -0,0 +1 @@
|
|||||||
|
export default {};
|
||||||
@ -0,0 +1 @@
|
|||||||
|
<div>Hello world</div>
|
||||||
@ -0,0 +1,12 @@
|
|||||||
|
<script>
|
||||||
|
export let a;
|
||||||
|
export function b() {}
|
||||||
|
export let c = 1;
|
||||||
|
|
||||||
|
$: length = Object.keys($$restProps).length;
|
||||||
|
$: values = Object.values($$restProps);
|
||||||
|
</script>
|
||||||
|
<div>Length: {length}</div>
|
||||||
|
<div>Values: {values.join(',')}</div>
|
||||||
|
|
||||||
|
<div {...$$restProps} />
|
||||||
@ -0,0 +1,54 @@
|
|||||||
|
export default {
|
||||||
|
props: {
|
||||||
|
a: 3,
|
||||||
|
b: 4,
|
||||||
|
c: 5,
|
||||||
|
d: 6
|
||||||
|
},
|
||||||
|
html: `
|
||||||
|
<div>Length: 3</div>
|
||||||
|
<div>Values: 4,5,1</div>
|
||||||
|
<div d="4" e="5" foo="1"></div>
|
||||||
|
<button></button><button></button><button></button><button></button>
|
||||||
|
`,
|
||||||
|
async test({ assert, target, window, }) {
|
||||||
|
const [btn1, btn2, btn3, btn4] = target.querySelectorAll('button');
|
||||||
|
const clickEvent = new window.MouseEvent('click');
|
||||||
|
|
||||||
|
await btn1.dispatchEvent(clickEvent);
|
||||||
|
|
||||||
|
assert.htmlEqual(target.innerHTML, `
|
||||||
|
<div>Length: 3</div>
|
||||||
|
<div>Values: 4,5,1</div>
|
||||||
|
<div d="4" e="5" foo="1"></div>
|
||||||
|
<button></button><button></button><button></button><button></button>
|
||||||
|
`);
|
||||||
|
|
||||||
|
await btn2.dispatchEvent(clickEvent);
|
||||||
|
|
||||||
|
assert.htmlEqual(target.innerHTML, `
|
||||||
|
<div>Length: 3</div>
|
||||||
|
<div>Values: 34,5,1</div>
|
||||||
|
<div d="34" e="5" foo="1"></div>
|
||||||
|
<button></button><button></button><button></button><button></button>
|
||||||
|
`);
|
||||||
|
|
||||||
|
await btn3.dispatchEvent(clickEvent);
|
||||||
|
|
||||||
|
assert.htmlEqual(target.innerHTML, `
|
||||||
|
<div>Length: 3</div>
|
||||||
|
<div>Values: 34,5,31</div>
|
||||||
|
<div d="34" e="5" foo="31"></div>
|
||||||
|
<button></button><button></button><button></button><button></button>
|
||||||
|
`);
|
||||||
|
|
||||||
|
await btn4.dispatchEvent(clickEvent);
|
||||||
|
|
||||||
|
assert.htmlEqual(target.innerHTML, `
|
||||||
|
<div>Length: 4</div>
|
||||||
|
<div>Values: 34,5,31,2</div>
|
||||||
|
<div d="34" e="5" foo="31" bar="2"></div>
|
||||||
|
<button></button><button></button><button></button><button></button>
|
||||||
|
`);
|
||||||
|
}
|
||||||
|
};
|
||||||
@ -0,0 +1,25 @@
|
|||||||
|
<script>
|
||||||
|
import App from './App.svelte';
|
||||||
|
let a = 1, b = 2, c = 3, d = 4, e = 5;
|
||||||
|
let f = { foo: 1 };
|
||||||
|
|
||||||
|
function updateProps() {
|
||||||
|
a = 31;
|
||||||
|
b = 32;
|
||||||
|
}
|
||||||
|
function updateRest() {
|
||||||
|
d = 34;
|
||||||
|
}
|
||||||
|
function updateSpread() {
|
||||||
|
f.foo = 31;
|
||||||
|
}
|
||||||
|
function updateSpread2() {
|
||||||
|
f.bar = 2;
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<App {a} {b} {c} {d} {e} {...f} />
|
||||||
|
<button on:click={updateProps}></button>
|
||||||
|
<button on:click={updateRest}></button>
|
||||||
|
<button on:click={updateSpread}></button>
|
||||||
|
<button on:click={updateSpread2}></button>
|
||||||
@ -0,0 +1,13 @@
|
|||||||
|
<script>
|
||||||
|
export let a;
|
||||||
|
export function b() {}
|
||||||
|
export let c = 1;
|
||||||
|
|
||||||
|
$: length = Object.keys($$restProps).length;
|
||||||
|
$: values = Object.values($$restProps);
|
||||||
|
</script>
|
||||||
|
<div>Length: {length}</div>
|
||||||
|
<div>Values: {values.join(',')}</div>
|
||||||
|
|
||||||
|
<div {...$$restProps} />
|
||||||
|
<div {...$$props} />
|
||||||
@ -0,0 +1,60 @@
|
|||||||
|
export default {
|
||||||
|
props: {
|
||||||
|
a: 3,
|
||||||
|
b: 4,
|
||||||
|
c: 5,
|
||||||
|
d: 6
|
||||||
|
},
|
||||||
|
html: `
|
||||||
|
<div>Length: 3</div>
|
||||||
|
<div>Values: 4,5,1</div>
|
||||||
|
<div d="4" e="5" foo="1"></div>
|
||||||
|
<div a="1" b="2" c="3" d="4" e="5" foo="1"></div>
|
||||||
|
<button></button><button></button><button></button><button></button>
|
||||||
|
`,
|
||||||
|
|
||||||
|
async test({ assert, target, window, }) {
|
||||||
|
const [btn1, btn2, btn3, btn4] = target.querySelectorAll('button');
|
||||||
|
const clickEvent = new window.MouseEvent('click');
|
||||||
|
|
||||||
|
await btn1.dispatchEvent(clickEvent);
|
||||||
|
|
||||||
|
assert.htmlEqual(target.innerHTML, `
|
||||||
|
<div>Length: 3</div>
|
||||||
|
<div>Values: 4,5,1</div>
|
||||||
|
<div d="4" e="5" foo="1"></div>
|
||||||
|
<div a="31" b="32" c="3" d="4" e="5" foo="1"></div>
|
||||||
|
<button></button><button></button><button></button><button></button>
|
||||||
|
`);
|
||||||
|
|
||||||
|
await btn2.dispatchEvent(clickEvent);
|
||||||
|
|
||||||
|
assert.htmlEqual(target.innerHTML, `
|
||||||
|
<div>Length: 3</div>
|
||||||
|
<div>Values: 34,5,1</div>
|
||||||
|
<div d="34" e="5" foo="1"></div>
|
||||||
|
<div a="31" b="32" c="3" d="34" e="5" foo="1"></div>
|
||||||
|
<button></button><button></button><button></button><button></button>
|
||||||
|
`);
|
||||||
|
|
||||||
|
await btn3.dispatchEvent(clickEvent);
|
||||||
|
|
||||||
|
assert.htmlEqual(target.innerHTML, `
|
||||||
|
<div>Length: 3</div>
|
||||||
|
<div>Values: 34,5,31</div>
|
||||||
|
<div d="34" e="5" foo="31"></div>
|
||||||
|
<div a="31" b="32" c="3" d="34" e="5" foo="31"></div>
|
||||||
|
<button></button><button></button><button></button><button></button>
|
||||||
|
`);
|
||||||
|
|
||||||
|
await btn4.dispatchEvent(clickEvent);
|
||||||
|
|
||||||
|
assert.htmlEqual(target.innerHTML, `
|
||||||
|
<div>Length: 4</div>
|
||||||
|
<div>Values: 34,5,31,2</div>
|
||||||
|
<div d="34" e="5" foo="31" bar="2"></div>
|
||||||
|
<div a="31" b="32" c="3" d="34" e="5" foo="31" bar="2"></div>
|
||||||
|
<button></button><button></button><button></button><button></button>
|
||||||
|
`);
|
||||||
|
}
|
||||||
|
};
|
||||||
@ -0,0 +1,25 @@
|
|||||||
|
<script>
|
||||||
|
import App from './App.svelte';
|
||||||
|
let a = 1, b = 2, c = 3, d = 4, e = 5;
|
||||||
|
let f = { foo: 1 };
|
||||||
|
|
||||||
|
function updateProps() {
|
||||||
|
a = 31;
|
||||||
|
b = 32;
|
||||||
|
}
|
||||||
|
function updateRest() {
|
||||||
|
d = 34;
|
||||||
|
}
|
||||||
|
function updateSpread() {
|
||||||
|
f.foo = 31;
|
||||||
|
}
|
||||||
|
function updateSpread2() {
|
||||||
|
f.bar = 2;
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<App {a} {b} {c} {d} {e} {...f} />
|
||||||
|
<button on:click={updateProps}></button>
|
||||||
|
<button on:click={updateRest}></button>
|
||||||
|
<button on:click={updateSpread}></button>
|
||||||
|
<button on:click={updateSpread2}></button>
|
||||||
@ -0,0 +1,24 @@
|
|||||||
|
export default {
|
||||||
|
html: `
|
||||||
|
012345678910111213141516171819202122232425262728293031323334353637383940
|
||||||
|
expected: true
|
||||||
|
if: true
|
||||||
|
<button></button>
|
||||||
|
`,
|
||||||
|
|
||||||
|
async test({ assert, component, target, window }) {
|
||||||
|
const button = target.querySelector("button");
|
||||||
|
await button.dispatchEvent(new window.MouseEvent("click"));
|
||||||
|
|
||||||
|
assert.htmlEqual(
|
||||||
|
target.innerHTML,
|
||||||
|
`
|
||||||
|
112345678910111213141516171819202122232425262728293031323334353637383940
|
||||||
|
expected: false
|
||||||
|
if: false
|
||||||
|
<div></div>
|
||||||
|
<button></button>
|
||||||
|
`
|
||||||
|
);
|
||||||
|
}
|
||||||
|
};
|
||||||
@ -0,0 +1,62 @@
|
|||||||
|
<script>
|
||||||
|
import { fade } from 'svelte/transition';
|
||||||
|
export let _a = [];
|
||||||
|
export let _0 = '0';
|
||||||
|
export let _1 = '1';
|
||||||
|
export let _2 = '2';
|
||||||
|
export let _3 = '3';
|
||||||
|
export let _4 = '4';
|
||||||
|
export let _5 = '5';
|
||||||
|
export let _6 = '6';
|
||||||
|
export let _7 = '7';
|
||||||
|
export let _8 = '8';
|
||||||
|
export let _9 = '9';
|
||||||
|
export let _10 = '10';
|
||||||
|
export let _11 = '11';
|
||||||
|
export let _12 = '12';
|
||||||
|
export let _13 = '13';
|
||||||
|
export let _14 = '14';
|
||||||
|
export let _15 = '15';
|
||||||
|
export let _16 = '16';
|
||||||
|
export let _17 = '17';
|
||||||
|
export let _18 = '18';
|
||||||
|
export let _19 = '19';
|
||||||
|
export let _20 = '20';
|
||||||
|
export let _21 = '21';
|
||||||
|
export let _22 = '22';
|
||||||
|
export let _23 = '23';
|
||||||
|
export let _24 = '24';
|
||||||
|
export let _25 = '25';
|
||||||
|
export let _26 = '26';
|
||||||
|
export let _27 = '27';
|
||||||
|
export let _28 = '28';
|
||||||
|
export let _29 = '29';
|
||||||
|
export let _30 = '30';
|
||||||
|
export let _31 = '31';
|
||||||
|
export let _32 = '32';
|
||||||
|
export let _33 = '33';
|
||||||
|
export let _34 = '34';
|
||||||
|
export let _35 = '35';
|
||||||
|
export let _36 = '36';
|
||||||
|
export let _37 = '37';
|
||||||
|
export let _38 = '38';
|
||||||
|
export let _39 = '39';
|
||||||
|
export let _40 = '40';
|
||||||
|
|
||||||
|
function update() {
|
||||||
|
_0 = '1';
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
|
||||||
|
{_0}{_1}{_2}{_3}{_4}{_5}{_6}{_7}{_8}{_9}{_10}{_11}{_12}{_13}{_14}{_15}{_16}{_17}{_18}{_19}{_20}{_21}{_22}{_23}{_24}{_25}{_26}{_27}{_28}{_29}{_30}{_31}{_32}{_33}{_34}{_35}{_36}{_37}{_38}{_39}{_40}
|
||||||
|
|
||||||
|
expected: {_a.indexOf(_0) && _0 === '0' && _1 === '1'}
|
||||||
|
{#if _a.indexOf(_0) && _0 === '0' && _1 === '1'}
|
||||||
|
if: true
|
||||||
|
{:else}
|
||||||
|
if: false
|
||||||
|
<div out:fade></div>
|
||||||
|
{/if}
|
||||||
|
|
||||||
|
<button on:click={update}></button>
|
||||||
@ -0,0 +1,9 @@
|
|||||||
|
<script>
|
||||||
|
let dummy = 0;
|
||||||
|
function increment () {
|
||||||
|
dummy = 1;
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<slot dummy={dummy}></slot>
|
||||||
|
<button on:click={increment}></button>
|
||||||
@ -0,0 +1,30 @@
|
|||||||
|
export default {
|
||||||
|
|
||||||
|
html: `
|
||||||
|
<p>_0_1_2_3_4_5_6_7_8_9_10_11_12_13_14_15_16_17_18_19_20_21_22_23_24_25_26_27_28_29_30_31_32_33_34_35_36_37_38_39_40</p>
|
||||||
|
<p>0</p>
|
||||||
|
<button></button>
|
||||||
|
`,
|
||||||
|
|
||||||
|
async test({ assert, component, target, window }) {
|
||||||
|
// change from inside
|
||||||
|
const button = target.querySelector('button');
|
||||||
|
await button.dispatchEvent(new window.MouseEvent('click'));
|
||||||
|
|
||||||
|
assert.htmlEqual(target.innerHTML, `
|
||||||
|
<p>_0_1_2_3_4_5_6_7_8_9_10_11_12_13_14_15_16_17_18_19_20_21_22_23_24_25_26_27_28_29_30_31_32_33_34_35_36_37_38_39_40</p>
|
||||||
|
<p>1</p>
|
||||||
|
<button></button>
|
||||||
|
`);
|
||||||
|
|
||||||
|
// change from outside
|
||||||
|
component._0 = 'a';
|
||||||
|
component._40 = 'b';
|
||||||
|
|
||||||
|
assert.htmlEqual(target.innerHTML, `
|
||||||
|
<p>a_1_2_3_4_5_6_7_8_9_10_11_12_13_14_15_16_17_18_19_20_21_22_23_24_25_26_27_28_29_30_31_32_33_34_35_36_37_38_39b</p>
|
||||||
|
<p>1</p>
|
||||||
|
<button></button>
|
||||||
|
`);
|
||||||
|
}
|
||||||
|
};
|
||||||
@ -0,0 +1,11 @@
|
|||||||
|
<script>
|
||||||
|
import Echo from './Echo.svelte';
|
||||||
|
|
||||||
|
export let _0 = '_0', _1 = '_1', _2 = '_2', _3 = '_3', _4 = '_4', _5 = '_5', _6 = '_6', _7 = '_7', _8 = '_8', _9 = '_9', _10 = '_10', _11 = '_11', _12 = '_12', _13 = '_13', _14 = '_14', _15 = '_15', _16 = '_16', _17 = '_17', _18 = '_18', _19 = '_19', _20 = '_20', _21 = '_21', _22 = '_22', _23 = '_23', _24 = '_24', _25 = '_25', _26 = '_26', _27 = '_27', _28 = '_28', _29 = '_29', _30 = '_30', _31 = '_31', _32 = '_32', _33 = '_33', _34 = '_34', _35 = '_35', _36 = '_36', _37 = '_37', _38 = '_38', _39 = '_39', _40 = '_40';
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<Echo let:dummy>
|
||||||
|
<p>{_0}{_1}{_2}{_3}{_4}{_5}{_6}{_7}{_8}{_9}{_10}{_11}{_12}{_13}{_14}{_15}{_16}{_17}{_18}{_19}{_20}{_21}{_22}{_23}{_24}{_25}{_26}{_27}{_28}{_29}{_30}{_31}{_32}{_33}{_34}{_35}{_36}{_37}{_38}{_39}{_40}</p>
|
||||||
|
<p>{dummy}</p>
|
||||||
|
</Echo>
|
||||||
|
|
||||||
@ -0,0 +1,11 @@
|
|||||||
|
<script>
|
||||||
|
export let _0 = '_0', _1 = '_1', _2 = '_2', _3 = '_3', _4 = '_4', _5 = '_5', _6 = '_6', _7 = '_7', _8 = '_8', _9 = '_9', _10 = '_10', _11 = '_11', _12 = '_12', _13 = '_13', _14 = '_14', _15 = '_15', _16 = '_16', _17 = '_17', _18 = '_18', _19 = '_19', _20 = '_20', _21 = '_21', _22 = '_22', _23 = '_23', _24 = '_24', _25 = '_25', _26 = '_26', _27 = '_27', _28 = '_28', _29 = '_29', _30 = '_30', _31 = '_31', _32 = '_32', _33 = '_33', _34 = '_34', _35 = '_35', _36 = '_36', _37 = '_37', _38 = '_38', _39 = '_39', _40 = '_40';
|
||||||
|
let dummy = 0;
|
||||||
|
function increment () {
|
||||||
|
dummy = 1;
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<p>{_0}{_1}{_2}{_3}{_4}{_5}{_6}{_7}{_8}{_9}{_10}{_11}{_12}{_13}{_14}{_15}{_16}{_17}{_18}{_19}{_20}{_21}{_22}{_23}{_24}{_25}{_26}{_27}{_28}{_29}{_30}{_31}{_32}{_33}{_34}{_35}{_36}{_37}{_38}{_39}{_40}</p>
|
||||||
|
<slot dummy={dummy}></slot>
|
||||||
|
<button on:click={increment}></button>
|
||||||
@ -0,0 +1,41 @@
|
|||||||
|
export default {
|
||||||
|
html: `
|
||||||
|
<p>_0_1_2_3_4_5_6_7_8_9_10_11_12_13_14_15_16_17_18_19_20_21_22_23_24_25_26_27_28_29_30_31_32_33_34_35_36_37_38_39_40</p>
|
||||||
|
<p>0</p>
|
||||||
|
<p>0</p>
|
||||||
|
<button></button>
|
||||||
|
`,
|
||||||
|
|
||||||
|
async test({ assert, component, target, window }) {
|
||||||
|
// change from inside
|
||||||
|
const button = target.querySelector('button');
|
||||||
|
await button.dispatchEvent(new window.MouseEvent('click'));
|
||||||
|
|
||||||
|
assert.htmlEqual(target.innerHTML, `
|
||||||
|
<p>_0_1_2_3_4_5_6_7_8_9_10_11_12_13_14_15_16_17_18_19_20_21_22_23_24_25_26_27_28_29_30_31_32_33_34_35_36_37_38_39_40</p>
|
||||||
|
<p>0</p>
|
||||||
|
<p>1</p>
|
||||||
|
<button></button>
|
||||||
|
`);
|
||||||
|
|
||||||
|
// change from outside
|
||||||
|
component._0 = 'a';
|
||||||
|
|
||||||
|
assert.htmlEqual(target.innerHTML, `
|
||||||
|
<p>_0_1_2_3_4_5_6_7_8_9_10_11_12_13_14_15_16_17_18_19_20_21_22_23_24_25_26_27_28_29_30_31_32_33_34_35_36_37_38_39_40</p>
|
||||||
|
<p>a</p>
|
||||||
|
<p>1</p>
|
||||||
|
<button></button>
|
||||||
|
`);
|
||||||
|
|
||||||
|
// change from outside through props
|
||||||
|
component._40 = 'b';
|
||||||
|
|
||||||
|
assert.htmlEqual(target.innerHTML, `
|
||||||
|
<p>_0_1_2_3_4_5_6_7_8_9_10_11_12_13_14_15_16_17_18_19_20_21_22_23_24_25_26_27_28_29_30_31_32_33_34_35_36_37_38_39b</p>
|
||||||
|
<p>a</p>
|
||||||
|
<p>1</p>
|
||||||
|
<button></button>
|
||||||
|
`);
|
||||||
|
}
|
||||||
|
};
|
||||||
@ -0,0 +1,12 @@
|
|||||||
|
<script>
|
||||||
|
import Echo from './Echo.svelte';
|
||||||
|
|
||||||
|
export let _0 = 0, _40;
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<Echo _40={_40} let:dummy>
|
||||||
|
<p>{_0}</p>
|
||||||
|
<p>{dummy}</p>
|
||||||
|
</Echo>
|
||||||
|
|
||||||
@ -0,0 +1,13 @@
|
|||||||
|
<script>
|
||||||
|
export let _0 = '_0', _1 = '_1', _2 = '_2', _3 = '_3', _4 = '_4', _5 = '_5', _6 = '_6', _7 = '_7', _8 = '_8', _9 = '_9', _10 = '_10', _11 = '_11', _12 = '_12', _13 = '_13', _14 = '_14', _15 = '_15', _16 = '_16', _17 = '_17', _18 = '_18', _19 = '_19', _20 = '_20', _21 = '_21', _22 = '_22', _23 = '_23', _24 = '_24', _25 = '_25', _26 = '_26', _27 = '_27', _28 = '_28', _29 = '_29', _30 = '_30', _31 = '_31', _32 = '_32', _33 = '_33', _34 = '_34', _35 = '_35', _36 = '_36', _37 = '_37', _38 = '_38', _39 = '_39', _40 = '_40';
|
||||||
|
export let b = 'b';
|
||||||
|
let dummy = 0;
|
||||||
|
function increment () {
|
||||||
|
dummy = 1;
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<p>{_0}{_1}{_2}{_3}{_4}{_5}{_6}{_7}{_8}{_9}{_10}{_11}{_12}{_13}{_14}{_15}{_16}{_17}{_18}{_19}{_20}{_21}{_22}{_23}{_24}{_25}{_26}{_27}{_28}{_29}{_30}{_31}{_32}{_33}{_34}{_35}{_36}{_37}{_38}{_39}{_40}</p>
|
||||||
|
<p>{b}</p>
|
||||||
|
<slot dummy={dummy}></slot>
|
||||||
|
<button on:click={increment}></button>
|
||||||
@ -0,0 +1,49 @@
|
|||||||
|
export default {
|
||||||
|
html: `
|
||||||
|
<p>_0_1_2_3_4_5_6_7_8_9_10_11_12_13_14_15_16_17_18_19_20_21_22_23_24_25_26_27_28_29_30_31_32_33_34_35_36_37_38_39_40</p>
|
||||||
|
<p>b</p>
|
||||||
|
<p>-0-1-2-3-4-5-6-7-8-9-10-11-12-13-14-15-16-17-18-19-20-21-22-23-24-25-26-27-28-29-30-31-32-33-34-35-36-37-38-39-40</p>
|
||||||
|
<p>0</p>
|
||||||
|
<p>0</p>
|
||||||
|
<button></button>
|
||||||
|
`,
|
||||||
|
|
||||||
|
async test({ assert, component, target, window }) {
|
||||||
|
// change from inside
|
||||||
|
const button = target.querySelector('button');
|
||||||
|
await button.dispatchEvent(new window.MouseEvent('click'));
|
||||||
|
|
||||||
|
assert.htmlEqual(target.innerHTML, `
|
||||||
|
<p>_0_1_2_3_4_5_6_7_8_9_10_11_12_13_14_15_16_17_18_19_20_21_22_23_24_25_26_27_28_29_30_31_32_33_34_35_36_37_38_39_40</p>
|
||||||
|
<p>b</p>
|
||||||
|
<p>-0-1-2-3-4-5-6-7-8-9-10-11-12-13-14-15-16-17-18-19-20-21-22-23-24-25-26-27-28-29-30-31-32-33-34-35-36-37-38-39-40</p>
|
||||||
|
<p>0</p>
|
||||||
|
<p>1</p>
|
||||||
|
<button></button>
|
||||||
|
`);
|
||||||
|
|
||||||
|
// change from outside
|
||||||
|
component.a = 'AA';
|
||||||
|
|
||||||
|
assert.htmlEqual(target.innerHTML, `
|
||||||
|
<p>_0_1_2_3_4_5_6_7_8_9_10_11_12_13_14_15_16_17_18_19_20_21_22_23_24_25_26_27_28_29_30_31_32_33_34_35_36_37_38_39_40</p>
|
||||||
|
<p>b</p>
|
||||||
|
<p>-0-1-2-3-4-5-6-7-8-9-10-11-12-13-14-15-16-17-18-19-20-21-22-23-24-25-26-27-28-29-30-31-32-33-34-35-36-37-38-39-40</p>
|
||||||
|
<p>AA</p>
|
||||||
|
<p>1</p>
|
||||||
|
<button></button>
|
||||||
|
`);
|
||||||
|
|
||||||
|
// change from outside through props
|
||||||
|
component.b = 'BB';
|
||||||
|
|
||||||
|
assert.htmlEqual(target.innerHTML, `
|
||||||
|
<p>_0_1_2_3_4_5_6_7_8_9_10_11_12_13_14_15_16_17_18_19_20_21_22_23_24_25_26_27_28_29_30_31_32_33_34_35_36_37_38_39_40</p>
|
||||||
|
<p>BB</p>
|
||||||
|
<p>-0-1-2-3-4-5-6-7-8-9-10-11-12-13-14-15-16-17-18-19-20-21-22-23-24-25-26-27-28-29-30-31-32-33-34-35-36-37-38-39-40</p>
|
||||||
|
<p>AA</p>
|
||||||
|
<p>1</p>
|
||||||
|
<button></button>
|
||||||
|
`);
|
||||||
|
}
|
||||||
|
};
|
||||||
@ -0,0 +1,13 @@
|
|||||||
|
<script>
|
||||||
|
import Echo from './Echo.svelte';
|
||||||
|
export let _0 = '-0', _1 = '-1', _2 = '-2', _3 = '-3', _4 = '-4', _5 = '-5', _6 = '-6', _7 = '-7', _8 = '-8', _9 = '-9', _10 = '-10', _11 = '-11', _12 = '-12', _13 = '-13', _14 = '-14', _15 = '-15', _16 = '-16', _17 = '-17', _18 = '-18', _19 = '-19', _20 = '-20', _21 = '-21', _22 = '-22', _23 = '-23', _24 = '-24', _25 = '-25', _26 = '-26', _27 = '-27', _28 = '-28', _29 = '-29', _30 = '-30', _31 = '-31', _32 = '-32', _33 = '-33', _34 = '-34', _35 = '-35', _36 = '-36', _37 = '-37', _38 = '-38', _39 = '-39', _40 = '-40';
|
||||||
|
export let a = 0, b;
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<Echo b={b} let:dummy>
|
||||||
|
<p>{_0}{_1}{_2}{_3}{_4}{_5}{_6}{_7}{_8}{_9}{_10}{_11}{_12}{_13}{_14}{_15}{_16}{_17}{_18}{_19}{_20}{_21}{_22}{_23}{_24}{_25}{_26}{_27}{_28}{_29}{_30}{_31}{_32}{_33}{_34}{_35}{_36}{_37}{_38}{_39}{_40}</p>
|
||||||
|
<p>{a}</p>
|
||||||
|
<p>{dummy}</p>
|
||||||
|
</Echo>
|
||||||
|
|
||||||
@ -0,0 +1,4 @@
|
|||||||
|
<div>
|
||||||
|
<slot><p class='default'>default fallback content</p></slot>
|
||||||
|
<slot name='bar'>bar fallback</slot>
|
||||||
|
</div>
|
||||||
@ -0,0 +1,13 @@
|
|||||||
|
export default {
|
||||||
|
html: `
|
||||||
|
<div>
|
||||||
|
<p class="default">default fallback content</p>
|
||||||
|
<input slot="bar">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<p class="default">default fallback content</p>
|
||||||
|
bar fallback
|
||||||
|
</div>
|
||||||
|
`
|
||||||
|
};
|
||||||
@ -0,0 +1,10 @@
|
|||||||
|
<script>
|
||||||
|
import Nested from "./Nested.svelte";
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<Nested>
|
||||||
|
<input slot="bar">
|
||||||
|
</Nested>
|
||||||
|
|
||||||
|
<Nested>
|
||||||
|
</Nested>
|
||||||
@ -0,0 +1 @@
|
|||||||
|
<slot name="slot2"></slot>
|
||||||
@ -0,0 +1,9 @@
|
|||||||
|
export default {
|
||||||
|
compileOptions: {
|
||||||
|
dev: true
|
||||||
|
},
|
||||||
|
warnings: [
|
||||||
|
'<Nested> received an unexpected slot "default".',
|
||||||
|
'<Nested> received an unexpected slot "slot1".'
|
||||||
|
]
|
||||||
|
};
|
||||||
@ -0,0 +1,7 @@
|
|||||||
|
<script>
|
||||||
|
import Nested from "./Nested.svelte";
|
||||||
|
</script>
|
||||||
|
<Nested>
|
||||||
|
<input slot="slot1">
|
||||||
|
<input slot="slot2">
|
||||||
|
</Nested>
|
||||||
@ -0,0 +1 @@
|
|||||||
|
Foo
|
||||||
@ -0,0 +1,9 @@
|
|||||||
|
export default {
|
||||||
|
compileOptions: {
|
||||||
|
dev: true
|
||||||
|
},
|
||||||
|
|
||||||
|
warnings: [
|
||||||
|
`<Foo> was created with unknown prop 'fo'`
|
||||||
|
]
|
||||||
|
};
|
||||||
@ -0,0 +1,5 @@
|
|||||||
|
<script>
|
||||||
|
import Foo from './Foo.svelte';
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<Foo fo="sho"/>
|
||||||
@ -0,0 +1,7 @@
|
|||||||
|
<script>
|
||||||
|
export let foo = undefined;
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div>{foo}</div>
|
||||||
|
<div>{JSON.stringify($$props)}</div>
|
||||||
@ -0,0 +1,7 @@
|
|||||||
|
export default {
|
||||||
|
compileOptions: {
|
||||||
|
dev: true
|
||||||
|
},
|
||||||
|
|
||||||
|
warnings: []
|
||||||
|
};
|
||||||
@ -0,0 +1,5 @@
|
|||||||
|
<script>
|
||||||
|
import Foo from './Foo.svelte';
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<Foo fo="sho"/>
|
||||||
@ -0,0 +1,37 @@
|
|||||||
|
export default {
|
||||||
|
props: {
|
||||||
|
animals: ['alpaca', 'baboon', 'capybara'],
|
||||||
|
foo: 'something else'
|
||||||
|
},
|
||||||
|
|
||||||
|
html: `
|
||||||
|
before
|
||||||
|
<p>alpaca</p>
|
||||||
|
<p>baboon</p>
|
||||||
|
<p>capybara</p>
|
||||||
|
after
|
||||||
|
`,
|
||||||
|
|
||||||
|
test({ assert, component, target }) {
|
||||||
|
component.animals = [];
|
||||||
|
assert.htmlEqual(target.innerHTML, `
|
||||||
|
before
|
||||||
|
<p>no animals, but rather something else</p>
|
||||||
|
after
|
||||||
|
`);
|
||||||
|
|
||||||
|
component.foo = 'something other';
|
||||||
|
assert.htmlEqual(target.innerHTML, `
|
||||||
|
before
|
||||||
|
<p>no animals, but rather something other</p>
|
||||||
|
after
|
||||||
|
`);
|
||||||
|
|
||||||
|
component.animals = ['wombat'];
|
||||||
|
assert.htmlEqual(target.innerHTML, `
|
||||||
|
before
|
||||||
|
<p>wombat</p>
|
||||||
|
after
|
||||||
|
`);
|
||||||
|
}
|
||||||
|
};
|
||||||
@ -0,0 +1,12 @@
|
|||||||
|
<script>
|
||||||
|
export let animals;
|
||||||
|
export let foo;
|
||||||
|
</script>
|
||||||
|
|
||||||
|
before
|
||||||
|
{#each animals as animal (animal)}
|
||||||
|
<p>{animal}</p>
|
||||||
|
{:else}
|
||||||
|
<p>no animals, but rather {foo}</p>
|
||||||
|
{/each}
|
||||||
|
after
|
||||||
@ -0,0 +1,37 @@
|
|||||||
|
export default {
|
||||||
|
props: {
|
||||||
|
animals: ['alpaca', 'baboon', 'capybara'],
|
||||||
|
foo: 'something else'
|
||||||
|
},
|
||||||
|
|
||||||
|
html: `
|
||||||
|
before
|
||||||
|
<p>alpaca</p>
|
||||||
|
<p>baboon</p>
|
||||||
|
<p>capybara</p>
|
||||||
|
after
|
||||||
|
`,
|
||||||
|
|
||||||
|
test({ assert, component, target }) {
|
||||||
|
component.animals = [];
|
||||||
|
assert.htmlEqual(target.innerHTML, `
|
||||||
|
before
|
||||||
|
<p>no animals, but rather something else</p>
|
||||||
|
after
|
||||||
|
`);
|
||||||
|
|
||||||
|
component.foo = 'something other';
|
||||||
|
assert.htmlEqual(target.innerHTML, `
|
||||||
|
before
|
||||||
|
<p>no animals, but rather something other</p>
|
||||||
|
after
|
||||||
|
`);
|
||||||
|
|
||||||
|
component.animals = ['wombat'];
|
||||||
|
assert.htmlEqual(target.innerHTML, `
|
||||||
|
before
|
||||||
|
<p>wombat</p>
|
||||||
|
after
|
||||||
|
`);
|
||||||
|
}
|
||||||
|
};
|
||||||
@ -0,0 +1,12 @@
|
|||||||
|
<script>
|
||||||
|
export let animals;
|
||||||
|
export let foo;
|
||||||
|
</script>
|
||||||
|
|
||||||
|
before
|
||||||
|
{#each animals as animal}
|
||||||
|
<p>{animal}</p>
|
||||||
|
{:else}
|
||||||
|
<p>no animals, but rather {foo}</p>
|
||||||
|
{/each}
|
||||||
|
after
|
||||||
@ -0,0 +1,7 @@
|
|||||||
|
<script>
|
||||||
|
export let count;
|
||||||
|
</script>
|
||||||
|
|
||||||
|
{#if count > 0}
|
||||||
|
<slot count={count-1}></slot>
|
||||||
|
{/if}
|
||||||
@ -0,0 +1,3 @@
|
|||||||
|
export default {
|
||||||
|
html: '5 4 3 2 1 0',
|
||||||
|
};
|
||||||
@ -0,0 +1,10 @@
|
|||||||
|
<script>
|
||||||
|
import Countdown from './Countdown.svelte';
|
||||||
|
export let count = 5;
|
||||||
|
</script>
|
||||||
|
|
||||||
|
{count}
|
||||||
|
|
||||||
|
<Countdown {count} let:count={i}>
|
||||||
|
<svelte:self count={i} />
|
||||||
|
</Countdown>
|
||||||
@ -0,0 +1,13 @@
|
|||||||
|
<script>
|
||||||
|
export let foo;
|
||||||
|
export let baz;
|
||||||
|
export let qux;
|
||||||
|
export let quux;
|
||||||
|
export let selected;
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<p>foo: {foo}</p>
|
||||||
|
<p>baz: {baz} ({typeof baz})</p>
|
||||||
|
<p>qux: {qux}</p>
|
||||||
|
<p>quux: {quux}</p>
|
||||||
|
<p>selected: {selected}</p>
|
||||||
@ -0,0 +1,76 @@
|
|||||||
|
export default {
|
||||||
|
props: {
|
||||||
|
list: [{
|
||||||
|
foo: 'lol',
|
||||||
|
baz: 40 + 2,
|
||||||
|
qux: 5,
|
||||||
|
quux: 'core'
|
||||||
|
}, {
|
||||||
|
foo: 'lolzz',
|
||||||
|
baz: 50 + 2,
|
||||||
|
qux: 1,
|
||||||
|
quux: 'quuxx'
|
||||||
|
}],
|
||||||
|
},
|
||||||
|
|
||||||
|
html: `
|
||||||
|
<div>
|
||||||
|
<p>foo: lol</p>
|
||||||
|
<p>baz: 42 (number)</p>
|
||||||
|
<p>qux: 0</p>
|
||||||
|
<p>quux: core</p>
|
||||||
|
<p>selected: true</p>
|
||||||
|
<p>foo: lolzz</p>
|
||||||
|
<p>baz: 52 (number)</p>
|
||||||
|
<p>qux: 0</p>
|
||||||
|
<p>quux: quuxx</p>
|
||||||
|
<p>selected: false</p>
|
||||||
|
</div>
|
||||||
|
`,
|
||||||
|
|
||||||
|
test({ assert, component, target }) {
|
||||||
|
component.list = [{
|
||||||
|
foo: 'lol',
|
||||||
|
baz: 40 + 3,
|
||||||
|
qux: 8,
|
||||||
|
quux: 'heart'
|
||||||
|
}, {
|
||||||
|
foo: 'lolzz',
|
||||||
|
baz: 50 + 3,
|
||||||
|
qux: 8,
|
||||||
|
quux: 'heartxx'
|
||||||
|
}];
|
||||||
|
|
||||||
|
assert.htmlEqual(target.innerHTML, `
|
||||||
|
<div>
|
||||||
|
<p>foo: lol</p>
|
||||||
|
<p>baz: 43 (number)</p>
|
||||||
|
<p>qux: 0</p>
|
||||||
|
<p>quux: heart</p>
|
||||||
|
<p>selected: true</p>
|
||||||
|
<p>foo: lolzz</p>
|
||||||
|
<p>baz: 53 (number)</p>
|
||||||
|
<p>qux: 0</p>
|
||||||
|
<p>quux: heartxx</p>
|
||||||
|
<p>selected: false</p>
|
||||||
|
</div>
|
||||||
|
`);
|
||||||
|
|
||||||
|
component.qux = 1;
|
||||||
|
|
||||||
|
assert.htmlEqual(target.innerHTML, `
|
||||||
|
<div>
|
||||||
|
<p>foo: lol</p>
|
||||||
|
<p>baz: 43 (number)</p>
|
||||||
|
<p>qux: 1</p>
|
||||||
|
<p>quux: heart</p>
|
||||||
|
<p>selected: false</p>
|
||||||
|
<p>foo: lolzz</p>
|
||||||
|
<p>baz: 53 (number)</p>
|
||||||
|
<p>qux: 1</p>
|
||||||
|
<p>quux: heartxx</p>
|
||||||
|
<p>selected: true</p>
|
||||||
|
</div>
|
||||||
|
`);
|
||||||
|
}
|
||||||
|
};
|
||||||
@ -0,0 +1,12 @@
|
|||||||
|
<script>
|
||||||
|
import Widget from './Widget.svelte';
|
||||||
|
|
||||||
|
export let list;
|
||||||
|
export let qux = 0;
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
{#each list as item, index (item.foo)}
|
||||||
|
<Widget {...item} qux={qux} selected={qux === index} />
|
||||||
|
{/each}
|
||||||
|
</div>
|
||||||
@ -0,0 +1 @@
|
|||||||
|
[]
|
||||||
@ -0,0 +1,7 @@
|
|||||||
|
<script>
|
||||||
|
const dummy = {
|
||||||
|
foo: 'bar'
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<input bind:value={dummy.foo}>
|
||||||
@ -0,0 +1,15 @@
|
|||||||
|
[{
|
||||||
|
"code": "invalid-binding",
|
||||||
|
"message": "Cannot bind to a variable which is not writable",
|
||||||
|
"pos": 61,
|
||||||
|
"start": {
|
||||||
|
"line": 5,
|
||||||
|
"column": 19,
|
||||||
|
"character": 61
|
||||||
|
},
|
||||||
|
"end": {
|
||||||
|
"line": 5,
|
||||||
|
"column": 24,
|
||||||
|
"character": 66
|
||||||
|
}
|
||||||
|
}]
|
||||||
@ -0,0 +1,5 @@
|
|||||||
|
<script>
|
||||||
|
const dummy = 'foo';
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<input bind:value={dummy}>
|
||||||
@ -0,0 +1,72 @@
|
|||||||
|
export default {
|
||||||
|
test(assert, vars) {
|
||||||
|
assert.deepEqual(vars, [
|
||||||
|
{
|
||||||
|
name: "a",
|
||||||
|
export_name: null,
|
||||||
|
injected: false,
|
||||||
|
module: true,
|
||||||
|
mutated: false,
|
||||||
|
reassigned: true,
|
||||||
|
referenced: false,
|
||||||
|
referenced_from_script: false,
|
||||||
|
writable: true
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "b",
|
||||||
|
export_name: null,
|
||||||
|
injected: false,
|
||||||
|
module: true,
|
||||||
|
mutated: true,
|
||||||
|
reassigned: false,
|
||||||
|
referenced: false,
|
||||||
|
referenced_from_script: false,
|
||||||
|
writable: true
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "c",
|
||||||
|
export_name: null,
|
||||||
|
injected: false,
|
||||||
|
module: true,
|
||||||
|
mutated: false,
|
||||||
|
reassigned: false,
|
||||||
|
referenced: false,
|
||||||
|
referenced_from_script: false,
|
||||||
|
writable: true
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "d",
|
||||||
|
export_name: null,
|
||||||
|
injected: false,
|
||||||
|
module: true,
|
||||||
|
mutated: false,
|
||||||
|
reassigned: false,
|
||||||
|
referenced: false,
|
||||||
|
referenced_from_script: false,
|
||||||
|
writable: true
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "c",
|
||||||
|
export_name: null,
|
||||||
|
injected: false,
|
||||||
|
module: false,
|
||||||
|
mutated: false,
|
||||||
|
reassigned: true,
|
||||||
|
referenced: false,
|
||||||
|
referenced_from_script: true,
|
||||||
|
writable: true
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "foo",
|
||||||
|
export_name: null,
|
||||||
|
injected: false,
|
||||||
|
module: false,
|
||||||
|
mutated: false,
|
||||||
|
reassigned: false,
|
||||||
|
referenced: false,
|
||||||
|
referenced_from_script: false,
|
||||||
|
writable: false
|
||||||
|
}
|
||||||
|
]);
|
||||||
|
}
|
||||||
|
};
|
||||||
@ -0,0 +1,18 @@
|
|||||||
|
<script context='module'>
|
||||||
|
let a = {};
|
||||||
|
let b = {};
|
||||||
|
let c = {};
|
||||||
|
let d = {};
|
||||||
|
</script>
|
||||||
|
<script>
|
||||||
|
let c = {};
|
||||||
|
|
||||||
|
a = 1;
|
||||||
|
b.x = 1;
|
||||||
|
|
||||||
|
function foo() {
|
||||||
|
let d = {};
|
||||||
|
c = 1;
|
||||||
|
d.x = 1;
|
||||||
|
}
|
||||||
|
</script>
|
||||||
Loading…
Reference in new issue