svelte 5.2.7 → 5.2.8

package/package.json

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

package/src/ambient.d.ts

@@ -1,17 +1,9 @@
 declare module '*.svelte' {
 	// use prettier-ignore for a while because of https://github.com/sveltejs/language-tools/commit/026111228b5814a9109cc4d779d37fb02955fb8b
 	// prettier-ignore
-	import { SvelteComponent, Component, type ComponentConstructorOptions } from 'svelte'
-
-	// Support using the component as both a class and function during the transition period
-	// prettier-ignore
-	interface ComponentType {
-		(
-			...args: Parameters<Component<Record<string, any>>>
-		): ReturnType<Component<Record<string, any>, Record<string, any>>>
-		new (o: ComponentConstructorOptions): SvelteComponent
-	}
-	const Comp: ComponentType;
+	import { SvelteComponent } from 'svelte'
+	import { LegacyComponentType } from 'svelte/legacy';
+	const Comp: LegacyComponentType;
 	type Comp = SvelteComponent;
 	export default Comp;
 }

package/src/compiler/phases/2-analyze/css/css-prune.js

@@ -260,12 +260,15 @@ function apply_combinator(combinator, relative_selector, parent_selectors, rule,
 	switch (name) {
 		case ' ':
 		case '>': {
-			let parent = /** @type {Compiler.TemplateNode | null} */ (element.parent);
-
 			let parent_matched = false;
 			let crossed_component_boundary = false;
 
-			while (parent) {
+			const path = element.metadata.path;
+			let i = path.length;
+
+			while (i--) {
+				const parent = path[i];
+
 				if (parent.type === 'Component' || parent.type === 'SvelteComponent') {
 					crossed_component_boundary = true;
 				}
@@ -289,8 +292,6 @@ function apply_combinator(combinator, relative_selector, parent_selectors, rule,
 
 					if (name === '>') return parent_matched;
 				}
-
-				parent = /** @type {Compiler.TemplateNode | null} */ (parent.parent);
 			}
 
 			return parent_matched || parent_selectors.every((selector) => is_global(selector, rule));
@@ -679,51 +680,50 @@ function relative_selector_might_apply_to_node(relative_selector, rule, element,
  * @param {boolean} include_self
  */
 function get_following_sibling_elements(element, include_self) {
-	/** @type {Compiler.AST.RegularElement | Compiler.AST.SvelteElement | Compiler.AST.Root | null} */
-	let parent = get_element_parent(element);
+	const path = element.metadata.path;
+	let i = path.length;
+
+	/** @type {Compiler.SvelteNode} */
+	let start = element;
+	let nodes = /** @type {Compiler.SvelteNode[]} */ (
+		/** @type {Compiler.AST.Fragment} */ (path[0]).nodes
+	);
+
+	// find the set of nodes to walk...
+	while (i--) {
+		const node = path[i];
 
-	if (!parent) {
-		parent = element;
-		while (parent?.type !== 'Root') {
-			parent = /** @type {any} */ (parent).parent;
+		if (node.type === 'RegularElement' || node.type === 'SvelteElement') {
+			nodes = node.fragment.nodes;
+			break;
+		}
+
+		if (node.type !== 'Fragment') {
+			start = node;
 		}
 	}
 
 	/** @type {Array<Compiler.AST.RegularElement | Compiler.AST.SvelteElement>} */
-	const sibling_elements = [];
-	let found_parent = false;
-
-	for (const el of parent.fragment.nodes) {
-		if (found_parent) {
-			walk(
-				el,
-				{},
-				{
-					RegularElement(node) {
-						sibling_elements.push(node);
-					},
-					SvelteElement(node) {
-						sibling_elements.push(node);
-					}
-				}
-			);
-		} else {
-			/** @type {any} */
-			let child = element;
-			while (child !== el && child !== parent) {
-				child = child.parent;
-			}
-			if (child === el) {
-				found_parent = true;
+	const siblings = [];
+
+	// ...then walk them, starting from the node after the one
+	// containing the element in question
+	for (const node of nodes.slice(nodes.indexOf(start) + 1)) {
+		walk(node, null, {
+			RegularElement(node) {
+				siblings.push(node);
+			},
+			SvelteElement(node) {
+				siblings.push(node);
 			}
-		}
+		});
 	}
 
 	if (include_self) {
-		sibling_elements.push(element);
+		siblings.push(element);
 	}
 
-	return sibling_elements;
+	return siblings;
 }
 
 /**
@@ -867,15 +867,18 @@ function unquote(str) {
  * @returns {Compiler.AST.RegularElement | Compiler.AST.SvelteElement | null}
  */
 function get_element_parent(node) {
-	/** @type {Compiler.SvelteNode | null} */
-	let parent = node;
-	while (
-		// @ts-expect-error TODO figure out a more elegant solution
-		(parent = parent.parent) &&
-		parent.type !== 'RegularElement' &&
-		parent.type !== 'SvelteElement'
-	);
-	return parent ?? null;
+	let path = node.metadata.path;
+	let i = path.length;
+
+	while (i--) {
+		const parent = path[i];
+
+		if (parent.type === 'RegularElement' || parent.type === 'SvelteElement') {
+			return parent;
+		}
+	}
+
+	return null;
 }
 
 /**
@@ -920,7 +923,7 @@ function find_previous_sibling(node) {
 	while (current_node?.type === 'SlotElement') {
 		const slot_children = current_node.fragment.nodes;
 		if (slot_children.length > 0) {
-			current_node = slot_children.slice(-1)[0];
+			current_node = slot_children[slot_children.length - 1];
 		} else {
 			break;
 		}
@@ -952,7 +955,7 @@ function get_possible_element_siblings(node, adjacent_only) {
 			if (adjacent_only) {
 				break;
 			}
-		} else if (prev.type === 'EachBlock' || prev.type === 'IfBlock' || prev.type === 'AwaitBlock') {
+		} else if (is_block(prev)) {
 			const possible_last_child = get_possible_last_child(prev, adjacent_only);
 			add_to_map(possible_last_child, result);
 			if (adjacent_only && has_definite_elements(possible_last_child)) {
@@ -976,7 +979,7 @@ function get_possible_element_siblings(node, adjacent_only) {
 		while (
 			// @ts-expect-error TODO
 			(parent = parent?.parent) &&
-			(parent.type === 'EachBlock' || parent.type === 'IfBlock' || parent.type === 'AwaitBlock')
+			is_block(parent)
 		) {
 			const possible_siblings = get_possible_element_siblings(parent, adjacent_only);
 			add_to_map(possible_siblings, result);
@@ -997,73 +1000,57 @@ function get_possible_element_siblings(node, adjacent_only) {
 }
 
 /**
- * @param {Compiler.AST.EachBlock | Compiler.AST.IfBlock | Compiler.AST.AwaitBlock} relative_selector
+ * @param {Compiler.AST.EachBlock | Compiler.AST.IfBlock | Compiler.AST.AwaitBlock | Compiler.AST.KeyBlock} node
  * @param {boolean} adjacent_only
  * @returns {Map<Compiler.AST.RegularElement, NodeExistsValue>}
  */
-function get_possible_last_child(relative_selector, adjacent_only) {
+function get_possible_last_child(node, adjacent_only) {
 	/** @typedef {Map<Compiler.AST.RegularElement, NodeExistsValue>} NodeMap */
 
+	/** @type {Array<Compiler.AST.Fragment | undefined | null>} */
+	let fragments = [];
+
+	switch (node.type) {
+		case 'EachBlock':
+			fragments.push(node.body, node.fallback);
+			break;
+
+		case 'IfBlock':
+			fragments.push(node.consequent, node.alternate);
+			break;
+
+		case 'AwaitBlock':
+			fragments.push(node.pending, node.then, node.catch);
+			break;
+
+		case 'KeyBlock':
+			fragments.push(node.fragment);
+			break;
+	}
+
 	/** @type {NodeMap} */
 	const result = new Map();
-	if (relative_selector.type === 'EachBlock') {
-		/** @type {NodeMap} */
-		const each_result = loop_child(relative_selector.body.nodes, adjacent_only);
-
-		/** @type {NodeMap} */
-		const else_result = relative_selector.fallback
-			? loop_child(relative_selector.fallback.nodes, adjacent_only)
-			: new Map();
-		const not_exhaustive = !has_definite_elements(else_result);
-		if (not_exhaustive) {
-			mark_as_probably(each_result);
-			mark_as_probably(else_result);
-		}
-		add_to_map(each_result, result);
-		add_to_map(else_result, result);
-	} else if (relative_selector.type === 'IfBlock') {
-		/** @type {NodeMap} */
-		const if_result = loop_child(relative_selector.consequent.nodes, adjacent_only);
-
-		/** @type {NodeMap} */
-		const else_result = relative_selector.alternate
-			? loop_child(relative_selector.alternate.nodes, adjacent_only)
-			: new Map();
-		const not_exhaustive = !has_definite_elements(if_result) || !has_definite_elements(else_result);
-		if (not_exhaustive) {
-			mark_as_probably(if_result);
-			mark_as_probably(else_result);
+
+	let exhaustive = true;
+
+	for (const fragment of fragments) {
+		if (fragment == null) {
+			exhaustive = false;
+			continue;
 		}
-		add_to_map(if_result, result);
-		add_to_map(else_result, result);
-	} else if (relative_selector.type === 'AwaitBlock') {
-		/** @type {NodeMap} */
-		const pending_result = relative_selector.pending
-			? loop_child(relative_selector.pending.nodes, adjacent_only)
-			: new Map();
-
-		/** @type {NodeMap} */
-		const then_result = relative_selector.then
-			? loop_child(relative_selector.then.nodes, adjacent_only)
-			: new Map();
-
-		/** @type {NodeMap} */
-		const catch_result = relative_selector.catch
-			? loop_child(relative_selector.catch.nodes, adjacent_only)
-			: new Map();
-		const not_exhaustive =
-			!has_definite_elements(pending_result) ||
-			!has_definite_elements(then_result) ||
-			!has_definite_elements(catch_result);
-		if (not_exhaustive) {
-			mark_as_probably(pending_result);
-			mark_as_probably(then_result);
-			mark_as_probably(catch_result);
+
+		const map = loop_child(fragment.nodes, adjacent_only);
+		exhaustive &&= has_definite_elements(map);
+
+		add_to_map(map, result);
+	}
+
+	if (!exhaustive) {
+		for (const key of result.keys()) {
+			result.set(key, NODE_PROBABLY_EXISTS);
 		}
-		add_to_map(pending_result, result);
-		add_to_map(then_result, result);
-		add_to_map(catch_result, result);
 	}
+
 	return result;
 }
 
@@ -1104,13 +1091,6 @@ function higher_existence(exist1, exist2) {
 	return exist1 > exist2 ? exist1 : exist2;
 }
 
-/** @param {Map<Compiler.AST.RegularElement, NodeExistsValue>} result */
-function mark_as_probably(result) {
-	for (const key of result.keys()) {
-		result.set(key, NODE_PROBABLY_EXISTS);
-	}
-}
-
 /**
  * @param {Compiler.SvelteNode[]} children
  * @param {boolean} adjacent_only
@@ -1118,18 +1098,18 @@ function mark_as_probably(result) {
 function loop_child(children, adjacent_only) {
 	/** @type {Map<Compiler.AST.RegularElement, NodeExistsValue>} */
 	const result = new Map();
-	for (let i = children.length - 1; i >= 0; i--) {
+
+	let i = children.length;
+
+	while (i--) {
 		const child = children[i];
+
 		if (child.type === 'RegularElement') {
 			result.set(child, NODE_DEFINITELY_EXISTS);
 			if (adjacent_only) {
 				break;
 			}
-		} else if (
-			child.type === 'EachBlock' ||
-			child.type === 'IfBlock' ||
-			child.type === 'AwaitBlock'
-		) {
+		} else if (is_block(child)) {
 			const child_result = get_possible_last_child(child, adjacent_only);
 			add_to_map(child_result, result);
 			if (adjacent_only && has_definite_elements(child_result)) {
@@ -1137,5 +1117,19 @@ function loop_child(children, adjacent_only) {
 			}
 		}
 	}
+
 	return result;
 }
+
+/**
+ * @param {Compiler.SvelteNode} node
+ * @returns {node is Compiler.AST.IfBlock | Compiler.AST.EachBlock | Compiler.AST.AwaitBlock | Compiler.AST.KeyBlock}
+ */
+function is_block(node) {
+	return (
+		node.type === 'IfBlock' ||
+		node.type === 'EachBlock' ||
+		node.type === 'AwaitBlock' ||
+		node.type === 'KeyBlock'
+	);
+}

package/src/compiler/phases/2-analyze/index.js

@@ -709,8 +709,8 @@ export function analyze_component(root, source, options) {
 		analyze_css(analysis.css.ast, analysis);
 
 		// mark nodes as scoped/unused/empty etc
-		for (const element of analysis.elements) {
-			prune(analysis.css.ast, element);
+		for (const node of analysis.elements) {
+			prune(analysis.css.ast, node);
 		}
 
 		const { comment } = analysis.css.ast.content;
@@ -724,18 +724,18 @@ export function analyze_component(root, source, options) {
 			warn_unused(analysis.css.ast);
 		}
 
-		outer: for (const element of analysis.elements) {
-			if (element.type === 'RenderTag') continue;
+		outer: for (const node of analysis.elements) {
+			if (node.type === 'RenderTag') continue;
 
-			if (element.metadata.scoped) {
+			if (node.metadata.scoped) {
 				// Dynamic elements in dom mode always use spread for attributes and therefore shouldn't have a class attribute added to them
 				// TODO this happens during the analysis phase, which shouldn't know anything about client vs server
-				if (element.type === 'SvelteElement' && options.generate === 'client') continue;
+				if (node.type === 'SvelteElement' && options.generate === 'client') continue;
 
 				/** @type {AST.Attribute | undefined} */
 				let class_attribute = undefined;
 
-				for (const attribute of element.attributes) {
+				for (const attribute of node.attributes) {
 					if (attribute.type === 'SpreadAttribute') {
 						// The spread method appends the hash to the end of the class attribute on its own
 						continue outer;
@@ -768,7 +768,7 @@ export function analyze_component(root, source, options) {
 						}
 					}
 				} else {
-					element.attributes.push(
+					node.attributes.push(
 						create_attribute('class', -1, -1, [
 							{
 								type: 'Text',
@@ -780,8 +780,8 @@ export function analyze_component(root, source, options) {
 							}
 						])
 					);
-					if (is_custom_element_node(element) && element.attributes.length === 1) {
-						mark_subtree_dynamic(element.metadata.path);
+					if (is_custom_element_node(node) && node.attributes.length === 1) {
+						mark_subtree_dynamic(node.metadata.path);
 					}
 				}
 			}

package/src/compiler/phases/2-analyze/visitors/ExpressionTag.js

@@ -9,7 +9,9 @@ import { mark_subtree_dynamic } from './shared/fragment.js';
  * @param {Context} context
  */
 export function ExpressionTag(node, context) {
-	if (node.parent && context.state.parent_element) {
+	const in_attribute = context.path.at(-1)?.type === 'Attribute';
+
+	if (!in_attribute && context.state.parent_element) {
 		if (!is_tag_valid_with_parent('#text', context.state.parent_element)) {
 			e.node_invalid_placement(node, '`{expression}`', context.state.parent_element);
 		}

package/src/compiler/phases/2-analyze/visitors/RegularElement.js

@@ -19,11 +19,9 @@ import { mark_subtree_dynamic } from './shared/fragment.js';
  */
 export function RegularElement(node, context) {
 	validate_element(node, context);
-
-	check_element(node, context.state);
+	check_element(node, context);
 
 	node.metadata.path = [...context.path];
-
 	context.state.analysis.elements.push(node);
 
 	// Special case: Move the children of <textarea> into a value attribute if they are dynamic

package/src/compiler/phases/2-analyze/visitors/RenderTag.js

@@ -12,6 +12,7 @@ import { mark_subtree_dynamic } from './shared/fragment.js';
 export function RenderTag(node, context) {
 	validate_opening_tag(node, context.state, '@');
 
+	node.metadata.path = [...context.path];
 	context.state.analysis.elements.push(node);
 
 	const callee = unwrap_optional(node.expression).callee;

package/src/compiler/phases/2-analyze/visitors/SvelteElement.js

@@ -12,9 +12,9 @@ import { mark_subtree_dynamic } from './shared/fragment.js';
  */
 export function SvelteElement(node, context) {
 	validate_element(node, context);
+	check_element(node, context);
 
-	check_element(node, context.state);
-
+	node.metadata.path = [...context.path];
 	context.state.analysis.elements.push(node);
 
 	const xmlns = /** @type {AST.Attribute & { value: [AST.Text] } | undefined} */ (

package/src/compiler/phases/2-analyze/visitors/Text.js

@@ -9,7 +9,9 @@ import * as e from '../../../errors.js';
  * @param {Context} context
  */
 export function Text(node, context) {
-	if (node.parent && context.state.parent_element && regex_not_whitespace.test(node.data)) {
+	const in_attribute = context.path.at(-1)?.type === 'Attribute';
+
+	if (!in_attribute && context.state.parent_element && regex_not_whitespace.test(node.data)) {
 		if (!is_tag_valid_with_parent('#text', context.state.parent_element)) {
 			e.node_invalid_placement(node, 'Text node', context.state.parent_element);
 		}

package/src/compiler/phases/2-analyze/visitors/shared/a11y.js

@@ -1,4 +1,4 @@
-/** @import { AnalysisState } from '../../types.js' */
+/** @import { Context } from '../../types.js' */
 /** @import { AST, SvelteNode, TemplateNode } from '#compiler' */
 /** @import { ARIARoleDefinitionKey, ARIARoleRelationConcept, ARIAProperty, ARIAPropertyDefinition, ARIARoleDefinition } from 'aria-query' */
 import { roles as roles_map, aria, elementRoles } from 'aria-query';
@@ -582,16 +582,17 @@ function get_implicit_role(name, attribute_map) {
 const invisible_elements = ['meta', 'html', 'script', 'style'];
 
 /**
- * @param {SvelteNode | null} parent
+ * @param {SvelteNode[]} path
  * @param {string[]} elements
  */
-function is_parent(parent, elements) {
-	while (parent) {
+function is_parent(path, elements) {
+	let i = path.length;
+	while (i--) {
+		const parent = path[i];
 		if (parent.type === 'SvelteElement') return true; // unknown, play it safe, so we don't warn
 		if (parent.type === 'RegularElement') {
 			return elements.includes(parent.name);
 		}
-		parent = /** @type {TemplateNode} */ (parent).parent;
 	}
 	return false;
 }
@@ -683,9 +684,9 @@ function get_static_text_value(attribute) {
 
 /**
  * @param {AST.RegularElement | AST.SvelteElement} node
- * @param {AnalysisState} state
+ * @param {Context} context
  */
-export function check_element(node, state) {
+export function check_element(node, context) {
 	/** @type {Map<string, AST.Attribute>} */
 	const attribute_map = new Map();
 
@@ -792,7 +793,7 @@ export function check_element(node, state) {
 					}
 
 					// Footers and headers are special cases, and should not have redundant roles unless they are the children of sections or articles.
-					const is_parent_section_or_article = is_parent(node.parent, ['section', 'article']);
+					const is_parent_section_or_article = is_parent(context.path, ['section', 'article']);
 					if (!is_parent_section_or_article) {
 						const has_nested_redundant_role =
 							current_role === a11y_nested_implicit_semantics.get(node.name);
@@ -1114,7 +1115,7 @@ export function check_element(node, state) {
 	}
 
 	if (node.name === 'figcaption') {
-		if (!is_parent(node.parent, ['figure'])) {
+		if (!is_parent(context.path, ['figure'])) {
 			w.a11y_figcaption_parent(node);
 		}
 	}

package/src/compiler/types/template.d.ts

@@ -167,6 +167,7 @@ export namespace AST {
 		metadata: {
 			dynamic: boolean;
 			args_with_call_expression: Set<number>;
+			path: SvelteNode[];
 		};
 	}
 
@@ -344,6 +345,7 @@ export namespace AST {
 			 */
 			mathml: boolean;
 			scoped: boolean;
+			path: SvelteNode[];
 		};
 	}
 

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

@@ -5,7 +5,7 @@ import { create_event, delegate } from './events.js';
 import { add_form_reset_listener, autofocus } from './misc.js';
 import * as w from '../../warnings.js';
 import { LOADING_ATTR_SYMBOL } from '../../constants.js';
-import { queue_idle_task, queue_micro_task } from '../task.js';
+import { queue_idle_task } from '../task.js';
 import { is_capture_event, is_delegated, normalize_attribute } from '../../../../utils.js';
 import {
 	active_effect,
@@ -209,8 +209,6 @@ export function set_attributes(
 
 	// @ts-expect-error
 	var attributes = /** @type {Record<string, unknown>} **/ (element.__attributes ??= {});
-	/** @type {Array<[string, any, () => void]>} */
-	var events = [];
 
 	// since key is captured we use const
 	for (const key in next) {
@@ -277,15 +275,7 @@ export function set_attributes(
 						current[key].call(this, evt);
 					}
 
-					if (!prev) {
-						events.push([
-							key,
-							value,
-							() => (current[event_handle_key] = create_event(event_name, element, handle, opts))
-						]);
-					} else {
-						current[event_handle_key] = create_event(event_name, element, handle, opts);
-					}
+					current[event_handle_key] = create_event(event_name, element, handle, opts);
 				} else {
 					// @ts-ignore
 					element[`__${event_name}`] = value;
@@ -325,19 +315,6 @@ export function set_attributes(
 		}
 	}
 
-	// On the first run, ensure that events are added after bindings so
-	// that their listeners fire after the binding listeners
-	if (!prev) {
-		queue_micro_task(() => {
-			if (!element.isConnected) return;
-			for (const [key, value, evt] of events) {
-				if (current[key] === value) {
-					evt();
-				}
-			}
-		});
-	}
-
 	return current;
 }
 

package/src/internal/client/dom/operations.js

@@ -154,8 +154,10 @@ export function first_child(fragment, is_text) {
  */
 export function sibling(node, count = 1, is_text = false) {
 	let next_sibling = hydrating ? hydrate_node : node;
+	var last_sibling;
 
 	while (count--) {
+		last_sibling = next_sibling;
 		next_sibling = /** @type {TemplateNode} */ (get_next_sibling(next_sibling));
 	}
 
@@ -163,13 +165,20 @@ export function sibling(node, count = 1, is_text = false) {
 		return next_sibling;
 	}
 
-	var type = next_sibling.nodeType;
+	var type = next_sibling?.nodeType;
 
 	// if a sibling {expression} is empty during SSR, there might be no
 	// text node to hydrate — we must therefore create one
 	if (is_text && type !== 3) {
 		var text = create_text();
-		next_sibling?.before(text);
+		// If the next sibling is `null` and we're handling text then it's because
+		// the SSR content was empty for the text, so we need to generate a new text
+		// node and insert it after the last sibling
+		if (next_sibling === null) {
+			last_sibling?.after(text);
+		} else {
+			next_sibling.before(text);
+		}
 		set_hydrate_node(text);
 		return text;
 	}

package/src/legacy/legacy-client.js

@@ -63,6 +63,11 @@ export function asClassComponent(component) {
 	};
 }
 
+/**
+ * Support using the component as both a class and function during the transition period
+ * @typedef  {{new (o: ComponentConstructorOptions): SvelteComponent;(...args: Parameters<Component<Record<string, any>>>): ReturnType<Component<Record<string, any>, Record<string, any>>>;}} LegacyComponentType
+ */
+
 class Svelte4Component {
 	/** @type {any} */
 	#events;

package/src/version.js

@@ -6,5 +6,5 @@
  * https://svelte.dev/docs/svelte-compiler#svelte-version
  * @type {string}
  */
-export const VERSION = '5.2.7';
+export const VERSION = '5.2.8';
 export const PUBLIC_VERSION = '5';