rask-ui 0.28.3 → 0.29.0

package/dist/tests/useView.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=useView.test.d.ts.map

package/dist/tests/useView.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useView.test.d.ts","sourceRoot":"","sources":["../../src/tests/useView.test.tsx"],"names":[],"mappings":""}

package/dist/tests/useView.test.js

@@ -0,0 +1,305 @@
+import { jsx as _jsx } from "rask-ui/jsx-runtime";
+import { describe, it, expect } from "vitest";
+import { useView } from "../useView";
+import { useState } from "../useState";
+import { Observer } from "../observation";
+import { render } from "../";
+describe("createView", () => {
+    it("should merge two plain objects", () => {
+        let view;
+        function Component() {
+            const a = { x: 1, y: 2 };
+            const b = { z: 3 };
+            view = useView(a, b);
+            return () => _jsx("div", { children: "test" });
+        }
+        const container = document.createElement("div");
+        render(_jsx(Component, {}), container);
+        expect(view.x).toBe(1);
+        expect(view.y).toBe(2);
+        expect(view.z).toBe(3);
+    });
+    it("should allow later arguments to override earlier ones", () => {
+        let view;
+        function Component() {
+            const a = { x: 1, y: 2 };
+            const b = { y: 3, z: 4 };
+            view = useView(a, b);
+            return () => _jsx("div", { children: "test" });
+        }
+        const container = document.createElement("div");
+        render(_jsx(Component, {}), container);
+        expect(view.x).toBe(1);
+        expect(view.y).toBe(3); // b.y overrides a.y
+        expect(view.z).toBe(4);
+    });
+    it("should maintain reactivity with reactive objects", async () => {
+        let view;
+        let state;
+        function Component() {
+            state = useState({ count: 0 });
+            view = useView(state);
+            return () => _jsx("div", { children: "test" });
+        }
+        const container = document.createElement("div");
+        render(_jsx(Component, {}), container);
+        let renderCount = 0;
+        let lastValue = 0;
+        const observer = new Observer(() => {
+            renderCount++;
+        });
+        const dispose = observer.observe();
+        lastValue = view.count; // Track the property
+        dispose();
+        expect(renderCount).toBe(0);
+        state.count = 5;
+        // Wait for microtask to process notification
+        await new Promise((resolve) => {
+            queueMicrotask(() => {
+                expect(renderCount).toBe(1);
+                lastValue = view.count;
+                expect(lastValue).toBe(5);
+                resolve(undefined);
+            });
+        });
+    });
+    it("should merge reactive and plain objects while maintaining reactivity", () => {
+        let view;
+        let state;
+        function Component() {
+            state = useState({ count: 0 });
+            const helpers = {
+                increment() {
+                    state.count++;
+                },
+                decrement() {
+                    state.count--;
+                },
+            };
+            view = useView(state, helpers);
+            return () => _jsx("div", { children: "test" });
+        }
+        const container = document.createElement("div");
+        render(_jsx(Component, {}), container);
+        expect(view.count).toBe(0);
+        expect(typeof view.increment).toBe("function");
+        expect(typeof view.decrement).toBe("function");
+        view.increment();
+        expect(view.count).toBe(1);
+        view.decrement();
+        expect(view.count).toBe(0);
+    });
+    it("should merge multiple reactive objects", () => {
+        let view;
+        let state1;
+        let state2;
+        let state3;
+        function Component() {
+            state1 = useState({ count: 0 });
+            state2 = useState({ name: "Alice" });
+            state3 = useState({ age: 25 });
+            view = useView(state1, state2, state3);
+            return () => _jsx("div", { children: "test" });
+        }
+        const container = document.createElement("div");
+        render(_jsx(Component, {}), container);
+        expect(view.count).toBe(0);
+        expect(view.name).toBe("Alice");
+        expect(view.age).toBe(25);
+        state1.count = 10;
+        state2.name = "Bob";
+        state3.age = 30;
+        expect(view.count).toBe(10);
+        expect(view.name).toBe("Bob");
+        expect(view.age).toBe(30);
+    });
+    it("should reflect changes in source objects", () => {
+        let view;
+        let source;
+        function Component() {
+            source = { x: 1 };
+            view = useView(source);
+            return () => _jsx("div", { children: "test" });
+        }
+        const container = document.createElement("div");
+        render(_jsx(Component, {}), container);
+        expect(view.x).toBe(1);
+        source.x = 2;
+        expect(view.x).toBe(2);
+    });
+    it("should handle property override order correctly", () => {
+        let view;
+        function Component() {
+            const a = { x: 1, y: 2, z: 3 };
+            const b = { y: 20 };
+            const c = { z: 30 };
+            view = useView(a, b, c);
+            return () => _jsx("div", { children: "test" });
+        }
+        const container = document.createElement("div");
+        render(_jsx(Component, {}), container);
+        expect(view.x).toBe(1); // From a
+        expect(view.y).toBe(20); // From b (overrides a)
+        expect(view.z).toBe(30); // From c (overrides a)
+    });
+    it("should only include enumerable properties", () => {
+        let view;
+        function Component() {
+            const obj = { x: 1 };
+            Object.defineProperty(obj, "hidden", {
+                value: 42,
+                enumerable: false,
+            });
+            view = useView(obj);
+            return () => _jsx("div", { children: "test" });
+        }
+        const container = document.createElement("div");
+        render(_jsx(Component, {}), container);
+        expect(view.x).toBe(1);
+        expect(view.hidden).toBeUndefined();
+    });
+    it("should handle symbol keys", () => {
+        let view;
+        let sym;
+        function Component() {
+            sym = Symbol("test");
+            const obj = { x: 1, [sym]: "symbol value" };
+            view = useView(obj);
+            return () => _jsx("div", { children: "test" });
+        }
+        const container = document.createElement("div");
+        render(_jsx(Component, {}), container);
+        expect(view.x).toBe(1);
+        expect(view[sym]).toBe("symbol value");
+    });
+    it("should track dependencies for each property independently", async () => {
+        let view;
+        let state;
+        function Component() {
+            state = useState({ count: 0, name: "Alice" });
+            view = useView(state);
+            return () => _jsx("div", { children: "test" });
+        }
+        const container = document.createElement("div");
+        render(_jsx(Component, {}), container);
+        let countRenderCount = 0;
+        let nameRenderCount = 0;
+        // Observer that only accesses count
+        const countObserver = new Observer(() => {
+            countRenderCount++;
+        });
+        const dispose1 = countObserver.observe();
+        view.count; // Track count
+        dispose1();
+        expect(countRenderCount).toBe(0);
+        // Change count - should trigger
+        state.count = 1;
+        await new Promise((resolve) => {
+            queueMicrotask(() => {
+                expect(countRenderCount).toBe(1);
+                resolve(undefined);
+            });
+        });
+        // Change name - should NOT trigger (not tracked)
+        state.name = "Bob";
+        await new Promise((resolve) => {
+            queueMicrotask(() => {
+                expect(countRenderCount).toBe(1); // Still 1
+                resolve(undefined);
+            });
+        });
+        // Now track name with a different observer
+        const nameObserver = new Observer(() => {
+            nameRenderCount++;
+        });
+        const dispose2 = nameObserver.observe();
+        view.name; // Track name
+        dispose2();
+        expect(nameRenderCount).toBe(0);
+        // Change name - should trigger name observer
+        state.name = "Charlie";
+        await new Promise((resolve) => {
+            queueMicrotask(() => {
+                expect(nameRenderCount).toBe(1);
+                resolve(undefined);
+            });
+        });
+    });
+    it("should return the same value type as source", () => {
+        let view;
+        function Component() {
+            const obj = { nums: [1, 2, 3], nested: { x: 1 } };
+            view = useView(obj);
+            return () => _jsx("div", { children: "test" });
+        }
+        const container = document.createElement("div");
+        render(_jsx(Component, {}), container);
+        expect(Array.isArray(view.nums)).toBe(true);
+        expect(view.nums).toEqual([1, 2, 3]);
+        expect(typeof view.nested).toBe("object");
+        expect(view.nested.x).toBe(1);
+    });
+    it("should handle empty merge", () => {
+        let view;
+        function Component() {
+            view = useView({});
+            return () => _jsx("div", { children: "test" });
+        }
+        const container = document.createElement("div");
+        render(_jsx(Component, {}), container);
+        expect(Object.keys(view).length).toBe(0);
+    });
+    it("should merge single object", () => {
+        let view;
+        function Component() {
+            const obj = { x: 1, y: 2 };
+            view = useView(obj);
+            return () => _jsx("div", { children: "test" });
+        }
+        const container = document.createElement("div");
+        render(_jsx(Component, {}), container);
+        expect(view.x).toBe(1);
+        expect(view.y).toBe(2);
+    });
+    it("should maintain function context", () => {
+        let view;
+        let state;
+        function Component() {
+            state = useState({ count: 0 });
+            const methods = {
+                increment() {
+                    state.count++;
+                },
+            };
+            view = useView(state, methods);
+            return () => _jsx("div", { children: "test" });
+        }
+        const container = document.createElement("div");
+        render(_jsx(Component, {}), container);
+        expect(view.count).toBe(0);
+        view.increment();
+        expect(view.count).toBe(1);
+        expect(state.count).toBe(1);
+    });
+    it("should work with reactive state and computed-like patterns", () => {
+        let view;
+        let state;
+        function Component() {
+            state = useState({ firstName: "John", lastName: "Doe" });
+            const computed = {
+                get fullName() {
+                    return `${state.firstName} ${state.lastName}`;
+                },
+            };
+            view = useView(state, computed);
+            return () => _jsx("div", { children: "test" });
+        }
+        const container = document.createElement("div");
+        render(_jsx(Component, {}), container);
+        expect(view.firstName).toBe("John");
+        expect(view.lastName).toBe("Doe");
+        expect(view.fullName).toBe("John Doe");
+        state.firstName = "Jane";
+        expect(view.fullName).toBe("Jane Doe");
+    });
+});

package/dist/useAsync.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useAsync.d.ts","sourceRoot":"","sources":["../src/useAsync.ts"],"names":[],"mappings":"AAKA,MAAM,MAAM,UAAU,CAAC,CAAC,IACpB;IACE,KAAK,EAAE,KAAK,CAAC;IACb,SAAS,EAAE,IAAI,CAAC;IAChB,YAAY,EAAE,KAAK,CAAC;IACpB,KAAK,EAAE,IAAI,CAAC;CACb,GACD;IACE,KAAK,EAAE,KAAK,CAAC;IACb,SAAS,EAAE,KAAK,CAAC;IACjB,YAAY,EAAE,IAAI,CAAC;IACnB,KAAK,EAAE,CAAC,CAAC;CACV,GACD;IACE,KAAK,EAAE,IAAI,CAAC;IACZ,SAAS,EAAE,IAAI,CAAC;IAChB,YAAY,EAAE,KAAK,CAAC;IACpB,KAAK,EAAE,IAAI,CAAC;CACb,GACD;IACE,KAAK,EAAE,IAAI,CAAC;IACZ,SAAS,EAAE,KAAK,CAAC;IACjB,YAAY,EAAE,IAAI,CAAC;IACnB,KAAK,EAAE,CAAC,CAAC;CACV,GACD;IACE,KAAK,EAAE,IAAI,CAAC;IACZ,SAAS,EAAE,KAAK,CAAC;IACjB,YAAY,EAAE,KAAK,CAAC;IACpB,KAAK,EAAE,CAAC,CAAC;CACV,CAAC;AAEN,MAAM,MAAM,KAAK,CAAC,CAAC,SAAS,WAAW,CAAC,GAAG,CAAC,IAAI;IAC9C,UAAU,CAAC,CAAC,CAAC;IACb,MAAM,OAAO,CAAC,IAAI,CAAC;CACpB,CAAC;AAEF,wBAAgB,OAAO,CAAC,KAAK,EAAE,OAAO,WAWrC;AAED,wBAAgB,QAAQ,CAAC,CAAC,SAAS,WAAW,CAAC,GAAG,CAAC,EACjD,EAAE,EAAE,CAAC,MAAM,CAAC,EAAE,WAAW,KAAK,OAAO,CAAC,CAAC,CAAC,GA0InC,KAAK,CAAC,CAAC,CAAC,CACd"}
+{"version":3,"file":"useAsync.d.ts","sourceRoot":"","sources":["../src/useAsync.ts"],"names":[],"mappings":"AAKA,MAAM,MAAM,UAAU,CAAC,CAAC,IACpB;IACE,KAAK,EAAE,KAAK,CAAC;IACb,SAAS,EAAE,IAAI,CAAC;IAChB,YAAY,EAAE,KAAK,CAAC;IACpB,KAAK,EAAE,IAAI,CAAC;CACb,GACD;IACE,KAAK,EAAE,KAAK,CAAC;IACb,SAAS,EAAE,KAAK,CAAC;IACjB,YAAY,EAAE,IAAI,CAAC;IACnB,KAAK,EAAE,CAAC,CAAC;CACV,GACD;IACE,KAAK,EAAE,IAAI,CAAC;IACZ,SAAS,EAAE,IAAI,CAAC;IAChB,YAAY,EAAE,KAAK,CAAC;IACpB,KAAK,EAAE,IAAI,CAAC;CACb,GACD;IACE,KAAK,EAAE,IAAI,CAAC;IACZ,SAAS,EAAE,KAAK,CAAC;IACjB,YAAY,EAAE,IAAI,CAAC;IACnB,KAAK,EAAE,CAAC,CAAC;CACV,GACD;IACE,KAAK,EAAE,IAAI,CAAC;IACZ,SAAS,EAAE,KAAK,CAAC;IACjB,YAAY,EAAE,KAAK,CAAC;IACpB,KAAK,EAAE,CAAC,CAAC;CACV,CAAC;AAEN,MAAM,MAAM,KAAK,CAAC,CAAC,SAAS,WAAW,CAAC,GAAG,CAAC,IAAI;IAC9C,UAAU,CAAC,CAAC,CAAC;IACb,MAAM,OAAO,CAAC,IAAI,CAAC;CACpB,CAAC;AAEF,wBAAgB,OAAO,CAAC,KAAK,EAAE,OAAO,WAWrC;AAED,wBAAgB,QAAQ,CAAC,CAAC,SAAS,WAAW,CAAC,GAAG,CAAC,EACjD,EAAE,EAAE,CAAC,MAAM,CAAC,EAAE,WAAW,KAAK,OAAO,CAAC,CAAC,CAAC,GA4InC,KAAK,CAAC,CAAC,CAAC,CACd"}

package/dist/useAsync.js

@@ -1,7 +1,7 @@
-import { syncBatch } from "./batch";
 import { useCleanup, getCurrentComponent } from "./component";
-import { Observer } from "./observation";
+import { transaction } from "./scheduler";
 import { assignState, useState } from "./useState";
+import { Reaction } from "mobx";
 export function isAsync(value) {
     if (value === null || typeof value !== "object") {
         return false;
@@ -27,15 +27,16 @@ export function useAsync(fn) {
     const refresh = () => {
         currentAbortController?.abort();
         const abortController = (currentAbortController = new AbortController());
-        const stopObserving = observer.observe();
-        const promise = fn(abortController.signal);
-        stopObserving();
+        let promise;
+        reaction.track(() => {
+            promise = fn(abortController.signal);
+        });
         promise
             .then((result) => {
             if (abortController.signal.aborted) {
                 return;
             }
-            syncBatch(() => {
+            transaction(() => {
                 assignState(state, {
                     isLoading: false,
                     isRefreshing: false,
@@ -50,7 +51,7 @@ export function useAsync(fn) {
             if (abortController.signal.aborted) {
                 return;
             }
-            syncBatch(() => {
+            transaction(() => {
                 assignState(state, {
                     isLoading: state.isLoading,
                     isRefreshing: state.isRefreshing,
@@ -63,8 +64,8 @@ export function useAsync(fn) {
         });
         return promise;
     };
-    const observer = new Observer(() => {
-        syncBatch(() => {
+    const reaction = new Reaction("AsyncReaction", () => {
+        transaction(() => {
             if (state.isLoading) {
                 refresh();
             }
@@ -90,7 +91,7 @@ export function useAsync(fn) {
     });
     useCleanup(() => {
         currentAbortController?.abort();
-        observer.dispose();
+        reaction.dispose();
     });
     refresh();
     return [
@@ -99,7 +100,7 @@ export function useAsync(fn) {
             if (state.isLoading && !state.error) {
                 return;
             }
-            syncBatch(() => {
+            transaction(() => {
                 if (state.error && state.value === null) {
                     assignState(state, {
                         isLoading: true,

package/dist/useDerived.d.ts

@@ -1,5 +1,5 @@
 export type Derived<T extends Record<string, () => any>> = {
     [K in keyof T]: ReturnType<T[K]>;
 };
-export declare function useDerived<T extends Record<string, () => any>>(computed: T): Derived<T>;
+export declare function useDerived<T extends Record<string, () => any>>(computedDefs: T): Derived<T>;
 //# sourceMappingURL=useDerived.d.ts.map

package/dist/useDerived.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useDerived.d.ts","sourceRoot":"","sources":["../src/useDerived.ts"],"names":[],"mappings":"AAKA,MAAM,MAAM,OAAO,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,CAAC,IAAI;KACxD,CAAC,IAAI,MAAM,CAAC,GAAG,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;CACjC,CAAC;AAEF,wBAAgB,UAAU,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,CAAC,EAC5D,QAAQ,EAAE,CAAC,GACV,OAAO,CAAC,CAAC,CAAC,CAiFZ"}
+{"version":3,"file":"useDerived.d.ts","sourceRoot":"","sources":["../src/useDerived.ts"],"names":[],"mappings":"AAGA,MAAM,MAAM,OAAO,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,CAAC,IAAI;KACxD,CAAC,IAAI,MAAM,CAAC,GAAG,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;CACjC,CAAC;AAEF,wBAAgB,UAAU,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,CAAC,EAC5D,YAAY,EAAE,CAAC,GACd,OAAO,CAAC,CAAC,CAAC,CAmBZ"}

package/dist/useDerived.js

@@ -1,72 +1,18 @@
-import { getCurrentComponent, useCleanup } from "./component";
-import { INSPECT_MARKER, INSPECTOR_ENABLED } from "./inspect";
-import { getCurrentObserver, Observer, Signal } from "./observation";
-export function useDerived(computed) {
+import { getCurrentComponent } from "./component";
+import { computed } from "mobx";
+export function useDerived(computedDefs) {
     const currentComponent = getCurrentComponent();
     if (!currentComponent || currentComponent.isRendering) {
         throw new Error("Only use useDerived in component setup");
     }
-    const proxy = {};
-    let notifyInspectorRef = {};
-    for (const prop in computed) {
-        let isDirty = true;
-        let value;
-        const signal = new Signal();
-        const computedObserver = new Observer(() => {
-            isDirty = true;
-            signal.notify();
-            if (INSPECTOR_ENABLED) {
-                notifyInspectorRef.current?.notify({
-                    type: "computed",
-                    path: notifyInspectorRef.current.path.concat(prop),
-                    isDirty: true,
-                    value,
-                });
-            }
-        }, false);
-        useCleanup(() => computedObserver.dispose());
-        Object.defineProperty(proxy, prop, {
-            enumerable: true,
-            configurable: true,
+    const derived = {};
+    for (const key in computedDefs) {
+        const computedValue = computed(computedDefs[key]);
+        Object.defineProperty(derived, key, {
             get() {
-                const currentObserver = getCurrentObserver();
-                if (currentObserver) {
-                    currentObserver.subscribeSignal(signal);
-                }
-                if (isDirty) {
-                    const stopObserving = computedObserver.observe();
-                    value = computed[prop]();
-                    stopObserving();
-                    isDirty = false;
-                    if (INSPECTOR_ENABLED) {
-                        notifyInspectorRef.current?.notify({
-                            type: "computed",
-                            path: notifyInspectorRef.current.path.concat(prop),
-                            isDirty: false,
-                            value,
-                        });
-                    }
-                    return value;
-                }
-                return value;
+                return computedValue.get();
             },
         });
     }
-    if (INSPECTOR_ENABLED) {
-        Object.defineProperty(proxy, INSPECT_MARKER, {
-            enumerable: false,
-            configurable: false,
-            get() {
-                return !notifyInspectorRef.current;
-            },
-            set: (value) => {
-                Object.defineProperty(notifyInspectorRef, "current", {
-                    get() {
-                        return value.current;
-                    },
-                });
-            },
-        });
-    }
-    return proxy;
+    return derived;
 }

package/dist/useEffect.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useEffect.d.ts","sourceRoot":"","sources":["../src/useEffect.ts"],"names":[],"mappings":"AAIA,wBAAgB,SAAS,CAAC,EAAE,EAAE,MAAM,IAAI,GAAG,CAAC,MAAM,IAAI,CAAC,QA2BtD"}
+{"version":3,"file":"useEffect.d.ts","sourceRoot":"","sources":["../src/useEffect.ts"],"names":[],"mappings":"AAGA,wBAAgB,SAAS,CAAC,EAAE,EAAE,MAAM,IAAI,GAAG,CAAC,MAAM,IAAI,CAAC,QActD"}

package/dist/useEffect.js

@@ -1,29 +1,14 @@
-import { syncBatch } from "./batch";
 import { useCleanup, getCurrentComponent } from "./component";
-import { Observer } from "./observation";
+import { autorun } from "./scheduler";
 export function useEffect(cb) {
     const component = getCurrentComponent();
     if (!component || component.isRendering) {
         throw new Error("Only use useEffect in component setup");
     }
     let disposer;
-    const observer = new Observer(() => {
-        syncBatch(runEffect);
-    });
-    const runEffect = () => {
-        try {
-            disposer?.();
-        }
-        catch (error) {
-            console.error("Error in effect dispose function:", error);
-        }
-        const stopObserving = observer.observe();
-        disposer = cb();
-        stopObserving();
-    };
-    useCleanup(() => {
-        observer.dispose();
+    const autorunDisposer = autorun(() => {
         disposer?.();
+        disposer = cb();
     });
-    runEffect();
+    useCleanup(autorunDisposer);
 }

package/dist/useLookup.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useLookup.d.ts","sourceRoot":"","sources":["../src/useLookup.ts"],"names":[],"mappings":"AAIA,wBAAgB,SAAS,CAAC,CAAC,SAAS,MAAM,EAAE,CAAC,SAAS,MAAM,CAAC,EAC3D,QAAQ,EAAE,MAAM,CAAC,EAAE,EACnB,GAAG,EAAE,CAAC,IAsBE,KAAK,CAAC,CAAC,CAAC,CAAC,KAAG,CAAC,GAAG,SAAS,CAGlC"}
+{"version":3,"file":"useLookup.d.ts","sourceRoot":"","sources":["../src/useLookup.ts"],"names":[],"mappings":"AAIA,wBAAgB,SAAS,CAAC,CAAC,SAAS,MAAM,EAAE,CAAC,SAAS,MAAM,CAAC,EAC3D,QAAQ,EAAE,MAAM,CAAC,EAAE,EACnB,GAAG,EAAE,CAAC,IAeE,KAAK,CAAC,CAAC,CAAC,CAAC,KAAG,CAAC,GAAG,SAAS,CAGlC"}

package/dist/useLookup.js

@@ -1,22 +1,17 @@
 import { useCleanup } from "./component";
-import { Observer } from "./observation";
+import { autorun } from "./scheduler";
 import { useState } from "./useState";
 export function useLookup(getArray, key) {
-    const state = useState({
-        lookup: {},
-    });
+    const state = useState(new Map());
     function updateMap() {
-        const disposeObserve = observer.observe();
-        state.lookup = getArray().reduce((aggr, item) => {
-            aggr[item[key]] = item;
-            return aggr;
-        }, {});
-        disposeObserve();
+        state.clear();
+        getArray().forEach((item) => {
+            state.set(item[key], item);
+        });
     }
-    const observer = new Observer(updateMap, false);
-    updateMap();
-    useCleanup(() => observer.dispose());
+    const dispose = autorun(updateMap);
+    useCleanup(dispose);
     return (key) => {
-        return state.lookup[key];
+        return state.get(key);
     };
 }

package/dist/useRef.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useRef.d.ts","sourceRoot":"","sources":["../src/useRef.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAIpC,MAAM,MAAM,GAAG,CAAC,CAAC,IAAI,SAAS,CAAC,CAAC,CAAC,CAAC;AAElC,wBAAgB,SAAS,CAAC,CAAC,EAAE,GAAG,EAAE,SAAS,CAAC,CAAC,CAAC,EAAE,QAAQ,EAAE,CAAC,QAE1D;AAED,wBAAgB,MAAM,CAAC,CAAC,KAAK,SAAS,CAAC,CAAC,CAAC,CAoBxC"}
+{"version":3,"file":"useRef.d.ts","sourceRoot":"","sources":["../src/useRef.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAIpC,MAAM,MAAM,GAAG,CAAC,CAAC,IAAI,SAAS,CAAC,CAAC,CAAC,CAAC;AAElC,wBAAgB,SAAS,CAAC,CAAC,EAAE,GAAG,EAAE,SAAS,CAAC,CAAC,CAAC,EAAE,QAAQ,EAAE,CAAC,QAE1D;AAED,wBAAgB,MAAM,CAAC,CAAC,KAAK,SAAS,CAAC,CAAC,CAAC,CAiBxC"}

package/dist/useRef.js

@@ -1,24 +1,20 @@
-import { getCurrentObserver, Signal } from "./observation";
 import { getCurrentComponent } from "./component";
+import { observable } from "mobx";
 export function assignRef(ref, refValue) {
     ref.current = refValue;
 }
 export function useRef() {
-    let value = null;
     const currentComponent = getCurrentComponent();
     if (!currentComponent || currentComponent.isRendering) {
         throw new Error("Only use useRef in component setup");
     }
-    const signal = new Signal();
+    const observableValue = observable.box(null);
     return {
         get current() {
-            const currentObserver = getCurrentObserver();
-            currentObserver?.subscribeSignal(signal);
-            return value;
+            return observableValue.get();
         },
         set current(newValue) {
-            signal.notify();
-            value = newValue;
+            observableValue.set(newValue);
         },
     };
 }

package/dist/useRouter.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useRouter.d.ts","sourceRoot":"","sources":["../src/useRouter.ts"],"names":[],"mappings":"AAAA,OAAO,EAEL,YAAY,EACZ,OAAO,EACP,OAAO,EACR,MAAM,qBAAqB,CAAC;AAI7B,MAAM,MAAM,MAAM,CAAC,CAAC,SAAS,YAAY,IAAI,IAAI,CAC/C,OAAO,CAAC,CAAC,CAAC,EACV,SAAS,GAAG,QAAQ,GAAG,UAAU,CAClC,GAAG;IACF,KAAK,CAAC,EAAE,OAAO,CAAC,CAAC,CAAC,CAAC;CACpB,CAAC;AAEF,wBAAgB,SAAS,CAAC,KAAK,CAAC,CAAC,SAAS,YAAY,EACpD,MAAM,EAAE,CAAC,EACT,OAAO,CAAC,EAAE;IACR,IAAI,CAAC,EAAE,MAAM,CAAC;CACf,GACA,MAAM,CAAC,CAAC,CAAC,CA4BX"}
+{"version":3,"file":"useRouter.d.ts","sourceRoot":"","sources":["../src/useRouter.ts"],"names":[],"mappings":"AAAA,OAAO,EAEL,YAAY,EACZ,OAAO,EACP,OAAO,EACR,MAAM,qBAAqB,CAAC;AAI7B,MAAM,MAAM,MAAM,CAAC,CAAC,SAAS,YAAY,IAAI,IAAI,CAC/C,OAAO,CAAC,CAAC,CAAC,EACV,SAAS,GAAG,QAAQ,GAAG,UAAU,CAClC,GAAG;IACF,KAAK,CAAC,EAAE,OAAO,CAAC,CAAC,CAAC,CAAC;CACpB,CAAC;AAEF,wBAAgB,SAAS,CAAC,KAAK,CAAC,CAAC,SAAS,YAAY,EACpD,MAAM,EAAE,CAAC,EACT,OAAO,CAAC,EAAE;IACR,IAAI,CAAC,EAAE,MAAM,CAAC;CACf,GACA,MAAM,CAAC,CAAC,CAAC,CAsBX"}

package/dist/useRouter.js

@@ -1,20 +1,16 @@
 import { createRouter as internalCreateRouter, } from "typed-client-router";
-import { getCurrentObserver, Signal } from "./observation";
 import { useCleanup, getCurrentComponent } from "./component";
+import { observable } from "mobx";
 export function useRouter(config, options) {
     if (!getCurrentComponent()) {
         throw new Error("Only use useRouter in component setup");
     }
     const router = internalCreateRouter(config, options);
-    const signal = new Signal();
-    useCleanup(router.listen(() => signal.notify()));
+    const route = observable.box(router.current);
+    useCleanup(router.listen((newRoute) => route.set(newRoute)));
     return {
         get route() {
-            const observer = getCurrentObserver();
-            if (observer) {
-                observer.subscribeSignal(signal);
-            }
-            return router.current;
+            return route.get();
         },
         get queries() {
             return router.queries;

package/dist/useState.d.ts

@@ -24,5 +24,4 @@ export declare function assignState<T extends object>(state: T, newState: T): T;
  * @returns A reactive proxy of the state object
  */
 export declare function useState<T extends object>(state: T): T;
-export declare const PROXY_MARKER: unique symbol;
 //# sourceMappingURL=useState.d.ts.map

package/dist/useState.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useState.d.ts","sourceRoot":"","sources":["../src/useState.ts"],"names":[],"mappings":"AAIA,wBAAgB,WAAW,CAAC,CAAC,SAAS,MAAM,EAAE,KAAK,EAAE,CAAC,EAAE,QAAQ,EAAE,CAAC,KAElE;AAED;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,wBAAgB,QAAQ,CAAC,CAAC,SAAS,MAAM,EAAE,KAAK,EAAE,CAAC,GAAG,CAAC,CAOtD;AAGD,eAAO,MAAM,YAAY,eAAoB,CAAC"}
+{"version":3,"file":"useState.d.ts","sourceRoot":"","sources":["../src/useState.ts"],"names":[],"mappings":"AAEA,wBAAgB,WAAW,CAAC,CAAC,SAAS,MAAM,EAAE,KAAK,EAAE,CAAC,EAAE,QAAQ,EAAE,CAAC,KAElE;AAED;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,wBAAgB,QAAQ,CAAC,CAAC,SAAS,MAAM,EAAE,KAAK,EAAE,CAAC,GAAG,CAAC,CAEtD"}