ripple 0.3.68 → 0.3.69

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

@@ -30,391 +30,435 @@ var root_25 = _$_.template(`<div class="resolved-row"> </div>`, 0);
 
 import { track, trackAsync } from 'ripple';
 
-export function MixedControlFlowStatic(__anchor, _, __block) {
-	_$_.push_component();
+export function MixedControlFlowStatic() {
+	return _$_.tsrx_element((__anchor, __block) => {
+		const rows = [
+			{ id: 1, kind: 'a', enabled: true },
+			{ id: 2, kind: 'b', enabled: true },
+			{ id: 3, kind: 'a', enabled: false }
+		];
+
+		var section_1 = root();
+
+		{
+			_$_.for_keyed(
+				section_1,
+				() => rows,
+				(__anchor, pattern) => {
+					var fragment = root_1();
+					var node = _$_.first_child_frag(fragment);
 
-	const rows = [
-		{ id: 1, kind: 'a', enabled: true },
-		{ id: 2, kind: 'b', enabled: true },
-		{ id: 3, kind: 'a', enabled: false }
-	];
+					{
+						var consequent = (__anchor) => {
+							var fragment_1 = root_2();
+							var node_1 = _$_.first_child_frag(fragment_1);
+
+							{
+								var switch_case_0 = (__anchor) => {
+									var fragment_2 = root_3();
+									var node_2 = _$_.first_child_frag(fragment_2);
+
+									_$_.try(
+										node_2,
+										(__anchor) => {
+											var div_1 = root_4();
+
+											{
+												var expression = _$_.child(div_1, true);
+
+												_$_.pop(div_1);
+											}
+
+											_$_.render(
+												(__prev) => {
+													var __a = `A-${_$_.get(pattern).id}`;
+
+													if (__prev.a !== __a) {
+														_$_.set_text(expression, __prev.a = __a);
+													}
+
+													var __b = `row row-${_$_.get(pattern).id} kind-a`;
+
+													if (__prev.b !== __b) {
+														_$_.set_class(div_1, __prev.b = __b, void 0, true);
+													}
+												},
+												{ a: ' ', b: Symbol() }
+											);
+
+											_$_.append(__anchor, div_1);
+										},
+										null,
+										(__anchor) => {
+											var div_2 = root_5();
+
+											_$_.render(() => {
+												_$_.set_class(div_2, `pending pending-${_$_.get(pattern).id}`, void 0, true);
+											});
+
+											_$_.append(__anchor, div_2);
+										}
+									);
 
-	var section_1 = root();
+									_$_.append(__anchor, fragment_2);
+								};
 
-	{
-		_$_.for_keyed(
-			section_1,
-			() => rows,
-			(__anchor, pattern) => {
-				var fragment = root_1();
-				var node = _$_.first_child_frag(fragment);
+								var switch_case_default = (__anchor) => {
+									var fragment_3 = root_6();
+									var node_3 = _$_.first_child_frag(fragment_3);
 
-				{
-					var consequent = (__anchor) => {
-						var fragment_1 = root_2();
-						var node_1 = _$_.first_child_frag(fragment_1);
+									_$_.try(
+										node_3,
+										(__anchor) => {
+											var div_3 = root_7();
 
-						{
-							var switch_case_0 = (__anchor) => {
-								var fragment_2 = root_3();
-								var node_2 = _$_.first_child_frag(fragment_2);
+											{
+												var expression_1 = _$_.child(div_3, true);
 
-								_$_.try(
-									node_2,
-									(__anchor) => {
-										var div_1 = root_4();
+												_$_.pop(div_3);
+											}
 
-										{
-											var expression = _$_.child(div_1);
+											_$_.render(
+												(__prev) => {
+													var __a = `B-${_$_.get(pattern).id}`;
 
-											_$_.expression(expression, () => `A-${_$_.get(pattern).id}`);
-											_$_.pop(div_1);
+													if (__prev.a !== __a) {
+														_$_.set_text(expression_1, __prev.a = __a);
+													}
+
+													var __b = `row row-${_$_.get(pattern).id} kind-b`;
+
+													if (__prev.b !== __b) {
+														_$_.set_class(div_3, __prev.b = __b, void 0, true);
+													}
+												},
+												{ a: ' ', b: Symbol() }
+											);
+
+											_$_.append(__anchor, div_3);
+										},
+										null,
+										(__anchor) => {
+											var div_4 = root_8();
+
+											_$_.render(() => {
+												_$_.set_class(div_4, `pending pending-${_$_.get(pattern).id}`, void 0, true);
+											});
+
+											_$_.append(__anchor, div_4);
 										}
+									);
 
-										_$_.render(() => {
-											_$_.set_class(div_1, `row row-${_$_.get(pattern).id} kind-a`, void 0, true);
-										});
+									_$_.append(__anchor, fragment_3);
+								};
 
-										_$_.append(__anchor, div_1);
-									},
-									null,
-									(__anchor) => {
-										var div_2 = root_5();
+								_$_.switch(node_1, () => {
+									var result = [];
 
-										_$_.render(() => {
-											_$_.set_class(div_2, `pending pending-${_$_.get(pattern).id}`, void 0, true);
-										});
+									switch (_$_.get(pattern).kind) {
+										case 'a':
+											result.push(switch_case_0);
+											return result;
 
-										_$_.append(__anchor, div_2);
+										default:
+											result.push(switch_case_default);
+											return result;
 									}
-								);
+								});
+							}
 
-								_$_.append(__anchor, fragment_2);
-							};
+							_$_.append(__anchor, fragment_1);
+						};
 
-							var switch_case_default = (__anchor) => {
-								var fragment_3 = root_6();
-								var node_3 = _$_.first_child_frag(fragment_3);
+						_$_.if(node, (__render) => {
+							if (_$_.get(pattern).enabled) __render(consequent);
+						});
+					}
 
-								_$_.try(
-									node_3,
-									(__anchor) => {
-										var div_3 = root_7();
+					_$_.append(__anchor, fragment);
+				},
+				4,
+				(pattern) => _$_.get(pattern).id
+			);
 
-										{
-											var expression_1 = _$_.child(div_3);
+			_$_.pop(section_1);
+		}
 
-											_$_.expression(expression_1, () => `B-${_$_.get(pattern).id}`);
-											_$_.pop(div_3);
-										}
+		_$_.append(__anchor, section_1);
+	});
+}
 
-										_$_.render(() => {
-											_$_.set_class(div_3, `row row-${_$_.get(pattern).id} kind-b`, void 0, true);
-										});
+export function MixedControlFlowReactive() {
+	return _$_.tsrx_element((__anchor, __block) => {
+		let lazy = _$_.track(true, __block, '5ae53d26');
+		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);
 
-										_$_.append(__anchor, div_3);
-									},
-									null,
-									(__anchor) => {
-										var div_4 = root_8();
+		button_1.__click = () => {
+			_$_.set(lazy, !lazy.value);
+		};
 
-										_$_.render(() => {
-											_$_.set_class(div_4, `pending pending-${_$_.get(pattern).id}`, void 0, true);
-										});
+		var button_2 = _$_.sibling(button_1);
 
-										_$_.append(__anchor, div_4);
-									}
-								);
+		button_2.__click = () => {
+			_$_.set(lazy_1, lazy_1.value === 'a' ? 'b' : 'a');
+		};
 
-								_$_.append(__anchor, fragment_3);
-							};
+		var button_3 = _$_.sibling(button_2);
 
-							_$_.switch(node_1, () => {
-								var result = [];
+		button_3.__click = () => {
+			_$_.set(lazy_2, [...lazy_2.value, { id: 3, label: 'Three' }]);
+		};
 
-								switch (_$_.get(pattern).kind) {
-									case 'a':
-										result.push(switch_case_0);
-										return result;
+		var node_4 = _$_.sibling(button_3);
 
-									default:
-										result.push(switch_case_default);
-										return result;
-								}
-							});
-						}
+		{
+			var consequent_1 = (__anchor) => {
+				var div_5 = root_10();
 
-						_$_.append(__anchor, fragment_1);
-					};
+				{
+					_$_.for_keyed(
+						div_5,
+						() => lazy_2.value,
+						(__anchor, pattern_1) => {
+							var fragment_5 = root_11();
+							var node_5 = _$_.first_child_frag(fragment_5);
+
+							{
+								var switch_case_0_1 = (__anchor) => {
+									var fragment_6 = root_12();
+									var node_6 = _$_.first_child_frag(fragment_6);
+
+									_$_.try(
+										node_6,
+										(__anchor) => {
+											var p_1 = root_13();
+
+											{
+												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_14();
+
+											_$_.append(__anchor, p_2);
+										}
+									);
 
-					_$_.if(node, (__render) => {
-						if (_$_.get(pattern).enabled) __render(consequent);
-					});
-				}
+									_$_.append(__anchor, fragment_6);
+								};
 
-				_$_.append(__anchor, fragment);
-			},
-			4,
-			(pattern) => _$_.get(pattern).id
-		);
+								var switch_case_default_1 = (__anchor) => {
+									var fragment_7 = root_15();
+									var node_7 = _$_.first_child_frag(fragment_7);
 
-		_$_.pop(section_1);
-	}
+									_$_.try(
+										node_7,
+										(__anchor) => {
+											var p_3 = root_16();
 
-	_$_.append(__anchor, section_1);
-	_$_.pop_component();
-}
+											{
+												var expression_3 = _$_.child(p_3, true);
 
-export function MixedControlFlowReactive(__anchor, _, __block) {
-	_$_.push_component();
+												_$_.pop(p_3);
+											}
 
-	let lazy = _$_.track(true, __block, '5ae53d26');
-	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);
+											_$_.render(
+												(__prev) => {
+													var __a = `B:${_$_.get(pattern_1).label}`;
 
-	button_1.__click = () => {
-		_$_.set(lazy, !lazy.value);
-	};
+													if (__prev.a !== __a) {
+														_$_.set_text(expression_3, __prev.a = __a);
+													}
 
-	var button_2 = _$_.sibling(button_1);
+													var __b = `item item-${_$_.get(pattern_1).id}`;
 
-	button_2.__click = () => {
-		_$_.set(lazy_1, lazy_1.value === 'a' ? 'b' : 'a');
-	};
+													if (__prev.b !== __b) {
+														_$_.set_class(p_3, __prev.b = __b, void 0, true);
+													}
+												},
+												{ a: ' ', b: Symbol() }
+											);
 
-	var button_3 = _$_.sibling(button_2);
+											_$_.append(__anchor, p_3);
+										},
+										null,
+										(__anchor) => {
+											var p_4 = root_17();
 
-	button_3.__click = () => {
-		_$_.set(lazy_2, [...lazy_2.value, { id: 3, label: 'Three' }]);
-	};
+											_$_.append(__anchor, p_4);
+										}
+									);
 
-	var node_4 = _$_.sibling(button_3);
+									_$_.append(__anchor, fragment_7);
+								};
 
-	{
-		var consequent_1 = (__anchor) => {
-			var div_5 = root_10();
+								_$_.switch(node_5, () => {
+									var result = [];
 
-			{
-				_$_.for_keyed(
-					div_5,
-					() => lazy_2.value,
-					(__anchor, pattern_1) => {
-						var fragment_5 = root_11();
-						var node_5 = _$_.first_child_frag(fragment_5);
+									switch (lazy_1.value) {
+										case 'a':
+											result.push(switch_case_0_1);
+											return result;
 
-						{
-							var switch_case_0_1 = (__anchor) => {
-								var fragment_6 = root_12();
-								var node_6 = _$_.first_child_frag(fragment_6);
+										default:
+											result.push(switch_case_default_1);
+											return result;
+									}
+								});
+							}
 
-								_$_.try(
-									node_6,
-									(__anchor) => {
-										var p_1 = root_13();
+							_$_.append(__anchor, fragment_5);
+						},
+						4,
+						(pattern_1) => _$_.get(pattern_1).id
+					);
 
-										{
-											var expression_2 = _$_.child(p_1);
+					_$_.pop(div_5);
+				}
 
-											_$_.expression(expression_2, () => `A:${_$_.get(pattern_1).label}`);
-											_$_.pop(p_1);
-										}
+				_$_.append(__anchor, div_5);
+			};
 
-										_$_.render(() => {
-											_$_.set_class(p_1, `item item-${_$_.get(pattern_1).id}`, void 0, true);
-										});
+			_$_.if(node_4, (__render) => {
+				if (lazy.value) __render(consequent_1);
+			});
+		}
 
-										_$_.append(__anchor, p_1);
-									},
-									null,
-									(__anchor) => {
-										var p_2 = root_14();
+		_$_.append(__anchor, fragment_4);
+	});
+}
 
-										_$_.append(__anchor, p_2);
-									}
-								);
+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);
 
-								_$_.append(__anchor, fragment_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_default_1 = (__anchor) => {
-								var fragment_7 = root_15();
-								var node_7 = _$_.first_child_frag(fragment_7);
+						{
+							var switch_case_0_2 = (__anchor) => {
+								var fragment_11 = root_21();
+								var node_11 = _$_.first_child_frag(fragment_11);
 
 								_$_.try(
-									node_7,
+									node_11,
 									(__anchor) => {
-										var p_3 = root_16();
+										var fragment_12 = root_22();
+										var node_12 = _$_.first_child_frag(fragment_12);
 
-										{
-											var expression_3 = _$_.child(p_3);
-
-											_$_.expression(expression_3, () => `B:${_$_.get(pattern_1).label}`);
-											_$_.pop(p_3);
-										}
-
-										_$_.render(() => {
-											_$_.set_class(p_3, `item item-${_$_.get(pattern_1).id}`, void 0, true);
-										});
-
-										_$_.append(__anchor, p_3);
+										_$_.render_component(AsyncRow, node_12, { label: `row-${row}` });
+										_$_.append(__anchor, fragment_12);
 									},
 									null,
 									(__anchor) => {
-										var p_4 = root_17();
+										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);
+										}
 
-										_$_.append(__anchor, p_4);
+										_$_.append(__anchor, div_7);
 									}
 								);
 
-								_$_.append(__anchor, fragment_7);
+								_$_.append(__anchor, fragment_11);
 							};
 
-							_$_.switch(node_5, () => {
+							var switch_case_default_2 = (__anchor) => {
+								var div_8 = root_24();
+
+								_$_.append(__anchor, div_8);
+							};
+
+							_$_.switch(node_10, () => {
 								var result = [];
 
-								switch (lazy_1.value) {
-									case 'a':
-										result.push(switch_case_0_1);
+								switch (state) {
+									case 'slow':
+										result.push(switch_case_0_2);
 										return result;
 
 									default:
-										result.push(switch_case_default_1);
+										result.push(switch_case_default_2);
 										return result;
 								}
 							});
 						}
 
-						_$_.append(__anchor, fragment_5);
-					},
-					4,
-					(pattern_1) => _$_.get(pattern_1).id
-				);
-
-				_$_.pop(div_5);
-			}
-
-			_$_.append(__anchor, div_5);
-		};
-
-		_$_.if(node_4, (__render) => {
-			if (lazy.value) __render(consequent_1);
-		});
-	}
-
-	_$_.append(__anchor, fragment_4);
-	_$_.pop_component();
-}
-
-export function MixedControlFlowAsyncPending(__anchor, _, __block) {
-	_$_.push_component();
-
-	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);
-
-									AsyncRow(node_12, { label: `row-${row}` }, _$_.active_block);
-									_$_.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);
-
-										_$_.expression(expression_4, () => `pending ${row}`);
-										_$_.pop(div_7);
-									}
-
-									_$_.append(__anchor, div_7);
-								}
-							);
-
-							_$_.append(__anchor, fragment_11);
-						};
-
-						var switch_case_default_2 = (__anchor) => {
-							var div_8 = root_24();
-
-							_$_.append(__anchor, div_8);
-						};
-
-						_$_.switch(node_10, () => {
-							var result = [];
-
-							switch (state) {
-								case 'slow':
-									result.push(switch_case_0_2);
-									return result;
-
-								default:
-									result.push(switch_case_default_2);
-									return result;
-							}
-						});
-					}
-
-					_$_.append(__anchor, fragment_10);
-				};
+						_$_.append(__anchor, fragment_10);
+					};
 
-				_$_.if(node_9, (__render) => {
-					if (row === 1) __render(consequent_2);
-				});
-			}
+					_$_.if(node_9, (__render) => {
+						if (row === 1) __render(consequent_2);
+					});
+				}
 
-			_$_.append(__anchor, fragment_9);
-		},
-		0
-	);
+				_$_.append(__anchor, fragment_9);
+			},
+			0
+		);
 
-	_$_.append(__anchor, fragment_8);
-	_$_.pop_component();
+		_$_.append(__anchor, fragment_8);
+	});
 }
 
-function AsyncRow(__anchor, { label }, __block) {
-	_$_.push_component();
-
-	let lazy_3 = _$_.track_async(() => _$_.with_scope(__block, () => Promise.resolve(label)), __block, '10cc79a0');
-	var div_9 = root_25();
+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 expression_5 = _$_.child(div_9);
+		{
+			var expression_5 = _$_.child(div_9);
 
-		_$_.expression(expression_5, () => lazy_3.value);
-		_$_.pop(div_9);
-	}
+			_$_.expression(expression_5, () => lazy_3.value);
+			_$_.pop(div_9);
+		}
 
-	_$_.append(__anchor, div_9);
-	_$_.pop_component();
+		_$_.append(__anchor, div_9);
+	});
 }
 
 _$_.delegate(['click']);