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