ripple 0.2.215 → 0.3.0

package/tests/client/map.test.ripple

@@ -1,11 +1,11 @@
-import { flushSync, TrackedMap, track } from 'ripple';
+import { flushSync, RippleMap } from 'ripple';
 
-describe('TrackedMap', () => {
+describe('RippleMap', () => {
 	it('handles set with update and delete operations with a reactive size var', () => {
 		component MapTest() {
-			let map = new TrackedMap([['a', 1], ['b', 2], ['c', 3]]);
-			let value = track(() => map.get('a'));
-			let size = track(() => map.size);
+			let map = #ripple.map([['a', 1], ['b', 2], ['c', 3]]);
+			let value = #ripple.track(() => map.get('a'));
+			let size = #ripple.track(() => map.size);
 
 			<button onClick={() => map.set('d', 4)}>{'set'}</button>
 			<button onClick={() => map.delete('b')}>{'delete'}</button>
@@ -42,7 +42,7 @@ describe('TrackedMap', () => {
 
 	it('handles clear operation', () => {
 		component MapTest() {
-			let map = new TrackedMap([['a', 1], ['b', 2], ['c', 3]]);
+			let map = #ripple.map([['a', 1], ['b', 2], ['c', 3]]);
 
 			<button onClick={() => map.clear()}>{'clear'}</button>
 			<pre>{map.size}</pre>
@@ -60,8 +60,8 @@ describe('TrackedMap', () => {
 
 	it('handles has operation and tracks reactive $has', () => {
 		component MapTest() {
-			let map = new TrackedMap([['a', 1], ['b', 2], ['c', 3]]);
-			let has = track(() => map.has('b'));
+			let map = #ripple.map([['a', 1], ['b', 2], ['c', 3]]);
+			let has = #ripple.track(() => map.has('b'));
 
 			<button onClick={() => map.delete('b')}>{'delete'}</button>
 			<pre>{@has}</pre>
@@ -80,10 +80,10 @@ describe('TrackedMap', () => {
 
 	it('handles reactivity of keys, values, and entries', () => {
 		component MapTest() {
-			let map = new TrackedMap([['x', 10], ['y', 20]]);
-			let keys = track(() => Array.from(map.keys()));
-			let values = track(() => Array.from(map.values()));
-			let entries = track(() => Array.from(map.entries()));
+			let map = #ripple.map([['x', 10], ['y', 20]]);
+			let keys = #ripple.track(() => Array.from(map.keys()));
+			let values = #ripple.track(() => Array.from(map.values()));
+			let entries = #ripple.track(() => Array.from(map.entries()));
 
 			<button onClick={() => map.delete('x')}>{'delete'}</button>
 
@@ -110,7 +110,7 @@ describe('TrackedMap', () => {
 
 	it('toJSON returns correct object', () => {
 		component MapTest() {
-			let map = new TrackedMap([['foo', 1], ['bar', 2]]);
+			let map = #ripple.map([['foo', 1], ['bar', 2]]);
 
 			<pre>{JSON.stringify(map)}</pre>
 		}
@@ -120,9 +120,9 @@ describe('TrackedMap', () => {
 		expect(container.querySelectorAll('pre')[0].textContent).toBe('[["foo",1],["bar",2]]');
 	});
 
-	it('creates empty TrackedMap using #Map() shorthand syntax', () => {
+	it('creates empty RippleMap using #ripple.map() shorthand syntax', () => {
 		component MapTest() {
-			let map = new #Map();
+			let map = #ripple.map();
 
 			<button onClick={() => map.set('a', 1)}>{'add'}</button>
 			<pre>{map.size}</pre>
@@ -139,10 +139,10 @@ describe('TrackedMap', () => {
 		expect(container.querySelector('pre').textContent).toBe('1');
 	});
 
-	it('creates TrackedMap with initial entries using #Map() shorthand syntax', () => {
+	it('creates RippleMap with initial entries using #ripple.map() shorthand syntax', () => {
 		component MapTest() {
-			let map = new #Map([['a', 1], ['b', 2], ['c', 3]]);
-			let value = track(() => map.get('b'));
+			let map = #ripple.map([['a', 1], ['b', 2], ['c', 3]]);
+			let value = #ripple.track(() => map.get('b'));
 
 			<button onClick={() => map.set('b', 10)}>{'update'}</button>
 			<pre>{map.size}</pre>
@@ -161,10 +161,10 @@ describe('TrackedMap', () => {
 		expect(container.querySelectorAll('pre')[1].textContent).toBe('10');
 	});
 
-	it('handles all operations with #Map() shorthand syntax', () => {
+	it('handles all operations with #ripple.map() shorthand syntax', () => {
 		component MapTest() {
-			let map = new #Map([['x', 100], ['y', 200]]);
-			let keys = track(() => Array.from(map.keys()));
+			let map = #ripple.map([['x', 100], ['y', 200]]);
+			let keys = #ripple.track(() => Array.from(map.keys()));
 
 			<button onClick={() => map.set('z', 300)}>{'add'}</button>
 			<button onClick={() => map.delete('x')}>{'delete'}</button>

package/tests/client/media-query.test.ripple

@@ -1,4 +1,4 @@
-import { flushSync, MediaQuery, track } from 'ripple';
+import { flushSync } from 'ripple';
 
 type Callback = (event: MediaQueryListEvent) => void;
 
@@ -51,7 +51,7 @@ describe('MediaQuery', () => {
 		const media = '(min-width: 600px)';
 
 		component App() {
-			const medium = new MediaQuery(media);
+			const medium = #ripple.mediaQuery(media);
 
 			<div>
 				<p>{@medium}</p>
@@ -86,7 +86,7 @@ describe('MediaQuery', () => {
 		const media = '(min-width: 600px)';
 
 		component App() {
-			let show = track(true);
+			let show = #ripple.track(true);
 
 			if (@show) {
 				<Child />
@@ -96,7 +96,7 @@ describe('MediaQuery', () => {
 		}
 
 		component Child() {
-			const medium = new MediaQuery(media);
+			const medium = #ripple.mediaQuery(media);
 
 			<div>
 				<p>{@medium}</p>

package/tests/client/object.test.ripple

@@ -1,10 +1,10 @@
-import { flushSync, TrackedObject } from 'ripple';
+import { flushSync, RippleObject } from 'ripple';
 import { TRACKED_OBJECT } from '../../src/runtime/internal/client/constants.js';
 
-describe('TrackedObject', () => {
+describe('RippleObject', () => {
 	it('makes new properties reactive', () => {
 		component ObjectTest() {
-			const obj = new TrackedObject<{ a: number }>({ a: -1 });
+			const obj = #ripple{ a: -1 };
 
 			obj.a = 0;
 
@@ -33,7 +33,7 @@ describe('TrackedObject', () => {
 
 	it('makes existing object properties reactive', () => {
 		component ObjectTest() {
-			const obj = new TrackedObject({ a: 0 });
+			const obj = #ripple{ a: 0 };
 
 			<pre>{obj.a}</pre>
 			<button
@@ -60,7 +60,7 @@ describe('TrackedObject', () => {
 
 	it('checks if property exists via the has trap', () => {
 		component ObjectTest() {
-			const obj = new TrackedObject<{ a: number; b: number }>({ a: -1, b: 1 });
+			const obj = #ripple{ a: -1, b: 1 };
 
 			obj.a = 0;
 
@@ -76,7 +76,7 @@ describe('TrackedObject', () => {
 
 	it('deletes properties via the delete trap', () => {
 		component ObjectTest() {
-			const obj = new TrackedObject<{ a?: number; b: number }>({ a: 0, b: 1 });
+			const obj = new RippleObject<{ a?: number; b: number }>({ a: 0, b: 1 });
 
 			<pre>{String(obj.a)}</pre>
 			<button
@@ -103,7 +103,7 @@ describe('TrackedObject', () => {
 
 	it('checks if non-existent property is reactive when added later', () => {
 		component ObjectTest() {
-			const obj = new TrackedObject<{ a?: number }>({});
+			const obj = new RippleObject<{ a?: number }>({});
 
 			<pre>{String(obj.a)}</pre>
 			<button
@@ -130,7 +130,7 @@ describe('TrackedObject', () => {
 
 	it('checks that deeply nested objects are not proxied or reactive', () => {
 		component ObjectTest() {
-			const obj = new TrackedObject({ a: { b: 1 } });
+			const obj = new RippleObject({ a: { b: 1 } });
 
 			<pre>{String(obj.a.b)}</pre>
 			<button
@@ -156,18 +156,18 @@ describe('TrackedObject', () => {
 		expect(pre1.textContent).toBe('1');
 	});
 
-	it('checks if TRACKED_OBJECT symbol is present on TrackedObject instances', () => {
+	it('checks if TRACKED_OBJECT symbol is present on RippleObject instances', () => {
 		component ObjectTest() {
-			const obj = new TrackedObject({ a: 0 });
+			const obj = new RippleObject({ a: 0 });
 
 			// @ts-expect-error TRACKED_OBJECT is internal
 			expect(obj[TRACKED_OBJECT]).toBe(true);
 		}
 	});
 
-	it('uses the hash syntax for creating TrackedObject', () => {
+	it('uses the hash syntax for creating RippleObject', () => {
 		component ObjectTest() {
-			const obj = #{ a: 0, b: 1, c: { d: { e: 8 } } };
+			const obj = #ripple{ a: 0, b: 1, c: { d: { e: 8 } } };
 
 			<pre>{obj.a}</pre>
 			<pre>{TRACKED_OBJECT in obj}</pre>

package/tests/client/portal.test.ripple

@@ -1,4 +1,4 @@
-import { Portal, track, flushSync } from 'ripple';
+import { Portal, flushSync } from 'ripple';
 
 describe('Portal', () => {
 	afterEach(() => {
@@ -46,7 +46,7 @@ describe('Portal', () => {
 
 	it('cleans up portal content when destroyed via conditional rendering', () => {
 		component TestPortal() {
-			let open = track(true);
+			let open = #ripple.track(true);
 
 			if (@open) {
 				<Portal target={document.body}>
@@ -72,7 +72,7 @@ describe('Portal', () => {
 
 	it('opens and closes portal via conditional rendering', () => {
 		component TestPortal() {
-			let open = track(false);
+			let open = #ripple.track(false);
 
 			if (@open) {
 				<Portal target={document.body}>
@@ -138,7 +138,7 @@ describe('Portal', () => {
 
 	it('handles portal with reactive content', () => {
 		component TestReactivePortal() {
-			let count = track(0);
+			let count = #ripple.track(0);
 
 			<Portal target={document.body}>
 				<div class="test-portal">

package/tests/client/ref.test.ripple

@@ -1,6 +1,6 @@
 import type { PropsWithExtras } from 'ripple';
 import { describe, it, expect } from 'vitest';
-import { flushSync, TrackedArray, track, createRefKey } from 'ripple';
+import { flushSync, RippleArray, createRefKey } from 'ripple';
 
 describe('refs', () => {
 	it('capture a <div>', () => {
@@ -25,7 +25,7 @@ describe('refs', () => {
 		let _node: Child | undefined;
 
 		component Component() {
-			let items = TrackedArray.from([1, 2, 3]);
+			let items = RippleArray.from([1, 2, 3]);
 
 			function componentRef(node: Child) {
 				_node = node;
@@ -34,7 +34,7 @@ describe('refs', () => {
 			<Child {ref componentRef} {items} />
 		}
 
-		component Child(props: { items: TrackedArray<number> }) {
+		component Child(props: { items: RippleArray<number> }) {
 			const { items, ...rest } = props;
 			<pre {...rest}>{JSON.stringify(items)}</pre>
 			<pre>{items.length}</pre>
@@ -50,7 +50,7 @@ describe('refs', () => {
 		let logs: string[] = [];
 
 		component App() {
-			let value = track('test');
+			let value = #ripple.track('test');
 
 			function inputRef(node: HTMLInputElement) {
 				logs.push('ref called');
@@ -81,7 +81,7 @@ describe('refs', () => {
 		let logs: string[] = [];
 
 		component App() {
-			let value = track('test');
+			let value = #ripple.track('test');
 
 			function inputRef(node: HTMLInputElement) {
 				logs.push('ref called');

package/tests/client/return.test.ripple

@@ -1,5 +1,5 @@
 import { describe, it, expect } from 'vitest';
-import { track, flushSync } from 'ripple';
+import { flushSync } from 'ripple';
 import { compile } from 'ripple/compiler';
 
 describe('returns in prohibited scopes', () => {
@@ -64,7 +64,7 @@ describe('early return in client components', () => {
 
 	it('reactive: condition changes from false to true hides rest', () => {
 		component App() {
-			let condition = track(false);
+			let condition = #ripple.track(false);
 
 			<button
 				onClick={() => {
@@ -93,7 +93,7 @@ describe('early return in client components', () => {
 
 	it('reactive: condition changes from true to false shows rest', () => {
 		component App() {
-			let condition = track(true);
+			let condition = #ripple.track(true);
 
 			<button
 				onClick={() => {
@@ -905,8 +905,8 @@ describe('early return in client components', () => {
 
 	it('reactive: nested return condition changes', () => {
 		component App() {
-			let a = track(true);
-			let b = track(true);
+			let a = #ripple.track(true);
+			let b = #ripple.track(true);
 
 			<button
 				onClick={() => {
@@ -940,7 +940,7 @@ describe('early return in client components', () => {
 
 	it('reactive: return in nested element scope', () => {
 		component App() {
-			let show = track(true);
+			let show = #ripple.track(true);
 
 			<button
 				onClick={() => {
@@ -1214,7 +1214,7 @@ describe('early return in client components', () => {
 
 		it('reactive: nested return - outer condition changes to false shows rest', () => {
 			component App() {
-				let a = track(true);
+				let a = #ripple.track(true);
 				let b = true;
 
 				<button
@@ -1251,7 +1251,7 @@ describe('early return in client components', () => {
 			component App() {
 				let a = true;
 				let b = true;
-				let c = track(true);
+				let c = #ripple.track(true);
 
 				<button
 					onClick={() => {
@@ -2208,10 +2208,10 @@ describe('early return in client components', () => {
 
 		it('nested reactive: toggling conditions updates DOM', () => {
 			component App() {
-				let a = track(false);
-				let b = track(false);
-				let c = track(false);
-				let d = track(false);
+				let a = #ripple.track(false);
+				let b = #ripple.track(false);
+				let c = #ripple.track(false);
+				let d = #ripple.track(false);
 
 				<button
 					class="toggle-c"
@@ -2279,7 +2279,7 @@ describe('early return in client components', () => {
 			() => {
 				component App() {
 					let a = true;
-					let b = track(true);
+					let b = #ripple.track(true);
 
 					<button
 						class="toggle"
@@ -2326,7 +2326,7 @@ describe('early return in client components', () => {
 
 		it('reactive sibling returns cycle through first, second, and fallback branches', () => {
 			component App() {
-				let mode = track('first');
+				let mode = #ripple.track('first');
 
 				<button
 					class="toggle"
@@ -2382,8 +2382,8 @@ describe('early return in client components', () => {
 
 		it('reactive nested returns with tracked outer and inner flags transition correctly', () => {
 			component App() {
-				let a = track(true);
-				let b = track(true);
+				let a = #ripple.track(true);
+				let b = #ripple.track(true);
 
 				<button
 					class="toggle-a"
@@ -2446,7 +2446,7 @@ describe('early return in client components', () => {
 
 		it('reactive else-if return chain transitions between return and non-return states', () => {
 			component App() {
-				let status = track(0);
+				let status = #ripple.track(0);
 
 				<button
 					class="toggle"

package/tests/client/set.test.ripple

@@ -1,16 +1,16 @@
-import { flushSync, TrackedSet, track } from 'ripple';
+import { flushSync, RippleSet } from 'ripple';
 
-describe('TrackedSet', () => {
+describe('RippleSet', () => {
 	it('handles add and delete operations', () => {
 		component SetTest() {
-			let items = new TrackedSet([1, 2, 3]);
+			let items = new RippleSet([1, 2, 3]);
 
 			<button onClick={() => items.add(4)}>{'add'}</button>
 			<button onClick={() => items.delete(2)}>{'delete'}</button>
 			<Child {items} />
 		}
 
-		component Child({ items }: { items: TrackedSet<number> }) {
+		component Child({ items }: { items: RippleSet<number> }) {
 			<pre>{JSON.stringify(items)}</pre>
 			<pre>{items.size}</pre>
 		}
@@ -35,13 +35,13 @@ describe('TrackedSet', () => {
 
 	it('handles clear operation', () => {
 		component SetTest() {
-			let items = new TrackedSet([1, 2, 3]);
+			let items = new RippleSet([1, 2, 3]);
 
 			<button onClick={() => items.clear()}>{'clear'}</button>
 			<Child {items} />
 		}
 
-		component Child({ items }: { items: TrackedSet<number> }) {
+		component Child({ items }: { items: RippleSet<number> }) {
 			<pre>{JSON.stringify(items)}</pre>
 			<pre>{items.size}</pre>
 		}
@@ -59,8 +59,8 @@ describe('TrackedSet', () => {
 
 	it('handles has operation', () => {
 		component SetTest() {
-			let items = new TrackedSet([1, 2, 3]);
-			let hasValue = track(() => items.has(2));
+			let items = new RippleSet([1, 2, 3]);
+			let hasValue = #ripple.track(() => items.has(2));
 
 			<button onClick={() => items.delete(2)}>{'delete'}</button>
 			<pre>{@hasValue}</pre>
@@ -78,9 +78,9 @@ describe('TrackedSet', () => {
 		expect(container.querySelectorAll('pre')[0].textContent).toBe('false');
 	});
 
-	it('creates empty TrackedSet using #Set() shorthand syntax', () => {
+	it('creates empty RippleSet using #ripple.set() shorthand syntax', () => {
 		component SetTest() {
-			let items = new #Set();
+			let items = #ripple.set();
 
 			<button onClick={() => items.add(1)}>{'add'}</button>
 			<pre>{items.size}</pre>
@@ -97,10 +97,10 @@ describe('TrackedSet', () => {
 		expect(container.querySelector('pre').textContent).toBe('1');
 	});
 
-	it('creates TrackedSet with initial values using #Set() shorthand syntax', () => {
+	it('creates RippleSet with initial values using #ripple.set() shorthand syntax', () => {
 		component SetTest() {
-			let items = new #Set([1, 2, 3, 4]);
-			let hasValue = track(() => items.has(3));
+			let items = #ripple.set([1, 2, 3, 4]);
+			let hasValue = #ripple.track(() => items.has(3));
 
 			<button onClick={() => items.delete(3)}>{'delete'}</button>
 			<pre>{items.size}</pre>
@@ -120,10 +120,10 @@ describe('TrackedSet', () => {
 		expect(container.querySelectorAll('pre')[1].textContent).toBe('false');
 	});
 
-	it('handles all operations with #Set() shorthand syntax', () => {
+	it('handles all operations with #ripple.set() shorthand syntax', () => {
 		component SetTest() {
-			let items = new #Set([10, 20, 30]);
-			let values = track(() => Array.from(items.values()));
+			let items = #ripple.set([10, 20, 30]);
+			let values = #ripple.track(() => Array.from(items.values()));
 
 			<button onClick={() => items.add(40)}>{'add'}</button>
 			<button onClick={() => items.delete(20)}>{'delete'}</button>

package/tests/client/svg.test.ripple

@@ -1,5 +1,4 @@
-import type { Component, Props, PropsWithChildren, PropsWithExtras } from 'ripple';
-import { track } from 'ripple';
+import type { Component, PropsWithChildren, PropsWithExtras } from 'ripple';
 
 describe('SVG namespace handling', () => {
 	it('should render static SVG elements with correct namespace', () => {
@@ -290,7 +289,7 @@ describe('SVG namespace handling', () => {
 		}
 
 		component App() {
-			let dynTag = track('polygon');
+			let dynTag = #ripple.track('polygon');
 			<SVG>
 				<@dynTag points="0,0 30,0 15,10" />
 			</SVG>
@@ -317,7 +316,7 @@ describe('SVG namespace handling', () => {
 		}
 
 		component App() {
-			let Component = track(() => Polygon);
+			let Component = #ripple.track(() => Polygon);
 			<SVG>
 				<@Component points="0,0 30,0 15,10" />
 			</SVG>
@@ -334,19 +333,19 @@ describe('SVG namespace handling', () => {
 
 	it('should render SVG as a dynamic top element with any dynamic children elements', () => {
 		component SVG({ children }: PropsWithChildren<{}>) {
-			const tag = track('svg');
+			const tag = #ripple.track('svg');
 			<@tag width={100} height={50} fill="red" viewBox="0 0 30 10" preserveAspectRatio="none">
 				<children />
 			</@tag>
 		}
 
 		component Polygon({ points }: PropsWithExtras<{ points: string }>) {
-			let dynTag = track('polygon');
+			let dynTag = #ripple.track('polygon');
 			<@dynTag {points} />
 		}
 
 		component App() {
-			let Component = track(() => Polygon);
+			let Component = #ripple.track(() => Polygon);
 			<SVG>
 				<@Component points="0,0 30,0 15,10" />
 			</SVG>

package/tests/client/switch.test.ripple

@@ -1,9 +1,9 @@
-import { flushSync, track } from 'ripple';
+import { flushSync } from 'ripple';
 
 describe('switch statements', () => {
 	it('renders simple switch with literal cases', () => {
 		component App() {
-			let value = track('b');
+			let value = #ripple.track('b');
 
 			<button onClick={() => (@value = 'c')}>{'Change to C'}</button>
 			<button onClick={() => (@value = 'a')}>{'Change to A'}</button>
@@ -38,7 +38,7 @@ describe('switch statements', () => {
 
 	it('renders switch with reactive discriminant', () => {
 		component App() {
-			let count = track(1);
+			let count = #ripple.track(1);
 
 			<button onClick={() => @count++}>{'Increment'}</button>
 
@@ -70,7 +70,7 @@ describe('switch statements', () => {
 
 	it('renders switch with default clause only', () => {
 		component App() {
-			let value = track('x');
+			let value = #ripple.track('x');
 
 			<button onClick={() => (@value = 'y')}>{'Change Value'}</button>
 
@@ -91,7 +91,7 @@ describe('switch statements', () => {
 
 	it('renders switch using empty case fall-through', () => {
 		component App() {
-			let value = track('a');
+			let value = #ripple.track('a');
 
 			<button onClick={() => (@value = 'b')}>{'Change to B'}</button>
 			<button onClick={() => (@value = 'c')}>{'Change to C'}</button>
@@ -133,8 +133,8 @@ describe('switch statements', () => {
 
 	it('renders switch with template content and reacts to tracked changes', () => {
 		component App() {
-			let status = track('active');
-			let message = track('');
+			let status = #ripple.track('active');
+			let message = #ripple.track('');
 
 			<button onClick={() => (@status = 'pending')}>{'Pending'}</button>
 			<button onClick={() => (@status = 'completed')}>{'Completed'}</button>
@@ -185,7 +185,7 @@ describe('switch statements', () => {
 		'renders switch with multiple non-empty fall-through cases and reacts to tracked changes without recreating DOM unnecessarily',
 		() => {
 			component App() {
-				let status = track(0);
+				let status = #ripple.track(0);
 				<div>
 					switch (@status) {
 						case -1:
@@ -253,7 +253,7 @@ describe('switch statements', () => {
 		'renders a fall-through default in the middle of switch cases and reacts to changes without recreating DOM unnecessarily',
 		() => {
 			component App() {
-				let value = track('x');
+				let value = #ripple.track('x');
 
 				<button onClick={() => (@value = 'a')}>{'Set A'}</button>
 				<button onClick={() => (@value = 'b')}>{'Set B'}</button>
@@ -359,7 +359,7 @@ describe('switch statements', () => {
 
 	it('renders switch with block-scoped cases and break inside blocks', () => {
 		component App() {
-			let level = track(1);
+			let level = #ripple.track(1);
 
 			<button
 				onClick={() => {

package/tests/client/tracked-expression.test.ripple

@@ -1,9 +1,7 @@
-import { track } from 'ripple';
-
 describe('TrackedExpression tests', () => {
 	it('should handle the syntax correctly', () => {
 		component App() {
-			let count = track(0);
+			let count = #ripple.track(0);
 
 			function get_count() {
 				return count;