svelte 5.0.0-next.99 → 5.0.1

package/src/compiler/phases/3-transform/utils.js

@@ -1,73 +1,129 @@
+/** @import { Context } from 'zimmerframe' */
+/** @import { TransformState } from './types.js' */
+/** @import { AST, Binding, Namespace, SvelteNode, ValidatedCompileOptions } from '#compiler' */
+/** @import { Node, Expression, CallExpression } from 'estree' */
 import {
 	regex_ends_with_whitespaces,
 	regex_not_whitespace,
 	regex_starts_with_whitespaces
 } from '../patterns.js';
 import * as b from '../../utils/builders.js';
+import * as e from '../../errors.js';
 import { walk } from 'zimmerframe';
+import { extract_identifiers } from '../../utils/ast.js';
+import check_graph_for_cycles from '../2-analyze/utils/check_graph_for_cycles.js';
+import is_reference from 'is-reference';
+import { set_scope } from '../scope.js';
+import { dev } from '../../state.js';
 
 /**
- * @param {string} s
- * @param {boolean} [attr]
+ * @param {Node} node
+ * @returns {boolean}
+ */
+export function is_hoisted_function(node) {
+	if (
+		node.type === 'ArrowFunctionExpression' ||
+		node.type === 'FunctionExpression' ||
+		node.type === 'FunctionDeclaration'
+	) {
+		return node.metadata?.hoisted === true;
+	}
+	return false;
+}
+
+/**
+ * Match Svelte 4 behaviour by sorting ConstTag nodes in topological order
+ * @param {SvelteNode[]} nodes
+ * @param {TransformState} state
  */
-export function escape_html(s, attr) {
-	if (typeof s !== 'string') return s;
-	const delimiter = attr ? '"' : '<';
-	const escaped_delimiter = attr ? '&quot;' : '&lt;';
-	let i_delimiter = s.indexOf(delimiter);
-	let i_ampersand = s.indexOf('&');
-
-	if (i_delimiter < 0 && i_ampersand < 0) return s;
-
-	let left = 0,
-		out = '';
-
-	while (i_delimiter >= 0 && i_ampersand >= 0) {
-		if (i_delimiter < i_ampersand) {
-			if (left < i_delimiter) out += s.substring(left, i_delimiter);
-			out += escaped_delimiter;
-			left = i_delimiter + 1;
-			i_delimiter = s.indexOf(delimiter, left);
+function sort_const_tags(nodes, state) {
+	/**
+	 * @typedef {{
+	 *   node: AST.ConstTag;
+	 *   deps: Set<Binding>;
+	 * }} Tag
+	 */
+
+	const other = [];
+
+	/** @type {Map<Binding, Tag>} */
+	const tags = new Map();
+
+	for (const node of nodes) {
+		if (node.type === 'ConstTag') {
+			const declaration = node.declaration.declarations[0];
+
+			const bindings = extract_identifiers(declaration.id).map((id) => {
+				return /** @type {Binding} */ (state.scope.get(id.name));
+			});
+
+			/** @type {Set<Binding>} */
+			const deps = new Set();
+
+			walk(declaration.init, state, {
+				// @ts-expect-error don't know, don't care
+				_: set_scope,
+				Identifier(node, context) {
+					const parent = /** @type {Expression} */ (context.path.at(-1));
+
+					if (is_reference(node, parent)) {
+						const binding = context.state.scope.get(node.name);
+						if (binding) deps.add(binding);
+					}
+				}
+			});
+
+			for (const binding of bindings) {
+				tags.set(binding, { node, deps });
+			}
 		} else {
-			if (left < i_ampersand) out += s.substring(left, i_ampersand);
-			out += '&amp;';
-			left = i_ampersand + 1;
-			i_ampersand = s.indexOf('&', left);
+			other.push(node);
 		}
 	}
 
-	if (i_delimiter >= 0) {
-		do {
-			if (left < i_delimiter) out += s.substring(left, i_delimiter);
-			out += escaped_delimiter;
-			left = i_delimiter + 1;
-			i_delimiter = s.indexOf(delimiter, left);
-		} while (i_delimiter >= 0);
-	} else if (!attr) {
-		while (i_ampersand >= 0) {
-			if (left < i_ampersand) out += s.substring(left, i_ampersand);
-			out += '&amp;';
-			left = i_ampersand + 1;
-			i_ampersand = s.indexOf('&', left);
+	if (tags.size === 0) {
+		return nodes;
+	}
+
+	/** @type {Array<[Binding, Binding]>} */
+	const edges = [];
+
+	for (const [id, tag] of tags) {
+		for (const dep of tag.deps) {
+			if (tags.has(dep)) {
+				edges.push([id, dep]);
+			}
 		}
 	}
 
-	return left < s.length ? out + s.substring(left) : out;
-}
+	const cycle = check_graph_for_cycles(edges);
+	if (cycle?.length) {
+		const tag = /** @type {Tag} */ (tags.get(cycle[0]));
+		e.const_tag_cycle(tag.node, cycle.map((binding) => binding.node.name).join(' → '));
+	}
 
-/**
- * @param {import('estree').Node} node
- * @returns {boolean}
- */
-export function is_hoistable_function(node) {
-	if (
-		node.type === 'ArrowFunctionExpression' ||
-		node.type === 'FunctionExpression' ||
-		node.type === 'FunctionDeclaration'
-	) {
-		return node.metadata?.hoistable === true;
+	/** @type {AST.ConstTag[]} */
+	const sorted = [];
+
+	/** @param {Tag} tag */
+	function add(tag) {
+		if (sorted.includes(tag.node)) {
+			return;
+		}
+
+		for (const dep of tag.deps) {
+			const dep_tag = tags.get(dep);
+			if (dep_tag) add(dep_tag);
+		}
+
+		sorted.push(tag.node);
 	}
-	return false;
+
+	for (const tag of tags.values()) {
+		add(tag);
+	}
+
+	return [...sorted, ...other];
 }
 
 /**
@@ -77,10 +133,11 @@ export function is_hoistable_function(node) {
  *   unless it's whitespace-only, in which case collapse to a single whitespace for all cases
  *   except when it's children of certain elements where we know ignore whitespace (like td/option/head),
  *   in which case we remove it entirely
- * @param {import('#compiler').SvelteNode} parent
- * @param {import('#compiler').SvelteNode[]} nodes
- * @param {import('#compiler').SvelteNode[]} path
- * @param {import('#compiler').Namespace} namespace
+ * @param {SvelteNode} parent
+ * @param {SvelteNode[]} nodes
+ * @param {SvelteNode[]} path
+ * @param {Namespace} namespace
+ * @param {TransformState & { options: ValidatedCompileOptions }} state
  * @param {boolean} preserve_whitespace
  * @param {boolean} preserve_comments
  */
@@ -89,13 +146,21 @@ export function clean_nodes(
 	nodes,
 	path,
 	namespace = 'html',
+	state,
+	// TODO give these defaults (state.options.preserveWhitespace and state.options.preserveComments).
+	// first, we need to make `Component(Client|Server)TransformState` inherit from a new `ComponentTransformState`
+	// rather than from `ClientTransformState` and `ServerTransformState`
 	preserve_whitespace,
 	preserve_comments
 ) {
-	/** @type {import('#compiler').SvelteNode[]} */
+	if (!state.analysis.runes) {
+		nodes = sort_const_tags(nodes, state);
+	}
+
+	/** @type {SvelteNode[]} */
 	const hoisted = [];
 
-	/** @type {import('#compiler').SvelteNode[]} */
+	/** @type {SvelteNode[]} */
 	const regular = [];
 
 	for (const node of nodes) {
@@ -120,121 +185,165 @@ export function clean_nodes(
 		}
 	}
 
-	if (preserve_whitespace) {
-		return { hoisted, trimmed: regular };
-	}
+	let trimmed = regular;
 
-	let first, last;
+	if (!preserve_whitespace) {
+		trimmed = [];
 
-	while ((first = regular[0]) && first.type === 'Text' && !regex_not_whitespace.test(first.data)) {
-		regular.shift();
-	}
+		let first, last;
 
-	if (first?.type === 'Text') {
-		first.raw = first.raw.replace(regex_starts_with_whitespaces, '');
-		first.data = first.data.replace(regex_starts_with_whitespaces, '');
-	}
+		while (
+			(first = regular[0]) &&
+			first.type === 'Text' &&
+			!regex_not_whitespace.test(first.data)
+		) {
+			regular.shift();
+		}
 
-	while ((last = regular.at(-1)) && last.type === 'Text' && !regex_not_whitespace.test(last.data)) {
-		regular.pop();
-	}
+		if (first?.type === 'Text') {
+			first.raw = first.raw.replace(regex_starts_with_whitespaces, '');
+			first.data = first.data.replace(regex_starts_with_whitespaces, '');
+		}
 
-	if (last?.type === 'Text') {
-		last.raw = last.raw.replace(regex_ends_with_whitespaces, '');
-		last.data = last.data.replace(regex_ends_with_whitespaces, '');
-	}
+		while (
+			(last = regular.at(-1)) &&
+			last.type === 'Text' &&
+			!regex_not_whitespace.test(last.data)
+		) {
+			regular.pop();
+		}
 
-	const can_remove_entirely =
-		(namespace === 'svg' &&
-			(parent.type !== 'RegularElement' || parent.name !== 'text') &&
-			!path.some((n) => n.type === 'RegularElement' && n.name === 'text')) ||
-		(parent.type === 'RegularElement' &&
-			// TODO others?
-			(parent.name === 'select' ||
-				parent.name === 'tr' ||
-				parent.name === 'table' ||
-				parent.name === 'tbody' ||
-				parent.name === 'thead' ||
-				parent.name === 'tfoot' ||
-				parent.name === 'colgroup' ||
-				parent.name === 'datalist'));
-
-	/** @type {import('#compiler').SvelteNode[]} */
-	const trimmed = [];
-
-	// Replace any whitespace between a text and non-text node with a single spaceand keep whitespace
-	// as-is within text nodes, or between text nodes and expression tags (because in the end they count
-	// as one text). This way whitespace is mostly preserved when using CSS with `white-space: pre-line`
-	// and default slot content going into a pre tag (which we can't see).
-	for (let i = 0; i < regular.length; i++) {
-		const prev = regular[i - 1];
-		const node = regular[i];
-		const next = regular[i + 1];
-
-		if (node.type === 'Text') {
-			if (prev?.type !== 'ExpressionTag') {
-				const prev_is_text_ending_with_whitespace =
-					prev?.type === 'Text' && regex_ends_with_whitespaces.test(prev.data);
-				node.data = node.data.replace(
-					regex_starts_with_whitespaces,
-					prev_is_text_ending_with_whitespace ? '' : ' '
-				);
-				node.raw = node.raw.replace(
-					regex_starts_with_whitespaces,
-					prev_is_text_ending_with_whitespace ? '' : ' '
-				);
-			}
-			if (next?.type !== 'ExpressionTag') {
-				node.data = node.data.replace(regex_ends_with_whitespaces, ' ');
-				node.raw = node.raw.replace(regex_ends_with_whitespaces, ' ');
-			}
-			if (node.data && (node.data !== ' ' || !can_remove_entirely)) {
+		if (last?.type === 'Text') {
+			last.raw = last.raw.replace(regex_ends_with_whitespaces, '');
+			last.data = last.data.replace(regex_ends_with_whitespaces, '');
+		}
+
+		const can_remove_entirely =
+			(namespace === 'svg' &&
+				(parent.type !== 'RegularElement' || parent.name !== 'text') &&
+				!path.some((n) => n.type === 'RegularElement' && n.name === 'text')) ||
+			(parent.type === 'RegularElement' &&
+				// TODO others?
+				(parent.name === 'select' ||
+					parent.name === 'tr' ||
+					parent.name === 'table' ||
+					parent.name === 'tbody' ||
+					parent.name === 'thead' ||
+					parent.name === 'tfoot' ||
+					parent.name === 'colgroup' ||
+					parent.name === 'datalist'));
+
+		// Replace any whitespace between a text and non-text node with a single spaceand keep whitespace
+		// as-is within text nodes, or between text nodes and expression tags (because in the end they count
+		// as one text). This way whitespace is mostly preserved when using CSS with `white-space: pre-line`
+		// and default slot content going into a pre tag (which we can't see).
+		for (let i = 0; i < regular.length; i++) {
+			const prev = regular[i - 1];
+			const node = regular[i];
+			const next = regular[i + 1];
+
+			if (node.type === 'Text') {
+				if (prev?.type !== 'ExpressionTag') {
+					const prev_is_text_ending_with_whitespace =
+						prev?.type === 'Text' && regex_ends_with_whitespaces.test(prev.data);
+					node.data = node.data.replace(
+						regex_starts_with_whitespaces,
+						prev_is_text_ending_with_whitespace ? '' : ' '
+					);
+					node.raw = node.raw.replace(
+						regex_starts_with_whitespaces,
+						prev_is_text_ending_with_whitespace ? '' : ' '
+					);
+				}
+				if (next?.type !== 'ExpressionTag') {
+					node.data = node.data.replace(regex_ends_with_whitespaces, ' ');
+					node.raw = node.raw.replace(regex_ends_with_whitespaces, ' ');
+				}
+				if (node.data && (node.data !== ' ' || !can_remove_entirely)) {
+					trimmed.push(node);
+				}
+			} else {
 				trimmed.push(node);
 			}
-		} else {
-			trimmed.push(node);
 		}
 	}
 
-	return { hoisted, trimmed };
+	var first = trimmed[0];
+
+	// Special case: Add a comment if this is a lone script tag. This ensures that our run_scripts logic in template.js
+	// will always be able to call node.replaceWith() on the script tag in order to make it run. If we don't add this
+	// and would still call node.replaceWith() on the script tag, it would be a no-op because the script tag has no parent.
+	if (trimmed.length === 1 && first.type === 'RegularElement' && first.name === 'script') {
+		trimmed.push({
+			type: 'Comment',
+			data: '',
+			parent: first.parent,
+			start: -1,
+			end: -1
+		});
+	}
+
+	return {
+		hoisted,
+		trimmed,
+		/**
+		 * In a case like `{#if x}<Foo />{/if}`, we don't need to wrap the child in
+		 * comments — we can just use the parent block's anchor for the component.
+		 * TODO extend this optimisation to other cases
+		 */
+		is_standalone:
+			trimmed.length === 1 &&
+			((first.type === 'RenderTag' && !first.metadata.dynamic) ||
+				(first.type === 'Component' &&
+					!state.options.hmr &&
+					!first.metadata.dynamic &&
+					!first.attributes.some(
+						(attribute) => attribute.type === 'Attribute' && attribute.name.startsWith('--')
+					))),
+		/** if a component/snippet/each block starts with text, we need to add an anchor comment so that its text node doesn't get fused with its surroundings */
+		is_text_first:
+			(parent.type === 'Fragment' ||
+				parent.type === 'SnippetBlock' ||
+				parent.type === 'EachBlock' ||
+				parent.type === 'SvelteComponent' ||
+				parent.type === 'Component' ||
+				parent.type === 'SvelteSelf') &&
+			first &&
+			(first?.type === 'Text' || first?.type === 'ExpressionTag')
+	};
 }
 
 /**
  * Infers the namespace for the children of a node that should be used when creating the `$.template(...)`.
- * @param {import('#compiler').Namespace} namespace
- * @param {import('#compiler').SvelteNode} parent
- * @param {import('#compiler').SvelteNode[]} nodes
- * @param {import('#compiler').SvelteNode[]} path
+ * @param {Namespace} namespace
+ * @param {SvelteNode} parent
+ * @param {SvelteNode[]} nodes
  */
-export function infer_namespace(namespace, parent, nodes, path) {
-	const parent_node =
-		parent.type === 'Fragment'
-			? // Messy: We know that Fragment calls create_block directly, so we can do this here
-				path.at(-1)
-			: parent;
-
-	if (namespace !== 'foreign') {
-		if (parent_node?.type === 'RegularElement' && parent_node.name === 'foreignObject') {
-			return 'html';
-		}
+export function infer_namespace(namespace, parent, nodes) {
+	if (parent.type === 'RegularElement' && parent.name === 'foreignObject') {
+		return 'html';
+	}
 
-		if (parent_node?.type === 'RegularElement' || parent_node?.type === 'SvelteElement') {
-			return parent_node.metadata.svg ? 'svg' : 'html';
+	if (parent.type === 'RegularElement' || parent.type === 'SvelteElement') {
+		if (parent.metadata.svg) {
+			return 'svg';
 		}
+		return parent.metadata.mathml ? 'mathml' : 'html';
+	}
 
-		// Re-evaluate the namespace inside slot nodes that reset the namespace
-		if (
-			parent_node === undefined ||
-			parent_node.type === 'Root' ||
-			parent_node.type === 'Component' ||
-			parent_node.type === 'SvelteComponent' ||
-			parent_node.type === 'SvelteFragment' ||
-			parent_node.type === 'SnippetBlock'
-		) {
-			const new_namespace = check_nodes_for_namespace(nodes, 'keep');
-			if (new_namespace !== 'keep' && new_namespace !== 'maybe_html') {
-				return new_namespace;
-			}
+	// Re-evaluate the namespace inside slot nodes that reset the namespace
+	if (
+		parent.type === 'Fragment' ||
+		parent.type === 'Root' ||
+		parent.type === 'Component' ||
+		parent.type === 'SvelteComponent' ||
+		parent.type === 'SvelteFragment' ||
+		parent.type === 'SnippetBlock' ||
+		parent.type === 'SlotElement'
+	) {
+		const new_namespace = check_nodes_for_namespace(nodes, 'keep');
+		if (new_namespace !== 'keep' && new_namespace !== 'maybe_html') {
+			return new_namespace;
 		}
 	}
 
@@ -245,20 +354,20 @@ export function infer_namespace(namespace, parent, nodes, path) {
  * Heuristic: Keep current namespace, unless we find a regular element,
  * in which case we always want html, or we only find svg nodes,
  * in which case we assume svg.
- * @param {import('#compiler').SvelteNode[]} nodes
- * @param {import('#compiler').Namespace | 'keep' | 'maybe_html'} namespace
+ * @param {SvelteNode[]} nodes
+ * @param {Namespace | 'keep' | 'maybe_html'} namespace
  */
 function check_nodes_for_namespace(nodes, namespace) {
 	/**
-	 * @param {import('#compiler').SvelteElement | import('#compiler').RegularElement} node}
+	 * @param {AST.SvelteElement | AST.RegularElement} node}
 	 * @param {{stop: () => void}} context
 	 */
 	const RegularElement = (node, { stop }) => {
-		if (!node.metadata.svg) {
+		if (!node.metadata.svg && !node.metadata.mathml) {
 			namespace = 'html';
 			stop();
 		} else if (namespace === 'keep') {
-			namespace = 'svg';
+			namespace = node.metadata.svg ? 'svg' : 'mathml';
 		}
 	};
 
@@ -299,40 +408,39 @@ function check_nodes_for_namespace(nodes, namespace) {
 
 /**
  * Determines the namespace the children of this node are in.
- * @param {import('#compiler').RegularElement | import('#compiler').SvelteElement} node
- * @param {import('#compiler').Namespace} namespace
- * @returns {import('#compiler').Namespace}
+ * @param {AST.RegularElement | AST.SvelteElement} node
+ * @param {Namespace} namespace
+ * @returns {Namespace}
  */
 export function determine_namespace_for_children(node, namespace) {
-	if (namespace === 'foreign') {
-		return namespace;
-	}
-
 	if (node.name === 'foreignObject') {
 		return 'html';
 	}
 
-	return node.metadata.svg ? 'svg' : 'html';
+	if (node.metadata.svg) {
+		return 'svg';
+	}
+
+	return node.metadata.mathml ? 'mathml' : 'html';
 }
 
 /**
- * @template {import('./types.js').TransformState} T
- * @param {import('estree').CallExpression} node
- * @param {import('zimmerframe').Context<any, T>} context
+ * @template {TransformState} T
+ * @param {CallExpression} node
+ * @param {Context<any, T>} context
  */
 export function transform_inspect_rune(node, context) {
 	const { state, visit } = context;
 	const as_fn = state.options.generate === 'client';
 
-	if (!state.options.dev) return b.unary('void', b.literal(0));
+	if (!dev) return b.empty;
 
 	if (node.callee.type === 'MemberExpression') {
-		const raw_inspect_args = /** @type {import('estree').CallExpression} */ (node.callee.object)
-			.arguments;
+		const raw_inspect_args = /** @type {CallExpression} */ (node.callee.object).arguments;
 		const inspect_args =
-			/** @type {Array<import('estree').Expression>} */
+			/** @type {Array<Expression>} */
 			(raw_inspect_args.map((arg) => visit(arg)));
-		const with_arg = /** @type {import('estree').Expression} */ (visit(node.arguments[0]));
+		const with_arg = /** @type {Expression} */ (visit(node.arguments[0]));
 
 		return b.call(
 			'$.inspect',
@@ -340,9 +448,7 @@ export function transform_inspect_rune(node, context) {
 			with_arg
 		);
 	} else {
-		const arg = node.arguments.map(
-			(arg) => /** @type {import('estree').Expression} */ (visit(arg))
-		);
+		const arg = node.arguments.map((arg) => /** @type {Expression} */ (visit(arg)));
 		return b.call('$.inspect', as_fn ? b.thunk(b.array(arg)) : b.array(arg));
 	}
 }