ripple 0.3.72 → 0.3.76

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

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

package/tests/client/boundaries.test.tsrx

@@ -14,19 +14,19 @@ describe('passing reactivity between boundaries tests', () => {
 			return double;
 		}
 
-		function App() {
-			return <>
-				let &[count, countTracked] = track(0);
-				const &[double] = createDouble(countTracked);
-				<div>{'Double: ' + double}</div>
+		function App() @{
+			let &[count, countTracked] = track(0);
+			const &[double] = createDouble(countTracked);
+			<>
+				<div>
+					{'Double: ' + double}
+				</div>
 				<button
 					onClick={() => {
 						count++;
 					}}
-				>
-					{'Increment'}
-				</button>
-			</>;
+				>{'Increment'}</button>
+			</>
 		}
 
 		render(App);
@@ -63,19 +63,19 @@ describe('passing reactivity between boundaries tests', () => {
 			return { double };
 		}
 
-		function App() {
-			return <>
-				let count = track(0);
-				const { double } = createDouble({ count });
-				<div>{'Double: ' + double.value}</div>
+		function App() @{
+			let count = track(0);
+			const { double } = createDouble({ count });
+			<>
+				<div>
+					{'Double: ' + double.value}
+				</div>
 				<button
 					onClick={() => {
 						count.value++;
 					}}
-				>
-					{'Increment'}
-				</button>
-			</>;
+				>{'Increment'}</button>
+			</>
 		}
 
 		render(App);

package/tests/client/compiler/compiler.assignments.test.tsrx

@@ -7,62 +7,61 @@ describe('compiler > assignments', () => {
 	it('properly handles JS assignments, reads and updates to array indices', () => {
 		const logs: (number | undefined)[] = [];
 
-		function App() {
-			return <>
-				let items: number[] = [];
-				let tracked_items = track<number[]>([]);
-				let items2 = new Array();
-				let items3: RippleArray<number> = new RippleArray();
-				let i = 0;
-				logs.push(items[0]);
-				logs.push(items[i]);
-				logs.push(tracked_items.value[0]);
-				logs.push(tracked_items.value[i]);
-				logs.push(items2[0]);
-				logs.push(items2[i]);
-				logs.push(items3[0]);
-				logs.push(items3[i]);
-				items[0] = 123;
-				items[i] = 123;
-				tracked_items.value[0] = 123;
-				tracked_items.value[i] = 123;
-				items2[0] = 123;
-				items2[i] = 123;
-				items3[0] = 123;
-				items3[i] = 123;
-				logs.push(items[0]);
-				logs.push(items[i]);
-				logs.push(tracked_items.value[0]);
-				logs.push(tracked_items.value[i]);
-				logs.push(items2[0]);
-				logs.push(items2[i]);
-				logs.push(items3[0]);
-				logs.push(items3[i]);
-				items[0]++;
-				items[i]++;
-				tracked_items.value[0]++;
-				tracked_items.value[i]++;
-				items2[0]++;
-				items2[i]++;
-				items3[0]++;
-				items3[i]++;
-				logs.push(items[0]);
-				logs.push(items[i]);
-				logs.push(tracked_items.value[0]);
-				logs.push(tracked_items.value[i]);
-				logs.push(items2[0]);
-				logs.push(items2[i]);
-				logs.push(items3[0]);
-				logs.push(items3[i]);
-				logs.push(--items[0]);
-				logs.push(--items[i]);
-				logs.push(--tracked_items.value[0]);
-				logs.push(--tracked_items.value[i]);
-				logs.push(--items2[0]);
-				logs.push(--items2[i]);
-				logs.push(--items3[0]);
-				logs.push(--items3[i]);
-			</>;
+		function App() @{
+			let items: number[] = [];
+			let tracked_items = track<number[]>([]);
+			let items2 = new Array();
+			let items3: RippleArray<number> = new RippleArray();
+			let i = 0;
+			logs.push(items[0]);
+			logs.push(items[i]);
+			logs.push(tracked_items.value[0]);
+			logs.push(tracked_items.value[i]);
+			logs.push(items2[0]);
+			logs.push(items2[i]);
+			logs.push(items3[0]);
+			logs.push(items3[i]);
+			items[0] = 123;
+			items[i] = 123;
+			tracked_items.value[0] = 123;
+			tracked_items.value[i] = 123;
+			items2[0] = 123;
+			items2[i] = 123;
+			items3[0] = 123;
+			items3[i] = 123;
+			logs.push(items[0]);
+			logs.push(items[i]);
+			logs.push(tracked_items.value[0]);
+			logs.push(tracked_items.value[i]);
+			logs.push(items2[0]);
+			logs.push(items2[i]);
+			logs.push(items3[0]);
+			logs.push(items3[i]);
+			items[0]++;
+			items[i]++;
+			tracked_items.value[0]++;
+			tracked_items.value[i]++;
+			items2[0]++;
+			items2[i]++;
+			items3[0]++;
+			items3[i]++;
+			logs.push(items[0]);
+			logs.push(items[i]);
+			logs.push(tracked_items.value[0]);
+			logs.push(tracked_items.value[i]);
+			logs.push(items2[0]);
+			logs.push(items2[i]);
+			logs.push(items3[0]);
+			logs.push(items3[i]);
+			logs.push(--items[0]);
+			logs.push(--items[i]);
+			logs.push(--tracked_items.value[0]);
+			logs.push(--tracked_items.value[i]);
+			logs.push(--items2[0]);
+			logs.push(--items2[i]);
+			logs.push(--items3[0]);
+			logs.push(--items3[i]);
+			<></>
 		}
 
 		render(App);
@@ -105,13 +104,14 @@ describe('compiler > assignments', () => {
 
 	it('compiles tracked values in effect with assignment expression', () => {
 		const source = `import { track, effect } from 'ripple';
-function App() { return <>
+function App() @{
 	let &[count] = track(0);
 
 	effect(() => {
 		state.count = count;
 	});
-</>; }`;
+	<></>
+}`;
 		const result = compile(source, 'test.tsrx');
 		const effect_match = result.code.match(EFFECT_BODY_REGEX);
 		expect(effect_match?.[1].trim()).toMatchSnapshot();
@@ -119,7 +119,7 @@ function App() { return <>
 
 	it('compiles tracked values in effect with update expressions', () => {
 		const source = `import { track, effect, untrack } from 'ripple';
-function App() { return <>
+function App() @{
 	let &[count] = track(5);
 
 	effect(() => {
@@ -130,7 +130,8 @@ function App() { return <>
 			state.postDecrement = count--;
 		});
 	});
-</>; }`;
+	<></>
+}`;
 		const result = compile(source, 'test.tsrx');
 		const effect_match = result.code.match(EFFECT_BODY_REGEX);
 		expect(effect_match?.[1].trim()).toMatchSnapshot();
@@ -138,15 +139,15 @@ function App() { return <>
 
 	it('compiles unknown lazy array destructuring through lazy array helpers', () => {
 		const source = `import { track } from 'ripple';
-function Child({ tr: &[count, tr] }) { return <>
+function Child({ tr: &[count, tr] }) @{
 	count++;
 	tr[0]++;
 	<div>{count}</div>
-</>; }
-function App() { return <>
+}
+function App() @{
 	let tracked = track(0);
 	<Child tr={tracked} />
-</>; }`;
+}`;
 		const { code } = compile(source, 'test.tsrx', { mode: 'client' });
 
 		expect(code).toContain('_$_.lazy_array_get(lazy, 0)');
@@ -158,13 +159,13 @@ function App() { return <>
 	});
 
 	it('compiles writes to unknown lazy array index 1 through lazy array helpers', () => {
-		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: 'client' });
 
 		expect(code).toContain('_$_.lazy_array_set(lazy, 10, 1)');
@@ -172,13 +173,13 @@ function App() { return <>
 	});
 
 	it('does not double-wrap member access on lazy array value bindings', () => {
-		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: 'client' });
 
 		expect(code).toContain('let value = _$_.lazy_array_get(lazy, 0)[0];');
@@ -187,13 +188,13 @@ function App() { return <>
 
 	it('throws on indexed access through known tracked lazy destructures', () => {
 		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: 'client' })).toThrow(
 			/Use \.value or &\[\] lazy destructuring/,
@@ -202,14 +203,14 @@ function App() { return <>
 
 	it('throws on known tracked indexed access', () => {
 		const source = `import { track } from 'ripple';
-function App() { return <>
+function App() @{
 	let tracked = track(0);
 	tracked[0]++;
 	tracked[0] = tracked[0] + 1;
 	let value = tracked[0];
 	let ref = tracked[1];
 	<div>{value}</div>
-</>; }`;
+}`;
 
 		expect(() => compile(source, 'test.tsrx', { mode: 'client' })).toThrow(
 			/Use \.value or &\[\] lazy destructuring/,

package/tests/client/compiler/compiler.attributes.test.tsrx

@@ -3,13 +3,13 @@ import { parse, compile } from '@tsrx/ripple';
 describe('compiler > attributes', () => {
 	it('generates valid JavaScript for component props with hyphenated attributes', () => {
 		const source = `
-			function Child(props) { return <>
+			function Child(props) @{
 				<div />
-			</>; }
+			}
 
-			export default function App() { return <>
+			export default function App() @{
 				<Child data-scope="test" aria-label="accessible" class="valid" />
-			</>; }`;
+			}`;
 
 		const result = compile(source, 'test.tsrx', { mode: 'client' });
 
@@ -29,8 +29,12 @@ describe('compiler > attributes', () => {
 
 		testCases.forEach(({ attr, expected }) => {
 			const source = `
-				function Child(props) { return <> <div /> </>; }
-				export default function App() { return <> <Child ${attr} /> </>; }`;
+				function Child(props) @{
+					<div />
+				}
+				export default function App() @{
+					<Child ${attr} />
+				}`;
 
 			const result = compile(source, 'test.tsrx', { mode: 'client' });
 			expect(result.code).toMatch(expected);
@@ -39,11 +43,11 @@ describe('compiler > attributes', () => {
 
 	it('handles mixed valid and invalid attribute identifiers correctly', () => {
 		const source = `
-			function Child(props) { return <>
+			function Child(props) @{
 				<div />
-			</>; }
+			}
 
-			export default function App() { return <>
+			export default function App() @{
 				<Child
 					validProp="valid"
 					class="valid"
@@ -52,7 +56,7 @@ describe('compiler > attributes', () => {
 					aria-invalid="invalid"
 					custom-prop="invalid"
 				/>
-			</>; }`;
+			}`;
 
 		const result = compile(source, 'test.tsrx', { mode: 'client' });
 
@@ -69,13 +73,13 @@ describe('compiler > attributes', () => {
 
 	it('ensures generated code is syntactically valid JavaScript', () => {
 		const source = `
-			function Child(props) { return <>
+			function Child(props) @{
 				<div />
-			</>; }
+			}
 
-			export default function App() { return <>
+			export default function App() @{
 				<Child data-scope="test" />
-			</>; }`;
+			}`;
 
 		const result = compile(source, 'test.tsrx', { mode: 'client' });