mirror of https://github.com/sveltejs/svelte
do not initialise slot fallback fragment unless necessary (#4514)
parent
0cde17a4ad
commit
82dce0c8fc
@ -0,0 +1,7 @@
|
|||||||
|
<script>
|
||||||
|
import { model } from "./store.svelte";
|
||||||
|
export let value = '';
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<input bind:value={$model} />
|
||||||
|
{value}
|
@ -0,0 +1,7 @@
|
|||||||
|
<script>
|
||||||
|
import Inner from "./Inner.svelte";
|
||||||
|
export let defaultValue = '';
|
||||||
|
export let slotProps = '';
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<slot {slotProps}><Inner value={defaultValue} /></slot>
|
@ -0,0 +1,39 @@
|
|||||||
|
export default {
|
||||||
|
html: `<input> <input> <input>`,
|
||||||
|
ssrHtml: `<input value="Blub"> <input value="Blub"> <input value="Blub">`,
|
||||||
|
|
||||||
|
async test({ assert, target, component, window }) {
|
||||||
|
const [input1, input2, inputFallback] = target.querySelectorAll("input");
|
||||||
|
|
||||||
|
assert.equal(component.getSubscriberCount(), 3);
|
||||||
|
|
||||||
|
input1.value = "a";
|
||||||
|
await input1.dispatchEvent(new window.Event("input"));
|
||||||
|
input1.value = "ab";
|
||||||
|
await input1.dispatchEvent(new window.Event("input"));
|
||||||
|
assert.equal(input1.value, "ab");
|
||||||
|
assert.equal(input2.value, "ab");
|
||||||
|
assert.equal(inputFallback.value, "ab");
|
||||||
|
|
||||||
|
component.props = "hello";
|
||||||
|
|
||||||
|
assert.htmlEqual(
|
||||||
|
target.innerHTML,
|
||||||
|
`
|
||||||
|
<input> hello
|
||||||
|
<input> hello
|
||||||
|
<input>
|
||||||
|
`
|
||||||
|
);
|
||||||
|
|
||||||
|
component.fallback = "world";
|
||||||
|
assert.htmlEqual(
|
||||||
|
target.innerHTML,
|
||||||
|
`
|
||||||
|
<input> hello
|
||||||
|
<input> hello
|
||||||
|
<input> world
|
||||||
|
`
|
||||||
|
);
|
||||||
|
}
|
||||||
|
};
|
@ -0,0 +1,23 @@
|
|||||||
|
<script>
|
||||||
|
import Outer from "./Outer.svelte";
|
||||||
|
import Inner from "./Inner.svelte";
|
||||||
|
import {model} from "./store.svelte";
|
||||||
|
|
||||||
|
export let props = '';
|
||||||
|
export let fallback = '';
|
||||||
|
|
||||||
|
export function getSubscriberCount() {
|
||||||
|
return model.getCount();
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<Outer slotProps={props} defaultValue={fallback} let:slotProps>
|
||||||
|
<Inner value={slotProps} />
|
||||||
|
</Outer>
|
||||||
|
|
||||||
|
<Outer slotProps={props} defaultValue={fallback} let:slotProps>
|
||||||
|
<Inner value={slotProps} />
|
||||||
|
</Outer>
|
||||||
|
|
||||||
|
<Outer slotProps={props} defaultValue={fallback}>
|
||||||
|
</Outer>
|
@ -0,0 +1,23 @@
|
|||||||
|
<script context="module">
|
||||||
|
let value = 'Blub';
|
||||||
|
let count = 0;
|
||||||
|
const subscribers = new Set();
|
||||||
|
export const model = {
|
||||||
|
subscribe(fn) {
|
||||||
|
subscribers.add(fn);
|
||||||
|
count ++;
|
||||||
|
fn(value);
|
||||||
|
return () => {
|
||||||
|
count--;
|
||||||
|
subscribers.delete(fn);
|
||||||
|
};
|
||||||
|
},
|
||||||
|
set(v) {
|
||||||
|
value = v;
|
||||||
|
subscribers.forEach(fn => fn(v));
|
||||||
|
},
|
||||||
|
getCount() {
|
||||||
|
return count;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
Loading…
Reference in new issue