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