chore: align warning and error objects, add frame property

.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,14 @@ 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;
+	toString(): 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

@@ -715,12 +715,14 @@ declare module 'svelte/compiler' {
 	}
 
 	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;
+		toString(): string;
 	}
 
 	export interface CompileError extends InternalCompileError {}
@@ -1892,6 +1894,8 @@ declare module 'svelte/compiler' {
 		start: Location | undefined;
 
 		end: Location | undefined;
+
+		frame: string | undefined;
 		code: string;
 	}
 
@@ -2540,12 +2544,14 @@ declare module 'svelte/types/compiler/interfaces' {
 	/** @deprecated import this from 'svelte' instead */
 	export type Warning = Warning_1;
 	interface Warning_1 {
-		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;
+		toString(): string;
 	}
 
 	type CssHashGetter = (args: {