use-good-hooks 1.0.10 → 1.0.12

package/README.md

@@ -274,6 +274,94 @@ const ProductFilter = () => {
     - State value
     - State setter function
 
+### `useGlobalState` and `createGlobalState`
+
+Creates and manages global state that can be shared across components with automatic synchronization.
+
+```typescript
+import { createGlobalState, useGlobalState } from 'use-good-hooks';
+
+// Create a global state instance (typically in a separate file)
+const counterState = createGlobalState({ count: 0 });
+
+// Component A
+const CounterDisplay = () => {
+  const [counter, setCounter] = useGlobalState(counterState);
+
+  return (
+    <div>
+      <p>Count: {counter.count}</p>
+      <button onClick={() => setCounter({ count: counter.count + 1 })}>
+        Increment
+      </button>
+    </div>
+  );
+};
+
+// Component B (in a different part of your app)
+const CounterActions = () => {
+  const [counter, setCounter] = useGlobalState(counterState);
+
+  return (
+    <div>
+      <button onClick={() => setCounter({ count: 0 })}>
+        Reset Count
+      </button>
+      <button onClick={() => setCounter(prev => ({ count: prev.count + 5 }))}>
+        Add 5
+      </button>
+    </div>
+  );
+};
+```
+
+#### Usage
+
+1. First, create a global state store:
+
+```typescript
+// state/counter.ts
+import { createGlobalState } from 'use-good-hooks';
+
+export const counterState = createGlobalState({ count: 0 });
+```
+
+2. Then use it in any component:
+
+```typescript
+import { useGlobalState } from 'use-good-hooks';
+import { counterState } from './state/counter';
+
+const MyComponent = () => {
+	const [counter, setCounter] = useGlobalState(counterState);
+	// ...
+};
+```
+
+#### `createGlobalState` Parameters
+
+- `initialState`: The initial state value
+
+#### `createGlobalState` Returns
+
+- Array with:
+    - `state`: The current state
+    - `setState`: Function to update state
+    - `store`: Object with utility methods:
+        - `getState()`: Function to get current state
+        - `subscribe(callback)`: Subscribe to state changes
+        - `resetState()`: Reset to initial state
+
+#### `useGlobalState` Parameters
+
+- `globalState`: The global state created with `createGlobalState`
+
+#### `useGlobalState` Returns
+
+- Array with:
+    - `state`: The component's local copy of the state
+    - `setState`: Function to update global state (accepts new value or update function)
+
 ## 🧪 Running Tests
 
 This library is thoroughly tested with Vitest and React Testing Library. To run the tests:

package/dist/is-BPZNFd2v.mjs

@@ -0,0 +1,4 @@
+const e = () => typeof window < "u", n = { browser: e };
+export {
+  n as i
+};

package/dist/use-debounce.d.ts

@@ -0,0 +1,4 @@
+declare const useDebounce: <T>(value: T, delay?: number) => T;
+export default useDebounce;
+
+export { }

package/dist/use-debounce.js

@@ -0,0 +1,20 @@
+import { useState as s, useRef as d, useEffect as n } from "react";
+import f from "lodash/debounce";
+const b = 300, D = (e, o = b) => {
+  const [u, r] = s(e), c = d(
+    f((t) => {
+      r(t);
+    }, o)
+  );
+  return n(() => {
+    c.current(e);
+  }, [e]), n(() => {
+    const t = c.current;
+    return () => {
+      t.cancel();
+    };
+  }, []), u;
+};
+export {
+  D as default
+};

package/dist/use-distinct.d.ts

@@ -0,0 +1,16 @@
+declare const useDistinct: <T>(inputValue: T, options?: UseDistinctOptions) => UseDistinctReturn<T>;
+export default useDistinct;
+
+declare type UseDistinctOptions = {
+    compare?: (a: any, b: any) => boolean;
+    debounce?: number;
+    deep?: boolean;
+};
+
+declare type UseDistinctReturn<T> = {
+    distinct: boolean;
+    prevValue: T | undefined;
+    value: T;
+};
+
+export { }

package/dist/use-distinct.js

@@ -0,0 +1,43 @@
+import { useRef as c, useState as p, useCallback as b, useEffect as i } from "react";
+import v from "lodash/debounce";
+import R from "lodash/isEqual";
+import q from "lodash/isFunction";
+const D = (e, n) => e === n, g = (e, n = {}) => {
+  const s = c(!1), o = c(n), u = c(e), a = c(
+    v((t) => {
+      const { compare: d, deep: m } = o.current;
+      !(q(d) ? d : m ? R : D)(t, u.current) && (f({
+        distinct: !0,
+        prevValue: u.current,
+        value: t
+      }), u.current = t);
+    }, o.current.debounce ?? 0)
+  ), [r, f] = p({
+    distinct: !1,
+    prevValue: void 0,
+    value: e
+  }), l = b(() => {
+    s.current = !1, f((t) => ({
+      ...t,
+      distinct: !1
+    }));
+  }, []);
+  return i(() => {
+    if (r.distinct && s.current) {
+      l();
+      return;
+    }
+    const t = a.current;
+    t(e);
+  }), i(() => {
+    r.distinct && (s.current = !0);
+  }, [r.distinct]), i(() => {
+    const t = a.current;
+    return () => {
+      t.cancel();
+    };
+  }, []), r;
+};
+export {
+  g as default
+};

package/dist/use-global-state.d.ts

@@ -0,0 +1,9 @@
+export declare const createGlobalState: <T>(initialState: T) => readonly [T, (newState: T | ((prevState: T) => T)) => void, {
+    getState: () => T;
+    subscribe: (callback: (state: T) => void) => () => void;
+    resetState: () => void;
+}];
+
+export declare const useGlobalState: <T>(globalState: ReturnType<typeof createGlobalState<T>>) => [T, ReturnType<typeof createGlobalState<T>>[1]];
+
+export { }

package/dist/use-global-state.js

@@ -0,0 +1,34 @@
+import { useState as i, useEffect as l } from "react";
+const f = (o) => {
+  let t = o, s = /* @__PURE__ */ new Set();
+  const r = () => {
+    s.forEach((e) => {
+      try {
+        e(t);
+      } catch (c) {
+        console.error("Error in global state subscriber:", c);
+      }
+    });
+  };
+  return [t, (e) => {
+    const c = typeof e == "function" ? e(t) : e;
+    JSON.stringify(t) !== JSON.stringify(c) && (t = c, r());
+  }, {
+    getState: () => t,
+    subscribe: (e) => (s.add(e), () => {
+      s.delete(e);
+    }),
+    resetState: () => {
+      t = o, r();
+    }
+  }];
+}, g = (o) => {
+  const [t, s, r] = o, [n, b] = i(t);
+  return l(() => r.subscribe((u) => {
+    b(u);
+  }), [r]), [n, s];
+};
+export {
+  f as createGlobalState,
+  g as useGlobalState
+};

package/dist/use-prev.d.ts

@@ -0,0 +1,4 @@
+declare const usePrev: <T>(value: T) => T | undefined;
+export default usePrev;
+
+export { }

package/dist/use-prev.js

@@ -0,0 +1,10 @@
+import { useRef as t, useEffect as u } from "react";
+const o = (r) => {
+  const e = t(void 0);
+  return u(() => {
+    e.current = r;
+  }), e.current;
+};
+export {
+  o as default
+};

package/dist/use-storage-state.d.ts

@@ -0,0 +1,22 @@
+import { StrictObject } from './types';
+
+export declare const jsonReplacer: (key: string, value: any) => any;
+
+export declare const jsonReviver: (key: string, value: any) => any;
+
+declare type StorageType = 'local' | 'session';
+
+declare const useStorageState: <T extends StrictObject>(key: string, initialState: T, options?: UseStorageStateOptions) => [T, (value: T | ((prev: T) => T)) => void, {
+    removeKey: () => void;
+}];
+export default useStorageState;
+
+declare type UseStorageStateOptions = {
+    debounce?: number;
+    onError?: (err: Error) => void;
+    omitKeys?: string[] | ((value: any, key: string) => boolean);
+    pickKeys?: string[] | ((value: any, key: string) => boolean);
+    storage?: StorageType;
+};
+
+export { }

package/dist/use-storage-state.js

@@ -0,0 +1,76 @@
+import { useRef as _, useState as k, useEffect as E, useCallback as B } from "react";
+import F from "lodash/isEmpty";
+import i from "lodash/isFunction";
+import I from "lodash/isMap";
+import O from "lodash/isSet";
+import b from "use-json";
+import T from "lodash/merge";
+import d from "lodash/omit";
+import K from "lodash/omitBy";
+import R from "lodash/pick";
+import w from "lodash/pickBy";
+import a from "lodash/size";
+import { i as A } from "./is-BPZNFd2v.mjs";
+import U from "./use-debounce.js";
+const h = 500, y = "local", j = (m, r) => I(r) ? {
+  __type: "Map",
+  value: Array.from(r.entries())
+} : O(r) ? {
+  __type: "Set",
+  value: Array.from(r)
+} : r, C = (m, r) => r && r.__type === "Map" ? new Map(r.value) : r && r.__type === "Set" ? new Set(r.value) : r, Z = (m, r, D) => {
+  const p = _(D || {}), S = _(!1), [l, u] = k(r), g = U(
+    l,
+    p.current.debounce ?? h
+  );
+  E(() => {
+    if (!A.browser() || !S.current)
+      return;
+    const {
+      storage: f = y,
+      onError: t,
+      omitKeys: s,
+      pickKeys: o
+    } = p.current, n = f === "local" ? localStorage : sessionStorage;
+    if (n)
+      try {
+        let e = g;
+        s && (a(s) || i(s)) && (e = i(s) ? K(e, s) : d(e, s)), o && (a(o) || i(o)) && (e = i(o) ? w(e, o) : R(e, o)), n.setItem(m, b.stringify(e, j));
+      } catch (e) {
+        t && t(e);
+      }
+  }, [m, g]), E(() => {
+    const {
+      storage: f = y,
+      omitKeys: t,
+      onError: s,
+      pickKeys: o
+    } = p.current;
+    try {
+      const n = f === "local" ? localStorage : sessionStorage, e = n == null ? void 0 : n.getItem(m);
+      if (e) {
+        let c = b.parse(e, C);
+        t && (a(t) || i(t)) && (c = i(t) ? K(c, t) : d(c, t)), o && (a(o) || i(o)) && (c = i(o) ? w(c, o) : R(c, o)), u(
+          F(c) ? r : T({}, r, c)
+        );
+      }
+    } catch (n) {
+      s && s(n);
+    } finally {
+      S.current = !0;
+    }
+  }, []);
+  const M = B(() => {
+    if (!A.browser())
+      return;
+    u(r);
+    const { storage: f = y } = p.current, t = f === "local" ? localStorage : sessionStorage;
+    t == null || t.removeItem(m);
+  }, [m, r]);
+  return [l, u, { removeKey: M }];
+};
+export {
+  Z as default,
+  j as jsonReplacer,
+  C as jsonReviver
+};

package/dist/use-throttle.d.ts

@@ -0,0 +1,4 @@
+declare const useThrottle: <T>(value: T, delay?: number) => T;
+export default useThrottle;
+
+export { }

package/dist/use-throttle.js

@@ -0,0 +1,20 @@
+import { useState as u, useRef as l, useEffect as o } from "react";
+import f from "lodash/throttle";
+const h = 300, d = (t, s = h) => {
+  const [c, n] = u(t), r = l(
+    f((e) => {
+      n(e);
+    }, s)
+  );
+  return o(() => {
+    r.current(t);
+  }, [t]), o(() => {
+    const e = r.current;
+    return () => {
+      e.cancel();
+    };
+  }, []), c;
+};
+export {
+  d as default
+};

package/dist/use-url-state.d.ts

@@ -0,0 +1,19 @@
+import { StrictObject } from './types';
+
+declare type SetUrlStateAction<T> = T | ((prevState: T) => T);
+
+declare const useUrlState: <T extends StrictObject>(initialState: T, options: UseUrlStateOptions) => [T, (value: SetUrlStateAction<T>) => void];
+export default useUrlState;
+
+declare type UseUrlStateOptions = {
+    debounce?: number;
+    kebabCase?: boolean;
+    omitKeys?: string[] | ((value: any, key: string) => boolean);
+    omitValues?: any[] | ((value: any, key: string) => boolean);
+    onError?: (err: Error) => void;
+    pickKeys?: string[] | ((value: any, key: string) => boolean);
+    prefix?: string;
+    url: URL;
+};
+
+export { }

package/dist/use-url-state.js

@@ -0,0 +1,71 @@
+import { useRef as S, useState as K, useEffect as U } from "react";
+import g from "lodash/isEmpty";
+import s from "lodash/isFunction";
+import x from "lodash/merge";
+import b from "lodash/omit";
+import y from "lodash/omitBy";
+import d from "lodash/pick";
+import h from "lodash/pickBy";
+import w from "use-qs";
+import c from "lodash/size";
+import { i as B } from "./is-BPZNFd2v.mjs";
+import D from "./use-debounce.js";
+const R = 500, j = (a, k) => {
+  const m = S(k), E = () => {
+    const {
+      kebabCase: n = !0,
+      omitKeys: e,
+      omitValues: f,
+      onError: i,
+      pickKeys: r,
+      prefix: p = "",
+      url: o
+    } = m.current;
+    if (!o.search)
+      return a;
+    try {
+      let t = w.parse(decodeURIComponent(o.search), {
+        case: n ? "kebab-case" : "camelCase",
+        omitValues: f,
+        prefix: p
+      });
+      return e && (c(e) || s(e)) && (t = s(e) ? y(t, e) : b(t, e)), r && (c(r) || s(r)) && (t = s(r) ? h(t, r) : d(t, r)), g(t) ? a : x({}, a, t);
+    } catch (t) {
+      return i && i(t), a;
+    }
+  }, [u, C] = K(E), l = D(
+    u,
+    m.current.debounce ?? R
+  );
+  return U(() => {
+    if (!B.browser())
+      return;
+    const {
+      kebabCase: n = !0,
+      omitKeys: e,
+      omitValues: f,
+      onError: i,
+      pickKeys: r,
+      prefix: p = ""
+    } = m.current;
+    try {
+      let o = l;
+      e && (c(e) || s(e)) && (o = s(e) ? y(o, e) : b(o, e)), r && (c(r) || s(r)) && (o = s(r) ? h(o, r) : d(o, r));
+      const t = w.stringify(o, {
+        case: n ? "kebab-case" : "camelCase",
+        omitValues: f,
+        prefix: p
+      });
+      t ? window.history.replaceState(
+        {},
+        "",
+        `${window.location.pathname}${t}`
+      ) : window.history.replaceState({}, "", window.location.pathname);
+    } catch (o) {
+      i && i(o);
+    }
+  }, [l]), [u, C];
+};
+export {
+  j as default
+};

package/package.json

@@ -14,6 +14,7 @@
 		"@types/react": "^19.0.8",
 		"@types/react-dom": "^19.0.3",
 		"@vitejs/plugin-react": "^4.3.4",
+		"@vitest/coverage-v8": "3.0.7",
 		"clsx": "^2.1.1",
 		"eslint": "^9.19.0",
 		"eslint-plugin-react-hooks": "^5.0.0",
@@ -30,10 +31,12 @@
 		"vite-plugin-dts": "^4.5.3",
 		"vitest": "^3.0.7"
 	},
+	"exports": {
+		"./*": "./dist/*.js"
+	},
 	"files": [
 		"dist"
 	],
-	"main": "./dist/index.js",
 	"peerDependencies": {
 		"lodash": "^4.17.21",
 		"react": "^19.0.0",
@@ -43,7 +46,8 @@
 		"build": "yarn lint && vite build --mode export",
 		"lint": "prettier --write . && eslint .",
 		"npm-publish": "yarn test --run && yarn build && yarn version --patch --no-git-tag-version && yarn publish --non-interactive",
-		"test": "vitest"
+		"test": "vitest",
+		"test:coverage": "vitest --coverage"
 	},
-	"version": "1.0.10"
+	"version": "1.0.12"
 }

package/dist/index.d.ts

@@ -1,56 +0,0 @@
-declare type SetUrlStateAction<T> = T | ((prevState: T) => T);
-
-declare type StorageType = 'local' | 'session';
-
-declare type StrictObject = {
-    [key: string]: any;
-} & {
-    length?: never;
-};
-
-export declare const useDebounce: <T>(value: T, delay?: number) => T;
-
-export declare const useDistinct: <T>(inputValue: T, options?: UseDistinctOptions) => UseDistinctReturn<T>;
-
-declare type UseDistinctOptions = {
-    compare?: (a: any, b: any) => boolean;
-    debounce?: number;
-    deep?: boolean;
-};
-
-declare type UseDistinctReturn<T> = {
-    distinct: boolean;
-    prevValue: T | undefined;
-    value: T;
-};
-
-export declare const usePrev: <T>(value: T) => T | undefined;
-
-export declare const useStorageState: <T extends StrictObject>(key: string, initialState: T, options?: UseStorageStateOptions) => [T, (value: T | ((prev: T) => T)) => void, {
-    removeKey: () => void;
-}];
-
-declare type UseStorageStateOptions = {
-    debounce?: number;
-    onError?: (err: Error) => void;
-    omitKeys?: string[] | ((value: any, key: string) => boolean);
-    pickKeys?: string[] | ((value: any, key: string) => boolean);
-    storage?: StorageType;
-};
-
-export declare const useThrottle: <T>(value: T, delay?: number) => T;
-
-export declare const useUrlState: <T extends StrictObject>(initialState: T, options: UseUrlStateOptions) => [T, (value: SetUrlStateAction<T>) => void];
-
-declare type UseUrlStateOptions = {
-    debounce?: number;
-    kebabCase?: boolean;
-    omitKeys?: string[] | ((value: any, key: string) => boolean);
-    omitValues?: any[] | ((value: any, key: string) => boolean);
-    onError?: (err: Error) => void;
-    pickKeys?: string[] | ((value: any, key: string) => boolean);
-    prefix?: string;
-    url: URL;
-};
-
-export { }

package/dist/index.js

@@ -1,204 +0,0 @@
-import { useState as g, useRef as y, useEffect as b, useCallback as C } from "react";
-import T from "lodash/debounce";
-import q from "lodash/isEqual";
-import a from "lodash/isFunction";
-import L from "lodash/isEmpty";
-import I from "lodash/isMap";
-import B from "lodash/isSet";
-import K from "use-json";
-import V from "lodash/merge";
-import w from "lodash/omit";
-import D from "lodash/omitBy";
-import R from "lodash/pick";
-import _ from "lodash/pickBy";
-import h from "lodash/size";
-import M from "lodash/throttle";
-import U from "use-qs";
-const O = 300, F = (e, t = O) => {
-  const [p, l] = g(e), f = y(
-    T((m) => {
-      l(m);
-    }, t)
-  );
-  return b(() => {
-    f.current(e);
-  }, [e]), b(() => {
-    const m = f.current;
-    return () => {
-      m.cancel();
-    };
-  }, []), p;
-}, $ = (e, t) => e === t, ut = (e, t = {}) => {
-  const p = y(!1), l = y(t), f = y(e), m = y(
-    T((c) => {
-      const { compare: n, deep: o } = l.current;
-      !(a(n) ? n : o ? q : $)(c, f.current) && (S({
-        distinct: !0,
-        prevValue: f.current,
-        value: c
-      }), f.current = c);
-    }, l.current.debounce ?? 0)
-  ), [d, S] = g({
-    distinct: !1,
-    prevValue: void 0,
-    value: e
-  }), u = C(() => {
-    p.current = !1, S((c) => ({
-      ...c,
-      distinct: !1
-    }));
-  }, []);
-  return b(() => {
-    if (d.distinct && p.current) {
-      u();
-      return;
-    }
-    const c = m.current;
-    c(e);
-  }), b(() => {
-    d.distinct && (p.current = !0);
-  }, [d.distinct]), b(() => {
-    const c = m.current;
-    return () => {
-      c.cancel();
-    };
-  }, []), d;
-}, at = (e) => {
-  const t = y(void 0);
-  return b(() => {
-    t.current = e;
-  }), t.current;
-}, v = () => typeof window < "u", A = { browser: v }, x = 500, k = "local", N = (e, t) => I(t) ? {
-  __type: "Map",
-  value: Array.from(t.entries())
-} : B(t) ? {
-  __type: "Set",
-  value: Array.from(t)
-} : t, j = (e, t) => t && t.__type === "Map" ? new Map(t.value) : t && t.__type === "Set" ? new Set(t.value) : t, ft = (e, t, p) => {
-  const l = y(p || {}), f = y(!1), [m, d] = g(t), S = F(
-    m,
-    l.current.debounce ?? x
-  );
-  b(() => {
-    if (!A.browser() || !f.current)
-      return;
-    const {
-      storage: c = k,
-      onError: n,
-      omitKeys: o,
-      pickKeys: i
-    } = l.current, s = c === "local" ? localStorage : sessionStorage;
-    if (s)
-      try {
-        let r = S;
-        o && (h(o) || a(o)) && (r = a(o) ? D(r, o) : w(r, o)), i && (h(i) || a(i)) && (r = a(i) ? _(r, i) : R(r, i)), s.setItem(e, K.stringify(r, N));
-      } catch (r) {
-        n && n(r);
-      }
-  }, [e, S]), b(() => {
-    const {
-      storage: c = k,
-      omitKeys: n,
-      onError: o,
-      pickKeys: i
-    } = l.current;
-    try {
-      const s = c === "local" ? localStorage : sessionStorage, r = s == null ? void 0 : s.getItem(e);
-      if (r) {
-        let E = K.parse(r, j);
-        n && (h(n) || a(n)) && (E = a(n) ? D(E, n) : w(E, n)), i && (h(i) || a(i)) && (E = a(i) ? _(E, i) : R(E, i)), d(
-          L(E) ? t : V({}, t, E)
-        );
-      }
-    } catch (s) {
-      o && o(s);
-    } finally {
-      f.current = !0;
-    }
-  }, []);
-  const u = C(() => {
-    if (!A.browser())
-      return;
-    d(t);
-    const { storage: c = k } = l.current, n = c === "local" ? localStorage : sessionStorage;
-    n == null || n.removeItem(e);
-  }, [e, t]);
-  return [m, d, { removeKey: u }];
-}, Y = 300, mt = (e, t = Y) => {
-  const [p, l] = g(e), f = y(
-    M((m) => {
-      l(m);
-    }, t)
-  );
-  return b(() => {
-    f.current(e);
-  }, [e]), b(() => {
-    const m = f.current;
-    return () => {
-      m.cancel();
-    };
-  }, []), p;
-}, z = 500, pt = (e, t) => {
-  const p = y(t), l = () => {
-    const {
-      kebabCase: S = !0,
-      omitKeys: u,
-      omitValues: c,
-      onError: n,
-      pickKeys: o,
-      prefix: i = "",
-      url: s
-    } = p.current;
-    if (!s.search)
-      return e;
-    try {
-      let r = U.parse(decodeURIComponent(s.search), {
-        case: S ? "kebab-case" : "camelCase",
-        omitValues: c,
-        prefix: i
-      });
-      return u && (h(u) || a(u)) && (r = a(u) ? D(r, u) : w(r, u)), o && (h(o) || a(o)) && (r = a(o) ? _(r, o) : R(r, o)), L(r) ? e : V({}, e, r);
-    } catch (r) {
-      return n && n(r), e;
-    }
-  }, [f, m] = g(l), d = F(
-    f,
-    p.current.debounce ?? z
-  );
-  return b(() => {
-    if (!A.browser())
-      return;
-    const {
-      kebabCase: S = !0,
-      omitKeys: u,
-      omitValues: c,
-      onError: n,
-      pickKeys: o,
-      prefix: i = ""
-    } = p.current;
-    try {
-      let s = d;
-      u && (h(u) || a(u)) && (s = a(u) ? D(s, u) : w(s, u)), o && (h(o) || a(o)) && (s = a(o) ? _(s, o) : R(s, o));
-      const r = U.stringify(s, {
-        case: S ? "kebab-case" : "camelCase",
-        omitValues: c,
-        prefix: i
-      });
-      r ? window.history.replaceState(
-        {},
-        "",
-        `${window.location.pathname}${r}`
-      ) : window.history.replaceState({}, "", window.location.pathname);
-    } catch (s) {
-      n && n(s);
-    }
-  }, [d]), [f, m];
-};
-export {
-  F as useDebounce,
-  ut as useDistinct,
-  at as usePrev,
-  ft as useStorageState,
-  mt as useThrottle,
-  pt as useUrlState
-};