ripple 0.3.128 → 0.4.0

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

@@ -196,8 +196,8 @@ export function App() @{
 		const { code } = compile(source, 'primitive-merge.tsrx', { mode: 'client' });
 
 		// One merged text expression — no separate comment-anchored expression.
-		expect(code).toContain('\'label:\' + _$_.with_scope');
-		expect(code).toContain('String(void');
+		// The coercion itself needs no scope; only the user call inside it does.
+		expect(code).toContain('\'label:\' + String(void _$_.with_scope');
 		expect(code).not.toContain('_$_.expression(');
 	});
 
@@ -211,8 +211,10 @@ export function App() @{
 
 		const { code } = compile(source, 'string-merge.tsrx', { mode: 'client' });
 
-		// Already a string: no String(… ?? '') double wrap around it.
-		expect(code).toContain('String(fetchLabel())');
+		// Already a string: no String(… ?? '') double wrap around it, and the
+		// scope wrapper sits on the user call, not on the coercion.
+		expect(code).toContain('String(_$_.with_scope(__prev.___block, fetchLabel))');
+		expect(code).not.toContain('_$_.with_scope(__prev.___block, () => String(');
 		expect(code).not.toContain('String(String(');
 		expect(code).not.toContain('?? \'\'');
 	});
@@ -579,23 +581,6 @@ function App() @{
 		expect(result).toMatch(/value:\s*value\.value/);
 	});
 
-	it('keeps lazy destructuring as plain destructuring in to_ts output', () => {
-		const track_source = `
-import { track } from 'ripple';
-function App() @{
-	let &[value, ...rest] = track(0);
-	const x = value;
-}
-`;
-		const track_result = compile_to_volar_mappings(track_source, 'test.tsrx').code;
-		expect(track_result).toContain('let [value, ...rest] = track(0);');
-		expect(track_result).toContain('const x = value;');
-		expect(track_result).not.toContain('let lazy = track(0)');
-		expect(track_result).not.toContain('.slice(');
-		expect(track_result).not.toContain('_$_.get(');
-		expect(track_result).not.toContain('lazy0');
-	});
-
 	it('lowers native expression values in to_ts output', () => {
 		const source = `
 function App() @{
@@ -827,37 +812,6 @@ export function optionalFn(declRequired: string, declMaybe?: string) {
 		expect_identifier_mapping('declMaybe', 'declMaybe?: string');
 	});
 
-	it('uses tracked fast path for nested lazy params typed as Tracked', () => {
-		const source = `
-import type { Tracked } from 'ripple';
-function use_nested({ value: &[count, tracked] }: { value: Tracked<number> }) {
-	count++;
-	return tracked;
-}
-`;
-		const { code } = compile(source, 'tracked-nested-lazy.tsrx', { mode: 'client' });
-
-		// Nested lazy array should still use tracked tuple fast path from outer annotation.
-		expect(code).toContain('_$_.update(');
-		expect(code).not.toContain('[0]');
-		expect(code).not.toContain('[1]');
-	});
-
-	it('uses tracked fast path for nested lazy params at tuple rest positions', () => {
-		const source = `
-import type { Tracked } from 'ripple';
-function use_tuple_rest({ value: [head, &[count, tracked]] }: { value: [number, ...Tracked<number>[]] }) {
-	count++;
-	return tracked;
-}
-`;
-		const { code } = compile(source, 'tracked-nested-lazy-tuple-rest.tsrx', { mode: 'client' });
-
-		// Tuple rest element access should resolve to Tracked<number>, not Tracked<number>[].
-		expect(code).toContain('_$_.update(');
-		expect(code).not.toContain('[1]');
-	});
-
 	it('preserves generic type args in interface extends for Volar mappings', () => {
 		const source = `
 interface PolymorphicProps<T extends keyof HTMLElementTagNameMap> {
@@ -882,13 +836,13 @@ export function App(props: Props) @{
 		const source = `
 import { track } from 'ripple';
 export function App() @{
-	let &[level] = track(1);
+	const level = track(1);
 
 	<button
 		onClick={() => {
-			if (level === 1) level = 2;
-			else if (level === 2) level = 3;
-			else level = 1;
+			if (level.value === 1) level.value = 2;
+			else if (level.value === 2) level.value = 3;
+			else level.value = 1;
 		}}
 	>
 		{'Toggle'}
@@ -1026,6 +980,7 @@ export function App() @{
 		const result = compile(source, 'test.tsrx', { mode: 'client' }).code;
 
 		// Template children should take precedence - explicit children prop should be removed
+		// The template children win: one `children` key, holding the element.
 		expect((result.match(/children:/g) || []).length).toBe(1);
 		expect(result).toContain('children: _$_.tsrx_element(');
 	});
@@ -1076,10 +1031,10 @@ export function App() @{
 import { track, effect, untrack } from 'ripple';
 
 function App() @{
-	let &[count] = track(0);
+	const count = track(0);
 
 	effect(() => {
-		const snapshot = untrack(() => count);
+		const snapshot = untrack(() => count.value);
 		console.log(snapshot);
 	});
 }
@@ -1275,7 +1230,7 @@ export function App() @{
 		},
 	);
 
-	it('uses spread_props for spreads that may contain children', () => {
+	it('spreads props objects as plain object spreads', () => {
 		const source = `
 function Card(props) @{
 	<div>{props.children}</div>
@@ -1290,7 +1245,7 @@ export function App() @{
 
 		const result = compile(source, 'test.tsrx', { mode: 'client' }).code;
 
-		expect(result).toContain('_$_.spread_props(');
+		expect(result).toContain('_$_.render_component(Card, __anchor, { ...props })');
 	});
 
 	it('reads a less-than at line start in element children as literal text', () => {

package/tests/client/compiler/compiler.tracked-access.test.tsrx

@@ -1,7 +1,6 @@
 import { compile } from '@tsrx/ripple';
 
-const value_message = /Use \.value or &\[\] lazy destructuring/;
-const reference_message = /Use the tracked value directly instead/;
+const value_message = /Accessing a tracked object directly is not allowed, use `\.value`/;
 
 describe('Compiler: Tracked Object Direct Access Checks', () => {
 	it('should error on direct access to __v of a tracked object', () => {
@@ -74,18 +73,6 @@ import { track } from 'ripple';
 		);
 	});
 
-	it('should compile successfully with correct @ syntax access', () => {
-		const code = `
-import { track } from 'ripple';
-            export default function App() @{
-                let &[count] = track(0);
-                console.log(count);
-                <></>
-            }
-        `;
-		expect(() => compile(code, 'test.tsrx')).not.toThrow();
-	});
-
 	it('should compile successfully with correct value access', () => {
 		const code = `
 import { track } from 'ripple';
@@ -156,7 +143,7 @@ import { track } from 'ripple';
                 <></>
             }
         `;
-		expect(() => compile(code, 'test.tsrx')).toThrow(reference_message);
+		expect(() => compile(code, 'test.tsrx')).toThrow(value_message);
 	});
 
 	it('should error on indexed [0] write on a tracked object', () => {
@@ -183,63 +170,49 @@ import { track } from 'ripple';
         `;
 		const result = compile(code, 'test.tsrx', { loose: true });
 
-		expect(result.errors.map((error) => error.message)).toEqual(
-			expect.arrayContaining([
-				expect.stringMatching(value_message),
-				expect.stringMatching(reference_message),
-			]),
-		);
+		expect(result.errors.map((error) => error.message)).toEqual([
+			expect.stringMatching(value_message),
+			expect.stringMatching(value_message),
+		]);
 	});
 
-	it('should error on indexed access through a known tracked lazy ref binding', () => {
-		const code = `
-import { track } from 'ripple';
-            export default function App() @{
-                let &[value, tracked_ref] = track(0);
-                tracked_ref[0]++;
-                <></>
-            }
-        `;
-		expect(() => compile(code, 'test.tsrx')).toThrow(value_message);
-	});
-
-	it('should allow lazy destructuring a tracked value', () => {
+	it('should allow .value read access on a tracked object', () => {
 		const code = `
 import { track } from 'ripple';
             export default function App() @{
-                let &[value, tracked_ref] = track(0);
-                console.log(value, tracked_ref.value);
+                let count = track(0);
+                console.log(count.value);
                 <></>
             }
         `;
 		expect(() => compile(code, 'test.tsrx')).not.toThrow();
 	});
 
-	it('should allow .value read access on a tracked object', () => {
+	it('should allow .value assignment on a tracked object', () => {
 		const code = `
 import { track } from 'ripple';
             export default function App() @{
                 let count = track(0);
-                console.log(count.value);
+                count.value = 5;
                 <></>
             }
         `;
 		expect(() => compile(code, 'test.tsrx')).not.toThrow();
 	});
 
-	it('should allow .value assignment on a tracked object', () => {
+	it('should allow .readOnly() on a tracked object', () => {
 		const code = `
 import { track } from 'ripple';
             export default function App() @{
                 let count = track(0);
-                count.value = 5;
-                <></>
+                const view = count.readOnly();
+                <>{view.value}</>
             }
         `;
 		expect(() => compile(code, 'test.tsrx')).not.toThrow();
 	});
 
-	it('should allow .length read access on a tracked object', () => {
+	it('should error on .length access on a tracked object', () => {
 		const code = `
 import { track } from 'ripple';
             export default function App() @{
@@ -248,6 +221,8 @@ import { track } from 'ripple';
                 <></>
             }
         `;
-		expect(() => compile(code, 'test.tsrx')).not.toThrow();
+		expect(() => compile(code, 'test.tsrx')).toThrow(
+			'Accessing a tracked object directly is not allowed',
+		);
 	});
 });

package/tests/client/compiler/compiler.try-in-function.test.tsrx

@@ -74,7 +74,7 @@ describe('compiler > Volar transform does not duplicate try blocks from function
 		const source = `import { trackAsync } from 'ripple';
 export function App() @{
 	try {
-		let &[data] = trackAsync(() => fetch('/api'));
+		const data = trackAsync(() => fetch('/api'));
 	} catch (e) {}
 	<div>{"hi"}</div>
 }`;
@@ -88,7 +88,7 @@ export function App() @{
 		const source = `import { trackAsync } from 'ripple';
 export function App() @{
 	try {
-		let &[data] = trackAsync(() => fetch('/init'));
+		const data = trackAsync(() => fetch('/init'));
 	} catch (e) {}
 
 	async function refresh() {

package/tests/client/composite/__snapshots__/composite.render.test.tsrx.snap

@@ -14,7 +14,6 @@ exports[`composite > render > correct handles passing through component props an
     <div>
       I am B
     </div>
-    <!---->
   </div>
   
 </div>

package/tests/client/composite/composite.dynamic-components.test.tsrx

@@ -1,4 +1,4 @@
-import { flushSync, track } from 'ripple';
+import { type Component, flushSync, track } from 'ripple';
 
 describe('composite > dynamic components', () => {
 	it('supports rendering composite components using dynamic tag syntax', () => {
@@ -47,8 +47,8 @@ describe('composite > dynamic components', () => {
 			const obj = {
 				tracked_basic,
 			};
-			let &[inner] = track(obj);
-			const comp = inner.tracked_basic;
+			const inner = track(obj);
+			const comp = inner.value.tracked_basic;
 			<{comp} />
 		}
 
@@ -86,13 +86,13 @@ describe('composite > dynamic components', () => {
 		}
 
 		function App() @{
-			let &[thing] = track(() => Child1);
+			const thing = track(() => Child1, undefined, true);
 			<>
 				<div id="container">
-					<{thing} />
+					<{thing.value} />
 				</div>
 				<button
-					onClick={() => (thing = thing === Child1 ? Child2 : Child1)}
+					onClick={() => (thing.value = thing.value === Child1 ? Child2 : Child1)}
 				>{'Change Child'}</button>
 			</>
 		}
@@ -113,4 +113,75 @@ describe('composite > dynamic components', () => {
 
 		expect(container.querySelector('#container').textContent).toBe('I am child 1');
 	});
+
+	it('switches components held in a plain tracked assigned after creation', () => {
+		function Child1() @{
+			<div>{'I am child 1'}</div>
+		}
+
+		function Child2() @{
+			<div>{'I am child 2'}</div>
+		}
+
+		function App() @{
+			// track(Child1) would make a derived that calls the component, so an
+			// empty tracked receives the component through `.value` instead.
+			const thing = track<Component>();
+			thing.value = Child1;
+			<>
+				<div id="container">
+					<{thing.value} />
+				</div>
+				<button
+					onClick={() => (thing.value = thing.value === Child1 ? Child2 : Child1)}
+				>{'Change Child'}</button>
+			</>
+		}
+
+		render(App);
+		flushSync();
+
+		expect(container.querySelector('#container').textContent).toBe('I am child 1');
+
+		const button = container.querySelector('button');
+		button.click();
+		flushSync();
+
+		expect(container.querySelector('#container').textContent).toBe('I am child 2');
+
+		button.click();
+		flushSync();
+
+		expect(container.querySelector('#container').textContent).toBe('I am child 1');
+	});
+
+	it('switches plain functions held in a tracked assigned after creation', () => {
+		const first = () => 'first';
+		const second = () => 'second';
+
+		function App() @{
+			const fn = track<() => string>();
+			fn.value = first;
+			<>
+				<p>{fn.value()}</p>
+				<button onClick={() => (fn.value = fn.value === first ? second : first)}>{'Swap'}</button>
+			</>
+		}
+
+		render(App);
+		flushSync();
+
+		expect(container.querySelector('p').textContent).toBe('first');
+
+		const button = container.querySelector('button');
+		button.click();
+		flushSync();
+
+		expect(container.querySelector('p').textContent).toBe('second');
+
+		button.click();
+		flushSync();
+
+		expect(container.querySelector('p').textContent).toBe('first');
+	});
 });

package/tests/client/composite/composite.props.test.tsrx

@@ -1,17 +1,150 @@
-import type { Tracked, Props } from 'ripple';
+import type { Derived, Tracked, Props } from 'ripple';
 import { effect, flushSync, track } from 'ripple';
 
 describe('composite > props', () => {
+	it('hands a child a read-only view through readOnly()', () => {
+		function Child({ count }: { count: Derived<number> }) @{
+			<span class="child">{count.value}</span>
+		}
+
+		function App() @{
+			const count = track(0);
+			<>
+				<Child count={count.readOnly()} />
+				<button onClick={() => count.value++}>{'inc'}</button>
+			</>
+		}
+
+		render(App);
+		flushSync();
+		expect(container.querySelector('.child').textContent).toBe('0');
+
+		container.querySelector('button').click();
+		flushSync();
+		expect(container.querySelector('.child').textContent).toBe('1');
+	});
+
+	it('returns a read-only derived from readOnly() as is and wraps a writable one', () => {
+		function App() @{
+			const count = track(1);
+			const double = track(() => count.value * 2);
+			const draft = track(() => count.value, undefined, true);
+			const double_view = double.readOnly();
+			const draft_view = draft.readOnly();
+			expect(double_view).toBe(double);
+			expect(draft_view).not.toBe(draft);
+			<>
+				<span class="draft">{draft.value}</span>
+				<span class="view">{draft_view.value}</span>
+				<button onClick={() => (draft.value = 42)}>{'write'}</button>
+			</>
+		}
+
+		render(App);
+		flushSync();
+		expect(container.querySelector('.view').textContent).toBe('1');
+
+		// A write to the writable derived is visible through its view.
+		container.querySelector('button').click();
+		flushSync();
+		expect(container.querySelector('.draft').textContent).toBe('42');
+		expect(container.querySelector('.view').textContent).toBe('42');
+	});
+
+	it('releases a readOnly() view with the block that created it', () => {
+		let set_rows: (rows: number[]) => void = () => {};
+		let bump: () => void = () => {};
+		let source: Tracked<number> | undefined;
+
+		function Child({ count }: { count: Derived<number> }) @{
+			<span class="child">{count.value}</span>
+		}
+
+		function App() @{
+			const count = track(0);
+			const rows = track<number[]>([]);
+			source = count;
+			set_rows = (next) => {
+				rows.value = next;
+			};
+			bump = () => {
+				count.value++;
+			};
+			<ul>
+				@for (const row of rows.value; key row) {
+					<li>
+						<Child count={count.readOnly()} />
+					</li>
+				}
+			</ul>
+		}
+
+		// Each view is a derived subscribed to the source; the subscriber list is
+		// the runtime's own (`sb` / `sn`).
+		const subscribers = () => {
+			let n = 0;
+			for (let d = (source as any).sb; d !== null; d = d.sn) n++;
+			return n;
+		};
+
+		render(App);
+		flushSync();
+		expect(subscribers()).toBe(0);
+
+		set_rows([1, 2, 3]);
+		flushSync();
+		expect(container.querySelectorAll('.child').length).toBe(3);
+		expect(subscribers()).toBe(3);
+
+		// Removing the items destroys the blocks that created the views, so the
+		// next write to the source prunes them instead of keeping them alive.
+		set_rows([]);
+		flushSync();
+		bump();
+		flushSync();
+		expect(container.querySelectorAll('.child').length).toBe(0);
+		expect(subscribers()).toBe(0);
+	});
+
+	it('keeps a readOnly() view from writing through to its source', () => {
+		const warn = vi.spyOn(console, 'warn').mockImplementation(() => {});
+		try {
+			function App() @{
+				const count = track(1);
+				const view = count.readOnly();
+				const write = () => {
+					view.value = 99;
+				};
+				<>
+					<span class="source">{count.value}</span>
+					<span class="view">{view.value}</span>
+					<button onClick={write}>{'write'}</button>
+				</>
+			}
+
+			render(App);
+			flushSync();
+			container.querySelector('button').click();
+			flushSync();
+
+			// The write warned in development and never reached the source.
+			expect(warn).toHaveBeenCalledWith(expect.stringContaining('read-only derived'));
+			expect(container.querySelector('.source').textContent).toBe('1');
+		} finally {
+			warn.mockRestore();
+		}
+	});
+
 	it('correctly handles default prop values', () => {
 		function Child({ foo = 456 }) @{
 			<div>{foo}</div>
 		}
 
 		function App() @{
-			let &[foo] = track(123);
+			const foo = track(123);
 			<>
 				<Child />
-				<Child {foo} />
+				<Child foo={foo.value} />
 			</>
 		}
 
@@ -67,10 +200,10 @@ describe('composite > props', () => {
 		}
 
 		function App() @{
-			let &[foo] = track(123);
+			const foo = track(123);
 			<>
 				<Child />
-				<Child {foo} />
+				<Child foo={foo.value} />
 			</>
 		}
 
@@ -110,7 +243,7 @@ describe('composite > props', () => {
 	});
 
 	it('correctly retains prop accessors and reactivity when using rest props', () => {
-		function Button(&{ children, ...rest }: Props) @{
+		function Button({ children, ...rest }: Props) @{
 			<>
 				<button {...rest}>{children}</button>
 				<style>
@@ -124,11 +257,15 @@ describe('composite > props', () => {
 			</>
 		}
 
-		function Toggle(&{ pressed, ...rest }: { pressed: Tracked<boolean> }) @{
+		function Toggle({ pressed, ...rest }: { pressed: Tracked<boolean> }) @{
 			const onClick = () => (pressed.value = !pressed.value);
 			<>
-				<Button {...rest} class={pressed.value ? 'on' : 'off'} {onClick}>{'button 1'}</Button>
-				<Button class={pressed.value ? 'on' : 'off'} {onClick}>{'button 2'}</Button>
+				<Button
+					{...rest}
+					class={track(() => (pressed.value ? 'on' : 'off'))}
+					{onClick}
+				>{'button 1'}</Button>
+				<Button class={track(() => (pressed.value ? 'on' : 'off'))} {onClick}>{'button 2'}</Button>
 			</>
 		}
 
@@ -215,16 +352,16 @@ describe('composite > props', () => {
 		}
 
 		function App() @{
-			let &[ok] = track(true);
+			const ok = track(true);
 			<>
 				<button
 					onClick={() => {
-						ok = !ok;
+						ok.value = !ok.value;
 					}}
 				>{'toggle'}</button>
 				<Child
 					header={<h1>
-						@if (ok) {
+						@if (ok.value) {
 							<span>{'yes'}</span>
 						} @else {
 							<span>{'no'}</span>