ripple 0.3.2 → 0.3.4

package/src/runtime/internal/client/bindings.js

@@ -30,6 +30,15 @@ function not_set_function_type_error(name) {
 	);
 }
 
+/**
+ * @returns {TypeError}
+ */
+function invalid_select_multiple_value_error() {
+	return new TypeError(
+		'Reactive bound value of a `<select multiple>` element should be an array, but it received a non-array value.',
+	);
+}
+
 /**
  * @param {string} name
  * @param {unknown} maybe_tracked
@@ -149,6 +158,10 @@ function is_numberlike_input(input) {
 
 /** @param {HTMLOptionElement} option */
 function get_option_value(option) {
+	if ('__value' in option) {
+		return option.__value;
+	}
+
 	return option.value;
 }
 
@@ -168,7 +181,7 @@ function select_option(select, value, mounting = false) {
 
 		// If not an array, warn and keep the selection as is
 		if (!is_array(value)) {
-			// TODO
+			throw invalid_select_multiple_value_error();
 		}
 
 		// Otherwise, update the selection
@@ -192,6 +205,88 @@ function select_option(select, value, mounting = false) {
 	}
 }
 
+/** @type {MutationObserver | undefined} */
+var select_mutation_observer;
+/** @type {Set<HTMLSelectElement> | undefined} */
+var observed_selects;
+var select_observer_options = {
+	childList: true,
+	subtree: true,
+	attributes: true,
+	attributeFilter: ['value'],
+};
+
+/**
+ * @param {MutationRecord[]} entries
+ * @returns {void}
+ */
+function process_select_mutation_entries(entries) {
+	var selects = new Set();
+
+	for (const entry of entries) {
+		const target = /** @type {HTMLElement} */ (entry.target);
+		const select = /** @type {HTMLSelectElement | null} */ (
+			target.nodeName === 'SELECT' ? target : target.closest('select')
+		);
+
+		if (!select || selects.has(select)) {
+			continue;
+		}
+
+		if (observed_selects?.has(select)) {
+			selects.add(select);
+			select_option(select, select.__value);
+		}
+	}
+}
+
+/**
+ * @param {HTMLSelectElement} select
+ * @returns {void}
+ */
+function observe_select(select) {
+	select_mutation_observer ??= new MutationObserver((entries) => {
+		process_select_mutation_entries(entries);
+	});
+
+	observed_selects ??= new Set();
+	observed_selects.add(select);
+	select_mutation_observer.observe(select, select_observer_options);
+}
+
+/**
+ * @param {HTMLSelectElement} select
+ * @returns {void}
+ */
+function unobserve_select(select) {
+	if (!observed_selects?.delete(select)) {
+		return;
+	}
+
+	if (select_mutation_observer) {
+		process_select_mutation_entries(select_mutation_observer.takeRecords());
+	}
+
+	select_mutation_observer?.disconnect();
+
+	for (const current_select of observed_selects) {
+		select_mutation_observer?.observe(current_select, select_observer_options);
+	}
+}
+
+/**
+ * Re-applies the current bound selection when option children change after mount.
+ * @param {HTMLSelectElement} select
+ * @returns {() => void}
+ */
+function init_select(select) {
+	observe_select(select);
+
+	return () => {
+		unobserve_select(select);
+	};
+}
+
 /**
  * @param {unknown} maybe_tracked
  * @param {SetFunction | undefined} set_func
@@ -201,11 +296,13 @@ export function bindValue(maybe_tracked, set_func = undefined) {
 	var { getter, setter } = get_bind_get_set('bindValue()', maybe_tracked, set_func);
 
 	return (node) => {
+		/** @type {undefined | (() => void)} */
 		var clear_event;
 
 		if (node.tagName === 'SELECT') {
 			var select = /** @type {HTMLSelectElement} */ (node);
 			var mounting = true;
+			var clear_observer = init_select(select);
 
 			clear_event = on(select, 'change', async () => {
 				var query = ':checked';
@@ -225,27 +322,41 @@ export function bindValue(maybe_tracked, set_func = undefined) {
 					value = selected_option && get_option_value(selected_option);
 				}
 
+				select.__value = value;
 				setter(value);
 			});
 
 			effect(() => {
 				var value = getter();
 				select_option(select, value, mounting);
+				select.__value = value;
 
 				// Mounting and value undefined -> take selection from dom
 				if (mounting && value === undefined) {
-					/** @type {HTMLOptionElement | null} */
-					var selected_option = /** @type {HTMLOptionElement | null} */ (
-						select.querySelector(':checked')
-					);
-					if (selected_option !== null) {
-						value = get_option_value(selected_option);
+					if (select.multiple) {
+						value = [].map.call(select.querySelectorAll(':checked'), get_option_value);
+						select.__value = value;
 						setter(value);
+					} else {
+						/** @type {HTMLOptionElement | null} */
+						var selected_option = /** @type {HTMLOptionElement | null} */ (
+							select.querySelector(':checked')
+						);
+						if (selected_option !== null) {
+							value = get_option_value(selected_option);
+							select.__value = value;
+							setter(value);
+						}
 					}
 				}
 
 				mounting = false;
 			});
+
+			return () => {
+				clear_event?.();
+				clear_observer();
+			};
 		} else {
 			var input = /** @type {HTMLInputElement} */ (node);
 

package/src/runtime/internal/client/render.js

@@ -181,13 +181,17 @@ export function set_class(dom, value, hash, is_html = true) {
 }
 
 /**
- * @param {HTMLInputElement | HTMLProgressElement} element
+ * @param {HTMLInputElement | HTMLProgressElement | HTMLOptionElement} element
  * @param {any} value
  * @returns {void}
  */
 export function set_value(element, value) {
 	var attributes = (element.__attributes ??= {});
 
+	if (element.nodeName === 'OPTION') {
+		/** @type {HTMLOptionElement & { __value?: any }} */ (element).__value = value;
+	}
+
 	if (
 		attributes.value ===
 			(attributes.value =

package/src/runtime/internal/client/runtime.js

@@ -846,7 +846,7 @@ export function public_set(tracked, value) {
 export function set(tracked, value) {
 	if (!is_mutating_allowed) {
 		throw new Error(
-			'Assignments or updates to tracked values are not allowed during computed "#ripple.track(() => ...)" evaluation',
+			'Assignments or updates to tracked values are not allowed during computed "track(() => ...)" evaluation',
 		);
 	}
 

package/src/runtime/internal/client/types.d.ts

@@ -77,6 +77,10 @@ declare global {
 		__root?: EventTarget;
 	}
 
+	interface HTMLSelectElement {
+		__value?: unknown;
+	}
+
 	interface Text {
 		__t?: string | null;
 	}

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

@@ -1,12 +1,12 @@
-import { flushSync, RippleArray } from 'ripple';
+import { RippleArray, flushSync, track } from 'ripple';
 
 describe('RippleArray copyWithin', () => {
 	it('handles copyWithin operation with reactivity', () => {
 		component ArrayTest() {
 			let items = new RippleArray(1, 2, 3, 4, 5);
-			let firstItem = #ripple.track(() => items[0]);
-			let thirdItem = #ripple.track(() => items[2]);
-			let fourthItem = #ripple.track(() => items[3]);
+			let firstItem = track(() => items[0]);
+			let thirdItem = track(() => items[2]);
+			let 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>
@@ -49,8 +49,8 @@ describe('RippleArray copyWithin', () => {
 	it('handles copyWithin with negative indexes and reactivity', () => {
 		component ArrayTest() {
 			let items = new RippleArray(1, 2, 3, 4, 5);
-			let secondItem = #ripple.track(() => items[1]);
-			let thirdItem = #ripple.track(() => items[2]);
+			let secondItem = track(() => items[1]);
+			let thirdItem = track(() => items[2]);
 
 			<button onClick={() => items.copyWithin(-4, -2)}>{'copy with negative indexes'}</button>
 			<pre>{JSON.stringify(items)}</pre>
@@ -80,7 +80,7 @@ describe('RippleArray copyWithin', () => {
 	it('handles copyWithin with overlapping ranges', () => {
 		component ArrayTest() {
 			let items = new RippleArray(1, 2, 3, 4, 5);
-			let entries = #ripple.track(() => Array.from(items.entries()));
+			let entries = track(() => Array.from(items.entries()));
 
 			<button onClick={() => items.copyWithin(2, 1, 4)}>{'copy with overlap'}</button>
 			<pre>{JSON.stringify(items)}</pre>

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

@@ -1,13 +1,13 @@
-import { flushSync, RippleArray } from 'ripple';
+import { RippleArray, flushSync, track } from 'ripple';
 
 describe('RippleArray > derived', () => {
 	it('handles array methods that return values (map, filter, etc.)', () => {
 		component ArrayTest() {
 			let items = new RippleArray(1, 2, 3, 4, 5);
-			let doubled = #ripple.track(() => items.map((x) => x * 2));
-			let filtered = #ripple.track(() => items.filter((x) => x % 2 === 0));
-			let reduced = #ripple.track(() => items.reduce((acc, val) => acc + val, 0));
-			let includes = #ripple.track(() => items.includes(3));
+			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));
 
 			<button onClick={() => items.push(6)}>{'add item'}</button>
 			<pre>{JSON.stringify(@doubled)}</pre>
@@ -39,7 +39,7 @@ describe('RippleArray > derived', () => {
 	it('handles concat method with reactivity', () => {
 		component ArrayTest() {
 			let items = new RippleArray(1, 2, 3);
-			let concatenated = #ripple.track(() => items.concat([4, 5], 6, [7, 8]));
+			let concatenated = track(() => items.concat([4, 5], 6, [7, 8]));
 
 			<button onClick={() => items.push(3.5)}>{'add to original'}</button>
 			<pre>{JSON.stringify(items)}</pre>
@@ -65,7 +65,7 @@ describe('RippleArray > derived', () => {
 	it('handles array slice method with reactivity', () => {
 		component ArrayTest() {
 			let items = new RippleArray(1, 2, 3, 4, 5);
-			let sliced = #ripple.track(() => items.slice(1, 4));
+			let sliced = track(() => items.slice(1, 4));
 
 			<button onClick={() => (items[2] = 30)}>{'change middle'}</button>
 			<pre>{JSON.stringify(items)}</pre>
@@ -91,8 +91,8 @@ describe('RippleArray > derived', () => {
 	it('handles find and findIndex methods with reactivity', () => {
 		component ArrayTest() {
 			let items = new RippleArray(5, 10, 15, 20, 25);
-			let found = #ripple.track(() => items.find((x) => x > 12));
-			let foundIndex = #ripple.track(() => items.findIndex((x) => x > 12));
+			let found = track(() => items.find((x) => x > 12));
+			let foundIndex = track(() => items.findIndex((x) => x > 12));
 
 			<button
 				onClick={() => {
@@ -125,8 +125,8 @@ describe('RippleArray > derived', () => {
 	it('handles findLast and findLastIndex methods with reactivity', () => {
 		component ArrayTest() {
 			let items = new RippleArray(5, 15, 10, 20, 15);
-			let foundLast = #ripple.track(() => items.findLast((x) => x === 15));
-			let foundLastIndex = #ripple.track(() => items.findLastIndex((x) => x === 15));
+			let foundLast = track(() => items.findLast((x) => x === 15));
+			let foundLastIndex = track(() => items.findLastIndex((x) => x === 15));
 
 			<button
 				onClick={() => {
@@ -159,7 +159,7 @@ describe('RippleArray > derived', () => {
 	it('handles every method with reactivity', () => {
 		component ArrayTest() {
 			let items = new RippleArray(2, 4, 6, 8);
-			let allEven = #ripple.track(() => items.every((x) => x % 2 === 0));
+			let allEven = track(() => items.every((x) => x % 2 === 0));
 
 			<button onClick={() => items.push(3)}>{'add odd'}</button>
 			<button
@@ -195,7 +195,7 @@ describe('RippleArray > derived', () => {
 	it('handles flat method with reactivity', () => {
 		component ArrayTest() {
 			let items = new RippleArray<number | number[]>([1, 2], [3, 4], 5);
-			let flattened = #ripple.track(() => items.flat());
+			let flattened = track(() => items.flat());
 
 			<button onClick={() => (items[0] = [6, 7, 8])}>{'change nested'}</button>
 			<pre>{JSON.stringify(items)}</pre>
@@ -221,7 +221,7 @@ describe('RippleArray > derived', () => {
 	it('handles flatMap method with reactivity', () => {
 		component ArrayTest() {
 			let items = new RippleArray(1, 2, 3);
-			let flatMapped = #ripple.track(() => items.flatMap((x) => [x, x * 2]));
+			let flatMapped = track(() => items.flatMap((x) => [x, x * 2]));
 
 			<button onClick={() => items.push(4)}>{'add item'}</button>
 			<pre>{JSON.stringify(items)}</pre>
@@ -247,7 +247,7 @@ describe('RippleArray > derived', () => {
 	it('handles join method with reactivity', () => {
 		component ArrayTest() {
 			let items = new RippleArray('apple', 'banana', 'cherry');
-			let joined = #ripple.track(() => items.join(', '));
+			let joined = track(() => items.join(', '));
 
 			<button onClick={() => items.push('date')}>{'add item'}</button>
 			<pre>{JSON.stringify(items)}</pre>
@@ -275,7 +275,7 @@ describe('RippleArray > derived', () => {
 	it('handles lastIndexOf method with reactivity', () => {
 		component ArrayTest() {
 			let items = new RippleArray(1, 2, 3, 2, 1);
-			let lastIndex = #ripple.track(() => items.lastIndexOf(2));
+			let lastIndex = track(() => items.lastIndexOf(2));
 
 			<button
 				onClick={() => {
@@ -307,7 +307,7 @@ describe('RippleArray > derived', () => {
 	it('handles reduceRight method with reactivity', () => {
 		component ArrayTest() {
 			let items = new RippleArray('a', 'b', 'c');
-			let reduced = #ripple.track(() => items.reduceRight((acc, val) => acc + val, ''));
+			let reduced = track(() => items.reduceRight((acc, val) => acc + val, ''));
 
 			<button onClick={() => items.push('d')}>{'add item'}</button>
 			<pre>{JSON.stringify(items)}</pre>
@@ -333,7 +333,7 @@ describe('RippleArray > derived', () => {
 	it('handles some method with reactivity', () => {
 		component ArrayTest() {
 			let items = new RippleArray(1, 3, 5, 7);
-			let hasEven = #ripple.track(() => items.some((x) => x % 2 === 0));
+			let hasEven = track(() => items.some((x) => x % 2 === 0));
 
 			<button onClick={() => items.push(2)}>{'add even'}</button>
 			<button
@@ -369,7 +369,7 @@ describe('RippleArray > derived', () => {
 	it('handles toLocaleString method with reactivity', () => {
 		component ArrayTest() {
 			let items = new RippleArray(1000, 2000, 3000);
-			let localized = #ripple.track(() => items.toLocaleString('en-US'));
+			let localized = track(() => items.toLocaleString('en-US'));
 
 			<button
 				onClick={() => {
@@ -401,7 +401,7 @@ describe('RippleArray > derived', () => {
 	it('handles toString method with reactivity', () => {
 		component ArrayTest() {
 			let items = new RippleArray(1, 2, 3);
-			let string = #ripple.track(() => items.toString());
+			let string = track(() => items.toString());
 
 			<button onClick={() => items.push(4)}>{'add item'}</button>
 			<pre>{JSON.stringify(items)}</pre>
@@ -431,7 +431,7 @@ describe('RippleArray > derived', () => {
 
 		component ArrayTest() {
 			let items = new RippleArray(1, 2, 3, 4);
-			let withReplaced = #ripple.track(() => items.with(2, 30));
+			let withReplaced = track(() => items.with(2, 30));
 
 			<button onClick={() => (items[2] = 50)}>{'change original'}</button>
 			<pre>{JSON.stringify(items)}</pre>
@@ -479,9 +479,9 @@ describe('RippleArray > derived', () => {
 	it('handles at method with reactivity', () => {
 		component ArrayTest() {
 			let items = new RippleArray(10, 20, 30, 40, 50);
-			let atIndex2 = #ripple.track(() => items.at(2));
-			let atNegative1 = #ripple.track(() => items.at(-1));
-			let atNegative2 = #ripple.track(() => items.at(-2));
+			let atIndex2 = track(() => items.at(2));
+			let atNegative1 = track(() => items.at(-1));
+			let atNegative2 = track(() => items.at(-2));
 
 			<button onClick={() => (items[2] = 300)}>{'change index 2'}</button>
 			<button onClick={() => (items[items.length - 1] = 500)}>{'change last'}</button>

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

@@ -1,10 +1,10 @@
-import { flushSync, RippleArray } from 'ripple';
+import { RippleArray, effect, flushSync, track, untrack } from 'ripple';
 
 describe('RippleArray > iteration', () => {
 	it('handles entries method with reactivity', () => {
 		component ArrayTest() {
 			let items = new RippleArray('a', 'b', 'c');
-			let entries = #ripple.track(() => Array.from(items.entries()));
+			let entries = track(() => Array.from(items.entries()));
 
 			<button onClick={() => items.push('d')}>{'add item'}</button>
 			<pre>{JSON.stringify(items)}</pre>
@@ -32,7 +32,7 @@ describe('RippleArray > iteration', () => {
 	it('handles keys method with reactivity', () => {
 		component ArrayTest() {
 			let items = new RippleArray('a', 'b', 'c');
-			let keys = #ripple.track(() => Array.from(items.keys()));
+			let keys = track(() => Array.from(items.keys()));
 
 			<button onClick={() => items.push('d')}>{'add item'}</button>
 			<pre>{JSON.stringify(items)}</pre>
@@ -58,7 +58,7 @@ describe('RippleArray > iteration', () => {
 	it('handles values method with reactivity', () => {
 		component ArrayTest() {
 			let items = new RippleArray('a', 'b', 'c');
-			let values = #ripple.track(() => Array.from(items.values()));
+			let values = track(() => Array.from(items.values()));
 
 			<button onClick={() => items.push('d')}>{'add item'}</button>
 			<pre>{JSON.stringify(items)}</pre>
@@ -84,12 +84,12 @@ describe('RippleArray > iteration', () => {
 	it('handles Symbol.iterator with reactivity', () => {
 		component ArrayTest() {
 			let items = new RippleArray(1, 2, 3);
-			let sum = #ripple.track(0);
+			let sum = track(0);
 
-			#ripple.effect(() => {
+			effect(() => {
 				@sum = 0;
 				for (const item of items) {
-					#ripple.untrack(() => {
+					untrack(() => {
 						@sum += item;
 					});
 				}

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

@@ -1,9 +1,9 @@
-import { flushSync, RippleArray } from 'ripple';
+import { RippleArray, flushSync, track } from 'ripple';
 
 describe('RippleArray > mutations', () => {
 	it('handles direct assignment and length tracking', () => {
 		component ArrayTest() {
-			let items = #ripple[1, 2, 3];
+			let items = new RippleArray(1, 2, 3);
 
 			<button onClick={() => (items[items.length] = items.length + 1)}>{'increment'}</button>
 
@@ -34,8 +34,8 @@ describe('RippleArray > mutations', () => {
 
 	it('handles push and pop operations with reactivity', () => {
 		component ArrayTest() {
-			let items = #ripple[1, 2, 3];
-			let lastItem = #ripple.track(() => items[items.length - 1]);
+			let items = new RippleArray(1, 2, 3);
+			let lastItem = track(() => items[items.length - 1]);
 
 			<button onClick={() => items.push(4)}>{'push'}</button>
 			<button onClick={() => items.pop()}>{'pop'}</button>
@@ -73,8 +73,8 @@ describe('RippleArray > mutations', () => {
 
 	it('handles shift and unshift operations with reactivity', () => {
 		component ArrayTest() {
-			let items = #ripple[2, 3, 4];
-			let firstItem = #ripple.track(() => items[0]);
+			let items = new RippleArray(2, 3, 4);
+			let firstItem = track(() => items[0]);
 
 			<button onClick={() => items.unshift(1)}>{'unshift'}</button>
 			<button onClick={() => items.shift()}>{'shift'}</button>
@@ -112,8 +112,8 @@ describe('RippleArray > mutations', () => {
 
 	it('handles splice operation with reactivity', () => {
 		component ArrayTest() {
-			let items: RippleArray<number | string> = #ripple[1, 2, 3, 4, 5];
-			let middleItem = #ripple.track(() => items[2]);
+			let items: RippleArray<number | string> = new RippleArray(1, 2, 3, 4, 5);
+			let middleItem = track(() => items[2]);
 
 			<button onClick={() => items.splice(1, 2, 'a', 'b')}>{'splice'}</button>
 			<pre>{JSON.stringify(items)}</pre>
@@ -141,8 +141,8 @@ describe('RippleArray > mutations', () => {
 
 	it('handles fill operation with reactivity', () => {
 		component ArrayTest() {
-			let items = #ripple[1, 2, 3, 4, 5];
-			let secondItem = #ripple.track(() => items[1]);
+			let items = new RippleArray(1, 2, 3, 4, 5);
+			let secondItem = track(() => items[1]);
 
 			<button onClick={() => items.fill(0, 1, 4)}>{'fill'}</button>
 			<pre>{JSON.stringify(items)}</pre>
@@ -167,9 +167,9 @@ describe('RippleArray > mutations', () => {
 
 	it('handles reverse operation with reactivity', () => {
 		component ArrayTest() {
-			let items = #ripple[1, 2, 3, 4, 5];
-			let firstItem = #ripple.track(() => items[0]);
-			let lastItem = #ripple.track(() => items[4]);
+			let items = new RippleArray(1, 2, 3, 4, 5);
+			let firstItem = track(() => items[0]);
+			let lastItem = track(() => items[4]);
 
 			<button onClick={() => items.reverse()}>{'reverse'}</button>
 			<pre>{JSON.stringify(items)}</pre>
@@ -198,7 +198,7 @@ describe('RippleArray > mutations', () => {
 	it('handles sort operation with reactivity', () => {
 		component ArrayTest() {
 			let items = new RippleArray(5, 3, 1, 4, 2);
-			let secondItem = #ripple.track(() => items[1]);
+			let secondItem = track(() => items[1]);
 
 			<button onClick={() => items.sort()}>{'sort ascending'}</button>
 			<button onClick={() => items.sort((a, b) => b - a)}>{'sort descending'}</button>
@@ -288,8 +288,8 @@ describe('RippleArray > mutations', () => {
 	it('handles array index access with reactivity', () => {
 		component ArrayTest() {
 			let items = new RippleArray(10, 20, 30);
-			let firstItem = #ripple.track(() => items[0]);
-			let secondItem = #ripple.track(() => items[1]);
+			let firstItem = track(() => items[0]);
+			let secondItem = track(() => items[1]);
 
 			<button onClick={() => (items[0] = 100)}>{'change first'}</button>
 			<pre>{@firstItem}</pre>
@@ -321,7 +321,7 @@ describe('RippleArray > mutations', () => {
 	it('handles length property for reactivity', () => {
 		component ArrayTest() {
 			let items = new RippleArray(1, 2, 3);
-			let length = #ripple.track(() => items.length);
+			let length = track(() => items.length);
 
 			<button onClick={() => (items.length = 5)}>{'expand'}</button>
 			<button onClick={() => (items.length = 2)}>{'shrink'}</button>

package/tests/client/array/array.to-methods.test.ripple

@@ -1,4 +1,4 @@
-import { flushSync, RippleArray } from 'ripple';
+import { RippleArray, flushSync, track } from 'ripple';
 
 describe('RippleArray > to* methods', () => {
 	it('handles toReversed method with reactivity', (context) => {
@@ -8,7 +8,7 @@ describe('RippleArray > to* methods', () => {
 
 		component ArrayTest() {
 			let items = new RippleArray(1, 2, 3, 4);
-			let reversed = #ripple.track(() => items.toReversed());
+			let reversed = track(() => items.toReversed());
 
 			<button onClick={() => items.push(5)}>{'add item'}</button>
 			<pre>{JSON.stringify(items)}</pre>
@@ -38,7 +38,7 @@ describe('RippleArray > to* methods', () => {
 
 		component ArrayTest() {
 			let items = new RippleArray(3, 1, 4, 2);
-			let sorted = #ripple.track(() => items.toSorted());
+			let sorted = track(() => items.toSorted());
 
 			<button onClick={() => items.push(0)}>{'add item'}</button>
 			<pre>{JSON.stringify(items)}</pre>
@@ -68,7 +68,7 @@ describe('RippleArray > to* methods', () => {
 
 		component ArrayTest() {
 			let items = new RippleArray<string | number>(1, 2, 3, 4, 5);
-			let spliced = #ripple.track(() => items.toSpliced(1, 2, 'a', 'b'));
+			let spliced = track(() => items.toSpliced(1, 2, 'a', 'b'));
 
 			<button onClick={() => (items[2] = 30)}>{'change item'}</button>
 			<pre>{JSON.stringify(items)}</pre>

package/tests/client/async-suspend.test.ripple

@@ -1,11 +1,11 @@
-import { flushSync } from 'ripple';
+import { flushSync, track } from 'ripple';
 
 describe('async suspense', () => {
 	it('hides child content during re-suspension when tracked dependency changes', async () => {
 		let resolve_fn: (() => void) | null = null;
 
 		component Child({ count }: { count: any }) {
-			await #ripple.track(() => {
+			await track(() => {
 				@count;
 				return new Promise<void>((resolve) => {
 					resolve_fn = resolve;
@@ -16,7 +16,7 @@ describe('async suspense', () => {
 		}
 
 		component App() {
-			let count = #ripple.track(0);
+			let count = track(0);
 
 			try {
 				<Child {count} />