ripple 0.3.72 → 0.3.76

package/tests/server/basic.components.test.tsrx

@@ -1,4 +1,4 @@
-import { track } from 'ripple';
+import { Dynamic, track } from 'ripple';
 import type {
 	Tracked,
 	PropsWithChildren,
@@ -18,17 +18,16 @@ describe('basic server > components & composition', () => {
 	}
 
 	it('renders with component composition and children', async () => {
-		function Card(props: PropsWithChildren<{}>) {
-			return <><div class="card">{props.children}</div></>;
+		function Card(props: PropsWithChildren<{}>) @{
+			<div class="card">{props.children}</div>
 		}
 
-		function Basic() {
-			return <>
-				function children() {
-					return <><p>{'Card content here'}</p></>;
-				}
-				<Card {children} />
-			</>;
+		function children() @{
+			<p>{'Card content here'}</p>
+		}
+
+		function Basic() @{
+			<Card {children} />
 		}
 
 		const { body } = await render(Basic);
@@ -42,21 +41,16 @@ describe('basic server > components & composition', () => {
 	});
 
 	it('does not render a falsy component call', async () => {
-		function Card(props: PropsWithChildrenOptional<{ test: Component }>) {
-			return <>
-				<div class="card">
-					{props.children}
-				</div>
-			</>;
+		function Card(props: PropsWithChildrenOptional<{ test: Component }>) @{
+			<div class="card">{props.children}</div>
 		}
 
-		function Basic() {
-			return <>
-				function test() {
-					return <><p>{'Card content here'}</p></>;
-				}
-				<Card {test} />
-			</>;
+		function test() {
+			return null;
+		}
+
+		function Basic() @{
+			<Card {test} />
 		}
 
 		const { body } = await render(Basic);
@@ -71,17 +65,16 @@ describe('basic server > components & composition', () => {
 	});
 
 	it('renders a component when children is set a component prop', async () => {
-		function Card(props: PropsWithChildren<{}>) {
-			return <><div class="card">{props.children}</div></>;
+		function Card(props: PropsWithChildren<{}>) @{
+			<div class="card">{props.children}</div>
 		}
 
-		function Basic() {
-			return <>
-				function children() {
-					return <><p>{'Card content here'}</p></>;
-				}
-				<Card {children} />
-			</>;
+		function children() @{
+			<p>{'Card content here'}</p>
+		}
+
+		function Basic() @{
+			<Card {children} />
 		}
 
 		const { body } = await render(Basic);
@@ -95,12 +88,14 @@ describe('basic server > components & composition', () => {
 	});
 
 	it('renders direct component function calls as values', async () => {
-		function Test({ label }: { label: string }) {
-			return <><span>{label}</span></>;
+		function Test({ label }: { label: string }) @{
+			<span>{label}</span>
 		}
 
-		function App() {
-			return <>{Test({ label: 'direct call' })}</>;
+		function App() @{
+			<>
+				{Test({ label: 'direct call' })}
+			</>
 		}
 
 		const { body } = await render(App);
@@ -115,8 +110,8 @@ describe('basic server > components & composition', () => {
 			return [item, 'B', null, undefined];
 		}
 
-		function App() {
-			return <><Test /></>;
+		function App() @{
+			<Test />
 		}
 
 		const { body } = await render(App);
@@ -126,13 +121,13 @@ describe('basic server > components & composition', () => {
 	});
 
 	it('throws when a TSRXElement value is used as a component type', async () => {
-		function Test() {
-			return <><span>{'value'}</span></>;
+		function Test() @{
+			<span>{'value'}</span>
 		}
 
-		function App() {
+		function App() @{
 			const El = Test({});
-			return <><El /></>;
+			<El />
 		}
 
 		const result = await render_expected_invalid_component(App);
@@ -145,8 +140,8 @@ describe('basic server > components & composition', () => {
 			return 'plain';
 		}
 
-		function App() {
-			return <><Func /></>;
+		function App() @{
+			<Func />
 		}
 
 		const { body } = await render(App);
@@ -155,12 +150,12 @@ describe('basic server > components & composition', () => {
 	});
 
 	it('allows a compat-only function as a component type', async () => {
-		function CompatOnly() {
-			return <><div>{'compat'}</div></>;
+		function CompatOnly() @{
+			<div>{'compat'}</div>
 		}
 
-		function App() {
-			return <><CompatOnly /></>;
+		function App() @{
+			<CompatOnly />
 		}
 
 		const { body } = await render(App);
@@ -173,8 +168,8 @@ describe('basic server > components & composition', () => {
 			variant: string;
 			label: string;
 			onClick: EventListener;
-		}>) {
-			return <><button class={props.variant} onClick={props.onClick}>{props.label}</button></>;
+		}>) @{
+			<button class={props.variant} onClick={props.onClick}>{props.label}</button>
 		}
 
 		function Card(props: PropsWithExtras<{
@@ -182,27 +177,27 @@ describe('basic server > components & composition', () => {
 			content: string;
 			buttonText: string;
 			onAction: EventListener;
-		}>) {
-			return <>
-				<div class="card">
-					<h3>{props.title}</h3>
-					<p>{props.content}</p>
-					<Button variant="primary" label={props.buttonText} onClick={props.onAction} />
-				</div>
-			</>;
+		}>) @{
+			<div class="card">
+				<h3>{props.title}</h3>
+				<p>{props.content}</p>
+				<Button variant="primary" label={props.buttonText} onClick={props.onAction} />
+			</div>
 		}
 
-		function Basic() {
-			return <>
-				let &[clicked] = track(false);
+		function Basic() @{
+			let &[clicked] = track(false);
+			<>
 				<Card
 					title="Test Card"
 					content="This is a test card"
 					buttonText="Click me"
 					onAction={() => (clicked = true)}
 				/>
-				<div class="status">{clicked ? 'Clicked' : 'Not clicked'}</div>
-			</>;
+				<div class="status">
+					{clicked ? 'Clicked' : 'Not clicked'}
+				</div>
+			</>
 		}
 
 		const { body } = await render(Basic);
@@ -225,27 +220,25 @@ describe('basic server > components & composition', () => {
 		function ChildComponent(props: PropsWithExtras<{
 			text: Tracked<string>;
 			count: Tracked<number>;
-		}>) {
-			return <>
+		}>) @{
+			<>
 				<div class="child-content">{props.text.value}</div>
 				<div class="child-count">{props.count.value}</div>
-			</>;
+			</>
 		}
 
-		function Basic() {
-			return <>
-				let &[message, messageTracked] = track('Hello');
-				let &[number, numberTracked] = track(1);
+		function Basic() @{
+			let &[message, messageTracked] = track('Hello');
+			let &[number, numberTracked] = track(1);
+			<>
 				<ChildComponent text={messageTracked} count={numberTracked} />
 				<button
 					onClick={() => {
 						message = message === 'Hello' ? 'Goodbye' : 'Hello';
 						number++;
 					}}
-				>
-					{'Update Props'}
-				</button>
-			</>;
+				>{'Update Props'}</button>
+			</>
 		}
 
 		const { body } = await render(Basic);
@@ -259,16 +252,16 @@ describe('basic server > components & composition', () => {
 	});
 
 	it('renders components as named and anonymous properties', async () => {
-		function Span() {
-			return <><span>{'Hello from Span'}</span></>;
+		function Span() @{
+			<span>{'Hello from Span'}</span>
 		}
 
-		function Button({ children }: PropsWithChildren<{}>) {
-			return <><button>{children}</button></>;
+		function Button({ children }: PropsWithChildren<{}>) @{
+			<button>{children}</button>
 		}
 
-		function ArrowButton({ children }: PropsWithChildren<{}>) {
-			return <><button class="arrow-button">{children}</button></>;
+		function ArrowButton({ children }: PropsWithChildren<{}>) @{
+			<button class="arrow-button">{children}</button>
 		}
 
 		const UI = {
@@ -277,18 +270,17 @@ describe('basic server > components & composition', () => {
 			arrowButton: ArrowButton,
 		};
 
-		function App() {
-			return <>
-				function children() {
-					return <><span>{'Click me!'}</span></>;
-				}
-				<div>
-					<h1>{'Component as Property Test'}</h1>
-					<UI.span />
-					<UI.button {children} />
-					<UI.arrowButton {children} />
-				</div>
-			</>;
+		function children() @{
+			<span>{'Click me!'}</span>
+		}
+
+		function App() @{
+			<div>
+				<h1>{'Component as Property Test'}</h1>
+				<UI.span />
+				<UI.button {children} />
+				<UI.arrowButton {children} />
+			</div>
 		}
 
 		const { body } = await render(App);
@@ -308,16 +300,18 @@ describe('basic server > components & composition', () => {
 	});
 
 	it('handles empty string children', async () => {
-		function Button({ children }: PropsWithChildren<{}>) {
-			return <>{children}</>;
+		function Button({ children }: PropsWithChildren<{}>) @{
+			<>
+				{children}
+			</>
 		}
 
-		function App() {
-			return <>
-				let content = '';
+		function App() @{
+			let content = '';
+			<>
 				<Button>{''}</Button>
 				<Button>{content}</Button>
-			</>;
+			</>
 		}
 
 		const { body } = await render(App);
@@ -328,18 +322,16 @@ describe('basic server > components & composition', () => {
 
 	it('handles component without any output', async () => {
 		function Noop() {
-			return <></>;
+			return null;
 		}
 
-		function Op() {
-			return <><div>{'Some HTML content'}</div></>;
+		function Op() @{
+			<div>{'Some HTML content'}</div>
 		}
 
-		function App() {
-			return <>
-				let Content = track(() => Noop);
-				<@Content />
-			</>;
+		function App() @{
+			let Content = track(() => Noop);
+			<Dynamic is={Content} />
 		}
 
 		const { body } = await render(App);
@@ -349,12 +341,12 @@ describe('basic server > components & composition', () => {
 	});
 
 	it('renders explicit children prop without spread', async () => {
-		function Card(props: PropsWithChildren<{}>) {
-			return <><div class="card">{props.children}</div></>;
+		function Card(props: PropsWithChildren<{}>) @{
+			<div class="card">{props.children}</div>
 		}
 
-		function App() {
-			return <><Card children="fallback text" /></>;
+		function App() @{
+			<Card children="fallback text" />
 		}
 
 		const { body } = await render(App);
@@ -363,15 +355,13 @@ describe('basic server > components & composition', () => {
 	});
 
 	it('renders explicit children before spread', async () => {
-		function Card(props: PropsWithChildren<{ id: string }>) {
-			return <><div class="card">{props.children}</div></>;
+		function Card(props: PropsWithChildren<{ id: string }>) @{
+			<div class="card">{props.children}</div>
 		}
 
-		function App() {
-			return <>
-				const extra = { id: '1' };
-				<Card children="fallback text" {...extra} />
-			</>;
+		function App() @{
+			const extra = { id: '1' };
+			<Card children="fallback text" {...extra} />
 		}
 
 		const { body } = await render(App);
@@ -380,15 +370,13 @@ describe('basic server > components & composition', () => {
 	});
 
 	it('renders spread before explicit children', async () => {
-		function Card(props: PropsWithChildren<{ id: string }>) {
-			return <><div class="card">{props.children}</div></>;
+		function Card(props: PropsWithChildren<{ id: string }>) @{
+			<div class="card">{props.children}</div>
 		}
 
-		function App() {
-			return <>
-				const extra = { id: '1' };
-				<Card {...extra} children="fallback text" />
-			</>;
+		function App() @{
+			const extra = { id: '1' };
+			<Card {...extra} children="fallback text" />
 		}
 
 		const { body } = await render(App);
@@ -397,17 +385,15 @@ describe('basic server > components & composition', () => {
 	});
 
 	it('template children override explicit children before spread', async () => {
-		function Card(props: PropsWithChildren<{ id: string }>) {
-			return <><div class="card">{props.children}</div></>;
+		function Card(props: PropsWithChildren<{ id: string }>) @{
+			<div class="card">{props.children}</div>
 		}
 
-		function App() {
-			return <>
-				const extra = { id: '1' };
-				<Card children="fallback text" {...extra}>
-					<span>{'template content'}</span>
-				</Card>
-			</>;
+		function App() @{
+			const extra = { id: '1' };
+			<Card children="fallback text" {...extra}>
+				<span>{'template content'}</span>
+			</Card>
 		}
 
 		const { body } = await render(App);
@@ -417,17 +403,15 @@ describe('basic server > components & composition', () => {
 	});
 
 	it('template children override explicit children after spread', async () => {
-		function Card(props: PropsWithChildren<{ id: string }>) {
-			return <><div class="card">{props.children}</div></>;
+		function Card(props: PropsWithChildren<{ id: string }>) @{
+			<div class="card">{props.children}</div>
 		}
 
-		function App() {
-			return <>
-				const extra = { id: '1' };
-				<Card {...extra} children="fallback text">
-					<span>{'template content'}</span>
-				</Card>
-			</>;
+		function App() @{
+			const extra = { id: '1' };
+			<Card {...extra} children="fallback text">
+				<span>{'template content'}</span>
+			</Card>
 		}
 
 		const { body } = await render(App);
@@ -437,19 +421,13 @@ describe('basic server > components & composition', () => {
 	});
 
 	it('spread can override explicit children when no template children', async () => {
-		function Card(props: PropsWithChildren<{ id: string }>) {
-			return <><div class="card">{props.children}</div></>;
+		function Card(props: PropsWithChildren<{ id: string }>) @{
+			<div class="card">{props.children}</div>
 		}
 
-		function App() {
-			return <>
-				const extra = { id: '1', children: 'from spread' };
-				<Card
-					// @ts-ignore
-					children="explicit"
-					{...extra}
-				/>
-			</>;
+		function App() @{
+			const extra = { id: '1', children: 'from spread' };
+			<Card children="explicit" {...extra} />
 		}
 
 		const { body } = await render(App);
@@ -458,15 +436,13 @@ describe('basic server > components & composition', () => {
 	});
 
 	it('explicit children overrides spread children when it comes after', async () => {
-		function Card(props: PropsWithChildren<{ id: string }>) {
-			return <><div class="card">{props.children}</div></>;
+		function Card(props: PropsWithChildren<{ id: string }>) @{
+			<div class="card">{props.children}</div>
 		}
 
-		function App() {
-			return <>
-				const extra = { id: '1', children: 'from spread' };
-				<Card {...extra} children="explicit" />
-			</>;
+		function App() @{
+			const extra = { id: '1', children: 'from spread' };
+			<Card {...extra} children="explicit" />
 		}
 
 		const { body } = await render(App);
@@ -475,20 +451,18 @@ describe('basic server > components & composition', () => {
 	});
 
 	it('renders components declared inside composite element children', async () => {
-		function Wrapper(props: PropsWithChildren<{}>) {
-			return <><div class="wrapper">{props.children}</div></>;
+		function Wrapper(props: PropsWithChildren<{}>) @{
+			<div class="wrapper">{props.children}</div>
 		}
 
-		function App() {
-			return <>
-				<Wrapper>
-					function Inner() {
-						return <><span class="inner">{'inner content'}</span></>;
-					}
+		function Inner() @{
+			<div class="inner">{'inner content'}</div>
+		}
 
-					<Inner />
-				</Wrapper>
-			</>;
+		function App() @{
+			<Wrapper>
+				<Inner />
+			</Wrapper>
 		}
 
 		const { body } = await render(App);
@@ -497,29 +471,25 @@ describe('basic server > components & composition', () => {
 	});
 
 	it('renders nested components declared inside composite children with prop passing', async () => {
-		function Wrapper(props: PropsWithChildren<{}>) {
-			return <><div class="wrapper">{props.children}</div></>;
-		}
-
-		function App() {
-			return <>
-				<Wrapper>
-					function Z() {
-						return <><div class="z">{'I am Z'}</div></>;
-					}
-
-					function Child(&{ Z }: { Z: Component }) {
-						return <>
-							<div class="child">
-								{'Child Component: '}
-								<Z />
-							</div>
-						</>;
-					}
-
-					<Child {Z} />
-				</Wrapper>
-			</>;
+		function Wrapper(props: PropsWithChildren<{}>) @{
+			<div class="wrapper">{props.children}</div>
+		}
+
+		function Z() @{
+			<span class="z">{'I am Z'}</span>
+		}
+
+		function Child(props: { Z: Component }) @{
+			<div class="child">
+				{'Child Component: '}
+				<props.Z />
+			</div>
+		}
+
+		function App() @{
+			<Wrapper>
+				<Child {Z} />
+			</Wrapper>
 		}
 
 		const { body } = await render(App);