ripple 0.2.114 → 0.2.115

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.115",
   "type": "module",
   "module": "src/runtime/index-client.js",
   "main": "src/runtime/index-client.js",

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 {
@@ -441,6 +450,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 +1422,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 +1488,44 @@ 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,66 @@ 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 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 +308,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 +1100,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/types/index.d.ts

@@ -73,7 +73,23 @@ declare global {
 
 export declare function createRefKey(): symbol;
 
-export type Tracked<V> = { '#v': V };
+// Base Tracked interface - all tracked values have a '#v' property containing the actual value
+export interface Tracked<V> {	'#v': V; }
+
+// Augment Tracked to be callable when V is a Component
+// This allows <@Something /> to work in JSX when Something is Tracked<Component>
+export interface Tracked<V> {
+	(props: V extends Component<infer P> ? P : never): V extends Component ? void : never;
+}
+
+// Helper type to infer component type from a function that returns a component
+// If T is a function returning a Component, extract the Component type itself, not the return type (void)
+export type InferComponent<T> =
+	T extends () => infer R
+		? R extends Component<any>
+			? R
+			: T
+		: T;
 
 export type Props<K extends PropertyKey = any, V = unknown> = Record<K, V>;
 export type PropsWithExtras<T extends object> = Props & T & Record<string, unknown>;
@@ -90,7 +106,10 @@ type RestKeys<T, K extends readonly (keyof T)[]> = Expand<Omit<T, K[number]>>;
 type SplitResult<T extends Props, K extends readonly (keyof T)[]> =
 	[...PickKeys<T, K>, Tracked<RestKeys<T, K>>];
 
-export declare function track<V>(value?: V | (() => V), get?: (v: V) => V, set?: (next: V, prev: V) => V): Tracked<V>;
+// Overload for function values - infers the return type of the function
+export declare function track<V>(value: () => V, get?: (v: InferComponent<V>) => InferComponent<V>, set?: (next: InferComponent<V>, prev: InferComponent<V>) => InferComponent<V>): Tracked<InferComponent<V>>;
+// Overload for non-function values
+export declare function track<V>(value?: V, get?: (v: V) => V, set?: (next: V, prev: V) => V): Tracked<V>;
 
 export declare function trackSplit<V extends Props, const K extends readonly (keyof V)[]>(
 	value: V,