ripple 0.3.127 → 0.4.0

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

@@ -2,137 +2,129 @@
 import * as _$_ from 'ripple/internal/client';
 
 var root_1 = _$_.template(`<div class="portal-content">Portal content</div>`, 0);
-var root = _$_.template(`<div class="container"><h1>Main Content</h1><!></div>`, 0);
-var root_3 = _$_.template(`<div class="portal-content">Portal is visible</div>`, 0);
-var root_2 = _$_.template(`<div class="container"><button class="toggle">Toggle</button><!></div>`, 0);
-var root_5 = _$_.template(`<div class="portal-content">Modal content</div>`, 0);
-var root_4 = _$_.template(`<div><div class="main-content">Main page content</div><!><div class="footer">Footer</div></div>`, 0);
-var root_7 = _$_.template(`<div class="portal-content">Portal content</div>`, 0);
-var root_6 = _$_.template(`<div class="outer"><div class="inner"><span>Nested content</span></div><!></div>`, 0);
+var root = _$_.template(`<div class="container"><h1>Main Content</h1></div>`, 0);
 
-import { Portal, track } from 'ripple';
+function SimplePortal_render(__anchor, __block) {
+	var div = root();
 
-export function SimplePortal() {
-	return _$_.tsrx_element((__anchor, __block) => {
-		var div = root();
+	{
+		var h1 = _$_.hydrating ? _$_.hydrate_child() : div.firstChild;
+		var node = _$_.hydrating ? _$_.hydrate_sibling() : _$_.append_into(div);
 
-		{
-			var h1 = _$_.child(div);
-			var node = _$_.sibling(h1);
+		_$_.portal(node, () => typeof document !== 'undefined' ? document.body : null, (__anchor, __block) => {
+			var div_1 = root_1();
 
-			_$_.render_component(Portal, node, {
-				get target() {
-					return typeof document !== 'undefined' ? document.body : null;
-				},
+			_$_.append(__anchor, div_1);
+		});
 
-				children: _$_.tsrx_element((__anchor, __block) => {
-					var div_1 = root_1();
+		_$_.hydrating && _$_.pop(div);
+	}
 
-					_$_.append(__anchor, div_1);
-				})
-			});
+	_$_.append(__anchor, div);
+}
 
-			_$_.pop(div);
-		}
+SimplePortal[_$_.$r] = SimplePortal_render;
 
-		_$_.append(__anchor, div);
-	});
-}
+var root_3 = _$_.template(`<div class="portal-content">Portal is visible</div>`, 0);
 
-export function ConditionalPortal() {
-	return _$_.tsrx_element((__anchor, __block) => {
-		let lazy = _$_.track(true, __block, '4f6df174');
-		var div_2 = root_2();
+function consequent(__anchor, show) {
+	_$_.portal(__anchor, () => typeof document !== 'undefined' ? document.body : null, (__anchor, __block) => {
+		var div_3 = root_3();
 
-		{
-			var button = _$_.child(div_2);
+		_$_.append(__anchor, div_3);
+	});
+}
 
-			button.__click = () => _$_.set(lazy, !lazy.value);
+function if_1(show) {
+	if (show.value) return consequent;
+}
 
-			var node_1 = _$_.sibling(button);
+var root_2 = _$_.template(`<div class="container"><button class="toggle">Toggle</button><!></div>`, 0);
 
-			{
-				var consequent = (__anchor) => {
-					_$_.render_component(Portal, __anchor, {
-						get target() {
-							return typeof document !== 'undefined' ? document.body : null;
-						},
+function ConditionalPortal_render(__anchor, __block) {
+	const show = _$_.track(true, __block, '4f6df174');
+	var div_2 = root_2();
 
-						children: _$_.tsrx_element((__anchor, __block) => {
-							var div_3 = root_3();
+	{
+		var button = _$_.hydrating ? _$_.hydrate_child() : div_2.firstChild;
 
-							_$_.append(__anchor, div_3);
-						})
-					});
-				};
+		button.__click = () => show.value = !show.value;
 
-				_$_.if(node_1, (__render) => {
-					if (lazy.value) __render(consequent);
-				});
-			}
+		var node_1 = _$_.hydrating ? _$_.hydrate_sibling() : button.nextSibling;
 
-			_$_.pop(div_2);
-		}
+		_$_.if(node_1, if_1, false, show);
+		_$_.hydrating && _$_.pop(div_2);
+	}
 
-		_$_.append(__anchor, div_2);
-	});
+	_$_.append(__anchor, div_2);
 }
 
-export function PortalWithMainContent() {
-	return _$_.tsrx_element((__anchor, __block) => {
-		var div_4 = root_4();
+ConditionalPortal[_$_.$r] = ConditionalPortal_render;
 
-		{
-			var div_5 = _$_.child(div_4);
-			var node_2 = _$_.sibling(div_5);
+var root_5 = _$_.template(`<div class="portal-content">Modal content</div>`, 0);
+var root_4 = _$_.template(`<div><div class="main-content">Main page content</div><!><div class="footer">Footer</div></div>`, 0);
 
-			_$_.render_component(Portal, node_2, {
-				get target() {
-					return typeof document !== 'undefined' ? document.body : null;
-				},
+function PortalWithMainContent_render(__anchor, __block) {
+	var div_4 = root_4();
 
-				children: _$_.tsrx_element((__anchor, __block) => {
-					var div_6 = root_5();
+	{
+		var div_5 = _$_.hydrating ? _$_.hydrate_child() : div_4.firstChild;
+		var node_2 = _$_.hydrating ? _$_.hydrate_sibling() : div_5.nextSibling;
 
-					_$_.append(__anchor, div_6);
-				})
-			});
+		_$_.portal(node_2, () => typeof document !== 'undefined' ? document.body : null, (__anchor, __block) => {
+			var div_6 = root_5();
 
-			_$_.pop(div_4);
-		}
+			_$_.append(__anchor, div_6);
+		});
 
-		_$_.append(__anchor, div_4);
-	});
+		_$_.hydrating && _$_.pop(div_4);
+	}
+
+	_$_.append(__anchor, div_4);
 }
 
-export function NestedContentWithPortal() {
-	return _$_.tsrx_element((__anchor, __block) => {
-		var div_7 = root_6();
+PortalWithMainContent[_$_.$r] = PortalWithMainContent_render;
+
+var root_7 = _$_.template(`<div class="portal-content">Portal content</div>`, 0);
+var root_6 = _$_.template(`<div class="outer"><div class="inner"><span>Nested content</span></div></div>`, 0);
 
-		{
-			var div_8 = _$_.child(div_7);
+function NestedContentWithPortal_render(__anchor, __block) {
+	var div_7 = root_6();
 
-			_$_.pop(div_8);
+	{
+		var div_8 = _$_.hydrating ? _$_.hydrate_child() : div_7.firstChild;
+		var node_3 = _$_.hydrating ? _$_.hydrate_sibling() : _$_.append_into(div_7);
 
-			var node_3 = _$_.sibling(div_8);
+		_$_.portal(node_3, () => typeof document !== 'undefined' ? document.body : null, (__anchor, __block) => {
+			var div_9 = root_7();
 
-			_$_.render_component(Portal, node_3, {
-				get target() {
-					return typeof document !== 'undefined' ? document.body : null;
-				},
+			_$_.append(__anchor, div_9);
+		});
 
-				children: _$_.tsrx_element((__anchor, __block) => {
-					var div_9 = root_7();
+		_$_.hydrating && _$_.pop(div_7);
+	}
 
-					_$_.append(__anchor, div_9);
-				})
-			});
+	_$_.append(__anchor, div_7);
+}
 
-			_$_.pop(div_7);
-		}
+NestedContentWithPortal[_$_.$r] = NestedContentWithPortal_render;
 
-		_$_.append(__anchor, div_7);
-	});
+import { Portal, track } from 'ripple';
+
+export function SimplePortal() {
+	return _$_.tsrx_element(SimplePortal_render);
+}
+
+export function ConditionalPortal() {
+	return _$_.tsrx_element(ConditionalPortal_render);
+}
+
+export function PortalWithMainContent() {
+	return _$_.tsrx_element(PortalWithMainContent_render);
+}
+
+export function NestedContentWithPortal() {
+	return _$_.tsrx_element(NestedContentWithPortal_render);
 }
 
 _$_.delegate(['click']);

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

@@ -2,127 +2,184 @@
 import * as _$_ from 'ripple/internal/client';
 
 var root = _$_.template(`<div class="count"> </div>`, 0);
+
+function render(__prev) {
+	var __a = __prev._count.value;
+
+	if (__prev.a !== __a) {
+		_$_.set_text(__prev._expression, __prev.a = __a);
+	}
+}
+
+function TrackedState_render(__anchor, __block) {
+	const count = _$_.track(0, __block, 'c1818584');
+	var div = root();
+
+	{
+		var expression = _$_.hydrating ? _$_.hydrate_text() : div.firstChild;
+	}
+
+	_$_.render(render, { a: ' ', _count: count, _expression: expression });
+	_$_.append(__anchor, div);
+}
+
+TrackedState[_$_.$r] = TrackedState_render;
+
 var root_1 = _$_.template(`<div><span class="count"> </span></div>`, 0);
-var root_2 = _$_.template(`<div class="sum"> </div>`, 0);
-var root_3 = _$_.template(`<div class="multiple-tracked"><div class="x"> </div><div class="y"> </div><div class="z"> </div></div>`, 0);
-var root_4 = _$_.template(`<div class="name"> </div>`, 0);
 
-import { track } from 'ripple';
+function CounterWithInitial_render(__anchor, __block, props) {
+	const count = _$_.track(props.initial, __block, '03ea4348');
+	var div_1 = root_1();
 
-export function TrackedState() {
-	return _$_.tsrx_element((__anchor, __block) => {
-		let lazy = _$_.track(0, __block, 'c1818584');
-		var div = root();
+	{
+		var span = _$_.hydrating ? _$_.hydrate_child() : div_1.firstChild;
 
 		{
-			var expression = _$_.child(div);
+			var expression_1 = _$_.hydrating ? _$_.hydrate_child() : span.firstChild;
 
-			_$_.expression(expression, () => lazy.value);
-			_$_.pop(div);
+			_$_.expression(expression_1, () => count.value);
+			_$_.hydrating && _$_.pop(span);
 		}
+	}
 
-		_$_.append(__anchor, div);
-	});
+	_$_.append(__anchor, div_1);
 }
 
-export function CounterWithInitial(props) {
-	return _$_.tsrx_element((__anchor, __block) => {
-		let lazy_1 = _$_.track(props.initial, __block, '03ea4348');
-		var div_1 = root_1();
+CounterWithInitial[_$_.$r] = CounterWithInitial_render;
 
-		{
-			var span = _$_.child(div_1);
+function CounterWrapper_render(__anchor, __block) {
+	_$_.render_component(CounterWithInitial, __anchor, { initial: 5 });
+}
 
-			{
-				var expression_1 = _$_.child(span);
+CounterWrapper[_$_.$r] = CounterWrapper_render;
 
-				_$_.expression(expression_1, () => lazy_1.value);
-				_$_.pop(span);
-			}
-		}
+var root_2 = _$_.template(`<div class="sum"> </div>`, 0);
 
-		_$_.append(__anchor, div_1);
-	});
+function ComputedValues_render(__anchor, __block) {
+	const a = _$_.track(2, __block, 'b78281db');
+	const b = _$_.track(3, __block, 'a0cf6c6d');
+	const sum = () => a.value + b.value;
+	var div_2 = root_2();
+
+	{
+		var expression_2 = _$_.hydrating ? _$_.hydrate_child() : div_2.firstChild;
+
+		_$_.expression(expression_2, sum);
+		_$_.hydrating && _$_.pop(div_2);
+	}
+
+	_$_.append(__anchor, div_2);
 }
 
-export function CounterWrapper() {
-	return _$_.tsrx_element((__anchor, __block) => {
-		_$_.render_component(CounterWithInitial, __anchor, { initial: 5 });
-	});
+ComputedValues[_$_.$r] = ComputedValues_render;
+
+var root_3 = _$_.template(`<div class="multiple-tracked"><div class="x"> </div><div class="y"> </div><div class="z"> </div></div>`, 0);
+
+function render_1(__prev) {
+	var __a = __prev._x.value;
+
+	if (__prev.a !== __a) {
+		_$_.set_text(__prev._expression_3, __prev.a = __a);
+	}
+
+	var __b = __prev._y.value;
+
+	if (__prev.b !== __b) {
+		_$_.set_text(__prev._expression_4, __prev.b = __b);
+	}
+
+	var __c = __prev._z.value;
+
+	if (__prev.c !== __c) {
+		_$_.set_text(__prev._expression_5, __prev.c = __c);
+	}
 }
 
-export function ComputedValues() {
-	return _$_.tsrx_element((__anchor, __block) => {
-		let lazy_2 = _$_.track(2, __block, 'b78281db');
-		let lazy_3 = _$_.track(3, __block, 'a0cf6c6d');
-		const sum = () => lazy_2.value + lazy_3.value;
-		var div_2 = root_2();
+function MultipleTracked_render(__anchor, __block) {
+	const x = _$_.track(10, __block, '843522de');
+	const y = _$_.track(20, __block, '1308996d');
+	const z = _$_.track(30, __block, '048c3fd0');
+	var div_3 = root_3();
+
+	{
+		var div_4 = _$_.hydrating ? _$_.hydrate_child() : div_3.firstChild;
 
 		{
-			var expression_2 = _$_.child(div_2);
+			var expression_3 = _$_.hydrating ? _$_.hydrate_text() : div_4.firstChild;
+		}
 
-			_$_.expression(expression_2, sum);
-			_$_.pop(div_2);
+		var div_5 = _$_.hydrating ? _$_.hydrate_sibling() : div_4.nextSibling;
+
+		{
+			var expression_4 = _$_.hydrating ? _$_.hydrate_text() : div_5.firstChild;
 		}
 
-		_$_.append(__anchor, div_2);
+		var div_6 = _$_.hydrating ? _$_.hydrate_sibling() : div_5.nextSibling;
+
+		{
+			var expression_5 = _$_.hydrating ? _$_.hydrate_text() : div_6.firstChild;
+		}
+	}
+
+	_$_.render(render_1, {
+		a: ' ',
+		b: ' ',
+		c: ' ',
+		_x: x,
+		_expression_3: expression_3,
+		_y: y,
+		_expression_4: expression_4,
+		_z: z,
+		_expression_5: expression_5
 	});
-}
 
-export function MultipleTracked() {
-	return _$_.tsrx_element((__anchor, __block) => {
-		let lazy_4 = _$_.track(10, __block, '843522de');
-		let lazy_5 = _$_.track(20, __block, '1308996d');
-		let lazy_6 = _$_.track(30, __block, '048c3fd0');
-		var div_3 = root_3();
+	_$_.append(__anchor, div_3);
+}
 
-		{
-			var div_4 = _$_.child(div_3);
+MultipleTracked[_$_.$r] = MultipleTracked_render;
 
-			{
-				var expression_3 = _$_.child(div_4);
+var root_4 = _$_.template(`<div class="name"> </div>`, 0);
 
-				_$_.expression(expression_3, () => lazy_4.value);
-				_$_.pop(div_4);
-			}
+function DerivedState_render(__anchor, __block) {
+	const firstName = _$_.track('John', __block, '6015eeca');
+	const lastName = _$_.track('Doe', __block, '4fa9a20e');
+	const fullName = () => `${firstName.value} ${lastName.value}`;
+	var div_7 = root_4();
 
-			var div_5 = _$_.sibling(div_4);
+	{
+		var expression_6 = _$_.hydrating ? _$_.hydrate_child() : div_7.firstChild;
 
-			{
-				var expression_4 = _$_.child(div_5);
+		_$_.expression(expression_6, fullName);
+		_$_.hydrating && _$_.pop(div_7);
+	}
 
-				_$_.expression(expression_4, () => lazy_5.value);
-				_$_.pop(div_5);
-			}
+	_$_.append(__anchor, div_7);
+}
 
-			var div_6 = _$_.sibling(div_5);
+DerivedState[_$_.$r] = DerivedState_render;
 
-			{
-				var expression_5 = _$_.child(div_6);
+import { track } from 'ripple';
 
-				_$_.expression(expression_5, () => lazy_6.value);
-				_$_.pop(div_6);
-			}
-		}
+export function TrackedState() {
+	return _$_.tsrx_element(TrackedState_render);
+}
 
-		_$_.append(__anchor, div_3);
-	});
+export function CounterWithInitial(props) {
+	return _$_.tsrx_element(CounterWithInitial_render, props);
 }
 
-export function DerivedState() {
-	return _$_.tsrx_element((__anchor, __block) => {
-		let lazy_7 = _$_.track('John', __block, '6015eeca');
-		let lazy_8 = _$_.track('Doe', __block, '4fa9a20e');
-		const fullName = () => `${lazy_7.value} ${lazy_8.value}`;
-		var div_7 = root_4();
+export function CounterWrapper() {
+	return _$_.tsrx_element(CounterWrapper_render);
+}
 
-		{
-			var expression_6 = _$_.child(div_7);
+export function ComputedValues() {
+	return _$_.tsrx_element(ComputedValues_render);
+}
 
-			_$_.expression(expression_6, fullName);
-			_$_.pop(div_7);
-		}
+export function MultipleTracked() {
+	return _$_.tsrx_element(MultipleTracked_render);
+}
 
-		_$_.append(__anchor, div_7);
-	});
+export function DerivedState() {
+	return _$_.tsrx_element(DerivedState_render);
 }

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

@@ -2,34 +2,43 @@
 import * as _$_ from 'ripple/internal/client';
 
 var root = _$_.template(`<div class="ready">ready</div>`, 1, 1);
-var root_1 = _$_.template(`<div class="ready">ready</div>`, 1, 1);
 
-export function GuardReturnRenders() {
-	return _$_.tsrx_element((__anchor, __block) => {
-		const ready = true;
+function GuardReturnRenders_render(__anchor, __block) {
+	const ready = true;
 
-		if (!ready) {
-			return null;
-		}
+	if (!ready) {
+		return null;
+	}
 
-		var fragment = root();
+	var fragment = root();
 
-		_$_.append(__anchor, fragment);
-	});
+	_$_.append(__anchor, fragment);
 }
 
-export function GuardReturnNull() {
-	return _$_.tsrx_element((__anchor, __block) => {
-		const ready = false;
+GuardReturnRenders[_$_.$r] = GuardReturnRenders_render;
 
-		if (!ready) {
-			return null;
-		}
+var root_1 = _$_.template(`<div class="ready">ready</div>`, 1, 1);
 
-		var fragment_1 = root_1();
+function GuardReturnNull_render(__anchor, __block) {
+	const ready = false;
 
-		_$_.append(__anchor, fragment_1);
-	});
+	if (!ready) {
+		return null;
+	}
+
+	var fragment_1 = root_1();
+
+	_$_.append(__anchor, fragment_1);
+}
+
+GuardReturnNull[_$_.$r] = GuardReturnNull_render;
+
+export function GuardReturnRenders() {
+	return _$_.tsrx_element(GuardReturnRenders_render);
+}
+
+export function GuardReturnNull() {
+	return _$_.tsrx_element(GuardReturnNull_render);
 }
 
 export function StringReturn() {