use-good-hooks 1.0.39 → 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,27 +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
-    - `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,155 +1,165 @@
-import { useRef as k, useReducer as I, useCallback as l, useEffect as K } from "react";
-import Q from "lodash/cloneDeep";
-import W from "lodash/isNil";
-import o from "lodash/size";
-import X from "./use-debounce-fn.js";
-const Y = {
+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
-}, c = (f, p) => p ? f : Q(f), Z = (f, p, S) => S ? f === p : JSON.stringify(f) === JSON.stringify(p), ee = (f, p) => {
-  const { maxCapacity: S, debounceMs: D, debounceSettings: q, onChange: U, immutable: n } = p || {}, b = k(f), e = k(U), [E, i] = I(
-    (t, r) => {
-      var L, x, F, M, T, H;
-      const { future: w, past: y, paused: d, present: m } = t;
-      if (r.type === "CLEAR") {
-        const u = {
+}, 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: [],
           paused: d,
-          present: c(r.initialState, n)
+          present: c(e.initialState, u)
         };
-        return (L = e.current) == null || L.call(e, {
-          action: r.type,
-          state: u.present
-        }), u;
+        return S({
+          action: e.type,
+          state: s.present
+        }), s;
       } else {
-        if (r.type === "PAUSE")
+        if (e.type === "PAUSE")
           return {
-            ...t,
+            ...n,
             paused: !0
           };
-        if (r.type === "REDO") {
-          if (o(w) === 0)
-            return t;
-          const u = w[0], a = {
-            future: w.slice(1),
-            past: [...y, c(m, n)],
+        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(u, n)
+            present: c(s, u)
           };
-          return (x = e.current) == null || x.call(e, {
-            action: r.type,
-            state: a.present
-          }), a;
+          return S({
+            action: e.type,
+            state: o.present
+          }), o;
         } else {
-          if (r.type === "RESUME")
+          if (e.type === "RESUME")
             return {
-              ...t,
+              ...n,
               paused: !1
             };
-          if (r.type === "REPLACE") {
-            const { newPresent: u } = r, s = {
-              ...t,
+          if (e.type === "REPLACE") {
+            const { newPresent: s } = e, t = {
+              ...n,
               future: [],
               past: [],
-              present: u
+              present: s
             };
-            return (F = e.current) == null || F.call(e, {
-              action: r.type,
-              state: s.present
-            }), s;
-          } else if (r.type === "SET") {
-            const { newPresent: u } = r;
-            if (Z(u, m, n))
-              return t;
+            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 J = {
-                ...t,
-                present: c(u, n)
+              const U = {
+                ...n,
+                present: c(s, u)
               };
-              return (M = e.current) == null || M.call(e, {
-                action: r.type,
-                state: J.present
-              }), J;
+              return S({
+                action: e.type,
+                state: U.present
+              }), U;
             }
-            let s = [...y];
-            m !== null && (s = [...s, c(m, n)]), !W(S) && S > 0 && o(s) > S && (s = s.slice(o(s) - S));
-            const a = {
+            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: s,
+              past: t,
               paused: d,
-              present: c(u, n)
+              present: c(s, u)
             };
-            return (T = e.current) == null || T.call(e, {
-              action: r.type,
-              state: a.present
-            }), a;
-          } else if (r.type === "UNDO") {
-            if (o(y) === 0)
-              return t;
-            const u = y[o(y) - 1], s = y.slice(0, o(y) - 1), a = {
-              future: [c(m, n), ...w],
-              past: s,
+            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(u, n)
+              present: c(s, u)
             };
-            return (H = e.current) == null || H.call(e, {
-              action: r.type,
-              state: a.present
-            }), a;
+            return S({
+              action: e.type,
+              state: o.present
+            }), o;
           } else
             throw new Error("Unsupported action type");
         }
       }
     },
     {
-      ...Y,
-      paused: (p == null ? void 0 : p.paused) ?? !1,
-      present: c(b.current, n)
+      ...L,
+      paused: E.current.paused ?? !1,
+      present: c(
+        w.current,
+        E.current.immutable
+      )
     }
-  ), P = o(E.future) !== 0, A = o(E.past) !== 0, v = l(() => i({
-    initialState: b.current,
-    type: "CLEAR"
-  }), []), z = l(() => {
-    i({ type: "PAUSE" });
-  }, []), R = l(() => {
-    P && i({ type: "REDO" });
-  }, [P]), V = l((t) => {
-    i({ type: "REPLACE", newPresent: t });
-  }, []), j = l(() => {
-    i({ type: "RESUME" });
-  }, []), N = X(
-    (t) => i({ type: "SET", newPresent: t }),
-    D,
-    q
-  ), O = l((t) => i({ type: "SET", newPresent: t }), []), B = l(
-    (t) => {
-      D ? N(t) : O(t);
-    },
-    [D, N, O]
-  ), G = l(() => {
-    A && i({ type: "UNDO" });
-  }, [A]);
-  return K(() => {
-    e.current = U;
-  }, [U]), {
-    canRedo: P,
-    canUndo: A,
-    clear: v,
-    future: E.future,
-    past: E.past,
-    pause: z,
-    paused: E.paused,
-    redo: R,
-    replace: V,
-    resume: j,
-    set: B,
-    setDirect: O,
-    state: E.present,
-    undo: G
-  };
+  ), 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 {
-  ee as default
+  H as default
 };

package/package.json

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