fix: account for sourcemap in meta info

.changeset/silly-ladybugs-marry.md

@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: account for preprocessor source maps when calculating meta info

.prettierrc

@@ -12,7 +12,7 @@
 			}
 		},
 		{
-			"files": ["README.md", "packages/*/README.md"],
+			"files": ["README.md", "packages/*/README.md", "**/package.json"],
 			"options": {
 				"useTabs": false,
 				"tabWidth": 2

packages/svelte/package.json

@@ -100,6 +100,7 @@
   "dependencies": {
     "@ampproject/remapping": "^2.2.1",
     "@jridgewell/sourcemap-codec": "^1.4.15",
+    "@jridgewell/trace-mapping": "^0.3.18",
     "acorn": "^8.8.2",
     "aria-query": "^5.2.1",
     "axobject-query": "^3.2.1",
@@ -132,4 +133,4 @@
     "typescript": "^5.0.4",
     "vitest": "^0.31.1"
   }
-}
+}

packages/svelte/src/compiler/compile/Component.js

@@ -1,3 +1,4 @@
+import { TraceMap, originalPositionFor } from '@jridgewell/trace-mapping';
 import { walk } from 'estree-walker';
 import { getLocator } from 'locate-character';
 import { reserved, is_valid } from '../utils/names.js';
@@ -142,9 +143,20 @@ export default class Component {
 	/** @type {string} */
 	file;
 
-	/** @type {(c: number) => { line: number; column: number }} */
+	/**
+	 * Use this for stack traces. It is 1-based and acts on pre-processed sources.
+	 * Use `meta_locate` for metadata on DOM elements.
+	 * @type {(c: number) => { line: number; column: number }}
+	 */
 	locate;
 
+	/**
+	 * Use this for metadata on DOM elements. It is 1-based and acts on sources that have not been pre-processed.
+	 * Use `locate` for source mappings.
+	 * @type {(c: number) => { line: number; column: number }}
+	 */
+	meta_locate;
+
 	/** @type {import('./nodes/Element.js').default[]} */
 	elements = [];
 
@@ -199,7 +211,25 @@ export default class Component {
 						.replace(process.cwd(), '')
 						.replace(regex_leading_directory_separator, '')
 				: compile_options.filename);
+
+		// line numbers in stack trace frames are 1-based. source maps are 0-based
 		this.locate = getLocator(this.source, { offsetLine: 1 });
+		/** @type {TraceMap | null | undefined} initialise lazy because only used in dev mode */
+		let tracer;
+		this.meta_locate = (c) => {
+			/** @type {{ line: number, column: number }} */
+			let location = this.locate(c);
+			if (tracer === undefined) {
+				// @ts-expect-error - fix the type of CompileOptions.sourcemap
+				tracer = compile_options.sourcemap ? new TraceMap(compile_options.sourcemap) : null;
+			}
+			if (tracer) {
+				// originalPositionFor returns 1-based lines like locator
+				location = originalPositionFor(tracer, location);
+			}
+			return location;
+		};
+
 		// styles
 		this.stylesheet = new Stylesheet({
 			source,

packages/svelte/src/compiler/compile/render_dom/Renderer.js

@@ -62,9 +62,20 @@ export default class Renderer {
 	/** @type {import('estree').Identifier} */
 	file_var;
 
-	/** @type {(c: number) => { line: number; column: number }} */
+	/**
+	 * Use this for stack traces. It is 1-based and acts on pre-processed sources.
+	 * Use `meta_locate` for metadata on DOM elements.
+	 * @type {(c: number) => { line: number; column: number }}
+	 */
 	locate;
 
+	/**
+	 * Use this for metadata on DOM elements. It is 1-based and acts on sources that have not been pre-processed.
+	 * Use `locate` for source mappings.
+	 * @type {(c: number) => { line: number; column: number }}
+	 */
+	meta_locate;
+
 	/**
 	 * @param {import('../Component.js').default} component
 	 * @param {import('../../interfaces.js').CompileOptions} options
@@ -73,6 +84,7 @@ export default class Renderer {
 		this.component = component;
 		this.options = options;
 		this.locate = component.locate; // TODO messy
+		this.meta_locate = component.meta_locate; // TODO messy
 		this.file_var = options.dev && this.component.get_unique_name('file');
 		component.vars
 			.filter((v) => !v.hoistable || (v.export_name && !v.module))

packages/svelte/src/compiler/compile/render_dom/wrappers/Element/index.js

@@ -585,9 +585,11 @@ export default class ElementWrapper extends Wrapper {
 			);
 		}
 		if (renderer.options.dev) {
-			const loc = renderer.locate(this.node.start);
+			const loc = renderer.meta_locate(this.node.start);
 			block.chunks.hydrate.push(
 				b`@add_location(${this.var}, ${renderer.file_var}, ${loc.line - 1}, ${loc.column}, ${
+					// TODO this.node.start isn't correct if there's a source map. But since we don't know how the
+					// original source file looked, there's not much we can do.
 					this.node.start
 				});`
 			);

packages/svelte/test/runtime/samples/element-source-location-preprocessed/_config.js

@@ -0,0 +1,33 @@
+import MagicString from 'magic-string';
+import * as path from 'node:path';
+
+// fake preprocessor by doing transforms on the source
+const str = new MagicString(
+	`<script>
+type Foo = 'foo';
+let foo = 'foo';
+</script>
+
+ <h1>{foo}</h1>
+`.replace(/\r\n/g, '\n')
+);
+str.remove(8, 26); // remove line type Foo = ...
+str.remove(55, 56); // remove whitespace before <h1>
+
+export default {
+	compileOptions: {
+		dev: true,
+		sourcemap: str.generateMap({ hires: true })
+	},
+
+	test({ assert, target }) {
+		const h1 = target.querySelector('h1');
+
+		assert.deepEqual(h1.__svelte_meta.loc, {
+			file: path.relative(process.cwd(), path.resolve(__dirname, 'main.svelte')),
+			line: 5, // line 4 in main.svelte, but that's the preprocessed code, the original code is above in the fake preprocessor
+			column: 1, // line 0 in main.svelte, but that's the preprocessed code, the original code is above in the fake preprocessor
+			char: 38 // TODO this is wrong but we can't backtrace it due to limitations, see add_location function usage comment for more info
+		});
+	}
+};

packages/svelte/test/runtime/samples/element-source-location-preprocessed/main.svelte

@@ -0,0 +1,5 @@
+<script>
+	let foo = 'foo';
+</script>
+
+<h1>{foo}</h1>