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

Ripple is an elegant TypeScript UI framework

// @ts-nocheck
import * as _$_ from 'ripple/internal/server';

import { track, trackAsync } from 'ripple/server';

export function MixedControlFlowStatic() {
	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('>');

			{
				_$_.output_push('<!--[-->');

				for (const row of rows) {
					_$_.output_push('<!--[-->');

					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('<!--]-->');
									}
								);
								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('<!--]-->');
					}

					_$_.output_push('<!--]-->');
				}

				_$_.output_push('<!--]-->');
			}

			_$_.output_push('</section>');
		});
	});
}

export function MixedControlFlowReactive() {
	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('>');

			{
				_$_.output_push('Toggle Show');
			}

			_$_.output_push('</button>');
		});

		_$_.regular_block(() => {
			_$_.output_push('<button');
			_$_.output_push(' class="toggle-mode"');
			_$_.output_push('>');

			{
				_$_.output_push('Toggle Mode');
			}

			_$_.output_push('</button>');
		});

		_$_.regular_block(() => {
			_$_.output_push('<button');
			_$_.output_push(' class="add-item"');
			_$_.output_push('>');

			{
				_$_.output_push('Add Item');
			}

			_$_.output_push('</button>');
		});

		_$_.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('<!--]-->');
				}

				_$_.output_push('</div>');
			}

			_$_.output_push('<!--]-->');
		});
	});
}

export function MixedControlFlowAsyncPending() {
	return _$_.tsrx_element(() => {
		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}` }];

										_$_.render_component(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('<!--]-->');
		});
	});
}

function AsyncRow({ label }) {
	return _$_.tsrx_element(() => {
		let lazy_3 = _$_.track_async(() => Promise.resolve(label), '10cc79a0');

		_$_.regular_block(() => {
			_$_.output_push('<div');
			_$_.output_push(' class="resolved-row"');
			_$_.output_push('>');

			{
				_$_.output_push(_$_.escape(lazy_3.value));
			}

			_$_.output_push('</div>');
		});
	});
}