ripple 0.2.103 → 0.2.105

package/package.json

@@ -3,7 +3,7 @@
   "description": "Ripple is an elegant TypeScript UI framework",
   "license": "MIT",
   "author": "Dominic Gannaway",
-  "version": "0.2.103",
+  "version": "0.2.105",
   "type": "module",
   "module": "src/runtime/index-client.js",
   "main": "src/runtime/index-client.js",
@@ -67,6 +67,7 @@
     "@sveltejs/acorn-typescript": "^1.0.6",
     "acorn": "^8.15.0",
     "clsx": "^2.1.1",
+    "esm-env": "^1.2.2",
     "esrap": "^2.1.0",
     "is-reference": "^3.0.3",
     "magic-string": "^0.30.18",

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

@@ -167,9 +167,16 @@ function RipplePlugin(config) {
 
 				if (code === 64) {
 					// @ character
-					// Look ahead to see if this is followed by a valid identifier character
+					// Look ahead to see if this is followed by a valid identifier character or 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, '@(');
+						}
+						
 						// Check if the next character can start an identifier
 						if (
 							(nextChar >= 65 && nextChar <= 90) || // A-Z
@@ -348,6 +355,11 @@ function RipplePlugin(config) {
 			 * @returns {any} Parsed expression atom
 			 */
 			parseExprAtom(refDestructuringErrors, forNew, forInit) {
+				// Check if this is @(expression) for unboxing tracked values
+				if (this.type === tt.parenL && this.value === '@(') {
+					return this.parseTrackedExpression();
+				}
+				
 				// Check if this is a tuple literal starting with #[
 				if (this.type === tt.bracketL && this.value === '#[') {
 					return this.parseTrackedArrayExpression();
@@ -358,6 +370,33 @@ function RipplePlugin(config) {
 				return super.parseExprAtom(refDestructuringErrors, forNew, forInit);
 			}
 
+			/**
+			 * Parse `@(expression)` syntax for unboxing tracked values
+			 * Creates a TrackedExpression node with the argument property
+			 * @returns {any} TrackedExpression node
+			 */
+			parseTrackedExpression() {
+				const node = 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
+			 * @param {any} expr - Expression to check
+			 * @param {any} bindingType - Binding type
+			 * @param {any} checkClashes - Check for clashes
+			 */
+			checkLValSimple(expr, bindingType, checkClashes) {
+				// Allow TrackedExpression as a valid lvalue for ++/-- operators
+				if (expr.type === 'TrackedExpression') {
+					return;
+				}
+				return super.checkLValSimple(expr, bindingType, checkClashes);
+			}
+
 			parseTrackedArrayExpression() {
 				const node = this.startNode();
 				this.next(); // consume the '#['

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

@@ -106,7 +106,7 @@ const visitors = {
 		}
 
 		if (
-			is_reference(node, /** @type {Node} */ (parent)) &&
+			is_reference(node, /** @type {Node} */(parent)) &&
 			node.tracked &&
 			binding?.node !== node
 		) {
@@ -117,7 +117,7 @@ const visitors = {
 		}
 
 		if (
-			is_reference(node, /** @type {Node} */ (parent)) &&
+			is_reference(node, /** @type {Node} */(parent)) &&
 			node.tracked &&
 			binding?.node !== node
 		) {
@@ -250,7 +250,10 @@ const visitors = {
 		}
 		const elements = [];
 
-		context.next({ ...context.state, elements, function_depth: context.state.function_depth + 1 });
+		// Track metadata for this component
+		const metadata = { await: false };
+
+		context.next({ ...context.state, elements, function_depth: context.state.function_depth + 1, metadata });
 
 		const css = node.css;
 
@@ -259,6 +262,12 @@ const visitors = {
 				prune_css(css, node);
 			}
 		}
+
+		// Store component metadata in analysis
+		context.state.analysis.component_metadata.push({
+			id: node.id.name,
+			async: metadata.await,
+		});
 	},
 
 	ForStatement(node, context) {
@@ -357,6 +366,11 @@ const visitors = {
 		}
 
 		if (node.pending) {
+			// Try/pending blocks indicate async operations
+			if (context.state.metadata?.await === false) {
+				context.state.metadata.await = true;
+			}
+
 			node.metadata = {
 				has_template: false,
 			};
@@ -594,6 +608,7 @@ export function analyze(ast, filename) {
 		ast,
 		scope,
 		scopes,
+		component_metadata: [],
 	};
 
 	walk(

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

@@ -362,6 +362,10 @@ const visitors = {
 		);
 	},
 
+	TrackedExpression(node, context) {
+		return b.call('_$_.get', context.visit(node.argument));
+	},
+
 	MemberExpression(node, context) {
 		const parent = context.path.at(-1);
 
@@ -1001,6 +1005,16 @@ const visitors = {
 			);
 		}
 
+		if (argument.type === 'TrackedExpression') {
+			return b.call(
+				node.prefix ? '_$_.update_pre' : '_$_.update',
+				context.visit(argument.argument, { ...context.state, metadata: { tracking: null } }),
+				b.id('__block'),
+				node.operator === '--' ? b.literal(-1) : undefined,
+			);
+		}
+
+
 		const left = object(argument);
 		const binding = context.state.scope.get(left.name);
 		const transformers = left && binding?.transform;