ripple 0.3.127 → 0.4.0

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

@@ -2,229 +2,269 @@
 import * as _$_ from 'ripple/internal/client';
 
 var root = _$_.template(`<div><button class="increment">Increment</button><span class="count"> </span></div>`, 0);
-var root_1 = _$_.template(`<div><button class="decrement">-</button><span class="count"> </span><button class="increment">+</button></div>`, 0);
-var root_2 = _$_.template(`<div><button class="target">Target</button><span class="clicks"> </span><span class="hovers"> </span></div>`, 0);
-var root_3 = _$_.template(`<div><button class="btn">Click</button><span class="count"> </span><span class="action"> </span></div>`, 0);
-var root_4 = _$_.template(`<div><button class="toggle"> </button></div>`, 0);
-var root_5 = _$_.template(`<button class="child-btn"> </button>`, 0);
-var root_6 = _$_.template(`<div><!><span class="count"> </span></div>`, 0);
 
-import { track } from 'ripple';
+function ClickCounter_render(__anchor, __block) {
+	const count = _$_.track(0, __block, 'a070e3a7');
+	var div = root();
 
-export function ClickCounter() {
-	return _$_.tsrx_element((__anchor, __block) => {
-		let lazy = _$_.track(0, __block, 'a070e3a7');
-		var div = root();
+	{
+		var button = _$_.hydrating ? _$_.hydrate_child() : div.firstChild;
 
-		{
-			var button = _$_.child(div);
-
-			button.__click = () => {
-				_$_.update(lazy);
-			};
+		button.__click = () => {
+			count.value++;
+		};
 
-			var span = _$_.sibling(button);
+		var span = _$_.hydrating ? _$_.hydrate_sibling() : button.nextSibling;
 
-			{
-				var expression = _$_.child(span);
+		{
+			var expression = _$_.hydrating ? _$_.hydrate_child() : span.firstChild;
 
-				_$_.expression(expression, () => lazy.value);
-				_$_.pop(span);
-			}
+			_$_.expression(expression, () => count.value);
+			_$_.hydrating && _$_.pop(span);
 		}
+	}
 
-		_$_.append(__anchor, div);
-	});
+	_$_.append(__anchor, div);
 }
 
-export function IncrementDecrement() {
-	return _$_.tsrx_element((__anchor, __block) => {
-		let lazy_1 = _$_.track(0, __block, '87fcabdd');
-		var div_1 = root_1();
+ClickCounter[_$_.$r] = ClickCounter_render;
 
-		{
-			var button_1 = _$_.child(div_1);
+var root_1 = _$_.template(`<div><button class="decrement">-</button><span class="count"> </span><button class="increment">+</button></div>`, 0);
 
-			button_1.__click = () => {
-				_$_.update(lazy_1, -1);
-			};
+function IncrementDecrement_render(__anchor, __block) {
+	const count = _$_.track(0, __block, '87fcabdd');
+	var div_1 = root_1();
 
-			var span_1 = _$_.sibling(button_1);
+	{
+		var button_1 = _$_.hydrating ? _$_.hydrate_child() : div_1.firstChild;
 
-			{
-				var expression_1 = _$_.child(span_1);
+		button_1.__click = () => {
+			count.value--;
+		};
 
-				_$_.expression(expression_1, () => lazy_1.value);
-				_$_.pop(span_1);
-			}
+		var span_1 = _$_.hydrating ? _$_.hydrate_sibling() : button_1.nextSibling;
 
-			var button_2 = _$_.sibling(span_1);
+		{
+			var expression_1 = _$_.hydrating ? _$_.hydrate_child() : span_1.firstChild;
 
-			button_2.__click = () => {
-				_$_.update(lazy_1);
-			};
+			_$_.expression(expression_1, () => count.value);
+			_$_.hydrating && _$_.pop(span_1);
 		}
 
-		_$_.append(__anchor, div_1);
-	});
+		var button_2 = _$_.hydrating ? _$_.hydrate_sibling() : span_1.nextSibling;
+
+		button_2.__click = () => {
+			count.value++;
+		};
+	}
+
+	_$_.append(__anchor, div_1);
 }
 
-export function MultipleEvents() {
-	return _$_.tsrx_element((__anchor, __block) => {
-		let lazy_2 = _$_.track(0, __block, '41b9f0b0');
-		let lazy_3 = _$_.track(0, __block, '72789f75');
-		var div_2 = root_2();
+IncrementDecrement[_$_.$r] = IncrementDecrement_render;
 
-		{
-			var button_3 = _$_.child(div_2);
+var root_2 = _$_.template(`<div><button class="target">Target</button><span class="clicks"> </span><span class="hovers"> </span></div>`, 0);
+
+function MultipleEvents_render(__anchor, __block) {
+	const clicks = _$_.track(0, __block, '41b9f0b0');
+	const hovers = _$_.track(0, __block, '72789f75');
+	var div_2 = root_2();
 
-			button_3.__click = () => {
-				_$_.update(lazy_2);
-			};
+	{
+		var button_3 = _$_.hydrating ? _$_.hydrate_child() : div_2.firstChild;
 
-			_$_.event('MouseEnter', button_3, () => {
-				_$_.update(lazy_3);
-			});
+		button_3.__click = () => {
+			clicks.value++;
+		};
 
-			var span_2 = _$_.sibling(button_3);
+		_$_.event('MouseEnter', button_3, () => {
+			hovers.value++;
+		});
 
-			{
-				var expression_2 = _$_.child(span_2);
+		var span_2 = _$_.hydrating ? _$_.hydrate_sibling() : button_3.nextSibling;
 
-				_$_.expression(expression_2, () => lazy_2.value);
-				_$_.pop(span_2);
-			}
+		{
+			var expression_2 = _$_.hydrating ? _$_.hydrate_child() : span_2.firstChild;
 
-			var span_3 = _$_.sibling(span_2);
+			_$_.expression(expression_2, () => clicks.value);
+			_$_.hydrating && _$_.pop(span_2);
+		}
 
-			{
-				var expression_3 = _$_.child(span_3);
+		var span_3 = _$_.hydrating ? _$_.hydrate_sibling() : span_2.nextSibling;
 
-				_$_.expression(expression_3, () => lazy_3.value);
-				_$_.pop(span_3);
-			}
+		{
+			var expression_3 = _$_.hydrating ? _$_.hydrate_child() : span_3.firstChild;
+
+			_$_.expression(expression_3, () => hovers.value);
+			_$_.hydrating && _$_.pop(span_3);
 		}
+	}
 
-		_$_.append(__anchor, div_2);
-	});
+	_$_.append(__anchor, div_2);
 }
 
-export function MultiStateUpdate() {
-	return _$_.tsrx_element((__anchor, __block) => {
-		let lazy_4 = _$_.track(0, __block, '5a375160');
-		let lazy_5 = _$_.track('none', __block, '3ceeb88c');
+MultipleEvents[_$_.$r] = MultipleEvents_render;
 
-		const handleClick = () => {
-			_$_.update(lazy_4);
-			_$_.set(lazy_5, 'increment');
-		};
+var root_3 = _$_.template(`<div><button class="btn">Click</button><span class="count"> </span><span class="action"> </span></div>`, 0);
 
-		var div_3 = root_3();
+function MultiStateUpdate_render(__anchor, __block) {
+	const count = _$_.track(0, __block, '5a375160');
+	const lastAction = _$_.track('none', __block, '3ceeb88c');
 
-		{
-			var button_4 = _$_.child(div_3);
+	const handleClick = () => {
+		count.value++;
+		lastAction.value = 'increment';
+	};
+
+	var div_3 = root_3();
 
-			button_4.__click = handleClick;
+	{
+		var button_4 = _$_.hydrating ? _$_.hydrate_child() : div_3.firstChild;
 
-			var span_4 = _$_.sibling(button_4);
+		button_4.__click = handleClick;
 
-			{
-				var expression_4 = _$_.child(span_4);
+		var span_4 = _$_.hydrating ? _$_.hydrate_sibling() : button_4.nextSibling;
 
-				_$_.expression(expression_4, () => lazy_4.value);
-				_$_.pop(span_4);
-			}
+		{
+			var expression_4 = _$_.hydrating ? _$_.hydrate_child() : span_4.firstChild;
+
+			_$_.expression(expression_4, () => count.value);
+			_$_.hydrating && _$_.pop(span_4);
+		}
 
-			var span_5 = _$_.sibling(span_4);
+		var span_5 = _$_.hydrating ? _$_.hydrate_sibling() : span_4.nextSibling;
 
-			{
-				var expression_5 = _$_.child(span_5);
+		{
+			var expression_5 = _$_.hydrating ? _$_.hydrate_child() : span_5.firstChild;
 
-				_$_.expression(expression_5, () => lazy_5.value);
-				_$_.pop(span_5);
-			}
+			_$_.expression(expression_5, () => lastAction.value);
+			_$_.hydrating && _$_.pop(span_5);
 		}
+	}
 
-		_$_.append(__anchor, div_3);
-	});
+	_$_.append(__anchor, div_3);
 }
 
-export function ToggleButton() {
-	return _$_.tsrx_element((__anchor, __block) => {
-		let lazy_6 = _$_.track(false, __block, 'be823ec7');
-		var div_4 = root_4();
+MultiStateUpdate[_$_.$r] = MultiStateUpdate_render;
 
-		{
-			var button_5 = _$_.child(div_4);
+var root_4 = _$_.template(`<div><button class="toggle"> </button></div>`, 0);
 
-			button_5.__click = () => {
-				_$_.set(lazy_6, !lazy_6.value);
-			};
+function render(__prev) {
+	var __a = __prev._isOn.value ? 'ON' : 'OFF';
 
-			{
-				var expression_6 = _$_.child(button_5, true);
+	if (__prev.a !== __a) {
+		_$_.set_text(__prev._expression_6, __prev.a = __a);
+	}
+}
 
-				_$_.pop(button_5);
-			}
+function ToggleButton_render(__anchor, __block) {
+	const isOn = _$_.track(false, __block, 'be823ec7');
+	var div_4 = root_4();
+
+	{
+		var button_5 = _$_.hydrating ? _$_.hydrate_child() : div_4.firstChild;
+
+		button_5.__click = () => {
+			isOn.value = !isOn.value;
+		};
+
+		{
+			var expression_6 = _$_.hydrating ? _$_.hydrate_text() : button_5.firstChild;
 		}
+	}
 
-		_$_.render(() => {
-			_$_.set_text(expression_6, lazy_6.value ? 'ON' : 'OFF');
-		});
+	_$_.render(render, { a: ' ', _isOn: isOn, _expression_6: expression_6 });
+	_$_.append(__anchor, div_4);
+}
+
+ToggleButton[_$_.$r] = ToggleButton_render;
+
+var root_5 = _$_.template(`<button class="child-btn"> </button>`, 0);
+
+function render_1(__prev) {
+	var __a = __prev._props.label;
 
-		_$_.append(__anchor, div_4);
-	});
+	if (__prev.a !== __a) {
+		_$_.set_text(__prev._expression_7, __prev.a = __a);
+	}
 }
 
-export function ChildButton(props) {
-	return _$_.tsrx_element((__anchor, __block) => {
-		var button_6 = root_5();
+function ChildButton_render(__anchor, __block, props) {
+	var button_6 = root_5();
+
+	_$_.render_event('Click', button_6, () => props.onClick);
+
+	{
+		var expression_7 = _$_.hydrating ? _$_.hydrate_text() : button_6.firstChild;
+	}
+
+	_$_.render(render_1, { a: ' ', _props: props, _expression_7: expression_7 });
+	_$_.append(__anchor, button_6);
+}
+
+ChildButton[_$_.$r] = ChildButton_render;
+
+var root_6 = _$_.template(`<div><!><span class="count"> </span></div>`, 0);
+
+function ParentWithChildButton_render(__anchor, __block) {
+	const count = _$_.track(0, __block, 'dcc2e0f9');
+	var div_5 = root_6();
+
+	{
+		var node = _$_.hydrating ? _$_.hydrate_child() : div_5.firstChild;
 
-		_$_.render_event('Click', button_6, () => props.onClick);
+		_$_.render_component(ChildButton, node, {
+			onClick: () => {
+				count.value++;
+			},
+			label: "Click me"
+		});
+
+		var span_6 = _$_.hydrating ? _$_.hydrate_sibling() : node.nextSibling;
 
 		{
-			var expression_7 = _$_.child(button_6, true);
+			var expression_8 = _$_.hydrating ? _$_.hydrate_child() : span_6.firstChild;
 
-			_$_.pop(button_6);
+			_$_.expression(expression_8, () => count.value);
+			_$_.hydrating && _$_.pop(span_6);
 		}
 
-		_$_.render(() => {
-			_$_.set_text(expression_7, props.label);
-		});
+		_$_.hydrating && _$_.pop(div_5);
+	}
 
-		_$_.append(__anchor, button_6);
-	});
+	_$_.append(__anchor, div_5);
 }
 
-export function ParentWithChildButton() {
-	return _$_.tsrx_element((__anchor, __block) => {
-		let lazy_7 = _$_.track(0, __block, 'dcc2e0f9');
-		var div_5 = root_6();
+ParentWithChildButton[_$_.$r] = ParentWithChildButton_render;
 
-		{
-			var node = _$_.child(div_5);
+import { track } from 'ripple';
 
-			_$_.render_component(ChildButton, node, {
-				onClick: () => {
-					_$_.update(lazy_7);
-				},
-				label: "Click me"
-			});
+export function ClickCounter() {
+	return _$_.tsrx_element(ClickCounter_render);
+}
 
-			var span_6 = _$_.sibling(node);
+export function IncrementDecrement() {
+	return _$_.tsrx_element(IncrementDecrement_render);
+}
 
-			{
-				var expression_8 = _$_.child(span_6);
+export function MultipleEvents() {
+	return _$_.tsrx_element(MultipleEvents_render);
+}
 
-				_$_.expression(expression_8, () => lazy_7.value);
-				_$_.pop(span_6);
-			}
+export function MultiStateUpdate() {
+	return _$_.tsrx_element(MultiStateUpdate_render);
+}
 
-			_$_.pop(div_5);
-		}
+export function ToggleButton() {
+	return _$_.tsrx_element(ToggleButton_render);
+}
 
-		_$_.append(__anchor, div_5);
-	});
+export function ChildButton(props) {
+	return _$_.tsrx_element(ChildButton_render, props);
+}
+
+export function ParentWithChildButton() {
+	return _$_.tsrx_element(ParentWithChildButton_render);
 }
 
 _$_.delegate(['click']);