ripple 0.2.139 → 0.2.141

package/package.json

@@ -3,7 +3,7 @@
   "description": "Ripple is an elegant TypeScript UI framework",
   "license": "MIT",
   "author": "Dominic Gannaway",
-  "version": "0.2.139",
+  "version": "0.2.141",
   "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.139"
+    "ripple": "0.2.141"
   }
 }

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

@@ -169,14 +169,18 @@ function RipplePlugin(config) {
 					}
 
 					if (inComponent) {
-						// Inside nested functions (scopeStack.length >= 5), treat < as relational/generic operator
-						// At component top-level (scopeStack.length <= 4), apply JSX detection logic
+						// Check if we're inside a nested function (arrow function, function expression, etc.)
+						// We need to distinguish between being inside a function vs just being in nested scopes
+						// (like for loops, if blocks, JSX elements, etc.)
+						const nestedFunctionContext = this.context.some((ctx) => ctx.token === 'function');
+
+						// Inside nested functions, treat < as relational/generic operator
 						// BUT: if the < is followed by /, it's a closing JSX tag, not a less-than operator
 						const nextChar =
 							this.pos + 1 < this.input.length ? this.input.charCodeAt(this.pos + 1) : -1;
 						const isClosingTag = nextChar === 47; // '/'
 
-						if (this.scopeStack.length >= 5 && !isClosingTag) {
+						if (nestedFunctionContext && !isClosingTag) {
 							// Inside function - treat as TypeScript generic, not JSX
 							++this.pos;
 							return this.finishToken(tt.relational, '<');
@@ -987,6 +991,7 @@ function RipplePlugin(config) {
 						this.finishNode(id, 'Identifier');
 						node.name = id;
 						node.value = id;
+						node.shorthand = true; // Mark as shorthand since name and value are the same
 						this.next();
 						this.expect(tt.braceR);
 						return this.finishNode(node, 'Attribute');

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

@@ -109,7 +109,7 @@ const visitors = {
 		const parent = context.path.at(-1);
 
 		if (
-			is_reference(node, /** @type {Node} */(parent)) &&
+			is_reference(node, /** @type {Node} */ (parent)) &&
 			binding &&
 			context.state.inside_server_block &&
 			context.state.scope.server_block
@@ -144,7 +144,7 @@ const visitors = {
 		}
 
 		if (
-			is_reference(node, /** @type {Node} */(parent)) &&
+			is_reference(node, /** @type {Node} */ (parent)) &&
 			node.tracked &&
 			binding?.node !== node
 		) {
@@ -155,7 +155,7 @@ const visitors = {
 		}
 
 		if (
-			is_reference(node, /** @type {Node} */(parent)) &&
+			is_reference(node, /** @type {Node} */ (parent)) &&
 			node.tracked &&
 			binding?.node !== node
 		) {
@@ -191,7 +191,7 @@ const visitors = {
 					error(
 						`Directly accessing internal property "${propertyName}" of a tracked object is not allowed. Use \`get(${node.object.name})\` or \`@${node.object.name}\` instead.`,
 						context.state.analysis.module.filename,
-						node.property
+						node.property,
 					);
 				}
 			}
@@ -205,7 +205,7 @@ const visitors = {
 					`Accessing a tracked object directly is not allowed, use the \`@\` prefix to read the value inside a tracked object - for example \`@${node.object.name}${node.property.type === 'Identifier' ? `.${node.property.name}` : ''}\``,
 					context.state.analysis.module.filename,
 					node,
-				)
+				);
 			}
 		}
 
@@ -259,8 +259,11 @@ const visitors = {
 					const callee = declarator.init.callee;
 					// Check if it's a call to `track` or `tracked`
 					if (
-						(callee.type === 'Identifier' && (callee.name === 'track' || callee.name === 'tracked')) ||
-						(callee.type === 'MemberExpression' && callee.property.type === 'Identifier' && (callee.property.name === 'track' || callee.property.name === 'tracked'))
+						(callee.type === 'Identifier' &&
+							(callee.name === 'track' || callee.name === 'tracked')) ||
+						(callee.type === 'MemberExpression' &&
+							callee.property.type === 'Identifier' &&
+							(callee.property.name === 'track' || callee.property.name === 'tracked'))
 					) {
 						binding.metadata = { ...binding.metadata, is_tracked_object: true };
 					}
@@ -623,7 +626,6 @@ const visitors = {
 			context.state.analysis.module.filename,
 			node,
 		);
-
 	},
 
 	Element(node, context) {
@@ -829,7 +831,7 @@ const visitors = {
 				error(
 					'`await` is not allowed in client-side control-flow statements',
 					context.state.analysis.module.filename,
-					node
+					node,
 				);
 			}
 		}

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

@@ -190,9 +190,17 @@ const visitors = {
 					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);
+						const capitalized_name = node.name.charAt(0).toUpperCase() + node.name.slice(1);
+						const capitalized_node = {
+							...node,
+							name: capitalized_name,
+							metadata: {
+								...node.metadata,
+								original_name: node.name,
+								is_capitalized: true,
+							},
+						};
+						return b.member(capitalized_node, b.literal('#v'), true);
 					}
 					return b.member(node, b.literal('#v'), true);
 				}
@@ -525,13 +533,74 @@ const visitors = {
 
 	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);
+		if (context.state.to_ts) {
+			/**
+			 * Recursively capitalize identifiers in patterns (ArrayPattern, ObjectPattern)
+			 * @param {any} pattern - The pattern node to process
+			 * @returns {any} The transformed pattern
+			 */
+			const capitalize_pattern = (pattern) => {
+				if (pattern.type === 'Identifier') {
+					const binding = context.state.scope.get(pattern.name);
+					if (binding?.metadata?.is_dynamic_component) {
+						const capitalized_name = pattern.name.charAt(0).toUpperCase() + pattern.name.slice(1);
+						// Add metadata to track the original name for Volar mappings
+						return {
+							...pattern,
+							name: capitalized_name,
+							metadata: {
+								...pattern.metadata,
+								original_name: pattern.name,
+								is_capitalized: true,
+							},
+						};
+					}
+					return pattern;
+				} else if (pattern.type === 'ArrayPattern') {
+					return {
+						...pattern,
+						elements: pattern.elements.map((element) =>
+							element ? capitalize_pattern(element) : element,
+						),
+					};
+				} else if (pattern.type === 'ObjectPattern') {
+					return {
+						...pattern,
+						properties: pattern.properties.map((prop) => {
+							if (prop.type === 'Property') {
+								return {
+									...prop,
+									value: capitalize_pattern(prop.value),
+								};
+							} else if (prop.type === 'RestElement') {
+								return {
+									...prop,
+									argument: capitalize_pattern(prop.argument),
+								};
+							}
+							return prop;
+						}),
+					};
+				} else if (pattern.type === 'RestElement') {
+					return {
+						...pattern,
+						argument: capitalize_pattern(pattern.argument),
+					};
+				} else if (pattern.type === 'AssignmentPattern') {
+					return {
+						...pattern,
+						left: capitalize_pattern(pattern.left),
+						right: context.visit(pattern.right),
+					};
+				}
+				return pattern;
+			};
+
+			const transformed_id = capitalize_pattern(node.id);
+			if (transformed_id !== node.id) {
 				return {
 					...node,
-					id: { ...node.id, name: capitalizedName },
+					id: transformed_id,
 					init: node.init ? context.visit(node.init) : null,
 				};
 			}
@@ -938,7 +1007,7 @@ const visitors = {
 					let expression = visit(class_attribute.value, { ...state, metadata });
 
 					const hash_arg = scoping_hash ? b.literal(scoping_hash) : undefined;
-					const is_html = context.state.metadata.namespace === 'html' && node.id.name !== 'svg';
+					const is_html = context.state.namespace === 'html' && node.id.name !== 'svg';
 
 					if (metadata.tracking) {
 						local_updates.push(
@@ -1244,7 +1313,6 @@ const visitors = {
 							/** @type {Expression} */ (context.visit(left)),
 							/** @type {Expression} */ (context.visit(right)),
 						),
-				b.id('__block'),
 			);
 		}
 
@@ -1265,7 +1333,6 @@ const visitors = {
 							),
 							/** @type {Expression} */ (context.visit(right)),
 						),
-				b.id('__block'),
 			);
 		}
 
@@ -1291,7 +1358,6 @@ const visitors = {
 				node.prefix ? '_$_.update_pre_property' : '_$_.update_property',
 				context.visit(argument.object, { ...context.state, metadata: { tracking: false } }),
 				argument.computed ? context.visit(argument.property) : b.literal(argument.property.name),
-				b.id('__block'),
 				node.operator === '--' ? b.literal(-1) : undefined,
 			);
 		}
@@ -1300,7 +1366,6 @@ const visitors = {
 			return b.call(
 				node.prefix ? '_$_.update_pre' : '_$_.update',
 				context.visit(argument, { ...context.state, metadata: { tracking: null } }),
-				b.id('__block'),
 				node.operator === '--' ? b.literal(-1) : undefined,
 			);
 		}
@@ -1309,7 +1374,6 @@ const visitors = {
 			return b.call(
 				node.prefix ? '_$_.update_pre' : '_$_.update',
 				context.visit(argument.argument, { ...context.state, metadata: { tracking: null } }),
-				b.id('__block'),
 				node.operator === '--' ? b.literal(-1) : undefined,
 			);
 		}
@@ -1740,7 +1804,10 @@ function transform_ts_child(node, context) {
 				}
 				jsx_name.loc = attr.name.loc || name.loc;
 
-				return b.jsx_attribute(jsx_name, b.jsx_expression_container(value));
+				const jsx_attr = b.jsx_attribute(jsx_name, b.jsx_expression_container(value));
+				// Preserve shorthand flag from parser (set for {identifier} syntax)
+				jsx_attr.shorthand = attr.shorthand ?? false;
+				return jsx_attr;
 			} else if (attr.type === 'SpreadAttribute') {
 				const metadata = { await: false };
 				const argument = visit(attr.argument, { ...state, metadata });
@@ -1783,31 +1850,78 @@ function transform_ts_child(node, context) {
 			closing_type = node.selfClosing ? undefined : type_expression;
 		} else {
 			opening_type = b.jsx_id(type_expression);
-			// 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_expression.length,
-				},
-			};
-
-			if (!node.selfClosing) {
-				closing_type = b.jsx_id(type_expression);
-				closing_type.loc = {
+			// For tracked identifiers (dynamic components), adjust the loc to skip the '@' prefix
+			// and add metadata for mapping
+			if (node.id.tracked && node.id.loc) {
+				// The original identifier loc includes the '@', so we need to skip it
+				opening_type.loc = {
 					start: {
-						line: node.loc.end.line,
-						column: node.loc.end.column - type_expression.length - 1,
+						line: node.id.loc.start.line,
+						column: node.id.loc.start.column + 1, // Skip '@'
+					},
+					end: node.id.loc.end,
+				};
+				// Add metadata if this was capitalized
+				if (node.metadata?.ts_name && node.metadata?.original_name) {
+					opening_type.metadata = {
+						original_name: node.metadata.original_name,
+						is_capitalized: true,
+					};
+				}
+			} else {
+				// 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.end.line,
-						column: node.loc.end.column - 1,
+						line: node.loc.start.line,
+						column: node.loc.start.column + 2 + type_expression.length,
 					},
 				};
 			}
+
+			if (!node.selfClosing) {
+				closing_type = b.jsx_id(type_expression);
+				// For tracked identifiers, also adjust closing tag location
+				if (node.id.tracked && node.id.loc) {
+					// Calculate position relative to closing tag
+					// Format: </@identifier>
+					const closing_tag_start = node.loc.end.column - type_expression.length - 3; // </@
+					closing_type.loc = {
+						start: {
+							line: node.loc.end.line,
+							column: closing_tag_start + 3, // Skip '</@'
+						},
+						end: {
+							line: node.loc.end.line,
+							column:
+								closing_tag_start +
+								3 +
+								(node.metadata?.original_name?.length || type_expression.length),
+						},
+					};
+					// Add metadata if this was capitalized
+					if (node.metadata?.ts_name && node.metadata?.original_name) {
+						closing_type.metadata = {
+							original_name: node.metadata.original_name,
+							is_capitalized: true,
+						};
+					}
+				} else {
+					closing_type.loc = {
+						start: {
+							line: node.loc.end.line,
+							column: node.loc.end.column - type_expression.length - 1,
+						},
+						end: {
+							line: node.loc.end.line,
+							column: node.loc.end.column - 1,
+						},
+					};
+				}
+			}
 		}
 
 		const jsxElement = b.jsx_element(
@@ -2219,6 +2333,22 @@ function create_tsx_with_typescript_support() {
 
 	return {
 		...base_tsx,
+		// Custom handler for ArrayPattern to ensure typeAnnotation is visited
+		// esrap's TypeScript handler doesn't visit typeAnnotation for ArrayPattern (only for ObjectPattern)
+		ArrayPattern(node, context) {
+			context.write('[');
+			for (let i = 0; i < node.elements.length; i++) {
+				if (i > 0) context.write(', ');
+				if (node.elements[i]) {
+					context.visit(node.elements[i]);
+				}
+			}
+			context.write(']');
+			// Visit type annotation if present
+			if (node.typeAnnotation) {
+				context.visit(node.typeAnnotation);
+			}
+		},
 		// Custom handler for FunctionDeclaration to support component->function mapping
 		// Needed for volar mappings and intellisense on function or component keyword
 		FunctionDeclaration(node, context) {
@@ -2396,12 +2526,13 @@ export function transform_client(filename, source, analysis, to_ts) {
 
 	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),
-		})
-	);
+	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
@@ -2427,7 +2558,10 @@ export function transform_client(filename, source, analysis, to_ts) {
 		 */
 		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])) {
+				if (
+					offset >= line_offsets[i] &&
+					(i === line_offsets.length - 1 || offset < line_offsets[i + 1])
+				) {
 					return i + 1;
 				}
 			}
@@ -2440,22 +2574,25 @@ export function transform_client(filename, source, analysis, to_ts) {
 		// 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, (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;
-			}
+		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;
-		});
+				return replacement;
+			},
+		);
 
 		post_processing_changes = line_deltas;
 	}

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

@@ -70,26 +70,6 @@ export function convert_source_map_to_mappings(ast, source, generated_code, esra
 		return line_offsets[line - 1] + column;
 	};
 
-	// Map to track capitalized names: original name -> capitalized name
-	/** @type {Map<string, string>} */
-	const capitalized_names = new Map();
-	// Reverse map: capitalized name -> original name
-	/** @type {Map<string, string>} */
-	const reverse_capitalized_names = 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) {
-				capitalized_names.set(node.metadata.original_name, node.metadata.ts_name);
-				reverse_capitalized_names.set(node.metadata.ts_name, node.metadata.original_name);
-			}
-			next();
-		}
-	});
-
 	const adjusted_source_map = build_source_to_generated_map(
 		esrap_source_map,
 		post_processing_changes,
@@ -110,51 +90,30 @@ export function convert_source_map_to_mappings(ast, source, generated_code, esra
 	walk(ast, null, {
 		_(node, { visit }) {
 			// Collect key node types: Identifiers, Literals, and JSX Elements
-			// Skip nodes without .loc (synthesized during transformation, not in original source)
-			if (node.type === 'Identifier' && node.name) {
-				if (node.loc) {
+			if (node.type === 'Identifier') {
+				// Only create mappings for identifiers with location info (from source)
+				// Synthesized identifiers (created by builders) don't have .loc and are skipped
+				if (node.name && 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, loc: node.loc });
+					} else if (node.metadata?.is_capitalized) {
+						// This identifier was capitalized during transformation
+						// Map the original lowercase name to the capitalized generated name
+						tokens.push({ source: node.metadata.original_name, 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, 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, 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, loc: node.loc });
-								} else {
-									// Store token with .loc for accurate positioning
-									tokens.push({ source: node.name, generated: node.name, loc: node.loc });
-								}
-							}
-						}
+						// No transformation - source and generated names are the same
+						tokens.push({ source: node.name, generated: node.name, loc: node.loc });
 					}
 				}
 				return; // Leaf node, don't traverse further
-			} else if (node.type === 'JSXIdentifier' && node.name) {
-				if (node.loc) {
-					// Check if this was capitalized (reverse lookup)
-					const originalName = reverse_capitalized_names.get(node.name);
-					if (originalName) {
-						tokens.push({ source: originalName, generated: node.name, loc: node.loc });
+			} else if (node.type === 'JSXIdentifier') {
+				// JSXIdentifiers can also be capitalized (for dynamic components)
+				if (node.loc && node.name) {
+					if (node.metadata?.is_capitalized) {
+						tokens.push({ source: node.metadata.original_name, 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, loc: node.loc });
-						} else {
-							tokens.push({ source: node.name, generated: node.name, loc: node.loc });
-						}
+						tokens.push({ source: node.name, generated: node.name, loc: node.loc });
 					}
 				}
 				return; // Leaf node, don't traverse further
@@ -242,11 +201,18 @@ export function convert_source_map_to_mappings(ast, source, generated_code, esra
 				return;
 			} else if (node.type === 'JSXAttribute') {
 				// Visit name and value in source order
-				if (node.name) {
-					visit(node.name);
-				}
-				if (node.value) {
-					visit(node.value);
+				// For shorthand attributes ({ count }), key and value are the same node, only visit once
+				if (node.shorthand) {
+					if (node.value) {
+						visit(node.value);
+					}
+				} else {
+					if (node.name) {
+						visit(node.name);
+					}
+					if (node.value) {
+						visit(node.value);
+					}
 				}
 				return;
 			} else if (node.type === 'JSXSpreadAttribute') {
@@ -282,19 +248,10 @@ export function convert_source_map_to_mappings(ast, source, generated_code, esra
 				// 3. Push closing tag name (not visited by AST walker)
 				if (!node.openingElement?.selfClosing && node.closingElement?.name?.type === 'JSXIdentifier') {
 					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, loc: closingNameNode.loc });
+					if (closingNameNode.metadata?.is_capitalized) {
+						tokens.push({ source: closingNameNode.metadata.original_name, generated: closingNameNode.name, 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, loc: closingNameNode.loc });
-						} else {
-							tokens.push({ source: closingName, generated: closingName, loc: closingNameNode.loc });
-						}
+						tokens.push({ source: closingNameNode.name, generated: closingNameNode.name, loc: closingNameNode.loc });
 					}
 				}