avoid wrappers for <svelte:element>

Author: Rich-Harris

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

@@ -38,6 +38,7 @@ import { filename, locator } from '../../../state.js';
 
 export const block_open = t_string(`<!--${HYDRATION_START}-->`);
 export const block_close = t_string(`<!--${HYDRATION_END}-->`);
+export const block_anchor = t_string(`<!---->`);
 
 /**
  * @param {string} value
@@ -1470,8 +1471,6 @@ const template_visitors = {
 			}
 		};
 
-		context.state.template.push(block_open);
-
 		const main = create_block(node, node.fragment.nodes, {
 			...context,
 			state: { ...context.state, metadata }
@@ -1506,7 +1505,7 @@ const template_visitors = {
 					)
 				)
 			),
-			block_close
+			block_anchor
 		);
 		if (context.state.options.dev) {
 			context.state.template.push(t_statement(b.stmt(b.call('$.pop_element'))));

packages/svelte/src/internal/client/dom/blocks/svelte-element.js

@@ -1,5 +1,5 @@
 import { namespace_svg } from '../../../../constants.js';
-import { hydrate_anchor, hydrate_start, hydrating } from '../hydration.js';
+import { hydrate_anchor, hydrating } from '../hydration.js';
 import { empty } from '../operations.js';
 import {
 	block,
@@ -14,15 +14,15 @@ import { current_component_context } from '../../runtime.js';
 import { DEV } from 'esm-env';
 
 /**
- * @param {Comment} anchor
+ * @param {Comment | Element} node
  * @param {() => string} get_tag
  * @param {boolean} is_svg
  * @param {undefined | ((element: Element, anchor: Node | null) => void)} render_fn,
  * @param {undefined | (() => string)} get_namespace
  * @param {undefined | [number, number]} location
  * @returns {void}
  */
-export function element(anchor, get_tag, is_svg, render_fn, get_namespace, location) {
+export function element(node, get_tag, is_svg, render_fn, get_namespace, location) {
 	const filename = DEV && location && current_component_context?.function.filename;
 
 	/** @type {string | null} */
@@ -32,7 +32,9 @@ export function element(anchor, get_tag, is_svg, render_fn, get_namespace, locat
 	let current_tag;
 
 	/** @type {null | Element} */
-	let element = null;
+	let element = hydrating && node.nodeType === 1 ? /** @type {Element} */ (node) : null;
+
+	let anchor = /** @type {Comment} */ (hydrating && element ? element.nextSibling : node);
 
 	/** @type {import('#client').Effect | null} */
 	let effect;
@@ -51,6 +53,7 @@ export function element(anchor, get_tag, is_svg, render_fn, get_namespace, locat
 			: is_svg || next_tag === 'svg'
 				? namespace_svg
 				: null;
+
 		// Assumption: Noone changes the namespace but not the tag (what would that even mean?)
 		if (next_tag === tag) return;
 
@@ -79,7 +82,7 @@ export function element(anchor, get_tag, is_svg, render_fn, get_namespace, locat
 		if (next_tag && next_tag !== current_tag) {
 			effect = branch(() => {
 				element = hydrating
-					? /** @type {Element} */ (hydrate_start)
+					? /** @type {Element} */ (element)
 					: ns
 						? document.createElementNS(ns, next_tag)
 						: document.createElement(next_tag);

packages/svelte/src/internal/client/dom/operations.js

@@ -1,6 +1,7 @@
 import { hydrate_anchor, hydrate_start, hydrating } from './hydration.js';
 import { DEV } from 'esm-env';
 import { init_array_prototype_warnings } from '../dev/equality.js';
+import { HYDRATION_END } from '../../../constants.js';
 
 // export these for reference in the compiled code, making global name deduplication unnecessary
 /** @type {Window} */
@@ -98,12 +99,16 @@ export function first_child(fragment, is_text) {
  */
 /*#__NO_SIDE_EFFECTS__*/
 export function sibling(node, is_text = false) {
-	const next_sibling = node.nextSibling;
+	var next_sibling = /** @type {import('#client').TemplateNode} */ (node.nextSibling);
 
 	if (!hydrating) {
 		return next_sibling;
 	}
 
+	if (next_sibling.nodeType === 8 && /** @type {Comment} */ (next_sibling).data === '') {
+		return sibling(next_sibling, is_text);
+	}
+
 	// if a sibling {expression} is empty during SSR, there might be no
 	// text node to hydrate — we must therefore create one
 	if (is_text && next_sibling?.nodeType !== 3) {

packages/svelte/tests/server-side-rendering/samples/head-svelte-components-raw-content/_expected.html

@@ -1,16 +1,13 @@
 <!--[-->
-<!--[-->
 <title>lorem</title>
-<!--]-->
-<!--[-->
+<!---->
 <style>
 	.ipsum {
 		display: block;
 	}
 </style>
-<!--]-->
-<!--[-->
+<!---->
 <script>
 	console.log(true);
 </script>
-<!--]--><!--]-->
+<!----><!--]-->

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

@@ -5,8 +5,7 @@ export default function Svelte_element($$payload, $$props) {
 
 	let { tag = 'hr' } = $$props;
 
-	$$payload.out += `<!--[-->`;
 	if (tag) $.element($$payload, tag, () => {}, () => {});
-	$$payload.out += `<!--]-->`;
+	$$payload.out += `<!---->`;
 	$.pop();
-}
+}