sse-hooks 1.0.0 → 1.1.0

package/dist/index.mjs

@@ -18,6 +18,150 @@ function useBoolean(defaultValue = false) {
   return { value, setValue, setTrue, setFalse, toggle };
 }
 
+const useIsomorphicLayoutEffect = typeof window !== "undefined" ? useLayoutEffect : useEffect;
+
+function useEventListener(eventName, handler, element, options) {
+  const savedHandler = useRef(handler);
+  useIsomorphicLayoutEffect(() => {
+    savedHandler.current = handler;
+  }, [handler]);
+  useEffect(() => {
+    const targetElement = element?.current ?? window;
+    if (!(targetElement && targetElement.addEventListener)) return;
+    const listener = (event) => {
+      savedHandler.current(event);
+    };
+    targetElement.addEventListener(eventName, listener, options);
+    return () => {
+      targetElement.removeEventListener(eventName, listener, options);
+    };
+  }, [eventName, element, options]);
+}
+
+function useClickAnyWhere(handler) {
+  useEventListener("click", (event) => {
+    handler(event);
+  });
+}
+
+function useEventCallback(fn) {
+  const ref = useRef(() => {
+    throw new Error("Cannot call an event handler while rendering.");
+  });
+  useIsomorphicLayoutEffect(() => {
+    ref.current = fn;
+  }, [fn]);
+  return useCallback((...args) => ref.current?.(...args), [ref]);
+}
+
+const IS_SERVER$7 = typeof document === "undefined";
+function parseCookies() {
+  if (IS_SERVER$7) return {};
+  return document.cookie.split("; ").reduce(
+    (acc, part) => {
+      const [k, ...v] = part.split("=");
+      if (k && v) {
+        acc[decodeURIComponent(k.trim())] = decodeURIComponent(v.join("="));
+      }
+      return acc;
+    },
+    {}
+  );
+}
+function buildCookie(key, value, options) {
+  let cookie = `${encodeURIComponent(key)}=${encodeURIComponent(value)}`;
+  if (options.path) cookie += `; path=${options.path}`;
+  if (options.domain) cookie += `; domain=${options.domain}`;
+  if (options.expires) cookie += `; expires=${options.expires.toUTCString()}`;
+  if (options.maxAge) cookie += `; max-age=${options.maxAge}`;
+  if (options.secure) cookie += `; secure`;
+  if (options.sameSite) cookie += `; samesite=${options.sameSite}`;
+  return cookie;
+}
+function useCookie(key, initialValue, options = {}) {
+  const { initializeWithValue = true, prefix = "" } = options;
+  const cookieKey = prefix + key;
+  const serializer = useCallback(
+    (value) => {
+      if (options.serializer) return options.serializer(value);
+      return JSON.stringify(value);
+    },
+    [options]
+  );
+  const deserializer = useCallback(
+    (value) => {
+      if (options.deserializer) return options.deserializer(value);
+      if (value === "undefined") return void 0;
+      const fallback = initialValue instanceof Function ? initialValue() : initialValue;
+      try {
+        return JSON.parse(value);
+      } catch {
+        return fallback;
+      }
+    },
+    [options, initialValue]
+  );
+  const readValue = useCallback(() => {
+    const fallback = initialValue instanceof Function ? initialValue() : initialValue;
+    if (IS_SERVER$7) return fallback;
+    const cookies = parseCookies();
+    if (!(cookieKey in cookies)) return fallback;
+    return deserializer(cookies[cookieKey]);
+  }, [cookieKey, deserializer, initialValue]);
+  const [storedValue, setStoredValue] = useState(() => {
+    if (initializeWithValue) return readValue();
+    return initialValue instanceof Function ? initialValue() : initialValue;
+  });
+  const setValue = useEventCallback((value) => {
+    if (IS_SERVER$7) return;
+    try {
+      const newValue = value instanceof Function ? value(readValue()) : value;
+      const serialized = serializer(newValue);
+      document.cookie = buildCookie(cookieKey, serialized, {
+        path: "/",
+        ...options
+      });
+      setStoredValue(newValue);
+      window.dispatchEvent(
+        new CustomEvent("cookie-change", { detail: { key: cookieKey } })
+      );
+    } catch (error) {
+      console.warn(`Error setting cookie "${cookieKey}":`, error);
+    }
+  });
+  const removeValue = useEventCallback(() => {
+    if (IS_SERVER$7) return;
+    const fallback = initialValue instanceof Function ? initialValue() : initialValue;
+    document.cookie = buildCookie(cookieKey, "", {
+      path: "/",
+      ...options,
+      expires: /* @__PURE__ */ new Date(0)
+    });
+    setStoredValue(fallback);
+    window.dispatchEvent(
+      new CustomEvent("cookie-change", { detail: { key: cookieKey } })
+    );
+  });
+  useEffect(() => {
+    setStoredValue(readValue());
+  }, [cookieKey]);
+  const handleChange = useCallback(
+    (event) => {
+      if ("detail" in event && event.detail?.key !== cookieKey) return;
+      if ("key" in event && event.key !== cookieKey) return;
+      setStoredValue(readValue());
+    },
+    [cookieKey, readValue]
+  );
+  useEventListener("cookie-change", handleChange);
+  useEventListener("visibilitychange", () => {
+    if (document.visibilityState === "visible") {
+      setStoredValue(readValue());
+    }
+  });
+  return [storedValue, setValue, removeValue];
+}
+
 function useCopyToClipboard() {
   const [copiedText, setCopiedText] = useState(null);
   const copy = useCallback(async (text) => {
@@ -58,8 +202,6 @@ function useCounter(initialValue) {
   };
 }
 
-const useIsomorphicLayoutEffect = typeof window !== "undefined" ? useLayoutEffect : useEffect;
-
 function useInterval(callback, delay) {
   const savedCallback = useRef(callback);
   useIsomorphicLayoutEffect(() => {
@@ -114,34 +256,6 @@ function useCountdown({
   return [count, { startCountdown, stopCountdown, resetCountdown }];
 }
 
-function useEventCallback(fn) {
-  const ref = useRef(() => {
-    throw new Error("Cannot call an event handler while rendering.");
-  });
-  useIsomorphicLayoutEffect(() => {
-    ref.current = fn;
-  }, [fn]);
-  return useCallback((...args) => ref.current?.(...args), [ref]);
-}
-
-function useEventListener(eventName, handler, element, options) {
-  const savedHandler = useRef(handler);
-  useIsomorphicLayoutEffect(() => {
-    savedHandler.current = handler;
-  }, [handler]);
-  useEffect(() => {
-    const targetElement = element?.current ?? window;
-    if (!(targetElement && targetElement.addEventListener)) return;
-    const listener = (event) => {
-      savedHandler.current(event);
-    };
-    targetElement.addEventListener(eventName, listener, options);
-    return () => {
-      targetElement.removeEventListener(eventName, listener, options);
-    };
-  }, [eventName, element, options]);
-}
-
 const IS_SERVER$6 = typeof window === "undefined";
 function useLocalStorage(key, initialValue, options = {}) {
   const { initializeWithValue = true } = options;
@@ -276,7 +390,7 @@ function useMediaQuery(query, {
 }
 
 const COLOR_SCHEME_QUERY$1 = "(prefers-color-scheme: dark)";
-const LOCAL_STORAGE_KEY$1 = "usehooks-ts-dark-mode";
+const LOCAL_STORAGE_KEY$1 = "sse-hooks-dark-mode";
 function useDarkMode(options = {}) {
   const {
     defaultValue,
@@ -1104,23 +1218,21 @@ function useSessionStorage(key, initialValue, options = {}) {
     }
     return initialValue instanceof Function ? initialValue() : initialValue;
   });
-  const setValue = useEventCallback(
-    (value) => {
-      if (IS_SERVER$1) {
-        console.warn(
-          `Tried setting sessionStorage key \u201C${key}\u201D even though environment is not a client`
-        );
-      }
-      try {
-        const newValue = value instanceof Function ? value(readValue()) : value;
-        window.sessionStorage.setItem(key, serializer(newValue));
-        setStoredValue(newValue);
-        window.dispatchEvent(new StorageEvent("session-storage", { key }));
-      } catch (error) {
-        console.warn(`Error setting sessionStorage key \u201C${key}\u201D:`, error);
-      }
+  const setValue = useEventCallback((value) => {
+    if (IS_SERVER$1) {
+      console.warn(
+        `Tried setting sessionStorage key \u201C${key}\u201D even though environment is not a client`
+      );
     }
-  );
+    try {
+      const newValue = value instanceof Function ? value(readValue()) : value;
+      window.sessionStorage.setItem(key, serializer(newValue));
+      setStoredValue(newValue);
+      window.dispatchEvent(new StorageEvent("session-storage", { key }));
+    } catch (error) {
+      console.warn(`Error setting sessionStorage key \u201C${key}\u201D:`, error);
+    }
+  });
   const removeValue = useEventCallback(() => {
     if (IS_SERVER$1) {
       console.warn(
@@ -1191,7 +1303,7 @@ function useStep(maxStep) {
 }
 
 const COLOR_SCHEME_QUERY = "(prefers-color-scheme: dark)";
-const LOCAL_STORAGE_KEY = "usehooks-ts-ternary-dark-mode";
+const LOCAL_STORAGE_KEY = "sse-hooks-ternary-dark-mode";
 function useTernaryDarkMode({
   defaultValue = "system",
   localStorageKey = LOCAL_STORAGE_KEY,
@@ -1279,4 +1391,4 @@ function useWindowSize(options = {}) {
   return windowSize;
 }
 
-export { useBoolean, useCopyToClipboard, useCountdown, useCounter, useDarkMode, useDebounceCallback, useDebounceValue, useDelete, useDocumentTitle, useEventCallback, useEventListener, useFetch, useGet, useHover, useIndexedDB, useIntersectionObserver, useInterval, useIsClient, useIsMounted, useIsomorphicLayoutEffect, useLocalStorage, useMap, useMediaQuery, usePost, usePut, useReadLocalStorage, useResizeObserver, useScreen, useScript, useScrollLock, useSessionStorage, useStep, useTernaryDarkMode, useTimeout, useToggle, useUnmount, useWindowSize };
+export { useBoolean, useClickAnyWhere, useCookie, useCopyToClipboard, useCountdown, useCounter, useDarkMode, useDebounceCallback, useDebounceValue, useDelete, useDocumentTitle, useEventCallback, useEventListener, useFetch, useGet, useHover, useIndexedDB, useIntersectionObserver, useInterval, useIsClient, useIsMounted, useIsomorphicLayoutEffect, useLocalStorage, useMap, useMediaQuery, usePost, usePut, useReadLocalStorage, useResizeObserver, useScreen, useScript, useScrollLock, useSessionStorage, useStep, useTernaryDarkMode, useTimeout, useToggle, useUnmount, useWindowSize };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sse-hooks",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "description": "React hook library, ready to use, written in Typescript.",
   "license": "MIT",
   "author": "SSE World",