ripple 0.3.8 → 0.3.10

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

@@ -2,15 +2,18 @@
 import * as _$_ from 'ripple/internal/client';
 
 var root = _$_.template(`<div class="layout"><!></div>`, 0);
-var root_1 = _$_.template(`<div class="single">single</div>`, 0);
-var root_2 = _$_.template(`<h1>title</h1><p>description</p>`, 1, 2);
-var root_3 = _$_.template(`<!>`, 1, 1);
-var root_5 = _$_.template(`<!>`, 1, 1);
+var root_1 = _$_.template(`<div class="layout">before<!>after</div>`, 0);
+var root_2 = _$_.template(`<div class="single">single</div>`, 0);
+var root_3 = _$_.template(`<h1>title</h1><p>description</p>`, 1, 2);
 var root_4 = _$_.template(`<!>`, 1, 1);
-var root_7 = _$_.template(`<!><div class="extra">extra</div>`, 1, 2);
 var root_6 = _$_.template(`<!>`, 1, 1);
+var root_5 = _$_.template(`<!>`, 1, 1);
+var root_8 = _$_.template(`<!><div class="extra">extra</div>`, 1, 2);
+var root_7 = _$_.template(`<!>`, 1, 1);
+var root_10 = _$_.template(`<!>`, 1, 1);
 var root_9 = _$_.template(`<!>`, 1, 1);
-var root_8 = _$_.template(`<!>`, 1, 1);
+var root_12 = _$_.template(`<!>`, 1, 1);
+var root_11 = _$_.template(`<!>`, 1, 1);
 
 export function Layout(__anchor, __props, __block) {
 	_$_.push_component();
@@ -18,29 +21,52 @@ export function Layout(__anchor, __props, __block) {
 	var div_1 = root();
 
 	{
-		var node = _$_.child(div_1);
+		var expression = _$_.child(div_1);
 
-		_$_.composite(() => __props.children, node, {});
 		_$_.pop(div_1);
 	}
 
+	_$_.render(() => {
+		_$_.expression(expression, () => __props.children);
+	});
+
 	_$_.append(__anchor, div_1);
 	_$_.pop_component();
 }
 
-export function SingleChild(__anchor, _, __block) {
+export function TextWrappedLayout(__anchor, __props, __block) {
 	_$_.push_component();
 
 	var div_2 = root_1();
 
+	{
+		var text = _$_.child(div_2);
+		var expression_1 = _$_.sibling(text);
+
+		_$_.pop(div_2);
+	}
+
+	_$_.render(() => {
+		_$_.expression(expression_1, () => __props.children);
+	});
+
 	_$_.append(__anchor, div_2);
 	_$_.pop_component();
 }
 
+export function SingleChild(__anchor, _, __block) {
+	_$_.push_component();
+
+	var div_3 = root_2();
+
+	_$_.append(__anchor, div_3);
+	_$_.pop_component();
+}
+
 export function MultiRootChild(__anchor, _, __block) {
 	_$_.push_component();
 
-	var fragment = root_2();
+	var fragment = root_3();
 
 	_$_.next();
 	_$_.append(__anchor, fragment, true);
@@ -50,10 +76,10 @@ export function MultiRootChild(__anchor, _, __block) {
 export function EmptyLayout(__anchor, _, __block) {
 	_$_.push_component();
 
-	var fragment_1 = root_3();
-	var node_1 = _$_.first_child_frag(fragment_1);
+	var fragment_1 = root_4();
+	var node = _$_.first_child_frag(fragment_1);
 
-	Layout(node_1, {}, _$_.active_block);
+	Layout(node, {}, _$_.active_block);
 	_$_.append(__anchor, fragment_1);
 	_$_.pop_component();
 }
@@ -61,22 +87,22 @@ export function EmptyLayout(__anchor, _, __block) {
 export function LayoutWithSingleChild(__anchor, _, __block) {
 	_$_.push_component();
 
-	var fragment_2 = root_4();
-	var node_2 = _$_.first_child_frag(fragment_2);
+	var fragment_2 = root_5();
+	var node_1 = _$_.first_child_frag(fragment_2);
 
 	Layout(
-		node_2,
+		node_1,
 		{
-			children(__anchor, _, __block) {
+			children: _$_.ripple_element(function render_children(__anchor, _, __block) {
 				_$_.push_component();
 
-				var fragment_3 = root_5();
-				var node_3 = _$_.first_child_frag(fragment_3);
+				var fragment_3 = root_6();
+				var node_2 = _$_.first_child_frag(fragment_3);
 
-				SingleChild(node_3, {}, _$_.active_block);
+				SingleChild(node_2, {}, _$_.active_block);
 				_$_.append(__anchor, fragment_3);
 				_$_.pop_component();
-			}
+			})
 		},
 		_$_.active_block
 	);
@@ -88,22 +114,22 @@ export function LayoutWithSingleChild(__anchor, _, __block) {
 export function LayoutWithMultipleChildren(__anchor, _, __block) {
 	_$_.push_component();
 
-	var fragment_4 = root_6();
-	var node_4 = _$_.first_child_frag(fragment_4);
+	var fragment_4 = root_7();
+	var node_3 = _$_.first_child_frag(fragment_4);
 
 	Layout(
-		node_4,
+		node_3,
 		{
-			children(__anchor, _, __block) {
+			children: _$_.ripple_element(function render_children(__anchor, _, __block) {
 				_$_.push_component();
 
-				var fragment_5 = root_7();
-				var node_5 = _$_.first_child_frag(fragment_5);
+				var fragment_5 = root_8();
+				var node_4 = _$_.first_child_frag(fragment_5);
 
-				SingleChild(node_5, {}, _$_.active_block);
+				SingleChild(node_4, {}, _$_.active_block);
 				_$_.append(__anchor, fragment_5);
 				_$_.pop_component();
-			}
+			})
 		},
 		_$_.active_block
 	);
@@ -115,26 +141,53 @@ export function LayoutWithMultipleChildren(__anchor, _, __block) {
 export function LayoutWithMultiRootChild(__anchor, _, __block) {
 	_$_.push_component();
 
-	var fragment_6 = root_8();
-	var node_6 = _$_.first_child_frag(fragment_6);
+	var fragment_6 = root_9();
+	var node_5 = _$_.first_child_frag(fragment_6);
 
 	Layout(
-		node_6,
+		node_5,
 		{
-			children(__anchor, _, __block) {
+			children: _$_.ripple_element(function render_children(__anchor, _, __block) {
 				_$_.push_component();
 
-				var fragment_7 = root_9();
-				var node_7 = _$_.first_child_frag(fragment_7);
+				var fragment_7 = root_10();
+				var node_6 = _$_.first_child_frag(fragment_7);
 
-				MultiRootChild(node_7, {}, _$_.active_block);
+				MultiRootChild(node_6, {}, _$_.active_block);
 				_$_.append(__anchor, fragment_7);
 				_$_.pop_component();
-			}
+			})
 		},
 		_$_.active_block
 	);
 
 	_$_.append(__anchor, fragment_6);
 	_$_.pop_component();
+}
+
+export function LayoutWithTextAroundChildren(__anchor, _, __block) {
+	_$_.push_component();
+
+	var fragment_8 = root_11();
+	var node_7 = _$_.first_child_frag(fragment_8);
+
+	TextWrappedLayout(
+		node_7,
+		{
+			children: _$_.ripple_element(function render_children(__anchor, _, __block) {
+				_$_.push_component();
+
+				var fragment_9 = root_12();
+				var node_8 = _$_.first_child_frag(fragment_9);
+
+				SingleChild(node_8, {}, _$_.active_block);
+				_$_.append(__anchor, fragment_9);
+				_$_.pop_component();
+			})
+		},
+		_$_.active_block
+	);
+
+	_$_.append(__anchor, fragment_8);
+	_$_.pop_component();
 }

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

@@ -27,14 +27,14 @@ export function ClickCounter(__anchor, _, __block) {
 		var span_1 = _$_.sibling(button_1);
 
 		{
-			var text = _$_.child(span_1, true);
+			var expression = _$_.child(span_1, true);
 
 			_$_.pop(span_1);
 		}
 	}
 
 	_$_.render(() => {
-		_$_.set_text(text, _$_.get(lazy));
+		_$_.set_text(expression, _$_.get(lazy));
 	});
 
 	_$_.append(__anchor, div_1);
@@ -57,7 +57,7 @@ export function IncrementDecrement(__anchor, _, __block) {
 		var span_2 = _$_.sibling(button_2);
 
 		{
-			var text_1 = _$_.child(span_2, true);
+			var expression_1 = _$_.child(span_2, true);
 
 			_$_.pop(span_2);
 		}
@@ -70,7 +70,7 @@ export function IncrementDecrement(__anchor, _, __block) {
 	}
 
 	_$_.render(() => {
-		_$_.set_text(text_1, _$_.get(lazy_1));
+		_$_.set_text(expression_1, _$_.get(lazy_1));
 	});
 
 	_$_.append(__anchor, div_2);
@@ -98,7 +98,7 @@ export function MultipleEvents(__anchor, _, __block) {
 		var span_3 = _$_.sibling(button_4);
 
 		{
-			var text_2 = _$_.child(span_3, true);
+			var expression_2 = _$_.child(span_3, true);
 
 			_$_.pop(span_3);
 		}
@@ -106,7 +106,7 @@ export function MultipleEvents(__anchor, _, __block) {
 		var span_4 = _$_.sibling(span_3);
 
 		{
-			var text_3 = _$_.child(span_4, true);
+			var expression_3 = _$_.child(span_4, true);
 
 			_$_.pop(span_4);
 		}
@@ -117,13 +117,13 @@ export function MultipleEvents(__anchor, _, __block) {
 			var __a = _$_.get(lazy_2);
 
 			if (__prev.a !== __a) {
-				_$_.set_text(text_2, __prev.a = __a);
+				_$_.set_text(expression_2, __prev.a = __a);
 			}
 
 			var __b = _$_.get(lazy_3);
 
 			if (__prev.b !== __b) {
-				_$_.set_text(text_3, __prev.b = __b);
+				_$_.set_text(expression_3, __prev.b = __b);
 			}
 		},
 		{ a: ' ', b: ' ' }
@@ -154,7 +154,7 @@ export function MultiStateUpdate(__anchor, _, __block) {
 		var span_5 = _$_.sibling(button_5);
 
 		{
-			var text_4 = _$_.child(span_5, true);
+			var expression_4 = _$_.child(span_5, true);
 
 			_$_.pop(span_5);
 		}
@@ -162,7 +162,7 @@ export function MultiStateUpdate(__anchor, _, __block) {
 		var span_6 = _$_.sibling(span_5);
 
 		{
-			var text_5 = _$_.child(span_6, true);
+			var expression_5 = _$_.child(span_6, true);
 
 			_$_.pop(span_6);
 		}
@@ -173,13 +173,13 @@ export function MultiStateUpdate(__anchor, _, __block) {
 			var __a = _$_.get(lazy_4);
 
 			if (__prev.a !== __a) {
-				_$_.set_text(text_4, __prev.a = __a);
+				_$_.set_text(expression_4, __prev.a = __a);
 			}
 
 			var __b = _$_.get(lazy_5);
 
 			if (__prev.b !== __b) {
-				_$_.set_text(text_5, __prev.b = __b);
+				_$_.set_text(expression_5, __prev.b = __b);
 			}
 		},
 		{ a: ' ', b: ' ' }
@@ -203,14 +203,14 @@ export function ToggleButton(__anchor, _, __block) {
 		};
 
 		{
-			var text_6 = _$_.child(button_6, true);
+			var expression_6 = _$_.child(button_6, true);
 
 			_$_.pop(button_6);
 		}
 	}
 
 	_$_.render(() => {
-		_$_.set_text(text_6, _$_.get(lazy_6) ? 'ON' : 'OFF');
+		_$_.set_text(expression_6, _$_.get(lazy_6) ? 'ON' : 'OFF');
 	});
 
 	_$_.append(__anchor, div_5);
@@ -225,13 +225,13 @@ export function ChildButton(__anchor, props, __block) {
 	_$_.render_event('Click', button_7, () => props.onClick);
 
 	{
-		var text_7 = _$_.child(button_7, true);
+		var expression_7 = _$_.child(button_7, true);
 
 		_$_.pop(button_7);
 	}
 
 	_$_.render(() => {
-		_$_.set_text(text_7, props.label);
+		_$_.set_text(expression_7, props.label);
 	});
 
 	_$_.append(__anchor, button_7);
@@ -261,7 +261,7 @@ export function ParentWithChildButton(__anchor, _, __block) {
 		var span_7 = _$_.sibling(node);
 
 		{
-			var text_8 = _$_.child(span_7, true);
+			var expression_8 = _$_.child(span_7, true);
 
 			_$_.pop(span_7);
 		}
@@ -270,7 +270,7 @@ export function ParentWithChildButton(__anchor, _, __block) {
 	}
 
 	_$_.render(() => {
-		_$_.set_text(text_8, _$_.get(lazy_7));
+		_$_.set_text(expression_8, _$_.get(lazy_7));
 	});
 
 	_$_.append(__anchor, div_6);