svelte 5.47.1 → 5.48.1

package/package.json

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

package/src/compiler/errors.js

@@ -977,12 +977,12 @@ export function const_tag_invalid_expression(node) {
 }
 
 /**
- * `{@const}` must be the immediate child of `{#snippet}`, `{#if}`, `{:else if}`, `{:else}`, `{#each}`, `{:then}`, `{:catch}`, `<svelte:fragment>`, `<svelte:boundary` or `<Component>`
+ * `{@const}` must be the immediate child of `{#snippet}`, `{#if}`, `{:else if}`, `{:else}`, `{#each}`, `{:then}`, `{:catch}`, `<svelte:fragment>`, `<svelte:boundary>` or `<Component>`
  * @param {null | number | NodeLike} node
  * @returns {never}
  */
 export function const_tag_invalid_placement(node) {
-	e(node, 'const_tag_invalid_placement', `\`{@const}\` must be the immediate child of \`{#snippet}\`, \`{#if}\`, \`{:else if}\`, \`{:else}\`, \`{#each}\`, \`{:then}\`, \`{:catch}\`, \`<svelte:fragment>\`, \`<svelte:boundary\` or \`<Component>\`\nhttps://svelte.dev/e/const_tag_invalid_placement`);
+	e(node, 'const_tag_invalid_placement', `\`{@const}\` must be the immediate child of \`{#snippet}\`, \`{#if}\`, \`{:else if}\`, \`{:else}\`, \`{#each}\`, \`{:then}\`, \`{:catch}\`, \`<svelte:fragment>\`, \`<svelte:boundary>\` or \`<Component>\`\nhttps://svelte.dev/e/const_tag_invalid_placement`);
 }
 
 /**

package/src/compiler/index.js

@@ -3,8 +3,9 @@
 /** @import { AST } from './public.js' */
 import { walk as zimmerframe_walk } from 'zimmerframe';
 import { convert } from './legacy.js';
-import { parse as _parse } from './phases/1-parse/index.js';
+import { parse as _parse, Parser } from './phases/1-parse/index.js';
 import { remove_typescript_nodes } from './phases/1-parse/remove_typescript_nodes.js';
+import { parse_stylesheet } from './phases/1-parse/read/style.js';
 import { analyze_component, analyze_module } from './phases/2-analyze/index.js';
 import { transform_component, transform_module } from './phases/3-transform/index.js';
 import { validate_component_options, validate_module_options } from './validate-options.js';
@@ -118,6 +119,29 @@ export function parse(source, { modern, loose } = {}) {
 	return to_public_ast(source, ast, modern);
 }
 
+/**
+ * The parseCss function parses a CSS stylesheet, returning its abstract syntax tree.
+ *
+ * @param {string} source The CSS source code
+ * @returns {Omit<AST.CSS.StyleSheet, 'attributes' | 'content'>}
+ */
+export function parseCss(source) {
+	source = remove_bom(source);
+	state.reset({ warning: () => false, filename: undefined });
+
+	state.set_source(source);
+
+	const parser = Parser.forCss(source);
+	const children = parse_stylesheet(parser);
+
+	return {
+		type: 'StyleSheet',
+		start: 0,
+		end: source.length,
+		children
+	};
+}
+
 /**
  * @param {string} source
  * @param {AST.Root} ast

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

@@ -34,6 +34,20 @@ export class Parser {
 	/** */
 	index = 0;
 
+	/**
+	 * Creates a minimal parser instance for CSS-only parsing.
+	 * Skips Svelte component parsing setup.
+	 * @param {string} source
+	 * @returns {Parser}
+	 */
+	static forCss(source) {
+		const parser = Object.create(Parser.prototype);
+		parser.template = source;
+		parser.index = 0;
+		parser.loose = false;
+		return parser;
+	}
+
 	/** Whether we're parsing in TypeScript mode */
 	ts = false;
 

package/src/compiler/phases/1-parse/read/style.js

@@ -24,10 +24,11 @@ const REGEX_HTML_COMMENT_CLOSE = /-->/;
  */
 export default function read_style(parser, start, attributes) {
 	const content_start = parser.index;
-	const children = read_body(parser, '</style');
+	const children = read_body(parser, (p) => p.match('</style') || p.index >= p.template.length);
 	const content_end = parser.index;
 
-	parser.read(/^<\/style\s*>/);
+	parser.eat('</style', true);
+	parser.read(/^\s*>/);
 
 	return {
 		type: 'StyleSheet',
@@ -46,20 +47,14 @@ export default function read_style(parser, start, attributes) {
 
 /**
  * @param {Parser} parser
- * @param {string} close
- * @returns {any[]}
+ * @param {(parser: Parser) => boolean} finished
+ * @returns {Array<AST.CSS.Rule | AST.CSS.Atrule>}
  */
-function read_body(parser, close) {
+function read_body(parser, finished) {
 	/** @type {Array<AST.CSS.Rule | AST.CSS.Atrule>} */
 	const children = [];
 
-	while (parser.index < parser.template.length) {
-		allow_comment_or_whitespace(parser);
-
-		if (parser.match(close)) {
-			return children;
-		}
-
+	while ((allow_comment_or_whitespace(parser), !finished(parser))) {
 		if (parser.match('@')) {
 			children.push(read_at_rule(parser));
 		} else {
@@ -67,7 +62,7 @@ function read_body(parser, close) {
 		}
 	}
 
-	e.expected_token(parser.template.length, close);
+	return children;
 }
 
 /**
@@ -627,3 +622,12 @@ function allow_comment_or_whitespace(parser) {
 		parser.allow_whitespace();
 	}
 }
+
+/**
+ * Parse standalone CSS content (not wrapped in `<style>`).
+ * @param {Parser} parser
+ * @returns {Array<AST.CSS.Rule | AST.CSS.Atrule>}
+ */
+export function parse_stylesheet(parser) {
+	return read_body(parser, (p) => p.index >= p.template.length);
+}

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

@@ -170,6 +170,7 @@ export function client_component(analysis, options) {
 		// these are set inside the `Fragment` visitor, and cannot be used until then
 		init: /** @type {any} */ (null),
 		consts: /** @type {any} */ (null),
+		snippets: /** @type {any} */ (null),
 		let_directives: /** @type {any} */ (null),
 		update: /** @type {any} */ (null),
 		after_update: /** @type {any} */ (null),

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

@@ -1,4 +1,4 @@
-/** @import { Pattern } from 'estree' */
+/** @import { Expression, Identifier, Pattern } from 'estree' */
 /** @import { AST } from '#compiler' */
 /** @import { ComponentContext } from '../types' */
 /** @import { ExpressionMetadata } from '../../../nodes.js' */
@@ -88,8 +88,8 @@ export function ConstTag(node, context) {
 
 /**
  * @param {ComponentContext['state']} state
- * @param {import('estree').Identifier} id
- * @param {import('estree').Expression} expression
+ * @param {Identifier} id
+ * @param {Expression} expression
  * @param {ExpressionMetadata} metadata
  * @param {import('#compiler').Binding[]} bindings
  */
@@ -99,7 +99,9 @@ function add_const_declaration(state, id, expression, metadata, bindings) {
 	const after = dev ? [b.stmt(b.call('$.get', id))] : [];
 
 	const has_await = metadata.has_await;
-	const blockers = [...metadata.dependencies].map((dep) => dep.blocker).filter((b) => b !== null);
+	const blockers = [...metadata.dependencies]
+		.map((dep) => dep.blocker)
+		.filter((b) => b !== null && b.object !== state.async_consts?.id);
 
 	if (has_await || state.async_consts || blockers.length > 0) {
 		const run = (state.async_consts ??= {
@@ -112,7 +114,11 @@ function add_const_declaration(state, id, expression, metadata, 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))));
+		if (blockers.length === 1) {
+			run.thunks.push(b.thunk(b.member(/** @type {Expression} */ (blockers[0]), 'promise')));
+		} else if (blockers.length > 0) {
+			run.thunks.push(b.thunk(b.call('$.wait', b.array(blockers))));
+		}
 
 		run.thunks.push(b.thunk(body, has_await));
 

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

@@ -1,13 +1,13 @@
 /** @import { Expression, Statement } from 'estree' */
 /** @import { AST } from '#compiler' */
 /** @import { ComponentClientTransformState, ComponentContext } from '../types' */
-import { TEMPLATE_FRAGMENT, TEMPLATE_USE_IMPORT_NODE } from '../../../../../constants.js';
 import * as b from '#compiler/builders';
+import { TEMPLATE_FRAGMENT, TEMPLATE_USE_IMPORT_NODE } from '../../../../../constants.js';
 import { clean_nodes, infer_namespace } from '../../utils.js';
 import { transform_template } from '../transform-template/index.js';
+import { Template } from '../transform-template/template.js';
 import { process_children } from './shared/fragment.js';
 import { build_render_statement, Memoizer } from './shared/utils.js';
-import { Template } from '../transform-template/template.js';
 
 /**
  * @param {AST.Fragment} node
@@ -60,6 +60,7 @@ export function Fragment(node, context) {
 	const state = {
 		...context.state,
 		init: [],
+		snippets: [],
 		consts: [],
 		let_directives: [],
 		update: [],
@@ -150,7 +151,7 @@ export function Fragment(node, context) {
 		}
 	}
 
-	body.push(...state.let_directives, ...state.consts);
+	body.push(...state.snippets, ...state.let_directives, ...state.consts);
 
 	if (state.async_consts && state.async_consts.thunks.length > 0) {
 		body.push(b.var(state.async_consts.id, b.call('$.run', b.array(state.async_consts.thunks))));

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

@@ -329,7 +329,7 @@ export function RegularElement(node, context) {
 	);
 
 	/** @type {typeof state} */
-	const child_state = { ...state, init: [], update: [], after_update: [] };
+	const child_state = { ...state, init: [], update: [], after_update: [], snippets: [] };
 
 	for (const node of hoisted) {
 		context.visit(node, child_state);
@@ -441,6 +441,7 @@ export function RegularElement(node, context) {
 		// Wrap children in `{...}` to avoid declaration conflicts
 		context.state.init.push(
 			b.block([
+				...child_state.snippets,
 				...child_state.init,
 				...element_state.init,
 				child_state.update.length > 0 ? build_render_statement(child_state) : b.empty,

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

@@ -89,6 +89,6 @@ export function SnippetBlock(node, context) {
 			context.state.instance_level_snippets.push(declaration);
 		}
 	} else {
-		context.state.init.push(declaration);
+		context.state.snippets.push(declaration);
 	}
 }

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

@@ -77,7 +77,7 @@ export function SvelteBoundary(node, context) {
 				/** @type {Statement[]} */
 				const statements = [];
 
-				context.visit(child, { ...context.state, init: statements });
+				context.visit(child, { ...context.state, snippets: statements });
 
 				const snippet = /** @type {VariableDeclaration} */ (statements[0]);
 

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

@@ -117,10 +117,10 @@ export function SvelteElement(node, context) {
 	);
 
 	if (dev) {
+		statements.push(b.stmt(b.call('$.validate_dynamic_element_tag', get_tag)));
 		if (node.fragment.nodes.length > 0) {
 			statements.push(b.stmt(b.call('$.validate_void_dynamic_element', get_tag)));
 		}
-		statements.push(b.stmt(b.call('$.validate_dynamic_element_tag', get_tag)));
 	}
 
 	const location = dev && locator(node.start);

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

@@ -333,7 +333,7 @@ export function build_component(node, component_name, loc, context) {
 			// can be used as props without creating conflicts
 			context.visit(child, {
 				...context.state,
-				init: snippet_declarations
+				snippets: snippet_declarations
 			});
 
 			push_prop(b.prop('init', child.expression, child.expression));

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

@@ -15,7 +15,7 @@ export function ConstTag(node, context) {
 	const has_await = node.metadata.expression.has_await;
 	const blockers = [...node.metadata.expression.dependencies]
 		.map((dep) => dep.blocker)
-		.filter((b) => b !== null);
+		.filter((b) => b !== null && b.object !== context.state.async_consts?.id);
 
 	if (has_await || context.state.async_consts || blockers.length > 0) {
 		const run = (context.state.async_consts ??= {
@@ -30,7 +30,9 @@ export function ConstTag(node, context) {
 			context.state.init.push(b.let(identifier.name));
 		}
 
-		if (blockers.length > 0) {
+		if (blockers.length === 1) {
+			run.thunks.push(b.thunk(/** @type {Expression} */ (blockers[0])));
+		} else if (blockers.length > 0) {
 			run.thunks.push(b.thunk(b.call('Promise.all', b.array(blockers))));
 		}
 

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

@@ -2,7 +2,7 @@
 /** @import { AST } from '#compiler' */
 /** @import { ComponentContext } from '../types.js' */
 import * as b from '#compiler/builders';
-import { create_push } from './shared/utils.js';
+import { block_close, block_open, create_push } from './shared/utils.js';
 
 /**
  * @param {AST.HtmlTag} node
@@ -12,5 +12,15 @@ export function HtmlTag(node, context) {
 	const expression = /** @type {Expression} */ (context.visit(node.expression));
 	const call = b.call('$.html', expression);
 
+	const has_await = node.metadata.expression.has_await;
+
+	if (has_await) {
+		context.state.template.push(block_open);
+	}
+
 	context.state.template.push(create_push(call, node.metadata.expression, true));
+
+	if (has_await) {
+		context.state.template.push(block_close);
+	}
 }

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

@@ -29,10 +29,10 @@ export function SvelteElement(node, context) {
 			tag = b.id(tag_id);
 		}
 
+		context.state.init.push(b.stmt(b.call('$.validate_dynamic_element_tag', b.thunk(tag))));
 		if (node.fragment.nodes.length > 0) {
 			context.state.init.push(b.stmt(b.call('$.validate_void_dynamic_element', b.thunk(tag))));
 		}
-		context.state.init.push(b.stmt(b.call('$.validate_dynamic_element_tag', b.thunk(tag))));
 	}
 
 	const state = {

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

@@ -49,22 +49,25 @@ export function transform_body(instance_body, runner, transform) {
 	if (instance_body.async.length > 0) {
 		const thunks = instance_body.async.map((s) => {
 			if (s.node.type === 'VariableDeclarator') {
-				const visited = /** @type {ESTree.VariableDeclaration} */ (
+				const visited = /** @type {ESTree.VariableDeclaration | ESTree.EmptyStatement} */ (
 					transform(b.var(s.node.id, s.node.init))
 				);
 
-				const statements = visited.declarations.map((node) => {
-					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);
-					}
+				const statements =
+					visited.type === 'VariableDeclaration'
+						? visited.declarations.map((node) => {
+								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);
+								}
 
-					return b.stmt(b.assignment('=', node.id, node.init ?? b.void0));
-				});
+								return b.stmt(b.assignment('=', node.id, node.init ?? b.void0));
+							})
+						: [];
 
 				if (statements.length === 1) {
 					const statement = /** @type {ESTree.ExpressionStatement} */ (statements[0]);

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

@@ -1,4 +1,4 @@
-/** @import { TemplateNode, Value } from '#client' */
+/** @import { Blocker, TemplateNode, Value } from '#client' */
 import { flatten } from '../../reactivity/async.js';
 import { Batch, current_batch } from '../../reactivity/batch.js';
 import { get } from '../../runtime.js';
@@ -14,11 +14,16 @@ import { get_boundary } from './boundary.js';
 
 /**
  * @param {TemplateNode} node
- * @param {Array<Promise<void>>} blockers
+ * @param {Blocker[]} blockers
  * @param {Array<() => Promise<any>>} expressions
  * @param {(anchor: TemplateNode, ...deriveds: Value[]) => void} fn
  */
 export function async(node, blockers = [], expressions = [], fn) {
+	if (expressions.length === 0 && blockers.every((b) => b.settled)) {
+		fn(node);
+		return;
+	}
+
 	var boundary = get_boundary();
 	var batch = /** @type {Batch} */ (current_batch);
 	var blocking = boundary.is_rendered();

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

@@ -102,6 +102,7 @@ export class Boundary {
 
 	#local_pending_count = 0;
 	#pending_count = 0;
+	#pending_count_update_queued = false;
 
 	#is_creating_fallback = false;
 
@@ -202,12 +203,11 @@ export class Boundary {
 
 	#hydrate_pending_content() {
 		const pending = this.#props.pending;
-		if (!pending) {
-			return;
-		}
+		if (!pending) return;
+
 		this.#pending_effect = branch(() => pending(this.#anchor));
 
-		Batch.enqueue(() => {
+		queue_micro_task(() => {
 			var anchor = this.#get_anchor();
 
 			this.#main_effect = this.#run(() => {
@@ -359,9 +359,15 @@ export class Boundary {
 
 		this.#local_pending_count += d;
 
-		if (this.#effect_pending) {
-			internal_set(this.#effect_pending, this.#local_pending_count);
-		}
+		if (!this.#effect_pending || this.#pending_count_update_queued) return;
+		this.#pending_count_update_queued = true;
+
+		queue_micro_task(() => {
+			this.#pending_count_update_queued = false;
+			if (this.#effect_pending) {
+				internal_set(this.#effect_pending, this.#local_pending_count);
+			}
+		});
 	}
 
 	get_effect_pending() {

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

@@ -1,4 +1,4 @@
-/** @import { Effect } from '#client' */
+/** @import { Blocker, Effect } from '#client' */
 import { DEV } from 'esm-env';
 import { hydrating, set_hydrating } from '../hydration.js';
 import { get_descriptors, get_prototype_of } from '../../../shared/utils.js';
@@ -483,7 +483,7 @@ function set_attributes(
  * @param {(...expressions: any) => Record<string | symbol, any>} fn
  * @param {Array<() => any>} sync
  * @param {Array<() => Promise<any>>} async
- * @param {Array<Promise<void>>} blockers
+ * @param {Blocker[]} blockers
  * @param {string} [css_hash]
  * @param {boolean} [should_remove_defaults]
  * @param {boolean} [skip_warning]

package/src/internal/client/reactivity/async.js

@@ -1,4 +1,4 @@
-/** @import { Effect, TemplateNode, Value } from '#client' */
+/** @import { Blocker, Effect, Value } from '#client' */
 import { DESTROYED, STALE_REACTION } from '#client/constants';
 import { DEV } from 'esm-env';
 import {
@@ -27,7 +27,7 @@ import {
 import { aborted } from './effects.js';
 
 /**
- * @param {Array<Promise<void>>} blockers
+ * @param {Blocker[]} blockers
  * @param {Array<() => any>} sync
  * @param {Array<() => Promise<any>>} async
  * @param {(values: Value[]) => any} fn
@@ -35,7 +35,10 @@ import { aborted } from './effects.js';
 export function flatten(blockers, sync, async, fn) {
 	const d = is_runes() ? derived : derived_safe_equal;
 
-	if (async.length === 0 && blockers.length === 0) {
+	// Filter out already-settled blockers - no need to wait for them
+	var pending = blockers.filter((b) => !b.settled);
+
+	if (async.length === 0 && pending.length === 0) {
 		fn(sync.map(d));
 		return;
 	}
@@ -44,47 +47,52 @@ export function flatten(blockers, sync, async, fn) {
 	var parent = /** @type {Effect} */ (active_effect);
 
 	var restore = capture();
+	var blocker_promise =
+		pending.length === 1
+			? pending[0].promise
+			: pending.length > 1
+				? Promise.all(pending.map((b) => b.promise))
+				: null;
+
+	/** @param {Value[]} values */
+	function finish(values) {
+		restore();
 
-	function run() {
-		Promise.all(async.map((expression) => async_derived(expression)))
-			.then((result) => {
-				restore();
+		try {
+			fn(values);
+		} catch (error) {
+			if ((parent.f & DESTROYED) === 0) {
+				invoke_error_boundary(error, parent);
+			}
+		}
 
-				try {
-					fn([...sync.map(d), ...result]);
-				} catch (error) {
-					// ignore errors in blocks that have already been destroyed
-					if ((parent.f & DESTROYED) === 0) {
-						invoke_error_boundary(error, parent);
-					}
-				}
+		batch?.deactivate();
+		unset_context();
+	}
 
-				batch?.deactivate();
-				unset_context();
-			})
-			.catch((error) => {
-				invoke_error_boundary(error, parent);
-			});
+	// Fast path: blockers but no async expressions
+	if (async.length === 0) {
+		/** @type {Promise<any>} */ (blocker_promise).then(() => finish(sync.map(d)));
+		return;
 	}
 
-	if (blockers.length > 0) {
-		Promise.all(blockers).then(() => {
-			restore();
+	// Full path: has async expressions
+	function run() {
+		restore();
+		Promise.all(async.map((expression) => async_derived(expression)))
+			.then((result) => finish([...sync.map(d), ...result]))
+			.catch((error) => invoke_error_boundary(error, parent));
+	}
 
-			try {
-				return run();
-			} finally {
-				batch?.deactivate();
-				unset_context();
-			}
-		});
+	if (blocker_promise) {
+		blocker_promise.then(run);
 	} else {
 		run();
 	}
 }
 
 /**
- * @param {Array<Promise<void>>} blockers
+ * @param {Blocker[]} blockers
  * @param {(values: Value[]) => any} fn
  */
 export function run_after_blockers(blockers, fn) {
@@ -239,7 +247,13 @@ export function run(thunks) {
 
 	var promise = Promise.resolve(thunks[0]()).catch(handle_error);
 
-	var promises = [promise];
+	/** @type {Blocker} */
+	var blocker = { promise, settled: false };
+	var blockers = [blocker];
+
+	promise.finally(() => {
+		blocker.settled = true;
+	});
 
 	for (const fn of thunks.slice(1)) {
 		promise = promise
@@ -255,13 +269,17 @@ export function run(thunks) {
 				restore();
 				return fn();
 			})
-			.catch(handle_error)
-			.finally(() => {
-				unset_context();
-				current_batch?.deactivate();
-			});
+			.catch(handle_error);
+
+		const blocker = { promise, settled: false };
+		blockers.push(blocker);
 
-		promises.push(promise);
+		promise.finally(() => {
+			blocker.settled = true;
+
+			unset_context();
+			current_batch?.deactivate();
+		});
 	}
 
 	promise
@@ -273,5 +291,12 @@ export function run(thunks) {
 			batch.decrement(blocking);
 		});
 
-	return promises;
+	return blockers;
+}
+
+/**
+ * @param {Blocker[]} blockers
+ */
+export function wait(blockers) {
+	return Promise.all(blockers.map((b) => b.promise));
 }