ripple 0.3.25 → 0.3.26

package/tests/client/compiler/compiler.basic.test.tsrx

@@ -1,6 +1,6 @@
 import { parse, compile, compile_to_volar_mappings } from '@tsrx/ripple';
-import { obfuscateIdentifier } from '@tsrx/core';
 import type * as AST from 'estree';
+import type * as ESTreeJSX from 'estree-jsx';
 
 function count_occurrences(string: string, subString: string): number {
 	let count = 0;
@@ -697,14 +697,14 @@ export component App() {
 			const ast = parse(source);
 			const comp = ast.body[0] as unknown as AST.Component;
 			const ul = comp.body.find((n) => n.type === 'Element') as AST.Element;
-			expect(ul.id.name).toBe('ul');
+			expect((ul.id as AST.Identifier).name).toBe('ul');
 			expect(ul.children).toHaveLength(1);
 			const decl = ul.children[0] as unknown as AST.VariableDeclaration;
 			expect(decl.type).toBe('VariableDeclaration');
 			expect(decl.kind).toBe('var');
 			expect((decl.declarations[0].id as AST.Identifier).name).toBe('a');
 			expect((decl.declarations[0].init as AST.Literal).value).toBe('123');
-			expect(ul.closingElement?.name?.name).toBe('ul');
+			expect((ul.closingElement?.name as ESTreeJSX.JSXIdentifier)?.name).toBe('ul');
 		},
 	);
 
@@ -725,4 +725,19 @@ export component App() {
 
 		expect(result).toContain('_$_.spread_props(');
 	});
+
+	it('parses less-than comparisons at line start in element children without whitespace', () => {
+		const source = `component TodoList({ items }: { items: { text: string }[] }) {
+	<ul>var a = 3
+	<4;</ul>
+}`;
+
+		const ast = parse(source);
+		const comp = ast.body[0] as unknown as AST.Component;
+		const ul = comp.body.find((n) => n.type === 'Element') as AST.Element;
+		expect(ul.id.name).toBe('ul');
+		expect(ul.children.length).toBeGreaterThanOrEqual(1);
+		const decl = ul.children[0] as unknown as AST.VariableDeclaration;
+		expect(decl.type).toBe('VariableDeclaration');
+	});
 });

package/tests/client/track-async-hydration.test.tsrx

@@ -0,0 +1,54 @@
+import { trackAsync, flushSync, SUSPENSE_PENDING, peek } from 'ripple';
+
+describe('trackAsync hydration from serialized data (client)', () => {
+	it('reads serialized data from script tag during hydration simulation', async () => {
+		// This test verifies the client runtime can parse the serialized script tags
+		// The full hydration round-trip is tested in hydration tests
+
+		component App() {
+			try {
+				let &[data] = trackAsync(() => Promise.resolve('fallback'));
+				<p class="result">{data}</p>
+			} pending {
+				<p class="loading">{'loading...'}</p>
+			}
+		}
+
+		render(App);
+
+		// Without hydration, this should go through normal async flow
+		// Need to wait for the pending state to render
+		await new Promise((resolve) => setTimeout(resolve, 0));
+		flushSync();
+
+		// Promise resolves immediately so should show result
+		expect(container.querySelector('.result')?.textContent).toBe('fallback');
+	});
+
+	it('trackAsync resolves normally when no script tag is present', async () => {
+		let resolve_fn: (value: number) => void;
+		const promise = new Promise<number>((r) => (resolve_fn = r));
+
+		component App() {
+			try {
+				let &[value] = trackAsync(() => promise);
+				<span class="value">{value}</span>
+			} pending {
+				<span class="pending">{'waiting'}</span>
+			}
+		}
+
+		render(App);
+
+		await new Promise((r) => setTimeout(r, 0));
+		flushSync();
+
+		expect(container.querySelector('.pending')?.textContent).toBe('waiting');
+
+		resolve_fn!(42);
+		await new Promise((r) => setTimeout(r, 0));
+		flushSync();
+
+		expect(container.querySelector('.value')?.textContent).toBe('42');
+	});
+});

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

@@ -202,7 +202,7 @@ function TextProp(__anchor, __props, __block) {
 export function TextPropWithToggle(__anchor, _, __block) {
 	_$_.push_component();
 
-	let lazy = _$_.track(false, void 0, void 0, __block);
+	let lazy = _$_.track(false, __block, 'b5de6402');
 	var fragment_5 = root_13();
 	var node_4 = _$_.first_child_frag(fragment_5);
 

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

@@ -14,7 +14,7 @@ import { track } from 'ripple';
 export function ClickCounter(__anchor, _, __block) {
 	_$_.push_component();
 
-	let lazy = _$_.track(0, void 0, void 0, __block);
+	let lazy = _$_.track(0, __block, 'a070e3a7');
 	var div_1 = root();
 
 	{
@@ -41,7 +41,7 @@ export function ClickCounter(__anchor, _, __block) {
 export function IncrementDecrement(__anchor, _, __block) {
 	_$_.push_component();
 
-	let lazy_1 = _$_.track(0, void 0, void 0, __block);
+	let lazy_1 = _$_.track(0, __block, '87fcabdd');
 	var div_2 = root_1();
 
 	{
@@ -74,8 +74,8 @@ export function IncrementDecrement(__anchor, _, __block) {
 export function MultipleEvents(__anchor, _, __block) {
 	_$_.push_component();
 
-	let lazy_2 = _$_.track(0, void 0, void 0, __block);
-	let lazy_3 = _$_.track(0, void 0, void 0, __block);
+	let lazy_2 = _$_.track(0, __block, '41b9f0b0');
+	let lazy_3 = _$_.track(0, __block, '72789f75');
 	var div_3 = root_2();
 
 	{
@@ -115,8 +115,8 @@ export function MultipleEvents(__anchor, _, __block) {
 export function MultiStateUpdate(__anchor, _, __block) {
 	_$_.push_component();
 
-	let lazy_4 = _$_.track(0, void 0, void 0, __block);
-	let lazy_5 = _$_.track('none', void 0, void 0, __block);
+	let lazy_4 = _$_.track(0, __block, '5a375160');
+	let lazy_5 = _$_.track('none', __block, '3ceeb88c');
 
 	const handleClick = () => {
 		_$_.update(lazy_4);
@@ -156,7 +156,7 @@ export function MultiStateUpdate(__anchor, _, __block) {
 export function ToggleButton(__anchor, _, __block) {
 	_$_.push_component();
 
-	let lazy_6 = _$_.track(false, void 0, void 0, __block);
+	let lazy_6 = _$_.track(false, __block, 'be823ec7');
 	var div_5 = root_4();
 
 	{
@@ -199,7 +199,7 @@ export function ChildButton(__anchor, props, __block) {
 export function ParentWithChildButton(__anchor, _, __block) {
 	_$_.push_component();
 
-	let lazy_7 = _$_.track(0, void 0, void 0, __block);
+	let lazy_7 = _$_.track(0, __block, 'dcc2e0f9');
 	var div_6 = root_6();
 
 	{

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

@@ -171,7 +171,7 @@ export function KeyedForLoop(__anchor, _, __block) {
 export function ReactiveForLoopAdd(__anchor, _, __block) {
 	_$_.push_component();
 
-	let lazy = _$_.track(['A', 'B'], void 0, void 0, __block);
+	let lazy = _$_.track(['A', 'B'], __block, 'e145678a');
 	var fragment = root_6();
 	var button_1 = _$_.first_child_frag(fragment);
 
@@ -211,7 +211,7 @@ export function ReactiveForLoopAdd(__anchor, _, __block) {
 export function ReactiveForLoopRemove(__anchor, _, __block) {
 	_$_.push_component();
 
-	let lazy_1 = _$_.track(['A', 'B', 'C'], void 0, void 0, __block);
+	let lazy_1 = _$_.track(['A', 'B', 'C'], __block, 'b4e9bd54');
 	var fragment_1 = root_8();
 	var button_2 = _$_.first_child_frag(fragment_1);
 
@@ -251,7 +251,7 @@ export function ReactiveForLoopRemove(__anchor, _, __block) {
 export function ForLoopInteractive(__anchor, _, __block) {
 	_$_.push_component();
 
-	let lazy_2 = _$_.track([0, 0, 0], void 0, void 0, __block);
+	let lazy_2 = _$_.track([0, 0, 0], __block, '36f563df');
 	var div_1 = root_10();
 
 	{
@@ -447,9 +447,8 @@ export function KeyedForLoopReorder(__anchor, _, __block) {
 			{ id: 2, name: 'Second' },
 			{ id: 3, name: 'Third' }
 		],
-		void 0,
-		void 0,
-		__block
+		__block,
+		'e7abc6a3'
 	);
 
 	var fragment_2 = root_19();
@@ -496,7 +495,7 @@ export function KeyedForLoopReorder(__anchor, _, __block) {
 export function KeyedForLoopUpdate(__anchor, _, __block) {
 	_$_.push_component();
 
-	let lazy_4 = _$_.track([{ id: 1, name: 'Item 1' }, { id: 2, name: 'Item 2' }], void 0, void 0, __block);
+	let lazy_4 = _$_.track([{ id: 1, name: 'Item 1' }, { id: 2, name: 'Item 2' }], __block, '7a2c2ada');
 	var fragment_3 = root_21();
 	var button_5 = _$_.first_child_frag(fragment_3);
 
@@ -541,7 +540,7 @@ export function KeyedForLoopUpdate(__anchor, _, __block) {
 export function ForLoopMixedOperations(__anchor, _, __block) {
 	_$_.push_component();
 
-	let lazy_5 = _$_.track(['A', 'B', 'C', 'D'], void 0, void 0, __block);
+	let lazy_5 = _$_.track(['A', 'B', 'C', 'D'], __block, '3dd7c7b6');
 	var fragment_4 = root_23();
 	var button_6 = _$_.first_child_frag(fragment_4);
 
@@ -583,8 +582,8 @@ export function ForLoopMixedOperations(__anchor, _, __block) {
 export function ForLoopInsideIf(__anchor, _, __block) {
 	_$_.push_component();
 
-	let lazy_6 = _$_.track(true, void 0, void 0, __block);
-	let lazy_7 = _$_.track(['X', 'Y', 'Z'], void 0, void 0, __block);
+	let lazy_6 = _$_.track(true, __block, '0528df30');
+	let lazy_7 = _$_.track(['X', 'Y', 'Z'], __block, 'bf375103');
 	var fragment_5 = root_25();
 	var button_7 = _$_.first_child_frag(fragment_5);
 
@@ -641,7 +640,7 @@ export function ForLoopInsideIf(__anchor, _, __block) {
 export function ForLoopEmptyToPopulated(__anchor, _, __block) {
 	_$_.push_component();
 
-	let lazy_8 = _$_.track([], void 0, void 0, __block);
+	let lazy_8 = _$_.track([], __block, '525c5dbc');
 	var fragment_6 = root_28();
 	var button_9 = _$_.first_child_frag(fragment_6);
 
@@ -681,7 +680,7 @@ export function ForLoopEmptyToPopulated(__anchor, _, __block) {
 export function ForLoopPopulatedToEmpty(__anchor, _, __block) {
 	_$_.push_component();
 
-	let lazy_9 = _$_.track(['One', 'Two', 'Three'], void 0, void 0, __block);
+	let lazy_9 = _$_.track(['One', 'Two', 'Three'], __block, 'ee47f078');
 	var fragment_7 = root_30();
 	var button_10 = _$_.first_child_frag(fragment_7);
 
@@ -721,7 +720,7 @@ export function ForLoopPopulatedToEmpty(__anchor, _, __block) {
 export function NestedForLoopReactive(__anchor, _, __block) {
 	_$_.push_component();
 
-	let lazy_10 = _$_.track([[1, 2], [3, 4]], void 0, void 0, __block);
+	let lazy_10 = _$_.track([[1, 2], [3, 4]], __block, 'a2f41fb3');
 	var fragment_8 = root_32();
 	var button_11 = _$_.first_child_frag(fragment_8);
 
@@ -905,7 +904,7 @@ export function ForLoopDeeplyNested(__anchor, _, __block) {
 export function ForLoopIndexUpdate(__anchor, _, __block) {
 	_$_.push_component();
 
-	let lazy_11 = _$_.track(['First', 'Second', 'Third'], void 0, void 0, __block);
+	let lazy_11 = _$_.track(['First', 'Second', 'Third'], __block, 'f61e31e6');
 	var fragment_9 = root_39();
 	var button_13 = _$_.first_child_frag(fragment_9);
 
@@ -955,9 +954,8 @@ export function KeyedForLoopWithIndex(__anchor, _, __block) {
 			{ id: 'b', value: 'Beta' },
 			{ id: 'c', value: 'Gamma' }
 		],
-		void 0,
-		void 0,
-		__block
+		__block,
+		'3467975a'
 	);
 
 	var fragment_10 = root_41();
@@ -1021,7 +1019,7 @@ export function KeyedForLoopWithIndex(__anchor, _, __block) {
 export function ForLoopWithSiblings(__anchor, _, __block) {
 	_$_.push_component();
 
-	let lazy_13 = _$_.track(['A', 'B'], void 0, void 0, __block);
+	let lazy_13 = _$_.track(['A', 'B'], __block, '3c7e8152');
 	var fragment_11 = root_43();
 	var div_13 = _$_.first_child_frag(fragment_11);
 
@@ -1112,7 +1110,7 @@ export function ForLoopItemState(__anchor, _, __block) {
 function TodoItem(__anchor, props, __block) {
 	_$_.push_component();
 
-	let lazy_14 = _$_.track(false, void 0, void 0, __block);
+	let lazy_14 = _$_.track(false, __block, '4f2402a4');
 	var div_16 = root_47();
 
 	{
@@ -1194,7 +1192,7 @@ export function ForLoopSingleItem(__anchor, _, __block) {
 export function ForLoopAddAtBeginning(__anchor, _, __block) {
 	_$_.push_component();
 
-	let lazy_15 = _$_.track(['B', 'C'], void 0, void 0, __block);
+	let lazy_15 = _$_.track(['B', 'C'], __block, '1561403a');
 	var fragment_13 = root_50();
 	var button_16 = _$_.first_child_frag(fragment_13);
 
@@ -1236,7 +1234,7 @@ export function ForLoopAddAtBeginning(__anchor, _, __block) {
 export function ForLoopAddInMiddle(__anchor, _, __block) {
 	_$_.push_component();
 
-	let lazy_16 = _$_.track(['A', 'C'], void 0, void 0, __block);
+	let lazy_16 = _$_.track(['A', 'C'], __block, '1bc60b46');
 	var fragment_14 = root_52();
 	var button_17 = _$_.first_child_frag(fragment_14);
 
@@ -1281,7 +1279,7 @@ export function ForLoopAddInMiddle(__anchor, _, __block) {
 export function ForLoopRemoveFromMiddle(__anchor, _, __block) {
 	_$_.push_component();
 
-	let lazy_17 = _$_.track(['A', 'B', 'C'], void 0, void 0, __block);
+	let lazy_17 = _$_.track(['A', 'B', 'C'], __block, '1c87f95f');
 	var fragment_15 = root_54();
 	var button_18 = _$_.first_child_frag(fragment_15);
 
@@ -1359,7 +1357,7 @@ export function ForLoopLargeList(__anchor, _, __block) {
 export function ForLoopSwap(__anchor, _, __block) {
 	_$_.push_component();
 
-	let lazy_18 = _$_.track(['A', 'B', 'C', 'D'], void 0, void 0, __block);
+	let lazy_18 = _$_.track(['A', 'B', 'C', 'D'], __block, '5f8d152f');
 	var fragment_16 = root_58();
 	var button_19 = _$_.first_child_frag(fragment_16);
 
@@ -1404,7 +1402,7 @@ export function ForLoopSwap(__anchor, _, __block) {
 export function ForLoopReverse(__anchor, _, __block) {
 	_$_.push_component();
 
-	let lazy_19 = _$_.track(['A', 'B', 'C', 'D'], void 0, void 0, __block);
+	let lazy_19 = _$_.track(['A', 'B', 'C', 'D'], __block, '24602e64');
 	var fragment_17 = root_60();
 	var button_20 = _$_.first_child_frag(fragment_17);
 

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

@@ -33,7 +33,7 @@ export function StaticTitle(__anchor, _, __block) {
 export function ReactiveTitle(__anchor, _, __block) {
 	_$_.push_component();
 
-	let lazy = _$_.track('Initial Title', void 0, void 0, __block);
+	let lazy = _$_.track('Initial Title', __block, 'cbca63e3');
 	var div_2 = root_1();
 
 	{
@@ -77,7 +77,7 @@ export function MultipleHeadElements(__anchor, _, __block) {
 export function ReactiveMetaTags(__anchor, _, __block) {
 	_$_.push_component();
 
-	let lazy_1 = _$_.track('Initial description', void 0, void 0, __block);
+	let lazy_1 = _$_.track('Initial description', __block, '38bfa3b2');
 	var div_4 = root_4();
 
 	{
@@ -102,7 +102,7 @@ export function ReactiveMetaTags(__anchor, _, __block) {
 export function TitleWithTemplate(__anchor, _, __block) {
 	_$_.push_component();
 
-	let lazy_2 = _$_.track('World', void 0, void 0, __block);
+	let lazy_2 = _$_.track('World', __block, 'f3925cd5');
 	var div_5 = root_6();
 
 	{
@@ -138,8 +138,8 @@ export function EmptyTitle(__anchor, _, __block) {
 export function ConditionalTitle(__anchor, _, __block) {
 	_$_.push_component();
 
-	let lazy_3 = _$_.track(true, void 0, void 0, __block);
-	let lazy_4 = _$_.track('Main Page', void 0, void 0, __block);
+	let lazy_3 = _$_.track(true, __block, 'ff71bf1f');
+	let lazy_4 = _$_.track('Main Page', __block, '7cd7d671');
 	var div_7 = root_8();
 
 	{
@@ -162,7 +162,7 @@ export function ConditionalTitle(__anchor, _, __block) {
 export function ComputedTitle(__anchor, _, __block) {
 	_$_.push_component();
 
-	let lazy_5 = _$_.track(0, void 0, void 0, __block);
+	let lazy_5 = _$_.track(0, __block, 'b6a48610');
 	let prefix = 'Count: ';
 	var div_8 = root_9();
 

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

@@ -33,7 +33,7 @@ export function Layout(__anchor, { children }, __block) {
 export function Content(__anchor, _, __block) {
 	_$_.push_component();
 
-	let lazy = _$_.track(true, void 0, void 0, __block);
+	let lazy = _$_.track(true, __block, '0bdb1500');
 	var div_2 = root_1();
 
 	{

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

@@ -862,7 +862,7 @@ function NavItem(__anchor, { href, text: label, active = false }, __block) {
 function SidebarSection(__anchor, { title, children }, __block) {
 	_$_.push_component();
 
-	let lazy = _$_.track(true, void 0, void 0, __block);
+	let lazy = _$_.track(true, __block, '6ac6906f');
 	var section_2 = root_38();
 
 	{

package/tests/hydration/compiled/client/if-children.js

@@ -27,7 +27,7 @@ import { track } from 'ripple';
 export function IfWithChildren(__anchor, { children }, __block) {
 	_$_.push_component();
 
-	let lazy = _$_.track(true, void 0, void 0, __block);
+	let lazy = _$_.track(true, __block, 'c64714b1');
 	var div_1 = root();
 
 	{
@@ -110,7 +110,7 @@ export function TestIfWithChildren(__anchor, _, __block) {
 export function IfWithStaticChildren(__anchor, _, __block) {
 	_$_.push_component();
 
-	let lazy_1 = _$_.track(true, void 0, void 0, __block);
+	let lazy_1 = _$_.track(true, __block, '3bba8f77');
 	var div_5 = root_5();
 
 	{
@@ -142,7 +142,7 @@ export function IfWithStaticChildren(__anchor, _, __block) {
 export function IfWithSiblingsAndChildren(__anchor, { children }, __block) {
 	_$_.push_component();
 
-	let lazy_2 = _$_.track(true, void 0, void 0, __block);
+	let lazy_2 = _$_.track(true, __block, 'a1b8fb4c');
 	var section_1 = root_7();
 
 	{
@@ -210,7 +210,7 @@ export function TestIfWithSiblingsAndChildren(__anchor, _, __block) {
 export function ElementWithChildrenThenIf(__anchor, _, __block) {
 	_$_.push_component();
 
-	let lazy_3 = _$_.track(true, void 0, void 0, __block);
+	let lazy_3 = _$_.track(true, __block, '7cd4817b');
 	var fragment_4 = root_11();
 	var div_11 = _$_.first_child_frag(fragment_4);
 
@@ -247,7 +247,7 @@ export function ElementWithChildrenThenIf(__anchor, _, __block) {
 export function DeepNestingThenIf(__anchor, _, __block) {
 	_$_.push_component();
 
-	let lazy_4 = _$_.track(true, void 0, void 0, __block);
+	let lazy_4 = _$_.track(true, __block, '923116be');
 	var fragment_5 = root_13();
 	var section_2 = _$_.first_child_frag(fragment_5);
 
@@ -284,7 +284,7 @@ export function DeepNestingThenIf(__anchor, _, __block) {
 export function DomElementChildrenThenSibling(__anchor, _, __block) {
 	_$_.push_component();
 
-	let lazy_5 = _$_.track('code', void 0, void 0, __block);
+	let lazy_5 = _$_.track('code', __block, '33a1e97f');
 	var div_13 = root_15();
 
 	{
@@ -353,7 +353,7 @@ export function DomElementChildrenThenSibling(__anchor, _, __block) {
 export function DomChildrenThenStaticSiblings(__anchor, _, __block) {
 	_$_.push_component();
 
-	let lazy_6 = _$_.track(0, void 0, void 0, __block);
+	let lazy_6 = _$_.track(0, __block, '0ea64305');
 	var fragment_6 = root_18();
 	var div_17 = _$_.first_child_frag(fragment_6);
 

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

@@ -102,7 +102,7 @@ export function IfElse(__anchor, _, __block) {
 export function ReactiveIf(__anchor, _, __block) {
 	_$_.push_component();
 
-	let lazy = _$_.track(true, void 0, void 0, __block);
+	let lazy = _$_.track(true, __block, '19a16ff0');
 	var fragment_3 = root_7();
 	var button_1 = _$_.first_child_frag(fragment_3);
 
@@ -131,7 +131,7 @@ export function ReactiveIf(__anchor, _, __block) {
 export function ReactiveIfElse(__anchor, _, __block) {
 	_$_.push_component();
 
-	let lazy_1 = _$_.track(false, void 0, void 0, __block);
+	let lazy_1 = _$_.track(false, __block, '41177f39');
 	var fragment_4 = root_9();
 	var button_2 = _$_.first_child_frag(fragment_4);
 
@@ -166,8 +166,8 @@ export function ReactiveIfElse(__anchor, _, __block) {
 export function NestedIf(__anchor, _, __block) {
 	_$_.push_component();
 
-	let lazy_2 = _$_.track(true, void 0, void 0, __block);
-	let lazy_3 = _$_.track(true, void 0, void 0, __block);
+	let lazy_2 = _$_.track(true, __block, '7894e1df');
+	let lazy_3 = _$_.track(true, __block, 'f21b8c26');
 	var fragment_5 = root_12();
 	var button_3 = _$_.first_child_frag(fragment_5);
 
@@ -221,7 +221,7 @@ export function NestedIf(__anchor, _, __block) {
 export function IfElseIfChain(__anchor, _, __block) {
 	_$_.push_component();
 
-	let lazy_4 = _$_.track('loading', void 0, void 0, __block);
+	let lazy_4 = _$_.track('loading', __block, '4c69c94a');
 	var div_9 = root_15();
 
 	{

package/tests/hydration/compiled/client/mixed-control-flow.js

@@ -168,9 +168,9 @@ export function MixedControlFlowStatic(__anchor, _, __block) {
 export function MixedControlFlowReactive(__anchor, _, __block) {
 	_$_.push_component();
 
-	let lazy = _$_.track(true, void 0, void 0, __block);
-	let lazy_1 = _$_.track('a', void 0, void 0, __block);
-	let lazy_2 = _$_.track([{ id: 1, label: 'One' }, { id: 2, label: 'Two' }], void 0, void 0, __block);
+	let lazy = _$_.track(true, __block, '5ae53d26');
+	let lazy_1 = _$_.track('a', __block, '5b53eda2');
+	let lazy_2 = _$_.track([{ id: 1, label: 'One' }, { id: 2, label: 'Two' }], __block, '7890dad6');
 	var fragment_4 = root_9();
 	var button_1 = _$_.first_child_frag(fragment_4);
 
@@ -403,7 +403,7 @@ export function MixedControlFlowAsyncPending(__anchor, _, __block) {
 function AsyncRow(__anchor, { label }, __block) {
 	_$_.push_component();
 
-	let lazy_3 = _$_.track_async(() => _$_.with_scope(__block, () => Promise.resolve(label)), __block);
+	let lazy_3 = _$_.track_async(() => _$_.with_scope(__block, () => Promise.resolve(label)), __block, '10cc79a0');
 	var div_9 = root_25();
 
 	{

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

@@ -48,7 +48,7 @@ export function SimplePortal(__anchor, _, __block) {
 export function ConditionalPortal(__anchor, _, __block) {
 	_$_.push_component();
 
-	let lazy = _$_.track(true, void 0, void 0, __block);
+	let lazy = _$_.track(true, __block, '4f6df174');
 	var div_3 = root_2();
 
 	{

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

@@ -13,7 +13,7 @@ import { track } from 'ripple';
 export function TrackedState(__anchor, _, __block) {
 	_$_.push_component();
 
-	let lazy = _$_.track(0, void 0, void 0, __block);
+	let lazy = _$_.track(0, __block, 'c1818584');
 	var div_1 = root();
 
 	{
@@ -30,7 +30,7 @@ export function TrackedState(__anchor, _, __block) {
 export function CounterWithInitial(__anchor, props, __block) {
 	_$_.push_component();
 
-	let lazy_1 = _$_.track(props.initial, void 0, void 0, __block);
+	let lazy_1 = _$_.track(props.initial, __block, '03ea4348');
 	var div_2 = root_1();
 
 	{
@@ -62,8 +62,8 @@ export function CounterWrapper(__anchor, _, __block) {
 export function ComputedValues(__anchor, _, __block) {
 	_$_.push_component();
 
-	let lazy_2 = _$_.track(2, void 0, void 0, __block);
-	let lazy_3 = _$_.track(3, void 0, void 0, __block);
+	let lazy_2 = _$_.track(2, __block, 'b78281db');
+	let lazy_3 = _$_.track(3, __block, 'a0cf6c6d');
 	const sum = () => _$_.get(lazy_2) + _$_.get(lazy_3);
 	var div_3 = root_3();
 
@@ -81,9 +81,9 @@ export function ComputedValues(__anchor, _, __block) {
 export function MultipleTracked(__anchor, _, __block) {
 	_$_.push_component();
 
-	let lazy_4 = _$_.track(10, void 0, void 0, __block);
-	let lazy_5 = _$_.track(20, void 0, void 0, __block);
-	let lazy_6 = _$_.track(30, void 0, void 0, __block);
+	let lazy_4 = _$_.track(10, __block, '843522de');
+	let lazy_5 = _$_.track(20, __block, '1308996d');
+	let lazy_6 = _$_.track(30, __block, '048c3fd0');
 	var fragment_1 = root_4();
 	var div_4 = _$_.first_child_frag(fragment_1);
 
@@ -120,8 +120,8 @@ export function MultipleTracked(__anchor, _, __block) {
 export function DerivedState(__anchor, _, __block) {
 	_$_.push_component();
 
-	let lazy_7 = _$_.track('John', void 0, void 0, __block);
-	let lazy_8 = _$_.track('Doe', void 0, void 0, __block);
+	let lazy_7 = _$_.track('John', __block, '6015eeca');
+	let lazy_8 = _$_.track('Doe', __block, '4fa9a20e');
 	const fullName = () => `${_$_.get(lazy_7)} ${_$_.get(lazy_8)}`;
 	var div_7 = root_5();