@provydon/vue-auto-save 1.1.1 → 1.3.1

package/README.md

@@ -68,6 +68,8 @@ const { isAutoSaving, blockWatcher, unblockWatcher, stop } = useAutoSaveForm(
 |--------|------|---------|-------------|
 | `onSave` | `() => void \| Promise<void>` | **Required** | Function called when auto-save should trigger |
 | `debounce` | `number` | `3000` | Delay in milliseconds before saving |
+| `minSaveInterval` | `number` | `2000` | Minimum time in milliseconds between saves (prevents rapid successive saves) |
+| `trackLastSaved` | `boolean` | `true` | Track last successfully saved state to prevent saving identical data (prevents infinite loops) |
 | `skipFields` | `string[]` | `[]` | Field names to exclude from tracking |
 | `skipInertiaFields` | `boolean` | `true` | Skip common Inertia.js form helpers |
 | `deep` | `boolean` | `true` | Deep watch the form object |
@@ -77,6 +79,7 @@ const { isAutoSaving, blockWatcher, unblockWatcher, stop } = useAutoSaveForm(
 | `compare` | `(a, b) => boolean` | `undefined` | Custom comparison function |
 | `onBeforeSave` | `() => void` | `undefined` | Called before saving |
 | `onAfterSave` | `() => void` | `undefined` | Called after successful save |
+| `onSaveSuccess` | `(savedData) => void` | `undefined` | Called when save completes with saved form data (useful for updating tracked state with server response) |
 | `onError` | `(err) => void` | `undefined` | Called on save error |
 
 ### Return Values
@@ -153,6 +156,28 @@ blockWatcher()
 unblockWatcher() // Resume auto-save
 ```
 
+### Prevent Infinite Loops with Server Updates (Default Behavior)
+
+```ts
+// trackLastSaved and minSaveInterval are enabled by default
+const { isAutoSaving } = useAutoSaveForm(form, {
+  onSave: async () => {
+    const response = await api.post('/save', form)
+    // Server response updates form data - no infinite loop!
+    Object.assign(form, response.data)
+  }
+  // trackLastSaved: true (default)
+  // minSaveInterval: 2000 (default)
+})
+
+// To disable these features if needed:
+const { isAutoSaving } = useAutoSaveForm(form, {
+  onSave: saveToAPI,
+  trackLastSaved: false, // Disable if you want to save identical data
+  minSaveInterval: 0, // Disable minimum interval
+})
+```
+
 ### With Ref Forms
 
 ```ts

package/dist/index.d.ts

@@ -4,6 +4,17 @@ export interface UseAutoSaveFormOptions {
      * Delay in milliseconds before auto-saving after changes (default: 3000ms)
      */
     debounce?: number;
+    /**
+     * Minimum time in milliseconds between saves (default: 2000ms)
+     * Prevents rapid successive saves even if data changes
+     */
+    minSaveInterval?: number;
+    /**
+     * Track last successfully saved state to prevent saving identical data (default: true)
+     * When enabled, only saves if current state differs from last saved state
+     * Prevents infinite loops when server responses update form data
+     */
+    trackLastSaved?: boolean;
     /**
      * List of form field keys to exclude from tracking
      */
@@ -46,8 +57,14 @@ export interface UseAutoSaveFormOptions {
     onBeforeSave?: () => void;
     /**
      * Called after a successful auto-save
+     * If trackLastSaved is true, the form state at this point will be tracked as the last saved state
      */
     onAfterSave?: () => void;
+    /**
+     * Called when save completes successfully with the saved form data
+     * Use this to update the tracked last saved state with server response data
+     */
+    onSaveSuccess?: (savedData: Record<string, unknown>) => void;
     /**
      * Called if auto-saving throws or fails
      */

package/dist/useAutoSaveForm.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("vue"),P=["save","applicationId","isDirty","processing","errors","hasErrors","recentlySuccessful","wasSuccessful","data","transform","get","post","put","patch","delete","cancel","reset","clearErrors","setError","setData"];function q(c,h){const{debounce:n=3e3,skipFields:T=[],skipInertiaFields:I=!0,deep:O=!0,debug:u=!1,serialize:D=JSON.stringify,compare:o,saveOnInit:g=!1,onSave:W,onBeforeSave:m,onAfterSave:y,onError:l}=h,a=s.ref(!1),r=s.ref(!0);let i=()=>{},f=()=>{};const j=(t=1e3)=>{r.value=!1,i(),f(),setTimeout(()=>{r.value=!0},t)},z=(t=null)=>{if(r.value=!0,i(),f(),t===null)d(),o?p=null:v=null,S();else{const e=A(S,t);f=e.cancel,e.call()}},d=()=>{const t=s.isRef(c)?s.unref(c):c,e={};for(const b of Object.keys(t))I&&P.includes(b)||T.includes(b)||(e[b]=t[b]);return e};let v=g?null:D(d()),p=o?g?null:d():null;const S=()=>{if(!r.value)return;const t=d();if(o){if(p&&o(p,t))return;p=t}else{const e=D(t);if(v!==null&&e===v)return;v=e}u&&console.log("[AutoSave] Detected changes. Saving..."),a.value=!0;try{m==null||m(),Promise.resolve(W()).then(()=>{y==null||y(),u&&console.log("[AutoSave] Save successful.")}).catch(e=>{l==null||l(e),u&&console.error("[AutoSave] Save failed:",e)}).finally(()=>{a.value=!1})}catch(e){l==null||l(e),u&&console.error("[AutoSave] Immediate error:",e),a.value=!1}},F=A(S,n),w=F.call;i=F.cancel;const k=s.watch(c,w,{deep:O,flush:"post"});return s.onScopeDispose(()=>{k(),i(),f()}),g&&S(),{isAutoSaving:a,blockWatcher:j,unblockWatcher:z,stop:k}}function A(c,h){let n;return{call:()=>{clearTimeout(n),n=setTimeout(()=>c(),h)},cancel:()=>{clearTimeout(n)}}}exports.useAutoSaveForm=q;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("vue"),E=["save","applicationId","isDirty","processing","errors","hasErrors","recentlySuccessful","wasSuccessful","data","transform","get","post","put","patch","delete","cancel","reset","clearErrors","setError","setData"];function G(c,D){const{debounce:f=3e3,minSaveInterval:O=2e3,trackLastSaved:p=!0,skipFields:L=[],skipInertiaFields:q=!0,deep:J=!0,debug:n=!1,serialize:v=JSON.stringify,compare:s,saveOnInit:g=!1,onSave:M,onBeforeSave:F,onAfterSave:w,onSaveSuccess:I,onError:o}=D,b=a.ref(!1),m=a.ref(!0);let h=null,k=null,j=0,y=()=>{},A=()=>{},i=!1;const z=(e=1e3)=>{m.value=!1,y(),A(),setTimeout(()=>{m.value=!0},e)},N=(e=null)=>{if(m.value=!0,y(),A(),e===null)i=!0,s?r=null:u=null,T(),i=!1;else{const l=x(T,e);A=l.cancel,l.call()}},d=()=>{const e=a.isRef(c)?a.unref(c):c,l={};for(const t of Object.keys(e))q&&E.includes(t)||L.includes(t)||(l[t]=e[t]);return l};let u=g?null:v(d()),r=s?g?null:d():null;if(p&&!g){const e=d();s?k={...e}:h=v(e)}const R=e=>{p&&(s?k={...e}:h=v(e))},T=()=>{if(!m.value&&!i)return;const e=Date.now();if(!i&&O>0&&e-j<O){n&&console.log("[AutoSave] Skipping save - too soon after last save");return}const l=d();if(i)s?r=l:u=v(l);else if(s){if(p&&k&&s(k,l)){n&&console.log("[AutoSave] Skipping save - identical to last saved state"),r=l;return}if(r&&s(r,l))return;r=l}else{const t=v(l);if(p&&h!==null&&t===h){n&&console.log("[AutoSave] Skipping save - identical to last saved state"),u=t;return}if(u!==null&&t===u)return;u=t}n&&console.log("[AutoSave] Detected changes. Saving..."),b.value=!0,j=e;try{F==null||F();const t=Promise.resolve(M()).then(async()=>{await a.nextTick(),await a.nextTick();const S=d();R(S),I==null||I(S),w==null||w(),n&&console.log("[AutoSave] Save successful.")}).catch(S=>{o==null||o(S),n&&console.error("[AutoSave] Save failed:",S)}).finally(()=>{b.value=!1});return i||z(5e3),t}catch(t){o==null||o(t),n&&console.error("[AutoSave] Immediate error:",t),b.value=!1}},W=x(T,f),C=W.call;y=W.cancel;const P=a.watch(c,C,{deep:J,flush:"post"});return a.onScopeDispose(()=>{P(),y(),A()}),g&&T(),{isAutoSaving:b,blockWatcher:z,unblockWatcher:N,stop:P}}function x(c,D){let f;return{call:()=>{clearTimeout(f),f=setTimeout(()=>c(),D)},cancel:()=>{clearTimeout(f)}}}exports.useAutoSaveForm=G;

package/dist/useAutoSaveForm.mjs

@@ -1,5 +1,5 @@
-import { ref as F, watch as x, onScopeDispose as J, isRef as N, unref as P } from "vue";
-const R = [
+import { ref as x, watch as H, onScopeDispose as K, isRef as M, unref as Q, nextTick as L } from "vue";
+const U = [
   "save",
   "applicationId",
   "isDirty",
@@ -21,95 +21,123 @@ const R = [
   "setError",
   "setData"
 ];
-function C(c, h) {
+function X(n, D) {
   const {
-    debounce: s = 3e3,
-    skipFields: I = [],
-    skipInertiaFields: T = !0,
-    deep: O = !0,
-    debug: n = !1,
-    serialize: y = JSON.stringify,
-    compare: o,
-    saveOnInit: b = !1,
-    onSave: W,
-    onBeforeSave: m,
-    onAfterSave: g,
-    onError: l
-  } = h, u = F(!1), a = F(!0);
-  let r = () => {
-  }, i = () => {
-  };
-  const z = (t = 1e3) => {
-    a.value = !1, r(), i(), setTimeout(() => {
-      a.value = !0;
-    }, t);
-  }, j = (t = null) => {
-    if (a.value = !0, r(), i(), t === null)
-      f(), o ? v = null : d = null, p();
+    debounce: u = 3e3,
+    minSaveInterval: I = 2e3,
+    trackLastSaved: S = !0,
+    skipFields: J = [],
+    skipInertiaFields: N = !0,
+    deep: R = !0,
+    debug: a = !1,
+    serialize: f = JSON.stringify,
+    compare: s,
+    saveOnInit: p = !1,
+    onSave: q,
+    onBeforeSave: T,
+    onAfterSave: w,
+    onSaveSuccess: F,
+    onError: c
+  } = D, g = x(!1), m = x(!0);
+  let b = null, h = null, O = 0, k = () => {
+  }, A = () => {
+  }, o = !1;
+  const z = (e = 1e3) => {
+    m.value = !1, k(), A(), setTimeout(() => {
+      m.value = !0;
+    }, e);
+  }, C = (e = null) => {
+    if (m.value = !0, k(), A(), e === null)
+      o = !0, s ? r = null : i = null, y(), o = !1;
     else {
-      const e = A(p, t);
-      i = e.cancel, e.call();
+      const l = P(y, e);
+      A = l.cancel, l.call();
     }
-  }, f = () => {
-    const t = N(c) ? P(c) : c, e = {};
-    for (const S of Object.keys(t))
-      T && R.includes(S) || I.includes(S) || (e[S] = t[S]);
-    return e;
+  }, v = () => {
+    const e = M(n) ? Q(n) : n, l = {};
+    for (const t of Object.keys(e))
+      N && U.includes(t) || J.includes(t) || (l[t] = e[t]);
+    return l;
   };
-  let d = b ? null : y(f()), v = o ? b ? null : f() : null;
-  const p = () => {
-    if (!a.value) return;
-    const t = f();
-    if (o) {
-      if (v && o(v, t)) return;
-      v = t;
+  let i = p ? null : f(v()), r = s ? p ? null : v() : null;
+  if (S && !p) {
+    const e = v();
+    s ? h = { ...e } : b = f(e);
+  }
+  const E = (e) => {
+    S && (s ? h = { ...e } : b = f(e));
+  }, y = () => {
+    if (!m.value && !o) return;
+    const e = Date.now();
+    if (!o && I > 0 && e - O < I) {
+      a && console.log("[AutoSave] Skipping save - too soon after last save");
+      return;
+    }
+    const l = v();
+    if (o)
+      s ? r = l : i = f(l);
+    else if (s) {
+      if (S && h && s(h, l)) {
+        a && console.log("[AutoSave] Skipping save - identical to last saved state"), r = l;
+        return;
+      }
+      if (r && s(r, l)) return;
+      r = l;
     } else {
-      const e = y(t);
-      if (d !== null && e === d) return;
-      d = e;
+      const t = f(l);
+      if (S && b !== null && t === b) {
+        a && console.log("[AutoSave] Skipping save - identical to last saved state"), i = t;
+        return;
+      }
+      if (i !== null && t === i) return;
+      i = t;
     }
-    n && console.log("[AutoSave] Detected changes. Saving..."), u.value = !0;
+    a && console.log("[AutoSave] Detected changes. Saving..."), g.value = !0, O = e;
     try {
-      m == null || m(), Promise.resolve(W()).then(() => {
-        g == null || g(), n && console.log("[AutoSave] Save successful.");
-      }).catch((e) => {
-        l == null || l(e), n && console.error("[AutoSave] Save failed:", e);
+      T == null || T();
+      const t = Promise.resolve(q()).then(async () => {
+        await L(), await L();
+        const d = v();
+        E(d), F == null || F(d), w == null || w(), a && console.log("[AutoSave] Save successful.");
+      }).catch((d) => {
+        c == null || c(d), a && console.error("[AutoSave] Save failed:", d);
       }).finally(() => {
-        u.value = !1;
+        g.value = !1;
       });
-    } catch (e) {
-      l == null || l(e), n && console.error("[AutoSave] Immediate error:", e), u.value = !1;
+      return o || z(5e3), t;
+    } catch (t) {
+      c == null || c(t), a && console.error("[AutoSave] Immediate error:", t), g.value = !1;
     }
-  }, D = A(p, s), w = D.call;
-  r = D.cancel;
-  const k = x(
-    c,
-    w,
+  }, W = P(y, u), G = W.call;
+  k = W.cancel;
+  const j = H(
+    n,
+    G,
     {
-      deep: O,
+      deep: R,
       flush: "post"
     }
   );
-  return J(() => {
-    k(), r(), i();
-  }), b && p(), {
-    isAutoSaving: u,
+  return K(() => {
+    j(), k(), A();
+  }), p && y(), {
+    isAutoSaving: g,
     blockWatcher: z,
-    unblockWatcher: j,
-    stop: k
+    unblockWatcher: C,
+    stop: j
   };
 }
-function A(c, h) {
-  let s;
+function P(n, D) {
+  let u;
   return {
     call: () => {
-      clearTimeout(s), s = setTimeout(() => c(), h);
+      clearTimeout(u), u = setTimeout(() => n(), D);
     },
     cancel: () => {
-      clearTimeout(s);
+      clearTimeout(u);
     }
   };
 }
 export {
-  C as useAutoSaveForm
+  X as useAutoSaveForm
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@provydon/vue-auto-save",
-  "version": "1.1.1",
+  "version": "1.3.1",
   "description": "A Vue 3 composable that autosaves forms with debounce, optional field skipping, and blockable watchers.",
   "main": "./dist/useAutoSaveForm.cjs",
   "module": "./dist/useAutoSaveForm.mjs",