ripple 0.3.127 → 0.4.0

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

@@ -34,14 +34,14 @@ export function SwitchStatic() {
 
 export function SwitchReactive() {
 	return _$_.tsrx_element(() => {
-		let lazy = _$_.track('a', '9b34d955');
+		const status = _$_.track('a', '9b34d955');
 
 		_$_.regular_block(() => {
 			let __out = '';
 
 			__out += '<button class="toggle">Toggle</button><!--[-->';
 
-			switch (lazy.value) {
+			switch (status.value) {
 				case 'a':
 					__out += '<div class="case-a">Case A</div>';
 					break;
@@ -91,14 +91,14 @@ export function SwitchFallthrough() {
 
 export function SwitchNumericLevels() {
 	return _$_.tsrx_element(() => {
-		let lazy_1 = _$_.track(1, '7581a7ab');
+		const level = _$_.track(1, '7581a7ab');
 
 		_$_.regular_block(() => {
 			let __out = '';
 
 			__out += '<button class="level-toggle">Toggle Level</button><!--[-->';
 
-			switch (lazy_1.value) {
+			switch (level.value) {
 				case 1:
 					__out += '<div class="level-1">Level 1</div>';
 					break;
@@ -120,14 +120,14 @@ export function SwitchNumericLevels() {
 
 export function SwitchBlockScoped() {
 	return _$_.tsrx_element(() => {
-		let lazy_2 = _$_.track(1, 'ca9f9852');
+		const level = _$_.track(1, 'ca9f9852');
 
 		_$_.regular_block(() => {
 			let __out = '';
 
 			__out += '<button class="block-toggle">Toggle</button><!--[-->';
 
-			switch (lazy_2.value) {
+			switch (level.value) {
 				case 1:
 					__out += '<div class="block-1">Block 1</div>';
 					break;
@@ -149,14 +149,14 @@ export function SwitchBlockScoped() {
 
 export function SwitchNoBreak() {
 	return _$_.tsrx_element(() => {
-		let lazy_3 = _$_.track(1, '6b7cb0ea');
+		const level = _$_.track(1, '6b7cb0ea');
 
 		_$_.regular_block(() => {
 			let __out = '';
 
 			__out += '<button class="nobreak-toggle">Toggle</button><!--[-->';
 
-			switch (lazy_3.value) {
+			switch (level.value) {
 				case 1:
 					__out += '<div class="nobreak-1">NoBreak 1</div>';
 					break;

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

@@ -1,25 +1,109 @@
 // @ts-nocheck
 import * as _$_ from 'ripple/internal/server';
 
+import { Money as _$_Money__ } from '../fixtures/money.js';
 import { track, trackAsync } from 'ripple/server';
+import { Money } from '../fixtures/money.js';
+
+export const transport = {
+	Money: {
+		encode: (value) => value instanceof Money && [value.amount, value.currency],
+		decode: ([amount, currency]) => new Money(amount, currency)
+	}
+};
 
 export const _$_server_$_ = (() => {
 	var _$_server_$_ = {};
+	const Money = _$_Money__;
 
 	_$_server_$_.formatValue = async function formatValue(n) {
 		return `server-${n}`;
 	};
 
+	_$_server_$_.doubleMoney = async function doubleMoney(value) {
+		if (!(value instanceof Money)) throw new Error('RPC argument was not revived');
+
+		return new Money(value.amount * 2, value.currency);
+	};
+
 	return _$_server_$_;
 })();
 
+const doubleMoney = function (...args) {
+	return _$_server_$_.doubleMoney(...args);
+};
+
 const formatValue = function (...args) {
 	return _$_server_$_.formatValue(...args);
 };
 
+function MoneyResult({ count }) {
+	return _$_.tsrx_element(() => {
+		const money = _$_.track_async(() => doubleMoney(new Money(count.value, 'USD')), '2e21cbe9');
+
+		_$_.regular_block(() => {
+			let __out = '';
+
+			__out += '<p class="result">';
+
+			{
+				_$_.output_push(__out);
+				__out = '';
+				_$_.render_expression(money.value.format());
+			}
+
+			__out += '</p>';
+			_$_.output_push(__out);
+		});
+	});
+}
+
+export function AsyncCustomType() {
+	return _$_.tsrx_element(() => {
+		const count = _$_.track(6, 'f0c2b41e');
+
+		_$_.regular_block(() => {
+			let __out = '';
+
+			__out += '<button class="increment">increment</button>';
+			_$_.output_push(__out);
+			__out = '';
+
+			_$_.try_block(
+				() => {
+					let __out = '';
+
+					__out += '<!--[-->';
+
+					{
+						const comp = MoneyResult;
+						const args = [{ count }];
+
+						_$_.output_push(__out);
+						__out = '';
+						_$_.render_component(comp, ...args);
+					}
+
+					__out += '<!--]-->';
+					_$_.output_push(__out);
+				},
+				null,
+				() => {
+					let __out = '';
+
+					__out += '<!--[--><p class="loading">loading...</p><!--]-->';
+					_$_.output_push(__out);
+				}
+			);
+
+			_$_.output_push(__out);
+		});
+	});
+}
+
 function ServerCallResult({ count }) {
 	return _$_.tsrx_element(() => {
-		let lazy = _$_.track_async(() => formatValue(count.value), '2e21cbe9');
+		const data = _$_.track_async(() => formatValue(count.value), '4e502c38');
 
 		_$_.regular_block(() => {
 			let __out = '';
@@ -29,7 +113,7 @@ function ServerCallResult({ count }) {
 			{
 				_$_.output_push(__out);
 				__out = '';
-				_$_.render_expression(lazy.value);
+				_$_.render_expression(data.value);
 			}
 
 			__out += '</p>';
@@ -40,7 +124,7 @@ function ServerCallResult({ count }) {
 
 export function AsyncWithServerCall() {
 	return _$_.tsrx_element(() => {
-		let lazy_1 = _$_.track(0, 'f0c2b41e');
+		const count = _$_.track(0, '14891754');
 
 		_$_.regular_block(() => {
 			let __out = '';
@@ -57,7 +141,7 @@ export function AsyncWithServerCall() {
 
 					{
 						const comp = ServerCallResult;
-						const args = [{ count: lazy_1 }];
+						const args = [{ count }];
 
 						_$_.output_push(__out);
 						__out = '';
@@ -89,7 +173,7 @@ export function AsyncSimpleValue() {
 
 				__out += '<!--[-->';
 
-				let lazy_2 = _$_.track_async(() => Promise.resolve('hydrated value'), '4e502c38');
+				const data = _$_.track_async(() => Promise.resolve('hydrated value'), 'f325448a');
 
 				_$_.output_push(__out);
 				__out = '';
@@ -102,7 +186,7 @@ export function AsyncSimpleValue() {
 					{
 						_$_.output_push(__out);
 						__out = '';
-						_$_.render_expression(lazy_2.value);
+						_$_.render_expression(data.value);
 					}
 
 					__out += '</p>';
@@ -142,7 +226,7 @@ export function AsyncNumericValue() {
 
 				__out += '<!--[-->';
 
-				let lazy_3 = _$_.track_async(() => Promise.resolve(42), '14891754');
+				const count = _$_.track_async(() => Promise.resolve(42), 'ab8199a0');
 
 				_$_.output_push(__out);
 				__out = '';
@@ -155,7 +239,7 @@ export function AsyncNumericValue() {
 					{
 						_$_.output_push(__out);
 						__out = '';
-						_$_.render_expression(lazy_3.value);
+						_$_.render_expression(count.value);
 					}
 
 					__out += '</span>';
@@ -195,7 +279,7 @@ export function AsyncObjectValue() {
 
 				__out += '<!--[-->';
 
-				let lazy_4 = _$_.track_async(() => Promise.resolve({ name: 'Alice', age: 30 }), 'f325448a');
+				const user = _$_.track_async(() => Promise.resolve({ name: 'Alice', age: 30 }), 'fb7ad40b');
 
 				_$_.output_push(__out);
 				__out = '';
@@ -208,7 +292,7 @@ export function AsyncObjectValue() {
 					{
 						_$_.output_push(__out);
 						__out = '';
-						_$_.render_expression(lazy_4.value.name);
+						_$_.render_expression(user.value.name);
 					}
 
 					__out += '</span><span class="age">';
@@ -216,7 +300,7 @@ export function AsyncObjectValue() {
 					{
 						_$_.output_push(__out);
 						__out = '';
-						_$_.render_expression(lazy_4.value.age);
+						_$_.render_expression(user.value.age);
 					}
 
 					__out += '</span></div>';
@@ -256,8 +340,8 @@ export function AsyncMultipleValues() {
 
 				__out += '<!--[-->';
 
-				let lazy_5 = _$_.track_async(() => Promise.resolve('alpha'), 'ab8199a0');
-				let lazy_6 = _$_.track_async(() => Promise.resolve('beta'), 'fb7ad40b');
+				const first = _$_.track_async(() => Promise.resolve('alpha'), '99982de5');
+				const second = _$_.track_async(() => Promise.resolve('beta'), '1dea4c85');
 
 				_$_.output_push(__out);
 				__out = '';
@@ -270,7 +354,7 @@ export function AsyncMultipleValues() {
 					{
 						_$_.output_push(__out);
 						__out = '';
-						_$_.render_expression(lazy_5.value);
+						_$_.render_expression(first.value);
 					}
 
 					__out += '</span><span class="second">';
@@ -278,7 +362,7 @@ export function AsyncMultipleValues() {
 					{
 						_$_.output_push(__out);
 						__out = '';
-						_$_.render_expression(lazy_6.value);
+						_$_.render_expression(second.value);
 					}
 
 					__out += '</span></div>';
@@ -318,7 +402,7 @@ export function AsyncWithCatch() {
 
 				__out += '<!--[-->';
 
-				let lazy_7 = _$_.track_async(() => Promise.reject(new Error('fetch failed')), '99982de5');
+				const data = _$_.track_async(() => Promise.reject(new Error('fetch failed')), 'c9d12acf');
 
 				_$_.output_push(__out);
 				__out = '';
@@ -331,7 +415,7 @@ export function AsyncWithCatch() {
 					{
 						_$_.output_push(__out);
 						__out = '';
-						_$_.render_expression(lazy_7.value);
+						_$_.render_expression(data.value);
 					}
 
 					__out += '</p>';
@@ -395,7 +479,7 @@ export function ChildWithError() {
 
 				__out += '<!--[-->';
 
-				let lazy_8 = _$_.track_async(() => Promise.reject(new Error('child error')), '1dea4c85');
+				const data = _$_.track_async(() => Promise.reject(new Error('child error')), 'cdd1adb8');
 
 				_$_.output_push(__out);
 				__out = '';
@@ -408,7 +492,7 @@ export function ChildWithError() {
 					{
 						_$_.output_push(__out);
 						__out = '';
-						_$_.render_expression(lazy_8.value);
+						_$_.render_expression(data.value);
 					}
 
 					__out += '</p>';
@@ -494,7 +578,7 @@ export function ParentWithCatch() {
 
 function ReactiveDependencyResult({ count }) {
 	return _$_.tsrx_element(() => {
-		let lazy_9 = _$_.track_async(() => Promise.resolve(`count-${count.value}`), 'c9d12acf');
+		const data = _$_.track_async(() => Promise.resolve(`count-${count.value}`), '18c43c3a');
 
 		_$_.regular_block(() => {
 			let __out = '';
@@ -504,7 +588,7 @@ function ReactiveDependencyResult({ count }) {
 			{
 				_$_.output_push(__out);
 				__out = '';
-				_$_.render_expression(lazy_9.value);
+				_$_.render_expression(data.value);
 			}
 
 			__out += '</p>';
@@ -515,7 +599,50 @@ function ReactiveDependencyResult({ count }) {
 
 export function AsyncWithReactiveDependency() {
 	return _$_.tsrx_element(() => {
-		let lazy_10 = _$_.track(0, 'cdd1adb8');
+		const count = _$_.track(0, 'd5dcc1d3');
+
+		_$_.regular_block(() => {
+			let __out = '';
+
+			__out += '<button class="increment">increment</button>';
+			_$_.output_push(__out);
+			__out = '';
+
+			_$_.try_block(
+				() => {
+					let __out = '';
+
+					__out += '<!--[-->';
+
+					{
+						const comp = ReactiveDependencyResult;
+						const args = [{ count }];
+
+						_$_.output_push(__out);
+						__out = '';
+						_$_.render_component(comp, ...args);
+					}
+
+					__out += '<!--]-->';
+					_$_.output_push(__out);
+				},
+				null,
+				() => {
+					let __out = '';
+
+					__out += '<!--[--><p class="loading">loading...</p><!--]-->';
+					_$_.output_push(__out);
+				}
+			);
+
+			_$_.output_push(__out);
+		});
+	});
+}
+
+export function AsyncWithReadOnlyDependency() {
+	return _$_.tsrx_element(() => {
+		const count = _$_.track(0, '75a97b64');
 
 		_$_.regular_block(() => {
 			let __out = '';
@@ -532,7 +659,7 @@ export function AsyncWithReactiveDependency() {
 
 					{
 						const comp = ReactiveDependencyResult;
-						const args = [{ count: lazy_10 }];
+						const args = [{ count: count.readOnly() }];
 
 						_$_.output_push(__out);
 						__out = '';

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

@@ -48,7 +48,7 @@ export function RootThrows() {
 
 export function RootAsyncDirect() {
 	return _$_.tsrx_element(() => {
-		let lazy = _$_.track_async(() => Promise.resolve('root async value'), 'd6bf9e33');
+		const value = _$_.track_async(() => Promise.resolve('root async value'), 'd6bf9e33');
 
 		_$_.regular_block(() => {
 			let __out = '';
@@ -58,7 +58,7 @@ export function RootAsyncDirect() {
 			{
 				_$_.output_push(__out);
 				__out = '';
-				_$_.render_expression(lazy.value);
+				_$_.render_expression(value.value);
 			}
 
 			__out += '</p>';
@@ -69,7 +69,7 @@ export function RootAsyncDirect() {
 
 export function RootAsyncRejects() {
 	return _$_.tsrx_element(() => {
-		let lazy_1 = _$_.track_async(() => Promise.reject(new Error('root async failed')), 'd2fe7b64');
+		const value = _$_.track_async(() => Promise.reject(new Error('root async failed')), 'd2fe7b64');
 
 		_$_.regular_block(() => {
 			let __out = '';
@@ -79,7 +79,7 @@ export function RootAsyncRejects() {
 			{
 				_$_.output_push(__out);
 				__out = '';
-				_$_.render_expression(lazy_1.value);
+				_$_.render_expression(value.value);
 			}
 
 			__out += '</p>';
@@ -134,14 +134,14 @@ export function AsyncListInTryPending() {
 
 function AsyncList() {
 	return _$_.tsrx_element(() => {
-		let lazy_2 = _$_.track_async(() => Promise.resolve(['alpha', 'beta', 'gamma']), 'b3d31627');
+		const items = _$_.track_async(() => Promise.resolve(['alpha', 'beta', 'gamma']), 'b3d31627');
 
 		_$_.regular_block(() => {
 			let __out = '';
 
 			__out += '<ul class="items"><!--[-->';
 
-			for (let item of lazy_2.value) {
+			for (let item of items.value) {
 				__out += '<li>';
 
 				{
@@ -202,7 +202,7 @@ export function AsyncTryWithLeadingSibling() {
 
 function AsyncContent() {
 	return _$_.tsrx_element(() => {
-		let lazy_3 = _$_.track_async(() => Promise.resolve('ready'), '15ea8758');
+		const value = _$_.track_async(() => Promise.resolve('ready'), '15ea8758');
 
 		_$_.regular_block(() => {
 			let __out = '';
@@ -212,7 +212,7 @@ function AsyncContent() {
 			{
 				_$_.output_push(__out);
 				__out = '';
-				_$_.render_expression(lazy_3.value);
+				_$_.render_expression(value.value);
 			}
 
 			__out += '</div>';

package/tests/hydration/compiled/server/typed-text.js

@@ -0,0 +1,17 @@
+// @ts-nocheck
+import * as _$_ from 'ripple/internal/server';
+
+import { track } from 'ripple/server';
+
+export function TypedText() {
+	return _$_.tsrx_element(() => {
+		const row = _$_.track({ label: '<first>', count: 2 }, '9bf2304a');
+
+		_$_.regular_block(() => {
+			let __out = '';
+
+			__out += '<div class="typed-run">' + _$_.escape('value: ' + (row.value.label + String(row.value.count ?? ''))) + '<span>tail</span></div><p class="typed-number">' + _$_.escape((0, row.value.count)) + '</p><button>update</button>';
+			_$_.output_push(__out);
+		});
+	});
+}

package/tests/hydration/components/basic.tsrx

@@ -1,6 +1,6 @@
 // Basic static components for hydration testing
 import { track } from 'ripple';
-import type { Children } from 'ripple';
+import type { Children, Derived } from 'ripple';
 
 export function StaticText() @{
 	<div>{'Hello World'}</div>
@@ -180,8 +180,8 @@ export function DynamicArrayFromCall() @{
 }
 
 export function DynamicArrayFromTrack() @{
-	let &[items] = track(['start:', ['one', 2], true, null, false, ':end']);
-	<div class="dynamic-array-track">{items}</div>
+	const items = track(['start:', ['one', 2], true, null, false, ':end']);
+	<div class="dynamic-array-track">{items.value}</div>
 }
 
 export function DynamicArrayFromConditional() @{
@@ -228,15 +228,29 @@ export function TsxDeclaredBeforeTopLevelTsx() @{
 	</>
 }
 
-function TextProp(&{ children }: { children: string }) @{
-	<div class="text-prop">{children}</div>
+// Untyped children render through the generic expression path (hydration
+// markers); typed string children hydrate a text node directly.
+function TextProp({ children }: { children: Derived<unknown> }) @{
+	<div class="text-prop">{children.value}</div>
+}
+
+function TypedTextProp({ children }: { children: Derived<string> }) @{
+	<div class="text-prop">{children.value}</div>
 }
 
 export function TextPropWithToggle() @{
-	let &[show] = track(false);
+	const show = track(false);
 	<>
-		<TextProp children={show ? 'hello' : ''} />
-		<button class="show-text" onClick={() => (show = true)}>{'Show'}</button>
+		<TextProp children={track(() => (show.value ? 'hello' : ''))} />
+		<button class="show-text" onClick={() => (show.value = true)}>{'Show'}</button>
+	</>
+}
+
+export function TypedTextPropWithToggle() @{
+	const show = track(false);
+	<>
+		<TypedTextProp children={track(() => (show.value ? 'hello' : ''))} />
+		<button class="show-text" onClick={() => (show.value = true)}>{'Show'}</button>
 	</>
 }
 
@@ -369,3 +383,25 @@ export function FragmentLeadsWithPrimitiveCall() @{
 	// prettier-ignore
 	<div><PrimitiveCallLead /></div>
 }
+
+export function PrimitiveTextCalls() @{
+	const count = track(2);
+	<>
+		// prettier-ignore
+		<div class="primitive-calls">sum: {Number(count.value) + Number(count.value)}; big: {BigInt(count.value)}</div>
+		<button onClick={() => count.value++}>update</button>
+	</>
+}
+
+export function ShadowedTextCalls() @{
+	const String = () => <b>string</b>;
+	const Number = () => <b>number</b>;
+	const BigInt = () => <b>bigint</b>;
+	const Date = () => <b>date</b>;
+	<>
+		<p>before{String()}after</p>
+		<p>before{Number()}after</p>
+		<p>before{BigInt()}after</p>
+		<p>before{Date()}after</p>
+	</>
+}

package/tests/hydration/components/composite.tsrx

@@ -1,10 +1,10 @@
 import type { Children } from 'ripple';
 
-export function Layout(&{ children }: { children?: Children }) @{
+export function Layout({ children }: { children?: Children }) @{
 	<div class="layout">{children}</div>
 }
 
-export function TextWrappedLayout(&{ children }: { children?: Children }) @{
+export function TextWrappedLayout({ children }: { children?: Children }) @{
 	<div class="layout">
 		{'before'}
 		{children}