svelte 5.42.1 → 5.42.3

package/package.json

@@ -2,7 +2,7 @@
   "name": "svelte",
   "description": "Cybernetically enhanced web apps",
   "license": "MIT",
-  "version": "5.42.1",
+  "version": "5.42.3",
   "type": "module",
   "types": "./types/index.d.ts",
   "engines": {

package/src/compiler/phases/1-parse/state/element.js

@@ -9,11 +9,10 @@ import { decode_character_references } from '../utils/html.js';
 import * as e from '../../../errors.js';
 import * as w from '../../../warnings.js';
 import { create_fragment } from '../utils/create.js';
-import { create_attribute, create_expression_metadata, is_element_node } from '../../nodes.js';
+import { create_attribute, ExpressionMetadata, is_element_node } from '../../nodes.js';
 import { get_attribute_expression, is_expression_attribute } from '../../../utils/ast.js';
 import { closing_tag_omitted } from '../../../../html-tree-validation.js';
 import { list } from '../../../utils/string.js';
-import { regex_whitespace } from '../../patterns.js';
 
 const regex_invalid_unquoted_attribute_value = /^(\/>|[\s"'=<>`])/;
 const regex_closing_textarea_tag = /^<\/textarea(\s[^>]*)?>/i;
@@ -297,7 +296,7 @@ export default function element(parser) {
 			element.tag = get_attribute_expression(definition);
 		}
 
-		element.metadata.expression = create_expression_metadata();
+		element.metadata.expression = new ExpressionMetadata();
 	}
 
 	if (is_top_level_script_or_style) {
@@ -508,7 +507,7 @@ function read_attribute(parser) {
 				end: parser.index,
 				expression,
 				metadata: {
-					expression: create_expression_metadata()
+					expression: new ExpressionMetadata()
 				}
 			};
 
@@ -528,7 +527,7 @@ function read_attribute(parser) {
 				end: parser.index,
 				expression,
 				metadata: {
-					expression: create_expression_metadata()
+					expression: new ExpressionMetadata()
 				}
 			};
 
@@ -568,7 +567,7 @@ function read_attribute(parser) {
 					name
 				},
 				metadata: {
-					expression: create_expression_metadata()
+					expression: new ExpressionMetadata()
 				}
 			};
 
@@ -628,7 +627,7 @@ function read_attribute(parser) {
 				modifiers: /** @type {Array<'important'>} */ (modifiers),
 				value,
 				metadata: {
-					expression: create_expression_metadata()
+					expression: new ExpressionMetadata()
 				}
 			};
 		}
@@ -658,7 +657,7 @@ function read_attribute(parser) {
 			name: directive_name,
 			expression,
 			metadata: {
-				expression: create_expression_metadata()
+				expression: new ExpressionMetadata()
 			}
 		};
 
@@ -824,7 +823,7 @@ function read_sequence(parser, done, location) {
 				end: parser.index,
 				expression,
 				metadata: {
-					expression: create_expression_metadata()
+					expression: new ExpressionMetadata()
 				}
 			};
 

package/src/compiler/phases/1-parse/state/tag.js

@@ -3,7 +3,7 @@
 /** @import { Parser } from '../index.js' */
 import { walk } from 'zimmerframe';
 import * as e from '../../../errors.js';
-import { create_expression_metadata } from '../../nodes.js';
+import { ExpressionMetadata } from '../../nodes.js';
 import { parse_expression_at } from '../acorn.js';
 import read_pattern from '../read/context.js';
 import read_expression, { get_loose_identifier } from '../read/expression.js';
@@ -42,7 +42,7 @@ export default function tag(parser) {
 		end: parser.index,
 		expression,
 		metadata: {
-			expression: create_expression_metadata()
+			expression: new ExpressionMetadata()
 		}
 	});
 }
@@ -65,7 +65,7 @@ function open(parser) {
 			consequent: create_fragment(),
 			alternate: null,
 			metadata: {
-				expression: create_expression_metadata()
+				expression: new ExpressionMetadata()
 			}
 		});
 
@@ -249,7 +249,7 @@ function open(parser) {
 			then: null,
 			catch: null,
 			metadata: {
-				expression: create_expression_metadata()
+				expression: new ExpressionMetadata()
 			}
 		});
 
@@ -334,7 +334,7 @@ function open(parser) {
 			expression,
 			fragment: create_fragment(),
 			metadata: {
-				expression: create_expression_metadata()
+				expression: new ExpressionMetadata()
 			}
 		});
 
@@ -477,7 +477,7 @@ function next(parser) {
 				consequent: create_fragment(),
 				alternate: null,
 				metadata: {
-					expression: create_expression_metadata()
+					expression: new ExpressionMetadata()
 				}
 			});
 
@@ -643,7 +643,7 @@ function special(parser) {
 			end: parser.index,
 			expression,
 			metadata: {
-				expression: create_expression_metadata()
+				expression: new ExpressionMetadata()
 			}
 		});
 
@@ -721,7 +721,7 @@ function special(parser) {
 				end: parser.index - 1
 			},
 			metadata: {
-				expression: create_expression_metadata()
+				expression: new ExpressionMetadata()
 			}
 		});
 	}
@@ -748,7 +748,7 @@ function special(parser) {
 			end: parser.index,
 			expression: /** @type {AST.RenderTag['expression']} */ (expression),
 			metadata: {
-				expression: create_expression_metadata(),
+				expression: new ExpressionMetadata(),
 				dynamic: false,
 				arguments: [],
 				path: [],

package/src/compiler/phases/2-analyze/index.js

@@ -1,4 +1,4 @@
-/** @import { Expression, Node, Program } from 'estree' */
+/** @import * as ESTree from 'estree' */
 /** @import { Binding, AST, ValidatedCompileOptions, ValidatedModuleCompileOptions } from '#compiler' */
 /** @import { AnalysisState, Visitors } from './types' */
 /** @import { Analysis, ComponentAnalysis, Js, ReactiveStatement, Template } from '../types' */
@@ -206,7 +206,7 @@ const visitors = {
  * @returns {Js}
  */
 function js(script, root, allow_reactive_declarations, parent) {
-	/** @type {Program} */
+	/** @type {ESTree.Program} */
 	const ast = script?.content ?? {
 		type: 'Program',
 		sourceType: 'module',
@@ -289,7 +289,7 @@ export function analyze_module(source, options) {
 	});
 
 	walk(
-		/** @type {Node} */ (ast),
+		/** @type {ESTree.Node} */ (ast),
 		{
 			scope,
 			scopes,
@@ -347,7 +347,7 @@ export function analyze_component(root, source, options) {
 
 		const store_name = name.slice(1);
 		const declaration = instance.scope.get(store_name);
-		const init = /** @type {Node | undefined} */ (declaration?.initial);
+		const init = /** @type {ESTree.Node | undefined} */ (declaration?.initial);
 
 		// If we're not in legacy mode through the compiler option, assume the user
 		// is referencing a rune and not a global store.
@@ -407,7 +407,7 @@ export function analyze_component(root, source, options) {
 						/** @type {number} */ (node.start) > /** @type {number} */ (module.ast.start) &&
 						/** @type {number} */ (node.end) < /** @type {number} */ (module.ast.end) &&
 						// const state = $state(0) is valid
-						get_rune(/** @type {Node} */ (path.at(-1)), module.scope) === null
+						get_rune(/** @type {ESTree.Node} */ (path.at(-1)), module.scope) === null
 					) {
 						e.store_invalid_subscription(node);
 					}
@@ -636,7 +636,7 @@ export function analyze_component(root, source, options) {
 							// @ts-expect-error
 							_: set_scope,
 							Identifier(node, context) {
-								const parent = /** @type {Expression} */ (context.path.at(-1));
+								const parent = /** @type {ESTree.Expression} */ (context.path.at(-1));
 
 								if (is_reference(node, parent)) {
 									const binding = context.state.scope.get(node.name);

package/src/compiler/phases/2-analyze/visitors/CallExpression.js

@@ -7,7 +7,7 @@ import { get_parent } from '../../../utils/ast.js';
 import { is_pure, is_safe_identifier } from './shared/utils.js';
 import { dev, locate_node, source } from '../../../state.js';
 import * as b from '#compiler/builders';
-import { create_expression_metadata } from '../../nodes.js';
+import { ExpressionMetadata } from '../../nodes.js';
 
 /**
  * @param {CallExpression} node
@@ -243,7 +243,7 @@ export function CallExpression(node, context) {
 
 	// `$inspect(foo)` or `$derived(foo) should not trigger the `static-state-reference` warning
 	if (rune === '$derived') {
-		const expression = create_expression_metadata();
+		const expression = new ExpressionMetadata();
 
 		context.next({
 			...context.state,

package/src/compiler/phases/2-analyze/visitors/RenderTag.js

@@ -5,7 +5,7 @@ import * as e from '../../../errors.js';
 import { validate_opening_tag } from './shared/utils.js';
 import { mark_subtree_dynamic } from './shared/fragment.js';
 import { is_resolved_snippet } from './shared/snippets.js';
-import { create_expression_metadata } from '../../nodes.js';
+import { ExpressionMetadata } from '../../nodes.js';
 
 /**
  * @param {AST.RenderTag} node
@@ -57,7 +57,7 @@ export function RenderTag(node, context) {
 	context.visit(callee, { ...context.state, expression: node.metadata.expression });
 
 	for (const arg of expression.arguments) {
-		const metadata = create_expression_metadata();
+		const metadata = new ExpressionMetadata();
 		node.metadata.arguments.push(metadata);
 
 		context.visit(arg, {

package/src/compiler/phases/2-analyze/visitors/shared/utils.js

@@ -22,7 +22,10 @@ export function validate_assignment(node, argument, context) {
 		const binding = context.state.scope.get(argument.name);
 
 		if (context.state.analysis.runes) {
-			if (binding?.node === context.state.analysis.props_id) {
+			if (
+				context.state.analysis.props_id != null &&
+				binding?.node === context.state.analysis.props_id
+			) {
 				e.constant_assignment(node, '$props.id()');
 			}
 

package/src/compiler/phases/3-transform/client/visitors/CallExpression.js

@@ -62,6 +62,17 @@ export function CallExpression(node, context) {
 				is_ignored(node, 'state_snapshot_uncloneable') && b.true
 			);
 
+		case '$effect':
+		case '$effect.pre': {
+			const callee = rune === '$effect' ? '$.user_effect' : '$.user_pre_effect';
+			const func = /** @type {Expression} */ (context.visit(node.arguments[0]));
+
+			const expr = b.call(callee, /** @type {Expression} */ (func));
+			expr.callee.loc = node.callee.loc; // ensure correct mapping
+
+			return expr;
+		}
+
 		case '$effect.root':
 			return b.call(
 				'$.effect_root',

package/src/compiler/phases/3-transform/client/visitors/ExpressionStatement.js

@@ -11,16 +11,6 @@ export function ExpressionStatement(node, context) {
 	if (node.expression.type === 'CallExpression') {
 		const rune = get_rune(node.expression, context.state.scope);
 
-		if (rune === '$effect' || rune === '$effect.pre') {
-			const callee = rune === '$effect' ? '$.user_effect' : '$.user_pre_effect';
-			const func = /** @type {Expression} */ (context.visit(node.expression.arguments[0]));
-
-			const expr = b.call(callee, /** @type {Expression} */ (func));
-			expr.callee.loc = node.expression.callee.loc; // ensure correct mapping
-
-			return b.stmt(expr);
-		}
-
 		if (rune === '$inspect.trace') {
 			return b.empty;
 		}

package/src/compiler/phases/3-transform/client/visitors/RegularElement.js

@@ -11,7 +11,7 @@ import {
 import { is_ignored } from '../../../../state.js';
 import { is_event_attribute, is_text_attribute } from '../../../../utils/ast.js';
 import * as b from '#compiler/builders';
-import { create_attribute, is_custom_element_node } from '../../../nodes.js';
+import { create_attribute, ExpressionMetadata, is_custom_element_node } from '../../../nodes.js';
 import { clean_nodes, determine_namespace_for_children } from '../../utils.js';
 import { build_getter } from '../utils.js';
 import {
@@ -267,10 +267,7 @@ export function RegularElement(node, context) {
 				const { value, has_state } = build_attribute_value(
 					attribute.value,
 					context,
-					(value, metadata) =>
-						metadata.has_call || metadata.has_await
-							? context.state.memoizer.add(value, metadata.has_await)
-							: value
+					(value, metadata) => context.state.memoizer.add(value, metadata)
 				);
 
 				const update = build_element_attribute_update(node, node_id, name, value, attributes);
@@ -487,11 +484,25 @@ function setup_select_synchronization(value_binding, context) {
 	);
 }
 
+/**
+ * @param {ExpressionMetadata} target
+ * @param {ExpressionMetadata} source
+ */
+function merge_metadata(target, source) {
+	target.has_assignment ||= source.has_assignment;
+	target.has_await ||= source.has_await;
+	target.has_call ||= source.has_call;
+	target.has_member_expression ||= source.has_member_expression;
+	target.has_state ||= source.has_state;
+
+	for (const r of source.references) target.references.add(r);
+	for (const b of source.dependencies) target.dependencies.add(b);
+}
+
 /**
  * @param {AST.ClassDirective[]} class_directives
  * @param {ComponentContext} context
  * @param {Memoizer} memoizer
- * @return {ObjectExpression | Identifier}
  */
 export function build_class_directives_object(
 	class_directives,
@@ -499,26 +510,25 @@ export function build_class_directives_object(
 	memoizer = context.state.memoizer
 ) {
 	let properties = [];
-	let has_call_or_state = false;
-	let has_await = false;
+
+	const metadata = new ExpressionMetadata();
 
 	for (const d of class_directives) {
+		merge_metadata(metadata, d.metadata.expression);
+
 		const expression = /** @type Expression */ (context.visit(d.expression));
 		properties.push(b.init(d.name, expression));
-		has_call_or_state ||= d.metadata.expression.has_call || d.metadata.expression.has_state;
-		has_await ||= d.metadata.expression.has_await;
 	}
 
 	const directives = b.object(properties);
 
-	return has_call_or_state || has_await ? memoizer.add(directives, has_await) : directives;
+	return memoizer.add(directives, metadata);
 }
 
 /**
  * @param {AST.StyleDirective[]} style_directives
  * @param {ComponentContext} context
  * @param {Memoizer} memoizer
- * @return {ObjectExpression | ArrayExpression | Identifier}}
  */
 export function build_style_directives_object(
 	style_directives,
@@ -528,10 +538,11 @@ export function build_style_directives_object(
 	const normal = b.object([]);
 	const important = b.object([]);
 
-	let has_call_or_state = false;
-	let has_await = false;
+	const metadata = new ExpressionMetadata();
 
 	for (const d of style_directives) {
+		merge_metadata(metadata, d.metadata.expression);
+
 		const expression =
 			d.value === true
 				? build_getter(b.id(d.name), context.state)
@@ -539,14 +550,11 @@ export function build_style_directives_object(
 
 		const object = d.modifiers.includes('important') ? important : normal;
 		object.properties.push(b.init(d.name, expression));
-
-		has_call_or_state ||= d.metadata.expression.has_call || d.metadata.expression.has_state;
-		has_await ||= d.metadata.expression.has_await;
 	}
 
 	const directives = important.properties.length ? b.array([normal, important]) : normal;
 
-	return has_call_or_state || has_await ? memoizer.add(directives, has_await) : directives;
+	return memoizer.add(directives, metadata);
 }
 
 /**
@@ -675,7 +683,7 @@ function build_element_special_value_attribute(
 		element === 'select' && attribute.value !== true && !is_text_attribute(attribute);
 
 	const { value, has_state } = build_attribute_value(attribute.value, context, (value, metadata) =>
-		metadata.has_call || metadata.has_await ? state.memoizer.add(value, metadata.has_await) : value
+		state.memoizer.add(value, metadata)
 	);
 
 	const evaluated = context.state.scope.evaluate(value);

package/src/compiler/phases/3-transform/client/visitors/RenderTag.js

@@ -26,7 +26,7 @@ export function RenderTag(node, context) {
 		let expression = build_expression(context, arg, metadata);
 
 		if (metadata.has_await || metadata.has_call) {
-			expression = b.call('$.get', memoizer.add(expression, metadata.has_await));
+			expression = b.call('$.get', memoizer.add(expression, metadata));
 		}
 
 		args.push(b.thunk(expression));

package/src/compiler/phases/3-transform/client/visitors/SlotElement.js

@@ -35,7 +35,7 @@ export function SlotElement(node, context) {
 				context,
 				(value, metadata) =>
 					metadata.has_call || metadata.has_await
-						? b.call('$.get', memoizer.add(value, metadata.has_await))
+						? b.call('$.get', memoizer.add(value, metadata))
 						: value
 			);
 

package/src/compiler/phases/3-transform/client/visitors/SvelteHead.js

@@ -2,6 +2,8 @@
 /** @import { AST } from '#compiler' */
 /** @import { ComponentContext } from '../types' */
 import * as b from '#compiler/builders';
+import { hash } from '../../../../../utils.js';
+import { filename } from '../../../../state.js';
 
 /**
  * @param {AST.SvelteHead} node
@@ -13,6 +15,7 @@ export function SvelteHead(node, context) {
 		b.stmt(
 			b.call(
 				'$.head',
+				b.literal(hash(filename)),
 				b.arrow([b.id('$$anchor')], /** @type {BlockStatement} */ (context.visit(node.fragment)))
 			)
 		)

package/src/compiler/phases/3-transform/client/visitors/shared/component.js

@@ -134,7 +134,7 @@ export function build_component(node, component_name, context) {
 				props_and_spreads.push(
 					b.thunk(
 						attribute.metadata.expression.has_await || attribute.metadata.expression.has_call
-							? b.call('$.get', memoizer.add(expression, attribute.metadata.expression.has_await))
+							? b.call('$.get', memoizer.add(expression, attribute.metadata.expression))
 							: expression
 					)
 				);
@@ -149,7 +149,7 @@ export function build_component(node, component_name, context) {
 						build_attribute_value(attribute.value, context, (value, metadata) => {
 							// TODO put the derived in the local block
 							return metadata.has_call || metadata.has_await
-								? b.call('$.get', memoizer.add(value, metadata.has_await))
+								? b.call('$.get', memoizer.add(value, metadata))
 								: value;
 						}).value
 					)
@@ -185,7 +185,7 @@ export function build_component(node, component_name, context) {
 						});
 
 					return should_wrap_in_derived
-						? b.call('$.get', memoizer.add(value, metadata.has_await))
+						? b.call('$.get', memoizer.add(value, metadata, true))
 						: value;
 				}
 			);

package/src/compiler/phases/3-transform/client/visitors/shared/element.js

@@ -1,5 +1,5 @@
 /** @import { Expression, Identifier, ObjectExpression } from 'estree' */
-/** @import { AST, ExpressionMetadata } from '#compiler' */
+/** @import { AST } from '#compiler' */
 /** @import { ComponentContext } from '../../types' */
 import { escape_html } from '../../../../../../escaping.js';
 import { normalize_attribute } from '../../../../../../utils.js';
@@ -8,6 +8,7 @@ import { is_event_attribute } from '../../../../../utils/ast.js';
 import * as b from '#compiler/builders';
 import { build_class_directives_object, build_style_directives_object } from '../RegularElement.js';
 import { build_expression, build_template_chunk, Memoizer } from './utils.js';
+import { ExpressionMetadata } from '../../../../nodes.js';
 
 /**
  * @param {Array<AST.Attribute | AST.SpreadAttribute>} attributes
@@ -35,7 +36,7 @@ export function build_attribute_effect(
 	for (const attribute of attributes) {
 		if (attribute.type === 'Attribute') {
 			const { value } = build_attribute_value(attribute.value, context, (value, metadata) =>
-				metadata.has_call || metadata.has_await ? memoizer.add(value, metadata.has_await) : value
+				memoizer.add(value, metadata)
 			);
 
 			if (
@@ -52,9 +53,7 @@ export function build_attribute_effect(
 		} else {
 			let value = /** @type {Expression} */ (context.visit(attribute));
 
-			if (attribute.metadata.expression.has_call || attribute.metadata.expression.has_await) {
-				value = memoizer.add(value, attribute.metadata.expression.has_await);
-			}
+			value = memoizer.add(value, attribute.metadata.expression);
 
 			values.push(b.spread(value));
 		}
@@ -155,9 +154,7 @@ export function build_set_class(element, node_id, attribute, class_directives, c
 			value = b.call('$.clsx', value);
 		}
 
-		return metadata.has_call || metadata.has_await
-			? context.state.memoizer.add(value, metadata.has_await)
-			: value;
+		return context.state.memoizer.add(value, metadata);
 	});
 
 	/** @type {Identifier | undefined} */
@@ -166,7 +163,7 @@ export function build_set_class(element, node_id, attribute, class_directives, c
 	/** @type {ObjectExpression | Identifier | undefined} */
 	let prev;
 
-	/** @type {ObjectExpression | Identifier | undefined} */
+	/** @type {Expression | undefined} */
 	let next;
 
 	if (class_directives.length) {
@@ -227,7 +224,7 @@ export function build_set_class(element, node_id, attribute, class_directives, c
  */
 export function build_set_style(node_id, attribute, style_directives, context) {
 	let { value, has_state } = build_attribute_value(attribute.value, context, (value, metadata) =>
-		metadata.has_call ? context.state.memoizer.add(value, metadata.has_await) : value
+		context.state.memoizer.add(value, metadata)
 	);
 
 	/** @type {Identifier | undefined} */

package/src/compiler/phases/3-transform/client/visitors/shared/events.js

@@ -1,9 +1,10 @@
 /** @import { Expression } from 'estree' */
-/** @import { AST, ExpressionMetadata } from '#compiler' */
+/** @import { AST } from '#compiler' */
 /** @import { ComponentContext } from '../../types' */
 import { is_capture_event, is_passive_event } from '../../../../../../utils.js';
 import { dev, locator } from '../../../../../state.js';
 import * as b from '#compiler/builders';
+import { ExpressionMetadata } from '../../../../nodes.js';
 
 /**
  * @param {AST.Attribute} node

package/src/compiler/phases/3-transform/client/visitors/shared/utils.js

@@ -1,5 +1,5 @@
 /** @import { AssignmentExpression, Expression, Identifier, MemberExpression, SequenceExpression, Literal, Super, UpdateExpression, ExpressionStatement } from 'estree' */
-/** @import { AST, ExpressionMetadata } from '#compiler' */
+/** @import { AST } from '#compiler' */
 /** @import { ComponentClientTransformState, ComponentContext, Context } from '../../types' */
 import { walk } from 'zimmerframe';
 import { object } from '../../../../../utils/ast.js';
@@ -9,6 +9,7 @@ import { regex_is_valid_identifier } from '../../../../patterns.js';
 import is_reference from 'is-reference';
 import { dev, is_ignored, locator, component_name } from '../../../../../state.js';
 import { build_getter } from '../../utils.js';
+import { ExpressionMetadata } from '../../../../nodes.js';
 
 /**
  * A utility for extracting complex expressions (such as call expressions)
@@ -23,12 +24,21 @@ export class Memoizer {
 
 	/**
 	 * @param {Expression} expression
-	 * @param {boolean} has_await
+	 * @param {ExpressionMetadata} metadata
+	 * @param {boolean} memoize_if_state
 	 */
-	add(expression, has_await) {
+	add(expression, metadata, memoize_if_state = false) {
+		const should_memoize =
+			metadata.has_call || metadata.has_await || (memoize_if_state && metadata.has_state);
+
+		if (!should_memoize) {
+			// no memoization required
+			return expression;
+		}
+
 		const id = b.id('#'); // filled in later
 
-		(has_await ? this.#async : this.#sync).push({ id, expression });
+		(metadata.has_await ? this.#async : this.#sync).push({ id, expression });
 
 		return id;
 	}
@@ -72,8 +82,7 @@ export function build_template_chunk(
 	values,
 	context,
 	state = context.state,
-	memoize = (value, metadata) =>
-		metadata.has_call || metadata.has_await ? state.memoizer.add(value, metadata.has_await) : value
+	memoize = (value, metadata) => state.memoizer.add(value, metadata)
 ) {
 	/** @type {Expression[]} */
 	const expressions = [];