remove <!--ssr:if:true--> comments

Author: Rich-Harris

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

@@ -26,6 +26,7 @@ import { binding_properties } from '../../bindings.js';
 import { regex_starts_with_newline, regex_whitespaces_strict } from '../../patterns.js';
 import { DOMBooleanAttributes, HYDRATION_END, HYDRATION_START } from '../../../../constants.js';
 import { sanitize_template_string } from '../../../utils/sanitize_template_string.js';
+import { BLOCK_CLOSE } from '../../../../internal/server/hydration.js';
 
 export const block_open = t_string(`<!--${HYDRATION_START}-->`);
 export const block_close = t_string(`<!--${HYDRATION_END}-->`);
@@ -1522,32 +1523,23 @@ const template_visitors = {
 		const state = context.state;
 		state.template.push(block_open);
 
-		// Insert ssr:if:true/false anchors in addition to the other anchors so that
-		// the if block can catch hydration mismatches (false on the server, true on the client and vice versa)
-		// and continue hydration without having to re-render everything from scratch.
-
 		const consequent = create_block(node, node.consequent.nodes, context);
-		consequent.unshift(
-			b.stmt(b.assignment('+=', b.id('$$payload.out'), b.literal('<!ssr:if:true>')))
-		);
+		const alternate = node.alternate ? create_block(node, node.alternate.nodes, context) : [];
 
-		const alternate = node.alternate
-			? /** @type {import('estree').BlockStatement} */ (context.visit(node.alternate))
-			: b.block([]);
-		alternate.body.unshift(
-			b.stmt(b.assignment('+=', b.id('$$payload.out'), b.literal('<!ssr:if:false>')))
+		consequent.push(b.stmt(b.assignment('+=', b.id('$$payload.out'), b.literal(BLOCK_CLOSE))));
+		alternate.push(
+			b.stmt(b.assignment('+=', b.id('$$payload.out'), b.literal(`<!--${HYDRATION_END}!-->`)))
 		);
 
 		state.template.push(
 			t_statement(
 				b.if(
 					/** @type {import('estree').Expression} */ (context.visit(node.test)),
-					b.block(/** @type {import('estree').Statement[]} */ (consequent)),
-					alternate
+					b.block(consequent),
+					b.block(alternate)
 				)
 			)
 		);
-		state.template.push(block_close);
 	},
 	AwaitBlock(node, context) {
 		const state = context.state;

packages/svelte/src/internal/client/dom/blocks/if.js

@@ -2,6 +2,7 @@ import { IS_ELSEIF } from '../../constants.js';
 import { hydrate_nodes, hydrating, set_hydrating } from '../hydration.js';
 import { remove } from '../reconciler.js';
 import { block, branch, pause_effect, resume_effect } from '../../reactivity/effects.js';
+import { HYDRATION_END } from '../../../../constants.js';
 
 /**
  * @param {Comment} anchor
@@ -34,21 +35,14 @@ export function if_block(
 		let mismatch = false;
 
 		if (hydrating) {
-			const comment_text = /** @type {Comment} */ (hydrate_nodes?.[0])?.data;
+			const is_else = anchor.data === `${HYDRATION_END}!`;
 
-			if (
-				!comment_text ||
-				(comment_text === 'ssr:if:true' && !condition) ||
-				(comment_text === 'ssr:if:false' && condition)
-			) {
+			if (condition === is_else) {
 				// Hydration mismatch: remove everything inside the anchor and start fresh.
-				// This could happen using when `{#if browser} .. {/if}` in SvelteKit.
+				// This could happen with `{#if browser}...{/if}`, for example
 				remove(hydrate_nodes);
 				set_hydrating(false);
 				mismatch = true;
-			} else {
-				// Remove the ssr:if comment node or else it will confuse the subsequent hydration algorithm
-				hydrate_nodes.shift();
 			}
 		}
 

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

@@ -53,7 +53,7 @@ export function hydrate_anchor(node) {
 
 			if (data === HYDRATION_START) {
 				depth += 1;
-			} else if (data === HYDRATION_END) {
+			} else if (data[0] === HYDRATION_END) {
 				if (depth === 0) {
 					hydrate_nodes = /** @type {import('#client').TemplateNode[]} */ (nodes);
 					return current;

packages/svelte/tests/hydration/samples/surrounding-whitespace/_override.html

@@ -1,2 +1,2 @@
 		<!-- unrelated comment -->
-		<!--[--><!--[--><!--ssr:if:true-->hello<!--]--><!--]-->
+		<!--[--><!--[-->hello<!--]--><!--]-->