ripple 0.3.2 → 0.3.4

package/tests/client/input-value.test.ripple

@@ -1,24 +1,28 @@
 import type { GetFunction, SetFunction } from 'ripple';
 import {
-	flushSync,
+	RippleArray,
 	RippleObject,
-	bindValue,
+	bindBorderBoxSize,
 	bindChecked,
-	bindIndeterminate,
-	bindGroup,
-	bindClientWidth,
 	bindClientHeight,
-	bindOffsetWidth,
-	bindOffsetHeight,
-	bindContentRect,
+	bindClientWidth,
 	bindContentBoxSize,
-	bindBorderBoxSize,
+	bindContentRect,
 	bindDevicePixelContentBoxSize,
+	bindFiles,
+	bindGroup,
+	bindIndeterminate,
 	bindInnerHTML,
 	bindInnerText,
-	bindTextContent,
 	bindNode,
-	bindFiles,
+	bindOffsetHeight,
+	bindOffsetWidth,
+	bindTextContent,
+	bindValue,
+	effect,
+	flushSync,
+	track,
+	untrack,
 } from 'ripple';
 
 // Mock ResizeObserver for testing
@@ -102,9 +106,9 @@ describe('use value()', () => {
 		const logs: string[] = [];
 
 		component App() {
-			const text = #ripple.track('');
+			const text = track('');
 
-			#ripple.effect(() => {
+			effect(() => {
 				logs.push('text changed', @text);
 			});
 
@@ -125,9 +129,9 @@ describe('use value()', () => {
 		const logs: string[] = [];
 
 		component App() {
-			const text = #ripple{ value: '' };
+			const text = new RippleObject({ value: '' });
 
-			#ripple.effect(() => {
+			effect(() => {
 				logs.push('text changed', text.value);
 			});
 
@@ -148,9 +152,9 @@ describe('use value()', () => {
 		const logs: string[] = [];
 
 		component App() {
-			const text = #ripple.track('foo');
+			const text = track('foo');
 
-			#ripple.effect(() => {
+			effect(() => {
 				logs.push('text changed', @text);
 			});
 
@@ -172,8 +176,8 @@ describe('use value()', () => {
 		const logs: string[] = [];
 
 		component App() {
-			const text = #ripple{ value: 'foo' };
-			#ripple.effect(() => {
+			const text = new RippleObject({ value: 'foo' });
+			effect(() => {
 				logs.push('text changed', text.value);
 			});
 
@@ -193,7 +197,7 @@ describe('use value()', () => {
 
 	it('should update text input element when tracked value changes', () => {
 		component App() {
-			const text = #ripple.track('initial');
+			const text = track('initial');
 
 			<div>
 				<input type="text" {ref bindValue(text)} />
@@ -216,7 +220,7 @@ describe('use value()', () => {
 
 	it('should update text input element when tracked value changes with a getter and setter', () => {
 		component App() {
-			const text = #ripple{ value: 'initial' };
+			const text = new RippleObject({ value: 'initial' });
 
 			<div>
 				<input type="text" {ref bindValue(() => text.value, (v) => (text.value = v))} />
@@ -241,9 +245,9 @@ describe('use value()', () => {
 		const logs: (string | boolean)[] = [];
 
 		component App() {
-			const value = #ripple.track(false);
+			const value = track(false);
 
-			#ripple.effect(() => {
+			effect(() => {
 				logs.push('checked changed', @value);
 			});
 
@@ -265,8 +269,8 @@ describe('use value()', () => {
 		const logs: (string | boolean)[] = [];
 
 		component App() {
-			const obj = #ripple{ value: false };
-			#ripple.effect(() => {
+			const obj = new RippleObject({ value: false });
+			effect(() => {
 				logs.push('checked changed', obj.value);
 			});
 
@@ -286,7 +290,7 @@ describe('use value()', () => {
 
 	it('should update checkbox element when tracked value changes', () => {
 		component App() {
-			const value = #ripple.track(false);
+			const value = track(false);
 
 			<div>
 				<input type="checkbox" {ref bindChecked(value)} />
@@ -309,7 +313,7 @@ describe('use value()', () => {
 
 	it('should update checkbox element when tracked value changes with a getter and setter', () => {
 		component App() {
-			const obj = #ripple{ value: false };
+			const obj = new RippleObject({ value: false });
 
 			<div>
 				<input
@@ -337,9 +341,9 @@ describe('use value()', () => {
 		const logs: (string | boolean)[] = [];
 
 		component App() {
-			const value = #ripple.track(false);
+			const value = track(false);
 
-			#ripple.effect(() => {
+			effect(() => {
 				logs.push('indeterminate changed', @value);
 			});
 
@@ -363,9 +367,9 @@ describe('use value()', () => {
 		const logs: (string | boolean)[] = [];
 
 		component App() {
-			const obj = #ripple{ value: false };
+			const obj = new RippleObject({ value: false });
 
-			#ripple.effect(() => {
+			effect(() => {
 				logs.push('indeterminate changed', obj.value);
 			});
 
@@ -390,7 +394,7 @@ describe('use value()', () => {
 
 	it('should update checkbox indeterminate element when tracked value changes', () => {
 		component App() {
-			const value = #ripple.track(false);
+			const value = track(false);
 
 			<div>
 				<input type="checkbox" {ref bindIndeterminate(value)} />
@@ -415,7 +419,7 @@ describe('use value()', () => {
 		'should update checkbox indeterminate element when tracked value changes with a getter and setter',
 		() => {
 			component App() {
-				const obj = #ripple{ value: false };
+				const obj = new RippleObject({ value: false });
 
 				<div>
 					<input
@@ -444,9 +448,9 @@ describe('use value()', () => {
 		const logs: string[] = [];
 
 		component App() {
-			const select = #ripple.track('2');
+			const select = track('2');
 
-			#ripple.effect(() => {
+			effect(() => {
 				logs.push('select changed', @select);
 			});
 
@@ -473,8 +477,8 @@ describe('use value()', () => {
 		const logs: string[] = [];
 
 		component App() {
-			const select = #ripple{ value: '2' };
-			#ripple.effect(() => {
+			const select = new RippleObject({ value: '2' });
+			effect(() => {
 				logs.push('select changed', select.value);
 			});
 
@@ -499,7 +503,7 @@ describe('use value()', () => {
 
 	it('should update select element when tracked value changes', () => {
 		component App() {
-			const select = #ripple.track('1');
+			const select = track('1');
 
 			<div>
 				<select {ref bindValue(select)}>
@@ -527,7 +531,7 @@ describe('use value()', () => {
 
 	it('should update select element when tracked value changes with a getter and setter', () => {
 		component App() {
-			const select = #ripple{ value: '1' };
+			const select = new RippleObject({ value: '1' });
 
 			<div>
 				<select {ref bindValue(() => select.value, (v) => (select.value = v))}>
@@ -557,9 +561,9 @@ describe('use value()', () => {
 		const logs: string[] = [];
 
 		component App() {
-			const selected = #ripple.track(['b']);
+			const selected = track(['b']);
 
-			#ripple.effect(() => {
+			effect(() => {
 				logs.push('selected changed', JSON.stringify(@selected));
 			});
 
@@ -605,9 +609,9 @@ describe('use value()', () => {
 		const logs: string[] = [];
 
 		component App() {
-			const obj = #ripple{ selected: ['b'] };
+			const obj = new RippleObject({ selected: ['b'] });
 
-			#ripple.effect(() => {
+			effect(() => {
 				logs.push('selected changed', JSON.stringify(obj.selected));
 			});
 
@@ -665,9 +669,9 @@ describe('use value()', () => {
 		const logs: string[] = [];
 
 		component App() {
-			const selected = #ripple.track('b');
+			const selected = track('b');
 
-			#ripple.effect(() => {
+			effect(() => {
 				logs.push('selected changed', @selected);
 			});
 
@@ -712,9 +716,9 @@ describe('use value()', () => {
 		const logs: string[] = [];
 
 		component App() {
-			const selected = #ripple{ value: 'b' };
+			const selected = new RippleObject({ value: 'b' });
 
-			#ripple.effect(() => {
+			effect(() => {
 				logs.push('selected changed', selected.value);
 			});
 
@@ -772,7 +776,7 @@ describe('use value()', () => {
 
 	it('should update checkbox group from tracked value change', () => {
 		component App() {
-			const selected = #ripple.track(['a']);
+			const selected = track(['a']);
 
 			<div>
 				<input type="checkbox" value="a" {ref bindGroup(selected)} />
@@ -802,7 +806,7 @@ describe('use value()', () => {
 
 	it('should update checkbox group from tracked value change with a getter and setter', () => {
 		component App() {
-			const selected = #ripple{ value: ['a'] };
+			const selected = new RippleObject({ value: ['a'] });
 
 			<div>
 				<input
@@ -844,7 +848,7 @@ describe('use value()', () => {
 
 	it('should update radio group from tracked value change', () => {
 		component App() {
-			const selected = #ripple.track('a');
+			const selected = track('a');
 
 			<div>
 				<input type="radio" name="test" value="a" {ref bindGroup(selected)} />
@@ -874,7 +878,7 @@ describe('use value()', () => {
 
 	it('should update radio group from tracked value change with a getter and setter', () => {
 		component App() {
-			const selected = #ripple{ value: 'a' };
+			const selected = new RippleObject({ value: 'a' });
 
 			<div>
 				<input
@@ -919,7 +923,7 @@ describe('use value()', () => {
 
 	it('should handle checkbox group with initial empty array', () => {
 		component App() {
-			const selected = #ripple.track([]);
+			const selected = track([]);
 
 			<div>
 				<input type="checkbox" value="a" {ref bindGroup(selected)} />
@@ -945,7 +949,7 @@ describe('use value()', () => {
 
 	it('should handle checkbox group with initial empty array with a getter and setter', () => {
 		component App() {
-			const selected: RippleObject<{ value: string[] }> = #ripple{ value: [] };
+			const selected: RippleObject<{ value: string[] }> = new RippleObject({ value: [] });
 
 			<div>
 				<input
@@ -979,7 +983,7 @@ describe('use value()', () => {
 
 	it('should handle number input type', () => {
 		component App() {
-			const value = #ripple.track(42);
+			const value = track(42);
 
 			<input type="number" {ref bindValue(value)} />
 		}
@@ -999,7 +1003,7 @@ describe('use value()', () => {
 
 	it('should handle number input type with a getter and setter', () => {
 		component App() {
-			const obj = #ripple{ value: 42 };
+			const obj = new RippleObject({ value: 42 });
 
 			<input type="number" {ref bindValue(() => obj.value, (v) => (obj.value = v))} />
 		}
@@ -1019,7 +1023,7 @@ describe('use value()', () => {
 
 	it('should update number input element when tracked value changes', () => {
 		component App() {
-			const value = #ripple.track(10);
+			const value = track(10);
 
 			<div>
 				<input type="number" {ref bindValue(value)} />
@@ -1045,7 +1049,7 @@ describe('use value()', () => {
 		'should update number input element when tracked value changes with a getter and setter',
 		() => {
 			component App() {
-				const obj = #ripple{ value: 10 };
+				const obj = new RippleObject({ value: 10 });
 
 				<div>
 					<input type="number" {ref bindValue(() => obj.value, (v) => (obj.value = v))} />
@@ -1070,7 +1074,7 @@ describe('use value()', () => {
 
 	it('should handle range input type', () => {
 		component App() {
-			const value = #ripple.track(50);
+			const value = track(50);
 
 			<input type="range" min="0" max="100" {ref bindValue(value)} />
 		}
@@ -1090,7 +1094,7 @@ describe('use value()', () => {
 
 	it('should handle range input type with a getter and setter', () => {
 		component App() {
-			const obj = #ripple{ value: 50 };
+			const obj = new RippleObject({ value: 50 });
 
 			<input
 				type="range"
@@ -1115,7 +1119,7 @@ describe('use value()', () => {
 
 	it('should update range input element when tracked value changes', () => {
 		component App() {
-			const value = #ripple.track(25);
+			const value = track(25);
 
 			<div>
 				<input type="range" min="0" max="100" {ref bindValue(value)} />
@@ -1141,7 +1145,7 @@ describe('use value()', () => {
 		'should update range input element when tracked value changes with a getter and setter',
 		() => {
 			component App() {
-				const obj = #ripple{ value: 25 };
+				const obj = new RippleObject({ value: 25 });
 
 				<div>
 					<input
@@ -1171,7 +1175,7 @@ describe('use value()', () => {
 
 	it('should handle empty number input as null', () => {
 		component App() {
-			const value = #ripple.track(null);
+			const value = track(null);
 
 			<input type="number" {ref bindValue(value)} />
 		}
@@ -1191,7 +1195,7 @@ describe('use value()', () => {
 
 	it('should handle empty number input as null with a getter and setter', () => {
 		component App() {
-			const obj = #ripple{ value: null };
+			const obj = new RippleObject({ value: null });
 
 			<input type="number" {ref bindValue(() => obj.value, (v) => (obj.value = v))} />
 		}
@@ -1211,7 +1215,7 @@ describe('use value()', () => {
 
 	it('should handle date input type', () => {
 		component App() {
-			const value = #ripple.track('2025-11-14');
+			const value = track('2025-11-14');
 
 			<input type="date" {ref bindValue(value)} />
 		}
@@ -1231,7 +1235,7 @@ describe('use value()', () => {
 
 	it('should handle date input type with a getter and setter', () => {
 		component App() {
-			const obj = #ripple{ value: '2025-11-14' };
+			const obj = new RippleObject({ value: '2025-11-14' });
 
 			<input type="date" {ref bindValue(() => obj.value, (v) => (obj.value = v))} />
 		}
@@ -1251,7 +1255,7 @@ describe('use value()', () => {
 
 	it('should update date input element when tracked value changes', () => {
 		component App() {
-			const value = #ripple.track('2025-01-01');
+			const value = track('2025-01-01');
 
 			<div>
 				<input type="date" {ref bindValue(value)} />
@@ -1275,7 +1279,7 @@ describe('use value()', () => {
 
 	it('should update date input element when tracked value changes with a getter and setter', () => {
 		component App() {
-			const obj = #ripple{ value: '2025-01-01' };
+			const obj = new RippleObject({ value: '2025-01-01' });
 
 			<div>
 				<input type="date" {ref bindValue(() => obj.value, (v) => (obj.value = v))} />
@@ -1299,7 +1303,7 @@ describe('use value()', () => {
 
 	it('should handle select with multiple attribute', () => {
 		component App() {
-			const selected = #ripple.track(['2', '3']);
+			const selected = track(['2', '3']);
 
 			<select multiple {ref bindValue(selected)}>
 				<option value="1">{'One'}</option>
@@ -1333,7 +1337,7 @@ describe('use value()', () => {
 
 	it('should handle select with multiple attribute with a getter and setter', () => {
 		component App() {
-			const selected = #ripple.track(['2', '3']);
+			const selected = track(['2', '3']);
 
 			<select multiple {ref bindValue(() => @selected, (v) => (@selected = v))}>
 				<option value="1">{'One'}</option>
@@ -1367,7 +1371,7 @@ describe('use value()', () => {
 
 	it('should update multiple select element when tracked value changes', () => {
 		component App() {
-			const selected = #ripple.track(['1']);
+			const selected = track(['1']);
 
 			<div>
 				<select multiple {ref bindValue(selected)}>
@@ -1405,7 +1409,7 @@ describe('use value()', () => {
 		'should update multiple select element when tracked value changes with a getter and setter',
 		() => {
 			component App() {
-				const selected = #ripple.track(['1']);
+				const selected = track(['1']);
 
 				<div>
 					<select multiple {ref bindValue(() => @selected, (v) => (@selected = v))}>
@@ -1442,7 +1446,7 @@ describe('use value()', () => {
 
 	it('should handle select without initial value and fall back to first option', () => {
 		component App() {
-			const selected = #ripple.track();
+			const selected = track();
 
 			<select {ref bindValue(selected)}>
 				<option value="1">{'One'}</option>
@@ -1462,7 +1466,7 @@ describe('use value()', () => {
 		'should handle select without initial value and fall back to first option with a getter and setter',
 		() => {
 			component App() {
-				const selected = #ripple.track();
+				const selected = track();
 
 				<select {ref bindValue(() => @selected, (v) => (@selected = v))}>
 					<option value="1">{'One'}</option>
@@ -1481,7 +1485,7 @@ describe('use value()', () => {
 
 	it('should handle select with disabled options', () => {
 		component App() {
-			const selected = #ripple.track();
+			const selected = track();
 
 			<select {ref bindValue(selected)}>
 				<option value="1" disabled>{'One'}</option>
@@ -1499,7 +1503,7 @@ describe('use value()', () => {
 
 	it('should handle select with disabled options with a getter and setter', () => {
 		component App() {
-			const selected = #ripple.track();
+			const selected = track();
 
 			<select {ref bindValue(() => @selected, (v) => (@selected = v))}>
 				<option value="1" disabled>{'One'}</option>
@@ -1515,9 +1519,150 @@ describe('use value()', () => {
 		expect(select.options[1].selected).toBe(true);
 	});
 
+	it('should preselect numeric option values in select bindValue', () => {
+		component App() {
+			const selected = track(2);
+
+			<select {ref bindValue(selected)}>
+				<option value={1}>{'One'}</option>
+				<option value={2}>{'Two'}</option>
+				<option value={3}>{'Three'}</option>
+			</select>
+		}
+
+		render(App);
+		flushSync();
+
+		const select = container.querySelector('select') as HTMLSelectElement;
+
+		expect(select.value).toBe('2');
+		expect(select.options[0].selected).toBe(false);
+		expect(select.options[1].selected).toBe(true);
+		expect(select.options[2].selected).toBe(false);
+	});
+
+	it('should preselect numeric option values in select bindValue with a getter and setter', () => {
+		component App() {
+			const selected = track(2);
+
+			<select {ref bindValue(() => @selected, (v) => (@selected = v))}>
+				<option value={1}>{'One'}</option>
+				<option value={2}>{'Two'}</option>
+				<option value={3}>{'Three'}</option>
+			</select>
+		}
+
+		render(App);
+		flushSync();
+
+		const select = container.querySelector('select') as HTMLSelectElement;
+
+		expect(select.value).toBe('2');
+		expect(select.options[0].selected).toBe(false);
+		expect(select.options[1].selected).toBe(true);
+		expect(select.options[2].selected).toBe(false);
+	});
+
+	it('should preserve numeric select values on change', () => {
+		const logs: number[] = [];
+
+		component App() {
+			const selected = track(2);
+
+			effect(() => {
+				logs.push(@selected);
+			});
+
+			<select {ref bindValue(selected)}>
+				<option value={1}>{'One'}</option>
+				<option value={2}>{'Two'}</option>
+				<option value={3}>{'Three'}</option>
+			</select>
+		}
+
+		render(App);
+		flushSync();
+
+		const select = container.querySelector('select') as HTMLSelectElement;
+		select.options[2].selected = true;
+		select.dispatchEvent(new Event('change', { bubbles: true }));
+		flushSync();
+
+		expect(select.value).toBe('3');
+		expect(logs).toEqual([2, 3]);
+	});
+
+	it('should reselect tracked value when matching option is added later', async () => {
+		component App() {
+			const selected = track(5);
+			const options = RippleArray([
+				{ id: 1, text: 'One' },
+				{ id: 2, text: 'Two' },
+			]);
+
+			<div>
+				<select {ref bindValue(selected)}>
+					for (const option of options) {
+						<option value={option.id}>{option.text}</option>
+					}
+				</select>
+				<button onClick={() => options.push({ id: 5, text: 'Five' })}>{'Add'}</button>
+			</div>
+		}
+
+		render(App);
+		flushSync();
+
+		const select = container.querySelector('select') as HTMLSelectElement;
+		const button = container.querySelector('button') as HTMLButtonElement;
+
+		expect(select.value).toBe('');
+
+		button.click();
+		flushSync();
+		await new Promise((resolve) => setTimeout(resolve, 0));
+		flushSync();
+
+		expect(select.value).toBe('5');
+		expect(select.selectedOptions[0].value).toBe('5');
+	});
+
+	it('should reselect tracked value when option lists are replaced later', async () => {
+		component App() {
+			const selected = track(22);
+			const options = RippleArray([
+				{ id: 1, text: 'One' },
+			]);
+
+			effect(() => {
+				const timeout = setTimeout(() => {
+					options.splice(0, options.length, { id: 21, text: 'Tokyo' }, { id: 22, text: 'Osaka' });
+				}, 0);
+
+				return () => clearTimeout(timeout);
+			});
+
+			<select {ref bindValue(selected)}>
+				for (const option of options) {
+					<option value={option.id}>{option.text}</option>
+				}
+			</select>
+		}
+
+		render(App);
+		flushSync();
+		await new Promise((resolve) => setTimeout(resolve, 0));
+		flushSync();
+
+		const select = container.querySelector('select') as HTMLSelectElement;
+
+		expect(select.value).toBe('22');
+		expect(select.options[1].selected).toBe(true);
+	});
+
 	it('should accurately reflect values mutated through a tracked setter', () => {
 		component App() {
-			let value = #ripple.track(
+			let value = track(
 				'',
 				(val) => {
 					return val;
@@ -1553,7 +1698,7 @@ describe('use value()', () => {
 
 	it('should accurately reflect values when a getter modifies value', () => {
 		component App() {
-			let value = #ripple.track(
+			let value = track(
 				'',
 				(val) => {
 					if (val.includes('c')) {
@@ -1589,7 +1734,7 @@ describe('use value()', () => {
 
 	it('should always prefer what getter returns even if setter mutates next', () => {
 		component App() {
-			let value = #ripple.track(
+			let value = track(
 				'',
 				(val) => {
 					return val.replace(/[c,b]+/g, '');
@@ -1627,7 +1772,7 @@ describe('use value()', () => {
 		'should accurately reflect values mutated through an effect even after a setter mutation',
 		() => {
 			component App() {
-				let value = #ripple.track(
+				let value = track(
 					'',
 					(val) => {
 						return val;
@@ -1640,10 +1785,10 @@ describe('use value()', () => {
 					},
 				);
 
-				#ripple.effect(() => {
+				effect(() => {
 					@value;
 
-					#ripple.untrack(() => {
+					untrack(() => {
 						if (@value.includes('a')) {
 							@value = @value.replace(/a/g, '');
 						}
@@ -1673,7 +1818,7 @@ describe('use value()', () => {
 
 	it('should accurately reflect values mutated through a tracked setter via bind accessors', () => {
 		component App() {
-			let value = #ripple.track('');
+			let value = track('');
 			const value_accessors: [GetFunction<string>, SetFunction<string>] = [
 				() => {
 					return @value;
@@ -1705,7 +1850,7 @@ describe('use value()', () => {
 
 	it('should prefer what getter returns via bind accessors', () => {
 		component App() {
-			let value = #ripple.track('');
+			let value = track('');
 			const value_accessors: [GetFunction<string>, SetFunction<string>] = [
 				() => {
 					if (@value.includes('c')) {
@@ -1739,7 +1884,7 @@ describe('use value()', () => {
 		'should always prefer what getter returns even if setter mutates next via bind accessors',
 		() => {
 			component App() {
-				let value = #ripple.track('');
+				let value = track('');
 				const value_accessors: [GetFunction<string>, SetFunction<string>] = [
 					() => {
 						return @value.replace(/[c,b]+/g, '');
@@ -1774,7 +1919,7 @@ describe('use value()', () => {
 		'should accurately reflect values mutated through an effect even after a setter mutation via bind accessors',
 		() => {
 			component App() {
-				let value = #ripple.track('');
+				let value = track('');
 				const value_accessors: [GetFunction<string>, SetFunction<string>] = [
 					() => {
 						return @value;
@@ -1787,10 +1932,10 @@ describe('use value()', () => {
 					},
 				];
 
-				#ripple.effect(() => {
+				effect(() => {
 					@value;
 
-					#ripple.untrack(() => {
+					untrack(() => {
 						if (@value.includes('a')) {
 							@value = @value.replace(/a/g, '');
 						}
@@ -1818,7 +1963,7 @@ describe('use value()', () => {
 		'should keep the input.value unchanged and synced with the tracked when the setter blocks updates to the tracked via bind accessors',
 		() => {
 			component App() {
-				let value = #ripple.track('');
+				let value = track('');
 				const value_accessors: [GetFunction<string>, SetFunction<string>] = [
 					() => {
 						return @value;
@@ -1853,7 +1998,7 @@ describe('use value()', () => {
 		'should keep the input.value unchanged and synced with the tracked when the setter blocks updates to the tracked via track get / set',
 		() => {
 			component App() {
-				let value = #ripple.track(
+				let value = track(
 					'',
 					(v) => {
 						return v;
@@ -1890,9 +2035,9 @@ describe('bindClientWidth and bindClientHeight', () => {
 		const logs: number[] = [];
 
 		component App() {
-			const width = #ripple.track(0);
+			const width = track(0);
 
-			#ripple.effect(() => {
+			effect(() => {
 				logs.push(@width);
 			});
 
@@ -1921,9 +2066,9 @@ describe('bindClientWidth and bindClientHeight', () => {
 		const logs: number[] = [];
 
 		component App() {
-			const width = #ripple{ value: 0 };
+			const width = new RippleObject({ value: 0 });
 
-			#ripple.effect(() => {
+			effect(() => {
 				logs.push(width.value);
 			});
 
@@ -1952,9 +2097,9 @@ describe('bindClientWidth and bindClientHeight', () => {
 		const logs: number[] = [];
 
 		component App() {
-			const height = #ripple.track(0);
+			const height = track(0);
 
-			#ripple.effect(() => {
+			effect(() => {
 				logs.push(@height);
 			});
 
@@ -1983,8 +2128,8 @@ describe('bindClientWidth and bindClientHeight', () => {
 		const logs: number[] = [];
 
 		component App() {
-			const height = #ripple{ value: 0 };
-			#ripple.effect(() => {
+			const height = new RippleObject({ value: 0 });
+			effect(() => {
 				logs.push(height.value);
 			});
 
@@ -2015,9 +2160,9 @@ describe('bindOffsetWidth and bindOffsetHeight', () => {
 		const logs: number[] = [];
 
 		component App() {
-			const width = #ripple.track(0);
+			const width = track(0);
 
-			#ripple.effect(() => {
+			effect(() => {
 				logs.push(@width);
 			});
 
@@ -2046,9 +2191,9 @@ describe('bindOffsetWidth and bindOffsetHeight', () => {
 		const logs: number[] = [];
 
 		component App() {
-			const width = #ripple{ value: 0 };
+			const width = new RippleObject({ value: 0 });
 
-			#ripple.effect(() => {
+			effect(() => {
 				logs.push(width.value);
 			});
 
@@ -2077,9 +2222,9 @@ describe('bindOffsetWidth and bindOffsetHeight', () => {
 		const logs: number[] = [];
 
 		component App() {
-			const height = #ripple.track(0);
+			const height = track(0);
 
-			#ripple.effect(() => {
+			effect(() => {
 				logs.push(@height);
 			});
 
@@ -2108,8 +2253,8 @@ describe('bindOffsetWidth and bindOffsetHeight', () => {
 		const logs: number[] = [];
 
 		component App() {
-			const height = #ripple{ value: 0 };
-			#ripple.effect(() => {
+			const height = new RippleObject({ value: 0 });
+			effect(() => {
 				logs.push(height.value);
 			});
 
@@ -2140,9 +2285,9 @@ describe('bindContentRect', () => {
 		const logs: DOMRectReadOnly[] = [];
 
 		component App() {
-			const rect = #ripple.track(null);
+			const rect = track(null);
 
-			#ripple.effect(() => {
+			effect(() => {
 				if (@rect) logs.push(@rect);
 			});
 
@@ -2170,8 +2315,10 @@ describe('bindContentRect', () => {
 		const logs: DOMRectReadOnly[] = [];
 
 		component App() {
-			const rect: RippleObject<{ value: DOMRectReadOnly | null }> = #ripple{ value: null };
-			#ripple.effect(() => {
+			const rect: RippleObject<{ value: DOMRectReadOnly | null }> = new RippleObject({
+				value: null,
+			});
+			effect(() => {
 				if (rect.value) logs.push(rect.value);
 			});
 
@@ -2206,9 +2353,9 @@ describe('bindContentBoxSize', () => {
 		const logs: any[] = [];
 
 		component App() {
-			const boxSize = #ripple.track(null);
+			const boxSize = track(null);
 
-			#ripple.effect(() => {
+			effect(() => {
 				if (@boxSize) logs.push(@boxSize);
 			});
 
@@ -2239,9 +2386,11 @@ describe('bindContentBoxSize', () => {
 		];
 
 		component App() {
-			const boxSize: RippleObject<{ value: typeof mockBoxSize | null }> = #ripple{ value: null };
+			const boxSize: RippleObject<{ value: typeof mockBoxSize | null }> = new RippleObject({
+				value: null,
+			});
 
-			#ripple.effect(() => {
+			effect(() => {
 				if (boxSize.value) logs.push(boxSize.value);
 			});
 
@@ -2273,9 +2422,9 @@ describe('bindBorderBoxSize', () => {
 		const logs: any[] = [];
 
 		component App() {
-			const boxSize = #ripple.track(null);
+			const boxSize = track(null);
 
-			#ripple.effect(() => {
+			effect(() => {
 				if (@boxSize) logs.push(@boxSize);
 			});
 
@@ -2306,9 +2455,11 @@ describe('bindBorderBoxSize', () => {
 		];
 
 		component App() {
-			const boxSize: RippleObject<{ value: typeof mockBoxSize | null }> = #ripple{ value: null };
+			const boxSize: RippleObject<{ value: typeof mockBoxSize | null }> = new RippleObject({
+				value: null,
+			});
 
-			#ripple.effect(() => {
+			effect(() => {
 				if (boxSize.value) logs.push(boxSize.value);
 			});
 
@@ -2340,9 +2491,9 @@ describe('bindDevicePixelContentBoxSize', () => {
 		const logs: any[] = [];
 
 		component App() {
-			const boxSize = #ripple.track(null);
+			const boxSize = track(null);
 
-			#ripple.effect(() => {
+			effect(() => {
 				if (@boxSize) logs.push(@boxSize);
 			});
 
@@ -2373,9 +2524,11 @@ describe('bindDevicePixelContentBoxSize', () => {
 		];
 
 		component App() {
-			const boxSize: RippleObject<{ value: typeof mockBoxSize | null }> = #ripple{ value: null };
+			const boxSize: RippleObject<{ value: typeof mockBoxSize | null }> = new RippleObject({
+				value: null,
+			});
 
-			#ripple.effect(() => {
+			effect(() => {
 				if (boxSize.value) logs.push(boxSize.value);
 			});
 
@@ -2407,9 +2560,9 @@ describe('bindInnerHTML', () => {
 		const logs: string[] = [];
 
 		component App() {
-			const html = #ripple.track('<strong>Hello</strong>');
+			const html = track('<strong>Hello</strong>');
 
-			#ripple.effect(() => {
+			effect(() => {
 				logs.push(@html);
 			});
 
@@ -2433,9 +2586,9 @@ describe('bindInnerHTML', () => {
 		const logs: string[] = [];
 
 		component App() {
-			const html = #ripple{ value: '<strong>Hello</strong>' };
+			const html = new RippleObject({ value: '<strong>Hello</strong>' });
 
-			#ripple.effect(() => {
+			effect(() => {
 				logs.push(html.value);
 			});
 
@@ -2460,7 +2613,7 @@ describe('bindInnerHTML', () => {
 
 	it('should update innerHTML when tracked value changes', () => {
 		component App() {
-			const html = #ripple.track('<p>Initial</p>');
+			const html = track('<p>Initial</p>');
 
 			<div>
 				<div contenteditable="true" {ref bindInnerHTML(html)} />
@@ -2484,7 +2637,7 @@ describe('bindInnerHTML', () => {
 
 	it('should update innerHTML when tracked value changes with a getter and setter', () => {
 		component App() {
-			const html = #ripple{ value: '<p>Initial</p>' };
+			const html = new RippleObject({ value: '<p>Initial</p>' });
 
 			<div>
 				<div
@@ -2511,7 +2664,7 @@ describe('bindInnerHTML', () => {
 
 	it('should handle null innerHTML value', () => {
 		component App() {
-			const html = #ripple.track(null);
+			const html = track(null);
 
 			<div contenteditable="true" {ref bindInnerHTML(html)} />
 		}
@@ -2526,7 +2679,7 @@ describe('bindInnerHTML', () => {
 
 	it('should handle null innerHTML value with a getter and setter', () => {
 		component App() {
-			const html: RippleObject<{ value: null | string }> = #ripple{ value: null };
+			const html: RippleObject<{ value: null | string }> = new RippleObject({ value: null });
 
 			<div
 				contenteditable="true"
@@ -2548,9 +2701,9 @@ describe('bindInnerText', () => {
 		const logs: string[] = [];
 
 		component App() {
-			const text = #ripple.track('Hello World');
+			const text = track('Hello World');
 
-			#ripple.effect(() => {
+			effect(() => {
 				logs.push(@text);
 			});
 
@@ -2574,8 +2727,8 @@ describe('bindInnerText', () => {
 		const logs: string[] = [];
 
 		component App() {
-			const text = #ripple{ value: 'Hello World' };
-			#ripple.effect(() => {
+			const text = new RippleObject({ value: 'Hello World' });
+			effect(() => {
 				logs.push(text.value);
 			});
 
@@ -2600,7 +2753,7 @@ describe('bindInnerText', () => {
 
 	it('should update innerText when tracked value changes', () => {
 		component App() {
-			const text = #ripple.track('Before');
+			const text = track('Before');
 
 			<div>
 				<div contenteditable="true" {ref bindInnerText(text)} />
@@ -2624,7 +2777,7 @@ describe('bindInnerText', () => {
 
 	it('should update innerText when tracked value changes with a getter and setter', () => {
 		component App() {
-			const text = #ripple{ value: 'Before' };
+			const text = new RippleObject({ value: 'Before' });
 
 			<div>
 				<div
@@ -2655,9 +2808,9 @@ describe('bindTextContent', () => {
 		const logs: string[] = [];
 
 		component App() {
-			const text = #ripple.track('Sample text');
+			const text = track('Sample text');
 
-			#ripple.effect(() => {
+			effect(() => {
 				logs.push(@text);
 			});
 
@@ -2681,9 +2834,9 @@ describe('bindTextContent', () => {
 		const logs: string[] = [];
 
 		component App() {
-			const text = #ripple{ value: 'Sample text' };
+			const text = new RippleObject({ value: 'Sample text' });
 
-			#ripple.effect(() => {
+			effect(() => {
 				logs.push(text.value);
 			});
 
@@ -2708,7 +2861,7 @@ describe('bindTextContent', () => {
 
 	it('should update textContent when tracked value changes', () => {
 		component App() {
-			const text = #ripple.track('Start');
+			const text = track('Start');
 
 			<div>
 				<div contenteditable="true" {ref bindTextContent(text)} />
@@ -2732,7 +2885,7 @@ describe('bindTextContent', () => {
 
 	it('should update textContent when tracked value changes with a getter and setter', () => {
 		component App() {
-			const text = #ripple{ value: 'Start' };
+			const text = new RippleObject({ value: 'Start' });
 
 			<div>
 				<div
@@ -2759,7 +2912,7 @@ describe('bindTextContent', () => {
 
 	it('should handle null textContent value', () => {
 		component App() {
-			const text = #ripple.track(null);
+			const text = track(null);
 
 			<div contenteditable="true" {ref bindTextContent(text)} />
 		}
@@ -2774,7 +2927,7 @@ describe('bindTextContent', () => {
 
 	it('should handle null textContent value with a getter and setter', () => {
 		component App() {
-			const text: RippleObject<{ value: string | null }> = #ripple{ value: null };
+			const text: RippleObject<{ value: string | null }> = new RippleObject({ value: null });
 
 			<div
 				contenteditable="true"
@@ -2799,9 +2952,9 @@ describe('bindNode', () => {
 		let capturedNode: HTMLElement | null = null;
 
 		component App() {
-			const nodeRef = #ripple.track(null);
+			const nodeRef = track(null);
 
-			#ripple.effect(() => {
+			effect(() => {
 				capturedNode = @nodeRef;
 			});
 
@@ -2819,9 +2972,11 @@ describe('bindNode', () => {
 		let capturedNode: HTMLElement | null = null;
 
 		component App() {
-			const nodeRef: RippleObject<{ value: HTMLElement | null }> = #ripple{ value: null };
+			const nodeRef: RippleObject<{ value: HTMLElement | null }> = new RippleObject({
+				value: null,
+			});
 
-			#ripple.effect(() => {
+			effect(() => {
 				capturedNode = nodeRef.value;
 			});
 
@@ -2837,7 +2992,7 @@ describe('bindNode', () => {
 
 	it('should allow access to bound element', () => {
 		component App() {
-			const inputRef = #ripple.track<HTMLInputElement | null>(null);
+			const inputRef = track<HTMLInputElement | null>(null);
 
 			<div>
 				<input type="text" {ref bindNode(inputRef)} />
@@ -2869,7 +3024,9 @@ describe('bindNode', () => {
 
 	it('should allow access to bound element with a getter and setter', () => {
 		component App() {
-			const inputRef: RippleObject<{ node: HTMLInputElement | null }> = #ripple{ node: null };
+			const inputRef: RippleObject<{ node: HTMLInputElement | null }> = new RippleObject({
+				node: null,
+			});
 
 			<div>
 				<input
@@ -2908,9 +3065,9 @@ describe('bindFiles', () => {
 		const logs: FileList[] = [];
 
 		component App() {
-			const files = #ripple.track(null);
+			const files = track(null);
 
-			#ripple.effect(() => {
+			effect(() => {
 				@files;
 				if (@files) logs.push(@files);
 			});
@@ -2949,9 +3106,9 @@ describe('bindFiles', () => {
 		const logs: FileList[] = [];
 
 		component App() {
-			const files: RippleObject<{ items: FileList | null }> = #ripple{ items: null };
+			const files: RippleObject<{ items: FileList | null }> = new RippleObject({ items: null });
 
-			#ripple.effect(() => {
+			effect(() => {
 				files.items;
 				if (files.items) logs.push(files.items);
 			});
@@ -2994,9 +3151,9 @@ describe('bindFiles', () => {
 		let capturedFiles: FileList | null = null;
 
 		component App() {
-			const files = #ripple.track<FileList | null>(null);
+			const files = track<FileList | null>(null);
 
-			#ripple.effect(() => {
+			effect(() => {
 				capturedFiles = @files;
 			});
 
@@ -3029,9 +3186,9 @@ describe('bindFiles', () => {
 		let capturedFiles: FileList | null = null;
 
 		component App() {
-			const files: RippleObject<{ items: FileList | null }> = #ripple{ items: null };
+			const files: RippleObject<{ items: FileList | null }> = new RippleObject({ items: null });
 
-			#ripple.effect(() => {
+			effect(() => {
 				capturedFiles = files.items;
 			});
 
@@ -3067,10 +3224,10 @@ describe('bindFiles', () => {
 		let capturedFiles: FileList | null = null;
 
 		component App() {
-			const files = #ripple.track<FileList | null>(null);
-			const input = #ripple.track<HTMLInputElement | null>(null);
+			const files = track<FileList | null>(null);
+			const input = track<HTMLInputElement | null>(null);
 
-			#ripple.effect(() => {
+			effect(() => {
 				capturedFiles = @files;
 			});
 
@@ -3120,10 +3277,10 @@ describe('bindFiles', () => {
 		let capturedFiles: FileList | null = null;
 
 		component App() {
-			const files: RippleObject<{ items: FileList | null }> = #ripple{ items: null };
-			const input = #ripple.track<HTMLInputElement | null>(null);
+			const files: RippleObject<{ items: FileList | null }> = new RippleObject({ items: null });
+			const input = track<HTMLInputElement | null>(null);
 
-			#ripple.effect(() => {
+			effect(() => {
 				capturedFiles = files.items;
 			});
 
@@ -3177,9 +3334,9 @@ describe('bindFiles', () => {
 		const fileCounts: number[] = [];
 
 		component App() {
-			const files = #ripple.track<FileList | null>(null);
+			const files = track<FileList | null>(null);
 
-			#ripple.effect(() => {
+			effect(() => {
 				@files;
 				if (@files) {
 					fileCounts.push(@files.length);
@@ -3226,8 +3383,8 @@ describe('bindFiles', () => {
 		const fileCounts: number[] = [];
 
 		component App() {
-			const files: RippleObject<{ items: FileList | null }> = #ripple{ items: null };
-			#ripple.effect(() => {
+			const files: RippleObject<{ items: FileList | null }> = new RippleObject({ items: null });
+			effect(() => {
 				files.items;
 				if (files.items) {
 					fileCounts.push(files.items.length);
@@ -3278,9 +3435,9 @@ describe('bindFiles', () => {
 		let capturedFile: File | null = null;
 
 		component App() {
-			const files = #ripple.track<FileList | null>(null);
+			const files = track<FileList | null>(null);
 
-			#ripple.effect(() => {
+			effect(() => {
 				@files;
 				if (@files && @files.length > 0) {
 					capturedFile = @files[0];
@@ -3315,8 +3472,8 @@ describe('bindFiles', () => {
 		let capturedFile: File | null = null;
 
 		component App() {
-			const files: RippleObject<{ items: FileList | null }> = #ripple{ items: null };
-			#ripple.effect(() => {
+			const files: RippleObject<{ items: FileList | null }> = new RippleObject({ items: null });
+			effect(() => {
 				files.items;
 				if (files.items && files.items.length > 0) {
 					capturedFile = files.items[0];
@@ -3354,9 +3511,9 @@ describe('bindFiles', () => {
 		const logs: (FileList | null)[] = [];
 
 		component App() {
-			const files = #ripple.track(null);
+			const files = track(null);
 
-			#ripple.effect(() => {
+			effect(() => {
 				logs.push(@files);
 			});
 
@@ -3396,8 +3553,8 @@ describe('bindFiles', () => {
 		const logs: (FileList | null)[] = [];
 
 		component App() {
-			const files: RippleObject<{ items: FileList | null }> = #ripple{ items: null };
-			#ripple.effect(() => {
+			const files: RippleObject<{ items: FileList | null }> = new RippleObject({ items: null });
+			effect(() => {
 				logs.push(files.items);
 			});
 
@@ -3611,7 +3768,7 @@ describe('error handling', () => {
 	it('should throw error when bindValue receives a getter but not a setter', () => {
 		expect(() => {
 			component App() {
-				const value = #ripple.track('');
+				const value = track('');
 				<input type="text" {ref bindValue(() => @value)} />
 			}
 			render(App);
@@ -3623,7 +3780,7 @@ describe('error handling', () => {
 	it('should throw error when bindValue receives a getter and setter not a function', () => {
 		expect(() => {
 			component App() {
-				const value = #ripple.track('');
+				const value = track('');
 				// @ts-expect-error invalid argument
 				<input type="text" {ref bindValue(() => @value, 5)} />
 			}
@@ -3633,6 +3790,48 @@ describe('error handling', () => {
 		);
 	});
 
+	it(
+		'should throw error when bindValue on select multiple receives a non-array tracked value',
+		() => {
+			expect(() => {
+				component App() {
+					const value = track('2');
+
+					<select multiple {ref bindValue(value)}>
+						<option value="1">{'One'}</option>
+						<option value="2">{'Two'}</option>
+					</select>
+				}
+
+				render(App);
+				flushSync();
+			}).toThrow(
+				'Reactive bound value of a `<select multiple>` element should be an array, but it received a non-array value.',
+			);
+		},
+	);
+
+	it(
+		'should throw error when bindValue on select multiple receives a non-array getter value',
+		() => {
+			expect(() => {
+				component App() {
+					const value = track('2');
+
+					<select multiple {ref bindValue(() => @value, (v) => (@value = v))}>
+						<option value="1">{'One'}</option>
+						<option value="2">{'Two'}</option>
+					</select>
+				}
+
+				render(App);
+				flushSync();
+			}).toThrow(
+				'Reactive bound value of a `<select multiple>` element should be an array, but it received a non-array value.',
+			);
+		},
+	);
+
 	it(
 		'should throw error when bindChecked receives non-tracked object with a getter but not a setter',
 		() => {