ripple 0.3.2 → 0.3.4

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

@@ -1,5 +1,5 @@
 import { describe, it, expect } from 'vitest';
-import { flushSync, type RippleArray } from 'ripple';
+import { RippleArray, RippleObject, flushSync, track } from 'ripple';
 
 describe('basic client > attribute rendering', () => {
 	it('render static attributes', () => {
@@ -14,7 +14,7 @@ describe('basic client > attribute rendering', () => {
 
 	it('render dynamic class attribute', () => {
 		component Basic() {
-			let active = #ripple.track(false);
+			let active = track(false);
 
 			<button
 				onClick={() => {
@@ -98,7 +98,7 @@ describe('basic client > attribute rendering', () => {
 
 	it('render dynamic class object', () => {
 		component Basic() {
-			let active = #ripple.track(false);
+			let active = track(false);
 
 			<button
 				onClick={() => {
@@ -141,7 +141,7 @@ describe('basic client > attribute rendering', () => {
 
 	it('applies scoped ripple class to multiple elements with dynamic class expressions', () => {
 		component Basic() {
-			let selected = #ripple.track(1);
+			let selected = track(1);
 
 			<div class={@selected === 0 ? 'selected' : ''}>{`div 1`}</div>
 			<div class={@selected === 0 ? 'selected' : ''}>{`div 2`}</div>
@@ -170,7 +170,7 @@ describe('basic client > attribute rendering', () => {
 
 	it('render dynamic id attribute', () => {
 		component Basic() {
-			let count = #ripple.track(0);
+			let count = track(0);
 
 			<button
 				onClick={() => {
@@ -202,7 +202,7 @@ describe('basic client > attribute rendering', () => {
 
 	it('render dynamic style attribute', () => {
 		component Basic() {
-			let color = #ripple.track('red');
+			let color = track('red');
 
 			<button
 				onClick={() => {
@@ -231,7 +231,7 @@ describe('basic client > attribute rendering', () => {
 
 	it('render style attribute as dynamic object', () => {
 		component Basic() {
-			let color = #ripple.track('red');
+			let color = track('red');
 
 			<button
 				onClick={() => {
@@ -260,7 +260,7 @@ describe('basic client > attribute rendering', () => {
 
 	it('render tracked variable as style attribute', () => {
 		component Basic() {
-			let style = #ripple.track({ color: 'red', fontWeight: 'bold' });
+			let style = track({ color: 'red', fontWeight: 'bold' });
 
 			function toggleColor() {
 				@style = { ...@style, color: @style.color === 'red' ? 'blue' : 'red' };
@@ -287,7 +287,7 @@ describe('basic client > attribute rendering', () => {
 
 	it('render tracked object as style attribute', () => {
 		component Basic() {
-			let style = #ripple{ color: 'red', fontWeight: 'bold' };
+			let style = new RippleObject({ color: 'red', fontWeight: 'bold' });
 
 			function toggleColor() {
 				style.color = style.color === 'red' ? 'blue' : 'red';
@@ -360,8 +360,8 @@ describe('basic client > attribute rendering', () => {
 
 	it('render dynamic boolean attributes', () => {
 		component Basic() {
-			let disabled = #ripple.track(false);
-			let checked = #ripple.track(false);
+			let disabled = track(false);
+			let checked = track(false);
 
 			<button
 				onClick={() => {
@@ -391,8 +391,8 @@ describe('basic client > attribute rendering', () => {
 
 	it('render multiple dynamic attributes', () => {
 		component Basic() {
-			let theme = #ripple.track('light');
-			let size = #ripple.track('medium');
+			let theme = track('light');
+			let size = track('medium');
 
 			<button
 				onClick={() => {
@@ -426,8 +426,8 @@ describe('basic client > attribute rendering', () => {
 
 	it('render conditional attributes', () => {
 		component Basic() {
-			let showTitle = #ripple.track(false);
-			let showAria = #ripple.track(false);
+			let showTitle = track(false);
+			let showAria = track(false);
 
 			<button
 				onClick={() => {
@@ -468,7 +468,7 @@ describe('basic client > attribute rendering', () => {
 
 	it('render spread attributes', () => {
 		component Basic() {
-			let attrs = #ripple.track<TestAttributes>(
+			let attrs = track<TestAttributes>(
 				{
 					class: 'initial',
 					id: 'test-1',
@@ -508,12 +508,12 @@ describe('basic client > attribute rendering', () => {
 
 	it('renders with reactive attributes with nested reactive attributes', () => {
 		component App() {
-			let value = #ripple.track('parent-class');
+			let value = track('parent-class');
 
 			<p class={@value}>{'Colored parent value'}</p>
 
 			<div>
-				let nested = #ripple.track('nested-class');
+				let nested = track('nested-class');
 
 				<p class={@nested}>{'Colored nested value'}</p>
 			</div>
@@ -556,8 +556,8 @@ describe('basic client > attribute rendering', () => {
 
 	it('handles reactive event handler changes', () => {
 		component Basic() {
-			let count = #ripple.track(0);
-			let mode = #ripple.track<'increment' | 'decrement'>('increment');
+			let count = track(0);
+			let mode = track<'increment' | 'decrement'>('increment');
 
 			const incrementHandler = () => {
 				@count++;
@@ -613,7 +613,7 @@ describe('basic client > attribute rendering', () => {
 
 	it('handles events with capture option', () => {
 		component Basic() {
-			let captureOrder: RippleArray<string> = #ripple[];
+			let captureOrder: RippleArray<string> = new RippleArray();
 
 			const handleCaptureClick = {
 				handleEvent() {
@@ -647,7 +647,7 @@ describe('basic client > attribute rendering', () => {
 
 	it('handles events with Capture suffix in the name', () => {
 		component Basic() {
-			let captureOrder: RippleArray<string> = #ripple[];
+			let captureOrder: RippleArray<string> = new RippleArray();
 
 			const handleCaptureClick = () => {
 				captureOrder.push('capture');
@@ -678,7 +678,7 @@ describe('basic client > attribute rendering', () => {
 
 	it('handles custom events with customName option', () => {
 		component Basic() {
-			let customEventCount = #ripple.track(0);
+			let customEventCount = track(0);
 
 			const handleCustom = {
 				handleEvent(event: CustomEvent) {
@@ -713,8 +713,8 @@ describe('basic client > attribute rendering', () => {
 
 	it('handles events with delegated: false option to bypass delegation', () => {
 		component Basic() {
-			let delegatedCount = #ripple.track(0);
-			let nonDelegatedCount = #ripple.track(0);
+			let delegatedCount = track(0);
+			let nonDelegatedCount = track(0);
 
 			const delegatedHandler = () => {
 				@delegatedCount++;
@@ -827,8 +827,8 @@ describe('basic client > attribute rendering', () => {
 
 	it('handles events defined as function directly vs as object', () => {
 		component Basic() {
-			let functionCount = #ripple.track(0);
-			let objectCount = #ripple.track(0);
+			let functionCount = track(0);
+			let objectCount = track(0);
 
 			const functionHandler = () => {
 				@functionCount++;
@@ -880,8 +880,8 @@ describe('basic client > attribute rendering', () => {
 
 	it('handles passive event option', () => {
 		component Basic() {
-			let passiveDefaultPrevented = #ripple.track<boolean | null>(null);
-			let nonPassiveDefaultPrevented = #ripple.track<boolean | null>(null);
+			let passiveDefaultPrevented = track<boolean | null>(null);
+			let nonPassiveDefaultPrevented = track<boolean | null>(null);
 
 			const passiveHandler = {
 				handleEvent(event: Event) {
@@ -945,8 +945,8 @@ describe('basic client > attribute rendering', () => {
 
 	it('handles once option to fire event only once', () => {
 		component Basic() {
-			let onceCount = #ripple.track(0);
-			let regularCount = #ripple.track(0);
+			let onceCount = track(0);
+			let regularCount = track(0);
 
 			const onceHandler = {
 				handleEvent() {

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

@@ -1,10 +1,10 @@
-import { flushSync } from 'ripple';
+import { RippleArray, flushSync, track } from 'ripple';
 import { TRACKED_ARRAY } from '../../../src/runtime/internal/client/constants.js';
 
 describe('basic client > collections', () => {
 	it('renders with simple reactive objects', () => {
 		component Basic() {
-			let user = #ripple.track(
+			let user = track(
 				{
 					name: 'John',
 					age: 25,
@@ -40,10 +40,10 @@ describe('basic client > collections', () => {
 
 	it('renders with nested reactive objects', () => {
 		component Basic() {
-			let user = #ripple.track(
+			let user = track(
 				{
-					name: #ripple.track('John'),
-					age: #ripple.track(25),
+					name: track('John'),
+					age: track(25),
 				},
 			);
 
@@ -77,7 +77,7 @@ describe('basic client > collections', () => {
 
 	it('works as a reactive RippleArray when constructed using # syntactic sugar', () => {
 		component App() {
-			const array = #ripple[1, 2, 3];
+			const array = new RippleArray(1, 2, 3);
 
 			<pre>{String(array[3])}</pre>
 			<pre>{array[0]}</pre>

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

@@ -6,7 +6,7 @@ import type {
 	Component,
 	PropsWithChildrenOptional,
 } from 'ripple';
-import { flushSync } from 'ripple';
+import { flushSync, track } from 'ripple';
 
 describe('basic client > components & composition', () => {
 	it('renders with component composition and children', () => {
@@ -69,7 +69,7 @@ describe('basic client > components & composition', () => {
 		}
 
 		component Basic() {
-			let test = #ripple.track(false);
+			let test = track(false);
 			<Card>
 				component test() {
 					<p>{'Card content here'}</p>
@@ -134,7 +134,7 @@ describe('basic client > components & composition', () => {
 		}
 
 		component Basic() {
-			let clicked = #ripple.track(false);
+			let clicked = track(false);
 
 			<Card
 				title="Test Card"
@@ -175,8 +175,8 @@ describe('basic client > components & composition', () => {
 		}
 
 		component Basic() {
-			let message = #ripple.track('Hello');
-			let number = #ripple.track(1);
+			let message = track('Hello');
+			let number = track(1);
 
 			<ChildComponent text={message} count={number} />
 			<button
@@ -214,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 = #ripple.track(false);
+			let hasError = track(false);
 			const obj: {
 				count: Tracked<number>;
 				increment: () => void;
 				[key: symbol]: () => void;
 				arr: Array<() => void>;
 			} = {
-				count: #ripple.track(0),
+				count: track(0),
 				increment() {
 					this.@count++;
 				},
@@ -402,7 +402,7 @@ describe('basic client > components & composition', () => {
 		}
 
 		component App() {
-			let Content = #ripple.track(() => Noop);
+			let Content = track(() => Noop);
 			<@Content />
 
 			<button onClick={() => (@Content = Op)}>{'Show Op'}</button>

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

@@ -1,11 +1,11 @@
-import { flushSync } from 'ripple';
+import { flushSync, track, untrack } from 'ripple';
 import { compile } from 'ripple/compiler';
 
 describe('basic client > errors', () => {
 	it('renders with error handling simulation', () => {
 		component Basic() {
-			let hasError = #ripple.track(false);
-			let errorMessage = #ripple.track('');
+			let hasError = track(false);
+			let errorMessage = track('');
 
 			const triggerError = () => {
 				try {
@@ -89,11 +89,11 @@ describe('basic client > errors', () => {
 		);
 	});
 
-	it('errors on mutating tracked value inside computed #ripple.track() evaluation', () => {
+	it('errors on mutating tracked value inside computed track() evaluation', () => {
 		component Basic() {
-			let count = #ripple.track(0);
+			let count = track(0);
 
-			const doubled = #ripple.track(() => {
+			const doubled = track(() => {
 				try {
 					@count *= 2;
 				} catch (e) {
@@ -107,42 +107,39 @@ describe('basic client > errors', () => {
 		render(Basic);
 
 		expect(error).toBe(
-			'Assignments or updates to tracked values are not allowed during computed "#ripple.track(() => ...)" evaluation',
+			'Assignments or updates to tracked values are not allowed during computed "track(() => ...)" evaluation',
 		);
 	});
 
-	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;
-					}
-				});
+	it('errors on mutating tracked value inside untrack() in computed track() evaluation', () => {
+		component Basic() {
+			let count = track(0);
 
-				<p>{@doubled}</p>
-			}
+			const doubled = track(() => {
+				try {
+					untrack(() => {
+						@count *= 2;
+					});
+				} catch (e) {
+					error = (e as Error).message;
+				}
+			});
 
-			render(Basic);
+			<p>{@doubled}</p>
+		}
+
+		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 #ripple.track() getter', () => {
+	it('errors on mutating a tracked variable in track() getter', () => {
 		component Basic() {
-			let count = #ripple.track(0);
+			let count = track(0);
 
-			const doubled = #ripple.track(0, (value) => {
+			const doubled = track(0, (value) => {
 				try {
 					@count += 1;
 				} catch (e) {
@@ -157,7 +154,7 @@ describe('basic client > errors', () => {
 		render(Basic);
 
 		expect(error).toBe(
-			'Assignments or updates to tracked values are not allowed during computed "#ripple.track(() => ...)" evaluation',
+			'Assignments or updates to tracked values are not allowed during computed "track(() => ...)" evaluation',
 		);
 	});
 

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

@@ -1,11 +1,11 @@
 import { describe, it, expect } from 'vitest';
-import { flushSync } from 'ripple';
+import { flushSync, track } from 'ripple';
 
 describe('basic client > events', () => {
 	it('renders with different event types', () => {
 		component Basic() {
-			let focusCount = #ripple.track(0);
-			let clickCount = #ripple.track(0);
+			let focusCount = track(0);
+			let clickCount = track(0);
 
 			<button
 				onFocus={() => {
@@ -38,8 +38,8 @@ describe('basic client > events', () => {
 
 	it('renders with capture events', () => {
 		component Basic() {
-			let captureClicks = #ripple.track(0);
-			let bubbleClicks = #ripple.track(0);
+			let captureClicks = track(0);
+			let bubbleClicks = track(0);
 
 			<div
 				onClick={{
@@ -76,7 +76,7 @@ describe('basic client > events', () => {
 
 	it('renders with event listeners in spread props', () => {
 		component Basic() {
-			let count = #ripple.track(0);
+			let count = 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 = #ripple.track(0);
-			let focusCount = #ripple.track(0);
+			let clickCount = track(0);
+			let focusCount = 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 = #ripple.track(0);
-			let history = #ripple.track<string[]>([]);
-			let isEven = #ripple.track(true);
+			let counter = track(0);
+			let history = track<string[]>([]);
+			let isEven = track(true);
 
 			const handleIncrement = () => {
 				@counter++;

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

@@ -1,9 +1,9 @@
-import { flushSync, get, set } from 'ripple';
+import { effect, flushSync, get, set, track, untrack } from 'ripple';
 
 describe('basic client > get/set functions', () => {
 	it('gets tracked value', () => {
 		component Test() {
-			let count = #ripple.track(0);
+			let count = 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 = #ripple.track(0);
+			let count = 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 = #ripple.track(0);
+			let count = 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 = #ripple.track(0);
+			let count = 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 = #ripple.track(0);
+			let count = 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 = #ripple.track(0);
+			let count = 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 = #ripple.track(0);
+			let count = 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 #ripple.track(0);
+			return track(0);
 		}
 
 		component Test() {
@@ -188,7 +188,7 @@ describe('basic client > get/set functions', () => {
 
 	it('sets value declared outside Ripple component', () => {
 		function store() {
-			return #ripple.track(0);
+			return track(0);
 		}
 
 		component Test() {
@@ -212,10 +212,10 @@ describe('basic client > get/set functions', () => {
 
 	it('works with effects', () => {
 		component Test() {
-			let count = #ripple.track(0);
-			let double = #ripple.track(0);
+			let count = track(0);
+			let double = track(0);
 
-			#ripple.effect(() => {
+			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 = #ripple.track(0);
-			let double = #ripple.track(0);
+			let count = track(0);
+			let double = track(0);
 
-			#ripple.effect(() => {
-				#ripple.untrack(() => {
+			effect(() => {
+				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(() => #ripple.track(0)).toThrow();
+		expect(() => track(0)).toThrow();
 	});
 });