ripple 0.3.25 → 0.3.26

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

@@ -1169,8 +1169,8 @@ export function ReturnWithElseBothReturn(__anchor, _, __block) {
 export function ReactiveReturnTrueToFalse(__anchor, _, __block) {
 	_$_.push_component();
 
-	var __r_28 = _$_.tracked(false);
-	let lazy = _$_.track(true, void 0, void 0, __block);
+	var __r_28 = _$_.track(false, __block);
+	let lazy = _$_.track(true, __block, '58730cee');
 	var fragment_59 = root_77();
 	var button_1 = _$_.first_child_frag(fragment_59);
 
@@ -1214,8 +1214,8 @@ export function ReactiveReturnTrueToFalse(__anchor, _, __block) {
 export function ReactiveReturnFalseToTrue(__anchor, _, __block) {
 	_$_.push_component();
 
-	var __r_29 = _$_.tracked(false);
-	let lazy_1 = _$_.track(false, void 0, void 0, __block);
+	var __r_29 = _$_.track(false, __block);
+	let lazy_1 = _$_.track(false, __block, '7fc6e96b');
 	var fragment_61 = root_80();
 	var button_2 = _$_.first_child_frag(fragment_61);
 
@@ -1259,9 +1259,9 @@ export function ReactiveReturnFalseToTrue(__anchor, _, __block) {
 export function ReactiveNestedReturn(__anchor, _, __block) {
 	_$_.push_component();
 
-	var __r_30 = _$_.tracked(false);
+	var __r_30 = _$_.track(false, __block);
 	let a = true;
-	let lazy_2 = _$_.track(true, void 0, void 0, __block);
+	let lazy_2 = _$_.track(true, __block, '385f771e');
 	var fragment_63 = root_83();
 	var button_3 = _$_.first_child_frag(fragment_63);
 
@@ -1574,9 +1574,9 @@ export function MultipleSiblingReturns(__anchor, _, __block) {
 export function ReactiveSiblingReturns(__anchor, _, __block) {
 	_$_.push_component();
 
-	var __r_39 = _$_.tracked(false);
-	var __r_38 = _$_.tracked(false);
-	let lazy_3 = _$_.track('first', void 0, void 0, __block);
+	var __r_39 = _$_.track(false, __block);
+	var __r_38 = _$_.track(false, __block);
+	let lazy_3 = _$_.track('first', __block, '5aea90b8');
 	var fragment_82 = root_105();
 	var button_4 = _$_.first_child_frag(fragment_82);
 
@@ -1654,9 +1654,9 @@ export function ReactiveSiblingReturns(__anchor, _, __block) {
 export function ReactiveOuterInnerReturns(__anchor, _, __block) {
 	_$_.push_component();
 
-	var __r_40 = _$_.tracked(false);
-	let lazy_4 = _$_.track(true, void 0, void 0, __block);
-	let lazy_5 = _$_.track(true, void 0, void 0, __block);
+	var __r_40 = _$_.track(false, __block);
+	let lazy_4 = _$_.track(true, __block, '60b3ed78');
+	let lazy_5 = _$_.track(true, __block, '76f23362');
 	var fragment_86 = root_110();
 	var button_5 = _$_.first_child_frag(fragment_86);
 
@@ -1729,9 +1729,9 @@ export function ReactiveOuterInnerReturns(__anchor, _, __block) {
 export function ReactiveElseIfReturns(__anchor, _, __block) {
 	_$_.push_component();
 
-	var __r_42 = _$_.tracked(false);
-	var __r_41 = _$_.tracked(false);
-	let lazy_6 = _$_.track(0, void 0, void 0, __block);
+	var __r_42 = _$_.track(false, __block);
+	var __r_41 = _$_.track(false, __block);
+	let lazy_6 = _$_.track(0, __block, '820ab671');
 	var fragment_89 = root_114();
 	var button_7 = _$_.first_child_frag(fragment_89);
 
@@ -1801,14 +1801,14 @@ export function ReactiveElseIfReturns(__anchor, _, __block) {
 export function ReactiveDeepNestedIndependentReturns(__anchor, _, __block) {
 	_$_.push_component();
 
-	var __r_46 = _$_.tracked(false);
-	var __r_45 = _$_.tracked(false);
-	var __r_44 = _$_.tracked(false);
-	var __r_43 = _$_.tracked(false);
-	let lazy_7 = _$_.track(false, void 0, void 0, __block);
-	let lazy_8 = _$_.track(false, void 0, void 0, __block);
-	let lazy_9 = _$_.track(false, void 0, void 0, __block);
-	let lazy_10 = _$_.track(false, void 0, void 0, __block);
+	var __r_46 = _$_.track(false, __block);
+	var __r_45 = _$_.track(false, __block);
+	var __r_44 = _$_.track(false, __block);
+	var __r_43 = _$_.track(false, __block);
+	let lazy_7 = _$_.track(false, __block, '0222c312');
+	let lazy_8 = _$_.track(false, __block, '7b13a4fb');
+	let lazy_9 = _$_.track(false, __block, '405b5bb5');
+	let lazy_10 = _$_.track(false, __block, 'f8de97e9');
 	var fragment_94 = root_119();
 	var button_8 = _$_.first_child_frag(fragment_94);
 

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

@@ -79,7 +79,7 @@ export function SwitchStatic(__anchor, _, __block) {
 export function SwitchReactive(__anchor, _, __block) {
 	_$_.push_component();
 
-	let lazy = _$_.track('a', void 0, void 0, __block);
+	let lazy = _$_.track('a', __block, '9b34d955');
 	var fragment_3 = root_4();
 	var button_1 = _$_.first_child_frag(fragment_3);
 
@@ -175,7 +175,7 @@ export function SwitchFallthrough(__anchor, _, __block) {
 export function SwitchNumericLevels(__anchor, _, __block) {
 	_$_.push_component();
 
-	let lazy_1 = _$_.track(1, void 0, void 0, __block);
+	let lazy_1 = _$_.track(1, __block, '7581a7ab');
 	var fragment_8 = root_11();
 	var button_2 = _$_.first_child_frag(fragment_8);
 
@@ -230,7 +230,7 @@ export function SwitchNumericLevels(__anchor, _, __block) {
 export function SwitchBlockScoped(__anchor, _, __block) {
 	_$_.push_component();
 
-	let lazy_2 = _$_.track(1, void 0, void 0, __block);
+	let lazy_2 = _$_.track(1, __block, 'ca9f9852');
 	var fragment_12 = root_15();
 	var button_3 = _$_.first_child_frag(fragment_12);
 
@@ -285,7 +285,7 @@ export function SwitchBlockScoped(__anchor, _, __block) {
 export function SwitchNoBreak(__anchor, _, __block) {
 	_$_.push_component();
 
-	let lazy_3 = _$_.track(1, void 0, void 0, __block);
+	let lazy_3 = _$_.track(1, __block, '6b7cb0ea');
 	var fragment_16 = root_19();
 	var button_4 = _$_.first_child_frag(fragment_16);
 

package/tests/hydration/compiled/client/track-async-serialization.js

@@ -0,0 +1,390 @@
+// @ts-nocheck
+import * as _$_ from 'ripple/internal/client';
+
+var root_1 = _$_.template(`<p class="result"> </p>`, 0);
+var root_2 = _$_.template(`<p class="loading">loading...</p>`, 0);
+var root = _$_.template(`<button class="increment">increment</button><!>`, 1, 2);
+var root_4 = _$_.template(`<p class="result"> </p>`, 0);
+var root_5 = _$_.template(`<p class="loading">loading...</p>`, 0);
+var root_3 = _$_.template(`<!>`, 1, 1);
+var root_7 = _$_.template(`<span class="count"> </span>`, 0);
+var root_8 = _$_.template(`<span class="pending">...</span>`, 0);
+var root_6 = _$_.template(`<!>`, 1, 1);
+var root_10 = _$_.template(`<div class="user"><span class="name"> </span><span class="age"> </span></div>`, 0);
+var root_11 = _$_.template(`<div class="loading">loading user...</div>`, 0);
+var root_9 = _$_.template(`<!>`, 1, 1);
+var root_13 = _$_.template(`<div class="multi"><span class="first"> </span><span class="second"> </span></div>`, 0);
+var root_14 = _$_.template(`<div class="loading">loading...</div>`, 0);
+var root_12 = _$_.template(`<!>`, 1, 1);
+var root_16 = _$_.template(`<p class="result"> </p>`, 0);
+var root_17 = _$_.template(`<p class="error"> </p>`, 0);
+var root_18 = _$_.template(`<p class="loading">loading...</p>`, 0);
+var root_15 = _$_.template(`<!>`, 1, 1);
+var root_20 = _$_.template(`<p class="result"> </p>`, 0);
+var root_21 = _$_.template(`<p class="pending">loading...</p>`, 0);
+var root_19 = _$_.template(`<!>`, 1, 1);
+var root_23 = _$_.template(`<!>`, 1, 1);
+var root_24 = _$_.template(`<p class="parent-error"> </p>`, 0);
+var root_22 = _$_.template(`<!>`, 1, 1);
+var root_26 = _$_.template(`<p class="result"> </p>`, 0);
+var root_27 = _$_.template(`<p class="loading">loading...</p>`, 0);
+var root_25 = _$_.template(`<button class="increment">increment</button><!>`, 1, 2);
+
+import { track, trackAsync } from 'ripple';
+
+var _$__u0023_server = {
+	formatValue(...args) {
+		return _$_.rpc('1215faad', args);
+	}
+};
+
+export function AsyncWithServerCall(__anchor, _, __block) {
+	_$_.push_component();
+
+	let lazy = _$_.track(0, __block, '2e21cbe9');
+	var fragment = root();
+	var button_1 = _$_.first_child_frag(fragment);
+
+	button_1.__click = () => {
+		_$_.update(lazy);
+	};
+
+	var node = _$_.sibling(button_1);
+
+	_$_.try(
+		node,
+		(__anchor) => {
+			let lazy_1 = _$_.track_async(() => _$_.with_scope(__block, () => _$__u0023_server.formatValue(_$_.get(lazy))), __block, 'f0c2b41e');
+			var p_1 = root_1();
+
+			{
+				var expression = _$_.child(p_1, true);
+
+				_$_.expression(expression, () => _$_.get(lazy_1));
+				_$_.pop(p_1);
+			}
+
+			_$_.append(__anchor, p_1);
+		},
+		null,
+		(__anchor) => {
+			var p_2 = root_2();
+
+			_$_.append(__anchor, p_2);
+		}
+	);
+
+	_$_.append(__anchor, fragment);
+	_$_.pop_component();
+}
+
+export function AsyncSimpleValue(__anchor, _, __block) {
+	_$_.push_component();
+
+	var fragment_1 = root_3();
+	var node_1 = _$_.first_child_frag(fragment_1);
+
+	_$_.try(
+		node_1,
+		(__anchor) => {
+			let lazy_2 = _$_.track_async(() => _$_.with_scope(__block, () => Promise.resolve('hydrated value')), __block, '4e502c38');
+			var p_3 = root_4();
+
+			{
+				var expression_1 = _$_.child(p_3, true);
+
+				_$_.expression(expression_1, () => _$_.get(lazy_2));
+				_$_.pop(p_3);
+			}
+
+			_$_.append(__anchor, p_3);
+		},
+		null,
+		(__anchor) => {
+			var p_4 = root_5();
+
+			_$_.append(__anchor, p_4);
+		}
+	);
+
+	_$_.append(__anchor, fragment_1);
+	_$_.pop_component();
+}
+
+export function AsyncNumericValue(__anchor, _, __block) {
+	_$_.push_component();
+
+	var fragment_2 = root_6();
+	var node_2 = _$_.first_child_frag(fragment_2);
+
+	_$_.try(
+		node_2,
+		(__anchor) => {
+			let lazy_3 = _$_.track_async(() => _$_.with_scope(__block, () => Promise.resolve(42)), __block, '14891754');
+			var span_1 = root_7();
+
+			{
+				var expression_2 = _$_.child(span_1, true);
+
+				_$_.expression(expression_2, () => _$_.get(lazy_3));
+				_$_.pop(span_1);
+			}
+
+			_$_.append(__anchor, span_1);
+		},
+		null,
+		(__anchor) => {
+			var span_2 = root_8();
+
+			_$_.append(__anchor, span_2);
+		}
+	);
+
+	_$_.append(__anchor, fragment_2);
+	_$_.pop_component();
+}
+
+export function AsyncObjectValue(__anchor, _, __block) {
+	_$_.push_component();
+
+	var fragment_3 = root_9();
+	var node_3 = _$_.first_child_frag(fragment_3);
+
+	_$_.try(
+		node_3,
+		(__anchor) => {
+			let lazy_4 = _$_.track_async(() => _$_.with_scope(__block, () => Promise.resolve({ name: 'Alice', age: 30 })), __block, 'f325448a');
+			var div_1 = root_10();
+
+			{
+				var span_3 = _$_.child(div_1);
+
+				{
+					var expression_3 = _$_.child(span_3, true);
+
+					_$_.expression(expression_3, () => _$_.get(lazy_4).name);
+					_$_.pop(span_3);
+				}
+
+				var span_4 = _$_.sibling(span_3);
+
+				{
+					var expression_4 = _$_.child(span_4, true);
+
+					_$_.expression(expression_4, () => _$_.get(lazy_4).age);
+					_$_.pop(span_4);
+				}
+			}
+
+			_$_.append(__anchor, div_1);
+		},
+		null,
+		(__anchor) => {
+			var div_2 = root_11();
+
+			_$_.append(__anchor, div_2);
+		}
+	);
+
+	_$_.append(__anchor, fragment_3);
+	_$_.pop_component();
+}
+
+export function AsyncMultipleValues(__anchor, _, __block) {
+	_$_.push_component();
+
+	var fragment_4 = root_12();
+	var node_4 = _$_.first_child_frag(fragment_4);
+
+	_$_.try(
+		node_4,
+		(__anchor) => {
+			let lazy_5 = _$_.track_async(() => _$_.with_scope(__block, () => Promise.resolve('alpha')), __block, 'ab8199a0');
+			let lazy_6 = _$_.track_async(() => _$_.with_scope(__block, () => Promise.resolve('beta')), __block, 'fb7ad40b');
+			var div_3 = root_13();
+
+			{
+				var span_5 = _$_.child(div_3);
+
+				{
+					var expression_5 = _$_.child(span_5, true);
+
+					_$_.expression(expression_5, () => _$_.get(lazy_5));
+					_$_.pop(span_5);
+				}
+
+				var span_6 = _$_.sibling(span_5);
+
+				{
+					var expression_6 = _$_.child(span_6, true);
+
+					_$_.expression(expression_6, () => _$_.get(lazy_6));
+					_$_.pop(span_6);
+				}
+			}
+
+			_$_.append(__anchor, div_3);
+		},
+		null,
+		(__anchor) => {
+			var div_4 = root_14();
+
+			_$_.append(__anchor, div_4);
+		}
+	);
+
+	_$_.append(__anchor, fragment_4);
+	_$_.pop_component();
+}
+
+export function AsyncWithCatch(__anchor, _, __block) {
+	_$_.push_component();
+
+	var fragment_5 = root_15();
+	var node_5 = _$_.first_child_frag(fragment_5);
+
+	_$_.try(
+		node_5,
+		(__anchor) => {
+			let lazy_7 = _$_.track_async(() => _$_.with_scope(__block, () => Promise.reject(new Error('fetch failed'))), __block, '99982de5');
+			var p_5 = root_16();
+
+			{
+				var expression_7 = _$_.child(p_5, true);
+
+				_$_.expression(expression_7, () => _$_.get(lazy_7));
+				_$_.pop(p_5);
+			}
+
+			_$_.append(__anchor, p_5);
+		},
+		(__anchor, e) => {
+			var p_6 = root_17();
+
+			{
+				var expression_8 = _$_.child(p_6, true);
+
+				_$_.expression(expression_8, () => e.message);
+				_$_.pop(p_6);
+			}
+
+			_$_.append(__anchor, p_6);
+		},
+		(__anchor) => {
+			var p_7 = root_18();
+
+			_$_.append(__anchor, p_7);
+		}
+	);
+
+	_$_.append(__anchor, fragment_5);
+	_$_.pop_component();
+}
+
+export function ChildWithError(__anchor, _, __block) {
+	_$_.push_component();
+
+	var fragment_6 = root_19();
+	var node_6 = _$_.first_child_frag(fragment_6);
+
+	_$_.try(
+		node_6,
+		(__anchor) => {
+			let lazy_8 = _$_.track_async(() => _$_.with_scope(__block, () => Promise.reject(new Error('child error'))), __block, '1dea4c85');
+			var p_8 = root_20();
+
+			{
+				var expression_9 = _$_.child(p_8, true);
+
+				_$_.expression(expression_9, () => _$_.get(lazy_8));
+				_$_.pop(p_8);
+			}
+
+			_$_.append(__anchor, p_8);
+		},
+		null,
+		(__anchor) => {
+			var p_9 = root_21();
+
+			_$_.append(__anchor, p_9);
+		}
+	);
+
+	_$_.append(__anchor, fragment_6);
+	_$_.pop_component();
+}
+
+export function ParentWithCatch(__anchor, _, __block) {
+	_$_.push_component();
+
+	var fragment_7 = root_22();
+	var node_7 = _$_.first_child_frag(fragment_7);
+
+	_$_.try(
+		node_7,
+		(__anchor) => {
+			var fragment_8 = root_23();
+			var node_8 = _$_.first_child_frag(fragment_8);
+
+			ChildWithError(node_8, {}, _$_.active_block);
+			_$_.append(__anchor, fragment_8);
+		},
+		(__anchor, e) => {
+			var p_10 = root_24();
+
+			{
+				var expression_10 = _$_.child(p_10, true);
+
+				_$_.expression(expression_10, () => e.message);
+				_$_.pop(p_10);
+			}
+
+			_$_.append(__anchor, p_10);
+		}
+	);
+
+	_$_.append(__anchor, fragment_7);
+	_$_.pop_component();
+}
+
+export function AsyncWithReactiveDependency(__anchor, _, __block) {
+	_$_.push_component();
+
+	let lazy_9 = _$_.track(0, __block, 'c9d12acf');
+	var fragment_9 = root_25();
+	var button_2 = _$_.first_child_frag(fragment_9);
+
+	button_2.__click = () => {
+		_$_.update(lazy_9);
+	};
+
+	var node_9 = _$_.sibling(button_2);
+
+	_$_.try(
+		node_9,
+		(__anchor) => {
+			let lazy_10 = _$_.track_async(() => _$_.with_scope(__block, () => Promise.resolve(`count-${_$_.get(lazy_9)}`)), __block, 'cdd1adb8');
+			var p_11 = root_26();
+
+			{
+				var expression_11 = _$_.child(p_11, true);
+
+				_$_.expression(expression_11, () => _$_.get(lazy_10));
+				_$_.pop(p_11);
+			}
+
+			_$_.append(__anchor, p_11);
+		},
+		null,
+		(__anchor) => {
+			var p_12 = root_27();
+
+			_$_.append(__anchor, p_12);
+		}
+	);
+
+	_$_.append(__anchor, fragment_9);
+	_$_.pop_component();
+}
+
+_$_.delegate(['click']);

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

@@ -43,7 +43,7 @@ export function AsyncListInTryPending(__anchor, _, __block) {
 function AsyncList(__anchor, _, __block) {
 	_$_.push_component();
 
-	let lazy = _$_.track_async(() => _$_.with_scope(__block, () => Promise.resolve(['alpha', 'beta', 'gamma'])), __block);
+	let lazy = _$_.track_async(() => _$_.with_scope(__block, () => Promise.resolve(['alpha', 'beta', 'gamma'])), __block, 'd6bf9e33');
 	var ul_1 = root_3();
 
 	{
@@ -103,7 +103,7 @@ export function AsyncTryWithLeadingSibling(__anchor, _, __block) {
 function AsyncContent(__anchor, _, __block) {
 	_$_.push_component();
 
-	let lazy_1 = _$_.track_async(() => _$_.with_scope(__block, () => Promise.resolve('ready')), __block);
+	let lazy_1 = _$_.track_async(() => _$_.with_scope(__block, () => Promise.resolve('ready')), __block, 'd2fe7b64');
 	var div_3 = root_8();
 
 	{

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

@@ -304,7 +304,7 @@ function TextProp(__props) {
 export function TextPropWithToggle() {
 	_$_.push_component();
 
-	let lazy = _$_.track(false);
+	let lazy = _$_.track(false, 'b5de6402');
 
 	_$_.regular_block(() => {
 		{

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

@@ -6,7 +6,7 @@ import { track } from 'ripple/server';
 export function ClickCounter() {
 	_$_.push_component();
 
-	let lazy = _$_.track(0);
+	let lazy = _$_.track(0, 'a070e3a7');
 
 	_$_.regular_block(() => {
 		_$_.output_push('<div');
@@ -42,7 +42,7 @@ export function ClickCounter() {
 export function IncrementDecrement() {
 	_$_.push_component();
 
-	let lazy_1 = _$_.track(0);
+	let lazy_1 = _$_.track(0, '87fcabdd');
 
 	_$_.regular_block(() => {
 		_$_.output_push('<div');
@@ -87,8 +87,8 @@ export function IncrementDecrement() {
 export function MultipleEvents() {
 	_$_.push_component();
 
-	let lazy_2 = _$_.track(0);
-	let lazy_3 = _$_.track(0);
+	let lazy_2 = _$_.track(0, '41b9f0b0');
+	let lazy_3 = _$_.track(0, '72789f75');
 
 	_$_.regular_block(() => {
 		_$_.output_push('<div');
@@ -133,8 +133,8 @@ export function MultipleEvents() {
 export function MultiStateUpdate() {
 	_$_.push_component();
 
-	let lazy_4 = _$_.track(0);
-	let lazy_5 = _$_.track('none');
+	let lazy_4 = _$_.track(0, '5a375160');
+	let lazy_5 = _$_.track('none', '3ceeb88c');
 
 	const handleClick = () => {
 		_$_.update(lazy_4);
@@ -184,7 +184,7 @@ export function MultiStateUpdate() {
 export function ToggleButton() {
 	_$_.push_component();
 
-	let lazy_6 = _$_.track(false);
+	let lazy_6 = _$_.track(false, 'be823ec7');
 
 	_$_.regular_block(() => {
 		_$_.output_push('<div');
@@ -229,7 +229,7 @@ export function ChildButton(props) {
 export function ParentWithChildButton() {
 	_$_.push_component();
 
-	let lazy_7 = _$_.track(0);
+	let lazy_7 = _$_.track(0, 'dcc2e0f9');
 
 	_$_.regular_block(() => {
 		_$_.output_push('<div');