ripple 0.3.67 → 0.3.69

package/tests/hydration/compiled/client/html.js

@@ -1,22 +1,22 @@
 // @ts-nocheck
 import * as _$_ from 'ripple/internal/client';
 
-var root = _$_.template(`<div><!></div>`, 0);
-var root_1 = _$_.template(`<div><!></div>`, 0);
-var root_2 = _$_.template(`<div><!></div>`, 0);
-var root_3 = _$_.template(`<section><!></section>`, 0);
+var root = _$_.template(`<div></div>`, 0);
+var root_1 = _$_.template(`<div></div>`, 0);
+var root_2 = _$_.template(`<div></div>`, 0);
+var root_3 = _$_.template(`<section></section>`, 0);
 var root_4 = _$_.template(`<div><!><!></div>`, 0);
 var root_5 = _$_.template(`<div><!><button>Increment</button></div>`, 0);
 var root_6 = _$_.template(`<div class="wrapper"><div class="inner"><!></div></div>`, 0);
-var root_8 = _$_.template(`<div class="vp-doc"><!></div>`, 0);
+var root_8 = _$_.template(`<div class="vp-doc"></div>`, 0);
 var root_7 = _$_.template(`<!>`, 1, 1);
-var root_10 = _$_.template(`<h1>Title</h1><div class="content"><!></div>`, 1, 2);
+var root_10 = _$_.template(`<h1>Title</h1><div class="content"></div>`, 1, 2);
 var root_9 = _$_.template(`<!>`, 1, 1);
 var root_12 = _$_.template(`<div class="doc"><!><!></div>`, 0);
 var root_11 = _$_.template(`<!>`, 1, 1);
-var root_13 = _$_.template(`<div><!></div>`, 0);
-var root_14 = _$_.template(`<div><!></div>`, 0);
-var root_16 = _$_.template(`<div class="vp-doc"><!></div>`, 0);
+var root_13 = _$_.template(`<div></div>`, 0);
+var root_14 = _$_.template(`<div></div>`, 0);
+var root_16 = _$_.template(`<div class="vp-doc"></div>`, 0);
 var root_15 = _$_.template(`<!>`, 1, 1);
 var root_17 = _$_.template(`<footer class="doc-footer">Footer content</footer>`, 0);
 var root_19 = _$_.template(`<div class="edit-link"><a>Edit</a></div>`, 0);
@@ -24,16 +24,16 @@ var root_20 = _$_.template(`<nav class="prev-next"><a> </a></nav>`, 0);
 var root_22 = _$_.template(`<li><a> </a></li>`, 0);
 var root_21 = _$_.template(`<div class="toc"><ul></ul></div>`, 0);
 var root_18 = _$_.template(`<div class="layout"><div class="content-container"><article><div><!></div></article><!><!><!></div><aside><!></aside></div>`, 0);
-var root_24 = _$_.template(`<div class="vp-doc"><!></div>`, 0);
+var root_24 = _$_.template(`<div class="vp-doc"></div>`, 0);
 var root_23 = _$_.template(`<!>`, 1, 1);
-var root_26 = _$_.template(`<div class="vp-doc"><!></div>`, 0);
+var root_26 = _$_.template(`<div class="vp-doc"></div>`, 0);
 var root_25 = _$_.template(`<!>`, 1, 1);
-var root_28 = _$_.template(`<div class="vp-doc"><!></div>`, 0);
+var root_28 = _$_.template(`<div class="vp-doc"></div>`, 0);
 var root_27 = _$_.template(`<!>`, 1, 1);
-var root_30 = _$_.template(`<h1 class="heading"><!></h1>`, 0);
-var root_31 = _$_.template(`<h2 class="heading"><!></h2>`, 0);
+var root_30 = _$_.template(`<h1 class="heading"><!></h1>`, 1, 1);
+var root_31 = _$_.template(`<h2 class="heading"><!></h2>`, 1, 1);
 var root_29 = _$_.template(`<!>`, 1, 1);
-var root_32 = _$_.template(`<div class="code-block"><div class="header"><button>Copy</button><span class="lang">js</span></div><div class="content"><!></div></div>`, 0);
+var root_32 = _$_.template(`<div class="code-block"><div class="header"><button>Copy</button><span class="lang">js</span></div><div class="content"></div></div>`, 0);
 var root_33 = _$_.template(`<div class="wrapper"><div class="inner"><!></div></div>`, 0);
 var root_35 = _$_.template(`<!><p>First paragraph</p><p>Second paragraph</p><!><p>After code</p>`, 1, 5);
 var root_34 = _$_.template(`<!>`, 1, 1);
@@ -53,12 +53,12 @@ var root_49 = _$_.template(`<h1>Title</h1><p>Content goes here.</p>`, 1, 2);
 var root_50 = _$_.template(`<div class="edit-link"><a href="/edit">Edit</a></div>`, 0);
 var root_51 = _$_.template(`<nav class="prev-next"><a href="/prev">Previous</a></nav>`, 0);
 var root_48 = _$_.template(`<div class="content-container"><!><!><!><!></div>`, 0);
-var root_53 = _$_.template(`<div class="doc-content"><!></div>`, 0);
+var root_53 = _$_.template(`<div class="doc-content"></div>`, 0);
 var root_54 = _$_.template(`<div class="edit-link"><a href="/edit">Edit</a></div>`, 0);
 var root_52 = _$_.template(`<div class="content-container"><!><!><!></div>`, 0);
 var root_56 = _$_.template(`<div class="edit-link"><a href="/edit">Edit</a></div>`, 0);
 var root_55 = _$_.template(`<div class="content-container"><article class="doc-content"><div><!></div></article><!><!></div>`, 0);
-var root_58 = _$_.template(`<div class="doc-content"><!></div>`, 0);
+var root_58 = _$_.template(`<div class="doc-content"></div>`, 0);
 var root_57 = _$_.template(`<!>`, 1, 1);
 var root_59 = _$_.template(`<header class="header">Header</header>`, 0);
 var root_60 = _$_.template(`<aside class="sidebar">Sidebar</aside>`, 0);
@@ -66,9 +66,9 @@ var root_61 = _$_.template(`<footer class="footer">Footer</footer>`, 0);
 var root_63 = _$_.template(`<div class="edit-link"><a href="/edit">Edit on GitHub</a></div>`, 0);
 var root_64 = _$_.template(`<nav class="prev-next"><a> </a></nav>`, 0);
 var root_62 = _$_.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></div></main></div></div>`, 0);
-var root_66 = _$_.template(`<div class="doc-content"><!></div>`, 0);
+var root_66 = _$_.template(`<div class="doc-content"></div>`, 0);
 var root_65 = _$_.template(`<!>`, 1, 1);
-var root_68 = _$_.template(`<div class="doc-content"><!></div>`, 0);
+var root_68 = _$_.template(`<div class="doc-content"></div>`, 0);
 var root_67 = _$_.template(`<!>`, 1, 1);
 var root_70 = _$_.template(`<div class="edit-link"><a>Edit on GitHub</a></div>`, 0);
 var root_72 = _$_.template(`<a class="pager prev"><span class="title"> </span></a>`, 0);
@@ -78,507 +78,387 @@ var root_71 = _$_.template(`<nav class="prev-next"><!><!></nav>`, 0);
 var root_76 = _$_.template(`<a> </a>`, 0);
 var root_75 = _$_.template(`<div class="aside-content"><nav class="outline"></nav></div>`, 0);
 var root_69 = _$_.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"><!></aside></div></main></div></div>`, 0);
-var root_78 = _$_.template(`<div class="doc-content"><!></div>`, 0);
+var root_78 = _$_.template(`<div class="doc-content"></div>`, 0);
 var root_77 = _$_.template(`<!>`, 1, 1);
-var root_80 = _$_.template(`<div class="doc-content"><!></div>`, 0);
+var root_80 = _$_.template(`<div class="doc-content"></div>`, 0);
 var root_79 = _$_.template(`<!>`, 1, 1);
 var root_81 = _$_.template(`<div><template id="t1"></template><p class="content">Main content</p></div>`, 0);
 var root_82 = _$_.template(`<div class="wrapper"><h1>Title</h1><template id="data-template"></template><p class="after-template">Content after template</p></div>`, 0);
 var root_83 = _$_.template(`<div class="layout"><template id="page-data"></template><main><!></main></div>`, 0);
-var root_85 = _$_.template(`<div class="doc-content"><!></div>`, 0);
+var root_85 = _$_.template(`<div class="doc-content"></div>`, 0);
 var root_84 = _$_.template(`<!>`, 1, 1);
-var root_86 = _$_.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><!></code></pre></section>`, 0);
+var root_86 = _$_.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></code></pre></section>`, 0);
 
-import { track } from 'ripple';
+import { Fragment, track } from 'ripple';
 
-export function StaticHtml(__anchor, _, __block) {
-	_$_.push_component();
+export function StaticHtml() {
+	return _$_.tsrx_element((__anchor, __block) => {
+		const html = '<p><strong>Bold</strong> text</p>';
+		var div_1 = root();
 
-	const html = '<p><strong>Bold</strong> text</p>';
-	var div_1 = root();
-
-	{
-		var node = _$_.child(div_1);
-
-		_$_.pop(div_1);
-	}
-
-	_$_.render(() => {
-		_$_.html(node, () => html);
+		div_1.innerHTML = html ?? div_1.innerHTML;
+		_$_.append(__anchor, div_1);
 	});
-
-	_$_.append(__anchor, div_1);
-	_$_.pop_component();
 }
 
-export function DynamicHtml(__anchor, _, __block) {
-	_$_.push_component();
+export function DynamicHtml() {
+	return _$_.tsrx_element((__anchor, __block) => {
+		const content = '<p>Dynamic <span>HTML</span> content</p>';
+		var div_2 = root_1();
 
-	const content = '<p>Dynamic <span>HTML</span> content</p>';
-	var div_2 = root_1();
-
-	{
-		var node_1 = _$_.child(div_2);
-
-		_$_.pop(div_2);
-	}
-
-	_$_.render(() => {
-		_$_.html(node_1, () => content);
+		div_2.innerHTML = content ?? div_2.innerHTML;
+		_$_.append(__anchor, div_2);
 	});
-
-	_$_.append(__anchor, div_2);
-	_$_.pop_component();
 }
 
-export function EmptyHtml(__anchor, _, __block) {
-	_$_.push_component();
+export function EmptyHtml() {
+	return _$_.tsrx_element((__anchor, __block) => {
+		const html = '';
+		var div_3 = root_2();
 
-	const html = '';
-	var div_3 = root_2();
-
-	{
-		var node_2 = _$_.child(div_3);
-
-		_$_.pop(div_3);
-	}
-
-	_$_.render(() => {
-		_$_.html(node_2, () => html);
+		div_3.innerHTML = html ?? div_3.innerHTML;
+		_$_.append(__anchor, div_3);
 	});
-
-	_$_.append(__anchor, div_3);
-	_$_.pop_component();
 }
 
-export function ComplexHtml(__anchor, _, __block) {
-	_$_.push_component();
-
-	const html = '<div class="nested"><span>Nested <em>content</em></span></div>';
-	var section_1 = root_3();
-
-	{
-		var node_3 = _$_.child(section_1);
-
-		_$_.pop(section_1);
-	}
+export function ComplexHtml() {
+	return _$_.tsrx_element((__anchor, __block) => {
+		const html = '<div class="nested"><span>Nested <em>content</em></span></div>';
+		var section_1 = root_3();
 
-	_$_.render(() => {
-		_$_.html(node_3, () => html);
+		section_1.innerHTML = html ?? section_1.innerHTML;
+		_$_.append(__anchor, section_1);
 	});
-
-	_$_.append(__anchor, section_1);
-	_$_.pop_component();
 }
 
-export function MultipleHtml(__anchor, _, __block) {
-	_$_.push_component();
-
-	const html1 = '<p>First paragraph</p>';
-	const html2 = '<p>Second paragraph</p>';
-	var div_4 = root_4();
+export function MultipleHtml() {
+	return _$_.tsrx_element((__anchor, __block) => {
+		const html1 = '<p>First paragraph</p>';
+		const html2 = '<p>Second paragraph</p>';
+		var div_4 = root_4();
 
-	{
-		var node_4 = _$_.child(div_4);
-		var node_5 = _$_.sibling(node_4);
+		{
+			var node = _$_.child(div_4);
+			var node_1 = _$_.sibling(node);
 
-		_$_.pop(div_4);
-	}
+			_$_.pop(div_4);
+		}
 
-	_$_.render(
-		(__prev) => {
-			_$_.html(node_4, () => html1);
-			_$_.html(node_5, () => html2);
-		},
-		{}
-	);
+		_$_.render(
+			(__prev) => {
+				_$_.html(node, () => html1);
+				_$_.html(node_1, () => html2);
+			},
+			{}
+		);
 
-	_$_.append(__anchor, div_4);
-	_$_.pop_component();
+		_$_.append(__anchor, div_4);
+	});
 }
 
-export function HtmlWithReactivity(__anchor, _, __block) {
-	_$_.push_component();
+export function HtmlWithReactivity() {
+	return _$_.tsrx_element((__anchor, __block) => {
+		var div_5 = root_5();
 
-	var div_5 = root_5();
+		{
+			var node_2 = _$_.child(div_5);
 
-	{
-		var node_6 = _$_.child(div_5);
+			_$_.pop(div_5);
+		}
 
-		_$_.pop(div_5);
-	}
+		_$_.render(() => {
+			_$_.html(node_2, () => "<p>Count: 0</p>");
+		});
 
-	_$_.render(() => {
-		_$_.html(node_6, () => '<p>Count: 0</p>');
+		_$_.append(__anchor, div_5);
 	});
-
-	_$_.append(__anchor, div_5);
-	_$_.pop_component();
 }
 
-export function HtmlWrapper(__anchor, { children }, __block) {
-	_$_.push_component();
-
-	var div_6 = root_6();
-
-	{
-		var div_7 = _$_.child(div_6);
+export function HtmlWrapper({ children }) {
+	return _$_.tsrx_element((__anchor, __block) => {
+		var div_6 = root_6();
 
 		{
-			var expression = _$_.child(div_7);
+			var div_7 = _$_.child(div_6);
+
+			{
+				var expression = _$_.child(div_7);
 
-			_$_.expression(expression, () => children);
-			_$_.pop(div_7);
+				_$_.expression(expression, () => children);
+				_$_.pop(div_7);
+			}
 		}
-	}
 
-	_$_.append(__anchor, div_6);
-	_$_.pop_component();
+		_$_.append(__anchor, div_6);
+	});
 }
 
-export function HtmlInChildren(__anchor, _, __block) {
-	_$_.push_component();
-
-	const content = '<p><strong>Bold</strong> text</p>';
-	var fragment = root_7();
-	var node_7 = _$_.first_child_frag(fragment);
+export function HtmlInChildren() {
+	return _$_.tsrx_element((__anchor, __block) => {
+		const content = '<p><strong>Bold</strong> text</p>';
+		var fragment = root_7();
+		var node_3 = _$_.first_child_frag(fragment);
 
-	HtmlWrapper(
-		node_7,
-		{
-			children: _$_.tsrx_element(function render_children(__anchor, __block) {
+		_$_.render_component(HtmlWrapper, node_3, {
+			children: _$_.tsrx_element((__anchor, __block) => {
 				var div_8 = root_8();
 
-				{
-					var node_8 = _$_.child(div_8);
-
-					_$_.pop(div_8);
-				}
-
-				_$_.render(() => {
-					_$_.html(node_8, () => content);
-				});
-
+				div_8.innerHTML = content ?? div_8.innerHTML;
 				_$_.append(__anchor, div_8);
 			})
-		},
-		_$_.active_block
-	);
+		});
 
-	_$_.append(__anchor, fragment);
-	_$_.pop_component();
+		_$_.append(__anchor, fragment);
+	});
 }
 
-export function HtmlInChildrenWithSiblings(__anchor, _, __block) {
-	_$_.push_component();
-
-	const content = '<p>Dynamic content</p>';
-	var fragment_1 = root_9();
-	var node_9 = _$_.first_child_frag(fragment_1);
+export function HtmlInChildrenWithSiblings() {
+	return _$_.tsrx_element((__anchor, __block) => {
+		const content = '<p>Dynamic content</p>';
+		var fragment_1 = root_9();
+		var node_4 = _$_.first_child_frag(fragment_1);
 
-	HtmlWrapper(
-		node_9,
-		{
-			children: _$_.tsrx_element(function render_children(__anchor, __block) {
+		_$_.render_component(HtmlWrapper, node_4, {
+			children: _$_.tsrx_element((__anchor, __block) => {
 				var fragment_2 = root_10();
 				var h1_1 = _$_.first_child_frag(fragment_2);
 				var div_9 = _$_.sibling(h1_1);
 
-				{
-					var node_10 = _$_.child(div_9);
-
-					_$_.pop(div_9);
-				}
-
+				div_9.innerHTML = content ?? div_9.innerHTML;
 				_$_.next();
-
-				_$_.render(() => {
-					_$_.html(node_10, () => content);
-				});
-
 				_$_.append(__anchor, fragment_2, true);
 			})
-		},
-		_$_.active_block
-	);
+		});
 
-	_$_.append(__anchor, fragment_1);
-	_$_.pop_component();
+		_$_.append(__anchor, fragment_1);
+	});
 }
 
-export function MultipleHtmlInChildren(__anchor, _, __block) {
-	_$_.push_component();
-
-	const html1 = '<p>First</p>';
-	const html2 = '<p>Second</p>';
-	var fragment_3 = root_11();
-	var node_11 = _$_.first_child_frag(fragment_3);
+export function MultipleHtmlInChildren() {
+	return _$_.tsrx_element((__anchor, __block) => {
+		const html1 = '<p>First</p>';
+		const html2 = '<p>Second</p>';
+		var fragment_3 = root_11();
+		var node_5 = _$_.first_child_frag(fragment_3);
 
-	HtmlWrapper(
-		node_11,
-		{
-			children: _$_.tsrx_element(function render_children(__anchor, __block) {
+		_$_.render_component(HtmlWrapper, node_5, {
+			children: _$_.tsrx_element((__anchor, __block) => {
 				var div_10 = root_12();
 
 				{
-					var node_12 = _$_.child(div_10);
-					var node_13 = _$_.sibling(node_12);
+					var node_6 = _$_.child(div_10);
+					var node_7 = _$_.sibling(node_6);
 
 					_$_.pop(div_10);
 				}
 
 				_$_.render(
 					(__prev) => {
-						_$_.html(node_12, () => html1);
-						_$_.html(node_13, () => html2);
+						_$_.html(node_6, () => html1);
+						_$_.html(node_7, () => html2);
 					},
 					{}
 				);
 
 				_$_.append(__anchor, div_10);
 			})
-		},
-		_$_.active_block
-	);
+		});
 
-	_$_.append(__anchor, fragment_3);
-	_$_.pop_component();
+		_$_.append(__anchor, fragment_3);
+	});
 }
 
-export function HtmlWithComments(__anchor, _, __block) {
-	_$_.push_component();
-
-	const content = '<p>Before comment</p><!-- TODO: Elaborate --><p>After comment</p>';
-	var div_11 = root_13();
-
-	{
-		var node_14 = _$_.child(div_11);
-
-		_$_.pop(div_11);
-	}
+export function HtmlWithComments() {
+	return _$_.tsrx_element((__anchor, __block) => {
+		const content = '<p>Before comment</p><!-- TODO: Elaborate --><p>After comment</p>';
+		var div_11 = root_13();
 
-	_$_.render(() => {
-		_$_.html(node_14, () => content);
+		div_11.innerHTML = content ?? div_11.innerHTML;
+		_$_.append(__anchor, div_11);
 	});
-
-	_$_.append(__anchor, div_11);
-	_$_.pop_component();
 }
 
-export function HtmlWithEmptyComment(__anchor, _, __block) {
-	_$_.push_component();
-
-	const content = '<p>Before</p><!----><p>After</p>';
-	var div_12 = root_14();
-
-	{
-		var node_15 = _$_.child(div_12);
-
-		_$_.pop(div_12);
-	}
+export function HtmlWithEmptyComment() {
+	return _$_.tsrx_element((__anchor, __block) => {
+		const content = '<p>Before</p><!----><p>After</p>';
+		var div_12 = root_14();
 
-	_$_.render(() => {
-		_$_.html(node_15, () => content);
+		div_12.innerHTML = content ?? div_12.innerHTML;
+		_$_.append(__anchor, div_12);
 	});
-
-	_$_.append(__anchor, div_12);
-	_$_.pop_component();
 }
 
-export function HtmlWithCommentsInChildren(__anchor, _, __block) {
-	_$_.push_component();
-
-	const content = '<h2 id="intro">Introduction</h2><p>Some text</p><!-- TODO --><p>More text</p>';
-	var fragment_4 = root_15();
-	var node_16 = _$_.first_child_frag(fragment_4);
+export function HtmlWithCommentsInChildren() {
+	return _$_.tsrx_element((__anchor, __block) => {
+		const content = '<h2 id="intro">Introduction</h2><p>Some text</p><!-- TODO --><p>More text</p>';
+		var fragment_4 = root_15();
+		var node_8 = _$_.first_child_frag(fragment_4);
 
-	HtmlWrapper(
-		node_16,
-		{
-			children: _$_.tsrx_element(function render_children(__anchor, __block) {
+		_$_.render_component(HtmlWrapper, node_8, {
+			children: _$_.tsrx_element((__anchor, __block) => {
 				var div_13 = root_16();
 
-				{
-					var node_17 = _$_.child(div_13);
-
-					_$_.pop(div_13);
-				}
-
-				_$_.render(() => {
-					_$_.html(node_17, () => content);
-				});
-
+				div_13.innerHTML = content ?? div_13.innerHTML;
 				_$_.append(__anchor, div_13);
 			})
-		},
-		_$_.active_block
-	);
+		});
 
-	_$_.append(__anchor, fragment_4);
-	_$_.pop_component();
+		_$_.append(__anchor, fragment_4);
+	});
 }
 
-function DocFooter(__anchor, _, __block) {
-	_$_.push_component();
-
-	var footer_1 = root_17();
+function DocFooter() {
+	return _$_.tsrx_element((__anchor, __block) => {
+		var footer_1 = root_17();
 
-	_$_.append(__anchor, footer_1);
-	_$_.pop_component();
+		_$_.append(__anchor, footer_1);
+	});
 }
 
-export function DocLayout(
-	__anchor,
-	{ children, editPath = '', nextLink = null, toc = [] },
-	__block
-) {
-	_$_.push_component();
-
-	var div_14 = root_18();
-
-	{
-		var div_16 = _$_.child(div_14);
+export function DocLayout({ children, editPath = '', nextLink = null, toc = [] }) {
+	return _$_.tsrx_element((__anchor, __block) => {
+		var div_14 = root_18();
 
 		{
-			var article_1 = _$_.child(div_16);
+			var div_16 = _$_.child(div_14);
 
 			{
-				var div_15 = _$_.child(article_1);
+				var article_1 = _$_.child(div_16);
 
 				{
-					var expression_1 = _$_.child(div_15);
+					var div_15 = _$_.child(article_1);
 
-					_$_.expression(expression_1, () => children);
-					_$_.pop(div_15);
-				}
-			}
+					{
+						var expression_1 = _$_.child(div_15);
 
-			_$_.pop(article_1);
+						_$_.expression(expression_1, () => children);
+						_$_.pop(div_15);
+					}
+				}
 
-			var node_18 = _$_.sibling(article_1);
+				_$_.pop(article_1);
 
-			{
-				var consequent = (__anchor) => {
-					var div_17 = root_19();
+				var node_9 = _$_.sibling(article_1);
 
-					{
-						var a_1 = _$_.child(div_17);
+				{
+					var consequent = (__anchor) => {
+						var div_17 = root_19();
 
-						_$_.set_attribute(a_1, 'href', `https://github.com/edit/${editPath}`);
-					}
+						{
+							var a_1 = _$_.child(div_17);
 
-					_$_.append(__anchor, div_17);
-				};
+							_$_.set_attribute(a_1, 'href', `https://github.com/edit/${editPath}`);
+						}
 
-				_$_.if(node_18, (__render) => {
-					if (editPath) __render(consequent);
-				});
-			}
+						_$_.append(__anchor, div_17);
+					};
 
-			var node_19 = _$_.sibling(node_18);
+					_$_.if(node_9, (__render) => {
+						if (editPath) __render(consequent);
+					});
+				}
 
-			{
-				var consequent_1 = (__anchor) => {
-					var nav_1 = root_20();
+				var node_10 = _$_.sibling(node_9);
 
-					{
-						var a_2 = _$_.child(nav_1);
+				{
+					var consequent_1 = (__anchor) => {
+						var nav_1 = root_20();
 
 						{
-							var expression_2 = _$_.child(a_2);
+							var a_2 = _$_.child(nav_1);
 
-							_$_.expression(expression_2, () => nextLink.text);
-							_$_.pop(a_2);
+							{
+								var expression_2 = _$_.child(a_2);
+
+								_$_.expression(expression_2, () => nextLink.text);
+								_$_.pop(a_2);
+							}
 						}
-					}
 
-					_$_.render(() => {
-						_$_.set_attribute(a_2, 'href', nextLink.href);
-					});
+						_$_.render(() => {
+							_$_.set_attribute(a_2, 'href', nextLink.href);
+						});
 
-					_$_.append(__anchor, nav_1);
-				};
-
-				_$_.if(node_19, (__render) => {
-					if (nextLink) __render(consequent_1);
-				});
-			}
+						_$_.append(__anchor, nav_1);
+					};
 
-			var node_20 = _$_.sibling(node_19);
+					_$_.if(node_10, (__render) => {
+						if (nextLink) __render(consequent_1);
+					});
+				}
 
-			DocFooter(node_20, {}, _$_.active_block);
-			_$_.pop(div_16);
-		}
+				var node_11 = _$_.sibling(node_10);
 
-		var aside_1 = _$_.sibling(div_16);
+				_$_.render_component(DocFooter, node_11, {});
+				_$_.pop(div_16);
+			}
 
-		{
-			var node_21 = _$_.child(aside_1);
+			var aside_1 = _$_.sibling(div_16);
 
 			{
-				var consequent_2 = (__anchor) => {
-					var div_18 = root_21();
+				var node_12 = _$_.child(aside_1);
 
-					{
-						var ul_1 = _$_.child(div_18);
+				{
+					var consequent_2 = (__anchor) => {
+						var div_18 = root_21();
 
 						{
-							_$_.for(
-								ul_1,
-								() => toc,
-								(__anchor, item) => {
-									var li_1 = root_22();
+							var ul_1 = _$_.child(div_18);
 
-									{
-										var a_3 = _$_.child(li_1);
+							{
+								_$_.for(
+									ul_1,
+									() => toc,
+									(__anchor, item) => {
+										var li_1 = root_22();
 
 										{
-											var expression_3 = _$_.child(a_3);
+											var a_3 = _$_.child(li_1);
+
+											{
+												var expression_3 = _$_.child(a_3);
 
-											_$_.expression(expression_3, () => item.text);
-											_$_.pop(a_3);
+												_$_.expression(expression_3, () => item.text);
+												_$_.pop(a_3);
+											}
 										}
-									}
 
-									_$_.render(() => {
-										_$_.set_attribute(a_3, 'href', item.href);
-									});
+										_$_.render(() => {
+											_$_.set_attribute(a_3, 'href', item.href);
+										});
 
-									_$_.append(__anchor, li_1);
-								},
-								4
-							);
+										_$_.append(__anchor, li_1);
+									},
+									4
+								);
 
-							_$_.pop(ul_1);
+								_$_.pop(ul_1);
+							}
 						}
-					}
 
-					_$_.append(__anchor, div_18);
-				};
+						_$_.append(__anchor, div_18);
+					};
 
-				_$_.if(node_21, (__render) => {
-					if (toc.length > 0) __render(consequent_2);
-				});
-			}
+					_$_.if(node_12, (__render) => {
+						if (toc.length > 0) __render(consequent_2);
+					});
+				}
 
-			_$_.pop(aside_1);
+				_$_.pop(aside_1);
+			}
 		}
-	}
 
-	_$_.append(__anchor, div_14);
-	_$_.pop_component();
+		_$_.append(__anchor, div_14);
+	});
 }
 
-export function HtmlWithServerData(__anchor, _, __block) {
-	_$_.push_component();
-
-	const content = '<h1 id="intro" class="doc-h1">Introduction</h1><p>Ripple is a framework.</p>';
-	var fragment_5 = root_23();
-	var node_22 = _$_.first_child_frag(fragment_5);
+export function HtmlWithServerData() {
+	return _$_.tsrx_element((__anchor, __block) => {
+		const content = '<h1 id="intro" class="doc-h1">Introduction</h1><p>Ripple is a framework.</p>';
+		var fragment_5 = root_23();
+		var node_13 = _$_.first_child_frag(fragment_5);
 
-	DocLayout(
-		node_22,
-		{
+		_$_.render_component(DocLayout, node_13, {
 			editPath: "docs/introduction.md",
 			nextLink: { href: '/docs/quick-start', text: 'Quick Start' },
 			toc: [
@@ -586,1161 +466,998 @@ export function HtmlWithServerData(__anchor, _, __block) {
 				{ href: '#features', text: 'Features' }
 			],
 
-			children: _$_.tsrx_element(function render_children(__anchor, __block) {
+			children: _$_.tsrx_element((__anchor, __block) => {
 				var div_19 = root_24();
 
-				{
-					var node_23 = _$_.child(div_19);
-
-					_$_.pop(div_19);
-				}
-
-				_$_.render(() => {
-					_$_.html(node_23, () => content);
-				});
-
+				div_19.innerHTML = content ?? div_19.innerHTML;
 				_$_.append(__anchor, div_19);
 			})
-		},
-		_$_.active_block
-	);
+		});
 
-	_$_.append(__anchor, fragment_5);
-	_$_.pop_component();
+		_$_.append(__anchor, fragment_5);
+	});
 }
 
-export function HtmlWithClientDefaults(__anchor, _, __block) {
-	_$_.push_component();
-
-	const content = '<h1 id="intro" class="doc-h1">Introduction</h1><p>Ripple is a framework.</p>';
-	var fragment_6 = root_25();
-	var node_24 = _$_.first_child_frag(fragment_6);
+export function HtmlWithClientDefaults() {
+	return _$_.tsrx_element((__anchor, __block) => {
+		const content = '<h1 id="intro" class="doc-h1">Introduction</h1><p>Ripple is a framework.</p>';
+		var fragment_6 = root_25();
+		var node_14 = _$_.first_child_frag(fragment_6);
 
-	DocLayout(
-		node_24,
-		{
-			children: _$_.tsrx_element(function render_children(__anchor, __block) {
+		_$_.render_component(DocLayout, node_14, {
+			children: _$_.tsrx_element((__anchor, __block) => {
 				var div_20 = root_26();
 
-				{
-					var node_25 = _$_.child(div_20);
-
-					_$_.pop(div_20);
-				}
-
-				_$_.render(() => {
-					_$_.html(node_25, () => content);
-				});
-
+				div_20.innerHTML = content ?? div_20.innerHTML;
 				_$_.append(__anchor, div_20);
 			})
-		},
-		_$_.active_block
-	);
+		});
 
-	_$_.append(__anchor, fragment_6);
-	_$_.pop_component();
+		_$_.append(__anchor, fragment_6);
+	});
 }
 
-export function HtmlWithUndefinedContent(__anchor, _, __block) {
-	_$_.push_component();
-
-	const content = undefined;
-	var fragment_7 = root_27();
-	var node_26 = _$_.first_child_frag(fragment_7);
+export function HtmlWithUndefinedContent() {
+	return _$_.tsrx_element((__anchor, __block) => {
+		const content = undefined;
+		var fragment_7 = root_27();
+		var node_15 = _$_.first_child_frag(fragment_7);
 
-	DocLayout(
-		node_26,
-		{
-			children: _$_.tsrx_element(function render_children(__anchor, __block) {
+		_$_.render_component(DocLayout, node_15, {
+			children: _$_.tsrx_element((__anchor, __block) => {
 				var div_21 = root_28();
 
-				{
-					var node_27 = _$_.child(div_21);
-
-					_$_.pop(div_21);
-				}
-
-				_$_.render(() => {
-					_$_.html(node_27, () => content);
-				});
-
+				div_21.innerHTML = content ?? div_21.innerHTML;
 				_$_.append(__anchor, div_21);
 			})
-		},
-		_$_.active_block
-	);
+		});
 
-	_$_.append(__anchor, fragment_7);
-	_$_.pop_component();
+		_$_.append(__anchor, fragment_7);
+	});
 }
 
-function DynamicHeading(__anchor, { level, children }, __block) {
-	_$_.push_component();
+function DynamicHeading({ level, children }) {
+	return _$_.tsrx_element((__anchor, __block) => {
+		var fragment_8 = root_29();
+		var node_16 = _$_.first_child_frag(fragment_8);
 
-	var fragment_8 = root_29();
-	var node_28 = _$_.first_child_frag(fragment_8);
-
-	{
-		var switch_case_0 = (__anchor) => {
-			var h1_2 = root_30();
+		{
+			var switch_case_0 = (__anchor) => {
+				var fragment_9 = root_30();
+				var h1_2 = _$_.first_child_frag(fragment_9);
 
-			{
-				var expression_4 = _$_.child(h1_2);
+				{
+					var expression_4 = _$_.child(h1_2);
 
-				_$_.expression(expression_4, () => children);
-				_$_.pop(h1_2);
-			}
+					_$_.expression(expression_4, () => children);
+					_$_.pop(h1_2);
+				}
 
-			_$_.append(__anchor, h1_2);
-		};
+				_$_.append(__anchor, fragment_9);
+			};
 
-		var switch_case_1 = (__anchor) => {
-			var h2_1 = root_31();
+			var switch_case_1 = (__anchor) => {
+				var fragment_10 = root_31();
+				var h2_1 = _$_.first_child_frag(fragment_10);
 
-			{
-				var expression_5 = _$_.child(h2_1);
+				{
+					var expression_5 = _$_.child(h2_1);
 
-				_$_.expression(expression_5, () => children);
-				_$_.pop(h2_1);
-			}
+					_$_.expression(expression_5, () => children);
+					_$_.pop(h2_1);
+				}
 
-			_$_.append(__anchor, h2_1);
-		};
+				_$_.append(__anchor, fragment_10);
+			};
 
-		_$_.switch(node_28, () => {
-			var result = [];
+			_$_.switch(node_16, () => {
+				var result = [];
 
-			switch (level) {
-				case 1:
-					result.push(switch_case_0);
+				switch (level) {
+					case 1:
+						result.push(switch_case_0);
+						return result;
 
-				case 2:
-					result.push(switch_case_1);
-					return result;
-			}
-		});
-	}
+					case 2:
+						result.push(switch_case_1);
+						return result;
+				}
+			});
+		}
 
-	_$_.append(__anchor, fragment_8);
-	_$_.pop_component();
+		_$_.append(__anchor, fragment_8);
+	});
 }
 
-function CodeBlock(__anchor, { code }, __block) {
-	_$_.push_component();
-
-	const highlighted = `<pre class="shiki"><code>${code}</code></pre>`;
-	var div_22 = root_32();
+function CodeBlock({ code }) {
+	return _$_.tsrx_element((__anchor, __block) => {
+		const highlighted = `<pre class="shiki"><code>${code}</code></pre>`;
+		var div_22 = root_32();
 
-	{
-		var div_23 = _$_.child(div_22);
-
-		_$_.pop(div_23);
+		{
+			var div_23 = _$_.child(div_22);
 
-		var div_24 = _$_.sibling(div_23);
+			_$_.pop(div_23);
 
-		{
-			var node_29 = _$_.child(div_24);
+			var div_24 = _$_.sibling(div_23);
 
-			_$_.pop(div_24);
+			div_24.innerHTML = highlighted ?? div_24.innerHTML;
 		}
-	}
 
-	_$_.render(() => {
-		_$_.html(node_29, () => highlighted);
+		_$_.append(__anchor, div_22);
 	});
-
-	_$_.append(__anchor, div_22);
-	_$_.pop_component();
 }
 
-function ContentWrapper(__anchor, { children }, __block) {
-	_$_.push_component();
-
-	var div_25 = root_33();
-
-	{
-		var div_26 = _$_.child(div_25);
+function ContentWrapper({ children }) {
+	return _$_.tsrx_element((__anchor, __block) => {
+		var div_25 = root_33();
 
 		{
-			var expression_6 = _$_.child(div_26);
+			var div_26 = _$_.child(div_25);
+
+			{
+				var expression_6 = _$_.child(div_26);
 
-			_$_.expression(expression_6, () => children);
-			_$_.pop(div_26);
+				_$_.expression(expression_6, () => children);
+				_$_.pop(div_26);
+			}
 		}
-	}
 
-	_$_.append(__anchor, div_25);
-	_$_.pop_component();
+		_$_.append(__anchor, div_25);
+	});
 }
 
-export function HtmlAfterSwitchInChildren(__anchor, _, __block) {
-	_$_.push_component();
+export function HtmlAfterSwitchInChildren() {
+	return _$_.tsrx_element((__anchor, __block) => {
+		var fragment_11 = root_34();
+		var node_17 = _$_.first_child_frag(fragment_11);
 
-	var fragment_9 = root_34();
-	var node_30 = _$_.first_child_frag(fragment_9);
+		_$_.render_component(ContentWrapper, node_17, {
+			children: _$_.tsrx_element((__anchor, __block) => {
+				var fragment_12 = root_35();
+				var node_18 = _$_.first_child_frag(fragment_12);
 
-	ContentWrapper(
-		node_30,
-		{
-			children: _$_.tsrx_element(function render_children(__anchor, __block) {
-				var fragment_10 = root_35();
-				var node_31 = _$_.first_child_frag(fragment_10);
-
-				DynamicHeading(
-					node_31,
-					{
-						level: 1,
-						children: _$_.tsrx_element(function render_children(__anchor, __block) {
-							var expression_7 = _$_.text('Title');
+				_$_.render_component(DynamicHeading, node_18, {
+					level: 1,
+					children: _$_.tsrx_element((__anchor, __block) => {
+						var expression_7 = _$_.text('Title');
 
-							_$_.append(__anchor, expression_7);
-						})
-					},
-					_$_.active_block
-				);
+						_$_.append(__anchor, expression_7);
+					})
+				});
 
-				var p_2 = _$_.sibling(node_31);
+				var p_2 = _$_.sibling(node_18);
 				var p_1 = _$_.sibling(p_2);
-				var node_32 = _$_.sibling(p_1);
+				var node_19 = _$_.sibling(p_1);
 
-				CodeBlock(node_32, { code: "const x = 1;" }, _$_.active_block);
-				_$_.append(__anchor, fragment_10);
+				_$_.render_component(CodeBlock, node_19, { code: "const x = 1;" });
+				_$_.append(__anchor, fragment_12);
 			})
-		},
-		_$_.active_block
-	);
+		});
 
-	_$_.append(__anchor, fragment_9);
-	_$_.pop_component();
+		_$_.append(__anchor, fragment_11);
+	});
 }
 
-function NavItem(__anchor, { href, text: label, active = false }, __block) {
-	_$_.push_component();
-
-	var div_27 = root_36();
+function NavItem({ href, text: label, active = false }) {
+	return _$_.tsrx_element((__anchor, __block) => {
+		var div_27 = root_36();
 
-	_$_.set_class(div_27, `nav-item${active ? ' active' : ''}`, void 0, true);
-
-	{
-		var node_33 = _$_.child(div_27);
+		_$_.set_class(div_27, `nav-item${active ? ' active' : ''}`, void 0, true);
 
 		{
-			var consequent_3 = (__anchor) => {
-				var div_28 = root_37();
+			var node_20 = _$_.child(div_27);
 
-				_$_.append(__anchor, div_28);
-			};
+			{
+				var consequent_3 = (__anchor) => {
+					var div_28 = root_37();
 
-			_$_.if(node_33, (__render) => {
-				if (active) __render(consequent_3);
-			});
-		}
+					_$_.append(__anchor, div_28);
+				};
 
-		var a_4 = _$_.sibling(node_33);
+				_$_.if(node_20, (__render) => {
+					if (active) __render(consequent_3);
+				});
+			}
 
-		_$_.set_attribute(a_4, 'href', href);
+			var a_4 = _$_.sibling(node_20);
 
-		{
-			var span_1 = _$_.child(a_4);
+			_$_.set_attribute(a_4, 'href', href);
 
 			{
-				var expression_8 = _$_.child(span_1);
+				var span_1 = _$_.child(a_4);
+
+				{
+					var expression_8 = _$_.child(span_1, true);
 
-				_$_.expression(expression_8, () => label);
-				_$_.pop(span_1);
+					expression_8.nodeValue = label;
+					_$_.pop(span_1);
+				}
 			}
-		}
 
-		_$_.pop(div_27);
-	}
+			_$_.pop(div_27);
+		}
 
-	_$_.append(__anchor, div_27);
-	_$_.pop_component();
+		_$_.append(__anchor, div_27);
+	});
 }
 
-function SidebarSection(__anchor, { title, children }, __block) {
-	_$_.push_component();
-
-	let lazy = _$_.track(true, __block, '6ac6906f');
-	var section_2 = root_38();
-
-	{
-		var div_29 = _$_.child(section_2);
+function SidebarSection({ title, children }) {
+	return _$_.tsrx_element((__anchor, __block) => {
+		let lazy = _$_.track(true, __block, '6ac6906f');
+		var section_2 = root_38();
 
 		{
-			var h2_2 = _$_.child(div_29);
+			var div_29 = _$_.child(section_2);
 
 			{
-				var expression_9 = _$_.child(h2_2);
-
-				_$_.expression(expression_9, () => title);
-				_$_.pop(h2_2);
-			}
+				var h2_2 = _$_.child(div_29);
 
-			var button_1 = _$_.sibling(h2_2);
+				{
+					var expression_9 = _$_.child(h2_2, true);
 
-			button_1.__click = () => _$_.set(lazy, !lazy.value);
-		}
+					expression_9.nodeValue = title;
+					_$_.pop(h2_2);
+				}
 
-		_$_.pop(div_29);
+				var button_1 = _$_.sibling(h2_2);
 
-		var node_34 = _$_.sibling(div_29);
+				button_1.__click = () => _$_.set(lazy, !lazy.value);
+			}
 
-		{
-			var consequent_4 = (__anchor) => {
-				var div_30 = root_39();
+			_$_.pop(div_29);
 
-				{
-					var expression_10 = _$_.child(div_30);
+			var node_21 = _$_.sibling(div_29);
 
-					_$_.expression(expression_10, () => children);
-					_$_.pop(div_30);
-				}
+			{
+				var consequent_4 = (__anchor) => {
+					var div_30 = root_39();
 
-				_$_.append(__anchor, div_30);
-			};
+					{
+						var expression_10 = _$_.child(div_30);
 
-			_$_.if(node_34, (__render) => {
-				if (lazy.value) __render(consequent_4);
-			});
-		}
+						_$_.expression(expression_10, () => children);
+						_$_.pop(div_30);
+					}
 
-		_$_.pop(section_2);
-	}
+					_$_.append(__anchor, div_30);
+				};
 
-	_$_.append(__anchor, section_2);
-	_$_.pop_component();
-}
+				_$_.if(node_21, (__render) => {
+					if (lazy.value) __render(consequent_4);
+				});
+			}
 
-function SideNav(__anchor, { currentPath }, __block) {
-	_$_.push_component();
+			_$_.pop(section_2);
+		}
 
-	var aside_2 = root_40();
+		_$_.append(__anchor, section_2);
+	});
+}
 
-	{
-		var nav_2 = _$_.child(aside_2);
+function SideNav({ currentPath }) {
+	return _$_.tsrx_element((__anchor, __block) => {
+		var aside_2 = root_40();
 
 		{
-			var div_31 = _$_.child(nav_2);
+			var nav_2 = _$_.child(aside_2);
 
 			{
-				var node_35 = _$_.child(div_31);
+				var div_31 = _$_.child(nav_2);
 
-				SidebarSection(
-					node_35,
-					{
+				{
+					var node_22 = _$_.child(div_31);
+
+					_$_.render_component(SidebarSection, node_22, {
 						title: "Getting Started",
-						children: _$_.tsrx_element(function render_children(__anchor, __block) {
-							var fragment_11 = root_41();
-							var node_36 = _$_.first_child_frag(fragment_11);
+						children: _$_.tsrx_element((__anchor, __block) => {
+							var fragment_13 = root_41();
+							var node_23 = _$_.first_child_frag(fragment_13);
+
+							_$_.render_component(NavItem, node_23, {
+								href: "/intro",
+								text: "Introduction",
+								active: currentPath === '/intro'
+							});
 
-							NavItem(
-								node_36,
-								{
-									href: "/intro",
-									text: "Introduction",
-									active: currentPath === '/intro'
-								},
-								_$_.active_block
-							);
+							var node_24 = _$_.sibling(node_23);
 
-							var node_37 = _$_.sibling(node_36);
+							_$_.render_component(NavItem, node_24, {
+								href: "/start",
+								text: "Quick Start",
+								active: currentPath === '/start'
+							});
 
-							NavItem(
-								node_37,
-								{
-									href: "/start",
-									text: "Quick Start",
-									active: currentPath === '/start'
-								},
-								_$_.active_block
-							);
-
-							_$_.append(__anchor, fragment_11);
+							_$_.append(__anchor, fragment_13);
 						})
-					},
-					_$_.active_block
-				);
+					});
 
-				_$_.pop(div_31);
-			}
+					_$_.pop(div_31);
+				}
 
-			var div_32 = _$_.sibling(div_31);
+				var div_32 = _$_.sibling(div_31);
 
-			{
-				var node_38 = _$_.child(div_32);
+				{
+					var node_25 = _$_.child(div_32);
 
-				SidebarSection(
-					node_38,
-					{
+					_$_.render_component(SidebarSection, node_25, {
 						title: "Guide",
-						children: _$_.tsrx_element(function render_children(__anchor, __block) {
-							var fragment_12 = root_42();
-							var node_39 = _$_.first_child_frag(fragment_12);
+						children: _$_.tsrx_element((__anchor, __block) => {
+							var fragment_14 = root_42();
+							var node_26 = _$_.first_child_frag(fragment_14);
+
+							_$_.render_component(NavItem, node_26, {
+								href: "/guide/app",
+								text: "Application",
+								active: currentPath === '/guide/app'
+							});
 
-							NavItem(
-								node_39,
-								{
-									href: "/guide/app",
-									text: "Application",
-									active: currentPath === '/guide/app'
-								},
-								_$_.active_block
-							);
+							var node_27 = _$_.sibling(node_26);
 
-							var node_40 = _$_.sibling(node_39);
+							_$_.render_component(NavItem, node_27, {
+								href: "/guide/syntax",
+								text: "Syntax",
+								active: currentPath === '/guide/syntax'
+							});
 
-							NavItem(
-								node_40,
-								{
-									href: "/guide/syntax",
-									text: "Syntax",
-									active: currentPath === '/guide/syntax'
-								},
-								_$_.active_block
-							);
-
-							_$_.append(__anchor, fragment_12);
+							_$_.append(__anchor, fragment_14);
 						})
-					},
-					_$_.active_block
-				);
+					});
 
-				_$_.pop(div_32);
+					_$_.pop(div_32);
+				}
 			}
 		}
-	}
 
-	_$_.append(__anchor, aside_2);
-	_$_.pop_component();
+		_$_.append(__anchor, aside_2);
+	});
 }
 
-function PageHeader(__anchor, _, __block) {
-	_$_.push_component();
-
-	var header_1 = root_43();
+function PageHeader() {
+	return _$_.tsrx_element((__anchor, __block) => {
+		var header_1 = root_43();
 
-	_$_.append(__anchor, header_1);
-	_$_.pop_component();
+		_$_.append(__anchor, header_1);
+	});
 }
 
-export function LayoutWithSidebarAndMain(__anchor, _, __block) {
-	_$_.push_component();
+export function LayoutWithSidebarAndMain() {
+	return _$_.tsrx_element((__anchor, __block) => {
+		var div_33 = root_44();
 
-	var div_33 = root_44();
+		{
+			var node_28 = _$_.child(div_33);
 
-	{
-		var node_41 = _$_.child(div_33);
+			_$_.render_component(PageHeader, node_28, {});
 
-		PageHeader(node_41, {}, _$_.active_block);
+			var div_34 = _$_.sibling(node_28);
 
-		var div_34 = _$_.sibling(node_41);
+			{
+				var node_29 = _$_.child(div_34);
 
-		{
-			var node_42 = _$_.child(div_34);
+				_$_.render_component(SideNav, node_29, { currentPath: "/intro" });
 
-			SideNav(node_42, { currentPath: "/intro" }, _$_.active_block);
+				var main_1 = _$_.sibling(node_29);
 
-			var main_1 = _$_.sibling(node_42);
+				{
+					var div_35 = _$_.child(main_1);
 
-			{
-				var div_35 = _$_.child(main_1);
+					_$_.pop(div_35);
 
-				_$_.pop(div_35);
+					var node_30 = _$_.sibling(div_35);
 
-				var node_43 = _$_.sibling(div_35);
+					{
+						var consequent_5 = (__anchor) => {
+							var div_36 = root_45();
 
-				{
-					var consequent_5 = (__anchor) => {
-						var div_36 = root_45();
+							_$_.append(__anchor, div_36);
+						};
 
-						_$_.append(__anchor, div_36);
-					};
+						_$_.if(node_30, (__render) => {
+							if (true) __render(consequent_5);
+						});
+					}
 
-					_$_.if(node_43, (__render) => {
-						if (true) __render(consequent_5);
-					});
-				}
+					var node_31 = _$_.sibling(node_30);
 
-				var node_44 = _$_.sibling(node_43);
+					_$_.render_component(PageHeader, node_31, {});
+					_$_.pop(main_1);
+				}
 
-				PageHeader(node_44, {}, _$_.active_block);
-				_$_.pop(main_1);
+				_$_.pop(div_34);
 			}
 
-			_$_.pop(div_34);
+			_$_.pop(div_33);
 		}
 
-		_$_.pop(div_33);
-	}
-
-	_$_.append(__anchor, div_33);
-	_$_.pop_component();
+		_$_.append(__anchor, div_33);
+	});
 }
 
-function ArticleWrapper(__anchor, { children }, __block) {
-	_$_.push_component();
-
-	var article_2 = root_46();
-
-	{
-		var div_37 = _$_.child(article_2);
+function ArticleWrapper({ children }) {
+	return _$_.tsrx_element((__anchor, __block) => {
+		var article_2 = root_46();
 
 		{
-			var expression_11 = _$_.child(div_37);
+			var div_37 = _$_.child(article_2);
 
-			_$_.expression(expression_11, () => children);
-			_$_.pop(div_37);
+			{
+				var expression_11 = _$_.child(div_37);
+
+				_$_.expression(expression_11, () => children);
+				_$_.pop(div_37);
+			}
 		}
-	}
 
-	_$_.append(__anchor, article_2);
-	_$_.pop_component();
+		_$_.append(__anchor, article_2);
+	});
 }
 
-function SimpleFooter(__anchor, _, __block) {
-	_$_.push_component();
+function SimpleFooter() {
+	return _$_.tsrx_element((__anchor, __block) => {
+		var footer_2 = root_47();
 
-	var footer_2 = root_47();
-
-	_$_.append(__anchor, footer_2);
-	_$_.pop_component();
+		_$_.append(__anchor, footer_2);
+	});
 }
 
-export function ArticleWithChildrenThenSibling(__anchor, _, __block) {
-	_$_.push_component();
-
-	var div_38 = root_48();
-
-	{
-		var node_45 = _$_.child(div_38);
-
-		ArticleWrapper(
-			node_45,
-			{
-				children: _$_.tsrx_element(function render_children(__anchor, __block) {
-					var fragment_13 = root_49();
-
-					_$_.append(__anchor, fragment_13);
-				})
-			},
-			_$_.active_block
-		);
-
-		var node_46 = _$_.sibling(node_45);
+export function ArticleWithChildrenThenSibling() {
+	return _$_.tsrx_element((__anchor, __block) => {
+		var div_38 = root_48();
 
 		{
-			var consequent_6 = (__anchor) => {
-				var div_39 = root_50();
+			var node_32 = _$_.child(div_38);
 
-				_$_.append(__anchor, div_39);
-			};
+			_$_.render_component(ArticleWrapper, node_32, {
+				children: _$_.tsrx_element((__anchor, __block) => {
+					var fragment_15 = root_49();
 
-			_$_.if(node_46, (__render) => {
-				if (true) __render(consequent_6);
+					_$_.append(__anchor, fragment_15);
+				})
 			});
-		}
 
-		var node_47 = _$_.sibling(node_46);
+			var node_33 = _$_.sibling(node_32);
 
-		{
-			var consequent_7 = (__anchor) => {
-				var nav_3 = root_51();
+			{
+				var consequent_6 = (__anchor) => {
+					var div_39 = root_50();
 
-				_$_.append(__anchor, nav_3);
-			};
+					_$_.append(__anchor, div_39);
+				};
 
-			_$_.if(node_47, (__render) => {
-				if (true) __render(consequent_7);
-			});
-		}
+				_$_.if(node_33, (__render) => {
+					if (true) __render(consequent_6);
+				});
+			}
 
-		var node_48 = _$_.sibling(node_47);
+			var node_34 = _$_.sibling(node_33);
 
-		SimpleFooter(node_48, {}, _$_.active_block);
-		_$_.pop(div_38);
-	}
+			{
+				var consequent_7 = (__anchor) => {
+					var nav_3 = root_51();
 
-	_$_.append(__anchor, div_38);
-	_$_.pop_component();
-}
+					_$_.append(__anchor, nav_3);
+				};
 
-export function ArticleWithHtmlChildThenSibling(__anchor, _, __block) {
-	_$_.push_component();
+				_$_.if(node_34, (__render) => {
+					if (true) __render(consequent_7);
+				});
+			}
 
-	const htmlContent = '<pre><code>const x = 1;</code></pre>';
-	var div_40 = root_52();
+			var node_35 = _$_.sibling(node_34);
 
-	{
-		var node_49 = _$_.child(div_40);
+			_$_.render_component(SimpleFooter, node_35, {});
+			_$_.pop(div_38);
+		}
 
-		ArticleWrapper(
-			node_49,
-			{
-				children: _$_.tsrx_element(function render_children(__anchor, __block) {
-					var div_41 = root_53();
+		_$_.append(__anchor, div_38);
+	});
+}
 
-					{
-						var node_50 = _$_.child(div_41);
+export function ArticleWithHtmlChildThenSibling() {
+	return _$_.tsrx_element((__anchor, __block) => {
+		const htmlContent = '<pre><code>const x = 1;</code></pre>';
+		var div_40 = root_52();
 
-						_$_.pop(div_41);
-					}
+		{
+			var node_36 = _$_.child(div_40);
 
-					_$_.render(() => {
-						_$_.html(node_50, () => htmlContent);
-					});
+			_$_.render_component(ArticleWrapper, node_36, {
+				children: _$_.tsrx_element((__anchor, __block) => {
+					var div_41 = root_53();
 
+					div_41.innerHTML = htmlContent ?? div_41.innerHTML;
 					_$_.append(__anchor, div_41);
 				})
-			},
-			_$_.active_block
-		);
+			});
 
-		var node_51 = _$_.sibling(node_49);
+			var node_37 = _$_.sibling(node_36);
 
-		{
-			var consequent_8 = (__anchor) => {
-				var div_42 = root_54();
+			{
+				var consequent_8 = (__anchor) => {
+					var div_42 = root_54();
 
-				_$_.append(__anchor, div_42);
-			};
+					_$_.append(__anchor, div_42);
+				};
 
-			_$_.if(node_51, (__render) => {
-				if (true) __render(consequent_8);
-			});
-		}
+				_$_.if(node_37, (__render) => {
+					if (true) __render(consequent_8);
+				});
+			}
 
-		var node_52 = _$_.sibling(node_51);
+			var node_38 = _$_.sibling(node_37);
 
-		SimpleFooter(node_52, {}, _$_.active_block);
-		_$_.pop(div_40);
-	}
+			_$_.render_component(SimpleFooter, node_38, {});
+			_$_.pop(div_40);
+		}
 
-	_$_.append(__anchor, div_40);
-	_$_.pop_component();
+		_$_.append(__anchor, div_40);
+	});
 }
 
-function InlineArticleLayout(__anchor, { children }, __block) {
-	_$_.push_component();
-
-	var div_43 = root_55();
-
-	{
-		var article_3 = _$_.child(div_43);
+function InlineArticleLayout({ children }) {
+	return _$_.tsrx_element((__anchor, __block) => {
+		var div_43 = root_55();
 
 		{
-			var div_44 = _$_.child(article_3);
+			var article_3 = _$_.child(div_43);
 
 			{
-				var expression_12 = _$_.child(div_44);
+				var div_44 = _$_.child(article_3);
+
+				{
+					var expression_12 = _$_.child(div_44);
 
-				_$_.expression(expression_12, () => children);
-				_$_.pop(div_44);
+					_$_.expression(expression_12, () => children);
+					_$_.pop(div_44);
+				}
 			}
-		}
 
-		_$_.pop(article_3);
+			_$_.pop(article_3);
 
-		var node_53 = _$_.sibling(article_3);
+			var node_39 = _$_.sibling(article_3);
 
-		{
-			var consequent_9 = (__anchor) => {
-				var div_45 = root_56();
+			{
+				var consequent_9 = (__anchor) => {
+					var div_45 = root_56();
 
-				_$_.append(__anchor, div_45);
-			};
+					_$_.append(__anchor, div_45);
+				};
 
-			_$_.if(node_53, (__render) => {
-				if (true) __render(consequent_9);
-			});
-		}
+				_$_.if(node_39, (__render) => {
+					if (true) __render(consequent_9);
+				});
+			}
 
-		var node_54 = _$_.sibling(node_53);
+			var node_40 = _$_.sibling(node_39);
 
-		SimpleFooter(node_54, {}, _$_.active_block);
-		_$_.pop(div_43);
-	}
+			_$_.render_component(SimpleFooter, node_40, {});
+			_$_.pop(div_43);
+		}
 
-	_$_.append(__anchor, div_43);
-	_$_.pop_component();
+		_$_.append(__anchor, div_43);
+	});
 }
 
-export function InlineArticleWithHtmlChild(__anchor, _, __block) {
-	_$_.push_component();
+export function InlineArticleWithHtmlChild() {
+	return _$_.tsrx_element((__anchor, __block) => {
+		const htmlContent = '<pre><code>const x = 1;</code></pre>';
+		var fragment_16 = root_57();
+		var node_41 = _$_.first_child_frag(fragment_16);
 
-	const htmlContent = '<pre><code>const x = 1;</code></pre>';
-	var fragment_14 = root_57();
-	var node_55 = _$_.first_child_frag(fragment_14);
-
-	InlineArticleLayout(
-		node_55,
-		{
-			children: _$_.tsrx_element(function render_children(__anchor, __block) {
+		_$_.render_component(InlineArticleLayout, node_41, {
+			children: _$_.tsrx_element((__anchor, __block) => {
 				var div_46 = root_58();
 
-				{
-					var node_56 = _$_.child(div_46);
-
-					_$_.pop(div_46);
-				}
-
-				_$_.render(() => {
-					_$_.html(node_56, () => htmlContent);
-				});
-
+				div_46.innerHTML = htmlContent ?? div_46.innerHTML;
 				_$_.append(__anchor, div_46);
 			})
-		},
-		_$_.active_block
-	);
+		});
 
-	_$_.append(__anchor, fragment_14);
-	_$_.pop_component();
+		_$_.append(__anchor, fragment_16);
+	});
 }
 
-function HeaderStub(__anchor, _, __block) {
-	_$_.push_component();
-
-	var header_2 = root_59();
+function HeaderStub() {
+	return _$_.tsrx_element((__anchor, __block) => {
+		var header_2 = root_59();
 
-	_$_.append(__anchor, header_2);
-	_$_.pop_component();
+		_$_.append(__anchor, header_2);
+	});
 }
 
-function SidebarStub(__anchor, _, __block) {
-	_$_.push_component();
-
-	var aside_3 = root_60();
+function SidebarStub() {
+	return _$_.tsrx_element((__anchor, __block) => {
+		var aside_3 = root_60();
 
-	_$_.append(__anchor, aside_3);
-	_$_.pop_component();
+		_$_.append(__anchor, aside_3);
+	});
 }
 
-function FooterStub(__anchor, _, __block) {
-	_$_.push_component();
-
-	var footer_3 = root_61();
+function FooterStub() {
+	return _$_.tsrx_element((__anchor, __block) => {
+		var footer_3 = root_61();
 
-	_$_.append(__anchor, footer_3);
-	_$_.pop_component();
+		_$_.append(__anchor, footer_3);
+	});
 }
 
-function DocsLayoutInner(
-	__anchor,
-	{ children, editPath = '', nextLink = null },
-	__block
-) {
-	_$_.push_component();
-
-	var div_47 = root_62();
-
-	{
-		var node_57 = _$_.child(div_47);
-
-		HeaderStub(node_57, {}, _$_.active_block);
-
-		var div_48 = _$_.sibling(node_57);
+function DocsLayoutInner({ children, editPath = '', nextLink = null }) {
+	return _$_.tsrx_element((__anchor, __block) => {
+		var div_47 = root_62();
 
 		{
-			var node_58 = _$_.child(div_48);
+			var node_42 = _$_.child(div_47);
 
-			SidebarStub(node_58, {}, _$_.active_block);
+			_$_.render_component(HeaderStub, node_42, {});
 
-			var main_2 = _$_.sibling(node_58);
+			var div_48 = _$_.sibling(node_42);
 
 			{
-				var div_52 = _$_.child(main_2);
+				var node_43 = _$_.child(div_48);
+
+				_$_.render_component(SidebarStub, node_43, {});
+
+				var main_2 = _$_.sibling(node_43);
 
 				{
-					var div_51 = _$_.child(div_52);
+					var div_52 = _$_.child(main_2);
 
 					{
-						var div_50 = _$_.child(div_51);
+						var div_51 = _$_.child(div_52);
 
 						{
-							var article_4 = _$_.child(div_50);
+							var div_50 = _$_.child(div_51);
 
 							{
-								var div_49 = _$_.child(article_4);
+								var article_4 = _$_.child(div_50);
 
 								{
-									var expression_13 = _$_.child(div_49);
+									var div_49 = _$_.child(article_4);
 
-									_$_.expression(expression_13, () => children);
-									_$_.pop(div_49);
-								}
-							}
+									{
+										var expression_13 = _$_.child(div_49);
 
-							_$_.pop(article_4);
+										_$_.expression(expression_13, () => children);
+										_$_.pop(div_49);
+									}
+								}
 
-							var node_59 = _$_.sibling(article_4);
+								_$_.pop(article_4);
 
-							{
-								var consequent_10 = (__anchor) => {
-									var div_53 = root_63();
+								var node_44 = _$_.sibling(article_4);
 
-									_$_.append(__anchor, div_53);
-								};
+								{
+									var consequent_10 = (__anchor) => {
+										var div_53 = root_63();
 
-								_$_.if(node_59, (__render) => {
-									if (editPath) __render(consequent_10);
-								});
-							}
+										_$_.append(__anchor, div_53);
+									};
 
-							var node_60 = _$_.sibling(node_59);
+									_$_.if(node_44, (__render) => {
+										if (editPath) __render(consequent_10);
+									});
+								}
 
-							{
-								var consequent_11 = (__anchor) => {
-									var nav_4 = root_64();
+								var node_45 = _$_.sibling(node_44);
 
-									{
-										var a_5 = _$_.child(nav_4);
+								{
+									var consequent_11 = (__anchor) => {
+										var nav_4 = root_64();
 
 										{
-											var expression_14 = _$_.child(a_5);
+											var a_5 = _$_.child(nav_4);
 
-											_$_.expression(expression_14, () => nextLink.text);
-											_$_.pop(a_5);
+											{
+												var expression_14 = _$_.child(a_5);
+
+												_$_.expression(expression_14, () => nextLink.text);
+												_$_.pop(a_5);
+											}
 										}
-									}
 
-									_$_.render(() => {
-										_$_.set_attribute(a_5, 'href', nextLink.href);
-									});
+										_$_.render(() => {
+											_$_.set_attribute(a_5, 'href', nextLink.href);
+										});
 
-									_$_.append(__anchor, nav_4);
-								};
+										_$_.append(__anchor, nav_4);
+									};
 
-								_$_.if(node_60, (__render) => {
-									if (nextLink) __render(consequent_11);
-								});
-							}
+									_$_.if(node_45, (__render) => {
+										if (nextLink) __render(consequent_11);
+									});
+								}
 
-							var node_61 = _$_.sibling(node_60);
+								var node_46 = _$_.sibling(node_45);
 
-							FooterStub(node_61, {}, _$_.active_block);
-							_$_.pop(div_50);
+								_$_.render_component(FooterStub, node_46, {});
+								_$_.pop(div_50);
+							}
 						}
 					}
 				}
+
+				_$_.pop(div_48);
 			}
 
-			_$_.pop(div_48);
+			_$_.pop(div_47);
 		}
 
-		_$_.pop(div_47);
-	}
-
-	_$_.append(__anchor, div_47);
-	_$_.pop_component();
+		_$_.append(__anchor, div_47);
+	});
 }
 
-export function DocsLayoutWithData(__anchor, _, __block) {
-	_$_.push_component();
-
-	const htmlContent = '<h1>Title</h1><p>Content</p>';
-	var fragment_15 = root_65();
-	var node_62 = _$_.first_child_frag(fragment_15);
+export function DocsLayoutWithData() {
+	return _$_.tsrx_element((__anchor, __block) => {
+		const htmlContent = '<h1>Title</h1><p>Content</p>';
+		var fragment_17 = root_65();
+		var node_47 = _$_.first_child_frag(fragment_17);
 
-	DocsLayoutInner(
-		node_62,
-		{
+		_$_.render_component(DocsLayoutInner, node_47, {
 			editPath: "docs/styling.md",
 			nextLink: { href: '/next', text: 'Next' },
-			children: _$_.tsrx_element(function render_children(__anchor, __block) {
+			children: _$_.tsrx_element((__anchor, __block) => {
 				var div_54 = root_66();
 
-				{
-					var node_63 = _$_.child(div_54);
-
-					_$_.pop(div_54);
-				}
-
-				_$_.render(() => {
-					_$_.html(node_63, () => htmlContent);
-				});
-
+				div_54.innerHTML = htmlContent ?? div_54.innerHTML;
 				_$_.append(__anchor, div_54);
 			})
-		},
-		_$_.active_block
-	);
+		});
 
-	_$_.append(__anchor, fragment_15);
-	_$_.pop_component();
+		_$_.append(__anchor, fragment_17);
+	});
 }
 
-export function DocsLayoutWithoutData(__anchor, _, __block) {
-	_$_.push_component();
+export function DocsLayoutWithoutData() {
+	return _$_.tsrx_element((__anchor, __block) => {
+		const htmlContent = undefined;
+		var fragment_18 = root_67();
+		var node_48 = _$_.first_child_frag(fragment_18);
 
-	const htmlContent = undefined;
-	var fragment_16 = root_67();
-	var node_64 = _$_.first_child_frag(fragment_16);
-
-	DocsLayoutInner(
-		node_64,
-		{
-			children: _$_.tsrx_element(function render_children(__anchor, __block) {
+		_$_.render_component(DocsLayoutInner, node_48, {
+			children: _$_.tsrx_element((__anchor, __block) => {
 				var div_55 = root_68();
 
-				{
-					var node_65 = _$_.child(div_55);
-
-					_$_.pop(div_55);
-				}
-
-				_$_.render(() => {
-					_$_.html(node_65, () => htmlContent);
-				});
-
+				div_55.innerHTML = htmlContent ?? div_55.innerHTML;
 				_$_.append(__anchor, div_55);
 			})
-		},
-		_$_.active_block
-	);
+		});
 
-	_$_.append(__anchor, fragment_16);
-	_$_.pop_component();
+		_$_.append(__anchor, fragment_18);
+	});
 }
 
 function DocsLayoutExact(
-	__anchor,
 	{
 		children,
 		editPath = '',
 		prevLink = null,
 		nextLink = null,
 		toc = []
-	},
-	__block
+	}
 ) {
-	_$_.push_component();
-
-	var div_56 = root_69();
-
-	{
-		var node_66 = _$_.child(div_56);
-
-		HeaderStub(node_66, {}, _$_.active_block);
-
-		var div_57 = _$_.sibling(node_66);
+	return _$_.tsrx_element((__anchor, __block) => {
+		var div_56 = root_69();
 
 		{
-			var node_67 = _$_.child(div_57);
+			var node_49 = _$_.child(div_56);
 
-			SidebarStub(node_67, {}, _$_.active_block);
+			_$_.render_component(HeaderStub, node_49, {});
 
-			var main_3 = _$_.sibling(node_67);
+			var div_57 = _$_.sibling(node_49);
 
 			{
-				var div_61 = _$_.child(main_3);
+				var node_50 = _$_.child(div_57);
+
+				_$_.render_component(SidebarStub, node_50, {});
+
+				var main_3 = _$_.sibling(node_50);
 
 				{
-					var div_60 = _$_.child(div_61);
+					var div_61 = _$_.child(main_3);
 
 					{
-						var div_59 = _$_.child(div_60);
+						var div_60 = _$_.child(div_61);
 
 						{
-							var article_5 = _$_.child(div_59);
+							var div_59 = _$_.child(div_60);
 
 							{
-								var div_58 = _$_.child(article_5);
+								var article_5 = _$_.child(div_59);
 
 								{
-									var expression_15 = _$_.child(div_58);
+									var div_58 = _$_.child(article_5);
 
-									_$_.expression(expression_15, () => children);
-									_$_.pop(div_58);
-								}
-							}
+									{
+										var expression_15 = _$_.child(div_58);
 
-							_$_.pop(article_5);
+										_$_.expression(expression_15, () => children);
+										_$_.pop(div_58);
+									}
+								}
 
-							var node_68 = _$_.sibling(article_5);
+								_$_.pop(article_5);
 
-							{
-								var consequent_12 = (__anchor) => {
-									var div_62 = root_70();
+								var node_51 = _$_.sibling(article_5);
 
-									{
-										var a_6 = _$_.child(div_62);
+								{
+									var consequent_12 = (__anchor) => {
+										var div_62 = root_70();
 
-										_$_.set_attribute(a_6, 'href', `/edit/${editPath}`);
-									}
+										{
+											var a_6 = _$_.child(div_62);
 
-									_$_.append(__anchor, div_62);
-								};
+											_$_.set_attribute(a_6, 'href', `/edit/${editPath}`);
+										}
 
-								_$_.if(node_68, (__render) => {
-									if (editPath) __render(consequent_12);
-								});
-							}
+										_$_.append(__anchor, div_62);
+									};
 
-							var node_69 = _$_.sibling(node_68);
+									_$_.if(node_51, (__render) => {
+										if (editPath) __render(consequent_12);
+									});
+								}
 
-							{
-								var consequent_15 = (__anchor) => {
-									var nav_5 = root_71();
+								var node_52 = _$_.sibling(node_51);
 
-									{
-										var node_70 = _$_.child(nav_5);
+								{
+									var consequent_15 = (__anchor) => {
+										var nav_5 = root_71();
 
 										{
-											var consequent_13 = (__anchor) => {
-												var a_7 = root_72();
+											var node_53 = _$_.child(nav_5);
 
-												{
-													var span_2 = _$_.child(a_7);
+											{
+												var consequent_13 = (__anchor) => {
+													var a_7 = root_72();
 
 													{
-														var expression_16 = _$_.child(span_2);
+														var span_2 = _$_.child(a_7);
 
-														_$_.expression(expression_16, () => prevLink.text);
-														_$_.pop(span_2);
-													}
-												}
+														{
+															var expression_16 = _$_.child(span_2);
 
-												_$_.render(() => {
-													_$_.set_attribute(a_7, 'href', prevLink.href);
-												});
+															_$_.expression(expression_16, () => prevLink.text);
+															_$_.pop(span_2);
+														}
+													}
 
-												_$_.append(__anchor, a_7);
-											};
+													_$_.render(() => {
+														_$_.set_attribute(a_7, 'href', prevLink.href);
+													});
 
-											var alternate = (__anchor) => {
-												var span_3 = root_73();
+													_$_.append(__anchor, a_7);
+												};
 
-												_$_.append(__anchor, span_3);
-											};
+												var alternate = (__anchor) => {
+													var span_3 = root_73();
 
-											_$_.if(node_70, (__render) => {
-												if (prevLink) __render(consequent_13); else __render(alternate, false);
-											});
-										}
+													_$_.append(__anchor, span_3);
+												};
 
-										var node_71 = _$_.sibling(node_70);
+												_$_.if(node_53, (__render) => {
+													if (prevLink) __render(consequent_13); else __render(alternate, false);
+												});
+											}
 
-										{
-											var consequent_14 = (__anchor) => {
-												var a_8 = root_74();
+											var node_54 = _$_.sibling(node_53);
 
-												{
-													var span_4 = _$_.child(a_8);
+											{
+												var consequent_14 = (__anchor) => {
+													var a_8 = root_74();
 
 													{
-														var expression_17 = _$_.child(span_4);
+														var span_4 = _$_.child(a_8);
 
-														_$_.expression(expression_17, () => nextLink.text);
-														_$_.pop(span_4);
+														{
+															var expression_17 = _$_.child(span_4);
+
+															_$_.expression(expression_17, () => nextLink.text);
+															_$_.pop(span_4);
+														}
 													}
-												}
 
-												_$_.render(() => {
-													_$_.set_attribute(a_8, 'href', nextLink.href);
-												});
+													_$_.render(() => {
+														_$_.set_attribute(a_8, 'href', nextLink.href);
+													});
 
-												_$_.append(__anchor, a_8);
-											};
+													_$_.append(__anchor, a_8);
+												};
 
-											_$_.if(node_71, (__render) => {
-												if (nextLink) __render(consequent_14);
-											});
-										}
+												_$_.if(node_54, (__render) => {
+													if (nextLink) __render(consequent_14);
+												});
+											}
 
-										_$_.pop(nav_5);
-									}
+											_$_.pop(nav_5);
+										}
 
-									_$_.append(__anchor, nav_5);
-								};
+										_$_.append(__anchor, nav_5);
+									};
 
-								_$_.if(node_69, (__render) => {
-									if (prevLink || nextLink) __render(consequent_15);
-								});
-							}
+									_$_.if(node_52, (__render) => {
+										if (prevLink || nextLink) __render(consequent_15);
+									});
+								}
 
-							var node_72 = _$_.sibling(node_69);
+								var node_55 = _$_.sibling(node_52);
 
-							FooterStub(node_72, {}, _$_.active_block);
-							_$_.pop(div_59);
+								_$_.render_component(FooterStub, node_55, {});
+								_$_.pop(div_59);
+							}
 						}
-					}
-
-					_$_.pop(div_60);
 
-					var aside_4 = _$_.sibling(div_60);
+						_$_.pop(div_60);
 
-					{
-						var node_73 = _$_.child(aside_4);
+						var aside_4 = _$_.sibling(div_60);
 
 						{
-							var consequent_16 = (__anchor) => {
-								var div_63 = root_75();
+							var node_56 = _$_.child(aside_4);
 
-								{
-									var nav_6 = _$_.child(div_63);
+							{
+								var consequent_16 = (__anchor) => {
+									var div_63 = root_75();
 
 									{
-										_$_.for(
-											nav_6,
-											() => toc,
-											(__anchor, item) => {
-												var a_9 = root_76();
+										var nav_6 = _$_.child(div_63);
+
+										{
+											_$_.for(
+												nav_6,
+												() => toc,
+												(__anchor, item) => {
+													var a_9 = root_76();
 
-												{
-													var expression_18 = _$_.child(a_9);
+													{
+														var expression_18 = _$_.child(a_9);
 
-													_$_.expression(expression_18, () => item.text);
-													_$_.pop(a_9);
-												}
+														_$_.expression(expression_18, () => item.text);
+														_$_.pop(a_9);
+													}
 
-												_$_.render(() => {
-													_$_.set_attribute(a_9, 'href', item.href);
-												});
+													_$_.render(() => {
+														_$_.set_attribute(a_9, 'href', item.href);
+													});
 
-												_$_.append(__anchor, a_9);
-											},
-											4
-										);
+													_$_.append(__anchor, a_9);
+												},
+												4
+											);
 
-										_$_.pop(nav_6);
+											_$_.pop(nav_6);
+										}
 									}
-								}
 
-								_$_.append(__anchor, div_63);
-							};
+									_$_.append(__anchor, div_63);
+								};
 
-							_$_.if(node_73, (__render) => {
-								if (toc.length > 0) __render(consequent_16);
-							});
-						}
+								_$_.if(node_56, (__render) => {
+									if (toc.length > 0) __render(consequent_16);
+								});
+							}
 
-						_$_.pop(aside_4);
+							_$_.pop(aside_4);
+						}
 					}
 				}
+
+				_$_.pop(div_57);
 			}
 
-			_$_.pop(div_57);
+			_$_.pop(div_56);
 		}
 
-		_$_.pop(div_56);
-	}
-
-	_$_.append(__anchor, div_56);
-	_$_.pop_component();
+		_$_.append(__anchor, div_56);
+	});
 }
 
-export function DocsLayoutExactWithData(__anchor, _, __block) {
-	_$_.push_component();
+export function DocsLayoutExactWithData() {
+	return _$_.tsrx_element((__anchor, __block) => {
+		const htmlContent = '<h1>Styling Guide</h1><p>Content</p>';
+		var fragment_19 = root_77();
+		var node_57 = _$_.first_child_frag(fragment_19);
 
-	const htmlContent = '<h1>Styling Guide</h1><p>Content</p>';
-	var fragment_17 = root_77();
-	var node_74 = _$_.first_child_frag(fragment_17);
-
-	DocsLayoutExact(
-		node_74,
-		{
+		_$_.render_component(DocsLayoutExact, node_57, {
 			editPath: "docs/guide/styling.md",
 			prevLink: { href: '/prev', text: 'Previous' },
 			nextLink: { href: '/next', text: 'Next' },
@@ -1749,233 +1466,172 @@ export function DocsLayoutExactWithData(__anchor, _, __block) {
 				{ href: '#usage', text: 'Usage' }
 			],
 
-			children: _$_.tsrx_element(function render_children(__anchor, __block) {
+			children: _$_.tsrx_element((__anchor, __block) => {
 				var div_64 = root_78();
 
-				{
-					var node_75 = _$_.child(div_64);
-
-					_$_.pop(div_64);
-				}
-
-				_$_.render(() => {
-					_$_.html(node_75, () => htmlContent);
-				});
-
+				div_64.innerHTML = htmlContent ?? div_64.innerHTML;
 				_$_.append(__anchor, div_64);
 			})
-		},
-		_$_.active_block
-	);
+		});
 
-	_$_.append(__anchor, fragment_17);
-	_$_.pop_component();
+		_$_.append(__anchor, fragment_19);
+	});
 }
 
-export function DocsLayoutExactWithoutData(__anchor, _, __block) {
-	_$_.push_component();
-
-	const htmlContent = undefined;
-	const editPath = undefined;
-	const prevLink = undefined;
-	const nextLink = undefined;
-	const toc = undefined;
-	var fragment_18 = root_79();
-	var node_76 = _$_.first_child_frag(fragment_18);
-
-	DocsLayoutExact(
-		node_76,
-		{
+export function DocsLayoutExactWithoutData() {
+	return _$_.tsrx_element((__anchor, __block) => {
+		const htmlContent = undefined;
+		const editPath = undefined;
+		const prevLink = undefined;
+		const nextLink = undefined;
+		const toc = undefined;
+		var fragment_20 = root_79();
+		var node_58 = _$_.first_child_frag(fragment_20);
+
+		_$_.render_component(DocsLayoutExact, node_58, {
 			editPath,
 			prevLink,
 			nextLink,
 			toc,
-			children: _$_.tsrx_element(function render_children(__anchor, __block) {
+			children: _$_.tsrx_element((__anchor, __block) => {
 				var div_65 = root_80();
 
-				{
-					var node_77 = _$_.child(div_65);
-
-					_$_.pop(div_65);
-				}
-
-				_$_.render(() => {
-					_$_.html(node_77, () => htmlContent);
-				});
-
+				div_65.innerHTML = htmlContent ?? div_65.innerHTML;
 				_$_.append(__anchor, div_65);
 			})
-		},
-		_$_.active_block
-	);
+		});
 
-	_$_.append(__anchor, fragment_18);
-	_$_.pop_component();
+		_$_.append(__anchor, fragment_20);
+	});
 }
 
-export function TemplateWithHtmlContent(__anchor, _, __block) {
-	_$_.push_component();
+export function TemplateWithHtmlContent() {
+	return _$_.tsrx_element((__anchor, __block) => {
+		const data = { title: 'Test', value: 42 };
+		var div_66 = root_81();
 
-	const data = { title: 'Test', value: 42 };
-	var div_66 = root_81();
+		{
+			var template_1 = _$_.child(div_66);
+		}
 
-	{
-		var template_1 = _$_.child(div_66);
-	}
+		_$_.render(() => {
+			template_1.innerHTML = _$_.with_scope(__block, () => JSON.stringify(data)) ?? template_1.innerHTML;
+		});
 
-	_$_.render(() => {
-		template_1.innerHTML = _$_.with_scope(__block, () => JSON.stringify(data));
+		_$_.append(__anchor, div_66);
 	});
-
-	_$_.append(__anchor, div_66);
-	_$_.pop_component();
 }
 
-export function TemplateWithHtmlAndSiblings(__anchor, _, __block) {
-	_$_.push_component();
+export function TemplateWithHtmlAndSiblings() {
+	return _$_.tsrx_element((__anchor, __block) => {
+		const data = { name: 'Ripple', version: '1.0' };
+		var div_67 = root_82();
 
-	const data = { name: 'Ripple', version: '1.0' };
-	var div_67 = root_82();
+		{
+			var h1_3 = _$_.child(div_67);
+			var template_2 = _$_.sibling(h1_3);
+		}
 
-	{
-		var h1_3 = _$_.child(div_67);
-		var template_2 = _$_.sibling(h1_3);
-	}
+		_$_.render(() => {
+			template_2.innerHTML = _$_.with_scope(__block, () => JSON.stringify(data)) ?? template_2.innerHTML;
+		});
 
-	_$_.render(() => {
-		template_2.innerHTML = _$_.with_scope(__block, () => JSON.stringify(data));
+		_$_.append(__anchor, div_67);
 	});
-
-	_$_.append(__anchor, div_67);
-	_$_.pop_component();
 }
 
-function LayoutWithTemplate(__anchor, { children, data }, __block) {
-	_$_.push_component();
-
-	var div_68 = root_83();
-
-	{
-		var template_3 = _$_.child(div_68);
-		var main_4 = _$_.sibling(template_3);
+function LayoutWithTemplate({ children, data }) {
+	return _$_.tsrx_element((__anchor, __block) => {
+		var div_68 = root_83();
 
 		{
-			var expression_19 = _$_.child(main_4);
+			var template_3 = _$_.child(div_68);
+			var main_4 = _$_.sibling(template_3);
+
+			{
+				var expression_19 = _$_.child(main_4);
 
-			_$_.expression(expression_19, () => children);
-			_$_.pop(main_4);
+				_$_.expression(expression_19, () => children);
+				_$_.pop(main_4);
+			}
 		}
-	}
 
-	_$_.render(() => {
-		template_3.innerHTML = _$_.with_scope(__block, () => JSON.stringify(data));
-	});
+		_$_.render(() => {
+			template_3.innerHTML = _$_.with_scope(__block, () => JSON.stringify(data)) ?? template_3.innerHTML;
+		});
 
-	_$_.append(__anchor, div_68);
-	_$_.pop_component();
+		_$_.append(__anchor, div_68);
+	});
 }
 
-export function NestedTemplateInLayout(__anchor, _, __block) {
-	_$_.push_component();
-
-	const doc = { title: 'Comparison', html: '<p>Content</p>' };
-	var fragment_19 = root_84();
-	var node_78 = _$_.first_child_frag(fragment_19);
+export function NestedTemplateInLayout() {
+	return _$_.tsrx_element((__anchor, __block) => {
+		const doc = { title: 'Comparison', html: '<p>Content</p>' };
+		var fragment_21 = root_84();
+		var node_59 = _$_.first_child_frag(fragment_21);
 
-	LayoutWithTemplate(
-		node_78,
-		{
+		_$_.render_component(LayoutWithTemplate, node_59, {
 			data: doc,
-			children: _$_.tsrx_element(function render_children(__anchor, __block) {
+			children: _$_.tsrx_element((__anchor, __block) => {
 				var div_69 = root_85();
 
-				{
-					var node_79 = _$_.child(div_69);
-
-					_$_.pop(div_69);
-				}
-
 				_$_.render(() => {
-					_$_.html(node_79, () => doc.html);
+					div_69.innerHTML = doc.html ?? div_69.innerHTML;
 				});
 
 				_$_.append(__anchor, div_69);
 			})
-		},
-		_$_.active_block
-	);
+		});
 
-	_$_.append(__anchor, fragment_19);
-	_$_.pop_component();
+		_$_.append(__anchor, fragment_21);
+	});
 }
 
-export function HtmlCodeBlocksWithSiblingChain(__anchor, _, __block) {
-	_$_.push_component();
-
-	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_3 = root_86();
-
-	{
-		var p_5 = _$_.child(section_3);
-		var h2_3 = _$_.sibling(p_5);
-		var p_4 = _$_.sibling(h2_3);
-		var p_3 = _$_.sibling(p_4);
-		var pre_1 = _$_.sibling(p_3);
+export function HtmlCodeBlocksWithSiblingChain() {
+	return _$_.tsrx_element((__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_3 = root_86();
 
 		{
-			var code_1 = _$_.child(pre_1);
+			var p_5 = _$_.child(section_3);
+			var h2_3 = _$_.sibling(p_5);
+			var p_4 = _$_.sibling(h2_3);
+			var p_3 = _$_.sibling(p_4);
+			var pre_1 = _$_.sibling(p_3);
 
 			{
-				var node_80 = _$_.child(code_1);
+				var code_1 = _$_.child(pre_1);
 
-				_$_.pop(code_1);
+				code_1.innerHTML = html1 ?? code_1.innerHTML;
 			}
-		}
-
-		_$_.pop(pre_1);
 
-		var p_6 = _$_.sibling(pre_1);
-		var pre_2 = _$_.sibling(p_6);
+			_$_.pop(pre_1);
 
-		{
-			var code_2 = _$_.child(pre_2);
+			var p_6 = _$_.sibling(pre_1);
+			var pre_2 = _$_.sibling(p_6);
 
 			{
-				var node_81 = _$_.child(code_2);
+				var code_2 = _$_.child(pre_2);
 
-				_$_.pop(code_2);
+				code_2.innerHTML = html2 ?? code_2.innerHTML;
 			}
-		}
 
-		_$_.pop(pre_2);
+			_$_.pop(pre_2);
 
-		var p_7 = _$_.sibling(pre_2);
-		var pre_3 = _$_.sibling(p_7);
-
-		{
-			var code_3 = _$_.child(pre_3);
+			var p_7 = _$_.sibling(pre_2);
+			var pre_3 = _$_.sibling(p_7);
 
 			{
-				var node_82 = _$_.child(code_3);
+				var code_3 = _$_.child(pre_3);
 
-				_$_.pop(code_3);
+				code_3.innerHTML = html3 ?? code_3.innerHTML;
 			}
 		}
-	}
 
-	_$_.render(
-		(__prev) => {
-			_$_.html(node_80, () => html1);
-			_$_.html(node_81, () => html2);
-			_$_.html(node_82, () => html3);
-		},
-		{}
-	);
-
-	_$_.append(__anchor, section_3);
-	_$_.pop_component();
+		_$_.append(__anchor, section_3);
+	});
 }
 
 _$_.delegate(['click']);