ripple 0.3.24 → 0.3.26

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

@@ -0,0 +1,502 @@
+// @ts-nocheck
+import * as _$_ from 'ripple/internal/server';
+
+import { track, trackAsync } from 'ripple/server';
+
+export const _$_server_$_ = (() => {
+	var _$_server_$_ = {};
+
+	_$_server_$_.formatValue = async function formatValue(n) {
+		return `server-${n}`;
+	};
+
+	return _$_server_$_;
+})();
+
+export function AsyncWithServerCall() {
+	_$_.push_component();
+
+	let lazy = _$_.track(0, '2e21cbe9');
+
+	_$_.regular_block(() => {
+		_$_.output_push('<button');
+		_$_.output_push(' class="increment"');
+		_$_.output_push('>');
+
+		{
+			_$_.output_push('increment');
+		}
+
+		_$_.output_push('</button>');
+	});
+
+	_$_.try_block(
+		() => {
+			_$_.output_push('<!--[-->');
+
+			let lazy_1 = _$_.track_async(() => _$_server_$_.formatValue(_$_.get(lazy)), 'f0c2b41e');
+
+			_$_.regular_block(() => {
+				_$_.output_push('<p');
+				_$_.output_push(' class="result"');
+				_$_.output_push('>');
+
+				{
+					_$_.output_push(_$_.escape(_$_.get(lazy_1)));
+				}
+
+				_$_.output_push('</p>');
+			});
+
+			_$_.output_push('<!--]-->');
+		},
+		null,
+		() => {
+			_$_.output_push('<!--[-->');
+
+			_$_.regular_block(() => {
+				_$_.output_push('<p');
+				_$_.output_push(' class="loading"');
+				_$_.output_push('>');
+
+				{
+					_$_.output_push('loading...');
+				}
+
+				_$_.output_push('</p>');
+			});
+
+			_$_.output_push('<!--]-->');
+		}
+	);
+
+	_$_.pop_component();
+}
+
+export function AsyncSimpleValue() {
+	_$_.push_component();
+
+	_$_.try_block(
+		() => {
+			_$_.output_push('<!--[-->');
+
+			let lazy_2 = _$_.track_async(() => Promise.resolve('hydrated value'), '4e502c38');
+
+			_$_.regular_block(() => {
+				_$_.output_push('<p');
+				_$_.output_push(' class="result"');
+				_$_.output_push('>');
+
+				{
+					_$_.output_push(_$_.escape(_$_.get(lazy_2)));
+				}
+
+				_$_.output_push('</p>');
+			});
+
+			_$_.output_push('<!--]-->');
+		},
+		null,
+		() => {
+			_$_.output_push('<!--[-->');
+
+			_$_.regular_block(() => {
+				_$_.output_push('<p');
+				_$_.output_push(' class="loading"');
+				_$_.output_push('>');
+
+				{
+					_$_.output_push('loading...');
+				}
+
+				_$_.output_push('</p>');
+			});
+
+			_$_.output_push('<!--]-->');
+		}
+	);
+
+	_$_.pop_component();
+}
+
+export function AsyncNumericValue() {
+	_$_.push_component();
+
+	_$_.try_block(
+		() => {
+			_$_.output_push('<!--[-->');
+
+			let lazy_3 = _$_.track_async(() => Promise.resolve(42), '14891754');
+
+			_$_.regular_block(() => {
+				_$_.output_push('<span');
+				_$_.output_push(' class="count"');
+				_$_.output_push('>');
+
+				{
+					_$_.output_push(_$_.escape(_$_.get(lazy_3)));
+				}
+
+				_$_.output_push('</span>');
+			});
+
+			_$_.output_push('<!--]-->');
+		},
+		null,
+		() => {
+			_$_.output_push('<!--[-->');
+
+			_$_.regular_block(() => {
+				_$_.output_push('<span');
+				_$_.output_push(' class="pending"');
+				_$_.output_push('>');
+
+				{
+					_$_.output_push('...');
+				}
+
+				_$_.output_push('</span>');
+			});
+
+			_$_.output_push('<!--]-->');
+		}
+	);
+
+	_$_.pop_component();
+}
+
+export function AsyncObjectValue() {
+	_$_.push_component();
+
+	_$_.try_block(
+		() => {
+			_$_.output_push('<!--[-->');
+
+			let lazy_4 = _$_.track_async(() => Promise.resolve({ name: 'Alice', age: 30 }), 'f325448a');
+
+			_$_.regular_block(() => {
+				_$_.output_push('<div');
+				_$_.output_push(' class="user"');
+				_$_.output_push('>');
+
+				{
+					_$_.output_push('<span');
+					_$_.output_push(' class="name"');
+					_$_.output_push('>');
+
+					{
+						_$_.output_push(_$_.escape(_$_.get(lazy_4).name));
+					}
+
+					_$_.output_push('</span>');
+					_$_.output_push('<span');
+					_$_.output_push(' class="age"');
+					_$_.output_push('>');
+
+					{
+						_$_.output_push(_$_.escape(_$_.get(lazy_4).age));
+					}
+
+					_$_.output_push('</span>');
+				}
+
+				_$_.output_push('</div>');
+			});
+
+			_$_.output_push('<!--]-->');
+		},
+		null,
+		() => {
+			_$_.output_push('<!--[-->');
+
+			_$_.regular_block(() => {
+				_$_.output_push('<div');
+				_$_.output_push(' class="loading"');
+				_$_.output_push('>');
+
+				{
+					_$_.output_push('loading user...');
+				}
+
+				_$_.output_push('</div>');
+			});
+
+			_$_.output_push('<!--]-->');
+		}
+	);
+
+	_$_.pop_component();
+}
+
+export function AsyncMultipleValues() {
+	_$_.push_component();
+
+	_$_.try_block(
+		() => {
+			_$_.output_push('<!--[-->');
+
+			let lazy_5 = _$_.track_async(() => Promise.resolve('alpha'), 'ab8199a0');
+			let lazy_6 = _$_.track_async(() => Promise.resolve('beta'), 'fb7ad40b');
+
+			_$_.regular_block(() => {
+				_$_.output_push('<div');
+				_$_.output_push(' class="multi"');
+				_$_.output_push('>');
+
+				{
+					_$_.output_push('<span');
+					_$_.output_push(' class="first"');
+					_$_.output_push('>');
+
+					{
+						_$_.output_push(_$_.escape(_$_.get(lazy_5)));
+					}
+
+					_$_.output_push('</span>');
+					_$_.output_push('<span');
+					_$_.output_push(' class="second"');
+					_$_.output_push('>');
+
+					{
+						_$_.output_push(_$_.escape(_$_.get(lazy_6)));
+					}
+
+					_$_.output_push('</span>');
+				}
+
+				_$_.output_push('</div>');
+			});
+
+			_$_.output_push('<!--]-->');
+		},
+		null,
+		() => {
+			_$_.output_push('<!--[-->');
+
+			_$_.regular_block(() => {
+				_$_.output_push('<div');
+				_$_.output_push(' class="loading"');
+				_$_.output_push('>');
+
+				{
+					_$_.output_push('loading...');
+				}
+
+				_$_.output_push('</div>');
+			});
+
+			_$_.output_push('<!--]-->');
+		}
+	);
+
+	_$_.pop_component();
+}
+
+export function AsyncWithCatch() {
+	_$_.push_component();
+
+	_$_.try_block(
+		() => {
+			_$_.output_push('<!--[-->');
+
+			let lazy_7 = _$_.track_async(() => Promise.reject(new Error('fetch failed')), '99982de5');
+
+			_$_.regular_block(() => {
+				_$_.output_push('<p');
+				_$_.output_push(' class="result"');
+				_$_.output_push('>');
+
+				{
+					_$_.output_push(_$_.escape(_$_.get(lazy_7)));
+				}
+
+				_$_.output_push('</p>');
+			});
+
+			_$_.output_push('<!--]-->');
+		},
+		(e) => {
+			_$_.output_push('<!--[-->');
+
+			_$_.regular_block(() => {
+				_$_.output_push('<p');
+				_$_.output_push(' class="error"');
+				_$_.output_push('>');
+
+				{
+					_$_.output_push(_$_.escape(e.message));
+				}
+
+				_$_.output_push('</p>');
+			});
+
+			_$_.output_push('<!--]-->');
+		},
+		() => {
+			_$_.output_push('<!--[-->');
+
+			_$_.regular_block(() => {
+				_$_.output_push('<p');
+				_$_.output_push(' class="loading"');
+				_$_.output_push('>');
+
+				{
+					_$_.output_push('loading...');
+				}
+
+				_$_.output_push('</p>');
+			});
+
+			_$_.output_push('<!--]-->');
+		}
+	);
+
+	_$_.pop_component();
+}
+
+export function ChildWithError() {
+	_$_.push_component();
+
+	_$_.try_block(
+		() => {
+			_$_.output_push('<!--[-->');
+
+			let lazy_8 = _$_.track_async(() => Promise.reject(new Error('child error')), '1dea4c85');
+
+			_$_.regular_block(() => {
+				_$_.output_push('<p');
+				_$_.output_push(' class="result"');
+				_$_.output_push('>');
+
+				{
+					_$_.output_push(_$_.escape(_$_.get(lazy_8)));
+				}
+
+				_$_.output_push('</p>');
+			});
+
+			_$_.output_push('<!--]-->');
+		},
+		null,
+		() => {
+			_$_.output_push('<!--[-->');
+
+			_$_.regular_block(() => {
+				_$_.output_push('<p');
+				_$_.output_push(' class="pending"');
+				_$_.output_push('>');
+
+				{
+					_$_.output_push('loading...');
+				}
+
+				_$_.output_push('</p>');
+			});
+
+			_$_.output_push('<!--]-->');
+		}
+	);
+
+	_$_.pop_component();
+}
+
+export function ParentWithCatch() {
+	_$_.push_component();
+
+	_$_.try_block(
+		() => {
+			_$_.output_push('<!--[-->');
+
+			_$_.regular_block(() => {
+				{
+					const comp = ChildWithError;
+					const args = [{}];
+
+					comp(...args);
+				}
+			});
+
+			_$_.output_push('<!--]-->');
+		},
+		(e) => {
+			_$_.output_push('<!--[-->');
+
+			_$_.regular_block(() => {
+				_$_.output_push('<p');
+				_$_.output_push(' class="parent-error"');
+				_$_.output_push('>');
+
+				{
+					_$_.output_push(_$_.escape(e.message));
+				}
+
+				_$_.output_push('</p>');
+			});
+
+			_$_.output_push('<!--]-->');
+		},
+		null
+	);
+
+	_$_.pop_component();
+}
+
+export function AsyncWithReactiveDependency() {
+	_$_.push_component();
+
+	let lazy_9 = _$_.track(0, 'c9d12acf');
+
+	_$_.regular_block(() => {
+		_$_.output_push('<button');
+		_$_.output_push(' class="increment"');
+		_$_.output_push('>');
+
+		{
+			_$_.output_push('increment');
+		}
+
+		_$_.output_push('</button>');
+	});
+
+	_$_.try_block(
+		() => {
+			_$_.output_push('<!--[-->');
+
+			let lazy_10 = _$_.track_async(() => Promise.resolve(`count-${_$_.get(lazy_9)}`), 'cdd1adb8');
+
+			_$_.regular_block(() => {
+				_$_.output_push('<p');
+				_$_.output_push(' class="result"');
+				_$_.output_push('>');
+
+				{
+					_$_.output_push(_$_.escape(_$_.get(lazy_10)));
+				}
+
+				_$_.output_push('</p>');
+			});
+
+			_$_.output_push('<!--]-->');
+		},
+		null,
+		() => {
+			_$_.output_push('<!--[-->');
+
+			_$_.regular_block(() => {
+				_$_.output_push('<p');
+				_$_.output_push(' class="loading"');
+				_$_.output_push('>');
+
+				{
+					_$_.output_push('loading...');
+				}
+
+				_$_.output_push('</p>');
+			});
+
+			_$_.output_push('<!--]-->');
+		}
+	);
+
+	_$_.pop_component();
+}

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

@@ -47,7 +47,7 @@ export function AsyncListInTryPending() {
 function AsyncList() {
 	_$_.push_component();
 
-	let lazy = _$_.track_async(() => Promise.resolve(['alpha', 'beta', 'gamma']));
+	let lazy = _$_.track_async(() => Promise.resolve(['alpha', 'beta', 'gamma']), 'd6bf9e33');
 
 	_$_.regular_block(() => {
 		_$_.output_push('<ul');
@@ -133,7 +133,7 @@ export function AsyncTryWithLeadingSibling() {
 function AsyncContent() {
 	_$_.push_component();
 
-	let lazy_1 = _$_.track_async(() => Promise.resolve('ready'));
+	let lazy_1 = _$_.track_async(() => Promise.resolve('ready'), 'd2fe7b64');
 
 	_$_.regular_block(() => {
 		_$_.output_push('<div');

package/tests/hydration/components/track-async-serialization.tsrx

@@ -0,0 +1,116 @@
+import { track, trackAsync } from 'ripple';
+
+#server {
+	export async function formatValue(n: number): Promise<string> {
+		return `server-${n}`;
+	}
+}
+
+export component AsyncWithServerCall() {
+	let &[count] = track(0);
+
+	<button
+		class="increment"
+		onClick={() => {
+			count++;
+		}}
+	>
+		{'increment'}
+	</button>
+	try {
+		let &[data] = trackAsync(() => #server.formatValue(count));
+		<p class="result">{data}</p>
+	} pending {
+		<p class="loading">{'loading...'}</p>
+	}
+}
+
+export component AsyncSimpleValue() {
+	try {
+		let &[data] = trackAsync(() => Promise.resolve('hydrated value'));
+		<p class="result">{data}</p>
+	} pending {
+		<p class="loading">{'loading...'}</p>
+	}
+}
+
+export component AsyncNumericValue() {
+	try {
+		let &[count] = trackAsync(() => Promise.resolve(42));
+		<span class="count">{count}</span>
+	} pending {
+		<span class="pending">{'...'}</span>
+	}
+}
+
+export component AsyncObjectValue() {
+	try {
+		let &[user] = trackAsync(() => Promise.resolve({ name: 'Alice', age: 30 }));
+		<div class="user">
+			<span class="name">{user.name}</span>
+			<span class="age">{user.age}</span>
+		</div>
+	} pending {
+		<div class="loading">{'loading user...'}</div>
+	}
+}
+
+export component AsyncMultipleValues() {
+	try {
+		let &[first] = trackAsync(() => Promise.resolve('alpha'));
+		let &[second] = trackAsync(() => Promise.resolve('beta'));
+		<div class="multi">
+			<span class="first">{first}</span>
+			<span class="second">{second}</span>
+		</div>
+	} pending {
+		<div class="loading">{'loading...'}</div>
+	}
+}
+
+export component AsyncWithCatch() {
+	try {
+		let &[data] = trackAsync(() => Promise.reject(new Error('fetch failed')));
+		<p class="result">{data}</p>
+	} pending {
+		<p class="loading">{'loading...'}</p>
+	} catch (e) {
+		<p class="error">{(e as Error).message}</p>
+	}
+}
+
+export component ChildWithError() {
+	try {
+		let &[data] = trackAsync(() => Promise.reject(new Error('child error')));
+		<p class="result">{data}</p>
+	} pending {
+		<p class="pending">{'loading...'}</p>
+	}
+}
+
+export component ParentWithCatch() {
+	try {
+		<ChildWithError />
+	} catch (e) {
+		<p class="parent-error">{(e as Error).message}</p>
+	}
+}
+
+export component AsyncWithReactiveDependency() {
+	let &[count] = track(0);
+
+	<button
+		class="increment"
+		onClick={() => {
+			count++;
+		}}
+	>
+		{'increment'}
+	</button>
+	try {
+		let &[data] = trackAsync(() => Promise.resolve(`count-${count}`));
+		<p class="result">{data}</p>
+	} pending {
+		<p class="loading">{'loading...'}</p>
+	}
+}