From eff8768e9880db096dc784d831180e23064b1659 Mon Sep 17 00:00:00 2001 From: Dominic Gannaway Date: Wed, 4 Sep 2024 10:56:35 +0100 Subject: [PATCH] fix: ensure $host rune correctly compiles in variable declarations --- .changeset/heavy-cars-ring.md | 5 +++++ .../3-transform/client/visitors/VariableDeclaration.js | 3 ++- .../custom-elements-samples/host-rune/_config.js | 6 ++++-- .../custom-elements-samples/host-rune/main.svelte | 5 +++++ 4 files changed, 16 insertions(+), 3 deletions(-) create mode 100644 .changeset/heavy-cars-ring.md diff --git a/.changeset/heavy-cars-ring.md b/.changeset/heavy-cars-ring.md new file mode 100644 index 000000000000..37a94c42cfa5 --- /dev/null +++ b/.changeset/heavy-cars-ring.md @@ -0,0 +1,5 @@ +--- +'svelte': patch +--- + +fix: ensure $host rune correctly compiles in variable declarations diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/VariableDeclaration.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/VariableDeclaration.js index e4f6f57f72a8..af09af8b442c 100644 --- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/VariableDeclaration.js +++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/VariableDeclaration.js @@ -28,7 +28,8 @@ export function VariableDeclaration(node, context) { rune === '$effect.tracking' || rune === '$effect.root' || rune === '$inspect' || - rune === '$state.snapshot' + rune === '$state.snapshot' || + rune === '$host' ) { if (init != null && is_hoisted_function(init)) { context.state.hoisted.push( diff --git a/packages/svelte/tests/runtime-browser/custom-elements-samples/host-rune/_config.js b/packages/svelte/tests/runtime-browser/custom-elements-samples/host-rune/_config.js index bf09e864faaf..f05506445a51 100644 --- a/packages/svelte/tests/runtime-browser/custom-elements-samples/host-rune/_config.js +++ b/packages/svelte/tests/runtime-browser/custom-elements-samples/host-rune/_config.js @@ -16,11 +16,13 @@ export default test({ el.shadowRoot.querySelectorAll('button')[0].click(); el.shadowRoot.querySelectorAll('button')[1].click(); - assert.deepEqual(events, ['greeting', 'hello', 'greeting', 'welcome']); + el.shadowRoot.querySelectorAll('button')[2].click(); + assert.deepEqual(events, ['greeting', 'hello', 'greeting', 'welcome', 'greeting', 'bonjour']); el.removeEventListener('greeting', handle_evt); el.shadowRoot.querySelectorAll('button')[0].click(); el.shadowRoot.querySelectorAll('button')[1].click(); - assert.deepEqual(events, ['greeting', 'hello', 'greeting', 'welcome']); + el.shadowRoot.querySelectorAll('button')[2].click(); + assert.deepEqual(events, ['greeting', 'hello', 'greeting', 'welcome', 'greeting', 'bonjour']); } }); diff --git a/packages/svelte/tests/runtime-browser/custom-elements-samples/host-rune/main.svelte b/packages/svelte/tests/runtime-browser/custom-elements-samples/host-rune/main.svelte index 2eddf77e9b4d..02e481513a36 100644 --- a/packages/svelte/tests/runtime-browser/custom-elements-samples/host-rune/main.svelte +++ b/packages/svelte/tests/runtime-browser/custom-elements-samples/host-rune/main.svelte @@ -8,7 +8,12 @@ function welcome() { $host().dispatchEvent(new CustomEvent('greeting', { detail: 'welcome' })) } + function bonjour() { + const element = $host(); + element.dispatchEvent(new CustomEvent('greeting', { detail: 'bonjour' })) + } +