ripple 0.3.9 → 0.3.11

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/tests/utils/compiler-compat-config.test.js

@@ -0,0 +1,38 @@
+import { describe, expect, it } from 'vitest';
+import { compile } from 'ripple/compiler';
+
+const source = `
+component App() {
+	<tsx:react>
+		<div className="react-content">{'Hello'}</div>
+	</tsx:react>
+}
+`;
+
+describe('compiler tsx compat configuration', () => {
+	it('allows tsx compat when no compat config is provided', () => {
+		expect(() =>
+			compile(source, '/src/App.ripple', {
+				mode: 'client',
+			}),
+		).not.toThrow();
+	});
+
+	it('throws when tsx compat kind is not configured', () => {
+		expect(() =>
+			compile(source, '/src/App.ripple', {
+				mode: 'client',
+				compat_kinds: [],
+			}),
+		).toThrow('<tsx:react> requires "react" compat to be configured in ripple.config.ts.');
+	});
+
+	it('allows tsx compat kinds that are configured', () => {
+		expect(() =>
+			compile(source, '/src/App.ripple', {
+				mode: 'client',
+				compat_kinds: ['react'],
+			}),
+		).not.toThrow();
+	});
+});

package/tests/utils/vite-plugin-config.test.js

@@ -0,0 +1,113 @@
+import { describe, expect, it } from 'vitest';
+import { RenderRoute, resolveRippleConfig } from '@ripple-ts/vite-plugin';
+
+const fake_compat_factory = Object.assign(
+	() =>
+		Object.assign(
+			{
+				createComponent() {},
+				createRoot() {
+					return () => {};
+				},
+			},
+			{
+				__ripple_compat__: {
+					from: '@ripple-ts/compat-react',
+					factory: 'createReactCompat',
+				},
+			},
+		),
+	{
+		__ripple_compat__: {
+			from: '@ripple-ts/compat-react',
+			factory: 'createReactCompat',
+		},
+	},
+);
+
+describe('vite-plugin-ripple config resolution', () => {
+	it('preserves compat descriptors and applies defaults', () => {
+		const config = resolveRippleConfig({
+			router: {
+				routes: [
+					new RenderRoute({
+						path: '/',
+						entry: '/src/App.ripple',
+					}),
+				],
+			},
+			compat: {
+				react: {
+					from: '@ripple-ts/compat-react',
+					factory: 'createReactCompat',
+				},
+			},
+		});
+
+		expect(config.compat).toEqual({
+			react: {
+				from: '@ripple-ts/compat-react',
+				factory: 'createReactCompat',
+			},
+		});
+		expect(config.middlewares).toEqual([]);
+		expect(config.platform.env).toEqual({});
+		expect(config.server.trustProxy).toBe(false);
+	});
+
+	it('defaults compat to an empty object', () => {
+		const config = resolveRippleConfig({
+			router: {
+				routes: [],
+			},
+		});
+
+		expect(config.compat).toEqual({});
+	});
+
+	it('allows compat-only configs without routes', () => {
+		const config = resolveRippleConfig({
+			compat: {
+				react: fake_compat_factory,
+			},
+		});
+
+		expect(config.router.routes).toEqual([]);
+		expect(config.compat.react).toEqual({
+			from: '@ripple-ts/compat-react',
+			factory: 'createReactCompat',
+		});
+	});
+
+	it('normalizes imported compat factories to descriptors', () => {
+		const config = resolveRippleConfig({
+			router: {
+				routes: [],
+			},
+			compat: {
+				react: fake_compat_factory,
+			},
+		});
+
+		expect(config.compat.react).toEqual({
+			from: '@ripple-ts/compat-react',
+			factory: 'createReactCompat',
+		});
+	});
+
+	it('normalizes invoked compat entries to descriptors', () => {
+		const config = resolveRippleConfig({
+			router: {
+				routes: [],
+			},
+			compat: {
+				react: fake_compat_factory(),
+			},
+		});
+
+		expect(config.compat.react).toEqual({
+			from: '@ripple-ts/compat-react',
+			factory: 'createReactCompat',
+		});
+	});
+});

package/tsconfig.typecheck.json

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

package/types/index.d.ts

@@ -1,26 +1,23 @@
 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 CompatApi = {
-	createRoot: () => void;
-	createComponent: (node: any, children_fn: () => any) => void;
-	jsx: (type: any, props: any) => any;
+export type RippleElement = {
+	readonly render: Function;
+	readonly [RIPPLE_ELEMENT]: true;
 };
 
-export type CompatOptions = {
-	[key: string]: CompatApi;
-};
+/** Type for implicit children fragments rendered with `{children}`. */
+export type Children = RippleElement;
 
 export function mount(
 	component: Component,
-	options: { target: HTMLElement; props?: Record<string, any>; compat?: CompatOptions },
+	options: { target: HTMLElement; props?: Record<string, any> },
 ): () => void;
 
 export function hydrate(
 	component: Component,
-	options: { target: HTMLElement; props?: Record<string, any>; compat?: CompatOptions },
+	options: { target: HTMLElement; props?: Record<string, any> },
 ): () => void;
 
 export function tick(): Promise<void>;