ripple 0.3.72 → 0.3.76

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

@@ -12,15 +12,18 @@ var root_8 = _$_.template(`<div class="items"><!></div>`, 0);
 var root_7 = _$_.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"></path></svg></div></div><!></section>`, 0);
 var root_10 = _$_.template(`<!><!>`, 1, 2);
 var root_9 = _$_.template(`<!>`, 1, 1);
-var root_12 = _$_.template(`<div class="conditional">Conditional content</div>`, 0);
-var root_11 = _$_.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</button>`, 1, 2);
-var root_14 = _$_.template(`<footer class="footer">Footer</footer>`, 0);
-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</button>`, 1, 2);
-var root_16 = _$_.template(`<pre class="code">const x = 1;</pre>`, 0);
-var root_17 = _$_.template(`<div class="preview">Preview content</div>`, 0);
-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"><!></div></div>`, 0);
-var root_18 = _$_.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</button>`, 1, 2);
-var root_19 = _$_.template(`<div class="wrapper"><ul class="features"><li><strong>Feature One</strong>: Description of feature one with <code>code</code> reference</li><li><strong>Feature Two</strong>: Another feature description</li><li><strong>Feature Three</strong>: Third feature</li></ul><h2 class="section-heading">Section Heading</h2><p class="section-content">Static paragraph with <a href="/link">a link</a> and more text.</p></div>`, 0);
+var root_13 = _$_.template(`<div class="conditional">Conditional content</div>`, 0);
+var root_12 = _$_.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</button>`, 1, 2);
+var root_11 = _$_.template(`<!>`, 1, 1);
+var root_16 = _$_.template(`<footer class="footer">Footer</footer>`, 0);
+var root_15 = _$_.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</button>`, 1, 2);
+var root_14 = _$_.template(`<!>`, 1, 1);
+var root_18 = _$_.template(`<pre class="code">const x = 1;</pre>`, 0);
+var root_19 = _$_.template(`<div class="preview">Preview content</div>`, 0);
+var root_17 = _$_.template(`<div class="tabs"><div class="tab-list"><button class="tab">Code</button><button class="tab">Preview</button></div><div class="panel"><!></div></div>`, 0);
+var root_21 = _$_.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</button>`, 1, 2);
+var root_20 = _$_.template(`<!>`, 1, 1);
+var root_22 = _$_.template(`<div class="wrapper"><ul class="features"><li><strong>Feature One</strong>: Description of feature one with <code>code</code> reference</li><li><strong>Feature Two</strong>: Another feature description</li><li><strong>Feature Three</strong>: Third feature</li></ul><h2 class="section-heading">Section Heading</h2><p class="section-content">Static paragraph with <a href="/link">a link</a> and more text.</p></div>`, 0);
 
 import { track } from 'ripple';
 
@@ -197,78 +200,92 @@ export function ElementWithChildrenThenIf() {
 	return _$_.tsrx_element((__anchor, __block) => {
 		let lazy_3 = _$_.track(true, __block, '7cd4817b');
 		var fragment_4 = root_11();
-		var div_11 = _$_.first_child_frag(fragment_4);
+		var node_10 = _$_.first_child_frag(fragment_4);
 
-		{
-			var div_10 = _$_.child(div_11);
+		_$_.expression(node_10, () => _$_.tsrx_element((__anchor, __block) => {
+			var fragment_5 = root_12();
+			var div_11 = _$_.first_child_frag(fragment_5);
 
-			_$_.pop(div_10);
+			{
+				var div_10 = _$_.child(div_11);
 
-			var node_9 = _$_.sibling(div_10);
+				_$_.pop(div_10);
 
-			{
-				var consequent_3 = (__anchor) => {
-					var div_12 = root_12();
+				var node_9 = _$_.sibling(div_10);
 
-					_$_.append(__anchor, div_12);
-				};
+				{
+					var consequent_3 = (__anchor) => {
+						var div_12 = root_13();
 
-				_$_.if(node_9, (__render) => {
-					if (lazy_3.value) __render(consequent_3);
-				});
+						_$_.append(__anchor, div_12);
+					};
+
+					_$_.if(node_9, (__render) => {
+						if (lazy_3.value) __render(consequent_3);
+					});
+				}
+
+				_$_.pop(div_11);
 			}
 
-			_$_.pop(div_11);
-		}
+			var button_1 = _$_.sibling(div_11);
 
-		var button_1 = _$_.sibling(div_11);
+			button_1.__click = () => _$_.set(lazy_3, !lazy_3.value);
+			_$_.next();
+			_$_.append(__anchor, fragment_5, true);
+		}));
 
-		button_1.__click = () => _$_.set(lazy_3, !lazy_3.value);
-		_$_.next();
-		_$_.append(__anchor, fragment_4, true);
+		_$_.append(__anchor, fragment_4);
 	});
 }
 
 export function DeepNestingThenIf() {
 	return _$_.tsrx_element((__anchor, __block) => {
 		let lazy_4 = _$_.track(true, __block, '923116be');
-		var fragment_5 = root_13();
-		var section_2 = _$_.first_child_frag(fragment_5);
+		var fragment_6 = root_14();
+		var node_12 = _$_.first_child_frag(fragment_6);
 
-		{
-			var article_1 = _$_.child(section_2);
+		_$_.expression(node_12, () => _$_.tsrx_element((__anchor, __block) => {
+			var fragment_7 = root_15();
+			var section_2 = _$_.first_child_frag(fragment_7);
 
-			_$_.pop(article_1);
+			{
+				var article_1 = _$_.child(section_2);
 
-			var node_10 = _$_.sibling(article_1);
+				_$_.pop(article_1);
 
-			{
-				var consequent_4 = (__anchor) => {
-					var footer_1 = root_14();
+				var node_11 = _$_.sibling(article_1);
 
-					_$_.append(__anchor, footer_1);
-				};
+				{
+					var consequent_4 = (__anchor) => {
+						var footer_1 = root_16();
 
-				_$_.if(node_10, (__render) => {
-					if (lazy_4.value) __render(consequent_4);
-				});
+						_$_.append(__anchor, footer_1);
+					};
+
+					_$_.if(node_11, (__render) => {
+						if (lazy_4.value) __render(consequent_4);
+					});
+				}
+
+				_$_.pop(section_2);
 			}
 
-			_$_.pop(section_2);
-		}
+			var button_2 = _$_.sibling(section_2);
 
-		var button_2 = _$_.sibling(section_2);
+			button_2.__click = () => _$_.set(lazy_4, !lazy_4.value);
+			_$_.next();
+			_$_.append(__anchor, fragment_7, true);
+		}));
 
-		button_2.__click = () => _$_.set(lazy_4, !lazy_4.value);
-		_$_.next();
-		_$_.append(__anchor, fragment_5, true);
+		_$_.append(__anchor, fragment_6);
 	});
 }
 
 export function DomElementChildrenThenSibling() {
 	return _$_.tsrx_element((__anchor, __block) => {
 		let lazy_5 = _$_.track('code', __block, '33a1e97f');
-		var div_13 = root_15();
+		var div_13 = root_17();
 
 		{
 			var div_14 = _$_.child(div_13);
@@ -288,22 +305,22 @@ export function DomElementChildrenThenSibling() {
 			var div_15 = _$_.sibling(div_14);
 
 			{
-				var node_11 = _$_.child(div_15);
+				var node_13 = _$_.child(div_15);
 
 				{
 					var consequent_5 = (__anchor) => {
-						var pre_1 = root_16();
+						var pre_1 = root_18();
 
 						_$_.append(__anchor, pre_1);
 					};
 
 					var alternate = (__anchor) => {
-						var div_16 = root_17();
+						var div_16 = root_19();
 
 						_$_.append(__anchor, div_16);
 					};
 
-					_$_.if(node_11, (__render) => {
+					_$_.if(node_13, (__render) => {
 						if (lazy_5.value === 'code') __render(consequent_5); else __render(alternate, false);
 					});
 				}
@@ -336,43 +353,50 @@ export function DomElementChildrenThenSibling() {
 export function DomChildrenThenStaticSiblings() {
 	return _$_.tsrx_element((__anchor, __block) => {
 		let lazy_6 = _$_.track(0, __block, '0ea64305');
-		var fragment_6 = root_18();
-		var div_17 = _$_.first_child_frag(fragment_6);
+		var fragment_8 = root_20();
+		var node_14 = _$_.first_child_frag(fragment_8);
 
-		{
-			var ul_1 = _$_.child(div_17);
+		_$_.expression(node_14, () => _$_.tsrx_element((__anchor, __block) => {
+			var fragment_9 = root_21();
+			var div_17 = _$_.first_child_frag(fragment_9);
 
 			{
-				var li_1 = _$_.child(ul_1);
+				var ul_1 = _$_.child(div_17);
 
 				{
-					var expression_3 = _$_.child(li_1, true);
+					var li_1 = _$_.child(ul_1);
+
+					{
+						var expression_3 = _$_.child(li_1, true);
 
-					_$_.pop(li_1);
+						_$_.pop(li_1);
+					}
 				}
+
+				_$_.pop(ul_1);
 			}
 
-			_$_.pop(ul_1);
-		}
+			_$_.pop(div_17);
 
-		_$_.pop(div_17);
+			var button_5 = _$_.sibling(div_17);
 
-		var button_5 = _$_.sibling(div_17);
+			button_5.__click = () => _$_.update(lazy_6);
+			_$_.next();
 
-		button_5.__click = () => _$_.update(lazy_6);
-		_$_.next();
+			_$_.render(() => {
+				_$_.set_text(expression_3, 'Item count: ' + _$_.with_scope(__block, () => String(lazy_6.value)));
+			});
 
-		_$_.render(() => {
-			_$_.set_text(expression_3, 'Item count: ' + _$_.with_scope(__block, () => String(lazy_6.value)));
-		});
+			_$_.append(__anchor, fragment_9, true);
+		}));
 
-		_$_.append(__anchor, fragment_6, true);
+		_$_.append(__anchor, fragment_8);
 	});
 }
 
 export function StaticListThenStaticSiblings() {
 	return _$_.tsrx_element((__anchor, __block) => {
-		var div_18 = root_19();
+		var div_18 = root_22();
 
 		{
 			var ul_2 = _$_.child(div_18);

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

@@ -8,19 +8,22 @@ var root_2 = _$_.template(`<!>`, 1, 1);
 var root_5 = _$_.template(`<div class="logged-in">Welcome back!</div>`, 0);
 var root_6 = _$_.template(`<div class="logged-out">Please log in</div>`, 0);
 var root_4 = _$_.template(`<!>`, 1, 1);
-var root_8 = _$_.template(`<div class="content">Content visible</div>`, 0);
-var root_7 = _$_.template(`<button class="toggle">Toggle</button><!>`, 1, 2);
-var root_10 = _$_.template(`<div class="on">ON</div>`, 0);
-var root_11 = _$_.template(`<div class="off">OFF</div>`, 0);
-var root_9 = _$_.template(`<button class="toggle">Toggle</button><!>`, 1, 2);
-var root_14 = _$_.template(`<span class="inner-content">Inner</span>`, 0);
-var root_13 = _$_.template(`<div class="outer-content">Outer<!></div>`, 0);
-var root_12 = _$_.template(`<button class="outer-toggle">Outer</button><button class="inner-toggle">Inner</button><!>`, 1, 3);
-var root_16 = _$_.template(`<div class="state">Loading...</div>`, 0);
-var root_18 = _$_.template(`<div class="state">Success!</div>`, 0);
-var root_19 = _$_.template(`<div class="state">Error occurred</div>`, 0);
-var root_17 = _$_.template(`<!>`, 1, 1);
-var root_15 = _$_.template(`<div><button class="success">Success</button><button class="error">Error</button><button class="loading">Loading</button><!></div>`, 0);
+var root_9 = _$_.template(`<div class="content">Content visible</div>`, 0);
+var root_8 = _$_.template(`<button class="toggle">Toggle</button><!>`, 1, 2);
+var root_7 = _$_.template(`<!>`, 1, 1);
+var root_12 = _$_.template(`<div class="on">ON</div>`, 0);
+var root_13 = _$_.template(`<div class="off">OFF</div>`, 0);
+var root_11 = _$_.template(`<button class="toggle">Toggle</button><!>`, 1, 2);
+var root_10 = _$_.template(`<!>`, 1, 1);
+var root_17 = _$_.template(`<span class="inner-content">Inner</span>`, 0);
+var root_16 = _$_.template(`<div class="outer-content">Outer<!></div>`, 0);
+var root_15 = _$_.template(`<button class="outer-toggle">Outer</button><button class="inner-toggle">Inner</button><!>`, 1, 3);
+var root_14 = _$_.template(`<!>`, 1, 1);
+var root_19 = _$_.template(`<div class="state">Loading...</div>`, 0);
+var root_21 = _$_.template(`<div class="state">Success!</div>`, 0);
+var root_22 = _$_.template(`<div class="state">Error occurred</div>`, 0);
+var root_20 = _$_.template(`<!>`, 1, 1);
+var root_18 = _$_.template(`<div><button class="success">Success</button><button class="error">Error</button><button class="loading">Loading</button><!></div>`, 0);
 
 import { track } from 'ripple';
 
@@ -100,25 +103,32 @@ export function ReactiveIf() {
 	return _$_.tsrx_element((__anchor, __block) => {
 		let lazy = _$_.track(true, __block, '19a16ff0');
 		var fragment_3 = root_7();
-		var button_1 = _$_.first_child_frag(fragment_3);
+		var node_4 = _$_.first_child_frag(fragment_3);
 
-		button_1.__click = () => {
-			_$_.set(lazy, !lazy.value);
-		};
+		_$_.expression(node_4, () => _$_.tsrx_element((__anchor, __block) => {
+			var fragment_4 = root_8();
+			var button_1 = _$_.first_child_frag(fragment_4);
 
-		var node_3 = _$_.sibling(button_1);
+			button_1.__click = () => {
+				_$_.set(lazy, !lazy.value);
+			};
 
-		{
-			var consequent_3 = (__anchor) => {
-				var div_5 = root_8();
+			var node_3 = _$_.sibling(button_1);
 
-				_$_.append(__anchor, div_5);
-			};
+			{
+				var consequent_3 = (__anchor) => {
+					var div_5 = root_9();
 
-			_$_.if(node_3, (__render) => {
-				if (lazy.value) __render(consequent_3);
-			});
-		}
+					_$_.append(__anchor, div_5);
+				};
+
+				_$_.if(node_3, (__render) => {
+					if (lazy.value) __render(consequent_3);
+				});
+			}
+
+			_$_.append(__anchor, fragment_4);
+		}));
 
 		_$_.append(__anchor, fragment_3);
 	});
@@ -127,34 +137,41 @@ export function ReactiveIf() {
 export function ReactiveIfElse() {
 	return _$_.tsrx_element((__anchor, __block) => {
 		let lazy_1 = _$_.track(false, __block, '41177f39');
-		var fragment_4 = root_9();
-		var button_2 = _$_.first_child_frag(fragment_4);
+		var fragment_5 = root_10();
+		var node_6 = _$_.first_child_frag(fragment_5);
 
-		button_2.__click = () => {
-			_$_.set(lazy_1, !lazy_1.value);
-		};
+		_$_.expression(node_6, () => _$_.tsrx_element((__anchor, __block) => {
+			var fragment_6 = root_11();
+			var button_2 = _$_.first_child_frag(fragment_6);
 
-		var node_4 = _$_.sibling(button_2);
+			button_2.__click = () => {
+				_$_.set(lazy_1, !lazy_1.value);
+			};
 
-		{
-			var consequent_4 = (__anchor) => {
-				var div_6 = root_10();
+			var node_5 = _$_.sibling(button_2);
 
-				_$_.append(__anchor, div_6);
-			};
+			{
+				var consequent_4 = (__anchor) => {
+					var div_6 = root_12();
+
+					_$_.append(__anchor, div_6);
+				};
 
-			var alternate_1 = (__anchor) => {
-				var div_7 = root_11();
+				var alternate_1 = (__anchor) => {
+					var div_7 = root_13();
 
-				_$_.append(__anchor, div_7);
-			};
+					_$_.append(__anchor, div_7);
+				};
 
-			_$_.if(node_4, (__render) => {
-				if (lazy_1.value) __render(consequent_4); else __render(alternate_1, false);
-			});
-		}
+				_$_.if(node_5, (__render) => {
+					if (lazy_1.value) __render(consequent_4); else __render(alternate_1, false);
+				});
+			}
+
+			_$_.append(__anchor, fragment_6);
+		}));
 
-		_$_.append(__anchor, fragment_4);
+		_$_.append(__anchor, fragment_5);
 	});
 }
 
@@ -162,60 +179,67 @@ export function NestedIf() {
 	return _$_.tsrx_element((__anchor, __block) => {
 		let lazy_2 = _$_.track(true, __block, '7894e1df');
 		let lazy_3 = _$_.track(true, __block, 'f21b8c26');
-		var fragment_5 = root_12();
-		var button_3 = _$_.first_child_frag(fragment_5);
+		var fragment_7 = root_14();
+		var node_9 = _$_.first_child_frag(fragment_7);
 
-		button_3.__click = () => {
-			_$_.set(lazy_2, !lazy_2.value);
-		};
+		_$_.expression(node_9, () => _$_.tsrx_element((__anchor, __block) => {
+			var fragment_8 = root_15();
+			var button_3 = _$_.first_child_frag(fragment_8);
 
-		var button_4 = _$_.sibling(button_3);
+			button_3.__click = () => {
+				_$_.set(lazy_2, !lazy_2.value);
+			};
 
-		button_4.__click = () => {
-			_$_.set(lazy_3, !lazy_3.value);
-		};
+			var button_4 = _$_.sibling(button_3);
 
-		var node_5 = _$_.sibling(button_4);
+			button_4.__click = () => {
+				_$_.set(lazy_3, !lazy_3.value);
+			};
 
-		{
-			var consequent_6 = (__anchor) => {
-				var div_8 = root_13();
+			var node_7 = _$_.sibling(button_4);
 
-				{
-					var expression = _$_.child(div_8);
-					var node_6 = _$_.sibling(expression);
+			{
+				var consequent_6 = (__anchor) => {
+					var div_8 = root_16();
 
 					{
-						var consequent_5 = (__anchor) => {
-							var span_1 = root_14();
+						var expression = _$_.child(div_8);
+						var node_8 = _$_.sibling(expression);
 
-							_$_.append(__anchor, span_1);
-						};
+						{
+							var consequent_5 = (__anchor) => {
+								var span_1 = root_17();
 
-						_$_.if(node_6, (__render) => {
-							if (lazy_3.value) __render(consequent_5);
-						});
+								_$_.append(__anchor, span_1);
+							};
+
+							_$_.if(node_8, (__render) => {
+								if (lazy_3.value) __render(consequent_5);
+							});
+						}
+
+						_$_.pop(div_8);
 					}
 
-					_$_.pop(div_8);
-				}
+					_$_.append(__anchor, div_8);
+				};
 
-				_$_.append(__anchor, div_8);
-			};
+				_$_.if(node_7, (__render) => {
+					if (lazy_2.value) __render(consequent_6);
+				});
+			}
 
-			_$_.if(node_5, (__render) => {
-				if (lazy_2.value) __render(consequent_6);
-			});
-		}
+			_$_.append(__anchor, fragment_8);
+		}));
 
-		_$_.append(__anchor, fragment_5);
+		_$_.append(__anchor, fragment_7);
 	});
 }
 
 export function IfElseIfChain() {
 	return _$_.tsrx_element((__anchor, __block) => {
 		let lazy_4 = _$_.track('loading', __block, '4c69c94a');
-		var div_9 = root_15();
+		var div_9 = root_18();
 
 		{
 			var button_5 = _$_.child(div_9);
@@ -236,41 +260,41 @@ export function IfElseIfChain() {
 				_$_.set(lazy_4, 'loading');
 			};
 
-			var node_7 = _$_.sibling(button_7);
+			var node_10 = _$_.sibling(button_7);
 
 			{
 				var consequent_7 = (__anchor) => {
-					var div_10 = root_16();
+					var div_10 = root_19();
 
 					_$_.append(__anchor, div_10);
 				};
 
 				var alternate_3 = (__anchor) => {
-					var fragment_6 = root_17();
-					var node_8 = _$_.first_child_frag(fragment_6);
+					var fragment_9 = root_20();
+					var node_11 = _$_.first_child_frag(fragment_9);
 
 					{
 						var consequent_8 = (__anchor) => {
-							var div_11 = root_18();
+							var div_11 = root_21();
 
 							_$_.append(__anchor, div_11);
 						};
 
 						var alternate_2 = (__anchor) => {
-							var div_12 = root_19();
+							var div_12 = root_22();
 
 							_$_.append(__anchor, div_12);
 						};
 
-						_$_.if(node_8, (__render) => {
+						_$_.if(node_11, (__render) => {
 							if (lazy_4.value === 'success') __render(consequent_8); else __render(alternate_2, false);
 						});
 					}
 
-					_$_.append(__anchor, fragment_6);
+					_$_.append(__anchor, fragment_9);
 				};
 
-				_$_.if(node_7, (__render) => {
+				_$_.if(node_10, (__render) => {
 					if (lazy_4.value === 'loading') __render(consequent_7); else __render(alternate_3, false);
 				});
 			}