ripple 0.3.71 → 0.3.74

package/tests/client/basic/basic.attributes.test.tsrx

@@ -3,8 +3,8 @@ import { RippleArray, RippleObject, flushSync, track } from 'ripple';
 
 describe('basic client > attribute rendering', () => {
 	it('render static attributes', () => {
-		function Basic() {
-			return <><div class="foo" id="bar" style="color: red;">{'Hello World'}</div></>;
+		function Basic() @{
+			<div class="foo" id="bar" style="color: red;">{'Hello World'}</div>
 		}
 
 		render(Basic);
@@ -13,23 +13,21 @@ describe('basic client > attribute rendering', () => {
 	});
 
 	it('render dynamic class attribute', () => {
-		function Basic() {
-			return <>
-				let &[active] = track(false);
+		function Basic() @{
+			let &[active] = track(false);
+			<>
 				<button
 					onClick={() => {
 						active = !active;
 					}}
-				>
-					{'Toggle'}
-				</button>
+				>{'Toggle'}</button>
 				<div class={active ? 'active' : 'inactive'}>{'Dynamic Class'}</div>
 				<style>
 					.active {
 						color: green;
 					}
 				</style>
-			</>;
+			</>
 		}
 
 		render(Basic);
@@ -51,8 +49,8 @@ describe('basic client > attribute rendering', () => {
 	});
 
 	it('render class attribute with array, nested array, nested object', () => {
-		function Basic() {
-			return <>
+		function Basic() @{
+			<>
 				<div
 					class={[
 						'foo',
@@ -66,15 +64,13 @@ describe('basic client > attribute rendering', () => {
 							{ eee: true, fff: false },
 						],
 					]}
-				>
-					{'Class Array'}
-				</div>
+				>{'Class Array'}</div>
 				<style>
 					.foo {
 						color: red;
 					}
 				</style>
-			</>;
+			</>
 		}
 
 		render(Basic);
@@ -94,23 +90,21 @@ describe('basic client > attribute rendering', () => {
 	});
 
 	it('render dynamic class object', () => {
-		function Basic() {
-			return <>
-				let &[active] = track(false);
+		function Basic() @{
+			let &[active] = track(false);
+			<>
 				<button
 					onClick={() => {
 						active = !active;
 					}}
-				>
-					{'Toggle'}
-				</button>
+				>{'Toggle'}</button>
 				<div class={{ active: active, inactive: !active }}>{'Dynamic Class'}</div>
 				<style>
 					.active {
 						color: green;
 					}
 				</style>
-			</>;
+			</>
 		}
 
 		render(Basic);
@@ -135,9 +129,9 @@ describe('basic client > attribute rendering', () => {
 	});
 
 	it('applies scoped ripple class to multiple elements with dynamic class expressions', () => {
-		function Basic() {
-			return <>
-				let &[selected] = track(1);
+		function Basic() @{
+			let &[selected] = track(1);
+			<>
 				<div class={selected === 0 ? 'selected' : ''}>{`div 1`}</div>
 				<div class={selected === 0 ? 'selected' : ''}>{`div 2`}</div>
 				<style>
@@ -149,7 +143,7 @@ describe('basic client > attribute rendering', () => {
 						background: indigo;
 					}
 				</style>
-			</>;
+			</>
 		}
 
 		render(Basic);
@@ -164,18 +158,16 @@ describe('basic client > attribute rendering', () => {
 	});
 
 	it('render dynamic id attribute', () => {
-		function Basic() {
-			return <>
-				let &[count] = track(0);
+		function Basic() @{
+			let &[count] = track(0);
+			<>
 				<button
 					onClick={() => {
 						count++;
 					}}
-				>
-					{'Increment'}
-				</button>
+				>{'Increment'}</button>
 				<div id={`item-${count}`}>{'Dynamic ID'}</div>
-			</>;
+			</>
 		}
 
 		render(Basic);
@@ -197,18 +189,16 @@ describe('basic client > attribute rendering', () => {
 	});
 
 	it('render dynamic style attribute', () => {
-		function Basic() {
-			return <>
-				let &[color] = track('red');
+		function Basic() @{
+			let &[color] = track('red');
+			<>
 				<button
 					onClick={() => {
 						color = color === 'red' ? 'blue' : 'red';
 					}}
-				>
-					{'Change Color'}
-				</button>
+				>{'Change Color'}</button>
 				<div style={`color: ${color}; font-weight: bold;`}>{'Dynamic Style'}</div>
-			</>;
+			</>
 		}
 
 		render(Basic);
@@ -227,18 +217,16 @@ describe('basic client > attribute rendering', () => {
 	});
 
 	it('render style attribute as dynamic object', () => {
-		function Basic() {
-			return <>
-				let &[color] = track('red');
+		function Basic() @{
+			let &[color] = track('red');
+			<>
 				<button
 					onClick={() => {
 						color = color === 'red' ? 'blue' : 'red';
 					}}
-				>
-					{'Change Color'}
-				</button>
+				>{'Change Color'}</button>
 				<div style={{ color: color, fontWeight: 'bold' }}>{'Dynamic Style'}</div>
-			</>;
+			</>
 		}
 
 		render(Basic);
@@ -257,15 +245,15 @@ describe('basic client > attribute rendering', () => {
 	});
 
 	it('render tracked variable as style attribute', () => {
-		function Basic() {
-			return <>
-				let &[style] = track({ color: 'red', fontWeight: 'bold' });
-				function toggleColor() {
-					style = { ...style, color: style.color === 'red' ? 'blue' : 'red' };
-				}
+		function Basic() @{
+			let &[style] = track({ color: 'red', fontWeight: 'bold' });
+			function toggleColor() {
+				style = { ...style, color: style.color === 'red' ? 'blue' : 'red' };
+			}
+			<>
 				<button onClick={toggleColor}>{'Change Color'}</button>
 				<div {style}>{'Dynamic Style'}</div>
-			</>;
+			</>
 		}
 
 		render(Basic);
@@ -284,15 +272,15 @@ describe('basic client > attribute rendering', () => {
 	});
 
 	it('render tracked object as style attribute', () => {
-		function Basic() {
-			return <>
-				let style = new RippleObject({ color: 'red', fontWeight: 'bold' });
-				function toggleColor() {
-					style.color = style.color === 'red' ? 'blue' : 'red';
-				}
+		function Basic() @{
+			let style = new RippleObject({ color: 'red', fontWeight: 'bold' });
+			function toggleColor() {
+				style.color = style.color === 'red' ? 'blue' : 'red';
+			}
+			<>
 				<button onClick={toggleColor}>{'Change Color'}</button>
 				<div style={{ color: style.color, fontWeight: style.fontWeight }}>{'Dynamic Style'}</div>
-			</>;
+			</>
 		}
 
 		render(Basic);
@@ -311,14 +299,12 @@ describe('basic client > attribute rendering', () => {
 	});
 
 	it('render spread attributes with style and class', () => {
-		function Basic() {
-			return <>
-				const attributes = {
-					style: { color: 'red', fontWeight: 'bold' },
-					class: ['foo', false && 'bar'],
-				};
-				<div {...attributes}>{'Attributes with style and class'}</div>
-			</>;
+		function Basic() @{
+			const attributes = {
+				style: { color: 'red', fontWeight: 'bold' },
+				class: ['foo', false && 'bar'],
+			};
+			<div {...attributes}>{'Attributes with style and class'}</div>
 		}
 
 		render(Basic);
@@ -333,13 +319,11 @@ describe('basic client > attribute rendering', () => {
 	});
 
 	it('render spread props without duplication', () => {
-		function App() {
-			return <>
-				const checkBoxProp = { name: 'car' };
-				<div>
-					<input {...checkBoxProp} type="checkbox" id="vehicle1" value="Bike" />
-				</div>
-			</>;
+		function App() @{
+			const checkBoxProp = { name: 'car' };
+			<div>
+				<input {...checkBoxProp} type="checkbox" id="vehicle1" value="Bike" />
+			</div>
 		}
 
 		render(App);
@@ -359,20 +343,18 @@ describe('basic client > attribute rendering', () => {
 	});
 
 	it('render dynamic boolean attributes', () => {
-		function Basic() {
-			return <>
-				let &[disabled] = track(false);
-				let &[checked] = track(false);
+		function Basic() @{
+			let &[disabled] = track(false);
+			let &[checked] = track(false);
+			<>
 				<button
 					onClick={() => {
 						disabled = !disabled;
 						checked = !checked;
 					}}
-				>
-					{'Toggle'}
-				</button>
+				>{'Toggle'}</button>
 				<input type="checkbox" {disabled} {checked} />
-			</>;
+			</>
 		}
 
 		render(Basic);
@@ -391,22 +373,22 @@ describe('basic client > attribute rendering', () => {
 	});
 
 	it('render multiple dynamic attributes', () => {
-		function Basic() {
-			return <>
-				let &[theme] = track('light');
-				let &[size] = track('medium');
+		function Basic() @{
+			let &[theme] = track('light');
+			let &[size] = track('medium');
+			<>
 				<button
 					onClick={() => {
 						theme = theme === 'light' ? 'dark' : 'light';
 						size = size === 'medium' ? 'large' : 'medium';
 					}}
-				>
-					{'Toggle Theme & Size'}
-				</button>
-				<div class={`theme-${theme} size-${size}`} data-theme={theme} data-size={size}>
-					{'Multiple Dynamic Attributes'}
-				</div>
-			</>;
+				>{'Toggle Theme & Size'}</button>
+				<div
+					class={`theme-${theme} size-${size}`}
+					data-theme={theme}
+					data-size={size}
+				>{'Multiple Dynamic Attributes'}</div>
+			</>
 		}
 
 		render(Basic);
@@ -427,25 +409,21 @@ describe('basic client > attribute rendering', () => {
 	});
 
 	it('render conditional attributes', () => {
-		function Basic() {
-			return <>
-				let &[showTitle] = track(false);
-				let &[showAria] = track(false);
+		function Basic() @{
+			let &[showTitle] = track(false);
+			let &[showAria] = track(false);
+			<>
 				<button
 					onClick={() => {
 						showTitle = !showTitle;
 						showAria = !showAria;
 					}}
-				>
-					{'Toggle Attributes'}
-				</button>
+				>{'Toggle Attributes'}</button>
 				<div
 					title={showTitle ? 'This is a title' : undefined}
 					aria-label={showAria ? 'Accessible label' : undefined}
-				>
-					{'Conditional Attributes'}
-				</div>
-			</>;
+				>{'Conditional Attributes'}</div>
+			</>
 		}
 
 		render(Basic);
@@ -470,12 +448,12 @@ describe('basic client > attribute rendering', () => {
 	});
 
 	it('render spread attributes', () => {
-		function Basic() {
-			return <>
-				let &[attrs] = track<TestAttributes>({
-					class: 'initial',
-					id: 'test-1',
-				});
+		function Basic() @{
+			let &[attrs] = track<TestAttributes>({
+				class: 'initial',
+				id: 'test-1',
+			});
+			<>
 				<button
 					onClick={() => {
 						attrs = {
@@ -484,11 +462,9 @@ describe('basic client > attribute rendering', () => {
 							'data-extra': 'value',
 						};
 					}}
-				>
-					{'Update Attributes'}
-				</button>
+				>{'Update Attributes'}</button>
 				<div {...attrs}>{'Spread Attributes'}</div>
-			</>;
+			</>
 		}
 
 		render(Basic);
@@ -509,16 +485,15 @@ describe('basic client > attribute rendering', () => {
 	});
 
 	it('renders with reactive attributes with nested reactive attributes', () => {
-		function App() {
-			return <>
-				let &[value] = track('parent-class');
+		function App() @{
+			let &[value] = track('parent-class');
+			let &[nested] = track('nested-class');
+			<>
 				<p class={value}>{'Colored parent value'}</p>
 				<div>
-					let &[nested] = track('nested-class');
-
 					<p class={nested}>{'Colored nested value'}</p>
 				</div>
-			</>;
+			</>
 		}
 
 		render(App);
@@ -530,13 +505,11 @@ describe('basic client > attribute rendering', () => {
 	});
 
 	it('handles boolean attributes with no prop value provides', () => {
-		function App() {
-			return <>
-				<div class="container">
-					<button onClick={() => console.log('clicked!')} disabled>{'Button'}</button>
-					<input type="checkbox" checked />
-				</div>
-			</>;
+		function App() @{
+			<div class="container">
+				<button onClick={() => console.log('clicked!')} disabled>{'Button'}</button>
+				<input type="checkbox" checked />
+			</div>
 		}
 
 		render(App);
@@ -544,15 +517,15 @@ describe('basic client > attribute rendering', () => {
 	});
 
 	it('handles boolean props correctly', () => {
-		function App() {
-			return <>
+		function App() @{
+			<>
 				<div data-disabled />
 				<Child isDisabled />
-			</>;
+			</>
 		}
 
-		function Child({ isDisabled }: { isDisabled: boolean }) {
-			return <><input disabled={isDisabled} /></>;
+		function Child({ isDisabled }: { isDisabled: boolean }) @{
+			<input disabled={isDisabled} />
 		}
 
 		render(App);
@@ -560,29 +533,27 @@ describe('basic client > attribute rendering', () => {
 	});
 
 	it('handles reactive event handler changes', () => {
-		function Basic() {
-			return <>
-				let &[count] = track(0);
-				let &[mode] = track<'increment' | 'decrement'>('increment');
-				const incrementHandler = () => {
-					count++;
-				};
-				const decrementHandler = () => {
-					count--;
-				};
+		function Basic() @{
+			let &[count] = track(0);
+			let &[mode] = track<'increment' | 'decrement'>('increment');
+			const incrementHandler = () => {
+				count++;
+			};
+			const decrementHandler = () => {
+				count--;
+			};
+			<>
 				<button
 					onClick={() => {
 						mode = mode === 'increment' ? 'decrement' : 'increment';
 					}}
 					class="toggle-mode"
-				>
-					{'Toggle Mode'}
-				</button>
+				>{'Toggle Mode'}</button>
 				<button onClick={mode === 'increment' ? incrementHandler : decrementHandler} class="action">
 					{mode === 'increment' ? '+' : '-'}
 				</button>
 				<div class="count">{count}</div>
-			</>;
+			</>
 		}
 
 		render(Basic);
@@ -616,23 +587,21 @@ describe('basic client > attribute rendering', () => {
 	});
 
 	it('handles events with capture option', () => {
-		function Basic() {
-			return <>
-				let captureOrder: RippleArray<string> = new RippleArray();
-				const handleCaptureClick = {
-					handleEvent() {
-						captureOrder.push('capture');
-					},
-					capture: true,
-				};
-				const handleBubbleClick = () => {
-					captureOrder.push('bubble');
-				};
-				<div onClick={handleCaptureClick} class="outer">
-					<button onClick={handleBubbleClick} class="inner">{'Click'}</button>
-					<div class="order">{captureOrder.join(' -> ')}</div>
-				</div>
-			</>;
+		function Basic() @{
+			let captureOrder: RippleArray<string> = new RippleArray();
+			const handleCaptureClick = {
+				handleEvent() {
+					captureOrder.push('capture');
+				},
+				capture: true,
+			};
+			const handleBubbleClick = () => {
+				captureOrder.push('bubble');
+			};
+			<div onClick={handleCaptureClick} class="outer">
+				<button onClick={handleBubbleClick} class="inner">{'Click'}</button>
+				<div class="order">{captureOrder.join(' -> ')}</div>
+			</div>
 		}
 
 		render(Basic);
@@ -649,20 +618,18 @@ describe('basic client > attribute rendering', () => {
 	});
 
 	it('handles events with Capture suffix in the name', () => {
-		function Basic() {
-			return <>
-				let captureOrder: RippleArray<string> = new RippleArray();
-				const handleCaptureClick = () => {
-					captureOrder.push('capture');
-				};
-				const handleBubbleClick = () => {
-					captureOrder.push('bubble');
-				};
-				<div onClickCapture={handleCaptureClick} class="outer">
-					<button onClick={handleBubbleClick} class="inner">{'Click'}</button>
-					<div class="order">{captureOrder.join(' -> ')}</div>
-				</div>
-			</>;
+		function Basic() @{
+			let captureOrder: RippleArray<string> = new RippleArray();
+			const handleCaptureClick = () => {
+				captureOrder.push('capture');
+			};
+			const handleBubbleClick = () => {
+				captureOrder.push('bubble');
+			};
+			<div onClickCapture={handleCaptureClick} class="outer">
+				<button onClick={handleBubbleClick} class="inner">{'Click'}</button>
+				<div class="order">{captureOrder.join(' -> ')}</div>
+			</div>
 		}
 
 		render(Basic);
@@ -679,20 +646,18 @@ describe('basic client > attribute rendering', () => {
 	});
 
 	it('handles custom events with customName option', () => {
-		function Basic() {
-			return <>
-				let &[customEventCount] = track(0);
-				const handleCustom = {
-					handleEvent(event: CustomEvent) {
-						customEventCount += event.detail.value;
-					},
-					customName: 'MyCustomEvent',
-				};
-				<div>
-					<div onMyCustomEvent={handleCustom} class="custom-target">{'Custom'}</div>
-					<div class="custom-count">{customEventCount}</div>
-				</div>
-			</>;
+		function Basic() @{
+			let &[customEventCount] = track(0);
+			const handleCustom = {
+				handleEvent(event: CustomEvent) {
+					customEventCount += event.detail.value;
+				},
+				customName: 'MyCustomEvent',
+			};
+			<div>
+				<div onMyCustomEvent={handleCustom} class="custom-target">{'Custom'}</div>
+				<div class="custom-count">{customEventCount}</div>
+			</div>
 		}
 
 		render(Basic);
@@ -714,26 +679,24 @@ describe('basic client > attribute rendering', () => {
 	});
 
 	it('handles events with delegated: false option to bypass delegation', () => {
-		function Basic() {
-			return <>
-				let &[delegatedCount] = track(0);
-				let &[nonDelegatedCount] = track(0);
-				const delegatedHandler = () => {
-					delegatedCount++;
-				};
-				const nonDelegatedHandler = {
-					handleEvent() {
-						nonDelegatedCount++;
-					},
-					delegated: false,
-				};
-				<div>
-					<button onClick={delegatedHandler} class="delegated-btn">{'Delegated'}</button>
-					<button onClick={nonDelegatedHandler} class="non-delegated-btn">{'Non-Delegated'}</button>
-					<div class="delegated-count">{delegatedCount}</div>
-					<div class="non-delegated-count">{nonDelegatedCount}</div>
-				</div>
-			</>;
+		function Basic() @{
+			let &[delegatedCount] = track(0);
+			let &[nonDelegatedCount] = track(0);
+			const delegatedHandler = () => {
+				delegatedCount++;
+			};
+			const nonDelegatedHandler = {
+				handleEvent() {
+					nonDelegatedCount++;
+				},
+				delegated: false,
+			};
+			<div>
+				<button onClick={delegatedHandler} class="delegated-btn">{'Delegated'}</button>
+				<button onClick={nonDelegatedHandler} class="non-delegated-btn">{'Non-Delegated'}</button>
+				<div class="delegated-count">{delegatedCount}</div>
+				<div class="non-delegated-count">{nonDelegatedCount}</div>
+			</div>
 		}
 
 		render(Basic);
@@ -762,33 +725,32 @@ describe('basic client > attribute rendering', () => {
 		const delegatedClicks: number[] = [];
 		const nonDelegatedClicks: number[] = [];
 
-		function Basic() {
-			return <>
-				const makeDelegatedHandler = (id: number) => () => {
-					delegatedClicks.push(id);
-				};
-				const makeNonDelegatedHandler = (id: number) => ({
-					handleEvent() {
-						nonDelegatedClicks.push(id);
-					},
-					delegated: false,
-				});
-				const buttonIds = [0, 1, 2, 3, 4];
-				<div>
-					<div class="delegated-buttons">
-						for (const i of buttonIds) {
-							<button onClick={makeDelegatedHandler(i)} class={`delegated-${i}`}>{`D${i}`}</button>
-						}
-					</div>
-					<div class="non-delegated-buttons">
-						for (const i of buttonIds) {
-							<button onClick={makeNonDelegatedHandler(i)} class={`non-delegated-${i}`}>
-								{`ND${i}`}
-							</button>
-						}
-					</div>
+		function Basic() @{
+			const makeDelegatedHandler = (id: number) => () => {
+				delegatedClicks.push(id);
+			};
+			const makeNonDelegatedHandler = (id: number) => ({
+				handleEvent() {
+					nonDelegatedClicks.push(id);
+				},
+				delegated: false,
+			});
+			const buttonIds = [0, 1, 2, 3, 4];
+			<div>
+				<div class="delegated-buttons">
+					@for (const i of buttonIds) {
+						<button onClick={makeDelegatedHandler(i)} class={`delegated-${i}`}>{`D${i}`}</button>
+					}
+				</div>
+				<div class="non-delegated-buttons">
+					@for (const i of buttonIds) {
+						<button
+							onClick={makeNonDelegatedHandler(i)}
+							class={`non-delegated-${i}`}
+						>{`ND${i}`}</button>
+					}
 				</div>
-			</>;
+			</div>
 		}
 
 		render(Basic);
@@ -826,25 +788,23 @@ describe('basic client > attribute rendering', () => {
 	});
 
 	it('handles events defined as function directly vs as object', () => {
-		function Basic() {
-			return <>
-				let &[functionCount] = track(0);
-				let &[objectCount] = track(0);
-				const functionHandler = () => {
-					functionCount++;
-				};
-				const objectHandler = {
-					handleEvent() {
-						objectCount++;
-					},
-				};
-				<div>
-					<button onClick={functionHandler} class="function-btn">{'Function'}</button>
-					<button onClick={objectHandler} class="object-btn">{'Object'}</button>
-					<div class="function-count">{functionCount}</div>
-					<div class="object-count">{objectCount}</div>
-				</div>
-			</>;
+		function Basic() @{
+			let &[functionCount] = track(0);
+			let &[objectCount] = track(0);
+			const functionHandler = () => {
+				functionCount++;
+			};
+			const objectHandler = {
+				handleEvent() {
+					objectCount++;
+				},
+			};
+			<div>
+				<button onClick={functionHandler} class="function-btn">{'Function'}</button>
+				<button onClick={objectHandler} class="object-btn">{'Object'}</button>
+				<div class="function-count">{functionCount}</div>
+				<div class="object-count">{objectCount}</div>
+			</div>
 		}
 
 		render(Basic);
@@ -878,46 +838,44 @@ describe('basic client > attribute rendering', () => {
 	});
 
 	it('handles passive event option', () => {
-		function Basic() {
-			return <>
-				let &[passiveDefaultPrevented] = track<boolean | null>(null);
-				let &[nonPassiveDefaultPrevented] = track<boolean | null>(null);
-				const passiveHandler = {
-					handleEvent(event: Event) {
-						event.preventDefault();
-						// In passive listeners, preventDefault() is ignored
-						passiveDefaultPrevented = event.defaultPrevented;
-					},
-					passive: true,
-					delegated: false, // Need to ensure it's not delegated to test passive properly
-				};
-				const nonPassiveHandler = {
-					handleEvent(event: Event) {
-						event.preventDefault();
-						// In non-passive listeners, preventDefault() works
-						nonPassiveDefaultPrevented = event.defaultPrevented;
-					},
-					delegated: false,
-				};
-				<div>
-					<div onWheel={passiveHandler} class="passive-target">{'Passive'}</div>
-					<div onWheel={nonPassiveHandler} class="non-passive-target">{'Non-Passive'}</div>
-					<div class="passive-result">
-						{passiveDefaultPrevented === null
-							? 'not-tested'
-							: passiveDefaultPrevented
-								? 'prevented'
-								: 'not-prevented'}
-					</div>
-					<div class="non-passive-result">
-						{nonPassiveDefaultPrevented === null
-							? 'not-tested'
-							: nonPassiveDefaultPrevented
-								? 'prevented'
-								: 'not-prevented'}
-					</div>
+		function Basic() @{
+			let &[passiveDefaultPrevented] = track<boolean | null>(null);
+			let &[nonPassiveDefaultPrevented] = track<boolean | null>(null);
+			const passiveHandler = {
+				handleEvent(event: Event) {
+					event.preventDefault();
+					// In passive listeners, preventDefault() is ignored
+					passiveDefaultPrevented = event.defaultPrevented;
+				},
+				passive: true,
+				delegated: false, // Need to ensure it's not delegated to test passive properly
+			};
+			const nonPassiveHandler = {
+				handleEvent(event: Event) {
+					event.preventDefault();
+					// In non-passive listeners, preventDefault() works
+					nonPassiveDefaultPrevented = event.defaultPrevented;
+				},
+				delegated: false,
+			};
+			<div>
+				<div onWheel={passiveHandler} class="passive-target">{'Passive'}</div>
+				<div onWheel={nonPassiveHandler} class="non-passive-target">{'Non-Passive'}</div>
+				<div class="passive-result">
+					{passiveDefaultPrevented === null
+						? 'not-tested'
+						: passiveDefaultPrevented
+							? 'prevented'
+							: 'not-prevented'}
+				</div>
+				<div class="non-passive-result">
+					{nonPassiveDefaultPrevented === null
+						? 'not-tested'
+						: nonPassiveDefaultPrevented
+							? 'prevented'
+							: 'not-prevented'}
 				</div>
-			</>;
+			</div>
 		}
 
 		render(Basic);
@@ -942,26 +900,24 @@ describe('basic client > attribute rendering', () => {
 	});
 
 	it('handles once option to fire event only once', () => {
-		function Basic() {
-			return <>
-				let &[onceCount] = track(0);
-				let &[regularCount] = track(0);
-				const onceHandler = {
-					handleEvent() {
-						onceCount++;
-					},
-					once: true,
-				};
-				const regularHandler = () => {
-					regularCount++;
-				};
-				<div>
-					<button onClick={onceHandler} class="once-btn">{'Once'}</button>
-					<button onClick={regularHandler} class="regular-btn">{'Regular'}</button>
-					<div class="once-count">{onceCount}</div>
-					<div class="regular-count">{regularCount}</div>
-				</div>
-			</>;
+		function Basic() @{
+			let &[onceCount] = track(0);
+			let &[regularCount] = track(0);
+			const onceHandler = {
+				handleEvent() {
+					onceCount++;
+				},
+				once: true,
+			};
+			const regularHandler = () => {
+				regularCount++;
+			};
+			<div>
+				<button onClick={onceHandler} class="once-btn">{'Once'}</button>
+				<button onClick={regularHandler} class="regular-btn">{'Regular'}</button>
+				<div class="once-count">{onceCount}</div>
+				<div class="regular-count">{regularCount}</div>
+			</div>
 		}
 
 		render(Basic);