mirror of https://github.com/sveltejs/svelte
Rich Harris
3 years ago
parent
fd4a52c894
commit
86f931d4e0
@ -1,20 +0,0 @@
|
||||
<script>
|
||||
export let testcase;
|
||||
export let value = { foo: 'kid' };
|
||||
if (testcase === 'init_update') {
|
||||
value = { foo: 'kid' }
|
||||
}
|
||||
if (testcase === 'init_mutate') {
|
||||
value.foo = 'kid'
|
||||
}
|
||||
$: if (testcase === 'reactive_update') {
|
||||
value = { foo: 'kid' }
|
||||
}
|
||||
$: if (testcase === 'reactive_mutate') {
|
||||
value.foo = 'kid'
|
||||
}
|
||||
export let updates = [];
|
||||
$: updates = [...updates, value];
|
||||
</script>
|
||||
|
||||
<div>child: {value?.foo} | updates: {updates.length}</div>
|
||||
@ -1,11 +0,0 @@
|
||||
<script>
|
||||
import Child from './Child.svelte';
|
||||
export let child;
|
||||
export let testcase;
|
||||
export let value;
|
||||
export let updates = [];
|
||||
$: updates = [...updates, value];
|
||||
</script>
|
||||
|
||||
<div>parent: {value?.foo} | updates: {updates.length}</div>
|
||||
<Child bind:value bind:this={child} {testcase} />
|
||||
@ -1,47 +0,0 @@
|
||||
import { test } from '../../test';
|
||||
|
||||
export default test({
|
||||
get props() {
|
||||
return {
|
||||
configs: [
|
||||
{ testcase: 'parent_override_child_default', value: { foo: 'mon' } },
|
||||
{ testcase: 'child_default_populate_parent', value: undefined },
|
||||
{ testcase: 'reactive_update', value: { foo: 'mon' } },
|
||||
{ testcase: 'reactive_mutate', value: { foo: 'mon' } },
|
||||
{ testcase: 'init_update', value: { foo: 'mon' } },
|
||||
{ testcase: 'init_mutate', value: { foo: 'mon' } }
|
||||
]
|
||||
};
|
||||
},
|
||||
|
||||
async test({ assert, component }) {
|
||||
const parents = component.parents;
|
||||
|
||||
// first testcase should update once
|
||||
// the rest should update twice
|
||||
let p;
|
||||
p = parents['parent_override_child_default'];
|
||||
assert.deepEqual(p.value, { foo: 'mon' });
|
||||
assert.equal(p.updates.length, 1);
|
||||
|
||||
p = parents['child_default_populate_parent'];
|
||||
assert.deepEqual(p.value, { foo: 'kid' });
|
||||
assert.equal(p.updates.length, 2);
|
||||
|
||||
p = parents['reactive_update'];
|
||||
assert.deepEqual(p.value, { foo: 'kid' });
|
||||
assert.equal(p.updates.length, 2);
|
||||
|
||||
p = parents['reactive_mutate'];
|
||||
assert.deepEqual(p.value, { foo: 'kid' });
|
||||
assert.equal(p.updates.length, 2);
|
||||
|
||||
p = parents['init_update'];
|
||||
assert.deepEqual(p.value, { foo: 'kid' });
|
||||
assert.equal(p.updates.length, 2);
|
||||
|
||||
p = parents['init_mutate'];
|
||||
assert.deepEqual(p.value, { foo: 'kid' });
|
||||
assert.equal(p.updates.length, 2);
|
||||
}
|
||||
});
|
||||
@ -1,9 +0,0 @@
|
||||
<script>
|
||||
import Parent from './Parent.svelte';
|
||||
export let configs = [];
|
||||
export let parents = {};
|
||||
</script>
|
||||
|
||||
{#each configs as config}
|
||||
<Parent bind:this={parents[config.testcase]} value={config.value} testcase={config.testcase} />
|
||||
{/each}
|
||||
@ -1,12 +0,0 @@
|
||||
<script>
|
||||
export let bar = 1;
|
||||
export let baz = 2;
|
||||
|
||||
export function double() {
|
||||
bar = bar * 2;
|
||||
baz = baz * 2;
|
||||
}
|
||||
</script>
|
||||
|
||||
<p>bar in Foo: {bar}</p>
|
||||
<p>baz in Foo: {baz}</p>
|
||||
@ -1,20 +0,0 @@
|
||||
import { test } from '../../test';
|
||||
|
||||
export default test({
|
||||
async test({ assert, component }) {
|
||||
const { foo, p } = component;
|
||||
|
||||
/** @type {string[]} */
|
||||
const values = [];
|
||||
|
||||
Object.defineProperty(p.childNodes[0], 'nodeValue', {
|
||||
set(value) {
|
||||
values.push(value);
|
||||
}
|
||||
});
|
||||
|
||||
await foo.double();
|
||||
|
||||
assert.deepEqual(values, ['6']);
|
||||
}
|
||||
});
|
||||
@ -1,12 +0,0 @@
|
||||
<script>
|
||||
import Foo from './Foo.svelte';
|
||||
|
||||
export let p;
|
||||
|
||||
export let foo;
|
||||
export let bar;
|
||||
export let baz;
|
||||
</script>
|
||||
|
||||
<Foo bind:this={foo} bind:bar bind:baz/>
|
||||
<p bind:this={p}>{bar + baz}</p>
|
||||
@ -1,4 +0,0 @@
|
||||
<script>
|
||||
let foo = 42;
|
||||
export { foo as bar };
|
||||
</script>
|
||||
@ -1,7 +0,0 @@
|
||||
import { test } from '../../test';
|
||||
|
||||
export default test({
|
||||
html: `
|
||||
<div>42</div>
|
||||
`
|
||||
});
|
||||
@ -1,8 +0,0 @@
|
||||
<script>
|
||||
import Widget from './Widget.svelte';
|
||||
let bar;
|
||||
</script>
|
||||
|
||||
<Widget bind:bar/>
|
||||
|
||||
<div>{bar}</div>
|
||||
@ -1,18 +0,0 @@
|
||||
<script>
|
||||
import Two from './Two.svelte';
|
||||
|
||||
export let list;
|
||||
export let i;
|
||||
|
||||
function handle_click() {
|
||||
list = [...list, {}];
|
||||
}
|
||||
</script>
|
||||
|
||||
{#each list as item, j}
|
||||
<Two bind:value={item.value} {i} {j}/>
|
||||
{/each}
|
||||
|
||||
<button on:click={handle_click}>
|
||||
click me
|
||||
</button>
|
||||
@ -1,4 +0,0 @@
|
||||
<script>
|
||||
export let i, j;
|
||||
export let value = `${i}:${j}`;
|
||||
</script>
|
||||
@ -1,29 +0,0 @@
|
||||
import { test } from '../../test';
|
||||
|
||||
export default test({
|
||||
html: `
|
||||
<button>click me</button>
|
||||
<button>click me</button>
|
||||
|
||||
<p>{"value":"0:0"}</p>
|
||||
<p></p>
|
||||
`,
|
||||
|
||||
async test({ assert, target, window }) {
|
||||
const button = target.querySelectorAll('button')[1];
|
||||
|
||||
await button.dispatchEvent(new window.Event('click', { bubbles: true }));
|
||||
await Promise.resolve();
|
||||
|
||||
assert.htmlEqual(
|
||||
target.innerHTML,
|
||||
`
|
||||
<button>click me</button>
|
||||
<button>click me</button>
|
||||
|
||||
<p>{"value":"0:0"}</p>
|
||||
<p>{"value":"1:0"}</p>
|
||||
`
|
||||
);
|
||||
}
|
||||
});
|
||||
@ -1,14 +0,0 @@
|
||||
<script>
|
||||
import One from "./One.svelte";
|
||||
|
||||
const obj = {
|
||||
a: [{}],
|
||||
b: []
|
||||
};
|
||||
</script>
|
||||
|
||||
<One bind:list={obj.a} i={0}/>
|
||||
<One bind:list={obj.b} i={1}/>
|
||||
|
||||
<p>{obj.a.map(JSON.stringify)}</p>
|
||||
<p>{obj.b.map(JSON.stringify)}</p>
|
||||
@ -1,18 +0,0 @@
|
||||
<script>
|
||||
import Two from './Two.svelte';
|
||||
|
||||
export let list;
|
||||
export let i;
|
||||
|
||||
function handle_click() {
|
||||
list = [...list, {}];
|
||||
}
|
||||
</script>
|
||||
|
||||
{#each list as item, j}
|
||||
<Two bind:value={item.value} {i} {j}/>
|
||||
{/each}
|
||||
|
||||
<button on:click={handle_click}>
|
||||
click me
|
||||
</button>
|
||||
@ -1,4 +0,0 @@
|
||||
<script>
|
||||
export let i, j;
|
||||
export let value = { i, j };
|
||||
</script>
|
||||
@ -1,29 +0,0 @@
|
||||
import { test } from '../../test';
|
||||
|
||||
export default test({
|
||||
html: `
|
||||
<button>click me</button>
|
||||
<button>click me</button>
|
||||
|
||||
<p>{"value":{"i":0,"j":0}}</p>
|
||||
<p></p>
|
||||
`,
|
||||
|
||||
async test({ assert, target, window }) {
|
||||
const button = target.querySelectorAll('button')[1];
|
||||
|
||||
await button.dispatchEvent(new window.Event('click', { bubbles: true }));
|
||||
await Promise.resolve();
|
||||
|
||||
assert.htmlEqual(
|
||||
target.innerHTML,
|
||||
`
|
||||
<button>click me</button>
|
||||
<button>click me</button>
|
||||
|
||||
<p>{"value":{"i":0,"j":0}}</p>
|
||||
<p>{"value":{"i":1,"j":0}}</p>
|
||||
`
|
||||
);
|
||||
}
|
||||
});
|
||||
@ -1,14 +0,0 @@
|
||||
<script>
|
||||
import One from "./One.svelte";
|
||||
|
||||
const obj = {
|
||||
a: [{}],
|
||||
b: []
|
||||
};
|
||||
</script>
|
||||
|
||||
<One bind:list={obj.a} i={0}/>
|
||||
<One bind:list={obj.b} i={1}/>
|
||||
|
||||
<p>{obj.a.map(JSON.stringify)}</p>
|
||||
<p>{obj.b.map(JSON.stringify)}</p>
|
||||
@ -1,5 +0,0 @@
|
||||
<script>
|
||||
export let y = 'bar';
|
||||
</script>
|
||||
|
||||
<p>y: {y}</p>
|
||||
@ -1,3 +0,0 @@
|
||||
<script>
|
||||
export let x = true;
|
||||
</script>
|
||||
@ -1,5 +0,0 @@
|
||||
<script>
|
||||
export let y = 'foo';
|
||||
</script>
|
||||
|
||||
<p>y: {y}</p>
|
||||
@ -1,26 +0,0 @@
|
||||
import { test } from '../../test';
|
||||
|
||||
export default test({
|
||||
// This test failed in Svelte 4, because the Bar y binding is activated before the
|
||||
// Baz x binding, meaning that by the time Foo is created, we already
|
||||
// have a value for y which Foo won't override. Easily worked around,
|
||||
// probably impossible to 'fix', so this test is left here for info
|
||||
// purposes but will probably remain skipped indefinitely - or rather,
|
||||
// it's okay if it needs to be skipped again sometime in the future.
|
||||
html: `
|
||||
<p>y: foo</p>
|
||||
<p>y: foo</p>
|
||||
`,
|
||||
|
||||
test({ assert, component, target }) {
|
||||
component.x = false;
|
||||
|
||||
assert.htmlEqual(
|
||||
target.innerHTML,
|
||||
`
|
||||
<p>y: foo</p>
|
||||
<p>y: foo</p>
|
||||
`
|
||||
);
|
||||
}
|
||||
});
|
||||
@ -1,18 +0,0 @@
|
||||
<script>
|
||||
import Foo from './Foo.svelte';
|
||||
import Bar from './Bar.svelte';
|
||||
import Baz from './Baz.svelte';
|
||||
|
||||
export let y;
|
||||
export let x;
|
||||
</script>
|
||||
|
||||
<p>y: {y}</p>
|
||||
|
||||
<Baz bind:x/>
|
||||
|
||||
{#if x}
|
||||
<Foo bind:y/>
|
||||
{:else}
|
||||
<Bar bind:y/>
|
||||
{/if}
|
||||
@ -1,5 +0,0 @@
|
||||
<script>
|
||||
export let y = 'bar';
|
||||
</script>
|
||||
|
||||
<p>y: {y}</p>
|
||||
@ -1,3 +0,0 @@
|
||||
<script>
|
||||
export let x = true;
|
||||
</script>
|
||||
@ -1,5 +0,0 @@
|
||||
<script>
|
||||
export let y = 'foo';
|
||||
</script>
|
||||
|
||||
<p>y: {y}</p>
|
||||
@ -1,20 +0,0 @@
|
||||
import { test } from '../../test';
|
||||
|
||||
export default test({
|
||||
html: `
|
||||
<p>y: bar</p>
|
||||
<p>y: bar</p>
|
||||
`,
|
||||
|
||||
test({ assert, component, target }) {
|
||||
component.x = false;
|
||||
|
||||
assert.htmlEqual(
|
||||
target.innerHTML,
|
||||
`
|
||||
<p>y: bar</p>
|
||||
<p>y: bar</p>
|
||||
`
|
||||
);
|
||||
}
|
||||
});
|
||||
@ -1,18 +0,0 @@
|
||||
<script>
|
||||
import Foo from './Foo.svelte';
|
||||
import Bar from './Bar.svelte';
|
||||
import Baz from './Baz.svelte';
|
||||
|
||||
export let y;
|
||||
export let x;
|
||||
</script>
|
||||
|
||||
<p>y: {y}</p>
|
||||
|
||||
{#if x}
|
||||
<Foo bind:y/>
|
||||
{:else}
|
||||
<Bar bind:y/>
|
||||
{/if}
|
||||
|
||||
<Baz bind:x/>
|
||||
@ -1,5 +0,0 @@
|
||||
<script>
|
||||
export let x = 'no';
|
||||
</script>
|
||||
|
||||
<p>Bar: {x}</p>
|
||||
@ -1,5 +0,0 @@
|
||||
<script>
|
||||
export let x = 'yes';
|
||||
</script>
|
||||
|
||||
<p>Foo: {x}</p>
|
||||
@ -1,42 +0,0 @@
|
||||
import { test } from '../../test';
|
||||
|
||||
export default test({
|
||||
html: `
|
||||
<p>Foo: yes</p>
|
||||
<p>x in parent: yes</p>
|
||||
`,
|
||||
|
||||
async test({ assert, component, target }) {
|
||||
component.a = false;
|
||||
|
||||
assert.htmlEqual(
|
||||
target.innerHTML,
|
||||
`
|
||||
<p>Bar: yes</p>
|
||||
<p>x in parent: yes</p>
|
||||
`
|
||||
);
|
||||
|
||||
component.a = true;
|
||||
assert.equal(component.x, 'yes');
|
||||
component.x = undefined;
|
||||
|
||||
assert.htmlEqual(
|
||||
target.innerHTML,
|
||||
`
|
||||
<p>Foo: </p>
|
||||
<p>x in parent: </p>
|
||||
`
|
||||
);
|
||||
|
||||
component.a = false;
|
||||
|
||||
assert.htmlEqual(
|
||||
target.innerHTML,
|
||||
`
|
||||
<p>Bar: no</p>
|
||||
<p>x in parent: no</p>
|
||||
`
|
||||
);
|
||||
}
|
||||
});
|
||||
@ -1,15 +0,0 @@
|
||||
<script>
|
||||
import Foo from './Foo.svelte';
|
||||
import Bar from './Bar.svelte';
|
||||
|
||||
export let a = true;
|
||||
export let x;
|
||||
</script>
|
||||
|
||||
{#if a}
|
||||
<Foo bind:x/>
|
||||
{:else}
|
||||
<Bar bind:x/>
|
||||
{/if}
|
||||
|
||||
<p>x in parent: {x}</p>
|
||||
@ -1,5 +0,0 @@
|
||||
<script>
|
||||
export let x = 'no';
|
||||
</script>
|
||||
|
||||
<p>Bar: {x}</p>
|
||||
@ -1,5 +0,0 @@
|
||||
<script>
|
||||
export let x = 'yes';
|
||||
</script>
|
||||
|
||||
<p>Foo: {x}</p>
|
||||
@ -1,42 +0,0 @@
|
||||
import { test } from '../../test';
|
||||
|
||||
export default test({
|
||||
html: `
|
||||
<p>Foo: yes</p>
|
||||
<p>x in parent: yes</p>
|
||||
`,
|
||||
|
||||
async test({ assert, component, target }) {
|
||||
component.a = false;
|
||||
|
||||
assert.htmlEqual(
|
||||
target.innerHTML,
|
||||
`
|
||||
<p>Bar: yes</p>
|
||||
<p>x in parent: yes</p>
|
||||
`
|
||||
);
|
||||
|
||||
component.a = true;
|
||||
assert.equal(component.x, 'yes');
|
||||
component.x = undefined;
|
||||
|
||||
assert.htmlEqual(
|
||||
target.innerHTML,
|
||||
`
|
||||
<p>Foo: </p>
|
||||
<p>x in parent: </p>
|
||||
`
|
||||
);
|
||||
|
||||
component.a = false;
|
||||
|
||||
assert.htmlEqual(
|
||||
target.innerHTML,
|
||||
`
|
||||
<p>Bar: no</p>
|
||||
<p>x in parent: no</p>
|
||||
`
|
||||
);
|
||||
}
|
||||
});
|
||||
@ -1,11 +0,0 @@
|
||||
<script>
|
||||
import Foo from './Foo.svelte';
|
||||
import Bar from './Bar.svelte';
|
||||
|
||||
export let a = true;
|
||||
export let x;
|
||||
</script>
|
||||
|
||||
<svelte:component this="{a ? Foo : Bar}" bind:x/>
|
||||
|
||||
<p>x in parent: {x}</p>
|
||||
@ -1,5 +0,0 @@
|
||||
<script>
|
||||
export let count = 0;
|
||||
</script>
|
||||
|
||||
<button on:click='{() => count += 1}'>+1</button>
|
||||
@ -1,36 +0,0 @@
|
||||
import { ok, test } from '../../test';
|
||||
|
||||
export default test({
|
||||
html: `
|
||||
<button>+1</button>
|
||||
<p>count: 10</p>
|
||||
`,
|
||||
|
||||
async test({ assert, component, target, window }) {
|
||||
const click = new window.MouseEvent('click', { bubbles: true });
|
||||
const button = target.querySelector('button');
|
||||
ok(button);
|
||||
|
||||
await button.dispatchEvent(click);
|
||||
|
||||
assert.equal(component.x, 11);
|
||||
assert.htmlEqual(
|
||||
target.innerHTML,
|
||||
`
|
||||
<button>+1</button>
|
||||
<p>count: 11</p>
|
||||
`
|
||||
);
|
||||
|
||||
await button.dispatchEvent(click);
|
||||
|
||||
assert.equal(component.x, 12);
|
||||
assert.htmlEqual(
|
||||
target.innerHTML,
|
||||
`
|
||||
<button>+1</button>
|
||||
<p>count: 12</p>
|
||||
`
|
||||
);
|
||||
}
|
||||
});
|
||||
@ -1,8 +0,0 @@
|
||||
<script>
|
||||
import Counter from './Counter.svelte';
|
||||
|
||||
export let x = 10;
|
||||
</script>
|
||||
|
||||
<Counter bind:count={x}/>
|
||||
<p>count: {x}</p>
|
||||
@ -1,5 +0,0 @@
|
||||
<script>
|
||||
export let value = '';
|
||||
</script>
|
||||
|
||||
<input bind:value />
|
||||
@ -1,71 +0,0 @@
|
||||
import { test } from '../../test';
|
||||
|
||||
export default test({
|
||||
html: `
|
||||
<input />
|
||||
<input />
|
||||
<div></div>
|
||||
`,
|
||||
ssrHtml: `
|
||||
<input value=""/>
|
||||
<input value=""/>
|
||||
<div></div>
|
||||
`,
|
||||
|
||||
async test({ assert, component, target, window }) {
|
||||
let count = 0;
|
||||
component.callback = () => {
|
||||
count++;
|
||||
};
|
||||
|
||||
const [input1, input2] = target.querySelectorAll('input');
|
||||
|
||||
input1.value = '1';
|
||||
await input1.dispatchEvent(new window.Event('input'));
|
||||
await Promise.resolve();
|
||||
|
||||
assert.htmlEqual(
|
||||
target.innerHTML,
|
||||
`
|
||||
<input />
|
||||
<input />
|
||||
<div>1</div>
|
||||
`
|
||||
);
|
||||
assert.equal(input1.value, '1');
|
||||
assert.equal(input2.value, '1');
|
||||
assert.equal(count, 1);
|
||||
|
||||
input2.value = '123';
|
||||
await input2.dispatchEvent(new window.Event('input'));
|
||||
await Promise.resolve();
|
||||
|
||||
assert.htmlEqual(
|
||||
target.innerHTML,
|
||||
`
|
||||
<input />
|
||||
<input />
|
||||
<div>123</div>
|
||||
`
|
||||
);
|
||||
assert.equal(input1.value, '123');
|
||||
assert.equal(input2.value, '123');
|
||||
assert.equal(count, 2);
|
||||
|
||||
input1.value = '456';
|
||||
await input1.dispatchEvent(new window.Event('input'));
|
||||
await Promise.resolve();
|
||||
|
||||
assert.htmlEqual(
|
||||
target.innerHTML,
|
||||
`
|
||||
<input />
|
||||
<input />
|
||||
<div>456</div>
|
||||
`
|
||||
);
|
||||
assert.equal(input1.value, '456');
|
||||
assert.equal(input2.value, '456');
|
||||
assert.equal(count, 3);
|
||||
}
|
||||
});
|
||||
@ -1,18 +0,0 @@
|
||||
<script>
|
||||
import { writable } from 'svelte/store';
|
||||
import Input from './Input.svelte';
|
||||
|
||||
let value = writable({ value: '' });
|
||||
|
||||
export let callback = () => {};
|
||||
|
||||
value.subscribe(() => {
|
||||
callback();
|
||||
})
|
||||
</script>
|
||||
|
||||
<input bind:value={$value.value} />
|
||||
|
||||
<Input bind:value={$value.value}/>
|
||||
|
||||
<div>{$value.value}</div>
|
||||
@ -1,5 +0,0 @@
|
||||
<script>
|
||||
export let count = 0;
|
||||
</script>
|
||||
|
||||
<button on:click='{() => count += 1}'>+1</button>
|
||||
@ -1,36 +0,0 @@
|
||||
import { ok, test } from '../../test';
|
||||
|
||||
export default test({
|
||||
html: `
|
||||
<button>+1</button>
|
||||
<p>count: 0</p>
|
||||
`,
|
||||
|
||||
async test({ assert, component, target, window }) {
|
||||
const click = new window.MouseEvent('click', { bubbles: true });
|
||||
const button = target.querySelector('button');
|
||||
ok(button);
|
||||
|
||||
await button.dispatchEvent(click);
|
||||
|
||||
assert.equal(component.x, 1);
|
||||
assert.htmlEqual(
|
||||
target.innerHTML,
|
||||
`
|
||||
<button>+1</button>
|
||||
<p>count: 1</p>
|
||||
`
|
||||
);
|
||||
|
||||
await button.dispatchEvent(click);
|
||||
|
||||
assert.equal(component.x, 2);
|
||||
assert.htmlEqual(
|
||||
target.innerHTML,
|
||||
`
|
||||
<button>+1</button>
|
||||
<p>count: 2</p>
|
||||
`
|
||||
);
|
||||
}
|
||||
});
|
||||
@ -1,8 +0,0 @@
|
||||
<script>
|
||||
import Counter from './Counter.svelte';
|
||||
|
||||
export let x;
|
||||
</script>
|
||||
|
||||
<Counter bind:count={x}/>
|
||||
<p>count: {x}</p>
|
||||
@ -1,3 +0,0 @@
|
||||
<script>
|
||||
export let value = 'foo';
|
||||
</script>
|
||||
@ -1,10 +0,0 @@
|
||||
import { test } from '../../test';
|
||||
|
||||
export default test({
|
||||
skip_if_ssr: 'permanent',
|
||||
|
||||
html: `
|
||||
<p>Reactive: foo</p>
|
||||
<p>Value: foo</p>
|
||||
`
|
||||
});
|
||||
@ -1,9 +0,0 @@
|
||||
<script>
|
||||
import Widget from './Widget.svelte';
|
||||
let value;
|
||||
$: reactive = value;
|
||||
</script>
|
||||
|
||||
<Widget bind:value/>
|
||||
<p>Reactive: {reactive}</p>
|
||||
<p>Value: {value}</p>
|
||||
@ -1,5 +0,0 @@
|
||||
<script>
|
||||
export let foo = 'green';
|
||||
</script>
|
||||
|
||||
<p>green {foo}</p>
|
||||
@ -1,5 +0,0 @@
|
||||
<script>
|
||||
export let foo = 'red';
|
||||
</script>
|
||||
|
||||
<p>red {foo}</p>
|
||||
@ -1,36 +0,0 @@
|
||||
import { test } from '../../test';
|
||||
|
||||
export default test({
|
||||
get props() {
|
||||
return { x: true };
|
||||
},
|
||||
|
||||
html: `
|
||||
<p>parent green</p>
|
||||
<p>green green</p>
|
||||
`,
|
||||
|
||||
test({ assert, component, target }) {
|
||||
component.foo = undefined;
|
||||
component.x = false;
|
||||
|
||||
assert.htmlEqual(
|
||||
target.innerHTML,
|
||||
`
|
||||
<p>parent red</p>
|
||||
<p>red red</p>
|
||||
`
|
||||
);
|
||||
|
||||
component.foo = undefined;
|
||||
component.x = true;
|
||||
|
||||
assert.htmlEqual(
|
||||
target.innerHTML,
|
||||
`
|
||||
<p>parent green</p>
|
||||
<p>green green</p>
|
||||
`
|
||||
);
|
||||
}
|
||||
});
|
||||
@ -1,10 +0,0 @@
|
||||
<script>
|
||||
import Green from './Green.svelte';
|
||||
import Red from './Red.svelte';
|
||||
|
||||
export let foo;
|
||||
export let x;
|
||||
</script>
|
||||
|
||||
<p>parent {foo}</p>
|
||||
<svelte:component this="{x ? Green : Red}" bind:foo />
|
||||
@ -1,20 +1,17 @@
|
||||
<script>
|
||||
let { readonly, readonlyWithDefault = 1, binding, bindingWithDefault = 1 } = $props();
|
||||
let { readonly, readonlyWithDefault = 1, binding } = $props();
|
||||
</script>
|
||||
|
||||
<p>
|
||||
readonly: {readonly}
|
||||
readonlyWithDefault: {readonlyWithDefault}
|
||||
binding: {binding}
|
||||
bindingWithDefault: {bindingWithDefault}
|
||||
</p>
|
||||
|
||||
<button on:click={() => {
|
||||
binding = 5;
|
||||
bindingWithDefault = 5;
|
||||
}}>set bindings to 5</button>
|
||||
|
||||
<button on:click={() => {
|
||||
binding = undefined;
|
||||
bindingWithDefault = undefined;
|
||||
}}>set bindings to undefined</button>
|
||||
|
||||
Loading…
Reference in new issue