ripple 0.4.3 → 0.4.4

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

@@ -1,7 +1,7 @@
 // @ts-nocheck
 import * as _$_ from 'ripple/internal/client';
 
-var root_1 = _$_.template(`<div>Content`);
+var root_1 = _$_.template_el('div', null, 'Content');
 var root = _$_.template(`<!>`, 1, 1);
 
 function StaticTitle_render(__anchor, __block) {
@@ -60,7 +60,7 @@ function ReactiveTitle_render(__anchor, __block) {
 ReactiveTitle[_$_.$r] = ReactiveTitle_render;
 
 var root_6 = _$_.template(`<meta name=description content="Page description"><link rel=stylesheet href=/styles.css>`, 1, 2);
-var root_5 = _$_.template(`<div>Page content`);
+var root_5 = _$_.template_el('div', null, 'Page content');
 var root_4 = _$_.template(`<!>`, 1, 1);
 
 function MultipleHeadElements_render(__anchor, __block) {
@@ -86,8 +86,8 @@ function MultipleHeadElements_render(__anchor, __block) {
 
 MultipleHeadElements[_$_.$r] = MultipleHeadElements_render;
 
-var root_9 = _$_.template(`<meta name=description>`);
-var root_8 = _$_.template(`<div> `);
+var root_9 = _$_.template_el('meta', ['name', 'description']);
+var root_8 = _$_.template_el('div', null, ' ');
 var root_7 = _$_.template(`<!>`, 1, 1);
 
 function ReactiveMetaTags_render(__anchor, __block) {
@@ -121,7 +121,7 @@ function ReactiveMetaTags_render(__anchor, __block) {
 
 ReactiveMetaTags[_$_.$r] = ReactiveMetaTags_render;
 
-var root_11 = _$_.template(`<div> `);
+var root_11 = _$_.template_el('div', null, ' ');
 var root_10 = _$_.template(`<!>`, 1, 1);
 
 function TitleWithTemplate_render(__anchor, __block) {
@@ -153,7 +153,7 @@ function TitleWithTemplate_render(__anchor, __block) {
 
 TitleWithTemplate[_$_.$r] = TitleWithTemplate_render;
 
-var root_13 = _$_.template(`<div>Empty title test`);
+var root_13 = _$_.template_el('div', null, 'Empty title test');
 var root_12 = _$_.template(`<!>`, 1, 1);
 
 function EmptyTitle_render(__anchor, __block) {
@@ -175,7 +175,7 @@ function EmptyTitle_render(__anchor, __block) {
 
 EmptyTitle[_$_.$r] = EmptyTitle_render;
 
-var root_15 = _$_.template(`<div> `);
+var root_15 = _$_.template_el('div', null, ' ');
 var root_14 = _$_.template(`<!>`, 1, 1);
 
 function ConditionalTitle_render(__anchor, __block) {
@@ -249,8 +249,8 @@ function ComputedTitle_render(__anchor, __block) {
 
 ComputedTitle[_$_.$r] = ComputedTitle_render;
 
-var root_20 = _$_.template(`<meta name=author content="Test Author">`);
-var root_19 = _$_.template(`<div>Content`);
+var root_20 = _$_.template_el('meta', ['name', 'author', 'content', 'Test Author']);
+var root_19 = _$_.template_el('div', null, 'Content');
 var root_18 = _$_.template(`<!>`, 1, 1);
 
 function MultipleHeadBlocks_render(__anchor, __block) {
@@ -278,7 +278,7 @@ function MultipleHeadBlocks_render(__anchor, __block) {
 
 MultipleHeadBlocks[_$_.$r] = MultipleHeadBlocks_render;
 
-var root_22 = _$_.template(`<div>Styled content`);
+var root_22 = _$_.template_el('div', null, 'Styled content');
 var root_21 = _$_.template(`<!>`, 1, 1);
 
 function HeadWithStyle_render(__anchor, __block) {

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

@@ -23,7 +23,7 @@ function Layout_render(__anchor, __block, { children }) {
 
 Layout[_$_.$r] = Layout_render;
 
-var root_2 = _$_.template(`<p class=text>Hello world`);
+var root_2 = _$_.template_el('p', ['class', 'text'], 'Hello world');
 
 function consequent(__anchor, visible) {
 	var p = root_2();
@@ -37,17 +37,26 @@ function if_1(visible) {
 
 var root_1 = _$_.template(`<div class=content><!>`);
 
+function render(__prev) {
+	var __a = if_1(__prev._a);
+
+	if (__prev.a !== __a) {
+		_$_.if_update(__prev._b, __prev.a = __a);
+	}
+}
+
 function Content_render(__anchor, __block) {
 	const visible = _$_.track(true, __block, '3af9q8');
 	var div_1 = root_1();
 
 	{
 		var node = _$_.hydrating ? _$_.hydrate_child() : div_1.firstChild;
+		var ifs = _$_.if_static(node, if_1, 0, visible);
 
-		_$_.if(node, if_1, false, visible);
 		_$_.hydrating && _$_.pop(div_1);
 	}
 
+	_$_.render(render, { a: _$_.UNINITIALIZED, _a: visible, _b: ifs });
 	_$_.append(__anchor, div_1);
 }
 

package/tests/hydration/compiled/client/html-in-template.js

@@ -25,7 +25,7 @@ function TemplateWithJSON_render(__anchor, __block) {
 
 TemplateWithJSON[_$_.$r] = TemplateWithJSON_render;
 
-var root_3 = _$_.template(`<span class=inside>inside`);
+var root_3 = _$_.template_el('span', ['class', 'inside'], 'inside');
 
 function consequent(__anchor, show) {
 	var span = root_3();

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>';
@@ -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>';
@@ -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();
@@ -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);
@@ -340,6 +340,14 @@ function if_3(toc) {
 
 var root_14 = _$_.template(`<div class=layout><div class=content-container><article><div><!></div></article></div><aside><!>`);
 
+function render_5(__prev) {
+	var __a = if_3(__prev._a);
+
+	if (__prev.a !== __a) {
+		_$_.if_update(__prev._b, __prev.a = __a);
+	}
+}
+
 function DocLayout_render(
 	__anchor,
 	__block,
@@ -384,18 +392,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 +428,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 +445,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;
@@ -636,7 +645,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 +688,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(
@@ -783,7 +792,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();
@@ -848,6 +857,14 @@ function if_6({ a: expanded, b: children }) {
 
 var root_40 = _$_.template(`<section class=sidebar-section><div class=section-header><h2></h2><button>Toggle`);
 
+function render_6(__prev) {
+	var __a = if_6({ a: __prev._a, b: __prev._b });
+
+	if (__prev.a !== __a) {
+		_$_.if_update(__prev._c, __prev.a = __a);
+	}
+}
+
 function SidebarSection_render(__anchor, __block, { title, children }) {
 	const expanded = _$_.track(true, __block, 'tmjvjj');
 	var section_1 = root_40();
@@ -873,10 +890,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);
 }
 
@@ -1049,7 +1068,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();
@@ -1120,7 +1139,7 @@ function ArticleWithChildrenThenSibling_render(__anchor, __block) {
 
 ArticleWithChildrenThenSibling[_$_.$r] = ArticleWithChildrenThenSibling_render;
 
-var root_55 = _$_.template(`<div class=doc-content>`);
+var root_55 = _$_.template_el('div', ['class', 'doc-content']);
 var root_56 = _$_.template(`<div class=edit-link><a href=/edit>Edit`);
 
 function consequent_9(__anchor) {
@@ -1214,7 +1233,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 +1250,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 +1260,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 +1270,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();
@@ -1275,7 +1294,7 @@ function if_12(editPath) {
 
 var root_65 = _$_.template(`<nav class=prev-next><a> `);
 
-function render_5(__prev) {
+function render_7(__prev) {
 	var __a = __prev._a.href;
 
 	if (__prev.a !== __a) {
@@ -1297,7 +1316,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 +1400,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 +1419,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;
@@ -1425,7 +1444,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);
@@ -1437,7 +1456,7 @@ function if_14(editPath) {
 
 var root_71 = _$_.template(`<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 +1464,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 +1480,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);
 }
 
@@ -1477,7 +1496,7 @@ function if_15(prevLink) {
 
 var root_73 = _$_.template(`<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 +1518,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);
 }
 
@@ -1530,9 +1549,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) {
@@ -1567,7 +1586,7 @@ function consequent_17(__anchor, toc) {
 				},
 				4,
 				void 0,
-				render_8
+				render_10
 			);
 
 			_$_.hydrating && _$_.pop(nav_5);
@@ -1583,6 +1602,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 +1683,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 +1696,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 +1727,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 +1754,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 +1770,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 +1778,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 +1795,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 +1809,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 +1832,7 @@ function LayoutWithTemplate_render(__anchor, __block, { children, data }) {
 		}
 	}
 
-	_$_.render(render_11, {
+	_$_.render(render_14, {
 		a: template_2.innerHTML,
 		_a: __block,
 		_b: data,
@@ -1816,9 +1844,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 +1862,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);
 		})
 	});