ripple 0.2.216 → 0.3.1

package/tests/client/array/array.static.test.ripple

@@ -1,11 +1,11 @@
-import { flushSync, TrackedArray } from 'ripple';
+import { flushSync, RippleArray } from 'ripple';
 import { MAX_ARRAY_LENGTH } from '../../../src/runtime/internal/client/constants.js';
 
-describe('TrackedArray > static', () => {
+describe('RippleArray > static', () => {
 	it('handles static methods - from and of', () => {
 		component ArrayTest() {
-			let itemsFrom = TrackedArray.from([1, 2, 3], (x: number) => x * 2);
-			let itemsOf = TrackedArray.of(4, 5, 6);
+			let itemsFrom = RippleArray.from([1, 2, 3], (x: number) => x * 2);
+			let itemsOf = RippleArray.of(4, 5, 6);
 
 			<button onClick={() => itemsFrom.push(8)}>{'add to from'}</button>
 			<button onClick={() => itemsOf.push(7)}>{'add to of'}</button>
@@ -35,49 +35,87 @@ describe('TrackedArray > static', () => {
 		expect(container.querySelectorAll('pre')[1].textContent).toBe('[4,5,6,7]');
 	});
 
-	('fromAsync' in Array.prototype ? describe : describe.skip)(
-		'TrackedArray fromAsync',
-		async () => {
-			it('handles static fromAsync method with reactivity', async () => {
-				component Parent() {
-					try {
-						<ArrayTest />
-					} pending {
-						<div>{'Loading placeholder...'}</div>
-					}
+	('fromAsync' in Array.prototype ? describe : describe.skip)('RippleArray fromAsync', async () => {
+		it('handles static fromAsync method with reactivity', async () => {
+			component Parent() {
+				try {
+					<ArrayTest />
+				} pending {
+					<div>{'Loading placeholder...'}</div>
 				}
+			}
 
-				component ArrayTest() {
-					let items = await TrackedArray.fromAsync([1, 2, 3]);
+			component ArrayTest() {
+				let items = await RippleArray.fromAsync([1, 2, 3]);
+
+				<button
+					onClick={() => {
+						if (items) items.push(4);
+					}}
+				>
+					{'add item'}
+				</button>
+
+				<pre>{JSON.stringify(items)}</pre>
+			}
+
+			render(Parent);
 
-					<button
-						onClick={() => {
-							if (items) items.push(4);
-						}}
-					>
-						{'add item'}
-					</button>
+			await new Promise((resolve) => setTimeout(resolve, 0));
+			flushSync();
 
-					<pre>{JSON.stringify(items)}</pre>
+			const addButton = container.querySelector('button');
+
+			expect(container.querySelectorAll('pre')[0].textContent).toBe('[1,2,3]');
+
+			// Test adding an item to the async-created array
+			addButton.click();
+			flushSync();
+
+			expect(container.querySelectorAll('pre')[1].textContent).toBe('[1,2,3,4]');
+		});
+
+		it('handles static fromAsync method with mapping function', async () => {
+			component Parent() {
+				try {
+					<ArrayTest />
+				} pending {
+					<div>{'Loading placeholder...'}</div>
 				}
+			}
 
-				render(Parent);
+			component ArrayTest() {
+				let items = await RippleArray.fromAsync([1, 2, 3], (x: number) => x * 2);
+
+				<button
+					onClick={() => {
+						if (items) items.push(8);
+					}}
+				>
+					{'add item'}
+				</button>
+				<pre>{items ? JSON.stringify(items) : 'Loading...'}</pre>
+			}
 
-				await new Promise((resolve) => setTimeout(resolve, 0));
-				flushSync();
+			render(Parent);
 
-				const addButton = container.querySelector('button');
+			await new Promise((resolve) => setTimeout(resolve, 0));
+			flushSync();
 
-				expect(container.querySelectorAll('pre')[0].textContent).toBe('[1,2,3]');
+			const addButton = container.querySelector('button');
 
-				// Test adding an item to the async-created array
-				addButton.click();
-				flushSync();
+			expect(container.querySelector('pre').textContent).toBe('[2,4,6]');
+
+			addButton.click();
+			flushSync();
 
-				expect(container.querySelectorAll('pre')[1].textContent).toBe('[1,2,3,4]');
-			});
+			expect(container.querySelector('pre').textContent).toBe('[2,4,6,8]');
+		});
 
-			it('handles static fromAsync method with mapping function', async () => {
+		// TODO: Fix this test case, needs some async love around try statements being using in a not template way
+		('fromAsync' in Array.prototype ? it : it.skip)(
+			'handles error in fromAsync method',
+			async () => {
 				component Parent() {
 					try {
 						<ArrayTest />
@@ -87,84 +125,43 @@ describe('TrackedArray > static', () => {
 				}
 
 				component ArrayTest() {
-					let items = await TrackedArray.fromAsync([1, 2, 3], (x: number) => x * 2);
-
-					<button
-						onClick={() => {
-							if (items) items.push(8);
-						}}
-					>
-						{'add item'}
-					</button>
-					<pre>{items ? JSON.stringify(items) : 'Loading...'}</pre>
-				}
-
-				render(Parent);
+					let items: RippleArray<string> | null = null;
+					let error: string | null = null;
 
-				await new Promise((resolve) => setTimeout(resolve, 0));
-				flushSync();
-
-				const addButton = container.querySelector('button');
-
-				expect(container.querySelector('pre').textContent).toBe('[2,4,6]');
-
-				addButton.click();
-				flushSync();
-
-				expect(container.querySelector('pre').textContent).toBe('[2,4,6,8]');
-			});
-
-			// TODO: Fix this test case, needs some async love around try statements being using in a not template way
-			('fromAsync' in Array.prototype ? it : it.skip)(
-				'handles error in fromAsync method',
-				async () => {
-					component Parent() {
-						try {
-							<ArrayTest />
-						} pending {
-							<div>{'Loading placeholder...'}</div>
-						}
+					async function* throwingIterable() {
+						throw new Error('Async error');
 					}
 
-					component ArrayTest() {
-						let items: TrackedArray<string> | null = null;
-						let error: string | null = null;
-
-						async function* throwingIterable() {
-							throw new Error('Async error');
-						}
-
-						try {
-							items = await TrackedArray.fromAsync(throwingIterable());
-							for (const item of items) {
-								<li>{item}</li>
-							}
-						} pending {
-							<div>{'Loading...'}</div>
-						} catch (e) {
-							error = (e as Error).message;
+					try {
+						items = await RippleArray.fromAsync(throwingIterable());
+						for (const item of items) {
+							<li>{item}</li>
 						}
-
-						<pre>{error ? 'Error: ' + error : 'No error'}</pre>
-						<pre>{items ? JSON.stringify(items) : 'No items'}</pre>
+					} pending {
+						<div>{'Loading...'}</div>
+					} catch (e) {
+						error = (e as Error).message;
 					}
 
-					render(Parent);
+					<pre>{error ? 'Error: ' + error : 'No error'}</pre>
+					<pre>{items ? JSON.stringify(items) : 'No items'}</pre>
+				}
+
+				render(Parent);
 
-					await new Promise((resolve) => setTimeout(resolve, 0));
-					flushSync();
+				await new Promise((resolve) => setTimeout(resolve, 0));
+				flushSync();
 
-					expect(container.querySelectorAll('pre')[0].textContent).toBe('Error: Async error');
-					expect(container.querySelectorAll('pre')[1].textContent).toBe('No items');
-				},
-			);
-		},
-	);
+				expect(container.querySelectorAll('pre')[0].textContent).toBe('Error: Async error');
+				expect(container.querySelectorAll('pre')[1].textContent).toBe('No items');
+			},
+		);
+	});
 
-	describe('Creates TrackedArray with a single element', () => {
+	describe('Creates RippleArray with a single element', () => {
 		it('specifies int', () => {
 			component ArrayTest() {
-				let items = new TrackedArray(3);
+				let items = new RippleArray(3);
 				<pre>{JSON.stringify(items)}</pre>
 				<pre>{items.length}</pre>
 			}
@@ -180,7 +177,7 @@ describe('TrackedArray > static', () => {
 				let error = null;
 
 				try {
-					new TrackedArray(MAX_ARRAY_LENGTH + 1);
+					new RippleArray(MAX_ARRAY_LENGTH + 1);
 				} catch (e) {
 					error = (e as Error).message;
 				}
@@ -195,7 +192,7 @@ describe('TrackedArray > static', () => {
 
 		it('specifies int using static from method', () => {
 			component ArrayTest() {
-				let items = TrackedArray.from([4]);
+				let items = RippleArray.from([4]);
 				<pre>{JSON.stringify(items)}</pre>
 				<pre>{items.length}</pre>
 			}
@@ -208,7 +205,7 @@ describe('TrackedArray > static', () => {
 
 		it('specifies int using static of method', () => {
 			component ArrayTest() {
-				let items = TrackedArray.of(5);
+				let items = RippleArray.of(5);
 				<pre>{JSON.stringify(items)}</pre>
 				<pre>{items.length}</pre>
 			}
@@ -231,7 +228,7 @@ describe('TrackedArray > static', () => {
 				}
 
 				component ArrayTest() {
-					const items = await TrackedArray.fromAsync([6]);
+					const items = await RippleArray.fromAsync([6]);
 
 					<pre>{items ? JSON.stringify(items) : 'Loading...'}</pre>
 					<pre>{items ? items.length : ''}</pre>

package/tests/client/array/array.to-methods.test.ripple

@@ -1,14 +1,14 @@
-import { track, flushSync, TrackedArray } from 'ripple';
+import { flushSync, RippleArray } from 'ripple';
 
-describe('TrackedArray > to* methods', () => {
+describe('RippleArray > to* methods', () => {
 	it('handles toReversed method with reactivity', (context) => {
 		if (!('toReversed' in Array.prototype)) {
 			context.skip();
 		}
 
 		component ArrayTest() {
-			let items = new TrackedArray(1, 2, 3, 4);
-			let reversed = track(() => items.toReversed());
+			let items = new RippleArray(1, 2, 3, 4);
+			let reversed = #ripple.track(() => items.toReversed());
 
 			<button onClick={() => items.push(5)}>{'add item'}</button>
 			<pre>{JSON.stringify(items)}</pre>
@@ -37,8 +37,8 @@ describe('TrackedArray > to* methods', () => {
 		}
 
 		component ArrayTest() {
-			let items = new TrackedArray(3, 1, 4, 2);
-			let sorted = track(() => items.toSorted());
+			let items = new RippleArray(3, 1, 4, 2);
+			let sorted = #ripple.track(() => items.toSorted());
 
 			<button onClick={() => items.push(0)}>{'add item'}</button>
 			<pre>{JSON.stringify(items)}</pre>
@@ -67,8 +67,8 @@ describe('TrackedArray > to* methods', () => {
 		}
 
 		component ArrayTest() {
-			let items = new TrackedArray<string | number>(1, 2, 3, 4, 5);
-			let spliced = track(() => items.toSpliced(1, 2, 'a', 'b'));
+			let items = new RippleArray<string | number>(1, 2, 3, 4, 5);
+			let spliced = #ripple.track(() => items.toSpliced(1, 2, 'a', 'b'));
 
 			<button onClick={() => (items[2] = 30)}>{'change item'}</button>
 			<pre>{JSON.stringify(items)}</pre>

package/tests/client/async-suspend.test.ripple

@@ -0,0 +1,94 @@
+import { flushSync } from 'ripple';
+
+describe('async suspense', () => {
+	it('hides child content during re-suspension when tracked dependency changes', async () => {
+		let resolve_fn: (() => void) | null = null;
+
+		component Child({ count }: { count: any }) {
+			await #ripple.track(() => {
+				@count;
+				return new Promise<void>((resolve) => {
+					resolve_fn = resolve;
+				});
+			});
+
+			<div class="child-content">{'child content'}</div>
+		}
+
+		component App() {
+			let count = #ripple.track(0);
+
+			try {
+				<Child {count} />
+			} pending {
+				<div class="pending">{'pending...'}</div>
+			}
+
+			<button onClick={() => @count++}>{'Increment'}</button>
+		}
+
+		render(App);
+
+		// Initial state: should show pending
+		await new Promise((resolve) => setTimeout(resolve, 0));
+		flushSync();
+		expect(container.innerHTML).toContain('pending...');
+		expect(container.innerHTML).not.toContain('child content');
+
+		// Resolve the first promise
+		(resolve_fn as () => void)?.();
+		await new Promise((resolve) => setTimeout(resolve, 0));
+		flushSync();
+
+		// After resolution: should show child content, not pending
+		expect(container.innerHTML).toContain('child content');
+		expect(container.innerHTML).not.toContain('pending...');
+
+		// Now trigger re-suspension by changing count
+		const button = container.querySelector('button');
+		button?.click();
+		flushSync();
+
+		// Wait for microtask to process
+		await new Promise((resolve) => setTimeout(resolve, 0));
+		flushSync();
+
+		// BUG: During re-suspension, we should only see pending, not child content
+		// The child content should be hidden when the new promise is pending
+		expect(container.innerHTML).toContain('pending...');
+		expect(container.innerHTML).not.toContain('child content');
+	});
+
+	it('shows pending UI immediately when child suspends', async () => {
+		component Child() {
+			await new Promise((resolve) => setTimeout(resolve, 50));
+			<div class="child">{'loaded'}</div>
+		}
+
+		component App() {
+			try {
+				<Child />
+			} pending {
+				<div class="pending">{'loading...'}</div>
+			}
+		}
+
+		render(App);
+
+		// Wait for microtask
+		await new Promise((resolve) => setTimeout(resolve, 0));
+		flushSync();
+
+		// Should show pending, not child content
+		expect(container.innerHTML).toContain('loading...');
+		expect(container.innerHTML).not.toContain('loaded');
+
+		// Wait for child to resolve
+		await new Promise((resolve) => setTimeout(resolve, 100));
+		flushSync();
+
+		// Should show child content, not pending
+		expect(container.innerHTML).toContain('loaded');
+		expect(container.innerHTML).not.toContain('loading...');
+	});
+});

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

@@ -1,5 +1,5 @@
 import { describe, it, expect } from 'vitest';
-import { track, flushSync, type TrackedArray } from 'ripple';
+import { flushSync, type RippleArray } 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 = track(false);
+			let active = #ripple.track(false);
 
 			<button
 				onClick={() => {
@@ -98,7 +98,7 @@ describe('basic client > attribute rendering', () => {
 
 	it('render dynamic class object', () => {
 		component Basic() {
-			let active = track(false);
+			let active = #ripple.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 = track(1);
+			let selected = #ripple.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 = track(0);
+			let count = #ripple.track(0);
 
 			<button
 				onClick={() => {
@@ -202,7 +202,7 @@ describe('basic client > attribute rendering', () => {
 
 	it('render dynamic style attribute', () => {
 		component Basic() {
-			let color = track('red');
+			let color = #ripple.track('red');
 
 			<button
 				onClick={() => {
@@ -231,7 +231,7 @@ describe('basic client > attribute rendering', () => {
 
 	it('render style attribute as dynamic object', () => {
 		component Basic() {
-			let color = track('red');
+			let color = #ripple.track('red');
 
 			<button
 				onClick={() => {
@@ -260,7 +260,7 @@ describe('basic client > attribute rendering', () => {
 
 	it('render tracked variable as style attribute', () => {
 		component Basic() {
-			let style = track({ color: 'red', fontWeight: 'bold' });
+			let style = #ripple.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 = #{ color: 'red', fontWeight: 'bold' };
+			let style = #ripple{ 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 = track(false);
-			let checked = track(false);
+			let disabled = #ripple.track(false);
+			let checked = #ripple.track(false);
 
 			<button
 				onClick={() => {
@@ -391,8 +391,8 @@ describe('basic client > attribute rendering', () => {
 
 	it('render multiple dynamic attributes', () => {
 		component Basic() {
-			let theme = track('light');
-			let size = track('medium');
+			let theme = #ripple.track('light');
+			let size = #ripple.track('medium');
 
 			<button
 				onClick={() => {
@@ -426,8 +426,8 @@ describe('basic client > attribute rendering', () => {
 
 	it('render conditional attributes', () => {
 		component Basic() {
-			let showTitle = track(false);
-			let showAria = track(false);
+			let showTitle = #ripple.track(false);
+			let showAria = #ripple.track(false);
 
 			<button
 				onClick={() => {
@@ -468,7 +468,7 @@ describe('basic client > attribute rendering', () => {
 
 	it('render spread attributes', () => {
 		component Basic() {
-			let attrs = track<TestAttributes>(
+			let attrs = #ripple.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 = track('parent-class');
+			let value = #ripple.track('parent-class');
 
 			<p class={@value}>{'Colored parent value'}</p>
 
 			<div>
-				let nested = track('nested-class');
+				let nested = #ripple.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 = track(0);
-			let mode = track<'increment' | 'decrement'>('increment');
+			let count = #ripple.track(0);
+			let mode = #ripple.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: TrackedArray<string> = #[];
+			let captureOrder: RippleArray<string> = #ripple[];
 
 			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: TrackedArray<string> = #[];
+			let captureOrder: RippleArray<string> = #ripple[];
 
 			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 = track(0);
+			let customEventCount = #ripple.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 = track(0);
-			let nonDelegatedCount = track(0);
+			let delegatedCount = #ripple.track(0);
+			let nonDelegatedCount = #ripple.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 = track(0);
-			let objectCount = track(0);
+			let functionCount = #ripple.track(0);
+			let objectCount = #ripple.track(0);
 
 			const functionHandler = () => {
 				@functionCount++;
@@ -880,8 +880,8 @@ describe('basic client > attribute rendering', () => {
 
 	it('handles passive event option', () => {
 		component Basic() {
-			let passiveDefaultPrevented = track<boolean | null>(null);
-			let nonPassiveDefaultPrevented = track<boolean | null>(null);
+			let passiveDefaultPrevented = #ripple.track<boolean | null>(null);
+			let nonPassiveDefaultPrevented = #ripple.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 = track(0);
-			let regularCount = track(0);
+			let onceCount = #ripple.track(0);
+			let regularCount = #ripple.track(0);
 
 			const onceHandler = {
 				handleEvent() {

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

@@ -1,10 +1,10 @@
-import { track, flushSync } from 'ripple';
+import { flushSync } 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 = track(
+			let user = #ripple.track(
 				{
 					name: 'John',
 					age: 25,
@@ -40,10 +40,10 @@ describe('basic client > collections', () => {
 
 	it('renders with nested reactive objects', () => {
 		component Basic() {
-			let user = track(
+			let user = #ripple.track(
 				{
-					name: track('John'),
-					age: track(25),
+					name: #ripple.track('John'),
+					age: #ripple.track(25),
 				},
 			);
 
@@ -75,9 +75,9 @@ describe('basic client > collections', () => {
 		expect(ageDiv.textContent).toBe('30');
 	});
 
-	it('works as a reactive TrackedArray when constructed using # syntactic sugar', () => {
+	it('works as a reactive RippleArray when constructed using # syntactic sugar', () => {
 		component App() {
-			const array = #[1, 2, 3];
+			const array = #ripple[1, 2, 3];
 
 			<pre>{String(array[3])}</pre>
 			<pre>{array[0]}</pre>