ripple 0.2.216 → 0.3.0

package/tests/client/basic/basic.components.test.ripple

@@ -1,5 +1,12 @@
-import type { Tracked, Props, PropsWithChildren, PropsWithExtras } from 'ripple';
-import { track, flushSync } from 'ripple';
+import type {
+	Tracked,
+	Props,
+	PropsWithChildren,
+	PropsWithExtras,
+	Component,
+	PropsWithChildrenOptional,
+} from 'ripple';
+import { flushSync } from 'ripple';
 
 describe('basic client > components & composition', () => {
 	it('renders with component composition and children', () => {
@@ -27,18 +34,48 @@ describe('basic client > components & composition', () => {
 	});
 
 	it('does not render a falsy component call', () => {
-		component Card(props: PropsWithChildren<{}>) {
+		component Card(props: PropsWithChildrenOptional<{ test?: Component }>) {
 			<div class="card">
-				<props.children />
+				if (props.children) {
+					<props.children />
+				}
+			</div>
+		}
+
+		component Basic() {
+			<Card>
+				component test() {
+					<p>{'Card content here'}</p>
+				}
+			</Card>
+		}
+
+		render(Basic);
+
+		const card = container.querySelector('.card');
+		const paragraph = card.querySelector('p');
+
+		expect(card).toBeTruthy();
+		expect(paragraph).toBeFalsy();
+	});
+
+	it('allows tracked variable and slot component with same name in nested scope', () => {
+		component Card(props: PropsWithChildrenOptional<{ test?: Component }>) {
+			<div class="card">
+				if (props.children) {
+					<props.children />
+				}
 			</div>
 		}
 
 		component Basic() {
+			let test = #ripple.track(false);
 			<Card>
 				component test() {
 					<p>{'Card content here'}</p>
 				}
 			</Card>
+			<div>{@test ? 'yes' : 'no'}</div>
 		}
 
 		render(Basic);
@@ -48,6 +85,7 @@ describe('basic client > components & composition', () => {
 
 		expect(card).toBeTruthy();
 		expect(paragraph).toBeFalsy();
+		expect(container.textContent).toContain('no');
 	});
 
 	it('renders a component when children is set a component prop', () => {
@@ -96,7 +134,7 @@ describe('basic client > components & composition', () => {
 		}
 
 		component Basic() {
-			let clicked = track(false);
+			let clicked = #ripple.track(false);
 
 			<Card
 				title="Test Card"
@@ -137,8 +175,8 @@ describe('basic client > components & composition', () => {
 		}
 
 		component Basic() {
-			let message = track('Hello');
-			let number = track(1);
+			let message = #ripple.track('Hello');
+			let number = #ripple.track(1);
 
 			<ChildComponent text={message} count={number} />
 			<button
@@ -176,14 +214,14 @@ describe('basic client > components & composition', () => {
 	it('it retains this context with bracketed prop functions and keeps original chaining', () => {
 		component App() {
 			const SYMBOL_PROP = Symbol();
-			let hasError = track(false);
+			let hasError = #ripple.track(false);
 			const obj: {
 				count: Tracked<number>;
 				increment: () => void;
 				[key: symbol]: () => void;
 				arr: Array<() => void>;
 			} = {
-				count: track(0),
+				count: #ripple.track(0),
 				increment() {
 					this.@count++;
 				},
@@ -364,7 +402,7 @@ describe('basic client > components & composition', () => {
 		}
 
 		component App() {
-			let Content = track(() => Noop);
+			let Content = #ripple.track(() => Noop);
 			<@Content />
 
 			<button onClick={() => (@Content = Op)}>{'Show Op'}</button>

package/tests/client/basic/basic.errors.test.ripple

@@ -1,11 +1,11 @@
-import { track, flushSync, untrack } from 'ripple';
+import { flushSync } from 'ripple';
 import { compile } from 'ripple/compiler';
 
 describe('basic client > errors', () => {
 	it('renders with error handling simulation', () => {
 		component Basic() {
-			let hasError = track(false);
-			let errorMessage = track('');
+			let hasError = #ripple.track(false);
+			let errorMessage = #ripple.track('');
 
 			const triggerError = () => {
 				try {
@@ -89,11 +89,11 @@ describe('basic client > errors', () => {
 		);
 	});
 
-	it('errors on mutating tracked value inside computed track() evaluation', () => {
+	it('errors on mutating tracked value inside computed #ripple.track() evaluation', () => {
 		component Basic() {
-			let count = track(0);
+			let count = #ripple.track(0);
 
-			const doubled = track(() => {
+			const doubled = #ripple.track(() => {
 				try {
 					@count *= 2;
 				} catch (e) {
@@ -107,39 +107,42 @@ describe('basic client > errors', () => {
 		render(Basic);
 
 		expect(error).toBe(
-			'Assignments or updates to tracked values are not allowed during computed "track(() => ...)" evaluation',
+			'Assignments or updates to tracked values are not allowed during computed "#ripple.track(() => ...)" evaluation',
 		);
 	});
 
-	it('errors on mutating tracked value inside untrack() in computed track() evaluation', () => {
-		component Basic() {
-			let count = track(0);
+	it(
+		'errors on mutating tracked value inside #ripple.untrack() in computed #ripple.track() evaluation',
+		() => {
+			component Basic() {
+				let count = #ripple.track(0);
+
+				const doubled = #ripple.track(() => {
+					try {
+						#ripple.untrack(() => {
+							@count *= 2;
+						});
+					} catch (e) {
+						error = (e as Error).message;
+					}
+				});
 
-			const doubled = track(() => {
-				try {
-					untrack(() => {
-						@count *= 2;
-					});
-				} catch (e) {
-					error = (e as Error).message;
-				}
-			});
+				<p>{@doubled}</p>
+			}
 
-			<p>{@doubled}</p>
-		}
+			render(Basic);
 
-		render(Basic);
+			expect(error).toBe(
+				'Assignments or updates to tracked values are not allowed during computed "#ripple.track(() => ...)" evaluation',
+			);
+		},
+	);
 
-		expect(error).toBe(
-			'Assignments or updates to tracked values are not allowed during computed "track(() => ...)" evaluation',
-		);
-	});
-
-	it('errors on mutating a tracked variable in track() getter', () => {
+	it('errors on mutating a tracked variable in #ripple.track() getter', () => {
 		component Basic() {
-			let count = track(0);
+			let count = #ripple.track(0);
 
-			const doubled = track(0, (value) => {
+			const doubled = #ripple.track(0, (value) => {
 				try {
 					@count += 1;
 				} catch (e) {
@@ -154,7 +157,7 @@ describe('basic client > errors', () => {
 		render(Basic);
 
 		expect(error).toBe(
-			'Assignments or updates to tracked values are not allowed during computed "track(() => ...)" evaluation',
+			'Assignments or updates to tracked values are not allowed during computed "#ripple.track(() => ...)" evaluation',
 		);
 	});
 
@@ -239,4 +242,16 @@ describe('basic client > errors', () => {
 			compile(code, 'test.ripple');
 		}).not.toThrow();
 	});
+
+	it('should throw error for variables using the reserved _$_ prefix', () => {
+		const code = `
+			export default component App() {
+				const _$_test = 'hello';
+				<div>{_$_test}</div>
+			}
+		`;
+		expect(() => {
+			compile(code, 'test.ripple');
+		}).toThrow('identifiers starting with "_$_" are reserved');
+	});
 });

package/tests/client/basic/basic.events.test.ripple

@@ -1,11 +1,11 @@
 import { describe, it, expect } from 'vitest';
-import { track, flushSync } from 'ripple';
+import { flushSync } from 'ripple';
 
 describe('basic client > events', () => {
 	it('renders with different event types', () => {
 		component Basic() {
-			let focusCount = track(0);
-			let clickCount = track(0);
+			let focusCount = #ripple.track(0);
+			let clickCount = #ripple.track(0);
 
 			<button
 				onFocus={() => {
@@ -38,8 +38,8 @@ describe('basic client > events', () => {
 
 	it('renders with capture events', () => {
 		component Basic() {
-			let captureClicks = track(0);
-			let bubbleClicks = track(0);
+			let captureClicks = #ripple.track(0);
+			let bubbleClicks = #ripple.track(0);
 
 			<div
 				onClick={{
@@ -76,7 +76,7 @@ describe('basic client > events', () => {
 
 	it('renders with event listeners in spread props', () => {
 		component Basic() {
-			let count = track(0);
+			let count = #ripple.track(0);
 
 			const minus = {
 				onClick() {
@@ -125,8 +125,8 @@ describe('basic client > events', () => {
 
 	it('handles both delegated and non-delegated events in spread props', () => {
 		component Basic() {
-			let clickCount = track(0);
-			let focusCount = track(0);
+			let clickCount = #ripple.track(0);
+			let focusCount = #ripple.track(0);
 
 			const mixedHandler = {
 				onClick() {
@@ -168,9 +168,9 @@ describe('basic client > events', () => {
 
 	it('renders with complex event handling and state updates', () => {
 		component Basic() {
-			let counter = track(0);
-			let history = track<string[]>([]);
-			let isEven = track(true);
+			let counter = #ripple.track(0);
+			let history = #ripple.track<string[]>([]);
+			let isEven = #ripple.track(true);
 
 			const handleIncrement = () => {
 				@counter++;

package/tests/client/basic/basic.get-set.test.ripple

@@ -1,9 +1,9 @@
-import { track, flushSync, get, set, effect, untrack } from 'ripple';
+import { flushSync, get, set } from 'ripple';
 
 describe('basic client > get/set functions', () => {
 	it('gets tracked value', () => {
 		component Test() {
-			let count = track(0);
+			let count = #ripple.track(0);
 
 			<div>{get(count)}</div>
 		}
@@ -16,7 +16,7 @@ describe('basic client > get/set functions', () => {
 
 	it('gets tracked value after mutation', () => {
 		component Test() {
-			let count = track(0);
+			let count = #ripple.track(0);
 
 			<p>{get(count)}</p>
 			<button onClick={() => @count++}>{'increment'}</button>
@@ -36,7 +36,7 @@ describe('basic client > get/set functions', () => {
 
 	it('gets tracked value after multiple mutations', () => {
 		component Test() {
-			let count = track(0);
+			let count = #ripple.track(0);
 
 			<p>{get(count)}</p>
 			<button
@@ -64,7 +64,7 @@ describe('basic client > get/set functions', () => {
 
 	it('sets tracked value', () => {
 		component Test() {
-			let count = track(0);
+			let count = #ripple.track(0);
 
 			<p>{get(count)}</p>
 			<button onClick={() => set(count, 10)}>{'set to 10'}</button>
@@ -84,7 +84,7 @@ describe('basic client > get/set functions', () => {
 
 	it('sets tracked value multiple times', () => {
 		component Test() {
-			let count = track(0);
+			let count = #ripple.track(0);
 
 			<p>{get(count)}</p>
 			<button
@@ -112,7 +112,7 @@ describe('basic client > get/set functions', () => {
 
 	it('sets tracked value based on previous value', () => {
 		component Test() {
-			let count = track(0);
+			let count = #ripple.track(0);
 
 			<p>{get(count)}</p>
 			<button onClick={() => set(count, get(count) + 10)}>{'add 10'}</button>
@@ -138,7 +138,7 @@ describe('basic client > get/set functions', () => {
 
 	it('sets tracked value multiple times based on previous value', () => {
 		component Test() {
-			let count = track(0);
+			let count = #ripple.track(0);
 
 			<p>{get(count)}</p>
 			<button
@@ -172,7 +172,7 @@ describe('basic client > get/set functions', () => {
 
 	it('gets value declared outside Ripple component', () => {
 		function store() {
-			return track(0);
+			return #ripple.track(0);
 		}
 
 		component Test() {
@@ -188,7 +188,7 @@ describe('basic client > get/set functions', () => {
 
 	it('sets value declared outside Ripple component', () => {
 		function store() {
-			return track(0);
+			return #ripple.track(0);
 		}
 
 		component Test() {
@@ -212,10 +212,10 @@ describe('basic client > get/set functions', () => {
 
 	it('works with effects', () => {
 		component Test() {
-			let count = track(0);
-			let double = track(0);
+			let count = #ripple.track(0);
+			let double = #ripple.track(0);
 
-			effect(() => {
+			#ripple.effect(() => {
 				set(double, get(count) * 2);
 			});
 
@@ -242,11 +242,11 @@ describe('basic client > get/set functions', () => {
 
 	it('works with effects and untrack', () => {
 		component Test() {
-			let count = track(0);
-			let double = track(0);
+			let count = #ripple.track(0);
+			let double = #ripple.track(0);
 
-			effect(() => {
-				untrack(() => {
+			#ripple.effect(() => {
+				#ripple.untrack(() => {
 					set(double, get(count) * 2);
 				});
 			});
@@ -274,6 +274,6 @@ describe('basic client > get/set functions', () => {
 	});
 
 	it('throws on trying to create tracked Ripple component', () => {
-		expect(() => track(0)).toThrow();
+		expect(() => #ripple.track(0)).toThrow();
 	});
 });

package/tests/client/basic/basic.reactivity.test.ripple

@@ -1,18 +1,19 @@
-import { track, trackSplit, flushSync, effect, untrack } from 'ripple';
+import type { PropsWithChildren, Tracked } from 'ripple';
+import { flushSync } from 'ripple';
 
 describe('basic client > reactivity', () => {
 	it('renders multiple reactive lexical blocks', () => {
 		component Basic() {
 			<div>
 				let obj = {
-					count: track(0),
+					count: #ripple.track(0),
 				};
 
 				<span>{obj.@count}</span>
 			</div>
 			<div>
 				let b = {
-					count: track(0),
+					count: #ripple.track(0),
 				};
 
 				<button
@@ -53,27 +54,27 @@ describe('basic client > reactivity', () => {
 
 			<div>
 				let obj = {
-					count: track(0),
+					count: #ripple.track(0),
 				};
 
-				<span>{obj[@count]}</span>
+				<span>{obj.@[count]}</span>
 			</div>
 			<div>
 				let b = {
-					count: track(0),
+					count: #ripple.track(0),
 				};
 
 				<button
 					onClick={() => {
-						b[@count]--;
+						b.@[count]--;
 					}}
 				>
 					{'-'}
 				</button>
-				<span class="count">{b[@count]}</span>
+				<span class="count">{b.@[count]}</span>
 				<button
 					onClick={() => {
-						b[@count]++;
+						b.@[count]++;
 					}}
 				>
 					{'+'}
@@ -97,7 +98,7 @@ describe('basic client > reactivity', () => {
 
 	it('renders with computed reactive state', () => {
 		component Basic() {
-			let count = track(5);
+			let count = #ripple.track(5);
 
 			<div class="count">{@count}</div>
 			<div class="doubled">{@count * 2}</div>
@@ -134,11 +135,11 @@ describe('basic client > reactivity', () => {
 		let logs: string[] = [];
 
 		component App() {
-			let first = track(0);
-			let second = track(0);
+			let first = #ripple.track(0);
+			let second = #ripple.track(0);
 			const arr = [first, second];
 
-			const total = track(() => arr.reduce((a, b) => a + @b, 0));
+			const total = #ripple.track(() => arr.reduce((a, b) => a + @b, 0));
 
 			<button
 				onClick={() => {
@@ -155,7 +156,7 @@ describe('basic client > reactivity', () => {
 				{'second: ' + @second}
 			</button>
 
-			effect(() => {
+			#ripple.effect(() => {
 				let _arr: number[] = [];
 
 				arr.forEach((item) => {
@@ -165,7 +166,7 @@ describe('basic client > reactivity', () => {
 				logs.push(_arr.join(', '));
 			});
 
-			effect(() => {
+			#ripple.effect(() => {
 				if (arr.map((a) => @a).includes(1)) {
 					logs.push('arr includes 1');
 				}
@@ -210,7 +211,7 @@ describe('basic client > reactivity', () => {
 
 	it('uses track get and set where both mutate value', () => {
 		component App() {
-			let count = track(0, (v) => v + 1, (v) => v * 2);
+			let count = #ripple.track(0, (v) => v + 1, (v) => v * 2);
 
 			<div class="count">{@count}</div>
 			<button
@@ -236,7 +237,7 @@ describe('basic client > reactivity', () => {
 
 	it('uses track get and set where set only mutates value', () => {
 		component App() {
-			let count = track(1, (v) => v, (v) => v * 2);
+			let count = #ripple.track(1, (v) => v, (v) => v * 2);
 
 			<div class="count">{@count}</div>
 			<button
@@ -262,7 +263,7 @@ describe('basic client > reactivity', () => {
 
 	it('uses track get and set where get only mutates value', () => {
 		component App() {
-			let count = track(0, (v) => v + 1, (v) => v);
+			let count = #ripple.track(0, (v) => v + 1, (v) => v);
 
 			<div class="count">{@count}</div>
 			<button
@@ -290,7 +291,7 @@ describe('basic client > reactivity', () => {
 		let logs: number[] = [];
 
 		component App() {
-			let count = track(0, (v) => v, (next, prev) => {
+			let count = #ripple.track(0, (v) => v, (next, prev) => {
 				logs.push(prev, next);
 				return next;
 			});
@@ -313,11 +314,11 @@ describe('basic client > reactivity', () => {
 		expect(logs).toEqual([0, 1]);
 	});
 
-	it('doesn\'t error on mutating a tracked variable in track() setter', () => {
+	it('doesn\'t error on mutating a tracked variable in #ripple.track() setter', () => {
 		component Basic() {
-			let count = track(0);
+			let count = #ripple.track(0);
 
-			const doubled = track(0, undefined, (value) => {
+			const doubled = #ripple.track(0, undefined, (value) => {
 				@count += value;
 				return value;
 			});
@@ -334,9 +335,9 @@ describe('basic client > reactivity', () => {
 		let state: { count?: number } = {};
 
 		component Basic() {
-			let count = track(0);
+			let count = #ripple.track(0);
 
-			effect(() => {
+			#ripple.effect(() => {
 				state.count = @count;
 			});
 		}
@@ -358,10 +359,10 @@ describe('basic client > reactivity', () => {
 		} = {};
 
 		component Basic() {
-			let count = track(5);
+			let count = #ripple.track(5);
 
-			effect(() => {
-				untrack(() => {
+			#ripple.effect(() => {
+				#ripple.untrack(() => {
 					state.initialValue = @count;
 					state.preIncrement = ++@count;
 					state.postIncrement = @count++;
@@ -386,10 +387,10 @@ describe('basic client > reactivity', () => {
 	describe('track/trackSplit APIs', () => {
 		it('errors on invalid value as null for track with trackSplit', () => {
 			component App() {
-				let message = track('');
+				let message = #ripple.track('');
 
 				try {
-					const [a, b, rest] = trackSplit(null, ['a', 'b']);
+					const [a, b, rest] = #ripple.trackSplit(null, ['a', 'b']);
 				} catch (e) {
 					@message = (e as Error).message;
 				}
@@ -405,10 +406,10 @@ describe('basic client > reactivity', () => {
 
 		it('errors on invalid value as array for track with trackSplit', () => {
 			component App() {
-				let message = track('');
+				let message = #ripple.track('');
 
 				try {
-					const [a, b, rest] = trackSplit([1, 2, 3], ['a', 'b']);
+					const [a, b, rest] = #ripple.trackSplit([1, 2, 3], ['a', 'b']);
 				} catch (e) {
 					@message = (e as Error).message;
 				}
@@ -424,11 +425,11 @@ describe('basic client > reactivity', () => {
 
 		it('errors on invalid value as tracked for track with trackSplit', () => {
 			component App() {
-				const t = track({ a: 1, b: 2, c: 3 });
-				let message = track('');
+				const t = #ripple.track({ a: 1, b: 2, c: 3 });
+				let message = #ripple.track('');
 
 				try {
-					const [a, b, rest] = trackSplit(t, ['a', 'b']);
+					const [a, b, rest] = #ripple.trackSplit(t, ['a', 'b']);
 				} catch (e) {
 					@message = (e as Error).message;
 				}
@@ -444,7 +445,7 @@ describe('basic client > reactivity', () => {
 
 		it('returns undefined for non-existent props in track with trackSplit', () => {
 			component App() {
-				const [a, b, rest] = trackSplit({ a: 1, c: 1 }, ['a', 'b']);
+				const [a, b, rest] = #ripple.trackSplit({ a: 1, c: 1 }, ['a', 'b']);
 
 				<pre>{@a}</pre>
 				<pre>{String(@b)}</pre>
@@ -464,8 +465,8 @@ describe('basic client > reactivity', () => {
 
 		it('returns the same tracked object if plain track is called with a tracked object', () => {
 			component App() {
-				const t = track({ a: 1, b: 2, c: 3 });
-				const doublet = track(t);
+				const t = #ripple.track({ a: 1, b: 2, c: 3 });
+				const doublet = #ripple.track(t);
 
 				<pre>{t === doublet}</pre>
 			}
@@ -480,8 +481,8 @@ describe('basic client > reactivity', () => {
 			let logs: string[] = [];
 
 			component App() {
-				let count = track(0);
-				let name = track('Click Me');
+				let count = #ripple.track(0);
+				let name = #ripple.track('Click Me');
 
 				function buttonRef(el: HTMLButtonElement) {
 					logs.push('ref called');
@@ -493,7 +494,7 @@ describe('basic client > reactivity', () => {
 				<Child
 					class="my-button"
 					onClick={() => @name === 'Click Me' ? @name = 'Clicked' : @name = 'Click Me'}
-					{@count}
+					{count}
 					{ref buttonRef}
 				>
 					{@name}
@@ -502,8 +503,12 @@ describe('basic client > reactivity', () => {
 				<button onClick={() => @count++}>{'Increment Count'}</button>
 			}
 
-			component Child(props: PropsWithChildren<{ count: Tracked<number> }>) {
-				const [children, count, rest] = trackSplit(props, ['children', 'count']);
+			component Child(props: PropsWithChildren<{
+				count: Tracked<number>;
+				class: string;
+				onClick: () => void;
+			}>) {
+				const [children, count, rest] = #ripple.trackSplit(props, ['children', 'count']);
 
 				if (@count < 2) {
 					<button {...@rest}>