ripple 0.3.8 → 0.3.10

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

@@ -10,17 +10,15 @@ import type {
 describe('basic server > components & composition', () => {
 	it('renders with component composition and children', async () => {
 		component Card(props: PropsWithChildren<{}>) {
-			<div class="card">
-				<props.children />
-			</div>
+			<div class="card">{props.children}</div>
 		}
 
 		component Basic() {
-			<Card>
-				component children() {
-					<p>{'Card content here'}</p>
-				}
-			</Card>
+			component children() {
+				<p>{'Card content here'}</p>
+			}
+
+			<Card {children} />
 		}
 
 		const { body } = await render(Basic);
@@ -37,16 +35,16 @@ describe('basic server > components & composition', () => {
 		component Card(props: PropsWithChildrenOptional<{ test: Component }>) {
 			<div class="card">
 				// @ts-expect-error - ripple automatically handles falsy children
-				<props.children />
+				{props.children}
 			</div>
 		}
 
 		component Basic() {
-			<Card>
-				component test() {
-					<p>{'Card content here'}</p>
-				}
-			</Card>
+			component test() {
+				<p>{'Card content here'}</p>
+			}
+
+			<Card {test} />
 		}
 
 		const { body } = await render(Basic);
@@ -62,9 +60,7 @@ describe('basic server > components & composition', () => {
 
 	it('renders a component when children is set a component prop', async () => {
 		component Card(props: PropsWithChildren<{}>) {
-			<div class="card">
-				<props.children />
-			</div>
+			<div class="card">{props.children}</div>
 		}
 
 		component Basic() {
@@ -174,21 +170,19 @@ describe('basic server > components & composition', () => {
 				<span>{'Hello from Span'}</span>
 			},
 			button: component({ children }: PropsWithChildren<{}>) {
-				<button>
-					<children />
-				</button>
+				<button>{children}</button>
 			},
 		};
 
 		component App() {
+			component children() {
+				<span>{'Click me!'}</span>
+			}
+
 			<div>
 				<h1>{'Component as Property Test'}</h1>
 				<UI.span />
-				<UI.button>
-					component children() {
-						<span>{'Click me!'}</span>
-					}
-				</UI.button>
+				<UI.button {children} />
 			</div>
 		}
 
@@ -207,13 +201,13 @@ describe('basic server > components & composition', () => {
 
 	it('handles empty string children', async () => {
 		component Button({ children }: PropsWithChildren<{}>) {
-			<children />
+			{children}
 		}
 
 		component App() {
-			let text = '';
+			let content = '';
 			<Button>{''}</Button>
-			<Button>{text}</Button>
+			<Button>{content}</Button>
 		}
 
 		const { body } = await render(App);

package/tests/server/basic.test.ripple

@@ -13,6 +13,18 @@ describe('basic client', () => {
 		expect(body).toBeHtml('<div>Hello World</div>');
 	});
 
+	it('renders explicit text interpolation as escaped text', async () => {
+		component Basic() {
+			let markup = '<span>Not HTML</span>';
+
+			<div>{text markup}</div>
+		}
+
+		const { body } = await render(Basic);
+
+		expect(body).toBeHtml('<div>&lt;span>Not HTML&lt;/span></div>');
+	});
+
 	it('renders tracked state updates', async () => {
 		component Counter() {
 			let &[count] = track(0);

package/tests/server/compiler.test.ripple

@@ -78,9 +78,7 @@ export component Layout({ children }) {
 		<div>{children}</div>
 }`;
 
-		expect(() => compile(source, 'test.ripple', { mode: 'server' })).toThrow(
-			'`children` cannot be rendered using text interpolation. Use `<children />` instead.',
-		);
+		expect(() => compile(source, 'test.ripple', { mode: 'server' })).not.toThrow();
 	});
 
 	it('throws error for interpolating props.children as text in SSR mode', () => {
@@ -89,10 +87,51 @@ export component Layout(props) {
 	<div>{props.children}</div>
 }`;
 
+		expect(() => compile(source, 'test.ripple', { mode: 'server' })).not.toThrow();
+	});
+
+	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 rendered using text interpolation. Use `<children />` instead.',
+			'`children` cannot be called like a regular function. Render it with `{children}` or `{props.children}` instead.',
 		);
 	});
+
+	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. Render it with `{children}` or `{props.children}` instead.',
+		);
+	});
+
+	it('merges explicit children prop with implicit children in SSR output', () => {
+		const source = `
+component Card(props) {
+	<div>{props.children}</div>
+}
+
+export component App() {
+	const fallback = 'fallback';
+
+	<Card children={fallback}>
+		<span>{'content'}</span>
+	</Card>
+}
+`;
+
+		const result = compile(source, 'test.ripple', { mode: 'server' }).js.code;
+
+		expect((result.match(/children:/g) || []).length).toBe(1);
+		expect(result).toContain('children: _$_.normalize_children(fallback) ?? _$_.ripple_element(');
+	});
 });
 
 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,11 +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}>
-				<@children />
-			</button>
+		component Button(&{ children, ...rest }: Props) {
+			<button {...rest}>{children}</button>
 			<style>
 				.on {
 					color: blue;
@@ -94,10 +91,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/tests/server/style-identifier.test.ripple

@@ -190,7 +190,7 @@ describe('#style identifier (server)', () => {
 		component Wrapper({ children }) {
 			<div class="green">
 				{'Wrapper'}
-				<children />
+				{children}
 			</div>
 
 			<style>
@@ -235,9 +235,7 @@ describe('#style identifier (server)', () => {
 
 	it('applies caller scoped hash to slotted children through dynamic components', async () => {
 		component Wrapper({ children }) {
-			<section>
-				<children />
-			</section>
+			<section>{children}</section>
 		}
 
 		component App() {

package/tsconfig.typecheck.json

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

package/types/index.d.ts

@@ -1,7 +1,14 @@
 export type Component<T = Record<string, any>> = (props: T) => void;
 
-/** Type for JSX children - accepts single child, multiple children, or no children */
-export type Children = Component | readonly Component[];
+declare const RIPPLE_ELEMENT: unique symbol;
+
+export type RippleElement = {
+	readonly render: Function;
+	readonly [RIPPLE_ELEMENT]: true;
+};
+
+/** Type for implicit children fragments rendered with `{children}`. */
+export type Children = RippleElement;
 
 export type CompatApi = {
 	createRoot: () => void;
@@ -176,19 +183,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 +198,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 +557,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();
-	});
-});