diff --git a/.changeset/lovely-rules-eat.md b/.changeset/lovely-rules-eat.md new file mode 100644 index 0000000000..5ecaa2fc8d --- /dev/null +++ b/.changeset/lovely-rules-eat.md @@ -0,0 +1,5 @@ +--- +'svelte': patch +--- + +fix: omit this bind this arg if we know it's not a signal diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/template.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/template.js index 5f002bbebf..b5b58c34dc 100644 --- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/template.js +++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/template.js @@ -899,7 +899,10 @@ function serialize_inline_component(node, component_name, context) { if (bind_this !== null) { const prev = fn; const assignment = b.assignment('=', bind_this, b.id('$$value')); - const bind_this_id = bind_this; + const bind_this_id = /** @type {import('estree').Expression} */ ( + // if expression is not an identifier, we know it can't be a signal + bind_this.type === 'Identifier' ? bind_this : undefined + ); fn = (node_id) => b.call( '$.bind_this', @@ -2621,18 +2624,17 @@ export const template_visitors = { break; } - case 'this': { - const expression = node.expression; + case 'this': call_expr = b.call( `$.bind_this`, state.node, setter, - expression.type === 'Identifier' - ? expression - : /** @type {import('estree').Expression} */ (visit(expression)) + /** @type {import('estree').Expression} */ ( + // if expression is not an identifier, we know it can't be a signal + node.expression.type === 'Identifier' ? node.expression : undefined + ) ); break; - } case 'textContent': case 'innerHTML': case 'innerText': diff --git a/packages/svelte/tests/runtime-runes/samples/each-bind-this-member/_config.js b/packages/svelte/tests/runtime-runes/samples/each-bind-this-member/_config.js new file mode 100644 index 0000000000..4b5596cb3a --- /dev/null +++ b/packages/svelte/tests/runtime-runes/samples/each-bind-this-member/_config.js @@ -0,0 +1,7 @@ +import { test } from '../../test'; + +export default test({ + async test({ assert, target, component }) { + assert.equal(target.querySelector('img'), component.items[0].img); + } +}); diff --git a/packages/svelte/tests/runtime-runes/samples/each-bind-this-member/main.svelte b/packages/svelte/tests/runtime-runes/samples/each-bind-this-member/main.svelte new file mode 100644 index 0000000000..a685cc9c84 --- /dev/null +++ b/packages/svelte/tests/runtime-runes/samples/each-bind-this-member/main.svelte @@ -0,0 +1,11 @@ + + +{#each items as item, i} + slider{i} +{/each}