ripple 0.3.112 → 0.3.113

package/tests/hydration/compiled/server/track-async-serialization.js

@@ -24,7 +24,15 @@ function ServerCallResult({ count }) {
 		_$_.regular_block(() => {
 			let __out = '';
 
-			__out += '<p class="result">' + _$_.escape(lazy.value) + '</p>';
+			__out += '<p class="result">';
+
+			{
+				_$_.output_push(__out);
+				__out = '';
+				_$_.render_expression(lazy.value);
+			}
+
+			__out += '</p>';
 			_$_.output_push(__out);
 		});
 	});
@@ -89,7 +97,15 @@ export function AsyncSimpleValue() {
 				_$_.regular_block(() => {
 					let __out = '';
 
-					__out += '<p class="result">' + _$_.escape(lazy_2.value) + '</p>';
+					__out += '<p class="result">';
+
+					{
+						_$_.output_push(__out);
+						__out = '';
+						_$_.render_expression(lazy_2.value);
+					}
+
+					__out += '</p>';
 					_$_.output_push(__out);
 				});
 
@@ -134,7 +150,15 @@ export function AsyncNumericValue() {
 				_$_.regular_block(() => {
 					let __out = '';
 
-					__out += '<span class="count">' + _$_.escape(lazy_3.value) + '</span>';
+					__out += '<span class="count">';
+
+					{
+						_$_.output_push(__out);
+						__out = '';
+						_$_.render_expression(lazy_3.value);
+					}
+
+					__out += '</span>';
 					_$_.output_push(__out);
 				});
 
@@ -179,7 +203,23 @@ export function AsyncObjectValue() {
 				_$_.regular_block(() => {
 					let __out = '';
 
-					__out += '<div class="user"><span class="name">' + _$_.escape(lazy_4.value.name) + '</span><span class="age">' + _$_.escape(lazy_4.value.age) + '</span></div>';
+					__out += '<div class="user"><span class="name">';
+
+					{
+						_$_.output_push(__out);
+						__out = '';
+						_$_.render_expression(lazy_4.value.name);
+					}
+
+					__out += '</span><span class="age">';
+
+					{
+						_$_.output_push(__out);
+						__out = '';
+						_$_.render_expression(lazy_4.value.age);
+					}
+
+					__out += '</span></div>';
 					_$_.output_push(__out);
 				});
 
@@ -225,7 +265,23 @@ export function AsyncMultipleValues() {
 				_$_.regular_block(() => {
 					let __out = '';
 
-					__out += '<div class="multi"><span class="first">' + _$_.escape(lazy_5.value) + '</span><span class="second">' + _$_.escape(lazy_6.value) + '</span></div>';
+					__out += '<div class="multi"><span class="first">';
+
+					{
+						_$_.output_push(__out);
+						__out = '';
+						_$_.render_expression(lazy_5.value);
+					}
+
+					__out += '</span><span class="second">';
+
+					{
+						_$_.output_push(__out);
+						__out = '';
+						_$_.render_expression(lazy_6.value);
+					}
+
+					__out += '</span></div>';
 					_$_.output_push(__out);
 				});
 
@@ -270,7 +326,15 @@ export function AsyncWithCatch() {
 				_$_.regular_block(() => {
 					let __out = '';
 
-					__out += '<p class="result">' + _$_.escape(lazy_7.value) + '</p>';
+					__out += '<p class="result">';
+
+					{
+						_$_.output_push(__out);
+						__out = '';
+						_$_.render_expression(lazy_7.value);
+					}
+
+					__out += '</p>';
 					_$_.output_push(__out);
 				});
 
@@ -287,7 +351,15 @@ export function AsyncWithCatch() {
 				_$_.regular_block(() => {
 					let __out = '';
 
-					__out += '<p class="error">' + _$_.escape(e.message) + '</p>';
+					__out += '<p class="error">';
+
+					{
+						_$_.output_push(__out);
+						__out = '';
+						_$_.render_expression(e.message);
+					}
+
+					__out += '</p>';
 					_$_.output_push(__out);
 				});
 
@@ -331,7 +403,15 @@ export function ChildWithError() {
 				_$_.regular_block(() => {
 					let __out = '';
 
-					__out += '<p class="result">' + _$_.escape(lazy_8.value) + '</p>';
+					__out += '<p class="result">';
+
+					{
+						_$_.output_push(__out);
+						__out = '';
+						_$_.render_expression(lazy_8.value);
+					}
+
+					__out += '</p>';
 					_$_.output_push(__out);
 				});
 
@@ -392,7 +472,15 @@ export function ParentWithCatch() {
 				_$_.regular_block(() => {
 					let __out = '';
 
-					__out += '<p class="parent-error">' + _$_.escape(e.message) + '</p>';
+					__out += '<p class="parent-error">';
+
+					{
+						_$_.output_push(__out);
+						__out = '';
+						_$_.render_expression(e.message);
+					}
+
+					__out += '</p>';
 					_$_.output_push(__out);
 				});
 
@@ -411,7 +499,15 @@ function ReactiveDependencyResult({ count }) {
 		_$_.regular_block(() => {
 			let __out = '';
 
-			__out += '<p class="result">' + _$_.escape(lazy_9.value) + '</p>';
+			__out += '<p class="result">';
+
+			{
+				_$_.output_push(__out);
+				__out = '';
+				_$_.render_expression(lazy_9.value);
+			}
+
+			__out += '</p>';
 			_$_.output_push(__out);
 		});
 	});

package/tests/hydration/compiled/server/try.js

@@ -19,7 +19,15 @@ export function RootCatch({ error, reset }) {
 		_$_.regular_block(() => {
 			let __out = '';
 
-			__out += '<section class="root-catch"><p class="root-error">' + _$_.escape(error.message) + '</p><button class="root-reset">retry</button></section>';
+			__out += '<section class="root-catch"><p class="root-error">';
+
+			{
+				_$_.output_push(__out);
+				__out = '';
+				_$_.render_expression(error.message);
+			}
+
+			__out += '</p><button class="root-reset">retry</button></section>';
 			_$_.output_push(__out);
 		});
 	});
@@ -45,7 +53,15 @@ export function RootAsyncDirect() {
 		_$_.regular_block(() => {
 			let __out = '';
 
-			__out += '<p class="root-async-value">' + _$_.escape(lazy.value) + '</p>';
+			__out += '<p class="root-async-value">';
+
+			{
+				_$_.output_push(__out);
+				__out = '';
+				_$_.render_expression(lazy.value);
+			}
+
+			__out += '</p>';
 			_$_.output_push(__out);
 		});
 	});
@@ -58,7 +74,15 @@ export function RootAsyncRejects() {
 		_$_.regular_block(() => {
 			let __out = '';
 
-			__out += '<p class="root-async-value">' + _$_.escape(lazy_1.value) + '</p>';
+			__out += '<p class="root-async-value">';
+
+			{
+				_$_.output_push(__out);
+				__out = '';
+				_$_.render_expression(lazy_1.value);
+			}
+
+			__out += '</p>';
 			_$_.output_push(__out);
 		});
 	});
@@ -118,7 +142,15 @@ function AsyncList() {
 			__out += '<ul class="items"><!--[-->';
 
 			for (let item of lazy_2.value) {
-				__out += '<li>' + _$_.escape(item) + '</li>';
+				__out += '<li>';
+
+				{
+					_$_.output_push(__out);
+					__out = '';
+					_$_.render_expression(item);
+				}
+
+				__out += '</li>';
 			}
 
 			__out += '<!--]--></ul>';
@@ -175,7 +207,15 @@ function AsyncContent() {
 		_$_.regular_block(() => {
 			let __out = '';
 
-			__out += '<div class="resolved">' + _$_.escape(lazy_3.value) + '</div>';
+			__out += '<div class="resolved">';
+
+			{
+				_$_.output_push(__out);
+				__out = '';
+				_$_.render_expression(lazy_3.value);
+			}
+
+			__out += '</div>';
 			_$_.output_push(__out);
 		});
 	});

package/tests/hydration/components/basic.tsrx

@@ -326,3 +326,46 @@ export function NestedComponentAsLastSibling() @{
 		<InnerContent />
 	</section>
 }
+
+// A call-containing but provably-text-primitive expression following inlined
+// text: client and server must agree on the DOM shape for the text run.
+function fetchLabel() {
+	return 'fetched';
+}
+
+export function TextTailExpression() @{
+	<div>label: {String(fetchLabel())}</div>
+}
+
+export function FragmentTailExpression() @{
+	// prettier-ignore
+	<div><>{'frag-'}</>{String(fetchLabel())}</div>
+}
+
+export function FragmentChildOnly() @{
+	// prettier-ignore
+	<div><>{'frag-'}</><span>{'tail'}</span></div>
+}
+
+// Fragment-boundary marker prediction: the fragment brackets itself only when
+// its first renderable child emits its own markers — the prediction must match
+// what the expression visitor actually emits.
+function OpaqueLead(props: { header: unknown }) @{
+	// prettier-ignore
+	<>{props.header}<p>{'after-opaque'}</p></>
+}
+
+export function FragmentLeadsWithOpaqueValue() @{
+	// prettier-ignore
+	<div><OpaqueLead header={'H'} /></div>
+}
+
+function PrimitiveCallLead() @{
+	// prettier-ignore
+	<>{String(fetchLabel())}<p>{'after-call'}</p></>
+}
+
+export function FragmentLeadsWithPrimitiveCall() @{
+	// prettier-ignore
+	<div><PrimitiveCallLead /></div>
+}

package/tests/server/basic.test.tsrx

@@ -598,4 +598,34 @@ second
 			'<div class="block-function">function inner / function outer</div><div class="block-arrow">22</div><div class="block-method">method inner / method outer</div>',
 		);
 	});
+
+	it('renders a template element inside an expression container child', async () => {
+		function App() @{
+			<div>
+				{<h1>
+					@if (true) {
+						<span>{'yes'}</span>
+					} @else {
+						<span>{'no'}</span>
+					}
+				</h1>}
+			</div>
+		}
+
+		const { body } = await render(App);
+		expect(body).toContain('<h1>');
+		expect(body).toContain('<span>yes</span>');
+		expect(body).not.toContain('<span>no</span>');
+	});
+
+	it('renders a bigint merged into a text run after a string', async () => {
+		function App() @{
+			const label = 'big:';
+			// prettier-ignore
+			<div>{label}{1n}</div>
+		}
+
+		const { body } = await render(App);
+		expect(body).toContain('<div>big:1</div>');
+	});
 });

package/tests/server/compiler.test.tsrx

@@ -226,6 +226,10 @@ function tag() {
 const values = { member: 0 };`;
 
 		const cases = [
+			// Call-containing but provably-text-primitive expressions — `empty() + ''`,
+			// `\`${empty()}\``, `void empty()`, `values[getKey()]++` — are NOT in this
+			// list: they cannot hold an element, so they DO merge into the text run
+			// (see 'merges provably-primitive call-containing children').
 			{ name: 'call expression', expression: 'child(\'call\')' },
 			{ name: 'new expression', expression: 'new Constructed(\'new\')' },
 			{ name: 'chain expression', expression: 'factory?.(\'chain\')' },
@@ -239,7 +243,6 @@ const values = { member: 0 };`;
 			},
 			{ name: 'array expression', expression: '[child(\'array\')]' },
 			{ name: 'assignment expression', expression: 'assigned = child(\'assignment\')' },
-			{ name: 'binary expression', expression: 'empty() + \'\'' },
 			{ name: 'logical expression', expression: 'true && child(\'logical\')' },
 			{ name: 'conditional expression', expression: 'true ? child(\'conditional\') : \'\'' },
 			{ name: 'member expression', expression: 'lookup[getKey()]' },
@@ -249,9 +252,6 @@ const values = { member: 0 };`;
 			},
 			{ name: 'sequence expression', expression: '(touch(), child(\'sequence\'))' },
 			{ name: 'tagged template expression', expression: 'tag`tagged`' },
-			{ name: 'template literal', expression: '`${empty()}`' },
-			{ name: 'unary expression', expression: 'void empty()' },
-			{ name: 'update expression', expression: 'values[getKey()]++' },
 		];
 
 		for (const test_case of cases) {
@@ -268,6 +268,31 @@ export function App() @{
 		}
 	});
 
+	it(
+		'merges provably-primitive call-containing children into one escaped text run in SSR output',
+		() => {
+			const source = `function empty() {
+	return null;
+}
+function fetchLabel() {
+	return 'fetched';
+}
+export function App() @{
+		<div>{'label:'}{void empty()}{String(fetchLabel())}</div>
+}`;
+
+			const { code } = compile(source, 'primitive-merge.tsrx', { mode: 'server' });
+
+			// One escaped text run — no render_expression, no hydration markers; a
+			// provably-string child concatenates bare (no String(… ?? '') wrap).
+			expect(code).toContain(
+				'_$_.escape(\'label:\' + (String(void empty() ?? \'\') + String(fetchLabel())))',
+			);
+			expect(code).not.toContain('render_expression');
+			expect(code).not.toContain('String(String(');
+		},
+	);
+
 	it('decodes JSX-style entities before server text escaping', () => {
 		const result = compile(
 			`function App() @{

package/tests/server/composite.props.test.tsrx

@@ -164,4 +164,30 @@ describe('composite > props', () => {
 		expect(document.querySelector('p').textContent).toBe('Description 1');
 		expect(document.querySelector('price').textContent).toBe('15');
 	});
+
+	it('renders a template element passed inline as a prop', async () => {
+		// `props.header` is not provably a string, so it renders through
+		// `render_expression`, which recognizes template-element values —
+		// inline escaping would stringify the element to `[object Object]`.
+		function Child(props: { header: unknown }) @{
+			<div>{props.header}</div>
+		}
+
+		function App() @{
+			<Child
+				header={<h1>
+					@if (true) {
+						<span>{'yes'}</span>
+					} @else {
+						<span>{'no'}</span>
+					}
+				</h1>}
+			/>
+		}
+
+		const { body } = await render(App);
+		expect(body).toContain('<h1>');
+		expect(body).toContain('<span>yes</span>');
+		expect(body).not.toContain('<span>no</span>');
+	});
 });

package/tests/server/streaming-ssr.test.tsrx

@@ -203,7 +203,7 @@ describe('streaming try/pending boundaries', () => {
 		const id = slot_match![1];
 		const chunk = chunks[1];
 		expect(chunk).toContain(`<template data-ripple-chunk="${id}">`);
-		expect(chunk).toContain('<p>async-data</p>');
+		expect(chunk).toContain('<p><!--[-->async-data<!--]--></p>');
 		// static markup after the suspension point belongs to the chunk
 		// (regression: it used to be lost when the boundary cleared its buffer)
 		expect(chunk).toContain('<footer>static-after</footer>');
@@ -242,7 +242,7 @@ describe('streaming try/pending boundaries', () => {
 		await result;
 
 		const chunk = chunks[chunks.length - 1];
-		expect(chunk).toContain('<p>body</p>');
+		expect(chunk).toContain('<p><!--[-->body<!--]--></p>');
 		expect(chunk).not.toContain('failed');
 	});
 
@@ -272,7 +272,7 @@ describe('streaming try/pending boundaries', () => {
 
 		const all = chunks.join('');
 		const chunk = chunks[chunks.length - 1];
-		expect(chunk).toContain('<em>boom</em>');
+		expect(chunk).toContain('<em><!--[-->boom<!--]--></em>');
 		expect(chunk).toContain('<template data-ripple-chunk=');
 		// the rejected trackAsync envelope reaches the wire before the chunk
 		// that hydrates the catch branch from it
@@ -380,8 +380,8 @@ describe('streaming nested and sibling boundaries', () => {
 
 		expect(chunks).toHaveLength(2);
 		const chunk = chunks[1];
-		expect(chunk).toContain('<p class="outer">outer-done</p>');
-		expect(chunk).toContain('<p class="inner">inner-done</p>');
+		expect(chunk).toContain('<p class="outer"><!--[-->outer-done<!--]--></p>');
+		expect(chunk).toContain('<p class="inner"><!--[-->inner-done<!--]--></p>');
 		// coalesced: the inner boundary is inlined, no open slot, no fallback
 		expect(chunk).not.toContain('inner-loading');
 		expect(chunk).not.toMatch(SLOT_OPEN_RE);
@@ -402,7 +402,7 @@ describe('streaming nested and sibling boundaries', () => {
 
 		expect(chunks).toHaveLength(2);
 		const parent_chunk = chunks[1];
-		expect(parent_chunk).toContain('<p class="outer">outer-done</p>');
+		expect(parent_chunk).toContain('<p class="outer"><!--[-->outer-done<!--]--></p>');
 		// the child is still pending: its slot (wrapper + fallback) ships
 		// inside the parent chunk
 		expect(parent_chunk).toContain('inner-loading');
@@ -412,7 +412,7 @@ describe('streaming nested and sibling boundaries', () => {
 		await result;
 
 		expect(chunks).toHaveLength(3);
-		expect(chunks[2]).toContain('<p class="inner">inner-done</p>');
+		expect(chunks[2]).toContain('<p class="inner"><!--[-->inner-done<!--]--></p>');
 	});
 
 	it('streams sibling boundaries out of order, as each settles', async () => {
@@ -603,7 +603,7 @@ describe('streaming with a document template', () => {
 		expect(isClosed()).toBe(true);
 		// the suffix is the final push, after the last chunk
 		expect(chunks[chunks.length - 1]).toBe('</div></body></html>');
-		expect(chunks[chunks.length - 2]).toContain('<p>done</p>');
+		expect(chunks[chunks.length - 2]).toContain('<p><!--[-->done<!--]--></p>');
 	});
 });
 
@@ -647,7 +647,7 @@ describe('streaming head content', () => {
 		expect(chunk).toMatch(
 			/<template data-ripple-head="\d+">[\s\S]*?<title>title:late<\/title>[\s\S]*?<\/template>/,
 		);
-		expect(chunk).toContain('<p class="has-head">late</p>');
+		expect(chunk).toContain('<p class="has-head"><!--[-->late<!--]--></p>');
 		// the head template precedes the content template
 		expect(chunk.indexOf('data-ripple-head')).toBeLessThan(chunk.indexOf('data-ripple-chunk'));
 	});

package/tests/server/track-async-serialization.test.tsrx

@@ -66,7 +66,7 @@ describe('trackAsync serialization (server)', () => {
 		}
 
 		const { body } = await render(App);
-		expect(body).toContain('<li>a</li>');
+		expect(body).toContain('<li><!--[-->a<!--]--></li>');
 		expect(body).toContain('__ripple_ta_');
 	});
 
@@ -84,7 +84,7 @@ describe('trackAsync serialization (server)', () => {
 
 		const { body } = await render(App);
 		const public_message = DEV ? 'fetch failed' : TRACK_ASYNC_PUBLIC_ERROR_MESSAGE;
-		expect(body).toContain(`<p class="error">${public_message}</p>`);
+		expect(body).toContain(`<p class="error"><!--[-->${public_message}<!--]--></p>`);
 		expect(body).toContain('__ripple_ta_');
 		expect(body).toContain('"ok":false');
 		expect(body).toContain(`"message":"${public_message}"`);
@@ -110,7 +110,7 @@ describe('trackAsync serialization (server)', () => {
 
 		const { body } = await render(Parent);
 		const public_message = DEV ? 'child error' : TRACK_ASYNC_PUBLIC_ERROR_MESSAGE;
-		expect(body).toContain(`<p class="parent-error">${public_message}</p>`);
+		expect(body).toContain(`<p class="parent-error"><!--[-->${public_message}<!--]--></p>`);
 		expect(body).toContain('__ripple_ta_');
 		expect(body).toContain('"ok":false');
 		expect(body).toContain(`"message":"${public_message}"`);
@@ -132,7 +132,7 @@ describe('trackAsync serialization (server)', () => {
 
 		const { body } = await render(App);
 		const public_message = DEV ? 'sync failure' : TRACK_ASYNC_PUBLIC_ERROR_MESSAGE;
-		expect(body).toContain(`<p class="error">${public_message}</p>`);
+		expect(body).toContain(`<p class="error"><!--[-->${public_message}<!--]--></p>`);
 		expect(body).toContain('__ripple_ta_');
 		expect(body).toContain('"ok":false');
 		expect(body).toContain(`"message":"${public_message}"`);

package/tests/types/component-return.ts

@@ -0,0 +1,48 @@
+// Compile-only assertions for `Component`'s return type. `mount`, `hydrate`,
+// and the server `render` all take a `Component`, so this type decides which
+// components typecheck at their call sites. The accepted values below are the
+// ones both runtimes render (see `render_value` in
+// src/runtime/internal/client/expression.js and `render_expression` in
+// src/runtime/internal/server/index.js); the rejected ones fall through to
+// stringification or throw.
+import type { Component } from 'ripple';
+
+const returns_nothing: Component = () => {};
+const returns_string: Component = () => 'text';
+const returns_number: Component = () => 42;
+const returns_bigint: Component = () => 1n;
+const returns_boolean: Component = () => true;
+const returns_null: Component = () => null;
+const returns_undefined: Component = () => undefined;
+const returns_array: Component = () => ['text', 42, null, ['nested']];
+
+// A component that only sometimes returns early still has to typecheck.
+const returns_union: Component<{ ready: boolean }> = (props) => {
+	if (!props.ready) {
+		return 'Waiting';
+	}
+};
+
+// @ts-expect-error promises are not awaited by either runtime
+const returns_promise: Component = async () => 'text';
+
+// @ts-expect-error a function is stringified, not called
+const returns_function: Component = () => () => 'text';
+
+// @ts-expect-error the client throws on `symbol + ''`
+const returns_symbol: Component = () => Symbol('nope');
+
+export type {};
+
+void returns_nothing;
+void returns_string;
+void returns_number;
+void returns_bigint;
+void returns_boolean;
+void returns_null;
+void returns_undefined;
+void returns_array;
+void returns_union;
+void returns_promise;
+void returns_function;
+void returns_symbol;

package/tests/utils/runtime-imports.test.js

@@ -36,7 +36,11 @@ describe('runtime imports', () => {
 		expect(barrel_imports).toEqual([]);
 	});
 
-	it('exports Fragment from both public runtimes', async () => {
+	// Pulls both entire runtime module graphs through vite's transform pipeline
+	// on a cold cache, which can take well past the 5s default when the rest of
+	// the suite is competing for workers. The assertion is about exports, not
+	// speed, so give the imports room rather than letting load decide.
+	it('exports Fragment from both public runtimes', { timeout: 30_000 }, async () => {
 		const [client, server] = await Promise.all([
 			import('../../src/runtime/index-client.js'),
 			import('../../src/runtime/index-server.js'),

package/tsconfig.typecheck.json

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

package/types/index.d.ts

@@ -2,7 +2,7 @@ import type { ExtendedEventOptions } from '@tsrx/core/types';
 export type { RefValue } from '@tsrx/core/runtime/ref';
 export type { AddEventOptions, AddEventObject, ExtendedEventOptions } from '@tsrx/core/types';
 
-export type Component<T = Record<string, any>> = (props: T) => void | TSRXElement;
+export type Component<T = Record<string, any>> = (props: T) => Renderable | void;
 
 declare const TSRX_ELEMENT: unique symbol;
 declare const REF_KEY: unique symbol;
@@ -14,6 +14,15 @@ export type TSRXElement<Tag = any> = {
 	readonly __tag?: Tag;
 };
 
+/**
+ * Every value a component may return and have rendered. Both runtimes dispatch
+ * the same way: elements render, arrays flatten recursively, `null`/`undefined`
+ * render nothing, and everything else is stringified. Promises, functions, and
+ * symbols are not renderable.
+ */
+export type Renderable =
+	TSRXElement | string | number | bigint | boolean | null | undefined | readonly Renderable[];
+
 /** Type for implicit children fragments rendered with `{children}`. */
 export type Children = TSRXElement | Component | string | number | boolean | null | undefined;