ripple 0.3.8 → 0.3.9

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

@@ -1,5 +1,5 @@
 import type { Props, Tracked } from 'ripple';
-import { RippleObject, effect, flushSync, track, trackSplit } from 'ripple';
+import { RippleObject, effect, flushSync, track } from 'ripple';
 
 describe('composite > reactivity', () => {
 	it('renders composite components with object state', () => {
@@ -227,46 +227,42 @@ describe('composite > reactivity', () => {
 		expect(logs).toEqual(['Child effect: 1, 2, 3', 'Child effect: 2, 3, 4']);
 	});
 
-	it(
-		'keeps reactivity for spread props via intermediate components and usage of trackSplit()',
-		() => {
-			component App() {
-				let &[count] = track(0);
-				<CounterWrapper {count} up={() => count++} down={() => count--} />
-			}
+	it('keeps reactivity for spread props via intermediate components and lazy destructuring', () => {
+		component App() {
+			let &[count] = track(0);
+			<CounterWrapper {count} up={() => count++} down={() => count--} />
+		}
 
-			component CounterWrapper(props: Props) {
-				<div>
-					<Counter {...props} />
-				</div>
-			}
+		component CounterWrapper(props: Props) {
+			<div>
+				<Counter {...props} />
+			</div>
+		}
 
-			component Counter(props: Props) {
-				let [count, up, down, rest] = trackSplit(props, ['count', 'up', 'down']);
-				<button onClick={() => up.value()}>{'UP'}</button>
-				<button onClick={() => down.value()}>{'DOWN'}</button>
-				<span {...rest.value}>{`Counter: ${count.value}`}</span>
-			}
+		component Counter(&{ count, up, down, ...rest }: Props) {
+			<button onClick={() => up()}>{'UP'}</button>
+			<button onClick={() => down()}>{'DOWN'}</button>
+			<span {...rest}>{`Counter: ${count}`}</span>
+		}
 
-			render(App);
+		render(App);
 
-			const buttonIncrement = container.querySelectorAll('button')[0];
-			const buttonDecrement = container.querySelectorAll('button')[1];
-			const span = container.querySelector('span');
+		const buttonIncrement = container.querySelectorAll('button')[0];
+		const buttonDecrement = container.querySelectorAll('button')[1];
+		const span = container.querySelector('span');
 
-			expect(span.textContent).toBe('Counter: 0');
+		expect(span.textContent).toBe('Counter: 0');
 
-			buttonIncrement.click();
-			flushSync();
+		buttonIncrement.click();
+		flushSync();
 
-			expect(span.textContent).toBe('Counter: 1');
+		expect(span.textContent).toBe('Counter: 1');
 
-			buttonDecrement.click();
-			flushSync();
+		buttonDecrement.click();
+		flushSync();
 
-			expect(span.textContent).toBe('Counter: 0');
-		},
-	);
+		expect(span.textContent).toBe('Counter: 0');
+	});
 
 	it('keeps reactivity on elements for element spreads and adds / removes dynamic props', () => {
 		component App() {
@@ -295,16 +291,19 @@ describe('composite > reactivity', () => {
 			</div>
 		}
 
-		component Counter(props: {
+		component Counter(&{
+			count,
+			up,
+			...rest
+		}: {
 			count: number;
 			up: () => void;
 			double: Tracked<number>;
 			another?: number;
 			extra: number;
 		}) {
-			let [count, up, rest] = trackSplit(props, ['count', 'up']);
-			<div {...rest.value}>{`Counter: ${count.value} Double: ${props.double.value}`}</div>
-			<button onClick={() => up.value()}>{'UP'}</button>
+			<div {...rest}>{`Counter: ${count} Double: ${rest.double.value}`}</div>
+			<button onClick={() => up()}>{'UP'}</button>
 		}
 
 		render(App);

package/tests/client/dynamic-elements.test.ripple

@@ -1,5 +1,5 @@
 import type { PropsWithExtras } from 'ripple';
-import { createRefKey, flushSync, track, trackSplit } from 'ripple';
+import { createRefKey, flushSync, track } from 'ripple';
 
 describe('dynamic DOM elements', () => {
 	it('renders static dynamic element', () => {
@@ -405,14 +405,13 @@ describe('dynamic DOM elements', () => {
 	});
 
 	it('handles spread attributes with class and CSS scoping ', () => {
-		component DynamicButton(props: PropsWithExtras<{
+		component DynamicButton(&{ ...rest }: PropsWithExtras<{
 			class: string;
 			id: string;
 			onClick: EventListener;
 		}>) {
 			const tag = track('button');
-			const [rest] = trackSplit(props, []);
-			<@tag {...rest.value}>{rest.value.class}</@tag>
+			<@tag {...rest}>{rest.class}</@tag>
 
 			<style>
 				.even {

package/tests/client/lazy-destructuring.test.ripple

@@ -1,4 +1,4 @@
-import { flushSync, track, trackSplit } from 'ripple';
+import { flushSync, track } from 'ripple';
 
 describe('lazy destructuring', () => {
 	it('supports tracked value getter and setter', () => {
@@ -126,6 +126,38 @@ describe('lazy destructuring', () => {
 		expect(container.querySelector('pre')!.textContent).toBe('1');
 	});
 
+	it('supports nested lazy destructuring in non-lazy component params', () => {
+		component Inner({ something: &[first, second] }) {
+			first = second.value + 1;
+			<pre>{`${first}-${second.value}`}</pre>
+		}
+
+		component Test() {
+			<Inner something={track(1)} />
+		}
+
+		render(Test);
+		expect(container.querySelector('pre')!.textContent).toBe('2-2');
+	});
+
+	it(
+		'preserves lazy getter/setter behavior for nested rest destructuring in non-lazy component params',
+		() => {
+			component Inner({ values: [head, ...&{ length: rest_length, 0: first_rest }] }) {
+				const before = `${first_rest?.value ?? 'nil'}-${rest_length}`;
+				rest_length = 0;
+				<pre>{`${head}-${before}-${first_rest?.value ?? 'nil'}-${rest_length}`}</pre>
+			}
+
+			component Test() {
+				<Inner values={[10, track(20), track(30)]} />
+			}
+
+			render(Test);
+			expect(container.querySelector('pre')!.textContent).toBe('10-20-2-nil-0');
+		},
+	);
+
 	it('supports lazy destructuring in function params', () => {
 		component Test() {
 			function getInfo(&{ x, y }: { x: number; y: number }) {
@@ -139,6 +171,42 @@ describe('lazy destructuring', () => {
 		expect(container.querySelector('pre')!.textContent).toBe('10');
 	});
 
+	it('supports nested lazy destructuring in non-lazy function params', () => {
+		component Test() {
+			const something = track(1);
+
+			function getInfo({ something: &[first, second] }) {
+				first = second.value + 1;
+				return `${first}-${second.value}`;
+			}
+
+			const result = getInfo({ something });
+			<pre>{result}</pre>
+		}
+
+		render(Test);
+		expect(container.querySelector('pre')!.textContent).toBe('2-2');
+	});
+
+	it(
+		'preserves lazy getter/setter behavior for nested rest destructuring in non-lazy function params',
+		() => {
+			component Test() {
+				function summarize({ values: [head, ...&{ length: rest_length, 0: first_rest }] }) {
+					const before = `${first_rest?.value ?? 'nil'}-${rest_length}`;
+					rest_length = 0;
+					return `${head}-${before}-${first_rest?.value ?? 'nil'}-${rest_length}`;
+				}
+
+				const result = summarize({ values: [5, track(6), track(7)] });
+				<pre>{result}</pre>
+			}
+
+			render(Test);
+			expect(container.querySelector('pre')!.textContent).toBe('5-6-2-nil-0');
+		},
+	);
+
 	it('supports let lazy destructuring with assignment writeback', () => {
 		component Test() {
 			const obj = { a: 1, b: 2 };
@@ -205,17 +273,6 @@ describe('lazy destructuring', () => {
 		expect(container.querySelector('pre')!.textContent).toBe('1-99');
 	});
 
-	it('does not apply the track tuple fast-path to trackSplit lazy arrays', () => {
-		component Test() {
-			const source = { a: 1, b: 2, c: 3 };
-			let [a, b, rest] = trackSplit(source, ['a', 'b']);
-			<pre>{`${a.value}-${b.value}-${rest.value.c}`}</pre>
-		}
-
-		render(Test);
-		expect(container.querySelector('pre')!.textContent).toBe('1-2-3');
-	});
-
 	it('supports rest destructuring from iterable array-like tracked values', () => {
 		component Test() {
 			let &[value, ...rest] = track(0);

package/tests/server/compiler.test.ripple

@@ -93,6 +93,28 @@ export component Layout(props) {
 			'`children` cannot be rendered using text interpolation. Use `<children />` instead.',
 		);
 	});
+
+	it('throws error for calling children as a function in SSR mode', () => {
+		const source = `
+export component Layout({ children }) {
+	{children()}
+}`;
+
+		expect(() => compile(source, 'test.ripple', { mode: 'server' })).toThrow(
+			'`children` cannot be called like a regular function. Use element syntax instead, e.g. `<children />` or `<props.children />`.',
+		);
+	});
+
+	it('throws error for calling props.children as a function in SSR mode', () => {
+		const source = `
+export component Layout(props) {
+	{props.children()}
+}`;
+
+		expect(() => compile(source, 'test.ripple', { mode: 'server' })).toThrow(
+			'`children` cannot be called like a regular function. Use element syntax instead, e.g. `<children />` or `<props.children />`.',
+		);
+	});
 });
 
 describe('compiler server block tests', () => {

package/tests/server/composite.props.test.ripple

@@ -1,4 +1,4 @@
-import { track, trackSplit } from 'ripple';
+import { track } from 'ripple';
 import type { Tracked, Props } from 'ripple';
 
 describe('composite > props', () => {
@@ -79,9 +79,8 @@ describe('composite > props', () => {
 	});
 
 	it('correctly retains prop accessors and reactivity when using rest props', async () => {
-		component Button(props: Props) {
-			const [children, rest] = trackSplit(props, ['children']);
-			<button {...rest.value}>
+		component Button(&{ children, ...rest }: Props) {
+			<button {...rest}>
 				<@children />
 			</button>
 			<style>
@@ -94,10 +93,9 @@ describe('composite > props', () => {
 			</style>
 		}
 
-		component Toggle(props: { pressed: Tracked<boolean> }) {
-			const [pressed, rest] = trackSplit(props, ['pressed']);
+		component Toggle(&{ pressed, ...rest }: { pressed: Tracked<boolean> }) {
 			const onClick = () => (pressed.value = !pressed.value);
-			<Button {...rest.value} class={pressed.value ? 'on' : 'off'} {onClick}>{'button 1'}</Button>
+			<Button {...rest} class={pressed.value ? 'on' : 'off'} {onClick}>{'button 1'}</Button>
 			<Button class={pressed.value ? 'on' : 'off'} {onClick}>{'button 2'}</Button>
 		}
 

package/tests/server/dynamic-elements.test.ripple

@@ -1,5 +1,5 @@
 import type { PropsWithExtras } from 'ripple';
-import { createRefKey, track, trackSplit } from 'ripple';
+import { createRefKey, track } from 'ripple';
 
 describe('server dynamic DOM elements', () => {
 	it('renders static dynamic element', async () => {
@@ -258,13 +258,12 @@ describe('server dynamic DOM elements', () => {
 	});
 
 	it('handles spread attributes with class and CSS scoping', async () => {
-		component DynamicButton(props: PropsWithExtras<{
+		component DynamicButton(&{ ...rest }: PropsWithExtras<{
 			class: string;
 			id: string;
 		}>) {
 			const tag = track('button');
-			const [rest] = trackSplit(props, []);
-			<@tag {...rest.value}>{rest.value.class}</@tag>
+			<@tag {...rest}>{rest.class}</@tag>
 
 			<style>
 				.even {

package/tests/server/lazy-destructuring.test.ripple

@@ -1,4 +1,5 @@
-import { track, trackSplit } from 'ripple';
+import type { Tracked } from 'ripple';
+import { track } from 'ripple';
 
 describe('lazy destructuring', () => {
 	it('supports tracked value getter and setter', async () => {
@@ -30,7 +31,7 @@ describe('lazy destructuring', () => {
 
 	it('supports default values in lazy object destructuring', async () => {
 		component Test() {
-			const obj = { a: 5 };
+			const obj: { a: number; b?: number } = { a: 5 };
 			const &{ a, b = 99 } = obj;
 			<pre>{`${a}-${b}`}</pre>
 		}
@@ -39,6 +40,20 @@ describe('lazy destructuring', () => {
 		expect(body).toBeHtml('<pre>5-99</pre>');
 	});
 
+	it('supports nested lazy destructuring in non-lazy component params', async () => {
+		component Inner({ something: &[first, second] }: { something: Tracked<number> }) {
+			first = second.value + 1;
+			<pre>{`${first}-${second.value}`}</pre>
+		}
+
+		component Test() {
+			<Inner something={track(1)} />
+		}
+
+		const { body } = await render(Test);
+		expect(body).toBeHtml('<pre>2-2</pre>');
+	});
+
 	it('supports let lazy destructuring with assignment writeback', async () => {
 		component Test() {
 			const obj = { a: 1, b: 2 };
@@ -106,26 +121,67 @@ describe('lazy destructuring', () => {
 		expect(body).toBeHtml('<pre>15-105</pre>');
 	});
 
-	it('supports member access on lazy destructured objects', async () => {
+	it('supports nested lazy destructuring in non-lazy function params', async () => {
 		component Test() {
-			const obj = { user: { name: 'Alice', age: 30 } };
-			const &{ user } = obj;
-			<pre>{`${user.name}-${user.age}`}</pre>
+			const something = track(1);
+
+			function getInfo({ something: &[first, second] }: { something: Tracked<number> }) {
+				first = second.value + 1;
+				return `${first}-${second.value}`;
+			}
+
+			<pre>{getInfo({ something })}</pre>
 		}
 
 		const { body } = await render(Test);
-		expect(body).toBeHtml('<pre>Alice-30</pre>');
+		expect(body).toBeHtml('<pre>2-2</pre>');
 	});
 
-	it('treats array destructuring of trackSplit as regular array access', async () => {
+	it(
+		'preserves lazy getter/setter behavior for RestElement nested destructuring in non-lazy component params',
+		async () => {
+			component Inner({ values: [head, ...&{ 0: first_rest, length: rest_length }] }) {
+				const before = `${first_rest}-${rest_length}`;
+				rest_length = 0;
+				<pre>{`${head}-${before}-${first_rest}-${rest_length}`}</pre>
+			}
+
+			component Test() {
+				<Inner values={[10, 20, 30]} />
+			}
+
+			const { body } = await render(Test);
+			expect(body).toBeHtml('<pre>10-20-2-undefined-0</pre>');
+		},
+	);
+
+	it(
+		'preserves lazy getter/setter behavior for RestElement nested destructuring in non-lazy function params',
+		async () => {
+			component Test() {
+				function getInfo({ values: [head, ...&{ 0: first_rest, length: rest_length }] }) {
+					const before = `${first_rest}-${rest_length}`;
+					rest_length = 0;
+					return `${head}-${before}-${first_rest}-${rest_length}`;
+				}
+
+				<pre>{getInfo({ values: [5, 6, 7] })}</pre>
+			}
+
+			const { body } = await render(Test);
+			expect(body).toBeHtml('<pre>5-6-2-undefined-0</pre>');
+		},
+	);
+
+	it('supports member access on lazy destructured objects', async () => {
 		component Test() {
-			const source = { a: 1, b: 2, c: 3 };
-			const [a, b, rest] = trackSplit(source, ['a', 'b']);
-			<pre>{`${a.value}-${b.value}-${rest.value.c}`}</pre>
+			const obj = { user: { name: 'Alice', age: 30 } };
+			const &{ user } = obj;
+			<pre>{`${user.name}-${user.age}`}</pre>
 		}
 
 		const { body } = await render(Test);
-		expect(body).toBeHtml('<pre>1-2-3</pre>');
+		expect(body).toBeHtml('<pre>Alice-30</pre>');
 	});
 
 	it('supports rest in lazy array destructuring for tracked tuples (iterable)', async () => {

package/tsconfig.typecheck.json

@@ -0,0 +1,4 @@
+{
+  "extends": "./tsconfig.json",
+  "include": ["./src/runtime/"]
+}

package/types/index.d.ts

@@ -176,19 +176,6 @@ export type PropsNoChildren<T extends object = {}> = Expand<T>;
 
 type Expand<T> = T extends infer O ? { [K in keyof O]: O[K] } : never;
 
-type WrapTracked<V> = V extends Tracked<any> ? V : Tracked<V>;
-
-type PickKeys<T, K extends readonly (keyof T)[]> = {
-	[I in keyof K]: WrapTracked<T[K[I] & keyof T]>;
-};
-
-type RestKeys<T, K extends readonly (keyof T)[]> = Expand<Omit<T, K[number]>>;
-
-type SplitResult<T extends Props, K extends readonly (keyof T)[]> = [
-	...PickKeys<T, K>,
-	Tracked<RestKeys<T, K>>,
-];
-
 export function get<V>(tracked: Tracked<V>): V;
 
 export function set<V>(tracked: Tracked<V>, value: V): void;
@@ -204,11 +191,6 @@ export function track<V>(
 // Overload for non-function values
 export function track<V>(value?: V, get?: (v: V) => V, set?: (next: V, prev: V) => V): Tracked<V>;
 
-export function trackSplit<V extends Props, const K extends readonly (keyof V)[]>(
-	value: V,
-	splitKeys: K,
-): SplitResult<V, K>;
-
 export interface AddEventOptions extends ExtendedEventOptions {
 	customName?: string;
 }
@@ -568,7 +550,6 @@ export interface RippleNamespace {
 	urlSearchParams: RippleURLSearchParamsCallable;
 	untrack: typeof untrack;
 	track: typeof track;
-	trackSplit: typeof trackSplit;
 	style: Record<string, string>;
 	server: ServerBlock;
 }

package/tests/client/__snapshots__/tracked-expression.test.ripple.snap

@@ -1,34 +0,0 @@
-// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
-
-exports[`TrackedExpression tests > should handle the syntax correctly 1`] = `
-<div>
-  <div>
-    0
-  </div>
-  <div>
-    4
-  </div>
-  <div>
-    1
-  </div>
-  <div>
-    2
-  </div>
-  <div>
-    2
-  </div>
-  <div>
-    3
-  </div>
-  <div>
-    4
-  </div>
-  <div>
-    false
-  </div>
-  <div>
-    true
-  </div>
-  
-</div>
-`;

package/tests/client/tracked-expression.test.ripple

@@ -1,26 +0,0 @@
-import { track } from 'ripple';
-
-describe('TrackedExpression tests', () => {
-	it('should handle the syntax correctly', () => {
-		component App() {
-			let count = track(0);
-
-			function get_count() {
-				return count;
-			}
-
-			<div>{@(count)}</div>
-			<div>{@(get_count())}</div>
-			<div>{++@(count)}</div>
-			<div>{++@(get_count())}</div>
-			<div>{@(count)++}</div>
-			<div>{@(get_count())++}</div>
-			<div>{@(count)}</div>
-			<div>{!@(count)}</div>
-			<div>{!!@(count)}</div>
-		}
-
-		render(App);
-		expect(container).toMatchSnapshot();
-	});
-});