Merge branch 'main' into better-dev-equality-warnings

Author: Rich-Harris

.changeset/bright-falcons-float.md

@@ -0,0 +1,5 @@
+---
+"svelte": patch
+---
+
+chore: improve SSR invalid element error message

.changeset/eight-pianos-raise.md

@@ -0,0 +1,5 @@
+---
+"svelte": patch
+---
+
+fix: add backwards-compat for old warning codes in legacy mode

.changeset/khaki-monkeys-cry.md

@@ -0,0 +1,5 @@
+---
+"svelte": patch
+---
+
+feat: add $state.is rune

.changeset/pre.json

@@ -98,6 +98,7 @@
     "early-ads-tie",
     "early-months-whisper",
     "eight-hornets-punch",
+    "eight-pianos-raise",
     "eight-steaks-shout",
     "eighty-bikes-camp",
     "eighty-days-cheat",

packages/svelte/CHANGELOG.md

@@ -1,5 +1,11 @@
 # svelte
 
+## 5.0.0-next.133
+
+### Patch Changes
+
+- fix: add backwards-compat for old warning codes in legacy mode ([#11607](https://github.com/sveltejs/svelte/pull/11607))
+
 ## 5.0.0-next.132
 
 ### Patch Changes

packages/svelte/messages/compile-warnings/misc.md

@@ -0,0 +1,9 @@
+## legacy_code
+
+> `%code%` is no longer valid — please use `%suggestion%` instead
+
+## unknown_code
+
+> `%code%` is not a recognised code
+
+> `%code%` is not a recognised code (did you mean `%suggestion%`?)

packages/svelte/package.json

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

packages/svelte/scripts/process-messages/index.js

@@ -61,7 +61,7 @@ function transform(name, dest) {
 
 	const comments = [];
 
-	const ast = acorn.parse(source, {
+	let ast = acorn.parse(source, {
 		ecmaVersion: 'latest',
 		sourceType: 'module',
 		onComment: (block, value, start, end) => {
@@ -80,7 +80,7 @@ function transform(name, dest) {
 		}
 	});
 
-	walk(ast, null, {
+	ast = walk(ast, null, {
 		_(node, { next }) {
 			let comment;
 
@@ -100,6 +100,18 @@ function transform(name, dest) {
 					node.trailingComments = [comments.shift()];
 				}
 			}
+		},
+		// @ts-expect-error
+		Identifier(node, context) {
+			if (node.name === 'CODES') {
+				return {
+					type: 'ArrayExpression',
+					elements: Object.keys(messages[name]).map((code) => ({
+						type: 'Literal',
+						value: code
+					}))
+				};
+			}
 		}
 	});
 

packages/svelte/scripts/process-messages/templates/compile-warnings.js

@@ -1,37 +1,14 @@
-import { getLocator } from 'locate-character';
+import { filename, locator, warnings, ignore_stack } from './state.js';
 
 /** @typedef {{ start?: number, end?: number }} NodeLike */
 
-/** @type {import('#compiler').Warning[]} */
-let warnings = [];
-
-/** @type {string | undefined} */
-let filename;
-
-let locator = getLocator('', { offsetLine: 1 });
-
-/**
- * @param {{
- *   source: string;
- *   filename: string | undefined;
- * }} options
- * @returns {import('#compiler').Warning[]}
- */
-export function reset_warnings(options) {
-	filename = options.filename;
-	locator = getLocator(options.source, { offsetLine: 1 });
-
-	return (warnings = []);
-}
-
 /**
  * @param {null | NodeLike} node
  * @param {string} code
  * @param {string} message
  */
 function w(node, code, message) {
-	// @ts-expect-error
-	if (node?.ignores?.has(code)) return;
+	if (ignore_stack.at(-1)?.has(code)) return;
 
 	warnings.push({
 		code,
@@ -42,6 +19,8 @@ function w(node, code, message) {
 	});
 }
 
+export const codes = CODES;
+
 /**
  * MESSAGE
  * @param {null | NodeLike} node

packages/svelte/src/ambient.d.ts

@@ -63,6 +63,27 @@ declare namespace $state {
 	 */
 	export function snapshot<T>(state: T): T;
 
+	/**
+	 * Compare two values, one or both of which is a reactive `$state(...)` proxy.
+	 *
+	 * Example:
+	 * ```ts
+	 * <script>
+	 *	 let foo = $state({});
+	 *	 let bar = {};
+	 *
+	 *	 foo.bar = bar;
+	 *
+	 *	 console.log(foo.bar === bar); // false — `foo.bar` is a reactive proxy
+	 *   console.log($state.is(foo.bar, bar)); // true
+	 * </script>
+	 * ```
+	 *
+	 * https://svelte-5-preview.vercel.app/docs/runes#$state.is
+	 *
+	 */
+	export function is(a: any, b: any): boolean;
+
 	// prevent intellisense from being unhelpful
 	/** @deprecated */
 	export const apply: never;

packages/svelte/src/compiler/index.js

@@ -1,4 +1,3 @@
-import { getLocator } from 'locate-character';
 import { walk as zimmerframe_walk } from 'zimmerframe';
 import { CompileError } from './errors.js';
 import { convert } from './legacy.js';
@@ -8,7 +7,7 @@ import { remove_typescript_nodes } from './phases/1-parse/remove_typescript_node
 import { analyze_component, analyze_module } from './phases/2-analyze/index.js';
 import { transform_component, transform_module } from './phases/3-transform/index.js';
 import { validate_component_options, validate_module_options } from './validate-options.js';
-import { reset_warnings } from './warnings.js';
+import * as state from './state.js';
 export { default as preprocess } from './preprocess/index.js';
 
 /**
@@ -21,7 +20,8 @@ export { default as preprocess } from './preprocess/index.js';
  */
 export function compile(source, options) {
 	try {
-		const warnings = reset_warnings({ source, filename: options.filename });
+		state.reset({ source, filename: options.filename });
+
 		const validated = validate_component_options(options, '');
 		let parsed = _parse(source);
 
@@ -44,9 +44,7 @@ export function compile(source, options) {
 		}
 
 		const analysis = analyze_component(parsed, source, combined_options);
-
 		const result = transform_component(analysis, source, combined_options);
-		result.warnings = warnings;
 		result.ast = to_public_ast(source, parsed, options.modernAst);
 		return result;
 	} catch (e) {
@@ -68,11 +66,11 @@ export function compile(source, options) {
  */
 export function compileModule(source, options) {
 	try {
-		const warnings = reset_warnings({ source, filename: options.filename });
+		state.reset({ source, filename: options.filename });
+
 		const validated = validate_module_options(options, '');
 		const analysis = analyze_module(parse_acorn(source, false), validated);
 		const result = transform_module(analysis, source, validated);
-		result.warnings = warnings;
 		return result;
 	} catch (e) {
 		if (e instanceof CompileError) {
@@ -92,10 +90,8 @@ function handle_compile_error(error, filename, source) {
 	error.filename = filename;
 
 	if (error.position) {
-		// TODO this is reused with warnings — DRY out
-		const locator = getLocator(source, { offsetLine: 1 });
-		const start = locator(error.position[0]);
-		const end = locator(error.position[1]);
+		const start = state.locator(error.position[0]);
+		const end = state.locator(error.position[1]);
 
 		error.start = start;
 		error.end = end;
@@ -142,6 +138,8 @@ function handle_compile_error(error, filename, source) {
  * @returns {import('#compiler').Root | import('./types/legacy-nodes.js').LegacyRoot}
  */
 export function parse(source, options = {}) {
+	state.reset({ source, filename: options.filename });
+
 	/** @type {import('#compiler').Root} */
 	let ast;
 	try {

packages/svelte/src/compiler/legacy.js

@@ -201,7 +201,7 @@ export function convert(source, ast) {
 			Comment(node) {
 				return {
 					...node,
-					ignores: extract_svelte_ignore(node.data)
+					ignores: extract_svelte_ignore(node.start, node.data, false)
 				};
 			},
 			ComplexSelector(node) {

packages/svelte/src/compiler/migrate/index.js

@@ -4,9 +4,10 @@ import { parse } from '../phases/1-parse/index.js';
 import { analyze_component } from '../phases/2-analyze/index.js';
 import { validate_component_options } from '../validate-options.js';
 import { get_rune } from '../phases/scope.js';
-import { reset_warnings } from '../warnings.js';
+import { reset } from '../state.js';
 import { extract_identifiers } from '../utils/ast.js';
 import { regex_is_valid_identifier } from '../phases/patterns.js';
+import { migrate_svelte_ignore } from '../utils/extract_svelte_ignore.js';
 
 /**
  * Does a best-effort migration of Svelte code towards using runes, event attributes and render tags.
@@ -17,7 +18,7 @@ import { regex_is_valid_identifier } from '../phases/patterns.js';
  */
 export function migrate(source) {
 	try {
-		reset_warnings({ source, filename: 'migrate.svelte' });
+		reset({ source, filename: 'migrate.svelte' });
 
 		let parsed = parse(source);
 
@@ -174,6 +175,21 @@ export function migrate(source) {
 
 /** @type {import('zimmerframe').Visitors<import('../types/template.js').SvelteNode, State>} */
 const instance_script = {
+	_(node, { state, next }) {
+		// @ts-expect-error
+		const comments = node.leadingComments;
+		if (comments) {
+			for (const comment of comments) {
+				if (comment.type === 'Line') {
+					const migrated = migrate_svelte_ignore(comment.value);
+					if (migrated !== comment.value) {
+						state.str.overwrite(comment.start + '//'.length, comment.end, migrated);
+					}
+				}
+			}
+		}
+		next();
+	},
 	Identifier(node, { state }) {
 		handle_identifier(node, state);
 	},
@@ -474,6 +490,12 @@ const template = {
 		} else {
 			state.str.update(node.start, node.end, `{@render ${name}?.(${slot_props})}`);
 		}
+	},
+	Comment(node, { state }) {
+		const migrated = migrate_svelte_ignore(node.data);
+		if (migrated !== node.data) {
+			state.str.overwrite(node.start + '<!--'.length, node.end - '-->'.length, migrated);
+		}
 	}
 };
 

packages/svelte/src/compiler/phases/1-parse/index.js

@@ -7,7 +7,7 @@ import full_char_code_at from './utils/full_char_code_at.js';
 import * as e from '../../errors.js';
 import { create_fragment } from './utils/create.js';
 import read_options from './read/options.js';
-import { getLocator } from 'locate-character';
+import { locator } from '../../state.js';
 
 const regex_position_indicator = / \(\d+:\d+\)$/;
 
@@ -42,16 +42,13 @@ export class Parser {
 	/** @type {LastAutoClosedTag | undefined} */
 	last_auto_closed_tag;
 
-	locate;
-
 	/** @param {string} template */
 	constructor(template) {
 		if (typeof template !== 'string') {
 			throw new TypeError('Template must be a string');
 		}
 
 		this.template = template.trimEnd();
-		this.locate = getLocator(this.template, { offsetLine: 1 });
 
 		let match_lang;
 
@@ -137,18 +134,6 @@ export class Parser {
 		}
 	}
 
-	/**
-	 * offset -> line/column
-	 * @param {number} start
-	 * @param {number} end
-	 */
-	get_location(start, end) {
-		return {
-			start: /** @type {import('locate-character').Location_1} */ (this.locate(start)),
-			end: /** @type {import('locate-character').Location_1} */ (this.locate(end))
-		};
-	}
-
 	current() {
 		return this.stack[this.stack.length - 1];
 	}

packages/svelte/src/compiler/phases/1-parse/read/context.js

@@ -10,6 +10,7 @@ import {
 import { parse_expression_at } from '../acorn.js';
 import { regex_not_newline_characters } from '../../patterns.js';
 import * as e from '../../../errors.js';
+import { locator } from '../../../state.js';
 
 /**
  * @param {import('../index.js').Parser} parser
@@ -29,7 +30,10 @@ export default function read_pattern(parser, optional_allowed = false) {
 			type: 'Identifier',
 			name,
 			start,
-			loc: parser.get_location(start, parser.index),
+			loc: {
+				start: /** @type {import('locate-character').Location} */ (locator(start)),
+				end: /** @type {import('locate-character').Location} */ (locator(parser.index))
+			},
 			end: parser.index,
 			typeAnnotation: annotation
 		};