ripple 0.3.128 → 0.4.0

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

@@ -1,7 +1,7 @@
 // @ts-nocheck
 import * as _$_ from 'ripple/internal/server';
 
-export function Layout(__props) {
+export function Layout({ children }) {
 	return _$_.tsrx_element(() => {
 		_$_.regular_block(() => {
 			let __out = '';
@@ -11,7 +11,7 @@ export function Layout(__props) {
 			{
 				_$_.output_push(__out);
 				__out = '';
-				_$_.render_expression(__props.children);
+				_$_.render_expression(children);
 			}
 
 			__out += '</div>';
@@ -20,7 +20,7 @@ export function Layout(__props) {
 	});
 }
 
-export function TextWrappedLayout(__props) {
+export function TextWrappedLayout({ children }) {
 	return _$_.tsrx_element(() => {
 		_$_.regular_block(() => {
 			let __out = '';
@@ -28,7 +28,7 @@ export function TextWrappedLayout(__props) {
 			__out += '<div class="layout">before';
 			_$_.output_push(__out);
 			__out = '';
-			_$_.render_expression(__props.children);
+			_$_.render_expression(children);
 			__out += 'after</div>';
 			_$_.output_push(__out);
 		});
@@ -190,26 +190,17 @@ export function DynamicTagElement() {
 		const Tag = 'section';
 
 		_$_.regular_block(() => {
-			{
-				const comp = _$_.dynamic_element;
-
-				const args = [
-					{
-						is: Tag,
-						class: "host",
-						children: _$_.tsrx_element(() => {
-							return _$_.tsrx_element(() => {
-								let __out = '';
-
-								__out += 'hello';
-								_$_.output_push(__out);
-							});
-						})
-					}
-				];
-
-				_$_.render_component(comp, ...args);
-			}
+			_$_.dynamic_element(Tag, {
+				class: "host",
+				children: _$_.tsrx_element(() => {
+					return _$_.tsrx_element(() => {
+						let __out = '';
+
+						__out += 'hello';
+						_$_.output_push(__out);
+					});
+				})
+			});
 		});
 	});
 }
@@ -226,12 +217,7 @@ export function DynamicTagComponent() {
 					{
 						children: _$_.tsrx_element(() => {
 							return _$_.tsrx_element(() => {
-								{
-									const comp = _$_.dynamic_element;
-									const args = [{ is: Comp }];
-
-									_$_.render_component(comp, ...args);
-								}
+								_$_.dynamic_element(Comp, {});
 							});
 						})
 					}

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

@@ -5,12 +5,20 @@ import { track } from 'ripple/server';
 
 export function ClickCounter() {
 	return _$_.tsrx_element(() => {
-		let lazy = _$_.track(0, 'a070e3a7');
+		const count = _$_.track(0, 'a070e3a7');
 
 		_$_.regular_block(() => {
 			let __out = '';
 
-			__out += '<div><button class="increment">Increment</button><span class="count">' + _$_.escape(lazy.value) + '</span></div>';
+			__out += '<div><button class="increment">Increment</button><span class="count">';
+
+			{
+				_$_.output_push(__out);
+				__out = '';
+				_$_.render_expression(count.value);
+			}
+
+			__out += '</span></div>';
 			_$_.output_push(__out);
 		});
 	});
@@ -18,12 +26,20 @@ export function ClickCounter() {
 
 export function IncrementDecrement() {
 	return _$_.tsrx_element(() => {
-		let lazy_1 = _$_.track(0, '87fcabdd');
+		const count = _$_.track(0, '87fcabdd');
 
 		_$_.regular_block(() => {
 			let __out = '';
 
-			__out += '<div><button class="decrement">-</button><span class="count">' + _$_.escape(lazy_1.value) + '</span><button class="increment">+</button></div>';
+			__out += '<div><button class="decrement">-</button><span class="count">';
+
+			{
+				_$_.output_push(__out);
+				__out = '';
+				_$_.render_expression(count.value);
+			}
+
+			__out += '</span><button class="increment">+</button></div>';
 			_$_.output_push(__out);
 		});
 	});
@@ -31,13 +47,29 @@ export function IncrementDecrement() {
 
 export function MultipleEvents() {
 	return _$_.tsrx_element(() => {
-		let lazy_2 = _$_.track(0, '41b9f0b0');
-		let lazy_3 = _$_.track(0, '72789f75');
+		const clicks = _$_.track(0, '41b9f0b0');
+		const hovers = _$_.track(0, '72789f75');
 
 		_$_.regular_block(() => {
 			let __out = '';
 
-			__out += '<div><button class="target">Target</button><span class="clicks">' + _$_.escape(lazy_2.value) + '</span><span class="hovers">' + _$_.escape(lazy_3.value) + '</span></div>';
+			__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>';
 			_$_.output_push(__out);
 		});
 	});
@@ -45,23 +77,31 @@ export function MultipleEvents() {
 
 export function MultiStateUpdate() {
 	return _$_.tsrx_element(() => {
-		let lazy_4 = _$_.track(0, '5a375160');
-		let lazy_5 = _$_.track('none', '3ceeb88c');
+		const count = _$_.track(0, '5a375160');
+		const lastAction = _$_.track('none', '3ceeb88c');
 
 		const handleClick = () => {
-			_$_.update(lazy_4);
-			_$_.set(lazy_5, 'increment');
+			count.value++;
+			lastAction.value = 'increment';
 		};
 
 		_$_.regular_block(() => {
 			let __out = '';
 
-			__out += '<div><button class="btn">Click</button><span class="count">' + _$_.escape(lazy_4.value) + '</span><span class="action">';
+			__out += '<div><button class="btn">Click</button><span class="count">';
 
 			{
 				_$_.output_push(__out);
 				__out = '';
-				_$_.render_expression(lazy_5.value);
+				_$_.render_expression(count.value);
+			}
+
+			__out += '</span><span class="action">';
+
+			{
+				_$_.output_push(__out);
+				__out = '';
+				_$_.render_expression(lastAction.value);
 			}
 
 			__out += '</span></div>';
@@ -72,12 +112,12 @@ export function MultiStateUpdate() {
 
 export function ToggleButton() {
 	return _$_.tsrx_element(() => {
-		let lazy_6 = _$_.track(false, 'be823ec7');
+		const isOn = _$_.track(false, 'be823ec7');
 
 		_$_.regular_block(() => {
 			let __out = '';
 
-			__out += '<div><button class="toggle">' + _$_.escape(lazy_6.value ? 'ON' : 'OFF') + '</button></div>';
+			__out += '<div><button class="toggle">' + _$_.escape(isOn.value ? 'ON' : 'OFF') + '</button></div>';
 			_$_.output_push(__out);
 		});
 	});
@@ -96,7 +136,7 @@ export function ChildButton(props) {
 
 export function ParentWithChildButton() {
 	return _$_.tsrx_element(() => {
-		let lazy_7 = _$_.track(0, 'dcc2e0f9');
+		const count = _$_.track(0, 'dcc2e0f9');
 
 		_$_.regular_block(() => {
 			let __out = '';
@@ -109,7 +149,7 @@ export function ParentWithChildButton() {
 				const args = [
 					{
 						onClick: () => {
-							_$_.update(lazy_7);
+							count.value++;
 						},
 						label: "Click me"
 					}
@@ -120,7 +160,15 @@ export function ParentWithChildButton() {
 				_$_.render_component(comp, ...args);
 			}
 
-			__out += '<span class="count">' + _$_.escape(lazy_7.value) + '</span></div>';
+			__out += '<span class="count">';
+
+			{
+				_$_.output_push(__out);
+				__out = '';
+				_$_.render_expression(count.value);
+			}
+
+			__out += '</span></div>';
 			_$_.output_push(__out);
 		});
 	});

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

@@ -91,14 +91,14 @@ export function KeyedForLoop() {
 
 export function ReactiveForLoopAdd() {
 	return _$_.tsrx_element(() => {
-		let lazy = _$_.track(['A', 'B'], 'e145678a');
+		const items = _$_.track(['A', 'B'], 'e145678a');
 
 		_$_.regular_block(() => {
 			let __out = '';
 
 			__out += '<button class="add">Add</button><ul><!--[-->';
 
-			for (const item of lazy.value) {
+			for (const item of items.value) {
 				__out += '<li>';
 
 				{
@@ -118,14 +118,14 @@ export function ReactiveForLoopAdd() {
 
 export function ReactiveForLoopRemove() {
 	return _$_.tsrx_element(() => {
-		let lazy_1 = _$_.track(['A', 'B', 'C'], 'b4e9bd54');
+		const items = _$_.track(['A', 'B', 'C'], 'b4e9bd54');
 
 		_$_.regular_block(() => {
 			let __out = '';
 
 			__out += '<button class="remove">Remove</button><ul><!--[-->';
 
-			for (const item of lazy_1.value) {
+			for (const item of items.value) {
 				__out += '<li>';
 
 				{
@@ -145,7 +145,7 @@ export function ReactiveForLoopRemove() {
 
 export function ForLoopInteractive() {
 	return _$_.tsrx_element(() => {
-		let lazy_2 = _$_.track([0, 0, 0], '36f563df');
+		const counts = _$_.track([0, 0, 0], '36f563df');
 
 		_$_.regular_block(() => {
 			let __out = '';
@@ -157,7 +157,7 @@ export function ForLoopInteractive() {
 
 				var i = 0;
 
-				for (const count of lazy_2.value) {
+				for (const count of counts.value) {
 					__out += '<div' + _$_.attr('class', `item-${i}`) + '><span class="value">';
 
 					{
@@ -289,7 +289,7 @@ export function ForLoopComplexObjects() {
 
 export function KeyedForLoopReorder() {
 	return _$_.tsrx_element(() => {
-		let lazy_3 = _$_.track(
+		const items = _$_.track(
 			[
 				{ id: 1, name: 'First' },
 				{ id: 2, name: 'Second' },
@@ -303,7 +303,7 @@ export function KeyedForLoopReorder() {
 
 			__out += '<button class="reorder">Reorder</button><ul><!--[-->';
 
-			for (const item of lazy_3.value) {
+			for (const item of items.value) {
 				__out += '<li' + _$_.attr('class', `item-${item.id}`) + '>';
 
 				{
@@ -323,14 +323,14 @@ export function KeyedForLoopReorder() {
 
 export function KeyedForLoopUpdate() {
 	return _$_.tsrx_element(() => {
-		let lazy_4 = _$_.track([{ id: 1, name: 'Item 1' }, { id: 2, name: 'Item 2' }], '7a2c2ada');
+		const items = _$_.track([{ id: 1, name: 'Item 1' }, { id: 2, name: 'Item 2' }], '7a2c2ada');
 
 		_$_.regular_block(() => {
 			let __out = '';
 
 			__out += '<button class="update">Update</button><ul><!--[-->';
 
-			for (const item of lazy_4.value) {
+			for (const item of items.value) {
 				__out += '<li' + _$_.attr('class', `item-${item.id}`) + '>';
 
 				{
@@ -350,14 +350,14 @@ export function KeyedForLoopUpdate() {
 
 export function ForLoopMixedOperations() {
 	return _$_.tsrx_element(() => {
-		let lazy_5 = _$_.track(['A', 'B', 'C', 'D'], '3dd7c7b6');
+		const items = _$_.track(['A', 'B', 'C', 'D'], '3dd7c7b6');
 
 		_$_.regular_block(() => {
 			let __out = '';
 
 			__out += '<button class="shuffle">Shuffle</button><ul><!--[-->';
 
-			for (const item of lazy_5.value) {
+			for (const item of items.value) {
 				__out += '<li' + _$_.attr('class', `item-${item}`) + '>';
 
 				{
@@ -377,18 +377,18 @@ export function ForLoopMixedOperations() {
 
 export function ForLoopInsideIf() {
 	return _$_.tsrx_element(() => {
-		let lazy_6 = _$_.track(true, '0528df30');
-		let lazy_7 = _$_.track(['X', 'Y', 'Z'], 'bf375103');
+		const showList = _$_.track(true, '0528df30');
+		const items = _$_.track(['X', 'Y', 'Z'], 'bf375103');
 
 		_$_.regular_block(() => {
 			let __out = '';
 
 			__out += '<button class="toggle">Toggle List</button><button class="add">Add Item</button><!--[-->';
 
-			if (lazy_6.value) {
+			if (showList.value) {
 				__out += '<ul class="list"><!--[-->';
 
-				for (const item of lazy_7.value) {
+				for (const item of items.value) {
 					__out += '<li>';
 
 					{
@@ -411,15 +411,23 @@ export function ForLoopInsideIf() {
 
 export function ForLoopEmptyToPopulated() {
 	return _$_.tsrx_element(() => {
-		let lazy_8 = _$_.track([], '525c5dbc');
+		const items = _$_.track([], '525c5dbc');
 
 		_$_.regular_block(() => {
 			let __out = '';
 
 			__out += '<button class="populate">Populate</button><ul class="list"><!--[-->';
 
-			for (const item of lazy_8.value) {
-				__out += '<li>' + _$_.escape(item) + '</li>';
+			for (const item of items.value) {
+				__out += '<li>';
+
+				{
+					_$_.output_push(__out);
+					__out = '';
+					_$_.render_expression(item);
+				}
+
+				__out += '</li>';
 			}
 
 			__out += '<!--]--></ul>';
@@ -430,14 +438,14 @@ export function ForLoopEmptyToPopulated() {
 
 export function ForLoopPopulatedToEmpty() {
 	return _$_.tsrx_element(() => {
-		let lazy_9 = _$_.track(['One', 'Two', 'Three'], 'ee47f078');
+		const items = _$_.track(['One', 'Two', 'Three'], 'ee47f078');
 
 		_$_.regular_block(() => {
 			let __out = '';
 
 			__out += '<button class="clear">Clear</button><ul class="list"><!--[-->';
 
-			for (const item of lazy_9.value) {
+			for (const item of items.value) {
 				__out += '<li>';
 
 				{
@@ -457,7 +465,7 @@ export function ForLoopPopulatedToEmpty() {
 
 export function NestedForLoopReactive() {
 	return _$_.tsrx_element(() => {
-		let lazy_10 = _$_.track([[1, 2], [3, 4]], 'a2f41fb3');
+		const grid = _$_.track([[1, 2], [3, 4]], 'a2f41fb3');
 
 		_$_.regular_block(() => {
 			let __out = '';
@@ -469,7 +477,7 @@ export function NestedForLoopReactive() {
 
 				var rowIndex = 0;
 
-				for (const row of lazy_10.value) {
+				for (const row of grid.value) {
 					__out += '<div' + _$_.attr('class', `row-${rowIndex}`) + '>';
 
 					{
@@ -578,7 +586,7 @@ export function ForLoopDeeplyNested() {
 
 export function ForLoopIndexUpdate() {
 	return _$_.tsrx_element(() => {
-		let lazy_11 = _$_.track(['First', 'Second', 'Third'], 'f61e31e6');
+		const items = _$_.track(['First', 'Second', 'Third'], 'f61e31e6');
 
 		_$_.regular_block(() => {
 			let __out = '';
@@ -590,7 +598,7 @@ export function ForLoopIndexUpdate() {
 
 				var i = 0;
 
-				for (const item of lazy_11.value) {
+				for (const item of items.value) {
 					__out += '<li' + _$_.attr('class', `item-${i}`) + '>' + _$_.escape(`[${i}] ${item}`) + '</li>';
 					i++;
 				}
@@ -606,7 +614,7 @@ export function ForLoopIndexUpdate() {
 
 export function KeyedForLoopWithIndex() {
 	return _$_.tsrx_element(() => {
-		let lazy_12 = _$_.track(
+		const items = _$_.track(
 			[
 				{ id: 'a', value: 'Alpha' },
 				{ id: 'b', value: 'Beta' },
@@ -625,7 +633,7 @@ export function KeyedForLoopWithIndex() {
 
 				var i = 0;
 
-				for (const item of lazy_12.value) {
+				for (const item of items.value) {
 					__out += '<li' + _$_.attr('data-index', i, false) + _$_.attr('class', `item-${item.id}`) + '>' + _$_.escape(`[${i}] ${item.id}: ${item.value}`) + '</li>';
 					i++;
 				}
@@ -641,14 +649,14 @@ export function KeyedForLoopWithIndex() {
 
 export function ForLoopWithSiblings() {
 	return _$_.tsrx_element(() => {
-		let lazy_13 = _$_.track(['A', 'B'], '3c7e8152');
+		const items = _$_.track(['A', 'B'], '3c7e8152');
 
 		_$_.regular_block(() => {
 			let __out = '';
 
 			__out += '<div class="wrapper"><header class="before">Before</header><!--[-->';
 
-			for (const item of lazy_13.value) {
+			for (const item of items.value) {
 				__out += '<div' + _$_.attr('class', `item-${item}`) + '>';
 
 				{
@@ -698,12 +706,12 @@ export function ForLoopItemState() {
 
 function TodoItem(props) {
 	return _$_.tsrx_element(() => {
-		let lazy_14 = _$_.track(false, '4f2402a4');
+		const done = _$_.track(false, '4f2402a4');
 
 		_$_.regular_block(() => {
 			let __out = '';
 
-			__out += '<div' + _$_.attr('class', `todo-${props.id}`) + '><input type="checkbox"' + _$_.attr('checked', lazy_14.value, true) + ' class="checkbox" /><span' + _$_.attr('class', lazy_14.value ? 'completed' : 'pending') + '>' + _$_.escape(props.text) + '</span></div>';
+			__out += '<div' + _$_.attr('class', `todo-${props.id}`) + '><input type="checkbox"' + _$_.attr('checked', done.value, true) + ' class="checkbox" /><span' + _$_.attr('class', done.value ? 'completed' : 'pending') + '>' + _$_.escape(props.text) + '</span></div>';
 			_$_.output_push(__out);
 		});
 	});
@@ -738,14 +746,14 @@ export function ForLoopSingleItem() {
 
 export function ForLoopAddAtBeginning() {
 	return _$_.tsrx_element(() => {
-		let lazy_15 = _$_.track(['B', 'C'], '1561403a');
+		const items = _$_.track(['B', 'C'], '1561403a');
 
 		_$_.regular_block(() => {
 			let __out = '';
 
 			__out += '<button class="prepend">Prepend A</button><ul><!--[-->';
 
-			for (const item of lazy_15.value) {
+			for (const item of items.value) {
 				__out += '<li' + _$_.attr('class', `item-${item}`) + '>';
 
 				{
@@ -765,14 +773,14 @@ export function ForLoopAddAtBeginning() {
 
 export function ForLoopAddInMiddle() {
 	return _$_.tsrx_element(() => {
-		let lazy_16 = _$_.track(['A', 'C'], '1bc60b46');
+		const items = _$_.track(['A', 'C'], '1bc60b46');
 
 		_$_.regular_block(() => {
 			let __out = '';
 
 			__out += '<button class="insert">Insert B</button><ul><!--[-->';
 
-			for (const item of lazy_16.value) {
+			for (const item of items.value) {
 				__out += '<li' + _$_.attr('class', `item-${item}`) + '>';
 
 				{
@@ -792,14 +800,14 @@ export function ForLoopAddInMiddle() {
 
 export function ForLoopRemoveFromMiddle() {
 	return _$_.tsrx_element(() => {
-		let lazy_17 = _$_.track(['A', 'B', 'C'], '1c87f95f');
+		const items = _$_.track(['A', 'B', 'C'], '1c87f95f');
 
 		_$_.regular_block(() => {
 			let __out = '';
 
 			__out += '<button class="remove-middle">Remove B</button><ul><!--[-->';
 
-			for (const item of lazy_17.value) {
+			for (const item of items.value) {
 				__out += '<li' + _$_.attr('class', `item-${item}`) + '>';
 
 				{
@@ -855,14 +863,14 @@ export function ForLoopLargeList() {
 
 export function ForLoopSwap() {
 	return _$_.tsrx_element(() => {
-		let lazy_18 = _$_.track(['A', 'B', 'C', 'D'], '5f8d152f');
+		const items = _$_.track(['A', 'B', 'C', 'D'], '5f8d152f');
 
 		_$_.regular_block(() => {
 			let __out = '';
 
 			__out += '<button class="swap">Swap First and Last</button><ul><!--[-->';
 
-			for (const item of lazy_18.value) {
+			for (const item of items.value) {
 				__out += '<li' + _$_.attr('class', `item-${item}`) + '>';
 
 				{
@@ -882,14 +890,14 @@ export function ForLoopSwap() {
 
 export function ForLoopReverse() {
 	return _$_.tsrx_element(() => {
-		let lazy_19 = _$_.track(['A', 'B', 'C', 'D'], '24602e64');
+		const items = _$_.track(['A', 'B', 'C', 'D'], '24602e64');
 
 		_$_.regular_block(() => {
 			let __out = '';
 
 			__out += '<button class="reverse">Reverse</button><ul><!--[-->';
 
-			for (const item of lazy_19.value) {
+			for (const item of items.value) {
 				__out += '<li' + _$_.attr('class', `item-${item}`) + '>';
 
 				{
@@ -905,4 +913,72 @@ export function ForLoopReverse() {
 			_$_.output_push(__out);
 		});
 	});
+}
+
+export function KeyedForLoopAppendAndRotate() {
+	return _$_.tsrx_element(() => {
+		const items = _$_.track([1, 2, 3], 'a8b41504');
+
+		_$_.regular_block(() => {
+			let __out = '';
+
+			__out += '<div class="wrapper"><div class="host"><!--[-->';
+
+			for (const item of items.value) {
+				__out += '<span class="item">';
+
+				{
+					_$_.output_push(__out);
+					__out = '';
+					_$_.render_expression(item);
+				}
+
+				__out += '</span>';
+			}
+
+			__out += '<!--]--><p class="tail">p</p></div><button class="push">Push</button><button class="rotate">Rotate</button></div>';
+			_$_.output_push(__out);
+		});
+	});
+}
+
+function RootKeyedList(props) {
+	return _$_.tsrx_element(() => {
+		_$_.regular_block(() => {
+			let __out = '';
+
+			__out += '<!--[-->';
+
+			for (const item of props.items.value) {
+				__out += '<span class="item">' + _$_.escape(item) + '</span>';
+			}
+
+			__out += '<!--]-->';
+			_$_.output_push(__out);
+		});
+	});
+}
+
+export function RootKeyedForLoopAppendAndRotate() {
+	return _$_.tsrx_element(() => {
+		const items = _$_.track([1, 2, 3], '50a91d60');
+
+		_$_.regular_block(() => {
+			let __out = '';
+
+			__out += '<div class="wrapper"><div class="host">';
+
+			{
+				const comp = RootKeyedList;
+				const args = [{ items }];
+
+				_$_.output_push(__out);
+				__out = '';
+				_$_.render_component(comp, ...args);
+			}
+
+			__out += '<p class="tail">p</p></div><button class="push">Push</button><button class="rotate">Rotate</button></div>';
+			_$_.output_push(__out);
+		});
+	});
 }