ripple 0.2.90 → 0.2.92

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

@@ -7,14 +7,100 @@ export const mapping_data = {
 	navigation: true,
 };
 
+/**
+ * Helper to find a meaningful token boundary by looking for word boundaries, 
+ * punctuation, or whitespace
+ * @param {string} text
+ * @param {number} start
+ * @param {number} direction
+ */
+function findTokenBoundary(text, start, direction = 1) {
+	if (start < 0 || start >= text.length) return start;
+	
+	let pos = start;
+	/** @param {string} c */
+	const isAlphaNum = (c) => /[a-zA-Z0-9_$]/.test(c);
+	
+	// If we're at whitespace or punctuation, find the next meaningful character
+	while (pos >= 0 && pos < text.length && /\s/.test(text[pos])) {
+		pos += direction;
+	}
+	
+	if (pos < 0 || pos >= text.length) return start;
+	
+	// If we're in the middle of a word/identifier, find the boundary
+	if (isAlphaNum(text[pos])) {
+		if (direction > 0) {
+			while (pos < text.length && isAlphaNum(text[pos])) pos++;
+		} else {
+			while (pos >= 0 && isAlphaNum(text[pos])) pos--;
+			pos++; // Adjust back to start of token
+		}
+	} else {
+		// For punctuation, just move one character in the given direction
+		pos += direction;
+	}
+	
+	return Math.max(0, Math.min(text.length, pos));
+}
+
+/**
+ * Check if source and generated content are meaningfully similar
+ * @param {string} sourceContent
+ * @param {string} generatedContent
+ */
+function isValidMapping(sourceContent, generatedContent) {
+	// Remove whitespace for comparison
+	const cleanSource = sourceContent.replace(/\s+/g, '');
+	const cleanGenerated = generatedContent.replace(/\s+/g, '');
+	
+	// If either is empty, skip
+	if (!cleanSource || !cleanGenerated) return false;
+	
+	// Skip obvious template transformations that don't make sense to map
+	const templateTransforms = [
+		/^\{.*\}$/, // Curly brace expressions
+		/^<.*>$/, // HTML tags
+		/^\(\(\)\s*=>\s*\{$/, // Generated function wrappers
+		/^\}\)\(\)\}$/, // Generated function closures
+	];
+	
+	for (const transform of templateTransforms) {
+		if (transform.test(cleanSource) || transform.test(cleanGenerated)) {
+			return false;
+		}
+	}
+	
+	// Check if content is similar (exact match, or generated contains source)
+	if (cleanSource === cleanGenerated) return true;
+	if (cleanGenerated.includes(cleanSource)) return true;
+	if (cleanSource.includes(cleanGenerated) && cleanGenerated.length > 2) return true;
+	
+	// Special handling for ref callback parameters and types in createRefKey context
+	if (sourceContent.match(/\w+:\s*\w+/) && generatedContent.match(/\w+:\s*\w+/)) {
+		// This looks like a parameter with type annotation, allow mapping
+		return true;
+	}
+	
+	// Allow mapping of identifiers that appear in both source and generated
+	if (sourceContent.match(/^[a-zA-Z_$][a-zA-Z0-9_$]*$/) && 
+		generatedContent.match(/^[a-zA-Z_$][a-zA-Z0-9_$]*$/) &&
+		sourceContent === generatedContent) {
+		return true;
+	}
+	
+	return false;
+}
+
 /**
  * Convert esrap SourceMap to Volar mappings
- * @param {object} source_map
+ * @param {{ mappings: string }} source_map
  * @param {string} source
  * @param {string} generated_code
  * @returns {object}
  */
 export function convert_source_map_to_mappings(source_map, source, generated_code) {
+	/** @type {Array<{sourceOffsets: number[], generatedOffsets: number[], lengths: number[], data: any}>} */
 	const mappings = [];
 
 	// Decode the VLQ mappings from esrap
@@ -22,6 +108,7 @@ export function convert_source_map_to_mappings(source_map, source, generated_cod
 
 	let generated_offset = 0;
 	const generated_lines = generated_code.split('\n');
+	const source_lines = source.split('\n');
 
 	// Process each line of generated code
 	for (let generated_line = 0; generated_line < generated_lines.length; generated_line++) {
@@ -38,7 +125,6 @@ export function convert_source_map_to_mappings(source_map, source, generated_cod
 			}
 
 			// Calculate source offset
-			const source_lines = source.split('\n');
 			let source_offset = 0;
 			for (let i = 0; i < Math.min(source_line, source_lines.length - 1); i++) {
 				source_offset += source_lines[i].length + 1; // +1 for newline
@@ -48,41 +134,166 @@ export function convert_source_map_to_mappings(source_map, source, generated_cod
 			// Calculate generated offset
 			const current_generated_offset = generated_offset + generated_column;
 
-			// Determine segment length (look ahead to next mapping or end of line)
-			const next_mapping = line_mappings[line_mappings.indexOf(mapping) + 1];
-			let segment_length = next_mapping
-				? next_mapping[0] - generated_column
-				: Math.max(1, line.length - generated_column);
-
-			// Determine the actual segment content
-			const generated_content = generated_code.substring(
-				current_generated_offset,
-				current_generated_offset + segment_length,
-			);
-			const source_content = source.substring(source_offset, source_offset + segment_length);
-
-			// Skip mappings for RefAttribute syntax to avoid overlapping sourcemaps
-			if (source_content.includes('{ref ') || source_content.match(/\{\s*ref\s+/)) {
-				continue;
+			// Find meaningful token boundaries for source content
+			const source_token_end = findTokenBoundary(source, source_offset, 1);
+			const source_token_start = findTokenBoundary(source, source_offset, -1);
+			
+			// Find meaningful token boundaries for generated content  
+			const generated_token_end = findTokenBoundary(generated_code, current_generated_offset, 1);
+			const generated_token_start = findTokenBoundary(generated_code, current_generated_offset, -1);
+			
+			// Extract potential source content (prefer forward boundary but try both directions)
+			let best_source_content = source.substring(source_offset, source_token_end);
+			let best_generated_content = generated_code.substring(current_generated_offset, generated_token_end);
+			
+			// Try different segment boundaries to find the best match
+			const candidates = [
+				// Forward boundaries
+				{
+					source: source.substring(source_offset, source_token_end),
+					generated: generated_code.substring(current_generated_offset, generated_token_end)
+				},
+				// Backward boundaries
+				{
+					source: source.substring(source_token_start, source_offset + 1),
+					generated: generated_code.substring(generated_token_start, current_generated_offset + 1)
+				},
+				// Single character
+				{
+					source: source.charAt(source_offset),
+					generated: generated_code.charAt(current_generated_offset)
+				},
+				// Try to find exact matches in nearby content
+			];
+			
+			// Look for the best candidate match
+			let best_match = null;
+			for (const candidate of candidates) {
+				if (isValidMapping(candidate.source, candidate.generated)) {
+					best_match = candidate;
+					break;
+				}
 			}
-
-			// Fix for children mapping: when generated content is "children",
-			// it should only map to the component name in the source, not include attributes
-			if (generated_content === 'children') {
-				// Look for the component name in the source content
-				const component_name_match = source_content.match(/^(\w+)/);
-				if (component_name_match) {
-					const component_name = component_name_match[1];
-					segment_length = component_name.length;
+			
+			// If no good match found, try extracting identifiers/keywords
+			if (!best_match) {
+				const sourceIdMatch = source.substring(source_offset).match(/^[a-zA-Z_$][a-zA-Z0-9_$]*/);
+				const generatedIdMatch = generated_code.substring(current_generated_offset).match(/^[a-zA-Z_$][a-zA-Z0-9_$]*/);
+				
+				if (sourceIdMatch && generatedIdMatch && sourceIdMatch[0] === generatedIdMatch[0]) {
+					best_match = {
+						source: sourceIdMatch[0],
+						generated: generatedIdMatch[0]
+					};
 				}
 			}
-
-			mappings.push({
-				sourceOffsets: [source_offset],
-				generatedOffsets: [current_generated_offset],
-				lengths: [segment_length],
-				data: mapping_data,
-			});
+			
+			// Special handling for type annotations in ref callbacks
+			if (!best_match) {
+				// Look for type annotations like "HTMLButtonElement" 
+				const sourceTypeMatch = source.substring(source_offset).match(/^[A-Z][a-zA-Z0-9]*(?:Element|Type|Interface)?/);
+				const generatedTypeMatch = generated_code.substring(current_generated_offset).match(/^[A-Z][a-zA-Z0-9]*(?:Element|Type|Interface)?/);
+				
+				if (sourceTypeMatch && generatedTypeMatch && sourceTypeMatch[0] === generatedTypeMatch[0]) {
+					best_match = {
+						source: sourceTypeMatch[0],
+						generated: generatedTypeMatch[0]
+					};
+				}
+			}
+			
+		// Handle special cases for Ripple keywords that might not have generated equivalents
+		if (!best_match || best_match.source.length === 0) {
+			continue;
+		}
+		
+		// Special handling for Ripple-specific syntax that may be omitted in generated code
+		const sourceAtOffset = source.substring(source_offset, source_offset + 10);
+		if (sourceAtOffset.includes('index ')) {
+			// For the 'index' keyword, create a mapping even if there's no generated equivalent
+			const indexMatch = sourceAtOffset.match(/index\s+/);
+			if (indexMatch) {
+				best_match = {
+					source: indexMatch[0].trim(),
+					generated: '' // Empty generated content for keywords that are transformed away
+				};
+			}
+		}
+		
+		// Skip if we still don't have a valid source match
+		if (!best_match || best_match.source.length === 0) {
+			continue;
+		}
+		
+		// Handle special ref syntax mapping for createRefKey() pattern
+		const sourceAtRefOffset = source.substring(Math.max(0, source_offset - 20), source_offset + 20);
+		const generatedAtRefOffset = generated_code.substring(Math.max(0, current_generated_offset - 20), current_generated_offset + 20);
+		
+		// Check if we're dealing with ref callback syntax in source and createRefKey in generated
+		if (sourceAtRefOffset.includes('{ref ') && generatedAtRefOffset.includes('createRefKey')) {
+			// Look for the ref callback pattern in source: {ref (param: Type) => { ... }}
+			const refMatch = source.substring(source_offset - 50, source_offset + 50).match(/\{ref\s*\(([^)]+)\)\s*=>/);
+			if (refMatch) {
+				const paramMatch = refMatch[1].match(/(\w+):\s*(\w+)/);
+				if (paramMatch) {
+					const paramName = paramMatch[1];
+					const typeName = paramMatch[2];
+					
+					// Map the parameter name to the generated callback parameter
+					if (best_match.source === paramName || best_match.source.includes(paramName)) {
+						// This is a ref callback parameter, allow the mapping
+					}
+					// Map the type annotation
+					else if (best_match.source === typeName || best_match.source.includes(typeName)) {
+						// This is a type annotation in ref callback, allow the mapping
+					}
+				}
+			}
+		}
+		
+		// Skip mappings for complex RefAttribute syntax to avoid overlapping sourcemaps,
+		// but allow mappings that are part of the createRefKey pattern
+		if (best_match.source.includes('{ref ') && best_match.source.length > 10 && 
+		    !generatedAtRefOffset.includes('createRefKey')) {
+			// Skip complex ref expressions like '{ref (node) => { ... }}' only if not using createRefKey
+			continue;
+		}
+		
+		// Allow simple 'ref' keyword mappings for IntelliSense
+		if (best_match.source.trim() === 'ref' && best_match.generated.length === 0) {
+			// This is just the ref keyword, allow it for syntax support
+			// but map it to current position since there's no generated equivalent
+		}
+			
+		// Calculate actual offsets and lengths for the best match
+		let actual_source_offset, actual_generated_offset;
+		
+		if (best_match.generated.length > 0) {
+			actual_source_offset = source.indexOf(best_match.source, source_offset - best_match.source.length);
+			actual_generated_offset = generated_code.indexOf(best_match.generated, current_generated_offset - best_match.generated.length);
+		} else {
+			// For keywords with no generated equivalent, use the exact source position
+			actual_source_offset = source_offset;
+			actual_generated_offset = current_generated_offset; // Map to current position in generated code
+		}
+		
+		// Use the match we found, but fall back to original positions if indexOf fails
+		const final_source_offset = actual_source_offset !== -1 ? actual_source_offset : source_offset;
+		const final_generated_offset = actual_generated_offset !== -1 ? actual_generated_offset : current_generated_offset;			// Avoid duplicate mappings by checking if we already have this exact mapping
+			const isDuplicate = mappings.some(existing => 
+				existing.sourceOffsets[0] === final_source_offset &&
+				existing.generatedOffsets[0] === final_generated_offset &&
+				existing.lengths[0] === best_match.source.length
+			);
+			
+			if (!isDuplicate) {
+				mappings.push({
+					sourceOffsets: [final_source_offset],
+					generatedOffsets: [final_generated_offset],
+					lengths: [best_match.source.length],
+					data: mapping_data,
+				});
+			}
 		}
 
 		// Add line length + 1 for newline (except for last line)
@@ -92,6 +303,9 @@ export function convert_source_map_to_mappings(source_map, source, generated_cod
 		}
 	}
 
+	// Sort mappings by source offset for better organization
+	mappings.sort((a, b) => a.sourceOffsets[0] - b.sourceOffsets[0]);
+
 	return {
 		code: generated_code,
 		mappings,