ripple 0.3.9 → 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,9 +87,7 @@ export component Layout(props) {
 	<div>{props.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 calling children as a function in SSR mode', () => {
@@ -101,7 +97,7 @@ export component Layout({ 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 />`.',
+			'`children` cannot be called like a regular function. Render it with `{children}` or `{props.children}` instead.',
 		);
 	});
 
@@ -112,9 +108,30 @@ export component Layout(props) {
 }`;
 
 		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 />`.',
+			'`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

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

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/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;