ripple 0.2.129 → 0.2.131

package/package.json

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

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

@@ -501,10 +501,27 @@ function RipplePlugin(config) {
 			parseTrackedCollectionExpression(type) {
 				const node = this.startNode();
 				this.next(); // consume '#Map' or '#Set'
+
+				// Check if we should NOT consume the parentheses
+				// This happens when #Map/#Set appears as a callee in 'new #Map(...)'
+				// In this case, the parentheses and arguments belong to the NewExpression
+				// We detect this by checking if next token is '(' but we just consumed a token
+				// that came right after 'new' keyword (indicated by context or recent token)
+
+				// Simple heuristic: if the input around our start position looks like 'new #Map('
+				// then don't consume the parens
+				const beforeStart = this.input.substring(Math.max(0, node.start - 5), node.start);
+				const isAfterNew = /new\s*$/.test(beforeStart);
+
+				if (isAfterNew && this.type === tt.parenL) {
+					// Don't consume parens - they belong to NewExpression
+					node.arguments = [];
+					return this.finishNode(node, type);
+				}
+
 				this.expect(tt.parenL); // expect '('
 
 				node.arguments = [];
-
 				// Parse arguments similar to function call arguments
 				let first = true;
 				while (!this.eat(tt.parenR)) {
@@ -1233,11 +1250,13 @@ function RipplePlugin(config) {
 						const content = input.slice(0, end);
 
 						const component = this.#path.findLast((n) => n.type === 'Component');
+						const parsed_css = parse_style(content);
+
 						if (!inside_head) {
 							if (component.css !== null) {
 								throw new Error('Components can only have one style tag');
 							}
-							component.css = parse_style(content);
+							component.css = parsed_css;
 						}
 
 						const newLines = content.match(regex_newline_characters)?.length;
@@ -1256,11 +1275,10 @@ function RipplePlugin(config) {
 							this.#path.pop();
 							this.next();
 						}
-						// This node is used for Prettier, we don't actually need
-						// the node for Ripple's transform process
-						if (!inside_head) {
-							element.children = [component.css];
-						}
+						// This node is used for Prettier - always add parsed CSS as children
+						// for proper formatting, regardless of whether it's inside head or not
+						element.children = [parsed_css];
+
 						// Ensure we escape JSX <tag></tag> context
 						const tokContexts = this.acornTypeScript.tokContexts;
 						const curContext = this.curContext();
@@ -1392,7 +1410,7 @@ function RipplePlugin(config) {
 					this.next();
 					this.enterScope(0);
 					node.id = this.parseIdent();
-					this.declareName(node.id.name, 'var', node.id.start);		
+					this.declareName(node.id.name, 'var', node.id.start);
 					this.parseFunctionParams(node);
 					this.eat(tt.braceL);
 					node.body = [];

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

@@ -335,6 +335,23 @@ const visitors = {
 			if (!context.state.to_ts) {
 				delete node.typeArguments;
 			}
+
+			// Special handling for TrackedMapExpression and TrackedSetExpression
+			// When source is "new #Map(...)", the callee is TrackedMapExpression with empty arguments
+			// and the actual arguments are in NewExpression.arguments
+			// We need to merge them before transforming
+			if (
+				context.state.to_ts &&
+				(callee.type === 'TrackedMapExpression' || callee.type === 'TrackedSetExpression')
+			) {
+				// If the callee has empty arguments, use the NewExpression's arguments instead
+				if (callee.arguments.length === 0 && node.arguments.length > 0) {
+					callee.arguments = node.arguments;
+				}
+				// Transform the tracked expression directly - it will return a NewExpression
+				return context.visit(callee);
+			}
+
 			return context.next();
 		}
 
@@ -358,7 +375,7 @@ const visitors = {
 
 			return b.call(
 				b.member(b.id('TrackedArray'), b.id('from')),
-				...node.elements.map((el) => context.visit(el)),
+				b.array(node.elements.map((el) => context.visit(el))),
 			);
 		}
 

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

@@ -366,9 +366,13 @@ export function convert_source_map_to_mappings(ast, source, generated_code, sour
 				}
 				return;
 			} else if (node.type === 'VariableDeclarator') {
-				// Visit in source order: id, init
+				// Visit in source order: id, typeAnnotation, init
 				if (node.id) {
 					visit(node.id);
+					// Visit type annotation if present
+					if (node.id.typeAnnotation) {
+						visit(node.id.typeAnnotation);
+					}
 				}
 				if (node.init) {
 					visit(node.init);
@@ -486,9 +490,13 @@ export function convert_source_map_to_mappings(ast, source, generated_code, sour
 				}
 				return;
 			} else if (node.type === 'AssignmentExpression' || node.type === 'AssignmentPattern') {
-				// Visit in source order: left, right
+				// Visit in source order: left, typeAnnotation, right
 				if (node.left) {
 					visit(node.left);
+					// Visit type annotation if present (for AssignmentPattern)
+					if (node.left.typeAnnotation) {
+						visit(node.left.typeAnnotation);
+					}
 				}
 				if (node.right) {
 					visit(node.right);
@@ -647,6 +655,14 @@ export function convert_source_map_to_mappings(ast, source, generated_code, sour
 				// Visit the argument
 				if (node.argument) {
 					visit(node.argument);
+					// Visit type annotation if present (for RestElement)
+					if (node.argument.typeAnnotation) {
+						visit(node.argument.typeAnnotation);
+					}
+				}
+				// RestElement itself can have typeAnnotation
+				if (node.typeAnnotation) {
+					visit(node.typeAnnotation);
 				}
 				return;
 			} else if (node.type === 'YieldExpression' || node.type === 'AwaitExpression') {