ripple 0.2.53 → 0.2.54

package/tests/basic.test.ripple

@@ -130,7 +130,7 @@ describe('basic', () => {
 
 		expect(Array.from(div.classList).some(className => className.startsWith('ripple-'))).toBe(true);
 		expect(div.classList.contains('inactive')).toBe(true);
-		
+
 		button.click();
 		flushSync();
 		expect(div.classList.contains('active')).toBe(true);
@@ -203,15 +203,15 @@ describe('basic', () => {
 
 		const input = container.querySelector('input');
 		const html = container.innerHTML;
-		
+
 		expect(input.getAttribute('name')).toBe('car');
 		expect(input.getAttribute('type')).toBe('checkbox');
 		expect(input.getAttribute('id')).toBe('vehicle1');
 		expect(input.getAttribute('value')).toBe('Bike');
-		
+
 		expect(html).not.toContain('type="checkbox"type="checkbox"');
 		expect(html).not.toContain('value="Bike"value="Bike"');
-		
+
 		expect(container).toMatchSnapshot();
 	});
 
@@ -381,7 +381,7 @@ describe('basic', () => {
 
 	// TODO
 	it.skip('renders multiple reactive lexical blocks with complexity', () => {
-		
+
 		component Basic() {
 			const count = 'count';
 
@@ -390,16 +390,16 @@ describe('basic', () => {
 					count: track(0)
 				};
 
-				<span>{obj[count]}</span>
+				<span>{obj[@count]}</span>
 			</div>
 			<div>
 				let b = {
 					count: track(0)
 				};
 
-				<button onClick={() => { b[count]-- }}>{'-'}</button>
-				<span class='count'>{b[count]}</span>
-				<button onClick={() => { b[count]++ }}>{'+'}</button>
+				<button onClick={() => { b[@count]-- }}>{'-'}</button>
+				<span class='count'>{b[@count]}</span>
+				<button onClick={() => { b[@count]++ }}>{'+'}</button>
 			</div>
 		}
 		render(Basic);
@@ -880,6 +880,30 @@ describe('basic', () => {
 		expect(paragraph.textContent).toBe('Styled paragraph');
 	});
 
+	it('renders with keyframes in styling scoped to component', () => {
+		const source = `export component Basic() {
+			<div>
+				<p>{'Styled paragraph'}</p>
+			</div>
+
+			<style>
+				div {
+					animation-name: anim;
+				}
+				
+				@keyframes anim {}
+
+				p {
+					animation-name: anim;
+				}
+			</style>
+		}`;
+
+		const { css } = compile(source, 'test.ripple');
+		const name = css.match(/@keyframes\s+([a-zA-Z0-9_-]+)\s*\{/)[1];
+		expect(css.match(new RegExp(name, 'g'))?.length).toEqual(3);
+	});
+
 	it('renders with mixed static and dynamic content', () => {
 		component Basic() {
 			let name = track('World');

package/tests/compiler.test.ripple

@@ -1,5 +1,5 @@
 import { describe, it, expect, beforeEach, afterEach } from 'vitest';
-import { mount, RippleArray, track } from 'ripple';
+import { mount, TrackedArray, track } from 'ripple';
 import { parse } from 'ripple/compiler'
 
 describe('compiler success tests', () => {
@@ -21,17 +21,17 @@ describe('compiler success tests', () => {
 		container = null;
 	});
 
-	
+
 	it('Parses style content correctly', () => {
 		const source = `export component App() {
   <div id="myid" class="myclass">{"Hello World"}</div>
-  
+
   <style>#style</style>
 }`;
 		const style1 = '.myid {color: green }';
 		const style2 = '#myid {color: green }';
 		const style3 = 'div {color: green }';
-		
+
 		let input = source.replace('#style', style1);
 		let ast = parse(input);
 		expect(ast.body[0].declaration.css.source).toEqual(style1);
@@ -111,7 +111,7 @@ describe('compiler success tests', () => {
 			let items = [];
 			let tracked_items = track([]);
 			let items2 = new Array();
-			let items3 = new RippleArray();
+			let items3 = new TrackedArray();
 			let i = 0;
 
 			logs.push(items[0]);

package/tests/composite.test.ripple

@@ -1,5 +1,5 @@
 import { describe, it, expect, beforeEach, afterEach } from 'vitest';
-import { mount, flushSync, track, RippleArray, effect } from 'ripple';
+import { mount, flushSync, track, TrackedArray, TrackedMap, effect } from 'ripple';
 
 describe('composite components', () => {
 	let container;
@@ -287,7 +287,7 @@ describe('composite components', () => {
 
 	it('handlers generic', () => {
 		component ArrayTest() {
-			let items = new RippleArray<number>();
+			let items = new TrackedArray<number>();
 			items.push.apply(items, [1, 2, 3, 4, 5]);
 
 			<pre>{items ? JSON.stringify(items) : 'Loading...'}</pre>
@@ -336,4 +336,254 @@ describe('composite components', () => {
 		expect(container.querySelector('div').textContent).toBe('2 3 4');
 		expect(logs).toEqual(['Child effect: 1, 2, 3', 'Child effect: 2, 3, 4']);
 	});
-});
+
+	it('handles advanced generic ambiguity and edge cases', () => {
+		component App() {
+			// Ambiguous generics vs JSX / less-than parsing scenarios
+
+			// 1. Simple "new" with generic (should NOT become an <Element>)
+			const a = new TrackedArray<number>();
+
+			// 2. Multi-line generic with newline after '<'
+			const b = new TrackedArray<
+				string
+			>();
+
+			// // 3. Member expression + generic
+			// class List<T> {
+			// 	items: T[];
+			// 	constructor() {
+			// 		this.items = [];
+			// 	}
+			// }
+			// class Containers {
+			// 	List<T>() {
+			// 		return new List<T>();
+			// 	}
+			// }
+
+			// const c = new Containers.List<string>();
+
+			// 4. Chained call with generic method
+			const someSource = new Array<number>(1, 2, 3);
+			const d = someSource.map<number>((x) => x * 2).filter<boolean>((x) => !!x);
+
+			// 5. Nested generics
+			const e = new Map<string, Promise<number>>();
+
+			// // 6. Generic after a call expression result
+			// function getBuilder<T>() {
+			// 	return {
+			// 		build<U>() {
+			// 			return {
+			// 				build<V>() {
+			// 					return 42;
+			// 				}
+			// 			};
+			// 		}
+			// 	};
+			// }
+			// const f = getBuilder()<ResultType>().build<number>();
+
+			// // 7. Generic following optional chaining
+			// const maybe = {};
+			// const g = maybe?.factory<number>()?.make<boolean>();
+
+			// // 8. Comparison operator (ensure '<' here NOT misparsed as generics)
+			// let x = 10, y = 20;
+			// const h = x < y ? 'lt' : 'ge';
+
+			// // 9. Chained comparisons with intervening generics
+			// class Box<T> {
+			// 	value: T;
+			// 	constructor(value?: T) {
+			// 		this.value = value;
+			// 	}
+			// 	open<U>() {
+			// 		return new Box<U>();
+			// 	}
+			// }
+			// const limit = 100;
+			// const i = new Box<number>().value < limit ? 'ok' : 'no';
+
+			// 10. JSX / Element should still work
+			<div class="still-works">
+				<span>{a.length}</span>
+			</div>
+
+			// // 11. Generic function call vs Element: Identifier followed by generic args
+			// function identity<T>(value: T): T {
+			// 	return value;
+			// }
+			// const j = identity<number>(42);
+
+			// 12. Member + generic call immediately followed by another call
+			class Factory {
+				create<T>() {
+					return (value: T) => value;
+				}
+			}
+			const factory = new Factory();
+			const k = factory.create<number>()(123);
+
+			// // 13. Multiple generic segments in chain
+			// function foo<T>() {
+			// 	return {
+			// 		bar<U>() {
+			// 			return {
+			// 				baz<V>() {
+			// 					return true;
+			// 				}
+			// 			};
+			// 		}
+			// 	};
+			// }
+			// const l = foo<number>().bar<string>().baz<boolean>();
+
+			// 14. Generic with constraint + default
+			type Extractor<T extends { id: number } = { id: number }> = (v: T) => number;
+			const m: Extractor = (v) => v.id;
+
+			// // 15. Generic in angle after "new" + trailing call
+			// class Wrapper<T> {
+			// 	value: T;
+			// 	constructor() {
+			// 		this.value = null as unknown as T;
+			// 	}
+			// 	unwrap<U>() {
+			// 		return null as unknown as U;
+			// 	}
+			// }
+			// const n = new Wrapper<number>().unwrap<string>();
+
+			// // 16. Angle brackets inside type assertion vs generic call
+			// function getUnknown(): unknown {
+			// 	return { a: 1 };
+			// }
+			// getUnknown.factory = function<T>() {
+			// 	return {
+			// 		make<U>() {
+			// 			return 2;
+			// 		}
+			// 	};
+			// };
+			// const raw = getUnknown();
+			// const o = (raw as Map<string, number>).get('a');
+
+			// // 17. Generic with comma + trailing less-than comparison on next token
+			// class Pair<T1, T2> {
+			// 	first: T1;
+			// 	second: T2;
+			// 	constructor() {
+			// 		this.first = null as unknown as T1;
+			// 		this.second = null as unknown as T2;
+			// 	}
+			// }
+			// const p = new Pair<number, string>();
+			// const q = 1 < 2 ? p : null;
+
+			// // 18. Nested generics with line breaks resembling JSX indentation
+			// interface Node<T> {
+			// 	value: T;
+			// }
+			// interface Edge<W> {
+			// 	weight: W;
+			// }
+			// class Graph<N, E> {
+			// 	nodes: N[];
+			// 	edges: E[];
+			// 	constructor() {
+			// 		this.nodes = [];
+			// 		this.edges = [];
+			// 	}
+			// }
+			// const r = new Graph<
+			// 	Node<string>,
+			// 	Edge<number>
+			// >();
+
+			// // 19. Ternary containing generics in both branches
+			// let flag = true;
+			// const s = flag ? new Box<number>() : new Box<string>();
+
+			// 20. Generic inside template expression
+			const t = `length=${new TrackedArray<number>().length}`;
+
+			// 21. Optional chaining + generic + property access
+			const registry = new TrackedMap<string, number>();
+			const u = registry.get<number>('id')?.toString();
+
+			// // 22. Generic call used as callee for another call
+			// function make<T>() {
+			// 	return (value: T) => value;
+			// }
+			// const v = make<number>()('done');
+
+			// // 23. Generic followed by tagged template (ensure not confused with JSX)
+			// function tagFn<T>(strings: TemplateStringsArray, ...values: T[]) {
+			// 	return values[0];
+			// }
+			// const tagResult = tagFn<number>`value`;
+
+			// // 24. Sequence mixing: (a < b) + generic call in same statement
+			// function compute<T>(x: T, y: T): T {
+			// 	return y;
+			// }
+
+			// const w = (x < y) && compute<number>(x, y);
+
+
+
+			// Additional component focusing on edge crankers
+
+			// // 28. Generic after parenthesized new expression
+			// const aa = (new Box<number>()).open<string>();
+
+			// // 29. Generic chain right after closing paren of IIFE
+			// class Builder<Kind> {
+			// 	finalize<Result>() {
+			// 		return {
+			// 			result: null as unknown as Result
+			// 		};
+			// 	}
+			// }
+			// const builder = new Builder<Number>();
+			// const result = (function(){ return builder; })()<Number>().finalize<boolean>();
+
+			// // 30. Angle bracket start of conditional expression line
+			// function adjust<T>(value: T): T {
+			// 	return value;
+			// }
+			// const val =
+			// 	new Wrapper<number>()
+			// 		.value < 100
+			// 		? adjust<number>(10)
+			// 		: adjust<number>(20);
+
+
+			// // 32. Generic with comments inside angle list
+			// class Mapper<Key, Value> {
+			// 	map: Map<Key, Value>;
+			// 	constructor() {
+			// 		this.map = new Map<Key, Value>();
+			// 	}
+			// }
+			// const gg = new Mapper<
+			// 	// key type
+			// 	string,
+			// 	/* value type */
+			// 	number
+			// >();
+
+			// // 33. Map of generic instance as key
+			// const mm = new Map<TrackedArray<number>, TrackedArray<string>>();
+
+			// // 34. Inline assertion then generic call
+
+			// const asserted = (getUnknown() as Factory).create<number>();
+		}
+
+
+		render(App);
+	});
+});

package/tests/for.test.ripple

@@ -1,6 +1,6 @@
 import { describe, it, expect, beforeEach, afterEach } from 'vitest';
 
-import { mount, flushSync, RippleArray } from 'ripple';
+import { mount, flushSync, TrackedArray } from 'ripple';
 
 describe('for statements', () => {
 	let container;
@@ -37,13 +37,13 @@ describe('for statements', () => {
 
 	it('render a simple dynamic array', () => {
 		component App() {
-			const items = new RippleArray('Item 1', 'Item 2', 'Item 3');
+			const items = new TrackedArray('Item 1', 'Item 2', 'Item 3');
 
 			for (const item of items) {
 				<div class={item}>{item}</div>
 			}
 
-			<button onClick={() => items.push(`Item ${items.$length + 1}`)}>{'Add Item'}</button>
+			<button onClick={() => items.push(`Item ${items.length + 1}`)}>{'Add Item'}</button>
 		}
 
 		render(App);

package/tests/map.test.ripple

@@ -1,7 +1,7 @@
 import { describe, it, expect, beforeEach, afterEach } from 'vitest';
-import { mount, flushSync, RippleMap, track } from 'ripple';
+import { mount, flushSync, TrackedMap, track } from 'ripple';
 
-describe('RippleMap', () => {
+describe('TrackedMap', () => {
     let container;
 
     function render(component) {
@@ -20,11 +20,11 @@ describe('RippleMap', () => {
         container = null;
     });
 
-    it('handles set with update and delete operations with a reactive $size var', () => {
+    it('handles set with update and delete operations with a reactive size var', () => {
         component MapTest() {
-            let map = new RippleMap([['a', 1], ['b', 2], ['c', 3]]);
+            let map = new TrackedMap([['a', 1], ['b', 2], ['c', 3]]);
             let value = track(() => map.get('a'));
-            let size = track(() => map.$size);
+            let size = track(() => map.size);
 
             <button onClick={() => map.set('d', 4)}>{'set'}</button>
             <button onClick={() => map.delete('b')}>{'delete'}</button>
@@ -61,10 +61,10 @@ describe('RippleMap', () => {
 
     it('handles clear operation', () => {
         component MapTest() {
-            let map = new RippleMap([['a', 1], ['b', 2], ['c', 3]]);
+            let map = new TrackedMap([['a', 1], ['b', 2], ['c', 3]]);
 
             <button onClick={() => map.clear()}>{'clear'}</button>
-            <pre>{map.$size}</pre>
+            <pre>{map.size}</pre>
         }
 
         render(MapTest);
@@ -79,7 +79,7 @@ describe('RippleMap', () => {
 
     it('handles has operation and tracks reactive $has', () => {
         component MapTest() {
-            let map = new RippleMap([['a', 1], ['b', 2], ['c', 3]]);
+            let map = new TrackedMap([['a', 1], ['b', 2], ['c', 3]]);
             let has = track(() => map.has('b'));
 
             <button onClick={() => map.delete('b')}>{'delete'}</button>
@@ -99,7 +99,7 @@ describe('RippleMap', () => {
 
     it('handles reactivity of keys, values, and entries', () => {
         component MapTest() {
-            let map = new RippleMap([['x', 10], ['y', 20]]);
+            let map = new TrackedMap([['x', 10], ['y', 20]]);
             let keys = track(() => Array.from(map.keys()));
             let values = track(() => Array.from(map.values()));
             let entries = track(() => Array.from(map.entries()));
@@ -129,7 +129,7 @@ describe('RippleMap', () => {
 
     it('toJSON returns correct object', () => {
         component MapTest() {
-            let map = new RippleMap([['foo', 1], ['bar', 2]]);
+            let map = new TrackedMap([['foo', 1], ['bar', 2]]);
 
             <pre>{JSON.stringify(map)}</pre>
         }

package/tests/ref.test.ripple

@@ -1,5 +1,5 @@
 import { describe, it, expect, beforeEach, afterEach } from 'vitest';
-import { mount, flushSync, RippleArray } from 'ripple';
+import { mount, flushSync, TrackedArray } from 'ripple';
 
 describe('refs', () => {
 	let container;
@@ -35,7 +35,7 @@ describe('refs', () => {
 		let _node;
 
 		component Component() {
-			let items = RippleArray.from([1, 2, 3]);
+			let items = TrackedArray.from([1, 2, 3]);
 
 			function componentRef(node) {
 				_node = node;
@@ -47,7 +47,7 @@ describe('refs', () => {
 		component Child(props) {
 			const { items, ...rest } = props;
 			<pre {...rest}>{JSON.stringify(items)}</pre>
-			<pre>{items.$length}</pre>
+			<pre>{items.length}</pre>
 		}
 
 		render(Component);

package/tests/set.test.ripple

@@ -1,7 +1,7 @@
 import { describe, it, expect, beforeEach, afterEach } from 'vitest';
-import { mount, flushSync, RippleSet, track } from 'ripple';
+import { mount, flushSync, TrackedSet, track } from 'ripple';
 
-describe('RippleSet', () => {
+describe('TrackedSet', () => {
   let container;
 
   function render(component) {
@@ -22,7 +22,7 @@ describe('RippleSet', () => {
 
   it('handles add and delete operations', () => {
     component SetTest() {
-      let items = new RippleSet([1, 2, 3]);
+      let items = new TrackedSet([1, 2, 3]);
 
       <button onClick={() => items.add(4)}>{'add'}</button>
       <button onClick={() => items.delete(2)}>{'delete'}</button>
@@ -31,7 +31,7 @@ describe('RippleSet', () => {
 
     component Child({ items }) {
       <pre>{JSON.stringify(items)}</pre>
-      <pre>{items.$size}</pre>
+      <pre>{items.size}</pre>
     }
 
     render(SetTest);
@@ -54,7 +54,7 @@ describe('RippleSet', () => {
 
   it('handles clear operation', () => {
     component SetTest() {
-      let items = new RippleSet([1, 2, 3]);
+      let items = new TrackedSet([1, 2, 3]);
 
       <button onClick={() => items.clear()}>{'clear'}</button>
       <Child items={items} />
@@ -62,7 +62,7 @@ describe('RippleSet', () => {
 
     component Child({ items }) {
       <pre>{JSON.stringify(items)}</pre>
-      <pre>{items.$size}</pre>
+      <pre>{items.size}</pre>
     }
 
     render(SetTest);
@@ -78,7 +78,7 @@ describe('RippleSet', () => {
 
   it('handles has operation', () => {
     component SetTest() {
-      let items = new RippleSet([1, 2, 3]);
+      let items = new TrackedSet([1, 2, 3]);
       let hasValue = track(() => items.has(2));
 
       <button onClick={() => items.delete(2)}>{'delete'}</button>

package/types/index.d.ts

@@ -11,27 +11,17 @@ export declare function flushSync<T>(fn: () => T): T;
 
 export declare function effect(fn: (() => void) | (() => () => void)): void;
 
-export declare class RippleArray<T> extends Array<T> {
-	static from<T>(arrayLike: ArrayLike<T>): RippleArray<T>;
-	static from<T, U>(
-		arrayLike: ArrayLike<T>,
-		mapFn: (v: T, k: number) => U,
-		thisArg?: any,
-	): RippleArray<U>;
-	static from<T>(iterable: Iterable<T>): RippleArray<T>;
-	static from<T, U>(
-		iterable: Iterable<T>,
-		mapFn: (v: T, k: number) => U,
-		thisArg?: any,
-	): RippleArray<U>;
-
-	static of<T>(...items: T[]): RippleArray<T>;
-
-	$length: number;
-
-	toJSON(): T[];
+export interface TrackedArrayConstructor {
+  new <T>(...elements: T[]): TrackedArray<T>;   // must be used with `new`
+  from<T>(arrayLike: ArrayLike<T>): TrackedArray<T>;
+  of<T>(...items: T[]): TrackedArray<T>;
+  fromAsync<T>(iterable: AsyncIterable<T>): Promise<TrackedArray<T>>;
 }
 
+export interface TrackedArray<T> extends Array<T> {}
+
+export declare const TrackedArray: TrackedArrayConstructor;
+
 export type Context<T> = {
 	get(): T;
 	set(value: T): void;
@@ -39,20 +29,18 @@ export type Context<T> = {
 
 export declare function createContext<T>(initialValue: T): Context<T>;
 
-export class RippleSet<T> extends Set<T> {
-	readonly $size: number;
-	isDisjointFrom(other: RippleSet<T> | Set<T>): boolean;
-	isSubsetOf(other: RippleSet<T> | Set<T>): boolean;
-	isSupersetOf(other: RippleSet<T> | Set<T>): boolean;
-	difference(other: RippleSet<T> | Set<T>): RippleSet<T>;
-	intersection(other: RippleSet<T> | Set<T>): RippleSet<T>;
-	symmetricDifference(other: RippleSet<T> | Set<T>): RippleSet<T>;
-	union(other: RippleSet<T> | Set<T>): RippleSet<T>;
+export class TrackedSet<T> extends Set<T> {
+	isDisjointFrom(other: TrackedSet<T> | Set<T>): boolean;
+	isSubsetOf(other: TrackedSet<T> | Set<T>): boolean;
+	isSupersetOf(other: TrackedSet<T> | Set<T>): boolean;
+	difference(other: TrackedSet<T> | Set<T>): TrackedSet<T>;
+	intersection(other: TrackedSet<T> | Set<T>): TrackedSet<T>;
+	symmetricDifference(other: TrackedSet<T> | Set<T>): TrackedSet<T>;
+	union(other: TrackedSet<T> | Set<T>): TrackedSet<T>;
 	toJSON(): T[];
 }
 
-export class RippleMap<K, V> extends Map<K, V> {
-	get $size(): number;
+export class TrackedMap<K, V> extends Map<K, V> {
 	toJSON(): [K, V][];
 }
 
@@ -70,7 +58,6 @@ declare global {
 	 */
 	var $: {
 		tracked<T>(value: T, block?: any): T;
-		tracked_object<T extends Record<string, any>>(obj: T, props: string[], block?: any): T;
 		computed<T>(fn: () => T, block?: any): T;
 		scope(): any;
 		get_tracked(node: any): any;