ripple 0.2.215 → 0.3.0

package/tests/client/compiler/compiler.basic.test.ripple

@@ -1,5 +1,8 @@
 import { parse, compile, compile_to_volar_mappings } from 'ripple/compiler';
-import { obfuscate_identifier } from 'ripple/compiler/internal/identifier/utils';
+import {
+	obfuscate_identifier,
+	RIPPLE_NAMESPACE_IDENTIFIER,
+} from 'ripple/compiler/internal/identifier/utils';
 import type * as AST from 'estree';
 
 function count_occurrences(string: string, subString: string): number {
@@ -19,25 +22,25 @@ describe('compiler > basics', () => {
 		const source = `export component App() {
   <div id="myid" class="myclass">{"Hello World"}</div>
 
-  <style>#style</style>
+  <style>#ripple.style</style>
 }`;
 		const style1 = '.myid {color: green }';
 		const style2 = '#myid {color: green }';
 		const style3 = 'div {color: green }';
 
-		let input = source.replace('#style', style1);
+		let input = source.replace('#ripple.style', style1);
 		let ast = parse(input);
 		expect(
 			((ast.body[0] as AST.ExportNamedDeclaration).declaration as unknown as AST.Component)?.css.source,
 		).toEqual(style1);
 
-		input = source.replace('#style', style2);
+		input = source.replace('#ripple.style', style2);
 		ast = parse(input);
 		expect(
 			((ast.body[0] as AST.ExportNamedDeclaration).declaration as unknown as AST.Component)?.css.source,
 		).toEqual(style2);
 
-		input = source.replace('#style', style3);
+		input = source.replace('#ripple.style', style3);
 		ast = parse(input);
 		expect(
 			((ast.body[0] as AST.ExportNamedDeclaration).declaration as unknown as AST.Component)?.css.source,
@@ -197,8 +200,8 @@ describe('compiler > basics', () => {
 			class Box<T> {
 				value: T;
 
-				method<T>(): T {
-					return this.value;
+				method<U extends T>(): U {
+					return this.value as U;
 				}
 
 				constructor(value: T) {
@@ -247,91 +250,152 @@ describe('compiler > basics', () => {
 		expect(js.code).not.toMatch(/_\$_\.template\(`<!><!>`,\s*1,\s*3\)/);
 	});
 
-	it(
-		'imports and uses only obfuscated Tracked imports when encountering only shorthand syntax',
-		() => {
-			const source = `
-import {
-	TrackedArray,
-	TrackedObject,
-	TrackedSet,
-	TrackedMap,
-	createRefKey,
-} from 'ripple';
+	// 	it(
+	// 		'imports and uses only obfuscated Tracked imports when encountering only shorthand syntax',
+	// 		() => {
+	// 			const source = `
+	// import { RippleArray, RippleObject, RippleSet, RippleMap, createRefKey } from 'ripple';
+	// component App() {
+	// 	const items = #ripple[1, 2, 3];
+	// 	const obj = #ripple{ a: 1, b: 2, c: 3 };
+	// 	const set = #ripple.set([1, 2, 3]);
+	// 	const map = #ripple.map([['a', 1], ['b', 2], ['c', 3]]);
+
+	// 	<div {ref () => {}} />
+	// }
+	// `;
+	// 			const result = compile_to_volar_mappings(source, 'test.ripple').code;
+
+	// 			expect(count_occurrences(result, 'RippleArray')).toBe(1);
+	// 			expect(count_occurrences(result, 'RippleObject')).toBe(1);
+	// 			expect(count_occurrences(result, 'RippleSet')).toBe(1);
+	// 			expect(count_occurrences(result, 'RippleMap')).toBe(1);
+	// 			expect(count_occurrences(result, 'createRefKey')).toBe(1);
+	// 		},
+	// 	);
+
+	// 	it(
+	// 		'adds obfuscated imports and keeps renamed Tracked imports intact when encountering shorthand syntax',
+	// 		() => {
+	// 			const source = `
+	// import { RippleArray as TA, RippleObject as TO, RippleSet as TS, RippleMap as TM, createRefKey as crk } from 'ripple';
+	// component App() {
+	// 	const items = #ripple[1, 2, 3];
+	// 	const obj = #ripple{ a: 1, b: 2, c: 3 };
+	// 	const set = #ripple.set([1, 2, 3]);
+	// 	const map = #ripple.map([['a', 1], ['b', 2], ['c', 3]]);
+
+	// 	<div {ref () => {}} />
+	// }
+	// `;
+	// 			const result = compile_to_volar_mappings(source, 'test.ripple').code;
+
+	// 			expect(count_occurrences(result, obfuscate_identifier('RippleArray'))).toBe(2);
+	// 			expect(count_occurrences(result, 'TA')).toBe(1);
+	// 			expect(count_occurrences(result, obfuscate_identifier('RippleObject'))).toBe(2);
+	// 			expect(count_occurrences(result, 'TO')).toBe(1);
+	// 			expect(count_occurrences(result, obfuscate_identifier('RippleSet'))).toBe(2);
+	// 			expect(count_occurrences(result, 'TS')).toBe(1);
+	// 			expect(count_occurrences(result, obfuscate_identifier('RippleMap'))).toBe(2);
+	// 			expect(count_occurrences(result, 'TM')).toBe(1);
+	// 			expect(count_occurrences(result, obfuscate_identifier('createRefKey'))).toBe(2);
+	// 			expect(count_occurrences(result, 'crk')).toBe(1);
+	// 		},
+	// 	);
+
+	// 	it('adds hidden obfuscated imports for shorthand syntax', () => {
+	// 		const source = `
+	// component App() {
+	// 	const items = #ripple[1, 2, 3];
+	// 	const obj = #ripple{ a: 1, b: 2, c: 3 };
+	// 	const set = #ripple.set([1, 2, 3]);
+	// 	const map = #ripple.map([['a', 1], ['b', 2], ['c', 3]]);
+
+	// 	<div {ref () => {}} />
+	// }
+	// `;
+	// 		const result = compile_to_volar_mappings(source, 'test.ripple').code;
+
+	// 		expect(count_occurrences(result, obfuscate_identifier('RippleArray'))).toBe(2);
+	// 		expect(count_occurrences(result, obfuscate_identifier('RippleObject'))).toBe(2);
+	// 		expect(count_occurrences(result, obfuscate_identifier('RippleSet'))).toBe(2);
+	// 		expect(count_occurrences(result, obfuscate_identifier('RippleMap'))).toBe(2);
+	// 		expect(count_occurrences(result, obfuscate_identifier('createRefKey'))).toBe(2);
+	// 	});
+
+	it('prints longhand tracked property values in to_ts output while preserving [\'#v\']', () => {
+		const source = `
+import { createRefKey } from 'ripple';
 
 component App() {
-	const items = #[1, 2, 3];
-	const obj = #{ a: 1, b: 2, c: 3 };
-	const set = new #Set([1, 2, 3]);
-	const map = new #Map([['a', 1], ['b', 2], ['c', 3]]);
-
-	<div {ref () => {}} />
+	let value = #ripple.track('test');
+	function inputRef(node) {}
+
+	const props = {
+		id: 'example',
+		@value,
+		[createRefKey()]: inputRef,
+	};
 }
 `;
-			const result = compile_to_volar_mappings(source, 'test.ripple').code;
-
-			expect(count_occurrences(result, 'TrackedArray')).toBe(1);
-			expect(count_occurrences(result, 'TrackedObject')).toBe(1);
-			expect(count_occurrences(result, 'TrackedSet')).toBe(1);
-			expect(count_occurrences(result, 'TrackedMap')).toBe(1);
-			expect(count_occurrences(result, 'createRefKey')).toBe(1);
-		},
-	);
-
-	it(
-		'adds obfuscated imports and keeps renamed Tracked imports intact when encountering shorthand syntax',
-		() => {
-			const source = `
-import {
-	TrackedArray as TA,
-	TrackedObject as TO,
-	TrackedSet as TS,
-	TrackedMap as TM,
-	createRefKey as crk,
-} from 'ripple';
 
-component App() {
-	const items = #[1, 2, 3];
-	const obj = #{ a: 1, b: 2, c: 3 };
-	const set = new #Set([1, 2, 3]);
-	const map = new #Map([['a', 1], ['b', 2], ['c', 3]]);
+		const result = compile_to_volar_mappings(source, 'test.ripple').code;
+
+		expect(result).toMatch(/value:\s*value\??\.\['#v'\]/);
+	});
 
-	<div {ref () => {}} />
+	it('rewrites standalone #ripple to the hidden namespace identifier in to_ts output', () => {
+		const source = `
+export component App() {
+	#ripple
 }
 `;
-			const result = compile_to_volar_mappings(source, 'test.ripple').code;
-
-			expect(count_occurrences(result, obfuscate_identifier('TrackedArray'))).toBe(2);
-			expect(count_occurrences(result, 'TA')).toBe(1);
-			expect(count_occurrences(result, obfuscate_identifier('TrackedObject'))).toBe(2);
-			expect(count_occurrences(result, 'TO')).toBe(1);
-			expect(count_occurrences(result, obfuscate_identifier('TrackedSet'))).toBe(2);
-			expect(count_occurrences(result, 'TS')).toBe(1);
-			expect(count_occurrences(result, obfuscate_identifier('TrackedMap'))).toBe(2);
-			expect(count_occurrences(result, 'TM')).toBe(1);
-			expect(count_occurrences(result, obfuscate_identifier('createRefKey'))).toBe(2);
-			expect(count_occurrences(result, 'crk')).toBe(1);
-		},
-	);
-
-	it('adds hidden obfuscated imports for shorthand syntax', () => {
+
+		const result = compile_to_volar_mappings(source, 'test.ripple', { loose: true }).code;
+
+		expect(result).toContain(RIPPLE_NAMESPACE_IDENTIFIER);
+		expect(result).toContain(`${RIPPLE_NAMESPACE_IDENTIFIER};`);
+		expect(result).not.toContain('#ripple;');
+	});
+
+	it('preserves generic type args in interface extends for Volar mappings', () => {
 		const source = `
-component App() {
-	const items = #[1, 2, 3];
-	const obj = #{ a: 1, b: 2, c: 3 };
-	const set = new #Set([1, 2, 3]);
-	const map = new #Map([['a', 1], ['b', 2], ['c', 3]]);
+interface PolymorphicProps<T extends keyof HTMLElementTagNameMap> {
+	as?: T;
+}
 
-	<div {ref () => {}} />
+interface Props extends PolymorphicProps<'div'> {
+	id: string;
+}
+
+export component App(props: Props) {
+	<div id={props.id} />
 }
 `;
+
 		const result = compile_to_volar_mappings(source, 'test.ripple').code;
 
-		expect(count_occurrences(result, obfuscate_identifier('TrackedArray'))).toBe(2);
-		expect(count_occurrences(result, obfuscate_identifier('TrackedObject'))).toBe(2);
-		expect(count_occurrences(result, obfuscate_identifier('TrackedSet'))).toBe(2);
-		expect(count_occurrences(result, obfuscate_identifier('TrackedMap'))).toBe(2);
-		expect(count_occurrences(result, obfuscate_identifier('createRefKey'))).toBe(2);
+		expect(result).toContain('extends PolymorphicProps<\'div\'>');
+	});
+
+	it('handles if-else expression statements in Volar mappings', () => {
+		const source = `
+export component App() {
+	let level = #ripple.track(1);
+
+	<button
+		onClick={() => {
+			if (@level === 1) @level = 2;
+			else if (@level === 2) @level = 3;
+			else @level = 1;
+		}}
+	>
+		{'Toggle'}
+	</button>
+}
+`;
+
+		expect(() => compile_to_volar_mappings(source, 'test.ripple')).not.toThrow();
 	});
 
 	it('should not error on having js below markup in the same scope', () => {
@@ -357,6 +421,23 @@ export component App() {
 		expect(() => compile(code, 'test.ripple')).not.toThrow();
 	});
 
+	it('converts nested component children into props in Volar mappings', () => {
+		const source = `
+export component App() {
+	<ark.div class="host-class" data-value="42">
+		component asChild({ children, href, ...rest }: { href: string; [key: string]: any }) {
+			<a id="aschild-anchor" {href} {...rest} data-extra="yes">{'Link'}</a>
+		}
+	</ark.div>
+}
+`;
+		const result = compile_to_volar_mappings(source, 'test.ripple').code;
+
+		expect(result).toContain('<ark.div class="host-class" data-value="42" asChild={');
+		expect(result).not.toContain('children={() =>');
+		expect(result).not.toContain('function asChild');
+	});
+
 	it('should not error on `this` MemberExpression with a UpdateExpression', () => {
 		const code = `
 class Test {
@@ -374,14 +455,13 @@ export component App() {
 		expect(() => compile(code, 'test.ripple')).not.toThrow();
 	});
 
-	it('should inject __block for track() calls inside class constructors', () => {
+	it('should inject __block for #ripple.track() calls inside class constructors', () => {
 		const source = `
-import { track } from 'ripple';
 
 class Store {
 	constructor() {
-		this.count = track(0);
-		this.items = #[1, 2, 3];
+		this.count = #ripple.track(0);
+		this.items = #ripple[1, 2, 3];
 	}
 }
 
@@ -397,4 +477,65 @@ export component App() {
 		expect(code).toContain('__block');
 		expect(code).toContain('_$_.scope()');
 	});
+
+	it('parses #ripple.effect and #ripple.untrack calls', () => {
+		const source = `
+component App() {
+	let count = #ripple.track(0);
+
+	#ripple.effect(() => {
+		const snapshot = #ripple.untrack(() => @count);
+		console.log(snapshot);
+	});
+}
+`;
+
+		const ast = parse(source);
+		const ast_json = JSON.stringify(ast);
+
+		expect(ast_json).toContain('"source_name":"#ripple.effect"');
+		expect(ast_json).toContain('"source_name":"#ripple.untrack"');
+	});
+
+	it('collects duplicate declaration parser errors in loose mode', () => {
+		const source = `
+export component App() {
+	let test = #ripple.track(false);
+	let test = 'hey';
+}
+`;
+
+		expect(() => compile(source, 'test.ripple')).toThrow(
+			'Identifier \'test\' has already been declared',
+		);
+
+		const result = compile_to_volar_mappings(source, 'test.ripple', { loose: true });
+
+		expect(
+			result.errors.some(
+				(item) => item.message.includes('Identifier \'test\' has already been declared'),
+			),
+		).toBe(true);
+	});
+
+	it('parses bare #ripple in loose mode for autocomplete recovery', () => {
+		const source = `
+export component App() {
+	#ripple
+}
+`;
+
+		expect(() => compile_to_volar_mappings(source, 'test.ripple', { loose: true })).not.toThrow();
+
+		const result = compile_to_volar_mappings(source, 'test.ripple', { loose: true });
+		expect(result.errors).toEqual([]);
+
+		const ripple_offset = source.indexOf('#ripple');
+		const mapping = result.mappings.find(
+			(mapping) => mapping.sourceOffsets[0] === ripple_offset &&
+				mapping.lengths[0] === '#ripple'.length,
+		);
+
+		expect(mapping?.data.customData.suppressedDiagnostics).toContain(18016);
+	});
 });

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

@@ -1,11 +1,10 @@
 import { compile } from 'ripple/compiler';
-import { track } from 'ripple';
 
 describe('Compiler: Tracked Object Direct Access Checks', () => {
 	it('should error on direct access to __v of a tracked object', () => {
 		const code = `
             export default component App() {
-                let count = track(0);
+                let count = #ripple.track(0);
                 console.log(count.__v);
             }
         `;
@@ -17,7 +16,7 @@ describe('Compiler: Tracked Object Direct Access Checks', () => {
 	it('should error on direct access to "a" (get/set config) of a tracked object', () => {
 		const code = `
             export default component App() {
-                let myTracked = track(0);
+                let myTracked = #ripple.track(0);
                 console.log(myTracked.a);
             }
         `;
@@ -29,7 +28,7 @@ describe('Compiler: Tracked Object Direct Access Checks', () => {
 	it('should error on direct access to "b" (block) of a tracked object', () => {
 		const code = `
             export default component App() {
-                let myTracked = track(0);
+                let myTracked = #ripple.track(0);
                 console.log(myTracked.b);
             }
         `;
@@ -41,7 +40,7 @@ describe('Compiler: Tracked Object Direct Access Checks', () => {
 	it('should error on direct access to "c" (clock) of a tracked object', () => {
 		const code = `
             export default component App() {
-                let myTracked = track(0);
+                let myTracked = #ripple.track(0);
                 console.log(myTracked.c);
             }
         `;
@@ -53,7 +52,7 @@ describe('Compiler: Tracked Object Direct Access Checks', () => {
 	it('should error on direct access to "f" (flags) of a tracked object', () => {
 		const code = `
             export default component App() {
-                let myTracked = track(0);
+                let myTracked = #ripple.track(0);
                 console.log(myTracked.f);
             }
         `;
@@ -65,7 +64,7 @@ describe('Compiler: Tracked Object Direct Access Checks', () => {
 	it('should compile successfully with correct @ syntax access', () => {
 		const code = `
             export default component App() {
-                let count = track(0);
+                let count = #ripple.track(0);
                 console.log(@count);
             }
         `;
@@ -74,9 +73,9 @@ describe('Compiler: Tracked Object Direct Access Checks', () => {
 
 	it('should compile successfully with correct get() function access', () => {
 		const code = `
-            import { get, track } from 'ripple';
+import { get } from 'ripple';
             export default component App() {
-                let count = track(0);
+                let count = #ripple.track(0);
                 console.log(get(count));
             }
         `;

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

@@ -1,13 +1,13 @@
-import { track, flushSync } from 'ripple';
+import { flushSync } from 'ripple';
 
 describe('composite > dynamic components', () => {
-	it('supports rendering compositie components using <@component> syntax', () => {
+	it('supports rendering composite components using <@component> syntax', () => {
 		component App() {
 			component basic() {
 				<div>{'Basic Component'}</div>
 			}
 
-			const tracked_basic = track(() => basic);
+			const tracked_basic = #ripple.track(() => basic);
 
 			<@tracked_basic />
 		}
@@ -24,7 +24,7 @@ describe('composite > dynamic components', () => {
 				<div>{'Basic Component'}</div>
 			}
 
-			const tracked_basic = track(() => basic);
+			const tracked_basic = #ripple.track(() => basic);
 
 			const obj = {
 				tracked_basic,
@@ -45,15 +45,15 @@ describe('composite > dynamic components', () => {
 				<div>{'Basic Component'}</div>
 			}
 
-			const tracked_basic = track(() => basic);
+			const tracked_basic = #ripple.track(() => basic);
 
 			const obj = {
 				tracked_basic,
 			};
 
-			const tracked_object = track(obj);
+			const ripple_object = #ripple.track(obj);
 
-			<@tracked_object.@tracked_basic />
+			<@ripple_object.@tracked_basic />
 		}
 
 		render(App);
@@ -72,7 +72,7 @@ describe('composite > dynamic components', () => {
 		}
 
 		component App() {
-			let thing = track(() => Child1);
+			let thing = #ripple.track(() => Child1);
 
 			<div id="container">
 				<@thing />

package/tests/client/composite/composite.generics.test.ripple

@@ -1,4 +1,4 @@
-import { TrackedArray, TrackedMap } from 'ripple';
+import { RippleArray, RippleMap } from 'ripple';
 
 describe('composite > generics', () => {
 	it('handles advanced generic ambiguity and edge cases', () => {
@@ -143,10 +143,10 @@ describe('composite > generics', () => {
 			const s = flag ? new Box<number>(1) : new Box<string>('string');
 
 			// 20. Generic inside template expression
-			const t = `length=${new TrackedArray<number>().length}`;
+			const t = `length=${new RippleArray<number>().length}`;
 
 			// 21. Optional chaining + generic + property access
-			const registry = new TrackedMap<string, number>();
+			const registry = new RippleMap<string, number>();
 			const u = registry.get('id')?.toString();
 
 			// 22. Generic call used as callee for another call
@@ -208,7 +208,7 @@ describe('composite > generics', () => {
 			>();
 
 			// 33. Map of generic instance as key
-			const mm = new Map<TrackedArray<number>, TrackedArray<string>>();
+			const mm = new Map<RippleArray<number>, RippleArray<string>>();
 		}
 
 		render(App);

package/tests/client/composite/composite.props.test.ripple

@@ -1,5 +1,5 @@
 import type { Tracked, Props } from 'ripple';
-import { track, trackSplit, effect, flushSync } from 'ripple';
+import { flushSync } from 'ripple';
 
 describe('composite > props', () => {
 	it('correctly handles default prop values', () => {
@@ -8,7 +8,7 @@ describe('composite > props', () => {
 		}
 
 		component App() {
-			let foo = track(123);
+			let foo = #ripple.track(123);
 
 			<Child />
 			<Child {@foo} />
@@ -44,7 +44,7 @@ describe('composite > props', () => {
 		}
 
 		component App() {
-			let foo = track(123);
+			let foo = #ripple.track(123);
 
 			<Child />
 			<Child {foo} />
@@ -62,7 +62,7 @@ describe('composite > props', () => {
 		}
 
 		component App() {
-			let foo = track(123);
+			let foo = #ripple.track(123);
 
 			<Child />
 			<Child {@foo} />
@@ -78,7 +78,7 @@ describe('composite > props', () => {
 		const logs: number[] = [];
 
 		component Counter({ count }: { count: Tracked<number> }) {
-			effect(() => {
+			#ripple.effect(() => {
 				logs.push(@count);
 			});
 
@@ -86,7 +86,7 @@ describe('composite > props', () => {
 		}
 
 		component App() {
-			const count = track(0);
+			const count = #ripple.track(0);
 
 			<div>
 				<Counter {count} />
@@ -107,7 +107,7 @@ describe('composite > props', () => {
 
 	it('correctly retains prop accessors and reactivity when using rest props', () => {
 		component Button(props: Props) {
-			const [children, rest] = trackSplit(props, ['children']);
+			const [children, rest] = #ripple.trackSplit(props, ['children']);
 			<button {...@rest}>
 				<@children />
 			</button>
@@ -122,14 +122,14 @@ describe('composite > props', () => {
 		}
 
 		component Toggle(props: { pressed: Tracked<boolean> }) {
-			const [pressed, rest] = trackSplit(props, ['pressed']);
+			const [pressed, rest] = #ripple.trackSplit(props, ['pressed']);
 			const onClick = () => (@pressed = !@pressed);
 			<Button {...@rest} class={@pressed ? 'on' : 'off'} {onClick}>{'button 1'}</Button>
 			<Button class={@pressed ? 'on' : 'off'} {onClick}>{'button 2'}</Button>
 		}
 
 		component App() {
-			const pressed = track(true);
+			const pressed = #ripple.track(true);
 			<Toggle {pressed} />
 		}