ripple 0.3.9 → 0.3.10

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>
 			}
 		}
 

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>

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

package/tests/client/svg.test.ripple

@@ -234,7 +234,7 @@ describe('SVG namespace handling', () => {
 	it('should render SVG with children as svg elements', () => {
 		component SVG({ children }: PropsWithChildren<{}>) {
 			<svg width={20} height={20} fill="blue" viewBox="0 0 30 10" preserveAspectRatio="none">
-				<children />
+				{children}
 			</svg>
 		}
 
@@ -285,7 +285,7 @@ describe('SVG namespace handling', () => {
 	it('should render SVG with children as dynamic elements', () => {
 		component SVG({ children }: PropsWithChildren<{}>) {
 			<svg width={20} height={20} fill="blue" viewBox="0 0 30 10" preserveAspectRatio="none">
-				<children />
+				{children}
 			</svg>
 		}
 
@@ -308,7 +308,7 @@ describe('SVG namespace handling', () => {
 	it('should render SVG with children as dynamic components', () => {
 		component SVG({ children }: PropsWithChildren<{}>) {
 			<svg width={20} height={20} fill="blue" viewBox="0 0 30 10" preserveAspectRatio="none">
-				<children />
+				{children}
 			</svg>
 		}
 
@@ -336,7 +336,7 @@ describe('SVG namespace handling', () => {
 		component SVG({ children }: PropsWithChildren<{}>) {
 			let &[tag] = track('svg');
 			<@tag width={100} height={50} fill="red" viewBox="0 0 30 10" preserveAspectRatio="none">
-				<children />
+				{children}
 			</@tag>
 		}
 

package/tests/hydration/basic.test.js

@@ -1,4 +1,5 @@
 import { describe, it, expect } from 'vitest';
+import { flushSync } from 'ripple';
 import { hydrateComponent, container } from '../setup-hydration.js';
 
 // Import server-compiled components
@@ -59,6 +60,28 @@ describe('hydration > basic', () => {
 		expect(container.innerHTML).toBeHtml('<div>42</div><span>COMPUTED</span>');
 	});
 
+	it('restores text children after hydrating away initial server text', async () => {
+		await hydrateComponent(
+			ServerComponents.TextPropWithToggle,
+			ClientComponents.TextPropWithToggle,
+		);
+
+		expect(container.querySelector('.text-prop')?.textContent).toBe('');
+
+		/** @type {any} */ (container.querySelector('.show-text'))?.click();
+		flushSync();
+
+		expect(container.querySelector('.text-prop')?.textContent).toBe('hello');
+
+		// Verify text is placed between hydration markers, not before anchor
+		const innerHTML = container.querySelector('.text-prop')?.innerHTML ?? '';
+		const textIndex = innerHTML.indexOf('hello');
+		const startMarker = innerHTML.indexOf('<!--[-->');
+		const endMarker = innerHTML.indexOf('<!--]-->');
+		expect(textIndex).toBeGreaterThan(startMarker);
+		expect(textIndex).toBeLessThan(endMarker);
+	});
+
 	it('hydrates static child component followed by sibling content', async () => {
 		await hydrateComponent(
 			ServerComponents.StaticChildWithSiblings,