chore: align warning and error objects, add frame property

This aligns warning and error objects to contain the same properties and have their toString methods return the same shape. It also adds back the `frame` property that got lost in the Svelte 4->5 transition. The only difference to Svelte 4 now is a slightly adjusted toString property (which is consistent between warnings and errors now) and a `position` property that contains a tuple of start/end offsets instead of a `pos` property only containing the start offset

closes #12151

Author: dummdidumm

.changeset/small-owls-remain.md

@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+chore: align warning and error objects, add frame property

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

@@ -1,54 +1,43 @@
 /** @import { Location } from 'locate-character' */
 import * as state from './state.js';
+import { get_code_frame } from './utils/get_code_frame.js';
+import { error_to_string } from './utils/error_to_string.js';
 
 /** @typedef {{ start?: number, end?: number }} NodeLike */
 
 export class InternalCompileError extends Error {
 	name = 'CompileError';
-
 	filename = state.filename;
-
 	/** @type {[number, number] | undefined} */
 	position = undefined;
-
 	/** @type {Location | undefined} */
 	start = undefined;
-
 	/** @type {Location | undefined} */
 	end = undefined;
+	/** @type {string | undefined} */
+	frame = undefined;
 
 	/**
-	 *
 	 * @param {string} code
 	 * @param {string} message
 	 * @param {[number, number] | undefined} position
 	 */
 	constructor(code, message, position) {
 		super(message);
-
 		this.code = code;
 		this.position = position;
 
 		if (position) {
 			this.start = state.locator(position[0]);
 			this.end = state.locator(position[1]);
+			if (this.start && this.end) {
+				this.frame = get_code_frame(state.source, this.start.line - 1, this.end.column);
+			}
 		}
 	}
 
 	toString() {
-		let out = `${this.name}: ${this.message}`;
-
-		out += `\n(${this.code})`;
-
-		if (this.filename) {
-			out += `\n${this.filename}`;
-
-			if (this.start) {
-				out += `${this.start.line}:${this.start.column}`;
-			}
-		}
-
-		return out;
+		return error_to_string(this.code, this.message, this.filename, this.start, this.frame);
 	}
 }
 

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

@@ -1,4 +1,6 @@
-import { filename, locator, warnings, ignore_stack, ignore_map } from './state.js';
+import { filename, locator, warnings, ignore_stack, ignore_map, source } from './state.js';
+import { get_code_frame } from './utils/get_code_frame.js';
+import { error_to_string } from './utils/error_to_string.js';
 
 /** @typedef {{ start?: number, end?: number }} NodeLike */
 
@@ -14,12 +16,19 @@ function w(node, code, message) {
 	}
 	if (stack && stack.at(-1)?.has(code)) return;
 
+	const start = node?.start !== undefined ? locator(node.start) : undefined;
+	const frame = start && get_code_frame(source, start.line - 1, start.column);
+
 	warnings.push({
 		code,
 		message,
 		filename,
-		start: node?.start !== undefined ? locator(node.start) : undefined,
-		end: node?.end !== undefined ? locator(node.end) : undefined
+		position:
+			node?.start !== undefined && node?.end !== undefined ? [node.start, node.end] : undefined,
+		start,
+		end: node?.end !== undefined ? locator(node.end) : undefined,
+		frame,
+		toString: () => error_to_string(code, message, filename, start, frame)
 	});
 }
 

packages/svelte/src/compiler/errors.js

@@ -2,6 +2,8 @@
 
 /** @import { Location } from 'locate-character' */
 import * as state from './state.js';
+import { get_code_frame } from './utils/get_code_frame.js';
+import { error_to_string } from './utils/error_to_string.js';
 
 /** @typedef {{ start?: number, end?: number }} NodeLike */
 export class InternalCompileError extends Error {
@@ -13,9 +15,10 @@ export class InternalCompileError extends Error {
 	start = undefined;
 	/** @type {Location | undefined} */
 	end = undefined;
+	/** @type {string | undefined} */
+	frame = undefined;
 
 	/**
-	 *
 	 * @param {string} code
 	 * @param {string} message
 	 * @param {[number, number] | undefined} position
@@ -28,23 +31,15 @@ export class InternalCompileError extends Error {
 		if (position) {
 			this.start = state.locator(position[0]);
 			this.end = state.locator(position[1]);
-		}
-	}
-
-	toString() {
-		let out = `${this.name}: ${this.message}`;
 
-		out += `\n(${this.code})`;
-
-		if (this.filename) {
-			out += `\n${this.filename}`;
-
-			if (this.start) {
-				out += `${this.start.line}:${this.start.column}`;
+			if (this.start && this.end) {
+				this.frame = get_code_frame(state.source, this.start.line - 1, this.end.column);
 			}
 		}
+	}
 
-		return out;
+	toString() {
+		return error_to_string(this.code, this.message, this.filename, this.start, this.frame);
 	}
 }
 

packages/svelte/src/compiler/state.js

@@ -14,6 +14,12 @@ export let warnings = [];
  */
 export let filename;
 
+/**
+ * The original source code
+ * @type {string}
+ */
+export let source;
+
 export let locator = getLocator('', { offsetLine: 1 });
 
 /**
@@ -43,10 +49,11 @@ export function pop_ignore() {
 }
 
 /**
- * @param {string} source
+ * @param {string} _source
  * @param {{ filename?: string, rootDir?: string }} options
  */
-export function reset(source, options) {
+export function reset(_source, options) {
+	source = _source;
 	const root_dir = options.rootDir?.replace(/\\/g, '/');
 	filename = options.filename?.replace(/\\/g, '/');
 

packages/svelte/src/compiler/types/index.d.ts

@@ -52,12 +52,13 @@ export interface CompileResult {
 }
 
 export interface Warning {
-	start?: Location;
-	end?: Location;
-	// TODO there was pos: number in Svelte 4 - do we want to add it back?
 	code: string;
 	message: string;
 	filename?: string;
+	start?: Location;
+	end?: Location;
+	position?: [number, number];
+	frame?: string;
 }
 
 export interface CompileError extends InternalCompileError {}

packages/svelte/src/compiler/utils/error_to_string.js

@@ -0,0 +1,24 @@
+/**
+ * @param {string} code
+ * @param {string} message
+ * @param {string | undefined} filename
+ * @param {import("locate-character").Location | undefined} start
+ * @param {string | undefined} frame
+ */
+export function error_to_string(code, message, filename, start, frame) {
+	let out = `${code}: ${message}`;
+
+	if (filename) {
+		out += `\n${filename}`;
+
+		if (start) {
+			out += `:${start.line}:${start.column}`;
+		}
+	}
+
+	if (frame) {
+		out += `\n${frame}`;
+	}
+
+	return out;
+}

packages/svelte/src/compiler/utils/get_code_frame.js

@@ -0,0 +1,33 @@
+const regex_tabs = /^\t+/;
+
+/**
+ * @param {string} str
+ */
+function tabs_to_spaces(str) {
+	return str.replace(regex_tabs, (match) => match.split('\t').join('  '));
+}
+
+/**
+ * @param {string} source
+ * @param {number} line
+ * @param {number} column
+ */
+export function get_code_frame(source, line, column) {
+	const lines = source.split('\n');
+	const frame_start = Math.max(0, line - 2);
+	const frame_end = Math.min(line + 3, lines.length);
+	const digits = String(frame_end + 1).length;
+	return lines
+		.slice(frame_start, frame_end)
+		.map((str, i) => {
+			const is_error_line = frame_start + i === line;
+			const line_num = String(i + frame_start + 1).padStart(digits, ' ');
+			if (is_error_line) {
+				const indicator =
+					' '.repeat(digits + 2 + tabs_to_spaces(str.slice(0, column)).length) + '^';
+				return `${line_num}: ${tabs_to_spaces(str)}\n${indicator}`;
+			}
+			return `${line_num}: ${tabs_to_spaces(str)}`;
+		})
+		.join('\n');
+}

packages/svelte/src/compiler/warnings.js

@@ -5,9 +5,13 @@ import {
 	locator,
 	warnings,
 	ignore_stack,
-	ignore_map
+	ignore_map,
+	source
 } from './state.js';
 
+import { get_code_frame } from './utils/get_code_frame.js';
+import { error_to_string } from './utils/error_to_string.js';
+
 /** @typedef {{ start?: number, end?: number }} NodeLike */
 /**
  * @param {null | NodeLike} node
@@ -23,12 +27,18 @@ function w(node, code, message) {
 
 	if (stack && stack.at(-1)?.has(code)) return;
 
+	const start = node?.start !== undefined ? locator(node.start) : undefined;
+	const frame = start && get_code_frame(source, start.line - 1, start.column);
+
 	warnings.push({
 		code,
 		message,
 		filename,
-		start: node?.start !== undefined ? locator(node.start) : undefined,
-		end: node?.end !== undefined ? locator(node.end) : undefined
+		position: node?.start !== undefined && node?.end !== undefined ? [node.start, node.end] : undefined,
+		start,
+		end: node?.end !== undefined ? locator(node.end) : undefined,
+		frame,
+		toString: () => error_to_string(code, message, filename, start, frame)
 	});
 }
 

packages/svelte/tests/css/test.ts

@@ -10,6 +10,8 @@ import type { CompileOptions, Warning } from '#compiler';
 
 function normalize_warning(warning: Warning) {
 	delete warning.filename;
+	delete warning.position;
+	delete warning.frame;
 	return warning;
 }
 

packages/svelte/types/index.d.ts

@@ -1892,6 +1892,8 @@ declare module 'svelte/compiler' {
 		start: Location | undefined;
 
 		end: Location | undefined;
+		
+		frame: string | undefined;
 		code: string;
 	}