ripple 0.3.9 → 0.3.11

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

@@ -29,14 +29,11 @@ export function SimplePortal(__anchor, _, __block) {
 					return typeof document !== 'undefined' ? document.body : null;
 				},
 
-				children(__anchor, _, __block) {
-					_$_.push_component();
-
+				children: _$_.ripple_element(function render_children(__anchor, __block) {
 					var div_2 = root_1();
 
 					_$_.append(__anchor, div_2);
-					_$_.pop_component();
-				}
+				})
 			},
 			_$_.active_block
 		);
@@ -73,14 +70,11 @@ export function ConditionalPortal(__anchor, _, __block) {
 							return typeof document !== 'undefined' ? document.body : null;
 						},
 
-						children(__anchor, _, __block) {
-							_$_.push_component();
-
+						children: _$_.ripple_element(function render_children(__anchor, __block) {
 							var div_4 = root_4();
 
 							_$_.append(__anchor, div_4);
-							_$_.pop_component();
-						}
+						})
 					},
 					_$_.active_block
 				);
@@ -116,14 +110,11 @@ export function PortalWithMainContent(__anchor, _, __block) {
 					return typeof document !== 'undefined' ? document.body : null;
 				},
 
-				children(__anchor, _, __block) {
-					_$_.push_component();
-
+				children: _$_.ripple_element(function render_children(__anchor, __block) {
 					var div_7 = root_6();
 
 					_$_.append(__anchor, div_7);
-					_$_.pop_component();
-				}
+				})
 			},
 			_$_.active_block
 		);
@@ -154,14 +145,11 @@ export function NestedContentWithPortal(__anchor, _, __block) {
 					return typeof document !== 'undefined' ? document.body : null;
 				},
 
-				children(__anchor, _, __block) {
-					_$_.push_component();
-
+				children: _$_.ripple_element(function render_children(__anchor, __block) {
 					var div_10 = root_8();
 
 					_$_.append(__anchor, div_10);
-					_$_.pop_component();
-				}
+				})
 			},
 			_$_.active_block
 		);

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

@@ -17,15 +17,12 @@ export function TrackedState(__anchor, _, __block) {
 	var div_1 = root();
 
 	{
-		var text = _$_.child(div_1, true);
+		var expression = _$_.child(div_1, true);
 
+		_$_.expression(expression, () => _$_.get(lazy));
 		_$_.pop(div_1);
 	}
 
-	_$_.render(() => {
-		_$_.set_text(text, _$_.get(lazy));
-	});
-
 	_$_.append(__anchor, div_1);
 	_$_.pop_component();
 }
@@ -40,16 +37,13 @@ export function CounterWithInitial(__anchor, props, __block) {
 		var span_1 = _$_.child(div_2);
 
 		{
-			var text_1 = _$_.child(span_1, true);
+			var expression_1 = _$_.child(span_1, true);
 
+			_$_.expression(expression_1, () => _$_.get(lazy_1));
 			_$_.pop(span_1);
 		}
 	}
 
-	_$_.render(() => {
-		_$_.set_text(text_1, _$_.get(lazy_1));
-	});
-
 	_$_.append(__anchor, div_2);
 	_$_.pop_component();
 }
@@ -74,15 +68,12 @@ export function ComputedValues(__anchor, _, __block) {
 	var div_3 = root_3();
 
 	{
-		var text_2 = _$_.child(div_3, true);
+		var expression_2 = _$_.child(div_3, true);
 
+		_$_.expression(expression_2, sum);
 		_$_.pop(div_3);
 	}
 
-	_$_.render(() => {
-		_$_.set_text(text_2, sum());
-	});
-
 	_$_.append(__anchor, div_3);
 	_$_.pop_component();
 }
@@ -97,52 +88,31 @@ export function MultipleTracked(__anchor, _, __block) {
 	var div_4 = _$_.first_child_frag(fragment_1);
 
 	{
-		var text_3 = _$_.child(div_4, true);
+		var expression_3 = _$_.child(div_4, true);
 
+		_$_.expression(expression_3, () => _$_.get(lazy_4));
 		_$_.pop(div_4);
 	}
 
 	var div_5 = _$_.sibling(div_4);
 
 	{
-		var text_4 = _$_.child(div_5, true);
+		var expression_4 = _$_.child(div_5, true);
 
+		_$_.expression(expression_4, () => _$_.get(lazy_5));
 		_$_.pop(div_5);
 	}
 
 	var div_6 = _$_.sibling(div_5);
 
 	{
-		var text_5 = _$_.child(div_6, true);
+		var expression_5 = _$_.child(div_6, true);
 
+		_$_.expression(expression_5, () => _$_.get(lazy_6));
 		_$_.pop(div_6);
 	}
 
 	_$_.next(2);
-
-	_$_.render(
-		(__prev) => {
-			var __a = _$_.get(lazy_4);
-
-			if (__prev.a !== __a) {
-				_$_.set_text(text_3, __prev.a = __a);
-			}
-
-			var __b = _$_.get(lazy_5);
-
-			if (__prev.b !== __b) {
-				_$_.set_text(text_4, __prev.b = __b);
-			}
-
-			var __c = _$_.get(lazy_6);
-
-			if (__prev.c !== __c) {
-				_$_.set_text(text_5, __prev.c = __c);
-			}
-		},
-		{ a: ' ', b: ' ', c: ' ' }
-	);
-
 	_$_.append(__anchor, fragment_1, true);
 	_$_.pop_component();
 }
@@ -156,15 +126,12 @@ export function DerivedState(__anchor, _, __block) {
 	var div_7 = root_5();
 
 	{
-		var text_6 = _$_.child(div_7, true);
+		var expression_6 = _$_.child(div_7, true);
 
+		_$_.expression(expression_6, fullName);
 		_$_.pop(div_7);
 	}
 
-	_$_.render(() => {
-		_$_.set_text(text_6, fullName());
-	});
-
 	_$_.append(__anchor, div_7);
 	_$_.pop_component();
 }

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

@@ -1709,15 +1709,12 @@ export function ReactiveOuterInnerReturns(__anchor, _, __block) {
 		var div_39 = root_113();
 
 		{
-			var text = _$_.child(div_39, true);
+			var expression = _$_.child(div_39, true);
 
+			_$_.expression(expression, () => _$_.get(lazy_4) ? 'a-on rest' : 'a-off rest');
 			_$_.pop(div_39);
 		}
 
-		_$_.render(() => {
-			_$_.set_text(text, _$_.get(lazy_4) ? 'a-on rest' : 'a-off rest');
-		});
-
 		_$_.append(__anchor, div_39);
 	};
 

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

@@ -58,9 +58,9 @@ function AsyncList(__anchor, _, __block) {
 					var li_1 = root_4();
 
 					{
-						var text = _$_.child(li_1, true);
+						var expression = _$_.child(li_1, true);
 
-						text.nodeValue = item;
+						_$_.expression(expression, () => item);
 						_$_.pop(li_1);
 					}
 
@@ -118,9 +118,9 @@ function AsyncContent(__anchor, _, __block) {
 		var div_3 = root_8();
 
 		{
-			var text_1 = _$_.child(div_3, true);
+			var expression_1 = _$_.child(div_3, true);
 
-			text_1.nodeValue = value;
+			_$_.expression(expression_1, () => value);
 			_$_.pop(div_3);
 		}
 

package/tests/hydration/compiled/server/basic.js

@@ -1,6 +1,8 @@
 // @ts-nocheck
 import * as _$_ from 'ripple/internal/server';
 
+import { track } from 'ripple/server';
+
 export function StaticText(__output) {
 	_$_.push_component();
 	__output.push('<div');
@@ -203,7 +205,7 @@ export function ExpressionContent(__output) {
 	_$_.push_component();
 
 	const value = 42;
-	const text = 'computed';
+	const label = 'computed';
 
 	__output.push('<div');
 	__output.push('>');
@@ -217,13 +219,57 @@ export function ExpressionContent(__output) {
 	__output.push('>');
 
 	{
-		__output.push(_$_.escape(text.toUpperCase()));
+		__output.push(_$_.escape(label.toUpperCase()));
 	}
 
 	__output.push('</span>');
 	_$_.pop_component();
 }
 
+function TextProp(__output, __props) {
+	_$_.push_component();
+	__output.push('<div');
+	__output.push(' class="text-prop"');
+	__output.push('>');
+
+	{
+		_$_.render_expression(__output, __props.children);
+	}
+
+	__output.push('</div>');
+	_$_.pop_component();
+}
+
+export function TextPropWithToggle(__output) {
+	_$_.push_component();
+
+	let lazy = _$_.track(false);
+
+	{
+		const comp = TextProp;
+
+		const args = [
+			__output,
+			{
+				children: _$_.normalize_children(_$_.get(lazy) ? 'hello' : '')
+			}
+		];
+
+		comp(...args);
+	}
+
+	__output.push('<button');
+	__output.push(' class="show-text"');
+	__output.push('>');
+
+	{
+		__output.push('Show');
+	}
+
+	__output.push('</button>');
+	_$_.pop_component();
+}
+
 function StaticHeader(__output) {
 	_$_.push_component();
 	__output.push('<h1');
@@ -366,39 +412,26 @@ function Actions(__output, { playgroundVisible = false }) {
 	_$_.pop_component();
 }
 
-async function Layout(__output, { children }) {
-	return _$_.async(async () => {
-		_$_.push_component();
-		__output.push('<main');
+function Layout(__output, { children }) {
+	_$_.push_component();
+	__output.push('<main');
+	__output.push('>');
+
+	{
+		__output.push('<div');
+		__output.push(' class="container"');
 		__output.push('>');
 
 		{
-			__output.push('<div');
-			__output.push(' class="container"');
-			__output.push('>');
-
-			{
-				{
-					const comp = children;
-					const args = [__output, {}];
-
-					if (comp?.async) {
-						await comp(...args);
-					} else if (comp) {
-						comp(...args);
-					}
-				}
-			}
-
-			__output.push('</div>');
+			_$_.render_expression(__output, children);
 		}
 
-		__output.push('</main>');
-		_$_.pop_component();
-	});
-}
+		__output.push('</div>');
+	}
 
-Layout.async = true;
+	__output.push('</main>');
+	_$_.pop_component();
+}
 
 function Content(__output) {
 	_$_.push_component();
@@ -430,7 +463,7 @@ export function WebsiteIndex(__output) {
 		const args = [
 			__output,
 			{
-				children: function children(__output) {
+				children: _$_.ripple_element(function render_children(__output) {
 					_$_.push_component();
 
 					{
@@ -462,7 +495,7 @@ export function WebsiteIndex(__output) {
 					}
 
 					_$_.pop_component();
-				}
+				})
 			}
 		];
 

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

@@ -1,32 +1,35 @@
 // @ts-nocheck
 import * as _$_ from 'ripple/internal/server';
 
-export async function Layout(__output, __props) {
-	return _$_.async(async () => {
-		_$_.push_component();
-		__output.push('<div');
-		__output.push(' class="layout"');
-		__output.push('>');
-
-		{
-			{
-				const comp = __props.children;
-				const args = [__output, {}];
-
-				if (comp?.async) {
-					await comp(...args);
-				} else if (comp) {
-					comp(...args);
-				}
-			}
-		}
+export function Layout(__output, __props) {
+	_$_.push_component();
+	__output.push('<div');
+	__output.push(' class="layout"');
+	__output.push('>');
+
+	{
+		_$_.render_expression(__output, __props.children);
+	}
 
-		__output.push('</div>');
-		_$_.pop_component();
-	});
+	__output.push('</div>');
+	_$_.pop_component();
 }
 
-Layout.async = true;
+export function TextWrappedLayout(__output, __props) {
+	_$_.push_component();
+	__output.push('<div');
+	__output.push(' class="layout"');
+	__output.push('>');
+
+	{
+		__output.push('before');
+		_$_.render_expression(__output, __props.children);
+		__output.push('after');
+	}
+
+	__output.push('</div>');
+	_$_.pop_component();
+}
 
 export function SingleChild(__output) {
 	_$_.push_component();
@@ -85,7 +88,7 @@ export function LayoutWithSingleChild(__output) {
 		const args = [
 			__output,
 			{
-				children: function children(__output) {
+				children: _$_.ripple_element(function render_children(__output) {
 					_$_.push_component();
 
 					{
@@ -96,7 +99,7 @@ export function LayoutWithSingleChild(__output) {
 					}
 
 					_$_.pop_component();
-				}
+				})
 			}
 		];
 
@@ -115,7 +118,7 @@ export function LayoutWithMultipleChildren(__output) {
 		const args = [
 			__output,
 			{
-				children: function children(__output) {
+				children: _$_.ripple_element(function render_children(__output) {
 					_$_.push_component();
 
 					{
@@ -135,7 +138,7 @@ export function LayoutWithMultipleChildren(__output) {
 
 					__output.push('</div>');
 					_$_.pop_component();
-				}
+				})
 			}
 		];
 
@@ -154,7 +157,7 @@ export function LayoutWithMultiRootChild(__output) {
 		const args = [
 			__output,
 			{
-				children: function children(__output) {
+				children: _$_.ripple_element(function render_children(__output) {
 					_$_.push_component();
 
 					{
@@ -165,7 +168,37 @@ export function LayoutWithMultiRootChild(__output) {
 					}
 
 					_$_.pop_component();
-				}
+				})
+			}
+		];
+
+		comp(...args);
+	}
+
+	_$_.pop_component();
+}
+
+export function LayoutWithTextAroundChildren(__output) {
+	_$_.push_component();
+
+	{
+		const comp = TextWrappedLayout;
+
+		const args = [
+			__output,
+			{
+				children: _$_.ripple_element(function render_children(__output) {
+					_$_.push_component();
+
+					{
+						const comp = SingleChild;
+						const args = [__output, {}];
+
+						comp(...args);
+					}
+
+					_$_.pop_component();
+				})
 			}
 		];
 

package/tests/hydration/compiled/server/hmr.js

@@ -3,49 +3,36 @@ import * as _$_ from 'ripple/internal/server';
 
 import { track } from 'ripple/server';
 
-export async function Layout(__output, { children }) {
-	return _$_.async(async () => {
-		_$_.push_component();
-		__output.push('<div');
-		__output.push(' class="layout"');
+export function Layout(__output, { children }) {
+	_$_.push_component();
+	__output.push('<div');
+	__output.push(' class="layout"');
+	__output.push('>');
+
+	{
+		__output.push('<nav');
+		__output.push(' class="nav"');
 		__output.push('>');
 
 		{
-			__output.push('<nav');
-			__output.push(' class="nav"');
-			__output.push('>');
-
-			{
-				__output.push('Navigation');
-			}
-
-			__output.push('</nav>');
-			__output.push('<main');
-			__output.push(' class="main"');
-			__output.push('>');
-
-			{
-				{
-					const comp = children;
-					const args = [__output, {}];
+			__output.push('Navigation');
+		}
 
-					if (comp?.async) {
-						await comp(...args);
-					} else if (comp) {
-						comp(...args);
-					}
-				}
-			}
+		__output.push('</nav>');
+		__output.push('<main');
+		__output.push(' class="main"');
+		__output.push('>');
 
-			__output.push('</main>');
+		{
+			_$_.render_expression(__output, children);
 		}
 
-		__output.push('</div>');
-		_$_.pop_component();
-	});
-}
+		__output.push('</main>');
+	}
 
-Layout.async = true;
+	__output.push('</div>');
+	_$_.pop_component();
+}
 
 export function Content(__output) {
 	_$_.push_component();
@@ -87,7 +74,7 @@ export function LayoutWithContent(__output) {
 		const args = [
 			__output,
 			{
-				children: function children(__output) {
+				children: _$_.ripple_element(function render_children(__output) {
 					_$_.push_component();
 
 					{
@@ -98,7 +85,7 @@ export function LayoutWithContent(__output) {
 					}
 
 					_$_.pop_component();
-				}
+				})
 			}
 		];