ripple 0.3.2 → 0.3.4

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

@@ -1,19 +1,19 @@
 import type { PropsWithChildren, Tracked } from 'ripple';
-import { flushSync } from 'ripple';
+import { effect, flushSync, track, trackSplit, untrack } from 'ripple';
 
 describe('basic client > reactivity', () => {
 	it('renders multiple reactive lexical blocks', () => {
 		component Basic() {
 			<div>
 				let obj = {
-					count: #ripple.track(0),
+					count: track(0),
 				};
 
 				<span>{obj.@count}</span>
 			</div>
 			<div>
 				let b = {
-					count: #ripple.track(0),
+					count: track(0),
 				};
 
 				<button
@@ -54,14 +54,14 @@ describe('basic client > reactivity', () => {
 
 			<div>
 				let obj = {
-					count: #ripple.track(0),
+					count: track(0),
 				};
 
 				<span>{obj.@[count]}</span>
 			</div>
 			<div>
 				let b = {
-					count: #ripple.track(0),
+					count: track(0),
 				};
 
 				<button
@@ -98,7 +98,7 @@ describe('basic client > reactivity', () => {
 
 	it('renders with computed reactive state', () => {
 		component Basic() {
-			let count = #ripple.track(5);
+			let count = track(5);
 
 			<div class="count">{@count}</div>
 			<div class="doubled">{@count * 2}</div>
@@ -135,11 +135,11 @@ describe('basic client > reactivity', () => {
 		let logs: string[] = [];
 
 		component App() {
-			let first = #ripple.track(0);
-			let second = #ripple.track(0);
+			let first = track(0);
+			let second = track(0);
 			const arr = [first, second];
 
-			const total = #ripple.track(() => arr.reduce((a, b) => a + @b, 0));
+			const total = track(() => arr.reduce((a, b) => a + @b, 0));
 
 			<button
 				onClick={() => {
@@ -156,7 +156,7 @@ describe('basic client > reactivity', () => {
 				{'second: ' + @second}
 			</button>
 
-			#ripple.effect(() => {
+			effect(() => {
 				let _arr: number[] = [];
 
 				arr.forEach((item) => {
@@ -166,7 +166,7 @@ describe('basic client > reactivity', () => {
 				logs.push(_arr.join(', '));
 			});
 
-			#ripple.effect(() => {
+			effect(() => {
 				if (arr.map((a) => @a).includes(1)) {
 					logs.push('arr includes 1');
 				}
@@ -211,7 +211,7 @@ describe('basic client > reactivity', () => {
 
 	it('uses track get and set where both mutate value', () => {
 		component App() {
-			let count = #ripple.track(0, (v) => v + 1, (v) => v * 2);
+			let count = track(0, (v) => v + 1, (v) => v * 2);
 
 			<div class="count">{@count}</div>
 			<button
@@ -237,7 +237,7 @@ describe('basic client > reactivity', () => {
 
 	it('uses track get and set where set only mutates value', () => {
 		component App() {
-			let count = #ripple.track(1, (v) => v, (v) => v * 2);
+			let count = track(1, (v) => v, (v) => v * 2);
 
 			<div class="count">{@count}</div>
 			<button
@@ -263,7 +263,7 @@ describe('basic client > reactivity', () => {
 
 	it('uses track get and set where get only mutates value', () => {
 		component App() {
-			let count = #ripple.track(0, (v) => v + 1, (v) => v);
+			let count = track(0, (v) => v + 1, (v) => v);
 
 			<div class="count">{@count}</div>
 			<button
@@ -291,7 +291,7 @@ describe('basic client > reactivity', () => {
 		let logs: number[] = [];
 
 		component App() {
-			let count = #ripple.track(0, (v) => v, (next, prev) => {
+			let count = track(0, (v) => v, (next, prev) => {
 				logs.push(prev, next);
 				return next;
 			});
@@ -314,11 +314,11 @@ describe('basic client > reactivity', () => {
 		expect(logs).toEqual([0, 1]);
 	});
 
-	it('doesn\'t error on mutating a tracked variable in #ripple.track() setter', () => {
+	it('doesn\'t error on mutating a tracked variable in track() setter', () => {
 		component Basic() {
-			let count = #ripple.track(0);
+			let count = track(0);
 
-			const doubled = #ripple.track(0, undefined, (value) => {
+			const doubled = track(0, undefined, (value) => {
 				@count += value;
 				return value;
 			});
@@ -335,9 +335,9 @@ describe('basic client > reactivity', () => {
 		let state: { count?: number } = {};
 
 		component Basic() {
-			let count = #ripple.track(0);
+			let count = track(0);
 
-			#ripple.effect(() => {
+			effect(() => {
 				state.count = @count;
 			});
 		}
@@ -359,10 +359,10 @@ describe('basic client > reactivity', () => {
 		} = {};
 
 		component Basic() {
-			let count = #ripple.track(5);
+			let count = track(5);
 
-			#ripple.effect(() => {
-				#ripple.untrack(() => {
+			effect(() => {
+				untrack(() => {
 					state.initialValue = @count;
 					state.preIncrement = ++@count;
 					state.postIncrement = @count++;
@@ -387,10 +387,10 @@ describe('basic client > reactivity', () => {
 	describe('track/trackSplit APIs', () => {
 		it('errors on invalid value as null for track with trackSplit', () => {
 			component App() {
-				let message = #ripple.track('');
+				let message = track('');
 
 				try {
-					const [a, b, rest] = #ripple.trackSplit(null, ['a', 'b']);
+					const [a, b, rest] = trackSplit(null, ['a', 'b']);
 				} catch (e) {
 					@message = (e as Error).message;
 				}
@@ -406,10 +406,10 @@ describe('basic client > reactivity', () => {
 
 		it('errors on invalid value as array for track with trackSplit', () => {
 			component App() {
-				let message = #ripple.track('');
+				let message = track('');
 
 				try {
-					const [a, b, rest] = #ripple.trackSplit([1, 2, 3], ['a', 'b']);
+					const [a, b, rest] = trackSplit([1, 2, 3], ['a', 'b']);
 				} catch (e) {
 					@message = (e as Error).message;
 				}
@@ -425,11 +425,11 @@ describe('basic client > reactivity', () => {
 
 		it('errors on invalid value as tracked for track with trackSplit', () => {
 			component App() {
-				const t = #ripple.track({ a: 1, b: 2, c: 3 });
-				let message = #ripple.track('');
+				const t = track({ a: 1, b: 2, c: 3 });
+				let message = track('');
 
 				try {
-					const [a, b, rest] = #ripple.trackSplit(t, ['a', 'b']);
+					const [a, b, rest] = trackSplit(t, ['a', 'b']);
 				} catch (e) {
 					@message = (e as Error).message;
 				}
@@ -445,7 +445,7 @@ describe('basic client > reactivity', () => {
 
 		it('returns undefined for non-existent props in track with trackSplit', () => {
 			component App() {
-				const [a, b, rest] = #ripple.trackSplit({ a: 1, c: 1 }, ['a', 'b']);
+				const [a, b, rest] = trackSplit({ a: 1, c: 1 }, ['a', 'b']);
 
 				<pre>{@a}</pre>
 				<pre>{String(@b)}</pre>
@@ -465,8 +465,8 @@ describe('basic client > reactivity', () => {
 
 		it('returns the same tracked object if plain track is called with a tracked object', () => {
 			component App() {
-				const t = #ripple.track({ a: 1, b: 2, c: 3 });
-				const doublet = #ripple.track(t);
+				const t = track({ a: 1, b: 2, c: 3 });
+				const doublet = track(t);
 
 				<pre>{t === doublet}</pre>
 			}
@@ -481,8 +481,8 @@ describe('basic client > reactivity', () => {
 			let logs: string[] = [];
 
 			component App() {
-				let count = #ripple.track(0);
-				let name = #ripple.track('Click Me');
+				let count = track(0);
+				let name = track('Click Me');
 
 				function buttonRef(el: HTMLButtonElement) {
 					logs.push('ref called');
@@ -508,7 +508,7 @@ describe('basic client > reactivity', () => {
 				class: string;
 				onClick: () => void;
 			}>) {
-				const [children, count, rest] = #ripple.trackSplit(props, ['children', 'count']);
+				const [children, count, rest] = trackSplit(props, ['children', 'count']);
 
 				if (@count < 2) {
 					<button {...@rest}>

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

@@ -1,5 +1,5 @@
 import { describe, it, expect } from 'vitest';
-import { flushSync } from 'ripple';
+import { flushSync, track } 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 = #ripple.track('Hello World');
+			let text = 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 = #ripple.track('World');
-			let count = #ripple.track(0);
+			let name = track('World');
+			let count = 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 = #ripple.track(0);
+			let count = 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 = #ripple.track(false);
-			let userRole = #ripple.track('guest');
+			let showContent = track(false);
+			let userRole = track('guest');
 
 			<button
 				onClick={() => {

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

@@ -1,4 +1,4 @@
-import { tick } from 'ripple';
+import { effect, tick, track, untrack } 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 = #ripple.track(0);
-			#ripple.effect(() => {
-				#ripple.untrack(() => {
+			let value = track(0);
+			effect(() => {
+				untrack(() => {
 					@value++;
 					tick().then(() => resolve());
 				});

package/tests/client/boundaries.test.ripple

@@ -1,13 +1,13 @@
-import { flushSync, type Tracked } from 'ripple';
+import { effect, flushSync, track, 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 = #ripple.track(() => @count * 2);
+			const double = track(() => @count * 2);
 
-			#ripple.effect(() => {
+			effect(() => {
 				log.push('Count:' + @count);
 			});
 
@@ -15,7 +15,7 @@ describe('passing reactivity between boundaries tests', () => {
 		}
 
 		component App() {
-			let count = #ripple.track(0);
+			let count = 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 = #ripple.track(() => @count * 2);
+			const double = track(() => @count * 2);
 
-			#ripple.effect(() => {
+			effect(() => {
 				log.push('Count:' + @count);
 			});
 
@@ -64,7 +64,7 @@ describe('passing reactivity between boundaries tests', () => {
 		}
 
 		component App() {
-			let count = #ripple.track(0);
+			let count = track(0);
 
 			const { double } = createDouble({ count });
 

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

@@ -13,6 +13,30 @@ const ErrorMap = (Map);
 const errorMap = new ErrorMap();"
 `;
 
+exports[`compiler > typescript > removes class TypeScript syntax from JS output 1`] = `
+"import * as _$_ from 'ripple/internal/client';
+
+class PrintEvent {
+	text;
+
+	constructor(text) {
+		this.text = text;
+	}
+}"
+`;
+
+exports[`compiler > typescript > removes class extends type arguments from JS output 1`] = `
+"import * as _$_ from 'ripple/internal/client';
+
+class StringMap extends Map {
+	constructor() {
+		var __block = _$_.scope();
+
+		super();
+	}
+}"
+`;
+
 exports[`compiler > typescript > removes type assertions from function parameters and leaves default values 1`] = `
 "import * as _$_ from 'ripple/internal/client';
 

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

@@ -1,4 +1,4 @@
-import { RippleArray } from 'ripple';
+import { RippleArray, effect, track, untrack } from 'ripple';
 import { compile } from 'ripple/compiler';
 
 const EFFECT_BODY_REGEX = /_\$\_\.effect\(\(\) => \{([\s\S]*?)\n\t\}\);/;
@@ -9,9 +9,9 @@ describe('compiler > assignments', () => {
 
 		component App() {
 			let items: number[] = [];
-			let tracked_items = #ripple.track<number[]>([]);
+			let tracked_items = track<number[]>([]);
 			let items2 = new Array();
-			let items3: RippleArray<number> = #ripple[];
+			let items3: RippleArray<number> = new RippleArray();
 			let i = 0;
 
 			logs.push(items[0]);
@@ -108,10 +108,11 @@ describe('compiler > assignments', () => {
 	});
 
 	it('compiles tracked values in effect with assignment expression', () => {
-		const source = `component App() {
-	let count = #ripple.track(0);
+		const source = `import { track, effect } from 'ripple';
+component App() {
+	let count = track(0);
 
-	#ripple.effect(() => {
+	effect(() => {
 		state.count = @count;
 	});
 }`;
@@ -121,11 +122,12 @@ describe('compiler > assignments', () => {
 	});
 
 	it('compiles tracked values in effect with update expressions', () => {
-		const source = `component App() {
-	let count = #ripple.track(5);
+		const source = `import { track, effect, untrack } from 'ripple';
+component App() {
+	let count = track(5);
 
-	#ripple.effect(() => {
-		#ripple.untrack(() => {
+	effect(() => {
+		untrack(() => {
 			state.preIncrement = ++@count;
 			state.postIncrement = @count++;
 			state.preDecrement = --@count;

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

@@ -1,8 +1,5 @@
 import { parse, compile, compile_to_volar_mappings } from 'ripple/compiler';
-import {
-	obfuscate_identifier,
-	RIPPLE_NAMESPACE_IDENTIFIER,
-} from 'ripple/compiler/internal/identifier/utils';
+import { obfuscate_identifier } from 'ripple/compiler/internal/identifier/utils';
 import type * as AST from 'estree';
 
 function count_occurrences(string: string, subString: string): number {
@@ -22,25 +19,25 @@ describe('compiler > basics', () => {
 		const source = `export component App() {
   <div id="myid" class="myclass">{"Hello World"}</div>
 
-  <style>#ripple.style</style>
+  <style>#style</style>
 }`;
 		const style1 = '.myid {color: green }';
 		const style2 = '#myid {color: green }';
 		const style3 = 'div {color: green }';
 
-		let input = source.replace('#ripple.style', style1);
+		let input = source.replace('#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('#ripple.style', style2);
+		input = source.replace('#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('#ripple.style', style3);
+		input = source.replace('#style', style3);
 		ast = parse(input);
 		expect(
 			((ast.body[0] as AST.ExportNamedDeclaration).declaration as unknown as AST.Component)?.css.source,
@@ -256,10 +253,10 @@ describe('compiler > basics', () => {
 	// 			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]]);
+	// 	const items = new RippleArray(1, 2, 3);
+	// 	const obj = new RippleObject({ a: 1, b: 2, c: 3 });
+	// 	const set = RippleSet([1, 2, 3]);
+	// 	const map = RippleMap([['a', 1], ['b', 2], ['c', 3]]);
 
 	// 	<div {ref () => {}} />
 	// }
@@ -280,10 +277,10 @@ describe('compiler > basics', () => {
 	// 			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]]);
+	// 	const items = new RippleArray(1, 2, 3);
+	// 	const obj = new RippleObject({ a: 1, b: 2, c: 3 });
+	// 	const set = RippleSet([1, 2, 3]);
+	// 	const map = RippleMap([['a', 1], ['b', 2], ['c', 3]]);
 
 	// 	<div {ref () => {}} />
 	// }
@@ -306,10 +303,10 @@ describe('compiler > basics', () => {
 	// 	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]]);
+	// 	const items = new RippleArray(1, 2, 3);
+	// 	const obj = new RippleObject({ a: 1, b: 2, c: 3 });
+	// 	const set = RippleSet([1, 2, 3]);
+	// 	const map = RippleMap([['a', 1], ['b', 2], ['c', 3]]);
 
 	// 	<div {ref () => {}} />
 	// }
@@ -325,10 +322,9 @@ describe('compiler > basics', () => {
 
 	it('prints longhand tracked property values in to_ts output while preserving [\'#v\']', () => {
 		const source = `
-import { createRefKey } from 'ripple';
-
+import { RippleArray, RippleMap, RippleObject, RippleSet, createRefKey, effect, track, untrack } from 'ripple';
 component App() {
-	let value = #ripple.track('test');
+	let value = track('test');
 	function inputRef(node) {}
 
 	const props = {
@@ -344,20 +340,6 @@ component App() {
 		expect(result).toMatch(/value:\s*value\??\.\['#v'\]/);
 	});
 
-	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', { 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 = `
 interface PolymorphicProps<T extends keyof HTMLElementTagNameMap> {
@@ -380,8 +362,9 @@ export component App(props: Props) {
 
 	it('handles if-else expression statements in Volar mappings', () => {
 		const source = `
+import { track } from 'ripple';
 export component App() {
-	let level = #ripple.track(1);
+	let level = track(1);
 
 	<button
 		onClick={() => {
@@ -455,13 +438,14 @@ export component App() {
 		expect(() => compile(code, 'test.ripple')).not.toThrow();
 	});
 
-	it('should inject __block for #ripple.track() calls inside class constructors', () => {
+	it('should inject __block for track() calls inside class constructors', () => {
 		const source = `
+import { track, RippleArray } from 'ripple';
 
 class Store {
 	constructor() {
-		this.count = #ripple.track(0);
-		this.items = #ripple[1, 2, 3];
+		this.count = track(0);
+		this.items = new RippleArray(1, 2, 3);
 	}
 }
 
@@ -478,13 +462,15 @@ export component App() {
 		expect(code).toContain('_$_.scope()');
 	});
 
-	it('parses #ripple.effect and #ripple.untrack calls', () => {
+	it('parses effect and untrack calls', () => {
 		const source = `
+import { track, effect, untrack } from 'ripple';
+
 component App() {
-	let count = #ripple.track(0);
+	let count = track(0);
 
-	#ripple.effect(() => {
-		const snapshot = #ripple.untrack(() => @count);
+	effect(() => {
+		const snapshot = untrack(() => @count);
 		console.log(snapshot);
 	});
 }
@@ -493,14 +479,15 @@ component App() {
 		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"');
+		expect(ast_json).toContain('"name":"effect"');
+		expect(ast_json).toContain('"name":"untrack"');
 	});
 
 	it('collects duplicate declaration parser errors in loose mode', () => {
 		const source = `
+import { track } from 'ripple';
 export component App() {
-	let test = #ripple.track(false);
+	let test = track(false);
 	let test = 'hey';
 }
 `;
@@ -518,24 +505,35 @@ export component App() {
 		).toBe(true);
 	});
 
-	it('parses bare #ripple in loose mode for autocomplete recovery', () => {
-		const source = `
-export component App() {
-	#ripple
-}
-`;
+	it('throws for unclosed tsx compat tags instead of hanging', () => {
+		const source = `export component App() {
+	<tsx:react>1
+}`;
+
+		expect(() => compile(source, 'test.ripple')).toThrow(
+			'Unclosed tag \'<tsx:react>\'. Expected \'</tsx:react>\' before end of component.',
+		);
+	});
+
+	it('recovers unclosed tsx compat tags in loose mode', () => {
+		const source = `export component App() {
+	<tsx:react>1
+}`;
 
 		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,
-		);
+	it('preserves class extends generic type arguments in volar output', () => {
+		const source = `class StringMap extends Map<string, string> {}
+export component App() {}`;
+
+		expect(() => compile_to_volar_mappings(source, 'test.ripple', { loose: true })).not.toThrow();
+
+		const result = compile_to_volar_mappings(source, 'test.ripple', { loose: true }).code;
 
-		expect(mapping?.data.customData.suppressedDiagnostics).toContain(18016);
+		expect(result).toContain('class StringMap extends Map<string, string> {}');
 	});
 });