feat: add derive and combine

Author: crimx

cspell.json

@@ -12,6 +12,7 @@
     "Parens",
     "pnpm",
     "preinstall",
+    "Readables",
     "treeshake",
     "tsup",
     "typedoc",

src/collections/reactiveSet.ts

@@ -0,0 +1,37 @@
+import { compute } from "./compute";
+import { type Config, type OwnedReadable, type Readable } from "./typings";
+
+export type MapReadablesToValues<TDepValues extends readonly Readable[]> = {
+  [K in keyof TDepValues]: TDepValues[K] extends Readable<infer V> ? V : never;
+};
+
+export interface Combine {
+  /**
+   * Combines an array of Readables into a single Readable with the array of values.
+   * @param deps An array of Readables to combine.
+   * @returns A Readable with the combined values.
+   */
+  <TDep$s extends readonly Readable[] = Readable[]>(deps: TDep$s): OwnedReadable<MapReadablesToValues<TDep$s>>;
+  /**
+   * Combines an array of Readables into a single Readable with transformed value.
+   * @param deps An array of Readables to combine.
+   * @param transform A pure function that takes an array of values and returns a new value.
+   * @param config custom config for the combined Readable.
+   * @returns A Readable with the transformed values.
+   */
+  <TDep$s extends readonly Readable[] = Readable[], TValue = any>(
+    deps: TDep$s,
+    transform: (deps: MapReadablesToValues<TDep$s>) => TValue,
+    config?: Config<TValue>,
+  ): OwnedReadable<TValue>;
+}
+
+export const combine: Combine = <TDep$s extends readonly Readable[], TValue = any>(
+  deps: TDep$s,
+  transform?: (deps: MapReadablesToValues<TDep$s>) => TValue,
+  config?: Config<TValue>,
+) =>
+  compute(
+    get => (transform ? transform(deps.map(get) as MapReadablesToValues<TDep$s>) : (deps.map(get) as TValue)),
+    config,
+  );

src/combine.ts

@@ -0,0 +1,30 @@
+import { compute } from "./compute";
+import { type Config, type OwnedReadable, type Readable } from "./typings";
+
+export interface Derive {
+  /**
+   * Derive a new Readable with same value from the given Readable.
+   * @param dep$ - The Readable to derive from.
+   * @param config - Custom config for the derived Readable.
+   * @returns A Readable with same value as the given Readable.
+   */
+  <TDepValue = any, TValue = any>(dep$: Readable<TDepValue>): OwnedReadable<TValue>;
+  /**
+   * Derive a new Readable with transformed value from the given Readable.
+   * @param dep$ - The Readable to derive from.
+   * @param transform A pure function that takes an input value and returns a new value.
+   * @param config custom config for the combined Readable.
+   * @returns A Readable with transformed value from the given Readable.
+   */
+  <TDepValue = any, TValue = any>(
+    dep$: Readable<TDepValue>,
+    transform: (depValue: TDepValue) => TValue,
+    config?: Config<TValue>,
+  ): OwnedReadable<TValue>;
+}
+
+export const derive: Derive = <TDepValue, TValue>(
+  dep$: Readable<TDepValue>,
+  transform?: (depValue: TDepValue) => TValue,
+  config?: Config<TValue>,
+) => compute(get => (transform ? transform(get(dep$)) : (get(dep$) as unknown as TValue)), config);

src/derive.ts

@@ -17,11 +17,13 @@ export { type Listener, type RemoveListener } from "./event";
 export { batch, batchFlush, batchStart } from "./batch";
 
 export { compute, type ComputeFn } from "./compute";
+export { derive, type Derive } from "./derive";
+export { combine, type Combine } from "./combine";
 
 export { readable, writable, toWritable } from "./readable";
 export { watch, type WatchEffect } from "./watch";
 
-export { isReadable, unsubscribe, identity, strictEqual, arrayShallowEqual } from "./utils";
+export { isReadable, unsubscribe, strictEqual, arrayShallowEqual } from "./utils";
 
 export {
   reactiveMap,

src/index.ts

@@ -1,9 +1,5 @@
 import { type BRAND } from "./utils";
 
-export type $sValueTuple<TValInputs extends readonly Readable[]> = Readonly<{
-  [K in keyof TValInputs]: Extract$Value<TValInputs[K]>;
-}>;
-
 /**
  * Custom config for the Readable/Writable.
  */

src/typings.ts

@@ -1,4 +1,4 @@
-import { type $sValueTuple, type Readable } from "./typings";
+import { type Readable } from "./typings";
 
 export const BRAND = /* @__PURE__ */ Symbol.for("@embra/reactivity");
 export type BRAND = typeof BRAND;
@@ -28,9 +28,6 @@ export const unsubscribe = (
   }
 };
 
-/** Returns the value passed in. */
-export const identity = <TValue>(value: TValue): TValue => value;
-
 /**
  * `Object.is`
  */
@@ -64,11 +61,6 @@ export const arrayShallowEqual = (arrA: any, arrB: any): boolean => {
   return true;
 };
 
-const getValue = <TValue>($: Readable<TValue>): TValue => $.value;
-
-export const getValues = <T extends readonly Readable[]>($s: T): [...$sValueTuple<T>] =>
-  $s.map(getValue) as [...$sValueTuple<T>];
-
 interface IsReadable {
   <T extends Readable>($: T): $ is T;
   ($: unknown): $ is Readable;

src/utils.ts

@@ -1,4 +1,4 @@
-import { describe, it, expect, vi } from "vitest";
+import { describe, it, expect, vi, afterAll, beforeAll } from "vitest";
 
 import { batch, reactiveMap } from "../../src";
 
@@ -37,6 +37,14 @@ describe("ReactiveMap", () => {
       expect(map.get("foo")).toEqual(1);
     });
 
+    it("should update existing value", () => {
+      const map = reactiveMap<string, number>();
+      map.set("foo", 1);
+      expect(map.get("foo")).toEqual(1);
+      map.set("foo", 2);
+      expect(map.get("foo")).toEqual(2);
+    });
+
     it("should notify on set", () => {
       const map = reactiveMap<string, number>();
 
@@ -449,7 +457,17 @@ describe("ReactiveMap", () => {
     });
   });
 
-  describe("dispose", () => {
+  describe.each(["test", "production"])("dispose [%s]", NODE_ENV => {
+    const originalEnv = process.env.NODE_ENV;
+
+    beforeAll(() => {
+      process.env.NODE_ENV = NODE_ENV;
+    });
+
+    afterAll(() => {
+      process.env.NODE_ENV = originalEnv;
+    });
+
     it("should clear the map and dispose of resources", () => {
       const consoleErrorMock = vi.spyOn(console, "error").mockImplementation(() => void 0);
 
@@ -495,6 +513,14 @@ describe("ReactiveMap", () => {
 
       consoleErrorMock.mockRestore();
     });
+
+    it("should allow disposing multiple times", () => {
+      const map = reactiveMap<string, number>();
+      expect(() => {
+        map.dispose();
+        map.dispose();
+      }).not.toThrow();
+    });
   });
 
   describe("onChanged", () => {
@@ -521,6 +547,10 @@ describe("ReactiveMap", () => {
     });
 
     it("should not notify listeners after dispose", () => {
+      const consoleErrorMock = vi.spyOn(console, "error").mockImplementation(() => void 0);
+
+      expect(consoleErrorMock).not.toBeCalled();
+
       const map = reactiveMap<string, number>();
       const listener = vi.fn();
 
@@ -529,6 +559,9 @@ describe("ReactiveMap", () => {
 
       map.set("foo", 1);
       expect(listener).toHaveBeenCalledTimes(0);
+      expect(consoleErrorMock).toBeCalled();
+
+      consoleErrorMock.mockRestore();
     });
 
     it("should not notify disposed listeners", () => {
@@ -541,6 +574,28 @@ describe("ReactiveMap", () => {
       map.set("foo", 1);
       expect(listener).toHaveBeenCalledTimes(0);
     });
+
+    it("should not notify removed listeners", () => {
+      const map = reactiveMap<string, number>();
+      const listener1 = vi.fn();
+      const dispose = map.onChanged(listener1);
+
+      map.set("foo", 1);
+      expect(listener1).toHaveBeenCalledTimes(1);
+
+      listener1.mockClear();
+
+      dispose();
+      map.set("bar", 2);
+      expect(listener1).toHaveBeenCalledTimes(0);
+
+      const listener2 = vi.fn();
+      map.onChanged(listener2);
+
+      map.set("baz", 3);
+      expect(listener2).toHaveBeenCalledWith({ upsert: [["baz", 3]], delete: [] });
+      expect(listener1).toHaveBeenCalledTimes(0);
+    });
   });
 
   describe("onDisposeValue", () => {
@@ -567,5 +622,23 @@ describe("ReactiveMap", () => {
       expect(listener1).toHaveBeenCalledWith(2);
       expect(listener2).toHaveBeenCalledTimes(0);
     });
+
+    it("should not notify removed listeners", () => {
+      const map = reactiveMap<string, number>();
+      const listener = vi.fn();
+      const dispose = map.onDisposeValue(listener);
+
+      map.set("foo", 1);
+      map.delete("foo");
+      expect(listener).toHaveBeenCalledTimes(1);
+      expect(listener).toHaveBeenCalledWith(1);
+
+      listener.mockClear();
+
+      dispose();
+      map.set("bar", 2);
+      map.delete("bar");
+      expect(listener).toHaveBeenCalledTimes(0);
+    });
   });
 });

test/collections/reactiveMap.test.ts

@@ -0,0 +1,27 @@
+import { describe, expect, it } from "vitest";
+
+import { combine, writable } from "../src";
+
+describe("combine", () => {
+  it("should combine an array of Readables into a single Readable with the array of values", () => {
+    const dep1$ = writable(1);
+    const dep2$ = writable(2);
+    const combined$ = combine([dep1$, dep2$]);
+
+    expect(combined$.value).toEqual([1, 2]);
+
+    dep1$.value = 3;
+    expect(combined$.value).toEqual([3, 2]);
+  });
+
+  it("should combine an array of Readables into a single Readable with transformed value", () => {
+    const dep1$ = writable(1);
+    const dep2$ = writable(2);
+    const combined$ = combine([dep1$, dep2$], ([v1, v2]) => v1 + v2);
+
+    expect(combined$.value).toBe(3);
+
+    dep1$.value = 3;
+    expect(combined$.value).toBe(5);
+  });
+});

test/combine.test.ts

@@ -0,0 +1,25 @@
+import { describe, expect, it } from "vitest";
+
+import { derive, writable } from "../src";
+
+describe("derive", () => {
+  it("should derive a new Readable with same value", () => {
+    const dep$ = writable(42);
+    const derived$ = derive(dep$);
+
+    expect(derived$.value).toBe(dep$.value);
+
+    dep$.value = 100;
+    expect(derived$.value).toBe(100);
+  });
+
+  it("should derive a new Readable with transformed value", () => {
+    const dep$ = writable(42);
+    const derived$ = derive(dep$, value => value * 2);
+
+    expect(derived$.value).toBe(84);
+
+    dep$.value = 100;
+    expect(derived$.value).toBe(200);
+  });
+});