mirror of https://github.com/sveltejs/svelte
fix: better handle array property deletion reactivity (#9921)
parent
b779e72eb6
commit
59c7487f36
@ -0,0 +1,5 @@
|
|||||||
|
---
|
||||||
|
'svelte': patch
|
||||||
|
---
|
||||||
|
|
||||||
|
fix: better handle array property deletion reactivity
|
@ -0,0 +1,52 @@
|
|||||||
|
import { flushSync } from 'svelte';
|
||||||
|
import { test } from '../../test';
|
||||||
|
|
||||||
|
export default test({
|
||||||
|
html: `<button>push</button><button>pop</button><p>1</p><p>2</p><p>3</p>`,
|
||||||
|
|
||||||
|
async test({ assert, target }) {
|
||||||
|
const [btn1, btn2] = target.querySelectorAll('button');
|
||||||
|
|
||||||
|
flushSync(() => {
|
||||||
|
btn1.click();
|
||||||
|
});
|
||||||
|
|
||||||
|
assert.htmlEqual(
|
||||||
|
target.innerHTML,
|
||||||
|
`<button>push</button><button>pop</button><p>1</p><p>2</p><p>3</p><p>4</p>`
|
||||||
|
);
|
||||||
|
|
||||||
|
flushSync(() => {
|
||||||
|
btn1.click();
|
||||||
|
});
|
||||||
|
|
||||||
|
assert.htmlEqual(
|
||||||
|
target.innerHTML,
|
||||||
|
`<button>push</button><button>pop</button><p>1</p><p>2</p><p>3</p><p>4</p><p>5</p>`
|
||||||
|
);
|
||||||
|
|
||||||
|
flushSync(() => {
|
||||||
|
btn2.click();
|
||||||
|
});
|
||||||
|
|
||||||
|
assert.htmlEqual(
|
||||||
|
target.innerHTML,
|
||||||
|
`<button>push</button><button>pop</button><p>1</p><p>2</p><p>3</p><p>4</p>`
|
||||||
|
);
|
||||||
|
|
||||||
|
flushSync(() => {
|
||||||
|
btn2.click();
|
||||||
|
});
|
||||||
|
|
||||||
|
assert.htmlEqual(
|
||||||
|
target.innerHTML,
|
||||||
|
`<button>push</button><button>pop</button><p>1</p><p>2</p><p>3</p>`
|
||||||
|
);
|
||||||
|
|
||||||
|
flushSync(() => {
|
||||||
|
btn2.click();
|
||||||
|
});
|
||||||
|
|
||||||
|
assert.htmlEqual(target.innerHTML, `<button>push</button><button>pop</button><p>1</p><p>2</p>`);
|
||||||
|
}
|
||||||
|
});
|
@ -0,0 +1,15 @@
|
|||||||
|
<script>
|
||||||
|
let numbers = $state([{id: 1}, {id: 2}, {id: 3}]);
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<button onclick={() => numbers.push({id: numbers.length + 1})}>
|
||||||
|
push
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<button onclick={() => numbers.pop()}>
|
||||||
|
pop
|
||||||
|
</button>
|
||||||
|
|
||||||
|
{#each numbers as number}
|
||||||
|
<p>{number.id}</p>
|
||||||
|
{/each}
|
Loading…
Reference in new issue