mirror of https://github.com/sveltejs/svelte
fix: lazily create sources for Set (#11946)
* fix: create sources for initial values of Set * fix: create sources lazily on Set * fix: avoid creating sources if sizes are the same * chore: add test for size of Set * create iterator lazily * tidy up test * oops --------- Co-authored-by: Rich Harris <rich.harris@vercel.com>pull/11966/head
parent
d7b7a9d0bc
commit
48fa6587c9
@ -0,0 +1,5 @@
|
||||
---
|
||||
'svelte': patch
|
||||
---
|
||||
|
||||
fix: create sources on read for Set
|
@ -1,50 +1,28 @@
|
||||
import { flushSync } from '../../../../src/index-client';
|
||||
import { test } from '../../test';
|
||||
import { ok, test } from '../../test';
|
||||
|
||||
export default test({
|
||||
html: `<button>add</button><button>delete</button><button>clear</button>`,
|
||||
html: `<button>delete initial</button><button>add</button><button>delete</button><button>clear</button><div id="output"><p>1</p><div>0</div></div>`,
|
||||
|
||||
test({ assert, target }) {
|
||||
const [btn, btn2, btn3] = target.querySelectorAll('button');
|
||||
const [btn, btn2, btn3, btn4] = target.querySelectorAll('button');
|
||||
const output = target.querySelector('#output');
|
||||
ok(output);
|
||||
|
||||
flushSync(() => {
|
||||
btn?.click();
|
||||
});
|
||||
flushSync(() => btn?.click());
|
||||
assert.htmlEqual(output.innerHTML, `<p>0</p>`);
|
||||
|
||||
assert.htmlEqual(
|
||||
target.innerHTML,
|
||||
`<button>add</button><button>delete</button><button>clear</button><div>1</div>`
|
||||
);
|
||||
flushSync(() => btn2?.click());
|
||||
assert.htmlEqual(output.innerHTML, `<p>1</p><div>1</div>`);
|
||||
|
||||
flushSync(() => {
|
||||
btn?.click();
|
||||
});
|
||||
flushSync(() => btn2?.click());
|
||||
flushSync(() => btn2?.click());
|
||||
assert.htmlEqual(output.innerHTML, `<p>3</p><div>1</div><div>2</div><div>3</div>`);
|
||||
|
||||
flushSync(() => {
|
||||
btn?.click();
|
||||
});
|
||||
flushSync(() => btn3?.click());
|
||||
assert.htmlEqual(output.innerHTML, `<p>2</p><div>1</div><div>2</div>`);
|
||||
|
||||
assert.htmlEqual(
|
||||
target.innerHTML,
|
||||
`<button>add</button><button>delete</button><button>clear</button><div>1</div><div>2</div><div>3</div>`
|
||||
);
|
||||
|
||||
flushSync(() => {
|
||||
btn2?.click();
|
||||
});
|
||||
|
||||
assert.htmlEqual(
|
||||
target.innerHTML,
|
||||
`<button>add</button><button>delete</button><button>clear</button><div>1</div><div>2</div>`
|
||||
);
|
||||
|
||||
flushSync(() => {
|
||||
btn3?.click();
|
||||
});
|
||||
|
||||
assert.htmlEqual(
|
||||
target.innerHTML,
|
||||
`<button>add</button><button>delete</button><button>clear</button>`
|
||||
);
|
||||
flushSync(() => btn4?.click());
|
||||
assert.htmlEqual(output.innerHTML, `<p>0</p>`);
|
||||
}
|
||||
});
|
||||
|
@ -1,21 +1,18 @@
|
||||
<script>
|
||||
import {Set} from 'svelte/reactivity';
|
||||
import { Set } from 'svelte/reactivity';
|
||||
|
||||
let state = new Set();
|
||||
let state = new Set([0]);
|
||||
</script>
|
||||
|
||||
<button onclick={() => {
|
||||
state.add(state.size + 1);
|
||||
}}>add</button>
|
||||
<button onclick={() => state.delete(0)}>delete initial</button>
|
||||
<button onclick={() => state.add(state.size + 1)}>add</button>
|
||||
<button onclick={() => state.delete(state.size)}>delete</button>
|
||||
<button onclick={() => state.clear()}>clear</button>
|
||||
|
||||
<button onclick={() => {
|
||||
state.delete(state.size);
|
||||
}}>delete</button>
|
||||
<div id="output">
|
||||
<p>{state.size}</p>
|
||||
|
||||
<button onclick={() => {
|
||||
state.clear();
|
||||
}}>clear</button>
|
||||
|
||||
{#each state as item}
|
||||
<div>{item}</div>
|
||||
{/each}
|
||||
{#each state as item}
|
||||
<div>{item}</div>
|
||||
{/each}
|
||||
</div>
|
||||
|
Loading…
Reference in new issue