ripple 1.0.0 → 1.0.1

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');

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

@@ -109,7 +109,7 @@ export function KeyedForLoop() {
 export function ReactiveForLoopAdd() {
 	_$_.push_component();
 
-	let lazy = _$_.track(['A', 'B']);
+	let lazy = _$_.track(['A', 'B'], 'e145678a');
 
 	_$_.regular_block(() => {
 		_$_.output_push('<button');
@@ -153,7 +153,7 @@ export function ReactiveForLoopAdd() {
 export function ReactiveForLoopRemove() {
 	_$_.push_component();
 
-	let lazy_1 = _$_.track(['A', 'B', 'C']);
+	let lazy_1 = _$_.track(['A', 'B', 'C'], 'b4e9bd54');
 
 	_$_.regular_block(() => {
 		_$_.output_push('<button');
@@ -197,7 +197,7 @@ export function ReactiveForLoopRemove() {
 export function ForLoopInteractive() {
 	_$_.push_component();
 
-	let lazy_2 = _$_.track([0, 0, 0]);
+	let lazy_2 = _$_.track([0, 0, 0], '36f563df');
 
 	_$_.regular_block(() => {
 		_$_.output_push('<div');
@@ -390,11 +390,14 @@ export function ForLoopComplexObjects() {
 export function KeyedForLoopReorder() {
 	_$_.push_component();
 
-	let lazy_3 = _$_.track([
-		{ id: 1, name: 'First' },
-		{ id: 2, name: 'Second' },
-		{ id: 3, name: 'Third' }
-	]);
+	let lazy_3 = _$_.track(
+		[
+			{ id: 1, name: 'First' },
+			{ id: 2, name: 'Second' },
+			{ id: 3, name: 'Third' }
+		],
+		'e7abc6a3'
+	);
 
 	_$_.regular_block(() => {
 		_$_.output_push('<button');
@@ -439,7 +442,7 @@ export function KeyedForLoopReorder() {
 export function KeyedForLoopUpdate() {
 	_$_.push_component();
 
-	let lazy_4 = _$_.track([{ id: 1, name: 'Item 1' }, { id: 2, name: 'Item 2' }]);
+	let lazy_4 = _$_.track([{ id: 1, name: 'Item 1' }, { id: 2, name: 'Item 2' }], '7a2c2ada');
 
 	_$_.regular_block(() => {
 		_$_.output_push('<button');
@@ -484,7 +487,7 @@ export function KeyedForLoopUpdate() {
 export function ForLoopMixedOperations() {
 	_$_.push_component();
 
-	let lazy_5 = _$_.track(['A', 'B', 'C', 'D']);
+	let lazy_5 = _$_.track(['A', 'B', 'C', 'D'], '3dd7c7b6');
 
 	_$_.regular_block(() => {
 		_$_.output_push('<button');
@@ -529,8 +532,8 @@ export function ForLoopMixedOperations() {
 export function ForLoopInsideIf() {
 	_$_.push_component();
 
-	let lazy_6 = _$_.track(true);
-	let lazy_7 = _$_.track(['X', 'Y', 'Z']);
+	let lazy_6 = _$_.track(true, '0528df30');
+	let lazy_7 = _$_.track(['X', 'Y', 'Z'], 'bf375103');
 
 	_$_.regular_block(() => {
 		_$_.output_push('<button');
@@ -593,7 +596,7 @@ export function ForLoopInsideIf() {
 export function ForLoopEmptyToPopulated() {
 	_$_.push_component();
 
-	let lazy_8 = _$_.track([]);
+	let lazy_8 = _$_.track([], '525c5dbc');
 
 	_$_.regular_block(() => {
 		_$_.output_push('<button');
@@ -638,7 +641,7 @@ export function ForLoopEmptyToPopulated() {
 export function ForLoopPopulatedToEmpty() {
 	_$_.push_component();
 
-	let lazy_9 = _$_.track(['One', 'Two', 'Three']);
+	let lazy_9 = _$_.track(['One', 'Two', 'Three'], 'ee47f078');
 
 	_$_.regular_block(() => {
 		_$_.output_push('<button');
@@ -683,7 +686,7 @@ export function ForLoopPopulatedToEmpty() {
 export function NestedForLoopReactive() {
 	_$_.push_component();
 
-	let lazy_10 = _$_.track([[1, 2], [3, 4]]);
+	let lazy_10 = _$_.track([[1, 2], [3, 4]], 'a2f41fb3');
 
 	_$_.regular_block(() => {
 		_$_.output_push('<button');
@@ -863,7 +866,7 @@ export function ForLoopDeeplyNested() {
 export function ForLoopIndexUpdate() {
 	_$_.push_component();
 
-	let lazy_11 = _$_.track(['First', 'Second', 'Third']);
+	let lazy_11 = _$_.track(['First', 'Second', 'Third'], 'f61e31e6');
 
 	_$_.regular_block(() => {
 		_$_.output_push('<button');
@@ -911,11 +914,14 @@ export function ForLoopIndexUpdate() {
 export function KeyedForLoopWithIndex() {
 	_$_.push_component();
 
-	let lazy_12 = _$_.track([
-		{ id: 'a', value: 'Alpha' },
-		{ id: 'b', value: 'Beta' },
-		{ id: 'c', value: 'Gamma' }
-	]);
+	let lazy_12 = _$_.track(
+		[
+			{ id: 'a', value: 'Alpha' },
+			{ id: 'b', value: 'Beta' },
+			{ id: 'c', value: 'Gamma' }
+		],
+		'3467975a'
+	);
 
 	_$_.regular_block(() => {
 		_$_.output_push('<button');
@@ -964,7 +970,7 @@ export function KeyedForLoopWithIndex() {
 export function ForLoopWithSiblings() {
 	_$_.push_component();
 
-	let lazy_13 = _$_.track(['A', 'B']);
+	let lazy_13 = _$_.track(['A', 'B'], '3c7e8152');
 
 	_$_.regular_block(() => {
 		_$_.output_push('<div');
@@ -1062,7 +1068,7 @@ export function ForLoopItemState() {
 function TodoItem(props) {
 	_$_.push_component();
 
-	let lazy_14 = _$_.track(false);
+	let lazy_14 = _$_.track(false, '4f2402a4');
 
 	_$_.regular_block(() => {
 		_$_.output_push('<div');
@@ -1128,7 +1134,7 @@ export function ForLoopSingleItem() {
 export function ForLoopAddAtBeginning() {
 	_$_.push_component();
 
-	let lazy_15 = _$_.track(['B', 'C']);
+	let lazy_15 = _$_.track(['B', 'C'], '1561403a');
 
 	_$_.regular_block(() => {
 		_$_.output_push('<button');
@@ -1173,7 +1179,7 @@ export function ForLoopAddAtBeginning() {
 export function ForLoopAddInMiddle() {
 	_$_.push_component();
 
-	let lazy_16 = _$_.track(['A', 'C']);
+	let lazy_16 = _$_.track(['A', 'C'], '1bc60b46');
 
 	_$_.regular_block(() => {
 		_$_.output_push('<button');
@@ -1218,7 +1224,7 @@ export function ForLoopAddInMiddle() {
 export function ForLoopRemoveFromMiddle() {
 	_$_.push_component();
 
-	let lazy_17 = _$_.track(['A', 'B', 'C']);
+	let lazy_17 = _$_.track(['A', 'B', 'C'], '1c87f95f');
 
 	_$_.regular_block(() => {
 		_$_.output_push('<button');
@@ -1300,7 +1306,7 @@ export function ForLoopLargeList() {
 export function ForLoopSwap() {
 	_$_.push_component();
 
-	let lazy_18 = _$_.track(['A', 'B', 'C', 'D']);
+	let lazy_18 = _$_.track(['A', 'B', 'C', 'D'], '5f8d152f');
 
 	_$_.regular_block(() => {
 		_$_.output_push('<button');
@@ -1345,7 +1351,7 @@ export function ForLoopSwap() {
 export function ForLoopReverse() {
 	_$_.push_component();
 
-	let lazy_19 = _$_.track(['A', 'B', 'C', 'D']);
+	let lazy_19 = _$_.track(['A', 'B', 'C', 'D'], '24602e64');
 
 	_$_.regular_block(() => {
 		_$_.output_push('<button');