WIP

sveltejs · Rich-Harris · Jun 15, 2025 · Jun 16, 2025 · Jun 16, 2025 · Jun 16, 2025
commit 486d10c8806482940d15435a3c87d66a37a89525
diff --git a/packages/svelte/scripts/process-messages/index.js b/packages/svelte/scripts/process-messages/index.js
@@ -4,6 +4,7 @@ import fs from 'node:fs';
 import * as acorn from 'acorn';
 import { walk } from 'zimmerframe';
 import * as esrap from 'esrap';
+import ts from 'esrap/languages/ts';
 
 const DIR = '../../documentation/docs/98-reference/.generated';
 
@@ -98,55 +99,18 @@ function run() {
 			.replace(/\r\n/g, '\n');
 
 		/**
-		 * @type {Array<{
-		 * 	type: string;
-		 * 	value: string;
-		 * 	start: number;
-		 * 	end: number
-		 * }>}
+		 * @type {any[]}
 		 */
 		const comments = [];
 
 		let ast = acorn.parse(source, {
 			ecmaVersion: 'latest',
 			sourceType: 'module',
-			onComment: (block, value, start, end) => {
-				if (block && /\n/.test(value)) {
-					let a = start;
-					while (a > 0 && source[a - 1] !== '\n') a -= 1;
-
-					let b = a;
-					while (/[ \t]/.test(source[b])) b += 1;
-
-					const indentation = source.slice(a, b);
-					value = value.replace(new RegExp(`^${indentation}`, 'gm'), '');
-				}
-
-				comments.push({ type: block ? 'Block' : 'Line', value, start, end });
-			}
+			locations: true,
+			onComment: comments
 		});
 
 		ast = walk(ast, null, {
-			_(node, { next }) {
-				let comment;
-
-				while (comments[0] && comments[0].start < node.start) {
-					comment = comments.shift();
-					// @ts-expect-error
-					(node.leadingComments ||= []).push(comment);
-				}
-
-				next();
-
-				if (comments[0]) {
-					const slice = source.slice(node.end, comments[0].start);
-
-					if (/^[,) \t]*$/.test(slice)) {
-						// @ts-expect-error
-						node.trailingComments = [comments.shift()];
-					}
-				}
-			},
 			// @ts-expect-error
 			Identifier(node, context) {
 				if (node.name === 'CODES') {
@@ -161,11 +125,6 @@ function run() {
 			}
 		});
 
-		if (comments.length > 0) {
-			// @ts-expect-error
-			(ast.trailingComments ||= []).push(...comments);
-		}
-
 		const category = messages[name];
 
 		// find the `export function CODE` node
@@ -184,6 +143,16 @@ function run() {
 		const template_node = ast.body[index];
 		ast.body.splice(index, 1);
 
+		const jsdoc = comments.findLast((comment) => comment.start < template_node.start);
+
+		const printed = esrap.print(
+			ast,
+			// @ts-expect-error
+			ts({
+				comments: comments.filter((comment) => comment !== jsdoc)
+			})
+		);
+
 		for (const code in category) {
 			const { messages } = category[code];
 			/** @type {string[]} */
@@ -273,41 +242,6 @@ function run() {
 			}
 
 			const clone = walk(/** @type {import('estree').Node} */ (template_node), null, {
-				// @ts-expect-error Block is a block comment, which is not recognised
-				Block(node, context) {
-					if (!node.value.includes('PARAMETER')) return;
-
-					const value = /** @type {string} */ (node.value)
-						.split('\n')
-						.map((line) => {
-							if (line === ' * MESSAGE') {
-								return messages[messages.length - 1]
-									.split('\n')
-									.map((line) => ` * ${line}`)
-									.join('\n');
-							}
-
-							if (line.includes('PARAMETER')) {
-								return vars
-									.map((name, i) => {
-										const optional = i >= group[0].vars.length;
-
-										return optional
-											? ` * @param {string | undefined | null} [${name}]`
-											: ` * @param {string} ${name}`;
-									})
-									.join('\n');
-							}
-
-							return line;
-						})
-						.filter((x) => x !== '')
-						.join('\n');
-
-					if (value !== node.value) {
-						return { ...node, value };
-					}
-				},
 				FunctionDeclaration(node, context) {
 					if (node.id.name !== 'CODE') return;
 
@@ -394,16 +328,49 @@ function run() {
 				}
 			});
 
+			const jsdoc_clone = {
+				...jsdoc,
+				value: /** @type {string} */ (jsdoc.value)
+					.split('\n')
+					.map((line) => {
+						if (line === ' * MESSAGE') {
+							return messages[messages.length - 1]
+								.split('\n')
+								.map((line) => ` * ${line}`)
+								.join('\n');
+						}
+
+						if (line.includes('PARAMETER')) {
+							return vars
+								.map((name, i) => {
+									const optional = i >= group[0].vars.length;
+
+									return optional
+										? ` * @param {string | undefined | null} [${name}]`
+										: ` * @param {string} ${name}`;
+								})
+								.join('\n');
+						}
+
+						return line;
+					})
+					.filter((x) => x !== '')
+					.join('\n')
+			};
+
+			// @ts-expect-error
+			const block = esrap.print({ ...ast, body: [clone] }, ts({ comments: [jsdoc_clone] })).code;
+
+			printed.code += `\n\n${block}`;
+
 			// @ts-expect-error
 			ast.body.push(clone);
 		}
 
-		const module = esrap.print(ast);
-
 		fs.writeFileSync(
 			dest,
 			`/* This file is generated by scripts/process-messages/index.js. Do not edit! */\n\n` +
-				module.code,
+				printed.code,
 			'utf-8'
 		);
 	}

diff --git a/packages/svelte/src/compiler/errors.js b/packages/svelte/src/compiler/errors.js
@@ -4,21 +4,25 @@ import { CompileDiagnostic } from './utils/compile_diagnostic.js';
 
 /** @typedef {{ start?: number, end?: number }} NodeLike */
 class InternalCompileError extends Error {
-	message = ''; // ensure this property is enumerable
+	message = '';
+
+	// ensure this property is enumerable
 	#diagnostic;
 
 	/**
-	 * @param {string} code
-	 * @param {string} message
-	 * @param {[number, number] | undefined} position
-	 */
+		 * @param {string} code
+		 * @param {string} message
+		 * @param {[number, number] | undefined} position
+		 */
 	constructor(code, message, position) {
 		super(message);
 		this.stack = ''; // avoid unnecessary noise; don't set it as a class property or it becomes enumerable
+
 		// We want to extend from Error so that various bundler plugins properly handle it.
 		// But we also want to share the same object shape with that of warnings, therefore
 		// we create an instance of the shared class an copy over its properties.
 		this.#diagnostic = new CompileDiagnostic(code, message, position);
+
 		Object.assign(this, this.#diagnostic);
 		this.name = 'CompileError';
 	}
@@ -816,7 +820,9 @@ export function bind_invalid_expression(node) {
  * @returns {never}
  */
 export function bind_invalid_name(node, name, explanation) {
-	e(node, 'bind_invalid_name', `${explanation ? `\`bind:${name}\` is not a valid binding. ${explanation}` : `\`bind:${name}\` is not a valid binding`}\nhttps://svelte.dev/e/bind_invalid_name`);
+	e(node, 'bind_invalid_name', `${explanation
+		? `\`bind:${name}\` is not a valid binding. ${explanation}`
+		: `\`bind:${name}\` is not a valid binding`}\nhttps://svelte.dev/e/bind_invalid_name`);
 }
 
 /**

diff --git a/packages/svelte/src/compiler/index.js b/packages/svelte/src/compiler/index.js
@@ -11,6 +11,7 @@ import { transform_component, transform_module } from './phases/3-transform/inde
 import { validate_component_options, validate_module_options } from './validate-options.js';
 import * as state from './state.js';
 export { default as preprocess } from './preprocess/index.js';
+export { print } from './print/index.js';
 
 /**
  * `compile` converts your `.svelte` source code into a JavaScript module that exports a component

diff --git a/packages/svelte/src/compiler/legacy.js b/packages/svelte/src/compiler/legacy.js
@@ -451,6 +451,7 @@ export function convert(source, ast) {
 			SpreadAttribute(node) {
 				return { ...node, type: 'Spread' };
 			},
+			// @ts-ignore
 			StyleSheet(node, context) {
 				return {
 					...node,

diff --git a/packages/svelte/src/compiler/phases/3-transform/index.js b/packages/svelte/src/compiler/phases/3-transform/index.js
@@ -1,6 +1,7 @@
 /** @import { ValidatedCompileOptions, CompileResult, ValidatedModuleCompileOptions } from '#compiler' */
 /** @import { ComponentAnalysis, Analysis } from '../types' */
 import { print } from 'esrap';
+import ts from 'esrap/languages/ts';
 import { VERSION } from '../../../version.js';
 import { server_component, server_module } from './server/transform-server.js';
 import { client_component, client_module } from './client/transform-client.js';
@@ -34,7 +35,8 @@ export function transform_component(analysis, source, options) {
 
 	const js_source_name = get_source_name(options.filename, options.outputFilename, 'input.svelte');
 
-	const js = print(program, {
+	// @ts-ignore TODO
+	const js = print(program, ts(), {
 		// include source content; makes it easier/more robust looking up the source map code
 		// (else esrap does return null for source and sourceMapContent which may trip up tooling)
 		sourceMapContent: source,
@@ -94,7 +96,8 @@ export function transform_module(analysis, source, options) {
 	}
 
 	return {
-		js: print(program, {
+		// @ts-expect-error
+		js: print(program, ts(), {
 			// include source content; makes it easier/more robust looking up the source map code
 			// (else esrap does return null for source and sourceMapContent which may trip up tooling)
 			sourceMapContent: source,