ripple 0.4.3 → 0.4.4

package/tests/hydration/compiled/client/if-children.js

@@ -22,6 +22,14 @@ function if_1({ a: expanded, b: children }) {
 
 var root = _$_.template(`<div class=container><div role=button class=header>Toggle`);
 
+function render(__prev) {
+	var __a = if_1({ a: __prev._a, b: __prev._b });
+
+	if (__prev.a !== __a) {
+		_$_.if_update(__prev._c, __prev.a = __a);
+	}
+}
+
 function IfWithChildren_render(__anchor, __block, { children }) {
 	const expanded = _$_.track(true, __block, '1j0jg6p');
 	var div = root();
@@ -32,17 +40,18 @@ function IfWithChildren_render(__anchor, __block, { children }) {
 		div_1.__click = () => expanded.value = !expanded.value;
 
 		var node = _$_.hydrating ? _$_.hydrate_sibling() : _$_.append_into(div, true);
+		var ifs = _$_.if_static(node, if_1, 0, { a: expanded, b: children });
 
-		_$_.if(node, if_1, false, { a: expanded, b: children });
 		_$_.hydrating && _$_.pop(div);
 	}
 
+	_$_.render(render, { a: _$_.UNINITIALIZED, _a: expanded, _b: children, _c: ifs });
 	_$_.append(__anchor, div);
 }
 
 IfWithChildren[_$_.$r] = IfWithChildren_render;
 
-var root_2 = _$_.template(`<div class=item>`);
+var root_2 = _$_.template_el('div', ['class', 'item']);
 
 function ChildItem_render(__anchor, __block, { text: label }) {
 	var div_3 = root_2();
@@ -90,6 +99,14 @@ function if_2(expanded) {
 
 var root_4 = _$_.template(`<div class=container><div role=button class=header>Toggle`);
 
+function render_1(__prev) {
+	var __a = if_2(__prev._a);
+
+	if (__prev.a !== __a) {
+		_$_.if_update(__prev._b, __prev.a = __a);
+	}
+}
+
 function IfWithStaticChildren_render(__anchor, __block) {
 	const expanded = _$_.track(true, __block, 'gkm3jr');
 	var div_4 = root_4();
@@ -100,11 +117,12 @@ function IfWithStaticChildren_render(__anchor, __block) {
 		div_5.__click = () => expanded.value = !expanded.value;
 
 		var node_3 = _$_.hydrating ? _$_.hydrate_sibling() : _$_.append_into(div_4, true);
+		var ifs_1 = _$_.if_static(node_3, if_2, 0, expanded);
 
-		_$_.if(node_3, if_2, false, expanded);
 		_$_.hydrating && _$_.pop(div_4);
 	}
 
+	_$_.render(render_1, { a: _$_.UNINITIALIZED, _a: expanded, _b: ifs_1 });
 	_$_.append(__anchor, div_4);
 }
 
@@ -131,6 +149,14 @@ function if_3({ a: expanded, b: children }) {
 
 var root_6 = _$_.template(`<section class=group><div role=button class=item><div class=indicator></div><h2 class=text>Title</h2><div class=caret><svg xmlns=http://www.w3.org/2000/svg width=18 height=18 viewBox="0 0 24 24"><path d="m9 18 6-6-6-6">`);
 
+function render_2(__prev) {
+	var __a = if_3({ a: __prev._a, b: __prev._b });
+
+	if (__prev.a !== __a) {
+		_$_.if_update(__prev._c, __prev.a = __a);
+	}
+}
+
 function IfWithSiblingsAndChildren_render(__anchor, __block, { children }) {
 	const expanded = _$_.track(true, __block, '18vegr0');
 	var section = root_6();
@@ -145,10 +171,12 @@ function IfWithSiblingsAndChildren_render(__anchor, __block, { children }) {
 			? _$_.hydrate_sibling()
 			: _$_.append_into(section, true);
 
-		_$_.if(node_4, if_3, false, { a: expanded, b: children });
+		var ifs_2 = _$_.if_static(node_4, if_3, 0, { a: expanded, b: children });
+
 		_$_.hydrating && _$_.pop(section);
 	}
 
+	_$_.render(render_2, { a: _$_.UNINITIALIZED, _a: expanded, _b: children, _c: ifs_2 });
 	_$_.append(__anchor, section);
 }
 
@@ -174,7 +202,7 @@ function TestIfWithSiblingsAndChildren_render(__anchor, __block) {
 
 TestIfWithSiblingsAndChildren[_$_.$r] = TestIfWithSiblingsAndChildren_render;
 
-var root_11 = _$_.template(`<div class=conditional>Conditional content`);
+var root_11 = _$_.template_el('div', ['class', 'conditional'], 'Conditional content');
 
 function consequent_3(__anchor, show) {
 	var div_11 = root_11();
@@ -187,6 +215,15 @@ function if_4(show) {
 }
 
 var root_10 = _$_.template(`<div class=wrapper><div class=nested-parent><div class=nested-child><span class=deep>Deep content</span></div></div></div><button class=toggle>Toggle`, 1, 2);
+
+function render_3(__prev) {
+	var __a = if_4(__prev._a);
+
+	if (__prev.a !== __a) {
+		_$_.if_update(__prev._b, __prev.a = __a);
+	}
+}
+
 var root_9 = _$_.template(`<!>`, 1, 1);
 
 function ElementWithChildrenThenIf_render(__anchor, __block) {
@@ -201,14 +238,15 @@ function ElementWithChildrenThenIf_render(__anchor, __block) {
 		{
 			var div_10 = _$_.hydrating ? _$_.hydrate_child() : div_9.firstChild;
 			var node_7 = _$_.hydrating ? _$_.hydrate_sibling() : _$_.append_into(div_9, true);
+			var ifs_3 = _$_.if_static(node_7, if_4, 0, show);
 
-			_$_.if(node_7, if_4, false, show);
 			_$_.hydrating && _$_.pop(div_9);
 		}
 
 		var button = _$_.hydrating ? _$_.hydrate_sibling() : div_9.nextSibling;
 
 		button.__click = () => show.value = !show.value;
+		_$_.render(render_3, { a: _$_.UNINITIALIZED, _a: show, _b: ifs_3 });
 		_$_.append(__anchor, fragment_3);
 	}));
 
@@ -217,7 +255,7 @@ function ElementWithChildrenThenIf_render(__anchor, __block) {
 
 ElementWithChildrenThenIf[_$_.$r] = ElementWithChildrenThenIf_render;
 
-var root_14 = _$_.template(`<footer class=footer>Footer`);
+var root_14 = _$_.template_el('footer', ['class', 'footer'], 'Footer');
 
 function consequent_4(__anchor, visible) {
 	var footer = root_14();
@@ -230,6 +268,15 @@ function if_5(visible) {
 }
 
 var root_13 = _$_.template(`<section class=outer><article class=middle><div class=inner><p class=leaf><strong>Bold</strong><em>Italic</em></p></div></article></section><button class=btn>Toggle`, 1, 2);
+
+function render_4(__prev) {
+	var __a = if_5(__prev._a);
+
+	if (__prev.a !== __a) {
+		_$_.if_update(__prev._b, __prev.a = __a);
+	}
+}
+
 var root_12 = _$_.template(`<!>`, 1, 1);
 
 function DeepNestingThenIf_render(__anchor, __block) {
@@ -248,13 +295,15 @@ function DeepNestingThenIf_render(__anchor, __block) {
 				? _$_.hydrate_sibling()
 				: _$_.append_into(section_1, true);
 
-			_$_.if(node_9, if_5, false, visible);
+			var ifs_4 = _$_.if_static(node_9, if_5, 0, visible);
+
 			_$_.hydrating && _$_.pop(section_1);
 		}
 
 		var button_1 = _$_.hydrating ? _$_.hydrate_sibling() : section_1.nextSibling;
 
 		button_1.__click = () => visible.value = !visible.value;
+		_$_.render(render_4, { a: _$_.UNINITIALIZED, _a: visible, _b: ifs_4 });
 		_$_.append(__anchor, fragment_5);
 	}));
 
@@ -264,7 +313,7 @@ function DeepNestingThenIf_render(__anchor, __block) {
 DeepNestingThenIf[_$_.$r] = DeepNestingThenIf_render;
 
 var root_16 = _$_.template(`<pre class=code>const x = 1;`);
-var root_17 = _$_.template(`<div class=preview>Preview content`);
+var root_17 = _$_.template_el('div', ['class', 'preview'], 'Preview content');
 
 function consequent_5(__anchor, activeTab) {
 	var pre = root_16();
@@ -284,17 +333,24 @@ function if_6(activeTab) {
 
 var root_15 = _$_.template(`<div class=tabs><div class=tab-list><button class=tab>Code</button><button class=tab>Preview</button></div><div class=panel><!>`);
 
-function render(__prev) {
-	var __a = __prev._a.value === 'code' ? 'true' : 'false';
+function render_5(__prev) {
+	var __activeTab_value = __prev._a.value;
+	var __a = __activeTab_value === 'code' ? 'true' : 'false';
 
 	if (__prev.a !== __a) {
-		_$_.set_attribute(__prev._b, 'aria-selected', __prev.a = __a);
+		__prev._b.setAttribute('aria-selected', __prev.a = __a);
 	}
 
-	var __b = __prev._a.value === 'preview' ? 'true' : 'false';
+	var __b = __activeTab_value === 'preview' ? 'true' : 'false';
 
 	if (__prev.b !== __b) {
-		_$_.set_attribute(__prev._c, 'aria-selected', __prev.b = __b);
+		__prev._c.setAttribute('aria-selected', __prev.b = __b);
+	}
+
+	var __c = if_6(__prev._a);
+
+	if (__prev.c !== __c) {
+		_$_.if_update(__prev._d, __prev.c = __c);
 	}
 }
 
@@ -321,18 +377,20 @@ function DomElementChildrenThenSibling_render(__anchor, __block) {
 
 		{
 			var node_11 = _$_.hydrating ? _$_.hydrate_child() : div_14.firstChild;
+			var ifs_5 = _$_.if_static(node_11, if_6, 0, activeTab);
 
-			_$_.if(node_11, if_6, false, activeTab);
 			_$_.hydrating && _$_.pop(div_14);
 		}
 	}
 
-	_$_.render(render, {
+	_$_.render(render_5, {
 		a: void 0,
 		b: void 0,
+		c: _$_.UNINITIALIZED,
 		_a: activeTab,
 		_b: button_2,
-		_c: button_3
+		_c: button_3,
+		_d: ifs_5
 	});
 
 	_$_.append(__anchor, div_12);
@@ -342,7 +400,7 @@ DomElementChildrenThenSibling[_$_.$r] = DomElementChildrenThenSibling_render;
 
 var root_19 = _$_.template(`<div class=container><ul class=list><li class=item></li><li class=item>Another item</li></ul><h2 class=heading>Static Heading</h2><p class=para>Static paragraph</p></div><button class=inc>Increment`, 1, 2);
 
-function render_1(__prev) {
+function render_6(__prev) {
 	var __a = 'Item count: ' + String(__prev._a.value ?? '');
 
 	if (__prev.a !== __a) {
@@ -377,7 +435,7 @@ function DomChildrenThenStaticSiblings_render(__anchor, __block) {
 		var button_4 = _$_.hydrating ? _$_.hydrate_sibling() : div_16.nextSibling;
 
 		button_4.__click = () => count.value++;
-		_$_.render(render_1, { a: '', _a: count, _b: li });
+		_$_.render(render_6, { a: '', _a: count, _b: li });
 		_$_.append(__anchor, fragment_7);
 	}));
 
@@ -396,8 +454,8 @@ function StaticListThenStaticSiblings_render(__anchor, __block) {
 
 StaticListThenStaticSiblings[_$_.$r] = StaticListThenStaticSiblings_render;
 
-var root_21 = _$_.template(`<span class=root-if>on`);
-var root_22 = _$_.template(`<span class=root-if>off`);
+var root_21 = _$_.template_el('span', ['class', 'root-if'], 'on');
+var root_22 = _$_.template_el('span', ['class', 'root-if'], 'off');
 
 function consequent_6(__anchor, props) {
 	var span = root_21();
@@ -415,15 +473,25 @@ function if_7(props) {
 	if (props.on.value) return consequent_6; else return alternate_1;
 }
 
+function render_7(__prev) {
+	var __a = if_7(__prev._a);
+
+	if (__prev.a !== __a) {
+		_$_.if_update(__prev._b, __prev.a = __a);
+	}
+}
+
 function RootIfChild_render(__anchor, __block, props) {
-	_$_.if(__anchor, if_7, true, props);
+	var ifs_6 = _$_.if_static(__anchor, if_7, 1, props);
+
+	_$_.render(render_7, { a: _$_.UNINITIALIZED, _a: props, _b: ifs_6 });
 }
 
 RootIfChild[_$_.$r] = RootIfChild_render;
 
-var root_23 = _$_.template(`<span class=root-for>`);
+var root_23 = _$_.template_el('span', ['class', 'root-for']);
 
-function render_2(__prev) {
+function render_8(__prev) {
 	var __a = __prev.$item;
 
 	if (__prev.a !== __a) {
@@ -446,13 +514,13 @@ function RootForChild_render(__anchor, __block, props) {
 		void 0,
 		void 0,
 		void 0,
-		render_2
+		render_8
 	);
 }
 
 RootForChild[_$_.$r] = RootForChild_render;
 
-var root_24 = _$_.template(`<span class=trailing>end`);
+var root_24 = _$_.template_el('span', ['class', 'trailing'], 'end');
 
 function TrailingChild_render(__anchor, __block) {
 	var span_3 = root_24();

package/tests/hydration/compiled/client/if-fragment-controlflow.js

@@ -1,7 +1,7 @@
 // @ts-nocheck
 import * as _$_ from 'ripple/internal/client';
 
-var root_2 = _$_.template(`<p class=muze> `);
+var root_2 = _$_.template_el('p', ['class', 'muze'], ' ');
 var root_1 = _$_.template(`<!><span class=after>after`, 1, 2);
 
 function consequent(__anchor, { a: hasLoaded, b: muzes }) {
@@ -54,8 +54,8 @@ function IfFragmentForElement_render(__anchor, __block) {
 
 IfFragmentForElement[_$_.$r] = IfFragmentForElement_render;
 
-var root_5 = _$_.template(`<p class=muze> `);
-var root_6 = _$_.template(`<span class=has-items>has items`);
+var root_5 = _$_.template_el('p', ['class', 'muze'], ' ');
+var root_6 = _$_.template_el('span', ['class', 'has-items'], 'has items');
 
 function consequent_1(__anchor, muzes) {
 	var span = root_6();
@@ -67,7 +67,7 @@ function if_2(muzes) {
 	if (muzes.length > 0) return consequent_1;
 }
 
-var root_7 = _$_.template(`<span class=empty>empty`);
+var root_7 = _$_.template_el('span', ['class', 'empty'], 'empty');
 
 function consequent_2(__anchor, muzes) {
 	var span_1 = root_7();
@@ -81,6 +81,20 @@ function if_3(muzes) {
 
 var root_4 = _$_.template(`<!><!><!>`, 1, 3);
 
+function render(__prev) {
+	var __a = if_2(__prev._a);
+
+	if (__prev.a !== __a) {
+		_$_.if_update(__prev._b, __prev.a = __a);
+	}
+
+	var __b = if_3(__prev._a);
+
+	if (__prev.b !== __b) {
+		_$_.if_update(__prev._c, __prev.b = __b);
+	}
+}
+
 function consequent_3(__anchor, { a: hasLoaded, b: muzes }) {
 	var fragment_1 = root_4();
 	var node_3 = _$_.first_child_frag(fragment_1);
@@ -105,12 +119,18 @@ function consequent_3(__anchor, { a: hasLoaded, b: muzes }) {
 	);
 
 	var node_4 = _$_.hydrating ? _$_.hydrate_sibling() : node_3.nextSibling;
-
-	_$_.if(node_4, if_2, false, muzes);
-
+	var ifs = _$_.if_static(node_4, if_2, 0, muzes);
 	var node_5 = _$_.hydrating ? _$_.hydrate_sibling() : node_4.nextSibling;
+	var ifs_1 = _$_.if_static(node_5, if_3, 0, muzes);
+
+	_$_.render(render, {
+		a: _$_.UNINITIALIZED,
+		b: _$_.UNINITIALIZED,
+		_a: muzes,
+		_b: ifs,
+		_c: ifs_1
+	});
 
-	_$_.if(node_5, if_3, false, muzes);
 	_$_.append(__anchor, fragment_1);
 }
 
@@ -168,7 +188,7 @@ function IfFragmentElements_render(__anchor, __block) {
 
 IfFragmentElements[_$_.$r] = IfFragmentElements_render;
 
-var root_12 = _$_.template(`<p class=muze> `);
+var root_12 = _$_.template_el('p', ['class', 'muze'], ' ');
 var root_11 = _$_.template(`<!><span class=after>after`, 1, 2);
 var root_10 = _$_.template(`<!>`, 1, 1);
 
@@ -209,7 +229,7 @@ function ComponentBodyFragmentControlFlow_render(__anchor, __block) {
 
 ComponentBodyFragmentControlFlow[_$_.$r] = ComponentBodyFragmentControlFlow_render;
 
-var root_14 = _$_.template(`<p class=muze> `);
+var root_14 = _$_.template_el('p', ['class', 'muze'], ' ');
 var root_15 = _$_.template(`<!><span class=after>after`, 1, 2);
 var root_13 = _$_.template(`<!>`, 1, 1);
 
@@ -254,7 +274,7 @@ function ComponentBodyCodeBlockControlFlow_render(__anchor, __block) {
 
 ComponentBodyCodeBlockControlFlow[_$_.$r] = ComponentBodyCodeBlockControlFlow_render;
 
-var root_17 = _$_.template(`<p class=muze> `);
+var root_17 = _$_.template_el('p', ['class', 'muze'], ' ');
 var root_18 = _$_.template(`<!><span class=after>after`, 1, 2);
 
 function consequent_5(__anchor, { a: hasLoaded, b: muzes }) {
@@ -311,8 +331,8 @@ function IfCodeBlockControlFlow_render(__anchor, __block) {
 
 IfCodeBlockControlFlow[_$_.$r] = IfCodeBlockControlFlow_render;
 
-var root_20 = _$_.template(`<span class=loading>loading`);
-var root_22 = _$_.template(`<p class=muze> `);
+var root_20 = _$_.template_el('span', ['class', 'loading'], 'loading');
+var root_22 = _$_.template_el('p', ['class', 'muze'], ' ');
 var root_21 = _$_.template(`<!><span class=after>after`, 1, 2);
 
 function consequent_6(__anchor, { a: hasLoaded, b: muzes }) {
@@ -371,7 +391,7 @@ function IfElseFragment_render(__anchor, __block) {
 
 IfElseFragment[_$_.$r] = IfElseFragment_render;
 
-var root_25 = _$_.template(`<p class=muze> `);
+var root_25 = _$_.template_el('p', ['class', 'muze'], ' ');
 var root_24 = _$_.template(`<section><span class=after>after`);
 
 function consequent_7(__anchor, { a: hasLoaded, b: muzes }) {

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

@@ -1,7 +1,7 @@
 // @ts-nocheck
 import * as _$_ from 'ripple/internal/client';
 
-var root = _$_.template(`<div class=shown>Visible`);
+var root = _$_.template_el('div', ['class', 'shown'], 'Visible');
 
 function consequent(__anchor, show) {
 	var div = root();
@@ -21,7 +21,7 @@ function IfTruthy_render(__anchor, __block) {
 
 IfTruthy[_$_.$r] = IfTruthy_render;
 
-var root_1 = _$_.template(`<div class=shown>Visible`);
+var root_1 = _$_.template_el('div', ['class', 'shown'], 'Visible');
 
 function consequent_1(__anchor, show) {
 	var div_1 = root_1();
@@ -41,8 +41,8 @@ function IfFalsy_render(__anchor, __block) {
 
 IfFalsy[_$_.$r] = IfFalsy_render;
 
-var root_2 = _$_.template(`<div class=logged-in>Welcome back!`);
-var root_3 = _$_.template(`<div class=logged-out>Please log in`);
+var root_2 = _$_.template_el('div', ['class', 'logged-in'], 'Welcome back!');
+var root_3 = _$_.template_el('div', ['class', 'logged-out'], 'Please log in');
 
 function consequent_2(__anchor, isLoggedIn) {
 	var div_2 = root_2();
@@ -68,7 +68,7 @@ function IfElse_render(__anchor, __block) {
 
 IfElse[_$_.$r] = IfElse_render;
 
-var root_6 = _$_.template(`<div class=content>Content visible`);
+var root_6 = _$_.template_el('div', ['class', 'content'], 'Content visible');
 
 function consequent_3(__anchor, show) {
 	var div_4 = root_6();
@@ -81,6 +81,15 @@ function if_4(show) {
 }
 
 var root_5 = _$_.template(`<button class=toggle>Toggle</button><!>`, 1, 2);
+
+function render(__prev) {
+	var __a = if_4(__prev._a);
+
+	if (__prev.a !== __a) {
+		_$_.if_update(__prev._b, __prev.a = __a);
+	}
+}
+
 var root_4 = _$_.template(`<!>`, 1, 1);
 
 function ReactiveIf_render(__anchor, __block) {
@@ -97,8 +106,9 @@ function ReactiveIf_render(__anchor, __block) {
 		};
 
 		var node = _$_.hydrating ? _$_.hydrate_sibling() : button.nextSibling;
+		var ifs = _$_.if_static(node, if_4, 0, show);
 
-		_$_.if(node, if_4, false, show);
+		_$_.render(render, { a: _$_.UNINITIALIZED, _a: show, _b: ifs });
 		_$_.append(__anchor, fragment_1);
 	}));
 
@@ -107,8 +117,8 @@ function ReactiveIf_render(__anchor, __block) {
 
 ReactiveIf[_$_.$r] = ReactiveIf_render;
 
-var root_9 = _$_.template(`<div class=on>ON`);
-var root_10 = _$_.template(`<div class=off>OFF`);
+var root_9 = _$_.template_el('div', ['class', 'on'], 'ON');
+var root_10 = _$_.template_el('div', ['class', 'off'], 'OFF');
 
 function consequent_4(__anchor, isOn) {
 	var div_5 = root_9();
@@ -127,6 +137,15 @@ function if_5(isOn) {
 }
 
 var root_8 = _$_.template(`<button class=toggle>Toggle</button><!>`, 1, 2);
+
+function render_1(__prev) {
+	var __a = if_5(__prev._a);
+
+	if (__prev.a !== __a) {
+		_$_.if_update(__prev._b, __prev.a = __a);
+	}
+}
+
 var root_7 = _$_.template(`<!>`, 1, 1);
 
 function ReactiveIfElse_render(__anchor, __block) {
@@ -143,8 +162,9 @@ function ReactiveIfElse_render(__anchor, __block) {
 		};
 
 		var node_2 = _$_.hydrating ? _$_.hydrate_sibling() : button_1.nextSibling;
+		var ifs_1 = _$_.if_static(node_2, if_5, 0, isOn);
 
-		_$_.if(node_2, if_5, false, isOn);
+		_$_.render(render_1, { a: _$_.UNINITIALIZED, _a: isOn, _b: ifs_1 });
 		_$_.append(__anchor, fragment_3);
 	}));
 
@@ -153,7 +173,7 @@ function ReactiveIfElse_render(__anchor, __block) {
 
 ReactiveIfElse[_$_.$r] = ReactiveIfElse_render;
 
-var root_14 = _$_.template(`<span class=inner-content>Inner`);
+var root_14 = _$_.template_el('span', ['class', 'inner-content'], 'Inner');
 
 function consequent_5(__anchor, inner) {
 	var span = root_14();
@@ -165,7 +185,15 @@ function if_6(inner) {
 	if (inner.value) return consequent_5;
 }
 
-var root_13 = _$_.template(`<div class=outer-content>Outer`);
+var root_13 = _$_.template_el('div', ['class', 'outer-content'], 'Outer');
+
+function render_2(__prev) {
+	var __a = if_6(__prev._a);
+
+	if (__prev.a !== __a) {
+		_$_.if_update(__prev._b, __prev.a = __a);
+	}
+}
 
 function consequent_6(__anchor, { a: outer, b: inner }) {
 	var div_7 = root_13();
@@ -173,11 +201,12 @@ function consequent_6(__anchor, { a: outer, b: inner }) {
 	{
 		var expression = _$_.hydrating ? _$_.hydrate_child() : div_7.firstChild;
 		var node_5 = _$_.hydrating ? _$_.hydrate_sibling() : _$_.append_into(div_7, true);
+		var ifs_2 = _$_.if_static(node_5, if_6, 0, inner);
 
-		_$_.if(node_5, if_6, false, inner);
 		_$_.hydrating && _$_.pop(div_7);
 	}
 
+	_$_.render(render_2, { a: _$_.UNINITIALIZED, _a: inner, _b: ifs_2 });
 	_$_.append(__anchor, div_7);
 }
 
@@ -186,6 +215,15 @@ function if_7({ a: outer, b: inner }) {
 }
 
 var root_12 = _$_.template(`<button class=outer-toggle>Outer</button><button class=inner-toggle>Inner</button><!>`, 1, 3);
+
+function render_3(__prev) {
+	var __a = if_7({ a: __prev._a, b: __prev._b });
+
+	if (__prev.a !== __a) {
+		_$_.if_update(__prev._c, __prev.a = __a);
+	}
+}
+
 var root_11 = _$_.template(`<!>`, 1, 1);
 
 function NestedIf_render(__anchor, __block) {
@@ -209,8 +247,9 @@ function NestedIf_render(__anchor, __block) {
 		};
 
 		var node_4 = _$_.hydrating ? _$_.hydrate_sibling() : button_3.nextSibling;
+		var ifs_3 = _$_.if_static(node_4, if_7, 0, { a: outer, b: inner });
 
-		_$_.if(node_4, if_7, false, { a: outer, b: inner });
+		_$_.render(render_3, { a: _$_.UNINITIALIZED, _a: outer, _b: inner, _c: ifs_3 });
 		_$_.append(__anchor, fragment_5);
 	}));
 
@@ -219,9 +258,9 @@ function NestedIf_render(__anchor, __block) {
 
 NestedIf[_$_.$r] = NestedIf_render;
 
-var root_16 = _$_.template(`<div class=state>Loading...`);
-var root_17 = _$_.template(`<div class=state>Success!`);
-var root_18 = _$_.template(`<div class=state>Error occurred`);
+var root_16 = _$_.template_el('div', ['class', 'state'], 'Loading...');
+var root_17 = _$_.template_el('div', ['class', 'state'], 'Success!');
+var root_18 = _$_.template_el('div', ['class', 'state'], 'Error occurred');
 
 function consequent_7(__anchor, status) {
 	var div_9 = root_16();
@@ -247,6 +286,14 @@ function if_8(status) {
 
 var root_15 = _$_.template(`<div><button class=success>Success</button><button class=error>Error</button><button class=loading>Loading`);
 
+function render_4(__prev) {
+	var __a = if_8(__prev._a);
+
+	if (__prev.a !== __a) {
+		_$_.if_update(__prev._b, __prev.a = __a);
+	}
+}
+
 function IfElseIfChain_render(__anchor, __block) {
 	const status = _$_.track('loading', __block, 'l79qh6');
 	var div_8 = root_15();
@@ -271,11 +318,12 @@ function IfElseIfChain_render(__anchor, __block) {
 		};
 
 		var node_7 = _$_.hydrating ? _$_.hydrate_sibling() : _$_.append_into(div_8, true);
+		var ifs_4 = _$_.if_static(node_7, if_8, 0, status);
 
-		_$_.if(node_7, if_8, false, status);
 		_$_.hydrating && _$_.pop(div_8);
 	}
 
+	_$_.render(render_4, { a: _$_.UNINITIALIZED, _a: status, _b: ifs_4 });
 	_$_.append(__anchor, div_8);
 }