fix: only inject push/pop/$$props in SSR components when necessary (#11771)

Author: Rich-Harris

.changeset/smooth-pens-protect.md

@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: only inject push/pop in SSR components when necessary

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) {

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();
 }

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();
 }

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 += `<div${$.attr("foobar", x, false)}></div> <svg${$.attr("viewBox", x, false)}></svg> <custom-element${$.attr("foobar", x, false)}></custom-element> <div${$.attr("foobar", y(), false)}></div> <svg${$.attr("viewBox", y(), false)}></svg> <custom-element${$.attr("foobar", y(), false)}></custom-element>`;
-	$.pop();
 }

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();
 }

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();
 }

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 += `<h1>hello world</h1>`;
-	$.pop();
 }

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 += `<h1>hello world</h1>`;
-	$.pop();
 }

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 += `<input${$.attr("value", str, false)}> <input${$.attr("value", tpl, false)}> <button>reset</button>`;
-	$.pop();
 }

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();
 }