@ttoss/react-hooks 2.3.12 → 2.3.14

package/dist/index.cjs

@@ -0,0 +1,219 @@
+/** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
+Object.defineProperty(exports, Symbol.toStringTag, {
+  value: 'Module'
+});
+//#region \0rolldown/runtime.js
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (var keys = __getOwnPropNames(from), i = 0, n = keys.length, key; i < n; i++) {
+      key = keys[i];
+      if (!__hasOwnProp.call(to, key) && key !== except) {
+        __defProp(to, key, {
+          get: (k => from[k]).bind(null, key),
+          enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+        });
+      }
+    }
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
+  value: mod,
+  enumerable: true
+}) : target, mod));
+
+//#endregion
+let react = require("react");
+react = __toESM(react, 1);
+
+//#region src/useDebounce.ts
+const useDebounce = (value, delay) => {
+  const [debouncedValue, setDebouncedValue] = react.useState(value);
+  react.useEffect(() => {
+    const timer = setTimeout(() => {
+      return setDebouncedValue(value);
+    }, delay || 500);
+    return () => {
+      clearTimeout(timer);
+    };
+  }, [value, delay]);
+  return debouncedValue;
+};
+
+//#endregion
+//#region src/useScript.ts
+/**
+* https://usehooks.com/useScript/
+*
+* @param src: string - the url of the script to load.
+* @returns status: Status
+*/
+const useScript = src => {
+  /**
+  * Keep track of script status ("idle", "loading", "ready", "error")
+  */
+  const [status, setStatus] = react.useState(src ? "loading" : "idle");
+  react.useEffect(() => {
+    /**
+    * Allow falsy src value if waiting on other data needed for
+    * constructing the script URL passed to this hook.
+    */
+    if (!src) {
+      setStatus("idle");
+      return;
+    }
+    /**
+    * Fetch existing script element by src.
+    * It may have been added by another instance of this hook.
+    */
+    let script = document.querySelector(`script[src="${src}"]`);
+    if (!script) {
+      /**
+      * Create script element and set its src.
+      */
+      script = document.createElement("script");
+      script.src = src;
+      script.async = true;
+      script.setAttribute("data-status", "loading");
+      /**
+      * Add script to document body
+      */
+      document.body.appendChild(script);
+      /**
+      * Store status in attribute on script.
+      * This can be read by other instances of this hook.
+      */
+      const setAttributeFromEvent = event => {
+        if (script) script.setAttribute("data-status", event.type === "load" ? "ready" : "error");
+      };
+      script.addEventListener("load", setAttributeFromEvent);
+      script.addEventListener("error", setAttributeFromEvent);
+    } else
+      /**
+      		* Grab existing script status from attribute and set to state.
+      		*/
+      setStatus(script.getAttribute("data-status") || "error");
+    /**
+    * Script event handler to update status in state
+    * Note: Even if the script already exists we still need to add
+    * event handlers to update the state for *this* hook instance.
+    */
+    const setStateFromEvent = event => {
+      setStatus(event.type === "load" ? "ready" : "error");
+    };
+    /**
+    * Add event listeners.
+    */
+    script.addEventListener("load", setStateFromEvent);
+    script.addEventListener("error", setStateFromEvent);
+    /**
+    * Remove event listeners on cleanup.
+    */
+    return () => {
+      if (script) {
+        script.removeEventListener("load", setStateFromEvent);
+        script.removeEventListener("error", setStateFromEvent);
+      }
+    };
+  },
+  /**
+  * Only re-run effect if script src changes.
+  */
+  [src]);
+  return {
+    status
+  };
+};
+
+//#endregion
+//#region src/useStorage.ts
+function useStorage(key, defaultValue, options) {
+  const {
+    serializer,
+    parser,
+    logger,
+    syncData,
+    storage
+  } = react.useMemo(() => {
+    return {
+      serializer: JSON.stringify,
+      parser: JSON.parse,
+      logger: console.log,
+      syncData: true,
+      ...options
+    };
+  }, [options]);
+  const effectiveStorage = storage ?? (typeof window !== "undefined" ? window.localStorage : void 0);
+  const rawValueRef = react.useRef(null);
+  const [value, setValue] = react.useState(() => {
+    if (typeof window === "undefined" || !effectiveStorage) return defaultValue;
+    try {
+      rawValueRef.current = effectiveStorage.getItem(key);
+      return rawValueRef.current ? parser(rawValueRef.current) : defaultValue;
+    } catch (error) {
+      logger(error);
+      return defaultValue;
+    }
+  });
+  react.useEffect(() => {
+    if (typeof window === "undefined" || !effectiveStorage) return;
+    const updateLocalStorage = () => {
+      if (value !== void 0) {
+        const newValue = serializer(value);
+        const oldValue = rawValueRef.current;
+        rawValueRef.current = newValue;
+        effectiveStorage.setItem(key, newValue);
+        window.dispatchEvent(new StorageEvent("storage", {
+          storageArea: effectiveStorage,
+          url: window.location.href,
+          key,
+          newValue,
+          oldValue
+        }));
+      } else {
+        effectiveStorage.removeItem(key);
+        window.dispatchEvent(new StorageEvent("storage", {
+          storageArea: effectiveStorage,
+          url: window.location.href,
+          key
+        }));
+      }
+    };
+    try {
+      updateLocalStorage();
+    } catch (error) {
+      logger(error);
+    }
+  }, [key, logger, serializer, effectiveStorage, value]);
+  react.useEffect(() => {
+    if (!syncData) return;
+    const handleStorageChange = e => {
+      if (e.key !== key || e.storageArea !== effectiveStorage) return;
+      try {
+        if (e.newValue !== rawValueRef.current) {
+          rawValueRef.current = e.newValue;
+          setValue(e.newValue ? parser(e.newValue) : void 0);
+        }
+      } catch (error) {
+        logger(error);
+      }
+    };
+    if (typeof window === "undefined") return;
+    window.addEventListener("storage", handleStorageChange);
+    return () => {
+      return window.removeEventListener("storage", handleStorageChange);
+    };
+  }, [key, logger, parser, effectiveStorage, syncData]);
+  return [value, setValue];
+}
+
+//#endregion
+exports.useDebounce = useDebounce;
+exports.useScript = useScript;
+exports.useStorage = useStorage;

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

@@ -1,7 +1,10 @@
-import * as React from 'react';
 
-declare const useDebounce: <T>(value: T, delay?: number) => T;
+import * as React from "react";
 
+//#region src/useDebounce.d.ts
+declare const useDebounce: <T>(value: T, delay?: number) => T;
+//#endregion
+//#region src/useScript.d.ts
 type ScriptStatus = 'idle' | 'loading' | 'ready' | 'error';
 /**
  * https://usehooks.com/useScript/
@@ -10,20 +13,21 @@ type ScriptStatus = 'idle' | 'loading' | 'ready' | 'error';
  * @returns status: Status
  */
 declare const useScript: (src: string) => {
-    status: ScriptStatus;
+  status: ScriptStatus;
 };
-
+//#endregion
+//#region src/useStorage.d.ts
 type Serializer<T> = (object: T | undefined) => string;
 type Parser<T> = (val: string) => T | undefined;
 type Setter<T> = React.Dispatch<React.SetStateAction<T | undefined>>;
 type Options<T> = Partial<{
-    serializer: Serializer<T>;
-    parser: Parser<T>;
-    logger: (error: any) => void;
-    syncData: boolean;
-    storage?: Storage;
+  serializer: Serializer<T>;
+  parser: Parser<T>;
+  logger: (error: any) => void;
+  syncData: boolean;
+  storage?: Storage;
 }>;
 declare function useStorage<T>(key: string, defaultValue: T, options?: Options<T>): [T, Setter<T>];
 declare function useStorage<T>(key: string, defaultValue?: undefined, options?: Options<T>): [T | undefined, Setter<T>];
-
-export { type ScriptStatus, useDebounce, useScript, useStorage };
+//#endregion
+export { type ScriptStatus, useDebounce, useScript, useStorage };

package/dist/index.d.mts

@@ -0,0 +1,33 @@
+
+import * as React from "react";
+
+//#region src/useDebounce.d.ts
+declare const useDebounce: <T>(value: T, delay?: number) => T;
+//#endregion
+//#region src/useScript.d.ts
+type ScriptStatus = 'idle' | 'loading' | 'ready' | 'error';
+/**
+ * https://usehooks.com/useScript/
+ *
+ * @param src: string - the url of the script to load.
+ * @returns status: Status
+ */
+declare const useScript: (src: string) => {
+  status: ScriptStatus;
+};
+//#endregion
+//#region src/useStorage.d.ts
+type Serializer<T> = (object: T | undefined) => string;
+type Parser<T> = (val: string) => T | undefined;
+type Setter<T> = React.Dispatch<React.SetStateAction<T | undefined>>;
+type Options<T> = Partial<{
+  serializer: Serializer<T>;
+  parser: Parser<T>;
+  logger: (error: any) => void;
+  syncData: boolean;
+  storage?: Storage;
+}>;
+declare function useStorage<T>(key: string, defaultValue: T, options?: Options<T>): [T, Setter<T>];
+declare function useStorage<T>(key: string, defaultValue?: undefined, options?: Options<T>): [T | undefined, Setter<T>];
+//#endregion
+export { type ScriptStatus, useDebounce, useScript, useStorage };

package/dist/{esm/index.js → index.mjs}

@@ -1,13 +1,8 @@
 /** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
-var __defProp = Object.defineProperty;
-var __name = (target, value) => __defProp(target, "name", {
-  value,
-  configurable: true
-});
-
-// src/useDebounce.ts
 import * as React from "react";
-var useDebounce = /* @__PURE__ */__name((value, delay) => {
+
+//#region src/useDebounce.ts
+const useDebounce = (value, delay) => {
   const [debouncedValue, setDebouncedValue] = React.useState(value);
   React.useEffect(() => {
     const timer = setTimeout(() => {
@@ -18,39 +13,77 @@ var useDebounce = /* @__PURE__ */__name((value, delay) => {
     };
   }, [value, delay]);
   return debouncedValue;
-}, "useDebounce");
+};
 
-// src/useScript.ts
-import * as React2 from "react";
-var useScript = /* @__PURE__ */__name(src => {
-  const [status, setStatus] = React2.useState(src ? "loading" : "idle");
-  React2.useEffect(() => {
+//#endregion
+//#region src/useScript.ts
+/**
+* https://usehooks.com/useScript/
+*
+* @param src: string - the url of the script to load.
+* @returns status: Status
+*/
+const useScript = src => {
+  /**
+  * Keep track of script status ("idle", "loading", "ready", "error")
+  */
+  const [status, setStatus] = React.useState(src ? "loading" : "idle");
+  React.useEffect(() => {
+    /**
+    * Allow falsy src value if waiting on other data needed for
+    * constructing the script URL passed to this hook.
+    */
     if (!src) {
       setStatus("idle");
       return;
     }
+    /**
+    * Fetch existing script element by src.
+    * It may have been added by another instance of this hook.
+    */
     let script = document.querySelector(`script[src="${src}"]`);
     if (!script) {
+      /**
+      * Create script element and set its src.
+      */
       script = document.createElement("script");
       script.src = src;
       script.async = true;
       script.setAttribute("data-status", "loading");
+      /**
+      * Add script to document body
+      */
       document.body.appendChild(script);
-      const setAttributeFromEvent = /* @__PURE__ */__name(event => {
-        if (script) {
-          script.setAttribute("data-status", event.type === "load" ? "ready" : "error");
-        }
-      }, "setAttributeFromEvent");
+      /**
+      * Store status in attribute on script.
+      * This can be read by other instances of this hook.
+      */
+      const setAttributeFromEvent = event => {
+        if (script) script.setAttribute("data-status", event.type === "load" ? "ready" : "error");
+      };
       script.addEventListener("load", setAttributeFromEvent);
       script.addEventListener("error", setAttributeFromEvent);
-    } else {
+    } else
+      /**
+      		* Grab existing script status from attribute and set to state.
+      		*/
       setStatus(script.getAttribute("data-status") || "error");
-    }
-    const setStateFromEvent = /* @__PURE__ */__name(event => {
+    /**
+    * Script event handler to update status in state
+    * Note: Even if the script already exists we still need to add
+    * event handlers to update the state for *this* hook instance.
+    */
+    const setStateFromEvent = event => {
       setStatus(event.type === "load" ? "ready" : "error");
-    }, "setStateFromEvent");
+    };
+    /**
+    * Add event listeners.
+    */
     script.addEventListener("load", setStateFromEvent);
     script.addEventListener("error", setStateFromEvent);
+    /**
+    * Remove event listeners on cleanup.
+    */
     return () => {
       if (script) {
         script.removeEventListener("load", setStateFromEvent);
@@ -65,48 +98,41 @@ var useScript = /* @__PURE__ */__name(src => {
   return {
     status
   };
-}, "useScript");
+};
 
-// src/useStorage.ts
-import * as React3 from "react";
+//#endregion
+//#region src/useStorage.ts
 function useStorage(key, defaultValue, options) {
-  const opts = React3.useMemo(() => {
+  const {
+    serializer,
+    parser,
+    logger,
+    syncData,
+    storage
+  } = React.useMemo(() => {
     return {
       serializer: JSON.stringify,
       parser: JSON.parse,
-      // eslint-disable-next-line no-console
       logger: console.log,
       syncData: true,
       ...options
     };
   }, [options]);
-  const {
-    serializer,
-    parser,
-    logger,
-    syncData,
-    storage
-  } = opts;
   const effectiveStorage = storage ?? (typeof window !== "undefined" ? window.localStorage : void 0);
-  const rawValueRef = React3.useRef(null);
-  const [value, setValue] = React3.useState(() => {
-    if (typeof window === "undefined" || !effectiveStorage) {
-      return defaultValue;
-    }
+  const rawValueRef = React.useRef(null);
+  const [value, setValue] = React.useState(() => {
+    if (typeof window === "undefined" || !effectiveStorage) return defaultValue;
     try {
       rawValueRef.current = effectiveStorage.getItem(key);
-      const res = rawValueRef.current ? parser(rawValueRef.current) : defaultValue;
-      return res;
+      return rawValueRef.current ? parser(rawValueRef.current) : defaultValue;
     } catch (error) {
       logger(error);
       return defaultValue;
     }
   });
-  React3.useEffect(() => {
-    if (typeof window === "undefined" || !effectiveStorage) {
-      return;
-    }
-    const updateLocalStorage = /* @__PURE__ */__name(() => {
+  React.useEffect(() => {
+    if (typeof window === "undefined" || !effectiveStorage) return;
+    const updateLocalStorage = () => {
       if (value !== void 0) {
         const newValue = serializer(value);
         const oldValue = rawValueRef.current;
@@ -127,21 +153,17 @@ function useStorage(key, defaultValue, options) {
           key
         }));
       }
-    }, "updateLocalStorage");
+    };
     try {
       updateLocalStorage();
     } catch (error) {
       logger(error);
     }
   }, [key, logger, serializer, effectiveStorage, value]);
-  React3.useEffect(() => {
-    if (!syncData) {
-      return;
-    }
-    const handleStorageChange = /* @__PURE__ */__name(e => {
-      if (e.key !== key || e.storageArea !== effectiveStorage) {
-        return;
-      }
+  React.useEffect(() => {
+    if (!syncData) return;
+    const handleStorageChange = e => {
+      if (e.key !== key || e.storageArea !== effectiveStorage) return;
       try {
         if (e.newValue !== rawValueRef.current) {
           rawValueRef.current = e.newValue;
@@ -150,10 +172,8 @@ function useStorage(key, defaultValue, options) {
       } catch (error) {
         logger(error);
       }
-    }, "handleStorageChange");
-    if (typeof window === "undefined") {
-      return;
-    }
+    };
+    if (typeof window === "undefined") return;
     window.addEventListener("storage", handleStorageChange);
     return () => {
       return window.removeEventListener("storage", handleStorageChange);
@@ -161,5 +181,6 @@ function useStorage(key, defaultValue, options) {
   }, [key, logger, parser, effectiveStorage, syncData]);
   return [value, setValue];
 }
-__name(useStorage, "useStorage");
+
+//#endregion
 export { useDebounce, useScript, useStorage };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ttoss/react-hooks",
-  "version": "2.3.12",
+  "version": "2.3.14",
   "description": "React hooks.",
   "keywords": [
     "React",
@@ -19,8 +19,8 @@
   "type": "module",
   "exports": {
     ".": {
-      "types": "./dist/index.d.ts",
-      "default": "./dist/esm/index.js"
+      "types": "./dist/index.d.mts",
+      "default": "./dist/index.mjs"
     }
   },
   "files": [
@@ -29,10 +29,10 @@
   "devDependencies": {
     "@types/react": "^19.2.14",
     "jest": "^30.3.0",
-    "react": "^19.2.4",
-    "tsup": "^8.5.1",
-    "@ttoss/config": "^1.37.12",
-    "@ttoss/test-utils": "^4.2.12"
+    "react": "^19.2.6",
+    "tsdown": "^0.22.0",
+    "@ttoss/config": "^1.37.13",
+    "@ttoss/test-utils": "^4.2.13"
   },
   "peerDependencies": {
     "react": ">=16.8.0"
@@ -42,7 +42,7 @@
     "provenance": true
   },
   "scripts": {
-    "build": "tsup",
+    "build": "tsdown",
     "test": "jest --projects tests/unit"
   }
 }