ripple 0.3.67 → 0.3.69

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

@@ -3,8 +3,8 @@ import { flushSync, track } from 'ripple';
 
 describe('basic client > rendering & text', () => {
 	it('renders static text', () => {
-		component Basic() {
-			<div>{'Hello World'}</div>
+		function Basic() {
+			return <><div>{'Hello World'}</div></>;
 		}
 
 		expect(container).toBeDefined();
@@ -14,10 +14,11 @@ describe('basic client > rendering & text', () => {
 	});
 
 	it('renders semi-dynamic text', () => {
-		component Basic() {
-			let message = 'Hello World';
-
-			<div>{message}</div>
+		function Basic() {
+			return <>
+				let message = 'Hello World';
+				<div>{message}</div>
+			</>;
 		}
 
 		render(Basic);
@@ -25,11 +26,12 @@ describe('basic client > rendering & text', () => {
 		expect(container).toMatchSnapshot();
 	});
 
-	it('renders explicit text interpolation without creating HTML', () => {
-		component Basic() {
-			let markup = '<span>Not HTML</span>';
-
-			<div>{text markup}</div>
+	it('renders string interpolation without creating HTML', () => {
+		function Basic() {
+			return <>
+				let markup = '<span>Not HTML</span>';
+				<div>{markup}</div>
+			</>;
 		}
 
 		render(Basic);
@@ -41,11 +43,13 @@ describe('basic client > rendering & text', () => {
 	});
 
 	it('renders direct double-quoted text children as text', () => {
-		component Basic() {
-			<div class="entities">"Rock &amp; &quot;Roll&quot;"</div>
-			<div class="backslash">"line\nbreak"</div>
-			<pre class="multiline">"first
+		function Basic() {
+			return <>
+				<div class="entities">"Rock &amp; &quot;Roll&quot;"</div>
+				<div class="backslash">"line\nbreak"</div>
+				<pre class="multiline">"first
 second"</pre>
+			</>;
 		}
 
 		render(Basic);
@@ -55,13 +59,88 @@ second"</pre>
 		expect(container.querySelector('.multiline').textContent).toBe('first\nsecond');
 	});
 
-	it('renders bare double-quoted text in if-else branches', () => {
-		component App() {
-			let condition = false;
+	it('does not render TSRX statements outside returned component templates', () => {
+		function Basic() {
+			const ready = true;
+
+			if (ready) {
+				<div class="leaked">"should not render"</div>
+			}
+
+			return <>"Hello world"</>;
+		}
+
+		render(Basic);
+
+		expect(container.textContent).toBe('Hello world');
+		expect(container.querySelector('.leaked')).toBeNull();
+	});
+
+	it('renders primitive component return branches', () => {
+		function Basic() {
+			const ready = false;
+
+			if (!ready) {
+				return 'Waiting';
+			}
+
+			return <>"Ready"</>;
+		}
+
+		render(Basic);
+
+		expect(container.textContent).toBe('Waiting');
+	});
+
+	it('renders a root plain function that returns only a string', () => {
+		function Basic() {
+			return 'Only text';
+		}
+
+		render(Basic);
+
+		expect(container.textContent).toBe('Only text');
+	});
+
+	it('renders a root plain function that returns only null', () => {
+		function Basic() {
+			return null;
+		}
+
+		render(Basic);
+
+		expect(container.textContent).toBe('');
+	});
+
+	it('renders a root plain function that returns only undefined', () => {
+		function Basic() {
+			return undefined;
+		}
+
+		render(Basic);
+
+		expect(container.textContent).toBe('');
+	});
 
-			if (condition) {
-				"Hello Ripple"
-			} else "Hello React"
+	it('does not render elements after an ASI return', () => {
+		function Basic() {
+			return;
+			<div>"should not render"</div>
+		}
+
+		render(Basic);
+
+		expect(container.textContent).toBe('');
+	});
+
+	it('renders bare double-quoted text in if-else branches', () => {
+		function App() {
+			return <>
+				let condition = false;
+				if (condition) {
+					"Hello Ripple"
+				} else "Hello React"
+			</>;
 		}
 
 		render(App);
@@ -70,17 +149,18 @@ second"</pre>
 	});
 
 	it('renders dynamic text', () => {
-		component Basic() {
-			let &[message] = track('Hello World');
-
-			<button
-				onClick={() => {
-					message = 'Hello Ripple';
-				}}
-			>
-				{'Change Text'}
-			</button>
-			<div>{message}</div>
+		function Basic() {
+			return <>
+				let &[message] = track('Hello World');
+				<button
+					onClick={() => {
+						message = 'Hello Ripple';
+					}}
+				>
+					{'Change Text'}
+				</button>
+				<div>{message}</div>
+			</>;
 		}
 
 		render(Basic);
@@ -94,8 +174,8 @@ second"</pre>
 	});
 
 	it('renders empty string literal', () => {
-		component Basic() {
-			<div>{''}</div>
+		function Basic() {
+			return <><div>{''}</div></>;
 		}
 
 		render(Basic);
@@ -103,8 +183,8 @@ second"</pre>
 	});
 
 	it('renders empty template literal', () => {
-		component Basic() {
-			<div>{``}</div>
+		function Basic() {
+			return <><div>{``}</div></>;
 		}
 
 		render(Basic);
@@ -112,20 +192,22 @@ second"</pre>
 	});
 
 	it('renders tick template literal for nested children', () => {
-		component Child({ level, children }: { level: number; children: any }) {
-			if (level == 1) {
-				<h1>{children}</h1>
-			}
-			if (level == 2) {
-				<h2>{children}</h2>
-			}
-			if (level == 3) {
-				<h3>{children}</h3>
-			}
+		function Child({ level, children }: { level: number; children: any }) {
+			return <>
+				if (level == 1) {
+					<h1>{children}</h1>
+				}
+				if (level == 2) {
+					<h2>{children}</h2>
+				}
+				if (level == 3) {
+					<h3>{children}</h3>
+				}
+			</>;
 		}
 
-		component App() {
-			<Child level={1}>{`Heading 1`}</Child>
+		function App() {
+			return <><Child level={1}>{`Heading 1`}</Child></>;
 		}
 
 		render(App);
@@ -133,13 +215,14 @@ second"</pre>
 	});
 
 	it('renders simple JS expression logic correctly', () => {
-		component Example() {
-			let test: Record<number, string> = {};
-			let counter = 0;
-			test[counter++] = 'Test';
-
-			<div>{JSON.stringify(test)}</div>
-			<div>{JSON.stringify(counter)}</div>
+		function Example() {
+			return <>
+				let test: Record<number, string> = {};
+				let counter = 0;
+				test[counter++] = 'Test';
+				<div>{JSON.stringify(test)}</div>
+				<div>{JSON.stringify(counter)}</div>
+			</>;
 		}
 		render(Example);
 
@@ -147,30 +230,31 @@ second"</pre>
 	});
 
 	it('renders with mixed static and dynamic content', () => {
-		component Basic() {
-			let &[name] = track('World');
-			let &[count] = track(0);
-			const staticMessage = 'Welcome to Ripple!';
-
-			<div class="mixed-content">
-				<h1>{staticMessage}</h1>
-				<p class="greeting">{'Hello, ' + name + '!'}</p>
-				<p class="notifications">{'You have ' + count + ' notifications'}</p>
-				<button
-					onClick={() => {
-						count++;
-					}}
-				>
-					{'Add Notification'}
-				</button>
-				<button
-					onClick={() => {
-						name = name === 'World' ? 'User' : 'World';
-					}}
-				>
-					{'Toggle Name'}
-				</button>
-			</div>
+		function Basic() {
+			return <>
+				let &[name] = track('World');
+				let &[count] = track(0);
+				const staticMessage = 'Welcome to Ripple!';
+				<div class="mixed-content">
+					<h1>{staticMessage}</h1>
+					<p class="greeting">{'Hello, ' + name + '!'}</p>
+					<p class="notifications">{'You have ' + count + ' notifications'}</p>
+					<button
+						onClick={() => {
+							count++;
+						}}
+					>
+						{'Add Notification'}
+					</button>
+					<button
+						onClick={() => {
+							name = name === 'World' ? 'User' : 'World';
+						}}
+					>
+						{'Toggle Name'}
+					</button>
+				</div>
+			</>;
 		}
 
 		render(Basic);
@@ -194,14 +278,16 @@ second"</pre>
 	});
 
 	it('basic operations', () => {
-		component App() {
-			let &[count] = track(0);
-			const a = count++;
-			const b = ++count;
-			<div>{a}</div>
-			<div>{b}</div>
-			<div>{5}</div>
-			<div>{count}</div>
+		function App() {
+			return <>
+				let &[count] = track(0);
+				const a = count++;
+				const b = ++count;
+				<div>{a}</div>
+				<div>{b}</div>
+				<div>{5}</div>
+				<div>{count}</div>
+			</>;
 		}
 
 		render(App);
@@ -209,36 +295,36 @@ second"</pre>
 	});
 
 	it('renders with conditional rendering using if statements', () => {
-		component Basic() {
-			let &[showContent] = track(false);
-			let &[userRole] = track('guest');
-
-			<button
-				onClick={() => {
-					showContent = !showContent;
-				}}
-			>
-				{'Toggle Content'}
-			</button>
-			<button
-				onClick={() => {
-					userRole = userRole === 'guest' ? 'admin' : 'guest';
-				}}
-			>
-				{'Toggle Role'}
-			</button>
-
-			<div class="content">
-				if (showContent) {
-					if (userRole === 'admin') {
-						<div class="admin-content">{'Admin content'}</div>
+		function Basic() {
+			return <>
+				let &[showContent] = track(false);
+				let &[userRole] = track('guest');
+				<button
+					onClick={() => {
+						showContent = !showContent;
+					}}
+				>
+					{'Toggle Content'}
+				</button>
+				<button
+					onClick={() => {
+						userRole = userRole === 'guest' ? 'admin' : 'guest';
+					}}
+				>
+					{'Toggle Role'}
+				</button>
+				<div class="content">
+					if (showContent) {
+						if (userRole === 'admin') {
+							<div class="admin-content">{'Admin content'}</div>
+						} else {
+							<div class="user-content">{'User content'}</div>
+						}
 					} else {
-						<div class="user-content">{'User content'}</div>
+						<div class="no-content">{'No content'}</div>
 					}
-				} else {
-					<div class="no-content">{'No content'}</div>
-				}
-			</div>
+				</div>
+			</>;
 		}
 
 		render(Basic);
@@ -266,12 +352,14 @@ second"</pre>
 	});
 
 	it('should handle lexical scopes correctly', () => {
-		component App() {
-			<section>
-				let sectionData = 'Nested scope variable';
-
-				{sectionData}
-			</section>
+		function App() {
+			return <>
+				<section>
+					let sectionData = 'Nested scope variable';
+
+					{sectionData}
+				</section>
+			</>;
 		}
 
 		render(App);
@@ -279,50 +367,48 @@ second"</pre>
 	});
 
 	it('runs nested JavaScript blocks inside component-local callables', () => {
-		component App() {
-			function readFunction() {
-				const label = 'function outer';
-				let result = '';
-
-				{
-					const label = 'function inner';
-					result = label;
-				}
-
-				return `${result} / ${label}`;
-			}
-
-			const readArrow = () => {
-				const offset = 5;
-				let value = offset;
-
-				{
-					const offset = 17;
-					value += offset;
-				}
-
-				return value;
-			};
-
-			class Reader {
-				read() {
-					const label = 'method outer';
+		function App() {
+			return <>
+				function readFunction() {
+					const label = 'function outer';
 					let result = '';
 
 					{
-						const label = 'method inner';
+						const label = 'function inner';
 						result = label;
 					}
 
 					return `${result} / ${label}`;
 				}
-			}
+				const readArrow = () => {
+					const offset = 5;
+					let value = offset;
+
+					{
+						const offset = 17;
+						value += offset;
+					}
+
+					return value;
+				};
+				class Reader {
+					read() {
+						const label = 'method outer';
+						let result = '';
 
-			const reader = new Reader();
+						{
+							const label = 'method inner';
+							result = label;
+						}
 
-			<div class="block-function">{readFunction()}</div>
-			<div class="block-arrow">{readArrow()}</div>
-			<div class="block-method">{reader.read()}</div>
+						return `${result} / ${label}`;
+					}
+				}
+				const reader = new Reader();
+				<div class="block-function">{readFunction()}</div>
+				<div class="block-arrow">{readArrow()}</div>
+				<div class="block-method">{reader.read()}</div>
+			</>;
 		}
 
 		render(App);
@@ -337,25 +423,27 @@ second"</pre>
 	});
 
 	it('should handle consecutive text nodes without duplication', () => {
-		component App() {
-			const Something = conditional('a');
-
-			<Something />
-
-			function conditional(item: 'a') {
-				let hello = 'Hello';
-				const obj = {
-					a: component() {
-						<div>
-							{'a'}
-							{' '}
-							{hello}
-						</div>
-					},
-				};
-
-				return obj[item];
-			}
+		function App() {
+			return <>
+				const Something = conditional('a');
+				<Something />
+				function conditional(item: 'a') {
+					let hello = 'Hello';
+					const obj = {
+						a: function A() {
+							return <>
+								<div>
+									{'a'}
+									{' '}
+									{hello}
+								</div>
+							</>;
+						},
+					};
+
+					return obj[item];
+				}
+			</>;
 		}
 
 		render(App);
@@ -364,14 +452,16 @@ second"</pre>
 	});
 
 	it('should handle multiple consecutive text expressions', () => {
-		component App() {
-			let name = 'World';
-			<div>
-				{'Hello'}
-				{' '}
-				{name}
-				{'!'}
-			</div>
+		function App() {
+			return <>
+				let name = 'World';
+				<div>
+					{'Hello'}
+					{' '}
+					{name}
+					{'!'}
+				</div>
+			</>;
 		}
 
 		render(App);

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

@@ -2,28 +2,29 @@ import { compile } from '@tsrx/ripple';
 
 describe('basic client > styling', () => {
 	it('renders with styling scoped to component', () => {
-		component Basic() {
-			<div class="styled-container">
-				<h1>{'Styled heading'}</h1>
-				<p class="text">{'Styled paragraph'}</p>
-			</div>
+		function Basic() {
+			return <>
+				<div class="styled-container">
+					<h1>{'Styled heading'}</h1>
+					<p class="text">{'Styled paragraph'}</p>
+				</div>
+				<style>
+					.styled-container {
+						background-color: rgb(0, 0, 255);
+						padding: 16px;
+					}
 
-			<style>
-				.styled-container {
-					background-color: rgb(0, 0, 255);
-					padding: 16px;
-				}
+					h1 {
+						color: rgb(255, 255, 255);
+						font-size: 32px;
+					}
 
-				h1 {
-					color: rgb(255, 255, 255);
-					font-size: 32px;
-				}
-
-				.text {
-					color: rgb(200, 200, 200);
-					font-size: 14px;
-				}
-			</style>
+					.text {
+						color: rgb(200, 200, 200);
+						font-size: 14px;
+					}
+				</style>
+			</>;
 		}
 
 		render(Basic);
@@ -38,7 +39,7 @@ describe('basic client > styling', () => {
 	});
 
 	it('renders with keyframes in styling scoped to component', () => {
-		const source = `export component Basic() {
+		const source = `export function Basic() { return <>
 			<div>
 				<p>{'Styled paragraph'}</p>
 			</div>
@@ -54,7 +55,7 @@ describe('basic client > styling', () => {
 					animation-name: anim;
 				}
 			</style>
-		}`;
+		</>; }`;
 
 		const { css } = compile(source, 'test.tsrx');
 		const name = css.match(/@keyframes\s+([a-zA-Z0-9_-]+)\s*\{/)[1];

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

@@ -5,15 +5,17 @@ describe('basic client > utilities', () => {
 		let resolve: () => void;
 		const promise = new Promise<void>((res) => (resolve = res));
 
-		component Basic() {
-			let &[value] = track(0);
-			effect(() => {
-				untrack(() => {
-					value++;
-					tick().then(() => resolve());
+		function Basic() {
+			return <>
+				let &[value] = track(0);
+				effect(() => {
+					untrack(() => {
+						value++;
+						tick().then(() => resolve());
+					});
 				});
-			});
-			<p>{value}</p>
+				<p>{value}</p>
+			</>;
 		}
 		render(Basic);