ripple 0.3.82 → 0.3.83

package/CHANGELOG.md

@@ -1,5 +1,45 @@
 # ripple
 
+## 0.3.83
+
+### Patch Changes
+
+- [#1269](https://github.com/Ripple-TS/ripple/pull/1269)
+  [`8747e8f`](https://github.com/Ripple-TS/ripple/commit/8747e8f306628443d3c4d73bce0d79e986f5966e)
+  Thanks [@leonidaz](https://github.com/leonidaz)! - Treat plain JS control flow
+  inside `@{ … }` as ordinary JavaScript that returns JSX.
+
+  Only `@`-directives (`@if`/`@for`/`@switch`/`@try`) lower to template control
+  flow. Plain `if`/`for`/`for…of`/`for…in`/`while`/`do…while`/`switch`/`try`
+  inside a code block are now compiled exactly like the same control flow in a
+  regular `function C() { …; return <jsx> }` body — their JSX returns become
+  `tsrx_element` values rather than being template-ized.
+
+  Previously these plain statements were mis-routed into the template transform:
+  on **ripple** an early-return guard produced a `_$_.if`/`_$_.switch`/`_$_.try`
+  wrapper (with dead code in the `switch`/`try` cases) and plain loops threw a
+  compile error; on **solid** they produced
+  `<Show>`/`<Switch>`/`<For>`/`<Errored>` (dropping trailing output for `try`).
+  They now stay as plain control flow, so early-return guards and loops behave
+  like normal JavaScript.
+
+  As part of this, the ripple client and server targets no longer emit the
+  `return_guard` bookkeeping variable: a plain early `return` is a real early
+  return, so subsequent template output is naturally skipped without a guard flag.
+
+  On **solid**, this means a plain guard (`if (signal()) return …`) inside a
+  component body now runs once at setup — exactly like a regular Solid component —
+  instead of being lifted into a reactive `<Show>`. Use `@if` (or another
+  `@`-directive) when you want reactive conditional rendering.
+
+- Updated dependencies
+  [[`3d93339`](https://github.com/Ripple-TS/ripple/commit/3d93339e851818b547c43c29c8965700c069b037),
+  [`5646eb4`](https://github.com/Ripple-TS/ripple/commit/5646eb4e4c101b34100acf30ea57ad4065a47720),
+  [`8747e8f`](https://github.com/Ripple-TS/ripple/commit/8747e8f306628443d3c4d73bce0d79e986f5966e),
+  [`8747e8f`](https://github.com/Ripple-TS/ripple/commit/8747e8f306628443d3c4d73bce0d79e986f5966e)]:
+  - @tsrx/ripple@0.1.31
+  - @tsrx/core@0.1.31
+
 ## 0.3.82
 
 ### 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.82",
+  "version": "0.3.83",
   "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.30",
-    "@tsrx/ripple": "0.1.30"
+    "@tsrx/core": "0.1.31",
+    "@tsrx/ripple": "0.1.31"
   },
   "devDependencies": {
     "@types/estree": "^1.0.8",

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

@@ -235,6 +235,47 @@ second
 		]);
 	});
 
+	it('never prints nullish (null/undefined) in interpolated text', () => {
+		function Basic() @{
+			const nothing = null;
+			const missing = undefined;
+			<>
+				<div class="null">value: {nothing}</div>
+				<div class="undefined">value: {missing}</div>
+				<div class="explicit">raw: {String(nothing)}</div>
+			</>
+		}
+
+		render(Basic);
+
+		expect(container.querySelector('.null').textContent).toBe('value: ');
+		expect(container.querySelector('.undefined').textContent).toBe('value: ');
+		// An explicit `String(...)` is the author's own coercion and is left
+		// untouched, so it still stringifies nullish to "null".
+		expect(container.querySelector('.explicit').textContent).toBe('raw: null');
+	});
+
+	it('reactively clears interpolated text when a value becomes nullish', () => {
+		function Basic() @{
+			let &[name] = track<string | null>('Ada');
+			<>
+				<div class="label">Name: {name}</div>
+				<button onClick={() => (name = name == null ? 'Ada' : null)}>toggle</button>
+			</>
+		}
+
+		render(Basic);
+		expect(container.querySelector('.label').textContent).toBe('Name: Ada');
+
+		container.querySelector('button').click();
+		flushSync();
+		expect(container.querySelector('.label').textContent).toBe('Name: ');
+
+		container.querySelector('button').click();
+		flushSync();
+		expect(container.querySelector('.label').textContent).toBe('Name: Ada');
+	});
+
 	it('does not render unreachable statements after an ASI return', () => {
 		function Basic() {
 			return;

package/tests/client/return.test.tsrx

@@ -1,4 +1,5 @@
 import { describe, it, expect } from 'vitest';
+import { track, flushSync, type Tracked } from 'ripple';
 import { compile } from '@tsrx/ripple';
 
 describe('returns in restricted scopes', () => {
@@ -15,6 +16,24 @@ describe('returns in restricted scopes', () => {
 		).toThrow('Return statements are not allowed at the top level of a module.');
 	});
 
+	it('throws error when return is used inside @try/@catch/@pending blocks', () => {
+		for (const source of [
+			`function App() @{
+				@try { return <div>{'ok'}</div>; } @catch (e) { <div>{'err'}</div> }
+			}`,
+			`function App() @{
+				@try { <div>{'ok'}</div> } @catch (e) { return <div>{'err'}</div>; }
+			}`,
+			`function App() @{
+				@try { <div>{'ok'}</div> } @pending { return <div>{'load'}</div>; } @catch (e) { <div>{'err'}</div> }
+			}`,
+		]) {
+			expect(() => compile(source, 'App.tsrx', { mode: 'client' })).toThrow(
+				'Return statements are not allowed inside TSRX templates',
+			);
+		}
+	});
+
 	it('allows returns inside regular functions declared in TSRX templates', () => {
 		expect(
 			() => compile(
@@ -132,4 +151,88 @@ describe('function returns in client components', () => {
 		render(App);
 		expect(container.textContent).toBe('hello');
 	});
+
+	it('renders a template directive branch and siblings from a returned fragment', () => {
+		function App() {
+			const ready = true;
+			return <>
+				@if (ready) {
+					<div class="yielded">yielded</div>
+				}
+				<span class="outer">outer</span>
+			</>;
+		}
+
+		render(App);
+		expect(container.querySelector('.yielded')?.textContent).toBe('yielded');
+		expect(container.querySelector('.outer')?.textContent).toBe('outer');
+	});
+
+	it('renders a template directive branch inside a returned single element', () => {
+		function App() {
+			const ready = true;
+			return <div class="root">
+				@if (ready) {
+					<p class="inner">inner</p>
+				}
+				<span class="outer">outer</span>
+			</div>;
+		}
+
+		render(App);
+		expect(container.querySelector('.inner')?.textContent).toBe('inner');
+		expect(container.querySelector('.outer')?.textContent).toBe('outer');
+	});
+
+	it('renders a returned @for loop body alongside siblings', () => {
+		function App() {
+			const items = [1, 2, 3];
+			return <>
+				@for (const item of items) {
+					<li class="item">{item}</li>
+				}
+				<span class="outer">outer</span>
+			</>;
+		}
+
+		render(App);
+		expect([...container.querySelectorAll('.item')].map((n) => n.textContent)).toEqual([
+			'1',
+			'2',
+			'3',
+		]);
+		expect(container.querySelector('.outer')?.textContent).toBe('outer');
+	});
+
+	it('reactively toggles a returned @if branch driven by a tracked prop', () => {
+		function Dashboard({ user }: { user: Tracked<string | null> }) {
+			return <>
+				@if (!user.value) {
+					<p class="empty">No user found</p>
+				}
+				<h1 class="welcome">Welcome,{user.value}</h1>
+			</>;
+		}
+
+		function App() {
+			let &[user, userTracked] = track<string | null>(null);
+			return <>
+				<Dashboard user={userTracked} />
+				<button onClick={() => (user = user === 'Adam' ? null : 'Adam')}>Toggle</button>
+			</>;
+		}
+
+		render(App);
+		expect(container.querySelector('.empty')?.textContent).toBe('No user found');
+		expect(container.querySelector('.welcome')?.textContent).toBe('Welcome,');
+
+		container.querySelector('button')?.click();
+		flushSync();
+		expect(container.querySelector('.empty')).toBeNull();
+		expect(container.querySelector('.welcome')?.textContent).toBe('Welcome,Adam');
+
+		container.querySelector('button')?.click();
+		flushSync();
+		expect(container.querySelector('.empty')?.textContent).toBe('No user found');
+	});
 });

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

@@ -196,7 +196,7 @@ export function Greeting(props) {
 		}
 
 		_$_.render(() => {
-			_$_.set_text(expression, 'Hello ' + _$_.with_scope(__block, () => String(props.name)));
+			_$_.set_text(expression, 'Hello ' + _$_.with_scope(__block, () => String(props.name ?? '')));
 		});
 
 		_$_.append(__anchor, div_6);

package/tests/hydration/compiled/client/if-children.js

@@ -384,7 +384,7 @@ export function DomChildrenThenStaticSiblings() {
 			_$_.next();
 
 			_$_.render(() => {
-				_$_.set_text(expression_3, 'Item count: ' + _$_.with_scope(__block, () => String(lazy_6.value)));
+				_$_.set_text(expression_3, 'Item count: ' + _$_.with_scope(__block, () => String(lazy_6.value ?? '')));
 			});
 
 			_$_.append(__anchor, fragment_9, true);

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

@@ -6,7 +6,6 @@ var root_1 = _$_.template(`<div class="ready">ready</div>`, 1, 1);
 
 export function GuardReturnRenders() {
 	return _$_.tsrx_element((__anchor, __block) => {
-		var return_guard = false;
 		const ready = true;
 
 		if (!ready) {
@@ -21,7 +20,6 @@ export function GuardReturnRenders() {
 
 export function GuardReturnNull() {
 	return _$_.tsrx_element((__anchor, __block) => {
-		var return_guard = false;
 		const ready = false;
 
 		if (!ready) {

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

@@ -204,7 +204,7 @@ export function Greeting(props) {
 			_$_.output_push('>');
 
 			{
-				_$_.output_push(_$_.escape('Hello ' + String(props.name)));
+				_$_.output_push(_$_.escape('Hello ' + String(props.name ?? '')));
 			}
 
 			_$_.output_push('</div>');

package/tests/hydration/compiled/server/if-children.js

@@ -513,7 +513,7 @@ export function DomChildrenThenStaticSiblings() {
 						_$_.output_push('>');
 
 						{
-							_$_.output_push(_$_.escape('Item count: ' + String(lazy_6.value)));
+							_$_.output_push(_$_.escape('Item count: ' + String(lazy_6.value ?? '')));
 						}
 
 						_$_.output_push('</li>');

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

@@ -3,7 +3,6 @@ import * as _$_ from 'ripple/internal/server';
 
 export function GuardReturnRenders() {
 	return _$_.tsrx_element(() => {
-		var return_guard = false;
 		const ready = true;
 
 		if (!ready) {
@@ -11,28 +10,21 @@ export function GuardReturnRenders() {
 		}
 
 		_$_.regular_block(() => {
-			_$_.output_push('<!--[-->');
+			_$_.output_push('<div');
+			_$_.output_push(' class="ready"');
+			_$_.output_push('>');
 
-			if (!return_guard) {
-				_$_.output_push('<div');
-				_$_.output_push(' class="ready"');
-				_$_.output_push('>');
-
-				{
-					_$_.output_push('ready');
-				}
-
-				_$_.output_push('</div>');
+			{
+				_$_.output_push('ready');
 			}
 
-			_$_.output_push('<!--]-->');
+			_$_.output_push('</div>');
 		});
 	});
 }
 
 export function GuardReturnNull() {
 	return _$_.tsrx_element(() => {
-		var return_guard = false;
 		const ready = false;
 
 		if (!ready) {
@@ -40,21 +32,15 @@ export function GuardReturnNull() {
 		}
 
 		_$_.regular_block(() => {
-			_$_.output_push('<!--[-->');
-
-			if (!return_guard) {
-				_$_.output_push('<div');
-				_$_.output_push(' class="ready"');
-				_$_.output_push('>');
-
-				{
-					_$_.output_push('ready');
-				}
+			_$_.output_push('<div');
+			_$_.output_push(' class="ready"');
+			_$_.output_push('>');
 
-				_$_.output_push('</div>');
+			{
+				_$_.output_push('ready');
 			}
 
-			_$_.output_push('<!--]-->');
+			_$_.output_push('</div>');
 		});
 	});
 }

package/tests/server/basic.test.tsrx

@@ -24,6 +24,25 @@ describe('basic client', () => {
 		expect(body).toBeHtml('<div>&lt;span>Not HTML&lt;/span></div>');
 	});
 
+	it('never prints nullish (null/undefined) in interpolated text', async () => {
+		function Basic() @{
+			const nothing = null;
+			const missing = undefined;
+			<>
+				<div class="null">value: {nothing}</div>
+				<div class="undefined">value: {missing}</div>
+				<div class="explicit">raw: {String(nothing)}</div>
+			</>
+		}
+
+		const { body } = await render(Basic);
+
+		expect(body).toBeHtml(
+			'<div class="null">value: </div>' + '<div class="undefined">value: </div>' +
+				'<div class="explicit">raw: null</div>',
+		);
+	});
+
 	it('renders direct JSX text children as text', async () => {
 		function Basic() @{
 			<>

package/tests/setup-client.js

@@ -6,7 +6,7 @@ import { beforeEach, afterEach } from 'vitest';
 import { mount } from 'ripple';
 
 /**
- * @param {Component} component
+ * @param {Component | (() => any)} component
  */
 globalThis.render = function render(component) {
 	mount(component, {