ripple 0.2.114 → 0.2.116

package/tests/client/map.test.ripple

@@ -138,4 +138,85 @@ describe('TrackedMap', () => {
 
         expect(container.querySelectorAll('pre')[0].textContent).toBe('[["foo",1],["bar",2]]');
     });
+
+    it('creates empty TrackedMap using #Map() shorthand syntax', () => {
+        component MapTest() {
+            let map = #Map();
+            
+            <button onClick={() => map.set('a', 1)}>{'add'}</button>
+            <pre>{map.size}</pre>
+        }
+
+        render(MapTest);
+
+        expect(container.querySelector('pre').textContent).toBe('0');
+
+        const addButton = container.querySelector('button');
+        addButton.click();
+        flushSync();
+
+        expect(container.querySelector('pre').textContent).toBe('1');
+    });
+    
+
+    it('creates TrackedMap with initial entries using #Map() shorthand syntax', () => {
+        component MapTest() {
+            let map = #Map([['a', 1], ['b', 2], ['c', 3]]);
+            let value = track(() => map.get('b'));
+
+            <button onClick={() => map.set('b', 10)}>{'update'}</button>
+            <pre>{map.size}</pre>
+            <pre>{@value}</pre>
+        }
+
+        render(MapTest);
+
+        expect(container.querySelectorAll('pre')[0].textContent).toBe('3');
+        expect(container.querySelectorAll('pre')[1].textContent).toBe('2');
+
+        const updateButton = container.querySelector('button');
+        updateButton.click();
+        flushSync();
+
+        expect(container.querySelectorAll('pre')[1].textContent).toBe('10');
+    });
+
+    it('handles all operations with #Map() shorthand syntax', () => {
+        component MapTest() {
+            let map = #Map([['x', 100], ['y', 200]]);
+            let keys = track(() => Array.from(map.keys()));
+
+            <button onClick={() => map.set('z', 300)}>{'add'}</button>
+            <button onClick={() => map.delete('x')}>{'delete'}</button>
+            <button onClick={() => map.clear()}>{'clear'}</button>
+
+            <pre>{JSON.stringify(@keys)}</pre>
+            <pre>{map.size}</pre>
+        }
+
+        render(MapTest);
+
+        const [addButton, deleteButton, clearButton] = container.querySelectorAll('button');
+
+        expect(container.querySelectorAll('pre')[0].textContent).toBe('["x","y"]');
+        expect(container.querySelectorAll('pre')[1].textContent).toBe('2');
+
+        addButton.click();
+        flushSync();
+
+        expect(container.querySelectorAll('pre')[0].textContent).toBe('["x","y","z"]');
+        expect(container.querySelectorAll('pre')[1].textContent).toBe('3');
+
+        deleteButton.click();
+        flushSync();
+
+        expect(container.querySelectorAll('pre')[0].textContent).toBe('["y","z"]');
+        expect(container.querySelectorAll('pre')[1].textContent).toBe('2');
+
+        clearButton.click();
+        flushSync();
+
+        expect(container.querySelectorAll('pre')[0].textContent).toBe('[]');
+        expect(container.querySelectorAll('pre')[1].textContent).toBe('0');
+    });
 });

package/tests/client/set.test.ripple

@@ -96,4 +96,85 @@ describe('TrackedSet', () => {
 
     expect(container.querySelectorAll('pre')[0].textContent).toBe('false');
   });
+
+  it('creates empty TrackedSet using #Set() shorthand syntax', () => {
+    component SetTest() {
+      let items = #Set();
+
+      <button onClick={() => items.add(1)}>{'add'}</button>
+      <pre>{items.size}</pre>
+    }
+
+    render(SetTest);
+
+    expect(container.querySelector('pre').textContent).toBe('0');
+
+    const addButton = container.querySelector('button');
+    addButton.click();
+    flushSync();
+
+    expect(container.querySelector('pre').textContent).toBe('1');
+  });
+
+  it('creates TrackedSet with initial values using #Set() shorthand syntax', () => {
+    component SetTest() {
+      let items = #Set([1, 2, 3, 4]);
+      let hasValue = track(() => items.has(3));
+
+      <button onClick={() => items.delete(3)}>{'delete'}</button>
+      <pre>{items.size}</pre>
+      <pre>{@hasValue}</pre>
+    }
+
+    render(SetTest);
+
+    expect(container.querySelectorAll('pre')[0].textContent).toBe('4');
+    expect(container.querySelectorAll('pre')[1].textContent).toBe('true');
+
+    const deleteButton = container.querySelector('button');
+    deleteButton.click();
+    flushSync();
+
+    expect(container.querySelectorAll('pre')[0].textContent).toBe('3');
+    expect(container.querySelectorAll('pre')[1].textContent).toBe('false');
+  });
+
+  it('handles all operations with #Set() shorthand syntax', () => {
+    component SetTest() {
+      let items = #Set([10, 20, 30]);
+      let values = track(() => Array.from(items.values()));
+
+      <button onClick={() => items.add(40)}>{'add'}</button>
+      <button onClick={() => items.delete(20)}>{'delete'}</button>
+      <button onClick={() => items.clear()}>{'clear'}</button>
+
+      <pre>{JSON.stringify(@values)}</pre>
+      <pre>{items.size}</pre>
+    }
+
+    render(SetTest);
+
+    const [addButton, deleteButton, clearButton] = container.querySelectorAll('button');
+
+    expect(container.querySelectorAll('pre')[0].textContent).toBe('[10,20,30]');
+    expect(container.querySelectorAll('pre')[1].textContent).toBe('3');
+
+    addButton.click();
+    flushSync();
+
+    expect(container.querySelectorAll('pre')[0].textContent).toBe('[10,20,30,40]');
+    expect(container.querySelectorAll('pre')[1].textContent).toBe('4');
+
+    deleteButton.click();
+    flushSync();
+
+    expect(container.querySelectorAll('pre')[0].textContent).toBe('[10,30,40]');
+    expect(container.querySelectorAll('pre')[1].textContent).toBe('3');
+
+    clearButton.click();
+    flushSync();
+
+    expect(container.querySelectorAll('pre')[0].textContent).toBe('[]');
+    expect(container.querySelectorAll('pre')[1].textContent).toBe('0');
+  });
 });

package/types/index.d.ts

@@ -14,13 +14,13 @@ export declare function flushSync<T>(fn: () => T): T;
 export declare function effect(fn: (() => void) | (() => () => void)): void;
 
 export interface TrackedArrayConstructor {
-	new <T>(...elements: T[]): TrackedArray<T>;   // must be used with `new`
+	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 interface TrackedArray<T> extends Array<T> {}
 
 export declare const TrackedArray: TrackedArrayConstructor;
 
@@ -73,24 +73,50 @@ declare global {
 
 export declare function createRefKey(): symbol;
 
-export type Tracked<V> = { '#v': V };
+// Base Tracked interface - all tracked values have a '#v' property containing the actual value
+export interface Tracked<V> {
+	'#v': V;
+}
+
+// Augment Tracked to be callable when V is a Component
+// This allows <@Something /> to work in JSX when Something is Tracked<Component>
+export interface Tracked<V> {
+	(props: V extends Component<infer P> ? P : never): V extends Component ? void : never;
+}
+
+// Helper type to infer component type from a function that returns a component
+// If T is a function returning a Component, extract the Component type itself, not the return type (void)
+export type InferComponent<T> = T extends () => infer R ? (R extends Component<any> ? R : T) : T;
 
 export type Props<K extends PropertyKey = any, V = unknown> = Record<K, V>;
 export type PropsWithExtras<T extends object> = Props & T & Record<string, unknown>;
-export type PropsWithChildren<T extends object = {}> =
-	Expand<Omit<Props, 'children'> & { children: Component } & T>;
+export type PropsWithChildren<T extends object = {}> = Expand<
+	Omit<Props, 'children'> & { children: Component } & T
+>;
 
 type Expand<T> = T extends infer O ? { [K in keyof O]: O[K] } : never;
 
-type PickKeys<T, K extends readonly (keyof T)[]> =
-	{ [I in keyof K]: Tracked<T[K[I] & keyof T]> };
+type PickKeys<T, K extends readonly (keyof T)[]> = { [I in keyof K]: Tracked<T[K[I] & keyof T]> };
 
 type RestKeys<T, K extends readonly (keyof T)[]> = Expand<Omit<T, K[number]>>;
 
-type SplitResult<T extends Props, K extends readonly (keyof T)[]> =
-	[...PickKeys<T, K>, Tracked<RestKeys<T, K>>];
-
-export declare function track<V>(value?: V | (() => V), get?: (v: V) => V, set?: (next: V, prev: V) => V): Tracked<V>;
+type SplitResult<T extends Props, K extends readonly (keyof T)[]> = [
+	...PickKeys<T, K>,
+	Tracked<RestKeys<T, K>>,
+];
+
+// Overload for function values - infers the return type of the function
+export declare function track<V>(
+	value: () => V,
+	get?: (v: InferComponent<V>) => InferComponent<V>,
+	set?: (next: InferComponent<V>, prev: InferComponent<V>) => InferComponent<V>,
+): Tracked<InferComponent<V>>;
+// Overload for non-function values
+export declare function track<V>(
+	value?: V,
+	get?: (v: V) => V,
+	set?: (next: V, prev: V) => V,
+): Tracked<V>;
 
 export declare function trackSplit<V extends Props, const K extends readonly (keyof V)[]>(
 	value: V,
@@ -101,60 +127,67 @@ export function on<Type extends keyof WindowEventMap>(
 	window: Window,
 	type: Type,
 	handler: (this: Window, event: WindowEventMap[Type]) => any,
-	options?: AddEventListenerOptions | undefined
+	options?: AddEventListenerOptions | undefined,
 ): () => void;
 
 export function on<Type extends keyof DocumentEventMap>(
 	document: Document,
 	type: Type,
 	handler: (this: Document, event: DocumentEventMap[Type]) => any,
-	options?: AddEventListenerOptions | undefined
+	options?: AddEventListenerOptions | undefined,
 ): () => void;
 
 export function on<Element extends HTMLElement, Type extends keyof HTMLElementEventMap>(
 	element: Element,
 	type: Type,
 	handler: (this: Element, event: HTMLElementEventMap[Type]) => any,
-	options?: AddEventListenerOptions | undefined
+	options?: AddEventListenerOptions | undefined,
 ): () => void;
 
 export function on<Element extends MediaQueryList, Type extends keyof MediaQueryListEventMap>(
 	element: Element,
 	type: Type,
 	handler: (this: Element, event: MediaQueryListEventMap[Type]) => any,
-	options?: AddEventListenerOptions | undefined
+	options?: AddEventListenerOptions | undefined,
 ): () => void;
 
 export function on(
 	element: EventTarget,
 	type: string,
 	handler: EventListener,
-	options?: AddEventListenerOptions | undefined
+	options?: AddEventListenerOptions | undefined,
 ): () => void;
 
 export type TrackedObjectShallow<T> = {
 	[K in keyof T]: T[K] | Tracked<T[K]>;
 };
 
-export type TrackedObjectDeep<T> =
-	T extends string | number | boolean | null | undefined | symbol | bigint
+export type TrackedObjectDeep<T> = T extends
+	| string
+	| number
+	| boolean
+	| null
+	| undefined
+	| symbol
+	| bigint
 	? T | Tracked<T>
 	: T extends TrackedArray<infer U>
-	? TrackedArray<U> | Tracked<TrackedArray<U>>
-	: T extends TrackedSet<infer U>
-	? TrackedSet<U> | Tracked<TrackedSet<U>>
-	: T extends TrackedMap<infer K, infer V>
-	? TrackedMap<K, V> | Tracked<TrackedMap<K, V>>
-	: T extends Array<infer U>
-	? Array<TrackedObjectDeep<U>> | Tracked<Array<TrackedObjectDeep<U>>>
-	: T extends Set<infer U>
-	? Set<TrackedObjectDeep<U>> | Tracked<Set<TrackedObjectDeep<U>>>
-	: T extends Map<infer K, infer V>
-	? Map<TrackedObjectDeep<K>, TrackedObjectDeep<V>> |
-	Tracked<Map<TrackedObjectDeep<K>, TrackedObjectDeep<V>>>
-	: T extends object
-	? { [K in keyof T]: TrackedObjectDeep<T[K]> | Tracked<TrackedObjectDeep<T[K]>> }
-	: T | Tracked<T>;
+		? TrackedArray<U> | Tracked<TrackedArray<U>>
+		: T extends TrackedSet<infer U>
+			? TrackedSet<U> | Tracked<TrackedSet<U>>
+			: T extends TrackedMap<infer K, infer V>
+				? TrackedMap<K, V> | Tracked<TrackedMap<K, V>>
+				: T extends Array<infer U>
+					? Array<TrackedObjectDeep<U>> | Tracked<Array<TrackedObjectDeep<U>>>
+					: T extends Set<infer U>
+						? Set<TrackedObjectDeep<U>> | Tracked<Set<TrackedObjectDeep<U>>>
+						: T extends Map<infer K, infer V>
+							?
+									| Map<TrackedObjectDeep<K>, TrackedObjectDeep<V>>
+									| Tracked<Map<TrackedObjectDeep<K>, TrackedObjectDeep<V>>>
+							: T extends object
+								? { [K in keyof T]: TrackedObjectDeep<T[K]> | Tracked<TrackedObjectDeep<T[K]>> }
+								: T | Tracked<T>;
 
 export type TrackedObject<T extends object> = T & {};
 
@@ -184,31 +217,59 @@ export class TrackedURL extends URL {
 export function createSubscriber(start: () => void | (() => void)): () => void;
 
 interface ReactiveValue<V> extends Tracked<V> {
-	new(fn: () => Tracked<V>, start: () => void | (() => void)): Tracked<V>;
+	new (fn: () => Tracked<V>, start: () => void | (() => void)): Tracked<V>;
 	/** @private */
 	_brand: void;
 }
 
 export interface MediaQuery extends Tracked<boolean> {
-	new(query: string, fallback?: boolean | undefined): Tracked<boolean>;
+	new (query: string, fallback?: boolean | undefined): Tracked<boolean>;
 	/** @private */
 	_brand: void;
 }
 
 export declare const MediaQuery: {
-	new(query: string, fallback?: boolean | undefined): Tracked<boolean>;
+	new (query: string, fallback?: boolean | undefined): Tracked<boolean>;
 };
 
-export function Portal<V = HTMLElement>({ target, children: Component }: { target: V, children?: Component }): void;
+export function Portal<V = HTMLElement>({
+	target,
+	children: Component,
+}: {
+	target: V;
+	children?: Component;
+}): void;
 
 /**
  * @param {Tracked<V>} tracked
  * @returns {(node: HTMLInputElement | HTMLSelectElement) => void}
  */
-export declare function bindValue<V>(tracked: Tracked<V>): (node: HTMLInputElement | HTMLSelectElement) => void;
+export declare function bindValue<V>(
+	tracked: Tracked<V>,
+): (node: HTMLInputElement | HTMLSelectElement) => void;
 
 /**
  * @param {Tracked<V>} tracked
  * @returns {(node: HTMLInputElement) => void}
  */
-export declare function bindChecked<V>(tracked: Tracked<V>): (node: HTMLInputElement) => void;
+export declare function bindChecked<V>(tracked: Tracked<V>): (node: HTMLInputElement) => void;
+
+export declare function bindClientWidth<V>(tracked: Tracked<V>): (node: HTMLElement) => void;
+
+export declare function bindClientHeight<V>(tracked: Tracked<V>): (node: HTMLElement) => void;
+
+export declare function bindContentRect<V>(tracked: Tracked<V>): (node: HTMLElement) => void;
+
+export declare function bindContentBoxSize<V>(tracked: Tracked<V>): (node: HTMLElement) => void;
+
+export declare function bindBorderBoxSize<V>(tracked: Tracked<V>): (node: HTMLElement) => void;
+
+export declare function bindDevicePixelContentBoxSize<V>(
+	tracked: Tracked<V>,
+): (node: HTMLElement) => void;
+
+export declare function bindInnerHTML<V>(tracked: Tracked<V>): (node: HTMLElement) => void;
+
+export declare function bindInnerText<V>(tracked: Tracked<V>): (node: HTMLElement) => void;
+
+export declare function bindTextContent<V>(tracked: Tracked<V>): (node: HTMLElement) => void;