skip redundant comment templates for components (and others TODO)

packages/svelte/src/compiler/phases/3-transform/client/visitors/template.js

@@ -1675,20 +1675,23 @@ export const template_visitors = {
 				);
 				close = b.stmt(b.call('$.append', b.id('$$anchor'), id));
 			} else {
-				/** @type {(is_text: boolean) => import('estree').Expression} */
-				const expression = (is_text) =>
-					is_text ? b.call('$.first_child', id, b.true) : b.call('$.first_child', id);
-
-				process_children(trimmed, expression, false, { ...context, state });
-
 				var first = trimmed[0];
+				const skip_template =
+					trimmed.length === 1 &&
+					first.type === 'Component' &&
+					!first.attributes.some(
+						(attribute) => attribute.type === 'Attribute' && attribute.name.startsWith('--')
+					); // TODO others
+
+				if (skip_template) {
+					process_children(trimmed, () => b.id('$$anchor'), false, { ...context, state });
+				} else {
+					/** @type {(is_text: boolean) => import('estree').Expression} */
+					const expression = (is_text) =>
+						is_text ? b.call('$.first_child', id, b.true) : b.call('$.first_child', id);
 
-				const use_comment_template = state.template.length === 1 && state.template[0] === '<!>';
+					process_children(trimmed, expression, false, { ...context, state });
 
-				if (use_comment_template) {
-					// special case — we can use `$.comment` instead of creating a unique template
-					body.push(b.var(id, b.call('$.comment')));
-				} else {
 					let flags = TEMPLATE_FRAGMENT;
 
 					if (state.metadata.context.template_needs_import_node) {
@@ -1701,11 +1704,11 @@ export const template_visitors = {
 					]);
 
 					body.push(b.var(id, b.call(template_name)));
+
+					close = b.stmt(b.call('$.append', b.id('$$anchor'), id));
 				}
 
 				body.push(...state.before_init, ...state.init);
-
-				close = b.stmt(b.call('$.append', b.id('$$anchor'), id));
 			}
 		} else {
 			body.push(...state.before_init, ...state.init);

packages/svelte/src/compiler/phases/3-transform/server/transform-server.js

@@ -1002,6 +1002,8 @@ function serialize_inline_component(node, expression, context) {
 			)
 		);
 
+		context.state.template.push(statement);
+	} else if (context.state.skip_hydration_boundaries) {
 		context.state.template.push(statement);
 	} else {
 		context.state.template.push(block_open, statement, block_close);
@@ -1122,12 +1124,20 @@ const template_visitors = {
 			context.state.options.preserveComments
 		);
 
+		const first = trimmed[0];
+
 		/** @type {import('./types').ComponentServerTransformState} */
 		const state = {
 			...context.state,
 			init: [],
 			template: [],
-			namespace
+			namespace,
+			skip_hydration_boundaries:
+				trimmed.length === 1 &&
+				first.type === 'Component' &&
+				!first.attributes.some(
+					(attribute) => attribute.type === 'Attribute' && attribute.name.startsWith('--')
+				) // TODO others
 		};
 
 		for (const node of hoisted) {
@@ -1925,7 +1935,8 @@ export function server_component(analysis, options) {
 		template: /** @type {any} */ (null),
 		namespace: options.namespace,
 		preserve_whitespace: options.preserveWhitespace,
-		private_derived: new Map()
+		private_derived: new Map(),
+		skip_hydration_boundaries: false
 	};
 
 	const module = /** @type {import('estree').Program} */ (

packages/svelte/src/compiler/phases/3-transform/server/types.d.ts

@@ -22,6 +22,7 @@ export interface ComponentServerTransformState extends ServerTransformState {
 	readonly template: Array<Statement | Expression>;
 	readonly namespace: Namespace;
 	readonly preserve_whitespace: boolean;
+	readonly skip_hydration_boundaries: boolean;
 }
 
 export type Context = import('zimmerframe').Context<SvelteNode, ServerTransformState>;

packages/svelte/tests/snapshot/samples/bind-this/_expected/client/index.svelte.js

@@ -2,9 +2,5 @@ import "svelte/internal/disclose-version";
 import * as $ from "svelte/internal/client";
 
 export default function Bind_this($$anchor) {
-	var fragment = $.comment();
-	var node = $.first_child(fragment);
-
-	$.bind_this(Foo(node, { $$legacy: true }), ($$value) => foo = $$value, () => foo);
-	$.append($$anchor, fragment);
+	$.bind_this(Foo($$anchor, { $$legacy: true }), ($$value) => foo = $$value, () => foo);
 }

packages/svelte/tests/snapshot/samples/bind-this/_expected/server/index.svelte.js

@@ -1,7 +1,5 @@
 import * as $ from "svelte/internal/server";
 
 export default function Bind_this($$payload) {
-	$$payload.out += `<!--[-->`;
 	Foo($$payload, {});
-	$$payload.out += `<!--]-->`;
 }

packages/svelte/tests/snapshot/samples/each-string-template/_expected/client/index.svelte.js

@@ -1,8 +1,10 @@
 import "svelte/internal/disclose-version";
 import * as $ from "svelte/internal/client";
 
+var root = $.template(`<!>`, 1);
+
 export default function Each_string_template($$anchor) {
-	var fragment = $.comment();
+	var fragment = root();
 	var node = $.first_child(fragment);
 
 	$.each(node, 1, () => ['foo', 'bar', 'baz'], $.index, ($$anchor, thing, $$index) => {

packages/svelte/tests/snapshot/samples/function-prop-no-getter/_expected/client/index.svelte.js

@@ -9,10 +9,8 @@ export default function Function_prop_no_getter($$anchor) {
 	}
 
 	const plusOne = (num) => num + 1;
-	var fragment = $.comment();
-	var node = $.first_child(fragment);
 
-	Button(node, {
+	Button($$anchor, {
 		onmousedown: () => $.set(count, $.get(count) + 1),
 		onmouseup,
 		onmouseenter: () => $.set(count, $.proxy(plusOne($.get(count)))),
@@ -24,6 +22,4 @@ export default function Function_prop_no_getter($$anchor) {
 		},
 		$$slots: { default: true }
 	});
-
-	$.append($$anchor, fragment);
 }

packages/svelte/tests/snapshot/samples/function-prop-no-getter/_expected/server/index.svelte.js

@@ -9,8 +9,6 @@ export default function Function_prop_no_getter($$payload) {
 
 	const plusOne = (num) => num + 1;
 
-	$$payload.out += `<!--[-->`;
-
 	Button($$payload, {
 		onmousedown: () => count += 1,
 		onmouseup,
@@ -20,6 +18,4 @@ export default function Function_prop_no_getter($$payload) {
 		},
 		$$slots: { default: true }
 	});
-
-	$$payload.out += `<!--]-->`;
 }

packages/svelte/tests/snapshot/samples/svelte-element/_expected/client/index.svelte.js

@@ -1,9 +1,11 @@
 import "svelte/internal/disclose-version";
 import * as $ from "svelte/internal/client";
 
+var root = $.template(`<!>`, 1);
+
 export default function Svelte_element($$anchor, $$props) {
 	let tag = $.prop($$props, "tag", 3, 'hr');
-	var fragment = $.comment();
+	var fragment = root();
 	var node = $.first_child(fragment);
 
 	$.element(node, tag, false);