ripple 0.3.68 → 0.3.70

package/tests/client/boundaries.test.tsrx

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

package/tests/client/compiler/__snapshots__/compiler.assignments.test.rsrx.snap

@@ -4,9 +4,9 @@ exports[`compiler > assignments > compiles tracked values in effect with assignm
 
 exports[`compiler > assignments > compiles tracked values in effect with update expressions 1`] = `
 "_$_.untrack(() => {
-			state.preIncrement = _$_.update_pre(lazy);
-			state.postIncrement = _$_.update(lazy);
-			state.preDecrement = _$_.update_pre(lazy, -1);
-			state.postDecrement = _$_.update(lazy, -1);
-		});"
+				state.preIncrement = _$_.update_pre(lazy);
+				state.postIncrement = _$_.update(lazy);
+				state.preDecrement = _$_.update_pre(lazy, -1);
+				state.postDecrement = _$_.update(lazy, -1);
+			});"
 `;

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

@@ -4,9 +4,9 @@ exports[`compiler > assignments > compiles tracked values in effect with assignm
 
 exports[`compiler > assignments > compiles tracked values in effect with update expressions 1`] = `
 "_$_.untrack(() => {
-			state.preIncrement = _$_.update_pre(lazy);
-			state.postIncrement = _$_.update(lazy);
-			state.preDecrement = _$_.update_pre(lazy, -1);
-			state.postDecrement = _$_.update(lazy, -1);
-		});"
+				state.preIncrement = _$_.update_pre(lazy);
+				state.postIncrement = _$_.update(lazy);
+				state.preDecrement = _$_.update_pre(lazy, -1);
+				state.postDecrement = _$_.update(lazy, -1);
+			});"
 `;

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

@@ -1,72 +1,68 @@
 import { RippleArray, effect, track, untrack } from 'ripple';
 import { compile } from '@tsrx/ripple';
 
-const EFFECT_BODY_REGEX = /_\$\_\.effect\(\(\) => \{([\s\S]*?)\n\t\}\);/;
+const EFFECT_BODY_REGEX = /_\$\_\.effect\(\(\) => \{([\s\S]*?)\n\t\t\}\);/;
 
 describe('compiler > assignments', () => {
 	it('properly handles JS assignments, reads and updates to array indices', () => {
 		const logs: (number | undefined)[] = [];
 
-		component 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]);
+		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]);
+			</>;
 		}
 
 		render(App);
@@ -109,13 +105,13 @@ describe('compiler > assignments', () => {
 
 	it('compiles tracked values in effect with assignment expression', () => {
 		const source = `import { track, effect } from 'ripple';
-component App() {
+function App() { return <>
 	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();
@@ -123,7 +119,7 @@ component App() {
 
 	it('compiles tracked values in effect with update expressions', () => {
 		const source = `import { track, effect, untrack } from 'ripple';
-component App() {
+function App() { return <>
 	let &[count] = track(5);
 
 	effect(() => {
@@ -134,7 +130,7 @@ component App() {
 			state.postDecrement = count--;
 		});
 	});
-}`;
+</>; }`;
 		const result = compile(source, 'test.tsrx');
 		const effect_match = result.code.match(EFFECT_BODY_REGEX);
 		expect(effect_match?.[1].trim()).toMatchSnapshot();
@@ -142,15 +138,15 @@ component App() {
 
 	it('compiles unknown lazy array destructuring through lazy array helpers', () => {
 		const source = `import { track } from 'ripple';
-component Child({ tr: &[count, tr] }) {
+function Child({ tr: &[count, tr] }) { return <>
 	count++;
 	tr[0]++;
 	<div>{count}</div>
-}
-component App() {
+</>; }
+function App() { return <>
 	let tracked = track(0);
 	<Child tr={tracked} />
-}`;
+</>; }`;
 		const { code } = compile(source, 'test.tsrx', { mode: 'client' });
 
 		expect(code).toContain('_$_.lazy_array_get(lazy, 0)');
@@ -162,13 +158,13 @@ component App() {
 	});
 
 	it('compiles writes to unknown lazy array index 1 through lazy array helpers', () => {
-		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: 'client' });
 
 		expect(code).toContain('_$_.lazy_array_set(lazy, 10, 1)');
@@ -176,13 +172,13 @@ component App() {
 	});
 
 	it('does not double-wrap member access on lazy array value bindings', () => {
-		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: 'client' });
 
 		expect(code).toContain('let value = _$_.lazy_array_get(lazy, 0)[0];');
@@ -191,13 +187,13 @@ component App() {
 
 	it('throws on indexed access through known tracked lazy destructures', () => {
 		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: 'client' })).toThrow(
 			/Use \.value or &\[\] lazy destructuring/,
@@ -206,14 +202,14 @@ component App() {
 
 	it('throws on known tracked indexed access', () => {
 		const source = `import { track } from 'ripple';
-component App() {
+function App() { return <>
 	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 = `
-			component Child(props) {
+			function Child(props) { return <>
 				<div />
-			}
+			</>; }
 
-			export default component App() {
+			export default function App() { return <>
 				<Child data-scope="test" aria-label="accessible" class="valid" />
-			}`;
+			</>; }`;
 
 		const result = compile(source, 'test.tsrx', { mode: 'client' });
 
@@ -29,8 +29,8 @@ describe('compiler > attributes', () => {
 
 		testCases.forEach(({ attr, expected }) => {
 			const source = `
-				component Child(props) { <div /> }
-				export default component App() { <Child ${attr} /> }`;
+				function Child(props) { return <> <div /> </>; }
+				export default function App() { return <> <Child ${attr} /> </>; }`;
 
 			const result = compile(source, 'test.tsrx', { mode: 'client' });
 			expect(result.code).toMatch(expected);
@@ -39,11 +39,11 @@ describe('compiler > attributes', () => {
 
 	it('handles mixed valid and invalid attribute identifiers correctly', () => {
 		const source = `
-			component Child(props) {
+			function Child(props) { return <>
 				<div />
-			}
+			</>; }
 
-			export default component App() {
+			export default function App() { return <>
 				<Child
 					validProp="valid"
 					class="valid"
@@ -52,7 +52,7 @@ describe('compiler > attributes', () => {
 					aria-invalid="invalid"
 					custom-prop="invalid"
 				/>
-			}`;
+			</>; }`;
 
 		const result = compile(source, 'test.tsrx', { mode: 'client' });
 
@@ -69,18 +69,18 @@ describe('compiler > attributes', () => {
 
 	it('ensures generated code is syntactically valid JavaScript', () => {
 		const source = `
-			component Child(props) {
+			function Child(props) { return <>
 				<div />
-			}
+			</>; }
 
-			export default component App() {
+			export default function App() { return <>
 				<Child data-scope="test" />
-			}`;
+			</>; }`;
 
 		const result = compile(source, 'test.tsrx', { mode: 'client' });
 
 		// Extract the props object from the generated code and test it's valid JavaScript
-		const match = result.code.match(/Child\([^,]+,\s*(\{[^}]+\})/);
+		const match = result.code.match(/_\$_.render_component\(Child,\s*[^,]+,\s*(\{[^}]+\})/);
 		expect(match).toBeTruthy();
 
 		const propsObject = match?.[1];