@pixotope/react-context-store 0.0.1

package/src/store.test.tsx

@@ -0,0 +1,238 @@
+import {
+  act,
+  renderHook,
+  RenderHookOptions,
+  RenderHookResult,
+} from "@testing-library/react";
+import React from "react";
+import { vi, describe, test, beforeEach, it, expect } from "vitest";
+
+import { createContextStore } from "./store";
+
+const initialState = {
+  count: 0,
+  user: {
+    name: "John",
+    age: 20,
+  },
+  hobbies: ["football", "basketball"],
+};
+
+type HookFunction<T> = () => T;
+
+function createDefaultStore() {
+  return createContextStore(initialState);
+}
+
+type ContextRes = ReturnType<typeof createDefaultStore>;
+
+const renderHookWithProvider = <T,>(
+  hook: HookFunction<T>,
+  Provider: ContextRes["Provider"],
+  options?: RenderHookOptions<T>
+): RenderHookResult<T, T> => {
+  const wrapper = ({ children }: { children: React.ReactNode }) => (
+    <Provider>{children}</Provider>
+  );
+
+  return renderHook(hook, { ...options, wrapper });
+};
+
+describe("createContextStore", () => {
+  let store: ReturnType<typeof createDefaultStore>;
+
+  beforeEach(() => {
+    store = createContextStore(initialState);
+  });
+
+  it.concurrent("should return the initial state", async () => {
+    const { result } = renderHookWithProvider(
+      () => store.useStore(),
+      store.Provider
+    );
+
+    expect(result.current.get()).toEqual(initialState);
+  });
+  it.concurrent("should return the updated state", async () => {
+    const { result } = renderHookWithProvider(
+      () => store.useStore(),
+      store.Provider
+    );
+    act(() => {
+      result.current.set((prev) => ({ ...prev, count: 1 }));
+    });
+
+    expect(result.current.get().count).toEqual(1);
+  });
+  it.concurrent(
+    "should return the reference to the same object if not changed",
+    () => {
+      const { result } = renderHookWithProvider(
+        () => store.useStore(),
+        store.Provider
+      );
+      const prevUser = result.current.get().user;
+      act(() => {
+        result.current.set((prev) => ({ ...prev, count: 1 }));
+      });
+      const userAfterCountChange = result.current.get().user;
+
+      expect(prevUser).toBe(userAfterCountChange);
+
+      act(() => {
+        result.current.set((prev) => ({
+          ...prev,
+          hobbies: ["gardening"],
+        }));
+      });
+
+      expect(prevUser).toBe(userAfterCountChange);
+    }
+  );
+  it.concurrent("should call compare function passed to useStore", () => {
+    const compare = vi.fn(() => true);
+    const { result } = renderHookWithProvider(
+      () => store.useStore((store) => store, compare),
+      store.Provider
+    );
+    act(() => {
+      result.current.set((prev) => ({
+        ...prev,
+        user: {
+          name: "Micheal",
+          age: 30,
+        },
+      }));
+    });
+
+    expect(compare).toBeCalled();
+  });
+  it.concurrent("should cause re-render if compare returns false", () => {
+    const compare = vi.fn(() => false);
+    const { result } = renderHookWithProvider(
+      () => store.useStore((store) => store, compare),
+      store.Provider
+    );
+    act(() => {
+      result.current.set((prev) => ({
+        ...prev,
+        user: {
+          name: "Micheal",
+          age: 30,
+        },
+      }));
+    });
+
+    expect(compare).toBeCalled();
+    expect(result.current.get().user.name).toEqual("Micheal");
+  });
+  it.concurrent("should not cause re-render if compare returns true", () => {
+    const compare = vi.fn(() => true);
+    const { result } = renderHookWithProvider(
+      () => store.useStore((store) => store, compare),
+      store.Provider
+    );
+    const prevUser = result.current.get().user;
+    act(() => {
+      result.current.set((prev) => ({
+        ...prev,
+        user: {
+          name: "Micheal",
+          age: 30,
+        },
+      }));
+    });
+
+    expect(result.current.get().user).toEqual(prevUser);
+  });
+  test.concurrent("selector is called with the current state", () => {
+    const selector = vi.fn((state) => state.user);
+    renderHookWithProvider(() => store.useStore(selector), store.Provider);
+    expect(selector).toBeCalledWith(initialState);
+  });
+  test.concurrent(
+    "selector is called with the current state after update",
+    () => {
+      const selector = vi.fn((state) => state.user);
+      const { result } = renderHookWithProvider(
+        () => store.useStore(selector),
+        store.Provider
+      );
+      act(() => {
+        result.current.set((prev) => ({
+          ...prev,
+          user: {
+            name: "Micheal",
+            age: 30,
+          },
+        }));
+      });
+      expect(selector).toBeCalledWith({
+        ...initialState,
+        user: {
+          name: "Micheal",
+          age: 30,
+        },
+      });
+    }
+  );
+  test.concurrent("selector passed to userStore returns correct value", () => {
+    const selector = vi.fn((state: typeof initialState) => state.user);
+    const { result } = renderHookWithProvider(
+      () => store.useStore(selector),
+      store.Provider
+    );
+    expect(result.current.get()).toEqual(initialState.user);
+  });
+  test.concurrent(
+    "hook returns a selctor function that returns the correct value",
+    () => {
+      const { result } = renderHookWithProvider(
+        () => store.useStore((state) => state.user),
+        store.Provider
+      );
+      expect(result.current.selector()).toEqual(initialState);
+    }
+  );
+  test.concurrent(
+    "hook returns a selctor function that returns the correct value after update",
+    () => {
+      const { result } = renderHookWithProvider(
+        () => store.useStore((state) => state.user),
+        store.Provider
+      );
+      act(() => {
+        result.current.set((prev) => ({
+          ...prev,
+          user: {
+            name: "Micheal",
+            age: 30,
+          },
+        }));
+      });
+      expect(result.current.selector()).toEqual({
+        ...initialState,
+        user: {
+          name: "Micheal",
+          age: 30,
+        },
+      });
+    }
+  );
+  it.concurrent("should only cause re-render if selected value changes", () => {
+    const selector = vi.fn((state: typeof initialState) => state.user);
+    const { result } = renderHookWithProvider(
+      () => store.useStore(selector),
+      store.Provider
+    );
+    const prevUser = result.current.get();
+    act(() => {
+      result.current.set((prev) => ({
+        ...prev,
+        count: 1,
+      }));
+    });
+
+    expect(result.current.get()).toBe(prevUser);
+  });
+});

package/src/store.tsx

@@ -0,0 +1,327 @@
+import React, {
+  createContext,
+  useCallback,
+  useContext,
+  useMemo,
+  useRef,
+} from "react";
+import { useSyncExternalStore } from "use-sync-external-store/shim";
+import { shallowEqual } from "@pixotope/utils/comparison";
+
+const LIB_NAME = "@pixotope/react-context-store";
+
+export type SelectorOptions<Selected> = (
+  first: Selected,
+  second: Selected
+) => boolean;
+
+export type ContextOptions = {
+  /**
+   * If true, the store state will be preserved across mounts and un-mounts
+   * of the Provider.
+   * @default false
+   */
+  global?: boolean;
+  /**
+   * A function that will be used to compare the selected state.
+   * @default shallowEqual
+   */
+  compare?: SelectorOptions<unknown>;
+};
+
+type SetterArgs<Store> = Store | ((prev: Store) => Store);
+type ExtractActionKeys<T> = {
+  [K in keyof T]: T[K] extends (
+    stateProps: never,
+    action: infer A
+  ) => void | Promise<void>
+    ? A extends ActionablePayload<infer Payload>
+      ? Payload extends undefined
+        ? () => void
+        : (payload: Payload) => void
+      : () => void
+    : never;
+};
+
+type Prettify<T> = {
+  [K in keyof T]: T[K];
+} & {};
+
+export type ActionablePayload<Payload = any> = {
+  payload: Payload;
+};
+
+type StateActionProps<Store> = {
+  set: (value: SetterArgs<Store>) => void;
+  get: () => Store;
+};
+
+type Actions<Store> = {
+  [key: string]: (
+    stateProps: StateActionProps<Store>,
+    action: ActionablePayload
+  ) => void | Promise<void>;
+};
+
+type ContextReturnType<Store, A extends Actions<Store>> = {
+  Provider: React.FC<{ children: React.ReactNode }>;
+  useStore: <SelectorOutput = Store>(
+    selector?: (store: Store) => SelectorOutput,
+    options?: SelectorOptions<SelectorOutput>
+  ) => {
+    get: () => SelectorOutput;
+    set: (value: SetterArgs<Store>) => void;
+    selector: () => Store;
+  };
+  useActions: () => Prettify<ExtractActionKeys<A>>;
+  useSetStore: () => (value: SetterArgs<Store>) => void;
+  subscribe: <SelectorOutput = Store>(
+    selector: (store: Store) => SelectorOutput,
+    callback: (state: SelectorOutput) => void,
+    options?: SelectorOptions<SelectorOutput>
+  ) => () => void;
+  unsubscribe: (callback: () => void) => void;
+};
+
+function isFunction(value: any): value is (prev: any) => any {
+  return typeof value === "function";
+}
+
+export function createContextStore<Store, A extends Actions<Store>>(
+  ...args: Extract<A, { payload: A }> extends { payload: infer Payload }
+    ? [initialState: Store, actions?: A, options?: ContextOptions]
+    : [initialState: Store, options?: ContextOptions]
+): ContextReturnType<Store, A>;
+export function createContextStore<Store, A extends Actions<Store>>(
+  initialState: Store,
+  actions: A = {} as A,
+  options: ContextOptions = {}
+): ContextReturnType<Store, A> {
+  let globalStore: Store | undefined = options.global
+    ? initialState
+    : undefined;
+
+  function useStoreData({
+    defaultSubscriber = [],
+  }: {
+    defaultSubscriber?: ((state: Store) => void)[];
+  } = {}): {
+    get: () => Store;
+    set: (value: SetterArgs<Store>) => void;
+    subscribe: (callback: (state: Store) => void) => () => void;
+  } {
+    const store = useRef<Store>(globalStore ?? initialState);
+
+    const get = useCallback(() => store.current, []);
+
+    const subscribers = useRef(
+      new Set<(state: Store) => void>(defaultSubscriber)
+    );
+
+    const set = useCallback((value: SetterArgs<Store>) => {
+      store.current = isFunction(value) ? value(store.current) : value;
+
+      if (options.global) {
+        globalStore = store.current;
+      }
+
+      subscribers.current.forEach((callback) => callback(store.current));
+    }, []);
+
+    const subscribe = useCallback((callback: (state: Store) => void) => {
+      subscribers.current.add(callback);
+
+      return () => subscribers.current.delete(callback);
+    }, []);
+
+    return {
+      get,
+      set,
+      subscribe,
+    };
+  }
+
+  type UseStoreDataReturnType = ReturnType<typeof useStoreData>;
+
+  const StoreContext = createContext<UseStoreDataReturnType | null>(null);
+
+  /**
+   * This is the provider that will be used to wrap the react component tree
+   * to provide the store to all the components in the tree.
+   */
+  function Provider({ children }: { children: React.ReactNode }) {
+    return (
+      <StoreContext.Provider
+        value={useStoreData({ defaultSubscriber: [observable.broadcast] })}
+      >
+        {children}
+      </StoreContext.Provider>
+    );
+  }
+
+  /**
+   * This holds all the observables that are subscribed to the store
+   * but not being actively used by any component. Helps to broadcast
+   * store updates to all the observables that are interested in reacting
+   * to state outside the react component tree.
+   */
+  const observers = new Set<(state: Store) => void>();
+
+  function subscribeExternal<SelectorOutput = Store>(
+    selector: (store: Store) => SelectorOutput = (store) =>
+      store as unknown as SelectorOutput,
+    callback: (state: SelectorOutput) => void,
+    compare: SelectorOptions<SelectorOutput> = (first, second) =>
+      first === second
+  ): () => void {
+    let lastSelectedState: SelectorOutput | undefined;
+
+    const shouldSendUpdates = (newSelectedState: SelectorOutput) => {
+      if (
+        lastSelectedState === undefined ||
+        !compare(lastSelectedState, newSelectedState)
+      ) {
+        lastSelectedState = newSelectedState;
+
+        return true;
+      }
+
+      return false;
+    };
+
+    const selectedCb = (store: Store) => {
+      const selected = selector(store);
+      const shouldSend = shouldSendUpdates(selected);
+
+      if (shouldSend) {
+        callback(selector(store));
+      }
+    };
+    observers.add(selectedCb);
+
+    return () => observers.delete(selectedCb);
+  }
+
+  /**
+   * A simple observable that proxy store updates to all the subscribers
+   * that are interested in reacting to state outside the react component tree.
+   */
+  const observable = {
+    subscribe: subscribeExternal,
+    unsubscribe: (callback: (state: Store) => void) => {
+      observers.delete(callback);
+    },
+    broadcast: (state: Store) => {
+      observers.forEach((callback) => callback(state));
+    },
+  } as const;
+
+  /**
+   * This is the hook that will be used to access the store from any component
+   * in the react component tree.
+   * @param selector A function that will be used to select the part of the store
+   * that is needed by the component.
+   * @param options Options to customize the behavior of the hook.
+   * @returns An object with the selected state, a function to update the store
+   * and a function to get the entire store.
+   * @example
+   * ```tsx
+   *  const { get, set } = useStore(store => store.user);
+   *  const { get, set } = useStore(store => store.user, { deepEqual: false });
+   *  const { get, set } = useStore(store => store.user, {
+   *      compare: (first, second) => first.id === second.id
+   *  });
+   * ```
+   */
+  function useStore<SelectorOutput = Store>(
+    selector: (store: Store) => SelectorOutput = (store) =>
+      store as unknown as SelectorOutput,
+    compare: SelectorOptions<SelectorOutput> = options.compare ?? shallowEqual
+  ): {
+    get: () => SelectorOutput;
+    set: (value: SetterArgs<Store>) => void;
+    selector: () => Store;
+  } {
+    const store = useContext(StoreContext);
+    const lastSelectedState = useRef<SelectorOutput | undefined>(undefined);
+
+    if (!store) {
+      throw new Error(
+        `[${LIB_NAME}] Store not found. Make sure the component is wrapped in a ${Provider} component.`
+      );
+    }
+
+    const state = useSyncExternalStore(
+      store.subscribe,
+      () => {
+        const selectedState = selector(store.get());
+
+        if (
+          lastSelectedState.current === undefined ||
+          !compare(lastSelectedState.current, selectedState)
+        ) {
+          lastSelectedState.current = selectedState;
+        }
+
+        return lastSelectedState.current;
+      },
+      () => selector(initialState)
+    );
+
+    return {
+      get: () => state,
+      set: store.set,
+      selector: () => store.get(),
+    };
+  }
+
+  function useActions() {
+    const store = useContext(StoreContext);
+
+    if (!store) {
+      throw new Error(
+        `[${LIB_NAME}] Store not found. Make sure the component is wrapped in a ${Provider} component.`
+      );
+    }
+
+    const actionProxy = useMemo(
+      () =>
+        new Proxy(actions, {
+          get: (target, prop) => {
+            const action = target[prop as string];
+
+            if (action) {
+              return (args: Parameters<typeof action>["1"]) => {
+                action(
+                  {
+                    set: store.set,
+                    get: store.get,
+                  },
+                  {
+                    payload: args,
+                  }
+                );
+              };
+            }
+          },
+          set: () => {
+            throw new Error(`[${LIB_NAME}] Actions cannot be updated`);
+          },
+        }),
+      []
+    );
+
+    return actionProxy as unknown as ExtractActionKeys<typeof actions>;
+  }
+
+  const useSetStore = () => useStore(() => false).set;
+
+  return {
+    Provider,
+    useStore,
+    useSetStore,
+    useActions,
+    subscribe: observable.subscribe,
+    unsubscribe: observable.unsubscribe,
+  };
+}

package/src/vitest-setup.ts

@@ -0,0 +1 @@
+import "@testing-library/jest-dom";

package/tsconfig.json

@@ -0,0 +1,28 @@
+{
+  "compilerOptions": {
+    "baseUrl": "./src",
+    "rootDir": "./src",
+    "target": "es6",
+    "module": "es6",
+    "lib": ["es6", "dom", "dom.iterable"],
+    "moduleResolution": "bundler",
+    "allowJs": true,
+    "allowSyntheticDefaultImports": true,
+    "useDefineForClassFields": true,
+    "strict": true,
+    "skipLibCheck": true,
+    "sourceMap": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "esModuleInterop": true,
+    "noEmit": true,
+    "noUnusedLocals": false,
+    "noUnusedParameters": false,
+    "noImplicitReturns": false,
+    "forceConsistentCasingInFileNames": true,
+    "jsx": "react",
+    "types": ["vitest/globals"]
+  },
+  "include": ["src"],
+  "exclude": ["node_modules"]
+}

package/vitest.config.mts

@@ -0,0 +1,21 @@
+import { defineConfig } from "vitest/config";
+
+export default defineConfig({
+  test: {
+    globals: true,
+    environment: "jsdom",
+    setupFiles: "./src/vitest-setup.ts",
+    testTimeout: 30_000,
+    hookTimeout: 30_000,
+    css: true,
+    include: ["**/*.{test,spec}.{js,mjs,cjs,ts,mts,cts,jsx,tsx}"],
+    server: {
+      deps: {
+        inline: [],
+      },
+    },
+  },
+  resolve: {
+    alias: {},
+  },
+});