ripple 0.3.67 → 0.3.69

package/tests/server/compiler.test.tsrx

@@ -31,11 +31,11 @@ beforeAll(() => {
 	(global as any).count++;
 });
 
-component Test() {
+function Test() { return <>
 	let toggle: { value: boolean } | undefined;
 	toggle!.value = false;
 	toggle!.value++;
-}`;
+</>; }`;
 
 		const { code } = compile(source, 'test.tsrx', { mode: 'server' });
 
@@ -50,13 +50,13 @@ component Test() {
 	it(
 		'compiles writes to unknown lazy array index 1 through lazy array helpers in SSR output',
 		() => {
-			const source = `component Child({ pair: &[first, second] }) {
+			const source = `function Child({ pair: &[first, second] }) { return <>
 	second = 10;
 	<div>{first}</div>
-}
-component App() {
+</>; }
+function App() { return <>
 	<Child pair={[0, 1]} />
-}`;
+</>; }`;
 			const { code } = compile(source, 'test.tsrx', { mode: 'server' });
 
 			expect(code).toContain('_$_.lazy_array_set(lazy, 10, 1)');
@@ -65,13 +65,13 @@ component App() {
 	);
 
 	it('does not double-wrap member access on lazy array value bindings in SSR output', () => {
-		const source = `component Child({ pair: &[first] }) {
+		const source = `function Child({ pair: &[first] }) { return <>
 	let value = first[0];
 	<div>{value}</div>
-}
-component App() {
+</>; }
+function App() { return <>
 	<Child pair={[{ 0: 'x' }]} />
-}`;
+</>; }`;
 		const { code } = compile(source, 'test.tsrx', { mode: 'server' });
 
 		expect(code).toContain('let value = _$_.lazy_array_get(lazy, 0)[0];');
@@ -80,13 +80,13 @@ component App() {
 
 	it('throws on indexed access through known tracked lazy destructures in SSR output', () => {
 		const source = `import { track } from 'ripple';
-component App() {
+function App() { return <>
 	let &[value, tracked_ref] = track({ 0: 'x' });
 	let nested = value[0];
 	tracked_ref[0] = { 0: 'y' };
 	let next = value[0];
 	<div>{nested}{next}</div>
-}`;
+</>; }`;
 
 		expect(() => compile(source, 'test.tsrx', { mode: 'server' })).toThrow(
 			/Use \.value or &\[\] lazy destructuring/,
@@ -95,7 +95,7 @@ component App() {
 
 	it('throws on known tracked indexed access in SSR output', () => {
 		const source = `import { track } from 'ripple';
-component App() {
+function App() { return <>
 	let tracked = track(0);
 	++tracked[0];
 	tracked[0]++;
@@ -103,7 +103,7 @@ component App() {
 	let value = tracked[0];
 	let ref = tracked[1];
 	<div>{value}</div>
-}`;
+</>; }`;
 
 		expect(() => compile(source, 'test.tsrx', { mode: 'server' })).toThrow(
 			/Use \.value or &\[\] lazy destructuring/,
@@ -114,15 +114,15 @@ component App() {
 		'compiles indexed access on unknown lazy tracked refs through lazy array helpers in SSR output',
 		() => {
 			const source = `import { track } from 'ripple';
-component Child({ pair: &[value, tracked_ref] }) {
+function Child({ pair: &[value, tracked_ref] }) { return <>
 	++tracked_ref[0];
 	tracked_ref[0]++;
 	<div>{value}</div>
-}
-component App() {
+</>; }
+function App() { return <>
 	let tracked = track(0);
 	<Child pair={tracked} />
-}`;
+</>; }`;
 			const { code } = compile(source, 'test.tsrx', { mode: 'server' });
 
 			expect(code).toContain('_$_.lazy_array_get(lazy, 1)');
@@ -166,29 +166,29 @@ class PrintEvent implements BaseEvent {
 
 	it('throws error for interpolating children as text in SSR mode', () => {
 		const source = `
-export component Layout({ children }) {
+export function Layout({ children }) { return <>
 		<div>{children}</div>
-}`;
+</>; }`;
 
 		expect(() => compile(source, 'test.tsrx', { mode: 'server' })).not.toThrow();
 	});
 
 	it('throws error for interpolating props.children as text in SSR mode', () => {
 		const source = `
-export component Layout(props) {
+export function Layout(props) { return <>
 	<div>{props.children}</div>
-}`;
+</>; }`;
 
 		expect(() => compile(source, 'test.tsrx', { mode: 'server' })).not.toThrow();
 	});
 
 	it('compiles indented direct double-quoted text children in SSR mode', () => {
 		const source = `
-export default component A() {
+export default function A() { return <>
 	<div>
 		"Hello"
 	</div>
-}`;
+</>; }`;
 
 		const result = compile(source, 'test.tsrx', { mode: 'server' }).code;
 
@@ -198,9 +198,9 @@ export default component A() {
 
 	it('decodes JSX-style entities before server text escaping', () => {
 		const result = compile(
-			`component App() {
+			`function App() { return <>
 				<div>"Rock &amp; &quot;Roll&quot;"</div>
-			}`,
+			</>; }`,
 			'/src/App.tsrx',
 			{ mode: 'server' },
 		);
@@ -210,35 +210,39 @@ export default component A() {
 
 	it('emits anonymous component expressions as arrows in SSR output', () => {
 		const source = `
-const Inline = component(props) => {
+const Inline = (props) => <>
 	<div>{props.x}</div>
-}
+</>
 `;
 		const result = compile(source, 'anonymous-component.tsrx', { mode: 'server' }).code;
 
 		expect(result).toContain('const Inline = (props) => {');
+		expect(result).toContain('(props) => {');
+		expect(result).toContain('return _$_.tsrx_element(() =>');
 		expect(result).not.toContain('function Inline');
 		expect(result).not.toContain('function (props');
 	});
 
-	it('emits legacy anonymous component expressions as functions in SSR output', () => {
+	it('emits function-expression components as functions in SSR output', () => {
 		const source = `
-const Inline = component(props) {
+const Inline = function(props) { return <>
 	<div>{props.x}</div>
-}
+</>; }
 `;
 		const result = compile(source, 'anonymous-component.tsrx', { mode: 'server' }).code;
 
 		expect(result).toContain('const Inline = function (props) {');
+		expect(result).toContain('function (props) {');
+		expect(result).toContain('return _$_.tsrx_element(() =>');
 		expect(result).not.toContain('function Inline');
 		expect(result).not.toContain('const Inline = (props) => {');
 	});
 
 	it('throws error for calling children as a function in SSR mode', () => {
 		const source = `
-export component Layout({ children }) {
+export function Layout({ children }) { return <>
 	{children()}
-}`;
+</>; }`;
 
 		expect(() => compile(source, 'test.tsrx', { mode: 'server' })).toThrow(
 			'`children` cannot be called like a regular function. Render it with `{children}` or `{props.children}` instead.',
@@ -247,9 +251,9 @@ export component Layout({ children }) {
 
 	it('throws error for calling props.children as a function in SSR mode', () => {
 		const source = `
-export component Layout(props) {
+export function Layout(props) { return <>
 	{props.children()}
-}`;
+</>; }`;
 
 		expect(() => compile(source, 'test.tsrx', { mode: 'server' })).toThrow(
 			'`children` cannot be called like a regular function. Render it with `{children}` or `{props.children}` instead.',
@@ -258,17 +262,17 @@ export component Layout(props) {
 
 	it('merges explicit children prop with implicit children in SSR output', () => {
 		const source = `
-component Card(props) {
+function Card(props) { return <>
 	<div>{props.children}</div>
-}
+</>; }
 
-export component App() {
+export function App() { return <>
 	const fallback = 'fallback';
 
 	<Card children={fallback}>
 		<span>{'content'}</span>
 	</Card>
-}
+</>; }
 `;
 
 		const result = compile(source, 'test.tsrx', { mode: 'server' }).code;
@@ -280,7 +284,7 @@ export component App() {
 
 	it('routes calls to functions with nested template returns through render_expression', () => {
 		const source = `
-component App() {
+function App() { return <>
 	function make(flag) {
 		if (flag) {
 			return <tsx><span>{'nested'}</span></tsx>;
@@ -290,7 +294,7 @@ component App() {
 	}
 
 	<div>{make(true)}</div>
-}
+</>; }
 `;
 
 		const result = compile(source, 'test.tsrx', { mode: 'server' }).code;
@@ -301,7 +305,7 @@ component App() {
 
 	it('does not treat nested function template returns as outer function returns', () => {
 		const source = `
-component App() {
+function App() { return <>
 	function make() {
 		function nested() {
 			return <tsx><span>{'nested'}</span></tsx>;
@@ -311,7 +315,7 @@ component App() {
 	}
 
 	<div>{make()}</div>
-}
+</>; }
 `;
 
 		const result = compile(source, 'test.tsrx', { mode: 'server' }).code;
@@ -370,10 +374,10 @@ module server {
 
 import { loadUser as getUser } from server;
 
-export component App() {
+export function App() { return <>
 	const user = getUser('1');
 	<div>{user.id}</div>
-}`;
+</>; }`;
 
 		const result = compile(source, 'test.tsrx', { mode: 'server' });
 		expect(result.code).toContain('const getUser = function (...args)');
@@ -389,9 +393,7 @@ module server {
 
 server.loadUser();`;
 
-		expect(() => compile(source, 'test.tsrx', { mode: 'server' })).toThrowError(
-			/Import server exports/,
-		);
+		expect(() => compile(source, 'test.tsrx', { mode: 'server' })).toThrow(/Import server exports/);
 	});
 
 	it('throws error for unsupported exported object pattern in server module', () => {
@@ -402,7 +404,7 @@ module server {
 		export const { fn1, fn2 } = obj;
 }`;
 
-		expect(() => compile(source, 'test.tsrx', { mode: 'server' })).toThrowError();
+		expect(() => compile(source, 'test.tsrx', { mode: 'server' })).toThrow();
 	});
 
 	it('throws error for unsupported exported array pattern in server module', () => {
@@ -413,7 +415,7 @@ module server {
 		export const [fnarr1, fnarr2] = arr;
 }`;
 
-		expect(() => compile(source, 'test.tsrx', { mode: 'server' })).toThrowError();
+		expect(() => compile(source, 'test.tsrx', { mode: 'server' })).toThrow();
 	});
 
 	it('throws error for unsupported exported member expression via object in server module', () => {
@@ -424,7 +426,7 @@ module server {
 		export const objProp = obj.fn1;
 }`;
 
-		expect(() => compile(source, 'test.tsrx', { mode: 'server' })).toThrowError();
+		expect(() => compile(source, 'test.tsrx', { mode: 'server' })).toThrow();
 	});
 
 	it('throws error for unsupported exported member expression via array in server module', () => {
@@ -435,20 +437,20 @@ module server {
 		export const arrIndex0 = arr[0];
 }`;
 
-		expect(() => compile(source, 'test.tsrx', { mode: 'server' })).toThrowError();
+		expect(() => compile(source, 'test.tsrx', { mode: 'server' })).toThrow();
 	});
 
 	it('wraps children in normalize_children for explicit children prop passed to component', () => {
 		const source = `
-component Card(props) {
+function Card(props) { return <>
 	<div>{props.children}</div>
-}
+</>; }
 
-export component App() {
+export function App() { return <>
 	const content = 'hello';
 
 	<Card children={content} />
-}
+</>; }
 `;
 
 		const result = compile(source, 'test.tsrx', { mode: 'server' }).code;
@@ -458,15 +460,15 @@ export component App() {
 
 	it('passes spread through to component when spread may contain children', () => {
 		const source = `
-component Card(props) {
+function Card(props) { return <>
 	<div>{props.children}</div>
-}
+</>; }
 
-export component App() {
+export function App() { return <>
 	const props = { children: 'hello' };
 
 	<Card {...props} />
-}
+</>; }
 `;
 
 		const result = compile(source, 'test.tsrx', { mode: 'server' }).code;

package/tests/server/composite.props.test.tsrx

@@ -3,15 +3,16 @@ import type { Tracked, Props } from 'ripple';
 
 describe('composite > props', () => {
 	it('correctly handles default prop values', async () => {
-		component Child({ foo = 456 }) {
-			<div>{foo}</div>
+		function Child({ foo = 456 }) {
+			return <><div>{foo}</div></>;
 		}
 
-		component App() {
-			let &[foo] = track(123);
-
-			<Child />
-			<Child {foo} />
+		function App() {
+			return <>
+				let &[foo] = track(123);
+				<Child />
+				<Child {foo} />
+			</>;
 		}
 
 		const { body } = await render(App);
@@ -22,15 +23,16 @@ describe('composite > props', () => {
 	});
 
 	it('correctly handles default prop values #2', async () => {
-		component Child({ foo = 456 }) {
-			<div>{foo}</div>
+		function Child({ foo = 456 }) {
+			return <><div>{foo}</div></>;
 		}
 
-		component App() {
-			let foo = 123;
-
-			<Child />
-			<Child {foo} />
+		function App() {
+			return <>
+				let foo = 123;
+				<Child />
+				<Child {foo} />
+			</>;
 		}
 
 		const { body } = await render(App);
@@ -41,15 +43,16 @@ describe('composite > props', () => {
 	});
 
 	it('correctly handles no props', async () => {
-		component Child(props: { foo?: Tracked<number> }) {
-			<div>{props.foo?.value}</div>
+		function Child(props: { foo?: Tracked<number> }) {
+			return <><div>{props.foo?.value}</div></>;
 		}
 
-		component App() {
-			let foo = track(123);
-
-			<Child />
-			<Child {foo} />
+		function App() {
+			return <>
+				let foo = track(123);
+				<Child />
+				<Child {foo} />
+			</>;
 		}
 
 		const { body } = await render(App);
@@ -60,15 +63,16 @@ describe('composite > props', () => {
 	});
 
 	it('correctly handles no props #2', async () => {
-		component Child({ foo }: { foo?: number }) {
-			<div>{foo}</div>
+		function Child({ foo }: { foo?: number }) {
+			return <><div>{foo}</div></>;
 		}
 
-		component App() {
-			let &[foo] = track(123);
-
-			<Child />
-			<Child {foo} />
+		function App() {
+			return <>
+				let &[foo] = track(123);
+				<Child />
+				<Child {foo} />
+			</>;
 		}
 
 		const { body } = await render(App);
@@ -79,27 +83,33 @@ describe('composite > props', () => {
 	});
 
 	it('correctly retains prop accessors and reactivity when using rest props', async () => {
-		component Button(&{ children, ...rest }: Props) {
-			<button {...rest}>{children}</button>
-			<style>
-				.on {
-					color: blue;
-				}
-				.off {
-					color: red;
-				}
-			</style>
+		function Button(&{ children, ...rest }: Props) {
+			return <>
+				<button {...rest}>{children}</button>
+				<style>
+					.on {
+						color: blue;
+					}
+					.off {
+						color: red;
+					}
+				</style>
+			</>;
 		}
 
-		component Toggle(&{ pressed, ...rest }: { pressed: Tracked<boolean> }) {
-			const onClick = () => (pressed.value = !pressed.value);
-			<Button {...rest} class={pressed.value ? 'on' : 'off'} {onClick}>{'button 1'}</Button>
-			<Button class={pressed.value ? 'on' : 'off'} {onClick}>{'button 2'}</Button>
+		function Toggle(&{ pressed, ...rest }: { pressed: Tracked<boolean> }) {
+			return <>
+				const onClick = () => (pressed.value = !pressed.value);
+				<Button {...rest} class={pressed.value ? 'on' : 'off'} {onClick}>{'button 1'}</Button>
+				<Button class={pressed.value ? 'on' : 'off'} {onClick}>{'button 2'}</Button>
+			</>;
 		}
 
-		component App() {
-			const pressed = track(true);
-			<Toggle {pressed} />
+		function App() {
+			return <>
+				const pressed = track(true);
+				<Toggle {pressed} />
+			</>;
 		}
 
 		const { body } = await render(App);
@@ -122,26 +132,30 @@ describe('composite > props', () => {
 			price: number;
 		}
 
-		component Product({ id, name, organizationName, description, imageUrl, price }: ProductInfo) {
-			<article class="no-padding">
-				<img class="responsive small" src={imageUrl} alt={name} />
-				<span>{id}</span>
-				<h5>{name}</h5>
-				<h3>{organizationName}</h3>
-				<p>{description}</p>
-				<price class="price">{price}</price>
-			</article>
+		function Product({ id, name, organizationName, description, imageUrl, price }: ProductInfo) {
+			return <>
+				<article class="no-padding">
+					<img class="responsive small" src={imageUrl} alt={name} />
+					<span>{id}</span>
+					<h5>{name}</h5>
+					<h3>{organizationName}</h3>
+					<p>{description}</p>
+					<price class="price">{price}</price>
+				</article>
+			</>;
 		}
 
-		component App() {
-			<Product
-				id="1"
-				name="Product 1"
-				organizationName="Org 1"
-				description="Description 1"
-				imageUrl="https://picsum.photos/300/200"
-				price={15}
-			/>
+		function App() {
+			return <>
+				<Product
+					id="1"
+					name="Product 1"
+					organizationName="Org 1"
+					description="Description 1"
+					imageUrl="https://picsum.photos/300/200"
+					price={15}
+				/>
+			</>;
 		}
 
 		const { body } = await render(App);