ripple 0.2.137 → 0.2.138

package/package.json

@@ -3,7 +3,7 @@
   "description": "Ripple is an elegant TypeScript UI framework",
   "license": "MIT",
   "author": "Dominic Gannaway",
-  "version": "0.2.137",
+  "version": "0.2.138",
   "type": "module",
   "module": "src/runtime/index-client.js",
   "main": "src/runtime/index-client.js",
@@ -81,6 +81,6 @@
     "typescript": "^5.9.2"
   },
   "peerDependencies": {
-    "ripple": "0.2.137"
+    "ripple": "0.2.138"
   }
 }

package/src/compiler/index.js

@@ -32,37 +32,26 @@ export function compile(source, filename, options = {}) {
   return result;
 }
 
+/** @import { PostProcessingChanges, LineOffsets } from './phases/3-transform/client/index.js' */
+
 /**
- * Compile Ripple source to Volar mappings for editor integration
+ * Compile Ripple component to Volar virtual code with TypeScript mappings
  * @param {string} source
  * @param {string} filename
  * @returns {object} Volar mappings object
  */
 export function compile_to_volar_mappings(source, filename) {
-  // Parse and transform
   const ast = parse_module(source);
-
-  // Add unique IDs to import declarations before transformation
-  // This allows us to match source imports with generated imports reliably
-	// This strategy can potentially be used for other node types in the future
-  let gen_id = 0;
-  const source_import_map = new Map();
-  for (const node of ast.body) {
-    if (node.type === 'ImportDeclaration') {
-      const start = /** @type {any} */ (node).start;
-      const end = /** @type {any} */ (node).end;
-      if (start !== undefined && end !== undefined) {
-        // Add a unique ID as a string property that will be copied during transformation
-        const id = `__volar_import_${gen_id++}__`;
-        /** @type {any} */ (node).__volar_id = id;
-        source_import_map.set(id, { start, end });
-      }
-    }
-  }
-
-  const analysis = analyze(ast, filename);
+  const analysis = analyze(ast, filename, {});
   const transformed = transform_client(filename, source, analysis, true);
 
-  // Create volar mappings directly from the AST instead of relying on esrap's sourcemap
-  return convert_source_map_to_mappings(transformed.ast, source, transformed.js.code, source_import_map);
+  // Create volar mappings with esrap source map for accurate positioning
+  return convert_source_map_to_mappings(
+    transformed.ast,
+    source,
+    transformed.js.code,
+    transformed.js.map,
+    /** @type {PostProcessingChanges} */ (transformed.js.post_processing_changes),
+    /** @type {LineOffsets} */ (transformed.js.line_offsets)
+  );
 }

package/src/compiler/phases/3-transform/client/index.js

@@ -1,5 +1,8 @@
 /** @import {Expression, FunctionExpression, Node, Program} from 'estree' */
 
+/** @typedef {Map<number, {offset: number, delta: number}>} PostProcessingChanges */
+/** @typedef {number[]} LineOffsets */
+
 import { walk } from 'zimmerframe';
 import path from 'node:path';
 import { print } from 'esrap';
@@ -2175,8 +2178,57 @@ function create_tsx_with_typescript_support() {
 	const base_tsx = tsx();
 
 	// Add custom TypeScript node handlers that aren't in tsx
+
+	// Shared handler for function-like nodes to support component->function mapping
+	// Creates source maps for 'function' keyword by passing node to context.write()
+	const handle_function = (node, context) => {
+		if (node.async) {
+			context.write('async ');
+		}
+		// Write 'function' keyword with node location for source mapping
+		// This creates a mapping from the source position (which may have 'component')
+		// to the generated 'function' keyword
+		context.write('function', node);
+		if (node.generator) {
+			context.write('*');
+		}
+		// FunctionDeclaration always has a space before id, FunctionExpression only if id exists
+		if (node.type === 'FunctionDeclaration' || node.id) {
+			context.write(' ');
+		}
+		if (node.id) {
+			context.visit(node.id);
+		}
+		if (node.typeParameters) {
+			context.visit(node.typeParameters);
+		}
+		context.write('(');
+		for (let i = 0; i < node.params.length; i++) {
+			if (i > 0) context.write(', ');
+			context.visit(node.params[i]);
+		}
+		context.write(')');
+		if (node.returnType) {
+			context.visit(node.returnType);
+		}
+		context.write(' ');
+		if (node.body) {
+			context.visit(node.body);
+		}
+	};
+
 	return {
 		...base_tsx,
+		// Custom handler for FunctionDeclaration to support component->function mapping
+		// Needed for volar mappings and intellisense on function or component keyword
+		FunctionDeclaration(node, context) {
+			handle_function(node, context);
+		},
+		// Custom handler for FunctionExpression to support component->function mapping
+		// This is used for components transformed by the Component visitor
+		FunctionExpression(node, context) {
+			handle_function(node, context);
+		},
 		// Custom handler for TSParenthesizedType: (Type)
 		TSParenthesizedType(node, context) {
 			context.write('(');
@@ -2216,13 +2268,14 @@ function create_tsx_with_typescript_support() {
 			context.write(' }');
 		},
 		// Custom handler for TSTypeParameter: K in T (for mapped types)
-		// acord ts has a bug where `in` is printed as `extends`, so we override it here
+		// acorn-ts has a bug where `in` is printed as `extends`, so we override it here
 		TSTypeParameter(node, context) {
 			// For mapped types, the name is just a string, not an Identifier node
+			// Pass the node as second parameter to context.write() to create source map entry
 			if (typeof node.name === 'string') {
-				context.write(node.name);
+				context.write(node.name, node);
 			} else if (node.name && node.name.name) {
-				context.write(node.name.name);
+				context.write(node.name.name, node.name);
 			}
 			if (node.constraint) {
 				context.write(' in ');
@@ -2268,6 +2321,14 @@ function create_tsx_with_typescript_support() {
 	};
 }
 
+/**
+ * Transform Ripple AST to JavaScript/TypeScript
+ * @param {string} filename - Source filename
+ * @param {string} source - Original source code
+ * @param {any} analysis - Analysis result
+ * @param {boolean} to_ts - Whether to generate TypeScript output
+ * @returns {{ ast: any, js: { code: string, map: any, post_processing_changes?: PostProcessingChanges, line_offsets?: LineOffsets }, css: any }}
+ */
 export function transform_client(filename, source, analysis, to_ts) {
 	/**
 	 * User's named imports from 'ripple' so we can reuse them in TS output
@@ -2333,18 +2394,78 @@ export function transform_client(filename, source, analysis, to_ts) {
 		);
 	}
 
-	const js = print(program, to_ts ? create_tsx_with_typescript_support() : tsx(), {
-		sourceMapContent: source,
-		sourceMapSource: path.basename(filename),
-	});
+	const language_handler = to_ts ? create_tsx_with_typescript_support() : tsx();
+
+	const js = /** @type {ReturnType<typeof print> & { post_processing_changes?: PostProcessingChanges, line_offsets?: number[] }} */ (
+		print(program, language_handler, {
+			sourceMapContent: source,
+			sourceMapSource: path.basename(filename),
+		})
+	);
 
 	// Post-process TypeScript output to remove 'declare' from function overload signatures
 	// Function overload signatures in regular .ts files should not have 'declare' keyword
+	// Track changes for source map adjustment - organize them for efficient lookup
+	/** @type {PostProcessingChanges | null} */
+	let post_processing_changes = null;
+	/** @type {LineOffsets} */
+	let line_offsets = [];
+
 	if (to_ts) {
+		// Build line offset map for converting byte offset to line:column
+		line_offsets = [0];
+		for (let i = 0; i < js.code.length; i++) {
+			if (js.code[i] === '\n') {
+				line_offsets.push(i + 1);
+			}
+		}
+
+		/**
+		 * Convert byte offset to line number (1-based)
+		 * @param {number} offset
+		 * @returns {number}
+		 */
+		const offset_to_line = (offset) => {
+			for (let i = 0; i < line_offsets.length; i++) {
+				if (offset >= line_offsets[i] && (i === line_offsets.length - 1 || offset < line_offsets[i + 1])) {
+					return i + 1;
+				}
+			}
+			return 1;
+		};
+
+		/** @type {Map<number, {offset: number, delta: number}>} */
+		const line_deltas = new Map(); // line -> {offset: first change offset, delta: total delta for line}
+
 		// Remove 'export declare function' -> 'export function' (for overloads only, not implementations)
 		// Match: export declare function name(...): type;
 		// Don't match: export declare function name(...): type { (has body)
-		js.code = js.code.replace(/^(export\s+)declare\s+(function\s+\w+[^{\n]*;)$/gm, '$1$2');
+		js.code = js.code.replace(/^(export\s+)declare\s+(function\s+\w+[^{\n]*;)$/gm, (match, p1, p2, offset) => {
+			const replacement = p1 + p2;
+			const line = offset_to_line(offset);
+			const delta = replacement.length - match.length; // negative (removing 'declare ')
+
+			// Track first change offset and total delta per line
+			if (!line_deltas.has(line)) {
+				line_deltas.set(line, { offset, delta });
+			} else {
+				// Additional change on same line - accumulate delta
+				// @ts-ignore
+				line_deltas.get(line).delta += delta;
+			}
+
+			return replacement;
+		});
+
+		post_processing_changes = line_deltas;
+	}
+
+	if (post_processing_changes) {
+		js.post_processing_changes = post_processing_changes;
+	}
+
+	if (line_offsets.length > 0) {
+		js.line_offsets = line_offsets;
 	}
 
 	const css = render_stylesheets(state.stylesheets);

package/src/compiler/phases/3-transform/segments.js

@@ -1,4 +1,5 @@
 import { walk } from 'zimmerframe';
+import { build_source_to_generated_map, get_generated_position } from '../../source-map-utils.js';
 
 export const mapping_data = {
 	verification: true,
@@ -15,21 +16,59 @@ export const mapping_data = {
 	// references: true,
 };
 
+/**
+ * @import { PostProcessingChanges } from './client/index.js';
+ */
+
 /**
  * Create Volar mappings by walking the transformed AST
  * @param {any} ast - The transformed AST
  * @param {string} source - Original source code
- * @param {string} generated_code - Generated code from esrap
- * @param {Map<string, {start: number, end: number}>} [source_import_map] - Map of __volar_id strings to source positions
- * @returns {object}
+ * @param {string} generated_code - Generated code (returned in output, not used for searching)
+ * @param {object} esrap_source_map - Esrap source map for accurate position lookup
+ * @param {PostProcessingChanges } post_processing_changes - Optional post-processing changes
+ * @param {number[]} line_offsets - Pre-computed line offsets array for generated code
+ * @returns {{ code: string, mappings: Array<{sourceOffsets: number[], generatedOffsets: number[], lengths: number[], data: any}> }}
  */
-export function convert_source_map_to_mappings(ast, source, generated_code, source_import_map) {
+export function convert_source_map_to_mappings(ast, source, generated_code, esrap_source_map, post_processing_changes, line_offsets) {
 	/** @type {Array<{sourceOffsets: number[], generatedOffsets: number[], lengths: number[], data: any}>} */
 	const mappings = [];
 
-	// Maintain indices that walk through source and generated code
-	let source_index = 0;
-	let generated_index = 0;
+	// Build line offset maps for source and generated code
+	// This allows us to convert line/column positions to byte offsets
+	const build_line_offsets = (text) => {
+		const offsets = [0]; // Line 1 starts at offset 0
+		for (let i = 0; i < text.length; i++) {
+			if (text[i] === '\n') {
+				offsets.push(i + 1);
+			}
+		}
+		return offsets;
+	};
+	const source_line_offsets = build_line_offsets(source);
+
+	/**
+	 * Convert line/column to byte offset
+	 * @param {number} line
+	 * @param {number} column
+	 * @param {number[]} line_offsets
+	 * @returns {number | null}
+	 */
+	const loc_to_offset = (line, column, line_offsets) => {
+		if (line < 1 || line > line_offsets.length) return null;
+		return line_offsets[line - 1] + column;
+	};
+
+	/**
+	 * Convert generated line/column to byte offset using pre-computed line_offsets
+	 * @param {number} line
+	 * @param {number} column
+	 * @returns {number}
+	 */
+	const gen_loc_to_offset = (line, column) => {
+		if (line === 1) return column;
+		return line_offsets[line - 1] + column;
+	};
 
 	// Map to track capitalized names: original name -> capitalized name
 	/** @type {Map<string, string>} */
@@ -51,144 +90,51 @@ export function convert_source_map_to_mappings(ast, source, generated_code, sour
 		}
 	});
 
-	/**
-	 * Check if character is a word boundary (not alphanumeric or underscore)
-	 * @param {string} char
-	 * @returns {boolean}
-	 */
-	const is_word_boundary = (char) => {
-		return char === undefined || !/[a-zA-Z0-9_$]/.test(char);
-	};
-
-	/**
-	 * Check if a position is inside a comment
-	 * @param {number} pos - Position to check
-	 * @returns {boolean}
-	 */
-	const is_in_comment = (pos) => {
-		// Check for single-line comment: find start of line and check if there's // before this position
-		let lineStart = source.lastIndexOf('\n', pos - 1) + 1;
-		const lineBeforePos = source.substring(lineStart, pos);
-		if (lineBeforePos.includes('//')) {
-			return true;
-		}
-		// Check for multi-line comment: look backwards for /* and forwards for */
-		const lastCommentStart = source.lastIndexOf('/*', pos);
-		if (lastCommentStart !== -1) {
-			const commentEnd = source.indexOf('*/', lastCommentStart);
-			if (commentEnd === -1 || commentEnd > pos) {
-				return true; // We're inside an unclosed or open comment
-			}
-		}
-		return false;
-	};
-
-	/**
-	 * Find text in source string, searching character by character from sourceIndex
-	 * @param {string} text - Text to find
-	 * @returns {number|null} - Source position or null
-	 */
-	const find_in_source = (text) => {
-		for (let i = source_index; i <= source.length - text.length; i++) {
-			let match = true;
-			for (let j = 0; j < text.length; j++) {
-				if (source[i + j] !== text[j]) {
-					match = false;
-					break;
-				}
-			}
-			if (match) {
-				// Skip if this match is inside a comment
-				if (is_in_comment(i)) {
-					continue;
-				}
-
-				// Check word boundaries for identifier-like tokens
-				const isIdentifierLike = /^[a-zA-Z_$]/.test(text);
-				if (isIdentifierLike) {
-					const charBefore = source[i - 1];
-					const charAfter = source[i + text.length];
-					if (!is_word_boundary(charBefore) || !is_word_boundary(charAfter)) {
-						continue; // Not a whole word match, keep searching
-					}
-				}
-
-				source_index = i + text.length;
-				return i;
-			}
-		}
-		return null;
-	};
-
-	/**
-	 * Find text in generated code, searching character by character from generated_index
-	 * @param {string} text - Text to find
-	 * @returns {number|null} - Generated position or null
-	 */
-	const find_in_generated = (text) => {
-		for (let i = generated_index; i <= generated_code.length - text.length; i++) {
-			let match = true;
-			for (let j = 0; j < text.length; j++) {
-				if (generated_code[i + j] !== text[j]) {
-					match = false;
-					break;
-				}
-			}
-			if (match) {
-				// Check word boundaries for identifier-like tokens
-				const isIdentifierLike = /^[a-zA-Z_$]/.test(text);
-				if (isIdentifierLike) {
-					const charBefore = generated_code[i - 1];
-					const charAfter = generated_code[i + text.length];
-					if (!is_word_boundary(charBefore) || !is_word_boundary(charAfter)) {
-						continue; // Not a whole word match, keep searching
-					}
-				}
-
-				generated_index = i + text.length;
-				return i;
-			}
-		}
-		return null;
-	};
+	const adjusted_source_map = build_source_to_generated_map(
+		esrap_source_map,
+		post_processing_changes,
+		line_offsets
+	);
 
 	// Collect text tokens from AST nodes
-	// Tokens can be either strings or objects with source/generated properties
-	/** @type {Array<string | {source: string, generated: string}>} */
+	// All tokens must have source/generated text and loc property for accurate positioning
+	/** @type {Array<{
+		source: string,
+		generated: string,
+		is_import_statement?: boolean,
+		loc: {start: {line: number, column: number}, end: {line: number, column: number}}
+	}>} */
 	const tokens = [];
 
-	// Collect import declarations for full-statement mappings
-	/** @type {Array<{id: string, node: any}>} */
-	const import_declarations = [];
-
 	// We have to visit everything in generated order to maintain correct indices
 	walk(ast, null, {
 		_(node, { visit }) {
 			// Collect key node types: Identifiers, Literals, and JSX Elements
-			// Only collect tokens from nodes with .loc (skip synthesized nodes like children attribute)
+			// Skip nodes without .loc (synthesized during transformation, not in original source)
 			if (node.type === 'Identifier' && node.name) {
 				if (node.loc) {
 					// Check if this identifier has tracked_shorthand metadata (e.g., TrackedMap -> #Map)
 					if (node.metadata?.tracked_shorthand) {
-						tokens.push({ source: node.metadata.tracked_shorthand, generated: node.name });
+						tokens.push({ source: node.metadata.tracked_shorthand, generated: node.name, loc: node.loc });
 					} else {
 						// Check if this identifier was capitalized (reverse lookup)
 						const original_name = reverse_capitalized_names.get(node.name);
 						if (original_name) {
 							// This is a capitalized name in generated code, map to lowercase in source
-							tokens.push({ source: original_name, generated: node.name });
+							tokens.push({ source: original_name, generated: node.name, loc: node.loc });
 						} else {
 							// Check if this identifier should be capitalized (forward lookup)
 							const cap_name = capitalized_names.get(node.name);
 							if (cap_name) {
-								tokens.push({ source: node.name, generated: cap_name });
+								tokens.push({ source: node.name, generated: cap_name, loc: node.loc });
 							} else {
 								// Check if this identifier should be capitalized (forward lookup)
 								const cap_name = capitalized_names.get(node.name);
 								if (cap_name) {
-									tokens.push({ source: node.name, generated: cap_name });
+									tokens.push({ source: node.name, generated: cap_name, loc: node.loc });
 								} else {
-									tokens.push(node.name);
+									// Store token with .loc for accurate positioning
+									tokens.push({ source: node.name, generated: node.name, loc: node.loc });
 								}
 							}
 						}
@@ -200,33 +146,32 @@ export function convert_source_map_to_mappings(ast, source, generated_code, sour
 					// Check if this was capitalized (reverse lookup)
 					const originalName = reverse_capitalized_names.get(node.name);
 					if (originalName) {
-						tokens.push({ source: originalName, generated: node.name });
+						tokens.push({ source: originalName, generated: node.name, loc: node.loc });
 					} else {
 						// Check if this should be capitalized (forward lookup)
 						const capitalizedName = capitalized_names.get(node.name);
 						if (capitalizedName) {
-							tokens.push({ source: node.name, generated: capitalizedName });
+							tokens.push({ source: node.name, generated: capitalizedName, loc: node.loc });
 						} else {
-							tokens.push(node.name);
+							tokens.push({ source: node.name, generated: node.name, loc: node.loc });
 						}
 					}
 				}
 				return; // Leaf node, don't traverse further
 			} else if (node.type === 'Literal' && node.raw) {
 				if (node.loc) {
-					tokens.push(node.raw);
+					tokens.push({ source: node.raw, generated: node.raw, loc: node.loc });
 				}
 				return; // Leaf node, don't traverse further
 			} else if (node.type === 'ImportDeclaration') {
-				// Collect import declaration for full-statement mapping
+				// Add import declaration as a special token for full-statement mapping
 				// TypeScript reports unused imports with diagnostics covering the entire statement
-				// Store the __volar_id - we'll find the generated position later by searching
-				const volar_id = /** @type {any} */ (node).__volar_id;
-				if (volar_id) {
-					import_declarations.push({
-						id: volar_id,
-						// We'll calculate genStart/genEnd later by searching in generated code
-						node: node
+				if (node.loc) {
+					tokens.push({
+						source: '',
+						generated: '',
+						loc: node.loc,
+						is_import_statement: true
 					});
 				}
 
@@ -336,29 +281,37 @@ export function convert_source_map_to_mappings(ast, source, generated_code, sour
 
 				// 3. Push closing tag name (not visited by AST walker)
 				if (!node.openingElement?.selfClosing && node.closingElement?.name?.type === 'JSXIdentifier') {
-					const closingName = node.closingElement.name.name;
+					const closingNameNode = node.closingElement.name;
+					const closingName = closingNameNode.name;
 					// Check if this was capitalized (reverse lookup)
 					const originalName = reverse_capitalized_names.get(closingName);
 					if (originalName) {
-						tokens.push({ source: originalName, generated: closingName });
+						tokens.push({ source: originalName, generated: closingName, loc: closingNameNode.loc });
 					} else {
 						// Check if this should be capitalized (forward lookup)
 						const capitalizedName = capitalized_names.get(closingName);
 						if (capitalizedName) {
-							tokens.push({ source: closingName, generated: capitalizedName });
+							tokens.push({ source: closingName, generated: capitalizedName, loc: closingNameNode.loc });
 						} else {
-							tokens.push(closingName);
+							tokens.push({ source: closingName, generated: closingName, loc: closingNameNode.loc });
 						}
 					}
 				}
 
 				return;
 			} else if (node.type === 'FunctionDeclaration' || node.type === 'FunctionExpression' || node.type === 'ArrowFunctionExpression') {
-				// Map function/component keywords
-				if (node.metadata?.was_component && node.loc) {
-					tokens.push({ source: 'component', generated: 'function' });
-				} else if (node.loc && node.type === 'FunctionDeclaration') {
-					tokens.push('function');
+				// Add function/component keyword token
+				if (node.type === 'FunctionDeclaration' || node.type === 'FunctionExpression') {
+					const source_keyword = node.metadata?.was_component ? 'component' : 'function';
+					// Add token for the keyword - esrap already mapped it via context.write('function', node)
+					tokens.push({
+						source: source_keyword,
+						generated: 'function',
+						loc: {
+							start: { line: node.loc.start.line, column: node.loc.start.column },
+							end: { line: node.loc.start.line, column: node.loc.start.column + source_keyword.length }
+						}
+					});
 				}
 
 				// Visit in source order: id, params, body
@@ -835,8 +788,12 @@ export function convert_source_map_to_mappings(ast, source, generated_code, sour
 				}
 				return;
 			} else if (node.type === 'TSTypeParameter') {
-				// Type parameter like T in <T>
-				if (node.name) {
+				// Type parameter like T in <T> or key in mapped types
+				// Note: node.name is a string, not an Identifier node
+				if (node.name && node.loc && typeof node.name === 'string') {
+					tokens.push({ source: node.name, generated: node.name, loc: node.loc });
+				} else if (node.name && typeof node.name === 'object') {
+					// In some cases, name might be an Identifier node
 					visit(node.name);
 				}
 				if (node.constraint) {
@@ -857,9 +814,13 @@ export function convert_source_map_to_mappings(ast, source, generated_code, sour
 				if (node.typeName) {
 					visit(node.typeName);
 				}
+				// Check both typeParameters and typeArguments (different parsers use different names)
 				if (node.typeParameters) {
 					visit(node.typeParameters);
 				}
+				if (node.typeArguments) {
+					visit(node.typeArguments);
+				}
 				return;
 			} else if (node.type === 'TSQualifiedName') {
 				// Qualified name (e.g., Foo.Bar in types)
@@ -900,6 +861,10 @@ export function convert_source_map_to_mappings(ast, source, generated_code, sour
 				if (node.parameters) {
 					for (const param of node.parameters) {
 						visit(param);
+						// Visit type annotation on the parameter
+						if (param.typeAnnotation) {
+							visit(param.typeAnnotation);
+						}
 					}
 				}
 				if (node.typeAnnotation) {
@@ -934,6 +899,10 @@ export function convert_source_map_to_mappings(ast, source, generated_code, sour
 				if (node.parameters) {
 					for (const param of node.parameters) {
 						visit(param);
+						// Visit type annotation on the parameter
+						if (param.typeAnnotation) {
+							visit(param.typeAnnotation);
+						}
 					}
 				}
 				if (node.typeAnnotation) {
@@ -945,6 +914,10 @@ export function convert_source_map_to_mappings(ast, source, generated_code, sour
 				if (node.parameters) {
 					for (const param of node.parameters) {
 						visit(param);
+						// Visit type annotation on the parameter
+						if (param.typeAnnotation) {
+							visit(param.typeAnnotation);
+						}
 					}
 				}
 				if (node.typeAnnotation) {
@@ -959,6 +932,10 @@ export function convert_source_map_to_mappings(ast, source, generated_code, sour
 				if (node.parameters) {
 					for (const param of node.parameters) {
 						visit(param);
+						// Visit type annotation on the parameter
+						if (param.typeAnnotation) {
+							visit(param.typeAnnotation);
+						}
 					}
 				}
 				if (node.typeAnnotation) {
@@ -1190,20 +1167,54 @@ export function convert_source_map_to_mappings(ast, source, generated_code, sour
 	});
 
 	// Process each token in order
+	// All tokens now have .loc property - no need for fallback logic
 	for (const token of tokens) {
-		let source_text, generated_text;
+		const source_text = token.source;
 
-		if (typeof token === 'string') {
-			source_text = token;
-			generated_text = token;
-		} else {
-			// Token with different source and generated names
-			source_text = token.source;
-			generated_text = token.generated;
+		// Handle import statement full-statement mapping
+		if (token.is_import_statement) {
+			// Get source position from start
+			const source_start = loc_to_offset(token.loc.start.line, token.loc.start.column, source_line_offsets);
+			const source_end = loc_to_offset(token.loc.end.line, token.loc.end.column, source_line_offsets);
+
+			// Get generated positions using source map
+			const gen_start_pos = get_generated_position(token.loc.start.line, token.loc.start.column, adjusted_source_map);
+			const gen_end_pos = get_generated_position(token.loc.end.line, token.loc.end.column, adjusted_source_map);
+
+			if (source_start !== null && source_end !== null && gen_start_pos && gen_end_pos) {
+				// Convert generated line:col to byte offsets
+				const gen_start = gen_loc_to_offset(gen_start_pos.line, gen_start_pos.column);
+				const gen_end = gen_loc_to_offset(gen_end_pos.line, gen_end_pos.column);
+
+				const source_length = source_end - source_start;
+				const gen_length = gen_end - gen_start;
+
+				mappings.push({
+					sourceOffsets: [source_start],
+					generatedOffsets: [gen_start],
+					lengths: [Math.min(source_length, gen_length)],
+					data: {
+						// only verification (diagnostics) to avoid duplicate hover/completion
+						verification: true
+					},
+				});
+			}
+			continue;
 		}
 
-		const source_pos = find_in_source(source_text);
-		const gen_pos = find_in_generated(generated_text);
+		// Use .loc to get the exact source position
+		const source_pos = loc_to_offset(token.loc.start.line, token.loc.start.column, source_line_offsets);
+
+		// Get generated position using source map
+		const gen_line_col = get_generated_position(token.loc.start.line, token.loc.start.column, adjusted_source_map);
+		let gen_pos = null;
+		if (gen_line_col) {
+			// Convert generated line:col to byte offset
+			gen_pos = gen_loc_to_offset(gen_line_col.line, gen_line_col.column);
+		} else {
+			// No mapping found in source map - this shouldn't happen since all tokens should have mappings
+			console.warn(`[segments.js] No source map entry for token "${source_text}" at ${token.loc.start.line}:${token.loc.start.column}`);
+		}
 
 		if (source_pos !== null && gen_pos !== null) {
 			mappings.push({
@@ -1215,52 +1226,7 @@ export function convert_source_map_to_mappings(ast, source, generated_code, sour
 		}
 	}
 
-	// Add full-statement mappings for import declarations
-	// TypeScript reports unused import diagnostics covering the entire import statement
-	// Use verification-only mapping to avoid duplicate hover/completion
-
-	// Use the source import map from the original AST (before transformation)
-	// The __volar_id property is preserved through transformation via object spread
-	if (source_import_map && import_declarations.length > 0) {
-		// We need to find where each import appears in the generated code
-		// Search for "import" keywords and match them to our collected imports
-		let gen_search_index = 0;
-
-		for (const import_decl of import_declarations) {
-			// Look up the source position using the __volar_id
-			const source_range = source_import_map.get(import_decl.id);
-			if (!source_range) continue; // Skip if we don't have source info for this ID
-
-			// Find this import statement in the generated code
-			// Search for "import " starting from our last position
-			const import_keyword_index = generated_code.indexOf('import ', gen_search_index);
-			if (import_keyword_index === -1) continue; // Couldn't find it
-
-			// Find the semicolon or end of line for this import
-			let gen_end = generated_code.indexOf(';', import_keyword_index);
-			if (gen_end === -1) gen_end = generated_code.indexOf('\n', import_keyword_index);
-			if (gen_end === -1) gen_end = generated_code.length;
-			else gen_end += 1; // Include the semicolon
-
-			const get_start = import_keyword_index;
-			gen_search_index = gen_end; // Next search starts after this import
-
-			const source_length = source_range.end - source_range.start;
-			const get_length = gen_end - get_start;
-
-			mappings.push({
-				sourceOffsets: [source_range.start],
-				generatedOffsets: [get_start],
-				lengths: [Math.min(source_length, get_length)],
-				data: {
-					// only verification (diagnostics) to avoid duplicate hover/completion
-					verification: true
-				},
-			});
-		}
-	}
-
-	// Sort mappings by source offset
+	// Sort mappings by source offset	// Sort mappings by source offset
 	mappings.sort((a, b) => a.sourceOffsets[0] - b.sourceOffsets[0]);
 
 	// Add a mapping for the very beginning of the file to handle import additions

package/src/compiler/source-map-utils.js

@@ -0,0 +1,129 @@
+import { decode } from '@jridgewell/sourcemap-codec';
+
+/** @import { PostProcessingChanges, LineOffsets } from './phases/3-transform/client/index.js' */
+
+/** @typedef {{line: number, column: number}} GeneratedPosition */
+/** @typedef {Map<string, GeneratedPosition[]>} SourceToGeneratedMap */
+
+/**
+ * Build a source-to-generated position lookup map from an esrap source map
+ * Applies post-processing adjustments during map building for efficiency
+ * @param {object} source_map - The source map object from esrap (v3 format)
+ * @param {PostProcessingChanges} post_processing_changes - Optional post-processing changes to apply
+ * @param {LineOffsets} line_offsets - Pre-computed line offsets array
+ * @returns {SourceToGeneratedMap} Map from "sourceLine:sourceColumn" to array of generated positions
+ */
+export function build_source_to_generated_map(source_map, post_processing_changes, line_offsets) {
+	/** @type {SourceToGeneratedMap} */
+	const map = new Map();
+
+	// Decode the VLQ-encoded mappings string
+	// @ts-ignore
+	const decoded = decode(source_map.mappings);
+
+	/**
+	 * Convert line/column position to byte offset
+	 * @param {number} line - 1-based line number
+	 * @param {number} column - 0-based column number
+	 * @returns {number} Byte offset
+	 */
+	const line_col_to_byte_offset = (line, column) => {
+		return line_offsets[line - 1] + column;
+	};
+
+	/**
+	 * Convert byte offset to line/column
+	 * @param {number} offset
+	 * @returns {{ line: number, column: number }}
+	 */
+	const offset_to_line_col = (offset) => {
+		// Binary search
+		let left = 0;
+		let right = line_offsets.length - 1;
+		let line = 1;
+
+		while (left <= right) {
+			const mid = Math.floor((left + right) / 2);
+			if (offset >= line_offsets[mid] && (mid === line_offsets.length - 1 || offset < line_offsets[mid + 1])) {
+				line = mid + 1;
+				break;
+			} else if (offset < line_offsets[mid]) {
+				right = mid - 1;
+			} else {
+				left = mid + 1;
+			}
+		}
+
+		const column = offset - line_offsets[line - 1];
+		return { line, column };
+	};
+
+	// decoded is an array of lines, each line is an array of segments
+	// Each segment is [generatedColumn, sourceIndex, sourceLine, sourceColumn, nameIndex?]
+	for (let generated_line = 0; generated_line < decoded.length; generated_line++) {
+		const line = decoded[generated_line];
+
+		for (const segment of line) {
+			if (segment.length >= 4) {
+				let generated_column = segment[0];
+				// just keeping this unused for context
+				// const source_index = segment[1]; // which source file (we only have one)
+				const source_line = /** @type {number} */ (segment[2]);
+				const source_column = /** @type {number} */ (segment[3]);
+
+				// Apply post-processing adjustments if needed
+				let adjusted_line = generated_line + 1;
+				let adjusted_column = generated_column;
+
+				if (post_processing_changes) {
+					const line_change = post_processing_changes.get(adjusted_line);
+
+					if (line_change) {
+						// Check if this position is affected by the change
+						const pos_offset = line_col_to_byte_offset(adjusted_line, adjusted_column);
+
+						if (pos_offset >= line_change.offset) {
+							// Position is on or after the change - apply delta
+							const adjusted_offset = pos_offset + line_change.delta;
+							const adjusted_pos = offset_to_line_col(adjusted_offset);
+							adjusted_line = adjusted_pos.line;
+							adjusted_column = adjusted_pos.column;
+						}
+					}
+				}
+
+				// Create key from source position (1-indexed line, 0-indexed column)
+				const key = `${source_line + 1}:${source_column}`;
+
+				// Store adjusted generated position
+				const gen_pos = { line: adjusted_line, column: adjusted_column };
+
+				if (!map.has(key)) {
+					map.set(key, []);
+				}
+				/** @type {GeneratedPosition[]} */ (map.get(key)).push(gen_pos);
+			}
+		}
+	}
+
+	return map;
+}
+
+/**
+ * Look up generated position for a given source position
+ * @param {number} source_line - 1-based line number in source
+ * @param {number} source_column - 0-based column number in source
+ * @param {SourceToGeneratedMap} source_to_gen_map - Lookup map
+ * @returns {{line: number, column: number} | null} Generated position or null if not found
+ */
+export function get_generated_position(source_line, source_column, source_to_gen_map) {
+	const key = `${source_line}:${source_column}`;
+	const positions = source_to_gen_map.get(key);
+
+	if (!positions || positions.length === 0) {
+		return null;
+	}
+
+	// If multiple generated positions map to same source, return the first
+	return positions[0];
+}