ripple 0.3.71 → 0.3.74

package/tests/client/return.test.tsrx

@@ -1,89 +1,114 @@
 import { describe, it, expect } from 'vitest';
 import { compile } from '@tsrx/ripple';
 
-const TSRX_RETURN_ERROR = 'Return statements are not allowed inside TSRX templates. Move the return before the TSRX return value, or use conditional rendering instead.';
-
-describe('returns in prohibited scopes', () => {
+describe('returns in restricted scopes', () => {
 	it('throws error when return is used in module scope', () => {
 		expect(
 			() => compile(`
 				return;
-				function App() { return <>
+				function App() @{
 					<div>{'hello'}</div>
-				</>; }
+				}
 			`, 'test.tsrx', {
 				mode: 'client',
 			}),
 		).toThrow('Return statements are not allowed at the top level of a module.');
 	});
 
-	it('throws when return is used inside a TSRX fragment', () => {
+	it('allows returns inside regular functions declared in TSRX templates', () => {
 		expect(
 			() => compile(
 				`
-				function App() {
-					return <>
-						if (ready) {
-							return;
+				function App() @{
+						function label() {
+							return 'ready';
 						}
-						<div>{'ready'}</div>
-					</>;
+						<div>{label()}</div>
 				}
 			`,
 				'test.tsrx',
 				{ mode: 'client' },
 			),
-		).toThrow(TSRX_RETURN_ERROR);
+		).not.toThrow();
 	});
 
-	it('throws when return is used inside a TSRX element', () => {
+	it('compiles template directives inside templates', () => {
 		expect(
 			() => compile(
 				`
-				function App() {
-					return <section>
-						if (ready) {
-							return null;
-						}
-						<div>{'ready'}</div>
-					</section>;
-				}
+					function App() @{
+							<>
+								@if (ready) {
+									<div>yielded</div>
+								}
+								<span>after</span>
+							</>
+					}
 			`,
 				'test.tsrx',
 				{ mode: 'client' },
 			),
-		).toThrow(TSRX_RETURN_ERROR);
+		).not.toThrow();
 	});
+});
 
-	it('allows returns inside regular functions declared in TSRX templates', () => {
+describe('function returns in client components', () => {
+	it('renders template directive branches alongside outer siblings', () => {
+		function App() @{
+			const ready = true;
+			<>
+				@if (ready) {
+					<div class="yielded">yielded</div>
+				}
+				<span class="outer">outer</span>
+			</>
+		}
+
+		render(App);
+		expect(container.querySelector('.yielded')?.textContent).toBe('yielded');
+		expect(container.querySelector('.outer')?.textContent).toBe('outer');
+	});
+
+	it('allows plain JavaScript control flow in setup when rendered output follows', () => {
 		expect(
 			() => compile(
 				`
-				function App() {
-					return <>
-						function label() {
-							return 'ready';
-						}
-						<div>{label()}</div>
-					</>;
-				}
-			`,
+					function App() @{
+						const items = [1, 2, 3];
+							for (const item of items) {
+								<div>{item}</div>
+							}
+							<></>
+					}
+				`,
 				'test.tsrx',
 				{ mode: 'client' },
 			),
 		).not.toThrow();
 	});
-});
 
-describe('function returns in client components', () => {
+	it('renders TSRX return arguments and skips later siblings', () => {
+		function App() @{
+			const ready = true;
+			if (ready) {
+				return <div class="returned">returned</div>;
+			}
+			<span class="after">after</span>
+		}
+
+		render(App);
+		expect(container.querySelector('.returned')?.textContent).toBe('returned');
+		expect(container.querySelector('.after')).toBeNull();
+	});
+
 	it('allows guard returns before TSRX output', () => {
-		function App() {
+		function App() @{
 			const ready = true;
 			if (!ready) {
 				return null;
 			}
 
-			return <><div class="ready">{'ready'}</div></>;
+			<div class="ready">{'ready'}</div>
 		}
 
 		render(App);

package/tests/client/set.test.tsrx

@@ -2,20 +2,20 @@ import { RippleSet, flushSync, track } from 'ripple';
 
 describe('RippleSet', () => {
 	it('handles add and delete operations', () => {
-		function SetTest() {
-			return <>
-				let items = new RippleSet([1, 2, 3]);
+		function SetTest() @{
+			let items = new RippleSet([1, 2, 3]);
+			<>
 				<button onClick={() => items.add(4)}>{'add'}</button>
 				<button onClick={() => items.delete(2)}>{'delete'}</button>
 				<Child {items} />
-			</>;
+			</>
 		}
 
-		function Child({ items }: { items: RippleSet<number> }) {
-			return <>
+		function Child({ items }: { items: RippleSet<number> }) @{
+			<>
 				<pre>{JSON.stringify(items)}</pre>
 				<pre>{items.size}</pre>
-			</>;
+			</>
 		}
 
 		render(SetTest);
@@ -37,19 +37,19 @@ describe('RippleSet', () => {
 	});
 
 	it('handles clear operation', () => {
-		function SetTest() {
-			return <>
-				let items = new RippleSet([1, 2, 3]);
+		function SetTest() @{
+			let items = new RippleSet([1, 2, 3]);
+			<>
 				<button onClick={() => items.clear()}>{'clear'}</button>
 				<Child {items} />
-			</>;
+			</>
 		}
 
-		function Child({ items }: { items: RippleSet<number> }) {
-			return <>
+		function Child({ items }: { items: RippleSet<number> }) @{
+			<>
 				<pre>{JSON.stringify(items)}</pre>
 				<pre>{items.size}</pre>
-			</>;
+			</>
 		}
 
 		render(SetTest);
@@ -64,13 +64,13 @@ describe('RippleSet', () => {
 	});
 
 	it('handles has operation', () => {
-		function SetTest() {
-			return <>
-				let items = new RippleSet([1, 2, 3]);
-				let &[hasValue] = track(() => items.has(2));
+		function SetTest() @{
+			let items = new RippleSet([1, 2, 3]);
+			let &[hasValue] = track(() => items.has(2));
+			<>
 				<button onClick={() => items.delete(2)}>{'delete'}</button>
 				<pre>{hasValue}</pre>
-			</>;
+			</>
 		}
 
 		render(SetTest);
@@ -86,12 +86,12 @@ describe('RippleSet', () => {
 	});
 
 	it('creates empty RippleSet using RippleSet() shorthand syntax', () => {
-		function SetTest() {
-			return <>
-				let items = RippleSet();
+		function SetTest() @{
+			let items = new RippleSet();
+			<>
 				<button onClick={() => items.add(1)}>{'add'}</button>
 				<pre>{items.size}</pre>
-			</>;
+			</>
 		}
 
 		render(SetTest);
@@ -106,14 +106,14 @@ describe('RippleSet', () => {
 	});
 
 	it('creates RippleSet with initial values using RippleSet() shorthand syntax', () => {
-		function SetTest() {
-			return <>
-				let items = RippleSet([1, 2, 3, 4]);
-				let &[hasValue] = track(() => items.has(3));
+		function SetTest() @{
+			let items = new RippleSet([1, 2, 3, 4]);
+			let &[hasValue] = track(() => items.has(3));
+			<>
 				<button onClick={() => items.delete(3)}>{'delete'}</button>
 				<pre>{items.size}</pre>
 				<pre>{hasValue}</pre>
-			</>;
+			</>
 		}
 
 		render(SetTest);
@@ -130,16 +130,16 @@ describe('RippleSet', () => {
 	});
 
 	it('handles all operations with RippleSet() shorthand syntax', () => {
-		function SetTest() {
-			return <>
-				let items = RippleSet([10, 20, 30]);
-				let &[values] = track(() => Array.from(items.values()));
+		function SetTest() @{
+			let items = new RippleSet([10, 20, 30]);
+			let &[values] = track(() => Array.from(items.values()));
+			<>
 				<button onClick={() => items.add(40)}>{'add'}</button>
 				<button onClick={() => items.delete(20)}>{'delete'}</button>
 				<button onClick={() => items.clear()}>{'clear'}</button>
 				<pre>{JSON.stringify(values)}</pre>
 				<pre>{items.size}</pre>
-			</>;
+			</>
 		}
 
 		render(SetTest);