avoid magic strings

Author: Rich-Harris

.prettierignore

@@ -10,10 +10,8 @@ packages/svelte/tests/**/_actual*
 packages/svelte/tests/**/expected*
 packages/svelte/tests/**/_output
 packages/svelte/tests/**/shards/*.test.js
-packages/svelte/tests/hydration/samples/*/_before.html
-packages/svelte/tests/hydration/samples/*/_before_head.html
-packages/svelte/tests/hydration/samples/*/_after.html
-packages/svelte/tests/hydration/samples/*/_after_head.html
+packages/svelte/tests/hydration/samples/*/_expected.html
+packages/svelte/tests/hydration/samples/*/_override.html
 packages/svelte/types
 packages/svelte/compiler.cjs
 playgrounds/demo/src

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

@@ -26,9 +26,10 @@ import { binding_properties } from '../../bindings.js';
 import { regex_starts_with_newline, regex_whitespaces_strict } from '../../patterns.js';
 import { DOMBooleanAttributes } from '../../../../constants.js';
 import { sanitize_template_string } from '../../../utils/sanitize_template_string.js';
+import { HYDRATION_END, HYDRATION_START } from '../../../../internal/client/dom/hydration.js';
 
-const block_open = t_string('<!--[-->');
-const block_close = t_string('<!--]-->');
+export const block_open = t_string(`<!--${HYDRATION_START}-->`);
+export const block_close = t_string(`<!--${HYDRATION_END}-->`);
 
 /**
  * @param {string} value

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

@@ -6,7 +6,13 @@ import {
 	EACH_ITEM_REACTIVE,
 	EACH_KEYED
 } from '../../../../constants.js';
-import { hydrate_anchor, hydrate_nodes, hydrating, set_hydrating } from '../hydration.js';
+import {
+	HYDRATION_START,
+	hydrate_anchor,
+	hydrate_nodes,
+	hydrating,
+	set_hydrating
+} from '../hydration.js';
 import { empty } from '../operations.js';
 import { remove } from '../reconciler.js';
 import { untrack } from '../../runtime.js';
@@ -117,7 +123,10 @@ function each(anchor, flags, get_collection, get_key, render_fn, fallback_fn, re
 			var child_anchor = hydrate_nodes[0];
 
 			for (var i = 0; i < length; i++) {
-				if (child_anchor.nodeType !== 8 || /** @type {Comment} */ (child_anchor).data !== '[') {
+				if (
+					child_anchor.nodeType !== 8 ||
+					/** @type {Comment} */ (child_anchor).data !== HYDRATION_START
+				) {
 					// If `nodes` is null, then that means that the server rendered fewer items than what
 					// expected, so break out and continue appending non-hydrated items
 					mismatch = true;

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

@@ -1,4 +1,10 @@
-import { hydrate_anchor, hydrate_nodes, hydrating, set_hydrate_nodes } from '../hydration.js';
+import {
+	HYDRATION_START,
+	hydrate_anchor,
+	hydrate_nodes,
+	hydrating,
+	set_hydrate_nodes
+} from '../hydration.js';
 import { empty } from '../operations.js';
 import { block } from '../../reactivity/effects.js';
 
@@ -19,7 +25,7 @@ export function head(render_fn) {
 		previous_hydrate_nodes = hydrate_nodes;
 
 		let anchor = /** @type {import('#client').TemplateNode} */ (document.head.firstChild);
-		while (anchor.nodeType !== 8 || /** @type {Comment} */ (anchor).data !== '[') {
+		while (anchor.nodeType !== 8 || /** @type {Comment} */ (anchor).data !== HYDRATION_START) {
 			anchor = /** @type {import('#client').TemplateNode} */ (anchor.nextSibling);
 		}
 

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

@@ -1,3 +1,6 @@
+export const HYDRATION_START = '[';
+export const HYDRATION_END = ']';
+
 /**
  * Use this variable to guard everything related to hydration code so it can be treeshaken out
  * if the user doesn't use the `hydrate` method and these code paths are therefore not needed.
@@ -37,7 +40,7 @@ export function hydrate_anchor(node) {
 	var current = /** @type {Node | null} */ (node);
 
 	// TODO this could have false positives, if a user comment consisted of `[`. need to tighten that up
-	if (/** @type {Comment} */ (current)?.data !== '[') {
+	if (/** @type {Comment} */ (current)?.data !== HYDRATION_START) {
 		return node;
 	}
 
@@ -49,9 +52,9 @@ export function hydrate_anchor(node) {
 		if (current.nodeType === 8) {
 			var data = /** @type {Comment} */ (current).data;
 
-			if (data === '[') {
+			if (data === HYDRATION_START) {
 				depth += 1;
-			} else if (data === ']') {
+			} else if (data === HYDRATION_END) {
 				if (depth === 0) {
 					hydrate_nodes = /** @type {import('#client').TemplateNode[]} */ (nodes);
 					return current;

packages/svelte/src/internal/client/render.js

@@ -10,6 +10,7 @@ import { PassiveDelegatedEvents } from '../../constants.js';
 import { flush_sync, push, pop, current_component_context, untrack } from './runtime.js';
 import { effect_root, branch } from './reactivity/effects.js';
 import {
+	HYDRATION_START,
 	hydrate_anchor,
 	hydrate_nodes,
 	hydrating,
@@ -132,7 +133,10 @@ export function hydrate(component, options) {
 			set_hydrating(true);
 
 			var node = target.firstChild;
-			while (node && (node.nodeType !== 8 || /** @type {Comment} */ (node).data !== '[')) {
+			while (
+				node &&
+				(node.nodeType !== 8 || /** @type {Comment} */ (node).data !== HYDRATION_START)
+			) {
 				node = node.nextSibling;
 			}
 

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

@@ -9,6 +9,10 @@ import {
 } from '../../constants.js';
 import { DEV } from 'esm-env';
 import { current_component, pop, push } from './context.js';
+import {
+	block_close,
+	block_open
+} from '../../compiler/phases/3-transform/server/transform-server.js';
 
 /**
  * @typedef {{
@@ -161,11 +165,11 @@ export function element(payload, tag, attributes_fn, children_fn) {
 
 	if (!VoidElements.has(tag)) {
 		if (tag !== 'textarea') {
-			payload.out += '<!--[-->';
+			payload.out += block_open.value;
 		}
 		children_fn();
 		if (tag !== 'textarea') {
-			payload.out += '<!--]-->';
+			payload.out += block_close.value;
 		}
 		payload.out += `</${tag}>`;
 	}
@@ -187,7 +191,7 @@ export function render(component, options) {
 
 	const prev_on_destroy = on_destroy;
 	on_destroy = [];
-	payload.out += '<!--[-->';
+	payload.out += block_open.value;
 
 	if (options.context) {
 		push();
@@ -200,14 +204,14 @@ export function render(component, options) {
 		pop();
 	}
 
-	payload.out += '<!--]-->';
+	payload.out += block_close.value;
 	for (const cleanup of on_destroy) cleanup();
 	on_destroy = prev_on_destroy;
 
 	return {
 		head:
 			payload.head.out || payload.head.title
-				? payload.head.title + '<!--[-->' + payload.head.out + '<!--]-->'
+				? payload.head.title + block_open.value + payload.head.out + block_close.value
 				: '',
 		html: payload.out
 	};

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

@@ -52,7 +52,7 @@ const { test, run } = suite<HydrationTest>(async (config, cwd) => {
 	});
 
 	fs.writeFileSync(`${cwd}/_output/body.html`, rendered.html + '\n');
-	target.innerHTML = read(`${cwd}/override.html`) ?? rendered.html;
+	target.innerHTML = read(`${cwd}/_override.html`) ?? rendered.html;
 
 	if (rendered.head) {
 		fs.writeFileSync(`${cwd}/_output/head.html`, rendered.head + '\n');