react-use-singleton-hook 1.0.14 → 1.0.16

package/README.md

@@ -24,6 +24,56 @@ pnpm add react-use-singleton-hook
 
 This assumes that you’re using [npm](http://npmjs.com/) package manager
 
+## What is a singleton hook
+
+- **Works like React Context**: A singleton hook encapsulates shared state logic and exposes it to any component that calls the hook, similar to how context provides values to consumers.
+- **Mounts lazily**: The hook logic runs only when the first component uses it. After mounting, it stays active for the app’s lifetime unless configured to unmount.
+- **No setup required**: No need for context providers or changes to your app structure. The hook uses React’s built-in hooks and a hidden DOM node for efficient, portable state management.
+
+## Examples
+
+#### dark/light mode switch
+Whenever `Configurator` changes darkMode, all subscribed components are updated.
+
+```javascript
+/***************    file:src/services/darkMode.js    ***************/  
+import { useState } from 'react';
+import { createSingletonGlobalState } from 'react-use-singleton-hook';
+
+const initDarkMode = false;
+let globalSetMode = () => { throw new Error('you must useDarkMode before setting its state'); };
+
+export const useDarkMode = createSingletonGlobalState(initDarkMode, () => {
+  const [mode, setMode] = useState(initDarkMode);
+  globalSetMode = setMode;
+  return mode;
+});
+
+export const setDarkMode = mode => globalSetMode(mode);
+
+
+/***************    file:src/compoents/App.js    ***************/
+
+import  React from 'react';
+import { useDarkMode, setDarkMode } from 'src/services/darkMode';
+
+const Consumer1 = () => {
+  const mode = useDarkMode();
+  return <div className={`is-dark-${mode}`}>Consumer1 - {`${mode}`}</div>;
+};
+
+const Consumer2 = () => {
+  const mode = useDarkMode();
+  return <div className={`is-dark-${mode}`}>Consumer2 - {`${mode}`}</div>;
+};
+
+const Configurator = () => {
+  const mode = useDarkMode();
+  return <button onClick={() => setDarkMode(!mode)}>Toggle dark/light</button>;
+};
+
+```
+
 ### Compatibility
 
 - ✅ Supports React 18.x and 19.x

package/dist/main.js

@@ -1,49 +1,59 @@
 import i, { useEffect as v } from "react";
-import { createRoot as E } from "react-dom/client";
-const g = (t) => {
-  let e;
-  const u = /* @__PURE__ */ new Set(), l = (o, s) => {
-    const n = typeof o == "function" ? o(e) : o;
-    if (!Object.is(n, e)) {
-      const m = e;
-      e = s ?? (typeof n != "object" || n === null) ? n : Object.assign({}, e, n), u.forEach((b) => b(e, m));
+import { createRoot as h } from "react-dom/client";
+const g = (e) => {
+  let n;
+  const s = /* @__PURE__ */ new Set(), l = (u, o) => {
+    const t = typeof u == "function" ? u(n) : u;
+    if (!Object.is(t, n)) {
+      const m = n;
+      n = o ?? (typeof t != "object" || t === null) ? t : Object.assign({}, n, t), s.forEach((b) => b(n, m));
     }
-  }, a = () => e, c = { setState: l, getState: a, getInitialState: () => r, subscribe: (o) => (u.add(o), () => u.delete(o)) }, r = e = t(l, a, c);
+  }, a = () => n, c = { setState: l, getState: a, getInitialState: () => r, subscribe: (u) => (s.add(u), () => s.delete(u)) }, r = n = e(l, a, c);
   return c;
-}, h = ((t) => t ? g(t) : g), k = (t) => t;
-function C(t, e = k) {
-  const u = i.useSyncExternalStore(
-    t.subscribe,
-    i.useCallback(() => e(t.getState()), [t, e]),
-    i.useCallback(() => e(t.getInitialState()), [t, e])
+}, k = ((e) => e ? g(e) : g), E = (e) => e;
+function C(e, n = E) {
+  const s = i.useSyncExternalStore(
+    e.subscribe,
+    i.useCallback(() => n(e.getState()), [e, n]),
+    i.useCallback(() => n(e.getInitialState()), [e, n])
   );
-  return i.useDebugValue(u), u;
+  return i.useDebugValue(s), s;
 }
-const j = (t, e, u = {}) => {
-  const { mountId: l, unmountIfNoConsumers: a = !0 } = u, f = typeof t == "function";
-  let S = !f, c = f ? void 0 : t;
-  const r = h(() => ({ value: c }));
-  let o = 0, s = null, n = null;
+const j = (e, n, s = {}) => {
+  const { mountId: l, unmountIfNoConsumers: a = !0 } = s, f = typeof e == "function";
+  let S = !f, c = f ? void 0 : e;
+  const r = k(() => ({ value: c }));
+  let u = 0, o = null, t = null;
   function m() {
-    const d = e();
+    const d = n();
     return v(() => {
       r.setState({ value: d });
     }, [d]), null;
   }
   function b() {
-    s || (n = document.createElement("div"), n.style.display = "none", l && (n.id = l), document.body.appendChild(n), s = E(n), s.render(i.createElement(m)));
-  }
-  function I() {
-    !s || !n || (s.unmount(), n.remove(), s = null, n = null);
+    if (o) {
+      if (t && document.body.contains(t)) return;
+      try {
+        o.unmount();
+      } catch {
+      }
+      o = null, t = null;
+    }
+    t = document.createElement("div"), t.style.display = "none", l && (t.id = l), document.body.appendChild(t), o = h(t), o.render(i.createElement(m));
   }
   function y() {
-    !S && f && (S = !0, c = t(), r.setState({ value: c }));
+    !o || !t || queueMicrotask(() => {
+      !o || !t || u > 0 || (o.unmount(), t.remove(), o = null, t = null);
+    });
+  }
+  function I() {
+    !S && f && (S = !0, c = e(), r.setState({ value: c }));
   }
   function R() {
-    y();
+    I();
     const d = C(r, (p) => p.value);
-    return v(() => (o += 1, o === 1 && b(), () => {
-      o -= 1, o === 0 && a && I();
+    return v(() => (u += 1, o || b(), () => {
+      u -= 1, u === 0 && a && y();
     }), []), d;
   }
   return R;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-use-singleton-hook",
-  "version": "1.0.14",
+  "version": "1.0.16",
   "type": "module",
   "main": "dist/main.js",
   "module": "dist/main.js",