ripple 0.3.72 → 0.3.76

package/tests/server/compiler.test.tsrx

@@ -15,9 +15,9 @@ const errorMap = new ErrorMap();`;
 
 	it('removes type assertions from function parameters and leaves default values', () => {
 		const source = `
-function getString(e: string = 'test') {
-	return e;
-}`;
+	function getString(e: string = 'test') {
+		return e;
+	}`;
 
 		const result = compile(source, 'test.tsrx', { mode: 'server' });
 
@@ -31,11 +31,11 @@ beforeAll(() => {
 	(global as any).count++;
 });
 
-function Test() { return <>
-	let toggle: { value: boolean } | undefined;
-	toggle!.value = false;
-	toggle!.value++;
-</>; }`;
+	function Test() @{
+		let toggle: { value: boolean } | undefined;
+		toggle!.value = false;
+		toggle!.value++;
+	}`;
 
 		const { code } = compile(source, 'test.tsrx', { mode: 'server' });
 
@@ -50,13 +50,13 @@ function Test() { return <>
 	it(
 		'compiles writes to unknown lazy array index 1 through lazy array helpers in SSR output',
 		() => {
-			const source = `function Child({ pair: &[first, second] }) { return <>
+			const source = `function Child({ pair: &[first, second] }) @{
 	second = 10;
 	<div>{first}</div>
-</>; }
-function App() { return <>
+			}
+function App() @{
 	<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 @@ function App() { return <>
 	);
 
 	it('does not double-wrap member access on lazy array value bindings in SSR output', () => {
-		const source = `function Child({ pair: &[first] }) { return <>
+		const source = `function Child({ pair: &[first] }) @{
 	let value = first[0];
 	<div>{value}</div>
-</>; }
-function App() { return <>
+		}
+function App() @{
 	<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 @@ function App() { return <>
 
 	it('throws on indexed access through known tracked lazy destructures in SSR output', () => {
 		const source = `import { track } from 'ripple';
-function App() { return <>
+function App() @{
 	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 @@ function App() { return <>
 
 	it('throws on known tracked indexed access in SSR output', () => {
 		const source = `import { track } from 'ripple';
-function App() { return <>
+function App() @{
 	let tracked = track(0);
 	++tracked[0];
 	tracked[0]++;
@@ -103,7 +103,7 @@ function App() { return <>
 	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 @@ function App() { return <>
 		'compiles indexed access on unknown lazy tracked refs through lazy array helpers in SSR output',
 		() => {
 			const source = `import { track } from 'ripple';
-function Child({ pair: &[value, tracked_ref] }) { return <>
+function Child({ pair: &[value, tracked_ref] }) @{
 	++tracked_ref[0];
 	tracked_ref[0]++;
 	<div>{value}</div>
-</>; }
-function App() { return <>
+}
+function App() @{
 	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 function Layout({ children }) { return <>
+export function Layout({ children }) @{
 		<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 function Layout(props) { return <>
+export function Layout(props) @{
 	<div>{props.children}</div>
-</>; }`;
+}`;
 
 		expect(() => compile(source, 'test.tsrx', { mode: 'server' })).not.toThrow();
 	});
 
-	it('compiles indented direct double-quoted text children in SSR mode', () => {
+	it('compiles indented direct JSX text children in SSR mode', () => {
 		const source = `
-export default function A() { return <>
+export default function A() @{
 	<div>
-		"Hello"
+		Hello
 	</div>
-</>; }`;
+}`;
 
 		const result = compile(source, 'test.tsrx', { mode: 'server' }).code;
 
@@ -196,11 +196,81 @@ export default function A() { return <>
 		expect(result).not.toContain(`"Hello";`);
 	});
 
+	it('does not merge adjacent call-containing children into stringified text in SSR output', () => {
+		const setup = `function child(label) {
+	<span>{label}</span>
+}
+function Constructed(label) {
+	return child(label);
+}
+const factory = child;
+function identity(value) {
+	return value;
+}
+function empty() {
+	return null;
+}
+let assigned;
+const lookup = { member: child('member') };
+function getKey() {
+	return 'member';
+}
+function touch() {
+	return null;
+}
+function tag() {
+	return child('tagged');
+}
+const values = { member: 0 };`;
+
+		const cases = [
+			{ name: 'call expression', expression: 'child(\'call\')' },
+			{ name: 'new expression', expression: 'new Constructed(\'new\')' },
+			{ name: 'chain expression', expression: 'factory?.(\'chain\')' },
+			{ name: 'parenthesized expression', expression: '(child(\'parenthesized\'))' },
+			{ name: 'TS as expression', expression: 'child(\'as\') as any' },
+			{ name: 'TS non-null expression', expression: 'child(\'non-null\')!' },
+			{ name: 'TS satisfies expression', expression: 'child(\'satisfies\') satisfies any' },
+			{
+				name: 'TS instantiation expression',
+				expression: 'identity<typeof child>(child)(\'instantiation\')',
+			},
+			{ name: 'array expression', expression: '[child(\'array\')]' },
+			{ name: 'assignment expression', expression: 'assigned = child(\'assignment\')' },
+			{ name: 'binary expression', expression: 'empty() + \'\'' },
+			{ name: 'logical expression', expression: 'true && child(\'logical\')' },
+			{ name: 'conditional expression', expression: 'true ? child(\'conditional\') : \'\'' },
+			{ name: 'member expression', expression: 'lookup[getKey()]' },
+			{
+				name: 'object expression',
+				expression: '{ [Symbol.for(\'ripple.element\')]: true, render() { return child(\'object\'); } }',
+			},
+			{ name: 'sequence expression', expression: '(touch(), child(\'sequence\'))' },
+			{ name: 'tagged template expression', expression: 'tag`tagged`' },
+			{ name: 'template literal', expression: '`${empty()}`' },
+			{ name: 'unary expression', expression: 'void empty()' },
+			{ name: 'update expression', expression: 'values[getKey()]++' },
+		];
+
+		for (const test_case of cases) {
+			const source = `${setup}
+export function App() @{
+		<div>{'${test_case.name}:'}{${test_case.expression}}</div>
+}`;
+
+			const { code } = compile(source, `${test_case.name}.tsrx`, { mode: 'server' });
+
+			if (code.includes('String(')) {
+				throw new Error(`${test_case.name} was merged into a stringified text expression:\n${code}`);
+			}
+		}
+	});
+
 	it('decodes JSX-style entities before server text escaping', () => {
 		const result = compile(
-			`function App() { return <>
-				<div>"Rock &amp; &quot;Roll&quot;"</div>
-			</>; }`,
+			`function App() @{
+				<div>Rock &amp; &quot;Roll&quot;</div>
+			}`,
 			'/src/App.tsrx',
 			{ mode: 'server' },
 		);
@@ -210,10 +280,10 @@ export default function A() { return <>
 
 	it('emits anonymous component expressions as arrows in SSR output', () => {
 		const source = `
-const Inline = (props) => <>
-	<div>{props.x}</div>
-</>
-`;
+	const Inline = (props) => @{
+		<div>{props.x}</div>
+	}
+	`;
 		const result = compile(source, 'anonymous-component.tsrx', { mode: 'server' }).code;
 
 		expect(result).toContain('const Inline = (props) => {');
@@ -225,9 +295,9 @@ const Inline = (props) => <>
 
 	it('emits function-expression components as functions in SSR output', () => {
 		const source = `
-const Inline = function(props) { return <>
+const Inline = function(props) @{
 	<div>{props.x}</div>
-</>; }
+}
 `;
 		const result = compile(source, 'anonymous-component.tsrx', { mode: 'server' }).code;
 
@@ -240,9 +310,9 @@ const Inline = function(props) { return <>
 
 	it('throws error for calling children as a function in SSR mode', () => {
 		const source = `
-export function Layout({ children }) { return <>
+export function Layout({ children }) @{
 	{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.',
@@ -251,9 +321,9 @@ export function Layout({ children }) { return <>
 
 	it('throws error for calling props.children as a function in SSR mode', () => {
 		const source = `
-export function Layout(props) { return <>
+export function Layout(props) @{
 	{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.',
@@ -262,17 +332,17 @@ export function Layout(props) { return <>
 
 	it('merges explicit children prop with implicit children in SSR output', () => {
 		const source = `
-function Card(props) { return <>
+function Card(props) @{
 	<div>{props.children}</div>
-</>; }
+}
 
-export function App() { return <>
+export function App() @{
 	const fallback = 'fallback';
 
 	<Card children={fallback}>
 		<span>{'content'}</span>
 	</Card>
-</>; }
+}
 `;
 
 		const result = compile(source, 'test.tsrx', { mode: 'server' }).code;
@@ -284,18 +354,18 @@ export function App() { return <>
 
 	it('routes calls to functions with nested template returns through render_expression', () => {
 		const source = `
-function App() { return <>
 	function make(flag) {
 		if (flag) {
-			return <><span>{'nested'}</span></>;
+			return <span>{'nested'}</span>;
 		}
 
 		return null;
 	}
 
-	<div>{make(true)}</div>
-</>; }
-`;
+	function App() @{
+		<div>{make(true)}</div>
+	}
+	`;
 
 		const result = compile(source, 'test.tsrx', { mode: 'server' }).code;
 
@@ -305,23 +375,23 @@ function App() { return <>
 
 	it('does not treat nested function template returns as outer function returns', () => {
 		const source = `
-function App() { return <>
 	function make() {
-		function nested() {
-			return <><span>{'nested'}</span></>;
+		function nested() @{
+			<span>{'nested'}</span>
 		}
 
 		return nested;
 	}
 
-	<div>{make()}</div>
-</>; }
-`;
+	function App() @{
+		<div>{make()}</div>
+	}
+	`;
 
 		const result = compile(source, 'test.tsrx', { mode: 'server' }).code;
 
-		expect(result).toContain('_$_.output_push(_$_.escape(make()))');
-		expect(result).not.toContain('_$_.render_expression(make())');
+		expect(result).toContain('_$_.render_expression(make())');
+		expect(result).not.toContain('_$_.render_tsrx_element(make())');
 	});
 });
 
@@ -374,10 +444,10 @@ module server {
 
 import { loadUser as getUser } from server;
 
-export function App() { return <>
+export function App() @{
 	const user = getUser('1');
 	<div>{user.id}</div>
-</>; }`;
+}`;
 
 		const result = compile(source, 'test.tsrx', { mode: 'server' });
 		expect(result.code).toContain('const getUser = function (...args)');
@@ -442,15 +512,15 @@ module server {
 
 	it('wraps children in normalize_children for explicit children prop passed to component', () => {
 		const source = `
-function Card(props) { return <>
+function Card(props) @{
 	<div>{props.children}</div>
-</>; }
+}
 
-export function App() { return <>
+export function App() @{
 	const content = 'hello';
 
 	<Card children={content} />
-</>; }
+}
 `;
 
 		const result = compile(source, 'test.tsrx', { mode: 'server' }).code;
@@ -460,15 +530,15 @@ export function App() { return <>
 
 	it('passes spread through to component when spread may contain children', () => {
 		const source = `
-function Card(props) { return <>
+function Card(props) @{
 	<div>{props.children}</div>
-</>; }
+}
 
-export function App() { return <>
+export function App() @{
 	const props = { children: 'hello' };
 
 	<Card {...props} />
-</>; }
+}
 `;
 
 		const result = compile(source, 'test.tsrx', { mode: 'server' }).code;

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

@@ -3,16 +3,16 @@ import type { Tracked, Props } from 'ripple';
 
 describe('composite > props', () => {
 	it('correctly handles default prop values', async () => {
-		function Child({ foo = 456 }) {
-			return <><div>{foo}</div></>;
+		function Child({ foo = 456 }) @{
+			<div>{foo}</div>
 		}
 
-		function App() {
-			return <>
-				let &[foo] = track(123);
+		function App() @{
+			let &[foo] = track(123);
+			<>
 				<Child />
 				<Child {foo} />
-			</>;
+			</>
 		}
 
 		const { body } = await render(App);
@@ -23,16 +23,16 @@ describe('composite > props', () => {
 	});
 
 	it('correctly handles default prop values #2', async () => {
-		function Child({ foo = 456 }) {
-			return <><div>{foo}</div></>;
+		function Child({ foo = 456 }) @{
+			<div>{foo}</div>
 		}
 
-		function App() {
-			return <>
-				let foo = 123;
+		function App() @{
+			let foo = 123;
+			<>
 				<Child />
 				<Child {foo} />
-			</>;
+			</>
 		}
 
 		const { body } = await render(App);
@@ -43,16 +43,18 @@ describe('composite > props', () => {
 	});
 
 	it('correctly handles no props', async () => {
-		function Child(props: { foo?: Tracked<number> }) {
-			return <><div>{props.foo?.value}</div></>;
+		function Child(props: { foo?: Tracked<number> }) @{
+			<div>
+				{props.foo?.value}
+			</div>
 		}
 
-		function App() {
-			return <>
-				let foo = track(123);
+		function App() @{
+			let foo = track(123);
+			<>
 				<Child />
 				<Child {foo} />
-			</>;
+			</>
 		}
 
 		const { body } = await render(App);
@@ -63,16 +65,16 @@ describe('composite > props', () => {
 	});
 
 	it('correctly handles no props #2', async () => {
-		function Child({ foo }: { foo?: number }) {
-			return <><div>{foo}</div></>;
+		function Child({ foo }: { foo?: number }) @{
+			<div>{foo}</div>
 		}
 
-		function App() {
-			return <>
-				let &[foo] = track(123);
+		function App() @{
+			let &[foo] = track(123);
+			<>
 				<Child />
 				<Child {foo} />
-			</>;
+			</>
 		}
 
 		const { body } = await render(App);
@@ -83,8 +85,8 @@ describe('composite > props', () => {
 	});
 
 	it('correctly retains prop accessors and reactivity when using rest props', async () => {
-		function Button(&{ children, ...rest }: Props) {
-			return <>
+		function Button(&{ children, ...rest }: Props) @{
+			<>
 				<button {...rest}>{children}</button>
 				<style>
 					.on {
@@ -94,22 +96,20 @@ describe('composite > props', () => {
 						color: red;
 					}
 				</style>
-			</>;
+			</>
 		}
 
-		function Toggle(&{ pressed, ...rest }: { pressed: Tracked<boolean> }) {
-			return <>
-				const onClick = () => (pressed.value = !pressed.value);
+		function 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 App() {
-			return <>
-				const pressed = track(true);
-				<Toggle {pressed} />
-			</>;
+		function App() @{
+			const pressed = track(true);
+			<Toggle {pressed} />
 		}
 
 		const { body } = await render(App);
@@ -132,30 +132,26 @@ describe('composite > props', () => {
 			price: number;
 		}
 
-		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>
-			</>;
+		function 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 App() {
-			return <>
-				<Product
-					id="1"
-					name="Product 1"
-					organizationName="Org 1"
-					description="Description 1"
-					imageUrl="https://picsum.photos/300/200"
-					price={15}
-				/>
-			</>;
+		function App() @{
+			<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);