UNPKG

ripple

Version:

Ripple is an elegant TypeScript UI framework

2,177 lines • 55.1 kB
// @ts-nocheck
import * as _$_ from 'ripple/internal/client';

var root = _$_.template_el('div');

function StaticHtml_render(__anchor, __block) {
	const html = '<p><strong>Bold</strong> text</p>';
	var div = root();

	div.innerHTML = html ?? div.innerHTML;
	_$_.append(__anchor, div);
}

StaticHtml[_$_.$r] = StaticHtml_render;

var root_1 = _$_.template_el('div');

function DynamicHtml_render(__anchor, __block) {
	const content = '<p>Dynamic <span>HTML</span> content</p>';
	var div_1 = root_1();

	div_1.innerHTML = content ?? div_1.innerHTML;
	_$_.append(__anchor, div_1);
}

DynamicHtml[_$_.$r] = DynamicHtml_render;

var root_2 = _$_.template_el('div');

function EmptyHtml_render(__anchor, __block) {
	const html = '';
	var div_2 = root_2();

	div_2.innerHTML = html ?? div_2.innerHTML;
	_$_.append(__anchor, div_2);
}

EmptyHtml[_$_.$r] = EmptyHtml_render;

var root_3 = _$_.template_el('section');

function ComplexHtml_render(__anchor, __block) {
	const html = '<div class="nested"><span>Nested <em>content</em></span></div>';
	var section = root_3();

	section.innerHTML = html ?? section.innerHTML;
	_$_.append(__anchor, section);
}

ComplexHtml[_$_.$r] = ComplexHtml_render;

var root_4 = _$_.template_el('div', null, [null, null]);

function render(__prev) {
	_$_.html(__prev._a, () => __prev._b);
	_$_.html(__prev._c, () => __prev._d);
}

function MultipleHtml_render(__anchor, __block) {
	const html1 = '<p>First paragraph</p>';
	const html2 = '<p>Second paragraph</p>';
	var div_3 = root_4();

	{
		var node = _$_.hydrating ? _$_.hydrate_child() : div_3.firstChild;
		var node_1 = _$_.hydrating ? _$_.hydrate_sibling() : node.nextSibling;

		_$_.hydrating && _$_.pop(div_3);
	}

	_$_.render(render, { _a: node, _b: html1, _c: node_1, _d: html2 });
	_$_.append(__anchor, div_3);
}

MultipleHtml[_$_.$r] = MultipleHtml_render;

var root_5 = _$_.template_el('div', null, [null, ['button', null, 'Increment']]);

function render_1(__prev) {
	_$_.html(__prev._a, () => "<p>Count: 0</p>");
}

function HtmlWithReactivity_render(__anchor, __block) {
	var div_4 = root_5();

	{
		var node_2 = _$_.hydrating ? _$_.hydrate_child() : div_4.firstChild;

		_$_.hydrating && _$_.pop(div_4);
	}

	_$_.render(render_1, { _a: node_2 });
	_$_.append(__anchor, div_4);
}

HtmlWithReactivity[_$_.$r] = HtmlWithReactivity_render;

var root_6 = _$_.template_el('div', ['class', 'wrapper'], [['div', ['class', 'inner'], [null]]]);

function HtmlWrapper_render(__anchor, __block, { children }) {
	var div_5 = root_6();

	{
		var div_6 = _$_.hydrating ? _$_.hydrate_child() : div_5.firstChild;

		{
			var expression = _$_.hydrating ? _$_.hydrate_child() : div_6.firstChild;

			_$_.expression(expression, () => children);
			_$_.hydrating && _$_.pop(div_6);
		}
	}

	_$_.append(__anchor, div_5);
}

HtmlWrapper[_$_.$r] = HtmlWrapper_render;

var root_7 = _$_.template_el('div', ['class', 'vp-doc']);

function HtmlInChildren_render(__anchor, __block) {
	const content = '<p><strong>Bold</strong> text</p>';

	_$_.render_component(HtmlWrapper, __anchor, {
		children: _$_.tsrx_element((__anchor, __block) => {
			var div_7 = root_7();

			div_7.innerHTML = content ?? div_7.innerHTML;
			_$_.append(__anchor, div_7);
		})
	});
}

HtmlInChildren[_$_.$r] = HtmlInChildren_render;

var root_8 = _$_.template(`<h1>Title</h1><div class=content>`, 1, 2);

function HtmlInChildrenWithSiblings_render(__anchor, __block) {
	const content = '<p>Dynamic content</p>';

	_$_.render_component(HtmlWrapper, __anchor, {
		children: _$_.tsrx_element((__anchor, __block) => {
			var fragment = root_8();
			var h1 = _$_.first_child_frag(fragment);
			var div_8 = _$_.hydrating ? _$_.hydrate_sibling() : h1.nextSibling;

			div_8.innerHTML = content ?? div_8.innerHTML;
			_$_.append(__anchor, fragment);
		})
	});
}

HtmlInChildrenWithSiblings[_$_.$r] = HtmlInChildrenWithSiblings_render;

var root_9 = _$_.template_el('div', ['class', 'doc'], [null, null]);

function render_2(__prev) {
	_$_.html(__prev._a, () => __prev._b);
	_$_.html(__prev._c, () => __prev._d);
}

function MultipleHtmlInChildren_render(__anchor, __block) {
	const html1 = '<p>First</p>';
	const html2 = '<p>Second</p>';

	_$_.render_component(HtmlWrapper, __anchor, {
		children: _$_.tsrx_element((__anchor, __block) => {
			var div_9 = root_9();

			{
				var node_3 = _$_.hydrating ? _$_.hydrate_child() : div_9.firstChild;
				var node_4 = _$_.hydrating ? _$_.hydrate_sibling() : node_3.nextSibling;

				_$_.hydrating && _$_.pop(div_9);
			}

			_$_.render(render_2, { _a: node_3, _b: html1, _c: node_4, _d: html2 });
			_$_.append(__anchor, div_9);
		})
	});
}

MultipleHtmlInChildren[_$_.$r] = MultipleHtmlInChildren_render;

var root_10 = _$_.template_el('div');

function HtmlWithComments_render(__anchor, __block) {
	const content = '<p>Before comment</p><!-- TODO: Elaborate --><p>After comment</p>';
	var div_10 = root_10();

	div_10.innerHTML = content ?? div_10.innerHTML;
	_$_.append(__anchor, div_10);
}

HtmlWithComments[_$_.$r] = HtmlWithComments_render;

var root_11 = _$_.template_el('div');

function HtmlWithEmptyComment_render(__anchor, __block) {
	const content = '<p>Before</p><!----><p>After</p>';
	var div_11 = root_11();

	div_11.innerHTML = content ?? div_11.innerHTML;
	_$_.append(__anchor, div_11);
}

HtmlWithEmptyComment[_$_.$r] = HtmlWithEmptyComment_render;

var root_12 = _$_.template_el('div', ['class', 'vp-doc']);

function HtmlWithCommentsInChildren_render(__anchor, __block) {
	const content = '<h2 id="intro">Introduction</h2><p>Some text</p><!-- TODO --><p>More text</p>';

	_$_.render_component(HtmlWrapper, __anchor, {
		children: _$_.tsrx_element((__anchor, __block) => {
			var div_12 = root_12();

			div_12.innerHTML = content ?? div_12.innerHTML;
			_$_.append(__anchor, div_12);
		})
	});
}

HtmlWithCommentsInChildren[_$_.$r] = HtmlWithCommentsInChildren_render;

var root_13 = _$_.template_el('footer', ['class', 'doc-footer'], 'Footer content');

function DocFooter_render(__anchor, __block) {
	var footer = root_13();

	_$_.append(__anchor, footer);
}

DocFooter[_$_.$r] = DocFooter_render;

var root_15 = _$_.template_el('div', ['class', 'edit-link'], [['a', null, 'Edit']]);

function consequent(__anchor, editPath) {
	var div_16 = root_15();

	{
		var a = _$_.hydrating ? _$_.hydrate_child() : div_16.firstChild;

		a.setAttribute('href', `https://github.com/edit/${editPath}`);
	}

	_$_.append(__anchor, div_16);
}

function if_1(editPath) {
	if (editPath) return consequent;
}

var root_16 = _$_.template_el('nav', ['class', 'prev-next'], [['a', null, ' ']]);

function render_3(__prev) {
	var __a = __prev._a.href;

	if (__prev.a !== __a) {
		_$_.set_attribute(__prev._b, 'href', __prev.a = __a);
	}
}

function consequent_1(__anchor, nextLink) {
	var nav = root_16();

	{
		var a_1 = _$_.hydrating ? _$_.hydrate_child() : nav.firstChild;

		{
			var expression_2 = _$_.hydrating ? _$_.hydrate_child() : a_1.firstChild;

			_$_.expression(expression_2, () => nextLink.text);
			_$_.hydrating && _$_.pop(a_1);
		}
	}

	_$_.render(render_3, { a: void 0, _a: nextLink, _b: a_1 });
	_$_.append(__anchor, nav);
}

function if_2(nextLink) {
	if (nextLink) return consequent_1;
}

var root_18 = _$_.template_el('li', null, [['a']]);

function render_4(__prev) {
	var __a = __prev._a.text;

	if (__prev.a !== __a) {
		_$_.set_text_content(__prev._b, __a, __prev.a);
		__prev.a = __a;
	}

	var __b = __prev._a.href;

	if (__prev.b !== __b) {
		_$_.set_attribute(__prev._b, 'href', __prev.b = __b);
	}
}

var root_17 = _$_.template_el('div', ['class', 'toc'], [['ul']]);

function consequent_2(__anchor, toc) {
	var div_17 = root_17();

	{
		var ul = _$_.hydrating ? _$_.hydrate_child() : div_17.firstChild;

		{
			_$_.for(
				ul,
				() => toc,
				(__anchor, item) => {
					var li = root_18();

					{
						var a_2 = _$_.hydrating ? _$_.hydrate_child() : li.firstChild;
					}

					_$_.item({ a: '', b: void 0, _a: item, _b: a_2 });
					_$_.append(__anchor, li);
				},
				4,
				void 0,
				render_4
			);

			_$_.hydrating && _$_.pop(ul);
		}
	}

	_$_.append(__anchor, div_17);
}

function if_3(toc) {
	if (toc.length > 0) return consequent_2;
}

var root_14 = _$_.template_el('div', ['class', 'layout'], [
	[
		'div',
		['class', 'content-container'],
		[['article', null, [['div', null, [null]]]]]
	],
	['aside', null, [null]]
]);

function render_5(__prev) {
	var __a = if_3(__prev._a);

	if (__prev.a !== __a) {
		_$_.if_update(__prev._b, __prev.a = __a);
	}
}

function DocLayout_render(
	__anchor,
	__block,
	{ children, editPath = '', nextLink = null, toc = [] }
) {
	var div_13 = root_14();

	{
		var div_14 = _$_.hydrating ? _$_.hydrate_child() : div_13.firstChild;

		{
			var article = _$_.hydrating ? _$_.hydrate_child() : div_14.firstChild;

			{
				var div_15 = _$_.hydrating ? _$_.hydrate_child() : article.firstChild;

				{
					var expression_1 = _$_.hydrating ? _$_.hydrate_child() : div_15.firstChild;

					_$_.expression(expression_1, () => children);
					_$_.hydrating && _$_.pop(div_15);
				}
			}

			_$_.hydrating && _$_.pop(article);

			var node_5 = _$_.hydrating ? _$_.hydrate_sibling() : _$_.append_into(div_14);

			_$_.if(node_5, if_1, false, editPath);

			var node_6 = _$_.hydrating ? _$_.hydrate_sibling() : _$_.append_into(div_14);

			_$_.if(node_6, if_2, false, nextLink);

			var node_7 = _$_.hydrating ? _$_.hydrate_sibling() : _$_.append_into(div_14);

			_$_.render_component(DocFooter, node_7, {});
			_$_.hydrating && _$_.pop(div_14);
		}

		var aside = _$_.hydrating ? _$_.hydrate_sibling() : div_14.nextSibling;

		{
			var node_8 = _$_.hydrating ? _$_.hydrate_child() : aside.firstChild;
			var ifs = _$_.if_static(node_8, if_3, 0, toc);

			_$_.hydrating && _$_.pop(aside);
		}
	}

	_$_.render(render_5, { a: _$_.UNINITIALIZED, _a: toc, _b: ifs });
	_$_.append(__anchor, div_13);
}

DocLayout[_$_.$r] = DocLayout_render;

var root_19 = _$_.template_el('div', ['class', 'vp-doc']);

function HtmlWithServerData_render(__anchor, __block) {
	const content = '<h1 id="intro" class="doc-h1">Introduction</h1><p>Ripple is a framework.</p>';

	_$_.render_component(DocLayout, __anchor, {
		editPath: "docs/introduction.md",
		nextLink: { href: '/docs/quick-start', text: 'Quick Start' },
		toc: [
			{ href: '#intro', text: 'Introduction' },
			{ href: '#features', text: 'Features' }
		],

		children: _$_.tsrx_element((__anchor, __block) => {
			var div_18 = root_19();

			div_18.innerHTML = content ?? div_18.innerHTML;
			_$_.append(__anchor, div_18);
		})
	});
}

HtmlWithServerData[_$_.$r] = HtmlWithServerData_render;

var root_20 = _$_.template_el('div', ['class', 'vp-doc']);

function HtmlWithClientDefaults_render(__anchor, __block) {
	const content = '<h1 id="intro" class="doc-h1">Introduction</h1><p>Ripple is a framework.</p>';

	_$_.render_component(DocLayout, __anchor, {
		children: _$_.tsrx_element((__anchor, __block) => {
			var div_19 = root_20();

			div_19.innerHTML = content ?? div_19.innerHTML;
			_$_.append(__anchor, div_19);
		})
	});
}

HtmlWithClientDefaults[_$_.$r] = HtmlWithClientDefaults_render;

var root_21 = _$_.template_el('div', ['class', 'vp-doc']);

function HtmlWithUndefinedContent_render(__anchor, __block) {
	const content = undefined;

	_$_.render_component(DocLayout, __anchor, {
		children: _$_.tsrx_element((__anchor, __block) => {
			var div_20 = root_21();

			div_20.innerHTML = content ?? div_20.innerHTML;
			_$_.append(__anchor, div_20);
		})
	});
}

HtmlWithUndefinedContent[_$_.$r] = HtmlWithUndefinedContent_render;

var root_22 = _$_.template_el('h1', ['class', 'heading'], [null]);
var root_23 = _$_.template_el('h2', ['class', 'heading'], [null]);

function switch_case_0(__anchor, { a: level, b: children }) {
	var h1_1 = root_22();

	{
		var expression_4 = _$_.hydrating ? _$_.hydrate_child() : h1_1.firstChild;

		_$_.expression(expression_4, () => children);
		_$_.hydrating && _$_.pop(h1_1);
	}

	_$_.append(__anchor, h1_1);
}

function switch_case_1(__anchor, { a: level, b: children }) {
	var h2 = root_23();

	{
		var expression_5 = _$_.hydrating ? _$_.hydrate_child() : h2.firstChild;

		_$_.expression(expression_5, () => children);
		_$_.hydrating && _$_.pop(h2);
	}

	_$_.append(__anchor, h2);
}

function switch_1({ a: level, b: children }) {
	switch (level) {
		case 1:
			return switch_case_0;

		case 2:
			return switch_case_1;
	}
}

function DynamicHeading_render(__anchor, __block, { level, children }) {
	_$_.switch(__anchor, switch_1, true, { a: level, b: children });
}

DynamicHeading[_$_.$r] = DynamicHeading_render;

var root_24 = _$_.template_el('div', ['class', 'code-block'], [
	[
		'div',
		['class', 'header'],
		[['button', null, 'Copy'], ['span', ['class', 'lang'], 'js']]
	],
	['div', ['class', 'content']]
]);

function CodeBlock_render(__anchor, __block, { code }) {
	const highlighted = `<pre class="shiki"><code>${code}</code></pre>`;
	var div_21 = root_24();

	{
		var div_23 = _$_.hydrating ? _$_.hydrate_child() : div_21.firstChild;
		var div_22 = _$_.hydrating ? _$_.hydrate_sibling() : div_23.nextSibling;

		div_22.innerHTML = highlighted ?? div_22.innerHTML;
	}

	_$_.append(__anchor, div_21);
}

CodeBlock[_$_.$r] = CodeBlock_render;

var root_25 = _$_.template_el('div', ['class', 'wrapper'], [['div', ['class', 'inner'], [null]]]);

function ContentWrapper_render(__anchor, __block, { children }) {
	var div_24 = root_25();

	{
		var div_25 = _$_.hydrating ? _$_.hydrate_child() : div_24.firstChild;

		{
			var expression_6 = _$_.hydrating ? _$_.hydrate_child() : div_25.firstChild;

			_$_.expression(expression_6, () => children);
			_$_.hydrating && _$_.pop(div_25);
		}
	}

	_$_.append(__anchor, div_24);
}

ContentWrapper[_$_.$r] = ContentWrapper_render;

var root_26 = _$_.template(`<!><p>First paragraph</p><p>Second paragraph</p><!><p>After code`, 1, 5);

function HtmlAfterSwitchInChildren_render(__anchor, __block) {
	_$_.render_component(ContentWrapper, __anchor, {
		children: _$_.tsrx_element((__anchor, __block) => {
			var fragment_1 = root_26();
			var node_9 = _$_.first_child_frag(fragment_1);

			_$_.render_component(DynamicHeading, node_9, {
				level: 1,
				children: _$_.tsrx_element((__anchor, __block) => {
					var expression_7 = _$_.text('Title');

					_$_.append(__anchor, expression_7);
				})
			});

			var p_1 = _$_.hydrating ? _$_.hydrate_sibling() : node_9.nextSibling;
			var p = _$_.hydrating ? _$_.hydrate_sibling() : p_1.nextSibling;
			var node_10 = _$_.hydrating ? _$_.hydrate_sibling() : p.nextSibling;

			_$_.render_component(CodeBlock, node_10, { code: "const x = 1;" });
			_$_.next();
			_$_.append(__anchor, fragment_1);
		})
	});
}

HtmlAfterSwitchInChildren[_$_.$r] = HtmlAfterSwitchInChildren_render;

var root_27 = _$_.template_el('h1', ['class', 'heading'], [null]);
var root_28 = _$_.template_el('h2', ['class', 'heading'], [null]);

function consequent_3(__anchor, { a: primary, b: children }) {
	var h1_2 = root_27();

	{
		var expression_8 = _$_.hydrating ? _$_.hydrate_child() : h1_2.firstChild;

		_$_.expression(expression_8, () => children);
		_$_.hydrating && _$_.pop(h1_2);
	}

	_$_.append(__anchor, h1_2);
}

function alternate(__anchor, { a: primary, b: children }) {
	var h2_1 = root_28();

	{
		var expression_9 = _$_.hydrating ? _$_.hydrate_child() : h2_1.firstChild;

		_$_.expression(expression_9, () => children);
		_$_.hydrating && _$_.pop(h2_1);
	}

	_$_.append(__anchor, h2_1);
}

function if_4({ a: primary, b: children }) {
	if (primary) return consequent_3; else return alternate;
}

function IfHeading_render(__anchor, __block, { primary, children }) {
	_$_.if(__anchor, if_4, true, { a: primary, b: children });
}

IfHeading[_$_.$r] = IfHeading_render;

var root_29 = _$_.template(`<!><p>First paragraph</p><p>Second paragraph</p><!><p>After code`, 1, 5);

function HtmlAfterIfInChildren_render(__anchor, __block) {
	_$_.render_component(ContentWrapper, __anchor, {
		children: _$_.tsrx_element((__anchor, __block) => {
			var fragment_2 = root_29();
			var node_11 = _$_.first_child_frag(fragment_2);

			_$_.render_component(IfHeading, node_11, {
				primary: true,
				children: _$_.tsrx_element((__anchor, __block) => {
					var expression_10 = _$_.text('Title');

					_$_.append(__anchor, expression_10);
				})
			});

			var p_3 = _$_.hydrating ? _$_.hydrate_sibling() : node_11.nextSibling;
			var p_2 = _$_.hydrating ? _$_.hydrate_sibling() : p_3.nextSibling;
			var node_12 = _$_.hydrating ? _$_.hydrate_sibling() : p_2.nextSibling;

			_$_.render_component(CodeBlock, node_12, { code: "const x = 1;" });
			_$_.next();
			_$_.append(__anchor, fragment_2);
		})
	});
}

HtmlAfterIfInChildren[_$_.$r] = HtmlAfterIfInChildren_render;

var root_30 = _$_.template_el('span', ['class', 'for-item']);

function ForList_render(__anchor, __block, { items }) {
	_$_.for(
		__anchor,
		() => items,
		(__anchor, item) => {
			var span = root_30();

			{
				span.textContent = item;
			}

			_$_.append(__anchor, span);
		},
		16
	);
}

ForList[_$_.$r] = ForList_render;

var root_31 = _$_.template(`<!><p>First paragraph</p><!><p>After code`, 1, 4);

function HtmlAfterForInChildren_render(__anchor, __block) {
	_$_.render_component(ContentWrapper, __anchor, {
		children: _$_.tsrx_element((__anchor, __block) => {
			var fragment_3 = root_31();
			var node_13 = _$_.first_child_frag(fragment_3);

			_$_.render_component(ForList, node_13, { items: ['Title', 'Subtitle'] });

			var p_4 = _$_.hydrating ? _$_.hydrate_sibling() : node_13.nextSibling;
			var node_14 = _$_.hydrating ? _$_.hydrate_sibling() : p_4.nextSibling;

			_$_.render_component(CodeBlock, node_14, { code: "const x = 1;" });
			_$_.next();
			_$_.append(__anchor, fragment_3);
		})
	});
}

HtmlAfterForInChildren[_$_.$r] = HtmlAfterForInChildren_render;

var root_32 = _$_.template_el('div', ['class', 'try-box']);
var root_33 = _$_.template_el('span', null, 'error');

function TryBox_render(__anchor, __block, { value }) {
	_$_.try(
		__anchor,
		(__anchor) => {
			var div_26 = root_32();

			{
				div_26.textContent = value;
			}

			_$_.append(__anchor, div_26);
		},
		(__anchor, e) => {
			var span_1 = root_33();

			_$_.append(__anchor, span_1);
		},
		null,
		true
	);
}

TryBox[_$_.$r] = TryBox_render;

var root_34 = _$_.template(`<!><p>First paragraph</p><!><p>After code`, 1, 4);

function HtmlAfterTryInChildren_render(__anchor, __block) {
	_$_.render_component(ContentWrapper, __anchor, {
		children: _$_.tsrx_element((__anchor, __block) => {
			var fragment_4 = root_34();
			var node_15 = _$_.first_child_frag(fragment_4);

			_$_.render_component(TryBox, node_15, { value: "Title" });

			var p_5 = _$_.hydrating ? _$_.hydrate_sibling() : node_15.nextSibling;
			var node_16 = _$_.hydrating ? _$_.hydrate_sibling() : p_5.nextSibling;

			_$_.render_component(CodeBlock, node_16, { code: "const x = 1;" });
			_$_.next();
			_$_.append(__anchor, fragment_4);
		})
	});
}

HtmlAfterTryInChildren[_$_.$r] = HtmlAfterTryInChildren_render;

var root_35 = _$_.template_el('span', ['class', 'boxed'], [null]);

function Boxed_render(__anchor, __block, { children }) {
	var span_2 = root_35();

	{
		var expression_13 = _$_.hydrating ? _$_.hydrate_child() : span_2.firstChild;

		_$_.expression(expression_13, () => children);
		_$_.hydrating && _$_.pop(span_2);
	}

	_$_.append(__anchor, span_2);
}

Boxed[_$_.$r] = Boxed_render;

var root_36 = _$_.template(` `, 1, 1);

function IndirectHeading_render(__anchor, __block, { text }) {
	_$_.render_component(Boxed, __anchor, {
		children: _$_.tsrx_element((__anchor, __block) => {
			var fragment_5 = root_36();
			var expression_14 = _$_.first_child_frag(fragment_5, true);

			expression_14.nodeValue = text;
			_$_.append(__anchor, fragment_5);
		})
	});
}

IndirectHeading[_$_.$r] = IndirectHeading_render;

var root_37 = _$_.template(`<!><p>First paragraph</p><!><p>After code`, 1, 4);

function HtmlAfterComponentInChildren_render(__anchor, __block) {
	_$_.render_component(ContentWrapper, __anchor, {
		children: _$_.tsrx_element((__anchor, __block) => {
			var fragment_6 = root_37();
			var node_17 = _$_.first_child_frag(fragment_6);

			_$_.render_component(IndirectHeading, node_17, { text: "Title" });

			var p_6 = _$_.hydrating ? _$_.hydrate_sibling() : node_17.nextSibling;
			var node_18 = _$_.hydrating ? _$_.hydrate_sibling() : p_6.nextSibling;

			_$_.render_component(CodeBlock, node_18, { code: "const x = 1;" });
			_$_.next();
			_$_.append(__anchor, fragment_6);
		})
	});
}

HtmlAfterComponentInChildren[_$_.$r] = HtmlAfterComponentInChildren_render;

var root_39 = _$_.template_el('div', ['class', 'indicator']);

function consequent_4(__anchor, active) {
	var div_28 = root_39();

	_$_.append(__anchor, div_28);
}

function if_5(active) {
	if (active) return consequent_4;
}

var root_38 = _$_.template_el('div', null, [['a', null, [['span']]]]);

function NavItem_render(__anchor, __block, { href, text: label, active = false }) {
	var div_27 = root_38();

	_$_.set_class(div_27, `nav-item${active ? ' active' : ''}`);

	{
		var node_19 = _$_.hydrating ? _$_.hydrate_child() : div_27.firstChild;

		_$_.if(node_19, if_5, false, active);

		var a_3 = _$_.hydrating ? _$_.hydrate_sibling() : node_19;

		_$_.set_attribute(a_3, 'href', href);

		{
			var span_3 = _$_.hydrating ? _$_.hydrate_child() : a_3.firstChild;

			{
				span_3.textContent = label;
			}
		}

		_$_.hydrating && _$_.pop(div_27);
	}

	_$_.append(__anchor, div_27);
}

NavItem[_$_.$r] = NavItem_render;

var root_41 = _$_.template_el('div', ['class', 'section-items'], [null]);

function consequent_5(__anchor, { a: expanded, b: children }) {
	var div_30 = root_41();

	{
		var expression_17 = _$_.hydrating ? _$_.hydrate_child() : div_30.firstChild;

		_$_.expression(expression_17, () => children);
		_$_.hydrating && _$_.pop(div_30);
	}

	_$_.append(__anchor, div_30);
}

function if_6({ a: expanded, b: children }) {
	if (expanded.value) return consequent_5;
}

var root_40 = _$_.template_el('section', ['class', 'sidebar-section'], [
	[
		'div',
		['class', 'section-header'],
		[['h2'], ['button', null, 'Toggle']]
	]
]);

function render_6(__prev) {
	var __a = if_6({ a: __prev._a, b: __prev._b });

	if (__prev.a !== __a) {
		_$_.if_update(__prev._c, __prev.a = __a);
	}
}

function SidebarSection_render(__anchor, __block, { title, children }) {
	const expanded = _$_.track(true, __block, 'tmjvjj');
	var section_1 = root_40();

	{
		var div_29 = _$_.hydrating ? _$_.hydrate_child() : section_1.firstChild;

		{
			var h2_2 = _$_.hydrating ? _$_.hydrate_child() : div_29.firstChild;

			{
				h2_2.textContent = title;
			}

			var button = _$_.hydrating ? _$_.hydrate_sibling() : h2_2.nextSibling;

			button.__click = () => expanded.value = !expanded.value;
		}

		_$_.hydrating && _$_.pop(div_29);

		var node_20 = _$_.hydrating
			? _$_.hydrate_sibling()
			: _$_.append_into(section_1, true);

		var ifs_1 = _$_.if_static(node_20, if_6, 0, { a: expanded, b: children });

		_$_.hydrating && _$_.pop(section_1);
	}

	_$_.render(render_6, { a: _$_.UNINITIALIZED, _a: expanded, _b: children, _c: ifs_1 });
	_$_.append(__anchor, section_1);
}

SidebarSection[_$_.$r] = SidebarSection_render;

var root_43 = _$_.template(`<!><!>`, 1, 2);
var root_44 = _$_.template(`<!><!>`, 1, 2);

var root_42 = _$_.template_el('aside', ['class', 'sidebar'], [
	[
		'nav',
		null,
		[['div', ['class', 'group']], ['div', ['class', 'group']]]
	]
]);

function SideNav_render(__anchor, __block, { currentPath }) {
	var aside_1 = root_42();

	{
		var nav_1 = _$_.hydrating ? _$_.hydrate_child() : aside_1.firstChild;

		{
			var div_31 = _$_.hydrating ? _$_.hydrate_child() : nav_1.firstChild;

			{
				var append_anchor = _$_.append_into(div_31);

				_$_.render_component(SidebarSection, append_anchor, {
					title: "Getting Started",
					children: _$_.tsrx_element((__anchor, __block) => {
						var fragment_7 = root_43();
						var node_21 = _$_.first_child_frag(fragment_7);

						_$_.render_component(NavItem, node_21, {
							href: "/intro",
							text: "Introduction",
							active: currentPath === '/intro'
						});

						var node_22 = _$_.hydrating ? _$_.hydrate_sibling() : node_21.nextSibling;

						_$_.render_component(NavItem, node_22, {
							href: "/start",
							text: "Quick Start",
							active: currentPath === '/start'
						});

						_$_.append(__anchor, fragment_7);
					})
				});

				_$_.hydrating && _$_.pop(div_31);
			}

			var div_32 = _$_.hydrating ? _$_.hydrate_sibling() : div_31.nextSibling;

			{
				var append_anchor_1 = _$_.append_into(div_32);

				_$_.render_component(SidebarSection, append_anchor_1, {
					title: "Guide",
					children: _$_.tsrx_element((__anchor, __block) => {
						var fragment_8 = root_44();
						var node_23 = _$_.first_child_frag(fragment_8);

						_$_.render_component(NavItem, node_23, {
							href: "/guide/app",
							text: "Application",
							active: currentPath === '/guide/app'
						});

						var node_24 = _$_.hydrating ? _$_.hydrate_sibling() : node_23.nextSibling;

						_$_.render_component(NavItem, node_24, {
							href: "/guide/syntax",
							text: "Syntax",
							active: currentPath === '/guide/syntax'
						});

						_$_.append(__anchor, fragment_8);
					})
				});

				_$_.hydrating && _$_.pop(div_32);
			}
		}
	}

	_$_.append(__anchor, aside_1);
}

SideNav[_$_.$r] = SideNav_render;

var root_45 = _$_.template_el('header', ['class', 'page-header'], [['div', ['class', 'logo'], 'MyApp']]);

function PageHeader_render(__anchor, __block) {
	var header = root_45();

	_$_.append(__anchor, header);
}

PageHeader[_$_.$r] = PageHeader_render;

var root_47 = _$_.template_el('div', ['class', 'edit-link'], [['a', ['href', '/edit'], 'Edit']]);

function consequent_6(__anchor) {
	var div_36 = root_47();

	_$_.append(__anchor, div_36);
}

function if_7() {
	if (true) return consequent_6;
}

var root_46 = _$_.template(`<div class=layout><div class=content-wrapper><main class=main-content><div class=article><div><h1>Introduction</h1><p>Welcome to the docs.`);

function LayoutWithSidebarAndMain_render(__anchor, __block) {
	var div_33 = root_46();

	{
		var node_25 = _$_.hydrating ? _$_.hydrate_child() : div_33.firstChild;

		_$_.render_component(PageHeader, node_25, {});

		var div_34 = _$_.hydrating ? _$_.hydrate_sibling() : node_25;

		{
			var node_26 = _$_.hydrating ? _$_.hydrate_child() : div_34.firstChild;

			_$_.render_component(SideNav, node_26, { currentPath: "/intro" });

			var main = _$_.hydrating ? _$_.hydrate_sibling() : node_26;

			{
				var div_35 = _$_.hydrating ? _$_.hydrate_child() : main.firstChild;
				var node_27 = _$_.hydrating ? _$_.hydrate_sibling() : _$_.append_into(main);

				_$_.if(node_27, if_7);

				var node_28 = _$_.hydrating ? _$_.hydrate_sibling() : _$_.append_into(main);

				_$_.render_component(PageHeader, node_28, {});
				_$_.hydrating && _$_.pop(main);
			}

			_$_.hydrating && _$_.pop(div_34);
		}

		_$_.hydrating && _$_.pop(div_33);
	}

	_$_.append(__anchor, div_33);
}

LayoutWithSidebarAndMain[_$_.$r] = LayoutWithSidebarAndMain_render;

var root_48 = _$_.template_el('article', ['class', 'doc-content'], [['div', null, [null]]]);

function ArticleWrapper_render(__anchor, __block, { children }) {
	var article_1 = root_48();

	{
		var div_37 = _$_.hydrating ? _$_.hydrate_child() : article_1.firstChild;

		{
			var expression_18 = _$_.hydrating ? _$_.hydrate_child() : div_37.firstChild;

			_$_.expression(expression_18, () => children);
			_$_.hydrating && _$_.pop(div_37);
		}
	}

	_$_.append(__anchor, article_1);
}

ArticleWrapper[_$_.$r] = ArticleWrapper_render;

var root_49 = _$_.template_el('footer', ['class', 'doc-footer'], 'Footer');

function SimpleFooter_render(__anchor, __block) {
	var footer_1 = root_49();

	_$_.append(__anchor, footer_1);
}

SimpleFooter[_$_.$r] = SimpleFooter_render;

var root_51 = _$_.template(`<h1>Title</h1><p>Content goes here.`, 1, 2);
var root_52 = _$_.template_el('div', ['class', 'edit-link'], [['a', ['href', '/edit'], 'Edit']]);

function consequent_7(__anchor) {
	var div_39 = root_52();

	_$_.append(__anchor, div_39);
}

function if_8() {
	if (true) return consequent_7;
}

var root_53 = _$_.template_el('nav', ['class', 'prev-next'], [['a', ['href', '/prev'], 'Previous']]);

function consequent_8(__anchor) {
	var nav_2 = root_53();

	_$_.append(__anchor, nav_2);
}

function if_9() {
	if (true) return consequent_8;
}

var root_50 = _$_.template_el('div', ['class', 'content-container'], [null, null, null, null]);

function ArticleWithChildrenThenSibling_render(__anchor, __block) {
	var div_38 = root_50();

	{
		var node_29 = _$_.hydrating ? _$_.hydrate_child() : div_38.firstChild;

		_$_.render_component(ArticleWrapper, node_29, {
			children: _$_.tsrx_element((__anchor, __block) => {
				var fragment_9 = root_51();

				_$_.next();
				_$_.append(__anchor, fragment_9);
			})
		});

		var node_30 = _$_.hydrating ? _$_.hydrate_sibling() : node_29.nextSibling;

		_$_.if(node_30, if_8);

		var node_31 = _$_.hydrating ? _$_.hydrate_sibling() : node_30.nextSibling;

		_$_.if(node_31, if_9);

		var node_32 = _$_.hydrating ? _$_.hydrate_sibling() : node_31.nextSibling;

		_$_.render_component(SimpleFooter, node_32, {});
		_$_.hydrating && _$_.pop(div_38);
	}

	_$_.append(__anchor, div_38);
}

ArticleWithChildrenThenSibling[_$_.$r] = ArticleWithChildrenThenSibling_render;

var root_55 = _$_.template_el('div', ['class', 'doc-content']);
var root_56 = _$_.template_el('div', ['class', 'edit-link'], [['a', ['href', '/edit'], 'Edit']]);

function consequent_9(__anchor) {
	var div_42 = root_56();

	_$_.append(__anchor, div_42);
}

function if_10() {
	if (true) return consequent_9;
}

var root_54 = _$_.template_el('div', ['class', 'content-container'], [null, null, null]);

function ArticleWithHtmlChildThenSibling_render(__anchor, __block) {
	const htmlContent = '<pre><code>const x = 1;</code></pre>';
	var div_40 = root_54();

	{
		var node_33 = _$_.hydrating ? _$_.hydrate_child() : div_40.firstChild;

		_$_.render_component(ArticleWrapper, node_33, {
			children: _$_.tsrx_element((__anchor, __block) => {
				var div_41 = root_55();

				div_41.innerHTML = htmlContent ?? div_41.innerHTML;
				_$_.append(__anchor, div_41);
			})
		});

		var node_34 = _$_.hydrating ? _$_.hydrate_sibling() : node_33.nextSibling;

		_$_.if(node_34, if_10);

		var node_35 = _$_.hydrating ? _$_.hydrate_sibling() : node_34.nextSibling;

		_$_.render_component(SimpleFooter, node_35, {});
		_$_.hydrating && _$_.pop(div_40);
	}

	_$_.append(__anchor, div_40);
}

ArticleWithHtmlChildThenSibling[_$_.$r] = ArticleWithHtmlChildThenSibling_render;

var root_58 = _$_.template_el('div', ['class', 'edit-link'], [['a', ['href', '/edit'], 'Edit']]);

function consequent_10(__anchor) {
	var div_45 = root_58();

	_$_.append(__anchor, div_45);
}

function if_11() {
	if (true) return consequent_10;
}

var root_57 = _$_.template_el('div', ['class', 'content-container'], [
	['article', ['class', 'doc-content'], [['div', null, [null]]]]
]);

function InlineArticleLayout_render(__anchor, __block, { children }) {
	var div_43 = root_57();

	{
		var article_2 = _$_.hydrating ? _$_.hydrate_child() : div_43.firstChild;

		{
			var div_44 = _$_.hydrating ? _$_.hydrate_child() : article_2.firstChild;

			{
				var expression_19 = _$_.hydrating ? _$_.hydrate_child() : div_44.firstChild;

				_$_.expression(expression_19, () => children);
				_$_.hydrating && _$_.pop(div_44);
			}
		}

		_$_.hydrating && _$_.pop(article_2);

		var node_36 = _$_.hydrating ? _$_.hydrate_sibling() : _$_.append_into(div_43);

		_$_.if(node_36, if_11);

		var node_37 = _$_.hydrating ? _$_.hydrate_sibling() : _$_.append_into(div_43);

		_$_.render_component(SimpleFooter, node_37, {});
		_$_.hydrating && _$_.pop(div_43);
	}

	_$_.append(__anchor, div_43);
}

InlineArticleLayout[_$_.$r] = InlineArticleLayout_render;

var root_59 = _$_.template_el('div', ['class', 'doc-content']);

function InlineArticleWithHtmlChild_render(__anchor, __block) {
	const htmlContent = '<pre><code>const x = 1;</code></pre>';

	_$_.render_component(InlineArticleLayout, __anchor, {
		children: _$_.tsrx_element((__anchor, __block) => {
			var div_46 = root_59();

			div_46.innerHTML = htmlContent ?? div_46.innerHTML;
			_$_.append(__anchor, div_46);
		})
	});
}

InlineArticleWithHtmlChild[_$_.$r] = InlineArticleWithHtmlChild_render;

var root_60 = _$_.template_el('header', ['class', 'header'], 'Header');

function HeaderStub_render(__anchor, __block) {
	var header_1 = root_60();

	_$_.append(__anchor, header_1);
}

HeaderStub[_$_.$r] = HeaderStub_render;

var root_61 = _$_.template_el('aside', ['class', 'sidebar'], 'Sidebar');

function SidebarStub_render(__anchor, __block) {
	var aside_2 = root_61();

	_$_.append(__anchor, aside_2);
}

SidebarStub[_$_.$r] = SidebarStub_render;

var root_62 = _$_.template_el('footer', ['class', 'footer'], 'Footer');

function FooterStub_render(__anchor, __block) {
	var footer_2 = root_62();

	_$_.append(__anchor, footer_2);
}

FooterStub[_$_.$r] = FooterStub_render;

var root_64 = _$_.template_el('div', ['class', 'edit-link'], [['a', ['href', '/edit'], 'Edit on GitHub']]);

function consequent_11(__anchor, editPath) {
	var div_53 = root_64();

	_$_.append(__anchor, div_53);
}

function if_12(editPath) {
	if (editPath) return consequent_11;
}

var root_65 = _$_.template_el('nav', ['class', 'prev-next'], [['a', null, ' ']]);

function render_7(__prev) {
	var __a = __prev._a.href;

	if (__prev.a !== __a) {
		_$_.set_attribute(__prev._b, 'href', __prev.a = __a);
	}
}

function consequent_12(__anchor, nextLink) {
	var nav_3 = root_65();

	{
		var a_4 = _$_.hydrating ? _$_.hydrate_child() : nav_3.firstChild;

		{
			var expression_21 = _$_.hydrating ? _$_.hydrate_child() : a_4.firstChild;

			_$_.expression(expression_21, () => nextLink.text);
			_$_.hydrating && _$_.pop(a_4);
		}
	}

	_$_.render(render_7, { a: void 0, _a: nextLink, _b: a_4 });
	_$_.append(__anchor, nav_3);
}

function if_13(nextLink) {
	if (nextLink) return consequent_12;
}

var root_63 = _$_.template(`<div class=layout><div class=docs-wrapper><main class=docs-main><div class=docs-container><div class=content><div class=content-container><article class=doc-content><div><!>`);

function DocsLayoutInner_render(
	__anchor,
	__block,
	{ children, editPath = '', nextLink = null }
) {
	var div_47 = root_63();

	{
		var node_38 = _$_.hydrating ? _$_.hydrate_child() : div_47.firstChild;

		_$_.render_component(HeaderStub, node_38, {});

		var div_48 = _$_.hydrating ? _$_.hydrate_sibling() : node_38;

		{
			var node_39 = _$_.hydrating ? _$_.hydrate_child() : div_48.firstChild;

			_$_.render_component(SidebarStub, node_39, {});

			var main_1 = _$_.hydrating ? _$_.hydrate_sibling() : node_39;

			{
				var div_51 = _$_.hydrating ? _$_.hydrate_child() : main_1.firstChild;

				{
					var div_50 = _$_.hydrating ? _$_.hydrate_child() : div_51.firstChild;

					{
						var div_49 = _$_.hydrating ? _$_.hydrate_child() : div_50.firstChild;

						{
							var article_3 = _$_.hydrating ? _$_.hydrate_child() : div_49.firstChild;

							{
								var div_52 = _$_.hydrating ? _$_.hydrate_child() : article_3.firstChild;

								{
									var expression_20 = _$_.hydrating ? _$_.hydrate_child() : div_52.firstChild;

									_$_.expression(expression_20, () => children);
									_$_.hydrating && _$_.pop(div_52);
								}
							}

							_$_.hydrating && _$_.pop(article_3);

							var node_40 = _$_.hydrating ? _$_.hydrate_sibling() : _$_.append_into(div_49);

							_$_.if(node_40, if_12, false, editPath);

							var node_41 = _$_.hydrating ? _$_.hydrate_sibling() : _$_.append_into(div_49);

							_$_.if(node_41, if_13, false, nextLink);

							var node_42 = _$_.hydrating ? _$_.hydrate_sibling() : _$_.append_into(div_49);

							_$_.render_component(FooterStub, node_42, {});
							_$_.hydrating && _$_.pop(div_49);
						}
					}
				}
			}

			_$_.hydrating && _$_.pop(div_48);
		}

		_$_.hydrating && _$_.pop(div_47);
	}

	_$_.append(__anchor, div_47);
}

DocsLayoutInner[_$_.$r] = DocsLayoutInner_render;

var root_66 = _$_.template_el('div', ['class', 'doc-content']);

function DocsLayoutWithData_render(__anchor, __block) {
	const htmlContent = '<h1>Title</h1><p>Content</p>';

	_$_.render_component(DocsLayoutInner, __anchor, {
		editPath: "docs/styling.md",
		nextLink: { href: '/next', text: 'Next' },
		children: _$_.tsrx_element((__anchor, __block) => {
			var div_54 = root_66();

			div_54.innerHTML = htmlContent ?? div_54.innerHTML;
			_$_.append(__anchor, div_54);
		})
	});
}

DocsLayoutWithData[_$_.$r] = DocsLayoutWithData_render;

var root_67 = _$_.template_el('div', ['class', 'doc-content']);

function DocsLayoutWithoutData_render(__anchor, __block) {
	const htmlContent = undefined;

	_$_.render_component(DocsLayoutInner, __anchor, {
		children: _$_.tsrx_element((__anchor, __block) => {
			var div_55 = root_67();

			div_55.innerHTML = htmlContent ?? div_55.innerHTML;
			_$_.append(__anchor, div_55);
		})
	});
}

DocsLayoutWithoutData[_$_.$r] = DocsLayoutWithoutData_render;

var root_69 = _$_.template_el('div', ['class', 'edit-link'], [['a', null, 'Edit on GitHub']]);

function consequent_13(__anchor, editPath) {
	var div_62 = root_69();

	{
		var a_5 = _$_.hydrating ? _$_.hydrate_child() : div_62.firstChild;

		a_5.setAttribute('href', `/edit/${editPath}`);
	}

	_$_.append(__anchor, div_62);
}

function if_14(editPath) {
	if (editPath) return consequent_13;
}

var root_71 = _$_.template_el('a', ['class', 'pager prev'], [['span', ['class', 'title'], ' ']]);

function render_8(__prev) {
	var __a = __prev._a.href;

	if (__prev.a !== __a) {
		_$_.set_attribute(__prev._b, 'href', __prev.a = __a);
	}
}

var root_72 = _$_.template_el('span');

function consequent_14(__anchor, prevLink) {
	var a_6 = root_71();

	{
		var span_4 = _$_.hydrating ? _$_.hydrate_child() : a_6.firstChild;

		{
			var expression_23 = _$_.hydrating ? _$_.hydrate_child() : span_4.firstChild;

			_$_.expression(expression_23, () => prevLink.text);
			_$_.hydrating && _$_.pop(span_4);
		}
	}

	_$_.render(render_8, { a: void 0, _a: prevLink, _b: a_6 });
	_$_.append(__anchor, a_6);
}

function alternate_1(__anchor, prevLink) {
	var span_5 = root_72();

	_$_.append(__anchor, span_5);
}

function if_15(prevLink) {
	if (prevLink) return consequent_14; else return alternate_1;
}

var root_73 = _$_.template_el('a', ['class', 'pager next'], [['span', ['class', 'title'], ' ']]);

function render_9(__prev) {
	var __a = __prev._a.href;

	if (__prev.a !== __a) {
		_$_.set_attribute(__prev._b, 'href', __prev.a = __a);
	}
}

function consequent_15(__anchor, nextLink) {
	var a_7 = root_73();

	{
		var span_6 = _$_.hydrating ? _$_.hydrate_child() : a_7.firstChild;

		{
			var expression_24 = _$_.hydrating ? _$_.hydrate_child() : span_6.firstChild;

			_$_.expression(expression_24, () => nextLink.text);
			_$_.hydrating && _$_.pop(span_6);
		}
	}

	_$_.render(render_9, { a: void 0, _a: nextLink, _b: a_7 });
	_$_.append(__anchor, a_7);
}

function if_16(nextLink) {
	if (nextLink) return consequent_15;
}

var root_70 = _$_.template_el('nav', ['class', 'prev-next'], [null, null]);

function consequent_16(__anchor, { a: prevLink, b: nextLink }) {
	var nav_4 = root_70();

	{
		var node_47 = _$_.hydrating ? _$_.hydrate_child() : nav_4.firstChild;

		_$_.if(node_47, if_15, false, prevLink);

		var node_48 = _$_.hydrating ? _$_.hydrate_sibling() : node_47.nextSibling;

		_$_.if(node_48, if_16, false, nextLink);
		_$_.hydrating && _$_.pop(nav_4);
	}

	_$_.append(__anchor, nav_4);
}

function if_17({ a: prevLink, b: nextLink }) {
	if (prevLink || nextLink) return consequent_16;
}

var root_75 = _$_.template_el('a');

function render_10(__prev) {
	var __a = __prev._a.text;

	if (__prev.a !== __a) {
		_$_.set_text_content(__prev._b, __a, __prev.a);
		__prev.a = __a;
	}

	var __b = __prev._a.href;

	if (__prev.b !== __b) {
		_$_.set_attribute(__prev._b, 'href', __prev.b = __b);
	}
}

var root_74 = _$_.template_el('div', ['class', 'aside-content'], [['nav', ['class', 'outline']]]);

function consequent_17(__anchor, toc) {
	var div_63 = root_74();

	{
		var nav_5 = _$_.hydrating ? _$_.hydrate_child() : div_63.firstChild;

		{
			_$_.for(
				nav_5,
				() => toc,
				(__anchor, item) => {
					var a_8 = root_75();

					_$_.item({ a: '', b: void 0, _a: item, _b: a_8 });
					_$_.append(__anchor, a_8);
				},
				4,
				void 0,
				render_10
			);

			_$_.hydrating && _$_.pop(nav_5);
		}
	}

	_$_.append(__anchor, div_63);
}

function if_18(toc) {
	if (toc.length > 0) return consequent_17;
}

var root_68 = _$_.template(`<div class=layout><div class=docs-wrapper><main class=docs-main><div class=docs-container><div class=content><div class=content-container><article class=doc-content><div><!></div></article></div></div><aside class=aside><!>`);

function render_11(__prev) {
	var __a = if_18(__prev._a);

	if (__prev.a !== __a) {
		_$_.if_update(__prev._b, __prev.a = __a);
	}
}

function DocsLayoutExact_render(
	__anchor,
	__block,
	{
		children,
		editPath = '',
		prevLink = null,
		nextLink = null,
		toc = []
	}
) {
	var div_56 = root_68();

	{
		var node_43 = _$_.hydrating ? _$_.hydrate_child() : div_56.firstChild;

		_$_.render_component(HeaderStub, node_43, {});

		var div_57 = _$_.hydrating ? _$_.hydrate_sibling() : node_43;

		{
			var node_44 = _$_.hydrating ? _$_.hydrate_child() : div_57.firstChild;

			_$_.render_component(SidebarStub, node_44, {});

			var main_2 = _$_.hydrating ? _$_.hydrate_sibling() : node_44;

			{
				var div_60 = _$_.hydrating ? _$_.hydrate_child() : main_2.firstChild;

				{
					var div_59 = _$_.hydrating ? _$_.hydrate_child() : div_60.firstChild;

					{
						var div_58 = _$_.hydrating ? _$_.hydrate_child() : div_59.firstChild;

						{
							var article_4 = _$_.hydrating ? _$_.hydrate_child() : div_58.firstChild;

							{
								var div_61 = _$_.hydrating ? _$_.hydrate_child() : article_4.firstChild;

								{
									var expression_22 = _$_.hydrating ? _$_.hydrate_child() : div_61.firstChild;

									_$_.expression(expression_22, () => children);
									_$_.hydrating && _$_.pop(div_61);
								}
							}

							_$_.hydrating && _$_.pop(article_4);

							var node_45 = _$_.hydrating ? _$_.hydrate_sibling() : _$_.append_into(div_58);

							_$_.if(node_45, if_14, false, editPath);

							var node_46 = _$_.hydrating ? _$_.hydrate_sibling() : _$_.append_into(div_58);

							_$_.if(node_46, if_17, false, { a: prevLink, b: nextLink });

							var node_49 = _$_.hydrating ? _$_.hydrate_sibling() : _$_.append_into(div_58);

							_$_.render_component(FooterStub, node_49, {});
							_$_.hydrating && _$_.pop(div_58);
						}
					}

					_$_.hydrating && _$_.pop(div_59);

					var aside_3 = _$_.hydrating ? _$_.hydrate_sibling() : div_59.nextSibling;

					{
						var node_50 = _$_.hydrating ? _$_.hydrate_child() : aside_3.firstChild;
						var ifs_2 = _$_.if_static(node_50, if_18, 0, toc);

						_$_.hydrating && _$_.pop(aside_3);
					}
				}
			}

			_$_.hydrating && _$_.pop(div_57);
		}

		_$_.hydrating && _$_.pop(div_56);
	}

	_$_.render(render_11, { a: _$_.UNINITIALIZED, _a: toc, _b: ifs_2 });
	_$_.append(__anchor, div_56);
}

DocsLayoutExact[_$_.$r] = DocsLayoutExact_render;

var root_76 = _$_.template_el('div', ['class', 'doc-content']);

function DocsLayoutExactWithData_render(__anchor, __block) {
	const htmlContent = '<h1>Styling Guide</h1><p>Content</p>';

	_$_.render_component(DocsLayoutExact, __anchor, {
		editPath: "docs/guide/styling.md",
		prevLink: { href: '/prev', text: 'Previous' },
		nextLink: { href: '/next', text: 'Next' },
		toc: [
			{ href: '#intro', text: 'Introduction' },
			{ href: '#usage', text: 'Usage' }
		],

		children: _$_.tsrx_element((__anchor, __block) => {
			var div_64 = root_76();

			div_64.innerHTML = htmlContent ?? div_64.innerHTML;
			_$_.append(__anchor, div_64);
		})
	});
}

DocsLayoutExactWithData[_$_.$r] = DocsLayoutExactWithData_render;

var root_77 = _$_.template_el('div', ['class', 'doc-content']);

function DocsLayoutExactWithoutData_render(__anchor, __block) {
	const htmlContent = undefined;
	const editPath = undefined;
	const prevLink = undefined;
	const nextLink = undefined;
	const toc = undefined;

	_$_.render_component(DocsLayoutExact, __anchor, {
		editPath,
		prevLink,
		nextLink,
		toc,
		children: _$_.tsrx_element((__anchor, __block) => {
			var div_65 = root_77();

			div_65.innerHTML = htmlContent ?? div_65.innerHTML;
			_$_.append(__anchor, div_65);
		})
	});
}

DocsLayoutExactWithoutData[_$_.$r] = DocsLayoutExactWithoutData_render;

var root_78 = _$_.template(`<div><template id=t1></template><p class=content>Main content`);

function render_12(__prev) {
	var __a = _$_.with_scope(__prev._a, () => JSON.stringify(__prev._b));

	if (__prev.a !== __a) {
		__prev._c.innerHTML = (__prev.a = __a) ?? __prev._c.innerHTML;
	}
}

function TemplateWithHtmlContent_render(__anchor, __block) {
	const data = { title: 'Test', value: 42 };
	var div_66 = root_78();

	{
		var template = _$_.hydrating ? _$_.hydrate_child() : div_66.firstChild;
	}

	_$_.render(render_12, { a: template.innerHTML, _a: __block, _b: data, _c: template });
	_$_.append(__anchor, div_66);
}

TemplateWithHtmlContent[_$_.$r] = TemplateWithHtmlContent_render;

var root_79 = _$_.template(`<div class=wrapper><h1>Title</h1><template id=data-template></template><p class=after-template>Content after template`);

function render_13(__prev) {
	var __a = _$_.with_scope(__prev._a, () => JSON.stringify(__prev._b));

	if (__prev.a !== __a) {
		__prev._c.innerHTML = (__prev.a = __a) ?? __prev._c.innerHTML;
	}
}

function TemplateWithHtmlAndSiblings_render(__anchor, __block) {
	const data = { name: 'Ripple', version: '1.0' };
	var div_67 = root_79();

	{
		var h1_3 = _$_.hydrating ? _$_.hydrate_child() : div_67.firstChild;
		var template_1 = _$_.hydrating ? _$_.hydrate_sibling() : h1_3.nextSibling;
	}

	_$_.render(render_13, {
		a: template_1.innerHTML,
		_a: __block,
		_b: data,
		_c: template_1
	});

	_$_.append(__anchor, div_67);
}

TemplateWithHtmlAndSiblings[_$_.$r] = TemplateWithHtmlAndSiblings_render;

var root_80 = _$_.template(`<div class=layout><template id=page-data></template><main><!>`);

function render_14(__prev) {
	var __a = _$_.with_scope(__prev._a, () => JSON.stringify(__prev._b));

	if (__prev.a !== __a) {
		__prev._c.innerHTML = (__prev.a = __a) ?? __prev._c.innerHTML;
	}
}

function LayoutWithTemplate_render(__anchor, __block, { children, data }) {
	var div_68 = root_80();

	{
		var template_2 = _$_.hydrating ? _$_.hydrate_child() : div_68.firstChild;
		var main_3 = _$_.hydrating ? _$_.hydrate_sibling() : template_2.nextSibling;

		{
			var expression_26 = _$_.hydrating ? _$_.hydrate_child() : main_3.firstChild;

			_$_.expression(expression_26, () => children);
			_$_.hydrating && _$_.pop(main_3);
		}
	}

	_$_.render(render_14, {
		a: template_2.innerHTML,
		_a: __block,
		_b: data,
		_c: template_2
	});

	_$_.append(__anchor, div_68);
}

LayoutWithTemplate[_$_.$r] = LayoutWithTemplate_render;

var root_81 = _$_.template_el('div', ['class', 'doc-content']);

function render_15(__prev) {
	var __a = __prev._a.html;

	if (__prev.a !== __a) {
		__prev._b.innerHTML = (__prev.a = __a) ?? __prev._b.innerHTML;
	}
}

function NestedTemplateInLayout_render(__anchor, __block) {
	const doc = { title: 'Comparison', html: '<p>Content</p>' };

	_$_.render_component(LayoutWithTemplate, __anchor, {
		data: doc,
		children: _$_.tsrx_element((__anchor, __block) => {
			var div_69 = root_81();

			_$_.render(render_15, { a: div_69.innerHTML, _a: doc, _b: div_69 });
			_$_.append(__anchor, div_69);
		})
	});
}

NestedTemplateInLayout[_$_.$r] = NestedTemplateInLayout_render;

var root_82 = _$_.template(`<section class=readable-section><p>Ergonomics</p><h2>Sibling traversal pattern</h2><p>Before first block</p><p>Before second block</p><pre class=code-block><code></code></pre><p>Between one and two</p><pre class=code-block><code></code></pre><p>Between two and three</p><pre class=code-block><code>`);

function HtmlCodeBlocksWithSiblingChain_render(__anchor, __block) {
	const html1 = '<span class="kw">const</span> <span class="id">a</span> = 1;';
	const html2 = '<span class="kw">const</span> <span class="id">b</span> = 2;';
	const html3 = '<span class="kw">const</span> <span class="id">c</span> = 3;';
	var section_2 = root_82();

	{
		var p_9 = _$_.hydrating ? _$_.hydrate_child() : section_2.firstChild;
		var h2_3 = _$_.hydrating ? _$_.hydrate_sibling() : p_9.nextSibling;
		var p_8 = _$_.hydrating ? _$_.hydrate_sibling() : h2_3.nextSibling;
		var p_7 = _$_.hydrating ? _$_.hydrate_sibling() : p_8.nextSibling;
		var pre = _$_.hydrating ? _$_.hydrate_sibling() : p_7.nextSibling;

		{
			var code_1 = _$_.hydrating ? _$_.hydrate_child() : pre.firstChild;

			code_1.innerHTML = html1 ?? code_1.innerHTML;
		}

		_$_.hydrating && _$_.pop(pre);

		var p_10 = _$_.hydrating ? _$_.hydrate_sibling() : pre.nextSibling;
		var pre_1 = _$_.hydrating ? _$_.hydrate_sibling() : p_10.nextSibling;

		{
			var code_2 = _$_.hydrating ? _$_.hydrate_child() : pre_1.firstChild;

			code_2.innerHTML = html2 ?? code_2.innerHTML;
		}

		_$_.hydrating && _$_.pop(pre_1);

		var p_11 = _$_.hydrating ? _$_.hydrate_sibling() : pre_1.nextSibling;
		var pre_2 = _$_.hydrating ? _$_.hydrate_sibling() : p_11.nextSibling;

		{
			var code_3 = _$_.hydrating ? _$_.hydrate_child() : pre_2.firstChild;

			code_3.innerHTML = html3 ?? code_3.innerHTML;
		}
	}

	_$_.append(__anchor, section_2);
}

HtmlCodeBlocksWithSiblingChain[_$_.$r] = HtmlCodeBlocksWithSiblingChain_render;

import { Fragment, track } from 'ripple';

export function StaticHtml() {
	return _$_.tsrx_element(StaticHtml_render);
}

export function DynamicHtml() {
	return _$_.tsrx_element(DynamicHtml_render);
}

export function EmptyHtml() {
	return _$_.tsrx_element(EmptyHtml_render);
}

export function ComplexHtml() {
	return _$_.tsrx_element(ComplexHtml_render);
}

export function MultipleHtml() {
	return _$_.tsrx_element(MultipleHtml_render);
}

export function HtmlWithReactivity() {
	return _$_.tsrx_element(HtmlWithReactivity_render);
}

export function HtmlWrapper(__props) {
	return _$_.tsrx_element(HtmlWrapper_render, __props);
}

export function HtmlInChildren() {
	return _$_.tsrx_element(HtmlInChildren_render);
}

export function HtmlInChildrenWithSiblings() {
	return _$_.tsrx_element(HtmlInChildrenWithSiblings_render);
}

export function MultipleHtmlInChildren() {
	return _$_.tsrx_element(MultipleHtmlInChildren_render);
}

export function HtmlWithComments() {
	return _$_.tsrx_element(HtmlWithComments_render);
}

export function HtmlWithEmptyComment() {
	return _$_.tsrx_element(HtmlWithEmptyComment_render);
}

export function HtmlWithCommentsInChildren() {
	return _$_.tsrx_element(HtmlWithCommentsInChildren_render);
}

function DocFooter() {
	return _$_.tsrx_element(DocFooter_render);
}

export function DocLayout(__props) {
	return _$_.tsrx_element(DocLayout_render, __props);
}

export function HtmlWithServerData() {
	return _$_.tsrx_element(HtmlWithServerData_render);
}

export function HtmlWithClientDefaults() {
	return _$_.tsrx_element(HtmlWithClientDefaults_render);
}

export function HtmlWithUndefinedContent() {
	return _$_.tsrx_element(HtmlWithUndefinedContent_render);
}

function DynamicHeading(__props) {
	return _$_.tsrx_element(DynamicHeading_render, __props);
}

function CodeBlock(__props) {
	return _$_.tsrx_element(CodeBlock_render, __props);
}

function ContentWrapper(__props) {
	return _$_.tsrx_element(ContentWrapper_render, __props);
}

export function HtmlAfterSwitchInChildren() {
	return _$_.tsrx_element(HtmlAfterSwitchInChildren_render);
}

function IfHeading(__props) {
	return _$_.tsrx_element(IfHeading_render, __props);
}

export function HtmlAfterIfInChildren() {
	return _$_.tsrx_element(HtmlAfterIfInChildren_render);
}

function ForList(__props) {
	return _$_.tsrx_element(ForList_render, __props);
}

export function HtmlAfterForInChildren() {
	return _$_.tsrx_element(HtmlAfterForInChildren_render);
}

function TryBox(__props) {
	return _$_.tsrx_element(TryBox_render, __props);
}

export function HtmlAfterTryInChildren() {
	return _$_.tsrx_element(HtmlAfterTryInChildren_render);
}

function Boxed(__props) {
	return _$_.tsrx_element(Boxed_render, __props);
}

function IndirectHeading(__props) {
	return _$_.tsrx_element(IndirectHeading_render, __props);
}

export function HtmlAfterComponentInChildren() {
	return _$_.tsrx_element(HtmlAfterComponentInChildren_render);
}

function NavItem(__props) {
	return _$_.tsrx_element(NavItem_render, __props);
}

function SidebarSection(__props) {
	return _$_.tsrx_element(SidebarSection_render, __props);
}

function SideNav(__props) {
	return _$_.tsrx_element(SideNav_render, __props);
}

function PageHeader() {
	return _$_.tsrx_element(PageHeader_render);
}

export function LayoutWithSidebarAndMain() {
	return _$_.tsrx_element(LayoutWithSidebarAndMain_render);
}

function ArticleWrapper(__props) {
	return _$_.tsrx_element(ArticleWrapper_render, __props);
}

function SimpleFooter() {
	return _$_.tsrx_element(SimpleFooter_render);
}

export function ArticleWithChildrenThenSibling() {
	return _$_.tsrx_element(ArticleWithChildrenThenSibling_render);
}

export function ArticleWithHtmlChildThenSibling() {
	return _$_.tsrx_element(ArticleWithHtmlChildThenSibling_render);
}

function InlineArticleLayout(__props) {
	return _$_.tsrx_element(InlineArticleLayout_render, __props);
}

export function InlineArticleWithHtmlChild() {
	return _$_.tsrx_element(InlineArticleWithHtmlChild_render);
}

function HeaderStub() {
	return _$_.tsrx_element(HeaderStub_render);
}

function SidebarStub() {
	return _$_.tsrx_element(SidebarStub_render);
}

function FooterStub() {
	return _$_.tsrx_element(FooterStub_render);
}

function DocsLayoutInner(__props) {
	return _$_.tsrx_element(DocsLayoutInner_render, __props);
}

export function DocsLayoutWithData() {
	return _$_.tsrx_element(DocsLayoutWithData_render);
}

export function DocsLayoutWithoutData() {
	return _$_.tsrx_element(DocsLayoutWithoutData_render);
}

function DocsLayoutExact(__props) {
	return _$_.tsrx_element(DocsLayoutExact_render, __props);
}

export function DocsLayoutExactWithData() {
	return _$_.tsrx_element(DocsLayoutExactWithData_render);
}

export function DocsLayoutExactWithoutData() {
	return _$_.tsrx_element(DocsLayoutExactWithoutData_render);
}

export function TemplateWithHtmlContent() {
	return _$_.tsrx_element(TemplateWithHtmlContent_render);
}

export function TemplateWithHtmlAndSiblings() {
	return _$_.tsrx_element(TemplateWithHtmlAndSiblings_render);
}

function LayoutWithTemplate(__props) {
	return _$_.tsrx_element(LayoutWithTemplate_render, __props);
}

export function NestedTemplateInLayout() {
	return _$_.tsrx_element(NestedTemplateInLayout_render);
}

export function HtmlCodeBlocksWithSiblingChain() {
	return _$_.tsrx_element(HtmlCodeBlocksWithSiblingChain_render);
}

_$_.delegate(['click']);