fix: preserve node locations for better sourcemaps (#17269)

* preserve node locations * preserve component IDs * update tests * use IDs for elements * more * WIP * WIP * WIP * WIP * WIP * WIP * WIP * WIP * WIP * WIP * WIP * WIP * WIP * WIP * WIP * WIP * WIP * WIP * WIP * WIP * tweak * tidy up * changeset * oops

Author: Rich-Harris

.changeset/gentle-views-matter.md

@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: preserve node locations for better sourcemaps

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

@@ -1,4 +1,6 @@
 /** @import { AST } from '#compiler' */
+/** @import { Location } from 'locate-character' */
+/** @import * as ESTree from 'estree' */
 // @ts-expect-error acorn type definitions are borked in the release we use
 import { isIdentifierStart, isIdentifierChar } from 'acorn';
 import fragment from './state/fragment.js';
@@ -218,31 +220,45 @@ export class Parser {
 return result;
 }
 
-/** @param {any} allow_reserved */
-read_identifier(allow_reserved = false) {
+/**
+ * @returns {ESTree.Identifier & { start: number, end: number, loc: { start: Location, end: Location } }}
+ */
+read_identifier() {
 const start = this.index;
+let end = start;
+let name = '';
 
-let i = this.index;
+const code = /** @type {number} */ (this.template.codePointAt(this.index));
 
-const code = /** @type {number} */ (this.template.codePointAt(i));
-if (!isIdentifierStart(code, true)) return null;
+if (isIdentifierStart(code, true)) {
+let i = this.index;
+end += code <= 0xffff ? 1 : 2;
 
-i += code <= 0xffff ? 1 : 2;
+while (end < this.template.length) {
+const code = /** @type {number} */ (this.template.codePointAt(end));
 
-while (i < this.template.length) {
-const code = /** @type {number} */ (this.template.codePointAt(i));
-
-if (!isIdentifierChar(code, true)) break;
-i += code <= 0xffff ? 1 : 2;
-}
+if (!isIdentifierChar(code, true)) break;
+end += code <= 0xffff ? 1 : 2;
+}
 
-const identifier = this.template.slice(this.index, (this.index = i));
+name = this.template.slice(start, end);
+this.index = end;
 
-if (!allow_reserved && is_reserved(identifier)) {
-e.unexpected_reserved_word(start, identifier);
+if (is_reserved(name)) {
+e.unexpected_reserved_word(start, name);
+}
 }
 
-return identifier;
+return {
+type: 'Identifier',
+name,
+start,
+end,
+loc: {
+start: state.locator(start),
+end: state.locator(end)
+}
+};
 }
 
 /** @param {RegExp} pattern */

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

@@ -1,11 +1,9 @@
-/** @import { Location } from 'locate-character' */
 /** @import { Pattern } from 'estree' */
 /** @import { Parser } from '../index.js' */
 import { match_bracket } from '../utils/bracket.js';
 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 {Parser} parser
@@ -15,20 +13,13 @@ export default function read_pattern(parser) {
 const start = parser.index;
 let i = parser.index;
 
-const name = parser.read_identifier();
+const id = parser.read_identifier();
 
-if (name !== null) {
+if (id.name !== '') {
 const annotation = read_type_annotation(parser);
 
 return {
-type: 'Identifier',
-name,
-start,
-loc: {
-start: /** @type {Location} */ (locator(start)),
-end: /** @type {Location} */ (locator(parser.index))
-},
-end: parser.index,
+...id,
 typeAnnotation: annotation
 };
 }