svelte 5.45.1 → 5.45.3

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

@@ -1,12 +1,13 @@
 /** @import { AST } from '#compiler' */
 /** @import { ComponentContext } from '../types' */
 import { build_component } from './shared/component.js';
+import * as b from '#compiler/builders';
 
 /**
  * @param {AST.SvelteComponent} node
  * @param {ComponentContext} context
  */
 export function SvelteComponent(node, context) {
-	const component = build_component(node, '$$component', context);
+	const component = build_component(node, '$$component', null, context);
 	context.state.init.push(component);
 }

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

@@ -14,7 +14,7 @@ export function SvelteHead(node, context) {
 	context.state.init.push(
 		b.stmt(
 			b.call(
-				'$.head',
+				b.id('$.head', node.name_loc),
 				b.literal(hash(filename)),
 				b.arrow([b.id('$$anchor')], /** @type {BlockStatement} */ (context.visit(node.fragment)))
 			)

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

@@ -1,5 +1,6 @@
 /** @import { AST } from '#compiler' */
 /** @import { ComponentContext } from '../types' */
+import { component_name } from '../../../../state.js';
 import { build_component } from './shared/component.js';
 
 /**
@@ -7,6 +8,6 @@ import { build_component } from './shared/component.js';
  * @param {ComponentContext} context
  */
 export function SvelteSelf(node, context) {
-	const component = build_component(node, context.state.analysis.name, context);
+	const component = build_component(node, component_name, node.name_loc, context);
 	context.state.init.push(component);
 }

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

@@ -20,7 +20,7 @@ export function TitleElement(node, context) {
 	const statement = b.stmt(
 		b.assignment(
 			'=',
-			b.id('$.document.title'),
+			b.member(b.id('$.document'), b.id('title', node.name_loc)),
 			evaluated.is_known
 				? b.literal(evaluated.value)
 				: evaluated.is_defined

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

@@ -136,7 +136,8 @@ export function VariableDeclaration(node, context) {
 					}
 
 					if (is_state) {
-						value = b.call('$.state', value);
+						const callee = b.id('$.state', /** @type {CallExpression} */ (init).callee.loc);
+						value = b.call(callee, value);
 
 						if (dev) {
 							value = b.call('$.tag', value, b.literal(id.name));

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

@@ -1,4 +1,4 @@
-/** @import { BlockStatement, Expression, ExpressionStatement, Identifier, MemberExpression, Pattern, Property, SequenceExpression, Statement } from 'estree' */
+/** @import { BlockStatement, Expression, ExpressionStatement, Identifier, MemberExpression, Pattern, Property, SequenceExpression, SourceLocation, Statement } from 'estree' */
 /** @import { AST } from '#compiler' */
 /** @import { ComponentContext } from '../../types.js' */
 import { dev, is_ignored } from '../../../../../state.js';
@@ -12,10 +12,11 @@ import { determine_slot } from '../../../../../utils/slot.js';
 /**
  * @param {AST.Component | AST.SvelteComponent | AST.SvelteSelf} node
  * @param {string} component_name
+ * @param {SourceLocation | null} loc
  * @param {ComponentContext} context
  * @returns {Statement}
  */
-export function build_component(node, component_name, context) {
+export function build_component(node, component_name, loc, context) {
 	/** @type {Expression} */
 	const anchor = context.state.node;
 
@@ -259,15 +260,9 @@ export function build_component(node, component_name, context) {
 						attribute.expression.type === 'Identifier' &&
 						context.state.scope.get(attribute.expression.name)?.kind === 'store_sub';
 
-					// Delay prop pushes so bindings come at the end, to avoid spreads overwriting them
-					if (is_store_sub) {
-						push_prop(
-							b.get(attribute.name, [b.stmt(b.call('$.mark_store_binding')), b.return(expression)]),
-							true
-						);
-					} else {
-						push_prop(b.get(attribute.name, [b.return(expression)]), true);
-					}
+					const get = is_store_sub
+						? b.get(attribute.name, [b.stmt(b.call('$.mark_store_binding')), b.return(expression)])
+						: b.get(attribute.name, [b.return(expression)]);
 
 					const assignment = b.assignment(
 						'=',
@@ -275,10 +270,16 @@ export function build_component(node, component_name, context) {
 						b.id('$$value')
 					);
 
-					push_prop(
-						b.set(attribute.name, [b.stmt(/** @type {Expression} */ (context.visit(assignment)))]),
-						true
-					);
+					const set = b.set(attribute.name, [
+						b.stmt(/** @type {Expression} */ (context.visit(assignment)))
+					]);
+
+					get.key.loc = attribute.name_loc;
+					set.key.loc = attribute.name_loc;
+
+					// Delay prop pushes so bindings come at the end, to avoid spreads overwriting them
+					push_prop(get, true);
+					push_prop(set, true);
 				}
 			}
 		} else if (attribute.type === 'AttachTag') {
@@ -434,16 +435,17 @@ export function build_component(node, component_name, context) {
 
 	/** @param {Expression} node_id */
 	let fn = (node_id) => {
-		return b.call(
-			// TODO We can remove this ternary once we remove legacy mode, since in runes mode dynamic components
-			// will be handled separately through the `$.component` function, and then the component name will
-			// always be referenced through just the identifier here.
-			is_component_dynamic
-				? intermediate_name
-				: /** @type {Expression} */ (context.visit(b.member_id(component_name))),
-			node_id,
-			props_expression
-		);
+		// TODO We can remove this ternary once we remove legacy mode, since in runes mode dynamic components
+		// will be handled separately through the `$.component` function, and then the component name will
+		// always be referenced through just the identifier here.
+		const callee = is_component_dynamic
+			? b.id(intermediate_name)
+			: /** @type {Expression} */ (context.visit(b.member_id(component_name)));
+
+		// line up the `Foo` in `Foo(...)` and `<Foo>` for usable stack traces
+		callee.loc = loc;
+
+		return b.call(callee, node_id, props_expression);
 	};
 
 	if (bind_this !== null) {

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

@@ -32,7 +32,13 @@ export function visit_event_attribute(node, context) {
 		}
 
 		context.state.init.push(
-			b.stmt(b.assignment('=', b.member(context.state.node, '__' + event_name), handler))
+			b.stmt(
+				b.assignment(
+					'=',
+					b.member(context.state.node, b.id('__' + event_name, node.name_loc)),
+					handler
+				)
+			)
 		);
 	} else {
 		const statement = b.stmt(
@@ -140,7 +146,7 @@ export function build_event_handler(node, metadata, context) {
 			b.this,
 			b.id('$$args'),
 			b.id(context.state.analysis.name),
-			loc && b.array([b.literal(loc.line), b.literal(loc.column)]),
+			b.array([b.literal(loc.line), b.literal(loc.column)]),
 			has_side_effects(node) && b.true,
 			remove_parens && b.true
 		);

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

@@ -1,4 +1,4 @@
-/** @import { Expression } from 'estree' */
+/** @import { Expression, Identifier, SourceLocation } from 'estree' */
 /** @import { AST } from '#compiler' */
 /** @import { ComponentContext } from '../../types' */
 import { cannot_be_set_statically } from '../../../../../../utils.js';
@@ -42,13 +42,14 @@ export function process_children(nodes, initial, is_element, context) {
 	/**
 	 * @param {boolean} is_text
 	 * @param {string} name
+	 * @param {SourceLocation | null} [loc]
 	 */
-	function flush_node(is_text, name) {
+	function flush_node(is_text, name, loc) {
 		const expression = get_node(is_text);
 		let id = expression;
 
 		if (id.type !== 'Identifier') {
-			id = b.id(context.state.scope.generate(name));
+			id = b.id(context.state.scope.generate(name), loc);
 			context.state.init.push(b.var(id, expression));
 		}
 
@@ -109,7 +110,12 @@ export function process_children(nodes, initial, is_element, context) {
 			) {
 				node.metadata.is_controlled = true;
 			} else {
-				const id = flush_node(false, node.type === 'RegularElement' ? node.name : 'node');
+				const id = flush_node(
+					false,
+					node.type === 'RegularElement' ? node.name : 'node',
+					node.type === 'RegularElement' ? node.name_loc : null
+				);
+
 				child_state = { ...context.state, node: id };
 			}
 

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

@@ -366,8 +366,8 @@ export function validate_binding(state, binding, expression) {
 							: b.literal(/** @type {Identifier} */ (expression.property).name)
 					)
 				),
-				loc && b.literal(loc.line),
-				loc && b.literal(loc.column)
+				b.literal(loc.line),
+				b.literal(loc.column)
 			)
 		)
 	);

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

@@ -99,7 +99,7 @@ export function RegularElement(node, context) {
 	}
 
 	if (dev) {
-		const location = /** @type {Location} */ (locator(node.start));
+		const location = locator(node.start);
 		state.template.push(
 			b.stmt(
 				b.call(

package/src/compiler/phases/3-transform/server/visitors/SvelteElement.js

@@ -50,7 +50,7 @@ export function SvelteElement(node, context) {
 	build_element_attributes(node, { ...context, state }, optimiser.transform);
 
 	if (dev) {
-		const location = /** @type {Location} */ (locator(node.start));
+		const location = locator(node.start);
 		statements.push(
 			b.stmt(
 				b.call(

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

@@ -142,7 +142,7 @@ export function build_element_attributes(node, context, transform) {
 				);
 
 				attributes.push(
-					create_attribute('checked', -1, -1, [
+					create_attribute('checked', null, -1, -1, [
 						{
 							type: 'ExpressionTag',
 							start: -1,
@@ -165,7 +165,7 @@ export function build_element_attributes(node, context, transform) {
 				);
 			} else {
 				attributes.push(
-					create_attribute(attribute.name, -1, -1, [
+					create_attribute(attribute.name, null, -1, -1, [
 						{
 							type: 'ExpressionTag',
 							start: -1,

package/src/compiler/phases/3-transform/shared/transform-async.js

@@ -54,7 +54,10 @@ export function transform_body(instance_body, runner, transform) {
 				);
 
 				const statements = visited.declarations.map((node) => {
-					if (node.id.type === 'Identifier' && node.id.name.startsWith('$$d')) {
+					if (
+						node.id.type === 'Identifier' &&
+						(node.id.name.startsWith('$$d') || node.id.name.startsWith('$$array'))
+					) {
 						// this is an intermediate declaration created in VariableDeclaration.js;
 						// subsequent statements depend on it
 						return b.var(node.id, node.init);

package/src/compiler/phases/nodes.js

@@ -1,4 +1,4 @@
-/** @import { Expression, PrivateIdentifier } from 'estree' */
+/** @import { Expression, PrivateIdentifier, SourceLocation } from 'estree' */
 /** @import { AST, Binding } from '#compiler' */
 import * as b from '#compiler/builders';
 
@@ -47,17 +47,19 @@ export function is_custom_element_node(node) {
 
 /**
  * @param {string} name
+ * @param {SourceLocation | null} name_loc
  * @param {number} start
  * @param {number} end
  * @param {AST.Attribute['value']} value
  * @returns {AST.Attribute}
  */
-export function create_attribute(name, start, end, value) {
+export function create_attribute(name, name_loc, start, end, value) {
 	return {
 		type: 'Attribute',
 		start,
 		end,
 		name,
+		name_loc,
 		value,
 		metadata: {
 			delegated: false,

package/src/compiler/state.js

@@ -40,19 +40,28 @@ export let dev;
 
 export let runes = false;
 
-export let locator = getLocator('', { offsetLine: 1 });
+/** @type {(index: number) => Location} */
+export let locator;
 
 /** @param {string} value */
 export function set_source(value) {
 	source = value;
-	locator = getLocator(source, { offsetLine: 1 });
+
+	const l = getLocator(source, { offsetLine: 1 });
+
+	locator = (i) => {
+		const loc = l(i);
+		if (!loc) throw new Error('An impossible situation occurred');
+
+		return loc;
+	};
 }
 
 /**
  * @param {AST.SvelteNode & { start?: number | undefined }} node
  */
 export function locate_node(node) {
-	const loc = /** @type {Location} */ (locator(/** @type {number} */ (node.start)));
+	const loc = locator(/** @type {number} */ (node.start));
 	return `${sanitize_location(filename)}:${loc?.line}:${loc.column}`;
 }
 
@@ -103,7 +112,6 @@ export function reset(state) {
 	runes = false;
 	component_name = UNKNOWN_FILENAME;
 	source = '';
-	locator = () => undefined;
 	filename = (state.filename ?? UNKNOWN_FILENAME).replace(/\\/g, '/');
 	warning_filter = state.warning ?? (() => true);
 	warnings = [];

package/src/compiler/utils/builders.js

@@ -262,10 +262,14 @@ export function get(name, body) {
 
 /**
  * @param {string} name
+ * @param {ESTree.SourceLocation | null} [loc]
  * @returns {ESTree.Identifier}
  */
-export function id(name) {
-	return { type: 'Identifier', name };
+export function id(name, loc) {
+	const node = /** @type {ESTree.Identifier} */ ({ type: 'Identifier', name });
+	if (loc) node.loc = loc;
+
+	return node;
 }
 
 /**