ripple 0.3.128 → 0.4.0

package/src/runtime/internal/server/rpc.js

@@ -1,4 +1,5 @@
 import * as devalue from 'devalue';
+import { transport } from './transport.js';
 
 /**
  * @template {any[]} T
@@ -7,7 +8,7 @@ import * as devalue from 'devalue';
  * @param {string} rpc_arguments_string
  */
 export async function executeServerFunction(fn, rpc_arguments_string) {
-	const rpc_arguments = devalue.parse(rpc_arguments_string);
+	const rpc_arguments = devalue.parse(rpc_arguments_string, transport?.revivers);
 	const result = await fn.apply(null, rpc_arguments);
-	return devalue.stringify({ value: result });
+	return devalue.stringify({ value: result }, transport?.reducers);
 }

package/src/runtime/internal/server/transport.js

@@ -0,0 +1,16 @@
+import { create_transport } from '../../transport.js';
+import { set_track_async_transport } from './index.js';
+
+export { set_transport as setTransport };
+
+/** @type {ReturnType<typeof create_transport>} */
+export let transport;
+
+/**
+ * Register the application's transport before rendering or serving RPC.
+ * @param {import('#public').Transport} [value]
+ */
+export function set_transport(value) {
+	transport = create_transport(value);
+	set_track_async_transport(transport?.reducers);
+}

package/src/runtime/transport.js

@@ -0,0 +1,21 @@
+/** @import { Transport } from '#public' */
+
+/**
+ * Build the devalue tables once at registration. An empty transport retains
+ * the default serialization path, including raw JSON hydration envelopes.
+ * @param {Transport | undefined} transport
+ */
+export function create_transport(transport) {
+	const entries = Object.entries(transport ?? {});
+	if (entries.length === 0) return undefined;
+
+	/** @type {Record<string, (value: any) => any>} */
+	const reducers = Object.create(null);
+	/** @type {Record<string, (value: any) => any>} */
+	const revivers = Object.create(null);
+	for (const [name, { encode, decode }] of entries) {
+		reducers[name] = encode;
+		revivers[name] = decode;
+	}
+	return { reducers, revivers };
+}

package/tests/client/__snapshots__/for.test.tsrx.snap

@@ -28,7 +28,6 @@ exports[`for statements > correctly handles intermediate statements in for block
         3
       </div>
     </div>
-    
   </div>
   <button>
     Add Item
@@ -74,7 +73,6 @@ exports[`for statements > correctly handles intermediate statements in for block
         4
       </div>
     </div>
-    
   </div>
   <button>
     Add Item
@@ -141,7 +139,6 @@ exports[`for statements > correctly handles the index in a for...of loop 1`] = `
     <div>
       2 : c
     </div>
-    
   </div>
   <button>
     Add Item
@@ -170,7 +167,6 @@ exports[`for statements > correctly handles the index in a for...of loop 2`] = `
     <div>
       3 : d
     </div>
-    
   </div>
   <button>
     Add Item
@@ -199,7 +195,6 @@ exports[`for statements > correctly handles the index in a for...of loop 3`] = `
     <div>
       3 : a
     </div>
-    
   </div>
   <button>
     Add Item

package/tests/client/array/array.copy-within.test.tsrx

@@ -4,16 +4,16 @@ describe('RippleArray copyWithin', () => {
 	it('handles copyWithin operation with reactivity', () => {
 		function ArrayTest() @{
 			let items = new RippleArray(1, 2, 3, 4, 5);
-			let &[firstItem] = track(() => items[0]);
-			let &[thirdItem] = track(() => items[2]);
-			let &[fourthItem] = track(() => items[3]);
+			const firstItem = track(() => items[0]);
+			const thirdItem = track(() => items[2]);
+			const fourthItem = track(() => items[3]);
 			<>
 				<button onClick={() => items.copyWithin(0, 3)}>{'copy end to start'}</button>
 				<button onClick={() => items.copyWithin(2, 0, 2)}>{'copy start to middle'}</button>
 				<pre>{JSON.stringify(items)}</pre>
-				<pre>{firstItem}</pre>
-				<pre>{thirdItem}</pre>
-				<pre>{fourthItem}</pre>
+				<pre>{firstItem.value}</pre>
+				<pre>{thirdItem.value}</pre>
+				<pre>{fourthItem.value}</pre>
 			</>
 		}
 
@@ -50,13 +50,13 @@ describe('RippleArray copyWithin', () => {
 	it('handles copyWithin with negative indexes and reactivity', () => {
 		function ArrayTest() @{
 			let items = new RippleArray(1, 2, 3, 4, 5);
-			let &[secondItem] = track(() => items[1]);
-			let &[thirdItem] = track(() => items[2]);
+			const secondItem = track(() => items[1]);
+			const thirdItem = track(() => items[2]);
 			<>
 				<button onClick={() => items.copyWithin(-4, -2)}>{'copy with negative indexes'}</button>
 				<pre>{JSON.stringify(items)}</pre>
-				<pre>{secondItem}</pre>
-				<pre>{thirdItem}</pre>
+				<pre>{secondItem.value}</pre>
+				<pre>{thirdItem.value}</pre>
 			</>
 		}
 
@@ -82,11 +82,11 @@ describe('RippleArray copyWithin', () => {
 	it('handles copyWithin with overlapping ranges', () => {
 		function ArrayTest() @{
 			let items = new RippleArray(1, 2, 3, 4, 5);
-			let &[entries] = track(() => Array.from(items.entries()));
+			const entries = track(() => Array.from(items.entries()));
 			<>
 				<button onClick={() => items.copyWithin(2, 1, 4)}>{'copy with overlap'}</button>
 				<pre>{JSON.stringify(items)}</pre>
-				@for (const [i, value] of entries) {
+				@for (const [i, value] of entries.value) {
 					<pre>{`items[${i}]: ${value}`}</pre>
 				}
 			</>

package/tests/client/array/array.derived.test.tsrx

@@ -4,16 +4,16 @@ describe('RippleArray > derived', () => {
 	it('handles array methods that return values (map, filter, etc.)', () => {
 		function ArrayTest() @{
 			let items = new RippleArray(1, 2, 3, 4, 5);
-			let &[doubled] = track(() => items.map((x) => x * 2));
-			let &[filtered] = track(() => items.filter((x) => x % 2 === 0));
-			let &[reduced] = track(() => items.reduce((acc, val) => acc + val, 0));
-			let &[includes] = track(() => items.includes(3));
+			const doubled = track(() => items.map((x) => x * 2));
+			const filtered = track(() => items.filter((x) => x % 2 === 0));
+			const reduced = track(() => items.reduce((acc, val) => acc + val, 0));
+			const includes = track(() => items.includes(3));
 			<>
 				<button onClick={() => items.push(6)}>{'add item'}</button>
-				<pre>{JSON.stringify(doubled)}</pre>
-				<pre>{JSON.stringify(filtered)}</pre>
-				<pre>{reduced}</pre>
-				<pre>{includes.toString()}</pre>
+				<pre>{JSON.stringify(doubled.value)}</pre>
+				<pre>{JSON.stringify(filtered.value)}</pre>
+				<pre>{reduced.value}</pre>
+				<pre>{includes.value.toString()}</pre>
 			</>
 		}
 
@@ -40,11 +40,11 @@ describe('RippleArray > derived', () => {
 	it('handles concat method with reactivity', () => {
 		function ArrayTest() @{
 			let items = new RippleArray(1, 2, 3);
-			let &[concatenated] = track(() => items.concat([4, 5], 6, [7, 8]));
+			const concatenated = track(() => items.concat([4, 5], 6, [7, 8]));
 			<>
 				<button onClick={() => items.push(3.5)}>{'add to original'}</button>
 				<pre>{JSON.stringify(items)}</pre>
-				<pre>{JSON.stringify(concatenated)}</pre>
+				<pre>{JSON.stringify(concatenated.value)}</pre>
 			</>
 		}
 
@@ -67,11 +67,11 @@ describe('RippleArray > derived', () => {
 	it('handles array slice method with reactivity', () => {
 		function ArrayTest() @{
 			let items = new RippleArray(1, 2, 3, 4, 5);
-			let &[sliced] = track(() => items.slice(1, 4));
+			const sliced = track(() => items.slice(1, 4));
 			<>
 				<button onClick={() => (items[2] = 30)}>{'change middle'}</button>
 				<pre>{JSON.stringify(items)}</pre>
-				<pre>{JSON.stringify(sliced)}</pre>
+				<pre>{JSON.stringify(sliced.value)}</pre>
 			</>
 		}
 
@@ -94,8 +94,8 @@ describe('RippleArray > derived', () => {
 	it('handles find and findIndex methods with reactivity', () => {
 		function ArrayTest() @{
 			let items = new RippleArray(5, 10, 15, 20, 25);
-			let &[found] = track(() => items.find((x) => x > 12));
-			let &[foundIndex] = track(() => items.findIndex((x) => x > 12));
+			const found = track(() => items.find((x) => x > 12));
+			const foundIndex = track(() => items.findIndex((x) => x > 12));
 			<>
 				<button
 					onClick={() => {
@@ -103,8 +103,8 @@ describe('RippleArray > derived', () => {
 						items[0] = 6;
 					}}
 				>{'update values'}</button>
-				<pre>{found}</pre>
-				<pre>{foundIndex}</pre>
+				<pre>{found.value}</pre>
+				<pre>{foundIndex.value}</pre>
 			</>
 		}
 
@@ -127,8 +127,8 @@ describe('RippleArray > derived', () => {
 	it('handles findLast and findLastIndex methods with reactivity', () => {
 		function ArrayTest() @{
 			let items = new RippleArray(5, 15, 10, 20, 15);
-			let &[foundLast] = track(() => items.findLast((x) => x === 15));
-			let &[foundLastIndex] = track(() => items.findLastIndex((x) => x === 15));
+			const foundLast = track(() => items.findLast((x) => x === 15));
+			const foundLastIndex = track(() => items.findLastIndex((x) => x === 15));
 			<>
 				<button
 					onClick={() => {
@@ -136,8 +136,8 @@ describe('RippleArray > derived', () => {
 						items[4] = 15;
 					}}
 				>{'update values'}</button>
-				<pre>{foundLast}</pre>
-				<pre>{foundLastIndex}</pre>
+				<pre>{foundLast.value}</pre>
+				<pre>{foundLastIndex.value}</pre>
 			</>
 		}
 
@@ -160,7 +160,7 @@ describe('RippleArray > derived', () => {
 	it('handles every method with reactivity', () => {
 		function ArrayTest() @{
 			let items = new RippleArray(2, 4, 6, 8);
-			let &[allEven] = track(() => items.every((x) => x % 2 === 0));
+			const allEven = track(() => items.every((x) => x % 2 === 0));
 			<>
 				<button onClick={() => items.push(3)}>{'add odd'}</button>
 				<button
@@ -169,7 +169,7 @@ describe('RippleArray > derived', () => {
 						items.push(10);
 					}}
 				>{'ensure all even'}</button>
-				<pre>{allEven.toString()}</pre>
+				<pre>{allEven.value.toString()}</pre>
 			</>
 		}
 
@@ -195,11 +195,11 @@ describe('RippleArray > derived', () => {
 	it('handles flat method with reactivity', () => {
 		function ArrayTest() @{
 			let items = new RippleArray<number | number[]>([1, 2], [3, 4], 5);
-			let &[flattened] = track(() => items.flat());
+			const flattened = track(() => items.flat());
 			<>
 				<button onClick={() => (items[0] = [6, 7, 8])}>{'change nested'}</button>
 				<pre>{JSON.stringify(items)}</pre>
-				<pre>{JSON.stringify(flattened)}</pre>
+				<pre>{JSON.stringify(flattened.value)}</pre>
 			</>
 		}
 
@@ -222,11 +222,11 @@ describe('RippleArray > derived', () => {
 	it('handles flatMap method with reactivity', () => {
 		function ArrayTest() @{
 			let items = new RippleArray(1, 2, 3);
-			let &[flatMapped] = track(() => items.flatMap((x) => [x, x * 2]));
+			const flatMapped = track(() => items.flatMap((x) => [x, x * 2]));
 			<>
 				<button onClick={() => items.push(4)}>{'add item'}</button>
 				<pre>{JSON.stringify(items)}</pre>
-				<pre>{JSON.stringify(flatMapped)}</pre>
+				<pre>{JSON.stringify(flatMapped.value)}</pre>
 			</>
 		}
 
@@ -249,11 +249,11 @@ describe('RippleArray > derived', () => {
 	it('handles join method with reactivity', () => {
 		function ArrayTest() @{
 			let items = new RippleArray('apple', 'banana', 'cherry');
-			let &[joined] = track(() => items.join(', '));
+			const joined = track(() => items.join(', '));
 			<>
 				<button onClick={() => items.push('date')}>{'add item'}</button>
 				<pre>{JSON.stringify(items)}</pre>
-				<pre>{joined}</pre>
+				<pre>{joined.value}</pre>
 			</>
 		}
 
@@ -278,7 +278,7 @@ describe('RippleArray > derived', () => {
 	it('handles lastIndexOf method with reactivity', () => {
 		function ArrayTest() @{
 			let items = new RippleArray(1, 2, 3, 2, 1);
-			let &[lastIndex] = track(() => items.lastIndexOf(2));
+			const lastIndex = track(() => items.lastIndexOf(2));
 			<>
 				<button
 					onClick={() => {
@@ -286,7 +286,7 @@ describe('RippleArray > derived', () => {
 					}}
 				>{'add duplicate'}</button>
 				<pre>{JSON.stringify(items)}</pre>
-				<pre>{lastIndex}</pre>
+				<pre>{lastIndex.value}</pre>
 			</>
 		}
 
@@ -309,11 +309,11 @@ describe('RippleArray > derived', () => {
 	it('handles reduceRight method with reactivity', () => {
 		function ArrayTest() @{
 			let items = new RippleArray('a', 'b', 'c');
-			let &[reduced] = track(() => items.reduceRight((acc, val) => acc + val, ''));
+			const reduced = track(() => items.reduceRight((acc, val) => acc + val, ''));
 			<>
 				<button onClick={() => items.push('d')}>{'add item'}</button>
 				<pre>{JSON.stringify(items)}</pre>
-				<pre>{reduced}</pre>
+				<pre>{reduced.value}</pre>
 			</>
 		}
 
@@ -336,7 +336,7 @@ describe('RippleArray > derived', () => {
 	it('handles some method with reactivity', () => {
 		function ArrayTest() @{
 			let items = new RippleArray(1, 3, 5, 7);
-			let &[hasEven] = track(() => items.some((x) => x % 2 === 0));
+			const hasEven = track(() => items.some((x) => x % 2 === 0));
 			<>
 				<button onClick={() => items.push(2)}>{'add even'}</button>
 				<button
@@ -345,7 +345,7 @@ describe('RippleArray > derived', () => {
 						items.push(9);
 					}}
 				>{'ensure all odd'}</button>
-				<pre>{hasEven.toString()}</pre>
+				<pre>{hasEven.value.toString()}</pre>
 			</>
 		}
 
@@ -371,7 +371,7 @@ describe('RippleArray > derived', () => {
 	it('handles toLocaleString method with reactivity', () => {
 		function ArrayTest() @{
 			let items = new RippleArray(1000, 2000, 3000);
-			let &[localized] = track(() => items.toLocaleString('en-US'));
+			const localized = track(() => items.toLocaleString('en-US'));
 			<>
 				<button
 					onClick={() => {
@@ -379,7 +379,7 @@ describe('RippleArray > derived', () => {
 					}}
 				>{'add item'}</button>
 				<pre>{JSON.stringify(items)}</pre>
-				<pre>{localized}</pre>
+				<pre>{localized.value}</pre>
 			</>
 		}
 
@@ -402,11 +402,11 @@ describe('RippleArray > derived', () => {
 	it('handles toString method with reactivity', () => {
 		function ArrayTest() @{
 			let items = new RippleArray(1, 2, 3);
-			let &[string] = track(() => items.toString());
+			const string = track(() => items.toString());
 			<>
 				<button onClick={() => items.push(4)}>{'add item'}</button>
 				<pre>{JSON.stringify(items)}</pre>
-				<pre>{string}</pre>
+				<pre>{string.value}</pre>
 			</>
 		}
 
@@ -433,11 +433,11 @@ describe('RippleArray > derived', () => {
 
 		function ArrayTest() @{
 			let items = new RippleArray(1, 2, 3, 4);
-			let &[withReplaced] = track(() => items.with(2, 30));
+			const withReplaced = track(() => items.with(2, 30));
 			<>
 				<button onClick={() => (items[2] = 50)}>{'change original'}</button>
 				<pre>{JSON.stringify(items)}</pre>
-				<pre>{JSON.stringify(withReplaced)}</pre>
+				<pre>{JSON.stringify(withReplaced.value)}</pre>
 			</>
 		}
 
@@ -483,16 +483,16 @@ describe('RippleArray > derived', () => {
 	it('handles at method with reactivity', () => {
 		function ArrayTest() @{
 			let items = new RippleArray(10, 20, 30, 40, 50);
-			let &[atIndex2] = track(() => items.at(2));
-			let &[atNegative1] = track(() => items.at(-1));
-			let &[atNegative2] = track(() => items.at(-2));
+			const atIndex2 = track(() => items.at(2));
+			const atNegative1 = track(() => items.at(-1));
+			const atNegative2 = track(() => items.at(-2));
 			<>
 				<button onClick={() => (items[2] = 300)}>{'change index 2'}</button>
 				<button onClick={() => (items[items.length - 1] = 500)}>{'change last'}</button>
 				<pre>{JSON.stringify(items)}</pre>
-				<pre>{atIndex2}</pre>
-				<pre>{atNegative1}</pre>
-				<pre>{atNegative2}</pre>
+				<pre>{atIndex2.value}</pre>
+				<pre>{atNegative1.value}</pre>
+				<pre>{atNegative2.value}</pre>
 			</>
 		}
 

package/tests/client/array/array.iteration.test.tsrx

@@ -4,11 +4,11 @@ describe('RippleArray > iteration', () => {
 	it('handles entries method with reactivity', () => {
 		function ArrayTest() @{
 			let items = new RippleArray('a', 'b', 'c');
-			let &[entries] = track(() => Array.from(items.entries()));
+			const entries = track(() => Array.from(items.entries()));
 			<>
 				<button onClick={() => items.push('d')}>{'add item'}</button>
 				<pre>{JSON.stringify(items)}</pre>
-				<pre>{JSON.stringify(entries)}</pre>
+				<pre>{JSON.stringify(entries.value)}</pre>
 			</>
 		}
 
@@ -33,11 +33,11 @@ describe('RippleArray > iteration', () => {
 	it('handles keys method with reactivity', () => {
 		function ArrayTest() @{
 			let items = new RippleArray('a', 'b', 'c');
-			let &[keys] = track(() => Array.from(items.keys()));
+			const keys = track(() => Array.from(items.keys()));
 			<>
 				<button onClick={() => items.push('d')}>{'add item'}</button>
 				<pre>{JSON.stringify(items)}</pre>
-				<pre>{JSON.stringify(keys)}</pre>
+				<pre>{JSON.stringify(keys.value)}</pre>
 			</>
 		}
 
@@ -60,11 +60,11 @@ describe('RippleArray > iteration', () => {
 	it('handles values method with reactivity', () => {
 		function ArrayTest() @{
 			let items = new RippleArray('a', 'b', 'c');
-			let &[values] = track(() => Array.from(items.values()));
+			const values = track(() => Array.from(items.values()));
 			<>
 				<button onClick={() => items.push('d')}>{'add item'}</button>
 				<pre>{JSON.stringify(items)}</pre>
-				<pre>{JSON.stringify(values)}</pre>
+				<pre>{JSON.stringify(values.value)}</pre>
 			</>
 		}
 
@@ -87,19 +87,19 @@ describe('RippleArray > iteration', () => {
 	it('handles Symbol.iterator with reactivity', () => {
 		function ArrayTest() @{
 			let items = new RippleArray(1, 2, 3);
-			let &[sum] = track(0);
+			const sum = track(0);
 			effect(() => {
-				sum = 0;
+				sum.value = 0;
 				for (const item of items) {
 					untrack(() => {
-						sum += item;
+						sum.value += item;
 					});
 				}
 			});
 			<>
 				<button onClick={() => items.push(4)}>{'add item'}</button>
 				<pre>{JSON.stringify(items)}</pre>
-				<pre>{sum}</pre>
+				<pre>{sum.value}</pre>
 			</>
 		}
 

package/tests/client/array/array.mutations.test.tsrx

@@ -37,13 +37,13 @@ describe('RippleArray > mutations', () => {
 	it('handles push and pop operations with reactivity', () => {
 		function ArrayTest() @{
 			let items = new RippleArray(1, 2, 3);
-			let &[lastItem] = track(() => items[items.length - 1]);
+			const lastItem = track(() => items[items.length - 1]);
 			<>
 				<button onClick={() => items.push(4)}>{'push'}</button>
 				<button onClick={() => items.pop()}>{'pop'}</button>
 				<pre>{JSON.stringify(items)}</pre>
 				<pre>{items.length}</pre>
-				<pre>{lastItem}</pre>
+				<pre>{lastItem.value}</pre>
 			</>
 		}
 
@@ -77,13 +77,13 @@ describe('RippleArray > mutations', () => {
 	it('handles shift and unshift operations with reactivity', () => {
 		function ArrayTest() @{
 			let items = new RippleArray(2, 3, 4);
-			let &[firstItem] = track(() => items[0]);
+			const firstItem = track(() => items[0]);
 			<>
 				<button onClick={() => items.unshift(1)}>{'unshift'}</button>
 				<button onClick={() => items.shift()}>{'shift'}</button>
 				<pre>{JSON.stringify(items)}</pre>
 				<pre>{items.length}</pre>
-				<pre>{firstItem}</pre>
+				<pre>{firstItem.value}</pre>
 			</>
 		}
 
@@ -117,12 +117,12 @@ describe('RippleArray > mutations', () => {
 	it('handles splice operation with reactivity', () => {
 		function ArrayTest() @{
 			let items: RippleArray<number | string> = new RippleArray(1, 2, 3, 4, 5);
-			let &[middleItem] = track(() => items[2]);
+			const middleItem = track(() => items[2]);
 			<>
 				<button onClick={() => items.splice(1, 2, 'a', 'b')}>{'splice'}</button>
 				<pre>{JSON.stringify(items)}</pre>
 				<pre>{items.length}</pre>
-				<pre>{middleItem}</pre>
+				<pre>{middleItem.value}</pre>
 			</>
 		}
 
@@ -147,11 +147,11 @@ describe('RippleArray > mutations', () => {
 	it('handles fill operation with reactivity', () => {
 		function ArrayTest() @{
 			let items = new RippleArray(1, 2, 3, 4, 5);
-			let &[secondItem] = track(() => items[1]);
+			const secondItem = track(() => items[1]);
 			<>
 				<button onClick={() => items.fill(0, 1, 4)}>{'fill'}</button>
 				<pre>{JSON.stringify(items)}</pre>
-				<pre>{secondItem}</pre>
+				<pre>{secondItem.value}</pre>
 			</>
 		}
 
@@ -174,13 +174,13 @@ describe('RippleArray > mutations', () => {
 	it('handles reverse operation with reactivity', () => {
 		function ArrayTest() @{
 			let items = new RippleArray(1, 2, 3, 4, 5);
-			let &[firstItem] = track(() => items[0]);
-			let &[lastItem] = track(() => items[4]);
+			const firstItem = track(() => items[0]);
+			const lastItem = track(() => items[4]);
 			<>
 				<button onClick={() => items.reverse()}>{'reverse'}</button>
 				<pre>{JSON.stringify(items)}</pre>
-				<pre>{firstItem}</pre>
-				<pre>{lastItem}</pre>
+				<pre>{firstItem.value}</pre>
+				<pre>{lastItem.value}</pre>
 			</>
 		}
 
@@ -205,12 +205,12 @@ describe('RippleArray > mutations', () => {
 	it('handles sort operation with reactivity', () => {
 		function ArrayTest() @{
 			let items = new RippleArray(5, 3, 1, 4, 2);
-			let &[secondItem] = track(() => items[1]);
+			const secondItem = track(() => items[1]);
 			<>
 				<button onClick={() => items.sort()}>{'sort ascending'}</button>
 				<button onClick={() => items.sort((a, b) => b - a)}>{'sort descending'}</button>
 				<pre>{JSON.stringify(items)}</pre>
-				<pre>{secondItem}</pre>
+				<pre>{secondItem.value}</pre>
 			</>
 		}
 
@@ -297,12 +297,12 @@ describe('RippleArray > mutations', () => {
 	it('handles array index access with reactivity', () => {
 		function ArrayTest() @{
 			let items = new RippleArray(10, 20, 30);
-			let &[firstItem] = track(() => items[0]);
-			let &[secondItem] = track(() => items[1]);
+			const firstItem = track(() => items[0]);
+			const secondItem = track(() => items[1]);
 			<>
 				<button onClick={() => (items[0] = 100)}>{'change first'}</button>
-				<pre>{firstItem}</pre>
-				<pre>{secondItem}</pre>
+				<pre>{firstItem.value}</pre>
+				<pre>{secondItem.value}</pre>
 				<pre>{items[0]}</pre>
 				<pre>{items[1]}</pre>
 			</>
@@ -331,12 +331,12 @@ describe('RippleArray > mutations', () => {
 	it('handles length property for reactivity', () => {
 		function ArrayTest() @{
 			let items = new RippleArray(1, 2, 3);
-			let &[length] = track(() => items.length);
+			const length = track(() => items.length);
 			<>
 				<button onClick={() => (items.length = 5)}>{'expand'}</button>
 				<button onClick={() => (items.length = 2)}>{'shrink'}</button>
 				<pre>{JSON.stringify(items)}</pre>
-				<pre>{length}</pre>
+				<pre>{length.value}</pre>
 			</>
 		}