@versini/ui-hooks 2.2.0 → 3.0.0

package/README.md

@@ -1,27 +1,3 @@
-# React + TypeScript + Vite
+# @versini/ui-hooks
 
-This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
-
-Currently, two official plugins are available:
-
-- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
-- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
-
-## Expanding the ESLint configuration
-
-If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:
-
-- Configure the top-level `parserOptions` property like this:
-
-```js
-   parserOptions: {
-    ecmaVersion: 'latest',
-    sourceType: 'module',
-    project: ['./tsconfig.json', './tsconfig.node.json'],
-    tsconfigRootDir: __dirname,
-   },
-```
-
-- Replace `plugin:@typescript-eslint/recommended` to `plugin:@typescript-eslint/recommended-type-checked` or `plugin:@typescript-eslint/strict-type-checked`
-- Optionally add `plugin:@typescript-eslint/stylistic-type-checked`
-- Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and add `plugin:react/recommended` & `plugin:react/jsx-runtime` to the `extends` list
+Hooks to be used in the UI-Components library.

package/dist/hooks/useLocalStorage.js

@@ -1,59 +1,91 @@
-import { useCallback as u, useState as m } from "react";
-import { useEventCallback as w } from "./useEventCallback.js";
-import { useEventListener as E } from "./useEventListener.js";
-const s = "av-local-storage", h = (t) => {
-  try {
-    return JSON.stringify(t);
-  } catch {
-    throw new Error(
-      "@versini/ui-hooks useLocalStorage: Failed to serialize the value"
-    );
-  }
-}, p = (t) => {
-  try {
-    return t && JSON.parse(t);
-  } catch {
-    return t;
-  }
-};
-function V({
-  key: t,
-  defaultValue: n,
-  deserialize: g = p,
-  serialize: c = (o) => h(o)
-}) {
-  const o = typeof n == "function" ? n() : n, a = u(() => {
-    let r;
-    try {
-      r = typeof window > "u" || !("localStorage" in window) || window.localStorage === null;
-    } catch {
-      r = !0;
-    }
-    if (r)
-      return window.localStorage.setItem(t, c(o)), o;
+import { useCallback as u, useState as F, useEffect as g, useRef as h, useLayoutEffect as I } from "react";
+var m = typeof window < "u" ? I : g;
+function S(r, e, t, c) {
+  const d = h(e);
+  m(() => {
+    d.current = e;
+  }, [e]), g(() => {
+    const a = window;
+    if (!(a && a.addEventListener))
+      return;
+    const s = (f) => {
+      d.current(f);
+    };
+    return a.addEventListener(r, s, c), () => {
+      a.removeEventListener(r, s, c);
+    };
+  }, [r, t, c]);
+}
+function v(r) {
+  const e = h(() => {
+    throw new Error("Cannot call an event handler while rendering.");
+  });
+  return m(() => {
+    e.current = r;
+  }, [r]), u((...t) => {
+    var c;
+    return (c = e.current) == null ? void 0 : c.call(e, ...t);
+  }, [e]);
+}
+var l = typeof window > "u";
+function $(r, e, t = {}) {
+  const { initializeWithValue: c = !0 } = t, d = u(
+    (n) => t.serializer ? t.serializer(n) : JSON.stringify(n),
+    [t]
+  ), a = u(
+    (n) => {
+      if (t.deserializer)
+        return t.deserializer(n);
+      if (n === "undefined")
+        return;
+      const o = e instanceof Function ? e() : e;
+      let E;
+      try {
+        E = JSON.parse(n);
+      } catch (L) {
+        return console.error("Error parsing JSON:", L), o;
+      }
+      return E;
+    },
+    [t, e]
+  ), s = u(() => {
+    const n = e instanceof Function ? e() : e;
+    if (l)
+      return n;
     try {
-      const e = window.localStorage.getItem(t);
-      return e !== null ? g(e) : (window.localStorage.setItem(t, c(o)), o);
-    } catch (e) {
-      return console.warn(`Error reading localStorage key “${t}”:`, e), o;
+      const o = window.localStorage.getItem(r);
+      return o ? a(o) : n;
+    } catch (o) {
+      return console.warn(`Error reading localStorage key “${r}”:`, o), n;
     }
-  }, [o, t]), [l, i] = m(a()), S = w((r) => {
+  }, [e, r, a]), [f, i] = F(() => c ? s() : e instanceof Function ? e() : e), C = v((n) => {
+    l && console.warn(
+      `Tried setting localStorage key “${r}” even though environment is not a client`
+    );
     try {
-      const e = r instanceof Function ? r(l) : r;
-      if (e === void 0)
-        return;
-      window.localStorage.setItem(t, c(e)), i(e), window.dispatchEvent(new Event(s));
-    } catch (e) {
-      console.warn(`Error setting localStorage key “${t}”:`, e);
+      const o = n instanceof Function ? n(s()) : n;
+      window.localStorage.setItem(r, d(o)), i(o), window.dispatchEvent(new StorageEvent("local-storage", { key: r }));
+    } catch (o) {
+      console.warn(`Error setting localStorage key “${r}”:`, o);
     }
-  }), d = w(() => (window.localStorage.removeItem(t), i(a()), window.dispatchEvent(new Event(s)), l)), f = u(
-    (r) => {
-      r != null && r.key && r.key !== t || i(a());
+  }), z = v(() => {
+    l && console.warn(
+      `Tried removing localStorage key “${r}” even though environment is not a client`
+    );
+    const n = e instanceof Function ? e() : e;
+    window.localStorage.removeItem(r), i(n), window.dispatchEvent(new StorageEvent("local-storage", { key: r }));
+  });
+  g(() => {
+    i(s());
+  }, [r]);
+  const w = u(
+    (n) => {
+      n.key && n.key !== r || i(s());
     },
-    [t, a]
+    [r, s]
   );
-  return E(s, f), [l, S, d];
+  return S("storage", w), S("local-storage", w), [f, C, z];
 }
 export {
-  V as useLocalStorage
+  $ as useLocalStorage
 };

package/dist/index.d.ts

@@ -1,40 +1,4 @@
-declare const CUSTOM_EVENT_NAME = "av-local-storage";
-declare global {
-    interface WindowEventMap {
-        [CUSTOM_EVENT_NAME]: CustomEvent;
-    }
-}
-interface StorageProperties<T> {
-    /**
-     * Storage key.
-     */
-    key: string;
-    /**
-     * Default value that will be set if value is not found in storage.
-     */
-    defaultValue?: T;
-    /**
-     * Function to serialize value into string to be saved in storage.
-     */
-    serialize?: (value: T) => string;
-    /**
-     * Function to deserialize string value from storage to value.
-     */
-    deserialize?: (value: string | undefined) => T;
-}
-/**
- *
- * @example
- * import { useLocalStorage } from '@versini/ui-hooks';
- * const [value, setValue] = useLocalStorage({
- *   key: 'gpt-model',
- *   defaultValue: 'gpt-3',
- * });
- *
- * setValue('gpt-4');
- * setValue((current) => (current === 'gpt-3' ? 'gpt-4' : 'gpt-3'));
- */
-declare function useLocalStorage<T = string>({ key, defaultValue, deserialize, serialize, }: StorageProperties<T>): [T, (val: T | ((prevState: T) => T)) => void, () => void];
+export { useLocalStorage } from 'usehooks-ts';
 
 /**
  * React utility to merge refs.
@@ -129,4 +93,4 @@ type UseUniqueIdOptions = string | number | {
 };
 declare function useUniqueId(options?: UseUniqueIdOptions): string | undefined;
 
-export { useLocalStorage, useMergeRefs, useUncontrolled, useUniqueId };
+export { useMergeRefs, useUncontrolled, useUniqueId };

package/dist/index.js

@@ -1,17 +1,14 @@
+import { useMergeRefs as r } from "./hooks/useMergeRefs.js";
+import { useUncontrolled as f } from "./hooks/useUncontrolled.js";
+import { useUniqueId as u } from "./hooks/useUniqueId.js";
 import { useLocalStorage as p } from "./hooks/useLocalStorage.js";
-import { useMergeRefs as s } from "./hooks/useMergeRefs.js";
-import { useUncontrolled as i } from "./hooks/useUncontrolled.js";
-import { useUniqueId as l } from "./hooks/useUniqueId.js";
-import "react";
-import "./hooks/useEventCallback.js";
-import "./hooks/useEventListener.js";
 /*!
-  @versini/ui-hooks v2.2.0
+  @versini/ui-hooks v3.0.0
   © 2024 gizmette.com
 */
 export {
   p as useLocalStorage,
-  s as useMergeRefs,
-  i as useUncontrolled,
-  l as useUniqueId
+  r as useMergeRefs,
+  f as useUncontrolled,
+  u as useUniqueId
 };

package/package.json

@@ -1,12 +1,12 @@
 {
 	"name": "@versini/ui-hooks",
-	"version": "2.2.0",
+	"version": "3.0.0",
 	"license": "MIT",
 	"author": "Arno Versini",
 	"publishConfig": {
 		"access": "public"
 	},
-	"homepage": "https://github.com/aversini/ui-components/packages/ui-hooks",
+	"homepage": "https://github.com/aversini/ui-components",
 	"repository": {
 		"type": "git",
 		"url": "git@github.com:aversini/ui-components.git"
@@ -26,7 +26,7 @@
 		"dev:js": "vite build --watch --mode development",
 		"dev:types": "tsup --watch src",
 		"dev": "npm-run-all clean --parallel dev:js dev:types",
-		"lint": "eslint src --ext ts,tsx --report-unused-disable-directives --max-warnings 0 --fix --color",
+		"lint": "biome lint src",
 		"start": "static-server dist --port 5173",
 		"test:coverage:ui": "vitest --coverage --ui",
 		"test:coverage": "vitest run --coverage",
@@ -34,12 +34,15 @@
 		"test": "vitest run"
 	},
 	"peerDependencies": {
-		"react": "^18.2.0",
-		"react-dom": "^18.2.0"
+		"react": "^18.3.1",
+		"react-dom": "^18.3.1"
 	},
 	"devDependencies": {
-		"react": "18.2.0",
-		"react-dom": "18.2.0"
+		"react": "18.3.1",
+		"react-dom": "18.3.1"
 	},
-	"gitHead": "cd36ec402376c003c3e08dada4a9770a65ca9c46"
+	"dependencies": {
+		"usehooks-ts": "3.1.0"
+	},
+	"gitHead": "e3e5df0ce39be11620614a8f47de214155b589f5"
 }

package/dist/hooks/useEventCallback.js

@@ -1,12 +0,0 @@
-import { useRef as t, useEffect as a, useCallback as c } from "react";
-function o(r) {
-  const e = t(() => {
-    throw new Error("Cannot call an event handler while rendering.");
-  });
-  return a(() => {
-    e.current = r;
-  }, [r]), c((...n) => e.current(...n), [e]);
-}
-export {
-  o as useEventCallback
-};

package/dist/hooks/useEventListener.js

@@ -1,18 +0,0 @@
-import { useRef as E, useEffect as i } from "react";
-function o(n, c, r, e) {
-  const s = E(c);
-  i(() => {
-    s.current = c;
-  }, [c]), i(() => {
-    const t = (r == null ? void 0 : r.current) ?? window;
-    if (!(t && t.addEventListener))
-      return;
-    const u = (f) => s.current(f);
-    return t.addEventListener(n, u, e), () => {
-      t.removeEventListener(n, u, e);
-    };
-  }, [n, r, e]);
-}
-export {
-  o as useEventListener
-};