feat: add new utils to mobx kit

iobuhov · iobuhov · commit d216baf82b7b · 2025-11-13T14:54:55.000+01:00
diff --git a/packages/shared/widget-plugin-mobx-kit/package.json b/packages/shared/widget-plugin-mobx-kit/package.json
@@ -32,6 +32,7 @@
     },
     "dependencies": {
         "@types/minimatch": "^3.0.5",
+        "mitt": "^3.0.1",
         "mobx": "6.12.3"
     },
     "devDependencies": {
diff --git a/packages/shared/widget-plugin-mobx-kit/src/SetupHost.ts b/packages/shared/widget-plugin-mobx-kit/src/SetupHost.ts
@@ -1,6 +1,6 @@
-import { disposeBatch } from "./disposeBatch";
 import { SetupComponent } from "./interfaces/SetupComponent";
 import { SetupComponentHost } from "./interfaces/SetupComponentHost";
+import { disposeBatch } from "./lib/disposeBatch";
 
 export abstract class SetupHost implements SetupComponentHost {
     private components: Set<SetupComponent> = new Set();
diff --git a/packages/shared/widget-plugin-mobx-kit/src/disposeBatch.ts b/packages/shared/widget-plugin-mobx-kit/src/disposeBatch.ts
@@ -1,19 +1,6 @@
-type MaybeFn = (() => void) | void;
+import { disposeBatch } from "./lib/disposeBatch";
 
-export function disposeBatch(): [add: (fn: MaybeFn) => void, disposeAll: () => void] {
-    const disposers = new Set<() => void>();
-
-    const add = (fn: MaybeFn): void => {
-        if (fn) {
-            disposers.add(fn);
-        }
-    };
-
-    const disposeAll = (): void => {
-        for (const fn of disposers) {
-            fn();
-        }
-        disposers.clear();
-    };
-    return [add, disposeAll];
-}
+export {
+    /** @deprecated import `disposeBatch` from `@mendix/widget-plugin-mobx-kit/main` instead */
+    disposeBatch
+};
diff --git a/packages/shared/widget-plugin-mobx-kit/src/interfaces/ComputedAtom.ts b/packages/shared/widget-plugin-mobx-kit/src/interfaces/ComputedAtom.ts
@@ -0,0 +1,3 @@
+export interface ComputedAtom<T> {
+    get(): T;
+}
diff --git a/packages/shared/widget-plugin-mobx-kit/src/lib/atomFactory.ts b/packages/shared/widget-plugin-mobx-kit/src/lib/atomFactory.ts
@@ -0,0 +1,10 @@
+import { computed } from "mobx";
+import { ComputedAtom } from "../interfaces/ComputedAtom";
+
+/** Creates a computed atom factory by composing a map function with a computation function. */
+export function atomFactory<P extends readonly any[], A extends readonly any[], B>(
+    map: (...args: P) => A,
+    fn: (...args: A) => B
+): (...args: P) => ComputedAtom<B> {
+    return (...args: P) => computed(() => fn(...map(...args)));
+}
diff --git a/packages/shared/widget-plugin-mobx-kit/src/lib/autoEffect.ts b/packages/shared/widget-plugin-mobx-kit/src/lib/autoEffect.ts
diff --git a/packages/shared/widget-plugin-mobx-kit/src/lib/createEmitter.ts b/packages/shared/widget-plugin-mobx-kit/src/lib/createEmitter.ts
@@ -0,0 +1,28 @@
+import mitt, { Emitter as MittEmitter } from "mitt";
+
+export type Handler<T = unknown> = (event: T) => void;
+
+export type WildcardHandler<T = Record<string, unknown>> = (type: keyof T, event: T[keyof T]) => void;
+
+export interface Emitter<Events extends Record<string | symbol, unknown>> extends MittEmitter<Events> {
+    on<Key extends keyof Events>(type: Key, handler: Handler<Events[Key]>): () => void;
+    on(type: "*", handler: WildcardHandler<Events>): () => void;
+}
+
+export function createEmitter<Events extends Record<string | symbol, unknown>>(): Emitter<Events> {
+    const emitter = mitt<Events>();
+
+    return {
+        ...emitter,
+        on<Key extends keyof Events>(type: Key, handler: Handler<Events[Key]> | WildcardHandler<Events>): () => void {
+            if (type === "*") {
+                const fn = handler as WildcardHandler<Events>;
+                emitter.on(type, fn);
+                return () => emitter.off(type, fn);
+            }
+            const fn = handler as Handler<Events[Key]>;
+            emitter.on(type, fn);
+            return () => emitter.off(type, fn);
+        }
+    };
+}
diff --git a/packages/shared/widget-plugin-mobx-kit/src/lib/disposeBatch.ts b/packages/shared/widget-plugin-mobx-kit/src/lib/disposeBatch.ts
@@ -0,0 +1,17 @@
+export function disposeBatch(): [add: (fn: void | (() => void)) => void, disposeAll: () => void] {
+    const disposers = new Set<() => void>();
+
+    const add = (fn: void | (() => void)): void => {
+        if (fn) {
+            disposers.add(fn);
+        }
+    };
+
+    const disposeAll = (): void => {
+        for (const fn of disposers) {
+            fn();
+        }
+        disposers.clear();
+    };
+    return [add, disposeAll];
+}
diff --git a/packages/shared/widget-plugin-mobx-kit/src/main.ts b/packages/shared/widget-plugin-mobx-kit/src/main.ts
@@ -1,9 +1,13 @@
-export { autoEffect } from "./autoEffect";
 export { DerivedGate } from "./DerivedGate";
-export { disposeBatch } from "./disposeBatch";
 export { GateProvider } from "./GateProvider";
+export type { ComputedAtom } from "./interfaces/ComputedAtom";
 export * from "./interfaces/DerivedPropsGate";
 export * from "./interfaces/DerivedPropsGateProvider";
 export * from "./interfaces/SetupComponent";
 export * from "./interfaces/SetupComponentHost";
+export { atomFactory } from "./lib/atomFactory";
+export { autoEffect } from "./lib/autoEffect";
+export { createEmitter } from "./lib/createEmitter";
+export type { Emitter } from "./lib/createEmitter";
+export { disposeBatch } from "./lib/disposeBatch";
 export { SetupHost } from "./SetupHost";
diff --git a/packages/shared/widget-plugin-mobx-kit/src/react/useSubscribe.ts b/packages/shared/widget-plugin-mobx-kit/src/react/useSubscribe.ts
diff --git a/packages/shared/widget-plugin-mobx-kit/test/atomFactory.test.ts b/packages/shared/widget-plugin-mobx-kit/test/atomFactory.test.ts
@@ -0,0 +1,179 @@
+import { configure, observable, runInAction } from "mobx";
+import { atomFactory } from "../src/lib/atomFactory";
+import { ComputedAtom } from "../src/main";
+
+describe("atomFactory", () => {
+    configure({
+        enforceActions: "never"
+    });
+
+    it("should create a computed atom factory that composes map and computation functions", () => {
+        const map = (x: number, y: number) => [x + 1, y + 1] as const;
+        const fn = (a: number, b: number): number => a * b;
+        const factory = atomFactory(map, fn);
+
+        const atom = factory(2, 3);
+        expect(atom.get()).toBe(12); // (2+1) * (3+1) = 3 * 4 = 12
+    });
+
+    it("should return a function that creates computed atoms", () => {
+        const map = (x: number) => [x * 2] as const;
+        const fn = (a: number): number => a + 10;
+        const factory = atomFactory(map, fn);
+
+        const atom1 = factory(5);
+        const atom2 = factory(3);
+
+        expect(atom1.get()).toBe(20); // (5*2) + 10 = 20
+        expect(atom2.get()).toBe(16); // (3*2) + 10 = 16
+    });
+
+    it("should create reactive computed atoms that update when observables change", () => {
+        const observableValue = observable.box(5);
+        const map = (x: number) => [x, observableValue.get()] as const;
+        const fn = (a: number, b: number): number => a + b;
+        const factory = atomFactory(map, fn);
+
+        const atom = factory(10);
+        expect(atom.get()).toBe(15); // 10 + 5 = 15
+
+        observableValue.set(20);
+        expect(atom.get()).toBe(30); // 10 + 20 = 30
+    });
+
+    it("should handle multiple parameters in map function", () => {
+        const map = (a: number, b: number, c: number) => [a + b, c] as const;
+        const fn = (x: number, y: number): number => x * y;
+        const factory = atomFactory(map, fn);
+
+        const atom = factory(2, 3, 4);
+        expect(atom.get()).toBe(20); // (2+3) * 4 = 5 * 4 = 20
+    });
+
+    it("should handle complex objects and transformations", () => {
+        interface Input {
+            value: number;
+        }
+        interface Output {
+            doubled: number;
+        }
+
+        const map = (input: Input) => [input.value] as const;
+        const fn = (value: number): Output => ({ doubled: value * 2 });
+        const factory = atomFactory(map, fn);
+
+        const atom = factory({ value: 7 });
+        expect(atom.get()).toEqual({ doubled: 14 });
+    });
+
+    it("should cache computed values and only recompute when dependencies change", () => {
+        const box = observable.box(1);
+        const mapFn = jest.fn((x: ComputedAtom<number>) => [x.get()] as const);
+        const computeFn = jest.fn((a: number): number => a * 6);
+        const factory = atomFactory(mapFn, computeFn);
+
+        const atom = factory(box);
+
+        runInAction(() => {
+            // First access
+            expect(atom.get()).toBe(6);
+            expect(mapFn).toHaveBeenCalledTimes(1);
+            expect(computeFn).toHaveBeenCalledTimes(1);
+
+            expect(atom.get()).toBe(6);
+            expect(mapFn).toHaveBeenCalledTimes(1);
+            expect(computeFn).toHaveBeenCalledTimes(1);
+
+            box.set(2);
+            expect(atom.get()).toBe(12);
+            expect(mapFn).toHaveBeenCalledTimes(2);
+            expect(computeFn).toHaveBeenCalledTimes(2);
+        });
+    });
+
+    it("should handle zero parameters", () => {
+        const map = () => [42] as const;
+        const fn = (x: number): number => x * 2;
+        const factory = atomFactory(map, fn);
+
+        const atom = factory();
+        expect(atom.get()).toBe(84);
+    });
+
+    it("should handle string transformations", () => {
+        const map = (str: string, prefix: string) => [prefix, str] as const;
+        const fn = (prefix: string, str: string): string => `${prefix}${str}`;
+        const factory = atomFactory(map, fn);
+
+        const atom = factory("World", "Hello ");
+        expect(atom.get()).toBe("Hello World");
+    });
+
+    it("should handle array transformations", () => {
+        const map = (arr: number[]) => [arr] as const;
+        const fn = (arr: number[]): number => arr.reduce((sum, n) => sum + n, 0);
+        const factory = atomFactory(map, fn);
+
+        const atom = factory([1, 2, 3, 4, 5]);
+        expect(atom.get()).toBe(15);
+    });
+
+    it("should allow multiple atoms created from the same factory to be independent", () => {
+        const map = (x: number) => [x] as const;
+        const fn = (x: number): number => x * x;
+        const factory = atomFactory(map, fn);
+
+        const atom1 = factory(3);
+        const atom2 = factory(4);
+
+        expect(atom1.get()).toBe(9);
+        expect(atom2.get()).toBe(16);
+    });
+
+    it("should work with observables in the computation function", () => {
+        const observableValue = observable.box(10);
+        const map = (multiplier: number) => [multiplier] as const;
+        const fn = (multiplier: number): number => observableValue.get() * multiplier;
+        const factory = atomFactory(map, fn);
+
+        const atom = factory(2);
+        expect(atom.get()).toBe(20);
+
+        observableValue.set(15);
+        expect(atom.get()).toBe(30);
+    });
+
+    it("should recompute when multiple boxed observable values change", () => {
+        const box1 = observable.box(5);
+        const box2 = observable.box(10);
+        const box3 = observable.box(2);
+
+        const map = <T extends ComputedAtom<number> = ComputedAtom<number>>(a: T, b: T, c: T) =>
+            [a.get(), b.get(), c.get()] as const;
+        const fn = (a: number, b: number, c: number): number => (a + b) * c;
+        const factory = atomFactory(map, fn);
+
+        const atom = factory(box1, box2, box3);
+
+        // Initial computation: (5 + 10) * 2 = 30
+        expect(atom.get()).toBe(30);
+
+        // Change first box: (8 + 10) * 2 = 36
+        box1.set(8);
+        expect(atom.get()).toBe(36);
+
+        // Change second box: (8 + 15) * 2 = 46
+        box2.set(15);
+        expect(atom.get()).toBe(46);
+
+        // Change third box: (8 + 15) * 3 = 69
+        box3.set(3);
+        expect(atom.get()).toBe(69);
+
+        // Change multiple boxes: (20 + 5) * 4 = 100
+        box1.set(20);
+        box2.set(5);
+        box3.set(4);
+        expect(atom.get()).toBe(100);
+    });
+});
diff --git a/packages/shared/widget-plugin-mobx-kit/test/autoEffect.test.ts b/packages/shared/widget-plugin-mobx-kit/test/autoEffect.test.ts
@@ -1,5 +1,5 @@
 import { configure, observable } from "mobx";
-import { autoEffect } from "../src/autoEffect";
+import { autoEffect } from "../src/lib/autoEffect";
 
 describe("autoEffect", () => {
     configure({
diff --git a/packages/shared/widget-plugin-mobx-kit/test/createEmitter.test.ts b/packages/shared/widget-plugin-mobx-kit/test/createEmitter.test.ts
diff --git a/packages/shared/widget-plugin-mobx-kit/test/useSubscribe.test.ts b/packages/shared/widget-plugin-mobx-kit/test/useSubscribe.test.ts
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+export interface ComputedAtom<T> {`
	`2`	`+ get(): T;`
	`3`	`+}`