svelte 5.42.2 → 5.43.0

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/VariableDeclaration.js

@@ -193,18 +193,25 @@ export function VariableDeclaration(node, context) {
 					/** @type {CallExpression} */ (init)
 				);
 
+				// for now, only wrap async derived in $.save if it's not
+				// a top-level instance derived. TODO in future maybe we
+				// can dewaterfall all of them?
+				const should_save = context.state.is_instance && context.state.scope.function_depth > 1;
+
 				if (declarator.id.type === 'Identifier') {
 					let expression = /** @type {Expression} */ (context.visit(value));
 
 					if (is_async) {
 						const location = dev && !is_ignored(init, 'await_waterfall') && locate_node(init);
+
+						/** @type {Expression} */
 						let call = b.call(
 							'$.async_derived',
 							b.thunk(expression, true),
 							location ? b.literal(location) : undefined
 						);
 
-						call = save(call);
+						call = should_save ? save(call) : b.await(call);
 						if (dev) call = b.call('$.tag', call, b.literal(declarator.id.name));
 
 						declarations.push(b.declarator(declarator.id, call));
@@ -224,18 +231,22 @@ export function VariableDeclaration(node, context) {
 
 					if (rune !== '$derived' || init.arguments[0].type !== 'Identifier') {
 						const id = b.id(context.state.scope.generate('$$d'));
+
+						/** @type {Expression} */
 						let call = b.call('$.derived', rune === '$derived' ? b.thunk(expression) : expression);
 
 						rhs = b.call('$.get', id);
 
 						if (is_async) {
 							const location = dev && !is_ignored(init, 'await_waterfall') && locate_node(init);
+
 							call = b.call(
 								'$.async_derived',
 								b.thunk(expression, true),
 								location ? b.literal(location) : undefined
 							);
-							call = save(call);
+
+							call = should_save ? save(call) : b.await(call);
 						}
 
 						if (dev) {

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

@@ -16,12 +16,12 @@ import { determine_slot } from '../../../../../utils/slot.js';
  * @returns {Statement}
  */
 export function build_component(node, component_name, context) {
-	/**
-	 * @type {Expression}
-	 */
+	/** @type {Expression} */
 	const anchor = context.state.node;
+
 	/** @type {Array<Property[] | Expression>} */
 	const props_and_spreads = [];
+
 	/** @type {Array<() => void>} */
 	const delayed_props = [];
 
@@ -129,14 +129,16 @@ export function build_component(node, component_name, context) {
 			(events[attribute.name] ||= []).push(handler);
 		} else if (attribute.type === 'SpreadAttribute') {
 			const expression = /** @type {Expression} */ (context.visit(attribute));
+			const memoized_expression = memoizer.add(expression, attribute.metadata.expression);
+			const is_memoized = expression !== memoized_expression;
 
-			if (attribute.metadata.expression.has_state || attribute.metadata.expression.has_await) {
+			if (
+				is_memoized ||
+				attribute.metadata.expression.has_state ||
+				attribute.metadata.expression.has_await
+			) {
 				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))
-							: expression
-					)
+					b.thunk(is_memoized ? b.call('$.get', memoized_expression) : expression)
 				);
 			} else {
 				props_and_spreads.push(expression);
@@ -147,10 +149,10 @@ export function build_component(node, component_name, context) {
 					b.init(
 						attribute.name,
 						build_attribute_value(attribute.value, context, (value, metadata) => {
+							const memoized = memoizer.add(value, metadata);
+
 							// TODO put the derived in the local block
-							return metadata.has_call || metadata.has_await
-								? b.call('$.get', memoizer.add(value, metadata))
-								: value;
+							return value !== memoized ? b.call('$.get', memoized) : value;
 						}).value
 					)
 				);
@@ -184,9 +186,9 @@ export function build_component(node, component_name, context) {
 							);
 						});
 
-					return should_wrap_in_derived
-						? b.call('$.get', memoizer.add(value, metadata, true))
-						: value;
+					const memoized = memoizer.add(value, metadata, should_wrap_in_derived);
+
+					return value !== memoized ? b.call('$.get', memoized) : value;
 				}
 			);
 
@@ -497,12 +499,14 @@ export function build_component(node, component_name, context) {
 	memoizer.apply();
 
 	const async_values = memoizer.async_values();
+	const blockers = memoizer.blockers();
 
-	if (async_values) {
+	if (async_values || blockers) {
 		return b.stmt(
 			b.call(
 				'$.async',
 				anchor,
+				blockers,
 				async_values,
 				b.arrow([b.id('$$anchor'), ...memoizer.async_ids()], b.block(statements))
 			)

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

@@ -89,6 +89,7 @@ export function build_attribute_effect(
 				b.arrow(ids, b.object(values)),
 				memoizer.sync_values(),
 				memoizer.async_values(),
+				memoizer.blockers(),
 				element.metadata.scoped &&
 					context.state.analysis.css.hash !== '' &&
 					b.literal(context.state.analysis.css.hash),

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

@@ -22,12 +22,21 @@ export class Memoizer {
 	/** @type {Array<{ id: Identifier, expression: Expression }>} */
 	#async = [];
 
+	/** @type {Set<Expression>} */
+	#blockers = new Set();
+
 	/**
 	 * @param {Expression} expression
 	 * @param {ExpressionMetadata} metadata
 	 * @param {boolean} memoize_if_state
 	 */
 	add(expression, metadata, memoize_if_state = false) {
+		for (const binding of metadata.dependencies) {
+			if (binding.blocker) {
+				this.#blockers.add(binding.blocker);
+			}
+		}
+
 		const should_memoize =
 			metadata.has_call || metadata.has_await || (memoize_if_state && metadata.has_state);
 
@@ -50,6 +59,10 @@ export class Memoizer {
 		});
 	}
 
+	blockers() {
+		return this.#blockers.size > 0 ? b.array([...this.#blockers]) : undefined;
+	}
+
 	deriveds(runes = true) {
 		return this.#sync.map((memo) =>
 			b.let(memo.id, b.call(runes ? '$.derived' : '$.derived_safe_equal', b.thunk(memo.expression)))
@@ -185,7 +198,8 @@ export function build_render_statement(state) {
 					: b.block(state.update)
 			),
 			memoizer.sync_values(),
-			memoizer.async_values()
+			memoizer.async_values(),
+			memoizer.blockers()
 		)
 	);
 }

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

@@ -25,6 +25,7 @@ import { IfBlock } from './visitors/IfBlock.js';
 import { KeyBlock } from './visitors/KeyBlock.js';
 import { LabeledStatement } from './visitors/LabeledStatement.js';
 import { MemberExpression } from './visitors/MemberExpression.js';
+import { Program } from './visitors/Program.js';
 import { PropertyDefinition } from './visitors/PropertyDefinition.js';
 import { RegularElement } from './visitors/RegularElement.js';
 import { RenderTag } from './visitors/RenderTag.js';
@@ -40,7 +41,7 @@ import { TitleElement } from './visitors/TitleElement.js';
 import { UpdateExpression } from './visitors/UpdateExpression.js';
 import { VariableDeclaration } from './visitors/VariableDeclaration.js';
 import { SvelteBoundary } from './visitors/SvelteBoundary.js';
-import { call_component_renderer, create_async_block } from './visitors/shared/utils.js';
+import { call_component_renderer } from './visitors/shared/utils.js';
 
 /** @type {Visitors} */
 const global_visitors = {
@@ -53,6 +54,7 @@ const global_visitors = {
 	Identifier,
 	LabeledStatement,
 	MemberExpression,
+	Program,
 	PropertyDefinition,
 	UpdateExpression,
 	VariableDeclaration
@@ -95,7 +97,7 @@ export function server_component(analysis, options) {
 		options,
 		scope: analysis.module.scope,
 		scopes: analysis.module.scopes,
-		hoisted: [b.import_all('$', 'svelte/internal/server')],
+		hoisted: [b.import_all('$', 'svelte/internal/server'), ...analysis.instance_body.hoisted],
 		legacy_reactive_statements: new Map(),
 		// these are set inside the `Fragment` visitor, and cannot be used until then
 		init: /** @type {any} */ (null),
@@ -103,7 +105,8 @@ export function server_component(analysis, options) {
 		namespace: options.namespace,
 		preserve_whitespace: options.preserveWhitespace,
 		state_fields: new Map(),
-		skip_hydration_boundaries: false
+		skip_hydration_boundaries: false,
+		is_instance: false
 	};
 
 	const module = /** @type {ESTree.Program} */ (
@@ -113,7 +116,7 @@ export function server_component(analysis, options) {
 	const instance = /** @type {ESTree.Program} */ (
 		walk(
 			/** @type {AST.SvelteNode} */ (analysis.instance.ast),
-			{ ...state, scopes: analysis.instance.scopes },
+			{ ...state, scopes: analysis.instance.scopes, is_instance: true },
 			{
 				...global_visitors,
 				ImportDeclaration(node) {
@@ -243,10 +246,6 @@ export function server_component(analysis, options) {
 		.../** @type {ESTree.Statement[]} */ (template.body)
 	]);
 
-	if (analysis.instance.has_await) {
-		component_block = b.block([create_async_block(component_block)]);
-	}
-
 	// trick esrap into including comments
 	component_block.loc = instance.loc;
 
@@ -408,7 +407,8 @@ export function server_module(analysis, options) {
 		// to be present for `javascript_visitors_legacy` and so is included in module
 		// transform state as well as component transform state
 		legacy_reactive_statements: new Map(),
-		state_fields: new Map()
+		state_fields: new Map(),
+		is_instance: false
 	};
 
 	const module = /** @type {ESTree.Program} */ (

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

@@ -25,8 +25,12 @@ export function AwaitBlock(node, context) {
 		)
 	);
 
-	if (node.metadata.expression.has_await) {
-		statement = create_async_block(b.block([statement]));
+	if (node.metadata.expression.is_async()) {
+		statement = create_async_block(
+			b.block([statement]),
+			node.metadata.expression.blockers(),
+			node.metadata.expression.has_await
+		);
 	}
 
 	context.state.template.push(statement, block_close);

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

@@ -12,7 +12,14 @@ import { get_inspect_args } from '../../utils.js';
 export function CallExpression(node, context) {
 	const rune = get_rune(node, context.state.scope);
 
-	if (rune === '$host') {
+	if (
+		rune === '$host' ||
+		rune === '$effect' ||
+		rune === '$effect.pre' ||
+		rune === '$inspect.trace'
+	) {
+		// we will only encounter `$effect` etc if they are top-level statements in the <script>
+		// following an `await`, otherwise they are removed by the ExpressionStatement visitor
 		return b.void0;
 	}
 

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

@@ -34,7 +34,11 @@ export function EachBlock(node, context) {
 
 	const new_body = /** @type {BlockStatement} */ (context.visit(node.body)).body;
 
-	each.push(...(node.body.metadata.has_await ? [create_async_block(b.block(new_body))] : new_body));
+	if (node.body)
+		each.push(
+			// TODO get rid of fragment.has_await
+			...(node.body.metadata.has_await ? [create_async_block(b.block(new_body))] : new_body)
+		);
 
 	const for_loop = b.for(
 		b.declaration('let', [
@@ -65,8 +69,15 @@ export function EachBlock(node, context) {
 		block.body.push(for_loop);
 	}
 
-	if (node.metadata.expression.has_await) {
-		state.template.push(create_async_block(block), block_close);
+	if (node.metadata.expression.is_async()) {
+		state.template.push(
+			create_async_block(
+				block,
+				node.metadata.expression.blockers(),
+				node.metadata.expression.has_await
+			),
+			block_close
+		);
 	} else {
 		state.template.push(...block.body, block_close);
 	}

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

@@ -2,6 +2,7 @@
 /** @import { AST } from '#compiler' */
 /** @import { ComponentContext } from '../types.js' */
 import * as b from '#compiler/builders';
+import { create_push } from './shared/utils.js';
 
 /**
  * @param {AST.HtmlTag} node
@@ -10,9 +11,6 @@ import * as b from '#compiler/builders';
 export function HtmlTag(node, context) {
 	const expression = /** @type {Expression} */ (context.visit(node.expression));
 	const call = b.call('$.html', expression);
-	context.state.template.push(
-		node.metadata.expression.has_await
-			? b.stmt(b.call('$$renderer.push', b.thunk(call, true)))
-			: call
-	);
+
+	context.state.template.push(create_push(call, node.metadata.expression, true));
 }

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

@@ -23,12 +23,20 @@ export function IfBlock(node, context) {
 	/** @type {Statement} */
 	let statement = b.if(test, consequent, alternate);
 
-	if (
+	const is_async = node.metadata.expression.is_async();
+
+	const has_await =
 		node.metadata.expression.has_await ||
+		// TODO get rid of this stuff
 		node.consequent.metadata.has_await ||
-		node.alternate?.metadata.has_await
-	) {
-		statement = create_async_block(b.block([statement]));
+		node.alternate?.metadata.has_await;
+
+	if (is_async || has_await) {
+		statement = create_async_block(
+			b.block([statement]),
+			node.metadata.expression.blockers(),
+			!!has_await
+		);
 	}
 
 	context.state.template.push(statement, block_close);

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

@@ -1,16 +1,22 @@
 /** @import { BlockStatement } from 'estree' */
 /** @import { AST } from '#compiler' */
 /** @import { ComponentContext } from '../types.js' */
-import { empty_comment } from './shared/utils.js';
+import { block_close, block_open, empty_comment } from './shared/utils.js';
 
 /**
  * @param {AST.KeyBlock} node
  * @param {ComponentContext} context
  */
 export function KeyBlock(node, context) {
+	const is_async = node.metadata.expression.is_async();
+
+	if (is_async) context.state.template.push(block_open);
+
 	context.state.template.push(
 		empty_comment,
 		/** @type {BlockStatement} */ (context.visit(node.fragment)),
 		empty_comment
 	);
+
+	if (is_async) context.state.template.push(block_close);
 }

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

@@ -0,0 +1,25 @@
+/** @import { Node, Program } from 'estree' */
+/** @import { Context, ComponentServerTransformState } from '../types' */
+import * as b from '#compiler/builders';
+import { transform_body } from '../../shared/transform-async.js';
+
+/**
+ * @param {Program} node
+ * @param {Context} context
+ */
+export function Program(node, context) {
+	if (context.state.is_instance) {
+		const state = /** @type {ComponentServerTransformState} */ (context.state);
+
+		return {
+			...node,
+			body: transform_body(
+				state.analysis.instance_body,
+				b.id('$$renderer.run'),
+				(node) => /** @type {Node} */ (context.visit(node))
+			)
+		};
+	}
+
+	context.next();
+}

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

@@ -12,7 +12,8 @@ import {
 	process_children,
 	build_template,
 	create_child_block,
-	PromiseOptimiser
+	PromiseOptimiser,
+	create_async_block
 } from './shared/utils.js';
 
 /**
@@ -202,13 +203,19 @@ export function RegularElement(node, context) {
 		state.template.push(b.stmt(b.call('$.pop_element')));
 	}
 
-	if (optimiser.expressions.length > 0) {
-		context.state.template.push(
-			create_child_block(
-				b.block([optimiser.apply(), ...state.init, ...build_template(state.template)]),
-				true
-			)
+	if (optimiser.is_async()) {
+		let statement = create_child_block(
+			b.block([optimiser.apply(), ...state.init, ...build_template(state.template)]),
+			true
 		);
+
+		const blockers = optimiser.blockers();
+
+		if (blockers.elements.length > 0) {
+			statement = create_async_block(b.block([statement]), blockers, false, false);
+		}
+
+		context.state.template.push(statement);
 	} else {
 		context.state.init.push(...state.init);
 		context.state.template.push(...state.template);

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

@@ -3,32 +3,48 @@
 /** @import { ComponentContext } from '../types.js' */
 import { unwrap_optional } from '../../../../utils/ast.js';
 import * as b from '#compiler/builders';
-import { empty_comment } from './shared/utils.js';
+import { create_async_block, empty_comment, PromiseOptimiser } from './shared/utils.js';
 
 /**
  * @param {AST.RenderTag} node
  * @param {ComponentContext} context
  */
 export function RenderTag(node, context) {
+	const optimiser = new PromiseOptimiser();
+
 	const callee = unwrap_optional(node.expression).callee;
 	const raw_args = unwrap_optional(node.expression).arguments;
 
-	const snippet_function = /** @type {Expression} */ (context.visit(callee));
+	const snippet_function = optimiser.transform(
+		/** @type {Expression} */ (context.visit(callee)),
+		node.metadata.expression
+	);
 
-	const snippet_args = raw_args.map((arg) => {
-		return /** @type {Expression} */ (context.visit(arg));
+	const snippet_args = raw_args.map((arg, i) => {
+		return optimiser.transform(
+			/** @type {Expression} */ (context.visit(arg)),
+			node.metadata.arguments[i]
+		);
 	});
 
-	context.state.template.push(
-		b.stmt(
-			(node.expression.type === 'CallExpression' ? b.call : b.maybe_call)(
-				snippet_function,
-				b.id('$$renderer'),
-				...snippet_args
-			)
+	let statement = b.stmt(
+		(node.expression.type === 'CallExpression' ? b.call : b.maybe_call)(
+			snippet_function,
+			b.id('$$renderer'),
+			...snippet_args
 		)
 	);
 
+	if (optimiser.is_async()) {
+		statement = create_async_block(
+			b.block([optimiser.apply(), statement]),
+			optimiser.blockers(),
+			optimiser.has_await
+		);
+	}
+
+	context.state.template.push(statement);
+
 	if (!context.state.skip_hydration_boundaries) {
 		context.state.template.push(empty_comment);
 	}

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

@@ -65,10 +65,13 @@ export function SlotElement(node, context) {
 		fallback
 	);
 
-	const statement =
-		optimiser.expressions.length > 0
-			? create_async_block(b.block([optimiser.apply(), b.stmt(slot)]))
-			: b.stmt(slot);
+	const statement = optimiser.is_async()
+		? create_async_block(
+				b.block([optimiser.apply(), b.stmt(slot)]),
+				optimiser.blockers(),
+				optimiser.has_await
+			)
+		: b.stmt(slot);
 
 	context.state.template.push(block_open, statement, block_close);
 }

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

@@ -6,7 +6,12 @@ import { dev, locator } from '../../../../state.js';
 import * as b from '#compiler/builders';
 import { determine_namespace_for_children } from '../../utils.js';
 import { build_element_attributes } from './shared/element.js';
-import { build_template, create_child_block, PromiseOptimiser } from './shared/utils.js';
+import {
+	build_template,
+	create_async_block,
+	create_child_block,
+	PromiseOptimiser
+} from './shared/utils.js';
 
 /**
  * @param {AST.SvelteElement} node
@@ -39,11 +44,14 @@ export function SvelteElement(node, context) {
 
 	const optimiser = new PromiseOptimiser();
 
+	/** @type {Statement[]} */
+	let statements = [];
+
 	build_element_attributes(node, { ...context, state }, optimiser.transform);
 
 	if (dev) {
 		const location = /** @type {Location} */ (locator(node.start));
-		context.state.template.push(
+		statements.push(
 			b.stmt(
 				b.call(
 					'$.push_element',
@@ -74,9 +82,21 @@ export function SvelteElement(node, context) {
 		statement = create_child_block(b.block([optimiser.apply(), statement]), true);
 	}
 
-	context.state.template.push(statement);
+	statements.push(statement);
 
 	if (dev) {
-		context.state.template.push(b.stmt(b.call('$.pop_element')));
+		statements.push(b.stmt(b.call('$.pop_element')));
 	}
+
+	if (node.metadata.expression.is_async()) {
+		statements = [
+			create_async_block(
+				b.block(statements),
+				node.metadata.expression.blockers(),
+				node.metadata.expression.has_await
+			)
+		];
+	}
+
+	context.state.template.push(...statements);
 }

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

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

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

@@ -5,8 +5,7 @@ import {
 	empty_comment,
 	build_attribute_value,
 	create_async_block,
-	PromiseOptimiser,
-	build_template
+	PromiseOptimiser
 } from './utils.js';
 import * as b from '#compiler/builders';
 import { is_element_node } from '../../../../nodes.js';
@@ -323,8 +322,14 @@ export function build_inline_component(node, expression, context) {
 		);
 	}
 
-	if (optimiser.expressions.length > 0) {
-		statement = create_async_block(b.block([optimiser.apply(), statement]));
+	const is_async = optimiser.is_async();
+
+	if (is_async) {
+		statement = create_async_block(
+			b.block([optimiser.apply(), statement]),
+			optimiser.blockers(),
+			optimiser.has_await
+		);
 	}
 
 	if (dynamic && custom_css_props.length === 0) {
@@ -334,6 +339,7 @@ export function build_inline_component(node, expression, context) {
 	context.state.template.push(statement);
 
 	if (
+		!is_async &&
 		!context.state.skip_hydration_boundaries &&
 		custom_css_props.length === 0 &&
 		optimiser.expressions.length === 0