ripple 0.3.8 → 0.3.10

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

@@ -1,5 +1,5 @@
 import type { PropsWithChildren, Tracked } from 'ripple';
-import { effect, flushSync, track, trackSplit, untrack } from 'ripple';
+import { effect, flushSync, track, untrack } from 'ripple';
 
 describe('basic client > reactivity', () => {
 	it('renders multiple reactive lexical blocks', () => {
@@ -384,162 +384,17 @@ describe('basic client > reactivity', () => {
 		expect(state.finalValue).toBe(5);
 	});
 
-	describe('track/trackSplit APIs', () => {
-		it('errors on invalid value as null for track with trackSplit', () => {
-			component App() {
-				let &[message] = track('');
-
-				try {
-					const [a, b, rest] = trackSplit(null, ['a', 'b']);
-				} catch (e) {
-					message = (e as Error).message;
-				}
-
-				<pre>{message}</pre>
-			}
-
-			render(App);
-
-			const pre = container.querySelectorAll('pre')[0];
-			expect(pre.textContent).toBe('Invalid value: expected a non-tracked object');
-		});
-
-		it('errors on invalid value as array for track with trackSplit', () => {
-			component App() {
-				let &[message] = track('');
-
-				try {
-					const [a, b, rest] = trackSplit([1, 2, 3], ['a', 'b']);
-				} catch (e) {
-					message = (e as Error).message;
-				}
-
-				<pre>{message}</pre>
-			}
-
-			render(App);
-
-			const pre = container.querySelectorAll('pre')[0];
-			expect(pre.textContent).toBe('Invalid value: expected a non-tracked object');
-		});
-
-		it('errors on invalid value as tracked for track with trackSplit', () => {
-			component App() {
-				const t = track({ a: 1, b: 2, c: 3 });
-				let &[message] = track('');
-
-				try {
-					const [a, b, rest] = trackSplit(t, ['a', 'b']);
-				} catch (e) {
-					message = (e as Error).message;
-				}
-
-				<pre>{message}</pre>
-			}
-
-			render(App);
-
-			const pre = container.querySelectorAll('pre')[0];
-			expect(pre.textContent).toBe('Invalid value: expected a non-tracked object');
-		});
-
-		it('returns undefined for non-existent props in track with trackSplit', () => {
-			component App() {
-				const [a, b, rest] = trackSplit({ a: 1, c: 1 }, ['a', 'b']);
-
-				<pre>{a.value}</pre>
-				<pre>{String(b.value)}</pre>
-				<pre>{rest.value.c}</pre>
-			}
-
-			render(App);
-
-			const preA = container.querySelectorAll('pre')[0];
-			const preB = container.querySelectorAll('pre')[1];
-			const preC = container.querySelectorAll('pre')[2];
-
-			expect(preA.textContent).toBe('1');
-			expect(preB.textContent).toBe('undefined');
-			expect(preC.textContent).toBe('1');
-		});
-
-		it('returns the same tracked object if plain track is called with a tracked object', () => {
-			component App() {
-				const t = track({ a: 1, b: 2, c: 3 });
-				const doublet = track(t);
-
-				<pre>{t === doublet}</pre>
-			}
-
-			render(App);
-
-			const pre = container.querySelectorAll('pre')[0];
-			expect(pre.textContent).toBe('true');
-		});
-
-		it('can retain reactivity for destructure rest via track trackSplit', () => {
-			let logs: string[] = [];
-
-			component App() {
-				let &[count] = track(0);
-				let &[name] = track('Click Me');
-
-				function buttonRef(el: HTMLButtonElement) {
-					logs.push('ref called');
-					return () => {
-						logs.push('cleanup ref');
-					};
-				}
-
-				<Child
-					class="my-button"
-					onClick={() => name === 'Click Me' ? name = 'Clicked' : name = 'Click Me'}
-					{count}
-					{ref buttonRef}
-				>
-					{name}
-				</Child>
-
-				<button onClick={() => count++}>{'Increment Count'}</button>
-			}
-
-			component Child(props: PropsWithChildren<{
-				count: Tracked<number>;
-				class: string;
-				onClick: () => void;
-			}>) {
-				const [children, count, rest] = trackSplit(props, ['children', 'count']);
-
-				if (count.value < 2) {
-					<button {...rest.value}>
-						<@children />
-					</button>
-				}
-				<pre>{count.value}</pre>
-			}
-
-			render(App);
-			flushSync();
-
-			const buttonClickMe = container.querySelectorAll('button')[0];
-			const buttonIncrement = container.querySelectorAll('button')[1];
-			const countPre = container.querySelector('pre');
-
-			expect(buttonClickMe.textContent).toBe('Click Me');
-			expect(countPre.textContent).toBe('0');
-			expect(logs).toEqual(['ref called']);
-
-			buttonClickMe.click();
-			buttonIncrement.click();
-			flushSync();
+	it('returns the same tracked object if plain track is called with a tracked object', () => {
+		component App() {
+			const t = track({ a: 1, b: 2, c: 3 });
+			const doublet = track(t);
 
-			expect(buttonClickMe.textContent).toBe('Clicked');
-			expect(countPre.textContent).toBe('1');
+			<pre>{t === doublet}</pre>
+		}
 
-			buttonIncrement.click();
-			flushSync();
+		render(App);
 
-			expect(logs).toEqual(['ref called', 'cleanup ref']);
-		});
+		const pre = container.querySelectorAll('pre')[0];
+		expect(pre.textContent).toBe('true');
 	});
 });

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

@@ -15,9 +15,9 @@ describe('basic client > rendering & text', () => {
 
 	it('renders semi-dynamic text', () => {
 		component Basic() {
-			let text = 'Hello World';
+			let message = 'Hello World';
 
-			<div>{text}</div>
+			<div>{message}</div>
 		}
 
 		render(Basic);
@@ -25,18 +25,33 @@ describe('basic client > rendering & text', () => {
 		expect(container).toMatchSnapshot();
 	});
 
+	it('renders explicit text interpolation without creating HTML', () => {
+		component Basic() {
+			let markup = '<span>Not HTML</span>';
+
+			<div>{text markup}</div>
+		}
+
+		render(Basic);
+
+		const div = container.querySelector('div');
+
+		expect(div.textContent).toBe('<span>Not HTML</span>');
+		expect(div.querySelector('span')).toBeNull();
+	});
+
 	it('renders dynamic text', () => {
 		component Basic() {
-			let &[text] = track('Hello World');
+			let &[message] = track('Hello World');
 
 			<button
 				onClick={() => {
-					text = 'Hello Ripple';
+					message = 'Hello Ripple';
 				}}
 			>
 				{'Change Text'}
 			</button>
-			<div>{text}</div>
+			<div>{message}</div>
 		}
 
 		render(Basic);
@@ -70,13 +85,13 @@ describe('basic client > rendering & text', () => {
 	it('renders tick template literal for nested children', () => {
 		component Child({ level, children }: { level: number; children: any }) {
 			if (level == 1) {
-				<h1><children /></h1>
+				<h1>{children}</h1>
 			}
 			if (level == 2) {
-				<h2><children /></h2>
+				<h2>{children}</h2>
 			}
 			if (level == 3) {
-				<h3><children /></h3>
+				<h3>{children}</h3>
 			}
 		}
 

package/tests/client/capture-error.js

@@ -0,0 +1,12 @@
+/**
+ * @param {() => void} fn
+ * @returns {boolean}
+ */
+export function did_error(fn) {
+	try {
+		fn();
+		return false;
+	} catch {
+		return true;
+	}
+}

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

@@ -44,6 +44,40 @@ describe('compiler > basics', () => {
 		).toEqual(style3);
 	});
 
+	it('parses explicit text interpolation and reserves the text keyword', () => {
+		const source = `export component App() {
+	const markup = '<span>Not HTML</span>';
+
+	<div>{markup}</div>
+	<div>{text markup}</div>
+}`;
+
+		const ast = parse(source);
+		const component_node = (ast.body[0] as AST.ExportNamedDeclaration).declaration as unknown as AST.Component;
+		const elements = component_node.body.filter((node) => node.type === 'Element') as AST.Element[];
+		const expression = elements[0].children[0] as AST.Node & { expression: AST.Expression };
+		const explicit_text = elements[1].children[0] as AST.TextNode;
+
+		expect(elements).toHaveLength(2);
+		expect(expression.type).toBe('RippleExpression');
+		expect((expression.expression as AST.Identifier).name).toBe('markup');
+		expect(explicit_text.type).toBe('Text');
+		expect((explicit_text.expression as AST.Identifier).name).toBe('markup');
+
+		const { js } = compile(source, 'text-directive.ripple', { mode: 'client' });
+		expect(js.code).not.toContain('_$_.html');
+
+		const invalid_source = `export component App() {
+	const text = 'plain';
+
+	<div>{text}</div>
+}`;
+
+		expect(() => parse(invalid_source)).toThrow(
+			'"text" is a Ripple keyword and must be used in the form {text some_value}',
+		);
+	});
+
 	it('renders without crashing', () => {
 		component App() {
 			let foo: Record<string, number>;
@@ -341,18 +375,6 @@ component App() {
 	});
 
 	it('keeps lazy destructuring as plain destructuring in to_ts output', () => {
-		const track_split_source = `
-import { trackSplit } from 'ripple';
-component App() {
-	const source = { a: 1, b: 2, c: 3 };
-	let &[a, b, rest] = trackSplit(source, ['a', 'b']);
-	const sum = a + b + rest.c;
-}
-`;
-		const track_split_result = compile_to_volar_mappings(track_split_source, 'test.ripple').code;
-		expect(track_split_result).toContain('let [a, b, rest] = trackSplit(source, [\'a\', \'b\']);');
-		expect(track_split_result).not.toContain('let lazy = trackSplit');
-
 		const track_source = `
 import { track } from 'ripple';
 component App() {
@@ -369,6 +391,37 @@ component App() {
 		expect(track_result).not.toContain('lazy0');
 	});
 
+	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 { js } = compile(source, 'tracked-nested-lazy.ripple', { mode: 'client' });
+
+		// Nested lazy array should still use tracked tuple fast path from outer annotation.
+		expect(js.code).toContain('_$_.update(');
+		expect(js.code).not.toContain('[0]');
+		expect(js.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 { js } = compile(source, 'tracked-nested-lazy-tuple-rest.ripple', { mode: 'client' });
+
+		// Tuple rest element access should resolve to Tracked<number>, not Tracked<number>[].
+		expect(js.code).toContain('_$_.update(');
+		expect(js.code).not.toContain('[1]');
+	});
+
 	it('preserves generic type args in interface extends for Volar mappings', () => {
 		const source = `
 interface PolymorphicProps<T extends keyof HTMLElementTagNameMap> {
@@ -414,16 +467,16 @@ export component App() {
 		const code = `
 component Card(props) {
 	<div class="card">
-		<props.children />
+		{props.children}
 	</div>
 }
 
 export component App() {
-	<Card>
 		component children() {
 			<p>{'Card content here'}</p>
 		}
-	</Card>
+
+		<Card {children} />
 
 	const test = 5;
 
@@ -433,7 +486,7 @@ export component App() {
 		expect(() => compile(code, 'test.ripple')).not.toThrow();
 	});
 
-	it('converts nested component children into props in Volar mappings', () => {
+	it('rejects component declarations inside composite children', () => {
 		const source = `
 export component App() {
 	<ark.div class="host-class" data-value="42">
@@ -442,12 +495,48 @@ export component App() {
 		}
 	</ark.div>
 }
+`;
+
+		expect(() => compile_to_volar_mappings(source, 'test.ripple')).toThrow(
+			/Component declarations cannot be used inside composite component children/,
+		);
+	});
+
+	it('preserves explicit component props in Volar mappings', () => {
+		const source = `
+export component App() {
+	component asChild({ children, href, ...rest }: { href: string; [key: string]: any }) {
+		<a id="aschild-anchor" {href} {...rest} data-extra="yes">{'Link'}</a>
+	}
+
+	<ark.div class="host-class" data-value="42" {asChild} />
+}
 `;
 		const result = compile_to_volar_mappings(source, 'test.ripple').code;
 
-		expect(result).toContain('<ark.div class="host-class" data-value="42" asChild={');
+		expect(result).toContain('<ark.div class="host-class" data-value="42" asChild={asChild}');
 		expect(result).not.toContain('children={() =>');
-		expect(result).not.toContain('function asChild');
+	});
+
+	it('merges explicit children prop with implicit children in client 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: 'client' }).js.code;
+
+		expect((result.match(/children:/g) || []).length).toBe(1);
+		expect(result).toContain('children: _$_.normalize_children(fallback) ?? _$_.ripple_element(');
 	});
 
 	it('should not error on `this` MemberExpression with a UpdateExpression', () => {

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

@@ -1,5 +1,5 @@
 import type { Tracked, Props } from 'ripple';
-import { effect, flushSync, track, trackSplit } from 'ripple';
+import { effect, flushSync, track } from 'ripple';
 
 describe('composite > props', () => {
 	it('correctly handles default prop values', () => {
@@ -106,11 +106,8 @@ describe('composite > props', () => {
 	});
 
 	it('correctly retains prop accessors and reactivity when using rest props', () => {
-		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;
@@ -121,10 +118,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/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/composite/composite.render.test.ripple

@@ -32,20 +32,22 @@ describe('composite > render', () => {
 		component Button({ A, B, children }: { A: () => void; B: () => void; children: () => void }) {
 			<div>
 				<A />
-				<children />
+				{children}
 				<B />
 			</div>
 		}
 
 		component App() {
-			<Button>
-				component A() {
-					<div>{'I am A'}</div>
-				}
+			component A() {
+				<div>{'I am A'}</div>
+			}
+
+			component B() {
+				<div>{'I am B'}</div>
+			}
+
+			<Button {A} {B}>
 				<div>{'other text'}</div>
-				component B() {
-					<div>{'I am B'}</div>
-				}
 			</Button>
 		}
 
@@ -62,21 +64,51 @@ describe('composite > render', () => {
 		}
 
 		component Child({ children, ...rest }: { children: string; class: string }) {
-			<button {...rest}>
-				<children />
-			</button>
+			<button {...rest}>{children}</button>
 		}
 
 		render(App);
 		expect(container).toMatchSnapshot();
 	});
 
+	it('renders explicit text around children', () => {
+		component Frame({ children }) {
+			<div class="frame">
+				{text 'before'}
+				{children}
+				{text 'after'}
+			</div>
+		}
+
+		component App() {
+			<Frame>
+				<span class="middle">{'middle'}</span>
+			</Frame>
+		}
+
+		render(App);
+
+		const frame = /** @type {HTMLDivElement} */ (container.querySelector('.frame'));
+		const nodes = Array.from(frame.childNodes).filter(
+			(node) => node.nodeType !== Node.COMMENT_NODE,
+		);
+
+		expect(nodes).toHaveLength(3);
+		expect(nodes[0].nodeType).toBe(Node.TEXT_NODE);
+		expect(nodes[0].textContent).toBe('before');
+		expect((/** @type {HTMLElement} */ (nodes[1])).outerHTML).toBe(
+			'<span class="middle">middle</span>',
+		);
+		expect(nodes[2].nodeType).toBe(Node.TEXT_NODE);
+		expect(nodes[2].textContent).toBe('after');
+	});
+
 	it('preserves distinct scoped ripple hashes for wrapper and child content', () => {
 		component App() {
 			component Wrapper({ children }) {
 				<div class="green">
 					{'Wrapper'}
-					<children />
+					{children}
 				</div>
 
 				<style>
@@ -141,7 +173,7 @@ describe('composite > render', () => {
 			[key: string]: any;
 		}) {
 			<div {...props}>
-				<children />
+				{children}
 				// @ts-expect-error - intentionally testing behavior when a component is undefined
 				<NonExistent />
 			</div>

package/tests/client/css/global-additional-cases.test.ripple

@@ -353,7 +353,7 @@ export component Test({ children }) {
 	<div>
 		<p class="before">{'before'}</p>
 
-		<children />
+		{children}
 
 		<p class="foo">
 			<span>{'foo'}</span>
@@ -379,8 +379,8 @@ export component Test({ children }) {
 		const { css } = compile(source, 'test.ripple');
 
 		expect(css).toMatch(/\.before\.ripple-[a-z0-9]+ \+ \.foo:where\(\.ripple-[a-z0-9]+\) {/);
-		expect((css.match(/\.x\ /g) || []).length).toBe(5);
-		expect((css.match(/\(unused\) :global\(\.x\) /g) || []).length).toBe(1);
+		expect((css.match(/\.x\ /g) || []).length).toBe(0);
+		expect((css.match(/\(unused\) :global\(\.x\) /g) || []).length).toBe(6);
 		expect(css).toContain('(unused) :global(.x) + .bar {');
 	});