ripple 0.4.0 → 0.4.2

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

@@ -39,7 +39,7 @@ function if_1(show) {
 	if (show.value) return consequent;
 }
 
-var root_2 = _$_.template(`<div class="container"><button class="toggle">Toggle</button><!></div>`, 0);
+var root_2 = _$_.template(`<div class="container"><button class="toggle">Toggle</button></div>`, 0);
 
 function ConditionalPortal_render(__anchor, __block) {
 	const show = _$_.track(true, __block, '4f6df174');
@@ -50,7 +50,7 @@ function ConditionalPortal_render(__anchor, __block) {
 
 		button.__click = () => show.value = !show.value;
 
-		var node_1 = _$_.hydrating ? _$_.hydrate_sibling() : button.nextSibling;
+		var node_1 = _$_.hydrating ? _$_.hydrate_sibling() : _$_.append_into(div_2);
 
 		_$_.if(node_1, if_1, false, show);
 		_$_.hydrating && _$_.pop(div_2);

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

@@ -1,13 +1,14 @@
 // @ts-nocheck
 import * as _$_ from 'ripple/internal/client';
 
-var root = _$_.template(`<div class="count"> </div>`, 0);
+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);
+		_$_.set_text_content(__prev._div, __a, __prev.a);
+		__prev.a = __a;
 	}
 }
 
@@ -15,11 +16,7 @@ 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 });
+	_$_.render(render, { a: '', _count: count, _div: div });
 	_$_.append(__anchor, div);
 }
 
@@ -73,25 +70,28 @@ function ComputedValues_render(__anchor, __block) {
 
 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);
+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);
+		_$_.set_text_content(__prev._div_4, __a, __prev.a);
+		__prev.a = __a;
 	}
 
 	var __b = __prev._y.value;
 
 	if (__prev.b !== __b) {
-		_$_.set_text(__prev._expression_4, __prev.b = __b);
+		_$_.set_text_content(__prev._div_5, __b, __prev.b);
+		__prev.b = __b;
 	}
 
 	var __c = __prev._z.value;
 
 	if (__prev.c !== __c) {
-		_$_.set_text(__prev._expression_5, __prev.c = __c);
+		_$_.set_text_content(__prev._div_6, __c, __prev.c);
+		__prev.c = __c;
 	}
 }
 
@@ -103,34 +103,20 @@ function MultipleTracked_render(__anchor, __block) {
 
 	{
 		var div_4 = _$_.hydrating ? _$_.hydrate_child() : div_3.firstChild;
-
-		{
-			var expression_3 = _$_.hydrating ? _$_.hydrate_text() : div_4.firstChild;
-		}
-
 		var div_5 = _$_.hydrating ? _$_.hydrate_sibling() : div_4.nextSibling;
-
-		{
-			var expression_4 = _$_.hydrating ? _$_.hydrate_text() : div_5.firstChild;
-		}
-
 		var div_6 = _$_.hydrating ? _$_.hydrate_sibling() : div_5.nextSibling;
-
-		{
-			var expression_5 = _$_.hydrating ? _$_.hydrate_text() : div_6.firstChild;
-		}
 	}
 
 	_$_.render(render_1, {
-		a: ' ',
-		b: ' ',
-		c: ' ',
+		a: '',
+		b: '',
+		c: '',
 		_x: x,
-		_expression_3: expression_3,
+		_div_4: div_4,
 		_y: y,
-		_expression_4: expression_4,
+		_div_5: div_5,
 		_z: z,
-		_expression_5: expression_5
+		_div_6: div_6
 	});
 
 	_$_.append(__anchor, div_3);

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

@@ -1,13 +1,14 @@
 // @ts-nocheck
 import * as _$_ from 'ripple/internal/client';
 
-var root = _$_.template(`<div class="resolved"><span class="value"> </span><button class="inc">inc</button></div>`, 0);
+var root = _$_.template(`<div class="resolved"><span class="value"></span><button class="inc">inc</button></div>`, 0);
 
 function render(__prev) {
 	var __a = __prev._data.value + ':' + __prev._count.value;
 
 	if (__prev.a !== __a) {
-		_$_.set_text(__prev._expression, __prev.a = __a);
+		_$_.set_text_content(__prev._span, __a, __prev.a);
+		__prev.a = __a;
 	}
 }
 
@@ -18,17 +19,12 @@ function BasicContent_render(__anchor, __block) {
 
 	{
 		var span = _$_.hydrating ? _$_.hydrate_child() : div.firstChild;
-
-		{
-			var expression = _$_.hydrating ? _$_.hydrate_text() : span.firstChild;
-		}
-
 		var button = _$_.hydrating ? _$_.hydrate_sibling() : span.nextSibling;
 
 		button.__click = () => count.value++;
 	}
 
-	_$_.render(render, { a: ' ', _data: data, _count: count, _expression: expression });
+	_$_.render(render, { a: '', _data: data, _count: count, _span: span });
 	_$_.append(__anchor, div);
 }
 

package/tests/hydration/compiled/client/typed-text.js

@@ -1,7 +1,7 @@
 // @ts-nocheck
 import * as _$_ from 'ripple/internal/client';
 
-var root_1 = _$_.template(`<div class="typed-run"> <span>tail</span></div><p class="typed-number"> </p><button>update</button>`, 1, 3);
+var root_1 = _$_.template(`<div class="typed-run"> <span>tail</span></div><p class="typed-number"></p><button>update</button>`, 1, 3);
 
 function render(__prev) {
 	var __a = 'value: ' + (__prev._row.value.label + String(__prev._row.value.count ?? ''));
@@ -13,7 +13,8 @@ function render(__prev) {
 	var __b = (0, __prev._row.value.count);
 
 	if (__prev.b !== __b) {
-		_$_.set_text(__prev._expression_1, __prev.b = __b);
+		_$_.set_text_content(__prev._p, __b, __prev.b);
+		__prev.b = __b;
 	}
 }
 
@@ -35,25 +36,13 @@ function TypedText_render(__anchor, __block) {
 		}
 
 		var p = _$_.hydrating ? _$_.hydrate_sibling() : div.nextSibling;
-
-		{
-			var expression_1 = _$_.hydrating ? _$_.hydrate_text() : p.firstChild;
-		}
-
 		var button = _$_.hydrating ? _$_.hydrate_sibling() : p.nextSibling;
 
 		button.__click = () => {
 			row.value = { label: '&next', count: 3n };
 		};
 
-		_$_.render(render, {
-			a: ' ',
-			b: ' ',
-			_row: row,
-			_expression: expression,
-			_expression_1: expression_1
-		});
-
+		_$_.render(render, { a: ' ', b: '', _row: row, _expression: expression, _p: p });
 		_$_.append(__anchor, fragment_1);
 	}));
 

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

@@ -10,15 +10,7 @@ export function ClickCounter() {
 		_$_.regular_block(() => {
 			let __out = '';
 
-			__out += '<div><button class="increment">Increment</button><span class="count">';
-
-			{
-				_$_.output_push(__out);
-				__out = '';
-				_$_.render_expression(count.value);
-			}
-
-			__out += '</span></div>';
+			__out += '<div><button class="increment">Increment</button><span class="count">' + _$_.escape(count.value) + '</span></div>';
 			_$_.output_push(__out);
 		});
 	});
@@ -31,15 +23,7 @@ export function IncrementDecrement() {
 		_$_.regular_block(() => {
 			let __out = '';
 
-			__out += '<div><button class="decrement">-</button><span class="count">';
-
-			{
-				_$_.output_push(__out);
-				__out = '';
-				_$_.render_expression(count.value);
-			}
-
-			__out += '</span><button class="increment">+</button></div>';
+			__out += '<div><button class="decrement">-</button><span class="count">' + _$_.escape(count.value) + '</span><button class="increment">+</button></div>';
 			_$_.output_push(__out);
 		});
 	});
@@ -53,23 +37,7 @@ export function MultipleEvents() {
 		_$_.regular_block(() => {
 			let __out = '';
 
-			__out += '<div><button class="target">Target</button><span class="clicks">';
-
-			{
-				_$_.output_push(__out);
-				__out = '';
-				_$_.render_expression(clicks.value);
-			}
-
-			__out += '</span><span class="hovers">';
-
-			{
-				_$_.output_push(__out);
-				__out = '';
-				_$_.render_expression(hovers.value);
-			}
-
-			__out += '</span></div>';
+			__out += '<div><button class="target">Target</button><span class="clicks">' + _$_.escape(clicks.value) + '</span><span class="hovers">' + _$_.escape(hovers.value) + '</span></div>';
 			_$_.output_push(__out);
 		});
 	});
@@ -88,15 +56,7 @@ export function MultiStateUpdate() {
 		_$_.regular_block(() => {
 			let __out = '';
 
-			__out += '<div><button class="btn">Click</button><span class="count">';
-
-			{
-				_$_.output_push(__out);
-				__out = '';
-				_$_.render_expression(count.value);
-			}
-
-			__out += '</span><span class="action">';
+			__out += '<div><button class="btn">Click</button><span class="count">' + _$_.escape(count.value) + '</span><span class="action">';
 
 			{
 				_$_.output_push(__out);
@@ -160,15 +120,7 @@ export function ParentWithChildButton() {
 				_$_.render_component(comp, ...args);
 			}
 
-			__out += '<span class="count">';
-
-			{
-				_$_.output_push(__out);
-				__out = '';
-				_$_.render_expression(count.value);
-			}
-
-			__out += '</span></div>';
+			__out += '<span class="count">' + _$_.escape(count.value) + '</span></div>';
 			_$_.output_push(__out);
 		});
 	});

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

@@ -419,15 +419,7 @@ export function ForLoopEmptyToPopulated() {
 			__out += '<button class="populate">Populate</button><ul class="list"><!--[-->';
 
 			for (const item of items.value) {
-				__out += '<li>';
-
-				{
-					_$_.output_push(__out);
-					__out = '';
-					_$_.render_expression(item);
-				}
-
-				__out += '</li>';
+				__out += '<li>' + _$_.escape(item) + '</li>';
 			}
 
 			__out += '<!--]--></ul>';