@iadev93/zuno-react 0.0.3 → 0.0.5

package/dist/bindReact.d.ts

@@ -0,0 +1,59 @@
+import { type ZunoSubscribableStore } from "@iadev93/zuno";
+/**
+ * Type definition for an equality function.
+ * It takes two values of the same type and returns true if they are considered equal, false otherwise.
+ * Used to prevent unnecessary re-renders in React hooks when the selected state hasn't "meaningfully" changed.
+ */
+type EqualityFn<T> = (a: T, b: T) => boolean;
+/**
+ * Type definition for a selector function.
+ * It takes the full state of a store and returns a selected portion of that state.
+ * This allows components to subscribe only to the parts of the state they care about,
+ * optimizing performance by avoiding re-renders for unrelated state changes.
+ */
+type Selector<TState, TSelected> = (state: TState) => TSelected;
+/**
+ * An extended interface for a Zuno store that includes methods for setting state
+ * and a unique key identifier. This represents a store that has been "bound" or registered.
+ */
+type BoundStore<T> = {
+    key: string;
+    get: () => T;
+    set: (next: T | ((prev: T) => T)) => Promise<any>;
+    subscribe: (cb: (state: T) => void) => () => void;
+    raw: () => ZunoSubscribableStore<T>;
+};
+/**
+ * The core interface for the Zuno library, providing methods to create,
+ * retrieve, and update stores.
+ */
+type ZunoCore = {
+    store<T>(storeKey: string, init: () => T): BoundStore<T>;
+    set<T>(storeKey: string, next: T | ((prev: T) => T), init?: () => T): Promise<any>;
+    get<T>(storeKey: string, init?: () => T): T;
+    stop?: () => void;
+};
+/**
+ * An extended interface for a Zuno store that includes methods for setting state
+ * and a unique key identifier. This represents a store that has been "bound" or registered.
+ */
+type ReactBoundStore<T> = BoundStore<T> & {
+    /**
+     * React hook for this store.
+     * Optional selector + equality for derived values and avoiding rerenders.
+     */
+    use: <TSelected = T>(selector?: Selector<T, TSelected>, equalityFn?: EqualityFn<TSelected>) => TSelected;
+};
+/**
+ * Binds Zuno to React.
+ * @param zuno The Zuno instance to bind.
+ * @returns A React hook for accessing the store.
+ */
+export declare const bindReact: (zuno: ZunoCore) => {
+    store: <T>(storeKey: string, init: () => T) => ReactBoundStore<T>;
+    set<T>(storeKey: string, next: T | ((prev: T) => T), init?: () => T): Promise<any>;
+    get<T>(storeKey: string, init?: () => T): T;
+    stop?: () => void;
+};
+export {};
+//# sourceMappingURL=bindReact.d.ts.map

package/dist/bindReact.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"bindReact.d.ts","sourceRoot":"","sources":["../src/bindReact.ts"],"names":[],"mappings":"AACA,OAAO,EAAqB,KAAK,qBAAqB,EAAc,MAAM,eAAe,CAAC;AAE1F;;;;GAIG;AACH,KAAK,UAAU,CAAC,CAAC,IAAI,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,KAAK,OAAO,CAAC;AAE7C;;;;;GAKG;AACH,KAAK,QAAQ,CAAC,MAAM,EAAE,SAAS,IAAI,CAAC,KAAK,EAAE,MAAM,KAAK,SAAS,CAAC;AAQhE;;;GAGG;AACH,KAAK,UAAU,CAAC,CAAC,IAAI;IACnB,GAAG,EAAE,MAAM,CAAC;IACZ,GAAG,EAAE,MAAM,CAAC,CAAC;IACb,GAAG,EAAE,CAAC,IAAI,EAAE,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,CAAC,KAAK,CAAC,CAAC,KAAK,OAAO,CAAC,GAAG,CAAC,CAAC;IAClD,SAAS,EAAE,CAAC,EAAE,EAAE,CAAC,KAAK,EAAE,CAAC,KAAK,IAAI,KAAK,MAAM,IAAI,CAAC;IAClD,GAAG,EAAE,MAAM,qBAAqB,CAAC,CAAC,CAAC,CAAC;CACrC,CAAC;AAEF;;;GAGG;AACH,KAAK,QAAQ,GAAG;IACd,KAAK,CAAC,CAAC,EAAE,QAAQ,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,CAAC,GAAG,UAAU,CAAC,CAAC,CAAC,CAAC;IACzD,GAAG,CAAC,CAAC,EAAE,QAAQ,EAAE,MAAM,EAAE,IAAI,EAAE,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,CAAC,KAAK,CAAC,CAAC,EAAE,IAAI,CAAC,EAAE,MAAM,CAAC,GAAG,OAAO,CAAC,GAAG,CAAC,CAAC;IACnF,GAAG,CAAC,CAAC,EAAE,QAAQ,EAAE,MAAM,EAAE,IAAI,CAAC,EAAE,MAAM,CAAC,GAAG,CAAC,CAAC;IAC5C,IAAI,CAAC,EAAE,MAAM,IAAI,CAAC;CACnB,CAAC;AAEF;;;GAGG;AACH,KAAK,eAAe,CAAC,CAAC,IAAI,UAAU,CAAC,CAAC,CAAC,GAAG;IACxC;;;OAGG;IACH,GAAG,EAAE,CAAC,SAAS,GAAG,CAAC,EACjB,QAAQ,CAAC,EAAE,QAAQ,CAAC,CAAC,EAAE,SAAS,CAAC,EACjC,UAAU,CAAC,EAAE,UAAU,CAAC,SAAS,CAAC,KAC/B,SAAS,CAAC;CAChB,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,SAAS,GAAI,MAAM,QAAQ;YAgHvB,CAAC,YAAa,MAAM,QAAQ,MAAM,CAAC,KAAG,eAAe,CAAC,CAAC,CAAC;QAzInE,CAAC,YAAY,MAAM,QAAQ,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,CAAC,KAAK,CAAC,CAAC,SAAS,MAAM,CAAC,GAAG,OAAO,CAAC,GAAG,CAAC;QAC9E,CAAC,YAAY,MAAM,SAAS,MAAM,CAAC,GAAG,CAAC;WACpC,MAAM,IAAI;CAwKlB,CAAC"}

package/dist/bindReact.js

@@ -0,0 +1,128 @@
+import * as React from "react";
+import { toReadable } from "@iadev93/zuno";
+/**
+ * The default equality function, using `Object.is` for strict equality comparison.
+ * This is a common and safe default for comparing primitive values and references.
+ */
+const defaultEq = Object.is;
+/**
+ * Binds Zuno to React.
+ * @param zuno The Zuno instance to bind.
+ * @returns A React hook for accessing the store.
+ */
+export const bindReact = (zuno) => {
+    /**
+     * A custom hook for accessing a Zuno store in a React component.
+     * @param store The Zuno store to access.
+     * @param selector Optional selector function to extract a specific part of the store's state.
+     * @param equalityFn Optional equality function to determine if the selected state has changed.
+     * @returns The selected state from the store.
+     */
+    const useExternalStore = (readable, selector, equalityFn = defaultEq) => {
+        /**
+         * Memoized selector function.
+         * If no selector is provided, the entire state is selected.
+         */
+        const select = React.useMemo(() => {
+            return (selector ??
+                ((s) => s));
+        }, [selector]);
+        /**
+         * Reference to the last selected state.
+         * Used to compare with the new state to determine if a re-render is needed.
+         */
+        const lastRef = React.useRef(null);
+        /**
+         * Flag to indicate if the last state has been set.
+         * Used to determine if the component should re-render.
+         */
+        const hasLast = React.useRef(false);
+        /**
+         * Function to get the current state of the store.
+         * If the state has changed since the last render, the component will re-render.
+         */
+        const getSnapshot = React.useCallback(() => {
+            /**
+             * Get the current state of the store.
+             */
+            const next = select(readable.getSnapshot());
+            /**
+             * If the last state has not been set, set it and return the next state.
+             * This is the initial state of the component.
+             */
+            if (!hasLast.current) {
+                hasLast.current = true;
+                lastRef.current = next;
+                return next;
+            }
+            /**
+             * Previous state.
+             * Used to compare with the new state to determine if a re-render is needed.
+             */
+            const prev = lastRef.current;
+            /**
+             * If the previous state is equal to the next state, return the previous state.
+             * This prevents unnecessary re-renders.
+             */
+            if (equalityFn(prev, next))
+                return prev;
+            /**
+             * Update the last state and return the next state.
+             */
+            lastRef.current = next;
+            return next;
+        }, [readable, select, equalityFn]);
+        /**
+         * Function to subscribe to changes in the store.
+         * When the store changes, the component will re-render.
+         */
+        const subscribe = React.useCallback((onChange) => readable.subscribe(onChange), [readable]);
+        const getServerSnapshot = React.useCallback(() => {
+            const s = readable.getServerSnapshot ? readable.getServerSnapshot() : readable.getSnapshot();
+            return select(s);
+        }, [readable, select]);
+        /**
+         * Reset the last state and lastRef when the selector or equalityFn changes.
+         * This ensures that the component re-renders when the selector or equalityFn changes.
+         */
+        React.useEffect(() => {
+            hasLast.current = false;
+            lastRef.current = null;
+        }, [select, equalityFn]);
+        /**
+         * Returns the current state of the store.
+         * If the state has changed since the last render, the component will re-render.
+         */
+        return React.useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
+    };
+    /**
+     * Creates a store and returns a React hook for accessing the store.
+     * @param storeKey The key of the store.
+     * @param init The initialization function for the store.
+     * @returns A React hook for accessing the store.
+     */
+    const store = (storeKey, init) => {
+        /**
+         * Creates a store and returns a React hook for accessing the store.
+         */
+        const base = zuno.store(storeKey, init);
+        /**
+         * Returns a React hook for accessing the store.
+         */
+        return {
+            ...base,
+            use: (selector, equalityFn = defaultEq) => {
+                // IMPORTANT: call hook only inside components
+                const readable = React.useMemo(() => toReadable(base.raw()), [storeKey]);
+                return useExternalStore(readable, selector, equalityFn);
+            },
+        };
+    };
+    /**
+     * Returns a Zuno instance with React-enhanced bound store.
+     */
+    return {
+        ...zuno,
+        store, // overrides store() with React-enhanced bound store
+    };
+};

package/dist/createZunoReact.d.ts

@@ -0,0 +1,27 @@
+import { CreateZunoOptions } from "@iadev93/zuno";
+/**
+ * Creates a Zuno instance and returns a React hook for accessing the store.
+ *
+ * ⚠️ IMPORTANT:
+ *
+ * Call this at **module scope**, not inside *React components*.
+ * This creates a single Zuno instance.
+ *
+ * @param opts The options for the Zuno instance.
+ * @returns An object with a `useStore` hook for accessing the store.
+ */
+export declare const createZunoReact: (opts: CreateZunoOptions) => {
+    store: <T>(storeKey: string, init: () => T) => {
+        key: string;
+        get: () => T;
+        set: (next: T | ((prev: T) => T)) => Promise<any>;
+        subscribe: (cb: (state: T) => void) => () => void;
+        raw: () => import("@iadev93/zuno").ZunoSubscribableStore<T>;
+    } & {
+        use: <TSelected = T>(selector?: ((state: T) => TSelected) | undefined, equalityFn?: ((a: TSelected, b: TSelected) => boolean) | undefined) => TSelected;
+    };
+    set<T>(storeKey: string, next: T | ((prev: T) => T), init?: () => T): Promise<any>;
+    get<T>(storeKey: string, init?: () => T): T;
+    stop?: () => void;
+};
+//# sourceMappingURL=createZunoReact.d.ts.map

package/dist/createZunoReact.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"createZunoReact.d.ts","sourceRoot":"","sources":["../src/createZunoReact.ts"],"names":[],"mappings":"AAAA,OAAO,EAAc,iBAAiB,EAAE,MAAM,eAAe,CAAC;AAG9D;;;;;;;;;;GAUG;AACH,eAAO,MAAM,eAAe,GAAI,MAAM,iBAAiB;;;;;;;;;;;;;CAOtD,CAAC"}

package/{src/createZunoReact.ts → dist/createZunoReact.js}

@@ -1,22 +1,19 @@
-import { createZuno, CreateZunoOptions } from "@iadev93/zuno";
+import { createZuno } from "@iadev93/zuno";
 import { bindReact } from "./bindReact";
-
 /**
  * Creates a Zuno instance and returns a React hook for accessing the store.
- * 
+ *
  * ⚠️ IMPORTANT:
- * 
+ *
  * Call this at **module scope**, not inside *React components*.
  * This creates a single Zuno instance.
- * 
+ *
  * @param opts The options for the Zuno instance.
  * @returns An object with a `useStore` hook for accessing the store.
  */
-export const createZunoReact = (opts: CreateZunoOptions) => {
-
-  /** Zuno */
-  const zuno = createZuno(opts)
-
-  /** Return zuno */
-  return bindReact(zuno)
-};
+export const createZunoReact = (opts) => {
+    /** Zuno */
+    const zuno = createZuno(opts);
+    /** Return zuno */
+    return bindReact(zuno);
+};

package/{src/index.ts → dist/index.d.ts}

@@ -1,5 +1,4 @@
 export { createZunoReact } from "./createZunoReact";
 export { bindReact } from "./bindReact";
-
-// Convenience re-export so users don’t need two imports
 export type { ZunoReadable } from "@iadev93/zuno";
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAGxC,YAAY,EAAE,YAAY,EAAE,MAAM,eAAe,CAAC"}

package/dist/index.js

@@ -0,0 +1,2 @@
+export { createZunoReact } from "./createZunoReact";
+export { bindReact } from "./bindReact";

package/package.json

@@ -1,8 +1,12 @@
 {
   "name": "@iadev93/zuno-react",
-  "version": "0.0.3",
+  "version": "0.0.5",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
+  "files": [
+    "dist",
+    "README.md"
+  ],
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
@@ -20,5 +24,24 @@
     "@types/react": "^18.0.0",
     "typescript": "^5.9.3",
     "@iadev93/zuno": "workspace:*"
-  }
+  },
+  "keywords": [
+    "state",
+    "state-management",
+    "sync",
+    "sse",
+    "server-sent-events",
+    "broadcastchannel",
+    "distributed-state",
+    "event-sourcing",
+    "universal-state",
+    "realtime"
+  ],
+  "homepage": "https://github.com/IADev-Channel/zuno",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/IADev-Channel/zuno.git"
+  },
+  "author": "Ibrahim Aftab",
+  "license": "MIT"
 }

package/src/bindReact.ts

@@ -1,213 +0,0 @@
-import * as React from "react";
-import { type ZunoReadable, type ZunoSubscribableStore, toReadable } from "@iadev93/zuno";
-
-/**
- * Type definition for an equality function.
- * It takes two values of the same type and returns true if they are considered equal, false otherwise.
- * Used to prevent unnecessary re-renders in React hooks when the selected state hasn't "meaningfully" changed.
- */
-type EqualityFn<T> = (a: T, b: T) => boolean;
-
-/**
- * Type definition for a selector function.
- * It takes the full state of a store and returns a selected portion of that state.
- * This allows components to subscribe only to the parts of the state they care about,
- * optimizing performance by avoiding re-renders for unrelated state changes.
- */
-type Selector<TState, TSelected> = (state: TState) => TSelected;
-
-/**
- * The default equality function, using `Object.is` for strict equality comparison.
- * This is a common and safe default for comparing primitive values and references.
- */
-const defaultEq: EqualityFn<any> = Object.is;
-
-/**
- * An extended interface for a Zuno store that includes methods for setting state
- * and a unique key identifier. This represents a store that has been "bound" or registered.
- */
-type BoundStore<T> = {
-  key: string;
-  get: () => T;
-  set: (next: T | ((prev: T) => T)) => Promise<any>;
-  subscribe: (cb: (state: T) => void) => () => void;
-  raw: () => ZunoSubscribableStore<T>;
-};
-
-/**
- * The core interface for the Zuno library, providing methods to create,
- * retrieve, and update stores.
- */
-type ZunoCore = {
-  store<T>(storeKey: string, init: () => T): BoundStore<T>;
-  set<T>(storeKey: string, next: T | ((prev: T) => T), init?: () => T): Promise<any>;
-  get<T>(storeKey: string, init?: () => T): T;
-  stop?: () => void;
-};
-
-/**
- * An extended interface for a Zuno store that includes methods for setting state
- * and a unique key identifier. This represents a store that has been "bound" or registered.
- */
-type ReactBoundStore<T> = BoundStore<T> & {
-  /**
-   * React hook for this store.
-   * Optional selector + equality for derived values and avoiding rerenders.
-   */
-  use: <TSelected = T>(
-    selector?: Selector<T, TSelected>,
-    equalityFn?: EqualityFn<TSelected>
-  ) => TSelected;
-};
-
-/**
- * Binds Zuno to React.
- * @param zuno The Zuno instance to bind.
- * @returns A React hook for accessing the store.
- */
-export const bindReact = (zuno: ZunoCore) => {
-
-  /**
-   * A custom hook for accessing a Zuno store in a React component.
-   * @param store The Zuno store to access.
-   * @param selector Optional selector function to extract a specific part of the store's state.
-   * @param equalityFn Optional equality function to determine if the selected state has changed.
-   * @returns The selected state from the store.
-   */
-  const useExternalStore = <TState, TSelected = TState>(
-    readable: ZunoReadable<TState>,
-    selector?: Selector<TState, TSelected>,
-    equalityFn: EqualityFn<TSelected> = defaultEq
-  ): TSelected => {
-
-    /**
-     * Memoized selector function.
-     * If no selector is provided, the entire state is selected.
-     */
-    const select = React.useMemo(() => {
-      return (selector ??
-        ((s: TState) => s as unknown as TSelected)) as Selector<TState, TSelected>;
-    }, [selector]);
-
-    /**
-     * Reference to the last selected state.
-     * Used to compare with the new state to determine if a re-render is needed.
-     */
-    const lastRef = React.useRef<TSelected | null>(null);
-
-    /**
-     * Flag to indicate if the last state has been set.
-     * Used to determine if the component should re-render.
-     */
-    const hasLast = React.useRef(false);
-
-    /**
-     * Function to get the current state of the store.
-     * If the state has changed since the last render, the component will re-render.
-     */
-    const getSnapshot = React.useCallback(() => {
-
-      /**
-       * Get the current state of the store.
-       */
-      const next = select(readable.getSnapshot());
-
-      /**
-       * If the last state has not been set, set it and return the next state.
-       * This is the initial state of the component.
-       */
-      if (!hasLast.current) {
-        hasLast.current = true;
-        lastRef.current = next;
-        return next;
-      }
-
-      /**
-       * Previous state.
-       * Used to compare with the new state to determine if a re-render is needed.
-       */
-      const prev = lastRef.current as TSelected;
-
-      /**
-       * If the previous state is equal to the next state, return the previous state.
-       * This prevents unnecessary re-renders.
-       */
-      if (equalityFn(prev, next)) return prev;
-
-      /**
-       * Update the last state and return the next state.
-       */
-      lastRef.current = next;
-      return next;
-    }, [readable, select, equalityFn]);
-
-    /**
-     * Function to subscribe to changes in the store.
-     * When the store changes, the component will re-render.
-     */
-    const subscribe = React.useCallback(
-      (onChange: () => void) => readable.subscribe(onChange),
-      [readable]
-    );
-
-    const getServerSnapshot = React.useCallback(() => {
-      const s = readable.getServerSnapshot ? readable.getServerSnapshot() : readable.getSnapshot();
-      return select(s);
-    }, [readable, select]);
-
-    /**
-     * Reset the last state and lastRef when the selector or equalityFn changes.
-     * This ensures that the component re-renders when the selector or equalityFn changes.
-     */
-    React.useEffect(() => {
-      hasLast.current = false;
-      lastRef.current = null;
-    }, [select, equalityFn]);
-
-    /**
-     * Returns the current state of the store.
-     * If the state has changed since the last render, the component will re-render.
-     */
-    return React.useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
-  };
-
-  /**
-   * Creates a store and returns a React hook for accessing the store.
-   * @param storeKey The key of the store.
-   * @param init The initialization function for the store.
-   * @returns A React hook for accessing the store.
-   */
-  const store = <T,>(storeKey: string, init: () => T): ReactBoundStore<T> => {
-
-    /**
-     * Creates a store and returns a React hook for accessing the store.
-     */
-    const base = zuno.store<T>(storeKey, init);
-
-    /**
-     * Returns a React hook for accessing the store.
-     */
-    return {
-      ...base,
-      use: <TSelected = T>(
-        selector?: Selector<T, TSelected>,
-        equalityFn: EqualityFn<TSelected> = defaultEq
-      ) => {
-        // IMPORTANT: call hook only inside components
-        const readable = React.useMemo(
-          () => toReadable(base.raw() as ZunoSubscribableStore<T>),
-          [storeKey]
-        );
-        return useExternalStore<T, TSelected>(readable, selector, equalityFn);
-      },
-    };
-  };
-
-  /**
-   * Returns a Zuno instance with React-enhanced bound store.
-   */
-  return {
-    ...zuno,
-    store, // overrides store() with React-enhanced bound store
-  };
-};

package/tsconfig.json

@@ -1,16 +0,0 @@
-{
-  "extends": "../../tsconfig.base.json",
-  "compilerOptions": {
-    "rootDir": "src",
-    "outDir": "dist",
-    "declaration": true,
-    "jsx": "react",
-    "declarationMap": true,
-    "emitDeclarationOnly": false,
-    "module": "ESNext",
-    "moduleResolution": "Bundler"
-  },
-  "include": [
-    "src/**/*"
-  ]
-}