ripple 0.3.71 → 0.3.74

package/tests/client/tsx.test.tsrx

@@ -1,56 +1,52 @@
 import { flushSync, track } from 'ripple';
 
 describe('tsx expression', () => {
-	it('renders an empty <tsx></tsx> element', () => {
-		function App() {
-			return <>
-				<tsx></tsx>
-			</>;
+	it('renders an empty <></> element', () => {
+		function App() @{
+			<></>
 		}
 		render(App);
 		expect(container.textContent).toBe('');
 	});
 
 	it('renders an empty <></> fragment shorthand', () => {
-		function App() {
-			return <>
-				<></>
-			</>;
+		function App() @{
+			<></>
 		}
 		render(App);
 		expect(container.textContent).toBe('');
 	});
 
-	it('renders an empty <tsx></tsx> assigned to a variable', () => {
-		function App() {
-			return <>
-				const el = <tsx></tsx>;
+	it('renders an empty <></> assigned to a variable', () => {
+		function App() @{
+			const el = <></>;
+			<>
 				{el}
-			</>;
+			</>
 		}
 		render(App);
 		expect(container.textContent).toBe('');
 	});
 
 	it('renders an empty <></> fragment assigned to a variable', () => {
-		function App() {
-			return <>
-				const el = <></>;
+		function App() @{
+			const el = <></>;
+			<>
 				{el}
-			</>;
+			</>
 		}
 		render(App);
 		expect(container.textContent).toBe('');
 	});
 
 	it('renders a basic fragment shorthand element', () => {
-		function App() {
-			return <>
-				const el = <tsx>
-					<div>hello world</div>
-				</tsx>;
-				{el}
+		function App() @{
+			const el = <>
+				<div>{'hello world'}</div>
 			</>;
+			<>
+				{el}
+			</>
 		}
 		render(App);
 		expect(container.textContent).toBe('hello world');
@@ -58,15 +54,13 @@ describe('tsx expression', () => {
 	});
 
 	it('applies scoped classes inside tsx blocks and fragment shorthand', () => {
-		function App() {
-			return <>
-				<tsx>
+		function App() @{
+			<>
+				<>
 					<div class="card">
-						<h2>
-							{'tsx block'}
-						</h2>
+						<h2>{'tsx block'}</h2>
 					</div>
-				</tsx>
+				</>
 				<>
 					<div class="card">
 						<h2>{'fragment shorthand'}</h2>
@@ -81,7 +75,7 @@ describe('tsx expression', () => {
 						color: red;
 					}
 				</style>
-			</>;
+			</>
 		}
 
 		render(App);
@@ -106,13 +100,11 @@ describe('tsx expression', () => {
 	});
 
 	it('renders a tsx element assigned to a variable', () => {
-		function App() {
-			return <>
-				const el = <tsx>
-					<span class="test">content</span>
-				</tsx>;
+		function App() @{
+			const el = <span class="test">{'content'}</span>;
+			<>
 				{el}
-			</>;
+			</>
 		}
 		render(App);
 		const span = container.querySelector('span.test');
@@ -121,14 +113,14 @@ describe('tsx expression', () => {
 	});
 
 	it('renders a tsx element with multiple children', () => {
-		function App() {
-			return <>
-				const el = <tsx>
-					<div>first</div>
-					<div>second</div>
-				</tsx>;
-				{el}
+		function App() @{
+			const el = <>
+				<div>first</div>
+				<div>second</div>
 			</>;
+			<>
+				{el}
+			</>
 		}
 		render(App);
 		const divs = container.querySelectorAll('div');
@@ -138,15 +130,15 @@ describe('tsx expression', () => {
 	});
 
 	it('renders a tsx element with nested elements', () => {
-		function App() {
-			return <>
-				const el = <tsx>
-					<div class="outer">
-						<span class="inner">nested</span>
-					</div>
-				</tsx>;
-				{el}
+		function App() @{
+			const el = <>
+				<div class="outer">
+					<span class="inner">nested</span>
+				</div>
 			</>;
+			<>
+				{el}
+			</>
 		}
 		render(App);
 		const outer = container.querySelector('div.outer');
@@ -157,13 +149,9 @@ describe('tsx expression', () => {
 	});
 
 	it('renders a tsx element inline in a parent element', () => {
-		function App() {
-			return <>
-				const el = <tsx>
-					<span>inline</span>
-				</tsx>;
-				<div class="parent">{el}</div>
-			</>;
+		function App() @{
+			const el = <span>{'inline'}</span>;
+			<div class="parent">{el}</div>
 		}
 		render(App);
 		const parent = container.querySelector('div.parent');
@@ -173,17 +161,17 @@ describe('tsx expression', () => {
 	});
 
 	it('renders a tsx element with reactive expressions', () => {
-		function App() {
-			return <>
-				let &[count] = track(0);
-				const el = <tsx>
-					<div>
-						{'count: ' + count}
-					</div>
-				</tsx>;
+		function App() @{
+			let &[count] = track(0);
+			const el = <>
+				<div>
+					{'count: ' + count}
+				</div>
+			</>;
+			<>
 				{el}
 				<button onClick={() => count++}>{'increment'}</button>
-			</>;
+			</>
 		}
 		render(App);
 		expect(container.querySelector('div').textContent).toBe('count: 0');
@@ -194,17 +182,17 @@ describe('tsx expression', () => {
 	});
 
 	it('conditionally renders tsx elements', () => {
-		function App() {
-			return <>
-				let &[show] = track(true);
-				const el = <tsx>
-					<div class="tsx-content">visible</div>
-				</tsx>;
-				if (show) {
-					{el}
+		function App() @{
+			let &[show] = track(true);
+			const el = <div class="tsx-content">{'content'}</div>;
+			<>
+				@if (show) {
+					<>
+						{el}
+					</>
 				}
 				<button onClick={() => (show = !show)}>{'toggle'}</button>
-			</>;
+			</>
 		}
 		render(App);
 		expect(container.querySelector('.tsx-content')).toBeTruthy();
@@ -219,17 +207,13 @@ describe('tsx expression', () => {
 	});
 
 	it('renders tsx element passed as children prop', () => {
-		function Child(&{ children }: { children: any }) {
-			return <><div class="wrapper">{children}</div></>;
+		function Child(&{ children }) @{
+			<div class="wrapper">{children}</div>
 		}
 
-		function App() {
-			return <>
-				const el = <tsx>
-					<span>from tsx</span>
-				</tsx>;
-				<Child children={el} />
-			</>;
+		function App() @{
+			const el = <span>{'from tsx'}</span>;
+			<Child children={el} />
 		}
 		render(App);
 		const wrapper = container.querySelector('.wrapper');
@@ -239,13 +223,11 @@ describe('tsx expression', () => {
 	});
 
 	it('renders tsx element with text content only', () => {
-		function App() {
-			return <>
-				const el = <tsx>
-					just text
-				</tsx>;
+		function App() @{
+			const el = <>just text</>;
+			<>
 				{el}
-			</>;
+			</>
 		}
 
 		render(App);
@@ -253,13 +235,13 @@ describe('tsx expression', () => {
 	});
 
 	it('renders tsx element with static attributes', () => {
-		function App() {
-			return <>
-				const el = <tsx>
-					<div id="my-id" class="my-class" data-testid="test" aria-label="label">content</div>
-				</tsx>;
+		function App() @{
+			const el = <div id="my-id" class="my-class" data-testid="test" aria-label="label">
+				content
+			</div>;
+			<>
 				{el}
-			</>;
+			</>
 		}
 
 		render(App);
@@ -271,15 +253,13 @@ describe('tsx expression', () => {
 	});
 
 	it('renders tsx element with dynamic attribute values', () => {
-		function App() {
-			return <>
-				let &[name] = track('initial');
-				const el = <tsx>
-					<div id={name} class={'cls-' + name}>content</div>
-				</tsx>;
+		function App() @{
+			let &[name] = track('initial');
+			const el = <div id={name} class={'cls-' + name}>{'content'}</div>;
+			<>
 				{el}
 				<button onClick={() => (name = 'updated')}>{'update'}</button>
-			</>;
+			</>
 		}
 
 		render(App);
@@ -294,17 +274,15 @@ describe('tsx expression', () => {
 	});
 
 	it('renders tsx element with event handlers', () => {
-		function App() {
-			return <>
-				let &[clicked] = track(false);
-				const el = <tsx>
-					<button onClick={() => (clicked = true)}>
-						{'click me'}
-					</button>
-				</tsx>;
+		function App() @{
+			let &[clicked] = track(false);
+			const el = <button onClick={() => (clicked = true)}>{'click'}</button>;
+			<>
 				{el}
-				<div class="status">{clicked ? 'clicked' : 'not clicked'}</div>
-			</>;
+				<div class="status">
+					{clicked ? 'clicked' : 'not clicked'}
+				</div>
+			</>
 		}
 
 		render(App);
@@ -316,17 +294,13 @@ describe('tsx expression', () => {
 	});
 
 	it('renders tsx element with boolean attributes', () => {
-		function App() {
-			return <>
-				let &[isDisabled] = track(true);
-				const el = <tsx>
-					<button disabled={isDisabled}>
-						{'btn'}
-					</button>
-				</tsx>;
+		function App() @{
+			let &[isDisabled] = track(true);
+			const el = <button disabled={isDisabled}>{'submit'}</button>;
+			<>
 				{el}
 				<button class="toggle" onClick={() => (isDisabled = !isDisabled)}>{'toggle'}</button>
-			</>;
+			</>
 		}
 
 		render(App);
@@ -338,15 +312,13 @@ describe('tsx expression', () => {
 	});
 
 	it('renders tsx element with style attribute', () => {
-		function App() {
-			return <>
-				let &[color] = track('red');
-				const el = <tsx>
-					<div style={'color: ' + color}>styled</div>
-				</tsx>;
+		function App() @{
+			let &[color] = track('red');
+			const el = <div style={{ color }}>{'content'}</div>;
+			<>
 				{el}
 				<button onClick={() => (color = 'blue')}>{'change color'}</button>
-			</>;
+			</>
 		}
 
 		render(App);
@@ -358,22 +330,20 @@ describe('tsx expression', () => {
 	});
 
 	it('renders tsx element with multiple dynamic attributes', () => {
-		function App() {
-			return <>
-				let &[index] = track(0);
-				const el = <tsx>
-					<div
-						id={'item-' + index}
-						class={'item pos-' + index}
-						data-index={index}
-						title={'Item ' + index}
-					>
-						{'Item ' + index}
-					</div>
-				</tsx>;
+		function App() @{
+			let &[index] = track(0);
+			const el = <div
+				id={'item-' + index}
+				class={'item pos-' + index}
+				data-index={index}
+				title={'Item ' + index}
+			>
+				{'Item ' + index}
+			</div>;
+			<>
 				{el}
 				<button onClick={() => index++}>{'next'}</button>
-			</>;
+			</>
 		}
 
 		render(App);
@@ -392,18 +362,12 @@ describe('tsx expression', () => {
 	});
 
 	it('renders fragment shorthand passed directly as component prop', () => {
-		function Wrapper(&{ content }: { content: any }) {
-			return <><div class="wrapper">{content}</div></>;
+		function Wrapper(&{ content }) @{
+			<div class="wrapper">{content}</div>
 		}
 
-		function App() {
-			return <>
-				<Wrapper
-					content={<tsx>
-						<span class="inner">direct prop</span>
-					</tsx>}
-				/>
-			</>;
+		function App() @{
+			<Wrapper content={<><span class="inner">direct prop</span></>} />
 		}
 
 		render(App);
@@ -414,26 +378,15 @@ describe('tsx expression', () => {
 	});
 
 	it('renders fragment shorthand passed directly as children prop', () => {
-		function Card(&{ title, children }: { title: any; children: any }) {
-			return <>
-				<div class="card">
-					<h2 class="card-title">{title}</h2>
-					<div class="card-body">{children}</div>
-				</div>
-			</>;
+		function Card(&{ title, children }) @{
+			<div class="card">
+				<h2 class="card-title">{title}</h2>
+				<div class="card-body">{children}</div>
+			</div>
 		}
 
-		function App() {
-			return <>
-				<Card
-					title={<tsx>
-						<span class="bold">Title</span>
-					</tsx>}
-					children={<tsx>
-						<p>Card content here</p>
-					</tsx>}
-				/>
-			</>;
+		function App() @{
+			<Card title={<><span class="bold">Title</span></>} children={<><p>Card content here</p></>} />
 		}
 
 		render(App);
@@ -443,17 +396,15 @@ describe('tsx expression', () => {
 	});
 
 	it('renders tsx from function defined outside component', () => {
-		function createBadge(label: string) {
-			return <tsx>
-				<span class="badge">{label}</span>
-			</tsx>;
+		function createBadge(label) @{
+			<span class="badge">{label}</span>
 		}
 
-		function App() {
-			return <>
-				const badge = createBadge('New');
+		function App() @{
+			const badge = createBadge('New');
+			<>
 				{badge}
-			</>;
+			</>
 		}
 
 		render(App);
@@ -462,21 +413,19 @@ describe('tsx expression', () => {
 	});
 
 	it('renders tsx from function with multiple elements', () => {
-		function createListItem(item: string) {
-			return <tsx>
-				<li class="list-item">{item}</li>
-			</tsx>;
+		function createListItem(item) @{
+			<li class="list-item">{item}</li>
 		}
 
-		function App() {
-			return <>
-				const items = ['Apple', 'Banana', 'Cherry'];
-				<ul>
-					for (const item of items) {
+		function App() @{
+			const items = ['Apple', 'Banana', 'Cherry'];
+			<ul>
+				@for (const item of items) {
+					<>
 						{createListItem(item)}
-					}
-				</ul>
-			</>;
+					</>
+				}
+			</ul>
 		}
 
 		render(App);
@@ -488,26 +437,24 @@ describe('tsx expression', () => {
 	});
 
 	it('renders tsx from factory function passed to component', () => {
-		function List(&{ renderItem, items }: { renderItem: (item: string) => any; items: string[] }) {
-			return <>
-				<ul class="list">
-					for (const item of items) {
+		function List(&{ renderItem, items }) @{
+			<ul class="list">
+				@for (const item of items) {
+					<>
 						{renderItem(item)}
-					}
-				</ul>
-			</>;
+					</>
+				}
+			</ul>
 		}
 
-		function itemRenderer(item: string) {
-			return <tsx>
-				<li>
-					<span class="item-content">{item}</span>
-				</li>
-			</tsx>;
+		function itemRenderer(item) @{
+			<li>
+				<span class="item-content">{item}</span>
+			</li>
 		}
 
-		function App() {
-			return <><List items={['One', 'Two', 'Three']} renderItem={itemRenderer} /></>;
+		function App() @{
+			<List items={['One', 'Two', 'Three']} renderItem={itemRenderer} />
 		}
 
 		render(App);
@@ -519,24 +466,20 @@ describe('tsx expression', () => {
 	});
 
 	it('renders tsx from function with reactive state', () => {
-		function createCounter(label: string, getCount: () => number) {
-			return <tsx>
-				<div class="counter-display">
-					<span class="label">{label}</span>
-					<span class="count">
-						{getCount()}
-					</span>
-				</div>
-			</tsx>;
+		function createCounter(label, getCount) @{
+			<div class="counter-display">
+				<span class="label">{label}</span>
+				<span class="count">{getCount()}</span>
+			</div>
 		}
 
-		function App() {
-			return <>
-				let &[count] = track(0);
-				const counterElement = createCounter('Count:', () => count);
+		function App() @{
+			let &[count] = track(0);
+			const counterElement = createCounter('Count:', () => count);
+			<>
 				{counterElement}
 				<button onClick={() => count++}>{'increment'}</button>
-			</>;
+			</>
 		}
 
 		render(App);
@@ -549,26 +492,22 @@ describe('tsx expression', () => {
 	});
 
 	it('renders nested tsx from multiple functions', () => {
-		function createIcon(name: string) {
-			return <tsx>
-				<i class={'icon icon-' + name}></i>
-			</tsx>;
+		function createIcon(name) @{
+			<i class={'icon icon-' + name} />
 		}
 
-		function createButton(icon: string, label: string) {
-			return <tsx>
-				<button class="icon-button">
-					{createIcon(icon)}
-					<span class="btn-label">{label}</span>
-				</button>
-			</tsx>;
+		function createButton(icon, label) @{
+			<button class="icon-button">
+				{createIcon(icon)}
+				<span class="btn-label">{label}</span>
+			</button>
 		}
 
-		function App() {
-			return <>
-				const btn = createButton('save', 'Save');
+		function App() @{
+			const btn = createButton('save', 'Save');
+			<>
 				{btn}
-			</>;
+			</>
 		}
 
 		render(App);
@@ -579,31 +518,31 @@ describe('tsx expression', () => {
 	});
 
 	it('renders deeply nested tsx and tsrx expression values', () => {
-		function HelperItem({ item }: { item: number }) {
-			return <><div class="helper-item">{item}</div></>;
+		function HelperItem({ item }) @{
+			<div class="helper-item">{item}</div>
 		}
 
-		function MakeFragment({ label }: { label: string }) {
-			return <>
+		function MakeFragment({ label }) @{
+			const test = <>
+				{[1, 2, 3, 4].map(
+					(item) => @{
+						<HelperItem {item} />
+					},
+				)}
+			</>;
+			<>
 				<span class="label">{label}</span>
-				const test = <tsx>
-					{[1, 2, 3, 4].map(
-						(item) => <tsx>
-							<HelperItem item={item} />
-						</tsx>,
-					)}
-				</tsx>;
 				{test}
-			</>;
+			</>
 		}
 
-		function App() {
-			return <>
-				{<tsx>
+		function App() @{
+			<>
+				<>
 					{[1, 2, 3].map((item) => <div class="app-item">{item}</div>)}
-				</tsx>}
+				</>
 				<MakeFragment label="from helper" />
-			</>;
+			</>
 		}
 
 		render(App);
@@ -622,19 +561,15 @@ describe('tsx expression', () => {
 	});
 
 	it('renders tsrx nested directly inside a top-level tsx expression value', () => {
-		function App() {
-			return <>
-				const content = <tsx>
-					<section class="outer">
-						{<>
-							<div class="inner">
-								{'from tsrx'}
-							</div>
-						</>}
-					</section>
-				</tsx>;
-				{content}
+		function App() @{
+			const content = <>
+				<section class="outer">
+					{<><div class="inner">{'from tsrx'}</div></>}
+				</section>
 			</>;
+			<>
+				{content}
+			</>
 		}
 
 		render(App);
@@ -645,21 +580,19 @@ describe('tsx expression', () => {
 	});
 
 	it('renders nested elements from tsrx inside a top-level tsx value', () => {
-		function App() {
-			return <>
-				const content = <tsx>
-					<div class="wrapper">
-						{<>
-							<section class="native">
-								<span class="nested-tsrx">
-									{'inside nested tsrx'}
-								</span>
-							</section>
-						</>}
-					</div>
-				</tsx>;
-				{content}
+		function App() @{
+			const content = <>
+				<div class="wrapper">
+					{<>
+						<section class="native">
+							<span class="nested-tsrx">{'inside nested tsrx'}</span>
+						</section>
+					</>}
+				</div>
 			</>;
+			<>
+				{content}
+			</>
 		}
 
 		render(App);
@@ -670,18 +603,12 @@ describe('tsx expression', () => {
 	});
 
 	it('renders tsx declared before a top-level tsx value', () => {
-		function App() {
-			return <>
-				const nested = <tsx>
-					<span class="nested-tsx">
-						{'inside nested tsx'}
-					</span>
-				</tsx>;
-				const content = <tsx>
-					<div class="native">{nested}</div>
-				</tsx>;
+		function App() @{
+			const nested = <span class="nested-tsx">{'inside nested tsx'}</span>;
+			const content = <><div class="native">{nested}</div></>;
+			<>
 				{content}
-			</>;
+			</>
 		}
 
 		render(App);
@@ -692,25 +619,18 @@ describe('tsx expression', () => {
 	});
 
 	it('renders tsx as prop with fallback in component', () => {
-		function Alert(&{ icon, message }: { icon?: any; message: string }) {
-			return <>
-				<div class="alert">
-					{icon}
-					<span class="message">{message}</span>
-				</div>
-			</>;
+		function Alert(&{ icon, message }) @{
+			<div class="alert">
+				{icon}
+				<span class="message">{message}</span>
+			</div>
 		}
 
-		function App() {
-			return <>
+		function App() @{
+			<>
 				<Alert message="No icon" />
-				<Alert
-					icon={<tsx>
-						<span class="custom-icon">✓</span>
-					</tsx>}
-					message="Custom icon"
-				/>
-			</>;
+				<Alert icon={<><span class="custom-icon">{'✓'}</span></>} message="Custom icon" />
+			</>
 		}
 
 		render(App);
@@ -721,25 +641,23 @@ describe('tsx expression', () => {
 	});
 
 	it('renders tsx stored in array via function', () => {
-		function createItem(className: string, content: string) {
-			return <tsx>
-				<div class={className}>{content}</div>
-			</tsx>;
-		}
-
-		function App() {
-			return <>
-				const items = [
-					{ className: 'item-a', content: 'A' },
-					{ className: 'item-b', content: 'B' },
-					{ className: 'item-c', content: 'C' },
-				];
-				<div class="container">
-					for (const item of items) {
+		function createItem(className, content) @{
+			<div class={className}>{content}</div>
+		}
+
+		function App() @{
+			const items = [
+				{ className: 'item-a', content: 'A' },
+				{ className: 'item-b', content: 'B' },
+				{ className: 'item-c', content: 'C' },
+			];
+			<div class="container">
+				@for (const item of items) {
+					<>
 						{createItem(item.className, item.content)}
-					}
-				</div>
-			</>;
+					</>
+				}
+			</div>
 		}
 
 		render(App);
@@ -750,28 +668,23 @@ describe('tsx expression', () => {
 	});
 
 	it('renders tsx conditionally from function', () => {
-		function createContent(type: string) {
-			if (type === 'success') {
-				return <tsx>
-					<div class="success">Success!</div>
-				</tsx>;
-			} else if (type === 'error') {
-				return <tsx>
-					<div class="error">Error!</div>
-				</tsx>;
-			}
-			return <tsx>
+		function createContent(type) @{
+			@if (type === 'success') {
+				<div class="success">Success!</div>
+			} @else if (type === 'error') {
+				<div class="error">Error!</div>
+			} @else {
 				<div class="default">Default</div>
-			</tsx>;
+			}
 		}
 
-		function App() {
-			return <>
-				let &[status] = track('default');
+		function App() @{
+			let &[status] = track('default');
+			<>
 				{createContent(status)}
 				<button class="set-success" onClick={() => (status = 'success')}>{'Success'}</button>
 				<button class="set-error" onClick={() => (status = 'error')}>{'Error'}</button>
-			</>;
+			</>
 		}
 
 		render(App);
@@ -790,12 +703,14 @@ describe('tsx expression', () => {
 });
 
 describe('tsrx expression', () => {
-	it('renders native double-quoted text in an assigned fragment', () => {
-		function App() {
-			return <>
-				const el = <><div>"Hello world"</div></>;
-				{el}
+	it('renders native JSX text in an assigned fragment', () => {
+		function App() @{
+			const el = <>
+				<div>Hello world</div>
 			</>;
+			<>
+				{el}
+			</>
 		}
 
 		render(App);
@@ -806,14 +721,14 @@ describe('tsrx expression', () => {
 	});
 
 	it('runs setup statements before native template output', () => {
-		function App() {
-			return <>
-				const el = <>
-					const label = 'from setup';
-					<div>{label}</div>
-				</>;
-				{el}
+		function App() @{
+			const label = 'from setup';
+			const el = <>
+				<div>{label}</div>
 			</>;
+			<>
+				{el}
+			</>
 		}
 
 		render(App);
@@ -822,13 +737,17 @@ describe('tsrx expression', () => {
 	});
 
 	it('updates reactive expressions inside native fragments', () => {
-		function App() {
-			return <>
-				let &[count] = track(0);
-				const el = <><div>{'count: ' + count}</div></>;
+		function App() @{
+			let &[count] = track(0);
+			const el = <>
+				<div>
+					{'count: ' + count}
+				</div>
+			</>;
+			<>
 				{el}
 				<button onClick={() => count++}>{'increment'}</button>
-			</>;
+			</>
 		}
 
 		render(App);
@@ -840,15 +759,15 @@ describe('tsrx expression', () => {
 	});
 
 	it('renders native control flow inside an assigned fragment', () => {
-		function App() {
-			return <>
-				const el = <>
-					if (true) {
-						<span>"visible"</span>
-					}
-				</>;
-				{el}
+		function App() @{
+			const el = <>
+				@if (true) {
+					<span>visible</span>
+				}
 			</>;
+			<>
+				{el}
+			</>
 		}
 
 		render(App);
@@ -857,12 +776,12 @@ describe('tsrx expression', () => {
 	});
 
 	it('renders fragments returned from component functions outside components', () => {
-		function MakeFragment({ label }: { label: string }) {
-			return <><span>{label}</span></>;
+		function MakeFragment({ label }) @{
+			<span>{label}</span>
 		}
 
-		function App() {
-			return <><MakeFragment label="from helper" /></>;
+		function App() @{
+			<MakeFragment label="from helper" />
 		}
 
 		render(App);