ripple 0.3.128 → 0.4.0

package/tests/client/boxed-locals.test.tsrx

@@ -0,0 +1,452 @@
+import { describe, it, expect } from 'vitest';
+import { flushSync, track, trackAsync } from 'ripple';
+
+// A plain `let` that is written after its declaration (reassigned in the
+// source, or assigned by a `ref` setter) and read by template code is
+// compiled to a `{ v }` box, so the module-level functions the compiler
+// hoists (`@if` and `@switch` conditions and branches, render blocks) share
+// the variable with the component exactly as a closure would. None of these
+// variables is reactive: the update is always triggered by a tracked value,
+// and the box only has to make sure the hoisted code sees the latest value.
+
+describe('boxed locals', () => {
+	it('a reassigned let read by an @if condition is current on re-evaluation', () => {
+		let disable: () => void = () => {};
+		let bump: () => void = () => {};
+
+		function App() @{
+			const count = track(0);
+			let enabled = true;
+			disable = () => {
+				enabled = false;
+			};
+			bump = () => {
+				count.value++;
+			};
+			@if (enabled && count.value > 0) {
+				<span>on</span>
+			} @else {
+				<span>off</span>
+			}
+		}
+
+		render(App);
+		const text = () => container.querySelector('span')?.textContent;
+		expect(text()).toBe('off');
+
+		bump();
+		flushSync();
+		expect(text()).toBe('on');
+
+		disable();
+		bump();
+		flushSync();
+		expect(text()).toBe('off');
+	});
+
+	it('a reassigned let read inside an @if branch is current when the branch renders', () => {
+		let rename: () => void = () => {};
+		let toggle: () => void = () => {};
+
+		function App() @{
+			const show = track(false);
+			let title = 'first';
+			rename = () => {
+				title = 'second';
+			};
+			toggle = () => {
+				show.value = !show.value;
+			};
+			@if (show.value) {
+				<p>{title}</p>
+			}
+		}
+
+		render(App);
+		expect(container.querySelector('p')).toBeNull();
+
+		rename();
+		toggle();
+		flushSync();
+		expect(container.querySelector('p')?.textContent).toBe('second');
+	});
+
+	it('a reassigned let read by a text expression is current on re-evaluation', () => {
+		let rename: () => void = () => {};
+		let bump: () => void = () => {};
+
+		function App() @{
+			const count = track(0);
+			let unit = 'ms';
+			rename = () => {
+				unit = 's';
+			};
+			bump = () => {
+				count.value++;
+			};
+			<p>{count.value + unit}</p>
+		}
+
+		render(App);
+		const text = () => container.querySelector('p')?.textContent;
+		expect(text()).toBe('0ms');
+
+		rename();
+		bump();
+		flushSync();
+		expect(text()).toBe('1s');
+	});
+
+	it(
+		'a let written by a handler inside a hoisted @if branch updates the component variable',
+		() => {
+			let read: () => number = () => -1;
+
+			function App() @{
+				const show = track(true);
+				const tick = track(0);
+				let clicks = 0;
+				read = () => clicks;
+				@if (show.value) {
+					<button onClick={() => clicks++}>{'hit ' + tick.value}</button>
+				}
+			}
+
+			render(App);
+			expect(read()).toBe(0);
+
+			container.querySelector('button')?.click();
+			container.querySelector('button')?.click();
+			expect(read()).toBe(2);
+		},
+	);
+
+	it('a let assigned by a ref inside a hoisted @if branch is the element, then null', () => {
+		let div: HTMLDivElement | null | undefined;
+		let hide: () => void = () => {};
+
+		function App() @{
+			const show = track(true);
+			const label = track('a');
+			hide = () => {
+				show.value = false;
+			};
+			@if (show.value) {
+				<div ref={div}>{label.value}</div>
+			}
+		}
+
+		render(App);
+		flushSync();
+		expect(div).toBeInstanceOf(HTMLDivElement);
+
+		hide();
+		flushSync();
+		expect(div).toBeNull();
+	});
+
+	it('supports compound assignment and update expressions on a boxed let', () => {
+		let step: () => void = () => {};
+		let bump: () => void = () => {};
+
+		function App() @{
+			const count = track(0);
+			let base = 10;
+			step = () => {
+				base += 5;
+				base++;
+				base = base * 2;
+			};
+			bump = () => {
+				count.value++;
+			};
+			<span>{base + count.value}</span>
+		}
+
+		render(App);
+		const text = () => container.querySelector('span')?.textContent;
+		expect(text()).toBe('10');
+
+		step();
+		bump();
+		flushSync();
+		expect(text()).toBe('33');
+	});
+
+	it('boxes a rebound name from a flat destructuring pattern', () => {
+		let rename: () => void = () => {};
+		let bump: () => void = () => {};
+
+		function Names(props: { user: { first: string; last?: string } }) @{
+			const count = track(0);
+			let { first, last = 'none' } = props.user;
+			rename = () => {
+				first = 'renamed';
+			};
+			bump = () => {
+				count.value++;
+			};
+			<span>{first + ' ' + last + ' ' + count.value}</span>
+		}
+
+		function App() @{
+			<Names user={{ first: 'ada' }} />
+		}
+
+		render(App);
+		const text = () => container.querySelector('span')?.textContent;
+		expect(text()).toBe('ada none 0');
+
+		rename();
+		bump();
+		flushSync();
+		expect(text()).toBe('renamed none 1');
+	});
+
+	it('boxes a rebound destructured parameter', () => {
+		let edit: () => void = () => {};
+		let bump: () => void = () => {};
+
+		function Panel({ mode = 'view' }: { mode?: string }) @{
+			const count = track(0);
+			edit = () => {
+				mode = 'edit';
+			};
+			bump = () => {
+				count.value++;
+			};
+			@if (count.value >= 0) {
+				<button>{mode + count.value}</button>
+			}
+		}
+
+		render(Panel);
+		const text = () => container.querySelector('button')?.textContent;
+		expect(text()).toBe('view0');
+
+		edit();
+		bump();
+		flushSync();
+		expect(text()).toBe('edit1');
+	});
+
+	it('boxes a reassigned props parameter', () => {
+		let bump: () => void = () => {};
+
+		function Child(props: { label: string }) @{
+			const count = track(0);
+			bump = () => {
+				count.value++;
+			};
+			props = { ...props, label: props.label + '!' };
+			<span>{props.label + count.value}</span>
+		}
+
+		function App() @{
+			<Child label="hi" />
+		}
+
+		render(App);
+		const text = () => container.querySelector('span')?.textContent;
+		expect(text()).toBe('hi!0');
+
+		bump();
+		flushSync();
+		expect(text()).toBe('hi!1');
+	});
+
+	it('boxes rebound names from nested object and array patterns', () => {
+		let rename: () => void = () => {};
+		let bump: () => void = () => {};
+
+		function Names(props: { user: { first: string; last?: string }; tags: string[] }) @{
+			const count = track(0);
+			let { user: { first, last = 'none' }, tags: [tag] } = props;
+			rename = () => {
+				first = 'renamed';
+				tag = 't2';
+			};
+			bump = () => {
+				count.value++;
+			};
+			<span>{first + ' ' + last + ' ' + tag + count.value}</span>
+		}
+
+		function App() @{
+			<Names user={{ first: 'ada' }} tags={['t1']} />
+		}
+
+		render(App);
+		const text = () => container.querySelector('span')?.textContent;
+		expect(text()).toBe('ada none t10');
+
+		rename();
+		bump();
+		flushSync();
+		expect(text()).toBe('renamed none t21');
+	});
+
+	it('boxes a rebound catch parameter', async () => {
+		let clear: () => void = () => {};
+		let bump: () => void = () => {};
+
+		function Loader() @{
+			const n = track(0);
+			bump = () => {
+				n.value++;
+			};
+			@try {
+				const data = trackAsync(() => Promise.reject(new Error('boom')));
+				<p>{data.value}</p>
+			} @catch (err) {
+				clear = () => {
+					err = null;
+				};
+				<button>{String(err instanceof Error ? err.message : err) + n.value}</button>
+			}
+		}
+
+		render(Loader);
+		await new Promise((resolve) => setTimeout(resolve, 0));
+		flushSync();
+		const text = () => container.querySelector('button')?.textContent;
+		expect(text()).toBe('boom0');
+
+		clear();
+		bump();
+		flushSync();
+		expect(text()).toBe('null1');
+	});
+
+	it('boxes lets written through destructuring and for-of assignment targets', () => {
+		let swap: () => void = () => {};
+		let bump: () => void = () => {};
+
+		function Pair() @{
+			const tick = track(0);
+			let label = 'a';
+			let other = 'x';
+			let last = '';
+			swap = () => {
+				[label] = ['b'];
+				({ other } = { other: 'y' });
+				for (last of ['c', 'd']) {
+					// the loop variable is the boxed let
+				}
+			};
+			bump = () => {
+				tick.value++;
+			};
+			<span>{label + other + last + tick.value}</span>
+		}
+
+		render(Pair);
+		const text = () => container.querySelector('span')?.textContent;
+		expect(text()).toBe('ax0');
+
+		swap();
+		bump();
+		flushSync();
+		expect(text()).toBe('byd1');
+	});
+
+	it('boxes lets written through rest and default destructuring targets', () => {
+		let swap: () => void = () => {};
+		let bump: () => void = () => {};
+
+		function App() @{
+			const tick = track(0);
+			let a = 0;
+			let rest: Record<string, number> = {};
+			let tail: number[] = [];
+			swap = () => {
+				({ a = 5, ...rest } = { rest_x: 7 } as { a?: number; rest_x: number });
+				[a, ...tail] = new Set([1, 2, 3]);
+			};
+			bump = () => {
+				tick.value++;
+			};
+			<span>{a + ':' + (rest.rest_x ?? '-') + ':' + tail.join(',') + ':' + tick.value}</span>
+		}
+
+		render(App);
+		const text = () => container.querySelector('span')?.textContent;
+		expect(text()).toBe('0:-::0');
+
+		swap();
+		bump();
+		flushSync();
+		// The object default applied, the rest collected, and the array rest
+		// consumed the Set through the iterator protocol.
+		expect(text()).toBe('1:7:2,3:1');
+	});
+
+	it('boxes a reassigned function declaration', () => {
+		let swap: () => void = () => {};
+		let bump: () => void = () => {};
+
+		function App() @{
+			const n = track(0);
+			function greet() {
+				return 'hi';
+			}
+			swap = () => {
+				greet = () => 'bye';
+			};
+			bump = () => {
+				n.value++;
+			};
+			<span>{greet() + n.value}</span>
+		}
+
+		render(App);
+		const text = () => container.querySelector('span')?.textContent;
+		expect(text()).toBe('hi0');
+
+		swap();
+		bump();
+		flushSync();
+		expect(text()).toBe('bye1');
+	});
+
+	it('a let declared without an initializer starts as undefined', () => {
+		let assign: () => void = () => {};
+		let bump: () => void = () => {};
+
+		function App() @{
+			const count = track(0);
+			let later: string | undefined;
+			assign = () => {
+				later = 'set';
+			};
+			bump = () => {
+				count.value++;
+			};
+			<span>{String(later) + '/' + count.value}</span>
+		}
+
+		render(App);
+		const text = () => container.querySelector('span')?.textContent;
+		expect(text()).toBe('undefined/0');
+
+		assign();
+		bump();
+		flushSync();
+		expect(text()).toBe('set/1');
+	});
+});
+
+describe('boxing keeps per-iteration bindings', () => {
+	it('does not box a for-loop variable, whose closures see their own iteration', () => {
+		function App() @{
+			const list = [];
+			for (let i = 0; i < 3; i++) {
+				list.push(<span>{i}</span>);
+			}
+			<div>{list}</div>
+		}
+
+		render(App);
+		expect(container.querySelector('div')?.textContent).toBe('012');
+	});
+});

package/tests/client/compiler/__snapshots__/compiler.assignments.test.tsrx.snap

@@ -1,12 +1,12 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`compiler > assignments > compiles tracked values in effect with assignment expression 1`] = `"state.count = lazy.value;"`;
+exports[`compiler > assignments > compiles tracked values in effect with assignment expression 1`] = `"state.count = count.value;"`;
 
 exports[`compiler > assignments > compiles tracked values in effect with update expressions 1`] = `
 "_$_.untrack(() => {
-				state.preIncrement = _$_.update_pre(lazy);
-				state.postIncrement = _$_.update(lazy);
-				state.preDecrement = _$_.update_pre(lazy, -1);
-				state.postDecrement = _$_.update(lazy, -1);
-			});"
+			state.preIncrement = ++count.value;
+			state.postIncrement = count.value++;
+			state.preDecrement = --count.value;
+			state.postDecrement = count.value--;
+		});"
 `;

package/tests/client/compiler/compiler.assignments.test.tsrx

@@ -1,7 +1,7 @@
 import { RippleArray, effect, track, untrack } from 'ripple';
 import { compile } from '@tsrx/ripple';
 
-const EFFECT_BODY_REGEX = /_\$\_\.effect\(\(\) => \{([\s\S]*?)\n\t\t\}\);/;
+const EFFECT_BODY_REGEX = /_\$\_\.effect\(\(\) => \{([\s\S]*?)\n\t\}\);/;
 
 describe('compiler > assignments', () => {
 	it('properly handles JS assignments, reads and updates to array indices', () => {
@@ -105,10 +105,10 @@ describe('compiler > assignments', () => {
 	it('compiles tracked values in effect with assignment expression', () => {
 		const source = `import { track, effect } from 'ripple';
 function App() @{
-	let &[count] = track(0);
+	const count = track(0);
 
 	effect(() => {
-		state.count = count;
+		state.count = count.value;
 	});
 	<></>
 }`;
@@ -120,14 +120,14 @@ function App() @{
 	it('compiles tracked values in effect with update expressions', () => {
 		const source = `import { track, effect, untrack } from 'ripple';
 function App() @{
-	let &[count] = track(5);
+	const count = track(5);
 
 	effect(() => {
 		untrack(() => {
-			state.preIncrement = ++count;
-			state.postIncrement = count++;
-			state.preDecrement = --count;
-			state.postDecrement = count--;
+			state.preIncrement = ++count.value;
+			state.postIncrement = count.value++;
+			state.preDecrement = --count.value;
+			state.postDecrement = count.value--;
 		});
 	});
 	<></>
@@ -137,70 +137,6 @@ function App() @{
 		expect(effect_match?.[1].trim()).toMatchSnapshot();
 	});
 
-	it('compiles unknown lazy array destructuring through lazy array helpers', () => {
-		const source = `import { track } from 'ripple';
-function Child({ tr: &[count, tr] }) @{
-	count++;
-	tr[0]++;
-	<div>{count}</div>
-}
-function App() @{
-	let tracked = track(0);
-	<Child tr={tracked} />
-}`;
-		const { code } = compile(source, 'test.tsrx', { mode: 'client' });
-
-		expect(code).toContain('_$_.lazy_array_get(lazy, 0)');
-		expect(code).toContain('_$_.lazy_array_update(lazy, 0)');
-		expect(code).toContain('_$_.lazy_array_get(lazy, 1)');
-		expect(code).toContain('_$_.lazy_array_update(_$_.lazy_array_get(lazy, 1), 0)');
-		expect(code).not.toContain('lazy[0]');
-		expect(code).not.toContain('lazy[1][0]');
-	});
-
-	it('compiles writes to unknown lazy array index 1 through lazy array helpers', () => {
-		const source = `function Child({ pair: &[first, second] }) @{
-	second = 10;
-	<div>{first}</div>
-		}
-function App() @{
-	<Child pair={[0, 1]} />
-}`;
-		const { code } = compile(source, 'test.tsrx', { mode: 'client' });
-
-		expect(code).toContain('_$_.lazy_array_set(lazy, 10, 1)');
-		expect(code).not.toContain('lazy[1] =');
-	});
-
-	it('does not double-wrap member access on lazy array value bindings', () => {
-		const source = `function Child({ pair: &[first] }) @{
-	let value = first[0];
-	<div>{value}</div>
-		}
-function App() @{
-	<Child pair={[{ 0: 'x' }]} />
-}`;
-		const { code } = compile(source, 'test.tsrx', { mode: 'client' });
-
-		expect(code).toContain('let value = _$_.lazy_array_get(lazy, 0)[0];');
-		expect(code).not.toContain('_$_.lazy_array_get(_$_.lazy_array_get(lazy, 0), 0)');
-	});
-
-	it('throws on indexed access through known tracked lazy destructures', () => {
-		const source = `import { track } from 'ripple';
-function App() @{
-	let &[value, tracked_ref] = track({ 0: 'x' });
-	let nested = value[0];
-	tracked_ref[0] = { 0: 'y' };
-	let next = value[0];
-	<div>{nested}{next}</div>
-}`;
-
-		expect(() => compile(source, 'test.tsrx', { mode: 'client' })).toThrow(
-			/Use \.value or &\[\] lazy destructuring/,
-		);
-	});
-
 	it('throws on known tracked indexed access', () => {
 		const source = `import { track } from 'ripple';
 function App() @{
@@ -213,7 +149,7 @@ function App() @{
 }`;
 
 		expect(() => compile(source, 'test.tsrx', { mode: 'client' })).toThrow(
-			/Use \.value or &\[\] lazy destructuring/,
+			/Accessing a tracked object directly is not allowed/,
 		);
 	});
 });

package/tests/client/compiler/compiler.attributes.test.tsrx

@@ -13,18 +13,18 @@ describe('compiler > attributes', () => {
 
 		const result = compile(source, 'test.tsrx', { mode: 'client' });
 
-		// Should contain properly quoted hyphenated properties and unquoted valid identifiers
-		expect(result.code).toMatch(/'data-scope': "test"/);
-		expect(result.code).toMatch(/'aria-label': "accessible"/);
-		expect(result.code).toMatch(/class: "valid"/);
+		// Hyphenated prop names are quoted keys of the plain props literal.
+		expect(result.code).toContain(`'data-scope': "test"`);
+		expect(result.code).toContain(`'aria-label': "accessible"`);
+		expect(result.code).toContain('class: "valid"');
 	});
 
 	it('generates valid JavaScript for all types of hyphenated attributes', () => {
 		const testCases = [
-			{ attr: 'data-testid="value"', expected: /'data-testid': "value"/ },
-			{ attr: 'aria-label="label"', expected: /'aria-label': "label"/ },
-			{ attr: 'data-custom-attr="custom"', expected: /'data-custom-attr': "custom"/ },
-			{ attr: 'ng-if="condition"', expected: /'ng-if': "condition"/ },
+			{ attr: 'data-testid="value"', expected: `'data-testid': "value"` },
+			{ attr: 'aria-label="label"', expected: `'aria-label': "label"` },
+			{ attr: 'data-custom-attr="custom"', expected: `'data-custom-attr': "custom"` },
+			{ attr: 'ng-if="condition"', expected: `'ng-if': "condition"` },
 		];
 
 		testCases.forEach(({ attr, expected }) => {
@@ -37,7 +37,7 @@ describe('compiler > attributes', () => {
 				}`;
 
 			const result = compile(source, 'test.tsrx', { mode: 'client' });
-			expect(result.code).toMatch(expected);
+			expect(result.code).toContain(expected);
 		});
 	});
 
@@ -60,15 +60,15 @@ describe('compiler > attributes', () => {
 
 		const result = compile(source, 'test.tsrx', { mode: 'client' });
 
-		// Valid identifiers should not be quoted
-		expect(result.code).toMatch(/validProp: "valid"/);
-		expect(result.code).toMatch(/class: "valid"/);
-		expect(result.code).toMatch(/id: "valid"/);
+		// Valid identifiers are plain keys
+		expect(result.code).toContain('validProp: "valid"');
+		expect(result.code).toContain('class: "valid"');
+		expect(result.code).toContain('id: "valid"');
 
-		// Invalid identifiers (with hyphens) should be quoted
-		expect(result.code).toMatch(/'data-invalid': "invalid"/);
-		expect(result.code).toMatch(/'aria-invalid': "invalid"/);
-		expect(result.code).toMatch(/'custom-prop': "invalid"/);
+		// Invalid identifiers (with hyphens) are quoted keys
+		expect(result.code).toContain(`'data-invalid': "invalid"`);
+		expect(result.code).toContain(`'aria-invalid': "invalid"`);
+		expect(result.code).toContain(`'custom-prop': "invalid"`);
 	});
 
 	it('ensures generated code is syntactically valid JavaScript', () => {
@@ -83,17 +83,17 @@ describe('compiler > attributes', () => {
 
 		const result = compile(source, 'test.tsrx', { mode: 'client' });
 
-		// Extract the props object from the generated code and test it's valid JavaScript
-		const match = result.code.match(/_\$_.render_component\(Child,\s*[^,]+,\s*(\{[^}]+\})/);
+		// Extract the props literal from the generated code and test it's valid JavaScript
+		const match = result.code.match(/render_component\(Child, __anchor, (\{[\s\S]*?\})\)/);
 		expect(match).toBeTruthy();
 
-		const propsObject = match?.[1];
+		const literal = match?.[1];
 		expect(() => {
 			// Test that the object literal is syntactically valid
-			new Function(`return ${propsObject}`);
+			new Function(`return ${literal}`);
 		}).not.toThrow();
 
-		// Also verify it contains the expected quoted property
-		expect(propsObject).toMatch(/'data-scope': "test"/);
+		// Also verify it contains the expected quoted key
+		expect(literal).toContain(`'data-scope': "test"`);
 	});
 });