ripple 0.3.68 → 0.3.69

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

@@ -1,34 +1,31 @@
 describe('compiler > regex', () => {
 	it('renders without crashing using regex literals in method calls', () => {
-		component App() {
-			let text = 'Hello <span>world</span> and <div>content</div>';
-
-			// Test various regex patterns in method calls that previously failed
-			let matchResult = text.match(/<span>/);
-			let replaceResult = text.replace(/<div>/g, '[DIV]');
-			let searchResult = text.search(/<span>/);
-
-			// Test regex literals in variable assignments (should work)
-			let spanRegex = /<span>/g;
-			let divRegex = /<div.*?>/;
-
-			// Test more complex regex patterns
-			let complexMatch = text.match(/<[^>]*>/g);
-			let htmlTags = text.replace(/<(\/*)(\w+)[^>]*>/g, '[$1$2]');
-
-			// Test edge cases with multiple angle brackets
-			let multiAngle = '<<test>> <span>content</span>'.match(/<span>/);
-
-			<div>
-				<span>{String(matchResult)}</span>
-				<span>{replaceResult}</span>
-				<span>{String(searchResult)}</span>
-				<span>{String(spanRegex)}</span>
-				<span>{String(divRegex)}</span>
-				<span>{String(complexMatch)}</span>
-				<span>{htmlTags}</span>
-				<span>{String(multiAngle)}</span>
-			</div>
+		function App() {
+			return <>
+				let text = 'Hello <span>world</span> and <div>content</div>';
+				// Test various regex patterns in method calls that previously failed
+				let matchResult = text.match(/<span>/);
+				let replaceResult = text.replace(/<div>/g, '[DIV]');
+				let searchResult = text.search(/<span>/);
+				// Test regex literals in variable assignments (should work)
+				let spanRegex = /<span>/g;
+				let divRegex = /<div.*?>/;
+				// Test more complex regex patterns
+				let complexMatch = text.match(/<[^>]*>/g);
+				let htmlTags = text.replace(/<(\/*)(\w+)[^>]*>/g, '[$1$2]');
+				// Test edge cases with multiple angle brackets
+				let multiAngle = '<<test>> <span>content</span>'.match(/<span>/);
+				<div>
+					<span>{String(matchResult)}</span>
+					<span>{replaceResult}</span>
+					<span>{String(searchResult)}</span>
+					<span>{String(spanRegex)}</span>
+					<span>{String(divRegex)}</span>
+					<span>{String(complexMatch)}</span>
+					<span>{htmlTags}</span>
+					<span>{String(multiAngle)}</span>
+				</div>
+			</>;
 		}
 
 		render(App);
@@ -53,25 +50,25 @@ describe('compiler > regex', () => {
 	});
 
 	it('renders without crashing mixing regex and JSX syntax', () => {
-		component App() {
-			let htmlString = '<p>Paragraph</p><div>Content</div>';
-
-			// Mix of regex parsing and legitimate JSX
-			let paragraphs = htmlString.match(/<p[^>]*>.*?<\/p>/g);
-			let cleaned = htmlString.replace(/<\/?[^>]+>/g, '');
-			let splitArray = htmlString.split(/<\/?\w+>/g).filter((s) => s.trim());
-
-			<div class="container">
-				<span class="result">{String(paragraphs)}</span>
-				<span class="cleaned">{cleaned}</span>
-				<p>{'This is real JSX'}</p>
-				<div>
-					<span>
-						{'Split result: '}
-						{splitArray.join(', ')}
-					</span>
+		function App() {
+			return <>
+				let htmlString = '<p>Paragraph</p><div>Content</div>';
+				// Mix of regex parsing and legitimate JSX
+				let paragraphs = htmlString.match(/<p[^>]*>.*?<\/p>/g);
+				let cleaned = htmlString.replace(/<\/?[^>]+>/g, '');
+				let splitArray = htmlString.split(/<\/?\w+>/g).filter((s) => s.trim());
+				<div class="container">
+					<span class="result">{String(paragraphs)}</span>
+					<span class="cleaned">{cleaned}</span>
+					<p>{'This is real JSX'}</p>
+					<div>
+						<span>
+							{'Split result: '}
+							{splitArray.join(', ')}
+						</span>
+					</div>
 				</div>
-			</div>
+			</>;
 		}
 
 		render(App);

package/tests/client/compiler/compiler.tracked-access.test.tsrx

@@ -7,10 +7,10 @@ describe('Compiler: Tracked Object Direct Access Checks', () => {
 	it('should error on direct access to __v of a tracked object', () => {
 		const code = `
 import { track } from 'ripple';
-            export default component App() {
+            export default function App() { return <>
                 let count = track(0);
                 console.log(count.__v);
-            }
+            </>; }
         `;
 		expect(() => compile(code, 'test.tsrx')).toThrow(
 			/Directly accessing internal property "__v" of a tracked object is not allowed/,
@@ -20,10 +20,10 @@ import { track } from 'ripple';
 	it('should error on direct access to "a" (get/set config) of a tracked object', () => {
 		const code = `
 import { track } from 'ripple';
-            export default component App() {
+            export default function App() { return <>
                 let myTracked = track(0);
                 console.log(myTracked.a);
-            }
+            </>; }
         `;
 		expect(() => compile(code, 'test.tsrx')).toThrow(
 			/Directly accessing internal property "a" of a tracked object is not allowed/,
@@ -33,10 +33,10 @@ import { track } from 'ripple';
 	it('should error on direct access to "b" (block) of a tracked object', () => {
 		const code = `
 import { track } from 'ripple';
-            export default component App() {
+            export default function App() { return <>
                 let myTracked = track(0);
                 console.log(myTracked.b);
-            }
+            </>; }
         `;
 		expect(() => compile(code, 'test.tsrx')).toThrow(
 			/Directly accessing internal property "b" of a tracked object is not allowed/,
@@ -46,10 +46,10 @@ import { track } from 'ripple';
 	it('should error on direct access to "c" (clock) of a tracked object', () => {
 		const code = `
 import { track } from 'ripple';
-            export default component App() {
+            export default function App() { return <>
                 let myTracked = track(0);
                 console.log(myTracked.c);
-            }
+            </>; }
         `;
 		expect(() => compile(code, 'test.tsrx')).toThrow(
 			/Directly accessing internal property "c" of a tracked object is not allowed/,
@@ -59,10 +59,10 @@ import { track } from 'ripple';
 	it('should error on direct access to "f" (flags) of a tracked object', () => {
 		const code = `
 import { track } from 'ripple';
-            export default component App() {
+            export default function App() { return <>
                 let myTracked = track(0);
                 console.log(myTracked.f);
-            }
+            </>; }
         `;
 		expect(() => compile(code, 'test.tsrx')).toThrow(
 			/Directly accessing internal property "f" of a tracked object is not allowed/,
@@ -72,10 +72,10 @@ import { track } from 'ripple';
 	it('should compile successfully with correct @ syntax access', () => {
 		const code = `
 import { track } from 'ripple';
-            export default component App() {
+            export default function App() { return <>
                 let &[count] = track(0);
                 console.log(count);
-            }
+            </>; }
         `;
 		expect(() => compile(code, 'test.tsrx')).not.toThrow();
 	});
@@ -83,30 +83,30 @@ import { track } from 'ripple';
 	it('should compile successfully with correct value access', () => {
 		const code = `
 import { track } from 'ripple';
-            export default component App() {
+            export default function App() { return <>
                 let count = track(0);
                 console.log(count.value);
-            }
+            </>; }
         `;
 		expect(() => compile(code, 'test.tsrx')).not.toThrow();
 	});
 
 	it('should not error on accessing __v of a non-tracked object', () => {
 		const code = `
-            export default component App() {
+            export default function App() { return <>
                 let obj = { __v: 123 };
                 console.log(obj.__v);
-            }
+            </>; }
         `;
 		expect(() => compile(code, 'test.tsrx')).not.toThrow();
 	});
 
 	it('should not error on accessing __v of a non-tracked object (member expression)', () => {
 		const code = `
-            export default component App() {
+            export default function App() { return <>
                 let data = { value: { __v: 456 } };
                 console.log(data.value.__v);
-            }
+            </>; }
         `;
 		expect(() => compile(code, 'test.tsrx')).not.toThrow();
 	});
@@ -115,11 +115,11 @@ import { track } from 'ripple';
 		'should not error on accessing a property named like an internal one on a non-tracked object',
 		() => {
 			const code = `
-            export default component App() {
+            export default function App() { return <>
                 let config = { a: 'some_value', b: 'another_value' };
                 console.log(config.a);
                 console.log(config.b);
-            }
+            </>; }
         `;
 			expect(() => compile(code, 'test.tsrx')).not.toThrow();
 		},
@@ -128,10 +128,10 @@ import { track } from 'ripple';
 	it('should error on indexed [0] access on a tracked object', () => {
 		const code = `
 import { track } from 'ripple';
-            export default component App() {
+            export default function App() { return <>
                 let count = track(0);
                 console.log(count[0]);
-            }
+            </>; }
         `;
 		expect(() => compile(code, 'test.tsrx')).toThrow(value_message);
 	});
@@ -139,10 +139,10 @@ import { track } from 'ripple';
 	it('should error on indexed [1] access on a tracked object', () => {
 		const code = `
 import { track } from 'ripple';
-            export default component App() {
+            export default function App() { return <>
                 let count = track(0);
                 let raw = count[1];
-            }
+            </>; }
         `;
 		expect(() => compile(code, 'test.tsrx')).toThrow(reference_message);
 	});
@@ -150,10 +150,10 @@ import { track } from 'ripple';
 	it('should error on indexed [0] write on a tracked object', () => {
 		const code = `
 import { track } from 'ripple';
-            export default component App() {
+            export default function App() { return <>
                 let count = track(0);
                 count[0] = 5;
-            }
+            </>; }
         `;
 		expect(() => compile(code, 'test.tsrx')).toThrow(value_message);
 	});
@@ -161,11 +161,11 @@ import { track } from 'ripple';
 	it('collects tracked numeric index errors in loose mode', () => {
 		const code = `
 import { track } from 'ripple';
-            export default component App() {
+            export default function App() { return <>
                 let count = track(0);
                 console.log(count[0]);
                 let raw = count[1];
-            }
+            </>; }
         `;
 		const result = compile(code, 'test.tsrx', { loose: true });
 
@@ -180,10 +180,10 @@ import { track } from 'ripple';
 	it('should error on indexed access through a known tracked lazy ref binding', () => {
 		const code = `
 import { track } from 'ripple';
-            export default component App() {
+            export default function App() { return <>
                 let &[value, tracked_ref] = track(0);
                 tracked_ref[0]++;
-            }
+            </>; }
         `;
 		expect(() => compile(code, 'test.tsrx')).toThrow(value_message);
 	});
@@ -191,10 +191,10 @@ import { track } from 'ripple';
 	it('should allow lazy destructuring a tracked value', () => {
 		const code = `
 import { track } from 'ripple';
-            export default component App() {
+            export default function App() { return <>
                 let &[value, tracked_ref] = track(0);
                 console.log(value, tracked_ref.value);
-            }
+            </>; }
         `;
 		expect(() => compile(code, 'test.tsrx')).not.toThrow();
 	});
@@ -202,10 +202,10 @@ import { track } from 'ripple';
 	it('should allow .value read access on a tracked object', () => {
 		const code = `
 import { track } from 'ripple';
-            export default component App() {
+            export default function App() { return <>
                 let count = track(0);
                 console.log(count.value);
-            }
+            </>; }
         `;
 		expect(() => compile(code, 'test.tsrx')).not.toThrow();
 	});
@@ -213,10 +213,10 @@ import { track } from 'ripple';
 	it('should allow .value assignment on a tracked object', () => {
 		const code = `
 import { track } from 'ripple';
-            export default component App() {
+            export default function App() { return <>
                 let count = track(0);
                 count.value = 5;
-            }
+            </>; }
         `;
 		expect(() => compile(code, 'test.tsrx')).not.toThrow();
 	});
@@ -224,10 +224,10 @@ import { track } from 'ripple';
 	it('should allow .length read access on a tracked object', () => {
 		const code = `
 import { track } from 'ripple';
-            export default component App() {
+            export default function App() { return <>
                 let count = track(0);
                 console.log(count.length);
-            }
+            </>; }
         `;
 		expect(() => compile(code, 'test.tsrx')).not.toThrow();
 	});

package/tests/client/compiler/compiler.try-in-function.test.tsrx

@@ -18,7 +18,7 @@ function count_occurrences(string: string, sub_string: string): number {
 
 describe('compiler > Volar transform does not duplicate try blocks from functions', () => {
 	it('try inside an async function', () => {
-		const source = `export component App() {
+		const source = `export function App() { return <>
 	async function doWork() {
 		try {
 			await fetch('/api');
@@ -27,7 +27,7 @@ describe('compiler > Volar transform does not duplicate try blocks from function
 		}
 	}
 	<div onclick={doWork}>{"click"}</div>
-}`;
+</>; }`;
 		const result = compile_to_volar_mappings(source, 'test.tsrx').code;
 
 		expect(count_occurrences(result, 'try {')).toBe(1);
@@ -36,14 +36,14 @@ describe('compiler > Volar transform does not duplicate try blocks from function
 	});
 
 	it('try inside an arrow function', () => {
-		const source = `export component App() {
+		const source = `export function App() { return <>
 	const doWork = async () => {
 		try {
 			await fetch('/api');
 		} catch (e) {}
 	};
 	<div onclick={doWork}>{"click"}</div>
-}`;
+</>; }`;
 		const result = compile_to_volar_mappings(source, 'test.tsrx').code;
 
 		expect(count_occurrences(result, 'try {')).toBe(1);
@@ -51,7 +51,7 @@ describe('compiler > Volar transform does not duplicate try blocks from function
 	});
 
 	it('try-catch-finally inside a function', () => {
-		const source = `export component App() {
+		const source = `export function App() { return <>
 	async function save() {
 		try {
 			await fetch('/save');
@@ -62,7 +62,7 @@ describe('compiler > Volar transform does not duplicate try blocks from function
 		}
 	}
 	<div onclick={save}>{"save"}</div>
-}`;
+</>; }`;
 		const result = compile_to_volar_mappings(source, 'test.tsrx').code;
 
 		expect(count_occurrences(result, 'try {')).toBe(1);
@@ -72,12 +72,12 @@ describe('compiler > Volar transform does not duplicate try blocks from function
 
 	it('try at component top level is preserved', () => {
 		const source = `import { trackAsync } from 'ripple';
-export component App() {
+export function App() { return <>
 	try {
 		let &[data] = trackAsync(() => fetch('/api'));
 	} catch (e) {}
 	<div>{"hi"}</div>
-}`;
+</>; }`;
 		const result = compile_to_volar_mappings(source, 'test.tsrx').code;
 
 		expect(count_occurrences(result, 'try {')).toBe(1);
@@ -86,7 +86,7 @@ export component App() {
 
 	it('component-level try and function-level try coexist without duplication', () => {
 		const source = `import { trackAsync } from 'ripple';
-export component App() {
+export function App() { return <>
 	try {
 		let &[data] = trackAsync(() => fetch('/init'));
 	} catch (e) {}
@@ -97,7 +97,7 @@ export component App() {
 		} catch (e) {}
 	}
 	<div onclick={refresh}>{"click"}</div>
-}`;
+</>; }`;
 		const result = compile_to_volar_mappings(source, 'test.tsrx').code;
 
 		expect(count_occurrences(result, 'try {')).toBe(2);
@@ -106,7 +106,7 @@ export component App() {
 	});
 
 	it('try in nested functions', () => {
-		const source = `export component App() {
+		const source = `export function App() { return <>
 	function outer() {
 		async function inner() {
 			try {
@@ -115,7 +115,7 @@ export component App() {
 		}
 	}
 	<div>{"hi"}</div>
-}`;
+</>; }`;
 		const result = compile_to_volar_mappings(source, 'test.tsrx').code;
 
 		expect(count_occurrences(result, 'try {')).toBe(1);
@@ -123,7 +123,7 @@ export component App() {
 	});
 
 	it('multiple functions with try blocks each appear once', () => {
-		const source = `export component App() {
+		const source = `export function App() { return <>
 	async function load() {
 		try {
 			await fetch('/load');
@@ -135,7 +135,7 @@ export component App() {
 		} catch (e) {}
 	}
 	<div>{"hi"}</div>
-}`;
+</>; }`;
 		const result = compile_to_volar_mappings(source, 'test.tsrx').code;
 
 		expect(count_occurrences(result, 'try {')).toBe(2);
@@ -143,7 +143,7 @@ export component App() {
 	});
 
 	it('try in object method', () => {
-		const source = `export component App() {
+		const source = `export function App() { return <>
 	const handlers = {
 		async onClick() {
 			try {
@@ -152,7 +152,7 @@ export component App() {
 		}
 	};
 	<div>{"hi"}</div>
-}`;
+</>; }`;
 		const result = compile_to_volar_mappings(source, 'test.tsrx').code;
 
 		expect(count_occurrences(result, 'try {')).toBe(1);

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

@@ -33,11 +33,11 @@ beforeAll(() => {
 	(global as any).count++;
 });
 
-component Test() {
+function Test() { return <>
 	let toggle: { value: boolean } | undefined;
 	toggle!.value = false;
 	toggle!.value++;
-}`;
+</>; }`;
 
 		const { code } = compile(source, 'test.tsrx', { mode: 'client' });
 

package/tests/client/composite/composite.dynamic-components.test.tsrx

@@ -2,14 +2,14 @@ import { flushSync, track } from 'ripple';
 
 describe('composite > dynamic components', () => {
 	it('supports rendering composite components using <@component> syntax', () => {
-		component App() {
-			component basic() {
-				<div>{'Basic Component'}</div>
-			}
-
-			const tracked_basic = track(() => basic);
-
-			<@tracked_basic />
+		function App() {
+			return <>
+				function basic() {
+					return <><div>{'Basic Component'}</div></>;
+				}
+				const tracked_basic = track(() => basic);
+				<@tracked_basic />
+			</>;
 		}
 
 		render(App);
@@ -19,19 +19,18 @@ describe('composite > dynamic components', () => {
 	});
 
 	it('supports rendering composite components from object properties', () => {
-		component App() {
-			component basic() {
-				<div>{'Basic Component'}</div>
-			}
-
-			const tracked_basic = track(() => basic);
-
-			const obj = {
-				tracked_basic,
-			};
-
-			const comp = obj.tracked_basic;
-			<@comp />
+		function App() {
+			return <>
+				function basic() {
+					return <><div>{'Basic Component'}</div></>;
+				}
+				const tracked_basic = track(() => basic);
+				const obj = {
+					tracked_basic,
+				};
+				const comp = obj.tracked_basic;
+				<@comp />
+			</>;
 		}
 
 		render(App);
@@ -41,21 +40,19 @@ describe('composite > dynamic components', () => {
 	});
 
 	it('supports rendering composite components from tracked object properties', () => {
-		component App() {
-			component basic() {
-				<div>{'Basic Component'}</div>
-			}
-
-			const tracked_basic = track(() => basic);
-
-			const obj = {
-				tracked_basic,
-			};
-
-			let &[inner] = track(obj);
-
-			const comp = inner.tracked_basic;
-			<@comp />
+		function App() {
+			return <>
+				function basic() {
+					return <><div>{'Basic Component'}</div></>;
+				}
+				const tracked_basic = track(() => basic);
+				const obj = {
+					tracked_basic,
+				};
+				let &[inner] = track(obj);
+				const comp = inner.tracked_basic;
+				<@comp />
+			</>;
 		}
 
 		render(App);
@@ -65,22 +62,24 @@ describe('composite > dynamic components', () => {
 	});
 
 	it('handles dynamic component switching', () => {
-		component Child1() {
-			<div>{'I am child 1'}</div>
+		function Child1() {
+			return <><div>{'I am child 1'}</div></>;
 		}
 
-		component Child2() {
-			<div>{'I am child 2'}</div>
+		function Child2() {
+			return <><div>{'I am child 2'}</div></>;
 		}
 
-		component App() {
-			let &[thing] = track(() => Child1);
-
-			<div id="container">
-				<@thing />
-			</div>
-
-			<button onClick={() => (thing = thing === Child1 ? Child2 : Child1)}>{'Change Child'}</button>
+		function App() {
+			return <>
+				let &[thing] = track(() => Child1);
+				<div id="container">
+					<@thing />
+				</div>
+				<button onClick={() => (thing = thing === Child1 ? Child2 : Child1)}>
+					{'Change Child'}
+				</button>
+			</>;
 		}
 
 		render(App);