ripple 0.2.47 → 0.2.48

package/package.json

@@ -3,7 +3,7 @@
   "description": "Ripple is a TypeScript UI framework for the web",
   "license": "MIT",
   "author": "Dominic Gannaway",
-  "version": "0.2.47",
+  "version": "0.2.48",
   "type": "module",
   "module": "src/runtime/index.js",
   "main": "src/runtime/index.js",

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

@@ -25,6 +25,7 @@ function RipplePlugin(config) {
 
 		class RippleParser extends Parser {
 			#path = [];
+			skip_decorator = false;
 
 			// Helper method to get the element name from a JSX identifier or member expression
 			getElementName(node) {
@@ -274,6 +275,7 @@ function RipplePlugin(config) {
 				}
 			}
 
+
 			parseTryStatement(node) {
 				this.next();
 				node.block = this.parseBlock();
@@ -702,6 +704,54 @@ function RipplePlugin(config) {
 					return node;
 				}
 
+				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 = this.startNode();
+						this.next();
+						// Force expression context to ensure @ is tokenized correctly
+						const oldExprAllowed = this.exprAllowed;
+						this.exprAllowed = true;
+						node.expression = this.parseExpression();
+
+						if (node.expression.type === 'UpdateExpression') {
+							let object = node.expression.argument;
+							while (object.type === 'MemberExpression') {
+								object = object.object;
+							}
+							if (object.type === 'Identifier') {
+								object.tracked = true;
+							}
+						} else if (node.expression.type === 'AssignmentExpression') {
+							let object = node.expression.left;
+							while (object.type === 'MemberExpression') {
+								object = object.object;
+							}
+							if (object.type === 'Identifier') {
+								object.tracked = true;
+							}
+						} else if (node.expression.type === 'Identifier') {
+							node.expression.tracked = true;
+						} else {
+							// TODO?
+						}
+
+						this.exprAllowed = oldExprAllowed;
+						return this.finishNode(node, 'ExpressionStatement');
+					});
+					this.skip_decorator = false;
+					
+					// If parsing as expression statement succeeded, use that result
+					if (expressionResult.node) {
+						return expressionResult.node;
+					}
+					
+					// Otherwise, fall back to default decorator parsing
+				}
+
 				return super.parseStatement(context, topLevel, exports);
 			}
 

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

@@ -269,7 +269,7 @@ const visitors = {
               const parent_node = path?.at(-1);
 
               // We're reading a computed property, which might mean it's a reactive property
-              if (parent_node?.type === 'MemberExpression' && parent_node.computed) {
+              if (!ref.node.tracked && parent_node?.type === 'MemberExpression' && parent_node.computed) {
                 binding.transform = {
                   assign: (node, value, computed) => {
                     if (!computed) {

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

@@ -120,30 +120,36 @@ const visitors = {
   Identifier(node, context) {
     const parent = /** @type {Node} */ (context.path.at(-1));
 
-    if (is_reference(node, parent) && !context.state.to_ts) {
-      const binding = context.state.scope.get(node.name);
-      if (
-        (context.state.metadata?.tracking === false ||
-          (parent.type !== 'AssignmentExpression' && parent.type !== 'UpdateExpression')) &&
-        (is_tracked_name(node.name) ||
-          node.tracked ||
-          binding?.kind === 'prop' ||
-          binding?.kind === 'prop_fallback') &&
-        binding?.node !== node
-      ) {
-        if (context.state.metadata?.tracking === false) {
-          context.state.metadata.tracking = true;
+    if (is_reference(node, parent)) {
+      if (context.state.to_ts) {
+		if (node.tracked) {
+			return b.member(node, b.literal('#v'), true)
+		}
+      } else {
+        const binding = context.state.scope.get(node.name);
+        if (
+          (context.state.metadata?.tracking === false ||
+            (parent.type !== 'AssignmentExpression' && parent.type !== 'UpdateExpression')) &&
+          (is_tracked_name(node.name) ||
+            node.tracked ||
+            binding?.kind === 'prop' ||
+            binding?.kind === 'prop_fallback') &&
+          binding?.node !== node
+        ) {
+          if (context.state.metadata?.tracking === false) {
+            context.state.metadata.tracking = true;
+          }
+          if (node.tracked) {
+            return b.call('$.get', build_getter(node, context));
+          }
         }
-        if (node.tracked) {
-          return b.call('$.get', build_getter(node, context));
+
+        if (node.name === 'structuredClone' && binding === null) {
+          return b.id('$.structured_clone');
         }
-      }
 
-      if (node.name === 'structuredClone' && binding === null) {
-        return b.id('$.structured_clone');
+        return build_getter(node, context);
       }
-
-      return build_getter(node, context);
     }
   },
 

package/src/compiler/utils.js

@@ -435,6 +435,9 @@ export function is_value_static(node) {
 }
 
 export function is_tracked_computed_property(object, property, context) {
+  if (object.tracked) {
+    return false;
+  }
   const binding = context.state.scope.get(object.name);
 
   if (binding) {
@@ -693,13 +696,13 @@ const common_dom_names = new Set([
 
 export function is_element_dom_element(node, context) {
   if (node.id.type === 'Identifier' && node.id.name[0].toLowerCase() === node.id.name[0]) {
-	if (common_dom_names.has(node.id.name)) {
-		return true;
-	}
-	const binding = context.state.scope.get(node.id.name);
+    if (common_dom_names.has(node.id.name)) {
+      return true;
+    }
+    const binding = context.state.scope.get(node.id.name);
     if (binding == null) {
-		return true;
-	}
+      return true;
+    }
   }
   return false;
 }

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

@@ -163,7 +163,7 @@ function push_block(block, parent_block) {
 export function block(flags, fn, state = null) {
   /** @type {Block} */
   var block = {
-    c: active_component,
+    co: active_component,
     d: null,
     first: null,
     f: flags,

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

@@ -170,7 +170,7 @@ function run_derived(computed) {
     active_reaction = computed;
     tracking = true;
     active_dependency = null;
-    active_component = active_block.c;
+    active_component = computed.co;
 
     destroy_computed_children(computed);
 
@@ -221,7 +221,7 @@ export function run_block(block) {
   try {
     active_block = block;
     active_reaction = block;
-    active_component = block.c;
+    active_component = block.co;
 
     destroy_non_branch_children(block);
     run_teardown(block);
@@ -279,6 +279,7 @@ export function derived(fn, block) {
     b: block,
     blocks: null,
     c: 0,
+	co: active_component,
     d: null,
     f: TRACKED | DERIVED,
     fn,

package/src/runtime/internal/client/types.d.ts

@@ -28,6 +28,7 @@ export type Derived = {
 	b: Block;
 	blocks: null | Block[];
 	c: number;
+	co: null | Component;
 	d: null;
 	f: number;
 	fn: Function;
@@ -35,7 +36,7 @@ export type Derived = {
 };
 
 export type Block = {
-	c: null | Component;
+	co: null | Component;
 	d: null | Dependency;
 	first: null | Block;
 	f: number;

package/tests/compiler.test.ripple

@@ -1,5 +1,5 @@
 import { describe, it, expect, beforeEach, afterEach } from 'vitest';
-import { mount, RippleArray } from 'ripple';
+import { mount, RippleArray, track } from 'ripple';
 import { parse } from 'ripple/compiler'
 
 describe('compiler success tests', () => {
@@ -109,15 +109,15 @@ describe('compiler success tests', () => {
 
 		component App() {
 			let items = [];
-			let $items = [];
+			let tracked_items = track([]);
 			let items2 = new Array();
 			let items3 = new RippleArray();
 			let i = 0;
 
 			logs.push(items[0]);
 			logs.push(items[i]);
-			logs.push($items[0]);
-			logs.push($items[i]);
+			logs.push(@tracked_items[0]);
+			logs.push(@tracked_items[i]);
 			logs.push(items2[0]);
 			logs.push(items2[i]);
 			logs.push(items3[0]);
@@ -125,8 +125,8 @@ describe('compiler success tests', () => {
 
 			items[0] = 123;
 			items[i] = 123;
-			$items[0] = 123;
-			$items[i] = 123;
+			@tracked_items[0] = 123;
+			@tracked_items[i] = 123;
 			items2[0] = 123;
 			items2[i] = 123;
 			items3[0] = 123;
@@ -134,8 +134,8 @@ describe('compiler success tests', () => {
 
 			logs.push(items[0]);
 			logs.push(items[i]);
-			logs.push($items[0]);
-			logs.push($items[i]);
+			logs.push(@tracked_items[0]);
+			logs.push(@tracked_items[i]);
 			logs.push(items2[0]);
 			logs.push(items2[i]);
 			logs.push(items3[0]);
@@ -143,8 +143,8 @@ describe('compiler success tests', () => {
 
 			items[0]++;
 			items[i]++;
-			$items[0]++;
-			$items[i]++;
+			@tracked_items[0]++;
+			@tracked_items[i]++;
 			items2[0]++;
 			items2[i]++;
 			items3[0]++;
@@ -152,8 +152,8 @@ describe('compiler success tests', () => {
 
 			logs.push(items[0]);
 			logs.push(items[i]);
-			logs.push($items[0]);
-			logs.push($items[i]);
+			logs.push(@tracked_items[0]);
+			logs.push(@tracked_items[i]);
 			logs.push(items2[0]);
 			logs.push(items2[i]);
 			logs.push(items3[0]);
@@ -161,8 +161,8 @@ describe('compiler success tests', () => {
 
 			logs.push(--items[0]);
 			logs.push(--items[i]);
-			logs.push(--$items[0]);
-			logs.push(--$items[i]);
+			logs.push(--@tracked_items[0]);
+			logs.push(--@tracked_items[i]);
 			logs.push(--items2[0]);
 			logs.push(--items2[i]);
 			logs.push(--items3[0]);

package/tests/context.test.ripple

@@ -1,5 +1,5 @@
 import { describe, it, expect, beforeEach, afterEach } from 'vitest';
-import { mount, createContext } from 'ripple';
+import { mount, createContext, flushSync, track } from 'ripple';
 
 describe('context', () => {
 	let container;
@@ -19,25 +19,48 @@ describe('context', () => {
 		document.body.removeChild(container);
 	});
 
-  it('creates a reactive ref with initial value', () => {
-    const MyContext = createContext(null);
+	it('creates a reactive ref with initial value', () => {
+		const MyContext = createContext(null);
 
-    component Child() {
-      const value = MyContext.get();
+		component Child() {
+			const value = MyContext.get();
 
-      <div>{value}</div>
-    }
+			<div>{value}</div>
+		}
 
-    component TestContext() {
-      const value = MyContext.get();
+		component TestContext() {
+			const value = MyContext.get();
 
-      MyContext.set("Hello from context!");
+			MyContext.set("Hello from context!");
 
-      <Child />
-    }
+			<Child />
+		}
 
 		render(TestContext);
 
 		expect(container.querySelector('div').textContent).toBe('Hello from context!');
 	});
+
+	it('handles context captured inside a computed tracked', () => {
+		
+		const MyContext = createContext(null)
+
+		const doubleContext = () => {
+			const value = MyContext.get()
+			return value * 2
+		}
+
+		component App() {
+			MyContext.set(4)
+				
+			<h3>{MyContext.get()}</h3>
+
+			<h4>{'2x:'} {doubleContext()}</h4>
+
+			MyContext.set(8)
+		}
+
+		render(App);
+		flushSync();
+	});
 });

package/types/index.d.ts

@@ -16,13 +16,13 @@ export declare class RippleArray<T> extends Array<T> {
 	static from<T, U>(
 		arrayLike: ArrayLike<T>,
 		mapFn: (v: T, k: number) => U,
-		thisArg?: any
+		thisArg?: any,
 	): RippleArray<U>;
 	static from<T>(iterable: Iterable<T>): RippleArray<T>;
 	static from<T, U>(
 		iterable: Iterable<T>,
 		mapFn: (v: T, k: number) => U,
-		thisArg?: any
+		thisArg?: any,
 	): RippleArray<U>;
 
 	static of<T>(...items: T[]): RippleArray<T>;
@@ -40,48 +40,48 @@ export type Context<T> = {
 export declare function createContext<T>(initialValue: T): Context<T>;
 
 export class RippleSet<T> extends Set<T> {
-  readonly $size: number;
-  isDisjointFrom(other: RippleSet<T> | Set<T>): boolean;
-  isSubsetOf(other: RippleSet<T> | Set<T>): boolean;
-  isSupersetOf(other: RippleSet<T> | Set<T>): boolean;
-  difference(other: RippleSet<T> | Set<T>): RippleSet<T>;
-  intersection(other: RippleSet<T> | Set<T>): RippleSet<T>;
-  symmetricDifference(other: RippleSet<T> | Set<T>): RippleSet<T>;
-  union(other: RippleSet<T> | Set<T>): RippleSet<T>;
-  toJSON(): T[];
+	readonly $size: number;
+	isDisjointFrom(other: RippleSet<T> | Set<T>): boolean;
+	isSubsetOf(other: RippleSet<T> | Set<T>): boolean;
+	isSupersetOf(other: RippleSet<T> | Set<T>): boolean;
+	difference(other: RippleSet<T> | Set<T>): RippleSet<T>;
+	intersection(other: RippleSet<T> | Set<T>): RippleSet<T>;
+	symmetricDifference(other: RippleSet<T> | Set<T>): RippleSet<T>;
+	union(other: RippleSet<T> | Set<T>): RippleSet<T>;
+	toJSON(): T[];
 }
 
 export class RippleMap<K, V> extends Map<K, V> {
-    get $size(): number;
-    toJSON(): [K, V][];
+	get $size(): number;
+	toJSON(): [K, V][];
 }
 
 // Compiler-injected runtime symbols (for Ripple component development)
 declare global {
-    /**
-     * Runtime block context injected by the Ripple compiler.
-     * This is automatically available in component scopes and passed to runtime functions.
-     */
-    var __block: any;
-
-    /**
-     * Ripple runtime namespace - injected by the compiler
-     * These functions are available in compiled Ripple components for TypeScript analysis
-     */
-    var $: {
-        tracked<T>(value: T, block?: any): T;
-        tracked_object<T extends Record<string, any>>(obj: T, props: string[], block?: any): T;
-        computed<T>(fn: () => T, block?: any): T;
-        scope(): any;
-        get_tracked(node: any): any;
-        get_derived(node: any): any;
-        set(node: any, value: any, block?: any): any;
-        // Add other runtime functions as needed for TypeScript analysis
-    };
+	/**
+	 * Runtime block context injected by the Ripple compiler.
+	 * This is automatically available in component scopes and passed to runtime functions.
+	 */
+	var __block: any;
+
+	/**
+	 * Ripple runtime namespace - injected by the compiler
+	 * These functions are available in compiled Ripple components for TypeScript analysis
+	 */
+	var $: {
+		tracked<T>(value: T, block?: any): T;
+		tracked_object<T extends Record<string, any>>(obj: T, props: string[], block?: any): T;
+		computed<T>(fn: () => T, block?: any): T;
+		scope(): any;
+		get_tracked(node: any): any;
+		get_derived(node: any): any;
+		set(node: any, value: any, block?: any): any;
+		// Add other runtime functions as needed for TypeScript analysis
+	};
 }
 
 export declare function createRefKey(): symbol;
 
-type Tracked<V> = {};
+type Tracked<V> = { '#v': V };
 
-export declare function track<V>(value: V): Tracked<V>;
+export declare function track<V>(value: V | (() => V)): Tracked<V>;