svelte 5.44.0 → 5.45.0

package/package.json

@@ -2,7 +2,7 @@
   "name": "svelte",
   "description": "Cybernetically enhanced web apps",
   "license": "MIT",
-  "version": "5.44.0",
+  "version": "5.45.0",
   "type": "module",
   "types": "./types/index.d.ts",
   "engines": {
@@ -165,7 +165,7 @@
     "clsx": "^2.1.1",
     "devalue": "^5.5.0",
     "esm-env": "^1.2.1",
-    "esrap": "^2.1.0",
+    "esrap": "^2.2.0",
     "is-reference": "^3.0.3",
     "locate-character": "^3.0.0",
     "magic-string": "^0.30.11",

package/src/compiler/index.js

@@ -10,6 +10,7 @@ import { transform_component, transform_module } from './phases/3-transform/inde
 import { validate_component_options, validate_module_options } from './validate-options.js';
 import * as state from './state.js';
 export { default as preprocess } from './preprocess/index.js';
+export { print } from './print/index.js';
 
 /**
  * `compile` converts your `.svelte` source code into a JavaScript module that exports a component

package/src/compiler/migrate/index.js

@@ -604,7 +604,7 @@ const instance_script = {
 						'Encountered an export declaration pattern that is not supported for automigration.'
 					);
 					// Turn export let into props. It's really really weird because export let { x: foo, z: [bar]} = ..
-					// means that foo and bar are the props (i.e. the leafs are the prop names), not x and z.
+					// means that foo and bar are the props (i.e. the leaves are the prop names), not x and z.
 					// const tmp = b.id(state.scope.generate('tmp'));
 					// const paths = extract_paths(declarator.id, tmp);
 					// state.props_pre.push(
@@ -1812,7 +1812,7 @@ function handle_events(element, state) {
 }
 
 /**
- * Returns start and end of the node. If the start is preceeded with white-space-only before a line break,
+ * Returns start and end of the node. If the start is preceded with white-space-only before a line break,
  * the start will be the start of the line.
  * @param {string} source
  * @param {LabeledStatement} node

package/src/compiler/phases/1-parse/remove_typescript_nodes.js

@@ -27,6 +27,9 @@ const visitors = {
 		delete n.typeArguments;
 		delete n.returnType;
 		delete n.accessibility;
+		delete n.readonly;
+		delete n.definite;
+		delete n.override;
 	},
 	Decorator(node) {
 		e.typescript_invalid_feature(node, 'decorators (related TSC proposal is not stage 4 yet)');
@@ -132,7 +135,14 @@ const visitors = {
 		if (node.declare) {
 			return b.empty;
 		}
+		delete node.abstract;
 		delete node.implements;
+		delete node.superTypeArguments;
+		return context.next();
+	},
+	ClassExpression(node, context) {
+		delete node.implements;
+		delete node.superTypeArguments;
 		return context.next();
 	},
 	MethodDefinition(node, context) {

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

@@ -1,6 +1,7 @@
 /** @import { Pattern } from 'estree' */
 /** @import { AST } from '#compiler' */
 /** @import { ComponentContext } from '../types' */
+/** @import { ExpressionMetadata } from '../../../nodes.js' */
 import { dev } from '../../../../state.js';
 import { extract_identifiers } from '../../../../utils/ast.js';
 import * as b from '#compiler/builders';
@@ -30,7 +31,7 @@ export function ConstTag(node, context) {
 			context.state,
 			declaration.id,
 			expression,
-			node.metadata.expression.has_await,
+			node.metadata.expression,
 			context.state.scope.get_bindings(declaration)
 		);
 	} else {
@@ -73,7 +74,7 @@ export function ConstTag(node, context) {
 			context.state,
 			tmp,
 			expression,
-			node.metadata.expression.has_await,
+			node.metadata.expression,
 			context.state.scope.get_bindings(declaration)
 		);
 
@@ -89,15 +90,18 @@ export function ConstTag(node, context) {
  * @param {ComponentContext['state']} state
  * @param {import('estree').Identifier} id
  * @param {import('estree').Expression} expression
- * @param {boolean} has_await
+ * @param {ExpressionMetadata} metadata
  * @param {import('#compiler').Binding[]} bindings
  */
-function add_const_declaration(state, id, expression, has_await, bindings) {
+function add_const_declaration(state, id, expression, metadata, bindings) {
 	// we need to eagerly evaluate the expression in order to hit any
 	// 'Cannot access x before initialization' errors
 	const after = dev ? [b.stmt(b.call('$.get', id))] : [];
 
-	if (has_await || state.async_consts) {
+	const has_await = metadata.has_await;
+	const blockers = [...metadata.dependencies].map((dep) => dep.blocker).filter((b) => b !== null);
+
+	if (has_await || state.async_consts || blockers.length > 0) {
 		const run = (state.async_consts ??= {
 			id: b.id(state.scope.generate('promises')),
 			thunks: []
@@ -108,6 +112,8 @@ function add_const_declaration(state, id, expression, has_await, bindings) {
 		const assignment = b.assignment('=', id, expression);
 		const body = after.length === 0 ? assignment : b.block([b.stmt(assignment), ...after]);
 
+		if (blockers.length > 0) run.thunks.push(b.thunk(b.call('Promise.all', b.array(blockers))));
+
 		run.thunks.push(b.thunk(body, has_await));
 
 		const blocker = b.member(run.id, b.literal(run.thunks.length - 1), true);

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

@@ -305,7 +305,7 @@ export function VariableDeclaration(node, context) {
 			if (has_props) {
 				if (declarator.id.type !== 'Identifier') {
 					// Turn export let into props. It's really really weird because export let { x: foo, z: [bar]} = ..
-					// means that foo and bar are the props (i.e. the leafs are the prop names), not x and z.
+					// means that foo and bar are the props (i.e. the leaves are the prop names), not x and z.
 					const tmp = b.id(context.state.scope.generate('tmp'));
 					const { inserts, paths } = extract_paths(declarator.id, tmp);
 

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

@@ -13,8 +13,11 @@ export function ConstTag(node, context) {
 	const id = /** @type {Pattern} */ (context.visit(declaration.id));
 	const init = /** @type {Expression} */ (context.visit(declaration.init));
 	const has_await = node.metadata.expression.has_await;
+	const blockers = [...node.metadata.expression.dependencies]
+		.map((dep) => dep.blocker)
+		.filter((b) => b !== null);
 
-	if (has_await || context.state.async_consts) {
+	if (has_await || context.state.async_consts || blockers.length > 0) {
 		const run = (context.state.async_consts ??= {
 			id: b.id(context.state.scope.generate('promises')),
 			thunks: []
@@ -27,6 +30,10 @@ export function ConstTag(node, context) {
 			context.state.init.push(b.let(identifier.name));
 		}
 
+		if (blockers.length > 0) {
+			run.thunks.push(b.thunk(b.call('Promise.all', b.array(blockers))));
+		}
+
 		const assignment = b.assignment('=', id, init);
 		run.thunks.push(b.thunk(b.block([b.stmt(assignment)]), has_await));
 

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

@@ -119,7 +119,7 @@ export function VariableDeclaration(node, context) {
 			if (has_props) {
 				if (declarator.id.type !== 'Identifier') {
 					// Turn export let into props. It's really really weird because export let { x: foo, z: [bar]} = ..
-					// means that foo and bar are the props (i.e. the leafs are the prop names), not x and z.
+					// means that foo and bar are the props (i.e. the leaves are the prop names), not x and z.
 					const tmp = b.id(context.state.scope.generate('tmp'));
 					const { inserts, paths } = extract_paths(declarator.id, tmp);
 

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

@@ -35,7 +35,7 @@ export function transform_body(instance_body, runner, transform) {
 		(node) => /** @type {ESTree.Statement | ESTree.VariableDeclaration} */ (transform(node))
 	);
 
-	// Declarations for the await expressions (they will asign to them; need to be hoisted to be available in whole instance scope)
+	// Declarations for the await expressions (they will assign to them; need to be hoisted to be available in whole instance scope)
 	if (instance_body.declarations.length > 0) {
 		statements.push(
 			b.declaration(
@@ -53,23 +53,22 @@ export function transform_body(instance_body, runner, transform) {
 					transform(b.var(s.node.id, s.node.init))
 				);
 
-				if (visited.declarations.length === 1) {
-					return b.thunk(
-						b.assignment('=', visited.declarations[0].id, visited.declarations[0].init ?? b.void0),
-						s.has_await
-					);
+				const statements = visited.declarations.map((node) => {
+					if (node.id.type === 'Identifier' && node.id.name.startsWith('$$d')) {
+						// this is an intermediate declaration created in VariableDeclaration.js;
+						// subsequent statements depend on it
+						return b.var(node.id, node.init);
+					}
+
+					return b.stmt(b.assignment('=', node.id, node.init ?? b.void0));
+				});
+
+				if (statements.length === 1) {
+					const statement = /** @type {ESTree.ExpressionStatement} */ (statements[0]);
+					return b.thunk(statement.expression, s.has_await);
 				}
 
-				// if we have multiple declarations, it indicates destructuring
-				return b.thunk(
-					b.block([
-						b.var(visited.declarations[0].id, visited.declarations[0].init),
-						...visited.declarations
-							.slice(1)
-							.map((d) => b.stmt(b.assignment('=', d.id, d.init ?? b.void0)))
-					]),
-					s.has_await
-				);
+				return b.thunk(b.block(statements), s.has_await);
 			}
 
 			if (s.node.type === 'ClassDeclaration') {