ripple 0.3.67 → 0.3.69

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

@@ -105,14 +105,14 @@ describe('use value()', () => {
 	it('should update value on input', () => {
 		const logs: string[] = [];
 
-		component App() {
-			const text = track('');
-
-			effect(() => {
-				logs.push('text changed', text.value);
-			});
-
-			<input type="text" {ref bindValue(text)} />
+		function App() {
+			return <>
+				const text = track('');
+				effect(() => {
+					logs.push('text changed', text.value);
+				});
+				<input type="text" ref={bindValue(text)} />
+			</>;
 		}
 		render(App);
 		flushSync();
@@ -128,14 +128,14 @@ describe('use value()', () => {
 	it('should update value on input with getter and setter', () => {
 		const logs: string[] = [];
 
-		component App() {
-			const text = new RippleObject({ value: '' });
-
-			effect(() => {
-				logs.push('text changed', text.value);
-			});
-
-			<input type="text" {ref bindValue(() => text.value, (v) => (text.value = v))} />
+		function App() {
+			return <>
+				const text = new RippleObject({ value: '' });
+				effect(() => {
+					logs.push('text changed', text.value);
+				});
+				<input type="text" ref={bindValue(() => text.value, (v) => (text.value = v))} />
+			</>;
 		}
 		render(App);
 		flushSync();
@@ -151,14 +151,14 @@ describe('use value()', () => {
 	it('should update value on input with a predefined value', () => {
 		const logs: string[] = [];
 
-		component App() {
-			const text = track('foo');
-
-			effect(() => {
-				logs.push('text changed', text.value);
-			});
-
-			<input type="text" {ref bindValue(text)} />
+		function App() {
+			return <>
+				const text = track('foo');
+				effect(() => {
+					logs.push('text changed', text.value);
+				});
+				<input type="text" ref={bindValue(text)} />
+			</>;
 		}
 		render(App);
 		flushSync();
@@ -175,13 +175,14 @@ describe('use value()', () => {
 	it('should update value on input with a predefined value and with a getter and setter', () => {
 		const logs: string[] = [];
 
-		component App() {
-			const text = new RippleObject({ value: 'foo' });
-			effect(() => {
-				logs.push('text changed', text.value);
-			});
-
-			<input type="text" {ref bindValue(() => text.value, (v) => (text.value = v))} />
+		function App() {
+			return <>
+				const text = new RippleObject({ value: 'foo' });
+				effect(() => {
+					logs.push('text changed', text.value);
+				});
+				<input type="text" ref={bindValue(() => text.value, (v) => (text.value = v))} />
+			</>;
 		}
 		render(App);
 		flushSync();
@@ -196,13 +197,14 @@ describe('use value()', () => {
 	});
 
 	it('should update text input element when tracked value changes', () => {
-		component App() {
-			const text = track('initial');
-
-			<div>
-				<input type="text" {ref bindValue(text)} />
-				<button onClick={() => (text.value = 'updated')}>{'Update'}</button>
-			</div>
+		function App() {
+			return <>
+				const text = track('initial');
+				<div>
+					<input type="text" ref={bindValue(text)} />
+					<button onClick={() => (text.value = 'updated')}>{'Update'}</button>
+				</div>
+			</>;
 		}
 		render(App);
 		flushSync();
@@ -219,13 +221,14 @@ describe('use value()', () => {
 	});
 
 	it('should update text input element when tracked value changes with a getter and setter', () => {
-		component App() {
-			const text = new RippleObject({ value: 'initial' });
-
-			<div>
-				<input type="text" {ref bindValue(() => text.value, (v) => (text.value = v))} />
-				<button onClick={() => (text.value = 'updated')}>{'Update'}</button>
-			</div>
+		function App() {
+			return <>
+				const text = new RippleObject({ value: 'initial' });
+				<div>
+					<input type="text" ref={bindValue(() => text.value, (v) => (text.value = v))} />
+					<button onClick={() => (text.value = 'updated')}>{'Update'}</button>
+				</div>
+			</>;
 		}
 		render(App);
 		flushSync();
@@ -244,14 +247,14 @@ describe('use value()', () => {
 	it('should update checked on input', () => {
 		const logs: (string | boolean)[] = [];
 
-		component App() {
-			const value = track(false);
-
-			effect(() => {
-				logs.push('checked changed', value.value);
-			});
-
-			<input type="checkbox" {ref bindChecked(value)} />
+		function App() {
+			return <>
+				const value = track(false);
+				effect(() => {
+					logs.push('checked changed', value.value);
+				});
+				<input type="checkbox" ref={bindChecked(value)} />
+			</>;
 		}
 		render(App);
 		flushSync();
@@ -268,13 +271,17 @@ describe('use value()', () => {
 	it('should update checked on input with a getter and setter', () => {
 		const logs: (string | boolean)[] = [];
 
-		component App() {
-			const obj = new RippleObject({ value: false });
-			effect(() => {
-				logs.push('checked changed', obj.value);
-			});
-
-			<input type="checkbox" {ref bindChecked(() => obj.value, (v: boolean) => (obj.value = v))} />
+		function App() {
+			return <>
+				const obj = new RippleObject({ value: false });
+				effect(() => {
+					logs.push('checked changed', obj.value);
+				});
+				<input
+					type="checkbox"
+					ref={bindChecked(() => obj.value, (v: boolean) => (obj.value = v))}
+				/>
+			</>;
 		}
 		render(App);
 		flushSync();
@@ -289,13 +296,14 @@ describe('use value()', () => {
 	});
 
 	it('should update checkbox element when tracked value changes', () => {
-		component App() {
-			const value = track(false);
-
-			<div>
-				<input type="checkbox" {ref bindChecked(value)} />
-				<button onClick={() => (value.value = true)}>{'Check'}</button>
-			</div>
+		function App() {
+			return <>
+				const value = track(false);
+				<div>
+					<input type="checkbox" ref={bindChecked(value)} />
+					<button onClick={() => (value.value = true)}>{'Check'}</button>
+				</div>
+			</>;
 		}
 		render(App);
 		flushSync();
@@ -312,16 +320,17 @@ describe('use value()', () => {
 	});
 
 	it('should update checkbox element when tracked value changes with a getter and setter', () => {
-		component App() {
-			const obj = new RippleObject({ value: false });
-
-			<div>
-				<input
-					type="checkbox"
-					{ref bindChecked(() => obj.value, (v: boolean) => (obj.value = v))}
-				/>
-				<button onClick={() => (obj.value = true)}>{'Check'}</button>
-			</div>
+		function App() {
+			return <>
+				const obj = new RippleObject({ value: false });
+				<div>
+					<input
+						type="checkbox"
+						ref={bindChecked(() => obj.value, (v: boolean) => (obj.value = v))}
+					/>
+					<button onClick={() => (obj.value = true)}>{'Check'}</button>
+				</div>
+			</>;
 		}
 		render(App);
 		flushSync();
@@ -340,14 +349,14 @@ describe('use value()', () => {
 	it('should update indeterminate on input', () => {
 		const logs: (string | boolean)[] = [];
 
-		component App() {
-			const value = track(false);
-
-			effect(() => {
-				logs.push('indeterminate changed', value.value);
-			});
-
-			<input type="checkbox" {ref bindIndeterminate(value)} />
+		function App() {
+			return <>
+				const value = track(false);
+				effect(() => {
+					logs.push('indeterminate changed', value.value);
+				});
+				<input type="checkbox" ref={bindIndeterminate(value)} />
+			</>;
 		}
 		render(App);
 		flushSync();
@@ -366,17 +375,17 @@ describe('use value()', () => {
 	it('should update indeterminate on input with a getter and setter', () => {
 		const logs: (string | boolean)[] = [];
 
-		component App() {
-			const obj = new RippleObject({ value: false });
-
-			effect(() => {
-				logs.push('indeterminate changed', obj.value);
-			});
-
-			<input
-				type="checkbox"
-				{ref bindIndeterminate(() => obj.value, (v: boolean) => (obj.value = v))}
-			/>
+		function App() {
+			return <>
+				const obj = new RippleObject({ value: false });
+				effect(() => {
+					logs.push('indeterminate changed', obj.value);
+				});
+				<input
+					type="checkbox"
+					ref={bindIndeterminate(() => obj.value, (v: boolean) => (obj.value = v))}
+				/>
+			</>;
 		}
 		render(App);
 		flushSync();
@@ -393,13 +402,14 @@ describe('use value()', () => {
 	});
 
 	it('should update checkbox indeterminate element when tracked value changes', () => {
-		component App() {
-			const value = track(false);
-
-			<div>
-				<input type="checkbox" {ref bindIndeterminate(value)} />
-				<button onClick={() => (value.value = true)}>{'Set Indeterminate'}</button>
-			</div>
+		function App() {
+			return <>
+				const value = track(false);
+				<div>
+					<input type="checkbox" ref={bindIndeterminate(value)} />
+					<button onClick={() => (value.value = true)}>{'Set Indeterminate'}</button>
+				</div>
+			</>;
 		}
 		render(App);
 		flushSync();
@@ -418,16 +428,17 @@ describe('use value()', () => {
 	it(
 		'should update checkbox indeterminate element when tracked value changes with a getter and setter',
 		() => {
-			component App() {
-				const obj = new RippleObject({ value: false });
-
-				<div>
-					<input
-						type="checkbox"
-						{ref bindIndeterminate(() => obj.value, (v: boolean) => (obj.value = v))}
-					/>
-					<button onClick={() => (obj.value = true)}>{'Set Indeterminate'}</button>
-				</div>
+			function App() {
+				return <>
+					const obj = new RippleObject({ value: false });
+					<div>
+						<input
+							type="checkbox"
+							ref={bindIndeterminate(() => obj.value, (v: boolean) => (obj.value = v))}
+						/>
+						<button onClick={() => (obj.value = true)}>{'Set Indeterminate'}</button>
+					</div>
+				</>;
 			}
 			render(App);
 			flushSync();
@@ -447,18 +458,18 @@ describe('use value()', () => {
 	it('should update select value on change', () => {
 		const logs: string[] = [];
 
-		component App() {
-			const select = track('2');
-
-			effect(() => {
-				logs.push('select changed', select.value);
-			});
-
-			<select {ref bindValue(select)}>
-				<option value="1">{'One'}</option>
-				<option value="2">{'Two'}</option>
-				<option value="3">{'Three'}</option>
-			</select>
+		function App() {
+			return <>
+				const select = track('2');
+				effect(() => {
+					logs.push('select changed', select.value);
+				});
+				<select ref={bindValue(select)}>
+					<option value="1">{'One'}</option>
+					<option value="2">{'Two'}</option>
+					<option value="3">{'Three'}</option>
+				</select>
+			</>;
 		}
 
 		render(App);
@@ -476,17 +487,18 @@ describe('use value()', () => {
 	it('should update select value on change with a getter and setter', () => {
 		const logs: string[] = [];
 
-		component App() {
-			const select = new RippleObject({ value: '2' });
-			effect(() => {
-				logs.push('select changed', select.value);
-			});
-
-			<select {ref bindValue(() => select.value, (v) => (select.value = v))}>
-				<option value="1">{'One'}</option>
-				<option value="2">{'Two'}</option>
-				<option value="3">{'Three'}</option>
-			</select>
+		function App() {
+			return <>
+				const select = new RippleObject({ value: '2' });
+				effect(() => {
+					logs.push('select changed', select.value);
+				});
+				<select ref={bindValue(() => select.value, (v) => (select.value = v))}>
+					<option value="1">{'One'}</option>
+					<option value="2">{'Two'}</option>
+					<option value="3">{'Three'}</option>
+				</select>
+			</>;
 		}
 
 		render(App);
@@ -502,17 +514,18 @@ describe('use value()', () => {
 	});
 
 	it('should update select element when tracked value changes', () => {
-		component App() {
-			const select = track('1');
-
-			<div>
-				<select {ref bindValue(select)}>
-					<option value="1">{'One'}</option>
-					<option value="2">{'Two'}</option>
-					<option value="3">{'Three'}</option>
-				</select>
-				<button onClick={() => (select.value = '3')}>{'Update'}</button>
-			</div>
+		function App() {
+			return <>
+				const select = track('1');
+				<div>
+					<select ref={bindValue(select)}>
+						<option value="1">{'One'}</option>
+						<option value="2">{'Two'}</option>
+						<option value="3">{'Three'}</option>
+					</select>
+					<button onClick={() => (select.value = '3')}>{'Update'}</button>
+				</div>
+			</>;
 		}
 
 		render(App);
@@ -530,17 +543,18 @@ describe('use value()', () => {
 	});
 
 	it('should update select element when tracked value changes with a getter and setter', () => {
-		component App() {
-			const select = new RippleObject({ value: '1' });
-
-			<div>
-				<select {ref bindValue(() => select.value, (v) => (select.value = v))}>
-					<option value="1">{'One'}</option>
-					<option value="2">{'Two'}</option>
-					<option value="3">{'Three'}</option>
-				</select>
-				<button onClick={() => (select.value = '3')}>{'Update'}</button>
-			</div>
+		function App() {
+			return <>
+				const select = new RippleObject({ value: '1' });
+				<div>
+					<select ref={bindValue(() => select.value, (v) => (select.value = v))}>
+						<option value="1">{'One'}</option>
+						<option value="2">{'Two'}</option>
+						<option value="3">{'Three'}</option>
+					</select>
+					<button onClick={() => (select.value = '3')}>{'Update'}</button>
+				</div>
+			</>;
 		}
 
 		render(App);
@@ -560,18 +574,18 @@ describe('use value()', () => {
 	it('should bind checkbox group', () => {
 		const logs: string[] = [];
 
-		component App() {
-			const selected = track(['b']);
-
-			effect(() => {
-				logs.push('selected changed', JSON.stringify(selected.value));
-			});
-
-			<div>
-				<input type="checkbox" value="a" {ref bindGroup(selected)} />
-				<input type="checkbox" value="b" {ref bindGroup(selected)} />
-				<input type="checkbox" value="c" {ref bindGroup(selected)} />
-			</div>
+		function App() {
+			return <>
+				const selected = track(['b']);
+				effect(() => {
+					logs.push('selected changed', JSON.stringify(selected.value));
+				});
+				<div>
+					<input type="checkbox" value="a" ref={bindGroup(selected)} />
+					<input type="checkbox" value="b" ref={bindGroup(selected)} />
+					<input type="checkbox" value="c" ref={bindGroup(selected)} />
+				</div>
+			</>;
 		}
 
 		render(App);
@@ -608,30 +622,30 @@ describe('use value()', () => {
 	it('should bind checkbox group with a getter and setter', () => {
 		const logs: string[] = [];
 
-		component App() {
-			const obj = new RippleObject({ selected: ['b'] });
-
-			effect(() => {
-				logs.push('selected changed', JSON.stringify(obj.selected));
-			});
-
-			<div>
-				<input
-					type="checkbox"
-					value="a"
-					{ref bindGroup(() => obj.selected, (v: string[]) => (obj.selected = v))}
-				/>
-				<input
-					type="checkbox"
-					value="b"
-					{ref bindGroup(() => obj.selected, (v: string[]) => (obj.selected = v))}
-				/>
-				<input
-					type="checkbox"
-					value="c"
-					{ref bindGroup(() => obj.selected, (v: string[]) => (obj.selected = v))}
-				/>
-			</div>
+		function App() {
+			return <>
+				const obj = new RippleObject({ selected: ['b'] });
+				effect(() => {
+					logs.push('selected changed', JSON.stringify(obj.selected));
+				});
+				<div>
+					<input
+						type="checkbox"
+						value="a"
+						ref={bindGroup(() => obj.selected, (v: string[]) => (obj.selected = v))}
+					/>
+					<input
+						type="checkbox"
+						value="b"
+						ref={bindGroup(() => obj.selected, (v: string[]) => (obj.selected = v))}
+					/>
+					<input
+						type="checkbox"
+						value="c"
+						ref={bindGroup(() => obj.selected, (v: string[]) => (obj.selected = v))}
+					/>
+				</div>
+			</>;
 		}
 
 		render(App);
@@ -668,18 +682,18 @@ describe('use value()', () => {
 	it('should bind radio group', () => {
 		const logs: string[] = [];
 
-		component App() {
-			const selected = track('b');
-
-			effect(() => {
-				logs.push('selected changed', selected.value);
-			});
-
-			<div>
-				<input type="radio" name="test" value="a" {ref bindGroup(selected)} />
-				<input type="radio" name="test" value="b" {ref bindGroup(selected)} />
-				<input type="radio" name="test" value="c" {ref bindGroup(selected)} />
-			</div>
+		function App() {
+			return <>
+				const selected = track('b');
+				effect(() => {
+					logs.push('selected changed', selected.value);
+				});
+				<div>
+					<input type="radio" name="test" value="a" ref={bindGroup(selected)} />
+					<input type="radio" name="test" value="b" ref={bindGroup(selected)} />
+					<input type="radio" name="test" value="c" ref={bindGroup(selected)} />
+				</div>
+			</>;
 		}
 
 		render(App);
@@ -715,33 +729,33 @@ describe('use value()', () => {
 	it('should bind radio group with a getter and setter', () => {
 		const logs: string[] = [];
 
-		component App() {
-			const selected = new RippleObject({ value: 'b' });
-
-			effect(() => {
-				logs.push('selected changed', selected.value);
-			});
-
-			<div>
-				<input
-					type="radio"
-					name="test"
-					value="a"
-					{ref bindGroup(() => selected.value, (v: string) => (selected.value = v))}
-				/>
-				<input
-					type="radio"
-					name="test"
-					value="b"
-					{ref bindGroup(() => selected.value, (v: string) => (selected.value = v))}
-				/>
-				<input
-					type="radio"
-					name="test"
-					value="c"
-					{ref bindGroup(() => selected.value, (v: string) => (selected.value = v))}
-				/>
-			</div>
+		function App() {
+			return <>
+				const selected = new RippleObject({ value: 'b' });
+				effect(() => {
+					logs.push('selected changed', selected.value);
+				});
+				<div>
+					<input
+						type="radio"
+						name="test"
+						value="a"
+						ref={bindGroup(() => selected.value, (v: string) => (selected.value = v))}
+					/>
+					<input
+						type="radio"
+						name="test"
+						value="b"
+						ref={bindGroup(() => selected.value, (v: string) => (selected.value = v))}
+					/>
+					<input
+						type="radio"
+						name="test"
+						value="c"
+						ref={bindGroup(() => selected.value, (v: string) => (selected.value = v))}
+					/>
+				</div>
+			</>;
 		}
 
 		render(App);
@@ -775,15 +789,16 @@ describe('use value()', () => {
 	});
 
 	it('should update checkbox group from tracked value change', () => {
-		component App() {
-			const selected = track(['a']);
-
-			<div>
-				<input type="checkbox" value="a" {ref bindGroup(selected)} />
-				<input type="checkbox" value="b" {ref bindGroup(selected)} />
-				<input type="checkbox" value="c" {ref bindGroup(selected)} />
-				<button onClick={() => (selected.value = ['b', 'c'])}>{'Update'}</button>
-			</div>
+		function App() {
+			return <>
+				const selected = track(['a']);
+				<div>
+					<input type="checkbox" value="a" ref={bindGroup(selected)} />
+					<input type="checkbox" value="b" ref={bindGroup(selected)} />
+					<input type="checkbox" value="c" ref={bindGroup(selected)} />
+					<button onClick={() => (selected.value = ['b', 'c'])}>{'Update'}</button>
+				</div>
+			</>;
 		}
 
 		render(App);
@@ -805,27 +820,28 @@ describe('use value()', () => {
 	});
 
 	it('should update checkbox group from tracked value change with a getter and setter', () => {
-		component App() {
-			const selected = new RippleObject({ value: ['a'] });
-
-			<div>
-				<input
-					type="checkbox"
-					value="a"
-					{ref bindGroup(() => selected.value, (v: string[]) => (selected.value = v))}
-				/>
-				<input
-					type="checkbox"
-					value="b"
-					{ref bindGroup(() => selected.value, (v: string[]) => (selected.value = v))}
-				/>
-				<input
-					type="checkbox"
-					value="c"
-					{ref bindGroup(() => selected.value, (v: string[]) => (selected.value = v))}
-				/>
-				<button onClick={() => (selected.value = ['b', 'c'])}>{'Update'}</button>
-			</div>
+		function App() {
+			return <>
+				const selected = new RippleObject({ value: ['a'] });
+				<div>
+					<input
+						type="checkbox"
+						value="a"
+						ref={bindGroup(() => selected.value, (v: string[]) => (selected.value = v))}
+					/>
+					<input
+						type="checkbox"
+						value="b"
+						ref={bindGroup(() => selected.value, (v: string[]) => (selected.value = v))}
+					/>
+					<input
+						type="checkbox"
+						value="c"
+						ref={bindGroup(() => selected.value, (v: string[]) => (selected.value = v))}
+					/>
+					<button onClick={() => (selected.value = ['b', 'c'])}>{'Update'}</button>
+				</div>
+			</>;
 		}
 
 		render(App);
@@ -847,15 +863,16 @@ describe('use value()', () => {
 	});
 
 	it('should update radio group from tracked value change', () => {
-		component App() {
-			const selected = track('a');
-
-			<div>
-				<input type="radio" name="test" value="a" {ref bindGroup(selected)} />
-				<input type="radio" name="test" value="b" {ref bindGroup(selected)} />
-				<input type="radio" name="test" value="c" {ref bindGroup(selected)} />
-				<button onClick={() => (selected.value = 'c')}>{'Update'}</button>
-			</div>
+		function App() {
+			return <>
+				const selected = track('a');
+				<div>
+					<input type="radio" name="test" value="a" ref={bindGroup(selected)} />
+					<input type="radio" name="test" value="b" ref={bindGroup(selected)} />
+					<input type="radio" name="test" value="c" ref={bindGroup(selected)} />
+					<button onClick={() => (selected.value = 'c')}>{'Update'}</button>
+				</div>
+			</>;
 		}
 
 		render(App);
@@ -877,30 +894,31 @@ describe('use value()', () => {
 	});
 
 	it('should update radio group from tracked value change with a getter and setter', () => {
-		component App() {
-			const selected = new RippleObject({ value: 'a' });
-
-			<div>
-				<input
-					type="radio"
-					name="test"
-					value="a"
-					{ref bindGroup(() => selected.value, (v: string) => (selected.value = v))}
-				/>
-				<input
-					type="radio"
-					name="test"
-					value="b"
-					{ref bindGroup(() => selected.value, (v: string) => (selected.value = v))}
-				/>
-				<input
-					type="radio"
-					name="test"
-					value="c"
-					{ref bindGroup(() => selected.value, (v: string) => (selected.value = v))}
-				/>
-				<button onClick={() => (selected.value = 'c')}>{'Update'}</button>
-			</div>
+		function App() {
+			return <>
+				const selected = new RippleObject({ value: 'a' });
+				<div>
+					<input
+						type="radio"
+						name="test"
+						value="a"
+						ref={bindGroup(() => selected.value, (v: string) => (selected.value = v))}
+					/>
+					<input
+						type="radio"
+						name="test"
+						value="b"
+						ref={bindGroup(() => selected.value, (v: string) => (selected.value = v))}
+					/>
+					<input
+						type="radio"
+						name="test"
+						value="c"
+						ref={bindGroup(() => selected.value, (v: string) => (selected.value = v))}
+					/>
+					<button onClick={() => (selected.value = 'c')}>{'Update'}</button>
+				</div>
+			</>;
 		}
 
 		render(App);
@@ -922,13 +940,14 @@ describe('use value()', () => {
 	});
 
 	it('should handle checkbox group with initial empty array', () => {
-		component App() {
-			const selected = track([]);
-
-			<div>
-				<input type="checkbox" value="a" {ref bindGroup(selected)} />
-				<input type="checkbox" value="b" {ref bindGroup(selected)} />
-			</div>
+		function App() {
+			return <>
+				const selected = track([]);
+				<div>
+					<input type="checkbox" value="a" ref={bindGroup(selected)} />
+					<input type="checkbox" value="b" ref={bindGroup(selected)} />
+				</div>
+			</>;
 		}
 
 		render(App);
@@ -948,21 +967,22 @@ describe('use value()', () => {
 	});
 
 	it('should handle checkbox group with initial empty array with a getter and setter', () => {
-		component App() {
-			const selected: RippleObject<{ value: string[] }> = new RippleObject({ value: [] });
-
-			<div>
-				<input
-					type="checkbox"
-					value="a"
-					{ref bindGroup(() => selected.value, (v: string[]) => (selected.value = v))}
-				/>
-				<input
-					type="checkbox"
-					value="b"
-					{ref bindGroup(() => selected.value, (v: string[]) => (selected.value = v))}
-				/>
-			</div>
+		function App() {
+			return <>
+				const selected: RippleObject<{ value: string[] }> = new RippleObject({ value: [] });
+				<div>
+					<input
+						type="checkbox"
+						value="a"
+						ref={bindGroup(() => selected.value, (v: string[]) => (selected.value = v))}
+					/>
+					<input
+						type="checkbox"
+						value="b"
+						ref={bindGroup(() => selected.value, (v: string[]) => (selected.value = v))}
+					/>
+				</div>
+			</>;
 		}
 
 		render(App);
@@ -982,10 +1002,11 @@ describe('use value()', () => {
 	});
 
 	it('should handle number input type', () => {
-		component App() {
-			const value = track(42);
-
-			<input type="number" {ref bindValue(value)} />
+		function App() {
+			return <>
+				const value = track(42);
+				<input type="number" ref={bindValue(value)} />
+			</>;
 		}
 
 		render(App);
@@ -1002,10 +1023,11 @@ describe('use value()', () => {
 	});
 
 	it('should handle number input type with a getter and setter', () => {
-		component App() {
-			const obj = new RippleObject({ value: 42 });
-
-			<input type="number" {ref bindValue(() => obj.value, (v) => (obj.value = v))} />
+		function App() {
+			return <>
+				const obj = new RippleObject({ value: 42 });
+				<input type="number" ref={bindValue(() => obj.value, (v) => (obj.value = v))} />
+			</>;
 		}
 
 		render(App);
@@ -1022,13 +1044,14 @@ describe('use value()', () => {
 	});
 
 	it('should update number input element when tracked value changes', () => {
-		component App() {
-			const value = track(10);
-
-			<div>
-				<input type="number" {ref bindValue(value)} />
-				<button onClick={() => (value.value = 99)}>{'Update'}</button>
-			</div>
+		function App() {
+			return <>
+				const value = track(10);
+				<div>
+					<input type="number" ref={bindValue(value)} />
+					<button onClick={() => (value.value = 99)}>{'Update'}</button>
+				</div>
+			</>;
 		}
 
 		render(App);
@@ -1048,13 +1071,14 @@ describe('use value()', () => {
 	it(
 		'should update number input element when tracked value changes with a getter and setter',
 		() => {
-			component App() {
-				const obj = new RippleObject({ value: 10 });
-
-				<div>
-					<input type="number" {ref bindValue(() => obj.value, (v) => (obj.value = v))} />
-					<button onClick={() => (obj.value = 99)}>{'Update'}</button>
-				</div>
+			function App() {
+				return <>
+					const obj = new RippleObject({ value: 10 });
+					<div>
+						<input type="number" ref={bindValue(() => obj.value, (v) => (obj.value = v))} />
+						<button onClick={() => (obj.value = 99)}>{'Update'}</button>
+					</div>
+				</>;
 			}
 
 			render(App);
@@ -1073,10 +1097,11 @@ describe('use value()', () => {
 	);
 
 	it('should handle range input type', () => {
-		component App() {
-			const value = track(50);
-
-			<input type="range" min="0" max="100" {ref bindValue(value)} />
+		function App() {
+			return <>
+				const value = track(50);
+				<input type="range" min="0" max="100" ref={bindValue(value)} />
+			</>;
 		}
 
 		render(App);
@@ -1093,15 +1118,16 @@ describe('use value()', () => {
 	});
 
 	it('should handle range input type with a getter and setter', () => {
-		component App() {
-			const obj = new RippleObject({ value: 50 });
-
-			<input
-				type="range"
-				min="0"
-				max="100"
-				{ref bindValue(() => obj.value, (v) => (obj.value = v))}
-			/>
+		function App() {
+			return <>
+				const obj = new RippleObject({ value: 50 });
+				<input
+					type="range"
+					min="0"
+					max="100"
+					ref={bindValue(() => obj.value, (v) => (obj.value = v))}
+				/>
+			</>;
 		}
 
 		render(App);
@@ -1118,13 +1144,14 @@ describe('use value()', () => {
 	});
 
 	it('should update range input element when tracked value changes', () => {
-		component App() {
-			const value = track(25);
-
-			<div>
-				<input type="range" min="0" max="100" {ref bindValue(value)} />
-				<button onClick={() => (value.value = 80)}>{'Update'}</button>
-			</div>
+		function App() {
+			return <>
+				const value = track(25);
+				<div>
+					<input type="range" min="0" max="100" ref={bindValue(value)} />
+					<button onClick={() => (value.value = 80)}>{'Update'}</button>
+				</div>
+			</>;
 		}
 
 		render(App);
@@ -1144,18 +1171,19 @@ describe('use value()', () => {
 	it(
 		'should update range input element when tracked value changes with a getter and setter',
 		() => {
-			component App() {
-				const obj = new RippleObject({ value: 25 });
-
-				<div>
-					<input
-						type="range"
-						min="0"
-						max="100"
-						{ref bindValue(() => obj.value, (v) => (obj.value = v))}
-					/>
-					<button onClick={() => (obj.value = 80)}>{'Update'}</button>
-				</div>
+			function App() {
+				return <>
+					const obj = new RippleObject({ value: 25 });
+					<div>
+						<input
+							type="range"
+							min="0"
+							max="100"
+							ref={bindValue(() => obj.value, (v) => (obj.value = v))}
+						/>
+						<button onClick={() => (obj.value = 80)}>{'Update'}</button>
+					</div>
+				</>;
 			}
 
 			render(App);
@@ -1174,10 +1202,11 @@ describe('use value()', () => {
 	);
 
 	it('should handle empty number input as null', () => {
-		component App() {
-			const value = track(null);
-
-			<input type="number" {ref bindValue(value)} />
+		function App() {
+			return <>
+				const value = track(null);
+				<input type="number" ref={bindValue(value)} />
+			</>;
 		}
 
 		render(App);
@@ -1194,10 +1223,11 @@ describe('use value()', () => {
 	});
 
 	it('should handle empty number input as null with a getter and setter', () => {
-		component App() {
-			const obj = new RippleObject({ value: null });
-
-			<input type="number" {ref bindValue(() => obj.value, (v) => (obj.value = v))} />
+		function App() {
+			return <>
+				const obj = new RippleObject({ value: null });
+				<input type="number" ref={bindValue(() => obj.value, (v) => (obj.value = v))} />
+			</>;
 		}
 
 		render(App);
@@ -1214,10 +1244,11 @@ describe('use value()', () => {
 	});
 
 	it('should handle date input type', () => {
-		component App() {
-			const value = track('2025-11-14');
-
-			<input type="date" {ref bindValue(value)} />
+		function App() {
+			return <>
+				const value = track('2025-11-14');
+				<input type="date" ref={bindValue(value)} />
+			</>;
 		}
 
 		render(App);
@@ -1234,10 +1265,11 @@ describe('use value()', () => {
 	});
 
 	it('should handle date input type with a getter and setter', () => {
-		component App() {
-			const obj = new RippleObject({ value: '2025-11-14' });
-
-			<input type="date" {ref bindValue(() => obj.value, (v) => (obj.value = v))} />
+		function App() {
+			return <>
+				const obj = new RippleObject({ value: '2025-11-14' });
+				<input type="date" ref={bindValue(() => obj.value, (v) => (obj.value = v))} />
+			</>;
 		}
 
 		render(App);
@@ -1254,13 +1286,14 @@ describe('use value()', () => {
 	});
 
 	it('should update date input element when tracked value changes', () => {
-		component App() {
-			const value = track('2025-01-01');
-
-			<div>
-				<input type="date" {ref bindValue(value)} />
-				<button onClick={() => (value.value = '2025-12-31')}>{'Update'}</button>
-			</div>
+		function App() {
+			return <>
+				const value = track('2025-01-01');
+				<div>
+					<input type="date" ref={bindValue(value)} />
+					<button onClick={() => (value.value = '2025-12-31')}>{'Update'}</button>
+				</div>
+			</>;
 		}
 
 		render(App);
@@ -1278,13 +1311,14 @@ describe('use value()', () => {
 	});
 
 	it('should update date input element when tracked value changes with a getter and setter', () => {
-		component App() {
-			const obj = new RippleObject({ value: '2025-01-01' });
-
-			<div>
-				<input type="date" {ref bindValue(() => obj.value, (v) => (obj.value = v))} />
-				<button onClick={() => (obj.value = '2025-12-31')}>{'Update'}</button>
-			</div>
+		function App() {
+			return <>
+				const obj = new RippleObject({ value: '2025-01-01' });
+				<div>
+					<input type="date" ref={bindValue(() => obj.value, (v) => (obj.value = v))} />
+					<button onClick={() => (obj.value = '2025-12-31')}>{'Update'}</button>
+				</div>
+			</>;
 		}
 
 		render(App);
@@ -1302,15 +1336,16 @@ describe('use value()', () => {
 	});
 
 	it('should handle select with multiple attribute', () => {
-		component App() {
-			const selected = track(['2', '3']);
-
-			<select multiple {ref bindValue(selected)}>
-				<option value="1">{'One'}</option>
-				<option value="2">{'Two'}</option>
-				<option value="3">{'Three'}</option>
-				<option value="4">{'Four'}</option>
-			</select>
+		function App() {
+			return <>
+				const selected = track(['2', '3']);
+				<select multiple ref={bindValue(selected)}>
+					<option value="1">{'One'}</option>
+					<option value="2">{'Two'}</option>
+					<option value="3">{'Three'}</option>
+					<option value="4">{'Four'}</option>
+				</select>
+			</>;
 		}
 
 		render(App);
@@ -1336,15 +1371,16 @@ describe('use value()', () => {
 	});
 
 	it('should handle select with multiple attribute with a getter and setter', () => {
-		component App() {
-			const selected = track(['2', '3']);
-
-			<select multiple {ref bindValue(() => selected.value, (v) => (selected.value = v))}>
-				<option value="1">{'One'}</option>
-				<option value="2">{'Two'}</option>
-				<option value="3">{'Three'}</option>
-				<option value="4">{'Four'}</option>
-			</select>
+		function App() {
+			return <>
+				const selected = track(['2', '3']);
+				<select multiple ref={bindValue(() => selected.value, (v) => (selected.value = v))}>
+					<option value="1">{'One'}</option>
+					<option value="2">{'Two'}</option>
+					<option value="3">{'Three'}</option>
+					<option value="4">{'Four'}</option>
+				</select>
+			</>;
 		}
 
 		render(App);
@@ -1370,18 +1406,19 @@ describe('use value()', () => {
 	});
 
 	it('should update multiple select element when tracked value changes', () => {
-		component App() {
-			const selected = track(['1']);
-
-			<div>
-				<select multiple {ref bindValue(selected)}>
-					<option value="1">{'One'}</option>
-					<option value="2">{'Two'}</option>
-					<option value="3">{'Three'}</option>
-					<option value="4">{'Four'}</option>
-				</select>
-				<button onClick={() => (selected.value = ['2', '4'])}>{'Update'}</button>
-			</div>
+		function App() {
+			return <>
+				const selected = track(['1']);
+				<div>
+					<select multiple ref={bindValue(selected)}>
+						<option value="1">{'One'}</option>
+						<option value="2">{'Two'}</option>
+						<option value="3">{'Three'}</option>
+						<option value="4">{'Four'}</option>
+					</select>
+					<button onClick={() => (selected.value = ['2', '4'])}>{'Update'}</button>
+				</div>
+			</>;
 		}
 
 		render(App);
@@ -1408,18 +1445,19 @@ describe('use value()', () => {
 	it(
 		'should update multiple select element when tracked value changes with a getter and setter',
 		() => {
-			component App() {
-				const selected = track(['1']);
-
-				<div>
-					<select multiple {ref bindValue(() => selected.value, (v) => (selected.value = v))}>
-						<option value="1">{'One'}</option>
-						<option value="2">{'Two'}</option>
-						<option value="3">{'Three'}</option>
-						<option value="4">{'Four'}</option>
-					</select>
-					<button onClick={() => (selected.value = ['2', '4'])}>{'Update'}</button>
-				</div>
+			function App() {
+				return <>
+					const selected = track(['1']);
+					<div>
+						<select multiple ref={bindValue(() => selected.value, (v) => (selected.value = v))}>
+							<option value="1">{'One'}</option>
+							<option value="2">{'Two'}</option>
+							<option value="3">{'Three'}</option>
+							<option value="4">{'Four'}</option>
+						</select>
+						<button onClick={() => (selected.value = ['2', '4'])}>{'Update'}</button>
+					</div>
+				</>;
 			}
 
 			render(App);
@@ -1445,13 +1483,14 @@ describe('use value()', () => {
 	);
 
 	it('should handle select without initial value and fall back to first option', () => {
-		component App() {
-			const selected = track();
-
-			<select {ref bindValue(selected)}>
-				<option value="1">{'One'}</option>
-				<option value="2">{'Two'}</option>
-			</select>
+		function App() {
+			return <>
+				const selected = track();
+				<select ref={bindValue(selected)}>
+					<option value="1">{'One'}</option>
+					<option value="2">{'Two'}</option>
+				</select>
+			</>;
 		}
 
 		render(App);
@@ -1465,13 +1504,14 @@ describe('use value()', () => {
 	it(
 		'should handle select without initial value and fall back to first option with a getter and setter',
 		() => {
-			component App() {
-				const selected = track();
-
-				<select {ref bindValue(() => selected.value, (v) => (selected.value = v))}>
-					<option value="1">{'One'}</option>
-					<option value="2">{'Two'}</option>
-				</select>
+			function App() {
+				return <>
+					const selected = track();
+					<select ref={bindValue(() => selected.value, (v) => (selected.value = v))}>
+						<option value="1">{'One'}</option>
+						<option value="2">{'Two'}</option>
+					</select>
+				</>;
 			}
 
 			render(App);
@@ -1484,13 +1524,14 @@ describe('use value()', () => {
 	);
 
 	it('should handle select with disabled options', () => {
-		component App() {
-			const selected = track();
-
-			<select {ref bindValue(selected)}>
-				<option value="1" disabled>{'One'}</option>
-				<option value="2">{'Two'}</option>
-			</select>
+		function App() {
+			return <>
+				const selected = track();
+				<select ref={bindValue(selected)}>
+					<option value="1" disabled>{'One'}</option>
+					<option value="2">{'Two'}</option>
+				</select>
+			</>;
 		}
 
 		render(App);
@@ -1502,13 +1543,14 @@ describe('use value()', () => {
 	});
 
 	it('should handle select with disabled options with a getter and setter', () => {
-		component App() {
-			const selected = track();
-
-			<select {ref bindValue(() => selected.value, (v) => (selected.value = v))}>
-				<option value="1" disabled>{'One'}</option>
-				<option value="2">{'Two'}</option>
-			</select>
+		function App() {
+			return <>
+				const selected = track();
+				<select ref={bindValue(() => selected.value, (v) => (selected.value = v))}>
+					<option value="1" disabled>{'One'}</option>
+					<option value="2">{'Two'}</option>
+				</select>
+			</>;
 		}
 
 		render(App);
@@ -1520,14 +1562,15 @@ describe('use value()', () => {
 	});
 
 	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>
+		function App() {
+			return <>
+				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);
@@ -1542,14 +1585,15 @@ describe('use value()', () => {
 	});
 
 	it('should preselect numeric option values in select bindValue with a getter and setter', () => {
-		component App() {
-			const selected = track(2);
-
-			<select {ref bindValue(() => selected.value, (v) => (selected.value = v))}>
-				<option value={1}>{'One'}</option>
-				<option value={2}>{'Two'}</option>
-				<option value={3}>{'Three'}</option>
-			</select>
+		function App() {
+			return <>
+				const selected = track(2);
+				<select ref={bindValue(() => selected.value, (v) => (selected.value = v))}>
+					<option value={1}>{'One'}</option>
+					<option value={2}>{'Two'}</option>
+					<option value={3}>{'Three'}</option>
+				</select>
+			</>;
 		}
 
 		render(App);
@@ -1566,18 +1610,18 @@ describe('use value()', () => {
 	it('should preserve numeric select values on change', () => {
 		const logs: number[] = [];
 
-		component App() {
-			const selected = track(2);
-
-			effect(() => {
-				logs.push(selected.value);
-			});
-
-			<select {ref bindValue(selected)}>
-				<option value={1}>{'One'}</option>
-				<option value={2}>{'Two'}</option>
-				<option value={3}>{'Three'}</option>
-			</select>
+		function App() {
+			return <>
+				const selected = track(2);
+				effect(() => {
+					logs.push(selected.value);
+				});
+				<select ref={bindValue(selected)}>
+					<option value={1}>{'One'}</option>
+					<option value={2}>{'Two'}</option>
+					<option value={3}>{'Three'}</option>
+				</select>
+			</>;
 		}
 
 		render(App);
@@ -1593,21 +1637,22 @@ describe('use value()', () => {
 	});
 
 	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>
+		function App() {
+			return <>
+				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);
@@ -1628,25 +1673,25 @@ describe('use value()', () => {
 	});
 
 	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>
+		function App() {
+			return <>
+				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);
@@ -1661,22 +1706,23 @@ describe('use value()', () => {
 	});
 
 	it('should accurately reflect values mutated through a tracked setter', () => {
-		component App() {
-			let value = track(
-				'',
-				(val) => {
-					return val;
-				},
-				(next) => {
-					if (next.includes('c')) {
-						next = next.replace(/c/g, '');
-					}
-					return next;
-				},
-			);
-
-			<input type="text" {ref bindValue(value)} />
-			<div>{value.value}</div>
+		function App() {
+			return <>
+				let value = track(
+					'',
+					(val) => {
+						return val;
+					},
+					(next) => {
+						if (next.includes('c')) {
+							next = next.replace(/c/g, '');
+						}
+						return next;
+					},
+				);
+				<input type="text" ref={bindValue(value)} />
+				<div>{value.value}</div>
+			</>;
 		}
 
 		render(App);
@@ -1697,22 +1743,23 @@ describe('use value()', () => {
 	});
 
 	it('should accurately reflect values when a getter modifies value', () => {
-		component App() {
-			let value = track(
-				'',
-				(val) => {
-					if (val.includes('c')) {
-						val = val.replace(/c/g, '');
-					}
-					return val;
-				},
-				(next) => {
-					return next;
-				},
-			);
-
-			<input type="text" {ref bindValue(value)} />
-			<div>{value.value}</div>
+		function App() {
+			return <>
+				let value = track(
+					'',
+					(val) => {
+						if (val.includes('c')) {
+							val = val.replace(/c/g, '');
+						}
+						return val;
+					},
+					(next) => {
+						return next;
+					},
+				);
+				<input type="text" ref={bindValue(value)} />
+				<div>{value.value}</div>
+			</>;
 		}
 
 		render(App);
@@ -1733,22 +1780,23 @@ describe('use value()', () => {
 	});
 
 	it('should always prefer what getter returns even if setter mutates next', () => {
-		component App() {
-			let value = track(
-				'',
-				(val) => {
-					return val.replace(/[c,b]+/g, '');
-				},
-				(next) => {
-					if (next.includes('c')) {
-						next = next.replace(/c/g, '');
-					}
-					return next;
-				},
-			);
-
-			<input type="text" {ref bindValue(value)} />
-			<div>{value.value}</div>
+		function App() {
+			return <>
+				let value = track(
+					'',
+					(val) => {
+						return val.replace(/[c,b]+/g, '');
+					},
+					(next) => {
+						if (next.includes('c')) {
+							next = next.replace(/c/g, '');
+						}
+						return next;
+					},
+				);
+				<input type="text" ref={bindValue(value)} />
+				<div>{value.value}</div>
+			</>;
 		}
 
 		render(App);
@@ -1771,31 +1819,32 @@ describe('use value()', () => {
 	it(
 		'should accurately reflect values mutated through an effect even after a setter mutation',
 		() => {
-			component App() {
-				let value = track(
-					'',
-					(val) => {
-						return val;
-					},
-					(next) => {
-						if (next.includes('c')) {
-							next = next.replace(/c/g, '');
-						}
-						return next;
-					},
-				);
-
-				effect(() => {
-					value.value;
-
-					untrack(() => {
-						if (value.value.includes('a')) {
-							value.value = value.value.replace(/a/g, '');
-						}
+			function App() {
+				return <>
+					let value = track(
+						'',
+						(val) => {
+							return val;
+						},
+						(next) => {
+							if (next.includes('c')) {
+								next = next.replace(/c/g, '');
+							}
+							return next;
+						},
+					);
+					effect(() => {
+						value.value;
+
+						untrack(() => {
+							if (value.value.includes('a')) {
+								value.value = value.value.replace(/a/g, '');
+							}
+						});
 					});
-				});
-				<input type="text" {ref bindValue(value)} />
-				<div>{value.value}</div>
+					<input type="text" ref={bindValue(value)} />
+					<div>{value.value}</div>
+				</>;
 			}
 
 			render(App);
@@ -1817,21 +1866,22 @@ describe('use value()', () => {
 	);
 
 	it('should accurately reflect values mutated through a tracked setter via bind accessors', () => {
-		component App() {
-			let value = track('');
-			const value_accessors: [GetFunction<string>, SetFunction<string>] = [
-				() => {
-					return value.value;
-				},
-				(v: string) => {
-					if (v.includes('c')) {
-						v = v.replace(/c/g, '');
-					}
-					value.value = v;
-				},
-			];
-
-			<input type="text" {ref bindValue(...value_accessors)} />
+		function App() {
+			return <>
+				let value = track('');
+				const value_accessors: [GetFunction<string>, SetFunction<string>] = [
+					() => {
+						return value.value;
+					},
+					(v: string) => {
+						if (v.includes('c')) {
+							v = v.replace(/c/g, '');
+						}
+						value.value = v;
+					},
+				];
+				<input type="text" ref={bindValue(...value_accessors)} />
+			</>;
 		}
 
 		render(App);
@@ -1849,21 +1899,22 @@ describe('use value()', () => {
 	});
 
 	it('should prefer what getter returns via bind accessors', () => {
-		component App() {
-			let value = track('');
-			const value_accessors: [GetFunction<string>, SetFunction<string>] = [
-				() => {
-					if (value.value.includes('c')) {
-						return value.value.replace(/c/g, '');
-					}
-					return value.value;
-				},
-				(v: string) => {
-					value.value = v;
-				},
-			];
-
-			<input type="text" {ref bindValue(...value_accessors)} />
+		function App() {
+			return <>
+				let value = track('');
+				const value_accessors: [GetFunction<string>, SetFunction<string>] = [
+					() => {
+						if (value.value.includes('c')) {
+							return value.value.replace(/c/g, '');
+						}
+						return value.value;
+					},
+					(v: string) => {
+						value.value = v;
+					},
+				];
+				<input type="text" ref={bindValue(...value_accessors)} />
+			</>;
 		}
 
 		render(App);
@@ -1883,21 +1934,22 @@ describe('use value()', () => {
 	it(
 		'should always prefer what getter returns even if setter mutates next via bind accessors',
 		() => {
-			component App() {
-				let value = track('');
-				const value_accessors: [GetFunction<string>, SetFunction<string>] = [
-					() => {
-						return value.value.replace(/[c,b]+/g, '');
-					},
-					(v: string) => {
-						if (v.includes('c')) {
-							v = v.replace(/c/g, '');
-						}
-						value.value = v;
-					},
-				];
-
-				<input type="text" {ref bindValue(...value_accessors)} />
+			function App() {
+				return <>
+					let value = track('');
+					const value_accessors: [GetFunction<string>, SetFunction<string>] = [
+						() => {
+							return value.value.replace(/[c,b]+/g, '');
+						},
+						(v: string) => {
+							if (v.includes('c')) {
+								v = v.replace(/c/g, '');
+							}
+							value.value = v;
+						},
+					];
+					<input type="text" ref={bindValue(...value_accessors)} />
+				</>;
 			}
 
 			render(App);
@@ -1918,30 +1970,31 @@ describe('use value()', () => {
 	it(
 		'should accurately reflect values mutated through an effect even after a setter mutation via bind accessors',
 		() => {
-			component App() {
-				let value = track('');
-				const value_accessors: [GetFunction<string>, SetFunction<string>] = [
-					() => {
-						return value.value;
-					},
-					(v: string) => {
-						if (v.includes('c')) {
-							v = v.replace(/c/g, '');
-						}
-						value.value = v;
-					},
-				];
-
-				effect(() => {
-					value.value;
-
-					untrack(() => {
-						if (value.value.includes('a')) {
-							value.value = value.value.replace(/a/g, '');
-						}
+			function App() {
+				return <>
+					let value = track('');
+					const value_accessors: [GetFunction<string>, SetFunction<string>] = [
+						() => {
+							return value.value;
+						},
+						(v: string) => {
+							if (v.includes('c')) {
+								v = v.replace(/c/g, '');
+							}
+							value.value = v;
+						},
+					];
+					effect(() => {
+						value.value;
+
+						untrack(() => {
+							if (value.value.includes('a')) {
+								value.value = value.value.replace(/a/g, '');
+							}
+						});
 					});
-				});
-				<input type="text" {ref bindValue(...value_accessors)} />
+					<input type="text" ref={bindValue(...value_accessors)} />
+				</>;
 			}
 
 			render(App);
@@ -1962,19 +2015,20 @@ describe('use value()', () => {
 	it(
 		'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 = track('');
-				const value_accessors: [GetFunction<string>, SetFunction<string>] = [
-					() => {
-						return value.value;
-					},
-					(v: string) => {
-						// no update
-					},
-				];
-
-				<input type="text" {ref bindValue(...value_accessors)} />
-				<div>{value.value}</div>
+			function App() {
+				return <>
+					let value = track('');
+					const value_accessors: [GetFunction<string>, SetFunction<string>] = [
+						() => {
+							return value.value;
+						},
+						(v: string) => {
+							// no update
+						},
+					];
+					<input type="text" ref={bindValue(...value_accessors)} />
+					<div>{value.value}</div>
+				</>;
 			}
 
 			render(App);
@@ -1997,19 +2051,20 @@ describe('use value()', () => {
 	it(
 		'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 = track(
-					'',
-					(v) => {
-						return v;
-					},
-					() => {
-						return '';
-					},
-				);
-
-				<input type="text" {ref bindValue(value)} />
-				<div>{value.value}</div>
+			function App() {
+				return <>
+					let value = track(
+						'',
+						(v) => {
+							return v;
+						},
+						() => {
+							return '';
+						},
+					);
+					<input type="text" ref={bindValue(value)} />
+					<div>{value.value}</div>
+				</>;
 			}
 
 			render(App);
@@ -2034,14 +2089,14 @@ describe('bindClientWidth and bindClientHeight', () => {
 	it('should bind element clientWidth', () => {
 		const logs: number[] = [];
 
-		component App() {
-			const width = track(0);
-
-			effect(() => {
-				logs.push(width.value);
-			});
-
-			<div {ref bindClientWidth(width)} />
+		function App() {
+			return <>
+				const width = track(0);
+				effect(() => {
+					logs.push(width.value);
+				});
+				<div ref={bindClientWidth(width)} />
+			</>;
 		}
 
 		render(App);
@@ -2065,14 +2120,14 @@ describe('bindClientWidth and bindClientHeight', () => {
 	it('should bind element clientWidth with a getter and setter', () => {
 		const logs: number[] = [];
 
-		component App() {
-			const width = new RippleObject({ value: 0 });
-
-			effect(() => {
-				logs.push(width.value);
-			});
-
-			<div {ref bindClientWidth(() => width.value, (v: number) => (width.value = v))} />
+		function App() {
+			return <>
+				const width = new RippleObject({ value: 0 });
+				effect(() => {
+					logs.push(width.value);
+				});
+				<div ref={bindClientWidth(() => width.value, (v: number) => (width.value = v))} />
+			</>;
 		}
 
 		render(App);
@@ -2096,14 +2151,14 @@ describe('bindClientWidth and bindClientHeight', () => {
 	it('should bind element clientHeight', () => {
 		const logs: number[] = [];
 
-		component App() {
-			const height = track(0);
-
-			effect(() => {
-				logs.push(height.value);
-			});
-
-			<div {ref bindClientHeight(height)} />
+		function App() {
+			return <>
+				const height = track(0);
+				effect(() => {
+					logs.push(height.value);
+				});
+				<div ref={bindClientHeight(height)} />
+			</>;
 		}
 
 		render(App);
@@ -2127,13 +2182,14 @@ describe('bindClientWidth and bindClientHeight', () => {
 	it('should bind element clientHeight with a getter and setter', () => {
 		const logs: number[] = [];
 
-		component App() {
-			const height = new RippleObject({ value: 0 });
-			effect(() => {
-				logs.push(height.value);
-			});
-
-			<div {ref bindClientHeight(() => height.value, (v: number) => (height.value = v))} />
+		function App() {
+			return <>
+				const height = new RippleObject({ value: 0 });
+				effect(() => {
+					logs.push(height.value);
+				});
+				<div ref={bindClientHeight(() => height.value, (v: number) => (height.value = v))} />
+			</>;
 		}
 
 		render(App);
@@ -2159,14 +2215,14 @@ describe('bindOffsetWidth and bindOffsetHeight', () => {
 	it('should bind element offsetWidth', () => {
 		const logs: number[] = [];
 
-		component App() {
-			const width = track(0);
-
-			effect(() => {
-				logs.push(width.value);
-			});
-
-			<div {ref bindOffsetWidth(width)} />
+		function App() {
+			return <>
+				const width = track(0);
+				effect(() => {
+					logs.push(width.value);
+				});
+				<div ref={bindOffsetWidth(width)} />
+			</>;
 		}
 
 		render(App);
@@ -2190,14 +2246,14 @@ describe('bindOffsetWidth and bindOffsetHeight', () => {
 	it('should bind element offsetWidth with a getter and setter', () => {
 		const logs: number[] = [];
 
-		component App() {
-			const width = new RippleObject({ value: 0 });
-
-			effect(() => {
-				logs.push(width.value);
-			});
-
-			<div {ref bindOffsetWidth(() => width.value, (v: number) => (width.value = v))} />
+		function App() {
+			return <>
+				const width = new RippleObject({ value: 0 });
+				effect(() => {
+					logs.push(width.value);
+				});
+				<div ref={bindOffsetWidth(() => width.value, (v: number) => (width.value = v))} />
+			</>;
 		}
 
 		render(App);
@@ -2221,14 +2277,14 @@ describe('bindOffsetWidth and bindOffsetHeight', () => {
 	it('should bind element offsetHeight', () => {
 		const logs: number[] = [];
 
-		component App() {
-			const height = track(0);
-
-			effect(() => {
-				logs.push(height.value);
-			});
-
-			<div {ref bindOffsetHeight(height)} />
+		function App() {
+			return <>
+				const height = track(0);
+				effect(() => {
+					logs.push(height.value);
+				});
+				<div ref={bindOffsetHeight(height)} />
+			</>;
 		}
 
 		render(App);
@@ -2252,13 +2308,14 @@ describe('bindOffsetWidth and bindOffsetHeight', () => {
 	it('should bind element offsetHeight with a getter and setter', () => {
 		const logs: number[] = [];
 
-		component App() {
-			const height = new RippleObject({ value: 0 });
-			effect(() => {
-				logs.push(height.value);
-			});
-
-			<div {ref bindOffsetHeight(() => height.value, (v: number) => (height.value = v))} />
+		function App() {
+			return <>
+				const height = new RippleObject({ value: 0 });
+				effect(() => {
+					logs.push(height.value);
+				});
+				<div ref={bindOffsetHeight(() => height.value, (v: number) => (height.value = v))} />
+			</>;
 		}
 
 		render(App);
@@ -2284,14 +2341,14 @@ describe('bindContentRect', () => {
 	it('should bind element contentRect', () => {
 		const logs: DOMRectReadOnly[] = [];
 
-		component App() {
-			const rect = track(null);
-
-			effect(() => {
-				if (rect.value) logs.push(rect.value);
-			});
-
-			<div {ref bindContentRect(rect)} />
+		function App() {
+			return <>
+				const rect = track(null);
+				effect(() => {
+					if (rect.value) logs.push(rect.value);
+				});
+				<div ref={bindContentRect(rect)} />
+			</>;
 		}
 
 		render(App);
@@ -2314,20 +2371,21 @@ describe('bindContentRect', () => {
 	it('should bind element contentRect with a getter and setter', () => {
 		const logs: DOMRectReadOnly[] = [];
 
-		component App() {
-			const rect: RippleObject<{ value: DOMRectReadOnly | null }> = new RippleObject({
-				value: null,
-			});
-			effect(() => {
-				if (rect.value) logs.push(rect.value);
-			});
-
-			<div
-				{ref bindContentRect<null | DOMRectReadOnly>(
-					() => rect.value,
-					(v: DOMRectReadOnly) => (rect.value = v),
-				)}
-			/>
+		function App() {
+			return <>
+				const rect: RippleObject<{ value: DOMRectReadOnly | null }> = new RippleObject({
+					value: null,
+				});
+				effect(() => {
+					if (rect.value) logs.push(rect.value);
+				});
+				<div
+					ref={bindContentRect<null | DOMRectReadOnly>(
+						() => rect.value,
+						(v: DOMRectReadOnly) => (rect.value = v),
+					)}
+				/>
+			</>;
 		}
 
 		render(App);
@@ -2352,14 +2410,14 @@ describe('bindContentBoxSize', () => {
 	it('should bind element contentBoxSize', () => {
 		const logs: any[] = [];
 
-		component App() {
-			const boxSize = track(null);
-
-			effect(() => {
-				if (boxSize.value) logs.push(boxSize.value);
-			});
-
-			<div {ref bindContentBoxSize(boxSize)} />
+		function App() {
+			return <>
+				const boxSize = track(null);
+				effect(() => {
+					if (boxSize.value) logs.push(boxSize.value);
+				});
+				<div ref={bindContentBoxSize(boxSize)} />
+			</>;
 		}
 
 		render(App);
@@ -2385,21 +2443,21 @@ describe('bindContentBoxSize', () => {
 			{ blockSize: 200, inlineSize: 300 },
 		];
 
-		component App() {
-			const boxSize: RippleObject<{ value: typeof mockBoxSize | null }> = new RippleObject({
-				value: null,
-			});
-
-			effect(() => {
-				if (boxSize.value) logs.push(boxSize.value);
-			});
-
-			<div
-				{ref bindContentBoxSize<null | typeof mockBoxSize>(
-					() => boxSize.value,
-					(v: typeof mockBoxSize) => (boxSize.value = v),
-				)}
-			/>
+		function App() {
+			return <>
+				const boxSize: RippleObject<{ value: typeof mockBoxSize | null }> = new RippleObject({
+					value: null,
+				});
+				effect(() => {
+					if (boxSize.value) logs.push(boxSize.value);
+				});
+				<div
+					ref={bindContentBoxSize<null | typeof mockBoxSize>(
+						() => boxSize.value,
+						(v: typeof mockBoxSize) => (boxSize.value = v),
+					)}
+				/>
+			</>;
 		}
 
 		render(App);
@@ -2421,14 +2479,14 @@ describe('bindBorderBoxSize', () => {
 	it('should bind element borderBoxSize', () => {
 		const logs: any[] = [];
 
-		component App() {
-			const boxSize = track(null);
-
-			effect(() => {
-				if (boxSize.value) logs.push(boxSize.value);
-			});
-
-			<div {ref bindBorderBoxSize(boxSize)} />
+		function App() {
+			return <>
+				const boxSize = track(null);
+				effect(() => {
+					if (boxSize.value) logs.push(boxSize.value);
+				});
+				<div ref={bindBorderBoxSize(boxSize)} />
+			</>;
 		}
 
 		render(App);
@@ -2454,21 +2512,21 @@ describe('bindBorderBoxSize', () => {
 			{ blockSize: 220, inlineSize: 320 },
 		];
 
-		component App() {
-			const boxSize: RippleObject<{ value: typeof mockBoxSize | null }> = new RippleObject({
-				value: null,
-			});
-
-			effect(() => {
-				if (boxSize.value) logs.push(boxSize.value);
-			});
-
-			<div
-				{ref bindBorderBoxSize<null | typeof mockBoxSize>(
-					() => boxSize.value,
-					(v: typeof mockBoxSize) => (boxSize.value = v),
-				)}
-			/>
+		function App() {
+			return <>
+				const boxSize: RippleObject<{ value: typeof mockBoxSize | null }> = new RippleObject({
+					value: null,
+				});
+				effect(() => {
+					if (boxSize.value) logs.push(boxSize.value);
+				});
+				<div
+					ref={bindBorderBoxSize<null | typeof mockBoxSize>(
+						() => boxSize.value,
+						(v: typeof mockBoxSize) => (boxSize.value = v),
+					)}
+				/>
+			</>;
 		}
 
 		render(App);
@@ -2490,14 +2548,14 @@ describe('bindDevicePixelContentBoxSize', () => {
 	it('should bind element devicePixelContentBoxSize', () => {
 		const logs: any[] = [];
 
-		component App() {
-			const boxSize = track(null);
-
-			effect(() => {
-				if (boxSize.value) logs.push(boxSize.value);
-			});
-
-			<div {ref bindDevicePixelContentBoxSize(boxSize)} />
+		function App() {
+			return <>
+				const boxSize = track(null);
+				effect(() => {
+					if (boxSize.value) logs.push(boxSize.value);
+				});
+				<div ref={bindDevicePixelContentBoxSize(boxSize)} />
+			</>;
 		}
 
 		render(App);
@@ -2523,21 +2581,21 @@ describe('bindDevicePixelContentBoxSize', () => {
 			{ blockSize: 400, inlineSize: 600 },
 		];
 
-		component App() {
-			const boxSize: RippleObject<{ value: typeof mockBoxSize | null }> = new RippleObject({
-				value: null,
-			});
-
-			effect(() => {
-				if (boxSize.value) logs.push(boxSize.value);
-			});
-
-			<div
-				{ref bindDevicePixelContentBoxSize<null | typeof mockBoxSize>(
-					() => boxSize.value,
-					(v: typeof mockBoxSize) => (boxSize.value = v),
-				)}
-			/>
+		function App() {
+			return <>
+				const boxSize: RippleObject<{ value: typeof mockBoxSize | null }> = new RippleObject({
+					value: null,
+				});
+				effect(() => {
+					if (boxSize.value) logs.push(boxSize.value);
+				});
+				<div
+					ref={bindDevicePixelContentBoxSize<null | typeof mockBoxSize>(
+						() => boxSize.value,
+						(v: typeof mockBoxSize) => (boxSize.value = v),
+					)}
+				/>
+			</>;
 		}
 
 		render(App);
@@ -2559,14 +2617,14 @@ describe('bindInnerHTML', () => {
 	it('should bind element innerHTML', () => {
 		const logs: string[] = [];
 
-		component App() {
-			const html = track('<strong>Hello</strong>');
-
-			effect(() => {
-				logs.push(html.value);
-			});
-
-			<div contenteditable="true" {ref bindInnerHTML(html)} />
+		function App() {
+			return <>
+				const html = track('<strong>Hello</strong>');
+				effect(() => {
+					logs.push(html.value);
+				});
+				<div contenteditable="true" ref={bindInnerHTML(html)} />
+			</>;
 		}
 
 		render(App);
@@ -2585,17 +2643,17 @@ describe('bindInnerHTML', () => {
 	it('should bind element innerHTML', () => {
 		const logs: string[] = [];
 
-		component App() {
-			const html = new RippleObject({ value: '<strong>Hello</strong>' });
-
-			effect(() => {
-				logs.push(html.value);
-			});
-
-			<div
-				contenteditable="true"
-				{ref bindInnerHTML(() => html.value, (v: string) => (html.value = v))}
-			/>
+		function App() {
+			return <>
+				const html = new RippleObject({ value: '<strong>Hello</strong>' });
+				effect(() => {
+					logs.push(html.value);
+				});
+				<div
+					contenteditable="true"
+					ref={bindInnerHTML(() => html.value, (v: string) => (html.value = v))}
+				/>
+			</>;
 		}
 
 		render(App);
@@ -2612,13 +2670,14 @@ describe('bindInnerHTML', () => {
 	});
 
 	it('should update innerHTML when tracked value changes', () => {
-		component App() {
-			const html = track('<p>Initial</p>');
-
-			<div>
-				<div contenteditable="true" {ref bindInnerHTML(html)} />
-				<button onClick={() => (html.value = '<p>Updated</p>')}>{'Update'}</button>
-			</div>
+		function App() {
+			return <>
+				const html = track('<p>Initial</p>');
+				<div>
+					<div contenteditable="true" ref={bindInnerHTML(html)} />
+					<button onClick={() => (html.value = '<p>Updated</p>')}>{'Update'}</button>
+				</div>
+			</>;
 		}
 
 		render(App);
@@ -2636,16 +2695,17 @@ describe('bindInnerHTML', () => {
 	});
 
 	it('should update innerHTML when tracked value changes with a getter and setter', () => {
-		component App() {
-			const html = new RippleObject({ value: '<p>Initial</p>' });
-
-			<div>
-				<div
-					contenteditable="true"
-					{ref bindInnerHTML(() => html.value, (v: string) => (html.value = v))}
-				/>
-				<button onClick={() => (html.value = '<p>Updated</p>')}>{'Update'}</button>
-			</div>
+		function App() {
+			return <>
+				const html = new RippleObject({ value: '<p>Initial</p>' });
+				<div>
+					<div
+						contenteditable="true"
+						ref={bindInnerHTML(() => html.value, (v: string) => (html.value = v))}
+					/>
+					<button onClick={() => (html.value = '<p>Updated</p>')}>{'Update'}</button>
+				</div>
+			</>;
 		}
 
 		render(App);
@@ -2663,10 +2723,11 @@ describe('bindInnerHTML', () => {
 	});
 
 	it('should handle null innerHTML value', () => {
-		component App() {
-			const html = track(null);
-
-			<div contenteditable="true" {ref bindInnerHTML(html)} />
+		function App() {
+			return <>
+				const html = track(null);
+				<div contenteditable="true" ref={bindInnerHTML(html)} />
+			</>;
 		}
 
 		render(App);
@@ -2678,13 +2739,14 @@ describe('bindInnerHTML', () => {
 	});
 
 	it('should handle null innerHTML value with a getter and setter', () => {
-		component App() {
-			const html: RippleObject<{ value: null | string }> = new RippleObject({ value: null });
-
-			<div
-				contenteditable="true"
-				{ref bindInnerHTML(() => html.value, (v: string | null) => (html.value = v))}
-			/>
+		function App() {
+			return <>
+				const html: RippleObject<{ value: null | string }> = new RippleObject({ value: null });
+				<div
+					contenteditable="true"
+					ref={bindInnerHTML(() => html.value, (v: string | null) => (html.value = v))}
+				/>
+			</>;
 		}
 
 		render(App);
@@ -2700,14 +2762,14 @@ describe('bindInnerText', () => {
 	it('should bind element innerText', () => {
 		const logs: string[] = [];
 
-		component App() {
-			const text = track('Hello World');
-
-			effect(() => {
-				logs.push(text.value);
-			});
-
-			<div contenteditable="true" {ref bindInnerText(text)} />
+		function App() {
+			return <>
+				const text = track('Hello World');
+				effect(() => {
+					logs.push(text.value);
+				});
+				<div contenteditable="true" ref={bindInnerText(text)} />
+			</>;
 		}
 
 		render(App);
@@ -2726,16 +2788,17 @@ describe('bindInnerText', () => {
 	it('should bind element innerText with a getter and setter', () => {
 		const logs: string[] = [];
 
-		component App() {
-			const text = new RippleObject({ value: 'Hello World' });
-			effect(() => {
-				logs.push(text.value);
-			});
-
-			<div
-				contenteditable="true"
-				{ref bindInnerText(() => text.value, (v: string) => (text.value = v))}
-			/>
+		function App() {
+			return <>
+				const text = new RippleObject({ value: 'Hello World' });
+				effect(() => {
+					logs.push(text.value);
+				});
+				<div
+					contenteditable="true"
+					ref={bindInnerText(() => text.value, (v: string) => (text.value = v))}
+				/>
+			</>;
 		}
 
 		render(App);
@@ -2752,13 +2815,14 @@ describe('bindInnerText', () => {
 	});
 
 	it('should update innerText when tracked value changes', () => {
-		component App() {
-			const text = track('Before');
-
-			<div>
-				<div contenteditable="true" {ref bindInnerText(text)} />
-				<button onClick={() => (text.value = 'After')}>{'Update'}</button>
-			</div>
+		function App() {
+			return <>
+				const text = track('Before');
+				<div>
+					<div contenteditable="true" ref={bindInnerText(text)} />
+					<button onClick={() => (text.value = 'After')}>{'Update'}</button>
+				</div>
+			</>;
 		}
 
 		render(App);
@@ -2776,16 +2840,17 @@ describe('bindInnerText', () => {
 	});
 
 	it('should update innerText when tracked value changes with a getter and setter', () => {
-		component App() {
-			const text = new RippleObject({ value: 'Before' });
-
-			<div>
-				<div
-					contenteditable="true"
-					{ref bindInnerText(() => text.value, (v: string) => (text.value = v))}
-				/>
-				<button onClick={() => (text.value = 'After')}>{'Update'}</button>
-			</div>
+		function App() {
+			return <>
+				const text = new RippleObject({ value: 'Before' });
+				<div>
+					<div
+						contenteditable="true"
+						ref={bindInnerText(() => text.value, (v: string) => (text.value = v))}
+					/>
+					<button onClick={() => (text.value = 'After')}>{'Update'}</button>
+				</div>
+			</>;
 		}
 
 		render(App);
@@ -2807,14 +2872,14 @@ describe('bindTextContent', () => {
 	it('should bind element textContent', () => {
 		const logs: string[] = [];
 
-		component App() {
-			const text = track('Sample text');
-
-			effect(() => {
-				logs.push(text.value);
-			});
-
-			<div contenteditable="true" {ref bindTextContent(text)} />
+		function App() {
+			return <>
+				const text = track('Sample text');
+				effect(() => {
+					logs.push(text.value);
+				});
+				<div contenteditable="true" ref={bindTextContent(text)} />
+			</>;
 		}
 
 		render(App);
@@ -2833,17 +2898,17 @@ describe('bindTextContent', () => {
 	it('should bind element textContent with a getter and setter', () => {
 		const logs: string[] = [];
 
-		component App() {
-			const text = new RippleObject({ value: 'Sample text' });
-
-			effect(() => {
-				logs.push(text.value);
-			});
-
-			<div
-				contenteditable="true"
-				{ref bindTextContent(() => text.value, (v: string) => (text.value = v))}
-			/>
+		function App() {
+			return <>
+				const text = new RippleObject({ value: 'Sample text' });
+				effect(() => {
+					logs.push(text.value);
+				});
+				<div
+					contenteditable="true"
+					ref={bindTextContent(() => text.value, (v: string) => (text.value = v))}
+				/>
+			</>;
 		}
 
 		render(App);
@@ -2860,13 +2925,14 @@ describe('bindTextContent', () => {
 	});
 
 	it('should update textContent when tracked value changes', () => {
-		component App() {
-			const text = track('Start');
-
-			<div>
-				<div contenteditable="true" {ref bindTextContent(text)} />
-				<button onClick={() => (text.value = 'End')}>{'Update'}</button>
-			</div>
+		function App() {
+			return <>
+				const text = track('Start');
+				<div>
+					<div contenteditable="true" ref={bindTextContent(text)} />
+					<button onClick={() => (text.value = 'End')}>{'Update'}</button>
+				</div>
+			</>;
 		}
 
 		render(App);
@@ -2884,16 +2950,17 @@ describe('bindTextContent', () => {
 	});
 
 	it('should update textContent when tracked value changes with a getter and setter', () => {
-		component App() {
-			const text = new RippleObject({ value: 'Start' });
-
-			<div>
-				<div
-					contenteditable="true"
-					{ref bindTextContent(() => text.value, (v: string) => (text.value = v))}
-				/>
-				<button onClick={() => (text.value = 'End')}>{'Update'}</button>
-			</div>
+		function App() {
+			return <>
+				const text = new RippleObject({ value: 'Start' });
+				<div>
+					<div
+						contenteditable="true"
+						ref={bindTextContent(() => text.value, (v: string) => (text.value = v))}
+					/>
+					<button onClick={() => (text.value = 'End')}>{'Update'}</button>
+				</div>
+			</>;
 		}
 
 		render(App);
@@ -2911,10 +2978,11 @@ describe('bindTextContent', () => {
 	});
 
 	it('should handle null textContent value', () => {
-		component App() {
-			const text = track(null);
-
-			<div contenteditable="true" {ref bindTextContent(text)} />
+		function App() {
+			return <>
+				const text = track(null);
+				<div contenteditable="true" ref={bindTextContent(text)} />
+			</>;
 		}
 
 		render(App);
@@ -2926,16 +2994,17 @@ describe('bindTextContent', () => {
 	});
 
 	it('should handle null textContent value with a getter and setter', () => {
-		component App() {
-			const text: RippleObject<{ value: string | null }> = new RippleObject({ value: null });
-
-			<div
-				contenteditable="true"
-				{ref bindTextContent<string | null>(
-					() => text.value,
-					(v: string | null) => (text.value = v),
-				)}
-			/>
+		function App() {
+			return <>
+				const text: RippleObject<{ value: string | null }> = new RippleObject({ value: null });
+				<div
+					contenteditable="true"
+					ref={bindTextContent<string | null>(
+						() => text.value,
+						(v: string | null) => (text.value = v),
+					)}
+				/>
+			</>;
 		}
 
 		render(App);
@@ -2951,14 +3020,14 @@ describe('bindNode', () => {
 	it('should update tracked value with element reference', () => {
 		let capturedNode: HTMLElement | null = null;
 
-		component App() {
-			const nodeRef = track(null);
-
-			effect(() => {
-				capturedNode = nodeRef.value;
-			});
-
-			<div {ref bindNode(nodeRef)} />
+		function App() {
+			return <>
+				const nodeRef = track(null);
+				effect(() => {
+					capturedNode = nodeRef.value;
+				});
+				<div ref={bindNode(nodeRef)} />
+			</>;
 		}
 
 		render(App);
@@ -2971,16 +3040,16 @@ describe('bindNode', () => {
 	it('should update tracked value with element reference and with a getter and setter', () => {
 		let capturedNode: HTMLElement | null = null;
 
-		component App() {
-			const nodeRef: RippleObject<{ value: HTMLElement | null }> = new RippleObject({
-				value: null,
-			});
-
-			effect(() => {
-				capturedNode = nodeRef.value;
-			});
-
-			<div {ref bindNode(() => nodeRef.value, (v: HTMLElement | null) => (nodeRef.value = v))} />
+		function App() {
+			return <>
+				const nodeRef: RippleObject<{ value: HTMLElement | null }> = new RippleObject({
+					value: null,
+				});
+				effect(() => {
+					capturedNode = nodeRef.value;
+				});
+				<div ref={bindNode(() => nodeRef.value, (v: HTMLElement | null) => (nodeRef.value = v))} />
+			</>;
 		}
 
 		render(App);
@@ -2991,21 +3060,22 @@ describe('bindNode', () => {
 	});
 
 	it('should allow access to bound element', () => {
-		component App() {
-			const inputRef = track<HTMLInputElement | null>(null);
-
-			<div>
-				<input type="text" {ref bindNode(inputRef)} />
-				<button
-					onClick={() => {
-						if (inputRef.value) {
-							inputRef.value.value = 'Set by ref';
-						}
-					}}
-				>
-					{'Set Value'}
-				</button>
-			</div>
+		function App() {
+			return <>
+				const inputRef = track<HTMLInputElement | null>(null);
+				<div>
+					<input type="text" ref={bindNode(inputRef)} />
+					<button
+						onClick={() => {
+							if (inputRef.value) {
+								inputRef.value.value = 'Set by ref';
+							}
+						}}
+					>
+						{'Set Value'}
+					</button>
+				</div>
+			</>;
 		}
 
 		render(App);
@@ -3023,26 +3093,27 @@ describe('bindNode', () => {
 	});
 
 	it('should allow access to bound element with a getter and setter', () => {
-		component App() {
-			const inputRef: RippleObject<{ node: HTMLInputElement | null }> = new RippleObject({
-				node: null,
-			});
-
-			<div>
-				<input
-					type="text"
-					{ref bindNode(() => inputRef.node, (v: HTMLInputElement | null) => (inputRef.node = v))}
-				/>
-				<button
-					onClick={() => {
-						if (inputRef.node) {
-							inputRef.node.value = 'Set by ref';
-						}
-					}}
-				>
-					{'Set Value'}
-				</button>
-			</div>
+		function App() {
+			return <>
+				const inputRef: RippleObject<{ node: HTMLInputElement | null }> = new RippleObject({
+					node: null,
+				});
+				<div>
+					<input
+						type="text"
+						ref={bindNode(() => inputRef.node, (v: HTMLInputElement | null) => (inputRef.node = v))}
+					/>
+					<button
+						onClick={() => {
+							if (inputRef.node) {
+								inputRef.node.value = 'Set by ref';
+							}
+						}}
+					>
+						{'Set Value'}
+					</button>
+				</div>
+			</>;
 		}
 
 		render(App);
@@ -3064,15 +3135,15 @@ describe('bindFiles', () => {
 	it('should bind files from file input', () => {
 		const logs: FileList[] = [];
 
-		component App() {
-			const files = track(null);
-
-			effect(() => {
-				files.value;
-				if (files.value) logs.push(files.value);
-			});
-
-			<input type="file" multiple {ref bindFiles(files)} />
+		function App() {
+			return <>
+				const files = track(null);
+				effect(() => {
+					files.value;
+					if (files.value) logs.push(files.value);
+				});
+				<input type="file" multiple ref={bindFiles(files)} />
+			</>;
 		}
 
 		render(App);
@@ -3105,19 +3176,19 @@ describe('bindFiles', () => {
 	it('should bind files from file input with a getter and setter', () => {
 		const logs: FileList[] = [];
 
-		component App() {
-			const files: RippleObject<{ items: FileList | null }> = new RippleObject({ items: null });
-
-			effect(() => {
-				files.items;
-				if (files.items) logs.push(files.items);
-			});
-
-			<input
-				type="file"
-				multiple
-				{ref bindFiles(() => files.items, (v: FileList | null) => (files.items = v))}
-			/>
+		function App() {
+			return <>
+				const files: RippleObject<{ items: FileList | null }> = new RippleObject({ items: null });
+				effect(() => {
+					files.items;
+					if (files.items) logs.push(files.items);
+				});
+				<input
+					type="file"
+					multiple
+					ref={bindFiles(() => files.items, (v: FileList | null) => (files.items = v))}
+				/>
+			</>;
 		}
 
 		render(App);
@@ -3150,14 +3221,14 @@ describe('bindFiles', () => {
 	it('should update tracked value when files are selected', () => {
 		let capturedFiles: FileList | null = null;
 
-		component App() {
-			const files = track<FileList | null>(null);
-
-			effect(() => {
-				capturedFiles = files.value;
-			});
-
-			<input type="file" {ref bindFiles(files)} />
+		function App() {
+			return <>
+				const files = track<FileList | null>(null);
+				effect(() => {
+					capturedFiles = files.value;
+				});
+				<input type="file" ref={bindFiles(files)} />
+			</>;
 		}
 
 		render(App);
@@ -3185,17 +3256,17 @@ describe('bindFiles', () => {
 	it('should update tracked value when files are selected with a getter and setter', () => {
 		let capturedFiles: FileList | null = null;
 
-		component App() {
-			const files: RippleObject<{ items: FileList | null }> = new RippleObject({ items: null });
-
-			effect(() => {
-				capturedFiles = files.items;
-			});
-
-			<input
-				type="file"
-				{ref bindFiles(() => files.items, (v: FileList | null) => (files.items = v))}
-			/>
+		function App() {
+			return <>
+				const files: RippleObject<{ items: FileList | null }> = new RippleObject({ items: null });
+				effect(() => {
+					capturedFiles = files.items;
+				});
+				<input
+					type="file"
+					ref={bindFiles(() => files.items, (v: FileList | null) => (files.items = v))}
+				/>
+			</>;
 		}
 
 		render(App);
@@ -3223,27 +3294,27 @@ describe('bindFiles', () => {
 	it('should allow clearing files via input.files', () => {
 		let capturedFiles: FileList | null = null;
 
-		component App() {
-			const files = track<FileList | null>(null);
-			const input = track<HTMLInputElement | null>(null);
-
-			effect(() => {
-				capturedFiles = files.value;
-			});
-
-			<div>
-				<input type="file" {ref bindFiles<FileList>(files)} {ref bindNode(input)} />
-				<button
-					onClick={() => {
-						if (input.value) {
-							input.value.files = new DataTransfer().files;
-							input.value.dispatchEvent(new Event('change', { bubbles: true }));
-						}
-					}}
-				>
-					{'Clear'}
-				</button>
-			</div>
+		function App() {
+			return <>
+				const files = track<FileList | null>(null);
+				const input = track<HTMLInputElement | null>(null);
+				effect(() => {
+					capturedFiles = files.value;
+				});
+				<div>
+					<input type="file" ref={bindFiles<FileList>(files)} ref={bindNode(input)} />
+					<button
+						onClick={() => {
+							if (input.value) {
+								input.value.files = new DataTransfer().files;
+								input.value.dispatchEvent(new Event('change', { bubbles: true }));
+							}
+						}}
+					>
+						{'Clear'}
+					</button>
+				</div>
+			</>;
 		}
 
 		render(App);
@@ -3276,31 +3347,31 @@ describe('bindFiles', () => {
 	it('should allow clearing files via input.files with a getter and setter', () => {
 		let capturedFiles: FileList | null = null;
 
-		component App() {
-			const files: RippleObject<{ items: FileList | null }> = new RippleObject({ items: null });
-			const input = track<HTMLInputElement | null>(null);
-
-			effect(() => {
-				capturedFiles = files.items;
-			});
-
-			<div>
-				<input
-					type="file"
-					{ref bindFiles(() => files.items, (v: FileList | null) => (files.items = v))}
-					{ref bindNode(input)}
-				/>
-				<button
-					onClick={() => {
-						if (input.value) {
-							input.value.files = new DataTransfer().files;
-							input.value.dispatchEvent(new Event('change', { bubbles: true }));
-						}
-					}}
-				>
-					{'Clear'}
-				</button>
-			</div>
+		function App() {
+			return <>
+				const files: RippleObject<{ items: FileList | null }> = new RippleObject({ items: null });
+				const input = track<HTMLInputElement | null>(null);
+				effect(() => {
+					capturedFiles = files.items;
+				});
+				<div>
+					<input
+						type="file"
+						ref={bindFiles(() => files.items, (v: FileList | null) => (files.items = v))}
+						ref={bindNode(input)}
+					/>
+					<button
+						onClick={() => {
+							if (input.value) {
+								input.value.files = new DataTransfer().files;
+								input.value.dispatchEvent(new Event('change', { bubbles: true }));
+							}
+						}}
+					>
+						{'Clear'}
+					</button>
+				</div>
+			</>;
 		}
 
 		render(App);
@@ -3333,17 +3404,17 @@ describe('bindFiles', () => {
 	it('should handle multiple file selections', () => {
 		const fileCounts: number[] = [];
 
-		component App() {
-			const files = track<FileList | null>(null);
-
-			effect(() => {
-				files.value;
-				if (files.value) {
-					fileCounts.push(files.value.length);
-				}
-			});
-
-			<input type="file" multiple {ref bindFiles(files)} />
+		function App() {
+			return <>
+				const files = track<FileList | null>(null);
+				effect(() => {
+					files.value;
+					if (files.value) {
+						fileCounts.push(files.value.length);
+					}
+				});
+				<input type="file" multiple ref={bindFiles(files)} />
+			</>;
 		}
 
 		render(App);
@@ -3382,20 +3453,21 @@ describe('bindFiles', () => {
 	it('should handle multiple file selections with a getter and setter', () => {
 		const fileCounts: number[] = [];
 
-		component App() {
-			const files: RippleObject<{ items: FileList | null }> = new RippleObject({ items: null });
-			effect(() => {
-				files.items;
-				if (files.items) {
-					fileCounts.push(files.items.length);
-				}
-			});
-
-			<input
-				type="file"
-				multiple
-				{ref bindFiles(() => files.items, (v: FileList | null) => (files.items = v))}
-			/>
+		function App() {
+			return <>
+				const files: RippleObject<{ items: FileList | null }> = new RippleObject({ items: null });
+				effect(() => {
+					files.items;
+					if (files.items) {
+						fileCounts.push(files.items.length);
+					}
+				});
+				<input
+					type="file"
+					multiple
+					ref={bindFiles(() => files.items, (v: FileList | null) => (files.items = v))}
+				/>
+			</>;
 		}
 
 		render(App);
@@ -3434,17 +3506,17 @@ describe('bindFiles', () => {
 	it('should handle file input without multiple attribute', () => {
 		let capturedFile: File | null = null;
 
-		component App() {
-			const files = track<FileList | null>(null);
-
-			effect(() => {
-				files.value;
-				if (files.value && files.value.length > 0) {
-					capturedFile = files.value[0];
-				}
-			});
-
-			<input type="file" {ref bindFiles(files)} />
+		function App() {
+			return <>
+				const files = track<FileList | null>(null);
+				effect(() => {
+					files.value;
+					if (files.value && files.value.length > 0) {
+						capturedFile = files.value[0];
+					}
+				});
+				<input type="file" ref={bindFiles(files)} />
+			</>;
 		}
 
 		render(App);
@@ -3471,19 +3543,20 @@ describe('bindFiles', () => {
 	it('should handle file input without multiple attribute with a getter and setter', () => {
 		let capturedFile: File | null = null;
 
-		component App() {
-			const files: RippleObject<{ items: FileList | null }> = new RippleObject({ items: null });
-			effect(() => {
-				files.items;
-				if (files.items && files.items.length > 0) {
-					capturedFile = files.items[0];
-				}
-			});
-
-			<input
-				type="file"
-				{ref bindFiles(() => files.items, (v: FileList | null) => (files.items = v))}
-			/>
+		function App() {
+			return <>
+				const files: RippleObject<{ items: FileList | null }> = new RippleObject({ items: null });
+				effect(() => {
+					files.items;
+					if (files.items && files.items.length > 0) {
+						capturedFile = files.items[0];
+					}
+				});
+				<input
+					type="file"
+					ref={bindFiles(() => files.items, (v: FileList | null) => (files.items = v))}
+				/>
+			</>;
 		}
 
 		render(App);
@@ -3510,14 +3583,14 @@ describe('bindFiles', () => {
 	it('should handle empty file selection', () => {
 		const logs: (FileList | null)[] = [];
 
-		component App() {
-			const files = track(null);
-
-			effect(() => {
-				logs.push(files.value);
-			});
-
-			<input type="file" {ref bindFiles(files)} />
+		function App() {
+			return <>
+				const files = track(null);
+				effect(() => {
+					logs.push(files.value);
+				});
+				<input type="file" ref={bindFiles(files)} />
+			</>;
 		}
 
 		render(App);
@@ -3552,16 +3625,17 @@ describe('bindFiles', () => {
 	it('should handle empty file selection with a getter and setter', () => {
 		const logs: (FileList | null)[] = [];
 
-		component App() {
-			const files: RippleObject<{ items: FileList | null }> = new RippleObject({ items: null });
-			effect(() => {
-				logs.push(files.items);
-			});
-
-			<input
-				type="file"
-				{ref bindFiles(() => files.items, (v: FileList | null) => (files.items = v))}
-			/>
+		function App() {
+			return <>
+				const files: RippleObject<{ items: FileList | null }> = new RippleObject({ items: null });
+				effect(() => {
+					logs.push(files.items);
+				});
+				<input
+					type="file"
+					ref={bindFiles(() => files.items, (v: FileList | null) => (files.items = v))}
+				/>
+			</>;
 		}
 
 		render(App);
@@ -3597,9 +3671,8 @@ describe('bindFiles', () => {
 describe('error handling', () => {
 	it('should throw error when bindValue receives non-tracked object', () => {
 		expect(() => {
-			component App() {
-				// @ts-expect-error invalid argument
-				<input type="text" {ref bindValue({ value: 'not tracked' })} />
+			function App() {
+				return <><input type="text" ref={bindValue({ value: 'not tracked' })} /></>;
 			}
 			render(App);
 		}).toThrow('bindValue() argument is not a tracked object');
@@ -3607,9 +3680,8 @@ describe('error handling', () => {
 
 	it('should throw error when bindChecked receives non-tracked object', () => {
 		expect(() => {
-			component App() {
-				// @ts-expect-error invalid argument
-				<input type="checkbox" {ref bindChecked({ value: false })} />
+			function App() {
+				return <><input type="checkbox" ref={bindChecked({ value: false })} /></>;
 			}
 			render(App);
 		}).toThrow('bindChecked() argument is not a tracked object');
@@ -3617,9 +3689,8 @@ describe('error handling', () => {
 
 	it('should throw error when bindIndeterminate receives non-tracked object', () => {
 		expect(() => {
-			component App() {
-				// @ts-expect-error invalid argument
-				<input type="checkbox" {ref bindIndeterminate({ value: false })} />
+			function App() {
+				return <><input type="checkbox" ref={bindIndeterminate({ value: false })} /></>;
 			}
 			render(App);
 		}).toThrow('bindIndeterminate() argument is not a tracked object');
@@ -3627,9 +3698,8 @@ describe('error handling', () => {
 
 	it('should throw error when bindGroup receives non-tracked object', () => {
 		expect(() => {
-			component App() {
-				// @ts-expect-error invalid argument
-				<input type="checkbox" value="a" {ref bindGroup({ value: [] })} />
+			function App() {
+				return <><input type="checkbox" value="a" ref={bindGroup({ value: [] })} /></>;
 			}
 			render(App);
 		}).toThrow('bindGroup() argument is not a tracked object');
@@ -3637,9 +3707,8 @@ describe('error handling', () => {
 
 	it('should throw error when bindClientWidth receives non-tracked object', () => {
 		expect(() => {
-			component App() {
-				// @ts-expect-error invalid argument
-				<div {ref bindClientWidth({ value: 0 })} />
+			function App() {
+				return <><div ref={bindClientWidth({ value: 0 })} /></>;
 			}
 			render(App);
 		}).toThrow('bindClientWidth() argument is not a tracked object');
@@ -3647,9 +3716,8 @@ describe('error handling', () => {
 
 	it('should throw error when bindClientHeight receives non-tracked object', () => {
 		expect(() => {
-			component App() {
-				// @ts-expect-error invalid argument
-				<div {ref bindClientHeight({ value: 0 })} />
+			function App() {
+				return <><div ref={bindClientHeight({ value: 0 })} /></>;
 			}
 			render(App);
 		}).toThrow('bindClientHeight() argument is not a tracked object');
@@ -3657,9 +3725,8 @@ describe('error handling', () => {
 
 	it('should throw error when bindOffsetWidth receives non-tracked object', () => {
 		expect(() => {
-			component App() {
-				// @ts-expect-error invalid argument
-				<div {ref bindOffsetWidth({ value: 0 })} />
+			function App() {
+				return <><div ref={bindOffsetWidth({ value: 0 })} /></>;
 			}
 			render(App);
 		}).toThrow('bindOffsetWidth() argument is not a tracked object');
@@ -3667,9 +3734,8 @@ describe('error handling', () => {
 
 	it('should throw error when bindOffsetHeight receives non-tracked object', () => {
 		expect(() => {
-			component App() {
-				// @ts-expect-error invalid argument
-				<div {ref bindOffsetHeight({ value: 0 })} />
+			function App() {
+				return <><div ref={bindOffsetHeight({ value: 0 })} /></>;
 			}
 			render(App);
 		}).toThrow('bindOffsetHeight() argument is not a tracked object');
@@ -3677,9 +3743,8 @@ describe('error handling', () => {
 
 	it('should throw error when bindContentRect receives non-tracked object', () => {
 		expect(() => {
-			component App() {
-				// @ts-expect-error invalid argument
-				<div {ref bindContentRect({ value: null })} />
+			function App() {
+				return <><div ref={bindContentRect({ value: null })} /></>;
 			}
 			render(App);
 		}).toThrow('bindContentRect() argument is not a tracked object');
@@ -3687,9 +3752,8 @@ describe('error handling', () => {
 
 	it('should throw error when bindContentBoxSize receives non-tracked object', () => {
 		expect(() => {
-			component App() {
-				// @ts-expect-error invalid argument
-				<div {ref bindContentBoxSize({ value: null })} />
+			function App() {
+				return <><div ref={bindContentBoxSize({ value: null })} /></>;
 			}
 			render(App);
 		}).toThrow('bindContentBoxSize() argument is not a tracked object');
@@ -3697,9 +3761,8 @@ describe('error handling', () => {
 
 	it('should throw error when bindBorderBoxSize receives non-tracked object', () => {
 		expect(() => {
-			component App() {
-				// @ts-expect-error invalid argument
-				<div {ref bindBorderBoxSize({ value: null })} />
+			function App() {
+				return <><div ref={bindBorderBoxSize({ value: null })} /></>;
 			}
 			render(App);
 		}).toThrow('bindBorderBoxSize() argument is not a tracked object');
@@ -3707,9 +3770,8 @@ describe('error handling', () => {
 
 	it('should throw error when bindDevicePixelContentBoxSize receives non-tracked object', () => {
 		expect(() => {
-			component App() {
-				// @ts-expect-error invalid argument
-				<div {ref bindDevicePixelContentBoxSize({ value: null })} />
+			function App() {
+				return <><div ref={bindDevicePixelContentBoxSize({ value: null })} /></>;
 			}
 			render(App);
 		}).toThrow('bindDevicePixelContentBoxSize() argument is not a tracked object');
@@ -3717,9 +3779,8 @@ describe('error handling', () => {
 
 	it('should throw error when bindInnerHTML receives non-tracked object', () => {
 		expect(() => {
-			component App() {
-				// @ts-expect-error invalid argument
-				<div {ref bindInnerHTML({ value: '' })} />
+			function App() {
+				return <><div ref={bindInnerHTML({ value: '' })} /></>;
 			}
 			render(App);
 		}).toThrow('bindInnerHTML() argument is not a tracked object');
@@ -3727,9 +3788,8 @@ describe('error handling', () => {
 
 	it('should throw error when bindInnerText receives non-tracked object', () => {
 		expect(() => {
-			component App() {
-				// @ts-expect-error invalid argument
-				<div {ref bindInnerText({ value: '' })} />
+			function App() {
+				return <><div ref={bindInnerText({ value: '' })} /></>;
 			}
 			render(App);
 		}).toThrow('bindInnerText() argument is not a tracked object');
@@ -3737,9 +3797,8 @@ describe('error handling', () => {
 
 	it('should throw error when bindTextContent receives non-tracked object', () => {
 		expect(() => {
-			component App() {
-				// @ts-expect-error invalid argument
-				<div {ref bindTextContent({ value: '' })} />
+			function App() {
+				return <><div ref={bindTextContent({ value: '' })} /></>;
 			}
 			render(App);
 		}).toThrow('bindTextContent() argument is not a tracked object');
@@ -3747,9 +3806,8 @@ describe('error handling', () => {
 
 	it('should throw error when bindNode receives non-tracked object', () => {
 		expect(() => {
-			component App() {
-				// @ts-expect-error invalid argument
-				<div {ref bindNode({ value: null })} />
+			function App() {
+				return <><div ref={bindNode({ value: null })} /></>;
 			}
 			render(App);
 		}).toThrow('bindNode() argument is not a tracked object');
@@ -3757,9 +3815,8 @@ describe('error handling', () => {
 
 	it('should throw error when bindFiles receives non-tracked object', () => {
 		expect(() => {
-			component App() {
-				// @ts-expect-error invalid argument
-				<input type="file" {ref bindFiles({ value: null })} />
+			function App() {
+				return <><input type="file" ref={bindFiles({ value: null })} /></>;
 			}
 			render(App);
 		}).toThrow('bindFiles() argument is not a tracked object');
@@ -3767,9 +3824,11 @@ describe('error handling', () => {
 
 	it('should throw error when bindValue receives a getter but not a setter', () => {
 		expect(() => {
-			component App() {
-				const value = track('');
-				<input type="text" {ref bindValue(() => value.value)} />
+			function App() {
+				return <>
+					const value = track('');
+					<input type="text" ref={bindValue(() => value.value)} />
+				</>;
 			}
 			render(App);
 		}).toThrow(
@@ -3779,10 +3838,12 @@ describe('error handling', () => {
 
 	it('should throw error when bindValue receives a getter and setter not a function', () => {
 		expect(() => {
-			component App() {
-				const value = track('');
-				// @ts-expect-error invalid argument
-				<input type="text" {ref bindValue(() => value.value, 5)} />
+			function App() {
+				return <>
+					const value = track('');
+					// @ts-expect-error invalid argument
+					<input type="text" ref={bindValue(() => value.value, 5)} />
+				</>;
 			}
 			render(App);
 		}).toThrow(
@@ -3794,13 +3855,14 @@ describe('error handling', () => {
 		'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>
+				function App() {
+					return <>
+						const value = track('2');
+						<select multiple ref={bindValue(value)}>
+							<option value="1">{'One'}</option>
+							<option value="2">{'Two'}</option>
+						</select>
+					</>;
 				}
 
 				render(App);
@@ -3815,13 +3877,14 @@ describe('error handling', () => {
 		'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.value, (v) => (value.value = v))}>
-						<option value="1">{'One'}</option>
-						<option value="2">{'Two'}</option>
-					</select>
+				function App() {
+					return <>
+						const value = track('2');
+						<select multiple ref={bindValue(() => value.value, (v) => (value.value = v))}>
+							<option value="1">{'One'}</option>
+							<option value="2">{'Two'}</option>
+						</select>
+					</>;
 				}
 
 				render(App);
@@ -3836,8 +3899,8 @@ describe('error handling', () => {
 		'should throw error when bindChecked receives non-tracked object with a getter but not a setter',
 		() => {
 			expect(() => {
-				component App() {
-					<input type="checkbox" {ref bindChecked(() => false)} />
+				function App() {
+					return <><input type="checkbox" ref={bindChecked(() => false)} /></>;
 				}
 				render(App);
 			}).toThrow(
@@ -3850,9 +3913,8 @@ describe('error handling', () => {
 		'should throw error when bindChecked receives non-tracked object with a getter and setter not a function',
 		() => {
 			expect(() => {
-				component App() {
-					// @ts-expect-error invalid argument
-					<input type="checkbox" {ref bindChecked(() => false, true)} />
+				function App() {
+					return <><input type="checkbox" ref={bindChecked(() => false, true)} /></>;
 				}
 				render(App);
 			}).toThrow(
@@ -3865,9 +3927,8 @@ describe('error handling', () => {
 		'should throw error when bindIndeterminate receives non-tracked object with a getter and setter not a function',
 		() => {
 			expect(() => {
-				component App() {
-					// @ts-expect-error invalid argument
-					<input type="checkbox" {ref bindIndeterminate(() => false, true)} />
+				function App() {
+					return <><input type="checkbox" ref={bindIndeterminate(() => false, true)} /></>;
 				}
 				render(App);
 			}).toThrow(
@@ -3880,9 +3941,8 @@ describe('error handling', () => {
 		'should throw error when bindGroup receives non-tracked object with a getter and setter not a function',
 		() => {
 			expect(() => {
-				component App() {
-					// @ts-expect-error invalid argument
-					<input type="checkbox" value="a" {ref bindGroup(() => [], true)} />
+				function App() {
+					return <><input type="checkbox" value="a" ref={bindGroup(() => [], true)} /></>;
 				}
 				render(App);
 			}).toThrow(
@@ -3895,9 +3955,8 @@ describe('error handling', () => {
 		'should throw error when bindClientWidth receives non-tracked object with a getter and setter not a function',
 		() => {
 			expect(() => {
-				component App() {
-					// @ts-expect-error invalid argument
-					<div {ref bindClientWidth(() => 0, true)} />
+				function App() {
+					return <><div ref={bindClientWidth(() => 0, true)} /></>;
 				}
 				render(App);
 			}).toThrow(
@@ -3910,9 +3969,8 @@ describe('error handling', () => {
 		'should throw error when bindClientHeight receives non-tracked object with a getter and setter not a function',
 		() => {
 			expect(() => {
-				component App() {
-					// @ts-expect-error invalid argument
-					<div {ref bindClientHeight(() => 0, true)} />
+				function App() {
+					return <><div ref={bindClientHeight(() => 0, true)} /></>;
 				}
 				render(App);
 			}).toThrow(
@@ -3925,9 +3983,8 @@ describe('error handling', () => {
 		'should throw error when bindOffsetWidth receives non-tracked object with a getter and setter not a function',
 		() => {
 			expect(() => {
-				component App() {
-					// @ts-expect-error invalid argument
-					<div {ref bindOffsetWidth(() => 0, true)} />
+				function App() {
+					return <><div ref={bindOffsetWidth(() => 0, true)} /></>;
 				}
 				render(App);
 			}).toThrow(
@@ -3940,9 +3997,8 @@ describe('error handling', () => {
 		'should throw error when bindOffsetHeight receives non-tracked object with a getter and setter not a function',
 		() => {
 			expect(() => {
-				component App() {
-					// @ts-expect-error invalid argument
-					<div {ref bindOffsetHeight(() => 0, true)} />
+				function App() {
+					return <><div ref={bindOffsetHeight(() => 0, true)} /></>;
 				}
 				render(App);
 			}).toThrow(
@@ -3955,9 +4011,8 @@ describe('error handling', () => {
 		'should throw error when bindContentRect receives non-tracked object with a getter and setter not a function',
 		() => {
 			expect(() => {
-				component App() {
-					// @ts-expect-error invalid argument
-					<div {ref bindContentRect(() => null, true)} />
+				function App() {
+					return <><div ref={bindContentRect(() => null, true)} /></>;
 				}
 				render(App);
 			}).toThrow(
@@ -3970,9 +4025,8 @@ describe('error handling', () => {
 		'should throw error when bindContentBoxSize receives non-tracked object with a getter and setter not a function',
 		() => {
 			expect(() => {
-				component App() {
-					// @ts-expect-error invalid argument
-					<div {ref bindContentBoxSize(() => null, true)} />
+				function App() {
+					return <><div ref={bindContentBoxSize(() => null, true)} /></>;
 				}
 				render(App);
 			}).toThrow(
@@ -3985,9 +4039,8 @@ describe('error handling', () => {
 		'should throw error when bindBorderBoxSize receives non-tracked object with a getter and setter not a function',
 		() => {
 			expect(() => {
-				component App() {
-					// @ts-expect-error invalid argument
-					<div {ref bindBorderBoxSize(() => null, true)} />
+				function App() {
+					return <><div ref={bindBorderBoxSize(() => null, true)} /></>;
 				}
 				render(App);
 			}).toThrow(
@@ -4000,9 +4053,8 @@ describe('error handling', () => {
 		'should throw error when bindDevicePixelContentBoxSize receives non-tracked object with a getter and setter not a function',
 		() => {
 			expect(() => {
-				component App() {
-					// @ts-expect-error invalid argument
-					<div {ref bindDevicePixelContentBoxSize(() => null, true)} />
+				function App() {
+					return <><div ref={bindDevicePixelContentBoxSize(() => null, true)} /></>;
 				}
 				render(App);
 			}).toThrow(
@@ -4015,9 +4067,8 @@ describe('error handling', () => {
 		'should throw error when bindInnerHTML receives non-tracked object with a getter and setter not a function',
 		() => {
 			expect(() => {
-				component App() {
-					// @ts-expect-error invalid argument
-					<div {ref bindInnerHTML(() => '', true)} />
+				function App() {
+					return <><div ref={bindInnerHTML(() => '', true)} /></>;
 				}
 				render(App);
 			}).toThrow(
@@ -4030,9 +4081,8 @@ describe('error handling', () => {
 		'should throw error when bindInnerText receives non-tracked object with a getter and setter not a function',
 		() => {
 			expect(() => {
-				component App() {
-					// @ts-expect-error invalid argument
-					<div {ref bindInnerText(() => '', true)} />
+				function App() {
+					return <><div ref={bindInnerText(() => '', true)} /></>;
 				}
 				render(App);
 			}).toThrow(
@@ -4045,9 +4095,8 @@ describe('error handling', () => {
 		'should throw error when bindTextContent receives non-tracked object with a getter and setter not a function',
 		() => {
 			expect(() => {
-				component App() {
-					// @ts-expect-error invalid argument
-					<div {ref bindTextContent(() => '', true)} />
+				function App() {
+					return <><div ref={bindTextContent(() => '', true)} /></>;
 				}
 				render(App);
 			}).toThrow(
@@ -4060,9 +4109,8 @@ describe('error handling', () => {
 		'should throw error when bindNode receives non-tracked object with a getter and setter not a function',
 		() => {
 			expect(() => {
-				component App() {
-					// @ts-expect-error invalid argument
-					<div {ref bindNode(() => null, true)} />
+				function App() {
+					return <><div ref={bindNode(() => null, true)} /></>;
 				}
 				render(App);
 			}).toThrow(
@@ -4075,9 +4123,8 @@ describe('error handling', () => {
 		'should throw error when bindFiles receives non-tracked object with a getter and setter not a function',
 		() => {
 			expect(() => {
-				component App() {
-					// @ts-expect-error invalid argument
-					<input type="file" {ref bindFiles(() => null, true)} />
+				function App() {
+					return <><input type="file" ref={bindFiles(() => null, true)} /></>;
 				}
 				render(App);
 			}).toThrow(