avoid magic strings

Author: Rich-Harris

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

@@ -24,11 +24,11 @@ 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 } from '../../../../constants.js';
+import { DOMBooleanAttributes, HYDRATION_END, HYDRATION_START } from '../../../../constants.js';
 import { sanitize_template_string } from '../../../utils/sanitize_template_string.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/constants.js

@@ -19,6 +19,9 @@ export const TRANSITION_GLOBAL = 1 << 2;
 export const TEMPLATE_FRAGMENT = 1;
 export const TEMPLATE_USE_IMPORT_NODE = 1 << 1;
 
+export const HYDRATION_START = '[';
+export const HYDRATION_END = ']';
+
 export const UNINITIALIZED = Symbol();
 
 /** List of Element events that will be delegated */

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

@@ -4,15 +4,10 @@ import {
 	EACH_IS_CONTROLLED,
 	EACH_IS_STRICT_EQUALS,
 	EACH_ITEM_REACTIVE,
-	EACH_KEYED
+	EACH_KEYED,
+	HYDRATION_START
 } from '../../../../constants.js';
-import {
-	HYDRATION_START,
-	hydrate_anchor,
-	hydrate_nodes,
-	hydrating,
-	set_hydrating
-} from '../hydration.js';
+import { 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';

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

@@ -1,12 +1,7 @@
-import {
-	HYDRATION_START,
-	hydrate_anchor,
-	hydrate_nodes,
-	hydrating,
-	set_hydrate_nodes
-} from '../hydration.js';
+import { hydrate_anchor, hydrate_nodes, hydrating, set_hydrate_nodes } from '../hydration.js';
 import { empty } from '../operations.js';
 import { block } from '../../reactivity/effects.js';
+import { HYDRATION_START } from '../../../../constants.js';
 
 /**
  * @param {(anchor: Node) => import('#client').Dom | void} render_fn

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

@@ -1,5 +1,4 @@
-export const HYDRATION_START = '[';
-export const HYDRATION_END = ']';
+import { HYDRATION_END, HYDRATION_START } from '../../../constants.js';
 
 /**
  * Use this variable to guard everything related to hydration code so it can be treeshaken out

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

@@ -6,11 +6,10 @@ import {
 	empty,
 	init_operations
 } from './dom/operations.js';
-import { PassiveDelegatedEvents } from '../../constants.js';
+import { HYDRATION_START, 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,

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

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

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

@@ -9,6 +9,7 @@ import {
 } from '../../constants.js';
 import { DEV } from 'esm-env';
 import { current_component, pop, push } from './context.js';
+import { BLOCK_CLOSE, BLOCK_OPEN } from './hydration.js';
 
 /**
  * @typedef {{
@@ -161,11 +162,11 @@ export function element(payload, tag, attributes_fn, children_fn) {
 
 	if (!VoidElements.has(tag)) {
 		if (tag !== 'textarea') {
-			payload.out += '<!--[-->';
+			payload.out += BLOCK_OPEN;
 		}
 		children_fn();
 		if (tag !== 'textarea') {
-			payload.out += '<!--]-->';
+			payload.out += BLOCK_CLOSE;
 		}
 		payload.out += `</${tag}>`;
 	}
@@ -187,7 +188,7 @@ export function render(component, options) {
 
 	const prev_on_destroy = on_destroy;
 	on_destroy = [];
-	payload.out += '<!--[-->';
+	payload.out += BLOCK_OPEN;
 
 	if (options.context) {
 		push();
@@ -200,14 +201,14 @@ export function render(component, options) {
 		pop();
 	}
 
-	payload.out += '<!--]-->';
+	payload.out += BLOCK_CLOSE;
 	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 + payload.head.out + BLOCK_CLOSE
 				: '',
 		html: payload.out
 	};