vue2-excel-grid 2.0.0 → 2.0.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue2-excel-grid",
-  "version": "2.0.0",
+  "version": "2.0.2",
   "description": "Excel-style grid component for Vue 2.6.14 with virtual scrolling",
   "license": "MIT",
   "author": "Fozilbek Raimberdiyev",

package/src/components/ExcelGrid.vue

@@ -947,8 +947,8 @@ import EgLocalSyncModal from './EgLocalSyncModal.vue'
 import { parseDateValue, formatDate } from '../utils/dateUtils.js'
 import { formatNumber as _formatNumber } from '../utils/numberFormat.js'
 import { Mask, MaskInput } from '../utils/mask.js'
-import { listVersions, getVersion, deleteVersion, saveOrTouchVersion } from '../utils/idbStore.js'
-import { hashRowsAsync } from '../utils/dataHash.js'
+import { listVersions, getVersion, deleteVersion, saveOrTouchVersion, putBuffer, getBuffer, clearBuffer } from '../utils/idbStore.js'
+import { hashRows, hashRowsAsync } from '../utils/dataHash.js'
 
 const SIZE_CONFIG = {
   small:  { row: 22, header: 24, footer: 24, filter: 26 },
@@ -2402,7 +2402,20 @@ const ExcelGridComponent = {
     naturalGridWidth() {
       if (this.widthMode === 'auto') this.$nextTick(this.syncHeaderViewportWidth)
     },
-    widthMode() { this.$nextTick(this.syncHeaderViewportWidth) }
+    widthMode() { this.$nextTick(this.syncHeaderViewportWidth) },
+
+    // localSyncKey feature — mounted() only calls _loadLocalVersionsOnMount()
+    // once, at mount time. Without this watcher, a key that starts empty (a
+    // host conditionally passing `:local-sync-key="ready ? id : null"`, or
+    // one only known after an async load) and later becomes truthy would
+    // never load its version list, never promote a leftover buffer, and
+    // never show the toolbar badge — the feature would look "broken" for the
+    // rest of that page's lifetime even though everything else works.
+    localSyncKey(newKey, oldKey) {
+      if (newKey === oldKey) return
+      this.localSyncAvailable = false
+      if (newKey) this._loadLocalVersionsOnMount()
+    }
   },
 
   created() {
@@ -2526,6 +2539,7 @@ const ExcelGridComponent = {
     clearTimeout(this._onInputTimer)
     clearTimeout(this._dragCleanupTimer)
     clearTimeout(this._widthSyncChainResetTimer)
+    clearTimeout(this._bufferWriteTimer)
     if (this._dragScrollRAF) cancelAnimationFrame(this._dragScrollRAF)
     document.removeEventListener('mousemove', this.onGlobalMouseMove)
     document.removeEventListener('mouseup', this.onGlobalMouseUp)
@@ -2537,7 +2551,10 @@ const ExcelGridComponent = {
     window.removeEventListener('pagehide', this._onPageHideForLocalSync)
     // Best-effort — the component may be torn down (SPA route change) without
     // the page itself unloading, which visibilitychange/pagehide won't catch.
-    this._flushLocalVersionOnHide()
+    // sync: true — see _flushLocalVersionOnHide()'s comment; a component
+    // being destroyed is exactly the same "might not survive an async hop"
+    // situation as the other two triggers.
+    this._flushLocalVersionOnHide(false, true)
     if (this.isFullscreen) {
       document.body.style.overflow = this._prevBodyOverflow || ''
       document.removeEventListener('keydown', this._onFullscreenKeyDown)
@@ -6055,6 +6072,7 @@ const ExcelGridComponent = {
         // All edit paths already use spread ({ ...row }) so frozen rows are safe.
         const data = result.data.map(row => Object.freeze(row))
         this.$emit('input', data)
+        this._scheduleBufferWrite(data)
         this.$emit('update:columns', columns)
 
         const hasMerges = merges && merges.length > 0
@@ -6170,6 +6188,7 @@ const ExcelGridComponent = {
         }
       }
       this.$emit('input', newData)
+      this._scheduleBufferWrite(newData)
     },
 
     // Emit 'update:merges' and record a merges diff entry.
@@ -6203,6 +6222,7 @@ const ExcelGridComponent = {
             newData.length = entry.before.rowCount
           }
           this.$emit('input', newData)
+          this._scheduleBufferWrite(newData)
         } else if (entry.type === 'merges') {
           this.internalMerges = entry.before.slice()
           this.$emit('update:merges', entry.before.slice())
@@ -6225,6 +6245,7 @@ const ExcelGridComponent = {
             newData[entry.after.indices[i]] = entry.after.rows[i]
           }
           this.$emit('input', newData)
+          this._scheduleBufferWrite(newData)
         } else if (entry.type === 'merges') {
           this.internalMerges = entry.after.slice()
           this.$emit('update:merges', entry.after.slice())
@@ -6267,6 +6288,7 @@ const ExcelGridComponent = {
     // already exist for this key (e.g. saved in an earlier visit).
     async _loadLocalVersionsOnMount() {
       if (!this.localSyncKey) return
+      await this._promoteBufferIfAny()
       try {
         const versions = await listVersions(this.localSyncKey)
         if (!versions.length) return
@@ -6281,12 +6303,76 @@ const ExcelGridComponent = {
       }
     },
 
+    // Debounced (800ms), called from the grid's own real-change points
+    // (_emitDataChange, import, undo, redo — the exact same "user worked"
+    // signal _flushLocalVersionOnHide() relies on, never a $watch on `data`,
+    // for the same reason spelled out on the localSyncKey prop's JSDoc: a
+    // host loading rows from an API must never look like a user edit).
+    //
+    // Writes to IndexedDB's 'buffer' store (idbStore.js — one row per key, no
+    // hash, no history) at a moment with no teardown race at all — the user
+    // is actively still on the page. This is what actually fixes reload/
+    // close data loss: a version-store write ATTEMPTED at the leave-signal
+    // has no guarantee of finishing before an actual page teardown (verified
+    // directly — even a trivial, unrelated IndexedDB write failed to survive
+    // a real page.reload() in Chromium), but a buffer write that already
+    // completed minutes or seconds earlier, during ordinary editing, needs no
+    // such guarantee — it's already durably there. _promoteBufferIfAny()
+    // turns it into a real version next time the grid mounts.
+    _scheduleBufferWrite(data) {
+      if (!this.localSyncKey) return
+      const key = this.localSyncKey // captured now, not re-read 800ms later —
+      // a host that swaps localSyncKey mid-edit (rare, but now reactive, see
+      // the localSyncKey watcher above) must not have this land under the
+      // NEW key with the OLD key's data.
+      clearTimeout(this._bufferWriteTimer)
+      this._bufferWriteTimer = setTimeout(() => { this._writeBufferNow(key, data) }, 800)
+    },
+
+    async _writeBufferNow(key, data) {
+      if (!key) return
+      try {
+        await putBuffer(key, data)
+      } catch (error) {
+        this.$emit('local-sync-error', { action: 'save', error })
+      }
+    },
+
+    // Called once from _loadLocalVersionsOnMount(), before this key's version
+    // list is read — folds a leftover buffer (from an edit that was saved
+    // during the PREVIOUS visit but never made it into 'versions' — the
+    // reload/close case this whole mechanism exists for) into a real version.
+    // No time pressure here, so this uses the Worker-backed hashRowsAsync()
+    // like any other non-leave-signal path.
+    async _promoteBufferIfAny() {
+      try {
+        const buffered = await getBuffer(this.localSyncKey)
+        if (!buffered) return
+        const hash = await hashRowsAsync(buffered.data)
+        const { version, overwritten } = await saveOrTouchVersion(
+          this.localSyncKey, buffered.data, hash, this.localSyncMaxVersions
+        )
+        await clearBuffer(this.localSyncKey)
+        this.$emit('local-sync-save', {
+          key: this.localSyncKey,
+          id: version.id,
+          rows: buffered.data.length,
+          updatedAt: version.updatedAt,
+          overwritten
+        })
+      } catch (error) {
+        this.$emit('local-sync-error', { action: 'save', error })
+      }
+    },
+
+    // `sync: true` — see _flushLocalVersionOnHide()'s comment on why the
+    // passive leave-triggers can't afford a Worker round-trip.
     _onVisibilityChangeForLocalSync() {
-      if (document.visibilityState === 'hidden') this._flushLocalVersionOnHide()
+      if (document.visibilityState === 'hidden') this._flushLocalVersionOnHide(false, true)
     },
 
     _onPageHideForLocalSync() {
-      this._flushLocalVersionOnHide()
+      this._flushLocalVersionOnHide(false, true)
     },
 
     // The core save-on-leave path — replaces a per-edit autosave (see the
@@ -6296,34 +6382,60 @@ const ExcelGridComponent = {
     // does the latter). Triggered from mounted()'s visibilitychange/pagehide
     // listeners and beforeDestroy() — see those for the three trigger points.
     //
-    // Content-hashes the current `data` (via a Web Worker when available —
-    // src/utils/dataHash.js — falling back to the same algorithm
-    // synchronously otherwise, so this always resolves) and either touches
-    // an existing local version with the same hash (just refreshes its
-    // timestamp — "ustiga yoziladi, alohida versiya qilinmaydi") or creates
-    // a brand-new one, evicting the oldest past localSyncMaxVersions (FIFO —
-    // see idbStore.js's saveOrTouchVersion()). Never throws — IndexedDB
-    // failures become local-sync-error.
+    // Content-hashes the current `data` and either touches an existing local
+    // version with the same hash (just refreshes its timestamp — "ustiga
+    // yoziladi, alohida versiya qilinmaydi") or creates a brand-new one,
+    // evicting the oldest past localSyncMaxVersions (FIFO — see idbStore.js's
+    // saveOrTouchVersion()). Never throws — IndexedDB failures become
+    // local-sync-error.
     //
     // `force` skips the "nothing changed since the last flush" short-circuit
     // below. The passive triggers (visibilitychange/pagehide/beforeDestroy)
-    // fire often on an idle tab and must NOT wake the worker/IndexedDB for
-    // no reason, so they leave it in place. saveLocalVersionNow() — an
-    // explicit, infrequent, host/modal-initiated "checkpoint now" action —
-    // passes force so it never silently does nothing: even unchanged data
-    // still gets its existing version's timestamp refreshed via the same
-    // hash-dedup path, rather than the caller seeing no effect at all.
-    async _flushLocalVersionOnHide(force = false) {
+    // fire often on an idle tab and must NOT wake IndexedDB for no reason, so
+    // they leave it in place. saveLocalVersionNow() — an explicit, infrequent,
+    // host/modal-initiated "checkpoint now" action — passes force so it never
+    // silently does nothing: even unchanged data still gets its existing
+    // version's timestamp refreshed via the same hash-dedup path, rather than
+    // the caller seeing no effect at all.
+    //
+    // `sync` picks hashRows() (main thread) over the Worker-based
+    // hashRowsAsync(). This was a real, observed bug, not a theoretical one:
+    // a Worker round-trip (postMessage out, worker computes, postMessage
+    // back) is one more hop through the event loop than a page that's
+    // actually being torn down (as opposed to merely hidden — e.g. a tab
+    // switch, where the page stays alive indefinitely and the extra hop
+    // costs nothing) can be relied on to survive. visibilitychange/pagehide/
+    // beforeDestroy all fire in exactly that "might be torn down any moment"
+    // window, so they hash synchronously to remove that hop — the whole
+    // flush then only has the unavoidable async part (the IndexedDB write
+    // itself) left, giving it the best realistic chance to land before
+    // teardown. saveLocalVersionNow() (an explicit host/modal action with no
+    // teardown racing it) keeps the Worker, so hashing a large `data` array
+    // doesn't block the main thread during ordinary use.
+    async _flushLocalVersionOnHide(force = false, sync = false) {
       if (!this.localSyncKey) return
       if (!force && this.data === this._lastFlushedDataRef) return // nothing changed since the last flush
       const data = this.data
+      // Fires independently of the version-save attempt below, started as
+      // early as possible — see _scheduleBufferWrite()'s comment. This is
+      // the save that's actually likely to survive an imminent teardown;
+      // the version-store write below is best-effort on top of it, reliable
+      // for the common case (tab switch/background, page stays alive).
+      clearTimeout(this._bufferWriteTimer)
+      this._writeBufferNow(this.localSyncKey, data)
       try {
-        const hash = await hashRowsAsync(data)
+        const hash = sync ? hashRows(data) : await hashRowsAsync(data)
         if (this.data !== data) return // data changed again mid-hash — a later flush will catch it
         const { version, overwritten } = await saveOrTouchVersion(
           this.localSyncKey, data, hash, this.localSyncMaxVersions
         )
         this._lastFlushedDataRef = data
+        // The version store now has this content durably — the buffer's job
+        // for it is done. Best-effort like everything else here: if this
+        // doesn't complete before teardown, _promoteBufferIfAny() finds the
+        // (now-redundant but harmless, dedup makes it a no-op touch) buffer
+        // on next mount anyway.
+        clearBuffer(this.localSyncKey).catch(() => {})
         this.$emit('local-sync-save', {
           key: this.localSyncKey,
           id: version.id,

package/src/utils/idbStore.js

@@ -17,11 +17,28 @@
 //   detect "this is the same content as an existing version" — in that case
 //   the existing record's `updatedAt` is bumped instead of creating a new id
 //   ("ustiga yoziladi, alohida versiya qilinmaydi").
+//
+// v3 adds 'buffer', keyPath 'localSyncKey' (one row per key — always
+// overwritten, no history). This exists to solve a real, verified gap: an
+// IndexedDB write started at visibilitychange/pagehide/beforeDestroy has NO
+// guarantee of completing before an actual page reload/close tears the page
+// down (confirmed directly — even a trivial, unrelated IndexedDB write in a
+// bare-minimum repro failed to survive a real page.reload() in Chromium; this
+// is a browser/spec characteristic, not something a Worker or a different
+// object store can fix). 'versions' writes still happen on the leave-signal
+// (reliable for tab-switch/backgrounding, where the page stays alive), but
+// ExcelGrid.vue ALSO writes to 'buffer' on every real edit (debounced, no
+// hash needed, cheap) — at a moment with no teardown race at all — so that
+// whatever the user last typed survives even a reload/close where the
+// leave-signal write doesn't land in time. On the next mount, the buffer (if
+// any) is promoted into 'versions' via saveOrTouchVersion() at leisure, then
+// cleared. See ExcelGrid.vue's _scheduleBufferWrite()/_promoteBufferIfAny().
 const DB_NAME = 'vue2-excel-grid-sync'
 const STORE_NAME = 'versions'
+const BUFFER_STORE_NAME = 'buffer'
 const OLD_STORE_NAME = 'snapshots' // v1 — dropped on upgrade, not migrated
 const INDEX_BY_KEY = 'by_localSyncKey'
-const DB_VERSION = 2
+const DB_VERSION = 3
 
 function pad2(n) { return n < 10 ? '0' + n : '' + n }
 
@@ -52,6 +69,9 @@ function openDb() {
         const store = db.createObjectStore(STORE_NAME, { keyPath: 'id' })
         store.createIndex(INDEX_BY_KEY, 'localSyncKey', { unique: false })
       }
+      if (!db.objectStoreNames.contains(BUFFER_STORE_NAME)) {
+        db.createObjectStore(BUFFER_STORE_NAME, { keyPath: 'localSyncKey' })
+      }
     }
     req.onsuccess = () => resolve(req.result)
     req.onerror = () => reject(req.error)
@@ -159,3 +179,36 @@ export async function saveOrTouchVersion(localSyncKey, data, hash, maxVersions)
 
   return { version: record, overwritten: false }
 }
+
+// The 'buffer' store — see the schema comment at the top of this file. One
+// row per localSyncKey, always overwritten; no hash, no history, no eviction.
+export async function putBuffer(localSyncKey, data) {
+  const db = await openDb()
+  return new Promise((resolve, reject) => {
+    const tx = db.transaction(BUFFER_STORE_NAME, 'readwrite')
+    const record = { localSyncKey, data, updatedAt: Date.now() }
+    tx.objectStore(BUFFER_STORE_NAME).put(record)
+    tx.oncomplete = () => { db.close(); resolve(record) }
+    tx.onerror = () => { db.close(); reject(tx.error) }
+  })
+}
+
+export async function getBuffer(localSyncKey) {
+  const db = await openDb()
+  return new Promise((resolve, reject) => {
+    const tx = db.transaction(BUFFER_STORE_NAME, 'readonly')
+    const req = tx.objectStore(BUFFER_STORE_NAME).get(localSyncKey)
+    req.onsuccess = () => { db.close(); resolve(req.result || null) }
+    req.onerror = () => { db.close(); reject(req.error) }
+  })
+}
+
+export async function clearBuffer(localSyncKey) {
+  const db = await openDb()
+  return new Promise((resolve, reject) => {
+    const tx = db.transaction(BUFFER_STORE_NAME, 'readwrite')
+    tx.objectStore(BUFFER_STORE_NAME).delete(localSyncKey)
+    tx.oncomplete = () => { db.close(); resolve() }
+    tx.onerror = () => { db.close(); reject(tx.error) }
+  })
+}