ripple 0.3.72 → 0.3.76

package/tests/hydration/compiled/client/mixed-control-flow.js

@@ -10,23 +10,25 @@ var root_6 = _$_.template(`<!>`, 1, 1);
 var root_2 = _$_.template(`<!>`, 1, 1);
 var root_1 = _$_.template(`<!>`, 1, 1);
 var root = _$_.template(`<section class="mixed-static"></section>`, 0);
-var root_13 = _$_.template(`<p> </p>`, 0);
-var root_14 = _$_.template(`<p class="pending">pending a</p>`, 0);
+var root_14 = _$_.template(`<p> </p>`, 0);
+var root_15 = _$_.template(`<p class="pending">pending a</p>`, 0);
+var root_13 = _$_.template(`<!>`, 1, 1);
+var root_17 = _$_.template(`<p> </p>`, 0);
+var root_18 = _$_.template(`<p class="pending">pending b</p>`, 0);
+var root_16 = _$_.template(`<!>`, 1, 1);
 var root_12 = _$_.template(`<!>`, 1, 1);
-var root_16 = _$_.template(`<p> </p>`, 0);
-var root_17 = _$_.template(`<p class="pending">pending b</p>`, 0);
-var root_15 = _$_.template(`<!>`, 1, 1);
-var root_11 = _$_.template(`<!>`, 1, 1);
-var root_10 = _$_.template(`<div class="mixed-reactive-list"></div>`, 0);
-var root_9 = _$_.template(`<button class="toggle-show">Toggle Show</button><button class="toggle-mode">Toggle Mode</button><button class="add-item">Add Item</button><!>`, 1, 4);
+var root_11 = _$_.template(`<div class="mixed-reactive-list"></div>`, 0);
+var root_10 = _$_.template(`<button class="toggle-show">Toggle Show</button><button class="toggle-mode">Toggle Mode</button><button class="add-item">Add Item</button><!>`, 1, 4);
+var root_9 = _$_.template(`<!>`, 1, 1);
+var root_24 = _$_.template(`<!>`, 1, 1);
+var root_25 = _$_.template(`<div> </div>`, 0);
+var root_23 = _$_.template(`<!>`, 1, 1);
+var root_26 = _$_.template(`<div class="unexpected">unexpected</div>`, 0);
 var root_22 = _$_.template(`<!>`, 1, 1);
-var root_23 = _$_.template(`<div> </div>`, 0);
 var root_21 = _$_.template(`<!>`, 1, 1);
-var root_24 = _$_.template(`<div class="unexpected">unexpected</div>`, 0);
-var root_20 = _$_.template(`<!>`, 1, 1);
+var root_20 = _$_.template(`<div class="before">before</div><!>`, 1, 2);
 var root_19 = _$_.template(`<!>`, 1, 1);
-var root_18 = _$_.template(`<div class="before">before</div><!>`, 1, 2);
-var root_25 = _$_.template(`<div class="resolved-row"> </div>`, 0);
+var root_27 = _$_.template(`<div class="resolved-row"> </div>`, 0);
 
 import { track, trackAsync } from 'ripple';
 
@@ -194,160 +196,167 @@ export function MixedControlFlowReactive() {
 		let lazy_1 = _$_.track('a', __block, '5b53eda2');
 		let lazy_2 = _$_.track([{ id: 1, label: 'One' }, { id: 2, label: 'Two' }], __block, '7890dad6');
 		var fragment_4 = root_9();
-		var button_1 = _$_.first_child_frag(fragment_4);
+		var node_8 = _$_.first_child_frag(fragment_4);
 
-		button_1.__click = () => {
-			_$_.set(lazy, !lazy.value);
-		};
+		_$_.expression(node_8, () => _$_.tsrx_element((__anchor, __block) => {
+			var fragment_5 = root_10();
+			var button_1 = _$_.first_child_frag(fragment_5);
 
-		var button_2 = _$_.sibling(button_1);
-
-		button_2.__click = () => {
-			_$_.set(lazy_1, lazy_1.value === 'a' ? 'b' : 'a');
-		};
-
-		var button_3 = _$_.sibling(button_2);
-
-		button_3.__click = () => {
-			_$_.set(lazy_2, [...lazy_2.value, { id: 3, label: 'Three' }]);
-		};
+			button_1.__click = () => {
+				_$_.set(lazy, !lazy.value);
+			};
 
-		var node_4 = _$_.sibling(button_3);
+			var button_2 = _$_.sibling(button_1);
 
-		{
-			var consequent_1 = (__anchor) => {
-				var div_5 = root_10();
+			button_2.__click = () => {
+				_$_.set(lazy_1, lazy_1.value === 'a' ? 'b' : 'a');
+			};
 
-				{
-					_$_.for_keyed(
-						div_5,
-						() => lazy_2.value,
-						(__anchor, pattern_1) => {
-							var fragment_5 = root_11();
-							var node_5 = _$_.first_child_frag(fragment_5);
+			var button_3 = _$_.sibling(button_2);
 
-							{
-								var switch_case_0_1 = (__anchor) => {
-									var fragment_6 = root_12();
-									var node_6 = _$_.first_child_frag(fragment_6);
+			button_3.__click = () => {
+				_$_.set(lazy_2, [...lazy_2.value, { id: 3, label: 'Three' }]);
+			};
 
-									_$_.try(
-										node_6,
-										(__anchor) => {
-											var p_1 = root_13();
+			var node_4 = _$_.sibling(button_3);
 
-											{
-												var expression_2 = _$_.child(p_1, true);
+			{
+				var consequent_1 = (__anchor) => {
+					var div_5 = root_11();
 
-												_$_.pop(p_1);
+					{
+						_$_.for_keyed(
+							div_5,
+							() => lazy_2.value,
+							(__anchor, pattern_1) => {
+								var fragment_6 = root_12();
+								var node_5 = _$_.first_child_frag(fragment_6);
+
+								{
+									var switch_case_0_1 = (__anchor) => {
+										var fragment_7 = root_13();
+										var node_6 = _$_.first_child_frag(fragment_7);
+
+										_$_.try(
+											node_6,
+											(__anchor) => {
+												var p_1 = root_14();
+
+												{
+													var expression_2 = _$_.child(p_1, true);
+
+													_$_.pop(p_1);
+												}
+
+												_$_.render(
+													(__prev) => {
+														var __a = `A:${_$_.get(pattern_1).label}`;
+
+														if (__prev.a !== __a) {
+															_$_.set_text(expression_2, __prev.a = __a);
+														}
+
+														var __b = `item item-${_$_.get(pattern_1).id}`;
+
+														if (__prev.b !== __b) {
+															_$_.set_class(p_1, __prev.b = __b, void 0, true);
+														}
+													},
+													{ a: ' ', b: Symbol() }
+												);
+
+												_$_.append(__anchor, p_1);
+											},
+											null,
+											(__anchor) => {
+												var p_2 = root_15();
+
+												_$_.append(__anchor, p_2);
 											}
+										);
 
-											_$_.render(
-												(__prev) => {
-													var __a = `A:${_$_.get(pattern_1).label}`;
+										_$_.append(__anchor, fragment_7);
+									};
 
-													if (__prev.a !== __a) {
-														_$_.set_text(expression_2, __prev.a = __a);
-													}
+									var switch_case_default_1 = (__anchor) => {
+										var fragment_8 = root_16();
+										var node_7 = _$_.first_child_frag(fragment_8);
 
-													var __b = `item item-${_$_.get(pattern_1).id}`;
+										_$_.try(
+											node_7,
+											(__anchor) => {
+												var p_3 = root_17();
 
-													if (__prev.b !== __b) {
-														_$_.set_class(p_1, __prev.b = __b, void 0, true);
-													}
-												},
-												{ a: ' ', b: Symbol() }
-											);
+												{
+													var expression_3 = _$_.child(p_3, true);
 
-											_$_.append(__anchor, p_1);
-										},
-										null,
-										(__anchor) => {
-											var p_2 = root_14();
+													_$_.pop(p_3);
+												}
 
-											_$_.append(__anchor, p_2);
-										}
-									);
+												_$_.render(
+													(__prev) => {
+														var __a = `B:${_$_.get(pattern_1).label}`;
 
-									_$_.append(__anchor, fragment_6);
-								};
+														if (__prev.a !== __a) {
+															_$_.set_text(expression_3, __prev.a = __a);
+														}
 
-								var switch_case_default_1 = (__anchor) => {
-									var fragment_7 = root_15();
-									var node_7 = _$_.first_child_frag(fragment_7);
+														var __b = `item item-${_$_.get(pattern_1).id}`;
 
-									_$_.try(
-										node_7,
-										(__anchor) => {
-											var p_3 = root_16();
+														if (__prev.b !== __b) {
+															_$_.set_class(p_3, __prev.b = __b, void 0, true);
+														}
+													},
+													{ a: ' ', b: Symbol() }
+												);
 
-											{
-												var expression_3 = _$_.child(p_3, true);
+												_$_.append(__anchor, p_3);
+											},
+											null,
+											(__anchor) => {
+												var p_4 = root_18();
 
-												_$_.pop(p_3);
+												_$_.append(__anchor, p_4);
 											}
+										);
 
-											_$_.render(
-												(__prev) => {
-													var __a = `B:${_$_.get(pattern_1).label}`;
-
-													if (__prev.a !== __a) {
-														_$_.set_text(expression_3, __prev.a = __a);
-													}
-
-													var __b = `item item-${_$_.get(pattern_1).id}`;
+										_$_.append(__anchor, fragment_8);
+									};
 
-													if (__prev.b !== __b) {
-														_$_.set_class(p_3, __prev.b = __b, void 0, true);
-													}
-												},
-												{ a: ' ', b: Symbol() }
-											);
+									_$_.switch(node_5, () => {
+										var result = [];
 
-											_$_.append(__anchor, p_3);
-										},
-										null,
-										(__anchor) => {
-											var p_4 = root_17();
+										switch (lazy_1.value) {
+											case 'a':
+												result.push(switch_case_0_1);
+												return result;
 
-											_$_.append(__anchor, p_4);
+											default:
+												result.push(switch_case_default_1);
+												return result;
 										}
-									);
-
-									_$_.append(__anchor, fragment_7);
-								};
-
-								_$_.switch(node_5, () => {
-									var result = [];
+									});
+								}
 
-									switch (lazy_1.value) {
-										case 'a':
-											result.push(switch_case_0_1);
-											return result;
+								_$_.append(__anchor, fragment_6);
+							},
+							4,
+							(pattern_1) => _$_.get(pattern_1).id
+						);
 
-										default:
-											result.push(switch_case_default_1);
-											return result;
-									}
-								});
-							}
-
-							_$_.append(__anchor, fragment_5);
-						},
-						4,
-						(pattern_1) => _$_.get(pattern_1).id
-					);
+						_$_.pop(div_5);
+					}
 
-					_$_.pop(div_5);
-				}
+					_$_.append(__anchor, div_5);
+				};
 
-				_$_.append(__anchor, div_5);
-			};
+				_$_.if(node_4, (__render) => {
+					if (lazy.value) __render(consequent_1);
+				});
+			}
 
-			_$_.if(node_4, (__render) => {
-				if (lazy.value) __render(consequent_1);
-			});
-		}
+			_$_.append(__anchor, fragment_5);
+		}));
 
 		_$_.append(__anchor, fragment_4);
 	});
@@ -357,98 +366,105 @@ export function MixedControlFlowAsyncPending() {
 	return _$_.tsrx_element((__anchor, __block) => {
 		const rows = [1, 2];
 		const state = 'slow';
-		var fragment_8 = root_18();
-		var div_6 = _$_.first_child_frag(fragment_8);
-		var node_8 = _$_.sibling(div_6);
-
-		_$_.for(
-			node_8,
-			() => rows,
-			(__anchor, row) => {
-				var fragment_9 = root_19();
-				var node_9 = _$_.first_child_frag(fragment_9);
-
-				{
-					var consequent_2 = (__anchor) => {
-						var fragment_10 = root_20();
-						var node_10 = _$_.first_child_frag(fragment_10);
-
-						{
-							var switch_case_0_2 = (__anchor) => {
-								var fragment_11 = root_21();
-								var node_11 = _$_.first_child_frag(fragment_11);
-
-								_$_.try(
-									node_11,
-									(__anchor) => {
-										var fragment_12 = root_22();
-										var node_12 = _$_.first_child_frag(fragment_12);
-
-										_$_.render_component(AsyncRow, node_12, { label: `row-${row}` });
-										_$_.append(__anchor, fragment_12);
-									},
-									null,
-									(__anchor) => {
-										var div_7 = root_23();
-
-										_$_.set_class(div_7, `pending-row pending-row-${row}`, void 0, true);
-
-										{
-											var expression_4 = _$_.child(div_7, true);
-
-											expression_4.nodeValue = `pending ${row}`;
-											_$_.pop(div_7);
+		var fragment_9 = root_19();
+		var node_14 = _$_.first_child_frag(fragment_9);
+
+		_$_.expression(node_14, () => _$_.tsrx_element((__anchor, __block) => {
+			var fragment_10 = root_20();
+			var div_6 = _$_.first_child_frag(fragment_10);
+			var node_9 = _$_.sibling(div_6);
+
+			_$_.for(
+				node_9,
+				() => rows,
+				(__anchor, row) => {
+					var fragment_11 = root_21();
+					var node_10 = _$_.first_child_frag(fragment_11);
+
+					{
+						var consequent_2 = (__anchor) => {
+							var fragment_12 = root_22();
+							var node_11 = _$_.first_child_frag(fragment_12);
+
+							{
+								var switch_case_0_2 = (__anchor) => {
+									var fragment_13 = root_23();
+									var node_12 = _$_.first_child_frag(fragment_13);
+
+									_$_.try(
+										node_12,
+										(__anchor) => {
+											var fragment_14 = root_24();
+											var node_13 = _$_.first_child_frag(fragment_14);
+
+											_$_.render_component(AsyncRow, node_13, { label: `row-${row}` });
+											_$_.append(__anchor, fragment_14);
+										},
+										null,
+										(__anchor) => {
+											var div_7 = root_25();
+
+											_$_.set_class(div_7, `pending-row pending-row-${row}`, void 0, true);
+
+											{
+												var expression_4 = _$_.child(div_7, true);
+
+												expression_4.nodeValue = `pending ${row}`;
+												_$_.pop(div_7);
+											}
+
+											_$_.append(__anchor, div_7);
 										}
+									);
 
-										_$_.append(__anchor, div_7);
-									}
-								);
+									_$_.append(__anchor, fragment_13);
+								};
 
-								_$_.append(__anchor, fragment_11);
-							};
+								var switch_case_default_2 = (__anchor) => {
+									var div_8 = root_26();
 
-							var switch_case_default_2 = (__anchor) => {
-								var div_8 = root_24();
+									_$_.append(__anchor, div_8);
+								};
 
-								_$_.append(__anchor, div_8);
-							};
+								_$_.switch(node_11, () => {
+									var result = [];
 
-							_$_.switch(node_10, () => {
-								var result = [];
+									switch (state) {
+										case 'slow':
+											result.push(switch_case_0_2);
+											return result;
 
-								switch (state) {
-									case 'slow':
-										result.push(switch_case_0_2);
-										return result;
+										default:
+											result.push(switch_case_default_2);
+											return result;
+									}
+								});
+							}
 
-									default:
-										result.push(switch_case_default_2);
-										return result;
-								}
-							});
-						}
+							_$_.append(__anchor, fragment_12);
+						};
 
-						_$_.append(__anchor, fragment_10);
-					};
+						_$_.if(node_10, (__render) => {
+							if (row === 1) __render(consequent_2);
+						});
+					}
 
-					_$_.if(node_9, (__render) => {
-						if (row === 1) __render(consequent_2);
-					});
-				}
+					_$_.append(__anchor, fragment_11);
+				},
+				0
+			);
 
-				_$_.append(__anchor, fragment_9);
-			},
-			0
-		);
+			_$_.append(__anchor, fragment_10);
+		}));
 
-		_$_.append(__anchor, fragment_8);
+		_$_.append(__anchor, fragment_9);
 	});
 }
 
 function AsyncRow({ label }) {
 	return _$_.tsrx_element((__anchor, __block) => {
 		let lazy_3 = _$_.track_async(() => _$_.with_scope(__block, () => Promise.resolve(label)), __block, '10cc79a0');
-		var div_9 = root_25();
+		var div_9 = root_27();
 
 		{
 			var expression_5 = _$_.child(div_9);