ripple/tests/hydration/compiled/server/if-children.js

Ripple is an elegant TypeScript UI framework

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

import { track } from 'ripple/server';

export function IfWithChildren({ children }) {
	return _$_.tsrx_element(() => {
		let lazy = _$_.track(true, 'c64714b1');

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

			{
				_$_.output_push('<div');
				_$_.output_push(' role="button"');
				_$_.output_push(' class="header"');
				_$_.output_push('>');

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

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

				if (lazy.value) {
					_$_.output_push('<div');
					_$_.output_push(' class="content"');
					_$_.output_push('>');

					{
						_$_.render_expression(children);
					}

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

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

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

export function ChildItem({ text: label }) {
	return _$_.tsrx_element(() => {
		_$_.regular_block(() => {
			_$_.output_push('<div');
			_$_.output_push(' class="item"');
			_$_.output_push('>');

			{
				_$_.output_push(_$_.escape(label));
			}

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

export function TestIfWithChildren() {
	return _$_.tsrx_element(() => {
		_$_.regular_block(() => {
			{
				const comp = IfWithChildren;

				const args = [
					{
						children: _$_.tsrx_element(() => {
							return _$_.tsrx_element(() => {
								{
									const comp = ChildItem;
									const args = [{ text: "Item 1" }];

									_$_.render_component(comp, ...args);
								}

								{
									const comp = ChildItem;
									const args = [{ text: "Item 2" }];

									_$_.render_component(comp, ...args);
								}
							});
						})
					}
				];

				_$_.render_component(comp, ...args);
			}
		});
	});
}

export function IfWithStaticChildren() {
	return _$_.tsrx_element(() => {
		let lazy_1 = _$_.track(true, '3bba8f77');

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

			{
				_$_.output_push('<div');
				_$_.output_push(' role="button"');
				_$_.output_push(' class="header"');
				_$_.output_push('>');

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

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

				if (lazy_1.value) {
					_$_.output_push('<div');
					_$_.output_push(' class="content"');
					_$_.output_push('>');

					{
						_$_.output_push('<span');
						_$_.output_push('>');

						{
							_$_.output_push('Static child 1');
						}

						_$_.output_push('</span>');
						_$_.output_push('<span');
						_$_.output_push('>');

						{
							_$_.output_push('Static child 2');
						}

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

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

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

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

export function IfWithSiblingsAndChildren({ children }) {
	return _$_.tsrx_element(() => {
		let lazy_2 = _$_.track(true, 'a1b8fb4c');

		_$_.regular_block(() => {
			_$_.output_push('<section');
			_$_.output_push(' class="group"');
			_$_.output_push('>');

			{
				_$_.output_push('<div');
				_$_.output_push(' role="button"');
				_$_.output_push(' class="item"');
				_$_.output_push('>');

				{
					_$_.output_push('<div');
					_$_.output_push(' class="indicator"');
					_$_.output_push('>');
					_$_.output_push('</div>');
					_$_.output_push('<h2');
					_$_.output_push(' class="text"');
					_$_.output_push('>');

					{
						_$_.output_push('Title');
					}

					_$_.output_push('</h2>');
					_$_.output_push('<div');
					_$_.output_push(' class="caret"');
					_$_.output_push('>');

					{
						_$_.output_push('<svg');
						_$_.output_push(' xmlns="http://www.w3.org/2000/svg"');
						_$_.output_push(' width="18"');
						_$_.output_push(' height="18"');
						_$_.output_push(' viewBox="0 0 24 24"');
						_$_.output_push('>');

						{
							_$_.output_push('<path');
							_$_.output_push(' d="m9 18 6-6-6-6"');
							_$_.output_push('>');
							_$_.output_push('</path>');
						}

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

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

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

				if (lazy_2.value) {
					_$_.output_push('<div');
					_$_.output_push(' class="items"');
					_$_.output_push('>');

					{
						_$_.render_expression(children);
					}

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

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

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

export function TestIfWithSiblingsAndChildren() {
	return _$_.tsrx_element(() => {
		_$_.regular_block(() => {
			{
				const comp = IfWithSiblingsAndChildren;

				const args = [
					{
						children: _$_.tsrx_element(() => {
							return _$_.tsrx_element(() => {
								{
									const comp = ChildItem;
									const args = [{ text: "Item A" }];

									_$_.render_component(comp, ...args);
								}

								{
									const comp = ChildItem;
									const args = [{ text: "Item B" }];

									_$_.render_component(comp, ...args);
								}
							});
						})
					}
				];

				_$_.render_component(comp, ...args);
			}
		});
	});
}

export function ElementWithChildrenThenIf() {
	return _$_.tsrx_element(() => {
		let lazy_3 = _$_.track(true, '7cd4817b');

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

			{
				_$_.output_push('<div');
				_$_.output_push(' class="nested-parent"');
				_$_.output_push('>');

				{
					_$_.output_push('<div');
					_$_.output_push(' class="nested-child"');
					_$_.output_push('>');

					{
						_$_.output_push('<span');
						_$_.output_push(' class="deep"');
						_$_.output_push('>');

						{
							_$_.output_push('Deep content');
						}

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

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

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

				if (lazy_3.value) {
					_$_.output_push('<div');
					_$_.output_push(' class="conditional"');
					_$_.output_push('>');

					{
						_$_.output_push('Conditional content');
					}

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

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

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

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

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

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

export function DeepNestingThenIf() {
	return _$_.tsrx_element(() => {
		let lazy_4 = _$_.track(true, '923116be');

		_$_.regular_block(() => {
			_$_.output_push('<section');
			_$_.output_push(' class="outer"');
			_$_.output_push('>');

			{
				_$_.output_push('<article');
				_$_.output_push(' class="middle"');
				_$_.output_push('>');

				{
					_$_.output_push('<div');
					_$_.output_push(' class="inner"');
					_$_.output_push('>');

					{
						_$_.output_push('<p');
						_$_.output_push(' class="leaf"');
						_$_.output_push('>');

						{
							_$_.output_push('<strong');
							_$_.output_push('>');

							{
								_$_.output_push('Bold');
							}

							_$_.output_push('</strong>');
							_$_.output_push('<em');
							_$_.output_push('>');

							{
								_$_.output_push('Italic');
							}

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

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

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

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

				if (lazy_4.value) {
					_$_.output_push('<footer');
					_$_.output_push(' class="footer"');
					_$_.output_push('>');

					{
						_$_.output_push('Footer');
					}

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

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

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

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

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

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

export function DomElementChildrenThenSibling() {
	return _$_.tsrx_element(() => {
		let lazy_5 = _$_.track('code', '33a1e97f');

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

			{
				_$_.output_push('<div');
				_$_.output_push(' class="tab-list"');
				_$_.output_push('>');

				{
					_$_.output_push('<button');
					_$_.output_push(_$_.attr('aria-selected', lazy_5.value === 'code' ? 'true' : 'false', false));
					_$_.output_push(' class="tab"');
					_$_.output_push('>');

					{
						_$_.output_push('Code');
					}

					_$_.output_push('</button>');
					_$_.output_push('<button');
					_$_.output_push(_$_.attr('aria-selected', lazy_5.value === 'preview' ? 'true' : 'false', false));
					_$_.output_push(' class="tab"');
					_$_.output_push('>');

					{
						_$_.output_push('Preview');
					}

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

				_$_.output_push('</div>');
				_$_.output_push('<div');
				_$_.output_push(' class="panel"');
				_$_.output_push('>');

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

					if (lazy_5.value === 'code') {
						_$_.output_push('<pre');
						_$_.output_push(' class="code"');
						_$_.output_push('>');

						{
							_$_.output_push('const x = 1;');
						}

						_$_.output_push('</pre>');
					} else {
						_$_.output_push('<div');
						_$_.output_push(' class="preview"');
						_$_.output_push('>');

						{
							_$_.output_push('Preview content');
						}

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

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

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

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

export function DomChildrenThenStaticSiblings() {
	return _$_.tsrx_element(() => {
		let lazy_6 = _$_.track(0, '0ea64305');

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

			{
				_$_.output_push('<ul');
				_$_.output_push(' class="list"');
				_$_.output_push('>');

				{
					_$_.output_push('<li');
					_$_.output_push(' class="item"');
					_$_.output_push('>');

					{
						_$_.output_push(_$_.escape('Item count: ' + String(lazy_6.value)));
					}

					_$_.output_push('</li>');
					_$_.output_push('<li');
					_$_.output_push(' class="item"');
					_$_.output_push('>');

					{
						_$_.output_push('Another item');
					}

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

				_$_.output_push('</ul>');
				_$_.output_push('<h2');
				_$_.output_push(' class="heading"');
				_$_.output_push('>');

				{
					_$_.output_push('Static Heading');
				}

				_$_.output_push('</h2>');
				_$_.output_push('<p');
				_$_.output_push(' class="para"');
				_$_.output_push('>');

				{
					_$_.output_push('Static paragraph');
				}

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

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

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

			{
				_$_.output_push('Increment');
			}

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

export function StaticListThenStaticSiblings() {
	return _$_.tsrx_element(() => {
		_$_.regular_block(() => {
			_$_.output_push('<div');
			_$_.output_push(' class="wrapper"');
			_$_.output_push('>');

			{
				_$_.output_push('<ul');
				_$_.output_push(' class="features"');
				_$_.output_push('>');

				{
					_$_.output_push('<li');
					_$_.output_push('>');

					{
						_$_.output_push('<strong');
						_$_.output_push('>');

						{
							_$_.output_push('Feature One');
						}

						_$_.output_push('</strong>');
						_$_.output_push(': Description of feature one with ');
						_$_.output_push('<code');
						_$_.output_push('>');

						{
							_$_.output_push('code');
						}

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

					_$_.output_push('</li>');
					_$_.output_push('<li');
					_$_.output_push('>');

					{
						_$_.output_push('<strong');
						_$_.output_push('>');

						{
							_$_.output_push('Feature Two');
						}

						_$_.output_push('</strong>');
						_$_.output_push(': Another feature description');
					}

					_$_.output_push('</li>');
					_$_.output_push('<li');
					_$_.output_push('>');

					{
						_$_.output_push('<strong');
						_$_.output_push('>');

						{
							_$_.output_push('Feature Three');
						}

						_$_.output_push('</strong>');
						_$_.output_push(': Third feature');
					}

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

				_$_.output_push('</ul>');
				_$_.output_push('<h2');
				_$_.output_push(' class="section-heading"');
				_$_.output_push('>');

				{
					_$_.output_push('Section Heading');
				}

				_$_.output_push('</h2>');
				_$_.output_push('<p');
				_$_.output_push(' class="section-content"');
				_$_.output_push('>');

				{
					_$_.output_push('Static paragraph with ');
					_$_.output_push('<a');
					_$_.output_push(' href="/link"');
					_$_.output_push('>');

					{
						_$_.output_push('a link');
					}

					_$_.output_push('</a>');
					_$_.output_push(' and more text.');
				}

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

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