tidy up

Author: Rich-Harris

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

@@ -24,9 +24,14 @@ import { create_attribute, is_custom_element_node, is_element_node } from '../..
 import { error } from '../../../errors.js';
 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 {
+	DOMBooleanAttributes,
+	HYDRATION_END,
+	HYDRATION_END_ELSE,
+	HYDRATION_START
+} from '../../../../constants.js';
 import { sanitize_template_string } from '../../../utils/sanitize_template_string.js';
-import { BLOCK_CLOSE } from '../../../../internal/server/hydration.js';
+import { BLOCK_CLOSE, BLOCK_CLOSE_ELSE } from '../../../../internal/server/hydration.js';
 
 export const block_open = t_string(`<!--${HYDRATION_START}-->`);
 export const block_close = t_string(`<!--${HYDRATION_END}-->`);
@@ -1506,9 +1511,7 @@ const template_visitors = {
 		if (node.fallback) {
 			const fallback = create_block(node, node.fallback.nodes, context);
 
-			fallback.push(
-				b.stmt(b.assignment('+=', b.id('$$payload.out'), b.literal(`<!--${HYDRATION_END}!-->`)))
-			);
+			fallback.push(b.stmt(b.assignment('+=', b.id('$$payload.out'), b.literal(BLOCK_CLOSE_ELSE))));
 
 			state.template.push(
 				t_statement(
@@ -1531,9 +1534,7 @@ const template_visitors = {
 		const alternate = node.alternate ? create_block(node, node.alternate.nodes, context) : [];
 
 		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}!-->`)))
-		);
+		alternate.push(b.stmt(b.assignment('+=', b.id('$$payload.out'), b.literal(BLOCK_CLOSE_ELSE))));
 
 		state.template.push(
 			t_statement(

packages/svelte/src/constants.js

@@ -21,6 +21,7 @@ export const TEMPLATE_USE_IMPORT_NODE = 1 << 1;
 
 export const HYDRATION_START = '[';
 export const HYDRATION_END = ']';
+export const HYDRATION_END_ELSE = `${HYDRATION_END}!`; // used to indicate that an `{:else}...` block was rendered
 
 export const UNINITIALIZED = Symbol();
 

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

@@ -5,7 +5,7 @@ import {
 	EACH_IS_STRICT_EQUALS,
 	EACH_ITEM_REACTIVE,
 	EACH_KEYED,
-	HYDRATION_END,
+	HYDRATION_END_ELSE,
 	HYDRATION_START
 } from '../../../../constants.js';
 import { hydrate_anchor, hydrate_nodes, hydrating, set_hydrating } from '../hydration.js';
@@ -98,7 +98,7 @@ function each(anchor, flags, get_collection, get_key, render_fn, fallback_fn, re
 		let mismatch = false;
 
 		if (hydrating) {
-			var is_else = /** @type {Comment} */ (anchor).data === `${HYDRATION_END}!`;
+			var is_else = /** @type {Comment} */ (anchor).data === HYDRATION_END_ELSE;
 
 			if (is_else !== (length === 0)) {
 				// hydration mismatch — remove the server-rendered DOM and start over

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

@@ -2,7 +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';
+import { HYDRATION_END_ELSE } from '../../../../constants.js';
 
 /**
  * @param {Comment} anchor
@@ -35,7 +35,7 @@ export function if_block(
 		let mismatch = false;
 
 		if (hydrating) {
-			const is_else = anchor.data === `${HYDRATION_END}!`;
+			const is_else = anchor.data === HYDRATION_END_ELSE;
 
 			if (condition === is_else) {
 				// Hydration mismatch: remove everything inside the anchor and start fresh.

packages/svelte/src/internal/server/hydration.js

@@ -1,4 +1,5 @@
-import { HYDRATION_END, HYDRATION_START } from '../../constants.js';
+import { HYDRATION_END, HYDRATION_END_ELSE, HYDRATION_START } from '../../constants.js';
 
 export const BLOCK_OPEN = `<!--${HYDRATION_START}-->`;
 export const BLOCK_CLOSE = `<!--${HYDRATION_END}-->`;
+export const BLOCK_CLOSE_ELSE = `<!--${HYDRATION_END_ELSE}-->`;