From 3da6cef29b62d79c105b5468c28e2f8f96ba72be Mon Sep 17 00:00:00 2001 From: Rich Harris Date: Sun, 18 Feb 2024 13:09:26 -0500 Subject: [PATCH] chore: improve code generation for `bind:this` in SSR mode (#10524) * chore: improve code generation for `bind:this` in SSR mode * test --------- Co-authored-by: Rich Harris --- .changeset/brave-points-sleep.md | 5 +++++ .../src/compiler/phases/2-analyze/index.js | 4 +++- .../3-transform/server/transform-server.js | 2 +- .../tests/snapshot/samples/bind-this/_config.js | 3 +++ .../bind-this/_expected/client/index.svelte.js | 17 +++++++++++++++++ .../bind-this/_expected/server/index.svelte.js | 14 ++++++++++++++ .../snapshot/samples/bind-this/index.svelte | 1 + 7 files changed, 44 insertions(+), 2 deletions(-) create mode 100644 .changeset/brave-points-sleep.md create mode 100644 packages/svelte/tests/snapshot/samples/bind-this/_config.js create mode 100644 packages/svelte/tests/snapshot/samples/bind-this/_expected/client/index.svelte.js create mode 100644 packages/svelte/tests/snapshot/samples/bind-this/_expected/server/index.svelte.js create mode 100644 packages/svelte/tests/snapshot/samples/bind-this/index.svelte diff --git a/.changeset/brave-points-sleep.md b/.changeset/brave-points-sleep.md new file mode 100644 index 0000000000..6412a09434 --- /dev/null +++ b/.changeset/brave-points-sleep.md @@ -0,0 +1,5 @@ +--- +'svelte': patch +--- + +chore: improve code generation for `bind:this` in SSR mode diff --git a/packages/svelte/src/compiler/phases/2-analyze/index.js b/packages/svelte/src/compiler/phases/2-analyze/index.js index f19b60c03f..8b2b806ec7 100644 --- a/packages/svelte/src/compiler/phases/2-analyze/index.js +++ b/packages/svelte/src/compiler/phases/2-analyze/index.js @@ -1060,7 +1060,9 @@ const common_visitors = { parent.type === 'SvelteComponent' || parent.type === 'SvelteSelf' ) { - context.state.analysis.uses_component_bindings = true; + if (node.name !== 'this') { + context.state.analysis.uses_component_bindings = true; + } break; } else if (is_element_node(parent)) { break; diff --git a/packages/svelte/src/compiler/phases/3-transform/server/transform-server.js b/packages/svelte/src/compiler/phases/3-transform/server/transform-server.js index 5640a1f372..d197ae3e85 100644 --- a/packages/svelte/src/compiler/phases/3-transform/server/transform-server.js +++ b/packages/svelte/src/compiler/phases/3-transform/server/transform-server.js @@ -853,7 +853,7 @@ function serialize_inline_component(node, component_name, context) { const value = serialize_attribute_value(attribute.value, context, false, true); push_prop(b.prop('init', b.key(attribute.name), value)); - } else if (attribute.type === 'BindDirective') { + } else if (attribute.type === 'BindDirective' && attribute.name !== 'this') { // TODO this needs to turn the whole thing into a while loop because the binding could be mutated eagerly in the child push_prop( b.get(attribute.name, [ diff --git a/packages/svelte/tests/snapshot/samples/bind-this/_config.js b/packages/svelte/tests/snapshot/samples/bind-this/_config.js new file mode 100644 index 0000000000..f47bee71df --- /dev/null +++ b/packages/svelte/tests/snapshot/samples/bind-this/_config.js @@ -0,0 +1,3 @@ +import { test } from '../../test'; + +export default test({}); diff --git a/packages/svelte/tests/snapshot/samples/bind-this/_expected/client/index.svelte.js b/packages/svelte/tests/snapshot/samples/bind-this/_expected/client/index.svelte.js new file mode 100644 index 0000000000..0f261e1c81 --- /dev/null +++ b/packages/svelte/tests/snapshot/samples/bind-this/_expected/client/index.svelte.js @@ -0,0 +1,17 @@ +// index.svelte (Svelte VERSION) +// Note: compiler output will change before 5.0 is released! +import "svelte/internal/disclose-version"; +import * as $ from "svelte/internal"; + +export default function Bind_this($$anchor, $$props) { + $.push($$props, false); + $.init(); + + /* Init */ + var fragment = $.comment($$anchor); + var node = $.child_frag(fragment); + + $.bind_this(Foo(node, {}), ($$value) => foo = $$value, foo); + $.close_frag($$anchor, fragment); + $.pop(); +} \ No newline at end of file diff --git a/packages/svelte/tests/snapshot/samples/bind-this/_expected/server/index.svelte.js b/packages/svelte/tests/snapshot/samples/bind-this/_expected/server/index.svelte.js new file mode 100644 index 0000000000..71b688fe37 --- /dev/null +++ b/packages/svelte/tests/snapshot/samples/bind-this/_expected/server/index.svelte.js @@ -0,0 +1,14 @@ +// index.svelte (Svelte VERSION) +// Note: compiler output will change before 5.0 is released! +import * as $ from "svelte/internal/server"; + +export default function Bind_this($$payload, $$props) { + $.push(false); + + const anchor = $.create_anchor($$payload); + + $$payload.out += `${anchor}`; + Foo($$payload, {}); + $$payload.out += `${anchor}`; + $.pop(); +} \ No newline at end of file diff --git a/packages/svelte/tests/snapshot/samples/bind-this/index.svelte b/packages/svelte/tests/snapshot/samples/bind-this/index.svelte new file mode 100644 index 0000000000..da5a2c5085 --- /dev/null +++ b/packages/svelte/tests/snapshot/samples/bind-this/index.svelte @@ -0,0 +1 @@ +