ripple 0.3.72 → 0.3.76

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

@@ -1,31 +1,29 @@
 describe('compiler > regex', () => {
 	it('renders without crashing using regex literals in method calls', () => {
-		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>
-			</>;
+		function 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>
 		}
 
 		render(App);
@@ -50,25 +48,23 @@ describe('compiler > regex', () => {
 	});
 
 	it('renders without crashing mixing regex and JSX syntax', () => {
-		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>
+		function 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>
 				</div>
-			</>;
+			</div>
 		}
 
 		render(App);

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

@@ -7,10 +7,11 @@ 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 function App() { return <>
+            export default function App() @{
                 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 +21,11 @@ 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 function App() { return <>
+            export default function App() @{
                 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 +35,11 @@ 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 function App() { return <>
+            export default function App() @{
                 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 +49,11 @@ 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 function App() { return <>
+            export default function App() @{
                 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 +63,11 @@ 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 function App() { return <>
+            export default function App() @{
                 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 +77,11 @@ import { track } from 'ripple';
 	it('should compile successfully with correct @ syntax access', () => {
 		const code = `
 import { track } from 'ripple';
-            export default function App() { return <>
+            export default function App() @{
                 let &[count] = track(0);
                 console.log(count);
-            </>; }
+                <></>
+            }
         `;
 		expect(() => compile(code, 'test.tsrx')).not.toThrow();
 	});
@@ -83,30 +89,33 @@ import { track } from 'ripple';
 	it('should compile successfully with correct value access', () => {
 		const code = `
 import { track } from 'ripple';
-            export default function App() { return <>
+            export default function App() @{
                 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 function App() { return <>
+            export default function App() @{
                 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 function App() { return <>
+            export default function App() @{
                 let data = { value: { __v: 456 } };
                 console.log(data.value.__v);
-            </>; }
+                <></>
+            }
         `;
 		expect(() => compile(code, 'test.tsrx')).not.toThrow();
 	});
@@ -115,11 +124,12 @@ 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 function App() { return <>
+            export default function App() @{
                 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 +138,11 @@ import { track } from 'ripple';
 	it('should error on indexed [0] access on a tracked object', () => {
 		const code = `
 import { track } from 'ripple';
-            export default function App() { return <>
+            export default function App() @{
                 let count = track(0);
                 console.log(count[0]);
-            </>; }
+                <></>
+            }
         `;
 		expect(() => compile(code, 'test.tsrx')).toThrow(value_message);
 	});
@@ -139,10 +150,11 @@ import { track } from 'ripple';
 	it('should error on indexed [1] access on a tracked object', () => {
 		const code = `
 import { track } from 'ripple';
-            export default function App() { return <>
+            export default function App() @{
                 let count = track(0);
                 let raw = count[1];
-            </>; }
+                <></>
+            }
         `;
 		expect(() => compile(code, 'test.tsrx')).toThrow(reference_message);
 	});
@@ -150,10 +162,11 @@ import { track } from 'ripple';
 	it('should error on indexed [0] write on a tracked object', () => {
 		const code = `
 import { track } from 'ripple';
-            export default function App() { return <>
+            export default function App() @{
                 let count = track(0);
                 count[0] = 5;
-            </>; }
+                <></>
+            }
         `;
 		expect(() => compile(code, 'test.tsrx')).toThrow(value_message);
 	});
@@ -161,11 +174,12 @@ import { track } from 'ripple';
 	it('collects tracked numeric index errors in loose mode', () => {
 		const code = `
 import { track } from 'ripple';
-            export default function App() { return <>
+            export default function App() @{
                 let count = track(0);
                 console.log(count[0]);
                 let raw = count[1];
-            </>; }
+                <></>
+            }
         `;
 		const result = compile(code, 'test.tsrx', { loose: true });
 
@@ -180,10 +194,11 @@ 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 function App() { return <>
+            export default function App() @{
                 let &[value, tracked_ref] = track(0);
                 tracked_ref[0]++;
-            </>; }
+                <></>
+            }
         `;
 		expect(() => compile(code, 'test.tsrx')).toThrow(value_message);
 	});
@@ -191,10 +206,11 @@ import { track } from 'ripple';
 	it('should allow lazy destructuring a tracked value', () => {
 		const code = `
 import { track } from 'ripple';
-            export default function App() { return <>
+            export default function App() @{
                 let &[value, tracked_ref] = track(0);
                 console.log(value, tracked_ref.value);
-            </>; }
+                <></>
+            }
         `;
 		expect(() => compile(code, 'test.tsrx')).not.toThrow();
 	});
@@ -202,10 +218,11 @@ import { track } from 'ripple';
 	it('should allow .value read access on a tracked object', () => {
 		const code = `
 import { track } from 'ripple';
-            export default function App() { return <>
+            export default function App() @{
                 let count = track(0);
                 console.log(count.value);
-            </>; }
+                <></>
+            }
         `;
 		expect(() => compile(code, 'test.tsrx')).not.toThrow();
 	});
@@ -213,10 +230,11 @@ import { track } from 'ripple';
 	it('should allow .value assignment on a tracked object', () => {
 		const code = `
 import { track } from 'ripple';
-            export default function App() { return <>
+            export default function App() @{
                 let count = track(0);
                 count.value = 5;
-            </>; }
+                <></>
+            }
         `;
 		expect(() => compile(code, 'test.tsrx')).not.toThrow();
 	});
@@ -224,10 +242,11 @@ import { track } from 'ripple';
 	it('should allow .length read access on a tracked object', () => {
 		const code = `
 import { track } from 'ripple';
-            export default function App() { return <>
+            export default function App() @{
                 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 function App() { return <>
+		const source = `export function App() @{
 	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 function App() { return <>
+		const source = `export function App() @{
 	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 function App() { return <>
+		const source = `export function App() @{
 	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 function App() { return <>
+export function App() @{
 	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 function App() { return <>
 
 	it('component-level try and function-level try coexist without duplication', () => {
 		const source = `import { trackAsync } from 'ripple';
-export function App() { return <>
+export function App() @{
 	try {
 		let &[data] = trackAsync(() => fetch('/init'));
 	} catch (e) {}
@@ -97,7 +97,7 @@ export function App() { return <>
 		} 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 function App() { return <>
 	});
 
 	it('try in nested functions', () => {
-		const source = `export function App() { return <>
+		const source = `export function App() @{
 	function outer() {
 		async function inner() {
 			try {
@@ -115,7 +115,7 @@ export function App() { return <>
 		}
 	}
 	<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 function App() { return <>
 	});
 
 	it('multiple functions with try blocks each appear once', () => {
-		const source = `export function App() { return <>
+		const source = `export function App() @{
 	async function load() {
 		try {
 			await fetch('/load');
@@ -135,7 +135,7 @@ export function App() { return <>
 		} 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 function App() { return <>
 	});
 
 	it('try in object method', () => {
-		const source = `export function App() { return <>
+		const source = `export function App() @{
 	const handlers = {
 		async onClick() {
 			try {
@@ -152,7 +152,7 @@ export function App() { return <>
 		}
 	};
 	<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,12 @@ beforeAll(() => {
 	(global as any).count++;
 });
 
-function Test() { return <>
+function Test() @{
 	let toggle: { value: boolean } | undefined;
 	toggle!.value = false;
 	toggle!.value++;
-</>; }`;
+	<></>
+}`;
 
 		const { code } = compile(source, 'test.tsrx', { mode: 'client' });
 
@@ -46,7 +47,7 @@ function Test() { return <>
 		expect(code).toContain('toggle.value = false');
 		expect(code).toContain('toggle.value++');
 		expect(code).not.toContain('as any');
-		expect(code).not.toContain('!');
+		expect(code).not.toContain('toggle!');
 	});
 
 	it('removes class TypeScript syntax from JS output', () => {

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

@@ -1,15 +1,14 @@
-import { flushSync, track } from 'ripple';
+import { Dynamic, flushSync, track } from 'ripple';
 
 describe('composite > dynamic components', () => {
-	it('supports rendering composite components using <@component> syntax', () => {
-		function App() {
-			return <>
-				function basic() {
-					return <><div>{'Basic Component'}</div></>;
-				}
-				const tracked_basic = track(() => basic);
-				<@tracked_basic />
-			</>;
+	it('supports rendering composite components using <Dynamic is={component}> syntax', () => {
+		function basic() @{
+			<div>{'Basic Component'}</div>
+		}
+
+		function App() @{
+			const tracked_basic = track(() => basic);
+			<Dynamic is={tracked_basic} />
 		}
 
 		render(App);
@@ -19,18 +18,17 @@ describe('composite > dynamic components', () => {
 	});
 
 	it('supports rendering composite components from object properties', () => {
-		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 />
-			</>;
+		function basic() @{
+			<div>{'Basic Component'}</div>
+		}
+
+		function App() @{
+			const tracked_basic = track(() => basic);
+			const obj = {
+				tracked_basic,
+			};
+			const comp = obj.tracked_basic;
+			<Dynamic is={comp} />
 		}
 
 		render(App);
@@ -40,19 +38,18 @@ describe('composite > dynamic components', () => {
 	});
 
 	it('supports rendering composite components from tracked object properties', () => {
-		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 />
-			</>;
+		function basic() @{
+			<div>{'Basic Component'}</div>
+		}
+
+		function App() @{
+			const tracked_basic = track(() => basic);
+			const obj = {
+				tracked_basic,
+			};
+			let &[inner] = track(obj);
+			const comp = inner.tracked_basic;
+			<Dynamic is={comp} />
 		}
 
 		render(App);
@@ -61,25 +58,43 @@ describe('composite > dynamic components', () => {
 		expect(container.textContent).toBe('Basic Component');
 	});
 
+	it('does not pass is to dynamic component props', () => {
+		function Child(props) @{
+			<div>
+				{props.is === undefined && !('is' in props) ? 'hidden' : 'leaked'}
+			</div>
+		}
+
+		function App() @{
+			const component = track(() => Child);
+			<Dynamic is={component} label="child" />
+		}
+
+		render(App);
+		flushSync();
+
+		expect(container.textContent).toBe('hidden');
+	});
+
 	it('handles dynamic component switching', () => {
-		function Child1() {
-			return <><div>{'I am child 1'}</div></>;
+		function Child1() @{
+			<div>{'I am child 1'}</div>
 		}
 
-		function Child2() {
-			return <><div>{'I am child 2'}</div></>;
+		function Child2() @{
+			<div>{'I am child 2'}</div>
 		}
 
-		function App() {
-			return <>
-				let &[thing] = track(() => Child1);
+		function App() @{
+			let &[thing] = track(() => Child1);
+			<>
 				<div id="container">
-					<@thing />
+					<Dynamic is={thing} />
 				</div>
-				<button onClick={() => (thing = thing === Child1 ? Child2 : Child1)}>
-					{'Change Child'}
-				</button>
-			</>;
+				<button
+					onClick={() => (thing = thing === Child1 ? Child2 : Child1)}
+				>{'Change Child'}</button>
+			</>
 		}
 
 		render(App);