ripple 0.2.216 → 0.3.1

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

@@ -1,5 +1,5 @@
 import { describe, it, expect } from 'vitest';
-import { track, flushSync } from 'ripple';
+import { flushSync } from 'ripple';
 
 describe('basic client > rendering & text', () => {
 	it('renders static text', () => {
@@ -27,7 +27,7 @@ describe('basic client > rendering & text', () => {
 
 	it('renders dynamic text', () => {
 		component Basic() {
-			let text = track('Hello World');
+			let text = #ripple.track('Hello World');
 
 			<button
 				onClick={() => {
@@ -104,8 +104,8 @@ describe('basic client > rendering & text', () => {
 
 	it('renders with mixed static and dynamic content', () => {
 		component Basic() {
-			let name = track('World');
-			let count = track(0);
+			let name = #ripple.track('World');
+			let count = #ripple.track(0);
 			const staticMessage = 'Welcome to Ripple!';
 
 			<div class="mixed-content">
@@ -151,7 +151,7 @@ describe('basic client > rendering & text', () => {
 
 	it('basic operations', () => {
 		component App() {
-			let count = track(0);
+			let count = #ripple.track(0);
 			<div>{@count++}</div>
 			<div>{++@count}</div>
 			<div>{5}</div>
@@ -164,8 +164,8 @@ describe('basic client > rendering & text', () => {
 
 	it('renders with conditional rendering using if statements', () => {
 		component Basic() {
-			let showContent = track(false);
-			let userRole = track('guest');
+			let showContent = #ripple.track(false);
+			let userRole = #ripple.track('guest');
 
 			<button
 				onClick={() => {

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

@@ -1,4 +1,4 @@
-import { track, effect, untrack, tick } from 'ripple';
+import { tick } from 'ripple';
 
 describe('basic client > utilities', () => {
 	it('tick function', async () => {
@@ -6,9 +6,9 @@ describe('basic client > utilities', () => {
 		const promise = new Promise<void>((res) => (resolve = res));
 
 		component Basic() {
-			let value = track(0);
-			effect(() => {
-				untrack(() => {
+			let value = #ripple.track(0);
+			#ripple.effect(() => {
+				#ripple.untrack(() => {
 					@value++;
 					tick().then(() => resolve());
 				});

package/tests/client/boundaries.test.ripple

@@ -1,13 +1,13 @@
-import { flushSync, effect, track, type Tracked } from 'ripple';
+import { flushSync, type Tracked } from 'ripple';
 
 describe('passing reactivity between boundaries tests', () => {
 	it('can pass reactivity between functions with simple arrays and destructuring', () => {
 		let log: string[] = [];
 
 		function createDouble([count]: [Tracked<number>]) {
-			const double = track(() => @count * 2);
+			const double = #ripple.track(() => @count * 2);
 
-			effect(() => {
+			#ripple.effect(() => {
 				log.push('Count:' + @count);
 			});
 
@@ -15,7 +15,7 @@ describe('passing reactivity between boundaries tests', () => {
 		}
 
 		component App() {
-			let count = track(0);
+			let count = #ripple.track(0);
 
 			const [double] = createDouble([count]);
 
@@ -54,9 +54,9 @@ describe('passing reactivity between boundaries tests', () => {
 		let log: string[] = [];
 
 		function createDouble({ count }: { count: Tracked<number> }) {
-			const double = track(() => @count * 2);
+			const double = #ripple.track(() => @count * 2);
 
-			effect(() => {
+			#ripple.effect(() => {
 				log.push('Count:' + @count);
 			});
 
@@ -64,7 +64,7 @@ describe('passing reactivity between boundaries tests', () => {
 		}
 
 		component App() {
-			let count = track(0);
+			let count = #ripple.track(0);
 
 			const { double } = createDouble({ count });
 

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

@@ -3,10 +3,10 @@
 exports[`compiler > assignments > compiles tracked values in effect with assignment expression 1`] = `"state.count = _$_.get(count);"`;
 
 exports[`compiler > assignments > compiles tracked values in effect with update expressions 1`] = `
-"_$_.with_scope(__block, () => untrack(() => {
+"_$_.untrack(() => {
 			state.preIncrement = _$_.update_pre(count);
 			state.postIncrement = _$_.update(count);
 			state.preDecrement = _$_.update_pre(count, -1);
 			state.postDecrement = _$_.update(count, -1);
-		}));"
+		});"
 `;

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

@@ -1,15 +1,17 @@
-import { track, TrackedArray } from 'ripple';
+import { RippleArray } from 'ripple';
 import { compile } from 'ripple/compiler';
 
+const EFFECT_BODY_REGEX = /_\$\_\.effect\(\(\) => \{([\s\S]*?)\n\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 tracked_items = #ripple.track<number[]>([]);
 			let items2 = new Array();
-			let items3 = new TrackedArray<number>();
+			let items3: RippleArray<number> = #ripple[];
 			let i = 0;
 
 			logs.push(items[0]);
@@ -107,34 +109,32 @@ describe('compiler > assignments', () => {
 
 	it('compiles tracked values in effect with assignment expression', () => {
 		const source = `component App() {
-let count = track(0);
+	let count = #ripple.track(0);
 
-effect(() => {
-	state.count = @count;
-})
+	#ripple.effect(() => {
+		state.count = @count;
+	});
 }`;
 		const result = compile(source, 'test.ripple');
-		// Extract just the effect callback body
-		const effectMatch = result.js.code.match(/effect\(\(\) => \{([^}]+)\}\)/s);
-		expect(effectMatch?.[1].trim()).toMatchSnapshot();
+		const effect_match = result.js.code.match(EFFECT_BODY_REGEX);
+		expect(effect_match?.[1].trim()).toMatchSnapshot();
 	});
 
 	it('compiles tracked values in effect with update expressions', () => {
 		const source = `component App() {
-let count = track(5);
+	let count = #ripple.track(5);
 
-effect(() => {
-	untrack(() => {
-		state.preIncrement = ++@count;
-		state.postIncrement = @count++;
-		state.preDecrement = --@count;
-		state.postDecrement = @count--;
+	#ripple.effect(() => {
+		#ripple.untrack(() => {
+			state.preIncrement = ++@count;
+			state.postIncrement = @count++;
+			state.preDecrement = --@count;
+			state.postDecrement = @count--;
+		});
 	});
-})
 }`;
 		const result = compile(source, 'test.ripple');
-		// Extract just the effect callback body
-		const effectMatch = result.js.code.match(/effect\(\(\) => \{([\s\S]+?)\n\t\}\)\)/);
-		expect(effectMatch?.[1].trim()).toMatchSnapshot();
+		const effect_match = result.js.code.match(EFFECT_BODY_REGEX);
+		expect(effect_match?.[1].trim()).toMatchSnapshot();
 	});
 });

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));
             }
         `;