diff --git a/.changeset/smooth-pens-protect.md b/.changeset/smooth-pens-protect.md new file mode 100644 index 0000000000..9189ab2aca --- /dev/null +++ b/.changeset/smooth-pens-protect.md @@ -0,0 +1,5 @@ +--- +'svelte': patch +--- + +fix: only inject push/pop in SSR components when necessary 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 1800479a68..4a68d1e0c6 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 @@ -2351,12 +2351,17 @@ export function server_component(analysis, options) { if (options.dev) push_args.push(b.id(analysis.name)); const component_block = b.block([ - b.stmt(b.call('$.push', ...push_args)), .../** @type {import('estree').Statement[]} */ (instance.body), - .../** @type {import('estree').Statement[]} */ (template.body), - b.stmt(b.call('$.pop')) + .../** @type {import('estree').Statement[]} */ (template.body) ]); + let should_inject_context = analysis.needs_context || options.dev; + + if (should_inject_context) { + component_block.body.unshift(b.stmt(b.call('$.push', ...push_args))); + component_block.body.push(b.stmt(b.call('$.pop'))); + } + if (analysis.uses_rest_props) { /** @type {string[]} */ const named_props = analysis.exports.map(({ name, alias }) => alias ?? name); @@ -2388,9 +2393,18 @@ export function server_component(analysis, options) { const body = [...state.hoisted, ...module.body]; + let should_inject_props = + should_inject_context || + props.length > 0 || + analysis.needs_props || + analysis.uses_props || + analysis.uses_rest_props || + analysis.uses_slots || + analysis.slot_names.size > 0; + const component_function = b.function_declaration( b.id(analysis.name), - [b.id('$$payload'), b.id('$$props')], + should_inject_props ? [b.id('$$payload'), b.id('$$props')] : [b.id('$$payload')], component_block ); if (options.legacy.componentApi) { diff --git a/packages/svelte/tests/snapshot/samples/bind-component-snippet/_expected/server/index.svelte.js b/packages/svelte/tests/snapshot/samples/bind-component-snippet/_expected/server/index.svelte.js index c4d2da79d1..5c9a37cfdb 100644 --- a/packages/svelte/tests/snapshot/samples/bind-component-snippet/_expected/server/index.svelte.js +++ b/packages/svelte/tests/snapshot/samples/bind-component-snippet/_expected/server/index.svelte.js @@ -1,9 +1,7 @@ import * as $ from "svelte/internal/server"; import TextInput from './Child.svelte'; -export default function Bind_component_snippet($$payload, $$props) { - $.push(); - +export default function Bind_component_snippet($$payload) { let value = ''; const _snippet = snippet; @@ -37,5 +35,4 @@ export default function Bind_component_snippet($$payload, $$props) { } while (!$$settled); $.assign_payload($$payload, $$inner_payload); - $.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 index 9f00d97ad4..98c5fd7ae7 100644 --- 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 @@ -1,9 +1,7 @@ import * as $ from "svelte/internal/server"; -export default function Bind_this($$payload, $$props) { - $.push(); +export default function Bind_this($$payload) { $$payload.out += ``; Foo($$payload, {}); $$payload.out += ``; - $.pop(); } \ No newline at end of file diff --git a/packages/svelte/tests/snapshot/samples/dynamic-attributes-casing/_expected/server/main.svelte.js b/packages/svelte/tests/snapshot/samples/dynamic-attributes-casing/_expected/server/main.svelte.js index 7686334ab2..c042178844 100644 --- a/packages/svelte/tests/snapshot/samples/dynamic-attributes-casing/_expected/server/main.svelte.js +++ b/packages/svelte/tests/snapshot/samples/dynamic-attributes-casing/_expected/server/main.svelte.js @@ -1,12 +1,9 @@ import * as $ from "svelte/internal/server"; -export default function Main($$payload, $$props) { - $.push(); - +export default function Main($$payload) { // needs to be a snapshot test because jsdom does auto-correct the attribute casing let x = 'test'; let y = () => 'test'; $$payload.out += ` `; - $.pop(); } \ No newline at end of file diff --git a/packages/svelte/tests/snapshot/samples/each-string-template/_expected/server/index.svelte.js b/packages/svelte/tests/snapshot/samples/each-string-template/_expected/server/index.svelte.js index 9086725386..fb143a56c9 100644 --- a/packages/svelte/tests/snapshot/samples/each-string-template/_expected/server/index.svelte.js +++ b/packages/svelte/tests/snapshot/samples/each-string-template/_expected/server/index.svelte.js @@ -1,8 +1,6 @@ import * as $ from "svelte/internal/server"; -export default function Each_string_template($$payload, $$props) { - $.push(); - +export default function Each_string_template($$payload) { const each_array = $.ensure_array_like(['foo', 'bar', 'baz']); $$payload.out += ``; @@ -16,5 +14,4 @@ export default function Each_string_template($$payload, $$props) { } $$payload.out += ""; - $.pop(); } \ No newline at end of file diff --git a/packages/svelte/tests/snapshot/samples/function-prop-no-getter/_expected/server/index.svelte.js b/packages/svelte/tests/snapshot/samples/function-prop-no-getter/_expected/server/index.svelte.js index b096c4b6c0..974be7fcf6 100644 --- a/packages/svelte/tests/snapshot/samples/function-prop-no-getter/_expected/server/index.svelte.js +++ b/packages/svelte/tests/snapshot/samples/function-prop-no-getter/_expected/server/index.svelte.js @@ -1,8 +1,6 @@ import * as $ from "svelte/internal/server"; -export default function Function_prop_no_getter($$payload, $$props) { - $.push(); - +export default function Function_prop_no_getter($$payload) { let count = 0; function onmouseup() { @@ -24,5 +22,4 @@ export default function Function_prop_no_getter($$payload, $$props) { }); $$payload.out += ``; - $.pop(); } \ No newline at end of file diff --git a/packages/svelte/tests/snapshot/samples/hello-world/_expected/server/index.svelte.js b/packages/svelte/tests/snapshot/samples/hello-world/_expected/server/index.svelte.js index 6f9e3cf0c5..a313799dfd 100644 --- a/packages/svelte/tests/snapshot/samples/hello-world/_expected/server/index.svelte.js +++ b/packages/svelte/tests/snapshot/samples/hello-world/_expected/server/index.svelte.js @@ -1,7 +1,5 @@ import * as $ from "svelte/internal/server"; -export default function Hello_world($$payload, $$props) { - $.push(); +export default function Hello_world($$payload) { $$payload.out += `

hello world

`; - $.pop(); } \ No newline at end of file diff --git a/packages/svelte/tests/snapshot/samples/hmr/_expected/server/index.svelte.js b/packages/svelte/tests/snapshot/samples/hmr/_expected/server/index.svelte.js index 69927bbfb9..33fe307c09 100644 --- a/packages/svelte/tests/snapshot/samples/hmr/_expected/server/index.svelte.js +++ b/packages/svelte/tests/snapshot/samples/hmr/_expected/server/index.svelte.js @@ -1,7 +1,5 @@ import * as $ from "svelte/internal/server"; -export default function Hmr($$payload, $$props) { - $.push(); +export default function Hmr($$payload) { $$payload.out += `

hello world

`; - $.pop(); } \ No newline at end of file diff --git a/packages/svelte/tests/snapshot/samples/state-proxy-literal/_expected/server/index.svelte.js b/packages/svelte/tests/snapshot/samples/state-proxy-literal/_expected/server/index.svelte.js index 81f1cf1346..6e96cf8238 100644 --- a/packages/svelte/tests/snapshot/samples/state-proxy-literal/_expected/server/index.svelte.js +++ b/packages/svelte/tests/snapshot/samples/state-proxy-literal/_expected/server/index.svelte.js @@ -1,8 +1,6 @@ import * as $ from "svelte/internal/server"; -export default function State_proxy_literal($$payload, $$props) { - $.push(); - +export default function State_proxy_literal($$payload) { let str = ''; let tpl = ``; @@ -14,5 +12,4 @@ export default function State_proxy_literal($$payload, $$props) { } $$payload.out += ` `; - $.pop(); } \ No newline at end of file diff --git a/packages/svelte/tests/snapshot/samples/svelte-element/_expected/server/index.svelte.js b/packages/svelte/tests/snapshot/samples/svelte-element/_expected/server/index.svelte.js index 2cf8edd1ee..2513822d91 100644 --- a/packages/svelte/tests/snapshot/samples/svelte-element/_expected/server/index.svelte.js +++ b/packages/svelte/tests/snapshot/samples/svelte-element/_expected/server/index.svelte.js @@ -1,12 +1,9 @@ import * as $ from "svelte/internal/server"; export default function Svelte_element($$payload, $$props) { - $.push(); - let { tag = 'hr' } = $$props; $$payload.out += ``; if (tag) $.element($$payload, tag, () => {}, () => {}); $$payload.out += ``; - $.pop(); } \ No newline at end of file