ripple 0.4.3 → 0.4.5

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

@@ -1,7 +1,7 @@
 // @ts-nocheck
 import * as _$_ from 'ripple/internal/client';
 
-var root = _$_.template(`<div>`);
+var root = _$_.template_el('div');
 
 function StaticHtml_render(__anchor, __block) {
 	const html = '<p><strong>Bold</strong> text</p>';
@@ -13,7 +13,7 @@ function StaticHtml_render(__anchor, __block) {
 
 StaticHtml[_$_.$r] = StaticHtml_render;
 
-var root_1 = _$_.template(`<div>`);
+var root_1 = _$_.template_el('div');
 
 function DynamicHtml_render(__anchor, __block) {
 	const content = '<p>Dynamic <span>HTML</span> content</p>';
@@ -25,7 +25,7 @@ function DynamicHtml_render(__anchor, __block) {
 
 DynamicHtml[_$_.$r] = DynamicHtml_render;
 
-var root_2 = _$_.template(`<div>`);
+var root_2 = _$_.template_el('div');
 
 function EmptyHtml_render(__anchor, __block) {
 	const html = '';
@@ -37,7 +37,7 @@ function EmptyHtml_render(__anchor, __block) {
 
 EmptyHtml[_$_.$r] = EmptyHtml_render;
 
-var root_3 = _$_.template(`<section>`);
+var root_3 = _$_.template_el('section');
 
 function ComplexHtml_render(__anchor, __block) {
 	const html = '<div class="nested"><span>Nested <em>content</em></span></div>';
@@ -49,7 +49,7 @@ function ComplexHtml_render(__anchor, __block) {
 
 ComplexHtml[_$_.$r] = ComplexHtml_render;
 
-var root_4 = _$_.template(`<div><!><!>`);
+var root_4 = _$_.template_el('div', null, [null, null]);
 
 function render(__prev) {
 	_$_.html(__prev._a, () => __prev._b);
@@ -74,7 +74,7 @@ function MultipleHtml_render(__anchor, __block) {
 
 MultipleHtml[_$_.$r] = MultipleHtml_render;
 
-var root_5 = _$_.template(`<div><!><button>Increment`);
+var root_5 = _$_.template_el('div', null, [null, ['button', null, 'Increment']]);
 
 function render_1(__prev) {
 	_$_.html(__prev._a, () => "<p>Count: 0</p>");
@@ -95,7 +95,7 @@ function HtmlWithReactivity_render(__anchor, __block) {
 
 HtmlWithReactivity[_$_.$r] = HtmlWithReactivity_render;
 
-var root_6 = _$_.template(`<div class=wrapper><div class=inner><!>`);
+var root_6 = _$_.template_el('div', ['class', 'wrapper'], [['div', ['class', 'inner'], [null]]]);
 
 function HtmlWrapper_render(__anchor, __block, { children }) {
 	var div_5 = root_6();
@@ -116,7 +116,7 @@ function HtmlWrapper_render(__anchor, __block, { children }) {
 
 HtmlWrapper[_$_.$r] = HtmlWrapper_render;
 
-var root_7 = _$_.template(`<div class=vp-doc>`);
+var root_7 = _$_.template_el('div', ['class', 'vp-doc']);
 
 function HtmlInChildren_render(__anchor, __block) {
 	const content = '<p><strong>Bold</strong> text</p>';
@@ -152,7 +152,7 @@ function HtmlInChildrenWithSiblings_render(__anchor, __block) {
 
 HtmlInChildrenWithSiblings[_$_.$r] = HtmlInChildrenWithSiblings_render;
 
-var root_9 = _$_.template(`<div class=doc><!><!>`);
+var root_9 = _$_.template_el('div', ['class', 'doc'], [null, null]);
 
 function render_2(__prev) {
 	_$_.html(__prev._a, () => __prev._b);
@@ -182,7 +182,7 @@ function MultipleHtmlInChildren_render(__anchor, __block) {
 
 MultipleHtmlInChildren[_$_.$r] = MultipleHtmlInChildren_render;
 
-var root_10 = _$_.template(`<div>`);
+var root_10 = _$_.template_el('div');
 
 function HtmlWithComments_render(__anchor, __block) {
 	const content = '<p>Before comment</p><!-- TODO: Elaborate --><p>After comment</p>';
@@ -194,7 +194,7 @@ function HtmlWithComments_render(__anchor, __block) {
 
 HtmlWithComments[_$_.$r] = HtmlWithComments_render;
 
-var root_11 = _$_.template(`<div>`);
+var root_11 = _$_.template_el('div');
 
 function HtmlWithEmptyComment_render(__anchor, __block) {
 	const content = '<p>Before</p><!----><p>After</p>';
@@ -206,7 +206,7 @@ function HtmlWithEmptyComment_render(__anchor, __block) {
 
 HtmlWithEmptyComment[_$_.$r] = HtmlWithEmptyComment_render;
 
-var root_12 = _$_.template(`<div class=vp-doc>`);
+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>';
@@ -223,7 +223,7 @@ function HtmlWithCommentsInChildren_render(__anchor, __block) {
 
 HtmlWithCommentsInChildren[_$_.$r] = HtmlWithCommentsInChildren_render;
 
-var root_13 = _$_.template(`<footer class=doc-footer>Footer content`);
+var root_13 = _$_.template_el('footer', ['class', 'doc-footer'], 'Footer content');
 
 function DocFooter_render(__anchor, __block) {
 	var footer = root_13();
@@ -233,7 +233,7 @@ function DocFooter_render(__anchor, __block) {
 
 DocFooter[_$_.$r] = DocFooter_render;
 
-var root_15 = _$_.template(`<div class=edit-link><a>Edit`);
+var root_15 = _$_.template_el('div', ['class', 'edit-link'], [['a', null, 'Edit']]);
 
 function consequent(__anchor, editPath) {
 	var div_16 = root_15();
@@ -241,7 +241,7 @@ function consequent(__anchor, editPath) {
 	{
 		var a = _$_.hydrating ? _$_.hydrate_child() : div_16.firstChild;
 
-		_$_.set_attribute(a, 'href', `https://github.com/edit/${editPath}`);
+		a.setAttribute('href', `https://github.com/edit/${editPath}`);
 	}
 
 	_$_.append(__anchor, div_16);
@@ -251,7 +251,7 @@ function if_1(editPath) {
 	if (editPath) return consequent;
 }
 
-var root_16 = _$_.template(`<nav class=prev-next><a> `);
+var root_16 = _$_.template_el('nav', ['class', 'prev-next'], [['a', null, ' ']]);
 
 function render_3(__prev) {
 	var __a = __prev._a.href;
@@ -283,7 +283,7 @@ function if_2(nextLink) {
 	if (nextLink) return consequent_1;
 }
 
-var root_18 = _$_.template(`<li><a>`);
+var root_18 = _$_.template_el('li', null, [['a']]);
 
 function render_4(__prev) {
 	var __a = __prev._a.text;
@@ -300,7 +300,7 @@ function render_4(__prev) {
 	}
 }
 
-var root_17 = _$_.template(`<div class=toc><ul>`);
+var root_17 = _$_.template_el('div', ['class', 'toc'], [['ul']]);
 
 function consequent_2(__anchor, toc) {
 	var div_17 = root_17();
@@ -338,7 +338,22 @@ function if_3(toc) {
 	if (toc.length > 0) return consequent_2;
 }
 
-var root_14 = _$_.template(`<div class=layout><div class=content-container><article><div><!></div></article></div><aside><!>`);
+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,
@@ -384,18 +399,19 @@ function DocLayout_render(
 
 		{
 			var node_8 = _$_.hydrating ? _$_.hydrate_child() : aside.firstChild;
+			var ifs = _$_.if_static(node_8, if_3, 0, toc);
 
-			_$_.if(node_8, if_3, false, 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(`<div class=vp-doc>`);
+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>';
@@ -419,7 +435,7 @@ function HtmlWithServerData_render(__anchor, __block) {
 
 HtmlWithServerData[_$_.$r] = HtmlWithServerData_render;
 
-var root_20 = _$_.template(`<div class=vp-doc>`);
+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>';
@@ -436,7 +452,7 @@ function HtmlWithClientDefaults_render(__anchor, __block) {
 
 HtmlWithClientDefaults[_$_.$r] = HtmlWithClientDefaults_render;
 
-var root_21 = _$_.template(`<div class=vp-doc>`);
+var root_21 = _$_.template_el('div', ['class', 'vp-doc']);
 
 function HtmlWithUndefinedContent_render(__anchor, __block) {
 	const content = undefined;
@@ -453,8 +469,8 @@ function HtmlWithUndefinedContent_render(__anchor, __block) {
 
 HtmlWithUndefinedContent[_$_.$r] = HtmlWithUndefinedContent_render;
 
-var root_22 = _$_.template(`<h1 class=heading><!>`);
-var root_23 = _$_.template(`<h2 class=heading><!>`);
+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();
@@ -498,7 +514,14 @@ function DynamicHeading_render(__anchor, __block, { level, children }) {
 
 DynamicHeading[_$_.$r] = DynamicHeading_render;
 
-var root_24 = _$_.template(`<div class=code-block><div class=header><button>Copy</button><span class=lang>js</span></div><div class=content>`);
+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>`;
@@ -516,7 +539,7 @@ function CodeBlock_render(__anchor, __block, { code }) {
 
 CodeBlock[_$_.$r] = CodeBlock_render;
 
-var root_25 = _$_.template(`<div class=wrapper><div class=inner><!>`);
+var root_25 = _$_.template_el('div', ['class', 'wrapper'], [['div', ['class', 'inner'], [null]]]);
 
 function ContentWrapper_render(__anchor, __block, { children }) {
 	var div_24 = root_25();
@@ -567,8 +590,8 @@ function HtmlAfterSwitchInChildren_render(__anchor, __block) {
 
 HtmlAfterSwitchInChildren[_$_.$r] = HtmlAfterSwitchInChildren_render;
 
-var root_27 = _$_.template(`<h1 class=heading><!>`);
-var root_28 = _$_.template(`<h2 class=heading><!>`);
+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();
@@ -636,7 +659,7 @@ function HtmlAfterIfInChildren_render(__anchor, __block) {
 
 HtmlAfterIfInChildren[_$_.$r] = HtmlAfterIfInChildren_render;
 
-var root_30 = _$_.template(`<span class=for-item>`);
+var root_30 = _$_.template_el('span', ['class', 'for-item']);
 
 function ForList_render(__anchor, __block, { items }) {
 	_$_.for(
@@ -679,8 +702,8 @@ function HtmlAfterForInChildren_render(__anchor, __block) {
 
 HtmlAfterForInChildren[_$_.$r] = HtmlAfterForInChildren_render;
 
-var root_32 = _$_.template(`<div class=try-box>`);
-var root_33 = _$_.template(`<span>error`);
+var root_32 = _$_.template_el('div', ['class', 'try-box']);
+var root_33 = _$_.template_el('span', null, 'error');
 
 function TryBox_render(__anchor, __block, { value }) {
 	_$_.try(
@@ -728,7 +751,7 @@ function HtmlAfterTryInChildren_render(__anchor, __block) {
 
 HtmlAfterTryInChildren[_$_.$r] = HtmlAfterTryInChildren_render;
 
-var root_35 = _$_.template(`<span class=boxed><!>`);
+var root_35 = _$_.template_el('span', ['class', 'boxed'], [null]);
 
 function Boxed_render(__anchor, __block, { children }) {
 	var span_2 = root_35();
@@ -783,7 +806,7 @@ function HtmlAfterComponentInChildren_render(__anchor, __block) {
 
 HtmlAfterComponentInChildren[_$_.$r] = HtmlAfterComponentInChildren_render;
 
-var root_39 = _$_.template(`<div class=indicator>`);
+var root_39 = _$_.template_el('div', ['class', 'indicator']);
 
 function consequent_4(__anchor, active) {
 	var div_28 = root_39();
@@ -795,7 +818,7 @@ function if_5(active) {
 	if (active) return consequent_4;
 }
 
-var root_38 = _$_.template(`<div><a><span>`);
+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();
@@ -827,7 +850,7 @@ function NavItem_render(__anchor, __block, { href, text: label, active = false }
 
 NavItem[_$_.$r] = NavItem_render;
 
-var root_41 = _$_.template(`<div class=section-items><!>`);
+var root_41 = _$_.template_el('div', ['class', 'section-items'], [null]);
 
 function consequent_5(__anchor, { a: expanded, b: children }) {
 	var div_30 = root_41();
@@ -846,7 +869,21 @@ function if_6({ a: expanded, b: children }) {
 	if (expanded.value) return consequent_5;
 }
 
-var root_40 = _$_.template(`<section class=sidebar-section><div class=section-header><h2></h2><button>Toggle`);
+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');
@@ -873,10 +910,12 @@ function SidebarSection_render(__anchor, __block, { title, children }) {
 			? _$_.hydrate_sibling()
 			: _$_.append_into(section_1, true);
 
-		_$_.if(node_20, if_6, false, { a: expanded, b: children });
+		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);
 }
 
@@ -884,7 +923,14 @@ SidebarSection[_$_.$r] = SidebarSection_render;
 
 var root_43 = _$_.template(`<!><!>`, 1, 2);
 var root_44 = _$_.template(`<!><!>`, 1, 2);
-var root_42 = _$_.template(`<aside class=sidebar><nav><div class=group></div><div class=group>`);
+
+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();
@@ -964,7 +1010,7 @@ function SideNav_render(__anchor, __block, { currentPath }) {
 
 SideNav[_$_.$r] = SideNav_render;
 
-var root_45 = _$_.template(`<header class=page-header><div class=logo>MyApp`);
+var root_45 = _$_.template_el('header', ['class', 'page-header'], [['div', ['class', 'logo'], 'MyApp']]);
 
 function PageHeader_render(__anchor, __block) {
 	var header = root_45();
@@ -974,7 +1020,7 @@ function PageHeader_render(__anchor, __block) {
 
 PageHeader[_$_.$r] = PageHeader_render;
 
-var root_47 = _$_.template(`<div class=edit-link><a href=/edit>Edit`);
+var root_47 = _$_.template_el('div', ['class', 'edit-link'], [['a', ['href', '/edit'], 'Edit']]);
 
 function consequent_6(__anchor) {
 	var div_36 = root_47();
@@ -1028,7 +1074,7 @@ function LayoutWithSidebarAndMain_render(__anchor, __block) {
 
 LayoutWithSidebarAndMain[_$_.$r] = LayoutWithSidebarAndMain_render;
 
-var root_48 = _$_.template(`<article class=doc-content><div><!>`);
+var root_48 = _$_.template_el('article', ['class', 'doc-content'], [['div', null, [null]]]);
 
 function ArticleWrapper_render(__anchor, __block, { children }) {
 	var article_1 = root_48();
@@ -1049,7 +1095,7 @@ function ArticleWrapper_render(__anchor, __block, { children }) {
 
 ArticleWrapper[_$_.$r] = ArticleWrapper_render;
 
-var root_49 = _$_.template(`<footer class=doc-footer>Footer`);
+var root_49 = _$_.template_el('footer', ['class', 'doc-footer'], 'Footer');
 
 function SimpleFooter_render(__anchor, __block) {
 	var footer_1 = root_49();
@@ -1060,7 +1106,7 @@ function SimpleFooter_render(__anchor, __block) {
 SimpleFooter[_$_.$r] = SimpleFooter_render;
 
 var root_51 = _$_.template(`<h1>Title</h1><p>Content goes here.`, 1, 2);
-var root_52 = _$_.template(`<div class=edit-link><a href=/edit>Edit`);
+var root_52 = _$_.template_el('div', ['class', 'edit-link'], [['a', ['href', '/edit'], 'Edit']]);
 
 function consequent_7(__anchor) {
 	var div_39 = root_52();
@@ -1072,7 +1118,7 @@ function if_8() {
 	if (true) return consequent_7;
 }
 
-var root_53 = _$_.template(`<nav class=prev-next><a href=/prev>Previous`);
+var root_53 = _$_.template_el('nav', ['class', 'prev-next'], [['a', ['href', '/prev'], 'Previous']]);
 
 function consequent_8(__anchor) {
 	var nav_2 = root_53();
@@ -1084,7 +1130,7 @@ function if_9() {
 	if (true) return consequent_8;
 }
 
-var root_50 = _$_.template(`<div class=content-container><!><!><!><!>`);
+var root_50 = _$_.template_el('div', ['class', 'content-container'], [null, null, null, null]);
 
 function ArticleWithChildrenThenSibling_render(__anchor, __block) {
 	var div_38 = root_50();
@@ -1120,8 +1166,8 @@ function ArticleWithChildrenThenSibling_render(__anchor, __block) {
 
 ArticleWithChildrenThenSibling[_$_.$r] = ArticleWithChildrenThenSibling_render;
 
-var root_55 = _$_.template(`<div class=doc-content>`);
-var root_56 = _$_.template(`<div class=edit-link><a href=/edit>Edit`);
+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();
@@ -1133,7 +1179,7 @@ function if_10() {
 	if (true) return consequent_9;
 }
 
-var root_54 = _$_.template(`<div class=content-container><!><!><!>`);
+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>';
@@ -1166,7 +1212,7 @@ function ArticleWithHtmlChildThenSibling_render(__anchor, __block) {
 
 ArticleWithHtmlChildThenSibling[_$_.$r] = ArticleWithHtmlChildThenSibling_render;
 
-var root_58 = _$_.template(`<div class=edit-link><a href=/edit>Edit`);
+var root_58 = _$_.template_el('div', ['class', 'edit-link'], [['a', ['href', '/edit'], 'Edit']]);
 
 function consequent_10(__anchor) {
 	var div_45 = root_58();
@@ -1178,7 +1224,9 @@ function if_11() {
 	if (true) return consequent_10;
 }
 
-var root_57 = _$_.template(`<div class=content-container><article class=doc-content><div><!>`);
+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();
@@ -1214,7 +1262,7 @@ function InlineArticleLayout_render(__anchor, __block, { children }) {
 
 InlineArticleLayout[_$_.$r] = InlineArticleLayout_render;
 
-var root_59 = _$_.template(`<div class=doc-content>`);
+var root_59 = _$_.template_el('div', ['class', 'doc-content']);
 
 function InlineArticleWithHtmlChild_render(__anchor, __block) {
 	const htmlContent = '<pre><code>const x = 1;</code></pre>';
@@ -1231,7 +1279,7 @@ function InlineArticleWithHtmlChild_render(__anchor, __block) {
 
 InlineArticleWithHtmlChild[_$_.$r] = InlineArticleWithHtmlChild_render;
 
-var root_60 = _$_.template(`<header class=header>Header`);
+var root_60 = _$_.template_el('header', ['class', 'header'], 'Header');
 
 function HeaderStub_render(__anchor, __block) {
 	var header_1 = root_60();
@@ -1241,7 +1289,7 @@ function HeaderStub_render(__anchor, __block) {
 
 HeaderStub[_$_.$r] = HeaderStub_render;
 
-var root_61 = _$_.template(`<aside class=sidebar>Sidebar`);
+var root_61 = _$_.template_el('aside', ['class', 'sidebar'], 'Sidebar');
 
 function SidebarStub_render(__anchor, __block) {
 	var aside_2 = root_61();
@@ -1251,7 +1299,7 @@ function SidebarStub_render(__anchor, __block) {
 
 SidebarStub[_$_.$r] = SidebarStub_render;
 
-var root_62 = _$_.template(`<footer class=footer>Footer`);
+var root_62 = _$_.template_el('footer', ['class', 'footer'], 'Footer');
 
 function FooterStub_render(__anchor, __block) {
 	var footer_2 = root_62();
@@ -1261,7 +1309,7 @@ function FooterStub_render(__anchor, __block) {
 
 FooterStub[_$_.$r] = FooterStub_render;
 
-var root_64 = _$_.template(`<div class=edit-link><a href=/edit>Edit on GitHub`);
+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();
@@ -1273,9 +1321,9 @@ function if_12(editPath) {
 	if (editPath) return consequent_11;
 }
 
-var root_65 = _$_.template(`<nav class=prev-next><a> `);
+var root_65 = _$_.template_el('nav', ['class', 'prev-next'], [['a', null, ' ']]);
 
-function render_5(__prev) {
+function render_7(__prev) {
 	var __a = __prev._a.href;
 
 	if (__prev.a !== __a) {
@@ -1297,7 +1345,7 @@ function consequent_12(__anchor, nextLink) {
 		}
 	}
 
-	_$_.render(render_5, { a: void 0, _a: nextLink, _b: a_4 });
+	_$_.render(render_7, { a: void 0, _a: nextLink, _b: a_4 });
 	_$_.append(__anchor, nav_3);
 }
 
@@ -1381,7 +1429,7 @@ function DocsLayoutInner_render(
 
 DocsLayoutInner[_$_.$r] = DocsLayoutInner_render;
 
-var root_66 = _$_.template(`<div class=doc-content>`);
+var root_66 = _$_.template_el('div', ['class', 'doc-content']);
 
 function DocsLayoutWithData_render(__anchor, __block) {
 	const htmlContent = '<h1>Title</h1><p>Content</p>';
@@ -1400,7 +1448,7 @@ function DocsLayoutWithData_render(__anchor, __block) {
 
 DocsLayoutWithData[_$_.$r] = DocsLayoutWithData_render;
 
-var root_67 = _$_.template(`<div class=doc-content>`);
+var root_67 = _$_.template_el('div', ['class', 'doc-content']);
 
 function DocsLayoutWithoutData_render(__anchor, __block) {
 	const htmlContent = undefined;
@@ -1417,7 +1465,7 @@ function DocsLayoutWithoutData_render(__anchor, __block) {
 
 DocsLayoutWithoutData[_$_.$r] = DocsLayoutWithoutData_render;
 
-var root_69 = _$_.template(`<div class=edit-link><a>Edit on GitHub`);
+var root_69 = _$_.template_el('div', ['class', 'edit-link'], [['a', null, 'Edit on GitHub']]);
 
 function consequent_13(__anchor, editPath) {
 	var div_62 = root_69();
@@ -1425,7 +1473,7 @@ function consequent_13(__anchor, editPath) {
 	{
 		var a_5 = _$_.hydrating ? _$_.hydrate_child() : div_62.firstChild;
 
-		_$_.set_attribute(a_5, 'href', `/edit/${editPath}`);
+		a_5.setAttribute('href', `/edit/${editPath}`);
 	}
 
 	_$_.append(__anchor, div_62);
@@ -1435,9 +1483,9 @@ function if_14(editPath) {
 	if (editPath) return consequent_13;
 }
 
-var root_71 = _$_.template(`<a class="pager prev"><span class=title> `);
+var root_71 = _$_.template_el('a', ['class', 'pager prev'], [['span', ['class', 'title'], ' ']]);
 
-function render_6(__prev) {
+function render_8(__prev) {
 	var __a = __prev._a.href;
 
 	if (__prev.a !== __a) {
@@ -1445,7 +1493,7 @@ function render_6(__prev) {
 	}
 }
 
-var root_72 = _$_.template(`<span>`);
+var root_72 = _$_.template_el('span');
 
 function consequent_14(__anchor, prevLink) {
 	var a_6 = root_71();
@@ -1461,7 +1509,7 @@ function consequent_14(__anchor, prevLink) {
 		}
 	}
 
-	_$_.render(render_6, { a: void 0, _a: prevLink, _b: a_6 });
+	_$_.render(render_8, { a: void 0, _a: prevLink, _b: a_6 });
 	_$_.append(__anchor, a_6);
 }
 
@@ -1475,9 +1523,9 @@ function if_15(prevLink) {
 	if (prevLink) return consequent_14; else return alternate_1;
 }
 
-var root_73 = _$_.template(`<a class="pager next"><span class=title> `);
+var root_73 = _$_.template_el('a', ['class', 'pager next'], [['span', ['class', 'title'], ' ']]);
 
-function render_7(__prev) {
+function render_9(__prev) {
 	var __a = __prev._a.href;
 
 	if (__prev.a !== __a) {
@@ -1499,7 +1547,7 @@ function consequent_15(__anchor, nextLink) {
 		}
 	}
 
-	_$_.render(render_7, { a: void 0, _a: nextLink, _b: a_7 });
+	_$_.render(render_9, { a: void 0, _a: nextLink, _b: a_7 });
 	_$_.append(__anchor, a_7);
 }
 
@@ -1507,7 +1555,7 @@ function if_16(nextLink) {
 	if (nextLink) return consequent_15;
 }
 
-var root_70 = _$_.template(`<nav class=prev-next><!><!>`);
+var root_70 = _$_.template_el('nav', ['class', 'prev-next'], [null, null]);
 
 function consequent_16(__anchor, { a: prevLink, b: nextLink }) {
 	var nav_4 = root_70();
@@ -1530,9 +1578,9 @@ function if_17({ a: prevLink, b: nextLink }) {
 	if (prevLink || nextLink) return consequent_16;
 }
 
-var root_75 = _$_.template(`<a>`);
+var root_75 = _$_.template_el('a');
 
-function render_8(__prev) {
+function render_10(__prev) {
 	var __a = __prev._a.text;
 
 	if (__prev.a !== __a) {
@@ -1547,7 +1595,7 @@ function render_8(__prev) {
 	}
 }
 
-var root_74 = _$_.template(`<div class=aside-content><nav class=outline>`);
+var root_74 = _$_.template_el('div', ['class', 'aside-content'], [['nav', ['class', 'outline']]]);
 
 function consequent_17(__anchor, toc) {
 	var div_63 = root_74();
@@ -1567,7 +1615,7 @@ function consequent_17(__anchor, toc) {
 				},
 				4,
 				void 0,
-				render_8
+				render_10
 			);
 
 			_$_.hydrating && _$_.pop(nav_5);
@@ -1583,6 +1631,14 @@ function if_18(toc) {
 
 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,
@@ -1656,8 +1712,8 @@ function DocsLayoutExact_render(
 
 					{
 						var node_50 = _$_.hydrating ? _$_.hydrate_child() : aside_3.firstChild;
+						var ifs_2 = _$_.if_static(node_50, if_18, 0, toc);
 
-						_$_.if(node_50, if_18, false, toc);
 						_$_.hydrating && _$_.pop(aside_3);
 					}
 				}
@@ -1669,12 +1725,13 @@ function DocsLayoutExact_render(
 		_$_.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(`<div class=doc-content>`);
+var root_76 = _$_.template_el('div', ['class', 'doc-content']);
 
 function DocsLayoutExactWithData_render(__anchor, __block) {
 	const htmlContent = '<h1>Styling Guide</h1><p>Content</p>';
@@ -1699,7 +1756,7 @@ function DocsLayoutExactWithData_render(__anchor, __block) {
 
 DocsLayoutExactWithData[_$_.$r] = DocsLayoutExactWithData_render;
 
-var root_77 = _$_.template(`<div class=doc-content>`);
+var root_77 = _$_.template_el('div', ['class', 'doc-content']);
 
 function DocsLayoutExactWithoutData_render(__anchor, __block) {
 	const htmlContent = undefined;
@@ -1726,7 +1783,7 @@ DocsLayoutExactWithoutData[_$_.$r] = DocsLayoutExactWithoutData_render;
 
 var root_78 = _$_.template(`<div><template id=t1></template><p class=content>Main content`);
 
-function render_9(__prev) {
+function render_12(__prev) {
 	var __a = _$_.with_scope(__prev._a, () => JSON.stringify(__prev._b));
 
 	if (__prev.a !== __a) {
@@ -1742,7 +1799,7 @@ function TemplateWithHtmlContent_render(__anchor, __block) {
 		var template = _$_.hydrating ? _$_.hydrate_child() : div_66.firstChild;
 	}
 
-	_$_.render(render_9, { a: template.innerHTML, _a: __block, _b: data, _c: template });
+	_$_.render(render_12, { a: template.innerHTML, _a: __block, _b: data, _c: template });
 	_$_.append(__anchor, div_66);
 }
 
@@ -1750,7 +1807,7 @@ 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_10(__prev) {
+function render_13(__prev) {
 	var __a = _$_.with_scope(__prev._a, () => JSON.stringify(__prev._b));
 
 	if (__prev.a !== __a) {
@@ -1767,7 +1824,7 @@ function TemplateWithHtmlAndSiblings_render(__anchor, __block) {
 		var template_1 = _$_.hydrating ? _$_.hydrate_sibling() : h1_3.nextSibling;
 	}
 
-	_$_.render(render_10, {
+	_$_.render(render_13, {
 		a: template_1.innerHTML,
 		_a: __block,
 		_b: data,
@@ -1781,7 +1838,7 @@ TemplateWithHtmlAndSiblings[_$_.$r] = TemplateWithHtmlAndSiblings_render;
 
 var root_80 = _$_.template(`<div class=layout><template id=page-data></template><main><!>`);
 
-function render_11(__prev) {
+function render_14(__prev) {
 	var __a = _$_.with_scope(__prev._a, () => JSON.stringify(__prev._b));
 
 	if (__prev.a !== __a) {
@@ -1804,7 +1861,7 @@ function LayoutWithTemplate_render(__anchor, __block, { children, data }) {
 		}
 	}
 
-	_$_.render(render_11, {
+	_$_.render(render_14, {
 		a: template_2.innerHTML,
 		_a: __block,
 		_b: data,
@@ -1816,9 +1873,9 @@ function LayoutWithTemplate_render(__anchor, __block, { children, data }) {
 
 LayoutWithTemplate[_$_.$r] = LayoutWithTemplate_render;
 
-var root_81 = _$_.template(`<div class=doc-content>`);
+var root_81 = _$_.template_el('div', ['class', 'doc-content']);
 
-function render_12(__prev) {
+function render_15(__prev) {
 	var __a = __prev._a.html;
 
 	if (__prev.a !== __a) {
@@ -1834,7 +1891,7 @@ function NestedTemplateInLayout_render(__anchor, __block) {
 		children: _$_.tsrx_element((__anchor, __block) => {
 			var div_69 = root_81();
 
-			_$_.render(render_12, { a: div_69.innerHTML, _a: doc, _b: div_69 });
+			_$_.render(render_15, { a: div_69.innerHTML, _a: doc, _b: div_69 });
 			_$_.append(__anchor, div_69);
 		})
 	});