ripple 0.2.134 → 0.2.136

package/package.json

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

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

@@ -29,11 +29,34 @@ function convert_from_jsx(node) {
 	return node;
 }
 
+const regex_whitespace_only = /\s/;
+
+/**
+ * Skip whitespace characters without skipping comments.
+ * This is needed because Acorn's skipSpace() also skips comments, which breaks
+ * parsing in certain contexts. Updates parser position and line tracking.
+ * @param {acorn.Parser} parser
+ */
+function skipWhitespace(parser) {
+	const originalStart = parser.start;
+	while (parser.start < parser.input.length && regex_whitespace_only.test(parser.input[parser.start])) {
+		parser.start++;
+	}
+	// Update line tracking if whitespace was skipped
+	if (parser.start !== originalStart) {
+		const lineInfo = acorn.getLineInfo(parser.input, parser.start);
+		parser.curLine = lineInfo.line;
+		parser.lineStart = parser.start - lineInfo.column;
+		parser.startLoc = lineInfo;
+	}
+}
+
 function isWhitespaceTextNode(node) {
 	if (!node || node.type !== 'Text') {
 		return false;
 	}
-	const value = typeof node.value === 'string' ? node.value : typeof node.raw === 'string' ? node.raw : '';
+	const value =
+		typeof node.value === 'string' ? node.value : typeof node.raw === 'string' ? node.raw : '';
 	return /^\s*$/.test(value);
 }
 
@@ -64,7 +87,9 @@ function RipplePlugin(config) {
 				}
 
 				const children = Array.isArray(container.children) ? container.children : [];
-				const hasMeaningfulChildren = children.some((child) => child && !isWhitespaceTextNode(child));
+				const hasMeaningfulChildren = children.some(
+					(child) => child && !isWhitespaceTextNode(child),
+				);
 
 				if (hasMeaningfulChildren) {
 					return null;
@@ -497,6 +522,25 @@ function RipplePlugin(config) {
 
 				return super.parseExprAtom(refDestructuringErrors, forNew, forInit);
 			}
+
+			/**
+			 * Override to track parenthesized expressions in metadata
+			 * This allows the prettier plugin to preserve parentheses where they existed
+			 */
+			parseParenAndDistinguishExpression(canBeArrow, forInit) {
+				const startPos = this.start;
+				const expr = super.parseParenAndDistinguishExpression(canBeArrow, forInit);
+
+				// If the expression's start position is after the opening paren,
+				// it means it was wrapped in parentheses. Mark it in metadata.
+				if (expr && expr.start > startPos) {
+					expr.metadata ??= {};
+					expr.metadata.parenthesized = true;
+				}
+
+				return expr;
+			}
+
 			/**
 			 * Parse `@(expression)` syntax for unboxing tracked values
 			 * Creates a TrackedExpression node with the argument property
@@ -688,6 +732,7 @@ function RipplePlugin(config) {
 					this.exitScope();
 
 					this.next();
+					skipWhitespace(this);
 					this.finishNode(node, 'Component');
 					this.awaitPos = 0;
 
@@ -995,6 +1040,10 @@ function RipplePlugin(config) {
 			}
 
 			jsx_parseElementName() {
+				if (this.type?.label === 'jsxTagEnd') {
+					return '';
+				}
+
 				let node = this.jsx_parseNamespacedName();
 
 				if (node.type === 'JSXNamespacedName') {
@@ -1004,8 +1053,39 @@ function RipplePlugin(config) {
 				if (this.eat(tt.dot)) {
 					let memberExpr = this.startNodeAt(node.start, node.loc && node.loc.start);
 					memberExpr.object = node;
-					memberExpr.property = this.jsx_parseIdentifier();
-					memberExpr.computed = false;
+
+					// Check for .@[expression] syntax for tracked computed member access
+					// After eating the dot, check if the current token is @ followed by [
+					if (this.type.label === '@') {
+						// Check if the next character after @ is [
+						const nextChar = this.input.charCodeAt(this.pos);
+
+						if (nextChar === 91) { // [ character
+							memberExpr.computed = true;
+
+							// Consume the @ token
+							this.next();
+
+							// Now this.type should be bracketL
+							// Consume the [ and parse the expression inside
+							this.expect(tt.bracketL);
+
+							// Parse the expression inside brackets
+							memberExpr.property = this.parseExpression();
+							memberExpr.property.tracked = true;
+
+							// Expect closing bracket
+							this.expect(tt.bracketR);
+						} else {
+							// @ not followed by [, treat as regular tracked identifier
+							memberExpr.property = this.jsx_parseIdentifier();
+							memberExpr.computed = false;
+						}
+					} else {
+						// Regular dot notation
+						memberExpr.property = this.jsx_parseIdentifier();
+						memberExpr.computed = false;
+					}
 					while (this.eat(tt.dot)) {
 						let newMemberExpr = this.startNodeAt(
 							memberExpr.start,
@@ -1029,7 +1109,7 @@ function RipplePlugin(config) {
 						var t = this.jsx_parseExpressionContainer();
 						return (
 							'JSXEmptyExpression' === t.expression.type &&
-								this.raise(t.start, 'attributes must only be assigned a non-empty expression'),
+							this.raise(t.start, 'attributes must only be assigned a non-empty expression'),
 							t
 						);
 					case tok.jsxTagStart:
@@ -1202,14 +1282,14 @@ function RipplePlugin(config) {
 							this.raise(
 								this.pos,
 								'Unexpected token `' +
-									this.input[this.pos] +
-									'`. Did you mean `' +
-									(ch === 62 ? '&gt;' : '&rbrace;') +
-									'` or ' +
-									'`{"' +
-									this.input[this.pos] +
-									'"}' +
-									'`?',
+								this.input[this.pos] +
+								'`. Did you mean `' +
+								(ch === 62 ? '&gt;' : '&rbrace;') +
+								'` or ' +
+								'`{"' +
+								this.input[this.pos] +
+								'"}' +
+								'`?',
 							);
 						}
 
@@ -1519,6 +1599,7 @@ function RipplePlugin(config) {
 
 						this.#path.pop();
 						this.next();
+						skipWhitespace(this);
 						return;
 					}
 					const node = this.parseElement();
@@ -1528,7 +1609,14 @@ function RipplePlugin(config) {
 				} else {
 					const node = this.parseStatement(null);
 					body.push(node);
+
+					// Ensure we're not in JSX context before recursing
+					// This is important when elements are parsed at statement level
+					if (this.curContext() === this.acornTypeScript.tokContexts.tc_expr) {
+						this.context.pop();
+					}
 				}
+
 				this.parseTemplateBody(body);
 			}
 
@@ -1575,6 +1663,7 @@ function RipplePlugin(config) {
 					this.exitScope();
 
 					this.next();
+					skipWhitespace(this);
 					this.finishNode(node, 'Component');
 					this.awaitPos = 0;
 
@@ -1687,6 +1776,16 @@ function RipplePlugin(config) {
  * @returns {{ onComment: Function, add_comments: Function }} Comment handler functions
  */
 function get_comment_handlers(source, comments, index = 0) {
+	function getNextNonWhitespaceCharacter(text, startIndex) {
+		for (let i = startIndex; i < text.length; i++) {
+			const char = text[i];
+			if (char !== ' ' && char !== '\t' && char !== '\n' && char !== '\r') {
+				return char;
+			}
+		}
+		return null;
+	}
+
 	return {
 		onComment: (block, value, start, end, start_loc, end_loc, metadata) => {
 			if (block && /\n/.test(value)) {
@@ -1717,34 +1816,66 @@ function get_comment_handlers(source, comments, index = 0) {
 
 			comments = comments
 				.filter((comment) => comment.start >= index)
-				.map(({ type, value, start, end, loc, context }) => ({ type, value, start, end, loc, context }));
+				.map(({ type, value, start, end, loc, context }) => ({
+					type,
+					value,
+					start,
+					end,
+					loc,
+					context,
+				}));
 
 			walk(ast, null, {
 				_(node, { next, path }) {
 					let comment;
 
-						const metadata = /** @type {{ commentContainerId?: number, elementLeadingComments?: CommentWithLocation[] }} */ (node?.metadata);
+					const metadata =
+						/** @type {{ commentContainerId?: number, elementLeadingComments?: CommentWithLocation[] }} */ (
+							node?.metadata
+						);
 
-						if (metadata && metadata.commentContainerId !== undefined) {
-							while (
-								comments[0] &&
-								comments[0].context &&
-								comments[0].context.containerId === metadata.commentContainerId &&
-								comments[0].context.beforeMeaningfulChild
-							) {
-								const elementComment = /** @type {CommentWithLocation & { context?: any }} */ (comments.shift());
-								(metadata.elementLeadingComments ||= []).push(elementComment);
-							}
+					if (metadata && metadata.commentContainerId !== undefined) {
+						while (
+							comments[0] &&
+							comments[0].context &&
+							comments[0].context.containerId === metadata.commentContainerId &&
+							comments[0].context.beforeMeaningfulChild
+						) {
+							const elementComment = /** @type {CommentWithLocation & { context?: any }} */ (
+								comments.shift()
+							);
+							(metadata.elementLeadingComments ||= []).push(elementComment);
 						}
+					}
 
 					while (comments[0] && comments[0].start < node.start) {
 						comment = /** @type {CommentWithLocation} */ (comments.shift());
+
+						// Skip leading comments for BlockStatement that is a function body
+						// These comments should be dangling on the function instead
+						if (node.type === 'BlockStatement') {
+							const parent = path.at(-1);
+							if (
+								parent &&
+								(parent.type === 'FunctionDeclaration' ||
+									parent.type === 'FunctionExpression' ||
+									parent.type === 'ArrowFunctionExpression') &&
+								parent.body === node
+							) {
+								// This is a function body - don't attach comment, let it be handled by function
+								(parent.comments ||= []).push(comment);
+								continue;
+							}
+						}
+
 						if (comment.loc) {
 							const ancestorElements = path
 								.filter((ancestor) => ancestor && ancestor.type === 'Element' && ancestor.loc)
 								.sort((a, b) => a.loc.start.line - b.loc.start.line);
 
-							const targetAncestor = ancestorElements.find((ancestor) => comment.loc.start.line < ancestor.loc.start.line);
+							const targetAncestor = ancestorElements.find(
+								(ancestor) => comment.loc.start.line < ancestor.loc.start.line,
+							);
 
 							if (targetAncestor) {
 								targetAncestor.metadata ??= {};
@@ -1755,72 +1886,183 @@ function get_comment_handlers(source, comments, index = 0) {
 						(node.leadingComments ||= []).push(comment);
 					}
 
-			next();
+					next();
 
-			if (comments[0]) {
-				if (node.type === 'BlockStatement' && node.body.length === 0) {
-					// Collect all comments that fall within this empty block
-					while (comments[0] && comments[0].start < node.end && comments[0].end < node.end) {
-						comment = /** @type {CommentWithLocation} */ (comments.shift());
-						(node.innerComments ||= []).push(comment);
-					}
-					if (node.innerComments && node.innerComments.length > 0) {
-						return;
-					}
-				}
-				// Handle empty Element nodes the same way as empty BlockStatements
-				if (node.type === 'Element' && (!node.children || node.children.length === 0)) {
-					if (comments[0].start < node.end && comments[0].end < node.end) {
-						comment = /** @type {CommentWithLocation} */ (comments.shift());
-						(node.innerComments ||= []).push(comment);
-						return;
-					}
-				}
-				const parent = /** @type {any} */ (path.at(-1));						if (parent === undefined || node.end !== parent.end) {
+					if (comments[0]) {
+						if (node.type === 'BlockStatement' && node.body.length === 0) {
+							// Collect all comments that fall within this empty block
+							while (comments[0] && comments[0].start < node.end && comments[0].end < node.end) {
+								comment = /** @type {CommentWithLocation} */ (comments.shift());
+								(node.innerComments ||= []).push(comment);
+							}
+							if (node.innerComments && node.innerComments.length > 0) {
+								return;
+							}
+						}
+						// Handle empty Element nodes the same way as empty BlockStatements
+						if (node.type === 'Element' && (!node.children || node.children.length === 0)) {
+							if (comments[0].start < node.end && comments[0].end < node.end) {
+								comment = /** @type {CommentWithLocation} */ (comments.shift());
+								(node.innerComments ||= []).push(comment);
+								return;
+							}
+						}
+
+						const parent = /** @type {any} */ (path.at(-1));
+
+						if (parent === undefined || node.end !== parent.end) {
 							const slice = source.slice(node.end, comments[0].start);
 
 							// Check if this node is the last item in an array-like structure
 							let is_last_in_array = false;
 							let array_prop = null;
 
-							if (parent?.type === 'BlockStatement' || parent?.type === 'Program' || parent?.type === 'Component') {
+							if (
+								parent?.type === 'BlockStatement' ||
+								parent?.type === 'Program' ||
+								parent?.type === 'Component' ||
+								parent?.type === 'ClassBody'
+							) {
 								array_prop = 'body';
-							} else if (parent?.type === 'ArrayExpression') {
+							} else if (parent?.type === 'SwitchStatement') {
+								array_prop = 'cases';
+							} else if (parent?.type === 'SwitchCase') {
+								array_prop = 'consequent';
+							} else if (
+								parent?.type === 'ArrayExpression' ||
+								parent?.type === 'TrackedArrayExpression'
+							) {
 								array_prop = 'elements';
-							} else if (parent?.type === 'ObjectExpression') {
+							} else if (
+								parent?.type === 'ObjectExpression' ||
+								parent?.type === 'TrackedObjectExpression'
+							) {
 								array_prop = 'properties';
+							} else if (
+								parent?.type === 'FunctionDeclaration' ||
+								parent?.type === 'FunctionExpression' ||
+								parent?.type === 'ArrowFunctionExpression'
+							) {
+								array_prop = 'params';
+							} else if (
+								parent?.type === 'CallExpression' ||
+								parent?.type === 'OptionalCallExpression' ||
+								parent?.type === 'NewExpression'
+							) {
+								array_prop = 'arguments';
 							}
-
 							if (array_prop && Array.isArray(parent[array_prop])) {
-								is_last_in_array = parent[array_prop].indexOf(node) === parent[array_prop].length - 1;
+								is_last_in_array =
+									parent[array_prop].indexOf(node) === parent[array_prop].length - 1;
 							}
 
 							if (is_last_in_array) {
-								// Special case: There can be multiple trailing comments after the last node in a block,
-								// and they can be separated by newlines
-								let end = node.end;
+								const isParam = array_prop === 'params';
+								const isArgument = array_prop === 'arguments';
+								if (isParam || isArgument) {
+									while (comments.length) {
+										const potentialComment = comments[0];
+										if (parent && potentialComment.start >= parent.end) {
+											break;
+										}
+
+										const nextChar = getNextNonWhitespaceCharacter(source, potentialComment.end);
+										if (nextChar === ')') {
+											(node.trailingComments ||= []).push(
+												/** @type {CommentWithLocation} */(comments.shift()),
+											);
+											continue;
+										}
+
+										break;
+									}
+								} else {
+									// Special case: There can be multiple trailing comments after the last node in a block,
+									// and they can be separated by newlines
+									let end = node.end;
 
-								while (comments.length) {
-									const comment = comments[0];
-									if (parent && comment.start >= parent.end) break;
+									while (comments.length) {
+										const comment = comments[0];
+										if (parent && comment.start >= parent.end) break;
 
-									(node.trailingComments ||= []).push(comment);
-									comments.shift();
-									end = comment.end;
+										(node.trailingComments ||= []).push(comment);
+										comments.shift();
+										end = comment.end;
+									}
+								}
+							} else if (node.end <= comments[0].start) {
+								const onlySimpleWhitespace = /^[,) \t]*$/.test(slice);
+								const onlyWhitespace = /^\s*$/.test(slice);
+								const hasBlankLine = /\n\s*\n/.test(slice);
+								const nodeEndLine = node.loc?.end?.line ?? null;
+								const commentStartLine = comments[0].loc?.start?.line ?? null;
+								const isImmediateNextLine =
+									nodeEndLine !== null &&
+									commentStartLine !== null &&
+									commentStartLine === nodeEndLine + 1;
+								const isSwitchCaseSibling = array_prop === 'cases';
+
+								if (isSwitchCaseSibling && !is_last_in_array) {
+									if (
+										nodeEndLine !== null &&
+										commentStartLine !== null &&
+										nodeEndLine === commentStartLine
+									) {
+										node.trailingComments = [/** @type {CommentWithLocation} */ (comments.shift())];
+									}
+									return;
+								}
+
+								if (
+									onlySimpleWhitespace ||
+									(onlyWhitespace && !hasBlankLine && isImmediateNextLine)
+								) {
+									// Check if this is a block comment that's inline with the next statement
+									// e.g., /** @type {SomeType} */ (a) = 5;
+									// These should be leading comments, not trailing
+									if (
+										comments[0].type === 'Block' &&
+										!is_last_in_array &&
+										array_prop &&
+										parent[array_prop]
+									) {
+										const currentIndex = parent[array_prop].indexOf(node);
+										const nextSibling = parent[array_prop][currentIndex + 1];
+
+										if (nextSibling && nextSibling.loc) {
+											const commentEndLine = comments[0].loc?.end?.line;
+											const nextSiblingStartLine = nextSibling.loc?.start?.line;
+
+											// If comment ends on same line as next sibling starts, it's inline with next
+											if (commentEndLine === nextSiblingStartLine) {
+												// Leave it for next sibling's leading comments
+												return;
+											}
+										}
+									}
+
+									// For function parameters, only attach as trailing comment if it's on the same line
+									// Comments on next line after comma should be leading comments of next parameter
+									const isParam = array_prop === 'params';
+									if (isParam) {
+										// Check if comment is on same line as the node
+										const nodeEndLine = source.slice(0, node.end).split('\n').length;
+										const commentStartLine = source.slice(0, comments[0].start).split('\n').length;
+										if (nodeEndLine === commentStartLine) {
+											node.trailingComments = [
+												/** @type {CommentWithLocation} */ (comments.shift()),
+											];
+										}
+										// Otherwise leave it for next parameter's leading comments
+									} else {
+										node.trailingComments = [/** @type {CommentWithLocation} */ (comments.shift())];
+									}
 								}
-							} else if (node.end <= comments[0].start && /^[,) \t]*$/.test(slice)) {
-								node.trailingComments = [/** @type {CommentWithLocation} */ (comments.shift())];
 							}
 						}
 					}
 				},
 			});
-
-			// Special case: Trailing comments after the root node (which can only happen for expression tags or for Program nodes).
-			// Adding them ensures that we can later detect the end of the expression tag correctly.
-			if (comments.length > 0 && (comments[0].start >= ast.end || ast.type === 'Program')) {
-				(ast.trailingComments ||= []).push(...comments.splice(0));
-			}
 		},
 	};
 }