svelte 5.55.10 → 5.56.1

package/package.json

@@ -2,7 +2,7 @@
   "name": "svelte",
   "description": "Cybernetically enhanced web apps",
   "license": "MIT",
-  "version": "5.55.10",
+  "version": "5.56.1",
   "type": "module",
   "types": "./types/index.d.ts",
   "engines": {
@@ -139,20 +139,22 @@
   ],
   "devDependencies": {
     "@jridgewell/trace-mapping": "^0.3.25",
-    "@playwright/test": "^1.58.0",
+    "@playwright/test": "^1.60.0",
     "@rollup/plugin-commonjs": "^28.0.1",
     "@rollup/plugin-node-resolve": "^15.3.0",
     "@rollup/plugin-terser": "^0.4.4",
     "@rollup/plugin-virtual": "^3.0.2",
     "@types/aria-query": "^5.0.4",
     "@types/node": "^20.11.5",
+    "baseline-browser-mapping": "^2.10.32",
     "dts-buddy": "^0.5.5",
     "esbuild": "^0.25.10",
     "rollup": "^4.59.0",
     "source-map": "^0.7.4",
     "tinyglobby": "^0.2.12",
     "typescript": "^5.5.4",
-    "vitest": "^2.1.9"
+    "vitest": "^2.1.9",
+    "web-features": "^3.29.0"
   },
   "dependencies": {
     "@jridgewell/remapping": "^2.3.4",
@@ -178,9 +180,10 @@
     "check": "tsc --project tsconfig.runtime.json && tsc && cd ./tests/types && tsc",
     "check:tsgo": "tsgo --project tsconfig.runtime.json --skipLibCheck && tsgo --skipLibCheck",
     "check:watch": "tsc --watch",
-    "generate": "node scripts/process-messages && node ./scripts/generate-types.js",
+    "generate": "node scripts/process-messages && node ./scripts/generate-types.js && pnpm generate:browser-support",
     "generate:version": "node ./scripts/generate-version.js",
     "generate:types": "node ./scripts/generate-types.js && tsc -p tsconfig.generated.json",
+    "generate:browser-support": "node ./scripts/generate-browser-support.ts",
     "knip": "pnpm dlx knip"
   }
 }

package/src/compiler/errors.js

@@ -1004,6 +1004,24 @@ export function debug_tag_invalid_arguments(node) {
 	e(node, 'debug_tag_invalid_arguments', `{@debug ...} arguments must be identifiers, not arbitrary expressions\nhttps://svelte.dev/e/debug_tag_invalid_arguments`);
 }
 
+/**
+ * Declaration tags must be `let` or `const` declarations
+ * @param {null | number | NodeLike} node
+ * @returns {never}
+ */
+export function declaration_tag_invalid_type(node) {
+	e(node, 'declaration_tag_invalid_type', `Declaration tags must be \`let\` or \`const\` declarations\nhttps://svelte.dev/e/declaration_tag_invalid_type`);
+}
+
+/**
+ * Declaration tags cannot be used in legacy mode
+ * @param {null | number | NodeLike} node
+ * @returns {never}
+ */
+export function declaration_tag_no_legacy_mode(node) {
+	e(node, 'declaration_tag_no_legacy_mode', `Declaration tags cannot be used in legacy mode\nhttps://svelte.dev/e/declaration_tag_no_legacy_mode`);
+}
+
 /**
  * Directive value must be a JavaScript expression enclosed in curly braces
  * @param {null | number | NodeLike} node

package/src/compiler/legacy.js

@@ -262,6 +262,10 @@ export function convert(source, ast) {
 				};
 			},
 			// @ts-ignore
+			DeclarationTag(node) {
+				return node;
+			},
+			// @ts-ignore
 			KeyBlock(node, { visit }) {
 				remove_surrounding_whitespace_nodes(node.fragment.nodes);
 				return {

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

@@ -1,4 +1,4 @@
-/** @import { Comment, Program } from 'estree' */
+/** @import { Comment, Program, Statement } from 'estree' */
 /** @import { AST } from '#compiler' */
 /** @import { Parser } from './index.js' */
 import * as acorn from 'acorn';
@@ -98,6 +98,36 @@ export function parse_expression_at(parser, source, index) {
 	}
 }
 
+/**
+ * @param {Parser} parser
+ * @param {string} source
+ * @param {number} index
+ * @returns {Statement}
+ */
+export function parse_statement_at(parser, source, index) {
+	// cast to `any`: acorn's Parser constructor and parseStatement/nextToken aren't in its public types
+	const acorn = /** @type {any} */ (parser.ts ? TSParser : JSParser);
+	const { onComment, add_comments } = get_comment_handlers(source, parser.root.comments, index);
+
+	try {
+		// This is like parseExpressionAt but for statements
+		const p = new acorn(
+			{ onComment, sourceType: 'module', ecmaVersion: 16, locations: true },
+			source,
+			index
+		);
+		p.nextToken();
+		const statement = /** @type {Statement} */ (p.parseStatement(null, true, Object.create(null)));
+		add_comments(/** @type {acorn.Node} */ (statement));
+		return statement;
+	} catch (err) {
+		// A statement that runs to the end of the source (e.g. an unterminated declaration tag)
+		// is an EOF, not a stray token; preserve the friendlier `unexpected_eof` diagnostic.
+		if (/** @type {any} */ (err).pos === source.length) e.unexpected_eof(source.length);
+		handle_parse_error(err);
+	}
+}
+
 const regex_position_indicator = / \(\d+:\d+\)$/;
 
 /**

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

@@ -302,7 +302,10 @@ export class Parser {
 	}
 
 	pop() {
-		this.fragments.pop();
+		const fragment = this.fragments.pop();
+		if (fragment?.metadata.transparent && fragment.nodes.some((n) => n.type === 'DeclarationTag')) {
+			fragment.metadata.transparent = false;
+		}
 		return this.stack.pop();
 	}
 

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

@@ -1,16 +1,20 @@
-/** @import { ArrowFunctionExpression, Expression, Identifier, Pattern } from 'estree' */
+/** @import { ArrowFunctionExpression, Expression, Identifier, Pattern, VariableDeclaration } from 'estree' */
 /** @import { AST } from '#compiler' */
 /** @import { Parser } from '../index.js' */
 import { walk } from 'zimmerframe';
 import * as e from '../../../errors.js';
 import { ExpressionMetadata } from '../../nodes.js';
-import { parse_expression_at } from '../acorn.js';
+import { parse_expression_at, parse_statement_at } from '../acorn.js';
 import read_pattern from '../read/context.js';
 import read_expression, { get_loose_identifier } from '../read/expression.js';
 import { create_fragment } from '../utils/create.js';
-import { match_bracket } from '../utils/bracket.js';
+import { find_matching_bracket, match_bracket } from '../utils/bracket.js';
 
 const regex_whitespace_with_closing_curly_brace = /\s*}/y;
+const regex_supported_declaration = /(?:let|const)\b/y;
+const regex_unsupported_declaration = /(?:var|interface|enum)\b/y;
+// `type` is a contextual keyword; this is just a shape hint, confirmed by parsing.
+const regex_maybe_type_declaration = /type\b/y;
 
 const pointy_bois = { '<': '>' };
 
@@ -31,6 +35,20 @@ export default function tag(parser) {
 		}
 	}
 
+	const declaration = read_declaration(parser);
+	if (declaration) {
+		parser.append({
+			type: 'DeclarationTag',
+			start,
+			end: parser.index,
+			declaration: /** @type {VariableDeclaration} */ (declaration),
+			metadata: {
+				expression: new ExpressionMetadata()
+			}
+		});
+		return;
+	}
+
 	const expression = read_expression(parser);
 
 	parser.allow_whitespace();
@@ -47,6 +65,89 @@ export default function tag(parser) {
 	});
 }
 
+/**
+ * @param {Parser} parser
+ * @returns {null | import('estree').VariableDeclaration}
+ */
+function read_declaration(parser) {
+	const start = parser.index;
+
+	const unsupported = parser.match_regex(regex_unsupported_declaration);
+	if (unsupported) {
+		e.declaration_tag_invalid_type({ start, end: start + unsupported.length });
+	}
+
+	if (
+		!parser.match_regex(regex_supported_declaration) &&
+		// `type` is special, since it is not a reserved keyword and can be used
+		// as part of a valid expression. We gotta parse first and then see what it is.
+		!parser.match_regex(regex_maybe_type_declaration)
+	) {
+		return null;
+	}
+
+	const initial_comment_count = parser.root.comments.length;
+
+	/** @type {import('estree').Statement | import('estree').VariableDeclaration} */
+	let declaration;
+	try {
+		declaration = parse_statement_at(parser, parser.template, start);
+	} catch (error) {
+		if (!parser.loose) throw error;
+
+		const end = find_matching_bracket(parser.template, start, '{');
+		if (end === undefined) throw error;
+
+		parser.index = end;
+		const kind = parser.template.startsWith('const', start) ? 'const' : 'let';
+
+		declaration = {
+			type: 'VariableDeclaration',
+			kind,
+			declarations: [
+				{
+					type: 'VariableDeclarator',
+					id: {
+						type: 'Identifier',
+						name: '',
+						start: parser.index,
+						end: parser.index
+					},
+					init: null,
+					start: parser.index,
+					end: parser.index
+				}
+			],
+			start,
+			end
+		};
+	}
+
+	if (declaration.type !== 'VariableDeclaration') {
+		if (declaration.type === 'ExpressionStatement') {
+			parser.root.comments.length = initial_comment_count; // Else they show up duplicated
+			return null;
+		} else {
+			// This is a TSTypeAliasDeclaration
+			e.declaration_tag_invalid_type({
+				start: declaration.start ?? start,
+				end: declaration.end ?? parser.index
+			});
+		}
+	}
+
+	// TODO support using
+	if (declaration.kind !== 'let' && declaration.kind !== 'const') {
+		e.declaration_tag_invalid_type(declaration);
+	}
+
+	parser.index = /** @type {number} */ (declaration.end);
+	parser.allow_whitespace();
+	parser.eat('}', true);
+
+	return declaration;
+}
+
 /** @param {Parser} parser */
 function open(parser) {
 	let start = parser.index - 2;

package/src/compiler/phases/1-parse/utils/bracket.js

@@ -39,7 +39,9 @@ function find_string_end(string, search_start_index, string_start_char) {
  * @returns {number} The index of the end of this regex expression, or `Infinity` if not found.
  */
 function find_regex_end(string, search_start_index) {
-	return find_unescaped_char(string, search_start_index, '/');
+	const slash = find_unescaped_char(string, search_start_index, '/');
+	const eol = find_unescaped_char(string, search_start_index, '\n');
+	return slash < eol ? slash : Infinity;
 }
 
 /**
@@ -105,7 +107,11 @@ export function find_matching_bracket(template, index, open) {
 				continue;
 			case '/': {
 				const next_char = template[i + 1];
-				if (!next_char) continue;
+				if (!next_char) {
+					// `/` is the last character; advance past it so we don't loop forever
+					i++;
+					continue;
+				}
 				if (next_char === '/') {
 					i = infinity_if_negative(template.indexOf('\n', i + 1)) + '\n'.length;
 					continue;
@@ -114,7 +120,12 @@ export function find_matching_bracket(template, index, open) {
 					i = infinity_if_negative(template.indexOf('*/', i + 1)) + '*/'.length;
 					continue;
 				}
-				i = find_regex_end(template, i + 1) + '/'.length;
+				const end = find_regex_end(template, i + 1) + '/'.length;
+				if (end === Infinity) {
+					i++;
+				} else {
+					i = end;
+				}
 				continue;
 			}
 			default: {

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

@@ -36,6 +36,7 @@ import { ClassDeclaration } from './visitors/ClassDeclaration.js';
 import { ClassDirective } from './visitors/ClassDirective.js';
 import { Component } from './visitors/Component.js';
 import { ConstTag } from './visitors/ConstTag.js';
+import { DeclarationTag } from './visitors/DeclarationTag.js';
 import { DebugTag } from './visitors/DebugTag.js';
 import { EachBlock } from './visitors/EachBlock.js';
 import { ExportDefaultDeclaration } from './visitors/ExportDefaultDeclaration.js';
@@ -157,6 +158,7 @@ const visitors = {
 	ClassDirective,
 	Component,
 	ConstTag,
+	DeclarationTag,
 	DebugTag,
 	EachBlock,
 	ExportDefaultDeclaration,
@@ -312,6 +314,7 @@ export function analyze_module(source, options) {
 			options: /** @type {ValidatedCompileOptions} */ (options),
 			fragment: null,
 			parent_element: null,
+			in_declaration_tag: false,
 			reactive_statement: null,
 			derived_function_depth: -1
 		},
@@ -718,6 +721,7 @@ export function analyze_component(root, source, options) {
 				ast_type: ast === instance.ast ? 'instance' : ast === template.ast ? 'template' : 'module',
 				fragment: ast === template.ast ? ast : null,
 				parent_element: null,
+				in_declaration_tag: false,
 				has_props_rune: false,
 				component_slots: new Set(),
 				expression: null,
@@ -785,6 +789,7 @@ export function analyze_component(root, source, options) {
 				options,
 				fragment: ast === template.ast ? ast : null,
 				parent_element: null,
+				in_declaration_tag: false,
 				has_props_rune: false,
 				ast_type: ast === instance.ast ? 'instance' : ast === template.ast ? 'template' : 'module',
 				reactive_statement: null,

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

@@ -255,6 +255,9 @@ export function CallExpression(node, context) {
 		if (expression.has_await) {
 			context.state.analysis.async_deriveds.add(node);
 		}
+
+		// Tell surrounding declaration tag about metadata for correct calculation of blockers etc
+		if (context.state.in_declaration_tag) context.state.expression?.merge(expression);
 	} else if (rune === '$inspect') {
 		context.next({ ...context.state, function_depth: context.state.function_depth + 1 });
 	} else {

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

@@ -1,8 +1,8 @@
 /** @import { AST } from '#compiler' */
 /** @import { Context } from '../types' */
 import * as e from '../../../errors.js';
-import * as b from '#compiler/builders';
 import { validate_opening_tag } from './shared/utils.js';
+import { mark_async_declaration } from './DeclarationTag.js';
 
 /**
  * @param {AST.ConstTag} node
@@ -44,28 +44,5 @@ export function ConstTag(node, context) {
 		derived_function_depth: context.state.function_depth + 1
 	});
 
-	const has_await = node.metadata.expression.has_await;
-	const blockers = [...node.metadata.expression.dependencies]
-		.map((dep) => dep.blocker)
-		.filter((b) => b !== null && b.object !== context.state.async_consts?.id);
-
-	if (has_await || context.state.async_consts || blockers.length > 0) {
-		const run = (context.state.async_consts ??= {
-			id: context.state.analysis.root.unique('promises'),
-			declaration_count: 0
-		});
-		node.metadata.promises_id = run.id;
-
-		const bindings = context.state.scope.get_bindings(declaration);
-
-		// keep the counter in sync with the number of thunks pushed in ConstTag in transform
-		// TODO 6.0 once non-async and non-runes mode is gone investigate making this more robust
-		// via something like the approach in https://github.com/sveltejs/svelte/pull/18032
-		const length = run.declaration_count + (blockers.length > 0 ? 1 : 0);
-		run.declaration_count += blockers.length > 0 ? 2 : 1;
-		const blocker = b.member(run.id, b.literal(length), true);
-		for (const binding of bindings) {
-			binding.blocker = blocker;
-		}
-	}
+	mark_async_declaration(context, node.metadata, [declaration]);
 }

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

@@ -0,0 +1,71 @@
+/** @import { AST } from '#compiler' */
+/** @import { Context } from '../types' */
+import * as b from '#compiler/builders';
+import * as e from '../../../errors.js';
+import { extract_identifiers } from '../../../utils/ast.js';
+
+/**
+ * @param {AST.DeclarationTag} node
+ * @param {Context} context
+ */
+export function DeclarationTag(node, context) {
+	if (!context.state.analysis.runes && !context.state.analysis.maybe_runes) {
+		e.declaration_tag_no_legacy_mode(node);
+	}
+
+	const is_top_level = context.path.length === 1 && context.path[0].type === 'Fragment';
+	if (is_top_level) {
+		const duplicate = node.declaration.declarations
+			.flatMap((declaration) => extract_identifiers(declaration.id))
+			.find((id) => context.state.analysis.instance.scope.declarations.has(id.name));
+		if (duplicate) {
+			e.declaration_duplicate(duplicate, duplicate.name);
+		}
+	}
+
+	context.visit(node.declaration, {
+		...context.state,
+		in_declaration_tag: true,
+		// the declaration lives in the fragment scope, which is one level deeper than the
+		// `function_depth` we're tracking here (`set_scope` doesn't update `function_depth`).
+		// align them so that `state_referenced_locally` warnings are calculated correctly
+		function_depth: context.state.scope.function_depth,
+		expression: node.metadata.expression
+	});
+
+	mark_async_declaration(context, node.metadata, node.declaration.declarations);
+}
+
+/**
+ * @param {Context} context
+ * @param {AST.ConstTag['metadata'] | AST.DeclarationTag['metadata']} metadata
+ * @param {import('estree').VariableDeclarator[]} declarations
+ */
+export function mark_async_declaration(context, metadata, declarations) {
+	const has_await = metadata.expression.has_await;
+	const blockers = [...metadata.expression.dependencies]
+		.map((dep) => dep.blocker)
+		.filter((b) => b !== null && b.object !== context.state.async_consts?.id);
+
+	if (has_await || context.state.async_consts || blockers.length > 0) {
+		const run = (context.state.async_consts ??= {
+			id: context.state.analysis.root.unique('promises'),
+			declaration_count: 0
+		});
+		metadata.promises_id = run.id;
+
+		const bindings = declarations.flatMap((declaration) =>
+			context.state.scope.get_bindings(declaration)
+		);
+
+		// keep the counter in sync with the number of thunks pushed in transform
+		// TODO 6.0 once non-async and non-runes mode is gone investigate making this more robust
+		// via something like the approach in https://github.com/sveltejs/svelte/pull/18032
+		const length = run.declaration_count + (blockers.length > 0 ? 1 : 0);
+		run.declaration_count += blockers.length > 0 ? 2 : 1;
+		const blocker = b.member(run.id, b.literal(length), true);
+		for (const binding of bindings) {
+			binding.blocker = blocker;
+		}
+	}
+}

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

@@ -162,7 +162,7 @@ export function Identifier(node, context) {
 		if (binding.metadata?.is_template_declaration && context.state.options.experimental.async) {
 			let snippet_name;
 
-			// Find out if this references a {@const ...} declaration of an implicit children snippet
+			// Find out if this references a {@const ...}/{let/const ...} declaration of an implicit children snippet
 			// when it is itself inside a snippet block at the same level. If so, error.
 			for (let i = context.path.length - 1; i >= 0; i--) {
 				const parent = context.path[i];

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

@@ -25,19 +25,24 @@ export function SnippetBlock(node, context) {
 
 	context.next({ ...context.state, parent_element: null });
 
-	const can_hoist =
-		context.path.length === 1 &&
-		context.path[0].type === 'Fragment' &&
-		can_hoist_snippet(context.state.scope, context.state.scopes);
+	const is_top_level = context.path.length === 1 && context.path[0].type === 'Fragment';
 
-	const name = node.expression.name;
+	if (is_top_level) {
+		const name = node.expression.name;
 
-	if (can_hoist) {
-		const binding = /** @type {Binding} */ (context.state.scope.get(name));
-		context.state.analysis.module.scope.declarations.set(name, binding);
-	}
+		if (context.state.analysis.instance.scope.declarations.has(name)) {
+			e.declaration_duplicate(node.expression, name);
+		}
+
+		node.metadata.can_hoist =
+			is_top_level && can_hoist_snippet(context.state.scope, context.state.scopes);
 
-	node.metadata.can_hoist = can_hoist;
+		if (node.metadata.can_hoist) {
+			const name = node.expression.name;
+			const binding = /** @type {Binding} */ (context.state.scope.get(name));
+			context.state.analysis.module.scope.declarations.set(name, binding);
+		}
+	}
 
 	const { path } = context;
 	const parent = path.at(-2);

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

@@ -4,7 +4,7 @@
 /** @import { Visitors, ComponentClientTransformState, ClientTransformState } from './types' */
 import { walk } from 'zimmerframe';
 import * as b from '#compiler/builders';
-import { build_getter, is_state_source } from './utils.js';
+import { build_getter, get_transform } from './utils.js';
 import { render_stylesheet } from '../css/index.js';
 import { dev, filename } from '../../../state.js';
 import { AnimateDirective } from './visitors/AnimateDirective.js';
@@ -22,6 +22,7 @@ import { ClassBody } from './visitors/ClassBody.js';
 import { Comment } from './visitors/Comment.js';
 import { Component } from './visitors/Component.js';
 import { ConstTag } from './visitors/ConstTag.js';
+import { DeclarationTag } from './visitors/DeclarationTag.js';
 import { DebugTag } from './visitors/DebugTag.js';
 import { EachBlock } from './visitors/EachBlock.js';
 import { ExportNamedDeclaration } from './visitors/ExportNamedDeclaration.js';
@@ -66,20 +67,7 @@ const visitors = {
 		const scope = state.scopes.get(node);
 
 		if (scope && scope !== state.scope) {
-			const transform = { ...state.transform };
-
-			for (const [name, binding] of scope.declarations) {
-				if (
-					binding.kind === 'normal' ||
-					// Reads of `$state(...)` declarations are not
-					// transformed if they are never reassigned
-					(binding.kind === 'state' && !is_state_source(binding, state.analysis))
-				) {
-					delete transform[name];
-				}
-			}
-
-			next({ ...state, transform, scope });
+			next({ ...state, transform: get_transform(scope, state), scope });
 		} else {
 			next();
 		}
@@ -99,6 +87,7 @@ const visitors = {
 	Comment,
 	Component,
 	ConstTag,
+	DeclarationTag,
 	DebugTag,
 	EachBlock,
 	ExportNamedDeclaration,
@@ -152,6 +141,7 @@ export function client_component(analysis, options) {
 		scopes: analysis.module.scopes,
 		is_instance: false,
 		hoisted: [b.import_all('$', 'svelte/internal/client'), ...analysis.instance_body.hoisted],
+		templates: new Map(),
 		node: /** @type {any} */ (null), // populated by the root node
 		legacy_reactive_imports: [],
 		legacy_reactive_statements: new Map(),

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

@@ -1,3 +1,4 @@
+/** @import { TemplateLiteral } from 'estree' */
 /** @import { Namespace } from '#compiler' */
 /** @import { ComponentClientTransformState } from '../types.js' */
 /** @import { Node } from './types.js' */
@@ -31,14 +32,29 @@ function build_locations(nodes) {
 
 /**
  * @param {ComponentClientTransformState} state
- * @param {Namespace} namespace
+ * @param {string} name
  * @param {number} [flags]
  */
-export function transform_template(state, namespace, flags = 0) {
+export function transform_template(state, name, flags = 0) {
+	const namespace = state.metadata.namespace;
 	const tree = state.options.fragments === 'tree';
 
 	const expression = tree ? state.template.as_tree() : state.template.as_html();
 
+	const key =
+		tree || dev
+			? null
+			: get_template_key(
+					/** @type {TemplateLiteral} */ (expression),
+					state.metadata.namespace,
+					flags
+				);
+
+	if (key !== null) {
+		const existing = state.templates.get(key);
+		if (existing !== undefined) return existing;
+	}
+
 	if (tree) {
 		if (namespace === 'svg') flags |= TEMPLATE_USE_SVG;
 		if (namespace === 'mathml') flags |= TEMPLATE_USE_MATHML;
@@ -63,5 +79,26 @@ export function transform_template(state, namespace, flags = 0) {
 		);
 	}
 
-	return call;
+	const id = state.scope.root.unique(name);
+	state.hoisted.push(b.var(id, call));
+
+	if (key !== null) {
+		state.templates.set(key, id);
+	}
+
+	return id;
+}
+
+/**
+ * Returns a stable key for templates that are safe to deduplicate - plain
+ * `$.from_html`/`from_svg`/`from_mathml` factories with literal arguments - or `null`
+ * for anything else. Dev-mode templates are wrapped in `$.add_locations(...)`, which
+ * embeds per-call-site locations, so they never produce a key and are never shared.
+ * @param {TemplateLiteral} template
+ * @param {Namespace} namespace
+ * @param {number} flags
+ * @returns {string | null}
+ */
+function get_template_key(template, namespace, flags) {
+	return `${namespace} ${flags} ${template.quasis[0].value.raw}`;
 }

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

@@ -179,3 +179,24 @@ export function create_derived(state, expression, async = false) {
 		return b.call(state.analysis.runes ? '$.derived' : '$.derived_safe_equal', thunk);
 	}
 }
+
+/**
+ * @param {Scope} scope
+ * @param {ClientTransformState} state
+ */
+export function get_transform(scope, state) {
+	const transform = { ...state.transform };
+
+	for (const [name, binding] of scope.declarations) {
+		if (
+			binding.kind === 'normal' ||
+			// Reads of `$state(...)` declarations are not
+			// transformed if they are never reassigned
+			(binding.kind === 'state' && !is_state_source(binding, state.analysis))
+		) {
+			delete transform[name];
+		}
+	}
+
+	return transform;
+}