ripple 0.2.174 → 0.2.175

package/package.json

@@ -3,7 +3,7 @@
   "description": "Ripple is an elegant TypeScript UI framework",
   "license": "MIT",
   "author": "Dominic Gannaway",
-  "version": "0.2.174",
+  "version": "0.2.175",
   "type": "module",
   "module": "src/runtime/index-client.js",
   "main": "src/runtime/index-client.js",
@@ -82,6 +82,6 @@
     "@volar/language-core": "~2.4.23"
   },
   "peerDependencies": {
-    "ripple": "0.2.174"
+    "ripple": "0.2.175"
   }
 }

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

@@ -2527,6 +2527,62 @@ function create_tsx_with_typescript_support() {
 		FunctionExpression(node, context) {
 			handle_function(node, context);
 		},
+		// Custom handler for ImportDeclaration to ensure 'import' keyword has source mapping
+		// This creates a source map entry at the start of the import statement
+		// Esrap's default handler writes 'import' without passing the node, so no source map entry
+		ImportDeclaration(node, context) {
+			// Write 'import' keyword with node location for source mapping
+			context.write('import', node);
+			context.write(' ');
+
+			// Write specifiers - handle default, namespace, and named imports
+			if (node.specifiers && node.specifiers.length > 0) {
+				let default_specifier = null;
+				let namespace_specifier = null;
+				const named_specifiers = [];
+
+				for (const spec of node.specifiers) {
+					if (spec.type === 'ImportDefaultSpecifier') {
+						default_specifier = spec;
+					} else if (spec.type === 'ImportNamespaceSpecifier') {
+						namespace_specifier = spec;
+					} else if (spec.type === 'ImportSpecifier') {
+						named_specifiers.push(spec);
+					}
+				}
+
+				// Write default import
+				if (default_specifier) {
+					context.visit(default_specifier);
+					if (namespace_specifier || named_specifiers.length > 0) {
+						context.write(', ');
+					}
+				}
+
+				// Write namespace import
+				if (namespace_specifier) {
+					context.visit(namespace_specifier);
+					if (named_specifiers.length > 0) {
+						context.write(', ');
+					}
+				}
+
+				// Write named imports
+				if (named_specifiers.length > 0) {
+					context.write('{ ');
+					for (let i = 0; i < named_specifiers.length; i++) {
+						if (i > 0) context.write(', ');
+						context.visit(named_specifiers[i]);
+					}
+					context.write(' }');
+				}
+
+				context.write(' from ');
+			}
+
+			// Write source
+			context.visit(node.source);
+		},
 		// Custom handler for TSParenthesizedType: (Type)
 		TSParenthesizedType(node, context) {
 			context.write('(');

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

@@ -1,20 +1,17 @@
-/** @typedef {import('@volar/language-core').CodeMapping} VolarCodeMapping */
-
 /**
  * @typedef {Object} CustomMappingData
- * @property {[number]} generatedLengths
+ * @property {number[]} generatedLengths
  */
 
 /**
- * @typedef {VolarCodeMapping & {
- *   data: VolarCodeMapping['data'] & {
- *     customData: CustomMappingData
- *   }
- * }} CodeMapping
+ * @typedef {import('estree').Position} Position
+ * @typedef {{start: Position, end: Position}} Location
+ * @typedef {import('@volar/language-core').CodeMapping} VolarCodeMapping
+ * @typedef {VolarCodeMapping['data'] & {customData: CustomMappingData}} MappingData
+ * @typedef {VolarCodeMapping & {data: MappingData}} CodeMapping
+ * @typedef {{code: string, mappings: CodeMapping[]}} MappingsResult
  */
 
-/** @typedef {{code: string, mappings: CodeMapping[]}} MappingsResult */
-
 import { walk } from 'zimmerframe';
 import { build_source_to_generated_map, get_generated_position } from '../../source-map-utils.js';
 
@@ -52,6 +49,7 @@ export function convert_source_map_to_mappings(
 ) {
 	/** @type {CodeMapping[]} */
 	const mappings = [];
+	let isImportDeclarationPresent = false;
 
 	/**
 	 * Converts line/column positions to byte offsets
@@ -74,10 +72,14 @@ export function convert_source_map_to_mappings(
 	 * @param {number} line
 	 * @param {number} column
 	 * @param {number[]} line_offsets
-	 * @returns {number | null}
+	 * @returns {number}
 	 */
 	const loc_to_offset = (line, column, line_offsets) => {
-		if (line < 1 || line > line_offsets.length) return null;
+		if (line < 1 || line > line_offsets.length) {
+			throw new Error(
+				`Location line or line offsets length is out of bounds, line: ${line}, line offsets length: ${line_offsets.length}`,
+			);
+		}
 		return line_offsets[line - 1] + column;
 	};
 
@@ -100,12 +102,15 @@ export function convert_source_map_to_mappings(
 
 	// Collect text tokens from AST nodes
 	// 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}}
-	}>} */
+	/**
+	 * @type {Array<{
+	 *		source: string,
+	 *		generated: string,
+	 *		is_full_import_statement?: boolean,
+	 *		loc: Location,
+	 *		end_loc?: Location,
+	 * }>}
+	 */
 	const tokens = [];
 
 	// We have to visit everything in generated order to maintain correct indices
@@ -157,14 +162,17 @@ export function convert_source_map_to_mappings(
 				}
 				return; // Leaf node, don't traverse further
 			} else if (node.type === 'ImportDeclaration') {
+				isImportDeclarationPresent = true;
+
 				// Add import declaration as a special token for full-statement mapping
 				// TypeScript reports unused imports with diagnostics covering the entire statement
-				if (node.loc) {
+				if (node.loc && node.source?.loc) {
 					tokens.push({
 						source: '',
 						generated: '',
 						loc: node.loc,
-						is_import_statement: true,
+						is_full_import_statement: true,
+						end_loc: node.source.loc,
 					});
 				}
 
@@ -1203,102 +1211,74 @@ export function convert_source_map_to_mappings(
 		},
 	});
 
-	// Process each token in order
-	// All tokens now have .loc property - no need for fallback logic
 	for (const token of tokens) {
 		const source_text = token.source;
 		const gen_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,
-			);
+		const source_start = loc_to_offset(
+			token.loc.start.line,
+			token.loc.start.column,
+			source_line_offsets,
+		);
 
-			// Get generated positions using source map
+		let source_length = source_text.length;
+		let gen_length = gen_text.length;
+		/** @type {MappingData} */
+		let data;
+		/** @type {number} */
+		let gen_start;
+
+		if (token.is_full_import_statement) {
+			const end_loc = /** @type {Location} */ (token.end_loc).end;
+			const source_end = loc_to_offset(end_loc.line, end_loc.column, source_line_offsets);
+
+			// Look up where import keyword and source literal map to in generated code
 			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 gen_end_pos = get_generated_position(end_loc.line, end_loc.column, adjusted_source_map);
 
-				const source_length = source_end - source_start;
-				const gen_length = gen_end - gen_start;
+			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);
 
-				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,
+			source_length = source_end - source_start;
+			gen_length = gen_end - gen_start;
 
-						customData: {
-							generatedLengths: [gen_text.length],
-						},
-					},
-				});
-			}
-			continue;
-		}
-
-		// 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);
+			data = {
+				// we only want verification here, like unused imports
+				// since this is synthetic and otherwise we'll get duplicated actions like intellisense
+				// each imported specifier has its own mapping
+				verification: true,
+				customData: {
+					generatedLengths: [gen_length],
+				},
+			};
 		} 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}`,
+			const gen_line_col = get_generated_position(
+				token.loc.start.line,
+				token.loc.start.column,
+				adjusted_source_map,
 			);
-		}
+			gen_start = gen_loc_to_offset(gen_line_col.line, gen_line_col.column);
 
-		if (source_pos !== null && gen_pos !== null) {
-			// !IMPORTANT: don't set generatedLengths, otherwise Volar will use that vs our source
-			// We're adding it to our custom metadata instead as we need it for patching positions
-			mappings.push({
-				sourceOffsets: [source_pos],
-				generatedOffsets: [gen_pos],
-				lengths: [source_text.length],
-				data: {
-					...mapping_data,
-					customData: {
-						generatedLengths: [gen_text.length],
-					},
+			data = {
+				...mapping_data,
+				customData: {
+					generatedLengths: [gen_length],
 				},
-			});
+			};
 		}
+
+		// !IMPORTANT: don't set generatedLengths, otherwise Volar will use that vs our source
+		// We're adding it to our custom metadata instead as we need it for patching positions
+		mappings.push({
+			sourceOffsets: [source_start],
+			generatedOffsets: [gen_start],
+			lengths: [source_length],
+			data,
+		});
 	}
 
 	// Sort mappings by source offset	// Sort mappings by source offset
@@ -1306,7 +1286,7 @@ export function convert_source_map_to_mappings(
 
 	// Add a mapping for the very beginning of the file to handle import additions
 	// This ensures that code actions adding imports at the top work correctly
-	if (mappings.length > 0 && mappings[0].sourceOffsets[0] > 0) {
+	if (!isImportDeclarationPresent && mappings.length > 0 && mappings[0].sourceOffsets[0] > 0) {
 		mappings.unshift({
 			sourceOffsets: [0],
 			generatedOffsets: [0],

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

@@ -44,7 +44,10 @@ export function build_source_to_generated_map(source_map, post_processing_change
 
 		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])) {
+			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]) {
@@ -114,14 +117,15 @@ export function build_source_to_generated_map(source_map, post_processing_change
  * @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
+ * @returns {{line: number, column: number}} Generated position
  */
 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;
+		// No mapping found in source map - this shouldn't happen since all tokens should have mappings
+		throw new Error(`No source map entry for position "${source_line}:${source_column}"`);
 	}
 
 	// If multiple generated positions map to same source, return the first