ripple 0.4.1 → 0.4.3

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

@@ -1,7 +1,7 @@
 // @ts-nocheck
 import * as _$_ from 'ripple/internal/client';
 
-var root = _$_.template(`<div class="layout"><!></div>`, 0);
+var root = _$_.template(`<div class=layout><!>`);
 
 function Layout_render(__anchor, __block, { children }) {
 	var div = root();
@@ -18,7 +18,7 @@ function Layout_render(__anchor, __block, { children }) {
 
 Layout[_$_.$r] = Layout_render;
 
-var root_1 = _$_.template(`<div class="layout">before<!>after</div>`, 0);
+var root_1 = _$_.template(`<div class=layout>before<!>after`);
 
 function TextWrappedLayout_render(__anchor, __block, { children }) {
 	var div_1 = root_1();
@@ -36,7 +36,7 @@ function TextWrappedLayout_render(__anchor, __block, { children }) {
 
 TextWrappedLayout[_$_.$r] = TextWrappedLayout_render;
 
-var root_2 = _$_.template(`<div class="single">single</div>`, 0);
+var root_2 = _$_.template(`<div class=single>single`);
 
 function SingleChild_render(__anchor, __block) {
 	var div_2 = root_2();
@@ -46,7 +46,7 @@ function SingleChild_render(__anchor, __block) {
 
 SingleChild[_$_.$r] = SingleChild_render;
 
-var root_4 = _$_.template(`<h1>title</h1><p>description</p>`, 1, 2);
+var root_4 = _$_.template(`<h1>title</h1><p>description`, 1, 2);
 var root_3 = _$_.template(`<!>`, 1, 1);
 
 function MultiRootChild_render(__anchor, __block) {
@@ -81,7 +81,7 @@ function LayoutWithSingleChild_render(__anchor, __block) {
 
 LayoutWithSingleChild[_$_.$r] = LayoutWithSingleChild_render;
 
-var root_5 = _$_.template(`<!><div class="extra">extra</div>`, 1, 2);
+var root_5 = _$_.template(`<!><div class=extra>extra`, 1, 2);
 
 function LayoutWithMultipleChildren_render(__anchor, __block) {
 	_$_.render_component(Layout, __anchor, {

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

@@ -1,10 +1,19 @@
 // @ts-nocheck
 import * as _$_ from 'ripple/internal/client';
 
-var root = _$_.template(`<div><button class="increment">Increment</button><span class="count"> </span></div>`, 0);
+var root = _$_.template(`<div><button class=increment>Increment</button><span class=count>`);
+
+function render(__prev) {
+	var __a = __prev._a.value;
+
+	if (__prev.a !== __a) {
+		_$_.set_text_content(__prev._b, __a, __prev.a);
+		__prev.a = __a;
+	}
+}
 
 function ClickCounter_render(__anchor, __block) {
-	const count = _$_.track(0, __block, 'a070e3a7');
+	const count = _$_.track(0, __block, '18illt3');
 	var div = root();
 
 	{
@@ -15,24 +24,27 @@ function ClickCounter_render(__anchor, __block) {
 		};
 
 		var span = _$_.hydrating ? _$_.hydrate_sibling() : button.nextSibling;
-
-		{
-			var expression = _$_.hydrating ? _$_.hydrate_child() : span.firstChild;
-
-			_$_.expression(expression, () => count.value);
-			_$_.hydrating && _$_.pop(span);
-		}
 	}
 
+	_$_.render(render, { a: '', _a: count, _b: span });
 	_$_.append(__anchor, div);
 }
 
 ClickCounter[_$_.$r] = ClickCounter_render;
 
-var root_1 = _$_.template(`<div><button class="decrement">-</button><span class="count"> </span><button class="increment">+</button></div>`, 0);
+var root_1 = _$_.template(`<div><button class=decrement>-</button><span class=count></span><button class=increment>+`);
+
+function render_1(__prev) {
+	var __a = __prev._a.value;
+
+	if (__prev.a !== __a) {
+		_$_.set_text_content(__prev._b, __a, __prev.a);
+		__prev.a = __a;
+	}
+}
 
 function IncrementDecrement_render(__anchor, __block) {
-	const count = _$_.track(0, __block, '87fcabdd');
+	const count = _$_.track(0, __block, '11qc3q5');
 	var div_1 = root_1();
 
 	{
@@ -43,14 +55,6 @@ function IncrementDecrement_render(__anchor, __block) {
 		};
 
 		var span_1 = _$_.hydrating ? _$_.hydrate_sibling() : button_1.nextSibling;
-
-		{
-			var expression_1 = _$_.hydrating ? _$_.hydrate_child() : span_1.firstChild;
-
-			_$_.expression(expression_1, () => count.value);
-			_$_.hydrating && _$_.pop(span_1);
-		}
-
 		var button_2 = _$_.hydrating ? _$_.hydrate_sibling() : span_1.nextSibling;
 
 		button_2.__click = () => {
@@ -58,16 +62,33 @@ function IncrementDecrement_render(__anchor, __block) {
 		};
 	}
 
+	_$_.render(render_1, { a: '', _a: count, _b: span_1 });
 	_$_.append(__anchor, div_1);
 }
 
 IncrementDecrement[_$_.$r] = IncrementDecrement_render;
 
-var root_2 = _$_.template(`<div><button class="target">Target</button><span class="clicks"> </span><span class="hovers"> </span></div>`, 0);
+var root_2 = _$_.template(`<div><button class=target>Target</button><span class=clicks></span><span class=hovers>`);
+
+function render_2(__prev) {
+	var __a = __prev._a.value;
+
+	if (__prev.a !== __a) {
+		_$_.set_text_content(__prev._b, __a, __prev.a);
+		__prev.a = __a;
+	}
+
+	var __b = __prev._c.value;
+
+	if (__prev.b !== __b) {
+		_$_.set_text_content(__prev._d, __b, __prev.b);
+		__prev.b = __b;
+	}
+}
 
 function MultipleEvents_render(__anchor, __block) {
-	const clicks = _$_.track(0, __block, '41b9f0b0');
-	const hovers = _$_.track(0, __block, '72789f75');
+	const clicks = _$_.track(0, __block, 'i8ishc');
+	const hovers = _$_.track(0, __block, 'vrf59x');
 	var div_2 = root_2();
 
 	{
@@ -77,39 +98,34 @@ function MultipleEvents_render(__anchor, __block) {
 			clicks.value++;
 		};
 
-		_$_.event('MouseEnter', button_3, () => {
+		_$_.listen('mouseenter', button_3, () => {
 			hovers.value++;
 		});
 
 		var span_2 = _$_.hydrating ? _$_.hydrate_sibling() : button_3.nextSibling;
-
-		{
-			var expression_2 = _$_.hydrating ? _$_.hydrate_child() : span_2.firstChild;
-
-			_$_.expression(expression_2, () => clicks.value);
-			_$_.hydrating && _$_.pop(span_2);
-		}
-
 		var span_3 = _$_.hydrating ? _$_.hydrate_sibling() : span_2.nextSibling;
-
-		{
-			var expression_3 = _$_.hydrating ? _$_.hydrate_child() : span_3.firstChild;
-
-			_$_.expression(expression_3, () => hovers.value);
-			_$_.hydrating && _$_.pop(span_3);
-		}
 	}
 
+	_$_.render(render_2, { a: '', b: '', _a: clicks, _b: span_2, _c: hovers, _d: span_3 });
 	_$_.append(__anchor, div_2);
 }
 
 MultipleEvents[_$_.$r] = MultipleEvents_render;
 
-var root_3 = _$_.template(`<div><button class="btn">Click</button><span class="count"> </span><span class="action"> </span></div>`, 0);
+var root_3 = _$_.template(`<div><button class=btn>Click</button><span class=count></span><span class=action> `);
+
+function render_3(__prev) {
+	var __a = __prev._a.value;
+
+	if (__prev.a !== __a) {
+		_$_.set_text_content(__prev._b, __a, __prev.a);
+		__prev.a = __a;
+	}
+}
 
 function MultiStateUpdate_render(__anchor, __block) {
-	const count = _$_.track(0, __block, '5a375160');
-	const lastAction = _$_.track('none', __block, '3ceeb88c');
+	const count = _$_.track(0, __block, 'p155r4');
+	const lastAction = _$_.track('none', __block, 'gwmyks');
 
 	const handleClick = () => {
 		count.value++;
@@ -124,14 +140,6 @@ function MultiStateUpdate_render(__anchor, __block) {
 		button_4.__click = handleClick;
 
 		var span_4 = _$_.hydrating ? _$_.hydrate_sibling() : button_4.nextSibling;
-
-		{
-			var expression_4 = _$_.hydrating ? _$_.hydrate_child() : span_4.firstChild;
-
-			_$_.expression(expression_4, () => count.value);
-			_$_.hydrating && _$_.pop(span_4);
-		}
-
 		var span_5 = _$_.hydrating ? _$_.hydrate_sibling() : span_4.nextSibling;
 
 		{
@@ -142,23 +150,25 @@ function MultiStateUpdate_render(__anchor, __block) {
 		}
 	}
 
+	_$_.render(render_3, { a: '', _a: count, _b: span_4 });
 	_$_.append(__anchor, div_3);
 }
 
 MultiStateUpdate[_$_.$r] = MultiStateUpdate_render;
 
-var root_4 = _$_.template(`<div><button class="toggle"> </button></div>`, 0);
+var root_4 = _$_.template(`<div><button class=toggle>`);
 
-function render(__prev) {
-	var __a = __prev._isOn.value ? 'ON' : 'OFF';
+function render_4(__prev) {
+	var __a = __prev._a.value ? 'ON' : 'OFF';
 
 	if (__prev.a !== __a) {
-		_$_.set_text(__prev._expression_6, __prev.a = __a);
+		_$_.set_text_content(__prev._b, __a, __prev.a);
+		__prev.a = __a;
 	}
 }
 
 function ToggleButton_render(__anchor, __block) {
-	const isOn = _$_.track(false, __block, 'be823ec7');
+	const isOn = _$_.track(false, __block, '1guxsxz');
 	var div_4 = root_4();
 
 	{
@@ -167,25 +177,22 @@ function ToggleButton_render(__anchor, __block) {
 		button_5.__click = () => {
 			isOn.value = !isOn.value;
 		};
-
-		{
-			var expression_6 = _$_.hydrating ? _$_.hydrate_text() : button_5.firstChild;
-		}
 	}
 
-	_$_.render(render, { a: ' ', _isOn: isOn, _expression_6: expression_6 });
+	_$_.render(render_4, { a: '', _a: isOn, _b: button_5 });
 	_$_.append(__anchor, div_4);
 }
 
 ToggleButton[_$_.$r] = ToggleButton_render;
 
-var root_5 = _$_.template(`<button class="child-btn"> </button>`, 0);
+var root_5 = _$_.template(`<button class=child-btn>`);
 
-function render_1(__prev) {
-	var __a = __prev._props.label;
+function render_5(__prev) {
+	var __a = __prev._a.label;
 
 	if (__prev.a !== __a) {
-		_$_.set_text(__prev._expression_7, __prev.a = __a);
+		_$_.set_text_content(__prev._b, __a, __prev.a);
+		__prev.a = __a;
 	}
 }
 
@@ -193,21 +200,25 @@ 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 });
+	_$_.render(render_5, { a: '', _a: props, _b: button_6 });
 	_$_.append(__anchor, button_6);
 }
 
 ChildButton[_$_.$r] = ChildButton_render;
 
-var root_6 = _$_.template(`<div><!><span class="count"> </span></div>`, 0);
+var root_6 = _$_.template(`<div><span class=count>`);
+
+function render_6(__prev) {
+	var __a = __prev._a.value;
+
+	if (__prev.a !== __a) {
+		_$_.set_text_content(__prev._b, __a, __prev.a);
+		__prev.a = __a;
+	}
+}
 
 function ParentWithChildButton_render(__anchor, __block) {
-	const count = _$_.track(0, __block, 'dcc2e0f9');
+	const count = _$_.track(0, __block, '1p94et5');
 	var div_5 = root_6();
 
 	{
@@ -220,18 +231,12 @@ function ParentWithChildButton_render(__anchor, __block) {
 			label: "Click me"
 		});
 
-		var span_6 = _$_.hydrating ? _$_.hydrate_sibling() : node.nextSibling;
-
-		{
-			var expression_8 = _$_.hydrating ? _$_.hydrate_child() : span_6.firstChild;
-
-			_$_.expression(expression_8, () => count.value);
-			_$_.hydrating && _$_.pop(span_6);
-		}
+		var span_6 = _$_.hydrating ? _$_.hydrate_sibling() : node;
 
 		_$_.hydrating && _$_.pop(div_5);
 	}
 
+	_$_.render(render_6, { a: '', _a: count, _b: span_6 });
 	_$_.append(__anchor, div_5);
 }