ripple 0.3.71 → 0.3.74

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

@@ -105,14 +105,12 @@ describe('use value()', () => {
 	it('should update value on input', () => {
 		const logs: string[] = [];
 
-		function App() {
-			return <>
-				const text = track('');
-				effect(() => {
-					logs.push('text changed', text.value);
-				});
-				<input type="text" ref={bindValue(text)} />
-			</>;
+		function App() @{
+			const text = track('');
+			effect(() => {
+				logs.push('text changed', text.value);
+			});
+			<input type="text" ref={bindValue(text)} />
 		}
 		render(App);
 		flushSync();
@@ -128,14 +126,12 @@ describe('use value()', () => {
 	it('should update value on input with getter and setter', () => {
 		const logs: string[] = [];
 
-		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))} />
-			</>;
+		function App() @{
+			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 +147,12 @@ describe('use value()', () => {
 	it('should update value on input with a predefined value', () => {
 		const logs: string[] = [];
 
-		function App() {
-			return <>
-				const text = track('foo');
-				effect(() => {
-					logs.push('text changed', text.value);
-				});
-				<input type="text" ref={bindValue(text)} />
-			</>;
+		function App() @{
+			const text = track('foo');
+			effect(() => {
+				logs.push('text changed', text.value);
+			});
+			<input type="text" ref={bindValue(text)} />
 		}
 		render(App);
 		flushSync();
@@ -175,14 +169,12 @@ describe('use value()', () => {
 	it('should update value on input with a predefined value and with a getter and setter', () => {
 		const logs: string[] = [];
 
-		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))} />
-			</>;
+		function 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))} />
 		}
 		render(App);
 		flushSync();
@@ -197,14 +189,12 @@ describe('use value()', () => {
 	});
 
 	it('should update text input element when tracked value changes', () => {
-		function App() {
-			return <>
-				const text = track('initial');
-				<div>
-					<input type="text" ref={bindValue(text)} />
-					<button onClick={() => (text.value = 'updated')}>{'Update'}</button>
-				</div>
-			</>;
+		function App() @{
+			const text = track('initial');
+			<div>
+				<input type="text" ref={bindValue(text)} />
+				<button onClick={() => (text.value = 'updated')}>{'Update'}</button>
+			</div>
 		}
 		render(App);
 		flushSync();
@@ -221,14 +211,12 @@ describe('use value()', () => {
 	});
 
 	it('should update text input element when tracked value changes with a getter and setter', () => {
-		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>
-			</>;
+		function 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>
 		}
 		render(App);
 		flushSync();
@@ -247,14 +235,12 @@ describe('use value()', () => {
 	it('should update checked on input', () => {
 		const logs: (string | boolean)[] = [];
 
-		function App() {
-			return <>
-				const value = track(false);
-				effect(() => {
-					logs.push('checked changed', value.value);
-				});
-				<input type="checkbox" ref={bindChecked(value)} />
-			</>;
+		function App() @{
+			const value = track(false);
+			effect(() => {
+				logs.push('checked changed', value.value);
+			});
+			<input type="checkbox" ref={bindChecked(value)} />
 		}
 		render(App);
 		flushSync();
@@ -271,17 +257,12 @@ describe('use value()', () => {
 	it('should update checked on input with a getter and setter', () => {
 		const logs: (string | boolean)[] = [];
 
-		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))}
-				/>
-			</>;
+		function 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))} />
 		}
 		render(App);
 		flushSync();
@@ -296,14 +277,12 @@ describe('use value()', () => {
 	});
 
 	it('should update checkbox element when tracked value changes', () => {
-		function App() {
-			return <>
-				const value = track(false);
-				<div>
-					<input type="checkbox" ref={bindChecked(value)} />
-					<button onClick={() => (value.value = true)}>{'Check'}</button>
-				</div>
-			</>;
+		function App() @{
+			const value = track(false);
+			<div>
+				<input type="checkbox" ref={bindChecked(value)} />
+				<button onClick={() => (value.value = true)}>{'Check'}</button>
+			</div>
 		}
 		render(App);
 		flushSync();
@@ -320,17 +299,15 @@ describe('use value()', () => {
 	});
 
 	it('should update checkbox element when tracked value changes with a getter and setter', () => {
-		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>
-			</>;
+		function 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>
 		}
 		render(App);
 		flushSync();
@@ -349,14 +326,12 @@ describe('use value()', () => {
 	it('should update indeterminate on input', () => {
 		const logs: (string | boolean)[] = [];
 
-		function App() {
-			return <>
-				const value = track(false);
-				effect(() => {
-					logs.push('indeterminate changed', value.value);
-				});
-				<input type="checkbox" ref={bindIndeterminate(value)} />
-			</>;
+		function App() @{
+			const value = track(false);
+			effect(() => {
+				logs.push('indeterminate changed', value.value);
+			});
+			<input type="checkbox" ref={bindIndeterminate(value)} />
 		}
 		render(App);
 		flushSync();
@@ -375,17 +350,15 @@ describe('use value()', () => {
 	it('should update indeterminate on input with a getter and setter', () => {
 		const logs: (string | boolean)[] = [];
 
-		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))}
-				/>
-			</>;
+		function 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))}
+			/>
 		}
 		render(App);
 		flushSync();
@@ -402,14 +375,12 @@ describe('use value()', () => {
 	});
 
 	it('should update checkbox indeterminate element when tracked value changes', () => {
-		function App() {
-			return <>
-				const value = track(false);
-				<div>
-					<input type="checkbox" ref={bindIndeterminate(value)} />
-					<button onClick={() => (value.value = true)}>{'Set Indeterminate'}</button>
-				</div>
-			</>;
+		function App() @{
+			const value = track(false);
+			<div>
+				<input type="checkbox" ref={bindIndeterminate(value)} />
+				<button onClick={() => (value.value = true)}>{'Set Indeterminate'}</button>
+			</div>
 		}
 		render(App);
 		flushSync();
@@ -428,17 +399,15 @@ describe('use value()', () => {
 	it(
 		'should update checkbox indeterminate element when tracked value changes with a getter and setter',
 		() => {
-			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>
-				</>;
+			function 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>
 			}
 			render(App);
 			flushSync();
@@ -458,18 +427,16 @@ describe('use value()', () => {
 	it('should update select value on change', () => {
 		const logs: string[] = [];
 
-		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>
-			</>;
+		function 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>
 		}
 
 		render(App);
@@ -487,18 +454,16 @@ describe('use value()', () => {
 	it('should update select value on change with a getter and setter', () => {
 		const logs: string[] = [];
 
-		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>
-			</>;
+		function 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>
 		}
 
 		render(App);
@@ -514,18 +479,16 @@ describe('use value()', () => {
 	});
 
 	it('should update select element when tracked value changes', () => {
-		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>
-			</>;
+		function 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>
 		}
 
 		render(App);
@@ -543,18 +506,16 @@ describe('use value()', () => {
 	});
 
 	it('should update select element when tracked value changes with a getter and setter', () => {
-		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>
-			</>;
+		function 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>
 		}
 
 		render(App);
@@ -574,18 +535,16 @@ describe('use value()', () => {
 	it('should bind checkbox group', () => {
 		const logs: string[] = [];
 
-		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>
-			</>;
+		function 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>
 		}
 
 		render(App);
@@ -622,30 +581,28 @@ describe('use value()', () => {
 	it('should bind checkbox group with a getter and setter', () => {
 		const logs: string[] = [];
 
-		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>
-			</>;
+		function 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>
 		}
 
 		render(App);
@@ -682,18 +639,16 @@ describe('use value()', () => {
 	it('should bind radio group', () => {
 		const logs: string[] = [];
 
-		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>
-			</>;
+		function 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>
 		}
 
 		render(App);
@@ -729,33 +684,31 @@ describe('use value()', () => {
 	it('should bind radio group with a getter and setter', () => {
 		const logs: string[] = [];
 
-		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>
-			</>;
+		function 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>
 		}
 
 		render(App);
@@ -789,16 +742,14 @@ describe('use value()', () => {
 	});
 
 	it('should update checkbox group from tracked value change', () => {
-		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>
-			</>;
+		function 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>
 		}
 
 		render(App);
@@ -820,28 +771,26 @@ describe('use value()', () => {
 	});
 
 	it('should update checkbox group from tracked value change with a getter and setter', () => {
-		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>
-			</>;
+		function 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>
 		}
 
 		render(App);
@@ -863,16 +812,14 @@ describe('use value()', () => {
 	});
 
 	it('should update radio group from tracked value change', () => {
-		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>
-			</>;
+		function 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>
 		}
 
 		render(App);
@@ -894,31 +841,29 @@ describe('use value()', () => {
 	});
 
 	it('should update radio group from tracked value change with a getter and setter', () => {
-		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>
-			</>;
+		function 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>
 		}
 
 		render(App);
@@ -940,14 +885,12 @@ describe('use value()', () => {
 	});
 
 	it('should handle checkbox group with initial empty array', () => {
-		function App() {
-			return <>
-				const selected = track([]);
-				<div>
-					<input type="checkbox" value="a" ref={bindGroup(selected)} />
-					<input type="checkbox" value="b" ref={bindGroup(selected)} />
-				</div>
-			</>;
+		function App() @{
+			const selected = track([]);
+			<div>
+				<input type="checkbox" value="a" ref={bindGroup(selected)} />
+				<input type="checkbox" value="b" ref={bindGroup(selected)} />
+			</div>
 		}
 
 		render(App);
@@ -967,22 +910,20 @@ describe('use value()', () => {
 	});
 
 	it('should handle checkbox group with initial empty array with a getter and setter', () => {
-		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>
-			</>;
+		function 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>
 		}
 
 		render(App);
@@ -1002,11 +943,9 @@ describe('use value()', () => {
 	});
 
 	it('should handle number input type', () => {
-		function App() {
-			return <>
-				const value = track(42);
-				<input type="number" ref={bindValue(value)} />
-			</>;
+		function App() @{
+			const value = track(42);
+			<input type="number" ref={bindValue(value)} />
 		}
 
 		render(App);
@@ -1023,11 +962,9 @@ describe('use value()', () => {
 	});
 
 	it('should handle number input type with a getter and setter', () => {
-		function App() {
-			return <>
-				const obj = new RippleObject({ value: 42 });
-				<input type="number" ref={bindValue(() => obj.value, (v) => (obj.value = v))} />
-			</>;
+		function App() @{
+			const obj = new RippleObject({ value: 42 });
+			<input type="number" ref={bindValue(() => obj.value, (v) => (obj.value = v))} />
 		}
 
 		render(App);
@@ -1044,14 +981,12 @@ describe('use value()', () => {
 	});
 
 	it('should update number input element when tracked value changes', () => {
-		function App() {
-			return <>
-				const value = track(10);
-				<div>
-					<input type="number" ref={bindValue(value)} />
-					<button onClick={() => (value.value = 99)}>{'Update'}</button>
-				</div>
-			</>;
+		function App() @{
+			const value = track(10);
+			<div>
+				<input type="number" ref={bindValue(value)} />
+				<button onClick={() => (value.value = 99)}>{'Update'}</button>
+			</div>
 		}
 
 		render(App);
@@ -1071,14 +1006,12 @@ describe('use value()', () => {
 	it(
 		'should update number input element when tracked value changes with a getter and setter',
 		() => {
-			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>
-				</>;
+			function 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>
 			}
 
 			render(App);
@@ -1097,11 +1030,9 @@ describe('use value()', () => {
 	);
 
 	it('should handle range input type', () => {
-		function App() {
-			return <>
-				const value = track(50);
-				<input type="range" min="0" max="100" ref={bindValue(value)} />
-			</>;
+		function App() @{
+			const value = track(50);
+			<input type="range" min="0" max="100" ref={bindValue(value)} />
 		}
 
 		render(App);
@@ -1118,16 +1049,14 @@ describe('use value()', () => {
 	});
 
 	it('should handle range input type with a getter and setter', () => {
-		function App() {
-			return <>
-				const obj = new RippleObject({ value: 50 });
-				<input
-					type="range"
-					min="0"
-					max="100"
-					ref={bindValue(() => obj.value, (v) => (obj.value = v))}
-				/>
-			</>;
+		function App() @{
+			const obj = new RippleObject({ value: 50 });
+			<input
+				type="range"
+				min="0"
+				max="100"
+				ref={bindValue(() => obj.value, (v) => (obj.value = v))}
+			/>
 		}
 
 		render(App);
@@ -1144,14 +1073,12 @@ describe('use value()', () => {
 	});
 
 	it('should update range input element when tracked value changes', () => {
-		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>
-			</>;
+		function App() @{
+			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);
@@ -1171,19 +1098,17 @@ describe('use value()', () => {
 	it(
 		'should update range input element when tracked value changes with a getter and setter',
 		() => {
-			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>
-				</>;
+			function 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>
 			}
 
 			render(App);
@@ -1202,11 +1127,9 @@ describe('use value()', () => {
 	);
 
 	it('should handle empty number input as null', () => {
-		function App() {
-			return <>
-				const value = track(null);
-				<input type="number" ref={bindValue(value)} />
-			</>;
+		function App() @{
+			const value = track(null);
+			<input type="number" ref={bindValue(value)} />
 		}
 
 		render(App);
@@ -1223,11 +1146,9 @@ describe('use value()', () => {
 	});
 
 	it('should handle empty number input as null with a getter and setter', () => {
-		function App() {
-			return <>
-				const obj = new RippleObject({ value: null });
-				<input type="number" ref={bindValue(() => obj.value, (v) => (obj.value = v))} />
-			</>;
+		function App() @{
+			const obj = new RippleObject({ value: null });
+			<input type="number" ref={bindValue(() => obj.value, (v) => (obj.value = v))} />
 		}
 
 		render(App);
@@ -1244,11 +1165,9 @@ describe('use value()', () => {
 	});
 
 	it('should handle date input type', () => {
-		function App() {
-			return <>
-				const value = track('2025-11-14');
-				<input type="date" ref={bindValue(value)} />
-			</>;
+		function App() @{
+			const value = track('2025-11-14');
+			<input type="date" ref={bindValue(value)} />
 		}
 
 		render(App);
@@ -1265,11 +1184,9 @@ describe('use value()', () => {
 	});
 
 	it('should handle date input type with a getter and setter', () => {
-		function App() {
-			return <>
-				const obj = new RippleObject({ value: '2025-11-14' });
-				<input type="date" ref={bindValue(() => obj.value, (v) => (obj.value = v))} />
-			</>;
+		function App() @{
+			const obj = new RippleObject({ value: '2025-11-14' });
+			<input type="date" ref={bindValue(() => obj.value, (v) => (obj.value = v))} />
 		}
 
 		render(App);
@@ -1286,14 +1203,12 @@ describe('use value()', () => {
 	});
 
 	it('should update date input element when tracked value changes', () => {
-		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>
-			</>;
+		function App() @{
+			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);
@@ -1311,14 +1226,12 @@ describe('use value()', () => {
 	});
 
 	it('should update date input element when tracked value changes with a getter and setter', () => {
-		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>
-			</>;
+		function 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>
 		}
 
 		render(App);
@@ -1336,16 +1249,14 @@ describe('use value()', () => {
 	});
 
 	it('should handle select with multiple attribute', () => {
-		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>
-			</>;
+		function 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>
 		}
 
 		render(App);
@@ -1371,16 +1282,14 @@ describe('use value()', () => {
 	});
 
 	it('should handle select with multiple attribute with a getter and setter', () => {
-		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>
-			</>;
+		function 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>
 		}
 
 		render(App);
@@ -1406,19 +1315,17 @@ describe('use value()', () => {
 	});
 
 	it('should update multiple select element when tracked value changes', () => {
-		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>
-			</>;
+		function 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>
 		}
 
 		render(App);
@@ -1445,19 +1352,17 @@ describe('use value()', () => {
 	it(
 		'should update multiple select element when tracked value changes with a getter and setter',
 		() => {
-			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>
-				</>;
+			function 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>
 			}
 
 			render(App);
@@ -1483,14 +1388,12 @@ describe('use value()', () => {
 	);
 
 	it('should handle select without initial value and fall back to first option', () => {
-		function App() {
-			return <>
-				const selected = track();
-				<select ref={bindValue(selected)}>
-					<option value="1">{'One'}</option>
-					<option value="2">{'Two'}</option>
-				</select>
-			</>;
+		function App() @{
+			const selected = track();
+			<select ref={bindValue(selected)}>
+				<option value="1">{'One'}</option>
+				<option value="2">{'Two'}</option>
+			</select>
 		}
 
 		render(App);
@@ -1504,14 +1407,12 @@ describe('use value()', () => {
 	it(
 		'should handle select without initial value and fall back to first option with a getter and setter',
 		() => {
-			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>
-				</>;
+			function App() @{
+				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);
@@ -1524,14 +1425,12 @@ describe('use value()', () => {
 	);
 
 	it('should handle select with disabled options', () => {
-		function App() {
-			return <>
-				const selected = track();
-				<select ref={bindValue(selected)}>
-					<option value="1" disabled>{'One'}</option>
-					<option value="2">{'Two'}</option>
-				</select>
-			</>;
+		function App() @{
+			const selected = track();
+			<select ref={bindValue(selected)}>
+				<option value="1" disabled>{'One'}</option>
+				<option value="2">{'Two'}</option>
+			</select>
 		}
 
 		render(App);
@@ -1543,14 +1442,12 @@ describe('use value()', () => {
 	});
 
 	it('should handle select with disabled options with a getter and setter', () => {
-		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>
-			</>;
+		function 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>
 		}
 
 		render(App);
@@ -1562,15 +1459,13 @@ describe('use value()', () => {
 	});
 
 	it('should preselect numeric option values in select bindValue', () => {
-		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>
-			</>;
+		function App() @{
+			const selected = track(2);
+			<select ref={bindValue(selected)}>
+				<option value={1}>{'One'}</option>
+				<option value={2}>{'Two'}</option>
+				<option value={3}>{'Three'}</option>
+			</select>
 		}
 
 		render(App);
@@ -1585,15 +1480,13 @@ describe('use value()', () => {
 	});
 
 	it('should preselect numeric option values in select bindValue with a getter and setter', () => {
-		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>
-			</>;
+		function 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>
 		}
 
 		render(App);
@@ -1610,18 +1503,16 @@ describe('use value()', () => {
 	it('should preserve numeric select values on change', () => {
 		const logs: number[] = [];
 
-		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>
-			</>;
+		function 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>
 		}
 
 		render(App);
@@ -1637,22 +1528,20 @@ describe('use value()', () => {
 	});
 
 	it('should reselect tracked value when matching option is added later', async () => {
-		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>
-			</>;
+		function App() @{
+			const selected = track(5);
+			const options = RippleArray([
+				{ id: 1, text: 'One' },
+				{ id: 2, text: 'Two' },
+			]);
+			<div>
+				<select ref={bindValue(selected)}>
+					@for (const option of options) {
+						<option value={option.id}>{option.text}</option>
+					}
+				</select>
+				<button onClick={() => options.push({ id: 5, text: 'Five' })}>{'Add'}</button>
+			</div>
 		}
 
 		render(App);
@@ -1673,25 +1562,23 @@ describe('use value()', () => {
 	});
 
 	it('should reselect tracked value when option lists are replaced later', async () => {
-		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>
-			</>;
+		function App() @{
+			const selected = track(22);
+			const options = RippleArray([
+				{ id: 1, text: 'One' },
+			]);
+			effect(() => {
+				const timeout = setTimeout(() => {
+					options.splice(0, options.length, { id: 21, text: 'Tokyo' }, { id: 22, text: 'Osaka' });
+				}, 0);
+
+				return () => clearTimeout(timeout);
+			});
+			<select ref={bindValue(selected)}>
+				@for (const option of options) {
+					<option value={option.id}>{option.text}</option>
+				}
+			</select>
 		}
 
 		render(App);
@@ -1706,23 +1593,27 @@ describe('use value()', () => {
 	});
 
 	it('should accurately reflect values mutated through a tracked setter', () => {
-		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>
-			</>;
+		function 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>
+					</>
+				</>
+			</>
 		}
 
 		render(App);
@@ -1743,23 +1634,23 @@ describe('use value()', () => {
 	});
 
 	it('should accurately reflect values when a getter modifies value', () => {
-		function App() {
-			return <>
-				let value = track(
-					'',
-					(val) => {
-						if (val.includes('c')) {
-							val = val.replace(/c/g, '');
-						}
-						return val;
-					},
-					(next) => {
-						return next;
-					},
-				);
+		function 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>
-			</>;
+			</>
 		}
 
 		render(App);
@@ -1780,23 +1671,23 @@ describe('use value()', () => {
 	});
 
 	it('should always prefer what getter returns even if setter mutates next', () => {
-		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;
-					},
-				);
+		function 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>
-			</>;
+			</>
 		}
 
 		render(App);
@@ -1819,32 +1710,32 @@ describe('use value()', () => {
 	it(
 		'should accurately reflect values mutated through an effect even after a setter mutation',
 		() => {
-			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, '');
-							}
-						});
+			function 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, '');
+						}
 					});
+				});
+				<>
 					<input type="text" ref={bindValue(value)} />
 					<div>{value.value}</div>
-				</>;
+				</>
 			}
 
 			render(App);
@@ -1863,25 +1754,23 @@ describe('use value()', () => {
 			expect(input.value).toBe('b');
 			expect(div.textContent).toBe('b');
 		},
-	);
-
-	it('should accurately reflect values mutated through a tracked setter via bind 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)} />
-			</>;
+	);
+
+	it('should accurately reflect values mutated through a tracked setter via bind accessors', () => {
+		function 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)} />
 		}
 
 		render(App);
@@ -1899,22 +1788,20 @@ describe('use value()', () => {
 	});
 
 	it('should prefer what getter returns via bind 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)} />
-			</>;
+		function 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)} />
 		}
 
 		render(App);
@@ -1934,22 +1821,20 @@ describe('use value()', () => {
 	it(
 		'should always prefer what getter returns even if setter mutates next via bind 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)} />
-				</>;
+			function 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)} />
 			}
 
 			render(App);
@@ -1970,31 +1855,29 @@ describe('use value()', () => {
 	it(
 		'should accurately reflect values mutated through an effect even after a setter mutation via bind 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;
-						},
-					];
-					effect(() => {
-						value.value;
-
-						untrack(() => {
-							if (value.value.includes('a')) {
-								value.value = value.value.replace(/a/g, '');
-							}
-						});
+			function 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, '');
+						}
 					});
-					<input type="text" ref={bindValue(...value_accessors)} />
-				</>;
+				});
+				<input type="text" ref={bindValue(...value_accessors)} />
 			}
 
 			render(App);
@@ -2015,20 +1898,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',
 		() => {
-			function App() {
-				return <>
-					let value = track('');
-					const value_accessors: [GetFunction<string>, SetFunction<string>] = [
-						() => {
-							return value.value;
-						},
-						(v: string) => {
-							// no update
-						},
-					];
+			function 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>
-				</>;
+				</>
 			}
 
 			render(App);
@@ -2051,20 +1934,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',
 		() => {
-			function App() {
-				return <>
-					let value = track(
-						'',
-						(v) => {
-							return v;
-						},
-						() => {
-							return '';
-						},
-					);
+			function App() @{
+				let value = track(
+					'',
+					(v) => {
+						return v;
+					},
+					() => {
+						return '';
+					},
+				);
+				<>
 					<input type="text" ref={bindValue(value)} />
 					<div>{value.value}</div>
-				</>;
+				</>
 			}
 
 			render(App);
@@ -2089,14 +1972,12 @@ describe('bindClientWidth and bindClientHeight', () => {
 	it('should bind element clientWidth', () => {
 		const logs: number[] = [];
 
-		function App() {
-			return <>
-				const width = track(0);
-				effect(() => {
-					logs.push(width.value);
-				});
-				<div ref={bindClientWidth(width)} />
-			</>;
+		function App() @{
+			const width = track(0);
+			effect(() => {
+				logs.push(width.value);
+			});
+			<div ref={bindClientWidth(width)} />
 		}
 
 		render(App);
@@ -2120,14 +2001,12 @@ describe('bindClientWidth and bindClientHeight', () => {
 	it('should bind element clientWidth with a getter and setter', () => {
 		const logs: number[] = [];
 
-		function App() {
-			return <>
-				const width = new RippleObject({ value: 0 });
-				effect(() => {
-					logs.push(width.value);
-				});
-				<div ref={bindClientWidth(() => width.value, (v: number) => (width.value = v))} />
-			</>;
+		function App() @{
+			const width = new RippleObject({ value: 0 });
+			effect(() => {
+				logs.push(width.value);
+			});
+			<div ref={bindClientWidth(() => width.value, (v: number) => (width.value = v))} />
 		}
 
 		render(App);
@@ -2151,14 +2030,12 @@ describe('bindClientWidth and bindClientHeight', () => {
 	it('should bind element clientHeight', () => {
 		const logs: number[] = [];
 
-		function App() {
-			return <>
-				const height = track(0);
-				effect(() => {
-					logs.push(height.value);
-				});
-				<div ref={bindClientHeight(height)} />
-			</>;
+		function App() @{
+			const height = track(0);
+			effect(() => {
+				logs.push(height.value);
+			});
+			<div ref={bindClientHeight(height)} />
 		}
 
 		render(App);
@@ -2182,14 +2059,12 @@ describe('bindClientWidth and bindClientHeight', () => {
 	it('should bind element clientHeight with a getter and setter', () => {
 		const logs: number[] = [];
 
-		function App() {
-			return <>
-				const height = new RippleObject({ value: 0 });
-				effect(() => {
-					logs.push(height.value);
-				});
-				<div ref={bindClientHeight(() => height.value, (v: number) => (height.value = v))} />
-			</>;
+		function App() @{
+			const height = new RippleObject({ value: 0 });
+			effect(() => {
+				logs.push(height.value);
+			});
+			<div ref={bindClientHeight(() => height.value, (v: number) => (height.value = v))} />
 		}
 
 		render(App);
@@ -2215,14 +2090,12 @@ describe('bindOffsetWidth and bindOffsetHeight', () => {
 	it('should bind element offsetWidth', () => {
 		const logs: number[] = [];
 
-		function App() {
-			return <>
-				const width = track(0);
-				effect(() => {
-					logs.push(width.value);
-				});
-				<div ref={bindOffsetWidth(width)} />
-			</>;
+		function App() @{
+			const width = track(0);
+			effect(() => {
+				logs.push(width.value);
+			});
+			<div ref={bindOffsetWidth(width)} />
 		}
 
 		render(App);
@@ -2246,14 +2119,12 @@ describe('bindOffsetWidth and bindOffsetHeight', () => {
 	it('should bind element offsetWidth with a getter and setter', () => {
 		const logs: number[] = [];
 
-		function App() {
-			return <>
-				const width = new RippleObject({ value: 0 });
-				effect(() => {
-					logs.push(width.value);
-				});
-				<div ref={bindOffsetWidth(() => width.value, (v: number) => (width.value = v))} />
-			</>;
+		function App() @{
+			const width = new RippleObject({ value: 0 });
+			effect(() => {
+				logs.push(width.value);
+			});
+			<div ref={bindOffsetWidth(() => width.value, (v: number) => (width.value = v))} />
 		}
 
 		render(App);
@@ -2277,14 +2148,12 @@ describe('bindOffsetWidth and bindOffsetHeight', () => {
 	it('should bind element offsetHeight', () => {
 		const logs: number[] = [];
 
-		function App() {
-			return <>
-				const height = track(0);
-				effect(() => {
-					logs.push(height.value);
-				});
-				<div ref={bindOffsetHeight(height)} />
-			</>;
+		function App() @{
+			const height = track(0);
+			effect(() => {
+				logs.push(height.value);
+			});
+			<div ref={bindOffsetHeight(height)} />
 		}
 
 		render(App);
@@ -2308,14 +2177,12 @@ describe('bindOffsetWidth and bindOffsetHeight', () => {
 	it('should bind element offsetHeight with a getter and setter', () => {
 		const logs: number[] = [];
 
-		function App() {
-			return <>
-				const height = new RippleObject({ value: 0 });
-				effect(() => {
-					logs.push(height.value);
-				});
-				<div ref={bindOffsetHeight(() => height.value, (v: number) => (height.value = v))} />
-			</>;
+		function App() @{
+			const height = new RippleObject({ value: 0 });
+			effect(() => {
+				logs.push(height.value);
+			});
+			<div ref={bindOffsetHeight(() => height.value, (v: number) => (height.value = v))} />
 		}
 
 		render(App);
@@ -2341,14 +2208,12 @@ describe('bindContentRect', () => {
 	it('should bind element contentRect', () => {
 		const logs: DOMRectReadOnly[] = [];
 
-		function App() {
-			return <>
-				const rect = track(null);
-				effect(() => {
-					if (rect.value) logs.push(rect.value);
-				});
-				<div ref={bindContentRect(rect)} />
-			</>;
+		function App() @{
+			const rect = track(null);
+			effect(() => {
+				if (rect.value) logs.push(rect.value);
+			});
+			<div ref={bindContentRect(rect)} />
 		}
 
 		render(App);
@@ -2371,21 +2236,19 @@ describe('bindContentRect', () => {
 	it('should bind element contentRect with a getter and setter', () => {
 		const logs: DOMRectReadOnly[] = [];
 
-		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),
-					)}
-				/>
-			</>;
+		function 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),
+				)}
+			/>
 		}
 
 		render(App);
@@ -2410,14 +2273,12 @@ describe('bindContentBoxSize', () => {
 	it('should bind element contentBoxSize', () => {
 		const logs: any[] = [];
 
-		function App() {
-			return <>
-				const boxSize = track(null);
-				effect(() => {
-					if (boxSize.value) logs.push(boxSize.value);
-				});
-				<div ref={bindContentBoxSize(boxSize)} />
-			</>;
+		function App() @{
+			const boxSize = track(null);
+			effect(() => {
+				if (boxSize.value) logs.push(boxSize.value);
+			});
+			<div ref={bindContentBoxSize(boxSize)} />
 		}
 
 		render(App);
@@ -2443,21 +2304,19 @@ describe('bindContentBoxSize', () => {
 			{ blockSize: 200, inlineSize: 300 },
 		];
 
-		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),
-					)}
-				/>
-			</>;
+		function 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),
+				)}
+			/>
 		}
 
 		render(App);
@@ -2479,14 +2338,12 @@ describe('bindBorderBoxSize', () => {
 	it('should bind element borderBoxSize', () => {
 		const logs: any[] = [];
 
-		function App() {
-			return <>
-				const boxSize = track(null);
-				effect(() => {
-					if (boxSize.value) logs.push(boxSize.value);
-				});
-				<div ref={bindBorderBoxSize(boxSize)} />
-			</>;
+		function App() @{
+			const boxSize = track(null);
+			effect(() => {
+				if (boxSize.value) logs.push(boxSize.value);
+			});
+			<div ref={bindBorderBoxSize(boxSize)} />
 		}
 
 		render(App);
@@ -2512,21 +2369,19 @@ describe('bindBorderBoxSize', () => {
 			{ blockSize: 220, inlineSize: 320 },
 		];
 
-		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),
-					)}
-				/>
-			</>;
+		function 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),
+				)}
+			/>
 		}
 
 		render(App);
@@ -2548,14 +2403,12 @@ describe('bindDevicePixelContentBoxSize', () => {
 	it('should bind element devicePixelContentBoxSize', () => {
 		const logs: any[] = [];
 
-		function App() {
-			return <>
-				const boxSize = track(null);
-				effect(() => {
-					if (boxSize.value) logs.push(boxSize.value);
-				});
-				<div ref={bindDevicePixelContentBoxSize(boxSize)} />
-			</>;
+		function App() @{
+			const boxSize = track(null);
+			effect(() => {
+				if (boxSize.value) logs.push(boxSize.value);
+			});
+			<div ref={bindDevicePixelContentBoxSize(boxSize)} />
 		}
 
 		render(App);
@@ -2581,21 +2434,19 @@ describe('bindDevicePixelContentBoxSize', () => {
 			{ blockSize: 400, inlineSize: 600 },
 		];
 
-		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),
-					)}
-				/>
-			</>;
+		function 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),
+				)}
+			/>
 		}
 
 		render(App);
@@ -2617,14 +2468,12 @@ describe('bindInnerHTML', () => {
 	it('should bind element innerHTML', () => {
 		const logs: string[] = [];
 
-		function App() {
-			return <>
-				const html = track('<strong>Hello</strong>');
-				effect(() => {
-					logs.push(html.value);
-				});
-				<div contenteditable="true" ref={bindInnerHTML(html)} />
-			</>;
+		function App() @{
+			const html = track('<strong>Hello</strong>');
+			effect(() => {
+				logs.push(html.value);
+			});
+			<div contenteditable="true" ref={bindInnerHTML(html)} />
 		}
 
 		render(App);
@@ -2643,17 +2492,15 @@ describe('bindInnerHTML', () => {
 	it('should bind element innerHTML', () => {
 		const logs: string[] = [];
 
-		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))}
-				/>
-			</>;
+		function 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))}
+			/>
 		}
 
 		render(App);
@@ -2670,14 +2517,12 @@ describe('bindInnerHTML', () => {
 	});
 
 	it('should update innerHTML when tracked value changes', () => {
-		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>
-			</>;
+		function App() @{
+			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);
@@ -2695,17 +2540,15 @@ describe('bindInnerHTML', () => {
 	});
 
 	it('should update innerHTML when tracked value changes with a getter and setter', () => {
-		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>
-			</>;
+		function 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>
 		}
 
 		render(App);
@@ -2723,11 +2566,9 @@ describe('bindInnerHTML', () => {
 	});
 
 	it('should handle null innerHTML value', () => {
-		function App() {
-			return <>
-				const html = track(null);
-				<div contenteditable="true" ref={bindInnerHTML(html)} />
-			</>;
+		function App() @{
+			const html = track(null);
+			<div contenteditable="true" ref={bindInnerHTML(html)} />
 		}
 
 		render(App);
@@ -2739,14 +2580,12 @@ describe('bindInnerHTML', () => {
 	});
 
 	it('should handle null innerHTML value with a getter and setter', () => {
-		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))}
-				/>
-			</>;
+		function App() @{
+			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);
@@ -2762,14 +2601,12 @@ describe('bindInnerText', () => {
 	it('should bind element innerText', () => {
 		const logs: string[] = [];
 
-		function App() {
-			return <>
-				const text = track('Hello World');
-				effect(() => {
-					logs.push(text.value);
-				});
-				<div contenteditable="true" ref={bindInnerText(text)} />
-			</>;
+		function App() @{
+			const text = track('Hello World');
+			effect(() => {
+				logs.push(text.value);
+			});
+			<div contenteditable="true" ref={bindInnerText(text)} />
 		}
 
 		render(App);
@@ -2788,17 +2625,15 @@ describe('bindInnerText', () => {
 	it('should bind element innerText with a getter and setter', () => {
 		const logs: string[] = [];
 
-		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))}
-				/>
-			</>;
+		function 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))}
+			/>
 		}
 
 		render(App);
@@ -2815,14 +2650,12 @@ describe('bindInnerText', () => {
 	});
 
 	it('should update innerText when tracked value changes', () => {
-		function App() {
-			return <>
-				const text = track('Before');
-				<div>
-					<div contenteditable="true" ref={bindInnerText(text)} />
-					<button onClick={() => (text.value = 'After')}>{'Update'}</button>
-				</div>
-			</>;
+		function App() @{
+			const text = track('Before');
+			<div>
+				<div contenteditable="true" ref={bindInnerText(text)} />
+				<button onClick={() => (text.value = 'After')}>{'Update'}</button>
+			</div>
 		}
 
 		render(App);
@@ -2840,17 +2673,15 @@ describe('bindInnerText', () => {
 	});
 
 	it('should update innerText when tracked value changes with a getter and setter', () => {
-		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>
-			</>;
+		function 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>
 		}
 
 		render(App);
@@ -2872,14 +2703,12 @@ describe('bindTextContent', () => {
 	it('should bind element textContent', () => {
 		const logs: string[] = [];
 
-		function App() {
-			return <>
-				const text = track('Sample text');
-				effect(() => {
-					logs.push(text.value);
-				});
-				<div contenteditable="true" ref={bindTextContent(text)} />
-			</>;
+		function App() @{
+			const text = track('Sample text');
+			effect(() => {
+				logs.push(text.value);
+			});
+			<div contenteditable="true" ref={bindTextContent(text)} />
 		}
 
 		render(App);
@@ -2898,17 +2727,15 @@ describe('bindTextContent', () => {
 	it('should bind element textContent with a getter and setter', () => {
 		const logs: string[] = [];
 
-		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))}
-				/>
-			</>;
+		function 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))}
+			/>
 		}
 
 		render(App);
@@ -2925,14 +2752,12 @@ describe('bindTextContent', () => {
 	});
 
 	it('should update textContent when tracked value changes', () => {
-		function App() {
-			return <>
-				const text = track('Start');
-				<div>
-					<div contenteditable="true" ref={bindTextContent(text)} />
-					<button onClick={() => (text.value = 'End')}>{'Update'}</button>
-				</div>
-			</>;
+		function App() @{
+			const text = track('Start');
+			<div>
+				<div contenteditable="true" ref={bindTextContent(text)} />
+				<button onClick={() => (text.value = 'End')}>{'Update'}</button>
+			</div>
 		}
 
 		render(App);
@@ -2950,17 +2775,15 @@ describe('bindTextContent', () => {
 	});
 
 	it('should update textContent when tracked value changes with a getter and setter', () => {
-		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>
-			</>;
+		function 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>
 		}
 
 		render(App);
@@ -2978,11 +2801,9 @@ describe('bindTextContent', () => {
 	});
 
 	it('should handle null textContent value', () => {
-		function App() {
-			return <>
-				const text = track(null);
-				<div contenteditable="true" ref={bindTextContent(text)} />
-			</>;
+		function App() @{
+			const text = track(null);
+			<div contenteditable="true" ref={bindTextContent(text)} />
 		}
 
 		render(App);
@@ -2994,17 +2815,15 @@ describe('bindTextContent', () => {
 	});
 
 	it('should handle null textContent value with a getter and setter', () => {
-		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),
-					)}
-				/>
-			</>;
+		function 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),
+				)}
+			/>
 		}
 
 		render(App);
@@ -3020,14 +2839,12 @@ describe('bindNode', () => {
 	it('should update tracked value with element reference', () => {
 		let capturedNode: HTMLElement | null = null;
 
-		function App() {
-			return <>
-				const nodeRef = track(null);
-				effect(() => {
-					capturedNode = nodeRef.value;
-				});
-				<div ref={bindNode(nodeRef)} />
-			</>;
+		function App() @{
+			const nodeRef = track(null);
+			effect(() => {
+				capturedNode = nodeRef.value;
+			});
+			<div ref={bindNode(nodeRef)} />
 		}
 
 		render(App);
@@ -3040,16 +2857,14 @@ describe('bindNode', () => {
 	it('should update tracked value with element reference and with a getter and setter', () => {
 		let capturedNode: HTMLElement | null = null;
 
-		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))} />
-			</>;
+		function 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))} />
 		}
 
 		render(App);
@@ -3060,22 +2875,18 @@ describe('bindNode', () => {
 	});
 
 	it('should allow access to bound element', () => {
-		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>
-			</>;
+		function 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>
 		}
 
 		render(App);
@@ -3093,27 +2904,23 @@ describe('bindNode', () => {
 	});
 
 	it('should allow access to bound element with a getter and setter', () => {
-		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>
-			</>;
+		function 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>
 		}
 
 		render(App);
@@ -3135,15 +2942,13 @@ describe('bindFiles', () => {
 	it('should bind files from file input', () => {
 		const logs: FileList[] = [];
 
-		function App() {
-			return <>
-				const files = track(null);
-				effect(() => {
-					files.value;
-					if (files.value) logs.push(files.value);
-				});
-				<input type="file" multiple ref={bindFiles(files)} />
-			</>;
+		function App() @{
+			const files = track(null);
+			effect(() => {
+				files.value;
+				if (files.value) logs.push(files.value);
+			});
+			<input type="file" multiple ref={bindFiles(files)} />
 		}
 
 		render(App);
@@ -3176,19 +2981,17 @@ describe('bindFiles', () => {
 	it('should bind files from file input with a getter and setter', () => {
 		const logs: FileList[] = [];
 
-		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))}
-				/>
-			</>;
+		function 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))}
+			/>
 		}
 
 		render(App);
@@ -3221,14 +3024,12 @@ describe('bindFiles', () => {
 	it('should update tracked value when files are selected', () => {
 		let capturedFiles: FileList | null = null;
 
-		function App() {
-			return <>
-				const files = track<FileList | null>(null);
-				effect(() => {
-					capturedFiles = files.value;
-				});
-				<input type="file" ref={bindFiles(files)} />
-			</>;
+		function App() @{
+			const files = track<FileList | null>(null);
+			effect(() => {
+				capturedFiles = files.value;
+			});
+			<input type="file" ref={bindFiles(files)} />
 		}
 
 		render(App);
@@ -3256,17 +3057,15 @@ describe('bindFiles', () => {
 	it('should update tracked value when files are selected with a getter and setter', () => {
 		let capturedFiles: FileList | null = null;
 
-		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))}
-				/>
-			</>;
+		function 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))}
+			/>
 		}
 
 		render(App);
@@ -3294,27 +3093,23 @@ describe('bindFiles', () => {
 	it('should allow clearing files via input.files', () => {
 		let capturedFiles: FileList | null = null;
 
-		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>
-			</>;
+		function 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>
 		}
 
 		render(App);
@@ -3347,31 +3142,27 @@ describe('bindFiles', () => {
 	it('should allow clearing files via input.files with a getter and setter', () => {
 		let capturedFiles: FileList | null = null;
 
-		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>
-			</>;
+		function 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>
 		}
 
 		render(App);
@@ -3404,17 +3195,15 @@ describe('bindFiles', () => {
 	it('should handle multiple file selections', () => {
 		const fileCounts: number[] = [];
 
-		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)} />
-			</>;
+		function 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)} />
 		}
 
 		render(App);
@@ -3453,21 +3242,19 @@ describe('bindFiles', () => {
 	it('should handle multiple file selections with a getter and setter', () => {
 		const fileCounts: number[] = [];
 
-		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))}
-				/>
-			</>;
+		function 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))}
+			/>
 		}
 
 		render(App);
@@ -3506,17 +3293,15 @@ describe('bindFiles', () => {
 	it('should handle file input without multiple attribute', () => {
 		let capturedFile: File | null = null;
 
-		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)} />
-			</>;
+		function 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)} />
 		}
 
 		render(App);
@@ -3543,20 +3328,18 @@ describe('bindFiles', () => {
 	it('should handle file input without multiple attribute with a getter and setter', () => {
 		let capturedFile: File | null = null;
 
-		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))}
-				/>
-			</>;
+		function 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))}
+			/>
 		}
 
 		render(App);
@@ -3583,14 +3366,12 @@ describe('bindFiles', () => {
 	it('should handle empty file selection', () => {
 		const logs: (FileList | null)[] = [];
 
-		function App() {
-			return <>
-				const files = track(null);
-				effect(() => {
-					logs.push(files.value);
-				});
-				<input type="file" ref={bindFiles(files)} />
-			</>;
+		function App() @{
+			const files = track(null);
+			effect(() => {
+				logs.push(files.value);
+			});
+			<input type="file" ref={bindFiles(files)} />
 		}
 
 		render(App);
@@ -3625,17 +3406,15 @@ describe('bindFiles', () => {
 	it('should handle empty file selection with a getter and setter', () => {
 		const logs: (FileList | null)[] = [];
 
-		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))}
-				/>
-			</>;
+		function 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))}
+			/>
 		}
 
 		render(App);
@@ -3671,8 +3450,8 @@ describe('bindFiles', () => {
 describe('error handling', () => {
 	it('should throw error when bindValue receives non-tracked object', () => {
 		expect(() => {
-			function App() {
-				return <><input type="text" ref={bindValue({ value: 'not tracked' })} /></>;
+			function App() @{
+				<input type="text" ref={bindValue({ value: 'not tracked' })} />
 			}
 			render(App);
 		}).toThrow('bindValue() argument is not a tracked object');
@@ -3680,8 +3459,8 @@ describe('error handling', () => {
 
 	it('should throw error when bindChecked receives non-tracked object', () => {
 		expect(() => {
-			function App() {
-				return <><input type="checkbox" ref={bindChecked({ value: false })} /></>;
+			function App() @{
+				<input type="checkbox" ref={bindChecked({ value: false })} />
 			}
 			render(App);
 		}).toThrow('bindChecked() argument is not a tracked object');
@@ -3689,8 +3468,8 @@ describe('error handling', () => {
 
 	it('should throw error when bindIndeterminate receives non-tracked object', () => {
 		expect(() => {
-			function App() {
-				return <><input type="checkbox" ref={bindIndeterminate({ value: false })} /></>;
+			function App() @{
+				<input type="checkbox" ref={bindIndeterminate({ value: false })} />
 			}
 			render(App);
 		}).toThrow('bindIndeterminate() argument is not a tracked object');
@@ -3698,8 +3477,8 @@ describe('error handling', () => {
 
 	it('should throw error when bindGroup receives non-tracked object', () => {
 		expect(() => {
-			function App() {
-				return <><input type="checkbox" value="a" ref={bindGroup({ value: [] })} /></>;
+			function App() @{
+				<input type="checkbox" value="a" ref={bindGroup({ value: [] })} />
 			}
 			render(App);
 		}).toThrow('bindGroup() argument is not a tracked object');
@@ -3707,8 +3486,8 @@ describe('error handling', () => {
 
 	it('should throw error when bindClientWidth receives non-tracked object', () => {
 		expect(() => {
-			function App() {
-				return <><div ref={bindClientWidth({ value: 0 })} /></>;
+			function App() @{
+				<div ref={bindClientWidth({ value: 0 })} />
 			}
 			render(App);
 		}).toThrow('bindClientWidth() argument is not a tracked object');
@@ -3716,8 +3495,8 @@ describe('error handling', () => {
 
 	it('should throw error when bindClientHeight receives non-tracked object', () => {
 		expect(() => {
-			function App() {
-				return <><div ref={bindClientHeight({ value: 0 })} /></>;
+			function App() @{
+				<div ref={bindClientHeight({ value: 0 })} />
 			}
 			render(App);
 		}).toThrow('bindClientHeight() argument is not a tracked object');
@@ -3725,8 +3504,8 @@ describe('error handling', () => {
 
 	it('should throw error when bindOffsetWidth receives non-tracked object', () => {
 		expect(() => {
-			function App() {
-				return <><div ref={bindOffsetWidth({ value: 0 })} /></>;
+			function App() @{
+				<div ref={bindOffsetWidth({ value: 0 })} />
 			}
 			render(App);
 		}).toThrow('bindOffsetWidth() argument is not a tracked object');
@@ -3734,8 +3513,8 @@ describe('error handling', () => {
 
 	it('should throw error when bindOffsetHeight receives non-tracked object', () => {
 		expect(() => {
-			function App() {
-				return <><div ref={bindOffsetHeight({ value: 0 })} /></>;
+			function App() @{
+				<div ref={bindOffsetHeight({ value: 0 })} />
 			}
 			render(App);
 		}).toThrow('bindOffsetHeight() argument is not a tracked object');
@@ -3743,8 +3522,8 @@ describe('error handling', () => {
 
 	it('should throw error when bindContentRect receives non-tracked object', () => {
 		expect(() => {
-			function App() {
-				return <><div ref={bindContentRect({ value: null })} /></>;
+			function App() @{
+				<div ref={bindContentRect({ value: null })} />
 			}
 			render(App);
 		}).toThrow('bindContentRect() argument is not a tracked object');
@@ -3752,8 +3531,8 @@ describe('error handling', () => {
 
 	it('should throw error when bindContentBoxSize receives non-tracked object', () => {
 		expect(() => {
-			function App() {
-				return <><div ref={bindContentBoxSize({ value: null })} /></>;
+			function App() @{
+				<div ref={bindContentBoxSize({ value: null })} />
 			}
 			render(App);
 		}).toThrow('bindContentBoxSize() argument is not a tracked object');
@@ -3761,8 +3540,8 @@ describe('error handling', () => {
 
 	it('should throw error when bindBorderBoxSize receives non-tracked object', () => {
 		expect(() => {
-			function App() {
-				return <><div ref={bindBorderBoxSize({ value: null })} /></>;
+			function App() @{
+				<div ref={bindBorderBoxSize({ value: null })} />
 			}
 			render(App);
 		}).toThrow('bindBorderBoxSize() argument is not a tracked object');
@@ -3770,8 +3549,8 @@ describe('error handling', () => {
 
 	it('should throw error when bindDevicePixelContentBoxSize receives non-tracked object', () => {
 		expect(() => {
-			function App() {
-				return <><div ref={bindDevicePixelContentBoxSize({ value: null })} /></>;
+			function App() @{
+				<div ref={bindDevicePixelContentBoxSize({ value: null })} />
 			}
 			render(App);
 		}).toThrow('bindDevicePixelContentBoxSize() argument is not a tracked object');
@@ -3779,8 +3558,8 @@ describe('error handling', () => {
 
 	it('should throw error when bindInnerHTML receives non-tracked object', () => {
 		expect(() => {
-			function App() {
-				return <><div ref={bindInnerHTML({ value: '' })} /></>;
+			function App() @{
+				<div ref={bindInnerHTML({ value: '' })} />
 			}
 			render(App);
 		}).toThrow('bindInnerHTML() argument is not a tracked object');
@@ -3788,8 +3567,8 @@ describe('error handling', () => {
 
 	it('should throw error when bindInnerText receives non-tracked object', () => {
 		expect(() => {
-			function App() {
-				return <><div ref={bindInnerText({ value: '' })} /></>;
+			function App() @{
+				<div ref={bindInnerText({ value: '' })} />
 			}
 			render(App);
 		}).toThrow('bindInnerText() argument is not a tracked object');
@@ -3797,8 +3576,8 @@ describe('error handling', () => {
 
 	it('should throw error when bindTextContent receives non-tracked object', () => {
 		expect(() => {
-			function App() {
-				return <><div ref={bindTextContent({ value: '' })} /></>;
+			function App() @{
+				<div ref={bindTextContent({ value: '' })} />
 			}
 			render(App);
 		}).toThrow('bindTextContent() argument is not a tracked object');
@@ -3806,8 +3585,8 @@ describe('error handling', () => {
 
 	it('should throw error when bindNode receives non-tracked object', () => {
 		expect(() => {
-			function App() {
-				return <><div ref={bindNode({ value: null })} /></>;
+			function App() @{
+				<div ref={bindNode({ value: null })} />
 			}
 			render(App);
 		}).toThrow('bindNode() argument is not a tracked object');
@@ -3815,8 +3594,8 @@ describe('error handling', () => {
 
 	it('should throw error when bindFiles receives non-tracked object', () => {
 		expect(() => {
-			function App() {
-				return <><input type="file" ref={bindFiles({ value: null })} /></>;
+			function App() @{
+				<input type="file" ref={bindFiles({ value: null })} />
 			}
 			render(App);
 		}).toThrow('bindFiles() argument is not a tracked object');
@@ -3824,11 +3603,9 @@ describe('error handling', () => {
 
 	it('should throw error when bindValue receives a getter but not a setter', () => {
 		expect(() => {
-			function App() {
-				return <>
-					const value = track('');
-					<input type="text" ref={bindValue(() => value.value)} />
-				</>;
+			function App() @{
+				const value = track('');
+				<input type="text" ref={bindValue(() => value.value)} />
 			}
 			render(App);
 		}).toThrow(
@@ -3838,12 +3615,10 @@ describe('error handling', () => {
 
 	it('should throw error when bindValue receives a getter and setter not a function', () => {
 		expect(() => {
-			function App() {
-				return <>
-					const value = track('');
-					// @ts-expect-error invalid argument
-					<input type="text" ref={bindValue(() => value.value, 5)} />
-				</>;
+			function App() @{
+				const value = track('');
+				// @ts-expect-error invalid argument
+				<input type="text" ref={bindValue(() => value.value, 5)} />
 			}
 			render(App);
 		}).toThrow(
@@ -3855,14 +3630,12 @@ describe('error handling', () => {
 		'should throw error when bindValue on select multiple receives a non-array tracked value',
 		() => {
 			expect(() => {
-				function App() {
-					return <>
-						const value = track('2');
-						<select multiple ref={bindValue(value)}>
-							<option value="1">{'One'}</option>
-							<option value="2">{'Two'}</option>
-						</select>
-					</>;
+				function App() @{
+					const value = track('2');
+					<select multiple ref={bindValue(value)}>
+						<option value="1">{'One'}</option>
+						<option value="2">{'Two'}</option>
+					</select>
 				}
 
 				render(App);
@@ -3877,14 +3650,12 @@ describe('error handling', () => {
 		'should throw error when bindValue on select multiple receives a non-array getter value',
 		() => {
 			expect(() => {
-				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>
-					</>;
+				function 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>
 				}
 
 				render(App);
@@ -3899,8 +3670,8 @@ describe('error handling', () => {
 		'should throw error when bindChecked receives non-tracked object with a getter but not a setter',
 		() => {
 			expect(() => {
-				function App() {
-					return <><input type="checkbox" ref={bindChecked(() => false)} /></>;
+				function App() @{
+					<input type="checkbox" ref={bindChecked(() => false)} />
 				}
 				render(App);
 			}).toThrow(
@@ -3913,8 +3684,8 @@ describe('error handling', () => {
 		'should throw error when bindChecked receives non-tracked object with a getter and setter not a function',
 		() => {
 			expect(() => {
-				function App() {
-					return <><input type="checkbox" ref={bindChecked(() => false, true)} /></>;
+				function App() @{
+					<input type="checkbox" ref={bindChecked(() => false, true)} />
 				}
 				render(App);
 			}).toThrow(
@@ -3927,8 +3698,8 @@ describe('error handling', () => {
 		'should throw error when bindIndeterminate receives non-tracked object with a getter and setter not a function',
 		() => {
 			expect(() => {
-				function App() {
-					return <><input type="checkbox" ref={bindIndeterminate(() => false, true)} /></>;
+				function App() @{
+					<input type="checkbox" ref={bindIndeterminate(() => false, true)} />
 				}
 				render(App);
 			}).toThrow(
@@ -3941,8 +3712,8 @@ describe('error handling', () => {
 		'should throw error when bindGroup receives non-tracked object with a getter and setter not a function',
 		() => {
 			expect(() => {
-				function App() {
-					return <><input type="checkbox" value="a" ref={bindGroup(() => [], true)} /></>;
+				function App() @{
+					<input type="checkbox" value="a" ref={bindGroup(() => [], true)} />
 				}
 				render(App);
 			}).toThrow(
@@ -3955,8 +3726,8 @@ describe('error handling', () => {
 		'should throw error when bindClientWidth receives non-tracked object with a getter and setter not a function',
 		() => {
 			expect(() => {
-				function App() {
-					return <><div ref={bindClientWidth(() => 0, true)} /></>;
+				function App() @{
+					<div ref={bindClientWidth(() => 0, true)} />
 				}
 				render(App);
 			}).toThrow(
@@ -3969,8 +3740,8 @@ describe('error handling', () => {
 		'should throw error when bindClientHeight receives non-tracked object with a getter and setter not a function',
 		() => {
 			expect(() => {
-				function App() {
-					return <><div ref={bindClientHeight(() => 0, true)} /></>;
+				function App() @{
+					<div ref={bindClientHeight(() => 0, true)} />
 				}
 				render(App);
 			}).toThrow(
@@ -3983,8 +3754,8 @@ describe('error handling', () => {
 		'should throw error when bindOffsetWidth receives non-tracked object with a getter and setter not a function',
 		() => {
 			expect(() => {
-				function App() {
-					return <><div ref={bindOffsetWidth(() => 0, true)} /></>;
+				function App() @{
+					<div ref={bindOffsetWidth(() => 0, true)} />
 				}
 				render(App);
 			}).toThrow(
@@ -3997,8 +3768,8 @@ describe('error handling', () => {
 		'should throw error when bindOffsetHeight receives non-tracked object with a getter and setter not a function',
 		() => {
 			expect(() => {
-				function App() {
-					return <><div ref={bindOffsetHeight(() => 0, true)} /></>;
+				function App() @{
+					<div ref={bindOffsetHeight(() => 0, true)} />
 				}
 				render(App);
 			}).toThrow(
@@ -4011,8 +3782,8 @@ describe('error handling', () => {
 		'should throw error when bindContentRect receives non-tracked object with a getter and setter not a function',
 		() => {
 			expect(() => {
-				function App() {
-					return <><div ref={bindContentRect(() => null, true)} /></>;
+				function App() @{
+					<div ref={bindContentRect(() => null, true)} />
 				}
 				render(App);
 			}).toThrow(
@@ -4025,8 +3796,8 @@ describe('error handling', () => {
 		'should throw error when bindContentBoxSize receives non-tracked object with a getter and setter not a function',
 		() => {
 			expect(() => {
-				function App() {
-					return <><div ref={bindContentBoxSize(() => null, true)} /></>;
+				function App() @{
+					<div ref={bindContentBoxSize(() => null, true)} />
 				}
 				render(App);
 			}).toThrow(
@@ -4039,8 +3810,8 @@ describe('error handling', () => {
 		'should throw error when bindBorderBoxSize receives non-tracked object with a getter and setter not a function',
 		() => {
 			expect(() => {
-				function App() {
-					return <><div ref={bindBorderBoxSize(() => null, true)} /></>;
+				function App() @{
+					<div ref={bindBorderBoxSize(() => null, true)} />
 				}
 				render(App);
 			}).toThrow(
@@ -4053,8 +3824,8 @@ describe('error handling', () => {
 		'should throw error when bindDevicePixelContentBoxSize receives non-tracked object with a getter and setter not a function',
 		() => {
 			expect(() => {
-				function App() {
-					return <><div ref={bindDevicePixelContentBoxSize(() => null, true)} /></>;
+				function App() @{
+					<div ref={bindDevicePixelContentBoxSize(() => null, true)} />
 				}
 				render(App);
 			}).toThrow(
@@ -4067,8 +3838,8 @@ describe('error handling', () => {
 		'should throw error when bindInnerHTML receives non-tracked object with a getter and setter not a function',
 		() => {
 			expect(() => {
-				function App() {
-					return <><div ref={bindInnerHTML(() => '', true)} /></>;
+				function App() @{
+					<div ref={bindInnerHTML(() => '', true)} />
 				}
 				render(App);
 			}).toThrow(
@@ -4081,8 +3852,8 @@ describe('error handling', () => {
 		'should throw error when bindInnerText receives non-tracked object with a getter and setter not a function',
 		() => {
 			expect(() => {
-				function App() {
-					return <><div ref={bindInnerText(() => '', true)} /></>;
+				function App() @{
+					<div ref={bindInnerText(() => '', true)} />
 				}
 				render(App);
 			}).toThrow(
@@ -4095,8 +3866,8 @@ describe('error handling', () => {
 		'should throw error when bindTextContent receives non-tracked object with a getter and setter not a function',
 		() => {
 			expect(() => {
-				function App() {
-					return <><div ref={bindTextContent(() => '', true)} /></>;
+				function App() @{
+					<div ref={bindTextContent(() => '', true)} />
 				}
 				render(App);
 			}).toThrow(
@@ -4109,8 +3880,8 @@ describe('error handling', () => {
 		'should throw error when bindNode receives non-tracked object with a getter and setter not a function',
 		() => {
 			expect(() => {
-				function App() {
-					return <><div ref={bindNode(() => null, true)} /></>;
+				function App() @{
+					<div ref={bindNode(() => null, true)} />
 				}
 				render(App);
 			}).toThrow(
@@ -4123,8 +3894,8 @@ describe('error handling', () => {
 		'should throw error when bindFiles receives non-tracked object with a getter and setter not a function',
 		() => {
 			expect(() => {
-				function App() {
-					return <><input type="file" ref={bindFiles(() => null, true)} /></>;
+				function App() @{
+					<input type="file" ref={bindFiles(() => null, true)} />
 				}
 				render(App);
 			}).toThrow(