ripple 0.3.67 → 0.3.69

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

@@ -2,228 +2,64 @@
 import * as _$_ from 'ripple/internal/server';
 
 export function ForIf() {
-	_$_.push_component();
-
-	const items = [
-		{ id: 1, show: true, label: 'One' },
-		{ id: 2, show: true, label: 'Two' },
-		{ id: 3, show: false, label: 'Three' }
-	];
-
-	_$_.regular_block(() => {
-		_$_.output_push('<ul');
-		_$_.output_push(' class="for-if"');
-		_$_.output_push('>');
-
-		{
-			_$_.output_push('<!--[-->');
+	return _$_.tsrx_element(() => {
+		const items = [
+			{ id: 1, show: true, label: 'One' },
+			{ id: 2, show: true, label: 'Two' },
+			{ id: 3, show: false, label: 'Three' }
+		];
+
+		_$_.regular_block(() => {
+			_$_.output_push('<ul');
+			_$_.output_push(' class="for-if"');
+			_$_.output_push('>');
 
-			for (const item of items) {
+			{
 				_$_.output_push('<!--[-->');
 
-				if (item.show) {
-					_$_.output_push('<li');
-					_$_.output_push(_$_.attr('class', `item item-${item.id}`));
-					_$_.output_push('>');
-
-					{
-						_$_.output_push(_$_.escape(item.label));
-					}
-
-					_$_.output_push('</li>');
-				}
-
-				_$_.output_push('<!--]-->');
-			}
-
-			_$_.output_push('<!--]-->');
-		}
-
-		_$_.output_push('</ul>');
-	});
-
-	_$_.pop_component();
-}
-
-export function ForSwitch() {
-	_$_.push_component();
-
-	const items = [
-		{ id: 1, kind: 'a' },
-		{ id: 2, kind: 'b' },
-		{ id: 3, kind: 'a' }
-	];
-
-	_$_.regular_block(() => {
-		_$_.output_push('<ul');
-		_$_.output_push(' class="for-switch"');
-		_$_.output_push('>');
-
-		{
-			_$_.output_push('<!--[-->');
-
-			for (const item of items) {
-				_$_.output_push('<!--[-->');
+				for (const item of items) {
+					_$_.output_push('<!--[-->');
 
-				switch (item.kind) {
-					case 'a':
+					if (item.show) {
 						_$_.output_push('<li');
-						_$_.output_push(_$_.attr('class', `item item-${item.id} kind-a`));
+						_$_.output_push(_$_.attr('class', `item item-${item.id}`));
 						_$_.output_push('>');
-						{
-							_$_.output_push(_$_.escape(`A-${item.id}`));
-						}
-						_$_.output_push('</li>');
-						break;
 
-					default:
-						_$_.output_push('<li');
-						_$_.output_push(_$_.attr('class', `item item-${item.id} kind-b`));
-						_$_.output_push('>');
 						{
-							_$_.output_push(_$_.escape(`B-${item.id}`));
+							_$_.output_push(_$_.escape(item.label));
 						}
-						_$_.output_push('</li>');
-				}
-
-				_$_.output_push('<!--]-->');
-			}
-
-			_$_.output_push('<!--]-->');
-		}
-
-		_$_.output_push('</ul>');
-	});
-
-	_$_.pop_component();
-}
 
-export function IfSwitch() {
-	_$_.push_component();
-
-	const show = true;
-	const kind = 'a';
-
-	_$_.regular_block(() => {
-		_$_.output_push('<div');
-		_$_.output_push(' class="if-switch"');
-		_$_.output_push('>');
-
-		{
-			_$_.output_push('<!--[-->');
-
-			if (show) {
-				_$_.output_push('<!--[-->');
-
-				switch (kind) {
-					case 'a':
-						_$_.output_push('<p');
-						_$_.output_push(' class="case-a"');
-						_$_.output_push('>');
-						{
-							_$_.output_push('Case A');
-						}
-						_$_.output_push('</p>');
-						break;
+						_$_.output_push('</li>');
+					}
 
-					default:
-						_$_.output_push('<p');
-						_$_.output_push(' class="case-default"');
-						_$_.output_push('>');
-						{
-							_$_.output_push('Default');
-						}
-						_$_.output_push('</p>');
+					_$_.output_push('<!--]-->');
 				}
 
 				_$_.output_push('<!--]-->');
 			}
 
-			_$_.output_push('<!--]-->');
-		}
-
-		_$_.output_push('</div>');
+			_$_.output_push('</ul>');
+		});
 	});
-
-	_$_.pop_component();
 }
 
-export function IfSwitchHidden() {
-	_$_.push_component();
-
-	const show = false;
-	const kind = 'a';
-
-	_$_.regular_block(() => {
-		_$_.output_push('<div');
-		_$_.output_push(' class="if-switch-hidden"');
-		_$_.output_push('>');
-
-		{
-			_$_.output_push('<!--[-->');
-
-			if (show) {
-				_$_.output_push('<!--[-->');
-
-				switch (kind) {
-					case 'a':
-						_$_.output_push('<p');
-						_$_.output_push(' class="case-a"');
-						_$_.output_push('>');
-						{
-							_$_.output_push('Case A');
-						}
-						_$_.output_push('</p>');
-						break;
-
-					default:
-						_$_.output_push('<p');
-						_$_.output_push(' class="case-default"');
-						_$_.output_push('>');
-						{
-							_$_.output_push('Default');
-						}
-						_$_.output_push('</p>');
-				}
-
-				_$_.output_push('<!--]-->');
-			}
-
-			_$_.output_push('<!--]-->');
-			_$_.output_push('<p');
-			_$_.output_push(' class="after"');
+export function ForSwitch() {
+	return _$_.tsrx_element(() => {
+		const items = [
+			{ id: 1, kind: 'a' },
+			{ id: 2, kind: 'b' },
+			{ id: 3, kind: 'a' }
+		];
+
+		_$_.regular_block(() => {
+			_$_.output_push('<ul');
+			_$_.output_push(' class="for-switch"');
 			_$_.output_push('>');
 
 			{
-				_$_.output_push('after');
-			}
-
-			_$_.output_push('</p>');
-		}
-
-		_$_.output_push('</div>');
-	});
-
-	_$_.pop_component();
-}
-
-export function ForIfSwitchSingle() {
-	_$_.push_component();
-
-	const items = [{ id: 1, kind: 'a', show: true }];
-
-	_$_.regular_block(() => {
-		_$_.output_push('<ul');
-		_$_.output_push(' class="for-if-switch-single"');
-		_$_.output_push('>');
-
-		{
-			_$_.output_push('<!--[-->');
-
-			for (const item of items) {
 				_$_.output_push('<!--[-->');
 
-				if (item.show) {
+				for (const item of items) {
 					_$_.output_push('<!--[-->');
 
 					switch (item.kind) {
@@ -239,10 +75,10 @@ export function ForIfSwitchSingle() {
 
 						default:
 							_$_.output_push('<li');
-							_$_.output_push(_$_.attr('class', `item item-${item.id} kind-default`));
+							_$_.output_push(_$_.attr('class', `item item-${item.id} kind-b`));
 							_$_.output_push('>');
 							{
-								_$_.output_push(_$_.escape(`D-${item.id}`));
+								_$_.output_push(_$_.escape(`B-${item.id}`));
 							}
 							_$_.output_push('</li>');
 					}
@@ -253,56 +89,46 @@ export function ForIfSwitchSingle() {
 				_$_.output_push('<!--]-->');
 			}
 
-			_$_.output_push('<!--]-->');
-		}
-
-		_$_.output_push('</ul>');
+			_$_.output_push('</ul>');
+		});
 	});
-
-	_$_.pop_component();
 }
 
-export function ForIfSwitchMulti() {
-	_$_.push_component();
-
-	const items = [
-		{ id: 1, kind: 'a', show: true },
-		{ id: 2, kind: 'b', show: true }
-	];
-
-	_$_.regular_block(() => {
-		_$_.output_push('<ul');
-		_$_.output_push(' class="for-if-switch-multi"');
-		_$_.output_push('>');
+export function IfSwitch() {
+	return _$_.tsrx_element(() => {
+		const show = true;
+		const kind = 'a';
 
-		{
-			_$_.output_push('<!--[-->');
+		_$_.regular_block(() => {
+			_$_.output_push('<div');
+			_$_.output_push(' class="if-switch"');
+			_$_.output_push('>');
 
-			for (const item of items) {
+			{
 				_$_.output_push('<!--[-->');
 
-				if (item.show) {
+				if (show) {
 					_$_.output_push('<!--[-->');
 
-					switch (item.kind) {
+					switch (kind) {
 						case 'a':
-							_$_.output_push('<li');
-							_$_.output_push(_$_.attr('class', `item item-${item.id} kind-a`));
+							_$_.output_push('<p');
+							_$_.output_push(' class="case-a"');
 							_$_.output_push('>');
 							{
-								_$_.output_push(_$_.escape(`A-${item.id}`));
+								_$_.output_push('Case A');
 							}
-							_$_.output_push('</li>');
+							_$_.output_push('</p>');
 							break;
 
 						default:
-							_$_.output_push('<li');
-							_$_.output_push(_$_.attr('class', `item item-${item.id} kind-b`));
+							_$_.output_push('<p');
+							_$_.output_push(' class="case-default"');
 							_$_.output_push('>');
 							{
-								_$_.output_push(_$_.escape(`B-${item.id}`));
+								_$_.output_push('Default');
 							}
-							_$_.output_push('</li>');
+							_$_.output_push('</p>');
 					}
 
 					_$_.output_push('<!--]-->');
@@ -311,309 +137,310 @@ export function ForIfSwitchMulti() {
 				_$_.output_push('<!--]-->');
 			}
 
-			_$_.output_push('<!--]-->');
-		}
-
-		_$_.output_push('</ul>');
+			_$_.output_push('</div>');
+		});
 	});
-
-	_$_.pop_component();
 }
 
-export function ForIfSwitchWithDisabled() {
-	_$_.push_component();
-
-	const items = [
-		{ id: 1, kind: 'a', show: true },
-		{ id: 2, kind: 'b', show: false },
-		{ id: 3, kind: 'a', show: true }
-	];
-
-	_$_.regular_block(() => {
-		_$_.output_push('<ul');
-		_$_.output_push(' class="for-if-switch-disabled"');
-		_$_.output_push('>');
+export function IfSwitchHidden() {
+	return _$_.tsrx_element(() => {
+		const show = false;
+		const kind = 'a';
 
-		{
-			_$_.output_push('<!--[-->');
+		_$_.regular_block(() => {
+			_$_.output_push('<div');
+			_$_.output_push(' class="if-switch-hidden"');
+			_$_.output_push('>');
 
-			for (const item of items) {
+			{
 				_$_.output_push('<!--[-->');
 
-				if (item.show) {
+				if (show) {
 					_$_.output_push('<!--[-->');
 
-					switch (item.kind) {
+					switch (kind) {
 						case 'a':
-							_$_.output_push('<li');
-							_$_.output_push(_$_.attr('class', `item item-${item.id} kind-a`));
+							_$_.output_push('<p');
+							_$_.output_push(' class="case-a"');
 							_$_.output_push('>');
 							{
-								_$_.output_push(_$_.escape(`A-${item.id}`));
+								_$_.output_push('Case A');
 							}
-							_$_.output_push('</li>');
+							_$_.output_push('</p>');
 							break;
 
 						default:
-							_$_.output_push('<li');
-							_$_.output_push(_$_.attr('class', `item item-${item.id} kind-b`));
+							_$_.output_push('<p');
+							_$_.output_push(' class="case-default"');
 							_$_.output_push('>');
 							{
-								_$_.output_push(_$_.escape(`B-${item.id}`));
+								_$_.output_push('Default');
 							}
-							_$_.output_push('</li>');
+							_$_.output_push('</p>');
 					}
 
 					_$_.output_push('<!--]-->');
 				}
 
 				_$_.output_push('<!--]-->');
-			}
+				_$_.output_push('<p');
+				_$_.output_push(' class="after"');
+				_$_.output_push('>');
+
+				{
+					_$_.output_push('after');
+				}
 
-			_$_.output_push('<!--]-->');
-		}
+				_$_.output_push('</p>');
+			}
 
-		_$_.output_push('</ul>');
+			_$_.output_push('</div>');
+		});
 	});
-
-	_$_.pop_component();
 }
 
-export function SwitchTry() {
-	_$_.push_component();
-
-	const kind = 'a';
-
-	_$_.regular_block(() => {
-		_$_.output_push('<div');
-		_$_.output_push(' class="switch-try"');
-		_$_.output_push('>');
+export function ForIfSwitchSingle() {
+	return _$_.tsrx_element(() => {
+		const items = [{ id: 1, kind: 'a', show: true }];
 
-		{
-			_$_.output_push('<!--[-->');
+		_$_.regular_block(() => {
+			_$_.output_push('<ul');
+			_$_.output_push(' class="for-if-switch-single"');
+			_$_.output_push('>');
 
-			switch (kind) {
-				case 'a':
-					_$_.try_block(
-						() => {
-							_$_.output_push('<!--[-->');
-							_$_.output_push('<p');
-							_$_.output_push(' class="resolved-a"');
-							_$_.output_push('>');
+			{
+				_$_.output_push('<!--[-->');
 
-							{
-								_$_.output_push('A resolved');
-							}
+				for (const item of items) {
+					_$_.output_push('<!--[-->');
 
-							_$_.output_push('</p>');
-							_$_.output_push('<!--]-->');
-						},
-						null,
-						() => {
-							_$_.output_push('<!--[-->');
-							_$_.output_push('<p');
-							_$_.output_push(' class="pending-a"');
-							_$_.output_push('>');
+					if (item.show) {
+						_$_.output_push('<!--[-->');
 
-							{
-								_$_.output_push('A pending');
-							}
+						switch (item.kind) {
+							case 'a':
+								_$_.output_push('<li');
+								_$_.output_push(_$_.attr('class', `item item-${item.id} kind-a`));
+								_$_.output_push('>');
+								{
+									_$_.output_push(_$_.escape(`A-${item.id}`));
+								}
+								_$_.output_push('</li>');
+								break;
 
-							_$_.output_push('</p>');
-							_$_.output_push('<!--]-->');
+							default:
+								_$_.output_push('<li');
+								_$_.output_push(_$_.attr('class', `item item-${item.id} kind-default`));
+								_$_.output_push('>');
+								{
+									_$_.output_push(_$_.escape(`D-${item.id}`));
+								}
+								_$_.output_push('</li>');
 						}
-					);
-					break;
-
-				default:
-					_$_.output_push('<p');
-					_$_.output_push(' class="default"');
-					_$_.output_push('>');
-					{
-						_$_.output_push('Default');
+
+						_$_.output_push('<!--]-->');
 					}
-					_$_.output_push('</p>');
-			}
 
-			_$_.output_push('<!--]-->');
-		}
+					_$_.output_push('<!--]-->');
+				}
+
+				_$_.output_push('<!--]-->');
+			}
 
-		_$_.output_push('</div>');
+			_$_.output_push('</ul>');
+		});
 	});
-
-	_$_.pop_component();
 }
 
-export function ForSwitchTry() {
-	_$_.push_component();
-
-	const items = [{ id: 1, kind: 'a' }, { id: 2, kind: 'b' }];
+export function ForIfSwitchMulti() {
+	return _$_.tsrx_element(() => {
+		const items = [
+			{ id: 1, kind: 'a', show: true },
+			{ id: 2, kind: 'b', show: true }
+		];
+
+		_$_.regular_block(() => {
+			_$_.output_push('<ul');
+			_$_.output_push(' class="for-if-switch-multi"');
+			_$_.output_push('>');
 
-	_$_.regular_block(() => {
-		_$_.output_push('<ul');
-		_$_.output_push(' class="for-switch-try"');
-		_$_.output_push('>');
+			{
+				_$_.output_push('<!--[-->');
 
-		{
-			_$_.output_push('<!--[-->');
+				for (const item of items) {
+					_$_.output_push('<!--[-->');
 
-			for (const item of items) {
-				_$_.output_push('<!--[-->');
+					if (item.show) {
+						_$_.output_push('<!--[-->');
 
-				switch (item.kind) {
-					case 'a':
-						_$_.try_block(
-							() => {
-								_$_.output_push('<!--[-->');
+						switch (item.kind) {
+							case 'a':
 								_$_.output_push('<li');
 								_$_.output_push(_$_.attr('class', `item item-${item.id} kind-a`));
 								_$_.output_push('>');
-
 								{
 									_$_.output_push(_$_.escape(`A-${item.id}`));
 								}
-
 								_$_.output_push('</li>');
-								_$_.output_push('<!--]-->');
-							},
-							null,
-							() => {
-								_$_.output_push('<!--[-->');
+								break;
+
+							default:
 								_$_.output_push('<li');
-								_$_.output_push(_$_.attr('class', `pending pending-${item.id}`));
+								_$_.output_push(_$_.attr('class', `item item-${item.id} kind-b`));
 								_$_.output_push('>');
-
 								{
-									_$_.output_push(_$_.escape(`pending ${item.id}`));
+									_$_.output_push(_$_.escape(`B-${item.id}`));
 								}
-
 								_$_.output_push('</li>');
-								_$_.output_push('<!--]-->');
-							}
-						);
-						break;
+						}
 
-					default:
-						_$_.try_block(
-							() => {
-								_$_.output_push('<!--[-->');
+						_$_.output_push('<!--]-->');
+					}
+
+					_$_.output_push('<!--]-->');
+				}
+
+				_$_.output_push('<!--]-->');
+			}
+
+			_$_.output_push('</ul>');
+		});
+	});
+}
+
+export function ForIfSwitchWithDisabled() {
+	return _$_.tsrx_element(() => {
+		const items = [
+			{ id: 1, kind: 'a', show: true },
+			{ id: 2, kind: 'b', show: false },
+			{ id: 3, kind: 'a', show: true }
+		];
+
+		_$_.regular_block(() => {
+			_$_.output_push('<ul');
+			_$_.output_push(' class="for-if-switch-disabled"');
+			_$_.output_push('>');
+
+			{
+				_$_.output_push('<!--[-->');
+
+				for (const item of items) {
+					_$_.output_push('<!--[-->');
+
+					if (item.show) {
+						_$_.output_push('<!--[-->');
+
+						switch (item.kind) {
+							case 'a':
 								_$_.output_push('<li');
-								_$_.output_push(_$_.attr('class', `item item-${item.id} kind-b`));
+								_$_.output_push(_$_.attr('class', `item item-${item.id} kind-a`));
 								_$_.output_push('>');
-
 								{
-									_$_.output_push(_$_.escape(`B-${item.id}`));
+									_$_.output_push(_$_.escape(`A-${item.id}`));
 								}
-
 								_$_.output_push('</li>');
-								_$_.output_push('<!--]-->');
-							},
-							null,
-							() => {
-								_$_.output_push('<!--[-->');
+								break;
+
+							default:
 								_$_.output_push('<li');
-								_$_.output_push(_$_.attr('class', `pending pending-${item.id}`));
+								_$_.output_push(_$_.attr('class', `item item-${item.id} kind-b`));
 								_$_.output_push('>');
-
 								{
-									_$_.output_push(_$_.escape(`pending ${item.id}`));
+									_$_.output_push(_$_.escape(`B-${item.id}`));
 								}
-
 								_$_.output_push('</li>');
-								_$_.output_push('<!--]-->');
-							}
-						);
+						}
+
+						_$_.output_push('<!--]-->');
+					}
+
+					_$_.output_push('<!--]-->');
 				}
 
 				_$_.output_push('<!--]-->');
 			}
 
-			_$_.output_push('<!--]-->');
-		}
-
-		_$_.output_push('</ul>');
+			_$_.output_push('</ul>');
+		});
 	});
-
-	_$_.pop_component();
 }
 
-export function ForIfTry() {
-	_$_.push_component();
-
-	const items = [{ id: 1, show: true }, { id: 2, show: true }];
-
-	_$_.regular_block(() => {
-		_$_.output_push('<ul');
-		_$_.output_push(' class="for-if-try"');
-		_$_.output_push('>');
+export function SwitchTry() {
+	return _$_.tsrx_element(() => {
+		const kind = 'a';
 
-		{
-			_$_.output_push('<!--[-->');
+		_$_.regular_block(() => {
+			_$_.output_push('<div');
+			_$_.output_push(' class="switch-try"');
+			_$_.output_push('>');
 
-			for (const item of items) {
+			{
 				_$_.output_push('<!--[-->');
 
-				if (item.show) {
-					_$_.try_block(
-						() => {
-							_$_.output_push('<!--[-->');
-							_$_.output_push('<li');
-							_$_.output_push(_$_.attr('class', `item item-${item.id}`));
-							_$_.output_push('>');
+				switch (kind) {
+					case 'a':
+						_$_.try_block(
+							() => {
+								_$_.output_push('<!--[-->');
+								_$_.output_push('<p');
+								_$_.output_push(' class="resolved-a"');
+								_$_.output_push('>');
 
-							{
-								_$_.output_push(_$_.escape(`item-${item.id}`));
-							}
+								{
+									_$_.output_push('A resolved');
+								}
 
-							_$_.output_push('</li>');
-							_$_.output_push('<!--]-->');
-						},
-						null,
-						() => {
-							_$_.output_push('<!--[-->');
-							_$_.output_push('<li');
-							_$_.output_push(_$_.attr('class', `pending pending-${item.id}`));
-							_$_.output_push('>');
+								_$_.output_push('</p>');
+								_$_.output_push('<!--]-->');
+							},
+							null,
+							() => {
+								_$_.output_push('<!--[-->');
+								_$_.output_push('<p');
+								_$_.output_push(' class="pending-a"');
+								_$_.output_push('>');
 
-							{
-								_$_.output_push(_$_.escape(`pending ${item.id}`));
+								{
+									_$_.output_push('A pending');
+								}
+
+								_$_.output_push('</p>');
+								_$_.output_push('<!--]-->');
 							}
+						);
+						break;
 
-							_$_.output_push('</li>');
-							_$_.output_push('<!--]-->');
+					default:
+						_$_.output_push('<p');
+						_$_.output_push(' class="default"');
+						_$_.output_push('>');
+						{
+							_$_.output_push('Default');
 						}
-					);
+						_$_.output_push('</p>');
 				}
 
 				_$_.output_push('<!--]-->');
 			}
 
-			_$_.output_push('<!--]-->');
-		}
-
-		_$_.output_push('</ul>');
+			_$_.output_push('</div>');
+		});
 	});
-
-	_$_.pop_component();
 }
 
-export function ForIfSwitchTrySingle() {
-	_$_.push_component();
-
-	const items = [{ id: 1, kind: 'a', show: true }];
-
-	_$_.regular_block(() => {
-		_$_.output_push('<ul');
-		_$_.output_push(' class="for-if-switch-try-single"');
-		_$_.output_push('>');
+export function ForSwitchTry() {
+	return _$_.tsrx_element(() => {
+		const items = [{ id: 1, kind: 'a' }, { id: 2, kind: 'b' }];
 
-		{
-			_$_.output_push('<!--[-->');
+		_$_.regular_block(() => {
+			_$_.output_push('<ul');
+			_$_.output_push(' class="for-switch-try"');
+			_$_.output_push('>');
 
-			for (const item of items) {
+			{
 				_$_.output_push('<!--[-->');
 
-				if (item.show) {
+				for (const item of items) {
 					_$_.output_push('<!--[-->');
 
 					switch (item.kind) {
@@ -654,11 +481,11 @@ export function ForIfSwitchTrySingle() {
 								() => {
 									_$_.output_push('<!--[-->');
 									_$_.output_push('<li');
-									_$_.output_push(_$_.attr('class', `item item-${item.id} kind-default`));
+									_$_.output_push(_$_.attr('class', `item item-${item.id} kind-b`));
 									_$_.output_push('>');
 
 									{
-										_$_.output_push(_$_.escape(`D-${item.id}`));
+										_$_.output_push(_$_.escape(`B-${item.id}`));
 									}
 
 									_$_.output_push('</li>');
@@ -687,100 +514,253 @@ export function ForIfSwitchTrySingle() {
 				_$_.output_push('<!--]-->');
 			}
 
-			_$_.output_push('<!--]-->');
-		}
-
-		_$_.output_push('</ul>');
+			_$_.output_push('</ul>');
+		});
 	});
-
-	_$_.pop_component();
 }
 
-export function ForIfSwitchTryMulti() {
-	_$_.push_component();
+export function ForIfTry() {
+	return _$_.tsrx_element(() => {
+		const items = [{ id: 1, show: true }, { id: 2, show: true }];
 
-	const items = [
-		{ id: 1, kind: 'a', show: true },
-		{ id: 2, kind: 'b', show: true }
-	];
+		_$_.regular_block(() => {
+			_$_.output_push('<ul');
+			_$_.output_push(' class="for-if-try"');
+			_$_.output_push('>');
 
-	_$_.regular_block(() => {
-		_$_.output_push('<ul');
-		_$_.output_push(' class="for-if-switch-try-multi"');
-		_$_.output_push('>');
+			{
+				_$_.output_push('<!--[-->');
 
-		{
-			_$_.output_push('<!--[-->');
+				for (const item of items) {
+					_$_.output_push('<!--[-->');
 
-			for (const item of items) {
+					if (item.show) {
+						_$_.try_block(
+							() => {
+								_$_.output_push('<!--[-->');
+								_$_.output_push('<li');
+								_$_.output_push(_$_.attr('class', `item item-${item.id}`));
+								_$_.output_push('>');
+
+								{
+									_$_.output_push(_$_.escape(`item-${item.id}`));
+								}
+
+								_$_.output_push('</li>');
+								_$_.output_push('<!--]-->');
+							},
+							null,
+							() => {
+								_$_.output_push('<!--[-->');
+								_$_.output_push('<li');
+								_$_.output_push(_$_.attr('class', `pending pending-${item.id}`));
+								_$_.output_push('>');
+
+								{
+									_$_.output_push(_$_.escape(`pending ${item.id}`));
+								}
+
+								_$_.output_push('</li>');
+								_$_.output_push('<!--]-->');
+							}
+						);
+					}
+
+					_$_.output_push('<!--]-->');
+				}
+
+				_$_.output_push('<!--]-->');
+			}
+
+			_$_.output_push('</ul>');
+		});
+	});
+}
+
+export function ForIfSwitchTrySingle() {
+	return _$_.tsrx_element(() => {
+		const items = [{ id: 1, kind: 'a', show: true }];
+
+		_$_.regular_block(() => {
+			_$_.output_push('<ul');
+			_$_.output_push(' class="for-if-switch-try-single"');
+			_$_.output_push('>');
+
+			{
 				_$_.output_push('<!--[-->');
 
-				if (item.show) {
+				for (const item of items) {
 					_$_.output_push('<!--[-->');
 
-					switch (item.kind) {
-						case 'a':
-							_$_.try_block(
-								() => {
-									_$_.output_push('<!--[-->');
-									_$_.output_push('<li');
-									_$_.output_push(_$_.attr('class', `item item-${item.id} kind-a`));
-									_$_.output_push('>');
-
-									{
-										_$_.output_push(_$_.escape(`A-${item.id}`));
+					if (item.show) {
+						_$_.output_push('<!--[-->');
+
+						switch (item.kind) {
+							case 'a':
+								_$_.try_block(
+									() => {
+										_$_.output_push('<!--[-->');
+										_$_.output_push('<li');
+										_$_.output_push(_$_.attr('class', `item item-${item.id} kind-a`));
+										_$_.output_push('>');
+
+										{
+											_$_.output_push(_$_.escape(`A-${item.id}`));
+										}
+
+										_$_.output_push('</li>');
+										_$_.output_push('<!--]-->');
+									},
+									null,
+									() => {
+										_$_.output_push('<!--[-->');
+										_$_.output_push('<li');
+										_$_.output_push(_$_.attr('class', `pending pending-${item.id}`));
+										_$_.output_push('>');
+
+										{
+											_$_.output_push(_$_.escape(`pending ${item.id}`));
+										}
+
+										_$_.output_push('</li>');
+										_$_.output_push('<!--]-->');
 									}
+								);
+								break;
+
+							default:
+								_$_.try_block(
+									() => {
+										_$_.output_push('<!--[-->');
+										_$_.output_push('<li');
+										_$_.output_push(_$_.attr('class', `item item-${item.id} kind-default`));
+										_$_.output_push('>');
+
+										{
+											_$_.output_push(_$_.escape(`D-${item.id}`));
+										}
+
+										_$_.output_push('</li>');
+										_$_.output_push('<!--]-->');
+									},
+									null,
+									() => {
+										_$_.output_push('<!--[-->');
+										_$_.output_push('<li');
+										_$_.output_push(_$_.attr('class', `pending pending-${item.id}`));
+										_$_.output_push('>');
+
+										{
+											_$_.output_push(_$_.escape(`pending ${item.id}`));
+										}
+
+										_$_.output_push('</li>');
+										_$_.output_push('<!--]-->');
+									}
+								);
+						}
 
-									_$_.output_push('</li>');
-									_$_.output_push('<!--]-->');
-								},
-								null,
-								() => {
-									_$_.output_push('<!--[-->');
-									_$_.output_push('<li');
-									_$_.output_push(_$_.attr('class', `pending pending-${item.id}`));
-									_$_.output_push('>');
+						_$_.output_push('<!--]-->');
+					}
 
-									{
-										_$_.output_push(_$_.escape(`pending ${item.id}`));
-									}
+					_$_.output_push('<!--]-->');
+				}
 
-									_$_.output_push('</li>');
-									_$_.output_push('<!--]-->');
-								}
-							);
-							break;
+				_$_.output_push('<!--]-->');
+			}
 
-						default:
-							_$_.try_block(
-								() => {
-									_$_.output_push('<!--[-->');
-									_$_.output_push('<li');
-									_$_.output_push(_$_.attr('class', `item item-${item.id} kind-b`));
-									_$_.output_push('>');
+			_$_.output_push('</ul>');
+		});
+	});
+}
 
-									{
-										_$_.output_push(_$_.escape(`B-${item.id}`));
-									}
+export function ForIfSwitchTryMulti() {
+	return _$_.tsrx_element(() => {
+		const items = [
+			{ id: 1, kind: 'a', show: true },
+			{ id: 2, kind: 'b', show: true }
+		];
+
+		_$_.regular_block(() => {
+			_$_.output_push('<ul');
+			_$_.output_push(' class="for-if-switch-try-multi"');
+			_$_.output_push('>');
 
-									_$_.output_push('</li>');
-									_$_.output_push('<!--]-->');
-								},
-								null,
-								() => {
-									_$_.output_push('<!--[-->');
-									_$_.output_push('<li');
-									_$_.output_push(_$_.attr('class', `pending pending-${item.id}`));
-									_$_.output_push('>');
+			{
+				_$_.output_push('<!--[-->');
 
-									{
-										_$_.output_push(_$_.escape(`pending ${item.id}`));
+				for (const item of items) {
+					_$_.output_push('<!--[-->');
+
+					if (item.show) {
+						_$_.output_push('<!--[-->');
+
+						switch (item.kind) {
+							case 'a':
+								_$_.try_block(
+									() => {
+										_$_.output_push('<!--[-->');
+										_$_.output_push('<li');
+										_$_.output_push(_$_.attr('class', `item item-${item.id} kind-a`));
+										_$_.output_push('>');
+
+										{
+											_$_.output_push(_$_.escape(`A-${item.id}`));
+										}
+
+										_$_.output_push('</li>');
+										_$_.output_push('<!--]-->');
+									},
+									null,
+									() => {
+										_$_.output_push('<!--[-->');
+										_$_.output_push('<li');
+										_$_.output_push(_$_.attr('class', `pending pending-${item.id}`));
+										_$_.output_push('>');
+
+										{
+											_$_.output_push(_$_.escape(`pending ${item.id}`));
+										}
+
+										_$_.output_push('</li>');
+										_$_.output_push('<!--]-->');
+									}
+								);
+								break;
+
+							default:
+								_$_.try_block(
+									() => {
+										_$_.output_push('<!--[-->');
+										_$_.output_push('<li');
+										_$_.output_push(_$_.attr('class', `item item-${item.id} kind-b`));
+										_$_.output_push('>');
+
+										{
+											_$_.output_push(_$_.escape(`B-${item.id}`));
+										}
+
+										_$_.output_push('</li>');
+										_$_.output_push('<!--]-->');
+									},
+									null,
+									() => {
+										_$_.output_push('<!--[-->');
+										_$_.output_push('<li');
+										_$_.output_push(_$_.attr('class', `pending pending-${item.id}`));
+										_$_.output_push('>');
+
+										{
+											_$_.output_push(_$_.escape(`pending ${item.id}`));
+										}
+
+										_$_.output_push('</li>');
+										_$_.output_push('<!--]-->');
 									}
+								);
+						}
 
-									_$_.output_push('</li>');
-									_$_.output_push('<!--]-->');
-								}
-							);
+						_$_.output_push('<!--]-->');
 					}
 
 					_$_.output_push('<!--]-->');
@@ -789,11 +769,7 @@ export function ForIfSwitchTryMulti() {
 				_$_.output_push('<!--]-->');
 			}
 
-			_$_.output_push('<!--]-->');
-		}
-
-		_$_.output_push('</ul>');
+			_$_.output_push('</ul>');
+		});
 	});
-
-	_$_.pop_component();
 }