ripple 0.3.8 → 0.3.10

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # ripple
 
+## 0.3.10
+
+### Patch Changes
+
+- [`aef1253`](https://github.com/Ripple-TS/ripple/commit/aef1253dd79c067a8358172d502dc21d8a9a9085)
+  Thanks [@trueadm](https://github.com/trueadm)! - Replace `<children />` with
+  `{children}` expression syntax for rendering component children
+
+- Updated dependencies
+  [[`aef1253`](https://github.com/Ripple-TS/ripple/commit/aef1253dd79c067a8358172d502dc21d8a9a9085)]:
+  - ripple@0.3.10
+
+## 0.3.9
+
+### Patch Changes
+
+- Updated dependencies []:
+  - ripple@0.3.9
+
 ## 0.3.8
 
 ### Patch Changes

package/package.json

@@ -3,7 +3,7 @@
   "description": "Ripple is an elegant TypeScript UI framework",
   "license": "MIT",
   "author": "Dominic Gannaway",
-  "version": "0.3.8",
+  "version": "0.3.10",
   "type": "module",
   "module": "src/runtime/index-client.js",
   "main": "src/runtime/index-client.js",
@@ -105,6 +105,6 @@
     "vscode-languageserver-types": "^3.17.5"
   },
   "peerDependencies": {
-    "ripple": "0.3.8"
+    "ripple": "0.3.10"
   }
 }

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

@@ -413,7 +413,9 @@ function RipplePlugin(config) {
 						/** @type {AST.Property} */ (prop).method = true;
 						/** @type {AST.Property} */ (prop).kind = 'init';
 						/** @type {AST.Property} */ (prop).value = this.parseMethod(false, false);
-						/** @type {AST.Property} */ (prop).value.typeParameters = typeParameters;
+						/** @type {AST.FunctionExpression} */ (
+							/** @type {AST.Property} */ (prop).value
+						).typeParameters = typeParameters;
 						return;
 					}
 				}
@@ -666,99 +668,9 @@ function RipplePlugin(config) {
 						}
 					}
 				}
-				if (code === 64) {
-					// @ character
-					// Look ahead to see if this is followed by an opening paren
-					if (this.pos + 1 < this.input.length) {
-						const nextChar = this.input.charCodeAt(this.pos + 1);
-
-						// Check if this is @( for unboxing expression syntax
-						if (nextChar === 40) {
-							// ( character
-							this.pos += 2; // skip '@('
-							return this.finishToken(tt.parenL, '@(');
-						}
-					}
-				}
 				return super.getTokenFromCode(code);
 			}
 
-			/**
-			 * Override parseSubscripts to handle `.@[expression]` syntax for reactive computed member access
-			 * @type {Parse.Parser['parseSubscripts']}
-			 */
-			parseSubscripts(
-				base,
-				startPos,
-				startLoc,
-				noCalls,
-				maybeAsyncArrow,
-				optionalChained,
-				forInit,
-			) {
-				// Check for `.@[` pattern for reactive computed member access
-				const isDotOrOptional = this.type === tt.dot || this.type === tt.questionDot;
-
-				if (isDotOrOptional) {
-					// Check the next two characters without consuming tokens
-					// this.pos currently points AFTER the dot token
-					const nextChar = this.input.charCodeAt(this.pos);
-					const charAfter = this.input.charCodeAt(this.pos + 1);
-
-					// Check for @[ pattern (@ = 64, [ = 91)
-					if (nextChar === 64 && charAfter === 91) {
-						const node = /** @type {AST.MemberExpression} */ (this.startNodeAt(startPos, startLoc));
-						node.object = base;
-						node.computed = true;
-						node.optional = this.type === tt.questionDot;
-						node.tracked = true;
-
-						// Consume the dot/questionDot token
-						this.next();
-
-						// Manually skip the @ character
-						this.pos += 1;
-
-						// Now call finishToken to properly consume the [ bracket
-						this.finishToken(tt.bracketL);
-
-						// Now we're positioned correctly to parse the expression
-						this.next(); // Move to first token inside brackets
-
-						// Parse the expression inside brackets
-						node.property = this.parseExpression();
-
-						// Expect closing bracket
-						this.expect(tt.bracketR);
-
-						// Finish this MemberExpression node
-						base = /** @type {AST.MemberExpression} */ (this.finishNode(node, 'MemberExpression'));
-
-						// Recursively handle any further subscripts (chaining)
-						return this.parseSubscripts(
-							base,
-							startPos,
-							startLoc,
-							noCalls,
-							maybeAsyncArrow,
-							optionalChained,
-							forInit,
-						);
-					}
-				}
-
-				// Fall back to default parseSubscripts implementation
-				return super.parseSubscripts(
-					base,
-					startPos,
-					startLoc,
-					noCalls,
-					maybeAsyncArrow,
-					optionalChained,
-					forInit,
-				);
-			}
-
 			/**
 			 * Override isLet to recognize `let &{` and `let &[` as variable declarations.
 			 * Acorn's isLet checks the char after `let` and only recognizes `{`, `[`, or identifiers.
@@ -795,7 +707,7 @@ function RipplePlugin(config) {
 						// & directly followed by { or [ — lazy destructuring
 						this.next(); // consume &, now current token is { or [
 						const pattern = super.parseBindingAtom();
-						pattern.lazy = true;
+						/** @type {AST.ObjectPattern | AST.ArrayPattern} */ (pattern).lazy = true;
 						return pattern;
 					}
 				}
@@ -810,11 +722,6 @@ function RipplePlugin(config) {
 				const lookahead_type = this.lookahead().type;
 				const is_next_call_token = lookahead_type === tt.parenL || lookahead_type === tt.relational;
 
-				// Check if this is @(expression) for unboxing tracked values
-				if (this.type === tt.parenL && this.value === '@(') {
-					return this.parseTrackedExpression();
-				}
-
 				// Check if this is #server identifier for server function calls
 				if (this.type === tt.name && this.value === '#server') {
 					const node = this.startNode();
@@ -855,31 +762,6 @@ function RipplePlugin(config) {
 				return expr;
 			}
 
-			/**
-			 * Parse `@(expression)` syntax for unboxing tracked values
-			 * Creates a TrackedExpression node with the argument property
-			 * @type {Parse.Parser['parseTrackedExpression']}
-			 */
-			parseTrackedExpression() {
-				const node = /** @type {AST.TrackedExpression} */ (this.startNode());
-				this.next(); // consume '@(' token
-				node.argument = this.parseExpression();
-				this.expect(tt.parenR); // expect ')'
-				return this.finishNode(node, 'TrackedExpression');
-			}
-
-			/**
-			 * Override to allow TrackedExpression as a valid lvalue for update expressions
-			 * @type {Parse.Parser['checkLValSimple']}
-			 */
-			checkLValSimple(expr, bindingType, checkClashes) {
-				// Allow TrackedExpression as a valid lvalue for ++/-- operators
-				if (expr.type === 'TrackedExpression') {
-					return;
-				}
-				return super.checkLValSimple(expr, bindingType, checkClashes);
-			}
-
 			/**
 			 * Override checkLocalExport to check all scopes in the scope stack.
 			 * This is needed because server blocks create nested scopes, but exports
@@ -1018,6 +900,7 @@ function RipplePlugin(config) {
 					return this.parseFor(node, null);
 				}
 
+				// @ts-ignore — acorn internal: isLet accepts 0 args at runtime
 				let isLet = this.isLet();
 				if (this.type === tt._var || this.type === tt._const || isLet) {
 					let init = /** @type {AST.VariableDeclaration} */ (this.startNode()),
@@ -1060,7 +943,9 @@ function RipplePlugin(config) {
 				}
 
 				let containsEsc = this.containsEsc;
-				let refDestructuringErrors = new DestructuringErrors();
+				let refDestructuringErrors = new /** @type {new () => Parse.DestructuringErrors} */ (
+					/** @type {unknown} */ (DestructuringErrors)
+				)();
 				let initPos = this.start;
 				let init_expr =
 					awaitAt > -1
@@ -1230,7 +1115,7 @@ function RipplePlugin(config) {
 				let node = /** @type {ESTreeJSX.JSXExpressionContainer} */ (this.startNode());
 				this.next();
 
-				if (this.value === 'html') {
+				if (this.type === tt.name && this.value === 'html') {
 					node.html = true;
 					this.next();
 					if (this.type === tt.braceR) {
@@ -1239,6 +1124,15 @@ function RipplePlugin(config) {
 							'"html" is a Ripple keyword and must be used in the form {html some_content}',
 						);
 					}
+				} else if (this.type === tt.name && this.value === 'text') {
+					node.text = true;
+					this.next();
+					if (this.type === tt.braceR) {
+						this.raise(
+							this.start,
+							'"text" is a Ripple keyword and must be used in the form {text some_value}',
+						);
+					}
 				}
 
 				node.expression =
@@ -1391,38 +1285,8 @@ function RipplePlugin(config) {
 						)
 					);
 					memberExpr.object = node;
-
-					// 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 = /** @type {ESTreeJSX.JSXIdentifier} */ (this.parseExpression());
-							/** @type {AST.TrackedNode} */ (memberExpr.property).tracked = true;
-
-							// Expect closing bracket
-							this.expect(tt.bracketR);
-						} else {
-							this.unexpected();
-						}
-					} else {
-						// Regular dot notation
-						memberExpr.property = this.jsx_parseIdentifier();
-						memberExpr.computed = false;
-					}
+					memberExpr.property = this.jsx_parseIdentifier();
+					memberExpr.computed = false;
 					memberExpr = this.finishNode(memberExpr, 'JSXMemberExpression');
 					while (this.eat(tt.dot)) {
 						let newMemberExpr = /** @type {ESTreeJSX.JSXMemberExpression} */ (
@@ -1473,16 +1337,12 @@ function RipplePlugin(config) {
 					const clause = /** @type {AST.CatchClause} */ (this.startNode());
 					this.next();
 					if (this.eat(tt.parenL)) {
-						clause.param = this.parseCatchClauseParam();
+						clause.param = this.parseBindingAtom();
+						this.expect(tt.parenR);
 					} else {
-						if (this.options.ecmaVersion < 10) {
-							this.unexpected();
-						}
 						clause.param = null;
-						this.enterScope(0);
 					}
-					clause.body = this.parseBlock(false);
-					this.exitScope();
+					clause.body = this.parseBlock();
 					node.handler = this.finishNode(clause, 'CatchClause');
 				}
 				node.finalizer = this.eat(tt._finally) ? this.parseBlock() : null;
@@ -1707,8 +1567,9 @@ function RipplePlugin(config) {
 								if (expression.type === 'Literal') {
 									expression.was_expression = true;
 								}
-								/** @type {ESTreeJSX.JSXExpressionContainer['expression']} */ (attr.value) =
-									expression;
+								// @ts-ignore — intentional AST node conversion from JSX to Ripple
+								/** @type {ESTreeJSX.JSXAttribute} */ (attr).value =
+									/** @type {ESTreeJSX.JSXExpressionContainer['expression']} */ (expression);
 							}
 						}
 					}
@@ -2053,12 +1914,13 @@ function RipplePlugin(config) {
 				if (this.type === tt.braceL) {
 					const node = this.jsx_parseExpressionContainer();
 					// Keep JSXEmptyExpression as-is (for prettier to handle comments)
-					// but convert other expressions to Text/Html nodes
+					// but convert other expressions to Html/RippleExpression/Text nodes
 					if (node.expression.type !== 'JSXEmptyExpression') {
-						/** @type {AST.Html | AST.TextNode} */ (/** @type {unknown} */ (node)).type = node.html
-							? 'Html'
-							: 'Text';
+						/** @type {AST.RippleExpression | AST.Html | AST.TextNode} */ (
+							/** @type {unknown} */ (node)
+						).type = node.html ? 'Html' : node.text ? 'Text' : 'RippleExpression';
 						delete node.html;
+						delete node.text;
 					}
 					body.push(node);
 				} else if (this.type === tt.braceR) {
@@ -2194,12 +2056,16 @@ function RipplePlugin(config) {
 					this.context.some((c) => c === tstc.tc_expr)
 				) {
 					const node = this.jsx_parseExpressionContainer();
-					// Keep JSXEmptyExpression as-is (don't convert to Text)
+					// Keep JSXEmptyExpression as-is (don't convert to RippleExpression/Text/Html)
 					if (node.expression.type !== 'JSXEmptyExpression') {
-						/** @type {AST.TextNode} */ (/** @type {unknown} */ (node)).type = 'Text';
+						/** @type {AST.RippleExpression | AST.Html | AST.TextNode} */ (
+							/** @type {unknown} */ (node)
+						).type = node.html ? 'Html' : node.text ? 'Text' : 'RippleExpression';
+						delete node.html;
+						delete node.text;
 					}
 
-					return /** @type {ESTreeJSX.JSXEmptyExpression | AST.TextNode | ESTreeJSX.JSXExpressionContainer} */ (
+					return /** @type {ESTreeJSX.JSXEmptyExpression | AST.RippleExpression | AST.Html | AST.TextNode | ESTreeJSX.JSXExpressionContainer} */ (
 						/** @type {unknown} */ (node)
 					);
 				}