ripple 0.3.68 → 0.3.69

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

@@ -10,16 +10,17 @@ import { did_error } from '../capture-error.js';
 
 describe('basic client > components & composition', () => {
 	it('renders with component composition and children', () => {
-		component Card(props: PropsWithChildren<{}>) {
-			<div class="card">{props.children}</div>
+		function Card(props: PropsWithChildren<{}>) {
+			return <><div class="card">{props.children}</div></>;
 		}
 
-		component Basic() {
-			component children() {
-				<p>{'Card content here'}</p>
-			}
-
-			<Card {children} />
+		function Basic() {
+			return <>
+				function children() {
+					return <><p>{'Card content here'}</p></>;
+				}
+				<Card {children} />
+			</>;
 		}
 
 		render(Basic);
@@ -32,20 +33,23 @@ describe('basic client > components & composition', () => {
 	});
 
 	it('does not render a falsy component call', () => {
-		component Card(props: PropsWithChildrenOptional<{ test?: Component }>) {
-			<div class="card">
-				if (props.children) {
-					{props.children}
+		function Card(props: PropsWithChildrenOptional<{ test?: Component }>) {
+			return <>
+				<div class="card">
+					if (props.children) {
+						{props.children}
+					}
+				</div>
+			</>;
+		}
+
+		function Basic() {
+			return <>
+				function test() {
+					return <><p>{'Card content here'}</p></>;
 				}
-			</div>
-		}
-
-		component Basic() {
-			component test() {
-				<p>{'Card content here'}</p>
-			}
-
-			<Card {test} />
+				<Card {test} />
+			</>;
 		}
 
 		render(Basic);
@@ -58,23 +62,25 @@ describe('basic client > components & composition', () => {
 	});
 
 	it('allows tracked variables alongside explicit component props', () => {
-		component Card(props: PropsWithChildrenOptional<{ test?: Component }>) {
-			<div class="card">
-				if (props.children) {
-					{props.children}
+		function Card(props: PropsWithChildrenOptional<{ test?: Component }>) {
+			return <>
+				<div class="card">
+					if (props.children) {
+						{props.children}
+					}
+				</div>
+			</>;
+		}
+
+		function Basic() {
+			return <>
+				let &[test] = track(false);
+				function TestSlot() {
+					return <><p>{'Card content here'}</p></>;
 				}
-			</div>
-		}
-
-		component Basic() {
-			let &[test] = track(false);
-
-			component TestSlot() {
-				<p>{'Card content here'}</p>
-			}
-
-			<Card test={TestSlot} />
-			<div>{test ? 'yes' : 'no'}</div>
+				<Card test={TestSlot} />
+				<div>{test ? 'yes' : 'no'}</div>
+			</>;
 		}
 
 		render(Basic);
@@ -88,15 +94,17 @@ describe('basic client > components & composition', () => {
 	});
 
 	it('renders a component when children is set a component prop', () => {
-		component Card(props: PropsWithChildren<{}>) {
-			<div class="card">{props.children}</div>
+		function Card(props: PropsWithChildren<{}>) {
+			return <><div class="card">{props.children}</div></>;
 		}
 
-		component Basic() {
-			component children() {
-				<p>{'Card content here'}</p>
-			}
-			<Card {children} />
+		function Basic() {
+			return <>
+				function children() {
+					return <><p>{'Card content here'}</p></>;
+				}
+				<Card {children} />
+			</>;
 		}
 
 		render(Basic);
@@ -108,38 +116,115 @@ describe('basic client > components & composition', () => {
 		expect(paragraph.textContent).toBe('Card content here');
 	});
 
+	it('renders direct component function calls as values', () => {
+		function Test({ label }: { label: string }) {
+			return <><span>{label}</span></>;
+		}
+
+		function App() {
+			return <>{Test({ label: 'direct call' })}</>;
+		}
+
+		render(App);
+
+		expect(container.querySelector('span')?.textContent).toBe('direct call');
+	});
+
+	it('renders arrays and primitives returned from component calls', () => {
+		function Test() {
+			const item = <span>{'A'}</span>;
+			return [item, 'B', null, undefined];
+		}
+
+		function App() {
+			return <><Test /></>;
+		}
+
+		render(App);
+
+		expect(container.textContent).toBe('AB');
+	});
+
+	it('throws when a TSRXElement value is used as a component type', () => {
+		function Test() {
+			return <><span>{'value'}</span></>;
+		}
+
+		function App() {
+			const El = Test({});
+			return <><El /></>;
+		}
+
+		expect(() => render(App)).toThrow('Invalid component type');
+	});
+
+	it('allows a plain function as a component type', () => {
+		function Func() {
+			return 'plain';
+		}
+
+		function App() {
+			return <><Func /></>;
+		}
+
+		render(App);
+
+		expect(container.textContent).toBe('plain');
+	});
+
+	it('allows a compat-only function as a component type', () => {
+		function CompatOnly() {
+			return <tsx>
+				<div>
+					{'compat'}
+				</div>
+			</tsx>;
+		}
+
+		function App() {
+			return <><CompatOnly /></>;
+		}
+
+		render(App);
+
+		expect(container.textContent).toBe('compat');
+	});
+
 	it('renders with nested components and prop passing', () => {
-		component Button(props: PropsWithExtras<{
+		function Button(props: PropsWithExtras<{
 			variant: string;
 			label: string;
 			onClick: EventListener;
 		}>) {
-			<button class={props.variant} onClick={props.onClick}>{props.label}</button>
+			return <><button class={props.variant} onClick={props.onClick}>{props.label}</button></>;
 		}
 
-		component Card(props: PropsWithExtras<{
+		function Card(props: PropsWithExtras<{
 			title: string;
 			content: string;
 			buttonText: string;
 			onAction: EventListener;
 		}>) {
-			<div class="card">
-				<h3>{props.title}</h3>
-				<p>{props.content}</p>
-				<Button variant="primary" label={props.buttonText} onClick={props.onAction} />
-			</div>
-		}
-
-		component 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>
+			return <>
+				<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);
+				<Card
+					title="Test Card"
+					content="This is a test card"
+					buttonText="Click me"
+					onAction={() => (clicked = true)}
+				/>
+				<div class="status">{clicked ? 'Clicked' : 'Not clicked'}</div>
+			</>;
 		}
 
 		render(Basic);
@@ -163,27 +248,30 @@ describe('basic client > components & composition', () => {
 	});
 
 	it('renders with reactive component props', () => {
-		component ChildComponent(props: PropsWithExtras<{
+		function ChildComponent(props: PropsWithExtras<{
 			text: Tracked<string>;
 			count: Tracked<number>;
 		}>) {
-			<div class="child-content">{props.text.value}</div>
-			<div class="child-count">{props.count.value}</div>
-		}
-
-		component 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>
+			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);
+				<ChildComponent text={messageTracked} count={numberTracked} />
+				<button
+					onClick={() => {
+						message = message === 'Hello' ? 'Goodbye' : 'Hello';
+						number++;
+					}}
+				>
+					{'Update Props'}
+				</button>
+			</>;
 		}
 
 		render(Basic);
@@ -209,15 +297,16 @@ describe('basic client > components & composition', () => {
 	});
 
 	it('updates explicit text children props reactively', () => {
-		component TextProp(&{ children }: PropsWithChildren<{}>) {
-			<div class="text-prop">{children}</div>
+		function TextProp(&{ children }: PropsWithChildren<{}>) {
+			return <><div class="text-prop">{children}</div></>;
 		}
 
-		component Basic() {
-			let &[show] = track(false);
-
-			<TextProp children={show ? 'hello' : ''} />
-			<button class="show-text" onClick={() => (show = true)}>{'Show'}</button>
+		function Basic() {
+			return <>
+				let &[show] = track(false);
+				<TextProp children={show ? 'hello' : ''} />
+				<button class="show-text" onClick={() => (show = true)}>{'Show'}</button>
+			</>;
 		}
 
 		render(Basic);
@@ -231,7 +320,7 @@ describe('basic client > components & composition', () => {
 	});
 
 	it('it retains this context with bracketed prop functions and keeps original chaining', () => {
-		component App() {
+		function App() {
 			const SYMBOL_PROP = Symbol();
 			let &[hasError] = track(false);
 			const obj: {
@@ -280,16 +369,17 @@ describe('basic client > components & composition', () => {
 				});
 			}
 
-			<button onClick={() => obj['increment']()}>{'Increment'}</button>
-			<button onClick={() => obj[SYMBOL_PROP]()}>{'Increment'}</button>
-			<button onClick={trigger_nonexistent}>{'Nonexistent'}</button>
-			<button onClick={trigger_nonexistent_chaining}>{'Nonexistent chaining'}</button>
-			<button onClick={trigger_object_null}>{'Object null'}</button>
-			<button onClick={trigger_object_null_chained}>{'Object null chained'}</button>
-			<button onClick={() => obj.arr[obj.arr.length - 1]()}>{'BinaryExpression prop'}</button>
-
-			<span>{obj.count.value}</span>
-			<span>{hasError}</span>
+			return <>
+				<button onClick={() => obj['increment']()}>{'Increment'}</button>
+				<button onClick={() => obj[SYMBOL_PROP]()}>{'Increment'}</button>
+				<button onClick={trigger_nonexistent}>{'Nonexistent'}</button>
+				<button onClick={trigger_nonexistent_chaining}>{'Nonexistent chaining'}</button>
+				<button onClick={trigger_object_null}>{'Object null'}</button>
+				<button onClick={trigger_object_null_chained}>{'Object null chained'}</button>
+				<button onClick={() => obj.arr[obj.arr.length - 1]()}>{'BinaryExpression prop'}</button>
+				<span>{obj.count.value}</span>
+				<span>{hasError}</span>
+			</>;
 		}
 
 		render(App);
@@ -340,29 +430,36 @@ describe('basic client > components & composition', () => {
 	});
 
 	it('renders components as named and anonymous properties', () => {
+		function Span() {
+			return <><span>{'Hello from Span'}</span></>;
+		}
+
+		function Button({ children }: PropsWithChildren<{}>) {
+			return <><button>{children}</button></>;
+		}
+
+		function ArrowButton({ children }: PropsWithChildren<{}>) {
+			return <><button class="arrow-button">{children}</button></>;
+		}
+
 		const UI = {
-			span: component Span() {
-				<span>{'Hello from Span'}</span>
-			},
-			button: component({ children }: PropsWithChildren<{}>) {
-				<button>{children}</button>
-			},
-			arrowButton: component({ children }: PropsWithChildren<{}>) => {
-				<button class="arrow-button">{children}</button>
-			},
+			span: Span,
+			button: Button,
+			arrowButton: ArrowButton,
 		};
 
-		component App() {
-			component children() {
-				<span>{'Click me!'}</span>
-			}
-
-			<div>
-				<h1>{'Component as Property Test'}</h1>
-				<UI.span />
-				<UI.button {children} />
-				<UI.arrowButton {children} />
-			</div>
+		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>
+			</>;
 		}
 
 		render(App);
@@ -381,14 +478,16 @@ describe('basic client > components & composition', () => {
 	});
 
 	it('handles empty string children', () => {
-		component Button({ children }: PropsWithChildren<{}>) {
-			{children}
+		function Button({ children }: PropsWithChildren<{}>) {
+			return <>{children}</>;
 		}
 
-		component App() {
-			let content = '';
-			<Button>{''}</Button>
-			<Button>{content}</Button>
+		function App() {
+			return <>
+				let content = '';
+				<Button>{''}</Button>
+				<Button>{content}</Button>
+			</>;
 		}
 
 		expect(() => {
@@ -397,19 +496,20 @@ describe('basic client > components & composition', () => {
 	});
 
 	it('handles component without any output', () => {
-		component Noop() {
-			// No output
+		function Noop() {
+			return <></>;
 		}
 
-		component Op() {
-			<div>{'Some HTML content'}</div>
+		function Op() {
+			return <><div>{'Some HTML content'}</div></>;
 		}
 
-		component App() {
-			let &[Content] = track(() => Noop);
-			<@Content />
-
-			<button onClick={() => (Content = Op)}>{'Show Op'}</button>
+		function App() {
+			return <>
+				let &[Content] = track(() => Noop);
+				<@Content />
+				<button onClick={() => (Content = Op)}>{'Show Op'}</button>
+			</>;
 		}
 
 		render(App);
@@ -422,12 +522,12 @@ describe('basic client > components & composition', () => {
 	});
 
 	it('renders explicit children prop without spread', () => {
-		component Card(props: PropsWithChildren<{}>) {
-			<div class="card">{props.children}</div>
+		function Card(props: PropsWithChildren<{}>) {
+			return <><div class="card">{props.children}</div></>;
 		}
 
-		component App() {
-			<Card children="fallback text" />
+		function App() {
+			return <><Card children="fallback text" /></>;
 		}
 
 		render(App);
@@ -435,13 +535,15 @@ describe('basic client > components & composition', () => {
 	});
 
 	it('renders explicit children before spread', () => {
-		component Card(props: PropsWithChildren<{ id: string }>) {
-			<div class="card">{props.children}</div>
+		function Card(props: PropsWithChildren<{ id: string }>) {
+			return <><div class="card">{props.children}</div></>;
 		}
 
-		component App() {
-			const extra = { id: '1' };
-			<Card children="fallback text" {...extra} />
+		function App() {
+			return <>
+				const extra = { id: '1' };
+				<Card children="fallback text" {...extra} />
+			</>;
 		}
 
 		render(App);
@@ -449,13 +551,15 @@ describe('basic client > components & composition', () => {
 	});
 
 	it('renders spread before explicit children', () => {
-		component Card(props: PropsWithChildren<{ id: string }>) {
-			<div class="card">{props.children}</div>
+		function Card(props: PropsWithChildren<{ id: string }>) {
+			return <><div class="card">{props.children}</div></>;
 		}
 
-		component App() {
-			const extra = { id: '1' };
-			<Card {...extra} children="fallback text" />
+		function App() {
+			return <>
+				const extra = { id: '1' };
+				<Card {...extra} children="fallback text" />
+			</>;
 		}
 
 		render(App);
@@ -463,15 +567,17 @@ describe('basic client > components & composition', () => {
 	});
 
 	it('template children override explicit children before spread', () => {
-		component Card(props: PropsWithChildren<{ id: string }>) {
-			<div class="card">{props.children}</div>
+		function Card(props: PropsWithChildren<{ id: string }>) {
+			return <><div class="card">{props.children}</div></>;
 		}
 
-		component App() {
-			const extra = { id: '1' };
-			<Card children="fallback text" {...extra}>
-				<span>{'template content'}</span>
-			</Card>
+		function App() {
+			return <>
+				const extra = { id: '1' };
+				<Card children="fallback text" {...extra}>
+					<span>{'template content'}</span>
+				</Card>
+			</>;
 		}
 
 		render(App);
@@ -480,15 +586,17 @@ describe('basic client > components & composition', () => {
 	});
 
 	it('template children override explicit children after spread', () => {
-		component Card(props: PropsWithChildren<{ id: string }>) {
-			<div class="card">{props.children}</div>
+		function Card(props: PropsWithChildren<{ id: string }>) {
+			return <><div class="card">{props.children}</div></>;
 		}
 
-		component App() {
-			const extra = { id: '1' };
-			<Card {...extra} children="fallback text">
-				<span>{'template content'}</span>
-			</Card>
+		function App() {
+			return <>
+				const extra = { id: '1' };
+				<Card {...extra} children="fallback text">
+					<span>{'template content'}</span>
+				</Card>
+			</>;
 		}
 
 		render(App);
@@ -497,17 +605,19 @@ describe('basic client > components & composition', () => {
 	});
 
 	it('spread can override explicit children when no template children', () => {
-		component Card(props: PropsWithChildren<{ id: string }>) {
-			<div class="card">{props.children}</div>
+		function Card(props: PropsWithChildren<{ id: string }>) {
+			return <><div class="card">{props.children}</div></>;
 		}
 
-		component App() {
-			const extra = { id: '1', children: 'from spread' };
-			<Card
-				// @ts-expect-error children specified more than once
-				children="explicit"
-				{...extra}
-			/>
+		function App() {
+			return <>
+				const extra = { id: '1', children: 'from spread' };
+				<Card
+					// @ts-expect-error children specified more than once
+					children="explicit"
+					{...extra}
+				/>
+			</>;
 		}
 
 		render(App);
@@ -515,13 +625,15 @@ describe('basic client > components & composition', () => {
 	});
 
 	it('explicit children overrides spread children when it comes after', () => {
-		component Card(props: PropsWithChildren<{ id: string }>) {
-			<div class="card">{props.children}</div>
+		function Card(props: PropsWithChildren<{ id: string }>) {
+			return <><div class="card">{props.children}</div></>;
 		}
 
-		component App() {
-			const extra = { id: '1', children: 'from spread' };
-			<Card {...extra} children="explicit" />
+		function App() {
+			return <>
+				const extra = { id: '1', children: 'from spread' };
+				<Card {...extra} children="explicit" />
+			</>;
 		}
 
 		render(App);
@@ -529,18 +641,20 @@ describe('basic client > components & composition', () => {
 	});
 
 	it('renders components declared inside composite element children', () => {
-		component Wrapper(props: PropsWithChildren<{}>) {
-			<div class="wrapper">{props.children}</div>
+		function Wrapper(props: PropsWithChildren<{}>) {
+			return <><div class="wrapper">{props.children}</div></>;
 		}
 
-		component App() {
-			<Wrapper>
-				component Inner() {
-					<span class="inner">{'inner content'}</span>
-				}
+		function App() {
+			return <>
+				<Wrapper>
+					function Inner() {
+						return <><span class="inner">{'inner content'}</span></>;
+					}
 
-				<Inner />
-			</Wrapper>
+					<Inner />
+				</Wrapper>
+			</>;
 		}
 
 		render(App);
@@ -548,25 +662,29 @@ describe('basic client > components & composition', () => {
 	});
 
 	it('renders nested components declared inside composite children with prop passing', () => {
-		component Wrapper(props: PropsWithChildren<{}>) {
-			<div class="wrapper">{props.children}</div>
-		}
-
-		component App() {
-			<Wrapper>
-				component Z() {
-					<div class="z">{'I am Z'}</div>
-				}
-
-				component Child(&{ Z }: { Z: Component }) {
-					<div class="child">
-						{'Child Component: '}
-						<Z />
-					</div>
-				}
-
-				<Child {Z} />
-			</Wrapper>
+		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>
+			</>;
 		}
 
 		render(App);