ripple 0.2.133 → 0.2.135

package/package.json

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

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

@@ -33,7 +33,8 @@ 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 +65,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 +500,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
@@ -995,6 +1017,10 @@ function RipplePlugin(config) {
 			}
 
 			jsx_parseElementName() {
+				if (this.type?.label === 'jsxTagEnd') {
+					return '';
+				}
+
 				let node = this.jsx_parseNamespacedName();
 
 				if (node.type === 'JSXNamespacedName') {
@@ -1004,8 +1030,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 +1086,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 +1259,14 @@ function RipplePlugin(config) {
 							this.raise(
 								this.pos,
 								'Unexpected token `' +
-									this.input[this.pos] +
-									'`. Did you mean `' +
-									(ch === 62 ? '>' : '}') +
-									'` or ' +
-									'`{"' +
-									this.input[this.pos] +
-									'"}' +
-									'`?',
+								this.input[this.pos] +
+								'`. Did you mean `' +
+								(ch === 62 ? '>' : '}') +
+								'` or ' +
+								'`{"' +
+								this.input[this.pos] +
+								'"}' +
+								'`?',
 							);
 						}
 
@@ -1528,7 +1585,18 @@ 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
+					const tokContexts = this.acornTypeScript?.tokContexts;
+					if (tokContexts && this.curContext) {
+						const curContext = this.curContext();
+						if (curContext === tokContexts.tc_expr) {
+							this.context.pop();
+						}
+					}
 				}
+
 				this.parseTemplateBody(body);
 			}
 
@@ -1687,6 +1755,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 +1795,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 ??= {};
@@ -1759,9 +1869,12 @@ function get_comment_handlers(source, comments, index = 0) {
 
 					if (comments[0]) {
 						if (node.type === 'BlockStatement' && node.body.length === 0) {
-							if (comments[0].start < node.end && comments[0].end < node.end) {
+							// 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;
 							}
 						}
@@ -1773,44 +1886,162 @@ function get_comment_handlers(source, comments, index = 0) {
 								return;
 							}
 						}
+
 						const parent = /** @type {any} */ (path.at(-1));
 
 						if (parent === undefined || node.end !== parent.end) {
 							const slice = source.slice(node.end, comments[0].start);
-							const is_last_in_body =
-								((parent?.type === 'BlockStatement' || parent?.type === 'Program') &&
-									parent.body.indexOf(node) === parent.body.length - 1) ||
-								(parent?.type === 'ArrayExpression' &&
-									parent.elements.indexOf(node) === parent.elements.length - 1) ||
-								(parent?.type === 'ObjectExpression' &&
-									parent.properties.indexOf(node) === parent.properties.length - 1);
-
-							if (is_last_in_body) {
-								// 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;
-
-									(node.trailingComments ||= []).push(comment);
-									comments.shift();
-									end = comment.end;
+
+							// 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' ||
+								parent?.type === 'ClassBody'
+							) {
+								array_prop = 'body';
+							} 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' ||
+								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;
+							}
+
+							if (is_last_in_array) {
+								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;
+
+										(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));
-			}
 		},
 	};
 }

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

@@ -177,7 +177,30 @@ const visitors = {
 		if (node.object.type === 'Identifier' && !node.object.tracked) {
 			const binding = context.state.scope.get(node.object.name);
 
-			if (binding !== null && binding.initial?.type === 'CallExpression' && is_ripple_track_call(binding.initial.callee, context)) {
+			if (binding && binding.metadata?.is_tracked_object) {
+				const internalProperties = new Set(['__v', 'a', 'b', 'c', 'f']);
+
+				let propertyName = null;
+				if (node.property.type === 'Identifier' && !node.computed) {
+					propertyName = node.property.name;
+				} else if (node.property.type === 'Literal' && typeof node.property.value === 'string') {
+					propertyName = node.property.value;
+				}
+
+				if (propertyName && internalProperties.has(propertyName)) {
+					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
+					);
+				}
+			}
+
+			if (
+				binding !== null &&
+				binding.initial?.type === 'CallExpression' &&
+				is_ripple_track_call(binding.initial.callee, context)
+			) {
 				error(
 					`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,
@@ -231,6 +254,17 @@ const visitors = {
 			const metadata = { tracking: false, await: false };
 
 			if (declarator.id.type === 'Identifier') {
+				const binding = state.scope.get(declarator.id.name);
+				if (binding && declarator.init && declarator.init.type === 'CallExpression') {
+					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'))
+					) {
+						binding.metadata = { ...binding.metadata, is_tracked_object: true };
+					}
+				}
 				visit(declarator, state);
 			} else {
 				const paths = extract_paths(declarator.id);