diff --git a/.changeset/red-poets-study.md b/.changeset/red-poets-study.md new file mode 100644 index 0000000000..3a9338f32a --- /dev/null +++ b/.changeset/red-poets-study.md @@ -0,0 +1,5 @@ +--- +"svelte": patch +--- + +fix: allow runes for variable declarations in the template 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 01daedb26c..cc018e91cf 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 @@ -3223,5 +3223,6 @@ export const template_visitors = { node: b.id('$.document') }); }, - CallExpression: javascript_visitors_runes.CallExpression + CallExpression: javascript_visitors_runes.CallExpression, + VariableDeclaration: javascript_visitors_runes.VariableDeclaration }; diff --git a/packages/svelte/tests/runtime-runes/samples/state-in-template/_config.js b/packages/svelte/tests/runtime-runes/samples/state-in-template/_config.js new file mode 100644 index 0000000000..093c240424 --- /dev/null +++ b/packages/svelte/tests/runtime-runes/samples/state-in-template/_config.js @@ -0,0 +1,19 @@ +import { flushSync } from 'svelte'; +import { test } from '../../test'; + +export default test({ + html: `
`, + + async test({ assert, target }) { + const btn = target.querySelector('button'); + + flushSync(() => { + btn?.click(); + }); + + assert.htmlEqual( + target.innerHTML, + `` + ); + } +}); diff --git a/packages/svelte/tests/runtime-runes/samples/state-in-template/main.svelte b/packages/svelte/tests/runtime-runes/samples/state-in-template/main.svelte new file mode 100644 index 0000000000..b0eb8f8c6d --- /dev/null +++ b/packages/svelte/tests/runtime-runes/samples/state-in-template/main.svelte @@ -0,0 +1,19 @@ + + + + +{#each set as item} +