ripple 0.2.46 → 0.2.48

package/src/utils/sanitize_template_string.js

@@ -3,5 +3,5 @@
  * @returns {string}
  */
 export function sanitize_template_string(str) {
-	return str.replace(/(`|\${|\\)/g, '\\$1');
+  return str.replace(/(`|\${|\\)/g, '\\$1');
 }

package/tests/__snapshots__/composite.test.ripple.snap

@@ -1,6 +1,6 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`composite components > correct handles passing through component props and $children 1`] = `
+exports[`composite components > correct handles passing through component props and children 1`] = `
 <div>
   <!---->
   <div>

package/tests/accessors-props.test.ripple

@@ -71,16 +71,16 @@ describe('prop accessors', () => {
 
     component Child(props) {
       effect(() => {
-        logs.push('App effect', props.$foo);
+        logs.push('App effect', props.foo);
       });
 
-      <button onClick={() => props.$foo++}>{"Increment foo"}</button>
+      <button onClick={() => props.foo++}>{"Increment foo"}</button>
     }
 
     component App(props) {
       let $foo = 0;
 
-      <Child $foo:={() => {
+      <Child foo:={() => {
           return $foo;
         }, v => {
           // do not update parent
@@ -103,19 +103,19 @@ describe('prop accessors', () => {
     flushSync();
     
     expect(container.querySelectorAll('div')[0].textContent).toBe('parent foo: 0');
-    expect(logs).toEqual(['App effect', 0, 'App effect', 1]);
+    expect(logs).toEqual(['App effect', 0]);
 
     button2.click();
     flushSync();
 
     expect(container.querySelectorAll('div')[0].textContent).toBe('parent foo: 1');
-    expect(logs).toEqual(['App effect', 0, 'App effect', 1, 'App effect', 1]);
+    expect(logs).toEqual(['App effect', 0, 'App effect', 1]);
 
     button2.click();
     flushSync();
 
     expect(container.querySelectorAll('div')[0].textContent).toBe('parent foo: 2');
-    expect(logs).toEqual(['App effect', 0, 'App effect', 1, 'App effect', 1, 'App effect', 2]);
+    expect(logs).toEqual(['App effect', 0, 'App effect', 1, 'App effect', 2]);
   });
 
 
@@ -123,13 +123,13 @@ describe('prop accessors', () => {
     component Parent() {
       let $value = 123;
 
-      <Child $value:={() => $value} />
+      <Child value:={() => $value} />
 
       <button onClick={() => $value++}>{"Increment value"}</button>
     }
 
-    component Child({ $value }) {
-      <div>{$value}</div>
+    component Child({ value }) {
+      <div>{value}</div>
     }
 
     render(Parent);

package/tests/basic.test.ripple

@@ -89,15 +89,15 @@ describe('basic', () => {
 	});
 
 	it('render tick template literal for nested children', () => {
-		component Child({ $level, $children }) {
+		component Child({ $level, children }) {
 			if($level == 1) {
-				<h1><$children /></h1>
+				<h1><children /></h1>
 			}
 			if($level == 2) {
-				<h2><$children /></h2>
+				<h2><children /></h2>
 			}
 			if($level == 3) {
-				<h3><$children /></h3>
+				<h3><children /></h3>
 			}
 		}
 

package/tests/boundaries.test.ripple

@@ -1,5 +1,5 @@
 import { describe, it, expect, beforeEach, afterEach } from 'vitest';
-import { mount, flushSync, effect } from 'ripple';
+import { mount, flushSync, effect, track } from 'ripple';
 
 describe('passing reactivity between boundaries tests', () => {
 	let container;
@@ -23,23 +23,23 @@ describe('passing reactivity between boundaries tests', () => {
   it('can pass reactivity between functions with simple arrays and destructuring', () => {
     let log: string[] = [];
 
-    function createDouble([ $count ]) {
-      const $double = $count * 2;
+    function createDouble([ count ]) {
+      const double = track(() => @count * 2);
 
       effect(() => {
-        log.push('Count:' + $count);
+        log.push('Count:' + @count);
       });
 
-      return [ $double ];
+      return [ double ];
     }
 
     component App() {
-      let $count = 0;
+      let count = track(0);
 
-      const [ $double ] = createDouble([ $count ]);
+      const [ double ] = createDouble([ count ]);
 
-      <div>{'Double: ' + $double}</div>
-      <button onClick={() => { $count++; }}>{'Increment'}</button>
+      <div>{'Double: ' + @double}</div>
+      <button onClick={() => { @count++; }}>{'Increment'}</button>
     }
 
     render(App);
@@ -66,23 +66,23 @@ describe('passing reactivity between boundaries tests', () => {
   it('can pass reactivity between functions with simple objects and destructuring', () => {
     let log: string[] = [];
 
-    function createDouble({ $count }) {
-      const $double = $count * 2;
+    function createDouble({ count }) {
+      const double = track(() => @count * 2);
 
       effect(() => {
-        log.push('Count:' + $count);
+        log.push('Count:' + @count);
       });
 
-      return { $double };
+      return { double };
     }
 
     component App() {
-      let $count = 0;
+      let count = track(0);
 
-      const { $double } = createDouble({ $count });
+      const { double } = createDouble({ count });
 
-      <div>{'Double: ' + $double}</div>
-      <button onClick={() => { $count++; }}>{'Increment'}</button>
+      <div>{'Double: ' + @double}</div>
+      <button onClick={() => { @count++; }}>{'Increment'}</button>
     }
 
     render(App);

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/composite.test.ripple

@@ -1,5 +1,5 @@
 import { describe, it, expect, beforeEach, afterEach } from 'vitest';
-import { mount, flushSync } from 'ripple';
+import { mount, flushSync, track } from 'ripple';
 
 describe('composite components', () => {
 	let container;
@@ -21,15 +21,15 @@ describe('composite components', () => {
 	});
 
 	it('renders composite components', () => {
-		component Button({ $count }) {
-			<div>{$count}</div>
+		component Button({ count }) {
+			<div>{count}</div>
 		}
 
 		component App() {
-			let $count = 0;
+			let count = track(0);
 
-			<button onClick={() => $count++}>{'Increment'}</button>
-			<Button $count={$count} />
+			<button onClick={() => @count++}>{'Increment'}</button>
+			<Button {@count} />
 		}
 
 		render(App);
@@ -50,48 +50,17 @@ describe('composite components', () => {
 	it('renders composite components with object state', () => {
 		component Button({ obj }) {
 			<button class='count2' onClick={() => {
-				obj.$count++;
-			}}>{obj.$count}</button>
+				obj.@count++;
+			}}>{obj.@count}</button>
 		}
 
 		component App() {
 			<div>
 				let obj = {
-					$count: 0
+					count: track(0)
 				};
-				let $button = true;
 
-				<span class='count'>{obj.$count}</span>
-				<span>{' '}</span>
-				<Button obj={obj} />
-			</div>
-		}
-
-		render(App);
-
-		const button = container.querySelector('button');
-
-		button.click();
-		flushSync();
-
-		expect(container.querySelector('.count').textContent).toBe('1');
-		expect(container.querySelector('.count2').textContent).toBe('1');
-	});
-
-	it('renders composite components with object state', () => {
-		component Button({ obj }) {
-			<button class='count2' onClick={() => {
-				obj.$count++;
-			}}>{obj.$count}</button>
-		}
-
-		component App() {
-			<div>
-				let obj = {
-					$count: 0
-				};
-
-				<span class='count'>{obj.$count}</span>
+				<span class='count'>{obj.@count}</span>
 				<Button obj={obj} />
 			</div>
 		}
@@ -110,21 +79,21 @@ describe('composite components', () => {
 	it('renders composite components with object state wrapped in an if statement', () => {
 		component Button({ obj }) {
 			<button class='count2' onClick={() => {
-				obj.$count++;
-			}}>{obj.$count}</button>
+				obj.@count++;
+			}}>{obj.@count}</button>
 		}
 
 		component OtherComponent({ obj }) {
-			<div class='count3'>{obj.$count}</div>
+			<div class='count3'>{obj.@count}</div>
 		}
 
 		component App() {
 			<div>
 				let obj = {
-					$count: 0
+					count: track(0)
 				};
 
-				<span class='count'>{obj.$count}</span>
+				<span class='count'>{obj.@count}</span>
 				<span>{' '}</span>
 				if (obj) {
 					<Button obj={obj} />
@@ -148,17 +117,18 @@ describe('composite components', () => {
 		expect(container.querySelector('.count3').textContent).toBe('1');
 	});
 
-	it('parents and children have isolated but connected state', () => {
+	it('parents and children have isolated state', () => {
 		component Button(props) {
-			<button onClick={() => { props.$count++; } }>{"child: " + props.$count}</button>
+			let count = track(() => props.count);
+			<button onClick={() => { @count++; } }>{"child: " + @count}</button>
 		}
 
 		component App() {
 			<div>
-				let $count = 0;
+				let count = track(0);
 
-				<button onClick={() => { $count++; } }>{"parent: " + $count}</button>
-				<Button {$count} />
+				<button onClick={() => { @count++; } }>{"parent: " + @count}</button>
+				<Button {@count} />
 			</div>
 		}
 
@@ -182,17 +152,18 @@ describe('composite components', () => {
 		expect(buttons[1].textContent).toBe('child: 2');
 	});
 
-	it('parents and children have isolated but connected state (destructured props)', () => {
-		component Button({$count}) {
-			<button onClick={() => { $count++; } }>{"child: " + $count}</button>
+	it('parents and children have isolated connected state (destructured props)', () => {
+		component Button({count}) {
+			let local_count = track(() => count);
+			<button onClick={() => { @local_count++; } }>{"child: " + @local_count}</button>
 		}
 
 		component App() {
 			<div>
-				let $count = 0;
+				let count = track(0);
 
-				<button onClick={() => { $count++; } }>{"parent: " + $count}</button>
-				<Button {$count} />
+				<button onClick={() => { @count++; } }>{"parent: " + @count}</button>
+				<Button {@count} />
 			</div>
 		}
 
@@ -216,11 +187,11 @@ describe('composite components', () => {
 		expect(buttons[1].textContent).toBe('child: 2');
 	});
 
-	it('correct handles passing through component props and $children', () => {
-		component Button({ A, B, $children }) {
+	it('correct handles passing through component props and children', () => {
+		component Button({ A, B, children }) {
 			<div>
 				<A />
-				<$children />
+				<children />
 				<B />
 			</div>
 		}
@@ -243,15 +214,15 @@ describe('composite components', () => {
 	});
 
 	it('correctly handles default prop values', () => {
-		component Child({ $foo = 456 }) {
-			<div>{$foo}</div>
+		component Child({ foo = 456 }) {
+			<div>{foo}</div>
 		}
 
 		component App(props) {
-			let $foo = 123;
+			let foo = track(123);
 
 			<Child />
-			<Child {$foo} />
+			<Child {@foo} />
 		}
 
 		render(App);
@@ -260,7 +231,7 @@ describe('composite components', () => {
 		expect(container.querySelectorAll('div')[1].textContent).toBe('123');
 	});
 
-		it('correctly handles default prop values #2', () => {
+	it('correctly handles default prop values #2', () => {
 		component Child({ foo = 456 }) {
 			<div>{foo}</div>
 		}
@@ -280,14 +251,14 @@ describe('composite components', () => {
 
 	it('correctly handles no props', () => {
 		component Child(props) {
-			<div>{props.$foo}</div>
+			<div>{props.@foo}</div>
 		}
 
 		component App(props) {
-			let $foo = 123;
+			let foo = track(123);
 
 			<Child />
-			<Child {$foo} />
+			<Child {foo} />
 		}
 
 		render(App);
@@ -297,15 +268,15 @@ describe('composite components', () => {
 	});
 
 	it('correctly handles no props #2', () => {
-		component Child({ $foo }) {
-			<div>{$foo}</div>
+		component Child({ foo }) {
+			<div>{foo}</div>
 		}
 
 		component App(props) {
-			let $foo = 123;
+			let foo = track(123);
 
 			<Child />
-			<Child {$foo} />
+			<Child {@foo} />
 		}
 
 		render(App);

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,44 +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_computed(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;
+export declare function createRefKey(): symbol;
+
+type Tracked<V> = { '#v': V };
+
+export declare function track<V>(value: V | (() => V)): Tracked<V>;