ripple 0.2.158 → 0.2.160

package/package.json

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

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

@@ -636,6 +636,14 @@ function RipplePlugin(config) {
 					return this.finishNode(node, type);
 				}
 
+				// If we reach here, it means #Map or #Set is being called without 'new'
+				// Throw a TypeError to match JavaScript class constructor behavior
+				const constructorName = type === 'TrackedMapExpression' ? '#Map (TrackedMap)' : '#Set (TrackedSet)';
+				this.raise(
+					node.start,
+					`TypeError: Class constructor ${constructorName} cannot be invoked without 'new'`,
+				);
+
 				this.expect(tt.parenL); // expect '('
 
 				node.arguments = [];
@@ -2128,6 +2136,73 @@ function get_comment_handlers(source, comments, index = 0) {
 									} else {
 										node.trailingComments = [/** @type {CommentWithLocation} */ (comments.shift())];
 									}
+								} else if (hasBlankLine && onlyWhitespace && array_prop && parent[array_prop]) {
+									// When there's a blank line between node and comment(s),
+									// check if there's also a blank line after the comment(s) before the next node
+									// If so, attach comments as trailing to preserve the grouping
+									// Only do this for statement-level contexts (BlockStatement, Program),
+									// not for Element children or other contexts
+									const isStatementContext =
+										parent.type === 'BlockStatement' || parent.type === 'Program';
+
+									// Don't apply for Component - let Prettier handle comment attachment there
+									// Component bodies have different comment handling via metadata.elementLeadingComments
+									if (!isStatementContext) {
+										return;
+									}
+
+									const currentIndex = parent[array_prop].indexOf(node);
+									const nextSibling = parent[array_prop][currentIndex + 1];
+
+									if (nextSibling && nextSibling.loc) {
+										// Find where the comment block ends
+										let lastCommentIndex = 0;
+										let lastCommentEnd = comments[0].end;
+
+										// Collect consecutive comments (without blank lines between them)
+										while (comments[lastCommentIndex + 1]) {
+											const currentComment = comments[lastCommentIndex];
+											const nextComment = comments[lastCommentIndex + 1];
+											const sliceBetween = source.slice(currentComment.end, nextComment.start);
+
+											// If there's a blank line, stop
+											if (/\n\s*\n/.test(sliceBetween)) {
+												break;
+											}
+
+											lastCommentIndex++;
+											lastCommentEnd = nextComment.end;
+										}
+
+										// Check if there's a blank line after the last comment and before next sibling
+										const sliceAfterComments = source.slice(lastCommentEnd, nextSibling.start);
+										const hasBlankLineAfter = /\n\s*\n/.test(sliceAfterComments);
+
+										if (hasBlankLineAfter) {
+											// Don't attach comments as trailing if next sibling is an Element
+											// and any comment falls within the Element's line range
+											// This means the comments are inside the Element (between opening and closing tags)
+											const nextIsElement = nextSibling.type === 'Element';
+											const commentsInsideElement =
+												nextIsElement &&
+												nextSibling.loc &&
+												comments.some((c) => {
+													if (!c.loc) return false;
+													// Check if comment is on a line between Element's start and end lines
+													return (
+														c.loc.start.line >= nextSibling.loc.start.line &&
+														c.loc.end.line <= nextSibling.loc.end.line
+													);
+												});
+
+											if (!commentsInsideElement) {
+												// Attach all the comments as trailing
+												for (let i = 0; i <= lastCommentIndex; i++) {
+													(node.trailingComments ||= []).push(comments.shift());
+												}
+											}
+										}
+									}
 								}
 							}
 						}

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

@@ -821,20 +821,21 @@ const visitors = {
 	 * @param {any} context
 	 */
 	AwaitExpression(node, context) {
+		const parent_block = get_parent_block_node(context);
+
 		if (is_inside_component(context)) {
 			if (context.state.metadata?.await === false) {
 				context.state.metadata.await = true;
 			}
-		}
-		const parent_block = get_parent_block_node(context);
 
-		if (parent_block !== null && parent_block.type !== 'Component') {
-			if (context.state.inside_server_block === false) {
-				error(
-					'`await` is not allowed in client-side control-flow statements',
-					context.state.analysis.module.filename,
-					node,
-				);
+			if (parent_block !== null && parent_block.type !== 'Component') {
+				if (context.state.inside_server_block === false) {
+					error(
+						'`await` is not allowed in client-side control-flow statements',
+						context.state.analysis.module.filename,
+						node,
+					);
+				}
 			}
 		}
 

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

@@ -414,6 +414,30 @@ const visitors = {
 			context.state.metadata.tracking = true;
 		}
 
+		// 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
+		if (callee.type === 'TrackedMapExpression' || callee.type === 'TrackedSetExpression') {
+			// Use NewExpression's arguments (the callee has empty arguments from parser)
+			const argsToUse = node.arguments.length > 0 ? node.arguments : callee.arguments;
+
+			if (context.state.to_ts) {
+				const className = callee.type === 'TrackedMapExpression' ? 'TrackedMap' : 'TrackedSet';
+				const alias = import_from_ripple_if_needed(className, context);
+				const calleeId = b.id(alias);
+				calleeId.loc = callee.loc;
+				calleeId.metadata = { tracked_shorthand: callee.type === 'TrackedMapExpression' ? '#Map' : '#Set' };
+				return b.new(calleeId, ...argsToUse.map((arg) => context.visit(arg)));
+			}
+
+			const helperName = callee.type === 'TrackedMapExpression' ? 'tracked_map' : 'tracked_set';
+			return b.call(
+				`_$_.${helperName}`,
+				b.id('__block'),
+				...argsToUse.map((arg) => context.visit(arg)),
+			);
+		}
+
 		if (
 			context.state.to_ts ||
 			!is_inside_component(context, true) ||
@@ -424,22 +448,6 @@ const visitors = {
 				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();
 		}
 
@@ -486,44 +494,6 @@ const visitors = {
 		);
 	},
 
-	TrackedMapExpression(node, context) {
-		if (context.state.to_ts) {
-			const mapAlias = import_from_ripple_if_needed('TrackedMap', context);
-
-			const calleeId = b.id(mapAlias);
-			// 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) {
-			const setAlias = import_from_ripple_if_needed('TrackedSet', context);
-
-			const calleeId = b.id(setAlias);
-			// 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));
 	},

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

@@ -151,6 +151,18 @@ const visitors = {
 	},
 
 	NewExpression(node, context) {
+		// 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
+		const callee = node.callee;
+		if (callee.type === 'TrackedMapExpression' || callee.type === 'TrackedSetExpression') {
+			// Use NewExpression's arguments (the callee has empty arguments from parser)
+			const argsToUse = node.arguments.length > 0 ? node.arguments : callee.arguments;
+			// For SSR, use regular Map/Set
+			const constructorName = callee.type === 'TrackedMapExpression' ? 'Map' : 'Set';
+			return b.new(b.id(constructorName), ...argsToUse.map((arg) => context.visit(arg)));
+		}
+
 		if (!context.state.to_ts) {
 			delete node.typeArguments;
 		}

package/tests/client/compiler/compiler.basic.test.ripple

@@ -232,8 +232,8 @@ import {
 component App() {
 	const items = #[1, 2, 3];
 	const obj = #{ a: 1, b: 2, c: 3 };
-	const set = #Set([1, 2, 3]);
-	const map = #Map([['a', 1], ['b', 2], ['c', 3]]);
+	const set = new #Set([1, 2, 3]);
+	const map = new #Map([['a', 1], ['b', 2], ['c', 3]]);
 
 	<div {ref () => {}} />
 }
@@ -262,8 +262,8 @@ import {
 component App() {
 	const items = #[1, 2, 3];
 	const obj = #{ a: 1, b: 2, c: 3 };
-	const set = #Set([1, 2, 3]);
-	const map = #Map([['a', 1], ['b', 2], ['c', 3]]);
+	const set = new #Set([1, 2, 3]);
+	const map = new #Map([['a', 1], ['b', 2], ['c', 3]]);
 
 	<div {ref () => {}} />
 }
@@ -288,8 +288,8 @@ component App() {
 component App() {
 	const items = #[1, 2, 3];
 	const obj = #{ a: 1, b: 2, c: 3 };
-	const set = #Set([1, 2, 3]);
-	const map = #Map([['a', 1], ['b', 2], ['c', 3]]);
+	const set = new #Set([1, 2, 3]);
+	const map = new #Map([['a', 1], ['b', 2], ['c', 3]]);
 
 	<div {ref () => {}} />
 }
@@ -310,8 +310,8 @@ import { TrackedArray, TrackedMap, createRefKey as crk } from 'ripple';
 component App() {
 	const items = #[1, 2, 3];
 	const obj = #{ a: 1, b: 2, c: 3 };
-	const set = #Set([1, 2, 3]);
-	const map = #Map([['a', 1], ['b', 2], ['c', 3]]);
+	const set = new #Set([1, 2, 3]);
+	const map = new #Map([['a', 1], ['b', 2], ['c', 3]]);
 
 	<div {ref () => {}} />
 }

package/tests/client/composite/composite.dynamic-components.test.ripple

@@ -78,7 +78,9 @@ describe('composite > dynamic components', () => {
 				<@thing />
 			</div>
 
-			<button onClick={() => @thing = @thing === Child1 ? Child2 : Child1}>{'Change Child'}</button>
+			<button onClick={() => (@thing = @thing === Child1 ? Child2 : Child1)}>
+				{'Change Child'}
+			</button>
 		}
 
 		render(App);

package/tests/client/computed-properties.test.ripple

@@ -7,10 +7,16 @@ describe('computed tracked properties', () => {
 				[0]: track(0),
 			};
 
-      <div>{obj.@[0]}</div>
+			<div>{obj.@[0]}</div>
 
-      <button onClick={() => { obj.@[0] += 1 }}>{"Increment"}</button>
-    }
+			<button
+				onClick={() => {
+					obj.@[0] += 1;
+				}}
+			>
+				{'Increment'}
+			</button>
+		}
 
 		render(App);
 		expect(container).toMatchSnapshot();
@@ -28,10 +34,16 @@ describe('computed tracked properties', () => {
 				[0]: track(0),
 			};
 
-      <div>{obj.@[0]}</div>
+			<div>{obj.@[0]}</div>
 
-      <button onClick={() => { obj.@[0]++ }}>{"Increment"}</button>
-    }
+			<button
+				onClick={() => {
+					obj.@[0]++;
+				}}
+			>
+				{'Increment'}
+			</button>
+		}
 
 		render(App);
 		expect(container).toMatchSnapshot();

package/tests/client/map.test.ripple

@@ -122,7 +122,7 @@ describe('TrackedMap', () => {
 
 	it('creates empty TrackedMap using #Map() shorthand syntax', () => {
 		component MapTest() {
-			let map = #Map();
+			let map = new #Map();
 
 			<button onClick={() => map.set('a', 1)}>{'add'}</button>
 			<pre>{map.size}</pre>
@@ -141,7 +141,7 @@ describe('TrackedMap', () => {
 
 	it('creates TrackedMap with initial entries using #Map() shorthand syntax', () => {
 		component MapTest() {
-			let map = #Map([['a', 1], ['b', 2], ['c', 3]]);
+			let map = new #Map([['a', 1], ['b', 2], ['c', 3]]);
 			let value = track(() => map.get('b'));
 
 			<button onClick={() => map.set('b', 10)}>{'update'}</button>
@@ -163,7 +163,7 @@ describe('TrackedMap', () => {
 
 	it('handles all operations with #Map() shorthand syntax', () => {
 		component MapTest() {
-			let map = #Map([['x', 100], ['y', 200]]);
+			let map = new #Map([['x', 100], ['y', 200]]);
 			let keys = track(() => Array.from(map.keys()));
 
 			<button onClick={() => map.set('z', 300)}>{'add'}</button>

package/tests/client/set.test.ripple

@@ -80,7 +80,7 @@ describe('TrackedSet', () => {
 
 	it('creates empty TrackedSet using #Set() shorthand syntax', () => {
 		component SetTest() {
-			let items = #Set();
+			let items = new #Set();
 
 			<button onClick={() => items.add(1)}>{'add'}</button>
 			<pre>{items.size}</pre>
@@ -99,7 +99,7 @@ describe('TrackedSet', () => {
 
 	it('creates TrackedSet with initial values using #Set() shorthand syntax', () => {
 		component SetTest() {
-			let items = #Set([1, 2, 3, 4]);
+			let items = new #Set([1, 2, 3, 4]);
 			let hasValue = track(() => items.has(3));
 
 			<button onClick={() => items.delete(3)}>{'delete'}</button>
@@ -122,7 +122,7 @@ describe('TrackedSet', () => {
 
 	it('handles all operations with #Set() shorthand syntax', () => {
 		component SetTest() {
-			let items = #Set([10, 20, 30]);
+			let items = new #Set([10, 20, 30]);
 			let values = track(() => Array.from(items.values()));
 
 			<button onClick={() => items.add(40)}>{'add'}</button>