ripple 0.3.68 → 0.3.70

package/tests/hydration/compiled/server/mixed-control-flow.js

@@ -4,91 +4,93 @@ import * as _$_ from 'ripple/internal/server';
 import { track, trackAsync } from 'ripple/server';
 
 export function MixedControlFlowStatic() {
-	_$_.push_component();
-
-	const rows = [
-		{ id: 1, kind: 'a', enabled: true },
-		{ id: 2, kind: 'b', enabled: true },
-		{ id: 3, kind: 'a', enabled: false }
-	];
-
-	_$_.regular_block(() => {
-		_$_.output_push('<section');
-		_$_.output_push(' class="mixed-static"');
-		_$_.output_push('>');
-
-		{
-			_$_.output_push('<!--[-->');
+	return _$_.tsrx_element(() => {
+		const rows = [
+			{ id: 1, kind: 'a', enabled: true },
+			{ id: 2, kind: 'b', enabled: true },
+			{ id: 3, kind: 'a', enabled: false }
+		];
+
+		_$_.regular_block(() => {
+			_$_.output_push('<section');
+			_$_.output_push(' class="mixed-static"');
+			_$_.output_push('>');
 
-			for (const row of rows) {
+			{
 				_$_.output_push('<!--[-->');
 
-				if (row.enabled) {
+				for (const row of rows) {
 					_$_.output_push('<!--[-->');
 
-					switch (row.kind) {
-						case 'a':
-							_$_.try_block(
-								() => {
-									_$_.output_push('<!--[-->');
-									_$_.output_push('<div');
-									_$_.output_push(_$_.attr('class', `row row-${row.id} kind-a`));
-									_$_.output_push('>');
-
-									{
-										_$_.output_push(_$_.escape(`A-${row.id}`));
-									}
-
-									_$_.output_push('</div>');
-									_$_.output_push('<!--]-->');
-								},
-								null,
-								() => {
-									_$_.output_push('<!--[-->');
-									_$_.output_push('<div');
-									_$_.output_push(_$_.attr('class', `pending pending-${row.id}`));
-									_$_.output_push('>');
-
-									{
-										_$_.output_push('pending a');
-									}
-
-									_$_.output_push('</div>');
-									_$_.output_push('<!--]-->');
-								}
-							);
-							break;
-
-						default:
-							_$_.try_block(
-								() => {
-									_$_.output_push('<!--[-->');
-									_$_.output_push('<div');
-									_$_.output_push(_$_.attr('class', `row row-${row.id} kind-b`));
-									_$_.output_push('>');
-
-									{
-										_$_.output_push(_$_.escape(`B-${row.id}`));
+					if (row.enabled) {
+						_$_.output_push('<!--[-->');
+
+						switch (row.kind) {
+							case 'a':
+								_$_.try_block(
+									() => {
+										_$_.output_push('<!--[-->');
+										_$_.output_push('<div');
+										_$_.output_push(_$_.attr('class', `row row-${row.id} kind-a`));
+										_$_.output_push('>');
+
+										{
+											_$_.output_push(_$_.escape(`A-${row.id}`));
+										}
+
+										_$_.output_push('</div>');
+										_$_.output_push('<!--]-->');
+									},
+									null,
+									() => {
+										_$_.output_push('<!--[-->');
+										_$_.output_push('<div');
+										_$_.output_push(_$_.attr('class', `pending pending-${row.id}`));
+										_$_.output_push('>');
+
+										{
+											_$_.output_push('pending a');
+										}
+
+										_$_.output_push('</div>');
+										_$_.output_push('<!--]-->');
 									}
-
-									_$_.output_push('</div>');
-									_$_.output_push('<!--]-->');
-								},
-								null,
-								() => {
-									_$_.output_push('<!--[-->');
-									_$_.output_push('<div');
-									_$_.output_push(_$_.attr('class', `pending pending-${row.id}`));
-									_$_.output_push('>');
-
-									{
-										_$_.output_push('pending b');
+								);
+								break;
+
+							default:
+								_$_.try_block(
+									() => {
+										_$_.output_push('<!--[-->');
+										_$_.output_push('<div');
+										_$_.output_push(_$_.attr('class', `row row-${row.id} kind-b`));
+										_$_.output_push('>');
+
+										{
+											_$_.output_push(_$_.escape(`B-${row.id}`));
+										}
+
+										_$_.output_push('</div>');
+										_$_.output_push('<!--]-->');
+									},
+									null,
+									() => {
+										_$_.output_push('<!--[-->');
+										_$_.output_push('<div');
+										_$_.output_push(_$_.attr('class', `pending pending-${row.id}`));
+										_$_.output_push('>');
+
+										{
+											_$_.output_push('pending b');
+										}
+
+										_$_.output_push('</div>');
+										_$_.output_push('<!--]-->');
 									}
+								);
+						}
 
-									_$_.output_push('</div>');
-									_$_.output_push('<!--]-->');
-								}
-							);
+						_$_.output_push('<!--]-->');
 					}
 
 					_$_.output_push('<!--]-->');
@@ -97,135 +99,212 @@ export function MixedControlFlowStatic() {
 				_$_.output_push('<!--]-->');
 			}
 
-			_$_.output_push('<!--]-->');
-		}
-
-		_$_.output_push('</section>');
+			_$_.output_push('</section>');
+		});
 	});
-
-	_$_.pop_component();
 }
 
 export function MixedControlFlowReactive() {
-	_$_.push_component();
+	return _$_.tsrx_element(() => {
+		let lazy = _$_.track(true, '5ae53d26');
+		let lazy_1 = _$_.track('a', '5b53eda2');
+		let lazy_2 = _$_.track([{ id: 1, label: 'One' }, { id: 2, label: 'Two' }], '7890dad6');
+
+		_$_.regular_block(() => {
+			_$_.output_push('<button');
+			_$_.output_push(' class="toggle-show"');
+			_$_.output_push('>');
 
-	let lazy = _$_.track(true, '5ae53d26');
-	let lazy_1 = _$_.track('a', '5b53eda2');
-	let lazy_2 = _$_.track([{ id: 1, label: 'One' }, { id: 2, label: 'Two' }], '7890dad6');
+			{
+				_$_.output_push('Toggle Show');
+			}
 
-	_$_.regular_block(() => {
-		_$_.output_push('<button');
-		_$_.output_push(' class="toggle-show"');
-		_$_.output_push('>');
+			_$_.output_push('</button>');
+		});
 
-		{
-			_$_.output_push('Toggle Show');
-		}
+		_$_.regular_block(() => {
+			_$_.output_push('<button');
+			_$_.output_push(' class="toggle-mode"');
+			_$_.output_push('>');
 
-		_$_.output_push('</button>');
-	});
+			{
+				_$_.output_push('Toggle Mode');
+			}
 
-	_$_.regular_block(() => {
-		_$_.output_push('<button');
-		_$_.output_push(' class="toggle-mode"');
-		_$_.output_push('>');
+			_$_.output_push('</button>');
+		});
 
-		{
-			_$_.output_push('Toggle Mode');
-		}
+		_$_.regular_block(() => {
+			_$_.output_push('<button');
+			_$_.output_push(' class="add-item"');
+			_$_.output_push('>');
 
-		_$_.output_push('</button>');
-	});
+			{
+				_$_.output_push('Add Item');
+			}
 
-	_$_.regular_block(() => {
-		_$_.output_push('<button');
-		_$_.output_push(' class="add-item"');
-		_$_.output_push('>');
+			_$_.output_push('</button>');
+		});
 
-		{
-			_$_.output_push('Add Item');
-		}
+		_$_.regular_block(() => {
+			_$_.output_push('<!--[-->');
+
+			if (lazy.value) {
+				_$_.output_push('<div');
+				_$_.output_push(' class="mixed-reactive-list"');
+				_$_.output_push('>');
+
+				{
+					_$_.output_push('<!--[-->');
+
+					for (const item of lazy_2.value) {
+						_$_.output_push('<!--[-->');
+
+						switch (lazy_1.value) {
+							case 'a':
+								_$_.try_block(
+									() => {
+										_$_.output_push('<!--[-->');
+										_$_.output_push('<p');
+										_$_.output_push(_$_.attr('class', `item item-${item.id}`));
+										_$_.output_push('>');
+
+										{
+											_$_.output_push(_$_.escape(`A:${item.label}`));
+										}
+
+										_$_.output_push('</p>');
+										_$_.output_push('<!--]-->');
+									},
+									null,
+									() => {
+										_$_.output_push('<!--[-->');
+										_$_.output_push('<p');
+										_$_.output_push(' class="pending"');
+										_$_.output_push('>');
+
+										{
+											_$_.output_push('pending a');
+										}
+
+										_$_.output_push('</p>');
+										_$_.output_push('<!--]-->');
+									}
+								);
+								break;
+
+							default:
+								_$_.try_block(
+									() => {
+										_$_.output_push('<!--[-->');
+										_$_.output_push('<p');
+										_$_.output_push(_$_.attr('class', `item item-${item.id}`));
+										_$_.output_push('>');
+
+										{
+											_$_.output_push(_$_.escape(`B:${item.label}`));
+										}
+
+										_$_.output_push('</p>');
+										_$_.output_push('<!--]-->');
+									},
+									null,
+									() => {
+										_$_.output_push('<!--[-->');
+										_$_.output_push('<p');
+										_$_.output_push(' class="pending"');
+										_$_.output_push('>');
+
+										{
+											_$_.output_push('pending b');
+										}
+
+										_$_.output_push('</p>');
+										_$_.output_push('<!--]-->');
+									}
+								);
+						}
+
+						_$_.output_push('<!--]-->');
+					}
 
-		_$_.output_push('</button>');
+					_$_.output_push('<!--]-->');
+				}
+
+				_$_.output_push('</div>');
+			}
+
+			_$_.output_push('<!--]-->');
+		});
 	});
+}
 
-	_$_.regular_block(() => {
-		_$_.output_push('<!--[-->');
+export function MixedControlFlowAsyncPending() {
+	return _$_.tsrx_element(() => {
+		const rows = [1, 2];
+		const state = 'slow';
 
-		if (lazy.value) {
+		_$_.regular_block(() => {
 			_$_.output_push('<div');
-			_$_.output_push(' class="mixed-reactive-list"');
+			_$_.output_push(' class="before"');
 			_$_.output_push('>');
 
 			{
+				_$_.output_push('before');
+			}
+
+			_$_.output_push('</div>');
+		});
+
+		_$_.regular_block(() => {
+			_$_.output_push('<!--[-->');
+
+			for (const row of rows) {
 				_$_.output_push('<!--[-->');
 
-				for (const item of lazy_2.value) {
+				if (row === 1) {
 					_$_.output_push('<!--[-->');
 
-					switch (lazy_1.value) {
-						case 'a':
+					switch (state) {
+						case 'slow':
 							_$_.try_block(
 								() => {
 									_$_.output_push('<!--[-->');
-									_$_.output_push('<p');
-									_$_.output_push(_$_.attr('class', `item item-${item.id}`));
-									_$_.output_push('>');
 
 									{
-										_$_.output_push(_$_.escape(`A:${item.label}`));
+										const comp = AsyncRow;
+										const args = [{ label: `row-${row}` }];
+
+										_$_.render_component(comp, ...args);
 									}
 
-									_$_.output_push('</p>');
 									_$_.output_push('<!--]-->');
 								},
 								null,
 								() => {
 									_$_.output_push('<!--[-->');
-									_$_.output_push('<p');
-									_$_.output_push(' class="pending"');
+									_$_.output_push('<div');
+									_$_.output_push(_$_.attr('class', `pending-row pending-row-${row}`));
 									_$_.output_push('>');
 
 									{
-										_$_.output_push('pending a');
+										_$_.output_push(_$_.escape(`pending ${row}`));
 									}
 
-									_$_.output_push('</p>');
+									_$_.output_push('</div>');
 									_$_.output_push('<!--]-->');
 								}
 							);
 							break;
 
 						default:
-							_$_.try_block(
-								() => {
-									_$_.output_push('<!--[-->');
-									_$_.output_push('<p');
-									_$_.output_push(_$_.attr('class', `item item-${item.id}`));
-									_$_.output_push('>');
-
-									{
-										_$_.output_push(_$_.escape(`B:${item.label}`));
-									}
-
-									_$_.output_push('</p>');
-									_$_.output_push('<!--]-->');
-								},
-								null,
-								() => {
-									_$_.output_push('<!--[-->');
-									_$_.output_push('<p');
-									_$_.output_push(' class="pending"');
-									_$_.output_push('>');
-
-									{
-										_$_.output_push('pending b');
-									}
-
-									_$_.output_push('</p>');
-									_$_.output_push('<!--]-->');
-								}
-							);
+							_$_.output_push('<div');
+							_$_.output_push(' class="unexpected"');
+							_$_.output_push('>');
+							{
+								_$_.output_push('unexpected');
+							}
+							_$_.output_push('</div>');
 					}
 
 					_$_.output_push('<!--]-->');
@@ -234,112 +313,25 @@ export function MixedControlFlowReactive() {
 				_$_.output_push('<!--]-->');
 			}
 
-			_$_.output_push('</div>');
-		}
-
-		_$_.output_push('<!--]-->');
-	});
-
-	_$_.pop_component();
-}
-
-export function MixedControlFlowAsyncPending() {
-	_$_.push_component();
-
-	const rows = [1, 2];
-	const state = 'slow';
-
-	_$_.regular_block(() => {
-		_$_.output_push('<div');
-		_$_.output_push(' class="before"');
-		_$_.output_push('>');
-
-		{
-			_$_.output_push('before');
-		}
-
-		_$_.output_push('</div>');
-	});
-
-	_$_.regular_block(() => {
-		_$_.output_push('<!--[-->');
-
-		for (const row of rows) {
-			_$_.output_push('<!--[-->');
-
-			if (row === 1) {
-				_$_.output_push('<!--[-->');
-
-				switch (state) {
-					case 'slow':
-						_$_.try_block(
-							() => {
-								_$_.output_push('<!--[-->');
-
-								{
-									const comp = AsyncRow;
-									const args = [{ label: `row-${row}` }];
-
-									comp(...args);
-								}
-
-								_$_.output_push('<!--]-->');
-							},
-							null,
-							() => {
-								_$_.output_push('<!--[-->');
-								_$_.output_push('<div');
-								_$_.output_push(_$_.attr('class', `pending-row pending-row-${row}`));
-								_$_.output_push('>');
-
-								{
-									_$_.output_push(_$_.escape(`pending ${row}`));
-								}
-
-								_$_.output_push('</div>');
-								_$_.output_push('<!--]-->');
-							}
-						);
-						break;
-
-					default:
-						_$_.output_push('<div');
-						_$_.output_push(' class="unexpected"');
-						_$_.output_push('>');
-						{
-							_$_.output_push('unexpected');
-						}
-						_$_.output_push('</div>');
-				}
-
-				_$_.output_push('<!--]-->');
-			}
-
 			_$_.output_push('<!--]-->');
-		}
-
-		_$_.output_push('<!--]-->');
+		});
 	});
-
-	_$_.pop_component();
 }
 
 function AsyncRow({ label }) {
-	_$_.push_component();
+	return _$_.tsrx_element(() => {
+		let lazy_3 = _$_.track_async(() => Promise.resolve(label), '10cc79a0');
 
-	let lazy_3 = _$_.track_async(() => Promise.resolve(label), '10cc79a0');
-
-	_$_.regular_block(() => {
-		_$_.output_push('<div');
-		_$_.output_push(' class="resolved-row"');
-		_$_.output_push('>');
+		_$_.regular_block(() => {
+			_$_.output_push('<div');
+			_$_.output_push(' class="resolved-row"');
+			_$_.output_push('>');
 
-		{
-			_$_.output_push(_$_.escape(lazy_3.value));
-		}
+			{
+				_$_.output_push(_$_.escape(lazy_3.value));
+			}
 
-		_$_.output_push('</div>');
+			_$_.output_push('</div>');
+		});
 	});
-
-	_$_.pop_component();
 }