use-good-hooks 1.0.26 → 1.0.28

package/README.md

@@ -33,7 +33,7 @@ pnpm add use-good-hooks
 Debounces value changes to prevent rapid updates. Useful for search inputs, form validation, and other scenarios where you want to delay state updates until after a user has stopped changing the input.
 
 ```typescript
-import { useDebounce } from 'use-good-hooks/use-debounce';
+import useDebounce from 'use-good-hooks/use-debounce';
 
 const SearchComponent = () => {
   const [searchTerm, setSearchTerm] = useState('');
@@ -71,7 +71,7 @@ const SearchComponent = () => {
 Creates a debounced version of a function. This hook ensures that a function is only executed after a specified period of inactivity, preventing it from being called too frequently. It's ideal for handling events like button clicks or API triggers that should not fire on every user action.
 
 ```typescript
-import { useDebounceFn } from 'use-good-hooks/use-debounce-fn';
+import useDebounceFn from 'use-good-hooks/use-debounce-fn';
 
 const SaveButton = () => {
   const [status, setStatus] = useState('Idle');
@@ -110,7 +110,7 @@ const SaveButton = () => {
 Limits the rate at which a value can update. Useful for scroll events, window resizing, and other high-frequency events.
 
 ```typescript
-import { useThrottle } from 'use-good-hooks/use-throttle';
+import useThrottle from 'use-good-hooks/use-throttle';
 
 const ScrollTracker = () => {
   const [scrollY, setScrollY] = useState(0);
@@ -143,7 +143,7 @@ const ScrollTracker = () => {
 Creates a throttled version of a function, limiting its execution to at most once per specified interval. It is useful for performance-critical scenarios like handling mouse movements, scrolling, or window resizing events without overwhelming the browser.
 
 ```typescript
-import { useThrottleFn } from 'use-good-hooks/use-throttle-fn';
+import useThrottleFn from 'use-good-hooks/use-throttle-fn';
 
 const MouseTracker = () => {
   const [position, setPosition] = useState({ x: 0, y: 0 });
@@ -179,7 +179,7 @@ const MouseTracker = () => {
 Captures the previous value of a state or prop. Useful for comparing changes between renders.
 
 ```typescript
-import { usePrev } from 'use-good-hooks/use-prev';
+import usePrev from 'use-good-hooks/use-prev';
 
 const Counter = ({ count }) => {
   const prevCount = usePrev(count);
@@ -202,12 +202,12 @@ const Counter = ({ count }) => {
 
 - The previous value (undefined on first render)
 
-### `useStateHistory`
+### `useHistoryState`
 
 Tracks the history of a state value, providing undo and redo capabilities. This is perfect for building editors, forms, or any UI where users might want to reverse their actions.
 
 ```typescript
-import { useStateHistory } from 'use-good-hooks/use-state-history';
+import useHistoryState from 'use-good-hooks/use-history-state';
 
 const TextEditor = () => {
   const {
@@ -218,7 +218,7 @@ const TextEditor = () => {
     setState,
     state,
     undo
-  } = useStateHistory('', { capacity: 10 });
+  } = useHistoryState('', { capacity: 10 });
 
   return (
     <div>
@@ -261,7 +261,7 @@ const TextEditor = () => {
 Detects distinct changes in values with support for deep comparison and custom equality checks. Useful for tracking whether complex objects have actually changed.
 
 ```typescript
-import { useDistinct } from 'use-good-hooks/use-distinct';
+import useDistinct from 'use-good-hooks/use-distinct';
 
 const UserProfileForm = ({ user }) => {
   const { distinct, value, prevValue } = useDistinct(user, { deep: true });
@@ -303,7 +303,7 @@ const UserProfileForm = ({ user }) => {
 Persists state to localStorage or sessionStorage with automatic serialization/deserialization.
 
 ```typescript
-import { useStorageState } from 'use-good-hooks/use-storage-state';
+import useStorageState from 'use-good-hooks/use-storage-state';
 
 const ThemePreferences = () => {
   const [preferences, setPreferences, { removeKey }] = useStorageState('theme-prefs', {
@@ -354,7 +354,7 @@ const ThemePreferences = () => {
 Synchronizes state with URL query parameters. Great for shareable UI states, filters, pagination, and search terms.
 
 ```typescript
-import { useUrlState } from 'use-good-hooks/use-url-state';
+import useUrlState from 'use-good-hooks/use-url-state';
 
 const ProductFilter = () => {
   const [filters, setFilters] = useUrlState({
@@ -496,7 +496,7 @@ const MyComponent = () => {
 Creates a temporary state that resets after a specified timeout.
 
 ```typescript
-import { useTemporaryState } from 'use-good-hooks/use-temporary-state';
+import useTemporaryState from 'use-good-hooks/use-temporary-state';
 
 const [state, setState] = useTemporaryState('initial', 1000);
 

package/dist/use-debounce-fn.d.ts

@@ -0,0 +1,9 @@
+import { DebouncedFunc } from 'lodash';
+import { DebounceSettings } from 'lodash';
+
+export { DebounceSettings }
+
+declare const useDebounceFn: <T extends (...args: any[]) => any>(fn: T, delay?: number, options?: DebounceSettings) => DebouncedFunc<(...args: Parameters<T>) => any>;
+export default useDebounceFn;
+
+export { }

package/dist/use-debounce-fn.js

@@ -0,0 +1,25 @@
+import { useRef as o, useEffect as f } from "react";
+import s from "lodash/debounce";
+const m = 300, E = (r, e = m, n) => {
+  const t = o(r);
+  f(() => {
+    t.current = r;
+  }, [r]);
+  const u = o(
+    s(
+      (...c) => t.current(...c),
+      e,
+      n
+    )
+  );
+  return f(() => (u.current = s(
+    (...c) => t.current(...c),
+    e,
+    n
+  ), () => {
+    u.current.cancel();
+  }), [e, n]), u.current;
+};
+export {
+  E as default
+};

package/dist/use-history-state.d.ts

@@ -0,0 +1,49 @@
+import { DebounceSettings } from 'lodash';
+
+declare type HistoryAction<T> = {
+    type: 'CLEAR';
+    initialPresent: T;
+} | {
+    type: 'REDO';
+} | {
+    type: 'SET';
+    newPresent: T;
+} | {
+    type: 'UNDO';
+};
+
+declare type HistoryOnChange<T> = ({ action, state }: {
+    action: HistoryAction<T>['type'];
+    state: HistoryState<T>['present'];
+}) => void;
+
+declare type HistoryState<T> = {
+    future: T[];
+    past: T[];
+    present: T | null;
+};
+
+declare type UseHistoryOptionsState<T> = {
+    debounceOptions?: DebounceSettings;
+    debounceTime?: number;
+    maxCapacity?: number;
+    onChange?: HistoryOnChange<T>;
+};
+
+declare const useHistoryState: <T>(initialPresent: T, options?: UseHistoryOptionsState<T>) => {
+    canRedo: boolean;
+    canUndo: boolean;
+    clear: () => void;
+    history: {
+        past: T[];
+        future: T[];
+    };
+    redo: () => void;
+    set: (newPresent: T) => void;
+    setDirect: (newPresent: T) => void;
+    state: T;
+    undo: () => void;
+};
+export default useHistoryState;
+
+export { }

package/dist/use-history-state.js

@@ -0,0 +1,114 @@
+import { useRef as P, useReducer as b, useCallback as d } from "react";
+import c from "lodash/cloneDeep";
+import N from "lodash/isNil";
+import f from "lodash/size";
+import T from "./use-debounce-fn.js";
+const U = {
+  past: [],
+  present: null,
+  future: []
+}, A = ({
+  action: r,
+  maxCapacity: y,
+  onChange: s,
+  state: n
+}) => {
+  const { past: p, present: o, future: l } = n;
+  if (r.type === "UNDO") {
+    if (f(p) === 0)
+      return n;
+    const e = p[f(p) - 1], u = {
+      past: p.slice(0, f(p) - 1),
+      present: c(e),
+      future: [c(o), ...l]
+    };
+    return s == null || s({
+      action: r.type,
+      state: u.present
+    }), u;
+  } else if (r.type === "REDO") {
+    if (f(l) === 0)
+      return n;
+    const e = l[0], t = l.slice(1), u = {
+      past: [...p, c(o)],
+      present: c(e),
+      future: t
+    };
+    return s == null || s({
+      action: r.type,
+      state: u.present
+    }), u;
+  } else if (r.type === "SET") {
+    const { newPresent: e } = r;
+    if (JSON.stringify(e) === JSON.stringify(o))
+      return n;
+    let t = [...p];
+    o !== null && (t = [...t, c(o)]), !N(y) && y > 0 && f(t) > y && (t = t.slice(f(t) - y));
+    const u = {
+      past: t,
+      present: c(e),
+      future: []
+    };
+    return s == null || s({
+      action: r.type,
+      state: u.present
+    }), u;
+  } else if (r.type === "CLEAR") {
+    const e = {
+      past: [],
+      present: c(r.initialPresent),
+      future: []
+    };
+    return s == null || s({
+      action: r.type,
+      state: e.present
+    }), e;
+  } else
+    throw new Error("Unsupported action type");
+}, v = (r, y) => {
+  const { maxCapacity: s, debounceTime: n, debounceOptions: p, onChange: o } = y || {}, l = P(r), [e, t] = b(
+    (i, a) => A({
+      action: a,
+      maxCapacity: s,
+      onChange: o,
+      state: i
+    }),
+    {
+      ...U,
+      present: c(l.current)
+    }
+  ), u = f(e.future) !== 0, S = f(e.past) !== 0, R = d(() => t({
+    initialPresent: l.current,
+    type: "CLEAR"
+  }), []), D = d(() => {
+    u && t({ type: "REDO" });
+  }, [u]), m = T(
+    (i) => t({ type: "SET", newPresent: i }),
+    n,
+    p
+  ), w = d((i) => t({ type: "SET", newPresent: i }), []), E = d(() => {
+    S && t({ type: "UNDO" });
+  }, [S]), O = d(
+    (i) => {
+      n ? m(i) : w(i);
+    },
+    [n, m, w]
+  );
+  return {
+    canRedo: u,
+    canUndo: S,
+    clear: R,
+    history: {
+      past: e.past,
+      future: e.future
+    },
+    redo: D,
+    set: O,
+    setDirect: w,
+    state: e.present,
+    undo: E
+  };
+};
+export {
+  v as default
+};

package/dist/use-throttle-fn.d.ts

@@ -0,0 +1,9 @@
+import { DebouncedFuncLeading } from 'lodash';
+import { ThrottleSettings } from 'lodash';
+
+export { ThrottleSettings }
+
+declare const useThrottleFn: <T extends (...args: any[]) => any>(fn: T, delay?: number, options?: ThrottleSettings) => DebouncedFuncLeading<(...args: Parameters<T>) => any>;
+export default useThrottleFn;
+
+export { }

package/dist/use-throttle-fn.js

@@ -0,0 +1,25 @@
+import { useRef as o, useEffect as f } from "react";
+import s from "lodash/throttle";
+const m = 300, E = (r, t = m, e) => {
+  const n = o(r);
+  f(() => {
+    n.current = r;
+  }, [r]);
+  const u = o(
+    s(
+      (...c) => n.current(...c),
+      t,
+      e
+    )
+  );
+  return f(() => (u.current = s(
+    (...c) => n.current(...c),
+    t,
+    e
+  ), () => {
+    u.current.cancel();
+  }), [t, e]), u.current;
+};
+export {
+  E as default
+};

package/package.json

@@ -49,5 +49,5 @@
 		"test": "vitest",
 		"test:coverage": "vitest --coverage"
 	},
-	"version": "1.0.26"
+	"version": "1.0.28"
 }