mirror of https://github.com/sveltejs/svelte
fix: account for proxified instance when updating `bind:this` (#18147)
Fixes #18145 I wonder why nulling happens after updating `bind:this` but not before, which would fix the issue as well, though not as efficiently. ### Before submitting the PR, please make sure you do the following - [x] It's really useful if your PR references an issue where it is discussed ahead of time. In many cases, features are absent for a reason. For large changes, please create an RFC: https://github.com/sveltejs/rfcs - [x] Prefix your PR title with `feat:`, `fix:`, `chore:`, or `docs:`. - [x] This message body should clearly illustrate what problems it solves. - [x] Ideally, include a test that fails without this PR but passes with it. - [x] If this PR changes code within `packages/svelte/src`, add a changeset (`npx changeset`). ### Tests and linting - [x] Run the tests with `pnpm test` and lint the project with `pnpm lint`pull/18163/head
parent
bd29b9ef2b
commit
ada3076967
@ -0,0 +1,5 @@
|
||||
---
|
||||
'svelte': patch
|
||||
---
|
||||
|
||||
fix: account for proxified instance when updating `bind:this`
|
||||
@ -0,0 +1,5 @@
|
||||
<script>
|
||||
const props = $props();
|
||||
// svelte-ignore state_referenced_locally
|
||||
export const name = props.name;
|
||||
</script>
|
||||
@ -0,0 +1,22 @@
|
||||
import { flushSync } from 'svelte';
|
||||
import { test } from '../../test';
|
||||
|
||||
export default test({
|
||||
async test({ assert, target, logs }) {
|
||||
const btn = target.querySelector('button');
|
||||
|
||||
flushSync(() => {
|
||||
btn?.click();
|
||||
});
|
||||
|
||||
flushSync(() => {
|
||||
btn?.click();
|
||||
});
|
||||
|
||||
assert.deepEqual(logs, [
|
||||
{},
|
||||
{ 0: { name: 'Row 0' } },
|
||||
{ 0: { name: 'Row 0' }, 1: { name: 'Row 1' } }
|
||||
]);
|
||||
}
|
||||
});
|
||||
@ -0,0 +1,16 @@
|
||||
<script>
|
||||
import Row from "./Component.svelte";
|
||||
|
||||
const nums = $state([]);
|
||||
const rows = $derived(nums.map(n => ({id: n, name: `Row ${n}` })));
|
||||
const refs = $state({});
|
||||
|
||||
$effect(() => {
|
||||
console.log({...refs});
|
||||
})
|
||||
</script>
|
||||
|
||||
<button onclick={() => nums.push(nums.length)}>Add</button>
|
||||
{#each rows as row (row.id)}
|
||||
<Row name={row.name} bind:this={refs[row.id]} />
|
||||
{/each}
|
||||
Loading…
Reference in new issue