ripple 0.3.9 → 0.3.11

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

@@ -7,21 +7,20 @@ import type {
 	PropsWithChildrenOptional,
 } from 'ripple';
 import { flushSync, track } from 'ripple';
+import { did_error } from '../capture-error.js';
 
 describe('basic client > components & composition', () => {
 	it('renders with component composition and children', () => {
 		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} />
 		}
 
 		render(Basic);
@@ -37,17 +36,17 @@ describe('basic client > components & composition', () => {
 		component Card(props: PropsWithChildrenOptional<{ test?: Component }>) {
 			<div class="card">
 				if (props.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} />
 		}
 
 		render(Basic);
@@ -59,22 +58,23 @@ describe('basic client > components & composition', () => {
 		expect(paragraph).toBeFalsy();
 	});
 
-	it('allows tracked variable and slot component with same name in nested scope', () => {
+	it('allows tracked variables alongside explicit component props', () => {
 		component Card(props: PropsWithChildrenOptional<{ test?: Component }>) {
 			<div class="card">
 				if (props.children) {
-					<props.children />
+					{props.children}
 				}
 			</div>
 		}
 
 		component Basic() {
 			let &[test] = track(false);
-			<Card>
-				component test() {
-					<p>{'Card content here'}</p>
-				}
-			</Card>
+
+			component TestSlot() {
+				<p>{'Card content here'}</p>
+			}
+
+			<Card test={TestSlot} />
 			<div>{test ? 'yes' : 'no'}</div>
 		}
 
@@ -90,9 +90,7 @@ describe('basic client > components & composition', () => {
 
 	it('renders a component when children is set a component prop', () => {
 		component Card(props: PropsWithChildren<{}>) {
-			<div class="card">
-				<props.children />
-			</div>
+			<div class="card">{props.children}</div>
 		}
 
 		component Basic() {
@@ -211,6 +209,28 @@ describe('basic client > components & composition', () => {
 		expect(countDiv.textContent).toBe('3');
 	});
 
+	it('updates explicit text children props reactively', () => {
+		component TextProp(&{ children }: PropsWithChildren<{}>) {
+			<div class="text-prop">{children}</div>
+		}
+
+		component Basic() {
+			let &[show] = track(false);
+
+			<TextProp children={show ? 'hello' : ''} />
+			<button class="show-text" onClick={() => (show = true)}>{'Show'}</button>
+		}
+
+		render(Basic);
+
+		expect(container.querySelector('.text-prop')?.textContent).toBe('');
+
+		container.querySelector('.show-text')?.click();
+		flushSync();
+
+		expect(container.querySelector('.text-prop')?.textContent).toBe('hello');
+	});
+
 	it('it retains this context with bracketed prop functions and keeps original chaining', () => {
 		component App() {
 			const SYMBOL_PROP = Symbol();
@@ -233,60 +253,40 @@ describe('basic client > components & composition', () => {
 
 			const obj2 = null;
 
+			function trigger_nonexistent() {
+				hasError = did_error(() => {
+					// @ts-ignore
+					obj['nonexistent']();
+				});
+			}
+
+			function trigger_nonexistent_chaining() {
+				hasError = did_error(() => {
+					// @ts-ignore
+					obj['nonexistent']?.();
+				});
+			}
+
+			function trigger_object_null() {
+				hasError = did_error(() => {
+					// @ts-ignore
+					obj2['nonexistent']();
+				});
+			}
+
+			function trigger_object_null_chained() {
+				hasError = did_error(() => {
+					// @ts-ignore
+					obj2?.['nonexistent']?.();
+				});
+			}
+
 			<button onClick={() => obj['increment']()}>{'Increment'}</button>
 			<button onClick={() => obj[SYMBOL_PROP]()}>{'Increment'}</button>
-			<button
-				onClick={() => {
-					hasError = false;
-					try {
-						// @ts-ignore
-						obj['nonexistent']();
-					} catch {
-						hasError = true;
-					}
-				}}
-			>
-				{'Nonexistent'}
-			</button>
-			<button
-				onClick={() => {
-					hasError = false;
-					try {
-						// @ts-ignore
-						obj['nonexistent']?.();
-					} catch {
-						hasError = true;
-					}
-				}}
-			>
-				{'Nonexistent chaining'}
-			</button>
-			<button
-				onClick={() => {
-					hasError = false;
-					try {
-						// @ts-ignore
-						obj2['nonexistent']();
-					} catch {
-						hasError = true;
-					}
-				}}
-			>
-				{'Object null'}
-			</button>
-			<button
-				onClick={() => {
-					hasError = false;
-					try {
-						// @ts-ignore
-						obj2?.['nonexistent']?.();
-					} catch {
-						hasError = true;
-					}
-				}}
-			>
-				{'Object null chained'}
-			</button>
+			<button onClick={trigger_nonexistent}>{'Nonexistent'}</button>
+			<button onClick={trigger_nonexistent_chaining}>{'Nonexistent chaining'}</button>
+			<button onClick={trigger_object_null}>{'Object null'}</button>
+			<button onClick={trigger_object_null_chained}>{'Object null chained'}</button>
 			<button onClick={() => obj.arr[obj.arr.length - 1]()}>{'BinaryExpression prop'}</button>
 
 			<span>{obj.count.value}</span>
@@ -346,21 +346,19 @@ describe('basic client > 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>
 		}
 
@@ -378,13 +376,13 @@ describe('basic client > components & composition', () => {
 
 	it('handles empty string children', () => {
 		component Button({ children }: PropsWithChildren<{}>) {
-			<children />
+			{children}
 		}
 
 		component App() {
-			let text = '';
+			let content = '';
 			<Button>{''}</Button>
-			<Button>{text}</Button>
+			<Button>{content}</Button>
 		}
 
 		expect(() => {

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

@@ -70,9 +70,7 @@ describe('basic client > errors', () => {
 
 		expect(() => {
 			compile(code, 'test.ripple');
-		}).toThrow(
-			'`children` cannot be rendered using text interpolation. Use `<children />` instead.',
-		);
+		}).not.toThrow();
 	});
 
 	it('should throw error for interpolating props.children as text', () => {
@@ -84,9 +82,7 @@ describe('basic client > errors', () => {
 
 		expect(() => {
 			compile(code, 'test.ripple');
-		}).toThrow(
-			'`children` cannot be rendered using text interpolation. Use `<children />` instead.',
-		);
+		}).not.toThrow();
 	});
 
 	it('should throw error for calling children as a function', () => {
@@ -99,7 +95,7 @@ describe('basic client > errors', () => {
 		expect(() => {
 			compile(code, 'test.ripple');
 		}).toThrow(
-			'`children` cannot be called like a regular function. Use element syntax instead, e.g. `<children />` or `<props.children />`.',
+			'`children` cannot be called like a regular function. Render it with `{children}` or `{props.children}` instead.',
 		);
 	});
 
@@ -113,7 +109,7 @@ describe('basic client > errors', () => {
 		expect(() => {
 			compile(code, 'test.ripple');
 		}).toThrow(
-			'`children` cannot be called like a regular function. Use element syntax instead, e.g. `<children />` or `<props.children />`.',
+			'`children` cannot be called like a regular function. Render it with `{children}` or `{props.children}` instead.',
 		);
 	});
 

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>
 			}
 		}
 
@@ -152,8 +167,10 @@ describe('basic client > rendering & text', () => {
 	it('basic operations', () => {
 		component App() {
 			let &[count] = track(0);
-			<div>{count++}</div>
-			<div>{++count}</div>
+			const a = count++;
+			const b = ++count;
+			<div>{a}</div>
+			<div>{b}</div>
 			<div>{5}</div>
 			<div>{count}</div>
 		}

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>;
@@ -433,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;
 
@@ -452,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">
@@ -461,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

@@ -107,9 +107,7 @@ describe('composite > props', () => {
 
 	it('correctly retains prop accessors and reactivity when using rest props', () => {
 		component Button(&{ children, ...rest }: Props) {
-			<button {...rest}>
-				<@children />
-			</button>
+			<button {...rest}>{children}</button>
 			<style>
 				.on {
 					color: blue;

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>
@@ -160,3 +192,49 @@ describe('composite > render', () => {
 		expect(div.innerHTML).not.toContain('<undefined');
 	});
 });
+
+describe('scoped styles with children', () => {
+	it('generates correct CSS hashes for wrapper and child with empty style in App', () => {
+		component Wrapper(&{ children }: { children?: Component }) {
+			<div class="green">
+				{'Wrapper'}
+				{children}
+			</div>
+
+			<style>
+				.green {
+					color: green;
+				}
+			</style>
+		}
+
+		component Child() {
+			<div class="red">{'Child'}</div>
+
+			<style>
+				.red {
+					color: red;
+				}
+			</style>
+		}
+
+		component App() {
+			<Wrapper>
+				<Child />
+			</Wrapper>
+			<style></style>
+		}
+
+		render(App);
+
+		const wrapper = container.querySelector('.green');
+		const child = container.querySelector('.red');
+
+		const wrapper_classes = Array.from(wrapper.classList).filter((c) => c.startsWith('ripple-'));
+		const child_classes = Array.from(child.classList).filter((c) => c.startsWith('ripple-'));
+
+		expect(wrapper_classes).toHaveLength(1);
+		expect(child_classes).toHaveLength(1);
+		expect(wrapper_classes[0]).not.toBe(child_classes[0]);
+	});
+});

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 {');
 	});