@rokku-x/react-hook-loading-spinner 0.1.12 → 0.2.1

package/dist/hooks/ssrLoading.d.ts

@@ -1,2 +1,9 @@
-export { default } from '../mainLogic';
-export * from '../mainLogic';
+export default function ssrLoading(): {
+    overrideLoading: (state: boolean | null) => void;
+    startLoading: () => void;
+    stopLoading: () => void;
+    readonly isLocalLoading: boolean;
+    asyncUseLoading: <R, _ extends any[]>(asyncFunction: Promise<R>) => Promise<R>;
+    readonly isLoading: boolean;
+};
+export * from '../store/loadingStore';

package/dist/hooks/useLoading.d.ts

@@ -1,2 +1,9 @@
-export { default } from '../mainLogic';
-export * from '../mainLogic';
+export default function useLoading(): {
+    overrideLoading: (state: boolean | null) => void;
+    startLoading: () => void;
+    stopLoading: () => void;
+    readonly isLocalLoading: boolean;
+    asyncUseLoading: <R, _ extends any[]>(asyncFunction: Promise<R>) => Promise<R>;
+    readonly isLoading: boolean;
+};
+export * from '../store/loadingStore';

package/dist/index.cjs.js

@@ -1,10 +1,5 @@
-"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const h=require("react/jsx-runtime"),m=require("react"),N=require("react-dom"),I=n=>{let t;const e=new Set,i=(f,r)=>{const d=typeof f=="function"?f(t):f;if(!Object.is(d,t)){const g=t;t=r??(typeof d!="object"||d===null)?d:Object.assign({},t,d),e.forEach(u=>u(t,g))}},o=()=>t,s={setState:i,getState:o,getInitialState:()=>p,subscribe:f=>(e.add(f),()=>e.delete(f))},p=t=n(i,o,s);return s},D=(n=>n?I(n):I),F=n=>n;function M(n,t=F){const e=m.useSyncExternalStore(n.subscribe,m.useCallback(()=>t(n.getState()),[n,t]),m.useCallback(()=>t(n.getInitialState()),[n,t]));return m.useDebugValue(e),e}const j=n=>{const t=D(n),e=i=>M(t,i);return Object.assign(e,t),e},P=(n=>n?j(n):j),T={BASE_URL:"/",DEV:!1,MODE:"production",PROD:!0,SSR:!1},C=new Map,x=n=>{const t=C.get(n);return t?Object.fromEntries(Object.entries(t.stores).map(([e,i])=>[e,i.getState()])):{}},$=(n,t,e)=>{if(n===void 0)return{type:"untracked",connection:t.connect(e)};const i=C.get(e.name);if(i)return{type:"tracked",store:n,...i};const o={connection:t.connect(e),stores:{}};return C.set(e.name,o),{type:"tracked",store:n,...o}},J=(n,t)=>{if(t===void 0)return;const e=C.get(n);e&&(delete e.stores[t],Object.keys(e.stores).length===0&&C.delete(n))},U=n=>{var t,e;if(!n)return;const i=n.split(`
-`),o=i.findIndex(v=>v.includes("api.setState"));if(o<0)return;const l=((t=i[o+1])==null?void 0:t.trim())||"";return(e=/.+ (.+) .+/.exec(l))==null?void 0:e[1]},z=(n,t={})=>(e,i,o)=>{const{enabled:l,anonymousActionType:v,store:s,...p}=t;let f;try{f=(l??(T?"production":void 0)!=="production")&&window.__REDUX_DEVTOOLS_EXTENSION__}catch{}if(!f)return n(e,i,o);const{connection:r,...d}=$(s,f,p);let g=!0;o.setState=((c,L,a)=>{const S=e(c,L);if(!g)return S;const _=a===void 0?{type:v||U(new Error().stack)||"anonymous"}:typeof a=="string"?{type:a}:a;return s===void 0?(r?.send(_,i()),S):(r?.send({..._,type:`${s}/${_.type}`},{...x(p.name),[s]:o.getState()}),S)}),o.devtools={cleanup:()=>{r&&typeof r.unsubscribe=="function"&&r.unsubscribe(),J(p.name,s)}};const u=(...c)=>{const L=g;g=!1,e(...c),g=L},E=n(o.setState,i,o);if(d.type==="untracked"?r?.init(E):(d.stores[d.store]=o,r?.init(Object.fromEntries(Object.entries(d.stores).map(([c,L])=>[c,c===d.store?E:L.getState()])))),o.dispatchFromDevtools&&typeof o.dispatch=="function"){let c=!1;const L=o.dispatch;o.dispatch=(...a)=>{(T?"production":void 0)!=="production"&&a[0].type==="__setState"&&!c&&(console.warn('[zustand devtools middleware] "__setState" action type is reserved to set state from the devtools. Avoid using it.'),c=!0),L(...a)}}return r.subscribe(c=>{var L;switch(c.type){case"ACTION":if(typeof c.payload!="string"){console.error("[zustand devtools middleware] Unsupported action format");return}return w(c.payload,a=>{if(a.type==="__setState"){if(s===void 0){u(a.state);return}Object.keys(a.state).length!==1&&console.error(`
-                    [zustand devtools middleware] Unsupported __setState action format.
-                    When using 'store' option in devtools(), the 'state' should have only one key, which is a value of 'store' that was passed in devtools(),
-                    and value of this only key should be a state object. Example: { "type": "__setState", "state": { "abc123Store": { "foo": "bar" } } }
-                    `);const S=a.state[s];if(S==null)return;JSON.stringify(o.getState())!==JSON.stringify(S)&&u(S);return}o.dispatchFromDevtools&&typeof o.dispatch=="function"&&o.dispatch(a)});case"DISPATCH":switch(c.payload.type){case"RESET":return u(E),s===void 0?r?.init(o.getState()):r?.init(x(p.name));case"COMMIT":if(s===void 0){r?.init(o.getState());return}return r?.init(x(p.name));case"ROLLBACK":return w(c.state,a=>{if(s===void 0){u(a),r?.init(o.getState());return}u(a[s]),r?.init(x(p.name))});case"JUMP_TO_STATE":case"JUMP_TO_ACTION":return w(c.state,a=>{if(s===void 0){u(a);return}JSON.stringify(o.getState())!==JSON.stringify(a[s])&&u(a[s])});case"IMPORT_STATE":{const{nextLiftedState:a}=c.payload,S=(L=a.computedStates.slice(-1)[0])==null?void 0:L.state;if(!S)return;u(s===void 0?S:S[s]),r?.send(null,a);return}case"PAUSE_RECORDING":return g=!g}return}}),E},W=z,w=(n,t)=>{let e;try{e=JSON.parse(n)}catch(i){console.error("[zustand devtools middleware] Could not parse the received json",i)}e!==void 0&&t(e)};class R extends EventTarget{constructor(){super(...arguments),this.controller=new AbortController}on(t,e){return this.addEventListener(t,i=>e(i.detail),{signal:this.controller.signal}),this}once(t,e){return this.addEventListener(t,i=>e(i.detail),{signal:this.controller.signal,once:!0}),this}emit(t,e){return this.dispatchEvent(new CustomEvent(t,{detail:e}))}removeAllListeners(){this.controller.abort(),this.controller=new AbortController}}const b=new R,V=P()(W((n,t)=>({loadingCount:0,overrideState:null,localCounters:{},isLoading(){return t().overrideState??t().loadingCount>0},actions:{isGlobalLoading(){return t().isLoading()},startLoading:e=>{const i=t().isLoading();n(l=>({loadingCount:l.loadingCount+1})),e&&n(l=>({localCounters:{...l.localCounters,[e]:(l.localCounters[e]??0)+1}}));const o=t().isLoading();o&&!i&&b.emit("start",null),b.emit("change",{isLoading:o,isOverrideState:t().overrideState!==null})},stopLoading:e=>{const i=t().isLoading(),o=e?t().localCounters[e]??0:0;e&&o>0&&n(v=>({loadingCount:Math.max(0,v.loadingCount-1),localCounters:{...v.localCounters,[e]:Math.max(0,v.localCounters[e]-1)}}));const l=t().isLoading();!l&&i&&b.emit("stop",null),b.emit("change",{isLoading:l,isOverrideState:t().overrideState!==null})},overrideLoading:e=>{const i=t().isLoading();n({overrideState:e});const o=t().isLoading();o&&!i?b.emit("start",null):!o&&i&&b.emit("stop",null),b.emit("change",{isLoading:o,isOverrideState:e!==null})},getLocalCounter:e=>t().localCounters[e]??0,isLocalLoading:e=>(t().localCounters[e]??0)>0}})));function O(){const n=m.useId(),{actions:t}=V(l=>l),e=()=>{t.startLoading(n)},i=()=>{t.isLocalLoading(n)&&t.stopLoading(n)},o=async l=>{e();try{return await l}finally{i()}};return{overrideLoading:t.overrideLoading,startLoading:e,stopLoading:i,get isLocalLoading(){return t.isLocalLoading(n)},asyncUseLoading:o,get isLoading(){return t.isGlobalLoading()}}}const y={Spin:"spin",FadeInOut:"fadeInOut",None:"none"},q=({scale:n=1,animationType:t=y.Spin,animationDuration:e,children:i,style:o,className:l,id:v,prefix:s})=>{const p=t,f=t===y.Spin?1:t===y.FadeInOut?2:0,r=e||f,d=t===y.Spin?"linear":t===y.FadeInOut?"ease-in-out":"linear",g=t===y.None?"none":`${s}-${p} ${r}s ${d} infinite`;return h.jsx("div",{style:{animation:g,...n!==1?{zoom:n}:{},...o},className:l,id:v,children:i})},A=n=>h.jsx("div",{id:"loading-circle",style:{width:"90px",height:"90px",border:"15px solid #f3f3f3",borderTop:"15px solid #009b4bff",borderRadius:"50%",boxSizing:"border-box"},...n}),k=n=>h.jsx("div",{style:{padding:"20px",fontSize:"25px",color:"#333",fontFamily:"system-ui, sans-serif"},...n,children:"Please wait..."});function B({loadingComponent:n,loadingComponentScale:t=1,animationType:e=y.Spin,animationDuration:i,wrapperStyle:o,wrapperClassName:l,wrapperId:v,animationWrapperStyle:s,animationWrapperClassName:p,animationWrapperId:f}){n=n||(e===y.Spin?A:k);const r=m.useRef(Math.random().toString(36).substring(2,6).replace(/[0-9]/g,"")),{isLoading:d}=O(),g=m.useRef(null);m.useEffect(()=>{d?(g.current?.showModal(),document.body.setAttribute("inert","")):(g.current?.close(),document.body.removeAttribute("inert"))},[d]);const u=v||"loading-wrapper-"+r.current;return d?N.createPortal(h.jsxs(h.Fragment,{children:[h.jsx("style",{children:`
-                        dialog#${u}[open] {
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react"),O=require("crypto"),L=require("react/jsx-runtime"),A=require("react-dom"),y=n=>{let t;const e=new Set,o=(s,l)=>{const d=typeof s=="function"?s(t):s;if(!Object.is(d,t)){const p=t;t=l??(typeof d!="object"||d===null)?d:Object.assign({},t,d),e.forEach(m=>m(t,p))}},r=()=>t,f={setState:o,getState:r,getInitialState:()=>b,subscribe:s=>(e.add(s),()=>e.delete(s))},b=t=n(o,r,f);return f},R=(n=>n?y(n):y),$=n=>n;function F(n,t=$){const e=a.useSyncExternalStore(n.subscribe,a.useCallback(()=>t(n.getState()),[n,t]),a.useCallback(()=>t(n.getInitialState()),[n,t]));return a.useDebugValue(e),e}const x=n=>{const t=R(n),e=o=>F(t,o);return Object.assign(e,t),e},k=(n=>n?x(n):x);class C extends EventTarget{constructor(){super(...arguments),this.controller=new AbortController}on(t,e){return this.addEventListener(t,o=>e(o.detail),{signal:this.controller.signal}),this}once(t,e){return this.addEventListener(t,o=>e(o.detail),{signal:this.controller.signal,once:!0}),this}emit(t,e){return this.dispatchEvent(new CustomEvent(t,{detail:e}))}removeAllListeners(){this.controller.abort(),this.controller=new AbortController}}const g=new C,v=k()((n,t)=>({loadingCount:0,overrideState:null,localCounters:{},isLoading(){return t().overrideState??t().loadingCount>0},actions:{isGlobalLoading(){return t().isLoading()},startLoading:e=>{const o=t().isLoading();n(i=>({loadingCount:i.loadingCount+1})),e&&n(i=>({localCounters:{...i.localCounters,[e]:(i.localCounters[e]??0)+1}}));const r=t().isLoading();r&&!o&&g.emit("start",null),g.emit("change",{isLoading:r,isOverrideState:t().overrideState!==null})},stopLoading:e=>{const o=t().isLoading(),r=e?t().localCounters[e]??0:0;e&&r>0&&n(u=>({loadingCount:Math.max(0,u.loadingCount-1),localCounters:{...u.localCounters,[e]:Math.max(0,u.localCounters[e]-1)}}));const i=t().isLoading();!i&&o&&g.emit("stop",null),g.emit("change",{isLoading:i,isOverrideState:t().overrideState!==null})},overrideLoading:e=>{const o=t().isLoading();n({overrideState:e});const r=t().isLoading();r&&!o?g.emit("start",null):!r&&o&&g.emit("stop",null),g.emit("change",{isLoading:r,isOverrideState:e!==null})},getLocalCounter:e=>t().localCounters[e]??0,isLocalLoading:e=>(t().localCounters[e]??0)>0}}));function w(){const n=a.useId(),{actions:t}=v(i=>i),e=()=>{t.startLoading(n)},o=()=>{t.isLocalLoading(n)&&t.stopLoading(n)},r=async i=>{e();try{return await i}finally{o()}};return{overrideLoading:t.overrideLoading,startLoading:e,stopLoading:o,get isLocalLoading(){return t.isLocalLoading(n)},asyncUseLoading:r,get isLoading(){return t.isGlobalLoading()}}}function M(){const n=O.randomUUID(),{actions:t}=v(i=>i),e=()=>{t.startLoading(n)},o=()=>{t.isLocalLoading(n)&&t.stopLoading(n)},r=async i=>{e();try{return await i}finally{o()}};return{overrideLoading:t.overrideLoading,startLoading:e,stopLoading:o,get isLocalLoading(){return t.isLocalLoading(n)},asyncUseLoading:r,get isLoading(){return t.isGlobalLoading()}}}const c={Spin:"spin",FadeInOut:"fadeInOut",None:"none"},N=({scale:n=1,animationType:t=c.Spin,animationDuration:e,children:o,style:r,className:i,id:u,prefix:f})=>{const b=t,s=t===c.Spin?1:t===c.FadeInOut?2:0,l=e||s,d=t===c.Spin?"linear":t===c.FadeInOut?"ease-in-out":"linear",p=t===c.None?"none":`${f}-${b} ${l}s ${d} infinite`;return L.jsx("div",{style:{animation:p,...n!==1?{zoom:n}:{},...r},className:i,id:u,children:o})},E=n=>L.jsx("div",{id:"loading-circle",style:{width:"90px",height:"90px",border:"15px solid #f3f3f3",borderTop:"15px solid #009b4bff",borderRadius:"50%",boxSizing:"border-box"},...n}),I=n=>L.jsx("div",{style:{padding:"20px",fontSize:"25px",color:"#333",fontFamily:"system-ui, sans-serif"},...n,children:"Please wait..."});function P({loadingComponent:n,loadingComponentScale:t=1,animationType:e=c.Spin,animationDuration:o,wrapperStyle:r,wrapperClassName:i,wrapperId:u,animationWrapperStyle:f,animationWrapperClassName:b,animationWrapperId:s}){n=n||(e===c.Spin?E:I);const l=a.useRef(Math.random().toString(36).substring(2,6).replace(/[0-9]/g,"")),{loadingCount:d,overrideState:p}=v(j=>j),m=p??d>0,S=a.useRef(null);a.useEffect(()=>{m?(S.current?.showModal(),document.body.setAttribute("inert","")):(S.current?.close(),document.body.removeAttribute("inert"))},[m]);const h=u||"loading-wrapper-"+l.current;return m?A.createPortal(L.jsxs(L.Fragment,{children:[L.jsx("style",{children:`
+                        dialog#${h}[open] {
                             display: flex !important;
                             justify-content: center;
                             align-items: center;
@@ -13,18 +8,18 @@
                             max-width: 100%;
                             max-height: 100%;
                         }
-                        @keyframes ${r.current}-spin {
+                        @keyframes ${l.current}-spin {
                             0% { transform: rotate(0deg); }
                             100% { transform: rotate(360deg); }
                         }
-                        @keyframes ${r.current}-fadeInOut {
+                        @keyframes ${l.current}-fadeInOut {
                             0%, 100% { opacity: 0.2; }
                             50% { opacity: 1; }
                         }
-                        body:has(dialog#${u}[open]) {
+                        body:has(dialog#${h}[open]) {
                             overflow: hidden;
                         }
                         body {
                             scrollbar-gutter: stable;
                         }
-                    `}),h.jsx("dialog",{ref:g,style:{border:"none",padding:0,backgroundColor:"rgba(0, 0, 0, 0.5)",backdropFilter:"blur(2px)",...o},className:l,id:u,children:h.jsx(q,{scale:t,animationType:e,animationDuration:i,style:s,className:p,id:f,prefix:r.current,children:m.isValidElement(n)?n:m.createElement(n)})})]}),document.body):null}function G({isLoading:n=!1}){const{startLoading:t,stopLoading:e}=O();return m.useEffect(()=>(n?t():e(),()=>{n&&e()}),[n]),null}exports.AnimationType=y;exports.EventEmitter=R;exports.Loading=G;exports.LoadingCircle=A;exports.LoadingPleaseWait=k;exports.LoadingRenderer=B;exports.loadingEventTarget=b;exports.ssrLoading=O;exports.useLoading=O;
+                    `}),L.jsx("dialog",{ref:S,style:{border:"none",padding:0,backgroundColor:"rgba(0, 0, 0, 0.5)",backdropFilter:"blur(2px)",...r},className:i,id:h,children:L.jsx(N,{scale:t,animationType:e,animationDuration:o,style:f,className:b,id:s,prefix:l.current,children:a.isValidElement(n)?n:a.createElement(n)})})]}),document.body):null}function q({isLoading:n=!1}){const{startLoading:t,stopLoading:e}=w();return a.useEffect(()=>(n?t():e(),()=>{n&&e()}),[n]),null}exports.AnimationType=c;exports.EventEmitter=C;exports.Loading=q;exports.LoadingCircle=E;exports.LoadingPleaseWait=I;exports.LoadingRenderer=P;exports.loadingEventTarget=g;exports.ssrLoading=M;exports.useLoading=w;

package/dist/index.d.ts

@@ -5,4 +5,4 @@ export type { AnimationType as AnimationTypeType } from './components/LoadingRen
 export { default as Loading } from './components/Loading';
 export { default as LoadingRenderer } from './components/LoadingRenderer';
 export { default as EventEmitter } from './utils/EventEmitter';
-export { loadingEventTarget } from './mainLogic';
+export { loadingEventTarget } from './store/loadingStore';

package/dist/index.esm.js

@@ -1,232 +1,60 @@
 "use client";
-import { jsx as L, jsxs as N, Fragment as j } from "react/jsx-runtime";
-import y, { useId as D, useRef as x, useEffect as k } from "react";
-import { createPortal as F } from "react-dom";
-const I = (n) => {
+import L, { useId as E, useRef as y, useEffect as w } from "react";
+import { randomUUID as O } from "crypto";
+import { jsx as f, jsxs as $, Fragment as j } from "react/jsx-runtime";
+import { createPortal as A } from "react-dom";
+const x = (n) => {
   let t;
-  const e = /* @__PURE__ */ new Set(), r = (f, i) => {
-    const d = typeof f == "function" ? f(t) : f;
-    if (!Object.is(d, t)) {
-      const g = t;
-      t = i ?? (typeof d != "object" || d === null) ? d : Object.assign({}, t, d), e.forEach((u) => u(t, g));
+  const o = /* @__PURE__ */ new Set(), e = (a, s) => {
+    const l = typeof a == "function" ? a(t) : a;
+    if (!Object.is(l, t)) {
+      const p = t;
+      t = s ?? (typeof l != "object" || l === null) ? l : Object.assign({}, t, l), o.forEach((b) => b(t, p));
     }
-  }, o = () => t, s = { setState: r, getState: o, getInitialState: () => p, subscribe: (f) => (e.add(f), () => e.delete(f)) }, p = t = n(r, o, s);
-  return s;
-}, M = ((n) => n ? I(n) : I), $ = (n) => n;
-function P(n, t = $) {
-  const e = y.useSyncExternalStore(
+  }, r = () => t, g = { setState: e, getState: r, getInitialState: () => m, subscribe: (a) => (o.add(a), () => o.delete(a)) }, m = t = n(e, r, g);
+  return g;
+}, F = ((n) => n ? x(n) : x), k = (n) => n;
+function N(n, t = k) {
+  const o = L.useSyncExternalStore(
     n.subscribe,
-    y.useCallback(() => t(n.getState()), [n, t]),
-    y.useCallback(() => t(n.getInitialState()), [n, t])
+    L.useCallback(() => t(n.getState()), [n, t]),
+    L.useCallback(() => t(n.getInitialState()), [n, t])
   );
-  return y.useDebugValue(e), e;
+  return L.useDebugValue(o), o;
 }
-const T = (n) => {
-  const t = M(n), e = (r) => P(t, r);
-  return Object.assign(e, t), e;
-}, J = ((n) => n ? T(n) : T), R = { BASE_URL: "/", DEV: !1, MODE: "production", PROD: !0, SSR: !1 }, C = /* @__PURE__ */ new Map(), w = (n) => {
-  const t = C.get(n);
-  return t ? Object.fromEntries(
-    Object.entries(t.stores).map(([e, r]) => [e, r.getState()])
-  ) : {};
-}, U = (n, t, e) => {
-  if (n === void 0)
-    return {
-      type: "untracked",
-      connection: t.connect(e)
-    };
-  const r = C.get(e.name);
-  if (r)
-    return { type: "tracked", store: n, ...r };
-  const o = {
-    connection: t.connect(e),
-    stores: {}
-  };
-  return C.set(e.name, o), { type: "tracked", store: n, ...o };
-}, z = (n, t) => {
-  if (t === void 0) return;
-  const e = C.get(n);
-  e && (delete e.stores[t], Object.keys(e.stores).length === 0 && C.delete(n));
-}, V = (n) => {
-  var t, e;
-  if (!n) return;
-  const r = n.split(`
-`), o = r.findIndex(
-    (v) => v.includes("api.setState")
-  );
-  if (o < 0) return;
-  const l = ((t = r[o + 1]) == null ? void 0 : t.trim()) || "";
-  return (e = /.+ (.+) .+/.exec(l)) == null ? void 0 : e[1];
-}, W = (n, t = {}) => (e, r, o) => {
-  const { enabled: l, anonymousActionType: v, store: s, ...p } = t;
-  let f;
-  try {
-    f = (l ?? (R ? "production" : void 0) !== "production") && window.__REDUX_DEVTOOLS_EXTENSION__;
-  } catch {
-  }
-  if (!f)
-    return n(e, r, o);
-  const { connection: i, ...d } = U(s, f, p);
-  let g = !0;
-  o.setState = ((c, m, a) => {
-    const S = e(c, m);
-    if (!g) return S;
-    const O = a === void 0 ? {
-      type: v || V(new Error().stack) || "anonymous"
-    } : typeof a == "string" ? { type: a } : a;
-    return s === void 0 ? (i?.send(O, r()), S) : (i?.send(
-      {
-        ...O,
-        type: `${s}/${O.type}`
-      },
-      {
-        ...w(p.name),
-        [s]: o.getState()
-      }
-    ), S);
-  }), o.devtools = {
-    cleanup: () => {
-      i && typeof i.unsubscribe == "function" && i.unsubscribe(), z(p.name, s);
-    }
-  };
-  const u = (...c) => {
-    const m = g;
-    g = !1, e(...c), g = m;
-  }, _ = n(o.setState, r, o);
-  if (d.type === "untracked" ? i?.init(_) : (d.stores[d.store] = o, i?.init(
-    Object.fromEntries(
-      Object.entries(d.stores).map(([c, m]) => [
-        c,
-        c === d.store ? _ : m.getState()
-      ])
-    )
-  )), o.dispatchFromDevtools && typeof o.dispatch == "function") {
-    let c = !1;
-    const m = o.dispatch;
-    o.dispatch = (...a) => {
-      (R ? "production" : void 0) !== "production" && a[0].type === "__setState" && !c && (console.warn(
-        '[zustand devtools middleware] "__setState" action type is reserved to set state from the devtools. Avoid using it.'
-      ), c = !0), m(...a);
-    };
-  }
-  return i.subscribe((c) => {
-    var m;
-    switch (c.type) {
-      case "ACTION":
-        if (typeof c.payload != "string") {
-          console.error(
-            "[zustand devtools middleware] Unsupported action format"
-          );
-          return;
-        }
-        return E(
-          c.payload,
-          (a) => {
-            if (a.type === "__setState") {
-              if (s === void 0) {
-                u(a.state);
-                return;
-              }
-              Object.keys(a.state).length !== 1 && console.error(
-                `
-                    [zustand devtools middleware] Unsupported __setState action format.
-                    When using 'store' option in devtools(), the 'state' should have only one key, which is a value of 'store' that was passed in devtools(),
-                    and value of this only key should be a state object. Example: { "type": "__setState", "state": { "abc123Store": { "foo": "bar" } } }
-                    `
-              );
-              const S = a.state[s];
-              if (S == null)
-                return;
-              JSON.stringify(o.getState()) !== JSON.stringify(S) && u(S);
-              return;
-            }
-            o.dispatchFromDevtools && typeof o.dispatch == "function" && o.dispatch(a);
-          }
-        );
-      case "DISPATCH":
-        switch (c.payload.type) {
-          case "RESET":
-            return u(_), s === void 0 ? i?.init(o.getState()) : i?.init(w(p.name));
-          case "COMMIT":
-            if (s === void 0) {
-              i?.init(o.getState());
-              return;
-            }
-            return i?.init(w(p.name));
-          case "ROLLBACK":
-            return E(c.state, (a) => {
-              if (s === void 0) {
-                u(a), i?.init(o.getState());
-                return;
-              }
-              u(a[s]), i?.init(w(p.name));
-            });
-          case "JUMP_TO_STATE":
-          case "JUMP_TO_ACTION":
-            return E(c.state, (a) => {
-              if (s === void 0) {
-                u(a);
-                return;
-              }
-              JSON.stringify(o.getState()) !== JSON.stringify(a[s]) && u(a[s]);
-            });
-          case "IMPORT_STATE": {
-            const { nextLiftedState: a } = c.payload, S = (m = a.computedStates.slice(-1)[0]) == null ? void 0 : m.state;
-            if (!S) return;
-            u(s === void 0 ? S : S[s]), i?.send(
-              null,
-              // FIXME no-any
-              a
-            );
-            return;
-          }
-          case "PAUSE_RECORDING":
-            return g = !g;
-        }
-        return;
-    }
-  }), _;
-}, B = W, E = (n, t) => {
-  let e;
-  try {
-    e = JSON.parse(n);
-  } catch (r) {
-    console.error(
-      "[zustand devtools middleware] Could not parse the received json",
-      r
-    );
-  }
-  e !== void 0 && t(e);
-};
-class G extends EventTarget {
+const C = (n) => {
+  const t = F(n), o = (e) => N(t, e);
+  return Object.assign(o, t), o;
+}, R = ((n) => n ? C(n) : C);
+class M extends EventTarget {
   constructor() {
     super(...arguments), this.controller = new AbortController();
   }
-  on(t, e) {
+  on(t, o) {
     return this.addEventListener(
       t,
-      (r) => e(r.detail),
+      (e) => o(e.detail),
       { signal: this.controller.signal }
     ), this;
   }
-  once(t, e) {
+  once(t, o) {
     return this.addEventListener(
       t,
-      (r) => e(r.detail),
+      (e) => o(e.detail),
       {
         signal: this.controller.signal,
         once: !0
       }
     ), this;
   }
-  emit(t, e) {
-    return this.dispatchEvent(new CustomEvent(t, { detail: e }));
+  emit(t, o) {
+    return this.dispatchEvent(new CustomEvent(t, { detail: o }));
   }
   removeAllListeners() {
     this.controller.abort(), this.controller = new AbortController();
   }
 }
-const b = new G(), X = J()(B((n, t) => ({
+const u = new M(), v = R()((n, t) => ({
   loadingCount: 0,
   overrideState: null,
   localCounters: {},
@@ -237,95 +65,121 @@ const b = new G(), X = J()(B((n, t) => ({
     isGlobalLoading() {
       return t().isLoading();
     },
-    startLoading: (e) => {
-      const r = t().isLoading();
-      n((l) => ({ loadingCount: l.loadingCount + 1 })), e && n((l) => ({
+    startLoading: (o) => {
+      const e = t().isLoading();
+      n((i) => ({ loadingCount: i.loadingCount + 1 })), o && n((i) => ({
         localCounters: {
-          ...l.localCounters,
-          [e]: (l.localCounters[e] ?? 0) + 1
+          ...i.localCounters,
+          [o]: (i.localCounters[o] ?? 0) + 1
         }
       }));
-      const o = t().isLoading();
-      o && !r && b.emit("start", null), b.emit("change", { isLoading: o, isOverrideState: t().overrideState !== null });
+      const r = t().isLoading();
+      r && !e && u.emit("start", null), u.emit("change", { isLoading: r, isOverrideState: t().overrideState !== null });
     },
-    stopLoading: (e) => {
-      const r = t().isLoading(), o = e ? t().localCounters[e] ?? 0 : 0;
-      e && o > 0 && n((v) => ({
-        loadingCount: Math.max(0, v.loadingCount - 1),
+    stopLoading: (o) => {
+      const e = t().isLoading(), r = o ? t().localCounters[o] ?? 0 : 0;
+      o && r > 0 && n((d) => ({
+        loadingCount: Math.max(0, d.loadingCount - 1),
         localCounters: {
-          ...v.localCounters,
-          [e]: Math.max(0, v.localCounters[e] - 1)
+          ...d.localCounters,
+          [o]: Math.max(0, d.localCounters[o] - 1)
         }
       }));
-      const l = t().isLoading();
-      !l && r && b.emit("stop", null), b.emit("change", { isLoading: l, isOverrideState: t().overrideState !== null });
+      const i = t().isLoading();
+      !i && e && u.emit("stop", null), u.emit("change", { isLoading: i, isOverrideState: t().overrideState !== null });
     },
-    overrideLoading: (e) => {
+    overrideLoading: (o) => {
+      const e = t().isLoading();
+      n({ overrideState: o });
       const r = t().isLoading();
-      n({ overrideState: e });
-      const o = t().isLoading();
-      o && !r ? b.emit("start", null) : !o && r && b.emit("stop", null), b.emit("change", { isLoading: o, isOverrideState: e !== null });
+      r && !e ? u.emit("start", null) : !r && e && u.emit("stop", null), u.emit("change", { isLoading: r, isOverrideState: o !== null });
     },
-    getLocalCounter: (e) => t().localCounters[e] ?? 0,
-    isLocalLoading: (e) => (t().localCounters[e] ?? 0) > 0
+    getLocalCounter: (o) => t().localCounters[o] ?? 0,
+    isLocalLoading: (o) => (t().localCounters[o] ?? 0) > 0
   }
-})));
-function A() {
-  const n = D(), { actions: t } = X((l) => l), e = () => {
+}));
+function U() {
+  const n = E(), { actions: t } = v((i) => i), o = () => {
+    t.startLoading(n);
+  }, e = () => {
+    t.isLocalLoading(n) && t.stopLoading(n);
+  }, r = async (i) => {
+    o();
+    try {
+      return await i;
+    } finally {
+      e();
+    }
+  };
+  return {
+    overrideLoading: t.overrideLoading,
+    startLoading: o,
+    stopLoading: e,
+    get isLocalLoading() {
+      return t.isLocalLoading(n);
+    },
+    asyncUseLoading: r,
+    get isLoading() {
+      return t.isGlobalLoading();
+    }
+  };
+}
+function q() {
+  const n = O(), { actions: t } = v((i) => i), o = () => {
     t.startLoading(n);
-  }, r = () => {
+  }, e = () => {
     t.isLocalLoading(n) && t.stopLoading(n);
-  }, o = async (l) => {
-    e();
+  }, r = async (i) => {
+    o();
     try {
-      return await l;
+      return await i;
     } finally {
-      r();
+      e();
     }
   };
   return {
     overrideLoading: t.overrideLoading,
-    startLoading: e,
-    stopLoading: r,
+    startLoading: o,
+    stopLoading: e,
     get isLocalLoading() {
       return t.isLocalLoading(n);
     },
-    asyncUseLoading: o,
+    asyncUseLoading: r,
     get isLoading() {
       return t.isGlobalLoading();
     }
   };
 }
-const h = {
+const c = {
   Spin: "spin",
   FadeInOut: "fadeInOut",
   None: "none"
-}, H = ({ scale: n = 1, animationType: t = h.Spin, animationDuration: e, children: r, style: o, className: l, id: v, prefix: s }) => {
-  const p = t, f = t === h.Spin ? 1 : t === h.FadeInOut ? 2 : 0, i = e || f, d = t === h.Spin ? "linear" : t === h.FadeInOut ? "ease-in-out" : "linear", g = t === h.None ? "none" : `${s}-${p} ${i}s ${d} infinite`;
-  return /* @__PURE__ */ L("div", { style: { animation: g, ...n !== 1 ? { zoom: n } : {}, ...o }, className: l, id: v, children: r });
-}, K = (n) => /* @__PURE__ */ L("div", { id: "loading-circle", style: { width: "90px", height: "90px", border: "15px solid #f3f3f3", borderTop: "15px solid #009b4bff", borderRadius: "50%", boxSizing: "border-box" }, ...n }), q = (n) => /* @__PURE__ */ L("div", { style: { padding: "20px", fontSize: "25px", color: "#333", fontFamily: "system-ui, sans-serif" }, ...n, children: "Please wait..." });
-function tt({
+}, z = ({ scale: n = 1, animationType: t = c.Spin, animationDuration: o, children: e, style: r, className: i, id: d, prefix: g }) => {
+  const m = t, a = t === c.Spin ? 1 : t === c.FadeInOut ? 2 : 0, s = o || a, l = t === c.Spin ? "linear" : t === c.FadeInOut ? "ease-in-out" : "linear", p = t === c.None ? "none" : `${g}-${m} ${s}s ${l} infinite`;
+  return /* @__PURE__ */ f("div", { style: { animation: p, ...n !== 1 ? { zoom: n } : {}, ...r }, className: i, id: d, children: e });
+}, D = (n) => /* @__PURE__ */ f("div", { id: "loading-circle", style: { width: "90px", height: "90px", border: "15px solid #f3f3f3", borderTop: "15px solid #009b4bff", borderRadius: "50%", boxSizing: "border-box" }, ...n }), G = (n) => /* @__PURE__ */ f("div", { style: { padding: "20px", fontSize: "25px", color: "#333", fontFamily: "system-ui, sans-serif" }, ...n, children: "Please wait..." });
+function H({
   loadingComponent: n,
   loadingComponentScale: t = 1,
-  animationType: e = h.Spin,
-  animationDuration: r,
-  wrapperStyle: o,
-  wrapperClassName: l,
-  wrapperId: v,
-  animationWrapperStyle: s,
-  animationWrapperClassName: p,
-  animationWrapperId: f
+  animationType: o = c.Spin,
+  animationDuration: e,
+  wrapperStyle: r,
+  wrapperClassName: i,
+  wrapperId: d,
+  animationWrapperStyle: g,
+  animationWrapperClassName: m,
+  animationWrapperId: a
 }) {
-  n = n || (e === h.Spin ? K : q);
-  const i = x(Math.random().toString(36).substring(2, 6).replace(/[0-9]/g, "")), { isLoading: d } = A(), g = x(null);
-  k(() => {
-    d ? (g.current?.showModal(), document.body.setAttribute("inert", "")) : (g.current?.close(), document.body.removeAttribute("inert"));
-  }, [d]);
-  const u = v || "loading-wrapper-" + i.current;
-  return d ? F(
-    /* @__PURE__ */ N(j, { children: [
-      /* @__PURE__ */ L("style", { children: `
-                        dialog#${u}[open] {
+  n = n || (o === c.Spin ? D : G);
+  const s = y(Math.random().toString(36).substring(2, 6).replace(/[0-9]/g, "")), { loadingCount: l, overrideState: p } = v((I) => I), b = p ?? l > 0, S = y(null);
+  w(() => {
+    b ? (S.current?.showModal(), document.body.setAttribute("inert", "")) : (S.current?.close(), document.body.removeAttribute("inert"));
+  }, [b]);
+  const h = d || "loading-wrapper-" + s.current;
+  return b ? A(
+    /* @__PURE__ */ $(j, { children: [
+      /* @__PURE__ */ f("style", { children: `
+                        dialog#${h}[open] {
                             display: flex !important;
                             justify-content: center;
                             align-items: center;
@@ -334,55 +188,55 @@ function tt({
                             max-width: 100%;
                             max-height: 100%;
                         }
-                        @keyframes ${i.current}-spin {
+                        @keyframes ${s.current}-spin {
                             0% { transform: rotate(0deg); }
                             100% { transform: rotate(360deg); }
                         }
-                        @keyframes ${i.current}-fadeInOut {
+                        @keyframes ${s.current}-fadeInOut {
                             0%, 100% { opacity: 0.2; }
                             50% { opacity: 1; }
                         }
-                        body:has(dialog#${u}[open]) {
+                        body:has(dialog#${h}[open]) {
                             overflow: hidden;
                         }
                         body {
                             scrollbar-gutter: stable;
                         }
                     ` }),
-      /* @__PURE__ */ L(
+      /* @__PURE__ */ f(
         "dialog",
         {
-          ref: g,
+          ref: S,
           style: {
             border: "none",
             padding: 0,
             backgroundColor: "rgba(0, 0, 0, 0.5)",
             backdropFilter: "blur(2px)",
-            ...o
+            ...r
           },
-          className: l,
-          id: u,
-          children: /* @__PURE__ */ L(H, { scale: t, animationType: e, animationDuration: r, style: s, className: p, id: f, prefix: i.current, children: y.isValidElement(n) ? n : y.createElement(n) })
+          className: i,
+          id: h,
+          children: /* @__PURE__ */ f(z, { scale: t, animationType: o, animationDuration: e, style: g, className: m, id: a, prefix: s.current, children: L.isValidElement(n) ? n : L.createElement(n) })
         }
       )
     ] }),
     document.body
   ) : null;
 }
-function et({ isLoading: n = !1 }) {
-  const { startLoading: t, stopLoading: e } = A();
-  return k(() => (n ? t() : e(), () => {
-    n && e();
+function J({ isLoading: n = !1 }) {
+  const { startLoading: t, stopLoading: o } = U();
+  return w(() => (n ? t() : o(), () => {
+    n && o();
   }), [n]), null;
 }
 export {
-  h as AnimationType,
-  G as EventEmitter,
-  et as Loading,
-  K as LoadingCircle,
-  q as LoadingPleaseWait,
-  tt as LoadingRenderer,
-  b as loadingEventTarget,
-  A as ssrLoading,
-  A as useLoading
+  c as AnimationType,
+  M as EventEmitter,
+  J as Loading,
+  D as LoadingCircle,
+  G as LoadingPleaseWait,
+  H as LoadingRenderer,
+  u as loadingEventTarget,
+  q as ssrLoading,
+  U as useLoading
 };

package/dist/store/loadingStore.d.ts

@@ -0,0 +1,26 @@
+import { default as EventEmitter } from '../utils/EventEmitter';
+type LoadingEvents = {
+    change: {
+        isLoading: boolean;
+        isOverrideState: boolean;
+    } | null;
+    start: null;
+    stop: null;
+};
+export declare const loadingEventTarget: EventEmitter<LoadingEvents>;
+interface Store {
+    loadingCount: number;
+    overrideState: boolean | null;
+    localCounters: Record<string, number>;
+    isLoading: () => boolean;
+    actions: {
+        isGlobalLoading: () => boolean;
+        startLoading: (instanceId?: string) => void;
+        stopLoading: (instanceId?: string) => void;
+        overrideLoading: (state: boolean | null) => void;
+        getLocalCounter: (instanceId: string) => number;
+        isLocalLoading: (instanceId: string) => boolean;
+    };
+}
+export declare const loadingStore: import('zustand').UseBoundStore<import('zustand').StoreApi<Store>>;
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rokku-x/react-hook-loading-spinner",
-  "version": "0.1.12",
+  "version": "0.2.1",
   "description": "A lightweight and flexible React loading state hook library with built-in spinner components, global state management, and zero dependencies (except React and Zustand).",
   "main": "dist/index.cjs.js",
   "module": "dist/index.esm.js",

package/dist/mainLogic.d.ts

@@ -1,19 +0,0 @@
-import { default as EventEmitter } from './utils/EventEmitter';
-type LoadingEvents = {
-    change: {
-        isLoading: boolean;
-        isOverrideState: boolean;
-    } | null;
-    start: null;
-    stop: null;
-};
-export declare const loadingEventTarget: EventEmitter<LoadingEvents>;
-export default function (): {
-    overrideLoading: (state: boolean | null) => void;
-    startLoading: () => void;
-    stopLoading: () => void;
-    readonly isLocalLoading: boolean;
-    asyncUseLoading: <R, _ extends any[]>(asyncFunction: Promise<R>) => Promise<R>;
-    readonly isLoading: boolean;
-};
-export {};