ripple 0.3.9 → 0.3.11

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

@@ -80,9 +80,9 @@ export function StaticForLoop(__anchor, _, __block) {
 				var li_1 = root_1();
 
 				{
-					var text_1 = _$_.child(li_1, true);
+					var expression = _$_.child(li_1, true);
 
-					text_1.nodeValue = item;
+					_$_.expression(expression, () => item);
 					_$_.pop(li_1);
 				}
 
@@ -112,15 +112,12 @@ export function ForLoopWithIndex(__anchor, _, __block) {
 				var li_2 = root_3();
 
 				{
-					var text_2 = _$_.child(li_2, true);
+					var expression_1 = _$_.child(li_2, true);
 
+					_$_.expression(expression_1, () => `${_$_.get(i)}: ${item}`);
 					_$_.pop(li_2);
 				}
 
-				_$_.render(() => {
-					_$_.set_text(text_2, `${_$_.get(i)}: ${item}`);
-				});
-
 				_$_.append(__anchor, li_2);
 			},
 			12
@@ -152,15 +149,12 @@ export function KeyedForLoop(__anchor, _, __block) {
 				var li_3 = root_5();
 
 				{
-					var text_3 = _$_.child(li_3, true);
+					var expression_2 = _$_.child(li_3, true);
 
+					_$_.expression(expression_2, () => _$_.get(pattern).name);
 					_$_.pop(li_3);
 				}
 
-				_$_.render(() => {
-					_$_.set_text(text_3, _$_.get(pattern).name);
-				});
-
 				_$_.append(__anchor, li_3);
 			},
 			4,
@@ -195,9 +189,9 @@ export function ReactiveForLoopAdd(__anchor, _, __block) {
 				var li_4 = root_7();
 
 				{
-					var text_4 = _$_.child(li_4, true);
+					var expression_3 = _$_.child(li_4, true);
 
-					text_4.nodeValue = item;
+					_$_.expression(expression_3, () => item);
 					_$_.pop(li_4);
 				}
 
@@ -235,9 +229,9 @@ export function ReactiveForLoopRemove(__anchor, _, __block) {
 				var li_5 = root_9();
 
 				{
-					var text_5 = _$_.child(li_5, true);
+					var expression_4 = _$_.child(li_5, true);
 
-					text_5.nodeValue = item;
+					_$_.expression(expression_4, () => item);
 					_$_.pop(li_5);
 				}
 
@@ -271,9 +265,9 @@ export function ForLoopInteractive(__anchor, _, __block) {
 					var span_1 = _$_.child(div_2);
 
 					{
-						var text_6 = _$_.child(span_1, true);
+						var expression_5 = _$_.child(span_1, true);
 
-						text_6.nodeValue = count;
+						_$_.expression(expression_5, () => count);
 						_$_.pop(span_1);
 					}
 
@@ -324,9 +318,9 @@ export function NestedForLoop(__anchor, _, __block) {
 							var span_2 = root_14();
 
 							{
-								var text_7 = _$_.child(span_2, true);
+								var expression_6 = _$_.child(span_2, true);
 
-								text_7.nodeValue = cell;
+								_$_.expression(expression_6, () => cell);
 								_$_.pop(span_2);
 							}
 
@@ -372,9 +366,9 @@ export function EmptyForLoop(__anchor, _, __block) {
 				var span_3 = root_16();
 
 				{
-					var text_8 = _$_.child(span_3, true);
+					var expression_7 = _$_.child(span_3, true);
 
-					text_8.nodeValue = item;
+					_$_.expression(expression_7, () => item);
 					_$_.pop(span_3);
 				}
 
@@ -411,42 +405,25 @@ export function ForLoopComplexObjects(__anchor, _, __block) {
 					var span_4 = _$_.child(div_7);
 
 					{
-						var text_9 = _$_.child(span_4, true);
+						var expression_8 = _$_.child(span_4, true);
 
+						_$_.expression(expression_8, () => _$_.get(pattern_1).name);
 						_$_.pop(span_4);
 					}
 
 					var span_5 = _$_.sibling(span_4);
 
 					{
-						var text_10 = _$_.child(span_5, true);
+						var expression_9 = _$_.child(span_5, true);
 
+						_$_.expression(expression_9, () => _$_.get(pattern_1).role);
 						_$_.pop(span_5);
 					}
 				}
 
-				_$_.render(
-					(__prev) => {
-						var __a = _$_.get(pattern_1).name;
-
-						if (__prev.a !== __a) {
-							_$_.set_text(text_9, __prev.a = __a);
-						}
-
-						var __b = _$_.get(pattern_1).role;
-
-						if (__prev.b !== __b) {
-							_$_.set_text(text_10, __prev.b = __b);
-						}
-
-						var __c = `user-${_$_.get(pattern_1).id}`;
-
-						if (__prev.c !== __c) {
-							_$_.set_class(div_7, __prev.c = __c, void 0, true);
-						}
-					},
-					{ a: ' ', b: ' ', c: Symbol() }
-				);
+				_$_.render(() => {
+					_$_.set_class(div_7, `user-${_$_.get(pattern_1).id}`, void 0, true);
+				});
 
 				_$_.append(__anchor, div_7);
 			},
@@ -492,27 +469,15 @@ export function KeyedForLoopReorder(__anchor, _, __block) {
 				var li_6 = root_20();
 
 				{
-					var text_11 = _$_.child(li_6, true);
+					var expression_10 = _$_.child(li_6, true);
 
+					_$_.expression(expression_10, () => _$_.get(pattern_2).name);
 					_$_.pop(li_6);
 				}
 
-				_$_.render(
-					(__prev) => {
-						var __a = _$_.get(pattern_2).name;
-
-						if (__prev.a !== __a) {
-							_$_.set_text(text_11, __prev.a = __a);
-						}
-
-						var __b = `item-${_$_.get(pattern_2).id}`;
-
-						if (__prev.b !== __b) {
-							_$_.set_class(li_6, __prev.b = __b, void 0, true);
-						}
-					},
-					{ a: ' ', b: Symbol() }
-				);
+				_$_.render(() => {
+					_$_.set_class(li_6, `item-${_$_.get(pattern_2).id}`, void 0, true);
+				});
 
 				_$_.append(__anchor, li_6);
 			},
@@ -549,27 +514,15 @@ export function KeyedForLoopUpdate(__anchor, _, __block) {
 				var li_7 = root_22();
 
 				{
-					var text_12 = _$_.child(li_7, true);
+					var expression_11 = _$_.child(li_7, true);
 
+					_$_.expression(expression_11, () => _$_.get(pattern_3).name);
 					_$_.pop(li_7);
 				}
 
-				_$_.render(
-					(__prev) => {
-						var __a = _$_.get(pattern_3).name;
-
-						if (__prev.a !== __a) {
-							_$_.set_text(text_12, __prev.a = __a);
-						}
-
-						var __b = `item-${_$_.get(pattern_3).id}`;
-
-						if (__prev.b !== __b) {
-							_$_.set_class(li_7, __prev.b = __b, void 0, true);
-						}
-					},
-					{ a: ' ', b: Symbol() }
-				);
+				_$_.render(() => {
+					_$_.set_class(li_7, `item-${_$_.get(pattern_3).id}`, void 0, true);
+				});
 
 				_$_.append(__anchor, li_7);
 			},
@@ -608,9 +561,9 @@ export function ForLoopMixedOperations(__anchor, _, __block) {
 				_$_.set_class(li_8, `item-${item}`, void 0, true);
 
 				{
-					var text_13 = _$_.child(li_8, true);
+					var expression_12 = _$_.child(li_8, true);
 
-					text_13.nodeValue = item;
+					_$_.expression(expression_12, () => item);
 					_$_.pop(li_8);
 				}
 
@@ -659,9 +612,9 @@ export function ForLoopInsideIf(__anchor, _, __block) {
 						var li_9 = root_27();
 
 						{
-							var text_14 = _$_.child(li_9, true);
+							var expression_13 = _$_.child(li_9, true);
 
-							text_14.nodeValue = item;
+							_$_.expression(expression_13, () => item);
 							_$_.pop(li_9);
 						}
 
@@ -706,9 +659,9 @@ export function ForLoopEmptyToPopulated(__anchor, _, __block) {
 				var li_10 = root_29();
 
 				{
-					var text_15 = _$_.child(li_10, true);
+					var expression_14 = _$_.child(li_10, true);
 
-					text_15.nodeValue = item;
+					_$_.expression(expression_14, () => item);
 					_$_.pop(li_10);
 				}
 
@@ -746,9 +699,9 @@ export function ForLoopPopulatedToEmpty(__anchor, _, __block) {
 				var li_11 = root_31();
 
 				{
-					var text_16 = _$_.child(li_11, true);
+					var expression_15 = _$_.child(li_11, true);
 
-					text_16.nodeValue = item;
+					_$_.expression(expression_15, () => item);
 					_$_.pop(li_11);
 				}
 
@@ -802,9 +755,9 @@ export function NestedForLoopReactive(__anchor, _, __block) {
 							var span_6 = root_34();
 
 							{
-								var text_17 = _$_.child(span_6, true);
+								var expression_16 = _$_.child(span_6, true);
 
-								text_17.nodeValue = cell;
+								_$_.expression(expression_16, () => cell);
 								_$_.pop(span_6);
 							}
 
@@ -870,8 +823,9 @@ export function ForLoopDeeplyNested(__anchor, _, __block) {
 					var h2_1 = _$_.child(div_11);
 
 					{
-						var text_18 = _$_.child(h2_1, true);
+						var expression_17 = _$_.child(h2_1, true);
 
+						_$_.expression(expression_17, () => _$_.get(pattern_4).name);
 						_$_.pop(h2_1);
 					}
 
@@ -887,8 +841,9 @@ export function ForLoopDeeplyNested(__anchor, _, __block) {
 								var h3_1 = _$_.child(div_12);
 
 								{
-									var text_19 = _$_.child(h3_1, true);
+									var expression_18 = _$_.child(h3_1, true);
 
+									_$_.expression(expression_18, () => _$_.get(pattern_5).name);
 									_$_.pop(h3_1);
 								}
 
@@ -902,9 +857,9 @@ export function ForLoopDeeplyNested(__anchor, _, __block) {
 											var li_12 = root_38();
 
 											{
-												var text_20 = _$_.child(li_12, true);
+												var expression_19 = _$_.child(li_12, true);
 
-												text_20.nodeValue = member;
+												_$_.expression(expression_19, () => member);
 												_$_.pop(li_12);
 											}
 
@@ -917,22 +872,9 @@ export function ForLoopDeeplyNested(__anchor, _, __block) {
 								}
 							}
 
-							_$_.render(
-								(__prev) => {
-									var __a = _$_.get(pattern_5).name;
-
-									if (__prev.a !== __a) {
-										_$_.set_text(text_19, __prev.a = __a);
-									}
-
-									var __b = `team-${_$_.get(pattern_5).id}`;
-
-									if (__prev.b !== __b) {
-										_$_.set_class(div_12, __prev.b = __b, void 0, true);
-									}
-								},
-								{ a: ' ', b: Symbol() }
-							);
+							_$_.render(() => {
+								_$_.set_class(div_12, `team-${_$_.get(pattern_5).id}`, void 0, true);
+							});
 
 							_$_.append(__anchor, div_12);
 						},
@@ -943,22 +885,9 @@ export function ForLoopDeeplyNested(__anchor, _, __block) {
 					_$_.pop(div_11);
 				}
 
-				_$_.render(
-					(__prev) => {
-						var __a = _$_.get(pattern_4).name;
-
-						if (__prev.a !== __a) {
-							_$_.set_text(text_18, __prev.a = __a);
-						}
-
-						var __b = `dept-${_$_.get(pattern_4).id}`;
-
-						if (__prev.b !== __b) {
-							_$_.set_class(div_11, __prev.b = __b, void 0, true);
-						}
-					},
-					{ a: ' ', b: Symbol() }
-				);
+				_$_.render(() => {
+					_$_.set_class(div_11, `dept-${_$_.get(pattern_4).id}`, void 0, true);
+				});
 
 				_$_.append(__anchor, div_11);
 			},
@@ -994,27 +923,15 @@ export function ForLoopIndexUpdate(__anchor, _, __block) {
 				var li_13 = root_40();
 
 				{
-					var text_21 = _$_.child(li_13, true);
+					var expression_20 = _$_.child(li_13, true);
 
+					_$_.expression(expression_20, () => `[${_$_.get(i)}] ${item}`);
 					_$_.pop(li_13);
 				}
 
-				_$_.render(
-					(__prev) => {
-						var __a = `[${_$_.get(i)}] ${item}`;
-
-						if (__prev.a !== __a) {
-							_$_.set_text(text_21, __prev.a = __a);
-						}
-
-						var __b = `item-${_$_.get(i)}`;
-
-						if (__prev.b !== __b) {
-							_$_.set_class(li_13, __prev.b = __b, void 0, true);
-						}
-					},
-					{ a: ' ', b: Symbol() }
-				);
+				_$_.render(() => {
+					_$_.set_class(li_13, `item-${_$_.get(i)}`, void 0, true);
+				});
 
 				_$_.append(__anchor, li_13);
 			},
@@ -1064,32 +981,27 @@ export function KeyedForLoopWithIndex(__anchor, _, __block) {
 				var li_14 = root_42();
 
 				{
-					var text_22 = _$_.child(li_14, true);
+					var expression_21 = _$_.child(li_14, true);
 
+					_$_.expression(expression_21, () => `[${_$_.get(i)}] ${_$_.get(pattern_6).id}: ${_$_.get(pattern_6).value}`);
 					_$_.pop(li_14);
 				}
 
 				_$_.render(
 					(__prev) => {
-						var __a = `[${_$_.get(i)}] ${_$_.get(pattern_6).id}: ${_$_.get(pattern_6).value}`;
+						var __a = _$_.get(i);
 
 						if (__prev.a !== __a) {
-							_$_.set_text(text_22, __prev.a = __a);
+							_$_.set_attribute(li_14, 'data-index', __prev.a = __a);
 						}
 
-						var __b = _$_.get(i);
+						var __b = `item-${_$_.get(pattern_6).id}`;
 
 						if (__prev.b !== __b) {
-							_$_.set_attribute(li_14, 'data-index', __prev.b = __b);
-						}
-
-						var __c = `item-${_$_.get(pattern_6).id}`;
-
-						if (__prev.c !== __c) {
-							_$_.set_class(li_14, __prev.c = __c, void 0, true);
+							_$_.set_class(li_14, __prev.b = __b, void 0, true);
 						}
 					},
-					{ a: ' ', b: void 0, c: Symbol() }
+					{ a: void 0, b: Symbol() }
 				);
 
 				_$_.append(__anchor, li_14);
@@ -1126,9 +1038,9 @@ export function ForLoopWithSiblings(__anchor, _, __block) {
 				_$_.set_class(div_14, `item-${item}`, void 0, true);
 
 				{
-					var text_23 = _$_.child(div_14, true);
+					var expression_22 = _$_.child(div_14, true);
 
-					text_23.nodeValue = item;
+					_$_.expression(expression_22, () => item);
 					_$_.pop(div_14);
 				}
 
@@ -1213,8 +1125,9 @@ function TodoItem(__anchor, props, __block) {
 		var span_7 = _$_.sibling(input_1);
 
 		{
-			var text_24 = _$_.child(span_7, true);
+			var expression_23 = _$_.child(span_7, true);
 
+			_$_.expression(expression_23, () => props.text);
 			_$_.pop(span_7);
 		}
 	}
@@ -1227,25 +1140,19 @@ function TodoItem(__anchor, props, __block) {
 				_$_.set_checked(input_1, __prev.a = __a);
 			}
 
-			var __b = props.text;
+			var __b = _$_.get(lazy_14) ? 'completed' : 'pending';
 
 			if (__prev.b !== __b) {
-				_$_.set_text(text_24, __prev.b = __b);
+				_$_.set_class(span_7, __prev.b = __b, void 0, true);
 			}
 
-			var __c = _$_.get(lazy_14) ? 'completed' : 'pending';
+			var __c = `todo-${props.id}`;
 
 			if (__prev.c !== __c) {
-				_$_.set_class(span_7, __prev.c = __c, void 0, true);
-			}
-
-			var __d = `todo-${props.id}`;
-
-			if (__prev.d !== __d) {
-				_$_.set_class(div_16, __prev.d = __d, void 0, true);
+				_$_.set_class(div_16, __prev.c = __c, void 0, true);
 			}
 		},
-		{ a: void 0, b: ' ', c: Symbol(), d: Symbol() }
+		{ a: void 0, b: Symbol(), c: Symbol() }
 	);
 
 	_$_.append(__anchor, div_16);
@@ -1266,9 +1173,9 @@ export function ForLoopSingleItem(__anchor, _, __block) {
 				var li_15 = root_49();
 
 				{
-					var text_25 = _$_.child(li_15, true);
+					var expression_24 = _$_.child(li_15, true);
 
-					text_25.nodeValue = item;
+					_$_.expression(expression_24, () => item);
 					_$_.pop(li_15);
 				}
 
@@ -1307,9 +1214,9 @@ export function ForLoopAddAtBeginning(__anchor, _, __block) {
 				_$_.set_class(li_16, `item-${item}`, void 0, true);
 
 				{
-					var text_26 = _$_.child(li_16, true);
+					var expression_25 = _$_.child(li_16, true);
 
-					text_26.nodeValue = item;
+					_$_.expression(expression_25, () => item);
 					_$_.pop(li_16);
 				}
 
@@ -1352,9 +1259,9 @@ export function ForLoopAddInMiddle(__anchor, _, __block) {
 				_$_.set_class(li_17, `item-${item}`, void 0, true);
 
 				{
-					var text_27 = _$_.child(li_17, true);
+					var expression_26 = _$_.child(li_17, true);
 
-					text_27.nodeValue = item;
+					_$_.expression(expression_26, () => item);
 					_$_.pop(li_17);
 				}
 
@@ -1394,9 +1301,9 @@ export function ForLoopRemoveFromMiddle(__anchor, _, __block) {
 				_$_.set_class(li_18, `item-${item}`, void 0, true);
 
 				{
-					var text_28 = _$_.child(li_18, true);
+					var expression_27 = _$_.child(li_18, true);
 
-					text_28.nodeValue = item;
+					_$_.expression(expression_27, () => item);
 					_$_.pop(li_18);
 				}
 
@@ -1427,9 +1334,9 @@ export function ForLoopLargeList(__anchor, _, __block) {
 				var li_19 = root_57();
 
 				{
-					var text_29 = _$_.child(li_19, true);
+					var expression_28 = _$_.child(li_19, true);
 
-					text_29.nodeValue = item;
+					_$_.expression(expression_28, () => item);
 					_$_.pop(li_19);
 				}
 
@@ -1475,9 +1382,9 @@ export function ForLoopSwap(__anchor, _, __block) {
 				_$_.set_class(li_20, `item-${item}`, void 0, true);
 
 				{
-					var text_30 = _$_.child(li_20, true);
+					var expression_29 = _$_.child(li_20, true);
 
-					text_30.nodeValue = item;
+					_$_.expression(expression_29, () => item);
 					_$_.pop(li_20);
 				}
 
@@ -1517,9 +1424,9 @@ export function ForLoopReverse(__anchor, _, __block) {
 				_$_.set_class(li_21, `item-${item}`, void 0, true);
 
 				{
-					var text_31 = _$_.child(li_21, true);
+					var expression_30 = _$_.child(li_21, true);
 
-					text_31.nodeValue = item;
+					_$_.expression(expression_30, () => item);
 					_$_.pop(li_21);
 				}
 

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

@@ -40,8 +40,9 @@ export function ReactiveTitle(__anchor, _, __block) {
 		var span_1 = _$_.child(div_2);
 
 		{
-			var text = _$_.child(span_1, true);
+			var expression = _$_.child(span_1, true);
 
+			_$_.expression(expression, () => _$_.get(lazy));
 			_$_.pop(span_1);
 		}
 	}
@@ -52,10 +53,6 @@ export function ReactiveTitle(__anchor, _, __block) {
 		});
 	});
 
-	_$_.render(() => {
-		_$_.set_text(text, _$_.get(lazy));
-	});
-
 	_$_.append(__anchor, div_2);
 	_$_.pop_component();
 }
@@ -84,8 +81,9 @@ export function ReactiveMetaTags(__anchor, _, __block) {
 	var div_4 = root_4();
 
 	{
-		var text_1 = _$_.child(div_4, true);
+		var expression_1 = _$_.child(div_4, true);
 
+		_$_.expression(expression_1, () => _$_.get(lazy_1));
 		_$_.pop(div_4);
 	}
 
@@ -97,10 +95,6 @@ export function ReactiveMetaTags(__anchor, _, __block) {
 		_$_.append(__anchor, meta_1);
 	});
 
-	_$_.render(() => {
-		_$_.set_text(text_1, _$_.get(lazy_1));
-	});
-
 	_$_.append(__anchor, div_4);
 	_$_.pop_component();
 }
@@ -112,8 +106,9 @@ export function TitleWithTemplate(__anchor, _, __block) {
 	var div_5 = root_6();
 
 	{
-		var text_2 = _$_.child(div_5, true);
+		var expression_2 = _$_.child(div_5, true);
 
+		_$_.expression(expression_2, () => _$_.get(lazy_2));
 		_$_.pop(div_5);
 	}
 
@@ -123,10 +118,6 @@ export function TitleWithTemplate(__anchor, _, __block) {
 		});
 	});
 
-	_$_.render(() => {
-		_$_.set_text(text_2, _$_.get(lazy_2));
-	});
-
 	_$_.append(__anchor, div_5);
 	_$_.pop_component();
 }
@@ -152,8 +143,9 @@ export function ConditionalTitle(__anchor, _, __block) {
 	var div_7 = root_8();
 
 	{
-		var text_3 = _$_.child(div_7, true);
+		var expression_3 = _$_.child(div_7, true);
 
+		_$_.expression(expression_3, () => _$_.get(lazy_4));
 		_$_.pop(div_7);
 	}
 
@@ -163,10 +155,6 @@ export function ConditionalTitle(__anchor, _, __block) {
 		});
 	});
 
-	_$_.render(() => {
-		_$_.set_text(text_3, _$_.get(lazy_4));
-	});
-
 	_$_.append(__anchor, div_7);
 	_$_.pop_component();
 }
@@ -182,8 +170,9 @@ export function ComputedTitle(__anchor, _, __block) {
 		var span_2 = _$_.child(div_8);
 
 		{
-			var text_4 = _$_.child(span_2, true);
+			var expression_4 = _$_.child(span_2, true);
 
+			_$_.expression(expression_4, () => _$_.get(lazy_5));
 			_$_.pop(span_2);
 		}
 	}
@@ -194,10 +183,6 @@ export function ComputedTitle(__anchor, _, __block) {
 		});
 	});
 
-	_$_.render(() => {
-		_$_.set_text(text_4, _$_.get(lazy_5));
-	});
-
 	_$_.append(__anchor, div_8);
 	_$_.pop_component();
 }