avoid magic strings

Author: Rich-Harris

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;
 			}