svelte - npm Package Compare versions

Comparing version 5.0.0-next.198 to 5.0.0-next.199

package.json

@@ -5,3 +5,3 @@ {
   "license": "MIT",
-  "version": "5.0.0-next.198",
+  "version": "5.0.0-next.199",
   "type": "module",
@@ -8,0 +8,0 @@ "types": "./types/index.d.ts",

src/compiler/errors.js

@@ -437,3 +437,3 @@ /* This file is generated by scripts/process-messages/index.js. Do not edit! */
 /**
- * A :global {...} block cannot follow a %name% combinator
+ * A `:global` selector cannot follow a `%name%` combinator
  * @param {null | number | NodeLike} node
@@ -444,7 +444,7 @@ * @param {string} name
 export function css_global_block_invalid_combinator(node, name) {
-	e(node, "css_global_block_invalid_combinator", `A :global {...} block cannot follow a ${name} combinator`);
+	e(node, "css_global_block_invalid_combinator", `A \`:global\` selector cannot follow a \`${name}\` combinator`);
 }
 
 /**
- * A :global {...} block can only contain rules, not declarations
+ * A top-level `:global {...}` block can only contain rules, not declarations
  * @param {null | number | NodeLike} node
@@ -454,7 +454,7 @@ * @returns {never}
 export function css_global_block_invalid_declaration(node) {
-	e(node, "css_global_block_invalid_declaration", "A :global {...} block can only contain rules, not declarations");
+	e(node, "css_global_block_invalid_declaration", "A top-level `:global {...}` block can only contain rules, not declarations");
 }
 
 /**
- * A :global {...} block cannot be part of a selector list with more than one item
+ * A `:global` selector cannot be part of a selector list with more than one item
  * @param {null | number | NodeLike} node
@@ -464,7 +464,7 @@ * @returns {never}
 export function css_global_block_invalid_list(node) {
-	e(node, "css_global_block_invalid_list", "A :global {...} block cannot be part of a selector list with more than one item");
+	e(node, "css_global_block_invalid_list", "A `:global` selector cannot be part of a selector list with more than one item");
 }
 
 /**
- * A :global {...} block cannot modify an existing selector
+ * A `:global` selector cannot modify an existing selector
  * @param {null | number | NodeLike} node
@@ -474,16 +474,16 @@ * @returns {never}
 export function css_global_block_invalid_modifier(node) {
-	e(node, "css_global_block_invalid_modifier", "A :global {...} block cannot modify an existing selector");
+	e(node, "css_global_block_invalid_modifier", "A `:global` selector cannot modify an existing selector");
 }
 
 /**
- * A :global {...} block can only appear at the end of a selector sequence (did you mean to use :global(...) instead?)
+ * A `:global` selector can only be modified if it is a descendant of other selectors
  * @param {null | number | NodeLike} node
  * @returns {never}
  */
-export function css_global_block_invalid_placement(node) {
-	e(node, "css_global_block_invalid_placement", "A :global {...} block can only appear at the end of a selector sequence (did you mean to use :global(...) instead?)");
+export function css_global_block_invalid_modifier_start(node) {
+	e(node, "css_global_block_invalid_modifier_start", "A `:global` selector can only be modified if it is a descendant of other selectors");
 }
 
 /**
- * :global(...) can be at the start or end of a selector sequence, but not in the middle
+ * `:global(...)` can be at the start or end of a selector sequence, but not in the middle
  * @param {null | number | NodeLike} node
@@ -493,7 +493,7 @@ * @returns {never}
 export function css_global_invalid_placement(node) {
-	e(node, "css_global_invalid_placement", ":global(...) can be at the start or end of a selector sequence, but not in the middle");
+	e(node, "css_global_invalid_placement", "`:global(...)` can be at the start or end of a selector sequence, but not in the middle");
 }
 
 /**
- * :global(...) must contain exactly one selector
+ * `:global(...)` must contain exactly one selector
  * @param {null | number | NodeLike} node
@@ -503,7 +503,7 @@ * @returns {never}
 export function css_global_invalid_selector(node) {
-	e(node, "css_global_invalid_selector", ":global(...) must contain exactly one selector");
+	e(node, "css_global_invalid_selector", "`:global(...)` must contain exactly one selector");
 }
 
 /**
- * :global(...) must not contain type or universal selectors when used in a compound selector
+ * `:global(...)` must not contain type or universal selectors when used in a compound selector
  * @param {null | number | NodeLike} node
@@ -513,3 +513,3 @@ * @returns {never}
 export function css_global_invalid_selector_list(node) {
-	e(node, "css_global_invalid_selector_list", ":global(...) must not contain type or universal selectors when used in a compound selector");
+	e(node, "css_global_invalid_selector_list", "`:global(...)` must not contain type or universal selectors when used in a compound selector");
 }
@@ -536,3 +536,3 @@
 /**
- * :global(...) must not be followed with a type selector
+ * `:global(...)` must not be followed by a type selector
  * @param {null | number | NodeLike} node
@@ -542,3 +542,3 @@ * @returns {never}
 export function css_type_selector_invalid_placement(node) {
-	e(node, "css_type_selector_invalid_placement", ":global(...) must not be followed with a type selector");
+	e(node, "css_type_selector_invalid_placement", "`:global(...)` must not be followed by a type selector");
 }
@@ -545,0 +545,0 @@

src/compiler/phases/1-parse/acorn.js

@@ -0,1 +1,3 @@
+/** @import { Comment, Program } from 'estree' */
+/** @import { Node } from 'acorn' */
 import * as acorn from 'acorn';
@@ -26,3 +28,3 @@ import { walk } from 'zimmerframe';
 
-	return /** @type {import('estree').Program} */ (ast);
+	return /** @type {Program} */ (ast);
 }
@@ -61,3 +63,3 @@
 	/**
-	 * @typedef {import('estree').Comment & {
+	 * @typedef {Comment & {
 	 *   start: number;
@@ -154,3 +156,3 @@ *   end: number;
  * @param {string} source
- * @param {import('acorn').Node} node
+ * @param {Node} node
  */
@@ -157,0 +159,0 @@ function amend(source, node) {

src/compiler/phases/1-parse/read/expression.js

@@ -0,1 +1,3 @@
+/** @import { Expression } from 'estree' */
+/** @import { Parser } from '../index.js' */
 import { parse_expression_at } from '../acorn.js';
@@ -6,4 +8,4 @@ import { regex_whitespace } from '../../patterns.js';
 /**
- * @param {import('../index.js').Parser} parser
- * @returns {import('estree').Expression}
+ * @param {Parser} parser
+ * @returns {Expression}
  */
@@ -39,3 +41,3 @@ export default function read_expression(parser) {
 
-		return /** @type {import('estree').Expression} */ (node);
+		return /** @type {Expression} */ (node);
 	} catch (err) {
@@ -42,0 +44,0 @@ parser.acorn_error(err);

src/compiler/phases/1-parse/state/element.js

@@ -0,3 +1,4 @@
+/** @import { Expression } from 'estree' */
+/** @import * as Compiler from '#compiler' */
 /** @import { Parser } from '../index.js' */
-/** @import * as Compiler from '#compiler' */
 import { is_void } from '../../../../constants.js';
@@ -592,3 +593,3 @@ import read_expression from '../read/expression.js';
 
-		/** @type {import('estree').Expression | null} */
+		/** @type {Expression | null} */
 		let expression = null;
@@ -616,3 +617,7 @@
 			modifiers,
-			expression
+			expression,
+			metadata: {
+				dynamic: false,
+				contains_call_expression: false
+			}
 		};
@@ -619,0 +624,0 @@

src/compiler/phases/1-parse/state/tag.js

@@ -0,1 +1,4 @@
+/** @import { ArrowFunctionExpression, Expression, Identifier } from 'estree' */
+/** @import { AwaitBlock, ConstTag, DebugTag, EachBlock, ExpressionTag, HtmlTag, IfBlock, KeyBlock, RenderTag, SnippetBlock } from '#compiler' */
+/** @import { Parser } from '../index.js' */
 import read_pattern from '../read/context.js';
@@ -10,3 +13,3 @@ import read_expression from '../read/expression.js';
 
-/** @param {import('../index.js').Parser} parser */
+/** @param {Parser} parser */
 export default function tag(parser) {
@@ -33,3 +36,3 @@ const start = parser.index;
 
-	/** @type {ReturnType<typeof parser.append<import('#compiler').ExpressionTag>>} */
+	/** @type {ReturnType<typeof parser.append<ExpressionTag>>} */
 	parser.append({
@@ -47,3 +50,3 @@ type: 'ExpressionTag',
 
-/** @param {import('../index.js').Parser} parser */
+/** @param {Parser} parser */
 function open(parser) {
@@ -56,3 +59,3 @@ let start = parser.index - 2;
 
-		/** @type {ReturnType<typeof parser.append<import('#compiler').IfBlock>>} */
+		/** @type {ReturnType<typeof parser.append<IfBlock>>} */
 		const block = parser.append({
@@ -83,3 +86,3 @@ type: 'IfBlock',
 
-		/** @type {import('estree').Expression | undefined} */
+		/** @type {Expression | undefined} */
 		let expression;
@@ -127,3 +130,3 @@
 				TSAsExpression(node, context) {
-					if (node.end === /** @type {import('estree').Expression} */ (expression).end) {
+					if (node.end === /** @type {Expression} */ (expression).end) {
 						assertion = node;
@@ -180,3 +183,3 @@ end = node.expression.end;
 
-		/** @type {ReturnType<typeof parser.append<import('#compiler').EachBlock>>} */
+		/** @type {ReturnType<typeof parser.append<EachBlock>>} */
 		const block = parser.append({
@@ -205,3 +208,3 @@ type: 'EachBlock',
 
-		/** @type {ReturnType<typeof parser.append<import('#compiler').AwaitBlock>>} */
+		/** @type {ReturnType<typeof parser.append<AwaitBlock>>} */
 		const block = parser.append({
@@ -260,3 +263,3 @@ type: 'AwaitBlock',
 
-		/** @type {ReturnType<typeof parser.append<import('#compiler').KeyBlock>>} */
+		/** @type {ReturnType<typeof parser.append<KeyBlock>>} */
 		const block = parser.append({
@@ -305,3 +308,3 @@ type: 'KeyBlock',
 
-		let function_expression = /** @type {import('estree').ArrowFunctionExpression} */ (
+		let function_expression = /** @type {ArrowFunctionExpression} */ (
 			parse_expression_at(prelude + `${params} => {}`, parser.ts, params_start)
@@ -313,3 +316,3 @@ );
 
-		/** @type {ReturnType<typeof parser.append<import('#compiler').SnippetBlock>>} */
+		/** @type {ReturnType<typeof parser.append<SnippetBlock>>} */
 		const block = parser.append({
@@ -337,3 +340,3 @@ type: 'SnippetBlock',
 
-/** @param {import('../index.js').Parser} parser */
+/** @param {Parser} parser */
 function next(parser) {
@@ -367,3 +370,3 @@ const start = parser.index - 1;
 
-			/** @type {ReturnType<typeof parser.append<import('#compiler').IfBlock>>} */
+			/** @type {ReturnType<typeof parser.append<IfBlock>>} */
 			const child = parser.append({
@@ -450,3 +453,3 @@ start: elseif_start,
 
-/** @param {import('../index.js').Parser} parser */
+/** @param {Parser} parser */
 function close(parser) {
@@ -465,3 +468,3 @@ const start = parser.index - 1;
 				parser.stack.pop();
-				block = /** @type {import('#compiler').IfBlock} */ (parser.current());
+				block = /** @type {IfBlock} */ (parser.current());
 			}
@@ -500,3 +503,3 @@ block.end = parser.index;
 
-/** @param {import('../index.js').Parser} parser */
+/** @param {Parser} parser */
 function special(parser) {
@@ -515,3 +518,3 @@ let start = parser.index;
 
-		/** @type {ReturnType<typeof parser.append<import('#compiler').HtmlTag>>} */
+		/** @type {ReturnType<typeof parser.append<HtmlTag>>} */
 		parser.append({
@@ -528,3 +531,3 @@ type: 'HtmlTag',
 	if (parser.eat('debug')) {
-		/** @type {import('estree').Identifier[]} */
+		/** @type {Identifier[]} */
 		let identifiers;
@@ -540,4 +543,4 @@
 				expression.type === 'SequenceExpression'
-					? /** @type {import('estree').Identifier[]} */ (expression.expressions)
-					: [/** @type {import('estree').Identifier} */ (expression)];
+					? /** @type {Identifier[]} */ (expression.expressions)
+					: [/** @type {Identifier} */ (expression)];
 
@@ -556,3 +559,3 @@ identifiers.forEach(
 
-		/** @type {ReturnType<typeof parser.append<import('#compiler').DebugTag>>} */
+		/** @type {ReturnType<typeof parser.append<DebugTag>>} */
 		parser.append({
@@ -590,3 +593,3 @@ type: 'DebugTag',
 
-		/** @type {ReturnType<typeof parser.append<import('#compiler').ConstTag>>} */
+		/** @type {ReturnType<typeof parser.append<ConstTag>>} */
 		parser.append({
@@ -622,3 +625,3 @@ type: 'ConstTag',
 
-		/** @type {ReturnType<typeof parser.append<import('#compiler').RenderTag>>} */
+		/** @type {ReturnType<typeof parser.append<RenderTag>>} */
 		parser.append({
@@ -625,0 +628,0 @@ type: 'RenderTag',

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

@@ -30,9 +30,24 @@ /** @import { ComponentAnalysis } from '../../types.js' */
 		first.name === 'global' &&
-		relative_selector.selectors.every(
-			(selector) =>
-				selector.type === 'PseudoClassSelector' || selector.type === 'PseudoElementSelector'
-		)
+		(first.args === null ||
+			// Only these two selector types keep the whole selector global, because e.g.
+			// :global(button).x means that the selector is still scoped because of the .x
+			relative_selector.selectors.every(
+				(selector) =>
+					selector.type === 'PseudoClassSelector' || selector.type === 'PseudoElementSelector'
+			))
 	);
 }
 
+/**
+ * True if is `:global`
+ * @param {Css.SimpleSelector} simple_selector
+ */
+function is_global_block_selector(simple_selector) {
+	return (
+		simple_selector.type === 'PseudoClassSelector' &&
+		simple_selector.name === 'global' &&
+		simple_selector.args === null
+	);
+}
+
 /** @type {CssVisitors} */
@@ -52,3 +67,3 @@ const analysis_visitors = {
 
-		node.metadata.used = node.children.every(
+		node.metadata.used ||= node.children.every(
 			({ metadata }) => metadata.is_global || metadata.is_global_like
@@ -58,10 +73,3 @@ );
 	RelativeSelector(node, context) {
-		node.metadata.is_global =
-			node.selectors.length >= 1 &&
-			node.selectors[0].type === 'PseudoClassSelector' &&
-			node.selectors[0].name === 'global' &&
-			node.selectors.every(
-				(selector) =>
-					selector.type === 'PseudoClassSelector' || selector.type === 'PseudoElementSelector'
-			);
+		node.metadata.is_global = node.selectors.length >= 1 && is_global(node);
 
@@ -91,11 +99,26 @@ if (node.selectors.length === 1) {
 
-		// `:global {...}` or `div :global {...}`
 		node.metadata.is_global_block = node.prelude.children.some((selector) => {
-			const last = selector.children[selector.children.length - 1];
+			let is_global_block = false;
 
-			const s = last.selectors[last.selectors.length - 1];
+			for (const child of selector.children) {
+				const idx = child.selectors.findIndex(is_global_block_selector);
 
-			if (s.type === 'PseudoClassSelector' && s.name === 'global' && s.args === null) {
-				return true;
+				if (is_global_block) {
+					// All selectors after :global are unscoped
+					child.metadata.is_global_like = true;
+				}
+
+				if (idx !== -1) {
+					is_global_block = true;
+					for (let i = idx + 1; i < child.selectors.length; i++) {
+						walk(/** @type {Css.Node} */ (child.selectors[i]), null, {
+							ComplexSelector(node) {
+								node.metadata.used = true;
+							}
+						});
+					}
+				}
 			}
+
+			return is_global_block;
 		});
@@ -125,12 +148,20 @@
 			const complex_selector = node.prelude.children[0];
-			const relative_selector = complex_selector.children[complex_selector.children.length - 1];
+			const global_selector = complex_selector.children.find((r, selector_idx) => {
+				const idx = r.selectors.findIndex(is_global_block_selector);
+				if (idx === 0) {
+					if (r.selectors.length > 1 && selector_idx === 0 && node.metadata.parent_rule === null) {
+						e.css_global_block_invalid_modifier_start(r.selectors[1]);
+					}
+					return true;
+				} else if (idx !== -1) {
+					e.css_global_block_invalid_modifier(r.selectors[idx]);
+				}
+			});
 
-			if (relative_selector.selectors.length > 1) {
-				e.css_global_block_invalid_modifier(
-					relative_selector.selectors[relative_selector.selectors.length - 1]
-				);
+			if (!global_selector) {
+				throw new Error('Internal error: global block without :global selector');
 			}
 
-			if (relative_selector.combinator && relative_selector.combinator.name !== ' ') {
-				e.css_global_block_invalid_combinator(relative_selector, relative_selector.combinator.name);
+			if (global_selector.combinator && global_selector.combinator.name !== ' ') {
+				e.css_global_block_invalid_combinator(global_selector, global_selector.combinator.name);
 			}
@@ -140,3 +171,9 @@
 
-			if (declaration) {
+			if (
+				declaration &&
+				// :global { color: red; } is invalid, but foo :global { color: red; } is valid
+				node.prelude.children.length === 1 &&
+				node.prelude.children[0].children.length === 1 &&
+				node.prelude.children[0].children[0].selectors.length === 1
+			) {
 				e.css_global_block_invalid_declaration(declaration);
@@ -155,10 +192,3 @@ }
 
-				if (global.selectors[0].args === null && idx !== node.children.length - 1) {
-					// ensure `:global` is only at the end of a selector
-					e.css_global_block_invalid_placement(global.selectors[0]);
-				} else if (
-					global.selectors[0].args !== null &&
-					idx !== 0 &&
-					idx !== node.children.length - 1
-				) {
+				if (global.selectors[0].args !== null && idx !== 0 && idx !== node.children.length - 1) {
 					// ensure `:global(...)` is not used in the middle of a selector (but multiple `global(...)` in sequence are ok)
@@ -206,4 +236,13 @@ for (let i = idx + 1; i < node.children.length; i++) {
 		const rule = /** @type {Css.Rule} */ (context.state.rule);
-		if (!rule.metadata.parent_rule) {
+		const parent_rule = rule.metadata.parent_rule;
+		if (!parent_rule) {
 			e.css_nesting_selector_invalid_placement(node);
+		} else if (
+			// :global { &.foo { ... } } is invalid
+			parent_rule.metadata.is_global_block &&
+			!parent_rule.metadata.parent_rule &&
+			parent_rule.prelude.children[0].children.length === 1 &&
+			parent_rule.prelude.children[0].children[0].selectors.length === 1
+		) {
+			e.css_global_block_invalid_modifier_start(node);
 		}
@@ -210,0 +249,0 @@ }

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

@@ -298,4 +298,8 @@ /** @import { Visitors } from 'zimmerframe' */
 
-				if (name === 'global' && relative_selector.selectors.length === 1) {
-					const args = /** @type {Compiler.Css.SelectorList} */ (selector.args);
+				if (
+					name === 'global' &&
+					selector.args !== null &&
+					relative_selector.selectors.length === 1
+				) {
+					const args = selector.args;
 					const complex_selector = args.children[0];
@@ -305,2 +309,5 @@ return apply_selector(complex_selector.children, rule, element, stylesheet);
 
+				// We came across a :global, everything beyond it is global and therefore a potential match
+				if (name === 'global' && selector.args === null) return true;
+
 				if ((name === 'is' || name === 'where') && selector.args) {
@@ -307,0 +314,0 @@ let matched = false;

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

@@ -0,1 +1,5 @@
+/** @import { ArrowFunctionExpression, CallExpression, Expression, FunctionDeclaration, FunctionExpression, Identifier, LabeledStatement, Literal, Node, Program, Super } from 'estree' */
+/** @import { Attribute, BindDirective, Binding, DelegatedEvent, RegularElement, Root, Script, SvelteNode, Text, ValidatedCompileOptions, ValidatedModuleCompileOptions } from '#compiler' */
+/** @import { AnalysisState, Context, LegacyAnalysisState, Visitors } from './types' */
+/** @import { Analysis, ComponentAnalysis, Js, ReactiveStatement, Template } from '../types' */
 import is_reference from 'is-reference';
@@ -40,10 +44,10 @@ import { walk } from 'zimmerframe';
 /**
- * @param {import('#compiler').Script | null} script
+ * @param {Script | null} script
  * @param {ScopeRoot} root
  * @param {boolean} allow_reactive_declarations
  * @param {Scope | null} parent
- * @returns {import('../types.js').Js}
+ * @returns {Js}
  */
 function js(script, root, allow_reactive_declarations, parent) {
-	/** @type {import('estree').Program} */
+	/** @type {Program} */
 	const ast = script?.content ?? {
@@ -79,5 +83,5 @@ type: 'Program',
  * @param {string} event_name
- * @param {import('estree').Expression | null} handler
- * @param {import('./types').Context} context
- * @returns {null | import('#compiler').DelegatedEvent}
+ * @param {Expression | null} handler
+ * @param {Context} context
+ * @returns {null | DelegatedEvent}
  */
@@ -96,5 +100,5 @@ function get_delegated_event(event_name, handler, context) {
 
-	/** @type {import('#compiler').DelegatedEvent} */
+	/** @type {DelegatedEvent} */
 	const non_hoistable = { type: 'non-hoistable' };
-	/** @type {import('estree').FunctionExpression | import('estree').FunctionDeclaration | import('estree').ArrowFunctionExpression | null} */
+	/** @type {FunctionExpression | FunctionDeclaration | ArrowFunctionExpression | null} */
 	let target_function = null;
@@ -125,3 +129,3 @@ let binding = null;
 
-				/** @type {import('#compiler').RegularElement | null} */
+				/** @type {RegularElement | null} */
 				let element = null;
@@ -131,3 +135,3 @@ /** @type {string | null} */
 				if (parent.type === 'OnDirective') {
-					element = /** @type {import('#compiler').RegularElement} */ (grandparent);
+					element = /** @type {RegularElement} */ (grandparent);
 					event_name = parent.name;
@@ -139,4 +143,4 @@ } else if (
 				) {
-					element = /** @type {import('#compiler').RegularElement} */ (path.at(-3));
-					const attribute = /** @type {import('#compiler').Attribute} */ (grandparent);
+					element = /** @type {RegularElement} */ (path.at(-3));
+					const attribute = /** @type {Attribute} */ (grandparent);
 					event_name = get_attribute_event_name(attribute.name);
@@ -233,5 +237,5 @@ }
 /**
- * @param {import('estree').Program} ast
- * @param {import('#compiler').ValidatedModuleCompileOptions} options
- * @returns {import('../types.js').Analysis}
+ * @param {Program} ast
+ * @param {ValidatedModuleCompileOptions} options
+ * @returns {Analysis}
  */
@@ -249,3 +253,3 @@ export function analyze_module(ast, options) {
 	walk(
-		/** @type {import('estree').Node} */ (ast),
+		/** @type {Node} */ (ast),
 		{ scope, analysis: { runes: true } },
@@ -266,6 +270,6 @@ // @ts-expect-error TODO clean this mess up
 /**
- * @param {import('#compiler').Root} root
+ * @param {Root} root
  * @param {string} source
- * @param {import('#compiler').ValidatedCompileOptions} options
- * @returns {import('../types.js').ComponentAnalysis}
+ * @param {ValidatedCompileOptions} options
+ * @returns {ComponentAnalysis}
  */
@@ -280,3 +284,3 @@ export function analyze_component(root, source, options) {
 
-	/** @type {import('../types.js').Template} */
+	/** @type {Template} */
 	const template = { ast: root.fragment, scope, scopes };
@@ -352,3 +356,3 @@
 						// const state = $state(0) is valid
-						get_rune(/** @type {import('estree').Node} */ (path.at(-1)), module.scope) === null
+						get_rune(/** @type {Node} */ (path.at(-1)), module.scope) === null
 					) {
@@ -374,3 +378,3 @@ e.store_invalid_subscription(node);
 	// TODO remove all the ?? stuff, we don't need it now that we're validating the config
-	/** @type {import('../types.js').ComponentAnalysis} */
+	/** @type {ComponentAnalysis} */
 	const analysis = {
@@ -449,3 +453,3 @@ name: module.scope.generate(options.name ?? component_name),
 		for (const { ast, scope, scopes } of [module, instance, template]) {
-			/** @type {import('./types').AnalysisState} */
+			/** @type {AnalysisState} */
 			const state = {
@@ -466,3 +470,3 @@ scope,
 			walk(
-				/** @type {import('#compiler').SvelteNode} */ (ast),
+				/** @type {SvelteNode} */ (ast),
 				state,
@@ -491,3 +495,3 @@ merge(set_scope(scopes), validation_runes, runes_scope_tweaker, common_visitors)
 								type === 'BindDirective' &&
-								/** @type {import('#compiler').BindDirective} */ (path[i]).name === 'this'
+								/** @type {BindDirective} */ (path[i]).name === 'this'
 							) {
@@ -521,3 +525,3 @@ for (let j = i - 1; j >= 0; j -= 1) {
 		for (const { ast, scope, scopes } of [module, instance, template]) {
-			/** @type {import('./types').LegacyAnalysisState} */
+			/** @type {LegacyAnalysisState} */
 			const state = {
@@ -541,3 +545,3 @@ scope,
 			walk(
-				/** @type {import('#compiler').SvelteNode} */ (ast),
+				/** @type {SvelteNode} */ (ast),
 				state,
@@ -603,3 +607,3 @@ // @ts-expect-error TODO
 
-				/** @type {import('#compiler').Attribute | undefined} */
+				/** @type {Attribute | undefined} */
 				let class_attribute = undefined;
@@ -623,3 +627,3 @@
 					} else {
-						/** @type {import('#compiler').Text} */
+						/** @type {Text} */
 						const css_text = {
@@ -664,3 +668,3 @@ type: 'Text',
 
-/** @type {import('./types').Visitors<import('./types').LegacyAnalysisState>} */
+/** @type {Visitors<LegacyAnalysisState>} */
 const legacy_scope_tweaker = {
@@ -671,3 +675,3 @@ LabeledStatement(node, { next, path, state }) {
 			node.label.name !== '$' ||
-			/** @type {import('#compiler').SvelteNode} */ (path.at(-1)).type !== 'Program'
+			/** @type {SvelteNode} */ (path.at(-1)).type !== 'Program'
 		) {
@@ -678,3 +682,3 @@ return next();
 		// Find all dependencies of this `$: {...}` statement
-		/** @type {import('../types.js').ReactiveStatement} */
+		/** @type {ReactiveStatement} */
 		const reactive_statement = {
@@ -694,10 +698,10 @@ assignments: new Set(),
 			for (const { node, path } of nodes) {
-				/** @type {import('estree').Expression} */
+				/** @type {Expression} */
 				let left = node;
 
 				let i = path.length - 1;
-				let parent = /** @type {import('estree').Expression} */ (path.at(i));
+				let parent = /** @type {Expression} */ (path.at(i));
 				while (parent.type === 'MemberExpression') {
 					left = parent;
-					parent = /** @type {import('estree').Expression} */ (path.at(--i));
+					parent = /** @type {Expression} */ (path.at(--i));
 				}
@@ -783,3 +787,3 @@
 	Identifier(node, { state, path }) {
-		const parent = /** @type {import('estree').Node} */ (path.at(-1));
+		const parent = /** @type {Node} */ (path.at(-1));
 		if (is_reference(node, parent)) {
@@ -861,5 +865,3 @@ if (node.name === '$$props') {
 			for (const specifier of node.specifiers) {
-				const binding = /** @type {import('#compiler').Binding} */ (
-					state.scope.get(specifier.local.name)
-				);
+				const binding = /** @type {Binding} */ (state.scope.get(specifier.local.name));
 				if (
@@ -891,3 +893,3 @@ binding !== null &&
 			state.analysis.exports.push({
-				name: /** @type {import('estree').Identifier} */ (node.declaration.id).name,
+				name: /** @type {Identifier} */ (node.declaration.id).name,
 				alias: null
@@ -910,3 +912,3 @@ });
 				for (const id of extract_identifiers(declarator.id)) {
-					const binding = /** @type {import('#compiler').Binding} */ (state.scope.get(id.name));
+					const binding = /** @type {Binding} */ (state.scope.get(id.name));
 					binding.kind = 'bindable_prop';
@@ -929,3 +931,3 @@ }
 
-/** @type {import('zimmerframe').Visitors<import('#compiler').SvelteNode, { scope: Scope, analysis: { runes: true } }>} */
+/** @type {Visitors} */
 const runes_scope_js_tweaker = {
@@ -950,3 +952,3 @@ VariableDeclarator(node, { state }) {
 			// @ts-ignore this fails in CI for some insane reason
-			const binding = /** @type {import('#compiler').Binding} */ (state.scope.get(path.node.name));
+			const binding = /** @type {Binding} */ (state.scope.get(path.node.name));
 			binding.kind =
@@ -958,3 +960,3 @@ rune === '$state' ? 'state' : rune === '$state.frozen' ? 'frozen_state' : 'derived';
 
-/** @type {import('./types').Visitors} */
+/** @type {Visitors} */
 const runes_scope_tweaker = {
@@ -989,3 +991,3 @@ CallExpression(node, { state, next }) {
 			// @ts-ignore this fails in CI for some insane reason
-			const binding = /** @type {import('#compiler').Binding} */ (state.scope.get(path.node.name));
+			const binding = /** @type {Binding} */ (state.scope.get(path.node.name));
 			binding.kind =
@@ -1007,3 +1009,3 @@ rune === '$state'
 			if (node.id.type === 'Identifier') {
-				const binding = /** @type {import('#compiler').Binding} */ (state.scope.get(node.id.name));
+				const binding = /** @type {Binding} */ (state.scope.get(node.id.name));
 				binding.initial = null; // else would be $props()
@@ -1019,11 +1021,11 @@ binding.kind = 'rest_prop';
 						property.value.type === 'AssignmentPattern'
-							? /** @type {import('estree').Identifier} */ (property.value.left).name
-							: /** @type {import('estree').Identifier} */ (property.value).name;
+							? /** @type {Identifier} */ (property.value.left).name
+							: /** @type {Identifier} */ (property.value).name;
 					const alias =
 						property.key.type === 'Identifier'
 							? property.key.name
-							: String(/** @type {import('estree').Literal} */ (property.key).value);
+							: String(/** @type {Literal} */ (property.key).value);
 					let initial = property.value.type === 'AssignmentPattern' ? property.value.right : null;
 
-					const binding = /** @type {import('#compiler').Binding} */ (state.scope.get(name));
+					const binding = /** @type {Binding} */ (state.scope.get(name));
 					binding.prop_alias = alias;
@@ -1037,5 +1039,3 @@
 					) {
-						binding.initial = /** @type {import('estree').Expression | null} */ (
-							initial.arguments[0] ?? null
-						);
+						binding.initial = /** @type {Expression | null} */ (initial.arguments[0] ?? null);
 						binding.kind = 'bindable_prop';
@@ -1070,3 +1070,3 @@ } else {
 			state.analysis.exports.push({
-				name: /** @type {import('estree').Identifier} */ (node.declaration.id).name,
+				name: /** @type {Identifier} */ (node.declaration.id).name,
 				alias: null
@@ -1088,4 +1088,4 @@ });
 /**
- * @param {import('estree').CallExpression} node
- * @param {import('./types').Context} context
+ * @param {CallExpression} node
+ * @param {Context} context
  * @returns {boolean}
@@ -1114,4 +1114,4 @@ */
 /**
- * @param {import('estree').ArrowFunctionExpression | import('estree').FunctionExpression | import('estree').FunctionDeclaration} node
- * @param {import('./types').Context} context
+ * @param {ArrowFunctionExpression | FunctionExpression | FunctionDeclaration} node
+ * @param {Context} context
  */
@@ -1136,3 +1136,3 @@ const function_visitor = (node, context) => {
  * call functions that require component context to exist
- * @param {import('estree').Expression | import('estree').Super} expression
+ * @param {Expression | Super} expression
  * @param {Scope} scope
@@ -1161,3 +1161,3 @@ */
 
-/** @type {import('./types').Visitors} */
+/** @type {Visitors} */
 const common_visitors = {
@@ -1285,3 +1285,3 @@ _(node, { state, next, path }) {
 	Identifier(node, context) {
-		const parent = /** @type {import('estree').Node} */ (context.path.at(-1));
+		const parent = /** @type {Node} */ (context.path.at(-1));
 		if (!is_reference(node, parent)) return;
@@ -1313,4 +1313,3 @@
 			const is_export_specifier =
-				/** @type {import('#compiler').SvelteNode} */ (context.path.at(-1)).type ===
-				'ExportSpecifier';
+				/** @type {SvelteNode} */ (context.path.at(-1)).type === 'ExportSpecifier';
 
@@ -1343,3 +1342,5 @@ if (
 		if (
-			(expression?.type === 'ExpressionTag' || expression?.type === 'SpreadAttribute') &&
+			(expression?.type === 'ExpressionTag' ||
+				expression?.type === 'SpreadAttribute' ||
+				expression?.type === 'OnDirective') &&
 			!is_known_safe_call(node, context)
@@ -1412,3 +1413,3 @@ ) {
 		}
-		next();
+		next({ ...state, expression: node });
 	},
@@ -1516,4 +1517,4 @@ BindDirective(node, context) {
 						'value',
-						/** @type {import('#compiler').Text} */ (node.fragment.nodes.at(0)).start,
-						/** @type {import('#compiler').Text} */ (node.fragment.nodes.at(-1)).end,
+						/** @type {Text} */ (node.fragment.nodes.at(0)).start,
+						/** @type {Text} */ (node.fragment.nodes.at(-1)).end,
 						// @ts-ignore
@@ -1597,3 +1598,3 @@ node.fragment.nodes
 /**
- * @param {import('#compiler').RegularElement} node
+ * @param {RegularElement} node
  */
@@ -1624,6 +1625,6 @@ function determine_element_spread(node) {
 /**
- * @param {Map<import('estree').LabeledStatement, import('../types.js').ReactiveStatement>} unsorted_reactive_declarations
+ * @param {Map<LabeledStatement, ReactiveStatement>} unsorted_reactive_declarations
  */
 function order_reactive_statements(unsorted_reactive_declarations) {
-	/** @typedef {[import('estree').LabeledStatement, import('../types.js').ReactiveStatement]} Tuple */
+	/** @typedef {[LabeledStatement, ReactiveStatement]} Tuple */
 
@@ -1661,3 +1662,3 @@ /** @type {Map<string, Array<Tuple>>} */
 	// We use a map and take advantage of the fact that the spec says insertion order is preserved when iterating
-	/** @type {Map<import('estree').LabeledStatement, import('../types.js').ReactiveStatement>} */
+	/** @type {Map<LabeledStatement, ReactiveStatement>} */
 	const reactive_declarations = new Map();
@@ -1667,4 +1668,4 @@
 	 *
-	 * @param {import('estree').LabeledStatement} node
-	 * @param {import('../types.js').ReactiveStatement} declaration
+	 * @param {LabeledStatement} node
+	 * @param {ReactiveStatement} declaration
 	 * @returns
@@ -1671,0 +1672,0 @@ */

src/compiler/phases/2-analyze/types.d.ts

@@ -6,2 +6,3 @@ import type { Scope } from '../scope.js';
 	ExpressionTag,
+	OnDirective,
 	RenderTag,
@@ -24,3 +25,3 @@ SpreadAttribute,
 	/** The current {expression}, if any */
-	expression: ExpressionTag | ClassDirective | SpreadAttribute | null;
+	expression: ExpressionTag | ClassDirective | OnDirective | SpreadAttribute | null;
 	/** The current {@render ...} tag, if any */
@@ -27,0 +28,0 @@ render_tag: null | RenderTag;

src/compiler/phases/2-analyze/validation.js

@@ -0,1 +1,5 @@
+/** @import { AssignmentExpression, CallExpression, Expression, Identifier, Node, Pattern, PrivateIdentifier, Super, UpdateExpression, VariableDeclarator } from 'estree' */
+/** @import { Attribute, Component, ElementLike, Fragment, RegularElement, SvelteComponent, SvelteElement, SvelteNode, SvelteSelf, TransitionDirective } from '#compiler' */
+/** @import { NodeLike } from '../../errors.js' */
+/** @import { AnalysisState, Context, Visitors } from './types.js' */
 import is_reference from 'is-reference';
@@ -38,4 +42,4 @@ import {
 /**
- * @param {import('#compiler').Attribute} attribute
- * @param {import('#compiler').ElementLike} parent
+ * @param {Attribute} attribute
+ * @param {ElementLike} parent
  */
@@ -67,4 +71,4 @@ function validate_attribute(attribute, parent) {
 /**
- * @param {import('#compiler').Component | import('#compiler').SvelteComponent | import('#compiler').SvelteSelf} node
- * @param {import('zimmerframe').Context<import('#compiler').SvelteNode, import('./types.js').AnalysisState>} context
+ * @param {Component | SvelteComponent | SvelteSelf} node
+ * @param {Context} context
  */
@@ -128,4 +132,4 @@ function validate_component(node, context) {
 /**
- * @param {import('#compiler').RegularElement | import('#compiler').SvelteElement} node
- * @param {import('zimmerframe').Context<import('#compiler').SvelteNode, import('./types.js').AnalysisState>} context
+ * @param {RegularElement | SvelteElement} node
+ * @param {Context} context
  */
@@ -135,6 +139,6 @@ function validate_element(node, context) {
 
-	/** @type {import('#compiler').TransitionDirective | null} */
+	/** @type {TransitionDirective | null} */
 	let in_transition = null;
 
-	/** @type {import('#compiler').TransitionDirective | null} */
+	/** @type {TransitionDirective | null} */
 	let out_transition = null;
@@ -182,3 +186,3 @@
 			if (attribute.name === 'slot') {
-				/** @type {import('#compiler').RegularElement | import('#compiler').SvelteElement | import('#compiler').Component | import('#compiler').SvelteComponent | import('#compiler').SvelteSelf | undefined} */
+				/** @type {RegularElement | SvelteElement | Component | SvelteComponent | SvelteSelf | undefined} */
 				validate_slot_attribute(context, attribute);
@@ -220,3 +224,3 @@ }
 		} else if (attribute.type === 'TransitionDirective') {
-			const existing = /** @type {import('#compiler').TransitionDirective | null} */ (
+			const existing = /** @type {TransitionDirective | null} */ (
 				(attribute.intro && in_transition) || (attribute.outro && out_transition)
@@ -264,3 +268,3 @@ );
 /**
- * @param {import('#compiler').Attribute} attribute
+ * @param {Attribute} attribute
  */
@@ -279,4 +283,4 @@ function validate_attribute_name(attribute) {
 /**
- * @param {import('zimmerframe').Context<import('#compiler').SvelteNode, import('./types.js').AnalysisState>} context
- * @param {import('#compiler').Attribute} attribute
+ * @param {Context} context
+ * @param {Attribute} attribute
  * @param {boolean} is_component
@@ -354,4 +358,4 @@ */
 /**
- * @param {import('#compiler').Fragment | null | undefined} node
- * @param {import('zimmerframe').Context<import('#compiler').SvelteNode, import('./types.js').AnalysisState>} context
+ * @param {Fragment | null | undefined} node
+ * @param {Context} context
  */
@@ -368,3 +372,3 @@ function validate_block_not_empty(node, context) {
 /**
- * @type {import('zimmerframe').Visitors<import('#compiler').SvelteNode, import('./types.js').AnalysisState>}
+ * @type {Visitors}
  */
@@ -478,3 +482,3 @@ const validation = {
 				if (parent.name === 'input' && node.name !== 'this') {
-					const type = /** @type {import('#compiler').Attribute | undefined} */ (
+					const type = /** @type {Attribute | undefined} */ (
 						parent.attributes.find((a) => a.type === 'Attribute' && a.name === 'type')
@@ -520,3 +524,3 @@ );
 				if (ContentEditableBindings.includes(node.name)) {
-					const contenteditable = /** @type {import('#compiler').Attribute} */ (
+					const contenteditable = /** @type {Attribute} */ (
 						parent.attributes.find((a) => a.type === 'Attribute' && a.name === 'contenteditable')
@@ -651,7 +655,10 @@ );
 
+		// Strip off any namespace from the beginning of the node name.
+		const node_name = node.name.replace(/[a-zA-Z-]*:/g, '');
+
 		if (
 			context.state.analysis.source[node.end - 2] === '/' &&
 			context.state.options.namespace !== 'foreign' &&
-			!VoidElements.includes(node.name) &&
-			!SVGElements.includes(node.name)
+			!VoidElements.includes(node_name) &&
+			!SVGElements.includes(node_name)
 		) {
@@ -859,4 +866,3 @@ w.element_invalid_self_closing_tag(node, node.name);
 			node.label.name === '$' &&
-			(state.ast_type !== 'instance' ||
-				/** @type {import('#compiler').SvelteNode} */ (path.at(-1)).type !== 'Program')
+			(state.ast_type !== 'instance' || /** @type {SvelteNode} */ (path.at(-1)).type !== 'Program')
 		) {
@@ -873,4 +879,4 @@ w.reactive_declaration_invalid_placement(node);
  *
- * @param {import('estree').Node} node
- * @param {import('../scope').Scope} scope
+ * @param {Node} node
+ * @param {Scope} scope
  * @param {string} name
@@ -892,5 +898,5 @@ */
 /**
- * @param {import('estree').CallExpression} node
+ * @param {CallExpression} node
  * @param {Scope} scope
- * @param {import('#compiler').SvelteNode[]} path
+ * @param {SvelteNode[]} path
  * @returns
@@ -902,3 +908,3 @@ */
 
-	const parent = /** @type {import('#compiler').SvelteNode} */ (get_parent(path, -1));
+	const parent = /** @type {SvelteNode} */ (get_parent(path, -1));
 
@@ -982,4 +988,4 @@ if (rune === '$props') {
 /**
- * @param {import('estree').VariableDeclarator} node
- * @param {import('./types.js').AnalysisState} state
+ * @param {VariableDeclarator} node
+ * @param {AnalysisState} state
  */
@@ -999,3 +1005,3 @@ function ensure_no_module_import_conflict(node, state) {
 /**
- * @type {import('zimmerframe').Visitors<import('#compiler').SvelteNode, import('./types.js').AnalysisState>}
+ * @type {Visitors}
  */
@@ -1035,3 +1041,3 @@ export const validation_runes_js = {
 
-		const args = /** @type {import('estree').CallExpression} */ (init).arguments;
+		const args = /** @type {CallExpression} */ (init).arguments;
 
@@ -1093,3 +1099,3 @@ if ((rune === '$derived' || rune === '$derived.by') && args.length !== 1) {
 		let i = path.length;
-		let parent = /** @type {import('estree').Expression} */ (path[--i]);
+		let parent = /** @type {Expression} */ (path[--i]);
 
@@ -1102,3 +1108,3 @@ if (
 		) {
-			/** @type {import('estree').Expression} */
+			/** @type {Expression} */
 			let current = node;
@@ -1109,6 +1115,6 @@ let name = node.name;
 				if (parent.computed) e.rune_invalid_computed_property(parent);
-				name += `.${/** @type {import('estree').Identifier} */ (parent.property).name}`;
+				name += `.${/** @type {Identifier} */ (parent.property).name}`;
 
 				current = parent;
-				parent = /** @type {import('estree').Expression} */ (path[--i]);
+				parent = /** @type {Expression} */ (path[--i]);
 
@@ -1132,4 +1138,4 @@ if (!Runes.includes(/** @type {Runes[number]} */ (name))) {
 /**
- * @param {import('../../errors.js').NodeLike} node
- * @param {import('estree').Pattern | import('estree').Expression} argument
+ * @param {NodeLike} node
+ * @param {Pattern | Expression} argument
  * @param {Scope} scope
@@ -1180,3 +1186,3 @@ * @param {boolean} is_binding
  * @param {{start: number; end: number}} node
- * @param {import('./types.js').AnalysisState} state
+ * @param {AnalysisState} state
  * @param {string} expected
@@ -1192,5 +1198,5 @@ */
 /**
- * @param {import('estree').AssignmentExpression | import('estree').UpdateExpression} node
- * @param {import('estree').Pattern | import('estree').Expression} argument
- * @param {import('./types.js').AnalysisState} state
+ * @param {AssignmentExpression | UpdateExpression} node
+ * @param {Pattern | Expression} argument
+ * @param {AnalysisState} state
  */
@@ -1218,5 +1224,5 @@ function validate_assignment(node, argument, state) {
 
-	let object = /** @type {import('estree').Expression | import('estree').Super} */ (argument);
+	let object = /** @type {Expression | Super} */ (argument);
 
-	/** @type {import('estree').Expression | import('estree').PrivateIdentifier | null} */
+	/** @type {Expression | PrivateIdentifier | null} */
 	let property = null;
@@ -1349,3 +1355,3 @@
 
-		const args = /** @type {import('estree').CallExpression} */ (init).arguments;
+		const args = /** @type {CallExpression} */ (init).arguments;
 
@@ -1352,0 +1358,0 @@ // TODO some of this is duplicated with above, seems off

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

@@ -0,1 +1,5 @@
+/** @import { ArrowFunctionExpression, AssignmentExpression, BinaryOperator, Expression, FunctionDeclaration, FunctionExpression, Identifier, MemberExpression, Node, Pattern, PrivateIdentifier, Statement } from 'estree' */
+/** @import { Binding, SvelteNode } from '#compiler' */
+/** @import { ClientTransformState, ComponentClientTransformState, ComponentContext } from './types.js' */
+/** @import { Scope } from '../../scope.js' */
 import * as b from '../../../utils/builders.js';
@@ -17,5 +21,5 @@ import {
 /**
- * @template {import('./types').ClientTransformState} State
- * @param {import('estree').AssignmentExpression} node
- * @param {import('zimmerframe').Context<import('#compiler').SvelteNode, State>} context
+ * @template {ClientTransformState} State
+ * @param {AssignmentExpression} node
+ * @param {import('zimmerframe').Context<SvelteNode, State>} context
  * @returns
@@ -27,8 +31,8 @@ */
 		return operator === '='
-			? /** @type {import('estree').Expression} */ (visit(node.right))
+			? /** @type {Expression} */ (visit(node.right))
 			: // turn something like x += 1 into x = x + 1
 				b.binary(
-					/** @type {import('estree').BinaryOperator} */ (operator.slice(0, -1)),
+					/** @type {BinaryOperator} */ (operator.slice(0, -1)),
 					serialize_get_binding(node.left, state),
-					/** @type {import('estree').Expression} */ (visit(node.right))
+					/** @type {Expression} */ (visit(node.right))
 				);
@@ -43,11 +47,11 @@ } else if (
 		return operator === '='
-			? /** @type {import('estree').Expression} */ (visit(node.right))
+			? /** @type {Expression} */ (visit(node.right))
 			: // turn something like x += 1 into x = x + 1
 				b.binary(
-					/** @type {import('estree').BinaryOperator} */ (operator.slice(0, -1)),
-					/** @type {import('estree').Expression} */ (visit(node.left)),
-					/** @type {import('estree').Expression} */ (visit(node.right))
+					/** @type {BinaryOperator} */ (operator.slice(0, -1)),
+					/** @type {Expression} */ (visit(node.left)),
+					/** @type {Expression} */ (visit(node.right))
 				);
 	} else {
-		return /** @type {import('estree').Expression} */ (visit(node.right));
+		return /** @type {Expression} */ (visit(node.right));
 	}
@@ -57,4 +61,4 @@ }
 /**
- * @param {import('#compiler').Binding} binding
- * @param {import('./types').ClientTransformState} state
+ * @param {Binding} binding
+ * @param {ClientTransformState} state
  * @returns {boolean}
@@ -70,5 +74,5 @@ */
 /**
- * @param {import('estree').Identifier} node
- * @param {import('./types').ClientTransformState} state
- * @returns {import('estree').Expression}
+ * @param {Identifier} node
+ * @param {ClientTransformState} state
+ * @returns {Expression}
  */
@@ -125,9 +129,9 @@ export function serialize_get_binding(node, state) {
 /**
- * @template {import('./types').ClientTransformState} State
- * @param {import('estree').AssignmentExpression} node
- * @param {import('zimmerframe').Context<import('#compiler').SvelteNode, State>} context
+ * @template {ClientTransformState} State
+ * @param {AssignmentExpression} node
+ * @param {import('zimmerframe').Context<SvelteNode, State>} context
  * @param {() => any} fallback
  * @param {boolean | null} [prefix] - If the assignment is a transformed update expression, set this. Else `null`
  * @param {{skip_proxy_and_freeze?: boolean}} [options]
- * @returns {import('estree').Expression}
+ * @returns {Expression}
  */
@@ -146,6 +150,6 @@ export function serialize_set_binding(node, context, fallback, prefix, options) {
 
-		/** @type {import('estree').AssignmentExpression[]} */
+		/** @type {AssignmentExpression[]} */
 		const original_assignments = [];
 
-		/** @type {import('estree').Expression[]} */
+		/** @type {Expression[]} */
 		const assignments = [];
@@ -169,3 +173,3 @@
 
-		const rhs_expression = /** @type {import('estree').Expression} */ (visit(node.right));
+		const rhs_expression = /** @type {Expression} */ (visit(node.right));
 
@@ -282,4 +286,4 @@ const iife_is_async =
 				node.operator,
-				/** @type {import('estree').Pattern} */ (visit(node.left)),
-				/** @type {import('estree').Expression} */ (visit(node.right))
+				/** @type {Pattern} */ (visit(node.left)),
+				/** @type {Expression} */ (visit(node.right))
 			)
@@ -311,6 +315,3 @@ );
 				binding.initial !== null &&
-				should_proxy_or_freeze(
-					/**@type {import("estree").Expression}*/ (binding.initial),
-					context.state.scope
-				);
+				should_proxy_or_freeze(/**@type {Expression}*/ (binding.initial), context.state.scope);
 			if ((binding.kind === 'prop' || binding.kind === 'bindable_prop') && !is_initial_proxy) {
@@ -372,4 +373,4 @@ return b.call(left, value);
 				 *
-				 * @param {import("estree").Expression | import("estree").Pattern} node
-				 * @returns {import("estree").Expression}
+				 * @param {Expression | Pattern} node
+				 * @returns {Expression}
 				 */
@@ -380,4 +381,4 @@ function visit_node(node) {
 							...node,
-							object: visit_node(/** @type {import("estree").Expression} */ (node.object)),
-							property: /** @type {import("estree").MemberExpression} */ (visit(node)).property
+							object: visit_node(/** @type {Expression} */ (node.object)),
+							property: /** @type {MemberExpression} */ (visit(node)).property
 						};
@@ -389,9 +390,6 @@ }
 						if (binding !== null && binding.kind === 'store_sub') {
-							return b.call(
-								'$.untrack',
-								b.thunk(/** @type {import('estree').Expression} */ (visit(node)))
-							);
+							return b.call('$.untrack', b.thunk(/** @type {Expression} */ (visit(node))));
 						}
 					}
-					return /** @type {import("estree").Expression} */ (visit(node));
+					return /** @type {Expression} */ (visit(node));
 				}
@@ -402,7 +400,3 @@
 					serialize_get_binding(b.id(left_name), state),
-					b.assignment(
-						node.operator,
-						/** @type {import("estree").Pattern}} */ (visit_node(node.left)),
-						value
-					),
+					b.assignment(node.operator, /** @type {Pattern}} */ (visit_node(node.left)), value),
 					b.call('$.untrack', b.id('$' + left_name))
@@ -418,7 +412,3 @@ );
 						left,
-						b.assignment(
-							node.operator,
-							/** @type {import('estree').Pattern} */ (visit(node.left)),
-							value
-						),
+						b.assignment(node.operator, /** @type {Pattern} */ (visit(node.left)), value),
 						b.true
@@ -430,7 +420,3 @@ );
 						b.id(left_name),
-						b.assignment(
-							node.operator,
-							/** @type {import('estree').Pattern} */ (visit(node.left)),
-							value
-						)
+						b.assignment(node.operator, /** @type {Pattern} */ (visit(node.left)), value)
 					);
@@ -445,3 +431,3 @@ }
 					node.operator === '+=' ? '++' : '--',
-					/** @type {import('estree').Expression} */ (visit(node.left)),
+					/** @type {Expression} */ (visit(node.left)),
 					prefix
@@ -452,4 +438,4 @@ );
 					node.operator,
-					/** @type {import('estree').Pattern} */ (visit(node.left)),
-					/** @type {import('estree').Expression} */ (visit(node.right))
+					/** @type {Pattern} */ (visit(node.left)),
+					/** @type {Expression} */ (visit(node.right))
 				);
@@ -468,5 +454,5 @@ }
 /**
- * @param {import('estree').Expression} value
- * @param {import('estree').PrivateIdentifier | string} proxy_reference
- * @param {import('./types').ClientTransformState} state
+ * @param {Expression} value
+ * @param {PrivateIdentifier | string} proxy_reference
+ * @param {ClientTransformState} state
  */
@@ -487,4 +473,4 @@ export function serialize_proxy_reassignment(value, proxy_reference, state) {
 /**
- * @param {import('estree').ArrowFunctionExpression | import('estree').FunctionExpression} node
- * @param {import('./types').ComponentContext} context
+ * @param {ArrowFunctionExpression | FunctionExpression} node
+ * @param {ComponentContext} context
  */
@@ -497,3 +483,3 @@ export const function_visitor = (node, context) => {
 	if (node.type === 'FunctionExpression') {
-		const parent = /** @type {import('estree').Node} */ (context.path.at(-1));
+		const parent = /** @type {Node} */ (context.path.at(-1));
 		const in_constructor = parent.type === 'MethodDefinition' && parent.kind === 'constructor';
@@ -509,3 +495,3 @@
 
-		return /** @type {import('estree').FunctionExpression} */ ({
+		return /** @type {FunctionExpression} */ ({
 			...node,
@@ -521,5 +507,5 @@ params,
 /**
- * @param {import('estree').FunctionDeclaration | import('estree').FunctionExpression | import('estree').ArrowFunctionExpression} node
- * @param {import('./types').ComponentContext} context
- * @returns {import('estree').Pattern[]}
+ * @param {FunctionDeclaration | FunctionExpression | ArrowFunctionExpression} node
+ * @param {ComponentContext} context
+ * @returns {Pattern[]}
  */
@@ -529,3 +515,3 @@ function get_hoistable_params(node, context) {
 
-	/** @type {import('estree').Identifier[]} */
+	/** @type {Identifier[]} */
 	const params = [];
@@ -535,3 +521,3 @@
 	 * We only want to push if it's not already present to avoid name clashing
-	 * @param {import('estree').Identifier} id
+	 * @param {Identifier} id
 	 */
@@ -551,5 +537,3 @@ function push_unique(id) {
 				push_unique(b.id(binding.node.name));
-				binding = /** @type {import('#compiler').Binding} */ (
-					scope.get(binding.node.name.slice(1))
-				);
+				binding = /** @type {Binding} */ (scope.get(binding.node.name.slice(1)));
 			}
@@ -595,5 +579,5 @@
 /**
- * @param {import('estree').FunctionDeclaration | import('estree').FunctionExpression | import('estree').ArrowFunctionExpression} node
- * @param {import('./types').ComponentContext} context
- * @returns {import('estree').Pattern[]}
+ * @param {FunctionDeclaration | FunctionExpression | ArrowFunctionExpression} node
+ * @param {ComponentContext} context
+ * @returns {Pattern[]}
  */
@@ -604,3 +588,3 @@ export function serialize_hoistable_params(node, context) {
 
-	/** @type {import('estree').Pattern[]} */
+	/** @type {Pattern[]} */
 	const params = [];
@@ -615,3 +599,3 @@
 		for (const param of node.params) {
-			params.push(/** @type {import('estree').Pattern} */ (context.visit(param)));
+			params.push(/** @type {Pattern} */ (context.visit(param)));
 		}
@@ -625,10 +609,10 @@ }
 /**
- * @param {import('#compiler').Binding} binding
- * @param {import('./types').ComponentClientTransformState} state
+ * @param {Binding} binding
+ * @param {ComponentClientTransformState} state
  * @param {string} name
- * @param {import('estree').Expression | null} [initial]
+ * @param {Expression | null} [initial]
  * @returns
  */
 export function get_prop_source(binding, state, name, initial) {
-	/** @type {import('estree').Expression[]} */
+	/** @type {Expression[]} */
 	const args = [b.id('$$props'), b.literal(name)];
@@ -655,3 +639,3 @@
 
-	/** @type {import('estree').Expression | undefined} */
+	/** @type {Expression | undefined} */
 	let arg;
@@ -688,4 +672,4 @@
  *
- * @param {import('#compiler').Binding} binding
- * @param {import('./types').ClientTransformState} state
+ * @param {Binding} binding
+ * @param {ClientTransformState} state
  * @returns
@@ -707,4 +691,4 @@ */
 /**
- * @param {import('estree').Expression} node
- * @param {import("../../scope.js").Scope | null} scope
+ * @param {Expression} node
+ * @param {Scope | null} scope
  */
@@ -746,4 +730,4 @@ export function should_proxy_or_freeze(node, scope) {
  * This ensures esrap can generate accurate source maps.
- * @param {import('estree').Identifier} target
- * @param {import('estree').Identifier} source
+ * @param {Identifier} target
+ * @param {Identifier} source
  */
@@ -758,5 +742,5 @@ export function with_loc(target, source) {
 /**
- * @param {import("estree").Pattern} node
- * @param {import("zimmerframe").Context<import("#compiler").SvelteNode, import("./types").ComponentClientTransformState>} context
- * @returns {{ id: import("estree").Pattern, declarations: null | import("estree").Statement[] }}
+ * @param {Pattern} node
+ * @param {import('zimmerframe').Context<SvelteNode, ComponentClientTransformState>} context
+ * @returns {{ id: Pattern, declarations: null | Statement[] }}
  */
@@ -768,3 +752,3 @@ export function create_derived_block_argument(node, context) {
 
-	const pattern = /** @type {import('estree').Pattern} */ (context.visit(node));
+	const pattern = /** @type {Pattern} */ (context.visit(node));
 	const identifiers = extract_identifiers(node);
@@ -793,4 +777,4 @@
  * Svelte legacy mode should use safe equals in most places, runes mode shouldn't
- * @param {import('./types.js').ComponentClientTransformState} state
- * @param {import('estree').Expression} arg
+ * @param {ComponentClientTransformState} state
+ * @param {Expression} arg
  */
@@ -797,0 +781,0 @@ export function create_derived(state, arg) {

src/compiler/phases/3-transform/client/visitors/global.js

@@ -0,1 +1,3 @@
+/** @import { Expression, Node, Pattern, Statement } from 'estree' */
+/** @import { Visitors } from '../types' */
 import is_reference from 'is-reference';
@@ -5,6 +7,6 @@ import { serialize_get_binding, serialize_set_binding } from '../utils.js';
 
-/** @type {import('../types').Visitors} */
+/** @type {Visitors} */
 export const global_visitors = {
 	Identifier(node, { path, state }) {
-		if (is_reference(node, /** @type {import('estree').Node} */ (path.at(-1)))) {
+		if (is_reference(node, /** @type {Node} */ (path.at(-1)))) {
 			if (node.name === '$$props') {
@@ -78,3 +80,3 @@ return b.id('$$sanitized_props');
 			) {
-				/** @type {import('estree').Expression[]} */
+				/** @type {Expression[]} */
 				const args = [];
@@ -110,3 +112,3 @@
 
-			/** @type {import('estree').Expression[]} */
+			/** @type {Expression[]} */
 			const args = [argument];
@@ -122,3 +124,3 @@ if (node.operator === '--') {
 				node.operator === '++' ? '+=' : '-=',
-				/** @type {import('estree').Pattern} */ (argument),
+				/** @type {Pattern} */ (argument),
 				b.literal(1)
@@ -132,3 +134,3 @@ );
 			);
-			const value = /** @type {import('estree').Expression} */ (visit(argument));
+			const value = /** @type {Expression} */ (visit(argument));
 			if (serialized_assignment === assignment) {
@@ -140,3 +142,3 @@ // No change to output -> nothing to transform -> we can keep the original update expression
 			} else {
-				/** @type {import('estree').Statement[]} */
+				/** @type {Statement[]} */
 				let statements;
@@ -143,0 +145,0 @@ if (node.prefix) {

src/compiler/phases/3-transform/client/visitors/javascript-runes.js

@@ -0,1 +1,4 @@
+/** @import { CallExpression, Expression, Identifier, Literal, MethodDefinition, PrivateIdentifier, PropertyDefinition, VariableDeclarator } from 'estree' */
+/** @import { Binding } from '#compiler' */
+/** @import { ComponentVisitors, StateField } from '../types.js' */
 import { get_rune } from '../../../scope.js';
@@ -15,9 +18,9 @@ import { is_hoistable_function, transform_inspect_rune } from '../../utils.js';
 
-/** @type {import('../types.js').ComponentVisitors} */
+/** @type {ComponentVisitors} */
 export const javascript_visitors_runes = {
 	ClassBody(node, { state, visit }) {
-		/** @type {Map<string, import('../types.js').StateField>} */
+		/** @type {Map<string, StateField>} */
 		const public_state = new Map();
 
-		/** @type {Map<string, import('../types.js').StateField>} */
+		/** @type {Map<string, StateField>} */
 		const private_state = new Map();
@@ -50,3 +53,3 @@
 					) {
-						/** @type {import('../types.js').StateField} */
+						/** @type {StateField} */
 						const field = {
@@ -86,3 +89,3 @@ kind:
 
-		/** @type {Array<import('estree').MethodDefinition | import('estree').PropertyDefinition>} */
+		/** @type {Array<MethodDefinition | PropertyDefinition>} */
 		const body = [];
@@ -110,3 +113,3 @@
 					if (definition.value.arguments.length > 0) {
-						const init = /** @type {import('estree').Expression} **/ (
+						const init = /** @type {Expression} **/ (
 							visit(definition.value.arguments[0], child_state)
@@ -189,3 +192,3 @@ );
 
-			body.push(/** @type {import('estree').MethodDefinition} **/ (visit(definition, child_state)));
+			body.push(/** @type {MethodDefinition} **/ (visit(definition, child_state)));
 		}
@@ -233,11 +236,7 @@
 					state.hoisted.push(
-						b.declaration(
-							'const',
-							declarator.id,
-							/** @type {import('estree').Expression} */ (hoistable_function)
-						)
+						b.declaration('const', declarator.id, /** @type {Expression} */ (hoistable_function))
 					);
 					continue;
 				}
-				declarations.push(/** @type {import('estree').VariableDeclarator} */ (visit(declarator)));
+				declarations.push(/** @type {VariableDeclarator} */ (visit(declarator)));
 				continue;
@@ -255,3 +254,3 @@ }
 				if (declarator.id.type === 'Identifier') {
-					/** @type {import('estree').Expression[]} */
+					/** @type {Expression[]} */
 					const args = [b.id('$$props'), b.array(seen.map((name) => b.literal(name)))];
@@ -270,5 +269,3 @@
 						if (property.type === 'Property') {
-							const key = /** @type {import('estree').Identifier | import('estree').Literal} */ (
-								property.key
-							);
+							const key = /** @type {Identifier | Literal} */ (property.key);
 							const name = key.type === 'Identifier' ? key.name : /** @type {string} */ (key.value);
@@ -281,6 +278,4 @@
 							assert.equal(id.type, 'Identifier');
-							const binding = /** @type {import('#compiler').Binding} */ (state.scope.get(id.name));
-							let initial =
-								binding.initial &&
-								/** @type {import('estree').Expression} */ (visit(binding.initial));
+							const binding = /** @type {Binding} */ (state.scope.get(id.name));
+							let initial = binding.initial && /** @type {Expression} */ (visit(binding.initial));
 							// We're adding proxy here on demand and not within the prop runtime function so that
@@ -301,3 +296,3 @@ // people not using proxied state anywhere in their code don't have to pay the additional bundle size cost
 							// RestElement
-							/** @type {import('estree').Expression[]} */
+							/** @type {Expression[]} */
 							const args = [b.id('$$props'), b.array(seen.map((name) => b.literal(name)))];
@@ -307,5 +302,3 @@
 								// include rest name, so we can provide informative error messages
-								args.push(
-									b.literal(/** @type {import('estree').Identifier} */ (property.argument).name)
-								);
+								args.push(b.literal(/** @type {Identifier} */ (property.argument).name));
 							}
@@ -322,15 +315,13 @@
 
-			const args = /** @type {import('estree').CallExpression} */ (init).arguments;
+			const args = /** @type {CallExpression} */ (init).arguments;
 			const value =
-				args.length === 0
-					? b.id('undefined')
-					: /** @type {import('estree').Expression} */ (visit(args[0]));
+				args.length === 0 ? b.id('undefined') : /** @type {Expression} */ (visit(args[0]));
 
 			if (rune === '$state' || rune === '$state.frozen') {
 				/**
-				 * @param {import('estree').Identifier} id
-				 * @param {import('estree').Expression} value
+				 * @param {Identifier} id
+				 * @param {Expression} value
 				 */
 				const create_state_declarator = (id, value) => {
-					const binding = /** @type {import('#compiler').Binding} */ (state.scope.get(id.name));
+					const binding = /** @type {Binding} */ (state.scope.get(id.name));
 					if (should_proxy_or_freeze(value, state.scope)) {
@@ -356,5 +347,3 @@ value = b.call(rune === '$state' ? '$.proxy' : '$.freeze', value);
 							const value = path.expression?.(b.id(tmp));
-							const binding = state.scope.get(
-								/** @type {import('estree').Identifier} */ (path.node).name
-							);
+							const binding = state.scope.get(/** @type {Identifier} */ (path.node).name);
 							return b.declarator(
@@ -442,3 +431,3 @@ path.node,
 					...node,
-					expression: b.call('$.user_effect', /** @type {import('estree').Expression} */ (func))
+					expression: b.call('$.user_effect', /** @type {Expression} */ (func))
 				};
@@ -458,3 +447,3 @@ }
 					...node,
-					expression: b.call('$.user_pre_effect', /** @type {import('estree').Expression} */ (func))
+					expression: b.call('$.user_pre_effect', /** @type {Expression} */ (func))
 				};
@@ -478,6 +467,3 @@ }
 		if (rune === '$state.snapshot') {
-			return b.call(
-				'$.snapshot',
-				/** @type {import('estree').Expression} */ (context.visit(node.arguments[0]))
-			);
+			return b.call('$.snapshot', /** @type {Expression} */ (context.visit(node.arguments[0])));
 		}
@@ -488,4 +474,4 @@
 				'$.is',
-				/** @type {import('estree').Expression} */ (context.visit(node.arguments[0])),
-				/** @type {import('estree').Expression} */ (context.visit(node.arguments[1]))
+				/** @type {Expression} */ (context.visit(node.arguments[0])),
+				/** @type {Expression} */ (context.visit(node.arguments[1]))
 			);
@@ -495,5 +481,3 @@ }
 		if (rune === '$effect.root') {
-			const args = /** @type {import('estree').Expression[]} */ (
-				node.arguments.map((arg) => context.visit(arg))
-			);
+			const args = /** @type {Expression[]} */ (node.arguments.map((arg) => context.visit(arg)));
 			return b.call('$.effect_root', ...args);
@@ -515,4 +499,4 @@ }
 					'$.strict_equals',
-					/** @type {import('estree').Expression} */ (visit(node.left)),
-					/** @type {import('estree').Expression} */ (visit(node.right)),
+					/** @type {Expression} */ (visit(node.left)),
+					/** @type {Expression} */ (visit(node.right)),
 					operator === '!==' && b.literal(false)
@@ -525,4 +509,4 @@ );
 					'$.equals',
-					/** @type {import('estree').Expression} */ (visit(node.left)),
-					/** @type {import('estree').Expression} */ (visit(node.right)),
+					/** @type {Expression} */ (visit(node.left)),
+					/** @type {Expression} */ (visit(node.right)),
 					operator === '!=' && b.literal(false)
@@ -538,3 +522,3 @@ );
 /**
- * @param {import('estree').Identifier | import('estree').PrivateIdentifier | import('estree').Literal} node
+ * @param {Identifier | PrivateIdentifier | Literal} node
  */
@@ -541,0 +525,0 @@ function get_name(node) {

src/compiler/phases/3-transform/css/index.js

@@ -95,3 +95,3 @@ /** @import { Visitors } from 'zimmerframe' */
 	},
-	Declaration(node, { state, next }) {
+	Declaration(node, { state }) {
 		const property = node.property && remove_css_prefix(node.property.toLowerCase());
@@ -144,3 +144,3 @@ if (property === 'animation' || property === 'animation-name') {
 
-			if (selector.children.length === 1) {
+			if (selector.children.length === 1 && selector.children[0].selectors.length === 1) {
 				// `:global {...}`
@@ -221,7 +221,19 @@ state.code.prependRight(node.start, '/* ');
 
-		/** @param {Css.SimpleSelector} selector */
-		function remove_global_pseudo_class(selector) {
-			context.state.code
-				.remove(selector.start, selector.start + ':global('.length)
-				.remove(selector.end - 1, selector.end);
+		/**
+		 * @param {Css.PseudoClassSelector} selector
+		 * @param {Css.Combinator | null} combinator
+		 */
+		function remove_global_pseudo_class(selector, combinator) {
+			if (selector.args === null) {
+				let start = selector.start;
+				if (combinator?.name === ' ') {
+					// div :global.x becomes div.x
+					while (/\s/.test(context.state.code.original[start - 1])) start--;
+				}
+				context.state.code.remove(start, selector.start + ':global'.length);
+			} else {
+				context.state.code
+					.remove(selector.start, selector.start + ':global('.length)
+					.remove(selector.end - 1, selector.end);
+			}
 		}
@@ -231,3 +243,13 @@
 			if (relative_selector.metadata.is_global) {
-				remove_global_pseudo_class(relative_selector.selectors[0]);
+				const global = /** @type {Css.PseudoClassSelector} */ (relative_selector.selectors[0]);
+				remove_global_pseudo_class(global, relative_selector.combinator);
+
+				if (
+					node.metadata.rule?.metadata.parent_rule &&
+					global.args === null &&
+					relative_selector.combinator === null
+				) {
+					// div { :global.x { ... } } becomes div { &.x { ... } }
+					context.state.code.prependRight(global.start, '&');
+				}
 				continue;
@@ -248,6 +270,6 @@ }
 
-				// for any :global() at the middle of compound selector
+				// for any :global() or :global at the middle of compound selector
 				for (const selector of relative_selector.selectors) {
 					if (selector.type === 'PseudoClassSelector' && selector.name === 'global') {
-						remove_global_pseudo_class(selector);
+						remove_global_pseudo_class(selector, null);
 					}
@@ -254,0 +276,0 @@ }

src/compiler/phases/scope.js

@@ -0,1 +1,4 @@
+/** @import { ClassDeclaration, Expression, FunctionDeclaration, Identifier, ImportDeclaration, MemberExpression, Node, Pattern, VariableDeclarator } from 'estree' */
+/** @import { Context, Visitor, Visitors } from 'zimmerframe' */
+/** @import { AnimateDirective, Binding, DeclarationKind, EachBlock, ElementLike, LetDirective, SvelteNode, TransitionDirective, UseDirective } from '#compiler' */
 import is_reference from 'is-reference';
@@ -33,3 +36,3 @@ import { walk } from 'zimmerframe';
 	 * identifiers that reference it
-	 * @type {Map<string, import('#compiler').Binding>}
+	 * @type {Map<string, Binding>}
 	 */
@@ -40,3 +43,3 @@ declarations = new Map();
 	 * A map of declarators to the bindings they declare
-	 * @type {Map<import('estree').VariableDeclarator | import('#compiler').LetDirective, import('#compiler').Binding[]>}
+	 * @type {Map<VariableDeclarator | LetDirective, Binding[]>}
 	 */
@@ -48,3 +51,3 @@ declarators = new Map();
 	 * — useful for generating unique names
-	 * @type {Map<string, { node: import('estree').Identifier; path: import('#compiler').SvelteNode[] }[]>}
+	 * @type {Map<string, { node: Identifier; path: SvelteNode[] }[]>}
 	 */
@@ -73,7 +76,7 @@ references = new Map();
 	/**
-	 * @param {import('estree').Identifier} node
-	 * @param {import('#compiler').Binding['kind']} kind
-	 * @param {import('#compiler').DeclarationKind} declaration_kind
-	 * @param {null | import('estree').Expression | import('estree').FunctionDeclaration | import('estree').ClassDeclaration | import('estree').ImportDeclaration | import('../types/template.js').EachBlock} initial
-	 * @returns {import('#compiler').Binding}
+	 * @param {Identifier} node
+	 * @param {Binding['kind']} kind
+	 * @param {DeclarationKind} declaration_kind
+	 * @param {null | Expression | FunctionDeclaration | ClassDeclaration | ImportDeclaration | EachBlock} initial
+	 * @returns {Binding}
 	 */
@@ -110,3 +113,3 @@ declare(node, kind, declaration_kind, initial = null) {
 
-		/** @type {import('#compiler').Binding} */
+		/** @type {Binding} */
 		const binding = {
@@ -165,3 +168,3 @@ node,
 	 * @param {string} name
-	 * @returns {import('#compiler').Binding | null}
+	 * @returns {Binding | null}
 	 */
@@ -173,4 +176,4 @@ get(name) {
 	/**
-	 * @param {import('estree').VariableDeclarator | import('#compiler').LetDirective} node
-	 * @returns {import('#compiler').Binding[]}
+	 * @param {VariableDeclarator | LetDirective} node
+	 * @returns {Binding[]}
 	 */
@@ -194,4 +197,4 @@ get_bindings(node) {
 	/**
-	 * @param {import('estree').Identifier} node
-	 * @param {import('#compiler').SvelteNode[]} path
+	 * @param {Identifier} node
+	 * @param {SvelteNode[]} path
 	 */
@@ -242,3 +245,3 @@ reference(node, path) {
 /**
- * @param {import('#compiler').SvelteNode} ast
+ * @param {SvelteNode} ast
  * @param {ScopeRoot} root
@@ -253,3 +256,3 @@ * @param {boolean} allow_reactive_declarations
 	 * A map of node->associated scope. A node appearing in this map does not necessarily mean that it created a scope
-	 * @type {Map<import('#compiler').SvelteNode, Scope>}
+	 * @type {Map<SvelteNode, Scope>}
 	 */
@@ -263,6 +266,6 @@ const scopes = new Map();
 
-	/** @type {[Scope, { node: import('estree').Identifier; path: import('#compiler').SvelteNode[] }][]} */
+	/** @type {[Scope, { node: Identifier; path: SvelteNode[] }][]} */
 	const references = [];
 
-	/** @type {[Scope, import('estree').Pattern | import('estree').MemberExpression][]} */
+	/** @type {[Scope, Pattern | MemberExpression][]} */
 	const updates = [];
@@ -272,3 +275,3 @@
 	 * An array of reactive declarations, i.e. the `a` in `$: a = b * 2`
-	 * @type {import('estree').Identifier[]}
+	 * @type {Identifier[]}
 	 */
@@ -279,3 +282,3 @@ const possible_implicit_declarations = [];
 	 * @param {Scope} scope
-	 * @param {import('estree').Pattern[]} params
+	 * @param {Pattern[]} params
 	 */
@@ -291,3 +294,3 @@ function add_params(scope, params) {
 	/**
-	 * @type {import('zimmerframe').Visitor<import('estree').Node, State, import('#compiler').SvelteNode>}
+	 * @type {Visitor<Node, State, SvelteNode>}
 	 */
@@ -302,3 +305,3 @@ const create_block_scope = (node, { state, next }) => {
 	/**
-	 * @type {import('zimmerframe').Visitor<import('#compiler').ElementLike, State, import('#compiler').SvelteNode>}
+	 * @type {Visitor<ElementLike, State, SvelteNode>}
 	 */
@@ -312,3 +315,3 @@ const SvelteFragment = (node, { state, next }) => {
 	/**
-	 * @param {import('#compiler').ElementLike} node
+	 * @param {ElementLike} node
 	 * @param {Scope} parent
@@ -322,3 +325,3 @@ */
 			if (attribute.type === 'LetDirective') {
-				/** @type {import('#compiler').Binding[]} */
+				/** @type {Binding[]} */
 				const bindings = [];
@@ -337,3 +340,3 @@ scope.declarators.set(attribute, bindings);
 				} else {
-					/** @type {import('estree').Identifier} */
+					/** @type {Identifier} */
 					const id = {
@@ -357,3 +360,3 @@ name: attribute.name,
 	/**
-	 * @type {import('zimmerframe').Visitor<import('#compiler').AnimateDirective | import('#compiler').TransitionDirective | import('#compiler').UseDirective, State, import('#compiler').SvelteNode>}
+	 * @type {Visitor<AnimateDirective | TransitionDirective | UseDirective, State, SvelteNode>}
 	 */
@@ -372,3 +375,3 @@ const SvelteDirective = (node, { state, path, visit }) => {
 			const parent = path.at(-1);
-			if (parent && is_reference(node, /** @type {import('estree').Node} */ (parent))) {
+			if (parent && is_reference(node, /** @type {Node} */ (parent))) {
 				references.push([state.scope, { node, path: path.slice() }]);
@@ -455,8 +458,3 @@ }
 		UpdateExpression(node, { state, next }) {
-			updates.push([
-				state.scope,
-				/** @type {import('estree').Identifier | import('estree').MemberExpression} */ (
-					node.argument
-				)
-			]);
+			updates.push([state.scope, /** @type {Identifier | MemberExpression} */ (node.argument)]);
 			next();
@@ -513,3 +511,3 @@ },
 			for (const declarator of node.declarations) {
-				/** @type {import('#compiler').Binding[]} */
+				/** @type {Binding[]} */
 				const bindings = [];
@@ -550,3 +548,3 @@
 			// Array part is still from the scope above
-			/** @type {Set<import('estree').Identifier>} */
+			/** @type {Set<Identifier>} */
 			const references_within = new Set();
@@ -626,3 +624,3 @@ const idx = references.length;
 				references: [...references_within]
-					.map((id) => /** @type {import('#compiler').Binding} */ (state.scope.get(id.name)))
+					.map((id) => /** @type {Binding} */ (state.scope.get(id.name)))
 					.filter(Boolean),
@@ -700,5 +698,3 @@ is_controlled: false
 				context.state.scope,
-				/** @type {import('estree').Identifier | import('estree').MemberExpression} */ (
-					node.expression
-				)
+				/** @type {Identifier | MemberExpression} */ (node.expression)
 			]);
@@ -746,3 +742,3 @@ context.next();
 
-			const binding = scope.get(/** @type {import('estree').Identifier} */ (object).name);
+			const binding = scope.get(/** @type {Identifier} */ (object).name);
 			if (binding) binding.mutated = true;
@@ -771,4 +767,4 @@ } else {
  * @template {{ scope: Scope }} State
- * @param {Map<import('#compiler').SvelteNode, Scope>} scopes
- * @returns {import('zimmerframe').Visitors<import('#compiler').SvelteNode, State>}
+ * @param {Map<SvelteNode, Scope>} scopes
+ * @returns {Visitors<SvelteNode, State>}
  */
@@ -779,4 +775,4 @@ export function set_scope(scopes) {
 		 *
-		 * @param {import('#compiler').SvelteNode} node
-		 * @param {import('zimmerframe').Context<import('#compiler').SvelteNode, State>} context
+		 * @param {SvelteNode} node
+		 * @param {Context<SvelteNode, State>} context
 		 */
@@ -792,3 +788,3 @@ _(node, { next, state }) {
  * Returns the name of the rune if the given expression is a `CallExpression` using a rune.
- * @param {import('estree').Node | import('../types/template.js').EachBlock | null | undefined} node
+ * @param {Node | EachBlock | null | undefined} node
  * @param {Scope} scope
@@ -795,0 +791,0 @@ * @returns {Runes[number] | null}

src/compiler/types/css.d.ts

@@ -36,2 +36,5 @@ import type { Comment } from '#compiler';
 			has_local_selectors: boolean;
+			/**
+			 * `true` if the rule contains a `:global` selector, and therefore everything inside should be unscoped
+			 */
 			is_global_block: boolean;
@@ -41,9 +44,21 @@ };
 
+	/**
+	 * A list of selectors, e.g. `a, b, c {}`
+	 */
 	export interface SelectorList extends BaseNode {
 		type: 'SelectorList';
+		/**
+		 * The `a`, `b` and `c` in `a, b, c {}`
+		 */
 		children: ComplexSelector[];
 	}
 
+	/**
+	 * A complex selector, e.g. `a b c {}`
+	 */
 	export interface ComplexSelector extends BaseNode {
 		type: 'ComplexSelector';
+		/**
+		 * The `a`, `b` and `c` in `a b c {}`
+		 */
 		children: RelativeSelector[];
@@ -56,10 +71,22 @@ metadata: {
 
+	/**
+	 * A relative selector, e.g the `a` and `> b` in `a > b {}`
+	 */
 	export interface RelativeSelector extends BaseNode {
 		type: 'RelativeSelector';
+		/**
+		 * In `a > b`, `> b` forms one relative selector, and `>` is the combinator. `null` for the first selector.
+		 */
 		combinator: null | Combinator;
+		/**
+		 * The `b:is(...)` in `> b:is(...)`
+		 */
 		selectors: SimpleSelector[];
 		metadata: {
-			/** :global(..) */
+			/**
+			 * `true` if the whole selector is unscoped, e.g. `:global(...)` or `:global` or `:global.x`.
+			 * Selectors like `:global(...).x` are not considered global, because they still need scoping.
+			 */
 			is_global: boolean;
-			/** :root, :host, ::view-transition */
+			/** `:root`, `:host`, `::view-transition`, or selectors after a `:global` */
 			is_global_like: boolean;
@@ -66,0 +93,0 @@ scoped: boolean;

src/compiler/types/template.d.ts

@@ -214,2 +214,6 @@ import type { Binding, Css } from '#compiler';
 	modifiers: string[]; // TODO specify
+	metadata: {
+		contains_call_expression: boolean;
+		dynamic: boolean;
+	};
 }
@@ -216,0 +220,0 @@

src/index-client.js

@@ -0,1 +1,4 @@
+/** @import { ComponentContext, ComponentContextLegacy } from '#client' */
+/** @import { EventDispatcher } from './index.js' */
+/** @import { NotFunction } from './internal/types.js' */
 import { current_component_context, flush_sync, untrack } from './internal/client/runtime.js';
@@ -18,3 +21,3 @@ import { is_array } from './internal/shared/utils.js';
  * @template T
- * @param {() => import('./internal/types').NotFunction<T> | Promise<import('./internal/types').NotFunction<T>> | (() => any)} fn
+ * @param {() => NotFunction<T> | Promise<NotFunction<T>> | (() => any)} fn
  * @returns {void}
@@ -88,3 +91,3 @@ */
  * @template {Record<string, any>} [EventMap = any]
- * @returns {import('./index.js').EventDispatcher<EventMap>}
+ * @returns {EventDispatcher<EventMap>}
  */
@@ -169,6 +172,6 @@ export function createEventDispatcher() {
  * Legacy-mode: Init callbacks object for onMount/beforeUpdate/afterUpdate
- * @param {import('#client').ComponentContext} context
+ * @param {ComponentContext} context
  */
 function init_update_callbacks(context) {
-	var l = /** @type {import('#client').ComponentContextLegacy} */ (context).l;
+	var l = /** @type {ComponentContextLegacy} */ (context).l;
 	return (l.u ??= { a: [], b: [], m: [] });
@@ -175,0 +178,0 @@ }

src/index-server.js

@@ -0,1 +1,2 @@
+/** @import { Component } from '#server' */
 import { current_component } from './internal/server/context.js';
@@ -7,3 +8,3 @@ import { noop } from './internal/shared/utils.js';
 export function onDestroy(fn) {
-	var context = /** @type {import('#server').Component} */ (current_component);
+	var context = /** @type {Component} */ (current_component);
 	(context.d ??= []).push(fn);
@@ -10,0 +11,0 @@ }

src/internal/client/dev/equality.js

@@ -23,3 +23,6 @@ import * as w from '../warnings.js';
 			if (test !== -1) {
-				w.state_proxy_equality_mismatch('array.indexOf(...)');
+				w.state_proxy_equality_mismatch(
+					'array.indexOf(...)',
+					': `array.findIndex(entry => $state.is(entry, item))`'
+				);
 			}
@@ -46,3 +49,6 @@ }
 			if (test !== -1) {
-				w.state_proxy_equality_mismatch('array.lastIndexOf(...)');
+				w.state_proxy_equality_mismatch(
+					'array.lastIndexOf(...)',
+					': `array.findLastIndex(entry => $state.is(entry, item))`'
+				);
 			}
@@ -61,3 +67,6 @@ }
 			if (test) {
-				w.state_proxy_equality_mismatch('array.includes(...)');
+				w.state_proxy_equality_mismatch(
+					'array.includes(...)',
+					': `array.some(entry => $state.is(entry, item))`'
+				);
 			}
@@ -85,3 +94,3 @@ }
 	if ((a === b) !== (get_proxied_value(a) === get_proxied_value(b))) {
-		w.state_proxy_equality_mismatch(equal ? '===' : '!==');
+		w.state_proxy_equality_mismatch(equal ? '===' : '!==', '');
 	}
@@ -100,3 +109,3 @@
 	if ((a == b) !== (get_proxied_value(a) == get_proxied_value(b))) {
-		w.state_proxy_equality_mismatch(equal ? '==' : '!=');
+		w.state_proxy_equality_mismatch(equal ? '==' : '!=', '');
 	}
@@ -103,0 +112,0 @@

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

@@ -1,2 +0,2 @@
-/** @import { TemplateNode } from '#client' */
+/** @import { EachItem, EachState, Effect, EffectNodes, MaybeSource, Source, TemplateNode, TransitionManager, Value } from '#client' */
 import {
@@ -39,7 +39,7 @@ EACH_INDEX_REACTIVE,
  * so that `animate:` directives have something to attach themselves to
- * @type {import('#client').EachItem | null}
+ * @type {EachItem | null}
  */
 export let current_each_item = null;
 
-/** @param {import('#client').EachItem | null} item */
+/** @param {EachItem | null} item */
 export function set_current_each_item(item) {
@@ -60,9 +60,9 @@ current_each_item = item;
  * subsequent destruction. Used in each blocks
- * @param {import('#client').EachState} state
- * @param {import('#client').EachItem[]} items
+ * @param {EachState} state
+ * @param {EachItem[]} items
  * @param {null | Node} controlled_anchor
- * @param {Map<any, import("#client").EachItem>} items_map
+ * @param {Map<any, EachItem>} items_map
  */
 function pause_effects(state, items, controlled_anchor, items_map) {
-	/** @type {import('#client').TransitionManager[]} */
+	/** @type {TransitionManager[]} */
 	var transitions = [];
@@ -106,3 +106,3 @@ var length = items.length;
  * @param {(value: V, index: number) => any} get_key
- * @param {(anchor: Node, item: import('#client').MaybeSource<V>, index: import('#client').MaybeSource<number>) => void} render_fn
+ * @param {(anchor: Node, item: MaybeSource<V>, index: MaybeSource<number>) => void} render_fn
  * @param {null | ((anchor: Node) => void)} fallback_fn
@@ -114,3 +114,3 @@ * @returns {void}
 
-	/** @type {import('#client').EachState} */
+	/** @type {EachState} */
 	var state = { flags, items: new Map(), first: null };
@@ -132,3 +132,3 @@
 
-	/** @type {import('#client').Effect | null} */
+	/** @type {Effect | null} */
 	var fallback = null;
@@ -182,6 +182,6 @@
 		if (hydrating) {
-			/** @type {import('#client').EachItem | null} */
+			/** @type {EachItem | null} */
 			var prev = null;
 
-			/** @type {import('#client').EachItem} */
+			/** @type {EachItem} */
 			var item;
@@ -248,5 +248,5 @@
  * @param {Array<V>} array
- * @param {import('#client').EachState} state
+ * @param {EachState} state
  * @param {Element | Comment | Text} anchor
- * @param {(anchor: Node, item: import('#client').MaybeSource<V>, index: number | import('#client').Source<number>) => void} render_fn
+ * @param {(anchor: Node, item: MaybeSource<V>, index: number | Source<number>) => void} render_fn
  * @param {number} flags
@@ -265,15 +265,15 @@ * @param {(value: V, index: number) => any} get_key
 
-	/** @type {Set<import('#client').EachItem>} */
+	/** @type {Set<EachItem>} */
 	var seen = new Set();
 
-	/** @type {import('#client').EachItem | null} */
+	/** @type {EachItem | null} */
 	var prev = null;
 
-	/** @type {Set<import('#client').EachItem>} */
+	/** @type {Set<EachItem>} */
 	var to_animate = new Set();
 
-	/** @type {import('#client').EachItem[]} */
+	/** @type {EachItem[]} */
 	var matched = [];
 
-	/** @type {import('#client').EachItem[]} */
+	/** @type {EachItem[]} */
 	var stashed = [];
@@ -287,3 +287,3 @@
 
-	/** @type {import('#client').EachItem | undefined} */
+	/** @type {EachItem | undefined} */
 	var item;
@@ -313,5 +313,3 @@
 		if (item === undefined) {
-			var child_anchor = current
-				? /** @type {import('#client').EffectNodes} */ (current.e.nodes).start
-				: anchor;
+			var child_anchor = current ? /** @type {EffectNodes} */ (current.e.nodes).start : anchor;
 
@@ -449,8 +447,8 @@ prev = create_item(
 
-	/** @type {import('#client').Effect} */ (current_effect).first = state.first && state.first.e;
-	/** @type {import('#client').Effect} */ (current_effect).last = prev && prev.e;
+	/** @type {Effect} */ (current_effect).first = state.first && state.first.e;
+	/** @type {Effect} */ (current_effect).last = prev && prev.e;
 }
 
 /**
- * @param {import('#client').EachItem} item
+ * @param {EachItem} item
  * @param {any} value
@@ -467,3 +465,3 @@ * @param {number} index
 	if ((type & EACH_INDEX_REACTIVE) !== 0) {
-		set(/** @type {import('#client').Value<number>} */ (item.i), index);
+		set(/** @type {Value<number>} */ (item.i), index);
 	} else {
@@ -477,11 +475,11 @@ item.i = index;
  * @param {Node} anchor
- * @param {import('#client').EachState} state
- * @param {import('#client').EachItem | null} prev
- * @param {import('#client').EachItem | null} next
+ * @param {EachState} state
+ * @param {EachItem | null} prev
+ * @param {EachItem | null} next
  * @param {V} value
  * @param {unknown} key
  * @param {number} index
- * @param {(anchor: Node, item: V | import('#client').Source<V>, index: number | import('#client').Value<number>) => void} render_fn
+ * @param {(anchor: Node, item: V | Source<V>, index: number | Value<number>) => void} render_fn
  * @param {number} flags
- * @returns {import('#client').EachItem}
+ * @returns {EachItem}
  */
@@ -498,3 +496,3 @@ function create_item(anchor, state, prev, next, value, key, index, render_fn, flags) {
 
-		/** @type {import('#client').EachItem} */
+		/** @type {EachItem} */
 		var item = {
@@ -536,16 +534,14 @@ i,
 /**
- * @param {import('#client').EachItem} item
- * @param {import('#client').EachItem | null} next
+ * @param {EachItem} item
+ * @param {EachItem | null} next
  * @param {Text | Element | Comment} anchor
  */
 function move(item, next, anchor) {
-	var end = item.next
-		? /** @type {import('#client').EffectNodes} */ (item.next.e.nodes).start
-		: anchor;
+	var end = item.next ? /** @type {EffectNodes} */ (item.next.e.nodes).start : anchor;
 
-	var dest = next ? /** @type {import('#client').EffectNodes} */ (next.e.nodes).start : anchor;
-	var node = /** @type {import('#client').EffectNodes} */ (item.e.nodes).start;
+	var dest = next ? /** @type {EffectNodes} */ (next.e.nodes).start : anchor;
+	var node = /** @type {EffectNodes} */ (item.e.nodes).start;
 
 	while (node !== end) {
-		var next_node = /** @type {import('#client').TemplateNode} */ (node.nextSibling);
+		var next_node = /** @type {TemplateNode} */ (node.nextSibling);
 		dest.before(node);
@@ -557,5 +553,5 @@ node = next_node;
 /**
- * @param {import('#client').EachState} state
- * @param {import('#client').EachItem | null} prev
- * @param {import('#client').EachItem | null} next
+ * @param {EachState} state
+ * @param {EachItem | null} prev
+ * @param {EachItem | null} next
  */
@@ -562,0 +558,0 @@ function link(state, prev, next) {

src/internal/client/dom/blocks/if.js

@@ -1,2 +0,2 @@
-/** @import { TemplateNode } from '#client' */
+/** @import { Effect, TemplateNode } from '#client' */
 import { EFFECT_TRANSPARENT } from '../../constants.js';
@@ -17,4 +17,4 @@ import {
  * @param {() => boolean} get_condition
- * @param {(anchor: Node) => import('#client').Dom} consequent_fn
- * @param {null | ((anchor: Node) => import('#client').Dom)} [alternate_fn]
+ * @param {(anchor: Node) => void} consequent_fn
+ * @param {null | ((anchor: Node) => void)} [alternate_fn]
  * @param {boolean} [elseif] True if this is an `{:else if ...}` block rather than an `{#if ...}`, as that affects which transitions are considered 'local'
@@ -30,6 +30,6 @@ * @returns {void}
 
-	/** @type {import('#client').Effect | null} */
+	/** @type {Effect | null} */
 	var consequent_effect = null;
 
-	/** @type {import('#client').Effect | null} */
+	/** @type {Effect | null} */
 	var alternate_effect = null;
@@ -36,0 +36,0 @@

src/internal/client/dom/elements/transitions.js

@@ -0,1 +1,2 @@
+/** @import { AnimateFn, Animation, AnimationConfig, EachItem, Effect, Task, TransitionFn, TransitionManager } from '#client' */
 import { noop, is_function } from '../../../shared/utils.js';
@@ -63,7 +64,7 @@ import { effect } from '../../reactivity/effects.js';
  * @param {Element} element
- * @param {() => import('#client').AnimateFn<P | undefined>} get_fn
+ * @param {() => AnimateFn<P | undefined>} get_fn
  * @param {(() => P) | null} get_params
  */
 export function animation(element, get_fn, get_params) {
-	var item = /** @type {import('#client').EachItem} */ (current_each_item);
+	var item = /** @type {EachItem} */ (current_each_item);
 
@@ -76,3 +77,3 @@ /** @type {DOMRect} */
 
-	/** @type {import('#client').Animation | undefined} */
+	/** @type {Animation | undefined} */
 	var animation;
@@ -172,3 +173,3 @@
  * @param {HTMLElement} element
- * @param {() => import('#client').TransitionFn<P | undefined>} get_fn
+ * @param {() => TransitionFn<P | undefined>} get_fn
  * @param {(() => P) | null} get_params
@@ -186,3 +187,3 @@ * @returns {void}
 
-	/** @type {import('#client').AnimationConfig | ((opts: { direction: 'in' | 'out' }) => import('#client').AnimationConfig) | undefined} */
+	/** @type {AnimationConfig | ((opts: { direction: 'in' | 'out' }) => AnimationConfig) | undefined} */
 	var current_options;
@@ -192,6 +193,6 @@
 
-	/** @type {import('#client').Animation | undefined} */
+	/** @type {Animation | undefined} */
 	var intro;
 
-	/** @type {import('#client').Animation | undefined} */
+	/** @type {Animation | undefined} */
 	var outro;
@@ -209,3 +210,3 @@
 
-	/** @type {import('#client').TransitionManager} */
+	/** @type {TransitionManager} */
 	var transition = {
@@ -280,3 +281,3 @@ is_global,
 
-	var e = /** @type {import('#client').Effect} */ (current_effect);
+	var e = /** @type {Effect} */ (current_effect);
 
@@ -292,3 +293,3 @@ (e.transitions ??= []).push(transition);
 		if (!run) {
-			var block = /** @type {import('#client').Effect | null} */ (e.parent);
+			var block = /** @type {Effect | null} */ (e.parent);
 
@@ -316,8 +317,8 @@ // skip over transparent blocks (e.g. snippets, else-if blocks)
  * @param {Element} element
- * @param {import('#client').AnimationConfig | ((opts: { direction: 'in' | 'out' }) => import('#client').AnimationConfig)} options
- * @param {import('#client').Animation | undefined} counterpart The corresponding intro/outro to this outro/intro
+ * @param {AnimationConfig | ((opts: { direction: 'in' | 'out' }) => AnimationConfig)} options
+ * @param {Animation | undefined} counterpart The corresponding intro/outro to this outro/intro
  * @param {number} t2 The target `t` value — `1` for intro, `0` for outro
  * @param {(() => void) | undefined} on_finish Called after successfully completing the animation
  * @param {(() => void) | undefined} on_abort Called if the animation is aborted
- * @returns {import('#client').Animation}
+ * @returns {Animation}
  */
@@ -331,3 +332,3 @@ function animate(element, options, counterpart, t2, on_finish, on_abort) {
 		// once DOM has been updated...
-		/** @type {import('#client').Animation} */
+		/** @type {Animation} */
 		var a;
@@ -371,6 +372,6 @@
 
-	/** @type {Animation} */
+	/** @type {globalThis.Animation} */
 	var animation;
 
-	/** @type {import('#client').Task} */
+	/** @type {Task} */
 	var task;
@@ -377,0 +378,0 @@

src/internal/client/dom/hydration.js

 /** @import { TemplateNode } from '#client' */
 
-import { HYDRATION_END, HYDRATION_START, HYDRATION_START_ELSE } from '../../../constants.js';
+import {
+	HYDRATION_END,
+	HYDRATION_ERROR,
+	HYDRATION_START,
+	HYDRATION_START_ELSE
+} from '../../../constants.js';
+import * as w from '../warnings.js';
 
@@ -31,2 +37,6 @@ /**
 export function hydrate_next() {
+	if (hydrate_node === null) {
+		w.hydration_mismatch();
+		throw HYDRATION_ERROR;
+	}
 	return (hydrate_node = /** @type {TemplateNode} */ (hydrate_node.nextSibling));
@@ -33,0 +43,0 @@ }

src/internal/client/index.js

@@ -104,2 +104,3 @@ export { FILENAME, HMR } from '../../constants.js';
 	template_effect,
+	effect,
 	user_effect,
@@ -106,0 +107,0 @@ user_pre_effect

src/internal/client/proxy.js

@@ -0,1 +1,2 @@
+/** @import { ProxyMetadata, ProxyStateObject, Source } from '#client' */
 import { DEV } from 'esm-env';
@@ -21,5 +22,5 @@ import { get, current_component_context, untrack, current_effect } from './runtime.js';
  * @param {T} value
- * @param {import('#client').ProxyMetadata | null} [parent]
- * @param {import('#client').Source<T>} [prev] dev mode only
- * @returns {import('#client').ProxyStateObject<T> | T}
+ * @param {ProxyMetadata | null} [parent]
+ * @param {Source<T>} [prev] dev mode only
+ * @returns {ProxyStateObject<T> | T}
  */
@@ -35,3 +36,3 @@ export function proxy(value, parent = null, prev) {
 		if (STATE_SYMBOL in value) {
-			const metadata = /** @type {import('#client').ProxyMetadata<T>} */ (value[STATE_SYMBOL]);
+			const metadata = /** @type {ProxyMetadata<T>} */ (value[STATE_SYMBOL]);
 
@@ -58,3 +59,3 @@ // ...unless the proxy belonged to a different object, because
 			define_property(value, STATE_SYMBOL, {
-				value: /** @type {import('#client').ProxyMetadata} */ ({
+				value: /** @type {ProxyMetadata} */ ({
 					s: new Map(),
@@ -100,3 +101,3 @@ v: source(0),
 /**
- * @param {import('#client').Source<number>} signal
+ * @param {Source<number>} signal
  * @param {1 | -1} [d]
@@ -108,7 +109,7 @@ */
 
-/** @type {ProxyHandler<import('#client').ProxyStateObject<any>>} */
+/** @type {ProxyHandler<ProxyStateObject<any>>} */
 const state_proxy_handler = {
 	defineProperty(target, prop, descriptor) {
 		if (descriptor.value) {
-			/** @type {import('#client').ProxyMetadata} */
+			/** @type {ProxyMetadata} */
 			const metadata = target[STATE_SYMBOL];
@@ -124,3 +125,3 @@
 	deleteProperty(target, prop) {
-		/** @type {import('#client').ProxyMetadata} */
+		/** @type {ProxyMetadata} */
 		const metadata = target[STATE_SYMBOL];
@@ -158,3 +159,3 @@ const s = metadata.s.get(prop);
 
-		/** @type {import('#client').ProxyMetadata} */
+		/** @type {ProxyMetadata} */
 		const metadata = target[STATE_SYMBOL];
@@ -180,3 +181,3 @@ let s = metadata.s.get(prop);
 		if (descriptor && 'value' in descriptor) {
-			/** @type {import('#client').ProxyMetadata} */
+			/** @type {ProxyMetadata} */
 			const metadata = target[STATE_SYMBOL];
@@ -197,3 +198,3 @@ const s = metadata.s.get(prop);
 		}
-		/** @type {import('#client').ProxyMetadata} */
+		/** @type {ProxyMetadata} */
 		const metadata = target[STATE_SYMBOL];
@@ -220,3 +221,3 @@ const has = Reflect.has(target, prop);
 	set(target, prop, value, receiver) {
-		/** @type {import('#client').ProxyMetadata} */
+		/** @type {ProxyMetadata} */
 		const metadata = target[STATE_SYMBOL];
@@ -240,3 +241,3 @@ let s = metadata.s.get(prop);
 		if (DEV) {
-			/** @type {import('#client').ProxyMetadata | undefined} */
+			/** @type {ProxyMetadata | undefined} */
 			const prop_metadata = value?.[STATE_SYMBOL];
@@ -285,3 +286,3 @@ if (prop_metadata && prop_metadata?.parent !== metadata) {
 	ownKeys(target) {
-		/** @type {import('#client').ProxyMetadata} */
+		/** @type {ProxyMetadata} */
 		const metadata = target[STATE_SYMBOL];
@@ -288,0 +289,0 @@

src/internal/client/reactivity/deriveds.js

@@ -0,1 +1,2 @@
+/** @import { Derived } from '#client' */
 import { CLEAN, DERIVED, DESTROYED, DIRTY, MAYBE_DIRTY, UNOWNED } from '../constants.js';
@@ -19,3 +20,3 @@ import {
  * @param {() => V} fn
- * @returns {import('#client').Derived<V>}
+ * @returns {Derived<V>}
  */
@@ -27,3 +28,3 @@ /*#__NO_SIDE_EFFECTS__*/
 
-	/** @type {import('#client').Derived<V>} */
+	/** @type {Derived<V>} */
 	const signal = {
@@ -43,3 +44,3 @@ deps: null,
 	if (current_reaction !== null && (current_reaction.f & DERIVED) !== 0) {
-		var current_derived = /** @type {import('#client').Derived} */ (current_reaction);
+		var current_derived = /** @type {Derived} */ (current_reaction);
 		if (current_derived.deriveds === null) {
@@ -58,3 +59,3 @@ current_derived.deriveds = [signal];
  * @param {() => V} fn
- * @returns {import('#client').Derived<V>}
+ * @returns {Derived<V>}
  */
@@ -69,3 +70,3 @@ /*#__NO_SIDE_EFFECTS__*/
 /**
- * @param {import('#client').Derived} derived
+ * @param {Derived} derived
  * @returns {void}
@@ -87,3 +88,3 @@ */
 /**
- * @param {import('#client').Derived} derived
+ * @param {Derived} derived
  * @returns {void}
@@ -112,3 +113,3 @@ */
 /**
- * @param {import('#client').Derived} signal
+ * @param {Derived} signal
  * @returns {void}
@@ -115,0 +116,0 @@ */

src/internal/client/reactivity/effects.js

@@ -0,1 +1,2 @@
+/** @import { ComponentContext, ComponentContextLegacy, Effect, Reaction, TemplateNode, TransitionManager } from '#client' */
 import {
@@ -60,4 +61,4 @@ check_dirtiness,
 /**
- * @param {import("#client").Effect} effect
- * @param {import("#client").Reaction} parent_effect
+ * @param {Effect} effect
+ * @param {Reaction} parent_effect
  */
@@ -80,3 +81,3 @@ export function push_effect(effect, parent_effect) {
  * @param {boolean} push
- * @returns {import('#client').Effect}
+ * @returns {Effect}
  */
@@ -86,3 +87,3 @@ function create_effect(type, fn, sync, push = true) {
 
-	/** @type {import('#client').Effect} */
+	/** @type {Effect} */
 	var effect = {
@@ -193,3 +194,3 @@ ctx: current_component_context,
 	if (defer) {
-		var context = /** @type {import('#client').ComponentContext} */ (current_component_context);
+		var context = /** @type {ComponentContext} */ (current_component_context);
 		(context.e ??= []).push(fn);
@@ -205,3 +206,3 @@ } else {
  * @param {() => void | (() => void)} fn
- * @returns {import('#client').Effect}
+ * @returns {Effect}
  */
@@ -237,3 +238,3 @@ export function user_pre_effect(fn) {
  * @param {() => void | (() => void)} fn
- * @returns {import('#client').Effect}
+ * @returns {Effect}
  */
@@ -250,5 +251,5 @@ export function effect(fn) {
 export function legacy_pre_effect(deps, fn) {
-	var context = /** @type {import('#client').ComponentContextLegacy} */ (current_component_context);
+	var context = /** @type {ComponentContextLegacy} */ (current_component_context);
 
-	/** @type {{ effect: null | import('#client').Effect, ran: boolean }} */
+	/** @type {{ effect: null | Effect, ran: boolean }} */
 	var token = { effect: null, ran: false };
@@ -271,3 +272,3 @@ context.l.r1.push(token);
 export function legacy_pre_effect_reset() {
-	var context = /** @type {import('#client').ComponentContextLegacy} */ (current_component_context);
+	var context = /** @type {ComponentContextLegacy} */ (current_component_context);
 
@@ -294,3 +295,3 @@ render_effect(() => {
  * @param {() => void | (() => void)} fn
- * @returns {import('#client').Effect}
+ * @returns {Effect}
  */
@@ -303,3 +304,3 @@ export function render_effect(fn) {
  * @param {() => void | (() => void)} fn
- * @returns {import('#client').Effect}
+ * @returns {Effect}
  */
@@ -332,3 +333,3 @@ export function template_effect(fn) {
 /**
- * @param {import("#client").Effect} effect
+ * @param {Effect} effect
  */
@@ -352,3 +353,3 @@ export function execute_effect_teardown(effect) {
 /**
- * @param {import('#client').Effect} effect
+ * @param {Effect} effect
  * @param {boolean} [remove_dom]
@@ -361,3 +362,3 @@ * @returns {void}
 	if ((remove_dom || (effect.f & HEAD_EFFECT) !== 0) && effect.nodes !== null) {
-		/** @type {import('#client').TemplateNode | null} */
+		/** @type {TemplateNode | null} */
 		var node = effect.nodes.start;
@@ -367,5 +368,4 @@ var end = effect.nodes.end;
 		while (node !== null) {
-			/** @type {import('#client').TemplateNode | null} */
-			var next =
-				node === end ? null : /** @type {import('#client').TemplateNode} */ (node.nextSibling);
+			/** @type {TemplateNode | null} */
+			var next = node === end ? null : /** @type {TemplateNode} */ (node.nextSibling);
 
@@ -413,3 +413,3 @@ node.remove();
  * reducing the amount of work that happens on subsequent traversals
- * @param {import('#client').Effect} effect
+ * @param {Effect} effect
  */
@@ -436,7 +436,7 @@ export function unlink_effect(effect) {
  * A paused effect does not update, and the DOM subtree becomes inert.
- * @param {import('#client').Effect} effect
+ * @param {Effect} effect
  * @param {() => void} [callback]
  */
 export function pause_effect(effect, callback) {
-	/** @type {import('#client').TransitionManager[]} */
+	/** @type {TransitionManager[]} */
 	var transitions = [];
@@ -453,3 +453,3 @@
 /**
- * @param {import('#client').TransitionManager[]} transitions
+ * @param {TransitionManager[]} transitions
  * @param {() => void} fn
@@ -470,4 +470,4 @@ */
 /**
- * @param {import('#client').Effect} effect
- * @param {import('#client').TransitionManager[]} transitions
+ * @param {Effect} effect
+ * @param {TransitionManager[]} transitions
  * @param {boolean} local
@@ -503,3 +503,3 @@ */
  * `x` becomes falsy then truthy: `{#if x}...{/if}`
- * @param {import('#client').Effect} effect
+ * @param {Effect} effect
  */
@@ -511,3 +511,3 @@ export function resume_effect(effect) {
 /**
- * @param {import('#client').Effect} effect
+ * @param {Effect} effect
  * @param {boolean} local
@@ -514,0 +514,0 @@ */

src/internal/client/reactivity/sources.js

@@ -0,1 +1,2 @@
+/** @import { Derived, Effect, Source, Value } from '#client' */
 import { DEV } from 'esm-env';
@@ -34,3 +35,3 @@ import {
  * @param {V} v
- * @returns {import('#client').Source<V>}
+ * @returns {Source<V>}
  */
@@ -51,3 +52,3 @@ /*#__NO_SIDE_EFFECTS__*/
  * @param {V} initial_value
- * @returns {import('#client').Source<V>}
+ * @returns {Source<V>}
  */
@@ -70,3 +71,3 @@ /*#__NO_SIDE_EFFECTS__*/
  * @template V
- * @param {import('#client').Value<V>} source
+ * @param {Value<V>} source
  * @param {V} value
@@ -84,3 +85,3 @@ */
  * @template V
- * @param {import('#client').Source<V>} source
+ * @param {Source<V>} source
  * @param {V} value
@@ -136,3 +137,3 @@ * @returns {V}
 /**
- * @param {import('#client').Value} signal
+ * @param {Value} signal
  * @param {number} status should be DIRTY or MAYBE_DIRTY
@@ -169,5 +170,5 @@ * @returns {void}
 			if ((flags & DERIVED) !== 0) {
-				mark_reactions(/** @type {import('#client').Derived} */ (reaction), MAYBE_DIRTY);
+				mark_reactions(/** @type {Derived} */ (reaction), MAYBE_DIRTY);
 			} else {
-				schedule_effect(/** @type {import('#client').Effect} */ (reaction));
+				schedule_effect(/** @type {Effect} */ (reaction));
 			}
@@ -174,0 +175,0 @@ }

src/internal/client/render.js

@@ -0,1 +1,3 @@
+/** @import { ComponentContext, Effect, EffectNodes, TemplateNode } from '#client' */
+/** @import { Component, ComponentType, SvelteComponent } from '../../index.js' */
 import { DEV } from 'esm-env';
@@ -62,3 +64,3 @@ import { clear_text_content, empty, init_operations } from './dom/operations.js';
  * @template {Record<string, any>} Exports
- * @param {import('../../index.js').ComponentType<import('../../index.js').SvelteComponent<Props>> | import('../../index.js').Component<Props, Exports, any>} component
+ * @param {ComponentType<SvelteComponent<Props>> | Component<Props, Exports, any>} component
  * @param {{} extends Props ? {
@@ -83,4 +85,3 @@ * 		target: Document | Element | ShadowRoot;
 	const anchor = options.anchor ?? options.target.appendChild(empty());
-	// Don't flush previous effects to ensure order of outer effects stays consistent
-	return flush_sync(() => _mount(component, { ...options, anchor }), false);
+	return _mount(component, { ...options, anchor });
 }
@@ -93,3 +94,3 @@
  * @template {Record<string, any>} Exports
- * @param {import('../../index.js').ComponentType<import('../../index.js').SvelteComponent<Props>> | import('../../index.js').Component<Props, Exports, any>} component
+ * @param {ComponentType<SvelteComponent<Props>> | Component<Props, Exports, any>} component
  * @param {{} extends Props ? {
@@ -119,36 +120,31 @@ * 		target: Document | Element | ShadowRoot;
 	try {
-		// Don't flush previous effects to ensure order of outer effects stays consistent
-		return flush_sync(() => {
-			var anchor = /** @type {import('#client').TemplateNode} */ (target.firstChild);
-			while (
-				anchor &&
-				(anchor.nodeType !== 8 || /** @type {Comment} */ (anchor).data !== HYDRATION_START)
-			) {
-				anchor = /** @type {import('#client').TemplateNode} */ (anchor.nextSibling);
-			}
+		var anchor = /** @type {TemplateNode} */ (target.firstChild);
+		while (
+			anchor &&
+			(anchor.nodeType !== 8 || /** @type {Comment} */ (anchor).data !== HYDRATION_START)
+		) {
+			anchor = /** @type {TemplateNode} */ (anchor.nextSibling);
+		}
 
-			if (!anchor) {
-				throw HYDRATION_ERROR;
-			}
+		if (!anchor) {
+			throw HYDRATION_ERROR;
+		}
 
-			set_hydrating(true);
-			set_hydrate_node(/** @type {Comment} */ (anchor));
-			hydrate_next();
+		set_hydrating(true);
+		set_hydrate_node(/** @type {Comment} */ (anchor));
+		hydrate_next();
 
-			const instance = _mount(component, { ...options, anchor });
+		const instance = _mount(component, { ...options, anchor });
 
-			if (
-				hydrate_node.nodeType !== 8 ||
-				/** @type {Comment} */ (hydrate_node).data !== HYDRATION_END
-			) {
-				w.hydration_mismatch();
-				throw HYDRATION_ERROR;
-			}
+		if (
+			hydrate_node.nodeType !== 8 ||
+			/** @type {Comment} */ (hydrate_node).data !== HYDRATION_END
+		) {
+			w.hydration_mismatch();
+			throw HYDRATION_ERROR;
+		}
 
-			// flush_sync will run this callback and then synchronously run any pending effects,
-			// which don't belong to the hydration phase anymore - therefore reset it here
-			set_hydrating(false);
+		set_hydrating(false);
 
-			return instance;
-		}, false);
+		return /**  @type {Exports} */ (instance);
 	} catch (error) {
@@ -184,3 +180,3 @@ if (error === HYDRATION_ERROR) {
  * @template {Record<string, any>} Exports
- * @param {import('../../index.js').ComponentType<import('../../index.js').SvelteComponent<any>> | import('../../index.js').Component<any>} Component
+ * @param {ComponentType<SvelteComponent<any>> | Component<any>} Component
  * @param {{
@@ -240,3 +236,3 @@ * 		target: Document | Element | ShadowRoot;
 				push({});
-				var ctx = /** @type {import('#client').ComponentContext} */ (current_component_context);
+				var ctx = /** @type {ComponentContext} */ (current_component_context);
 				ctx.c = context;
@@ -251,3 +247,3 @@ }
 			if (hydrating) {
-				assign_nodes(/** @type {import('#client').TemplateNode} */ (anchor), null);
+				assign_nodes(/** @type {TemplateNode} */ (anchor), null);
 			}
@@ -261,5 +257,3 @@
 			if (hydrating) {
-				/** @type {import('#client').Effect & { nodes: import('#client').EffectNodes }} */ (
-					current_effect
-				).nodes.end = hydrate_node;
+				/** @type {Effect & { nodes: EffectNodes }} */ (current_effect).nodes.end = hydrate_node;
 			}
@@ -266,0 +260,0 @@

src/internal/client/runtime.js

@@ -0,1 +1,2 @@
+/** @import { ComponentContext, Derived, Effect, Reaction, Signal, Source, Value } from '#client' */
 import { DEV } from 'esm-env';
@@ -60,3 +61,3 @@ import { define_property, get_descriptors, get_prototype_of } from '../shared/utils.js';
 
-/** @type {import('#client').Effect[]} */
+/** @type {Effect[]} */
 let current_queued_root_effects = [];
@@ -67,6 +68,6 @@
 
-/** @type {null | import('#client').Reaction} */
+/** @type {null | Reaction} */
 export let current_reaction = null;
 
-/** @param {null | import('#client').Reaction} reaction */
+/** @param {null | Reaction} reaction */
 export function set_current_reaction(reaction) {
@@ -76,6 +77,6 @@ current_reaction = reaction;
 
-/** @type {null | import('#client').Effect} */
+/** @type {null | Effect} */
 export let current_effect = null;
 
-/** @param {null | import('#client').Effect} effect */
+/** @param {null | Effect} effect */
 export function set_current_effect(effect) {
@@ -89,3 +90,3 @@ current_effect = effect;
  * and until a new dependency is accessed — we track this via `skipped_deps`
- * @type {null | import('#client').Value[]}
+ * @type {null | Value[]}
  */
@@ -99,7 +100,7 @@ export let new_deps = null;
  * so that the dependency can be added to the effect later on if it then reads it
- * @type {null | import('#client').Source[]}
+ * @type {null | Source[]}
  */
 export let current_untracked_writes = null;
 
-/** @param {null | import('#client').Source[]} value */
+/** @param {null | Source[]} value */
 export function set_current_untracked_writes(value) {
@@ -120,6 +121,6 @@ current_untracked_writes = value;
 // Handling runtime component context
-/** @type {import('#client').ComponentContext | null} */
+/** @type {ComponentContext | null} */
 export let current_component_context = null;
 
-/** @param {import('#client').ComponentContext | null} context */
+/** @param {ComponentContext | null} context */
 export function set_current_component_context(context) {
@@ -137,7 +138,7 @@ current_component_context = context;
  * ```
- * @type {import('#client').ComponentContext['function']}
+ * @type {ComponentContext['function']}
  */
 export let dev_current_component_function = null;
 
-/** @param {import('#client').ComponentContext['function']} fn */
+/** @param {ComponentContext['function']} fn */
 export function set_dev_current_component_function(fn) {
@@ -159,3 +160,3 @@ dev_current_component_function = fn;
  * If it is MAYBE_DIRTY, will set the status to CLEAN
- * @param {import('#client').Reaction} reaction
+ * @param {Reaction} reaction
  * @returns {boolean}
@@ -188,4 +189,4 @@ */
 
-				if (check_dirtiness(/** @type {import('#client').Derived} */ (dependency))) {
-					update_derived(/** @type {import('#client').Derived} */ (dependency));
+				if (check_dirtiness(/** @type {Derived} */ (dependency))) {
+					update_derived(/** @type {Derived} */ (dependency));
 				}
@@ -217,4 +218,4 @@
  * @param {Error} error
- * @param {import("#client").Effect} effect
- * @param {import("#client").ComponentContext | null} component_context
+ * @param {Effect} effect
+ * @param {ComponentContext | null} component_context
  */
@@ -235,3 +236,3 @@ function handle_error(error, effect, component_context) {
 
-	/** @type {import("#client").ComponentContext | null} */
+	/** @type {ComponentContext | null} */
 	let current_context = component_context;
@@ -280,3 +281,3 @@
  * @template V
- * @param {import('#client').Reaction} reaction
+ * @param {Reaction} reaction
  * @returns {V}
@@ -291,3 +292,3 @@ */
 
-	new_deps = /** @type {null | import('#client').Value[]} */ (null);
+	new_deps = /** @type {null | Value[]} */ (null);
 	skipped_deps = 0;
@@ -365,4 +366,4 @@ current_untracked_writes = null;
  * @template V
- * @param {import('#client').Reaction} signal
- * @param {import('#client').Value<V>} dependency
+ * @param {Reaction} signal
+ * @param {Value<V>} dependency
  * @returns {void}
@@ -395,3 +396,3 @@ */
 		}
-		remove_reactions(/** @type {import('#client').Derived} **/ (dependency), 0);
+		remove_reactions(/** @type {Derived} **/ (dependency), 0);
 	}
@@ -401,3 +402,3 @@ }
 /**
- * @param {import('#client').Reaction} signal
+ * @param {Reaction} signal
  * @param {number} start_index
@@ -427,3 +428,3 @@ * @returns {void}
 /**
- * @param {import('#client').Reaction} signal
+ * @param {Reaction} signal
  * @param {boolean} remove_dom
@@ -444,3 +445,3 @@ * @returns {void}
 /**
- * @param {import('#client').Effect} effect
+ * @param {Effect} effect
  * @returns {void}
@@ -501,3 +502,3 @@ */
 /**
- * @param {Array<import('#client').Effect>} root_effects
+ * @param {Array<Effect>} root_effects
  * @returns {void}
@@ -523,3 +524,3 @@ */
 			} else {
-				/** @type {import('#client').Effect[]} */
+				/** @type {Effect[]} */
 				var collected_effects = [];
@@ -537,3 +538,3 @@
 /**
- * @param {Array<import('#client').Effect>} effects
+ * @param {Array<Effect>} effects
  * @returns {void}
@@ -583,3 +584,3 @@ */
 /**
- * @param {import('#client').Effect} signal
+ * @param {Effect} signal
  * @returns {void}
@@ -617,4 +618,4 @@ */
  *
- * @param {import('#client').Effect} effect
- * @param {import('#client').Effect[]} collected_effects
+ * @param {Effect} effect
+ * @param {Effect[]} collected_effects
  * @returns {void}
@@ -696,6 +697,5 @@ */
  * @param {() => any} [fn]
- * @param {boolean} [flush_previous]
  * @returns {any}
  */
-export function flush_sync(fn, flush_previous = true) {
+export function flush_sync(fn) {
 	var previous_scheduler_mode = current_scheduler_mode;
@@ -707,3 +707,3 @@ var previous_queued_root_effects = current_queued_root_effects;
 
-		/** @type {import('#client').Effect[]} */
+		/** @type {Effect[]} */
 		const root_effects = [];
@@ -715,5 +715,3 @@
 
-		if (flush_previous) {
-			flush_queued_root_effects(previous_queued_root_effects);
-		}
+		flush_queued_root_effects(previous_queued_root_effects);
 
@@ -749,3 +747,3 @@ var result = fn?.();
  * @template V
- * @param {import('#client').Value<V>} signal
+ * @param {Value<V>} signal
  * @returns {V}
@@ -798,3 +796,3 @@ */
 	if ((flags & DERIVED) !== 0) {
-		var derived = /** @type {import('#client').Derived} */ (signal);
+		var derived = /** @type {Derived} */ (signal);
 
@@ -835,3 +833,3 @@ if (check_dirtiness(derived)) {
 		if ((signal.f & LEGACY_DERIVED_PROP) !== 0) {
-			for (const dep of /** @type {import('#client').Derived} */ (signal).deps || []) {
+			for (const dep of /** @type {Derived} */ (signal).deps || []) {
 				if ((dep.f & DERIVED) === 0) {
@@ -868,3 +866,3 @@ mutate(dep, null /* doesnt matter */);
 /**
- * @param {import('#client').Signal} signal
+ * @param {Signal} signal
  * @param {number} status
@@ -879,10 +877,8 @@ * @returns {void}
  * @template V
- * @param {V | import('#client').Value<V>} val
- * @returns {val is import('#client').Value<V>}
+ * @param {V | Value<V>} val
+ * @returns {val is Value<V>}
  */
 export function is_signal(val) {
 	return (
-		typeof val === 'object' &&
-		val !== null &&
-		typeof (/** @type {import('#client').Value<V>} */ (val).f) === 'number'
+		typeof val === 'object' && val !== null && typeof (/** @type {Value<V>} */ (val).f) === 'number'
 	);
@@ -905,4 +901,3 @@ }
 	if (DEV) {
-		const fn = /** @type {import('#client').ComponentContext} */ (current_component_context)
-			.function;
+		const fn = /** @type {ComponentContext} */ (current_component_context).function;
 		if (fn) {
@@ -987,3 +982,3 @@ add_owner(result, fn, true);
 /**
- * @param {import('#client').ComponentContext} component_context
+ * @param {ComponentContext} component_context
  * @returns {Map<unknown, unknown> | null}
@@ -1004,3 +999,3 @@ */
 /**
- * @param {import('#client').Value<number>} signal
+ * @param {Value<number>} signal
  * @param {1 | -1} [d]
@@ -1016,3 +1011,3 @@ * @returns {number}
 /**
- * @param {import('#client').Value<number>} signal
+ * @param {Value<number>} signal
  * @param {1 | -1} [d]
@@ -1197,3 +1192,3 @@ * @returns {number}
  * @template V
- * @param {V | import('#client').Value<V>} value
+ * @param {V | Value<V>} value
  * @returns {V}
@@ -1200,0 +1195,0 @@ */

src/internal/client/warnings.js

@@ -117,8 +117,9 @@ /* This file is generated by scripts/process-messages/index.js. Do not edit! */
 /**
- * Reactive `$state(...)` proxies and the values they proxy have different identities. Because of this, comparisons with `%operator%` will produce unexpected results. Consider using `$state.is(a, b)` instead
+ * Reactive `$state(...)` proxies and the values they proxy have different identities. Because of this, comparisons with `%operator%` will produce unexpected results. Consider using `$state.is(a, b)` instead%details%
  * @param {string} operator
+ * @param {string} details
  */
-export function state_proxy_equality_mismatch(operator) {
+export function state_proxy_equality_mismatch(operator, details) {
 	if (DEV) {
-		console.warn(`%c[svelte] state_proxy_equality_mismatch\n%cReactive \`$state(...)\` proxies and the values they proxy have different identities. Because of this, comparisons with \`${operator}\` will produce unexpected results. Consider using \`$state.is(a, b)\` instead`, bold, normal);
+		console.warn(`%c[svelte] state_proxy_equality_mismatch\n%cReactive \`$state(...)\` proxies and the values they proxy have different identities. Because of this, comparisons with \`${operator}\` will produce unexpected results. Consider using \`$state.is(a, b)\` instead${details}`, bold, normal);
 	} else {
@@ -125,0 +126,0 @@ // TODO print a link to the documentation

src/internal/server/dev.js

@@ -0,1 +1,2 @@
+/** @import { Component, Payload } from '#server' */
 import {
@@ -36,3 +37,3 @@ FILENAME,
 /**
- * @param {import('#server').Payload} payload
+ * @param {Payload} payload
  * @param {Element} parent
@@ -55,3 +56,3 @@ * @param {Element} child
 /**
- * @param {import('#server').Payload} payload
+ * @param {Payload} payload
  * @param {string} tag
@@ -62,3 +63,3 @@ * @param {number} line
 export function push_element(payload, tag, line, column) {
-	var filename = /** @type {import('#server').Component} */ (current_component).function[FILENAME];
+	var filename = /** @type {Component} */ (current_component).function[FILENAME];
 	var child = { tag, parent, filename, line, column };
@@ -65,0 +66,0 @@

src/internal/server/index.js

@@ -0,1 +1,2 @@
+/** @import { ComponentType, SvelteComponent } from 'svelte' */
 /** @import { Component, Payload, RenderOutput } from '#server' */
@@ -106,3 +107,3 @@ /** @import { Store } from '#shared' */
  * @template {Record<string, any>} Props
- * @param {import('svelte').Component<Props> | import('svelte').ComponentType<import('svelte').SvelteComponent<Props>>} component
+ * @param {import('svelte').Component<Props> | ComponentType<SvelteComponent<Props>>} component
  * @param {{ props?: Omit<Props, '$$slots' | '$$events'>; context?: Map<any, any> }} [options]
@@ -109,0 +110,0 @@ * @returns {RenderOutput}

src/legacy/legacy-client.js

@@ -5,3 +5,3 @@ /** @import { ComponentConstructorOptions, ComponentType, SvelteComponent, Component } from 'svelte' */
 import { hydrate, mount, unmount } from '../internal/client/render.js';
-import { get } from '../internal/client/runtime.js';
+import { flush_sync, get } from '../internal/client/runtime.js';
 import { define_property } from '../internal/shared/utils.js';
@@ -114,2 +114,4 @@
 
+		flush_sync();
+
 		this.#events = props.$$events;
@@ -116,0 +118,0 @@

src/motion/spring.js

@@ -0,1 +1,4 @@
+/** @import { Task } from '#client' */
+/** @import { SpringOpts, SpringUpdateOpts, TickContext } from './private.js' */
+/** @import { Spring } from './public.js' */
 import { writable } from '../store/index.js';
@@ -8,3 +11,3 @@ import { loop } from '../internal/client/loop.js';
  * @template T
- * @param {import('./private').TickContext<T>} ctx
+ * @param {TickContext<T>} ctx
  * @param {T} last_value
@@ -57,4 +60,4 @@ * @param {T} current_value
  * @param {T} [value]
- * @param {import('./private').SpringOpts} [opts]
- * @returns {import('./public.js').Spring<T>}
+ * @param {SpringOpts} [opts]
+ * @returns {Spring<T>}
  */
@@ -66,3 +69,3 @@ export function spring(value, opts = {}) {
 	let last_time;
-	/** @type {import('../internal/client/types').Task | null} */
+	/** @type {Task | null} */
 	let task;
@@ -80,3 +83,3 @@ /** @type {object} */
 	 * @param {T} new_value
-	 * @param {import('./private').SpringUpdateOpts} opts
+	 * @param {SpringUpdateOpts} opts
 	 * @returns {Promise<void>}
@@ -108,3 +111,3 @@ */
 				inv_mass = Math.min(inv_mass + inv_mass_recovery_rate, 1);
-				/** @type {import('./private').TickContext<T>} */
+				/** @type {TickContext<T>} */
 				const ctx = {
@@ -128,3 +131,3 @@ inv_mass,
 		return new Promise((fulfil) => {
-			/** @type {import('../internal/client/types').Task} */ (task).promise.then(() => {
+			/** @type {Task} */ (task).promise.then(() => {
 				if (token === current_token) fulfil();
@@ -134,3 +137,3 @@ });
 	}
-	/** @type {import('./public.js').Spring<T>} */
+	/** @type {Spring<T>} */
 	const spring = {
@@ -137,0 +140,0 @@ set,

src/reactivity/map.js

@@ -0,1 +1,2 @@
+/** @import { Source } from '#client' */
 import { DEV } from 'esm-env';
@@ -12,3 +13,3 @@ import { source, set } from '../internal/client/reactivity/sources.js';
 export class SvelteMap extends Map {
-	/** @type {Map<K, import('#client').Source<number>>} */
+	/** @type {Map<K, Source<number>>} */
 	#sources = new Map();
@@ -15,0 +16,0 @@ #version = source(0);

src/reactivity/set.js

@@ -0,1 +1,2 @@
+/** @import { Source } from '#client' */
 import { DEV } from 'esm-env';
@@ -16,3 +17,3 @@ import { source, set } from '../internal/client/reactivity/sources.js';
 export class SvelteSet extends Set {
-	/** @type {Map<T, import('#client').Source<boolean>>} */
+	/** @type {Map<T, Source<boolean>>} */
 	#sources = new Map();
@@ -19,0 +20,0 @@ #version = source(0);

src/reactivity/utils.js

@@ -0,1 +1,2 @@
+/** @import { Source } from '#client' */
 import { set } from '../internal/client/reactivity/sources.js';
@@ -33,5 +34,5 @@
 
-/** @param {import('#client').Source<number>} source */
+/** @param {Source<number>} source */
 export function increment(source) {
 	set(source, source.v + 1);
 }

src/version.js

@@ -9,3 +9,3 @@ // generated during release, do not modify
  */
-export const VERSION = '5.0.0-next.198';
+export const VERSION = '5.0.0-next.199';
 export const PUBLIC_VERSION = '5';

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

2169853

increased by0.35%

Number of package files

250

increased by15.74%

Lines of code

48032

increased by0.92%

No dependency changes