ripple 0.3.72 → 0.3.74

package/tests/client/tsx.test.tsrx

@@ -2,53 +2,51 @@ import { flushSync, track } from 'ripple';
 
 describe('tsx expression', () => {
 	it('renders an empty <></> element', () => {
-		function App() {
-			return <>
-				<></>
-			</>;
+		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 <></> assigned to a variable', () => {
-		function App() {
-			return <>
-				const el = <></>;
+		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 = <><div>"hello world"</div></>;
-				{el}
+		function App() @{
+			const el = <>
+				<div>{'hello world'}</div>
 			</>;
+			<>
+				{el}
+			</>
 		}
 		render(App);
 		expect(container.textContent).toBe('hello world');
@@ -56,8 +54,8 @@ describe('tsx expression', () => {
 	});
 
 	it('applies scoped classes inside tsx blocks and fragment shorthand', () => {
-		function App() {
-			return <>
+		function App() @{
+			<>
 				<>
 					<div class="card">
 						<h2>{'tsx block'}</h2>
@@ -77,7 +75,7 @@ describe('tsx expression', () => {
 						color: red;
 					}
 				</style>
-			</>;
+			</>
 		}
 
 		render(App);
@@ -102,11 +100,11 @@ describe('tsx expression', () => {
 	});
 
 	it('renders a tsx element assigned to a variable', () => {
-		function App() {
-			return <>
-				const el = <><span class="test">"content"</span></>;
+		function App() @{
+			const el = <span class="test">{'content'}</span>;
+			<>
 				{el}
-			</>;
+			</>
 		}
 		render(App);
 		const span = container.querySelector('span.test');
@@ -115,14 +113,14 @@ describe('tsx expression', () => {
 	});
 
 	it('renders a tsx element with multiple children', () => {
-		function App() {
-			return <>
-				const el = <>
-					<div>"first"</div>
-					<div>"second"</div>
-				</>;
-				{el}
+		function App() @{
+			const el = <>
+				<div>first</div>
+				<div>second</div>
 			</>;
+			<>
+				{el}
+			</>
 		}
 		render(App);
 		const divs = container.querySelectorAll('div');
@@ -132,15 +130,15 @@ describe('tsx expression', () => {
 	});
 
 	it('renders a tsx element with nested elements', () => {
-		function App() {
-			return <>
-				const el = <>
-					<div class="outer">
-						<span class="inner">"nested"</span>
-					</div>
-				</>;
-				{el}
+		function App() @{
+			const el = <>
+				<div class="outer">
+					<span class="inner">nested</span>
+				</div>
 			</>;
+			<>
+				{el}
+			</>
 		}
 		render(App);
 		const outer = container.querySelector('div.outer');
@@ -151,11 +149,9 @@ describe('tsx expression', () => {
 	});
 
 	it('renders a tsx element inline in a parent element', () => {
-		function App() {
-			return <>
-				const el = <><span>"inline"</span></>;
-				<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');
@@ -165,17 +161,17 @@ describe('tsx expression', () => {
 	});
 
 	it('renders a tsx element with reactive expressions', () => {
-		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);
 		expect(container.querySelector('div').textContent).toBe('count: 0');
@@ -186,15 +182,17 @@ describe('tsx expression', () => {
 	});
 
 	it('conditionally renders tsx elements', () => {
-		function App() {
-			return <>
-				let &[show] = track(true);
-				const el = <><div class="tsx-content">"visible"</div></>;
-				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();
@@ -209,15 +207,13 @@ describe('tsx expression', () => {
 	});
 
 	it('renders tsx element passed as children prop', () => {
-		function Child(&{ children }) {
-			return <><div class="wrapper">{children}</div></>;
+		function Child(&{ children }) @{
+			<div class="wrapper">{children}</div>
 		}
 
-		function App() {
-			return <>
-				const el = <><span>"from tsx"</span></>;
-				<Child children={el} />
-			</>;
+		function App() @{
+			const el = <span>{'from tsx'}</span>;
+			<Child children={el} />
 		}
 		render(App);
 		const wrapper = container.querySelector('.wrapper');
@@ -227,11 +223,11 @@ describe('tsx expression', () => {
 	});
 
 	it('renders tsx element with text content only', () => {
-		function App() {
-			return <>
-				const el = <>"just text"</>;
+		function App() @{
+			const el = <>just text</>;
+			<>
 				{el}
-			</>;
+			</>
 		}
 
 		render(App);
@@ -239,13 +235,13 @@ describe('tsx expression', () => {
 	});
 
 	it('renders tsx element with static attributes', () => {
-		function App() {
-			return <>
-				const el = <>
-					<div id="my-id" class="my-class" data-testid="test" aria-label="label">"content"</div>
-				</>;
+		function App() @{
+			const el = <div id="my-id" class="my-class" data-testid="test" aria-label="label">
+				content
+			</div>;
+			<>
 				{el}
-			</>;
+			</>
 		}
 
 		render(App);
@@ -257,13 +253,13 @@ describe('tsx expression', () => {
 	});
 
 	it('renders tsx element with dynamic attribute values', () => {
-		function App() {
-			return <>
-				let &[name] = track('initial');
-				const el = <><div id={name} class={'cls-' + name}>"content"</div></>;
+		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);
@@ -278,13 +274,15 @@ describe('tsx expression', () => {
 	});
 
 	it('renders tsx element with event handlers', () => {
-		function App() {
-			return <>
-				let &[clicked] = track(false);
-				const el = <><button onClick={() => (clicked = true)}>{'click me'}</button></>;
+		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);
@@ -296,13 +294,13 @@ describe('tsx expression', () => {
 	});
 
 	it('renders tsx element with boolean attributes', () => {
-		function App() {
-			return <>
-				let &[isDisabled] = track(true);
-				const el = <><button disabled={isDisabled}>{'btn'}</button></>;
+		function App() @{
+			let &[isDisabled] = track(true);
+			const el = <button disabled={isDisabled}>{'submit'}</button>;
+			<>
 				{el}
 				<button class="toggle" onClick={() => (isDisabled = !isDisabled)}>{'toggle'}</button>
-			</>;
+			</>
 		}
 
 		render(App);
@@ -314,13 +312,13 @@ describe('tsx expression', () => {
 	});
 
 	it('renders tsx element with style attribute', () => {
-		function App() {
-			return <>
-				let &[color] = track('red');
-				const el = <><div style={'color: ' + color}>"styled"</div></>;
+		function App() @{
+			let &[color] = track('red');
+			const el = <div style={{ color }}>{'content'}</div>;
+			<>
 				{el}
 				<button onClick={() => (color = 'blue')}>{'change color'}</button>
-			</>;
+			</>
 		}
 
 		render(App);
@@ -332,22 +330,20 @@ describe('tsx expression', () => {
 	});
 
 	it('renders tsx element with multiple dynamic attributes', () => {
-		function App() {
-			return <>
-				let &[index] = track(0);
-				const el = <>
-					<div
-						id={'item-' + index}
-						class={'item pos-' + index}
-						data-index={index}
-						title={'Item ' + index}
-					>
-						{'Item ' + index}
-					</div>
-				</>;
+		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);
@@ -366,12 +362,12 @@ describe('tsx expression', () => {
 	});
 
 	it('renders fragment shorthand passed directly as component prop', () => {
-		function Wrapper(&{ content }) {
-			return <><div class="wrapper">{content}</div></>;
+		function Wrapper(&{ content }) @{
+			<div class="wrapper">{content}</div>
 		}
 
-		function App() {
-			return <><Wrapper content={<><span class="inner">"direct prop"</span></>} /></>;
+		function App() @{
+			<Wrapper content={<><span class="inner">direct prop</span></>} />
 		}
 
 		render(App);
@@ -382,22 +378,15 @@ describe('tsx expression', () => {
 	});
 
 	it('renders fragment shorthand passed directly as children prop', () => {
-		function Card(&{ title, children }) {
-			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={<><span class="bold">"Title"</span></>}
-					children={<><p>"Card content here"</p></>}
-				/>
-			</>;
+		function App() @{
+			<Card title={<><span class="bold">Title</span></>} children={<><p>Card content here</p></>} />
 		}
 
 		render(App);
@@ -407,15 +396,15 @@ describe('tsx expression', () => {
 	});
 
 	it('renders tsx from function defined outside component', () => {
-		function createBadge(label) {
-			return <><span class="badge">{label}</span></>;
+		function createBadge(label) @{
+			<span class="badge">{label}</span>
 		}
 
-		function App() {
-			return <>
-				const badge = createBadge('New');
+		function App() @{
+			const badge = createBadge('New');
+			<>
 				{badge}
-			</>;
+			</>
 		}
 
 		render(App);
@@ -424,19 +413,19 @@ describe('tsx expression', () => {
 	});
 
 	it('renders tsx from function with multiple elements', () => {
-		function createListItem(item) {
-			return <><li class="list-item">{item}</li></>;
+		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);
@@ -448,26 +437,24 @@ describe('tsx expression', () => {
 	});
 
 	it('renders tsx from factory function passed to component', () => {
-		function List(&{ renderItem, items }) {
-			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) {
-			return <>
-				<li>
-					<span class="item-content">{item}</span>
-				</li>
-			</>;
+		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);
@@ -479,24 +466,20 @@ describe('tsx expression', () => {
 	});
 
 	it('renders tsx from function with reactive state', () => {
-		function createCounter(label, getCount) {
-			return <>
-				<div class="counter-display">
-					<span class="label">{label}</span>
-					<span class="count">
-						{getCount()}
-					</span>
-				</div>
-			</>;
+		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);
@@ -509,24 +492,22 @@ describe('tsx expression', () => {
 	});
 
 	it('renders nested tsx from multiple functions', () => {
-		function createIcon(name) {
-			return <><i class={'icon icon-' + name} /></>;
+		function createIcon(name) @{
+			<i class={'icon icon-' + name} />
 		}
 
-		function createButton(icon, label) {
-			return <>
-				<button class="icon-button">
-					{createIcon(icon)}
-					<span class="btn-label">{label}</span>
-				</button>
-			</>;
+		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);
@@ -537,23 +518,31 @@ describe('tsx expression', () => {
 	});
 
 	it('renders deeply nested tsx and tsrx expression values', () => {
-		function HelperItem({ item }) {
-			return <><div class="helper-item">{item}</div></>;
+		function HelperItem({ item }) @{
+			<div class="helper-item">{item}</div>
 		}
 
-		function MakeFragment({ label }) {
-			return <>
+		function MakeFragment({ label }) @{
+			const test = <>
+				{[1, 2, 3, 4].map(
+					(item) => @{
+						<HelperItem {item} />
+					},
+				)}
+			</>;
+			<>
 				<span class="label">{label}</span>
-				const test = <>{[1, 2, 3, 4].map((item) => <><HelperItem {item} /></>)}</>;
 				{test}
-			</>;
+			</>
 		}
 
-		function App() {
-			return <>
-				{<>{[1, 2, 3].map((item) => <div class="app-item">{item}</div>)}</>}
+		function App() @{
+			<>
+				<>
+					{[1, 2, 3].map((item) => <div class="app-item">{item}</div>)}
+				</>
 				<MakeFragment label="from helper" />
-			</>;
+			</>
 		}
 
 		render(App);
@@ -572,15 +561,15 @@ describe('tsx expression', () => {
 	});
 
 	it('renders tsrx nested directly inside a top-level tsx expression value', () => {
-		function App() {
-			return <>
-				const content = <>
-					<section class="outer">
-						{<><div class="inner">{'from tsrx'}</div></>}
-					</section>
-				</>;
-				{content}
+		function App() @{
+			const content = <>
+				<section class="outer">
+					{<><div class="inner">{'from tsrx'}</div></>}
+				</section>
 			</>;
+			<>
+				{content}
+			</>
 		}
 
 		render(App);
@@ -591,19 +580,19 @@ describe('tsx expression', () => {
 	});
 
 	it('renders nested elements from tsrx inside a top-level tsx value', () => {
-		function App() {
-			return <>
-				const content = <>
-					<div class="wrapper">
-						{<>
-							<section class="native">
-								<span class="nested-tsrx">{'inside nested tsrx'}</span>
-							</section>
-						</>}
-					</div>
-				</>;
-				{content}
+		function App() @{
+			const content = <>
+				<div class="wrapper">
+					{<>
+						<section class="native">
+							<span class="nested-tsrx">{'inside nested tsrx'}</span>
+						</section>
+					</>}
+				</div>
 			</>;
+			<>
+				{content}
+			</>
 		}
 
 		render(App);
@@ -614,12 +603,12 @@ describe('tsx expression', () => {
 	});
 
 	it('renders tsx declared before a top-level tsx value', () => {
-		function App() {
-			return <>
-				const nested = <><span class="nested-tsx">{'inside nested tsx'}</span></>;
-				const content = <><div class="native">{nested}</div></>;
+		function App() @{
+			const nested = <span class="nested-tsx">{'inside nested tsx'}</span>;
+			const content = <><div class="native">{nested}</div></>;
+			<>
 				{content}
-			</>;
+			</>
 		}
 
 		render(App);
@@ -630,20 +619,18 @@ describe('tsx expression', () => {
 	});
 
 	it('renders tsx as prop with fallback in component', () => {
-		function Alert(&{ icon, message }) {
-			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={<><span class="custom-icon">"✓"</span></>} message="Custom icon" />
-			</>;
+				<Alert icon={<><span class="custom-icon">{'✓'}</span></>} message="Custom icon" />
+			</>
 		}
 
 		render(App);
@@ -654,23 +641,23 @@ describe('tsx expression', () => {
 	});
 
 	it('renders tsx stored in array via function', () => {
-		function createItem(className, content) {
-			return <><div class={className}>{content}</div></>;
-		}
-
-		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);
@@ -681,22 +668,23 @@ describe('tsx expression', () => {
 	});
 
 	it('renders tsx conditionally from function', () => {
-		function createContent(type) {
-			if (type === 'success') {
-				return <><div class="success">"Success!"</div></>;
-			} else if (type === 'error') {
-				return <><div class="error">"Error!"</div></>;
+		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>
 			}
-			return <><div class="default">"Default"</div></>;
 		}
 
-		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);
@@ -715,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);
@@ -731,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);
@@ -747,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);
@@ -765,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);
@@ -782,12 +776,12 @@ describe('tsrx expression', () => {
 	});
 
 	it('renders fragments returned from component functions outside components', () => {
-		function MakeFragment({ label }) {
-			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);