ripple 0.3.112 → 0.3.113

package/CHANGELOG.md

@@ -1,5 +1,35 @@
 # ripple
 
+## 0.3.113
+
+### Patch Changes
+
+- [#1389](https://github.com/Ripple-TS/ripple/pull/1389)
+  [`7ad580e`](https://github.com/Ripple-TS/ripple/commit/7ad580efd24b338b4774add06afdcdd8876c954c)
+  Thanks [@leonidaz](https://github.com/leonidaz)! - fix(types): widen
+  `Component`'s return type to everything the runtime renders
+
+  `Component` declared `(props: T) => void | TSRXElement`, so a component that
+  returned a string, number, bigint, boolean, `null`, or an array — all of which
+  both runtimes render — was rejected at `mount`, `hydrate`, and the server
+  `render`. The return type is now the new exported `Renderable` union, which
+  mirrors the shared dispatch in `render_value`/`render_expression`: elements
+  render, arrays flatten recursively, nullish renders nothing, everything else is
+  stringified. Promises, functions, and symbols stay rejected because neither
+  runtime renders them.
+
+- Updated dependencies
+  [[`6404d3c`](https://github.com/Ripple-TS/ripple/commit/6404d3cc679fde2eb83ec85c9cd98b653f3f2fed),
+  [`6025176`](https://github.com/Ripple-TS/ripple/commit/6025176000cafa50d924add8e9a878fe37c0c22b),
+  [`6025176`](https://github.com/Ripple-TS/ripple/commit/6025176000cafa50d924add8e9a878fe37c0c22b),
+  [`6025176`](https://github.com/Ripple-TS/ripple/commit/6025176000cafa50d924add8e9a878fe37c0c22b),
+  [`7ad580e`](https://github.com/Ripple-TS/ripple/commit/7ad580efd24b338b4774add06afdcdd8876c954c),
+  [`6eaa2f3`](https://github.com/Ripple-TS/ripple/commit/6eaa2f3e6cd18973d57df06eae770313dd061a1a),
+  [`6025176`](https://github.com/Ripple-TS/ripple/commit/6025176000cafa50d924add8e9a878fe37c0c22b),
+  [`9ffd4ba`](https://github.com/Ripple-TS/ripple/commit/9ffd4ba3e5982acb79a02efe0379abdc14c092a1)]:
+  - @tsrx/core@0.1.51
+  - @tsrx/ripple@0.1.52
+
 ## 0.3.112
 
 ### Patch Changes

package/package.json

@@ -3,7 +3,7 @@
   "description": "Ripple is an elegant TypeScript UI framework",
   "license": "MIT",
   "author": "Dominic Gannaway",
-  "version": "0.3.112",
+  "version": "0.3.113",
   "type": "module",
   "module": "src/runtime/index-client.js",
   "main": "src/runtime/index-client.js",
@@ -73,8 +73,8 @@
     "clsx": "^2.1.1",
     "devalue": "^5.8.1",
     "esm-env": "^1.2.2",
-    "@tsrx/core": "0.1.50",
-    "@tsrx/ripple": "0.1.51"
+    "@tsrx/core": "0.1.51",
+    "@tsrx/ripple": "0.1.52"
   },
   "devDependencies": {
     "@types/estree": "^1.0.8",

package/tests/client/basic/basic.rendering.test.tsrx

@@ -607,6 +607,78 @@ second
 		expect(div.textContent).toEqual('a Hello');
 	});
 
+	it('renders a template element inside an expression container child', () => {
+		function App() @{
+			<div>
+				{<h1>inline</h1>}
+			</div>
+		}
+
+		render(App);
+		expect(container.querySelector('div h1').textContent).toEqual('inline');
+	});
+
+	it('updates control flow inside an element in an expression container child', () => {
+		function App() @{
+			let &[ok] = track(true);
+			<>
+				<button
+					onClick={() => {
+						ok = !ok;
+					}}
+				>{'toggle'}</button>
+				<div>
+					{<h1>
+						@if (ok) {
+							<span>{'yes'}</span>
+						} @else {
+							<span>{'no'}</span>
+						}
+					</h1>}
+				</div>
+			</>
+		}
+
+		render(App);
+		expect(container.querySelector('div h1 span').textContent).toEqual('yes');
+
+		container.querySelector('button').click();
+		flushSync();
+		expect(container.querySelector('div h1 span').textContent).toEqual('no');
+	});
+
+	it('renders a call-containing text expression after inlined text', () => {
+		// The `' '` text anchor for the expression used to coalesce with the
+		// preceding inlined text into a single template text node, leaving
+		// `sibling(…, true)` nothing to anchor to — a runtime crash. (Only
+		// call-containing expressions hit this: call-free ones merge with the
+		// preceding text upstream instead.)
+		function fetchCount() {
+			return 42;
+		}
+
+		function App() @{
+			<div>count: {String(fetchCount())}</div>
+		}
+
+		render(App);
+		expect(container.querySelector('div').textContent).toEqual('count: 42');
+	});
+
+	it('renders a bigint merged into a text run after a string', () => {
+		// `string + bigint` is legal string concatenation in JS (the mixing
+		// TypeError only applies to numeric addition), so a bare bigint literal
+		// merged after a provably-string operand renders its decimal text.
+		function App() @{
+			const label = 'big:';
+			// prettier-ignore
+			<div>{label}{1n}</div>
+		}
+
+		render(App);
+		expect(container.querySelector('div').textContent).toEqual('big:1');
+	});
+
 	it('should handle multiple consecutive text expressions', () => {
 		function App() @{
 			let name = 'World';

package/tests/client/compiler/compiler.basic.test.tsrx

@@ -143,6 +143,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\')' },
@@ -156,7 +160,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()]' },
@@ -166,9 +169,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) {
@@ -185,6 +185,38 @@ export function App() @{
 		}
 	});
 
+	it('merges provably-primitive call-containing children into the text run', () => {
+		const source = `function empty() {
+	return null;
+}
+export function App() @{
+		<div>{'label:'}{void empty()}</div>
+}`;
+
+		const { code } = compile(source, 'primitive-merge.tsrx', { mode: 'client' });
+
+		// One merged text expression — no separate comment-anchored expression.
+		expect(code).toContain('\'label:\' + _$_.with_scope');
+		expect(code).toContain('String(void');
+		expect(code).not.toContain('_$_.expression(');
+	});
+
+	it('concatenates provably-string merge children bare', () => {
+		const source = `function fetchLabel() {
+	return 'fetched';
+}
+export function App() @{
+		<div>{'label:'}{String(fetchLabel())}</div>
+}`;
+
+		const { code } = compile(source, 'string-merge.tsrx', { mode: 'client' });
+
+		// Already a string: no String(… ?? '') double wrap around it.
+		expect(code).toContain('String(fetchLabel())');
+		expect(code).not.toContain('String(String(');
+		expect(code).not.toContain('?? \'\'');
+	});
+
 	it('parses backtick expressions inside TSRX fragments as template literals', () => {
 		const source = `let a = function() @{
 				<>

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

@@ -195,4 +195,50 @@ describe('composite > props', () => {
 		expect(container.querySelector('p').textContent).toBe('Description 1');
 		expect(container.querySelector('price').textContent).toBe('15');
 	});
+
+	it('renders a template element passed inline as a prop', () => {
+		function Child(props: { header: unknown }) @{
+			<div>{props.header}</div>
+		}
+
+		function App() @{
+			<Child header={<h1>{'hello'}</h1>} />
+		}
+
+		render(App);
+		expect(container.querySelector('div h1').textContent).toBe('hello');
+	});
+
+	it('updates control flow inside an element passed inline as a prop', () => {
+		function Child(props: { header: unknown }) @{
+			<div>{props.header}</div>
+		}
+
+		function App() @{
+			let &[ok] = track(true);
+			<>
+				<button
+					onClick={() => {
+						ok = !ok;
+					}}
+				>{'toggle'}</button>
+				<Child
+					header={<h1>
+						@if (ok) {
+							<span>{'yes'}</span>
+						} @else {
+							<span>{'no'}</span>
+						}
+					</h1>}
+				/>
+			</>
+		}
+
+		render(App);
+		expect(container.querySelector('div h1 span').textContent).toBe('yes');
+
+		container.querySelector('button').click();
+		flushSync();
+		expect(container.querySelector('div h1 span').textContent).toBe('no');
+	});
 });

package/tests/hydration/basic.test.js

@@ -255,3 +255,42 @@ describe('hydration > basic', () => {
 		expect(container.querySelector('.inner .last-child')?.textContent).toBe('I am the last child');
 	});
 });
+
+describe('hydration > text runs with call-containing primitives', () => {
+	it('hydrates a text expression that follows inlined text', async () => {
+		await hydrateComponent(
+			ServerComponents.TextTailExpression,
+			ClientComponents.TextTailExpression,
+		);
+		expect(container.textContent).toBe('label: fetched');
+	});
+
+	it('hydrates a text expression that follows a fragment ending in text', async () => {
+		await hydrateComponent(
+			ServerComponents.FragmentTailExpression,
+			ClientComponents.FragmentTailExpression,
+		);
+		expect(container.textContent).toBe('frag-fetched');
+	});
+
+	it('hydrates an authored fragment child', async () => {
+		await hydrateComponent(ServerComponents.FragmentChildOnly, ClientComponents.FragmentChildOnly);
+		expect(container.textContent).toBe('frag-tail');
+	});
+
+	it('hydrates a fragment leading with an opaque value', async () => {
+		await hydrateComponent(
+			ServerComponents.FragmentLeadsWithOpaqueValue,
+			ClientComponents.FragmentLeadsWithOpaqueValue,
+		);
+		expect(container.textContent).toBe('Hafter-opaque');
+	});
+
+	it('hydrates a fragment leading with a call-containing primitive', async () => {
+		await hydrateComponent(
+			ServerComponents.FragmentLeadsWithPrimitiveCall,
+			ClientComponents.FragmentLeadsWithPrimitiveCall,
+		);
+		expect(container.textContent).toBe('fetchedafter-call');
+	});
+});

package/tests/hydration/compiled/client/basic.js

@@ -71,6 +71,15 @@ var root_66 = _$_.template(`<footer class="last-child">I am the last child</foot
 var root_67 = _$_.template(`<div class="wrapper"><h1>Header</h1><p>Some content</p><!></div>`, 0);
 var root_68 = _$_.template(`<div class="inner"><span>Inner text</span><!></div>`, 0);
 var root_69 = _$_.template(`<section class="outer"><h2>Section title</h2><!></section>`, 0);
+var root_70 = _$_.template(`<div> </div>`, 0);
+var root_71 = _$_.template(`<div> </div>`, 0);
+var root_72 = _$_.template(`<div>frag-<span>tail</span></div>`, 0);
+var root_74 = _$_.template(`<!><p>after-opaque</p>`, 1, 2);
+var root_73 = _$_.template(`<!>`, 1, 1);
+var root_75 = _$_.template(`<div></div>`, 0);
+var root_77 = _$_.template(` <p>after-call</p>`, 1, 2);
+var root_76 = _$_.template(`<!>`, 1, 1);
+var root_78 = _$_.template(`<div></div>`, 0);
 
 import { track } from 'ripple';
 
@@ -193,7 +202,7 @@ export function Greeting(props) {
 		}
 
 		_$_.render(() => {
-			_$_.set_text(expression, 'Hello ' + _$_.with_scope(__block, () => String(props.name ?? '')));
+			_$_.set_text(expression, 'Hello ' + props.name);
 		});
 
 		_$_.append(__anchor, div_5);
@@ -218,9 +227,9 @@ export function ExpressionContent() {
 			var div_6 = _$_.first_child_frag(fragment_7);
 
 			{
-				var expression_1 = _$_.child(div_6);
+				var expression_1 = _$_.child(div_6, true);
 
-				_$_.expression(expression_1, () => value);
+				expression_1.nodeValue = value;
 				_$_.pop(div_6);
 			}
 
@@ -246,9 +255,9 @@ function NestedHelperItem({ item }) {
 		var div_7 = root_15();
 
 		{
-			var expression_3 = _$_.child(div_7);
+			var expression_3 = _$_.child(div_7, true);
 
-			_$_.expression(expression_3, () => item);
+			expression_3.nodeValue = item;
 			_$_.pop(div_7);
 		}
 
@@ -917,4 +926,123 @@ export function NestedComponentAsLastSibling() {
 	});
 }
 
+function fetchLabel() {
+	return 'fetched';
+}
+
+export function TextTailExpression() {
+	return _$_.tsrx_element((__anchor, __block) => {
+		var div_27 = root_70();
+
+		{
+			var text = _$_.child(div_27, true);
+
+			_$_.pop(div_27);
+		}
+
+		_$_.render(() => {
+			_$_.set_text(text, "label: " + _$_.with_scope(__block, () => String(fetchLabel())));
+		});
+
+		_$_.append(__anchor, div_27);
+	});
+}
+
+export function FragmentTailExpression() {
+	return _$_.tsrx_element((__anchor, __block) => {
+		var div_28 = root_71();
+
+		{
+			var expression_29 = _$_.child(div_28, true);
+
+			_$_.pop(div_28);
+		}
+
+		_$_.render(() => {
+			_$_.set_text(expression_29, 'frag-' + _$_.with_scope(__block, () => String(fetchLabel())));
+		});
+
+		_$_.append(__anchor, div_28);
+	});
+}
+
+export function FragmentChildOnly() {
+	return _$_.tsrx_element((__anchor, __block) => {
+		var div_29 = root_72();
+
+		{
+			_$_.pop(div_29);
+		}
+
+		_$_.append(__anchor, div_29);
+	});
+}
+
+function OpaqueLead(props) {
+	return _$_.tsrx_element((__anchor, __block) => {
+		var fragment_30 = root_73();
+		var node_26 = _$_.first_child_frag(fragment_30);
+
+		_$_.expression(node_26, () => _$_.tsrx_element((__anchor, __block) => {
+			var fragment_31 = root_74();
+			var expression_30 = _$_.first_child_frag(fragment_31);
+
+			_$_.expression(expression_30, () => props.header);
+			_$_.append(__anchor, fragment_31);
+		}));
+
+		_$_.append(__anchor, fragment_30);
+	});
+}
+
+export function FragmentLeadsWithOpaqueValue() {
+	return _$_.tsrx_element((__anchor, __block) => {
+		var div_30 = root_75();
+
+		{
+			var append_anchor_1 = _$_.append_into(div_30);
+
+			_$_.render_component(OpaqueLead, append_anchor_1, { header: 'H' });
+			_$_.pop(div_30);
+		}
+
+		_$_.append(__anchor, div_30);
+	});
+}
+
+function PrimitiveCallLead() {
+	return _$_.tsrx_element((__anchor, __block) => {
+		var fragment_32 = root_76();
+		var node_27 = _$_.first_child_frag(fragment_32);
+
+		_$_.expression(node_27, () => _$_.tsrx_element((__anchor, __block) => {
+			var fragment_33 = root_77();
+			var expression_31 = _$_.first_child_frag(fragment_33, true);
+
+			_$_.render(() => {
+				_$_.set_text(expression_31, _$_.with_scope(__block, () => String(fetchLabel())));
+			});
+
+			_$_.append(__anchor, fragment_33);
+		}));
+
+		_$_.append(__anchor, fragment_32);
+	});
+}
+
+export function FragmentLeadsWithPrimitiveCall() {
+	return _$_.tsrx_element((__anchor, __block) => {
+		var div_31 = root_78();
+
+		{
+			var append_anchor_2 = _$_.append_into(div_31);
+
+			_$_.render_component(PrimitiveCallLead, append_anchor_2, {});
+			_$_.pop(div_31);
+		}
+
+		_$_.append(__anchor, div_31);
+	});
+}
+
 _$_.delegate(['click']);