use-good-hooks 1.0.38 → 1.0.40

package/README.md

@@ -210,30 +210,30 @@ Tracks the history of a state value, providing undo and redo capabilities. This
 import useHistoryState from 'use-good-hooks/use-history-state';
 
 const TextEditor = () => {
-  const {
-    canRedo,
-    canUndo,
-    history,
-    redo,
-    set,
-    state,
-    undo
-  } = useHistoryState('', { maxCapacity: 10 });
+  const [state, actions] = useHistoryState('', {
+    maxCapacity: 10,
+    debounceMs: 0 // Disable debouncing for immediate updates
+  });
 
   return (
     <div>
       <textarea
-        value={state}
-        onChange={(e) => set(e.target.value)}
+        value={state.present}
+        onChange={(e) => actions.set(e.target.value)}
         rows={4}
         cols={50}
       />
       <div>
-        <button onClick={undo} disabled={!canUndo}>Undo</button>
-        <button onClick={redo} disabled={!canRedo}>Redo</button>
+        <button onClick={actions.undo} disabled={!state.canUndo}>
+          Undo
+        </button>
+        <button onClick={actions.redo} disabled={!state.canRedo}>
+          Redo
+        </button>
+        <button onClick={actions.clear}>Clear History</button>
       </div>
-      <p>History (last {history.length} changes):</p>
-      <pre>{JSON.stringify(history, null, 2)}</pre>
+      <p>Past states: {state.past.length}</p>
+      <p>Future states: {state.future.length}</p>
     </div>
   );
 };
@@ -243,28 +243,66 @@ const TextEditor = () => {
 
 - `initialState`: The initial state value
 - `options`: (Optional) Configuration options:
-    - `debounceMs`: Time in milliseconds to debounce the state changes (default: 0)
-    - `debounceSettings`: Debounce settings object (default: { leading: true, trailing: false })
-    - `immutable`: Boolean indicating if the state should be treated as immutable (default: false)
+    - `debounceMs`: Time in milliseconds to debounce the state changes (default: 250)
+    - `debounceSettings`: Debounce settings object from Lodash
+    - `immutable`: Boolean indicating if the state should be treated as immutable (default: true)
     - `maxCapacity`: Maximum number of history entries to keep (default: 10)
-    - `onChange`: Function to call when the state changes
+    - `onChange`: Function to call when the state changes, receives `{ action, state }`
     - `paused`: Boolean indicating if the history is paused (default: false)
 
 #### Returns
 
-- Object with:
-    - `canRedo`: Boolean indicating if redo is possible
-    - `canUndo`: Boolean indicating if undo is possible
-    - `clear`: Function to clear the history
-    - `future`: Array of future states
-    - `past`: Array of past states
-    - `pause`: Function to pause the history
-    - `paused`: Boolean indicating if the history is paused
-    - `redo`: Function to move to the next state (redo)
-    - `set`: Function to update the state and record history
-    - `setDirect`: Function to update the state without recording history
-    - `state`: The current state value
-    - `undo`: Function to move to the previous state (undo)
+Returns a tuple `[historyState, historyActions]`:
+
+**historyState** (Object): - `canRedo`: Boolean indicating if redo is possible - `canUndo`: Boolean indicating if undo is possible - `future`: Array of future states (for redo) - `past`: Array of past states (for undo) - `paused`: Boolean indicating if the history is paused - `present`: The current state value
+
+**historyActions** (Object): - `clear`: Function to clear the history and reset to initial state - `pause`: Function to pause history tracking (updates won't be recorded) - `redo`: Function to move to the next state (redo) - `replace`: Function to replace the state without adding to history - `resume`: Function to resume history tracking - `set`: Function to update the state and record history (debounced by default) - `setDirect`: Function to update the state immediately, bypassing debounce - `undo`: Function to move to the previous state (undo)
+
+#### Example with onChange callback
+
+```typescript
+const Editor = () => {
+  const [state, actions] = useHistoryState('', {
+    onChange: ({ action, state }) => {
+      console.log(`Action: ${action}, State: ${state}`);
+      // Action can be: 'SET', 'UNDO', 'REDO', 'CLEAR', 'REPLACE'
+    }
+  });
+
+  return (
+    <textarea
+      value={state.present}
+      onChange={(e) => actions.set(e.target.value)}
+    />
+  );
+};
+```
+
+#### Example with pause/resume
+
+```typescript
+const Form = () => {
+  const [state, actions] = useHistoryState({ name: '', email: '' });
+
+  const handleBulkUpdate = () => {
+    actions.pause(); // Pause history tracking
+    actions.set({ name: 'John', email: 'john@example.com' });
+    actions.set({ name: 'Jane', email: 'jane@example.com' });
+    actions.resume(); // Resume history tracking
+    // Only the final state will be in history
+  };
+
+  return (
+    <div>
+      <input
+        value={state.present.name}
+        onChange={(e) => actions.set({ ...state.present, name: e.target.value })}
+      />
+      <button onClick={handleBulkUpdate}>Bulk Update</button>
+    </div>
+  );
+};
+```
 
 ### `useDistinct`
 

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

@@ -2,7 +2,7 @@ import { DebounceSettings } from 'lodash';
 
 export { DebounceSettings }
 
-declare type HistoryAction<T> = {
+export declare type HistoryAction<T> = {
     type: 'CLEAR';
     initialState: T;
 } | {
@@ -26,38 +26,39 @@ declare type HistoryOnChange<T> = ({ action, state }: {
     state: HistoryState<T>['present'];
 }) => void;
 
-declare type HistoryState<T> = {
-    future: T[];
-    past: T[];
-    paused: boolean;
-    present: T | null;
-};
-
-declare type UseHistoryOptionsState<T> = {
-    debounceSettings?: DebounceSettings;
+export declare type HistoryOptions<T> = {
     debounceMs?: number;
+    debounceSettings?: DebounceSettings;
     immutable?: boolean;
     maxCapacity?: number;
     onChange?: HistoryOnChange<T>;
     paused?: boolean;
 };
 
-declare const useHistoryState: <T>(initialState: T, options?: UseHistoryOptionsState<T>) => {
+export declare type HistoryState<T> = {
+    future: T[];
+    past: T[];
+    paused: boolean;
+    present: T | null;
+};
+
+declare const useHistoryState: <T>(initialState: T, options?: HistoryOptions<T>) => readonly [{
     canRedo: boolean;
     canUndo: boolean;
-    clear: () => void;
     future: T[];
     past: T[];
-    pause: () => void;
     paused: boolean;
+    present: T;
+}, {
+    clear: () => void;
+    pause: () => void;
     redo: () => void;
     replace: (newPresent: T) => void;
     resume: () => void;
     set: (newPresent: T) => void;
     setDirect: (newPresent: T) => void;
-    state: T;
     undo: () => void;
-};
+}];
 export default useHistoryState;
 
 export { }

package/dist/use-history-state.js

@@ -1,164 +1,165 @@
-import { useRef as M, useReducer as T, useCallback as d } from "react";
-import H from "lodash/cloneDeep";
-import J from "lodash/isNil";
-import E from "lodash/size";
-import k from "./use-debounce-fn.js";
-const q = {
+import { useRef as A, useReducer as O, useMemo as D, useEffect as b } from "react";
+import h from "lodash/cloneDeep";
+import g from "lodash/debounce";
+import i from "lodash/size";
+const L = {
   future: [],
   past: [],
   present: null
-}, l = (e, r) => r ? e : H(e), v = (e, r, y) => y ? e === r : JSON.stringify(e) === JSON.stringify(r), z = ({
-  action: e,
-  immutable: r,
-  maxCapacity: y,
-  onChange: t,
-  state: f
-}) => {
-  const { future: o, past: n, paused: S, present: p } = f;
-  if (e.type === "CLEAR") {
-    const s = {
-      future: [],
-      past: [],
-      paused: S,
-      present: l(e.initialState, r)
-    };
-    return t == null || t({
-      action: e.type,
-      state: s.present
-    }), s;
-  } else {
-    if (e.type === "PAUSE")
-      return {
-        ...f,
-        paused: !0
-      };
-    if (e.type === "REDO") {
-      if (E(o) === 0)
-        return f;
-      const s = o[0], c = {
-        future: o.slice(1),
-        past: [...n, l(p, r)],
-        paused: S,
-        present: l(s, r)
-      };
-      return t == null || t({
-        action: e.type,
-        state: c.present
-      }), c;
-    } else {
-      if (e.type === "RESUME")
-        return {
-          ...f,
-          paused: !1
-        };
-      if (e.type === "REPLACE") {
-        const { newPresent: s } = e, u = {
-          ...f,
+}, c = (f, p) => p ? f : h(f), M = (f, p, w) => w ? f === p : JSON.stringify(f) === JSON.stringify(p), H = (f, p) => {
+  const w = A(f), E = A(p ?? {}), [l, a] = O(
+    (n, e) => {
+      const {
+        immutable: u = !0,
+        maxCapacity: r = 10,
+        onChange: S = () => null
+      } = E.current, { future: R, past: y, paused: d, present: m } = n;
+      if (e.type === "CLEAR") {
+        const s = {
           future: [],
           past: [],
-          present: s
+          paused: d,
+          present: c(e.initialState, u)
         };
-        return t == null || t({
+        return S({
           action: e.type,
-          state: u.present
-        }), u;
-      } else if (e.type === "SET") {
-        const { newPresent: s } = e;
-        if (v(s, p, r))
-          return f;
-        if (S) {
-          const w = {
-            ...f,
-            present: l(s, r)
+          state: s.present
+        }), s;
+      } else {
+        if (e.type === "PAUSE")
+          return {
+            ...n,
+            paused: !0
+          };
+        if (e.type === "REDO") {
+          if (i(R) === 0)
+            return n;
+          const s = R[0], o = {
+            future: R.slice(1),
+            past: [...y, c(m, u)],
+            paused: d,
+            present: c(s, u)
           };
-          return t == null || t({
+          return S({
             action: e.type,
-            state: w.present
-          }), w;
+            state: o.present
+          }), o;
+        } else {
+          if (e.type === "RESUME")
+            return {
+              ...n,
+              paused: !1
+            };
+          if (e.type === "REPLACE") {
+            const { newPresent: s } = e, t = {
+              ...n,
+              future: [],
+              past: [],
+              present: s
+            };
+            return S({
+              action: e.type,
+              state: t.present
+            }), t;
+          } else if (e.type === "SET") {
+            const { newPresent: s } = e;
+            if (M(s, m, u))
+              return n;
+            if (d) {
+              const U = {
+                ...n,
+                present: c(s, u)
+              };
+              return S({
+                action: e.type,
+                state: U.present
+              }), U;
+            }
+            let t = [...y];
+            m !== null && (t = [...t, c(m, u)]), r > 0 && i(t) > r && (t = t.slice(i(t) - r));
+            const o = {
+              future: [],
+              past: t,
+              paused: d,
+              present: c(s, u)
+            };
+            return S({
+              action: e.type,
+              state: o.present
+            }), o;
+          } else if (e.type === "UNDO") {
+            if (i(y) === 0)
+              return n;
+            const s = y[i(y) - 1], t = y.slice(0, i(y) - 1), o = {
+              future: [c(m, u), ...R],
+              past: t,
+              paused: d,
+              present: c(s, u)
+            };
+            return S({
+              action: e.type,
+              state: o.present
+            }), o;
+          } else
+            throw new Error("Unsupported action type");
         }
-        let u = [...n];
-        p !== null && (u = [...u, l(p, r)]), !J(y) && y > 0 && E(u) > y && (u = u.slice(E(u) - y));
-        const c = {
-          future: [],
-          past: u,
-          paused: S,
-          present: l(s, r)
-        };
-        return t == null || t({
-          action: e.type,
-          state: c.present
-        }), c;
-      } else if (e.type === "UNDO") {
-        if (E(n) === 0)
-          return f;
-        const s = n[E(n) - 1], u = n.slice(0, E(n) - 1), c = {
-          future: [l(p, r), ...o],
-          past: u,
-          paused: S,
-          present: l(s, r)
-        };
-        return t == null || t({
-          action: e.type,
-          state: c.present
-        }), c;
-      } else
-        throw new Error("Unsupported action type");
-    }
-  }
-}, G = (e, r) => {
-  const { maxCapacity: y, debounceMs: t, debounceSettings: f, onChange: o, immutable: n } = r || {}, S = M(e), [p, s] = T(
-    (i, F) => z({
-      action: F,
-      immutable: n,
-      maxCapacity: y,
-      onChange: o,
-      state: i
-    }),
+      }
+    },
     {
-      ...q,
-      paused: (r == null ? void 0 : r.paused) ?? !1,
-      present: l(S.current, n)
+      ...L,
+      paused: E.current.paused ?? !1,
+      present: c(
+        w.current,
+        E.current.immutable
+      )
     }
-  ), u = E(p.future) !== 0, c = E(p.past) !== 0, w = d(() => s({
-    initialState: S.current,
-    type: "CLEAR"
-  }), []), U = d(() => {
-    s({ type: "PAUSE" });
-  }, []), P = d(() => {
-    u && s({ type: "REDO" });
-  }, [u]), A = d((i) => {
-    s({ type: "REPLACE", newPresent: i });
-  }, []), O = d(() => {
-    s({ type: "RESUME" });
-  }, []), D = k(
-    (i) => s({ type: "SET", newPresent: i }),
-    t,
-    f
-  ), R = d((i) => s({ type: "SET", newPresent: i }), []), N = d(
-    (i) => {
-      t ? D(i) : R(i);
-    },
-    [t, D, R]
-  ), L = d(() => {
-    c && s({ type: "UNDO" });
-  }, [c]);
-  return {
-    canRedo: u,
-    canUndo: c,
-    clear: w,
-    future: p.future,
-    past: p.past,
-    pause: U,
-    paused: p.paused,
-    redo: P,
-    replace: A,
-    resume: O,
-    set: N,
-    setDirect: R,
-    state: p.present,
-    undo: L
-  };
+  ), P = D(() => ({
+    canRedo: i(l.future) !== 0,
+    canUndo: i(l.past) !== 0,
+    future: l.future,
+    past: l.past,
+    paused: l.paused,
+    present: l.present
+  }), [l]), C = D(() => {
+    const { debounceMs: n = 250, debounceSettings: e } = E.current, u = g(
+      (r) => a({ type: "SET", newPresent: r }),
+      n,
+      e
+    );
+    return {
+      clear: () => {
+        a({
+          type: "CLEAR",
+          initialState: w.current
+        });
+      },
+      pause: () => {
+        a({ type: "PAUSE" });
+      },
+      redo: () => {
+        a({ type: "REDO" });
+      },
+      replace: (r) => {
+        a({ type: "REPLACE", newPresent: r });
+      },
+      resume: () => {
+        a({ type: "RESUME" });
+      },
+      set: (r) => {
+        n ? u(r) : a({ type: "SET", newPresent: r });
+      },
+      setDirect: (r) => {
+        a({ type: "SET", newPresent: r });
+      },
+      undo: () => {
+        a({ type: "UNDO" });
+      }
+    };
+  }, []);
+  return b(() => {
+    p && (E.current = p);
+  }, [p]), [P, C];
 };
 export {
-  G as default
+  H as default
 };

package/package.json

@@ -50,5 +50,5 @@
 		"test:coverage": "vitest --coverage --run",
 		"test:watch": "vitest"
 	},
-	"version": "1.0.38"
+	"version": "1.0.40"
 }