svelte 5.44.0 → 5.44.1

package/package.json

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

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/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') {

package/src/internal/client/dev/debug.js

@@ -12,6 +12,8 @@ import {
 	RENDER_EFFECT,
 	ROOT_EFFECT
 } from '#client/constants';
+import { snapshot } from '../../shared/clone.js';
+import { untrack } from '../runtime.js';
 
 /**
  *
@@ -84,6 +86,16 @@ export function log_effect_tree(effect, depth = 0) {
 		console.groupEnd();
 	}
 
+	if (effect.nodes_start && effect.nodes_end) {
+		// eslint-disable-next-line no-console
+		console.log(effect.nodes_start);
+
+		if (effect.nodes_start !== effect.nodes_end) {
+			// eslint-disable-next-line no-console
+			console.log(effect.nodes_end);
+		}
+	}
+
 	let child = effect.first;
 	while (child !== null) {
 		log_effect_tree(child, depth + 1);
@@ -103,7 +115,13 @@ function log_dep(dep) {
 		const derived = /** @type {Derived} */ (dep);
 
 		// eslint-disable-next-line no-console
-		console.groupCollapsed('%cderived', 'font-weight: normal', derived.v);
+		console.groupCollapsed(
+			`%c$derived %c${dep.label ?? '<unknown>'}`,
+			'font-weight: bold; color: CornflowerBlue',
+			'font-weight: normal',
+			untrack(() => snapshot(derived.v))
+		);
+
 		if (derived.deps) {
 			for (const d of derived.deps) {
 				log_dep(d);
@@ -114,6 +132,11 @@ function log_dep(dep) {
 		console.groupEnd();
 	} else {
 		// eslint-disable-next-line no-console
-		console.log('state', dep.v);
+		console.log(
+			`%c$state %c${dep.label ?? '<unknown>'}`,
+			'font-weight: bold; color: CornflowerBlue',
+			'font-weight: normal',
+			untrack(() => snapshot(dep.v))
+		);
 	}
 }

package/src/internal/client/dom/blocks/each.js

@@ -394,8 +394,12 @@ function reconcile(state, array, anchor, flags, get_key) {
 			key = get_key(value, i);
 			item = /** @type {EachItem} */ (items.get(key));
 
-			item.a?.measure();
-			(to_animate ??= new Set()).add(item);
+			// offscreen == coming in now, no animation in that case,
+			// else this would happen https://github.com/sveltejs/svelte/issues/17181
+			if (item.o) {
+				item.a?.measure();
+				(to_animate ??= new Set()).add(item);
+			}
 		}
 	}
 
@@ -637,6 +641,10 @@ function link(state, prev, next) {
 		state.first = next;
 		state.effect.first = next && next.e;
 	} else {
+		if (prev.e === state.effect.last && next !== null) {
+			state.effect.last = next.e;
+		}
+
 		if (prev.e.next) {
 			prev.e.next.prev = null;
 		}
@@ -648,6 +656,10 @@ function link(state, prev, next) {
 	if (next === null) {
 		state.effect.last = prev && prev.e;
 	} else {
+		if (next.e === state.effect.last && prev === null) {
+			state.effect.last = next.e.prev;
+		}
+
 		if (next.e.prev) {
 			next.e.prev.next = null;
 		}

package/src/internal/client/dom/elements/bindings/this.js

@@ -38,7 +38,7 @@ export function bind_this(element_or_component = {}, update, get_value, get_part
 			untrack(() => {
 				if (element_or_component !== get_value(...parts)) {
 					update(element_or_component, ...parts);
-					// If this is an effect rerun (cause: each block context changes), then nullfiy the binding at
+					// If this is an effect rerun (cause: each block context changes), then nullify the binding at
 					// the previous position if it isn't already taken over by a different effect.
 					if (old_parts && is_bound_this(get_value(...old_parts), element_or_component)) {
 						update(null, ...old_parts);

package/src/internal/client/dom/elements/misc.js

@@ -51,7 +51,7 @@ export function add_form_reset_listener() {
 					}
 				});
 			},
-			// In the capture phase to guarantee we get noticed of it (no possiblity of stopPropagation)
+			// In the capture phase to guarantee we get noticed of it (no possibility of stopPropagation)
 			{ capture: true }
 		);
 	}

package/src/version.js

@@ -4,5 +4,5 @@
  * The current version, as set in package.json.
  * @type {string}
  */
-export const VERSION = '5.44.0';
+export const VERSION = '5.44.1';
 export const PUBLIC_VERSION = '5';