ripple 0.3.128 → 0.4.0

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

@@ -2,184 +2,228 @@
 import * as _$_ from 'ripple/internal/client';
 
 var root = _$_.template(`<p class="root-pending">root loading...</p>`, 0);
-var root_1 = _$_.template(`<section class="root-catch"><p class="root-error"> </p><button class="root-reset">retry</button></section>`, 0);
-var root_2 = _$_.template(`<p>should not render</p>`, 1, 1);
-var root_3 = _$_.template(`<p class="root-async-value"> </p>`, 0);
-var root_4 = _$_.template(`<p class="root-async-value"> </p>`, 0);
-var root_5 = _$_.template(`<p class="loading">loading...</p>`, 0);
-var root_7 = _$_.template(`<li> </li>`, 0);
-var root_6 = _$_.template(`<ul class="items"></ul>`, 0);
-var root_10 = _$_.template(`<div class="loading">loading async content</div>`, 0);
-var root_9 = _$_.template(`<div class="before">before</div><!>`, 1, 2);
-var root_8 = _$_.template(`<!>`, 1, 1);
-var root_11 = _$_.template(`<div class="resolved"> </div>`, 0);
-
-import { trackAsync } from 'ripple';
 
-export function RootPending() {
-	return _$_.tsrx_element((__anchor, __block) => {
-		var p = root();
+function RootPending_render(__anchor, __block) {
+	var p = root();
 
-		_$_.append(__anchor, p);
-	});
+	_$_.append(__anchor, p);
 }
 
-export function RootCatch({ error, reset }) {
-	return _$_.tsrx_element((__anchor, __block) => {
-		var section = root_1();
+RootPending[_$_.$r] = RootPending_render;
 
-		{
-			var p_1 = _$_.hydrating ? _$_.hydrate_child() : section.firstChild;
+var root_1 = _$_.template(`<section class="root-catch"><p class="root-error"> </p><button class="root-reset">retry</button></section>`, 0);
 
-			{
-				var expression = _$_.hydrating ? _$_.hydrate_child() : p_1.firstChild;
+function RootCatch_render(__anchor, __block, { error, reset }) {
+	var section = root_1();
 
-				_$_.expression(expression, () => error.message);
-				_$_.pop(p_1);
-			}
+	{
+		var p_1 = _$_.hydrating ? _$_.hydrate_child() : section.firstChild;
 
-			var button = _$_.hydrating ? _$_.hydrate_sibling() : p_1.nextSibling;
+		{
+			var expression = _$_.hydrating ? _$_.hydrate_child() : p_1.firstChild;
 
-			_$_.event('Click', button, reset);
+			_$_.expression(expression, () => error.message);
+			_$_.hydrating && _$_.pop(p_1);
 		}
 
-		_$_.append(__anchor, section);
-	});
+		var button = _$_.hydrating ? _$_.hydrate_sibling() : p_1.nextSibling;
+
+		_$_.event('Click', button, reset);
+	}
+
+	_$_.append(__anchor, section);
 }
 
-export function RootThrows() {
-	return _$_.tsrx_element((__anchor, __block) => {
-		throw _$_.with_scope(__block, () => new Error('root exploded'));
+RootCatch[_$_.$r] = RootCatch_render;
+
+var root_2 = _$_.template(`<p>should not render</p>`, 0);
 
-		var fragment = root_2();
+function RootThrows_render(__anchor, __block) {
+	throw _$_.with_scope(__block, () => new Error('root exploded'));
 
-		_$_.append(__anchor, fragment);
-	});
+	var p_2 = root_2();
+
+	_$_.append(__anchor, p_2);
 }
 
-export function RootAsyncDirect() {
-	return _$_.tsrx_element((__anchor, __block) => {
-		let lazy = _$_.track_async(() => _$_.with_scope(__block, () => Promise.resolve('root async value')), __block, 'd6bf9e33');
-		var p_2 = root_3();
+RootThrows[_$_.$r] = RootThrows_render;
 
-		{
-			var expression_1 = _$_.hydrating ? _$_.hydrate_child() : p_2.firstChild;
+var root_3 = _$_.template(`<p class="root-async-value"> </p>`, 0);
 
-			_$_.expression(expression_1, () => lazy.value);
-			_$_.pop(p_2);
-		}
+function RootAsyncDirect_render(__anchor, __block) {
+	const value = _$_.track_async(() => _$_.with_scope(__block, () => Promise.resolve('root async value')), __block, 'd6bf9e33');
+	var p_3 = root_3();
+
+	{
+		var expression_1 = _$_.hydrating ? _$_.hydrate_child() : p_3.firstChild;
 
-		_$_.append(__anchor, p_2);
-	});
+		_$_.expression(expression_1, () => value.value);
+		_$_.hydrating && _$_.pop(p_3);
+	}
+
+	_$_.append(__anchor, p_3);
 }
 
-export function RootAsyncRejects() {
-	return _$_.tsrx_element((__anchor, __block) => {
-		let lazy_1 = _$_.track_async(() => _$_.with_scope(__block, () => Promise.reject(new Error('root async failed'))), __block, 'd2fe7b64');
-		var p_3 = root_4();
+RootAsyncDirect[_$_.$r] = RootAsyncDirect_render;
 
-		{
-			var expression_2 = _$_.hydrating ? _$_.hydrate_child() : p_3.firstChild;
+var root_4 = _$_.template(`<p class="root-async-value"> </p>`, 0);
 
-			_$_.expression(expression_2, () => lazy_1.value);
-			_$_.pop(p_3);
-		}
+function RootAsyncRejects_render(__anchor, __block) {
+	const value = _$_.track_async(() => _$_.with_scope(__block, () => Promise.reject(new Error('root async failed'))), __block, 'd2fe7b64');
+	var p_4 = root_4();
+
+	{
+		var expression_2 = _$_.hydrating ? _$_.hydrate_child() : p_4.firstChild;
 
-		_$_.append(__anchor, p_3);
-	});
+		_$_.expression(expression_2, () => value.value);
+		_$_.hydrating && _$_.pop(p_4);
+	}
+
+	_$_.append(__anchor, p_4);
 }
 
-export function AsyncListInTryPending() {
-	return _$_.tsrx_element((__anchor, __block) => {
+RootAsyncRejects[_$_.$r] = RootAsyncRejects_render;
+
+var root_5 = _$_.template(`<p class="loading">loading...</p>`, 0);
+
+function AsyncListInTryPending_render(__anchor, __block) {
+	_$_.try(
+		__anchor,
+		(__anchor) => {
+			_$_.render_component(AsyncList, __anchor, {});
+		},
+		null,
+		(__anchor) => {
+			var p_5 = root_5();
+
+			_$_.append(__anchor, p_5);
+		},
+		true
+	);
+}
+
+AsyncListInTryPending[_$_.$r] = AsyncListInTryPending_render;
+
+var root_7 = _$_.template(`<li> </li>`, 0);
+var root_6 = _$_.template(`<ul class="items"></ul>`, 0);
+
+function AsyncList_render(__anchor, __block) {
+	const items = _$_.track_async(() => _$_.with_scope(__block, () => Promise.resolve(['alpha', 'beta', 'gamma'])), __block, 'b3d31627');
+	var ul = root_6();
+
+	{
+		_$_.for(
+			ul,
+			() => items.value,
+			(__anchor, item) => {
+				var li = root_7();
+
+				{
+					var expression_3 = _$_.hydrating ? _$_.hydrate_child() : li.firstChild;
+
+					_$_.expression(expression_3, () => item);
+					_$_.hydrating && _$_.pop(li);
+				}
+
+				_$_.append(__anchor, li);
+			},
+			4
+		);
+
+		_$_.hydrating && _$_.pop(ul);
+	}
+
+	_$_.append(__anchor, ul);
+}
+
+AsyncList[_$_.$r] = AsyncList_render;
+
+var root_10 = _$_.template(`<div class="loading">loading async content</div>`, 0);
+var root_9 = _$_.template(`<div class="before">before</div><!>`, 1, 2);
+var root_8 = _$_.template(`<!>`, 1, 1);
+
+function AsyncTryWithLeadingSibling_render(__anchor, __block) {
+	var fragment = root_8();
+	var node_1 = _$_.first_child_frag(fragment);
+
+	_$_.expression(node_1, () => _$_.tsrx_element((__anchor, __block) => {
+		var fragment_1 = root_9();
+		var div = _$_.first_child_frag(fragment_1);
+		var node = _$_.hydrating ? _$_.hydrate_sibling() : div.nextSibling;
+
 		_$_.try(
-			__anchor,
+			node,
 			(__anchor) => {
-				_$_.render_component(AsyncList, __anchor, {});
+				_$_.render_component(AsyncContent, __anchor, {});
 			},
 			null,
 			(__anchor) => {
-				var p_4 = root_5();
+				var div_1 = root_10();
 
-				_$_.append(__anchor, p_4);
-			},
-			true
+				_$_.append(__anchor, div_1);
+			}
 		);
-	});
+
+		_$_.append(__anchor, fragment_1);
+	}));
+
+	_$_.append(__anchor, fragment);
 }
 
-function AsyncList() {
-	return _$_.tsrx_element((__anchor, __block) => {
-		let lazy_2 = _$_.track_async(() => _$_.with_scope(__block, () => Promise.resolve(['alpha', 'beta', 'gamma'])), __block, 'b3d31627');
-		var ul = root_6();
+AsyncTryWithLeadingSibling[_$_.$r] = AsyncTryWithLeadingSibling_render;
 
-		{
-			_$_.for(
-				ul,
-				() => lazy_2.value,
-				(__anchor, item) => {
-					var li = root_7();
+var root_11 = _$_.template(`<div class="resolved"> </div>`, 0);
 
-					{
-						var expression_3 = _$_.hydrating ? _$_.hydrate_child() : li.firstChild;
+function AsyncContent_render(__anchor, __block) {
+	const value = _$_.track_async(() => _$_.with_scope(__block, () => Promise.resolve('ready')), __block, '15ea8758');
+	var div_2 = root_11();
 
-						_$_.expression(expression_3, () => item);
-						_$_.pop(li);
-					}
+	{
+		var expression_4 = _$_.hydrating ? _$_.hydrate_child() : div_2.firstChild;
 
-					_$_.append(__anchor, li);
-				},
-				4
-			);
+		_$_.expression(expression_4, () => value.value);
+		_$_.hydrating && _$_.pop(div_2);
+	}
 
-			_$_.pop(ul);
-		}
+	_$_.append(__anchor, div_2);
+}
 
-		_$_.append(__anchor, ul);
-	});
+AsyncContent[_$_.$r] = AsyncContent_render;
+
+import { trackAsync } from 'ripple';
+
+export function RootPending() {
+	return _$_.tsrx_element(RootPending_render);
 }
 
-export function AsyncTryWithLeadingSibling() {
-	return _$_.tsrx_element((__anchor, __block) => {
-		var fragment_1 = root_8();
-		var node_1 = _$_.first_child_frag(fragment_1);
-
-		_$_.expression(node_1, () => _$_.tsrx_element((__anchor, __block) => {
-			var fragment_2 = root_9();
-			var div = _$_.first_child_frag(fragment_2);
-			var node = _$_.hydrating ? _$_.hydrate_sibling() : div.nextSibling;
-
-			_$_.try(
-				node,
-				(__anchor) => {
-					_$_.render_component(AsyncContent, __anchor, {});
-				},
-				null,
-				(__anchor) => {
-					var div_1 = root_10();
-
-					_$_.append(__anchor, div_1);
-				}
-			);
+export function RootCatch(__props) {
+	return _$_.tsrx_element(RootCatch_render, __props);
+}
 
-			_$_.append(__anchor, fragment_2);
-		}));
+export function RootThrows() {
+	return _$_.tsrx_element(RootThrows_render);
+}
 
-		_$_.append(__anchor, fragment_1);
-	});
+export function RootAsyncDirect() {
+	return _$_.tsrx_element(RootAsyncDirect_render);
 }
 
-function AsyncContent() {
-	return _$_.tsrx_element((__anchor, __block) => {
-		let lazy_3 = _$_.track_async(() => _$_.with_scope(__block, () => Promise.resolve('ready')), __block, '15ea8758');
-		var div_2 = root_11();
+export function RootAsyncRejects() {
+	return _$_.tsrx_element(RootAsyncRejects_render);
+}
 
-		{
-			var expression_4 = _$_.hydrating ? _$_.hydrate_child() : div_2.firstChild;
+export function AsyncListInTryPending() {
+	return _$_.tsrx_element(AsyncListInTryPending_render);
+}
 
-			_$_.expression(expression_4, () => lazy_3.value);
-			_$_.pop(div_2);
-		}
+function AsyncList() {
+	return _$_.tsrx_element(AsyncList_render);
+}
+
+export function AsyncTryWithLeadingSibling() {
+	return _$_.tsrx_element(AsyncTryWithLeadingSibling_render);
+}
 
-		_$_.append(__anchor, div_2);
-	});
+function AsyncContent() {
+	return _$_.tsrx_element(AsyncContent_render);
 }

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

@@ -0,0 +1,71 @@
+// @ts-nocheck
+import * as _$_ from 'ripple/internal/client';
+
+var root_1 = _$_.template(`<div class="typed-run"> <span>tail</span></div><p class="typed-number"> </p><button>update</button>`, 1, 3);
+
+function render(__prev) {
+	var __a = 'value: ' + (__prev._row.value.label + String(__prev._row.value.count ?? ''));
+
+	if (__prev.a !== __a) {
+		_$_.set_text(__prev._expression, __prev.a = __a);
+	}
+
+	var __b = (0, __prev._row.value.count);
+
+	if (__prev.b !== __b) {
+		_$_.set_text(__prev._expression_1, __prev.b = __b);
+	}
+}
+
+var root = _$_.template(`<!>`, 1, 1);
+
+function TypedText_render(__anchor, __block) {
+	const row = _$_.track({ label: '<first>', count: 2 }, __block, '9bf2304a');
+	var fragment = root();
+	var node = _$_.first_child_frag(fragment);
+
+	_$_.expression(node, () => _$_.tsrx_element((__anchor, __block) => {
+		var fragment_1 = root_1();
+		var div = _$_.first_child_frag(fragment_1);
+
+		{
+			var expression = _$_.hydrating ? _$_.hydrate_child(true) : div.firstChild;
+
+			_$_.hydrating && _$_.pop(div);
+		}
+
+		var p = _$_.hydrating ? _$_.hydrate_sibling() : div.nextSibling;
+
+		{
+			var expression_1 = _$_.hydrating ? _$_.hydrate_text() : p.firstChild;
+		}
+
+		var button = _$_.hydrating ? _$_.hydrate_sibling() : p.nextSibling;
+
+		button.__click = () => {
+			row.value = { label: '&next', count: 3n };
+		};
+
+		_$_.render(render, {
+			a: ' ',
+			b: ' ',
+			_row: row,
+			_expression: expression,
+			_expression_1: expression_1
+		});
+
+		_$_.append(__anchor, fragment_1);
+	}));
+
+	_$_.append(__anchor, fragment);
+}
+
+TypedText[_$_.$r] = TypedText_render;
+
+import { track } from 'ripple';
+
+export function TypedText() {
+	return _$_.tsrx_element(TypedText_render);
+}
+
+_$_.delegate(['click']);

package/tests/hydration/compiled/fixtures/money.js

@@ -0,0 +1,10 @@
+export class Money {
+	/** @param {number} amount @param {string} currency */
+	constructor(amount, currency) {
+		this.amount = amount;
+		this.currency = currency;
+	}
+	format() {
+		return `${this.amount} ${this.currency}`;
+	}
+}

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

@@ -474,7 +474,7 @@ export function DynamicArrayFromCall() {
 
 export function DynamicArrayFromTrack() {
 	return _$_.tsrx_element(() => {
-		let lazy = _$_.track(['start:', ['one', 2], true, null, false, ':end'], 'b5de6402');
+		const items = _$_.track(['start:', ['one', 2], true, null, false, ':end'], 'b5de6402');
 
 		_$_.regular_block(() => {
 			let __out = '';
@@ -484,7 +484,7 @@ export function DynamicArrayFromTrack() {
 			{
 				_$_.output_push(__out);
 				__out = '';
-				_$_.render_expression(lazy.value);
+				_$_.render_expression(items.value);
 			}
 
 			__out += '</div>';
@@ -641,7 +641,7 @@ export function TsxDeclaredBeforeTopLevelTsx() {
 	});
 }
 
-function TextProp(__props) {
+function TextProp({ children }) {
 	return _$_.tsrx_element(() => {
 		_$_.regular_block(() => {
 			let __out = '';
@@ -651,7 +651,7 @@ function TextProp(__props) {
 			{
 				_$_.output_push(__out);
 				__out = '';
-				_$_.render_expression(__props.children);
+				_$_.render_expression(children.value);
 			}
 
 			__out += '</div>';
@@ -660,9 +660,20 @@ function TextProp(__props) {
 	});
 }
 
+function TypedTextProp({ children }) {
+	return _$_.tsrx_element(() => {
+		_$_.regular_block(() => {
+			let __out = '';
+
+			__out += '<div class="text-prop">' + _$_.escape(children.value) + '</div>';
+			_$_.output_push(__out);
+		});
+	});
+}
+
 export function TextPropWithToggle() {
 	return _$_.tsrx_element(() => {
-		let lazy_1 = _$_.track(false, '1ba81c3b');
+		const show = _$_.track(false, '1ba81c3b');
 
 		_$_.regular_block(() => {
 			let __out = '';
@@ -675,7 +686,37 @@ export function TextPropWithToggle() {
 
 				const args = [
 					{
-						children: _$_.normalize_children(lazy_1.value ? 'hello' : '')
+						children: _$_.normalize_children(_$_.track(() => show.value ? 'hello' : '', '649e2af0'))
+					}
+				];
+
+				_$_.output_push(__out);
+				__out = '';
+				_$_.render_component(comp, ...args);
+			}
+
+			__out += '<button class="show-text">Show</button>';
+			_$_.output_push(__out);
+		});
+	});
+}
+
+export function TypedTextPropWithToggle() {
+	return _$_.tsrx_element(() => {
+		const show = _$_.track(false, 'ba719d47');
+
+		_$_.regular_block(() => {
+			let __out = '';
+
+			{
+				const comp = TypedTextProp;
+
+				_$_.output_push(__out);
+				__out = '';
+
+				const args = [
+					{
+						children: _$_.normalize_children(_$_.track(() => show.value ? 'hello' : '', '6fb091f9'))
 					}
 				];
 
@@ -1022,4 +1063,80 @@ export function FragmentLeadsWithPrimitiveCall() {
 			_$_.output_push(__out);
 		});
 	});
+}
+
+export function PrimitiveTextCalls() {
+	return _$_.tsrx_element(() => {
+		const count = _$_.track(2, 'eea72017');
+
+		_$_.regular_block(() => {
+			let __out = '';
+
+			__out += '<div class="primitive-calls">' + _$_.escape("sum: " + (String(Number(count.value) + Number(count.value) ?? '') + ("; big: " + String(BigInt(count.value) ?? '')))) + '</div><button>update</button>';
+			_$_.output_push(__out);
+		});
+	});
+}
+
+export function ShadowedTextCalls() {
+	return _$_.tsrx_element(() => {
+		const String = () => _$_.tsrx_element(() => {
+			_$_.regular_block(() => {
+				let __out = '';
+
+				__out += '<b>string</b>';
+				_$_.output_push(__out);
+			});
+		});
+
+		const Number = () => _$_.tsrx_element(() => {
+			_$_.regular_block(() => {
+				let __out = '';
+
+				__out += '<b>number</b>';
+				_$_.output_push(__out);
+			});
+		});
+
+		const BigInt = () => _$_.tsrx_element(() => {
+			_$_.regular_block(() => {
+				let __out = '';
+
+				__out += '<b>bigint</b>';
+				_$_.output_push(__out);
+			});
+		});
+
+		const Date = () => _$_.tsrx_element(() => {
+			_$_.regular_block(() => {
+				let __out = '';
+
+				__out += '<b>date</b>';
+				_$_.output_push(__out);
+			});
+		});
+
+		_$_.regular_block(() => {
+			let __out = '';
+
+			__out += '<p>before';
+			_$_.output_push(__out);
+			__out = '';
+			_$_.render_tsrx_element(String());
+			__out += 'after</p><p>before';
+			_$_.output_push(__out);
+			__out = '';
+			_$_.render_tsrx_element(Number());
+			__out += 'after</p><p>before';
+			_$_.output_push(__out);
+			__out = '';
+			_$_.render_tsrx_element(BigInt());
+			__out += 'after</p><p>before';
+			_$_.output_push(__out);
+			__out = '';
+			_$_.render_tsrx_element(Date());
+			__out += 'after</p>';
+			_$_.output_push(__out);
+		});
+	});
 }