ripple 0.2.114 → 0.2.116

package/package.json

@@ -3,7 +3,7 @@
   "description": "Ripple is an elegant TypeScript UI framework",
   "license": "MIT",
   "author": "Dominic Gannaway",
-  "version": "0.2.114",
+  "version": "0.2.116",
   "type": "module",
   "module": "src/runtime/index-client.js",
   "main": "src/runtime/index-client.js",

package/src/compiler/phases/1-parse/index.js

@@ -167,6 +167,22 @@ function RipplePlugin(config) {
 							}
 						}
 
+						// Check if this is #Map or #Set
+						if (this.input.slice(this.pos, this.pos + 4) === '#Map') {
+							const charAfter = this.pos + 4 < this.input.length ? this.input.charCodeAt(this.pos + 4) : -1;
+							if (charAfter === 40) { // ( character
+								this.pos += 4; // consume '#Map'
+								return this.finishToken(tt.name, '#Map');
+							}
+						}
+						if (this.input.slice(this.pos, this.pos + 4) === '#Set') {
+							const charAfter = this.pos + 4 < this.input.length ? this.input.charCodeAt(this.pos + 4) : -1;
+							if (charAfter === 40) { // ( character
+								this.pos += 4; // consume '#Set'
+								return this.finishToken(tt.name, '#Set');
+							}
+						}
+
 						// Check if this is #server
 						if (this.input.slice(this.pos, this.pos + 7) === '#server') {
 							// Check that next char after 'server' is whitespace, {, . (dot), or EOF
@@ -186,6 +202,27 @@ function RipplePlugin(config) {
 								return this.finishToken(tt.name, '#server');
 							}
 						}
+
+						// Check if this is an invalid #Identifier pattern
+						// Valid patterns: #[, #{, #Map(, #Set(, #server
+						// If we see # followed by an uppercase letter that isn't Map or Set, it's an error
+						if (nextChar >= 65 && nextChar <= 90) { // A-Z
+							// Extract the identifier name
+							let identEnd = this.pos + 1;
+							while (identEnd < this.input.length) {
+								const ch = this.input.charCodeAt(identEnd);
+								if ((ch >= 65 && ch <= 90) || (ch >= 97 && ch <= 122) || (ch >= 48 && ch <= 57) || ch === 95) {
+									// A-Z, a-z, 0-9, _
+									identEnd++;
+								} else {
+									break;
+								}
+							}
+							const identName = this.input.slice(this.pos + 1, identEnd);
+							if (identName !== 'Map' && identName !== 'Set') {
+								this.raise(this.pos, `Invalid tracked syntax '#${identName}'. Only #Map and #Set are currently supported using shorthand tracked syntax.`);
+							}
+						}
 					}
 				}
 				if (code === 64) {
@@ -391,6 +428,12 @@ function RipplePlugin(config) {
 					return this.finishNode(node, 'ServerIdentifier');
 				}
 
+				// Check if this is #Map( or #Set(
+				if (this.type === tt.name && (this.value === '#Map' || this.value === '#Set')) {
+					const type = this.value === '#Map' ? 'TrackedMapExpression' : 'TrackedSetExpression';
+					return this.parseTrackedCollectionExpression(type);
+				}
+
 				// Check if this is a tuple literal starting with #[
 				if (this.type === tt.bracketL && this.value === '#[') {
 					return this.parseTrackedArrayExpression();
@@ -449,6 +492,42 @@ function RipplePlugin(config) {
 				return this.finishNode(node, 'ServerBlock');
 			}
 
+			/**
+			 * Parse `#Map(...)` or `#Set(...)` syntax for tracked collections
+			 * Creates a TrackedMap or TrackedSet node with the arguments property
+			 * @param {string} type - Either 'TrackedMap' or 'TrackedSet'
+			 * @returns {any} TrackedMap or TrackedSet node
+			 */
+			parseTrackedCollectionExpression(type) {
+				const node = this.startNode();
+				this.next(); // consume '#Map' or '#Set'
+				this.expect(tt.parenL); // expect '('
+
+				node.arguments = [];
+
+				// Parse arguments similar to function call arguments
+				let first = true;
+				while (!this.eat(tt.parenR)) {
+					if (!first) {
+						this.expect(tt.comma);
+						if (this.afterTrailingComma(tt.parenR)) break;
+					} else {
+						first = false;
+					}
+
+					if (this.type === tt.ellipsis) {
+						// Spread argument
+						const arg = this.parseSpread();
+						node.arguments.push(arg);
+					} else {
+						// Regular argument
+						node.arguments.push(this.parseMaybeAssign(false));
+					}
+				}
+
+				return this.finishNode(node, type);
+			}
+
 			parseTrackedArrayExpression() {
 				const node = this.startNode();
 				this.next(); // consume the '#['

package/src/compiler/phases/2-analyze/index.js

@@ -567,6 +567,23 @@ const visitors = {
 
 		mark_control_flow_has_template(path);
 
+		// Store capitalized name for dynamic components/elements
+		if (node.id.tracked) {
+			const original_name = node.id.name;
+			const capitalized_name = original_name.charAt(0).toUpperCase() + original_name.slice(1);
+			node.metadata.ts_name = capitalized_name;
+			node.metadata.original_name = original_name;
+
+			// Mark the binding as a dynamic component so we can capitalize it everywhere
+			const binding = context.state.scope.get(original_name);
+			if (binding) {
+				if (!binding.metadata) {
+					binding.metadata = {};
+				}
+				binding.metadata.is_dynamic_component = true;
+			}
+		}
+
 		if (is_dom_element) {
 			if (node.id.name === 'head') {
 				// head validation

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

@@ -161,6 +161,15 @@ const visitors = {
 		if (is_reference(node, parent)) {
 			if (context.state.to_ts) {
 				if (node.tracked) {
+					// Check if this identifier is used as a dynamic component/element
+					// by checking if it has a capitalized name in metadata
+					const binding = context.state.scope.get(node.name);
+					if (binding?.metadata?.is_dynamic_component) {
+						// Capitalize the identifier for TypeScript
+						const capitalizedName = node.name.charAt(0).toUpperCase() + node.name.slice(1);
+						const capitalizedNode = { ...node, name: capitalizedName };
+						return b.member(capitalizedNode, b.literal('#v'), true);
+					}
 					return b.member(node, b.literal('#v'), true);
 				}
 			} else {
@@ -341,11 +350,9 @@ const visitors = {
 				context.state.imports.add(`import { TrackedArray } from 'ripple'`);
 			}
 
-			return b.new(
-				b.call(
-					b.member(b.id('TrackedArray'), b.id('from')),
-					node.elements.map((el) => context.visit(el)),
-				),
+			return b.call(
+				b.member(b.id('TrackedArray'), b.id('from')),
+				...node.elements.map((el) => context.visit(el)),
 			);
 		}
 
@@ -375,6 +382,48 @@ const visitors = {
 		);
 	},
 
+	TrackedMapExpression(node, context) {
+		if (context.state.to_ts) {
+			if (!context.state.imports.has(`import { TrackedMap } from 'ripple'`)) {
+				context.state.imports.add(`import { TrackedMap } from 'ripple'`);
+			}
+
+			const calleeId = b.id('TrackedMap');
+			// Preserve location from original node for Volar mapping
+			calleeId.loc = node.loc;
+			// Add metadata for Volar mapping - map "TrackedMap" identifier to "#Map" in source
+			calleeId.metadata = { tracked_shorthand: '#Map' };
+			return b.new(calleeId, ...node.arguments.map((arg) => context.visit(arg)));
+		}
+
+		return b.call(
+			'_$_.tracked_map',
+			b.id('__block'),
+			...node.arguments.map((arg) => context.visit(arg)),
+		);
+	},
+
+	TrackedSetExpression(node, context) {
+		if (context.state.to_ts) {
+			if (!context.state.imports.has(`import { TrackedSet } from 'ripple'`)) {
+				context.state.imports.add(`import { TrackedSet } from 'ripple'`);
+			}
+
+			const calleeId = b.id('TrackedSet');
+			// Preserve location from original node for Volar mapping
+			calleeId.loc = node.loc;
+			// Add metadata for Volar mapping - map "TrackedSet" identifier to "#Set" in source
+			calleeId.metadata = { tracked_shorthand: '#Set' };
+			return b.new(calleeId, ...node.arguments.map((arg) => context.visit(arg)));
+		}
+
+		return b.call(
+			'_$_.tracked_set',
+			b.id('__block'),
+			...node.arguments.map((arg) => context.visit(arg)),
+		);
+	},
+
 	TrackedExpression(node, context) {
 		return b.call('_$_.get', context.visit(node.argument));
 	},
@@ -441,6 +490,22 @@ const visitors = {
 		return context.next();
 	},
 
+	VariableDeclarator(node, context) {
+		// In TypeScript mode, capitalize identifiers that are used as dynamic components
+		if (context.state.to_ts && node.id.type === 'Identifier') {
+			const binding = context.state.scope.get(node.id.name);
+			if (binding?.metadata?.is_dynamic_component) {
+				const capitalizedName = node.id.name.charAt(0).toUpperCase() + node.id.name.slice(1);
+				return {
+					...node,
+					id: { ...node.id, name: capitalizedName },
+					init: node.init ? context.visit(node.init) : null,
+				};
+			}
+		}
+		return context.next();
+	},
+
 	FunctionDeclaration(node, context) {
 		return visit_function(node, context);
 	},
@@ -1397,7 +1462,8 @@ function transform_ts_child(node, context) {
 		// Do we need to do something special here?
 		state.init.push(b.stmt(visit(node.expression, { ...state })));
 	} else if (node.type === 'Element') {
-		const type = node.id.name;
+		// Use capitalized name for dynamic components/elements in TypeScript output
+		const type = node.metadata?.ts_name || node.id.name;
 		const children = [];
 		let has_children_props = false;
 
@@ -1462,33 +1528,50 @@ function transform_ts_child(node, context) {
 			}
 		}
 
-		let tracked_type;
-
-		// Make VSCode happy about tracked components, as they're lowercase in the AST
-		// so VSCode doesn't bother tracking them as components, so this fixes that
-		if (node.id.tracked) {
-			tracked_type = state.scope.generate(type[0].toUpperCase() + type.slice(1));
-			state.init.push(
-				b.const(tracked_type, b.member(node.id, b.literal('#v'), true)),
-			);
-		}
-
-		const opening_type = tracked_type
-			? b.jsx_id(tracked_type)
-			: b.jsx_id(type);
-		opening_type.loc = node.id.loc;
+		const opening_type = b.jsx_id(type);
+		// Use node.id.loc if available, otherwise create a loc based on the element's position
+		opening_type.loc = node.id.loc || {
+			start: {
+				line: node.loc.start.line,
+				column: node.loc.start.column + 2, // After "<@"
+			},
+			end: {
+				line: node.loc.start.line,
+				column: node.loc.start.column + 2 + type.length,
+			},
+		};
 
 		let closing_type = undefined;
 
 		if (!node.selfClosing) {
-			closing_type = tracked_type
-				? b.jsx_id(tracked_type)
-				: b.jsx_id(type);
+			closing_type = b.jsx_id(type);
+			closing_type.loc = {
+				start: {
+					line: node.loc.end.line,
+					column: node.loc.end.column - type.length - 1,
+				},
+				end: {
+					line: node.loc.end.line,
+					column: node.loc.end.column - 1,
+				},
+			};
 		}
 
-		state.init.push(
-			b.stmt(b.jsx_element(opening_type, attributes, children, node.selfClosing, closing_type)),
+		const jsxElement = b.jsx_element(
+			opening_type,
+			attributes,
+			children,
+			node.selfClosing,
+			closing_type,
 		);
+		// Preserve metadata from Element node for mapping purposes
+		if (node.metadata && (node.metadata.ts_name || node.metadata.original_name)) {
+			jsxElement.metadata = {
+				ts_name: node.metadata.ts_name,
+				original_name: node.metadata.original_name,
+			};
+		}
+		state.init.push(b.stmt(jsxElement));
 	} else if (node.type === 'IfStatement') {
 		const consequent_scope = context.state.scopes.get(node.consequent);
 		const consequent = b.block(

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

@@ -5,6 +5,14 @@ export const mapping_data = {
 	completion: true,
 	semantic: true,
 	navigation: true,
+	rename: true,
+	codeActions: false, // set to false to disable auto import when importing yourself
+	formatting: false, // not doing formatting through Volar, using Prettier.
+	// these 3 below will be true by default
+	// leaving for reference
+	// hover: true,
+	// definition: true,
+	// references: true,
 };
 
 /**
@@ -22,6 +30,26 @@ export function convert_source_map_to_mappings(ast, source, generated_code) {
 	let sourceIndex = 0;
 	let generatedIndex = 0;
 
+	// Map to track capitalized names: original name -> capitalized name
+	/** @type {Map<string, string>} */
+	const capitalizedNames = new Map();
+	// Reverse map: capitalized name -> original name
+	/** @type {Map<string, string>} */
+	const reverseCapitalizedNames = new Map();
+
+	// Pre-walk to collect capitalized names from JSXElement nodes (transformed AST)
+	// These are identifiers that are used as dynamic components/elements
+	walk(ast, null, {
+		_(node, { next }) {
+			// Check JSXElement nodes with metadata (preserved from Element nodes)
+			if (node.type === 'JSXElement' && node.metadata?.ts_name && node.metadata?.original_name) {
+				capitalizedNames.set(node.metadata.original_name, node.metadata.ts_name);
+				reverseCapitalizedNames.set(node.metadata.ts_name, node.metadata.original_name);
+			}
+			next();
+		}
+	});
+
 	/**
 	 * Check if character is a word boundary (not alphanumeric or underscore)
 	 * @param {string} char
@@ -31,6 +59,29 @@ export function convert_source_map_to_mappings(ast, source, generated_code) {
 		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 isInComment = (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
@@ -46,6 +97,11 @@ export function convert_source_map_to_mappings(ast, source, generated_code) {
 				}
 			}
 			if (match) {
+				// Skip if this match is inside a comment
+				if (isInComment(i)) {
+					continue;
+				}
+
 				// Check word boundaries for identifier-like tokens
 				const isIdentifierLike = /^[a-zA-Z_$]/.test(text);
 				if (isIdentifierLike) {
@@ -96,23 +152,71 @@ export function convert_source_map_to_mappings(ast, source, generated_code) {
 	};
 
 	// Collect text tokens from AST nodes
-	/** @type {string[]} */
+	// Tokens can be either strings or objects with source/generated properties
+	/** @type {Array<string | {source: string, generated: string}>} */
 	const tokens = [];
 
+	// Collect import declarations for full-statement mappings
+	/** @type {Array<{start: number, end: number}>} */
+	const importDeclarations = [];
+
 	// 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)
 			if (node.type === 'Identifier' && node.name) {
-				tokens.push(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 });
+					} else {
+						// Check if this identifier was capitalized (reverse lookup)
+						const originalName = reverseCapitalizedNames.get(node.name);
+						if (originalName) {
+							// This is a capitalized name in generated code, map to lowercase in source
+							tokens.push({ source: originalName, generated: node.name });
+						} else {
+							// Check if this identifier should be capitalized (forward lookup)
+							const capitalizedName = capitalizedNames.get(node.name);
+							if (capitalizedName) {
+								tokens.push({ source: node.name, generated: capitalizedName });
+							} else {
+								tokens.push(node.name);
+							}
+						}
+					}
+				}
 				return; // Leaf node, don't traverse further
 			} else if (node.type === 'JSXIdentifier' && node.name) {
-				tokens.push(node.name);
+				if (node.loc) {
+					// Check if this was capitalized (reverse lookup)
+					const originalName = reverseCapitalizedNames.get(node.name);
+					if (originalName) {
+						tokens.push({ source: originalName, generated: node.name });
+					} else {
+						// Check if this should be capitalized (forward lookup)
+						const capitalizedName = capitalizedNames.get(node.name);
+						if (capitalizedName) {
+							tokens.push({ source: node.name, generated: capitalizedName });
+						} else {
+							tokens.push(node.name);
+						}
+					}
+				}
 				return; // Leaf node, don't traverse further
 			} else if (node.type === 'Literal' && node.raw) {
-				tokens.push(node.raw);
+				if (node.loc) {
+					tokens.push(node.raw);
+				}
 				return; // Leaf node, don't traverse further
 			} else if (node.type === 'ImportDeclaration') {
+				// Collect import declaration range for full-statement mapping
+				// TypeScript reports unused imports with diagnostics covering the entire statement
+				if (node.start !== undefined && node.end !== undefined) {
+					importDeclarations.push({ start: node.start, end: node.end });
+				}
+
 				// Visit specifiers in source order
 				if (node.specifiers) {
 					for (const specifier of node.specifiers) {
@@ -209,7 +313,20 @@ export function convert_source_map_to_mappings(ast, source, generated_code) {
 
 				// 3. Push closing tag name (not visited by AST walker)
 				if (!node.openingElement?.selfClosing && node.closingElement?.name?.type === 'JSXIdentifier') {
-					tokens.push(node.closingElement.name.name);
+					const closingName = node.closingElement.name.name;
+					// Check if this was capitalized (reverse lookup)
+					const originalName = reverseCapitalizedNames.get(closingName);
+					if (originalName) {
+						tokens.push({ source: originalName, generated: closingName });
+					} else {
+						// Check if this should be capitalized (forward lookup)
+						const capitalizedName = capitalizedNames.get(closingName);
+						if (capitalizedName) {
+							tokens.push({ source: closingName, generated: capitalizedName });
+						} else {
+							tokens.push(closingName);
+						}
+					}
 				}
 
 				return;
@@ -988,23 +1105,65 @@ export function convert_source_map_to_mappings(ast, source, generated_code) {
 	});
 
 	// Process each token in order
-	for (const text of tokens) {
-		const sourcePos = findInSource(text);
-		const genPos = findInGenerated(text);
+	for (const token of tokens) {
+		let sourceText, generatedText;
+
+		if (typeof token === 'string') {
+			sourceText = token;
+			generatedText = token;
+		} else {
+			// Token with different source and generated names
+			sourceText = token.source;
+			generatedText = token.generated;
+		}
+
+		const sourcePos = findInSource(sourceText);
+		const genPos = findInGenerated(generatedText);
 
 		if (sourcePos !== null && genPos !== null) {
 			mappings.push({
 				sourceOffsets: [sourcePos],
 				generatedOffsets: [genPos],
-				lengths: [text.length],
+				lengths: [sourceText.length],
 				data: mapping_data,
 			});
 		}
 	}
 
+	// 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
+	for (const importDecl of importDeclarations) {
+		const length = importDecl.end - importDecl.start;
+		mappings.push({
+			sourceOffsets: [importDecl.start],
+			generatedOffsets: [importDecl.start], // Same position in generated code
+			lengths: [length],
+			data: {
+				// only verification (diagnostics) to avoid duplicate hover/completion
+				verification: true
+			},
+		});
+	}
+
 	// 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
+	// This ensures that code actions adding imports at the top work correctly
+	if (mappings.length > 0 && mappings[0].sourceOffsets[0] > 0) {
+		mappings.unshift({
+			sourceOffsets: [0],
+			generatedOffsets: [0],
+			lengths: [1],
+				data: {
+					...mapping_data,
+					codeActions: true, // auto-import
+					rename: false, // avoid rename for a “dummy” mapping
+				}
+		});
+	}
+
 	return {
 		code: generated_code,
 		mappings,

package/src/compiler/types/index.d.ts

@@ -78,6 +78,22 @@ export interface TrackedObjectExpression extends Omit<ObjectExpression, 'type'>
 	properties: (Property | SpreadElement)[];
 }
 
+/**
+ * Tracked Map expression node
+ */
+export interface TrackedMapExpression extends Omit<Node, 'type'> {
+	type: 'TrackedMapExpression';
+	arguments: (Expression | SpreadElement)[];
+}
+
+/**
+ * Tracked Set expression node
+ */
+export interface TrackedSetExpression extends Omit<Node, 'type'> {
+	type: 'TrackedSetExpression';
+	arguments: (Expression | SpreadElement)[];
+}
+
 /**
  * Ripple component node
  */