atomirx 0.0.2 → 0.0.4

package/src/index.ts

@@ -1,16 +1,16 @@
 // Core
-export { atom } from "./core/atom";
+export { atom, readonly } from "./core/atom";
 export { batch } from "./core/batch";
 export { define } from "./core/define";
-export { derived } from "./core/derived";
-export { effect } from "./core/effect";
+export { derived, type DerivedContext } from "./core/derived";
+export { effect, type EffectContext } from "./core/effect";
 export { emitter } from "./core/emitter";
 export { isAtom, isDerived } from "./core/isAtom";
 export { select, AllAtomsRejectedError } from "./core/select";
 
 // Promise utilities
+export { getAtomState } from "./core/getAtomState";
 export {
-  getAtomState,
   isPending,
   isFulfilled,
   isRejected,
@@ -33,9 +33,11 @@ export type {
   Equality,
   EqualityShorthand,
   Getter,
+  KeyedResult,
   MutableAtom,
   MutableAtomMeta,
   Pipeable,
+  SelectStateResult,
   SettledResult,
 } from "./core/types";
 
@@ -45,7 +47,10 @@ export type { AtomCreateInfo, ModuleCreateInfo } from "./core/onCreateHook";
 export type {
   SelectContext,
   SelectResult,
-  ContextSelectorFn,
+  ReactiveSelector as ContextSelectorFn,
+  SafeResult,
 } from "./core/select";
 
-export type { PromiseState } from "./core/promiseCache";
+export type { PromiseState, CombinedPromiseMeta } from "./core/promiseCache";
+
+export { promisesEqual } from "./core/promiseCache";

package/src/react/index.ts

@@ -1,8 +1,9 @@
-export { useValue } from "./useValue";
+export { useSelector } from "./useSelector";
 export { useStable } from "./useStable";
 export type { UseStableResult } from "./useStable";
 export { useAction } from "./useAction";
 export { rx } from "./rx";
+export type { RxOptions } from "./rx";
 
 export type {
   ActionState,

package/src/react/rx.test.tsx

@@ -24,7 +24,9 @@ describe.each(wrappers)("rx - $mode", ({ render }) => {
     it("should render derived value with context selector", () => {
       const count = atom(5);
 
-      render(<div data-testid="result">{rx(({ get }) => get(count) * 2)}</div>);
+      render(
+        <div data-testid="result">{rx(({ read }) => read(count) * 2)}</div>
+      );
 
       expect(screen.getByTestId("result").textContent).toBe("10");
     });
@@ -61,7 +63,7 @@ describe.each(wrappers)("rx - $mode", ({ render }) => {
 
       render(
         <div data-testid="result">
-          {rx(({ get }) => `${get(firstName)} ${get(lastName)}`)}
+          {rx(({ read }) => `${read(firstName)} ${read(lastName)}`)}
         </div>
       );
 
@@ -75,7 +77,7 @@ describe.each(wrappers)("rx - $mode", ({ render }) => {
 
       render(
         <div data-testid="result">
-          {rx(({ get }) => get(a) + get(b) + get(c))}
+          {rx(({ read }) => read(a) + read(b) + read(c))}
         </div>
       );
 
@@ -101,7 +103,9 @@ describe.each(wrappers)("rx - $mode", ({ render }) => {
     it("should update when source atom changes (context selector)", () => {
       const count = atom(5);
 
-      render(<div data-testid="result">{rx(({ get }) => get(count) * 2)}</div>);
+      render(
+        <div data-testid="result">{rx(({ read }) => read(count) * 2)}</div>
+      );
 
       expect(screen.getByTestId("result").textContent).toBe("10");
 
@@ -117,7 +121,7 @@ describe.each(wrappers)("rx - $mode", ({ render }) => {
       const b = atom(2);
 
       render(
-        <div data-testid="result">{rx(({ get }) => get(a) + get(b))}</div>
+        <div data-testid="result">{rx(({ read }) => read(a) + read(b))}</div>
       );
 
       expect(screen.getByTestId("result").textContent).toBe("3");
@@ -142,8 +146,8 @@ describe.each(wrappers)("rx - $mode", ({ render }) => {
       const a = atom(1);
       const b = atom(2);
 
-      const selectorFn = vi.fn(({ get }: SelectContext) =>
-        get(flag) ? get(a) : get(b)
+      const selectorFn = vi.fn(({ read }: SelectContext) =>
+        read(flag) ? read(a) : read(b)
       );
 
       render(<div data-testid="result">{rx(selectorFn)}</div>);
@@ -168,7 +172,7 @@ describe.each(wrappers)("rx - $mode", ({ render }) => {
 
       render(
         <div data-testid="result">
-          {rx(({ get }) => (get(flag) ? get(a) : get(b)))}
+          {rx(({ read }) => (read(flag) ? read(a) : read(b)))}
         </div>
       );
 
@@ -199,7 +203,7 @@ describe.each(wrappers)("rx - $mode", ({ render }) => {
         renderCount.current++;
         return (
           <div data-testid="result">
-            {rx(({ get }) => JSON.stringify(get(user)))}
+            {rx(({ read }) => JSON.stringify(read(user)))}
           </div>
         );
       };
@@ -223,9 +227,9 @@ describe.each(wrappers)("rx - $mode", ({ render }) => {
       const user = atom({ name: "John", age: 30 });
       const selectorCallCount = { current: 0 };
 
-      const selector = ({ get }: SelectContext) => {
+      const selector = ({ read }: SelectContext) => {
         selectorCallCount.current++;
-        return JSON.stringify(get(user));
+        return JSON.stringify(read(user));
       };
 
       render(<div data-testid="result">{rx(selector, "strict")}</div>);
@@ -254,7 +258,7 @@ describe.each(wrappers)("rx - $mode", ({ render }) => {
         return (
           <div data-testid="result">
             {rx(
-              ({ get }) => JSON.stringify(get(user)),
+              ({ read }) => JSON.stringify(read(user)),
               (a, b) => a === b // Compare stringified values
             )}
           </div>
@@ -285,7 +289,7 @@ describe.each(wrappers)("rx - $mode", ({ render }) => {
       const Parent = () => {
         parentRenderCount.current++;
         return (
-          <div data-testid="result">{rx(({ get }) => get(count) * 2)}</div>
+          <div data-testid="result">{rx(({ read }) => read(count) * 2)}</div>
         );
       };
 
@@ -317,7 +321,7 @@ describe.each(wrappers)("rx - $mode", ({ render }) => {
       const flag = atom(false);
 
       render(
-        <div data-testid="result">{rx(({ get }) => String(get(flag)))}</div>
+        <div data-testid="result">{rx(({ read }) => String(read(flag)))}</div>
       );
 
       expect(screen.getByTestId("result").textContent).toBe("false");
@@ -352,9 +356,9 @@ describe.each(wrappers)("rx - $mode", ({ render }) => {
 
       render(
         <div data-testid="result">
-          {rx(({ get }) => {
+          {rx(({ read }) => {
             try {
-              return get(asyncAtom) * 2;
+              return read(asyncAtom) * 2;
             } catch {
               return "loading";
             }
@@ -372,7 +376,7 @@ describe.each(wrappers)("rx - $mode", ({ render }) => {
       const sourceAtom = atom(5);
 
       render(
-        <div data-testid="result">{rx(({ get }) => get(sourceAtom) * 2)}</div>
+        <div data-testid="result">{rx(({ read }) => read(sourceAtom) * 2)}</div>
       );
 
       expect(screen.getByTestId("result").textContent).toBe("10");
@@ -396,7 +400,7 @@ describe.each(wrappers)("rx - $mode", ({ render }) => {
       render(
         <div data-testid="result">
           {rx(({ all }) => {
-            const [valA, valB] = all(a, b);
+            const [valA, valB] = all([a, b]);
             return valA + valB;
           })}
         </div>
@@ -413,4 +417,155 @@ describe.each(wrappers)("rx - $mode", ({ render }) => {
       expect(screen.getByTestId("result").textContent).toBe("12");
     });
   });
+
+  describe("loading/error options", () => {
+    it("should render loading fallback when atom is pending", () => {
+      const asyncAtom = atom(new Promise<string>(() => {}));
+
+      render(
+        <div data-testid="result">
+          {rx(asyncAtom, { loading: () => <span>Loading...</span> })}
+        </div>
+      );
+
+      expect(screen.getByTestId("result").textContent).toBe("Loading...");
+    });
+
+    it("should render error fallback when atom has error", async () => {
+      const error = new Error("Test error");
+      const rejectedPromise = Promise.reject(error);
+      rejectedPromise.catch(() => {}); // Prevent unhandled rejection
+      const asyncAtom = atom(rejectedPromise);
+
+      // Wait for promise to be tracked
+      await act(async () => {
+        await Promise.resolve();
+        await Promise.resolve();
+      });
+
+      render(
+        <div data-testid="result">
+          {rx(asyncAtom, {
+            error: ({ error: e }) => <span>Error: {(e as Error).message}</span>,
+          })}
+        </div>
+      );
+
+      expect(screen.getByTestId("result").textContent).toBe(
+        "Error: Test error"
+      );
+    });
+
+    it("should render value when atom resolves with loading option", async () => {
+      let resolve: (value: string) => void;
+      const promise = new Promise<string>((r) => {
+        resolve = r;
+      });
+      const asyncAtom = atom(promise);
+
+      const { rerender } = render(
+        <div data-testid="result">
+          {rx(asyncAtom, {
+            loading: () => <span>Loading...</span>,
+          })}
+        </div>
+      );
+
+      expect(screen.getByTestId("result").textContent).toBe("Loading...");
+
+      await act(async () => {
+        resolve!("Hello");
+        await Promise.resolve();
+        await Promise.resolve();
+      });
+
+      rerender(
+        <div data-testid="result">
+          {rx(asyncAtom, {
+            loading: () => <span>Loading...</span>,
+          })}
+        </div>
+      );
+
+      expect(screen.getByTestId("result").textContent).toBe("Hello");
+    });
+
+    it("should work with selector function and loading option", () => {
+      const asyncAtom = atom(new Promise<number>(() => {}));
+
+      render(
+        <div data-testid="result">
+          {rx(({ read }) => read(asyncAtom) * 2, {
+            loading: () => <span>Computing...</span>,
+          })}
+        </div>
+      );
+
+      expect(screen.getByTestId("result").textContent).toBe("Computing...");
+    });
+
+    it("should support both loading and error options", async () => {
+      const error = new Error("Failed");
+      const rejectedPromise = Promise.reject(error);
+      rejectedPromise.catch(() => {});
+      const asyncAtom = atom(rejectedPromise);
+
+      await act(async () => {
+        await Promise.resolve();
+        await Promise.resolve();
+      });
+
+      render(
+        <div data-testid="result">
+          {rx(asyncAtom, {
+            loading: () => <span>Loading...</span>,
+            error: ({ error: e }) => (
+              <span>Failed: {(e as Error).message}</span>
+            ),
+          })}
+        </div>
+      );
+
+      expect(screen.getByTestId("result").textContent).toBe("Failed: Failed");
+    });
+
+    it("should pass equality in options object", () => {
+      const user = atom({ id: 1, name: "John" });
+      const renderSpy = vi.fn();
+
+      function TestComponent() {
+        renderSpy();
+        return (
+          <div data-testid="result">
+            {rx(({ read }) => read(user).name, {
+              equals: (a, b) => a === b,
+            })}
+          </div>
+        );
+      }
+
+      render(<TestComponent />);
+      expect(screen.getByTestId("result").textContent).toBe("John");
+
+      // Update with same name
+      act(() => {
+        user.set({ id: 2, name: "John" });
+      });
+
+      // Name didn't change, so rx content should be same
+      expect(screen.getByTestId("result").textContent).toBe("John");
+    });
+
+    it("should still work with legacy equality parameter", () => {
+      const count = atom(5);
+
+      render(
+        <div data-testid="result">
+          {rx(({ read }) => read(count) * 2, "strict")}
+        </div>
+      );
+
+      expect(screen.getByTestId("result").textContent).toBe("10");
+    });
+  });
 });