fix: don't treat declaration tags as parts inside each blocks (#18507)

Closes #18506

Declaration tags in the scope of an each block were considered "parts"
and transformed to use their value instead of the signal itself. We can
safely check on the `kind` of the binding since a `kind` of `state`,
`state_raw` or `derived` in the each scope needs to be a declaration tag
(and it's a stable reference so we can use them directly)
pull/17705/merge
Paolo Ricciuti 5 days ago committed by GitHub
parent b1cadd1eae
commit 8fb7ceeba5
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194

@ -0,0 +1,5 @@
---
'svelte': patch
---
fix: don't treat declaration tags as parts inside each blocks

@ -8,7 +8,7 @@ import { sanitize_template_string } from '../../../../../utils/sanitize_template
import { regex_is_valid_identifier } from '../../../../patterns.js';
import is_reference from 'is-reference';
import { dev, is_ignored, locator, component_name } from '../../../../../state.js';
import { build_getter } from '../../utils.js';
import { build_getter, is_state_source } from '../../utils.js';
import { ExpressionMetadata } from '../../../../nodes.js';
/**
@ -272,6 +272,10 @@ export function build_bind_this(expression, value, { state, visit }) {
const binding = state.scope.get(node.name);
if (!binding) return;
// if it is a state or a derived it means is a declaration tag...in that case we don't want to pass the
// value but the signal itself or assignment will break
if (is_state_source(binding, state.analysis) || binding.kind === 'derived') return;
for (const [owner, scope] of state.scopes) {
if (owner.type === 'EachBlock' && scope === binding.scope) {
ids.push(node);

@ -0,0 +1,10 @@
import { flushSync } from 'svelte';
import { test } from '../../test';
export default test({
async test({ target, assert }) {
const [btn1, btn2] = target.querySelectorAll('button');
flushSync(() => btn2.click());
assert.equal(btn1.textContent, '1');
}
});

@ -0,0 +1,6 @@
{#each Array(1)}
{let ref = $state()}
{let count = $state(0)}
<button onclick={()=>count++} bind:this={ref}>{count}</button>
<button onclick={()=>ref.click()}></button>
{/each}
Loading…
Cancel
Save