ripple 0.3.7 → 0.3.8

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # ripple
 
+## 0.3.8
+
+### Patch Changes
+
+- Updated dependencies []:
+  - ripple@0.3.8
+
 ## 0.3.7
 
 ### 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.7",
+  "version": "0.3.8",
   "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.7"
+    "ripple": "0.3.8"
   }
 }

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

@@ -52,16 +52,6 @@ function DestructuringErrors() {
 	return this;
 }
 
-/**
- * @param {AST.Identifier | ESTreeJSX.JSXIdentifier} node
- * @param {string} name
- */
-function set_tracked_name(node, name) {
-	node.name = name.slice(1);
-	node.metadata ??= { path: [] };
-	node.metadata.source_name = name;
-}
-
 /**
  * Convert JSX node types to regular JavaScript node types
  * @param {ESTreeJSX.JSXIdentifier | ESTreeJSX.JSXMemberExpression | AST.Node} node - The JSX node to convert
@@ -678,7 +668,7 @@ function RipplePlugin(config) {
 				}
 				if (code === 64) {
 					// @ character
-					// Look ahead to see if this is followed by a valid identifier character or opening paren
+					// 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);
 
@@ -688,114 +678,11 @@ function RipplePlugin(config) {
 							this.pos += 2; // skip '@('
 							return this.finishToken(tt.parenL, '@(');
 						}
-
-						// Check if the next character can start an identifier
-						if (
-							(nextChar >= 65 && nextChar <= 90) || // A-Z
-							(nextChar >= 97 && nextChar <= 122) || // a-z
-							nextChar === 95 ||
-							nextChar === 36
-						) {
-							// _ or $
-
-							// Check if we're in an expression context
-							// In JSX expressions, inside parentheses, assignments, etc.
-							// we want to treat @ as an identifier prefix rather than decorator
-							const currentType = this.type;
-							/**
-							 * @param {Parse.TokenType} type
-							 * @param {Parse.Parser} parser
-							 * @param {Parse.TokTypes} tt
-							 * @returns {boolean}
-							 */
-							function inExpression(type, parser, tt) {
-								return (
-									parser.exprAllowed ||
-									type === tt.braceL || // Inside { }
-									type === tt.parenL || // Inside ( )
-									type === tt.eq || // After =
-									type === tt.comma || // After ,
-									type === tt.colon || // After :
-									type === tt.question || // After ?
-									type === tt.logicalOR || // After ||
-									type === tt.logicalAND || // After &&
-									type === tt.dot || // After . (for member expressions like obj.@prop)
-									type === tt.questionDot // After ?. (for optional chaining like obj?.@prop)
-								);
-							}
-
-							/**
-							 * @param {Parse.Parser} parser
-							 * @param {Parse.TokTypes} tt
-							 * @returns {boolean}
-							 */
-							function inAwait(parser, tt) {
-								return currentType === tt.name &&
-									parser.value === 'await' &&
-									parser.canAwait &&
-									parser.preToken
-									? inExpression(parser.preToken, parser, tt)
-									: false;
-							}
-
-							if (inExpression(currentType, this, tt) || inAwait(this, tt)) {
-								return this.readAtIdentifier();
-							}
-						}
 					}
 				}
 				return super.getTokenFromCode(code);
 			}
 
-			/**
-			 * Read an @ prefixed identifier
-			 * @type {Parse.Parser['readAtIdentifier']}
-			 */
-			readAtIdentifier() {
-				const start = this.pos;
-				this.pos++; // skip '@'
-
-				// Read the identifier part manually
-				let word = '';
-				while (this.pos < this.input.length) {
-					const ch = this.input.charCodeAt(this.pos);
-					if (
-						(ch >= 65 && ch <= 90) || // A-Z
-						(ch >= 97 && ch <= 122) || // a-z
-						(ch >= 48 && ch <= 57) || // 0-9
-						ch === 95 ||
-						ch === 36
-					) {
-						// _ or $
-						word += this.input[this.pos++];
-					} else {
-						break;
-					}
-				}
-
-				if (word === '') {
-					this.raise(start, 'Invalid @ identifier');
-				}
-
-				// Return the full identifier including @
-				return this.finishToken(tt.name, '@' + word);
-			}
-
-			/**
-			 * Override parseIdent to mark @ identifiers as tracked
-			 * @type {Parse.Parser['parseIdent']}
-			 */
-			parseIdent(liberal) {
-				const node = /** @type {AST.Identifier &AST.NodeWithLocation} */ (
-					super.parseIdent(liberal)
-				);
-				if (node.name && node.name.startsWith('@')) {
-					set_tracked_name(node, node.name);
-					node.tracked = true;
-				}
-				return node;
-			}
-
 			/**
 			 * Override parseSubscripts to handle `.@[expression]` syntax for reactive computed member access
 			 * @type {Parse.Parser['parseSubscripts']}
@@ -1342,7 +1229,6 @@ function RipplePlugin(config) {
 			jsx_parseExpressionContainer() {
 				let node = /** @type {ESTreeJSX.JSXExpressionContainer} */ (this.startNode());
 				this.next();
-				let tracked = false;
 
 				if (this.value === 'html') {
 					node.html = true;
@@ -1353,20 +1239,12 @@ function RipplePlugin(config) {
 							'"html" is a Ripple keyword and must be used in the form {html some_content}',
 						);
 					}
-					if (this.type.label === '@') {
-						this.next(); // consume @
-						tracked = true;
-					}
 				}
 
 				node.expression =
 					this.type === tt.braceR ? this.jsx_parseEmptyExpression() : this.parseExpression();
 				this.expect(tt.braceR);
 
-				if (tracked && node.expression.type === 'Identifier') {
-					node.expression.tracked = true;
-				}
-
 				return this.finishNode(node, 'JSXExpressionContainer');
 			}
 
@@ -1429,10 +1307,6 @@ function RipplePlugin(config) {
 					} else {
 						const id = /** @type {AST.Identifier} */ (this.parseIdentNode());
 						id.tracked = false;
-						if (id.name.startsWith('@')) {
-							set_tracked_name(id, id.name);
-							id.tracked = true;
-						}
 						this.finishNode(id, 'Identifier');
 						/** @type {AST.Attribute} */ (node).name = id;
 						/** @type {AST.Attribute} */ (node).value = id;
@@ -1484,14 +1358,6 @@ function RipplePlugin(config) {
 						// Unexpected token after @
 						this.unexpected();
 					}
-				} else if (
-					(this.type === tt.name || this.type === tstt.jsxName) &&
-					this.value &&
-					/** @type {string} */ (this.value).startsWith('@')
-				) {
-					set_tracked_name(node, /** @type {string} */ (this.value));
-					node.tracked = true;
-					this.next();
 				} else if (this.type === tt.name || this.type.keyword || this.type === tstt.jsxName) {
 					node.name = /** @type {string} */ (this.value);
 					node.tracked = false; // Explicitly mark as not tracked
@@ -1550,15 +1416,14 @@ function RipplePlugin(config) {
 							// Expect closing bracket
 							this.expect(tt.bracketR);
 						} else {
-							// @ not followed by [, treat as regular tracked identifier
-							memberExpr.property = this.jsx_parseIdentifier();
-							memberExpr.computed = false;
+							this.unexpected();
 						}
 					} else {
 						// Regular dot notation
 						memberExpr.property = this.jsx_parseIdentifier();
 						memberExpr.computed = false;
 					}
+					memberExpr = this.finishNode(memberExpr, 'JSXMemberExpression');
 					while (this.eat(tt.dot)) {
 						let newMemberExpr = /** @type {ESTreeJSX.JSXMemberExpression} */ (
 							this.startNodeAt(
@@ -1571,7 +1436,7 @@ function RipplePlugin(config) {
 						newMemberExpr.computed = false;
 						memberExpr = this.finishNode(newMemberExpr, 'JSXMemberExpression');
 					}
-					return this.finishNode(memberExpr, 'JSXMemberExpression');
+					return memberExpr;
 				}
 				return node;
 			}
@@ -2355,53 +2220,6 @@ function RipplePlugin(config) {
 					this.awaitPos = 0;
 					return this.parseComponent({ requireName: true, declareName: true });
 				}
-				if (this.type.label === '@') {
-					// Try to parse as an expression statement first using tryParse
-					// This allows us to handle Ripple @ syntax like @count++ without
-					// interfering with legitimate decorator syntax
-					this.skip_decorator = true;
-					const expressionResult = this.tryParse(() => {
-						const node = /** @type {AST.ExpressionStatement} */ (this.startNode());
-						this.next();
-						// Force expression context to ensure @ is tokenized correctly
-						const old_expr_allowed = this.exprAllowed;
-						this.exprAllowed = true;
-						node.expression = this.parseExpression();
-
-						if (node.expression.type === 'UpdateExpression') {
-							/** @type {AST.Expression} */
-							let object = node.expression.argument;
-							while (object.type === 'MemberExpression') {
-								object = /** @type {AST.Expression} */ (object.object);
-							}
-							if (object.type === 'Identifier') {
-								object.tracked = true;
-							}
-						} else if (node.expression.type === 'AssignmentExpression') {
-							/** @type {AST.Expression | AST.Pattern | AST.Identifier} */
-							let object = node.expression.left;
-							while (object.type === 'MemberExpression') {
-								object = /** @type {AST.Expression} */ (object.object);
-							}
-							if (object.type === 'Identifier') {
-								object.tracked = true;
-							}
-						} else if (node.expression.type === 'Identifier') {
-							node.expression.tracked = true;
-						} else {
-							// TODO?
-						}
-
-						this.exprAllowed = old_expr_allowed;
-						return this.finishNode(node, 'ExpressionStatement');
-					});
-					this.skip_decorator = false;
-
-					// If parsing as expression statement succeeded, use that result
-					if (expressionResult.node) {
-						return expressionResult.node;
-					}
-				}
 
 				if (this.type === tstt.jsxTagStart) {
 					this.next();
@@ -2416,6 +2234,37 @@ function RipplePlugin(config) {
 					return node;
 				}
 
+				// &[ or &{ at statement level — lazy destructuring assignment
+				// e.g., &[data] = track(0); or &{x, y} = obj;
+				if (this.type === tt.bitwiseAND) {
+					const charAfterAmp = this.input.charCodeAt(this.end);
+					if (charAfterAmp === 123 || charAfterAmp === 91) {
+						const node = /** @type {AST.ExpressionStatement} */ (this.startNode());
+						const assign_node = /** @type {AST.AssignmentExpression} */ (this.startNode());
+						this.next(); // consume &
+						// Parse the left-hand side (array or object expression)
+						const left = /** @type {AST.ArrayPattern | AST.ObjectPattern} */ (
+							/** @type {unknown} */ (this.parseExprAtom())
+						);
+						// Convert expression to destructuring pattern
+						this.toAssignable(left, false);
+						left.lazy = true;
+						// Expect = operator
+						this.expect(tt.eq);
+						// Parse the right-hand side
+						assign_node.operator = '=';
+						assign_node.left = left;
+						assign_node.right = /** @type {AST.Expression} */ (this.parseMaybeAssign());
+						node.expression = /** @type {AST.AssignmentExpression} */ (
+							this.finishNode(assign_node, 'AssignmentExpression')
+						);
+						this.semicolon();
+						return /** @type {AST.ExpressionStatement} */ (
+							this.finishNode(node, 'ExpressionStatement')
+						);
+					}
+				}
+
 				return super.parseStatement(context, topLevel, exports);
 			}
 
@@ -2809,15 +2658,9 @@ function get_comment_handlers(source, comments, index = 0) {
 								isSwitchCaseSibling = true;
 							} else if (parent.type === 'SwitchCase') {
 								node_array = parent.consequent;
-							} else if (
-								parent.type === 'ArrayExpression' ||
-								parent.type === 'RippleArrayExpression'
-							) {
+							} else if (parent.type === 'ArrayExpression') {
 								node_array = parent.elements;
-							} else if (
-								parent.type === 'ObjectExpression' ||
-								parent.type === 'RippleObjectExpression'
-							) {
+							} else if (parent.type === 'ObjectExpression') {
 								node_array = parent.properties;
 							} else if (
 								parent.type === 'FunctionDeclaration' ||

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

@@ -328,6 +328,35 @@ function setup_lazy_array_transforms(pattern, source_id, state, writable) {
 	}
 }
 
+/**
+ * Checks if a function parameter has a Tracked<T> type annotation imported from ripple.
+ * This is used to determine if lazy array destructuring should use the track tuple fast path.
+ * @param {AST.ArrayPattern} param - The parameter pattern node
+ * @param {AnalysisContext} context - The analysis context
+ * @returns {boolean}
+ */
+function is_param_tracked_type(param, context) {
+	const annotation = param.typeAnnotation?.typeAnnotation;
+
+	if (
+		annotation?.type === 'TSTypeReference' &&
+		annotation.typeName?.type === 'Identifier' &&
+		annotation.typeName.name === 'Tracked'
+	) {
+		const binding = context.state.scope.get('Tracked');
+
+		return (
+			binding?.declaration_kind === 'import' &&
+			binding.initial !== null &&
+			binding.initial.type === 'ImportDeclaration' &&
+			binding.initial.source.type === 'Literal' &&
+			binding.initial.source.value === 'ripple'
+		);
+	}
+
+	return false;
+}
+
 /**
  * @param {AST.Function} node
  * @param {AnalysisContext} context
@@ -345,7 +374,11 @@ function visit_function(node, context) {
 
 		if ((param.type === 'ObjectPattern' || param.type === 'ArrayPattern') && param.lazy) {
 			const param_id = b.id(context.state.scope.generate('param'));
-			setup_lazy_transforms(param, param_id, context.state, true, false);
+			// For ArrayPattern params with a Tracked<T> type annotation from ripple,
+			// use the track tuple fast path (get/set instead of source[0]/source[1])
+			const is_tracked_type =
+				param.type === 'ArrayPattern' && is_param_tracked_type(param, context);
+			setup_lazy_transforms(param, param_id, context.state, true, is_tracked_type);
 			// Store the generated identifier name on the pattern for the transform phase
 			param.metadata = { ...param.metadata, lazy_id: param_id.name };
 		}
@@ -579,7 +612,7 @@ const visitors = {
 		}
 
 		// Lazy bindings from track() calls (read_unwraps) are inherently reactive —
-		// propagate tracking even without the @ prefix so that control flow (if/for/switch)
+		// propagate tracking so that control flow (if/for/switch)
 		// and early returns create reactive blocks
 		if (
 			!node.tracked &&
@@ -673,7 +706,7 @@ const visitors = {
 
 				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.`,
+						`Directly accessing internal property "${propertyName}" of a tracked object is not allowed. Use \`${node.object.name}.value\` or \`&[]\` lazy destructuring instead.`,
 						context.state.analysis.module.filename,
 						node.property,
 						context.state.loose ? context.state.analysis.errors : undefined,
@@ -684,6 +717,8 @@ const visitors = {
 
 			if (
 				binding !== null &&
+				binding.kind !== 'lazy' &&
+				binding.kind !== 'lazy_fallback' &&
 				binding.initial?.type === 'CallExpression' &&
 				is_ripple_track_call(binding.initial.callee, context)
 			) {
@@ -701,7 +736,7 @@ const visitors = {
 					// pass through
 				} else {
 					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}` : ''}\``,
+						`Accessing a tracked object directly is not allowed, use \`.value\` or \`&[]\` lazy destructuring to read the value inside a tracked object - for example \`${node.object.name}.value\``,
 						context.state.analysis.module.filename,
 						node.object,
 						context.state.loose ? context.state.analysis.errors : undefined,
@@ -794,20 +829,6 @@ const visitors = {
 					declarator.id.metadata = { ...declarator.id.metadata, lazy_id: lazy_id.name };
 				}
 
-				const paths = extract_paths(declarator.id);
-
-				for (const path of paths) {
-					if (path.node.tracked) {
-						error(
-							'Variables cannot be reactively referenced using @',
-							state.analysis.module.filename,
-							path.node,
-							context.state.loose ? context.state.analysis.errors : undefined,
-							context.state.analysis.comments,
-						);
-					}
-				}
-
 				visit(declarator, state);
 			}
 
@@ -815,6 +836,30 @@ const visitors = {
 		}
 	},
 
+	ExpressionStatement(node, context) {
+		const { state, visit } = context;
+
+		// Handle standalone lazy destructuring assignment: &[data] = track(0);
+		if (
+			node.expression.type === 'AssignmentExpression' &&
+			node.expression.operator === '=' &&
+			(node.expression.left.type === 'ObjectPattern' ||
+				node.expression.left.type === 'ArrayPattern') &&
+			node.expression.left.lazy
+		) {
+			const pattern = /** @type {AST.ObjectPattern | AST.ArrayPattern} */ (node.expression.left);
+			const lazy_id = b.id(state.scope.generate('lazy'));
+			const init = /** @type {AST.Expression} */ (node.expression.right);
+			const init_is_track =
+				init?.type === 'CallExpression' && is_ripple_track_call(init.callee, context) === 'track';
+			setup_lazy_transforms(pattern, lazy_id, state, true, !!init_is_track);
+			// Store the generated identifier name on the pattern for the transform phase
+			pattern.metadata = { ...pattern.metadata, lazy_id: lazy_id.name };
+		}
+
+		context.next();
+	},
+
 	StyleIdentifier(node, context) {
 		const component = is_inside_component(context, true);
 		const parent = context.path.at(-1);

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

@@ -533,9 +533,6 @@ const visitors = {
 					if (context.state.metadata?.tracking === false) {
 						context.state.metadata.tracking = true;
 					}
-					if (node.tracked && !binding?.read_unwraps) {
-						return b.call('_$_.get', build_getter(node, context));
-					}
 				}
 				return build_getter(node, context);
 			}
@@ -919,6 +916,25 @@ const visitors = {
 		return context.next();
 	},
 
+	ExpressionStatement(node, context) {
+		// Handle standalone lazy destructuring: &[data] = track(0); → const lazy0 = track(0);
+		if (
+			node.expression.type === 'AssignmentExpression' &&
+			node.expression.left.lazy &&
+			node.expression.left.metadata?.lazy_id
+		) {
+			if (context.state.to_ts) {
+				// In TypeScript mode, convert to a regular assignment (drop the pattern)
+				node.expression.left.lazy = false;
+				delete node.expression.left.metadata.lazy_id;
+				return context.next();
+			}
+			const right = /** @type {AST.Expression} */ (context.visit(node.expression.right));
+			return b.const(b.id(node.expression.left.metadata.lazy_id), right);
+		}
+		return context.next();
+	},
+
 	VariableDeclaration(node, context) {
 		for (const declarator of node.declarations) {
 			if (!context.state.to_ts) {

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

@@ -333,29 +333,7 @@ const visitors = {
 				binding.node !== node &&
 				(binding.kind === 'lazy' || binding.kind === 'lazy_fallback')
 			) {
-				const transformed = binding.transform.read(node);
-				if (node.tracked && !binding.read_unwraps) {
-					const is_right_side_of_assignment =
-						parent.type === 'AssignmentExpression' && parent.right === node;
-					if (
-						(parent.type !== 'AssignmentExpression' && parent.type !== 'UpdateExpression') ||
-						is_right_side_of_assignment
-					) {
-						return b.call('_$_.get', transformed);
-					}
-				}
-				return transformed;
-			}
-
-			if (node.tracked) {
-				const is_right_side_of_assignment =
-					parent.type === 'AssignmentExpression' && parent.right === node;
-				if (
-					(parent.type !== 'AssignmentExpression' && parent.type !== 'UpdateExpression') ||
-					is_right_side_of_assignment
-				) {
-					return b.call('_$_.get', node);
-				}
+				return binding.transform.read(node);
 			}
 
 			return node;
@@ -835,6 +813,19 @@ const visitors = {
 		return statements.length ? b.block(statements) : b.empty;
 	},
 
+	ExpressionStatement(node, context) {
+		// Handle standalone lazy destructuring: &[data] = track(0); → const lazy0 = track(0);
+		if (
+			node.expression.type === 'AssignmentExpression' &&
+			node.expression.left.lazy &&
+			node.expression.left.metadata?.lazy_id
+		) {
+			const right = /** @type {AST.Expression} */ (context.visit(node.expression.right));
+			return b.const(b.id(node.expression.left.metadata.lazy_id), right);
+		}
+		return context.next();
+	},
+
 	VariableDeclaration(node, context) {
 		for (const declarator of node.declarations) {
 			if (!context.state.to_ts) {
@@ -1202,9 +1193,10 @@ const visitors = {
 
 			/** @type {AST.Statement[]} */
 			const init = [];
+			const visited_id = /** @type {AST.Expression} */ (visit(node.id, state));
 			/** @type {AST.Statement[]} */
 			const statements = [
-				b.const(comp_id, /** @type {AST.Expression} */ (visit(node.id, state))),
+				b.const(comp_id, is_element_dynamic(node) ? b.call('_$_.get', visited_id) : visited_id),
 				b.const(args_id, b.array(args)),
 			];
 

package/src/compiler/types/parse.d.ts

@@ -543,8 +543,6 @@ export namespace Parse {
 		 */
 		finishToken(type: TokenType, val?: string | number | RegExp | bigint): void;
 
-		readAtIdentifier(): void;
-
 		/**
 		 * Read a token based on character code
 		 * Called by nextToken() for each character
@@ -930,8 +928,6 @@ export namespace Parse {
 			| AST.ServerIdentifier
 			| AST.StyleIdentifier
 			| AST.TrackedExpression
-			| AST.RippleArrayExpression
-			| AST.RippleObjectExpression
 			| AST.Component
 			| AST.Identifier
 			| AST.Literal;
@@ -954,12 +950,8 @@ export namespace Parse {
 		/** Parse parenthesized expression (just the expression) */
 		parseParenExpression(): AST.Expression;
 
-		parseRippleArrayExpression(): AST.RippleArrayExpression;
-
 		parseTrackedExpression(): AST.TrackedExpression;
 
-		parseRippleObjectExpression(): AST.RippleObjectExpression;
-
 		/**
 		 * Parse item in parentheses (can be overridden for flow/ts)
 		 */

package/src/runtime/internal/client/composite.js

@@ -3,7 +3,7 @@
 import { branch, destroy_block, render, render_spread } from './blocks.js';
 import { COMPOSITE_BLOCK, DEFAULT_NAMESPACE, NAMESPACE_URI } from './constants.js';
 import { hydrate_next, hydrating } from './hydration.js';
-import { active_block, active_namespace, with_ns } from './runtime.js';
+import { active_block, active_namespace, get, with_ns } from './runtime.js';
 import { top_element_to_ns } from './utils.js';
 
 /**
@@ -29,7 +29,7 @@ export function composite(get_component, node, props) {
 
 	render(
 		() => {
-			var component = get_component();
+			var component = get(get_component());
 
 			if (b !== null) {
 				destroy_block(b);