ripple 0.2.45 → 0.2.47

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/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/types/index.d.ts

@@ -74,10 +74,14 @@ declare global {
         computed<T>(fn: () => T, block?: any): T;
         scope(): any;
         get_tracked(node: any): any;
-        get_computed(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> = {};
+
+export declare function track<V>(value: V): Tracked<V>;