react-state-custom 1.0.20 → 1.0.22

package/dist/DevToolState.d.ts

@@ -3,6 +3,10 @@ export declare const DevToolState: ({}: {}) => import("react/jsx-runtime").JSX.E
 export declare const StateView: React.FC<{
     dataKey: string;
 }>;
+export declare const ChangeFlashWrappper: React.FC<React.ComponentProps<'div'> & {
+    value: any;
+    deepCompare?: boolean;
+}>;
 export declare const JSONView: React.FC<{
     value: any;
     name?: string;

package/dist/index.es.js

@@ -1,6 +1,6 @@
-import { useRef as w, useMemo as g, useEffect as f, useState as v, useCallback as $, Fragment as F, createElement as G } from "react";
-import { jsx as o, Fragment as O, jsxs as m } from "react/jsx-runtime";
-function C(t, e) {
+import { useRef as O, useMemo as g, useEffect as f, useState as v, useCallback as A, Fragment as G, createElement as J } from "react";
+import { jsx as o, Fragment as y, jsxs as m } from "react/jsx-runtime";
+function w(t, e) {
   let n = null, a = function(...r) {
     n && clearTimeout(n), n = setTimeout(() => {
       t(...r);
@@ -8,7 +8,7 @@ function C(t, e) {
   };
   return a.cancel = () => clearTimeout(n), a;
 }
-function J(t) {
+function H(t) {
   const e = /* @__PURE__ */ new Map(), n = function(...a) {
     const r = JSON.stringify(a);
     if (e.has(r))
@@ -18,8 +18,8 @@ function J(t) {
   };
   return n.cache = e, n;
 }
-const V = () => Math.random().toString().slice(2), H = (t) => {
-  const { current: { computedHash: e } } = w({
+const D = () => Math.random().toString().slice(2), L = (t) => {
+  const { current: { computedHash: e } } = O({
     /**
      * Getter for the computed hash function.
      *
@@ -28,21 +28,21 @@ const V = () => Math.random().toString().slice(2), H = (t) => {
      * - Updates the hash if any difference is detected.
      */
     get computedHash() {
-      let n = [], a = V();
+      let n = [], a = D();
       return (r) => {
         let s = !1;
-        return s = s || !r != !n, s = s || r?.length != n?.length, s = s || r.some((c, l) => c != n[l]), n = r, s && (a = V()), a;
+        return s = s || !r != !n, s = s || r?.length != n?.length, s = s || r.some((c, l) => c != n[l]), n = r, s && (a = D()), a;
       };
     }
   });
   return e(t);
 };
-class L extends Event {
+class W extends Event {
   constructor(e, n) {
     super(e), this.event = e, this.value = n;
   }
 }
-class W extends EventTarget {
+class _ extends EventTarget {
   /**
    * Create a new Context instance.
    * @param name - The name of the context (for debugging).
@@ -65,7 +65,7 @@ class W extends EventTarget {
    * @param value - The new value.
    */
   publish(e, n) {
-    n != this.data[e] && (this.data[e] = n, this.dispatchEvent(new L(String(e), n)));
+    n != this.data[e] && (this.data[e] = n, this.dispatchEvent(new W(String(e), n)));
   }
   /**
    * Subscribe to changes for a specific key in the context.
@@ -80,7 +80,7 @@ class W extends EventTarget {
     return this.addEventListener(String(e), a), e in this.data && n(this.data[e]), () => (this.removeEventListener(String(e), a), void 0);
   }
 }
-const y = J((t) => new W(t)), E = (t = "noname") => g(() => y(t), [t]), A = (t, ...e) => {
+const T = H((t) => new _(t)), E = (t = "noname") => g(() => T(t), [t]), $ = (t, ...e) => {
   const n = new Error("[ctx] useRegistryChecker failed " + JSON.stringify({ names: e, ctx: t?.name ?? "undefined" }));
   f(
     () => {
@@ -91,21 +91,21 @@ const y = J((t) => new W(t)), E = (t = "noname") => g(() => y(t), [t]), A = (t,
     },
     [t, e.length]
   );
-}, ne = (t, e, n) => {
+}, ae = (t, e, n) => {
   f(() => {
     t && t.data[e] != n && t.publish(e, n);
-  }, [e, n, t]), A(t, e);
-}, K = (t, e, n = 0) => {
+  }, [e, n, t]), $(t, e);
+}, I = (t, e, n = 0) => {
   const [{ value: a }, r] = v(() => ({ value: t?.data?.[e] }));
   return f(() => {
     if (t) {
-      let s = n == 0 ? (l) => r({ value: l }) : C((l) => r({ value: l }), n), c = t.subscribe(e, s);
+      let s = n == 0 ? (l) => r({ value: l }) : w((l) => r({ value: l }), n), c = t.subscribe(e, s);
       return a != t.data[e] && r({ value: t.data[e] }), () => {
         c();
       };
     }
   }, [e, t]), t?.data[e];
-}, ae = (t, e, n) => {
+}, re = (t, e, n) => {
   const [, a] = v(0), r = g(
     () => n(t?.data[e]),
     [n, t?.data[e]]
@@ -124,13 +124,13 @@ const y = J((t) => new W(t)), E = (t = "noname") => g(() => y(t), [t]), A = (t,
     if (t)
       for (let [n, a] of e)
         t.data[n] != a && t.publish(n, a);
-  }, [t, H(e.flat())]), A(t, ...e.map((n) => n[0]));
-}, re = (t, ...e) => {
+  }, [t, L(e.flat())]), $(t, ...e.map((n) => n[0]));
+}, se = (t, ...e) => {
   const [, n] = v(0), a = e.map((r) => t?.data?.[r]);
   return f(() => {
     if (t) {
       let r = a;
-      const s = C(() => {
+      const s = w(() => {
         let i = e.map((u) => t?.data?.[u]);
         e.some((u, d) => r[d] != i[d]) && (r = i, n((u) => u + 1));
       }, 1);
@@ -140,12 +140,12 @@ const y = J((t) => new W(t)), E = (t = "noname") => g(() => y(t), [t]), A = (t,
       };
     }
   }, [t, ...e]), Object.fromEntries(e.map((r, s) => [r, a[s]]));
-}, se = (t, e = 50, ...n) => {
+}, ce = (t, e = 50, ...n) => {
   const [, a] = v(0), r = n.map((s) => t?.data?.[s]);
   return f(() => {
     if (t) {
       let s = r;
-      const c = C(() => {
+      const c = w(() => {
         let u = n.map((d) => t?.data?.[d]);
         n.some((d, p) => s[p] != u[p]) && (s = u, a((d) => d + 1));
       }, e);
@@ -155,7 +155,7 @@ const y = J((t) => new W(t)), E = (t = "noname") => g(() => y(t), [t]), A = (t,
       };
     }
   }, [t, ...n]), r;
-}, ce = (t, e) => {
+}, le = (t, e) => {
   const n = (s) => [
     t,
     ...Object.entries(s ?? {}).sort((c, l) => c[0].localeCompare(l[0])).flat()
@@ -174,7 +174,7 @@ const y = J((t) => new W(t)), E = (t = "noname") => g(() => y(t), [t]), A = (t,
       return a.add(l), () => {
         a.delete(l);
       };
-    }), /* @__PURE__ */ o(O, {});
+    }), /* @__PURE__ */ o(y, {});
   };
   return r.displayName = `State[${e?.name ?? "??"}]`, {
     resolveCtxName: n,
@@ -208,18 +208,18 @@ const y = J((t) => new W(t)), E = (t = "noname") => g(() => y(t), [t]), A = (t,
       }, [a.has(c)]), E(c);
     }
   };
-}, _ = /* @__PURE__ */ function() {
+}, K = /* @__PURE__ */ function() {
   const t = /* @__PURE__ */ new WeakMap();
   return (e) => {
     let n = t.get(e);
     return n || t.set(e, n = (e?.name ?? "") + Math.random().toString()), n;
   };
-}(), z = (t) => [
+}(), q = (t) => [
   ...Object.entries(t ?? {}).sort((e, n) => e[0].localeCompare(n[0])).flat()
-].join("-"), le = ({ Wrapper: t = F }) => {
-  const e = E("auto-ctx"), [n, a] = v({}), r = $(
+].join("-"), ie = ({ Wrapper: t = G }) => {
+  const e = E("auto-ctx"), [n, a] = v({}), r = A(
     (s, c) => {
-      const l = _(s), i = z(c);
+      const l = K(s), i = q(c);
       return a(({
         [l]: {
           Component: u = s,
@@ -272,12 +272,12 @@ const y = J((t) => new W(t)), E = (t = "noname") => g(() => y(t), [t]), A = (t,
     e,
     ["subscribe", r],
     ["state", n]
-  ), /* @__PURE__ */ o(O, { children: Object.entries(n).flatMap(
+  ), /* @__PURE__ */ o(y, { children: Object.entries(n).flatMap(
     ([s, { Component: c, subState: l }]) => Object.entries(l).map(([i, { counter: u, params: d }]) => ({ key: s + i, Component: c, params: d, counter: u })).filter((i) => i.counter > 0).map(({ key: i, params: u, Component: d }) => /* @__PURE__ */ o(t, { children: /* @__PURE__ */ o(d, { ...u }) }, i))
   ) });
-}, ie = ({ Root: t, useCtxState: e, useCtxStateStrict: n, resolveCtxName: a }, r = 0) => ({
+}, oe = ({ Root: t, useCtxState: e, useCtxStateStrict: n, resolveCtxName: a }, r = 0) => ({
   useCtxState: (s) => {
-    const c = a(s), l = K(E("auto-ctx"), "subscribe");
+    const c = a(s), l = I(E("auto-ctx"), "subscribe");
     return f(() => {
       if (r == 0)
         return l?.(t, s);
@@ -287,7 +287,7 @@ const y = J((t) => new W(t)), E = (t = "noname") => g(() => y(t), [t]), A = (t,
       }
     }, [l, c]), E(c);
   }
-}), oe = (t) => {
+}), ue = (t) => {
   const [, e] = v(0), { proxy: n, finalGetter: a, openGetter: r, clean: s } = g(
     () => {
       const c = /* @__PURE__ */ new Set(), l = {}, i = /* @__PURE__ */ new Map(), u = new Proxy(
@@ -300,7 +300,7 @@ const y = J((t) => new W(t)), E = (t = "noname") => g(() => y(t), [t]), A = (t,
           }
         }
       );
-      let d = !0, p = C(() => {
+      let d = !0, p = w(() => {
         [...c.values()].some((h) => l[h] != t?.data?.[h]) && e((h) => h + 1);
       }, 0), b = () => {
         d = !0, c.clear();
@@ -321,10 +321,10 @@ const y = J((t) => new W(t)), E = (t = "noname") => g(() => y(t), [t]), A = (t,
     () => () => s(),
     [s]
   ), n;
-}, I = y.cache, q = ({}) => {
+}, z = T.cache, B = ({}) => {
   const [t, e] = v("");
   return /* @__PURE__ */ m("div", { className: "main-panel", children: [
-    /* @__PURE__ */ o("div", { className: "state-list", children: [...I.keys()].map((n) => JSON.parse(n)?.[0]).filter((n) => n != "auto-ctx").map((n) => /* @__PURE__ */ o(
+    /* @__PURE__ */ o("div", { className: "state-list", children: [...z.keys()].map((n) => JSON.parse(n)?.[0]).filter((n) => n != "auto-ctx").map((n) => /* @__PURE__ */ o(
       "div",
       {
         className: "state-key",
@@ -333,10 +333,10 @@ const y = J((t) => new W(t)), E = (t = "noname") => g(() => y(t), [t]), A = (t,
         children: n
       }
     )) }),
-    /* @__PURE__ */ o("div", { className: "state-view", children: /* @__PURE__ */ o(B, { dataKey: t }, t) })
+    /* @__PURE__ */ o("div", { className: "state-view", children: /* @__PURE__ */ o(P, { dataKey: t }, t) })
   ] });
-}, B = ({ dataKey: t }) => {
-  const e = y(t), [n, a] = v({ ...e?.data });
+}, P = ({ dataKey: t }) => {
+  const e = T(t), [n, a] = v({ ...e?.data });
   return f(() => {
     let r = { ...n }, s = setInterval(() => {
       let c = !1;
@@ -346,21 +346,24 @@ const y = J((t) => new W(t)), E = (t = "noname") => g(() => y(t), [t]), A = (t,
     }, 200);
     return () => clearInterval(s);
   }, [e]), /* @__PURE__ */ o(
-    Z,
+    ee,
     {
       value: n,
-      name: "ROOT",
+      name: t,
       expandLevel: 1,
-      style: { height: "300px", overflow: "auto", resize: "vertical" }
+      style: {}
     }
   );
-}, x = (t, e = 10) => Object.fromEntries(
-  new Array(Math.ceil((t.length + 1) / e)).fill(0).map(
-    (n, a, r) => new Array(a == r.length - 1 ? t.length % e : e).fill(0).map((s, c) => a * e + c)
-  ).filter((n) => n.length).map((n) => [`${n.at(0)}..${n.at(-1)}`, Object.fromEntries(
-    n.map((a) => [a, t[a]])
-  )])
-), P = (t, e = 10) => {
+}, V = (t) => {
+  let e = t.length < 120 ? 10 : 100;
+  return Object.fromEntries(
+    new Array(Math.ceil((t.length + 1) / e)).fill(0).map(
+      (n, a, r) => new Array(a == r.length - 1 ? t.length % e : e).fill(0).map((s, c) => a * e + c)
+    ).filter((n) => n.length).map((n) => [`${n.at(0)}..${n.at(-1)}`, Object.fromEntries(
+      n.map((a) => [a, t[a]])
+    )])
+  );
+}, Q = (t, e = 25) => {
   const n = Object.keys(t);
   return Object.fromEntries(
     Array(Math.ceil((n.length + 1) / e)).fill(0).map(
@@ -372,17 +375,17 @@ const y = J((t) => new W(t)), E = (t = "noname") => g(() => y(t), [t]), A = (t,
       ]
     )
   );
-}, T = ({ path: t, expandLevel: e, expandRoot: n, setExpandRoot: a }) => {
+}, x = ({ path: t, expandLevel: e, expandRoot: n, setExpandRoot: a }) => {
   const r = t?.join("%") ?? "", s = typeof e == "boolean" ? e : typeof e == "number" && e > 0, c = g(
     () => n?.[r] ?? s,
     [n?.[r], r]
-  ), l = $(
+  ), l = A(
     (i) => a((u) => ({ ...u, [r]: i })),
     [n, r]
   );
   return { isExpand: c, setExpand: l };
-}, N = ({ value: t, deepCompare: e = !1, ...n }) => {
-  const a = w(void 0), r = w(t);
+}, C = ({ value: t, deepCompare: e = !1, ...n }) => {
+  const a = O(void 0), r = O(t);
   return f(() => {
     if (a.current && (e && t && r.current ? Object.keys(t).length != Object.keys(r.current).length || Object.keys(t).some((c) => t[c] != r.current[c]) : t != r.current)) {
       r.current = t, a.current.classList.add("jv-updated");
@@ -390,7 +393,7 @@ const y = J((t) => new W(t)), E = (t = "noname") => g(() => y(t), [t]), A = (t,
       return () => cancelAnimationFrame(c);
     }
   }, [t, e, a]), /* @__PURE__ */ o("div", { ...n, ref: a });
-}, Q = (t) => {
+}, U = (t) => {
   const {
     currentField: e,
     value: n,
@@ -400,11 +403,11 @@ const y = J((t) => new W(t)), E = (t = "noname") => g(() => y(t), [t]), A = (t,
     setExpandRoot: c,
     expandLevel: l,
     isGrouped: i
-  } = t, u = n instanceof Array, { isExpand: d, setExpand: p } = T(t), b = typeof l == "number" ? l - 1 : l, j = Object.entries(n).length > 10, D = g(
-    () => j ? n instanceof Array ? x(n, 10) : P(n, 10) : n,
-    [n, j, x]
+  } = t, u = n instanceof Array, { isExpand: d, setExpand: p } = x(t), b = typeof l == "number" ? l - 1 : l, j = Object.entries(n).length > (n instanceof Array ? 10 : 25), N = Object.entries(n).length > 0, h = g(
+    () => j ? n instanceof Array ? V(n) : Q(n, 25) : n,
+    [n, j, V]
   );
-  return d ? /* @__PURE__ */ m(N, { className: "jv-field jv-field-obj", value: n, deepCompare: i, children: [
+  return d && N ? /* @__PURE__ */ m(C, { className: "jv-field jv-field-obj", value: n, deepCompare: i, children: [
     e && /* @__PURE__ */ o("div", { children: /* @__PURE__ */ m("div", { onClick: () => p(!1), children: [
       /* @__PURE__ */ o("span", { className: "jv-name", children: e }),
       /* @__PURE__ */ o("span", { children: ":" }),
@@ -419,17 +422,17 @@ const y = J((t) => new W(t)), E = (t = "noname") => g(() => y(t), [t]), A = (t,
         " "
       ] })
     ] }) }),
-    /* @__PURE__ */ o("div", { className: "jv-value", children: Object.entries(D).map(([h, S], R) => /* @__PURE__ */ G(
+    /* @__PURE__ */ o("div", { className: "jv-value", children: Object.entries(h).map(([S, F], R) => /* @__PURE__ */ J(
       M,
       {
         name: r,
         expandRoot: s,
         setExpandRoot: c,
         expandLevel: b,
-        value: S,
+        value: F,
         isGrouped: j,
-        key: [...a, j ? R : h].join("%"),
-        path: [...a, h]
+        key: [...a, j ? R : S].join("%"),
+        path: [...a, S]
       }
     )) }),
     e && /* @__PURE__ */ o("div", { children: /* @__PURE__ */ m("span", { children: [
@@ -437,10 +440,10 @@ const y = J((t) => new W(t)), E = (t = "noname") => g(() => y(t), [t]), A = (t,
       u ? "]" : "}",
       " "
     ] }) })
-  ] }) : /* @__PURE__ */ o(N, { className: "jv-field jv-field-obj", value: n, deepCompare: i, children: /* @__PURE__ */ o("div", { children: /* @__PURE__ */ m("div", { onClick: () => p(!0), children: [
+  ] }) : /* @__PURE__ */ o(C, { className: "jv-field jv-field-obj", value: n, deepCompare: i, children: /* @__PURE__ */ o("div", { children: /* @__PURE__ */ m("div", { onClick: () => N && p(!0), children: [
     /* @__PURE__ */ o("span", { className: "jv-name", children: e }),
     e && /* @__PURE__ */ o("span", { children: ":" }),
-    e && /* @__PURE__ */ o("span", { children: "[+]" }),
+    e && N && /* @__PURE__ */ o("span", { children: "[+]" }),
     /* @__PURE__ */ m("span", { className: "jv-type", children: [
       Object.keys(n).length,
       " items "
@@ -450,17 +453,17 @@ const y = J((t) => new W(t)), E = (t = "noname") => g(() => y(t), [t]), A = (t,
       u ? "[" : "{",
       " "
     ] }),
-    /* @__PURE__ */ o("span", { children: " ... " }),
+    N && /* @__PURE__ */ o("span", { children: " ... " }),
     /* @__PURE__ */ m("span", { children: [
       " ",
       u ? "]" : "}",
       " "
     ] })
   ] }) }) });
-}, U = (t) => {
-  const { currentType: e, currentField: n, value: a } = t, { isExpand: r, setExpand: s } = T(t), c = String(a).length > 50, l = c && !r ? `${String(a).slice(0, 15)}...${String(a).slice(-15, -1)}` : String(a);
+}, X = (t) => {
+  const { currentType: e, currentField: n, value: a } = t, { isExpand: r, setExpand: s } = x(t), c = String(a).length > 50, l = c && !r ? `${String(a).slice(0, 15)}...${String(a).slice(-15, -1)}` : String(a);
   return /* @__PURE__ */ m(
-    N,
+    C,
     {
       value: t.value,
       className: `jv-field jv-field-${e} ${c ? "jv-cursor" : ""}`,
@@ -482,10 +485,10 @@ const y = J((t) => new W(t)), E = (t = "noname") => g(() => y(t), [t]), A = (t,
       ]
     }
   );
-}, X = (t) => {
-  const { currentType: e, currentField: n, value: a } = t, { isExpand: r, setExpand: s } = T(t), c = String(a).length > 50, l = c && !r ? `${String(a).slice(0, 15)}...${String(a).slice(-15, -1)}` : String(a);
+}, Y = (t) => {
+  const { currentType: e, currentField: n, value: a } = t, { isExpand: r, setExpand: s } = x(t), c = String(a).length > 50, l = c && !r ? `${String(a).slice(0, 15)}...${String(a).slice(-15, -1)}` : String(a);
   return /* @__PURE__ */ m(
-    N,
+    C,
     {
       value: t.value,
       className: `jv-field jv-field-${e} ${c ? "jv-cursor" : ""}`,
@@ -503,10 +506,10 @@ const y = J((t) => new W(t)), E = (t = "noname") => g(() => y(t), [t]), A = (t,
       ]
     }
   );
-}, Y = (t) => {
+}, Z = (t) => {
   const { currentType: e, currentField: n, value: a } = t;
   return /* @__PURE__ */ m(
-    N,
+    C,
     {
       value: t.value,
       className: `jv-field jv-field-${e}`,
@@ -523,20 +526,20 @@ const y = J((t) => new W(t)), E = (t = "noname") => g(() => y(t), [t]), A = (t,
   const { value: e, path: n = [], name: a } = t, r = n.at(-1) ?? a ?? void 0, s = typeof e;
   switch (s) {
     case "object":
-      return /* @__PURE__ */ o(Q, { ...t, currentField: r, currentType: s });
-    case "string":
       return /* @__PURE__ */ o(U, { ...t, currentField: r, currentType: s });
-    case "function":
+    case "string":
       return /* @__PURE__ */ o(X, { ...t, currentField: r, currentType: s });
+    case "function":
+      return /* @__PURE__ */ o(Y, { ...t, currentField: r, currentType: s });
     case "number":
     case "boolean":
     case "bigint":
     case "symbol":
     case "undefined":
     default:
-      return /* @__PURE__ */ o(Y, { ...t, currentField: r, currentType: s });
+      return /* @__PURE__ */ o(Z, { ...t, currentField: r, currentType: s });
   }
-}, Z = ({ value: t, name: e, style: n, expandLevel: a = !1 }) => {
+}, ee = ({ value: t, name: e, style: n, expandLevel: a = !1 }) => {
   const [r, s] = v({});
   return /* @__PURE__ */ o("div", { className: "jv-root", style: n, children: /* @__PURE__ */ o(
     M,
@@ -549,31 +552,31 @@ const y = J((t) => new W(t)), E = (t = "noname") => g(() => y(t), [t]), A = (t,
       expandLevel: a
     }
   ) });
-}, ue = ({ toggleButton: t = "[x]", ...e }) => {
+}, de = ({ toggleButton: t = "[x]", ...e }) => {
   const [n, a] = v(!1);
-  return /* @__PURE__ */ m(O, { children: [
+  return /* @__PURE__ */ m(y, { children: [
     /* @__PURE__ */ o("button", { className: "react-state-dev-btn", "data-active": n, onClick: () => a(!0), ...e, children: e?.children ?? "Toggle Dev Tool" }),
     /* @__PURE__ */ m("div", { className: "react-state-dev-container", "data-active": n, children: [
       /* @__PURE__ */ o("button", { className: "close-btn", onClick: () => a(!1), children: "[x]" }),
-      /* @__PURE__ */ o(q, {})
+      /* @__PURE__ */ o(B, {})
     ] })
   ] });
 };
 export {
-  le as AutoRootCtx,
-  W as Context,
-  ue as DevToolContainer,
-  ie as createAutoCtx,
-  ce as createRootCtx,
-  y as getContext,
-  H as useArrayHash,
+  ie as AutoRootCtx,
+  _ as Context,
+  de as DevToolContainer,
+  oe as createAutoCtx,
+  le as createRootCtx,
+  T as getContext,
+  L as useArrayHash,
   E as useDataContext,
-  ne as useDataSource,
+  ae as useDataSource,
   k as useDataSourceMultiple,
-  K as useDataSubscribe,
-  re as useDataSubscribeMultiple,
-  se as useDataSubscribeMultipleWithDebounce,
-  ae as useDataSubscribeWithTransform,
-  oe as useQuickSubscribe
+  I as useDataSubscribe,
+  se as useDataSubscribeMultiple,
+  ce as useDataSubscribeMultipleWithDebounce,
+  re as useDataSubscribeWithTransform,
+  ue as useQuickSubscribe
 };
 //# sourceMappingURL=index.es.js.map