fix: commit/revert

Author: Guillaume Chau

src/backend/vuex.js

@@ -9,12 +9,21 @@ export function initVuexBackend (hook, bridge) {
     getters: store.getters || {}
   })
 
-  let mutationIndex = 0
-  const baseSnapshot = getSnapshot()
-  const snapshots = [
-    { index: -1, state: baseSnapshot }
-  ]
-  const mutations = []
+  let baseSnapshot, snapshots, mutations, lastState
+
+  function reset () {
+    baseSnapshot = getSnapshot()
+    mutations = []
+    resetSnapshotCache()
+  }
+
+  function resetSnapshotCache () {
+    snapshots = [
+      { index: -1, state: baseSnapshot }
+    ]
+  }
+
+  reset()
 
   bridge.send('vuex:init', baseSnapshot)
 
@@ -25,7 +34,7 @@ export function initVuexBackend (hook, bridge) {
   hook.on('vuex:mutation', ({ type, payload }) => {
     if (!SharedData.recordVuex) return
 
-    const index = mutationIndex++
+    const index = mutations.length
 
     mutations.push({
       type,
@@ -45,14 +54,38 @@ export function initVuexBackend (hook, bridge) {
   })
 
   // devtool -> application
-  bridge.on('vuex:travel-to-state', index => {
+  bridge.on('vuex:travel-to-state', ({ index, apply }) => {
     const snapshot = replayMutations(index)
     const { state } = parse(snapshot, true)
-    hook.emit('vuex:travel-to-state', state)
     bridge.send('vuex:inspected-state', {
       index,
       snapshot
     })
+    if (apply) {
+      hook.emit('vuex:travel-to-state', state)
+    }
+  })
+
+  bridge.on('vuex:commit-all', () => {
+    reset()
+  })
+
+  bridge.on('vuex:revert-all', () => {
+    reset()
+  })
+
+  bridge.on('vuex:commit', index => {
+    baseSnapshot = lastState
+    resetSnapshotCache()
+    mutations = mutations.slice(index + 1)
+    mutations.forEach((mutation, index) => {
+      mutation.index = index
+    })
+  })
+
+  bridge.on('vuex:revert', index => {
+    resetSnapshotCache()
+    mutations = mutations.slice(0, index)
   })
 
   bridge.on('vuex:import-state', state => {
@@ -118,6 +151,8 @@ export function initVuexBackend (hook, bridge) {
     // Send final state after replay
     const resultState = getSnapshot()
 
+    lastState = resultState
+
     // Restore user state
     store.replaceState(currentState)
 

src/devtools/index.js

@@ -8,6 +8,7 @@ import { isChrome, initEnv } from './env'
 import SharedData, { init as initSharedData, destroy as destroySharedData } from 'src/shared-data'
 import storage from './storage'
 import { snapshotsCache } from './views/vuex/cache'
+import VuexResolve from './views/vuex/resolve'
 
 // UI
 
@@ -140,6 +141,11 @@ function initApp (shell) {
     bridge.on('vuex:inspected-state', ({ index, snapshot }) => {
       snapshotsCache.set(index, snapshot)
       store.commit('vuex/UPDATE_INSPECTED_STATE', snapshot)
+
+      if (VuexResolve.travel) {
+        VuexResolve.travel(snapshot)
+      }
+
       requestAnimationFrame(() => {
         SharedData.snapshotLoading = null
       })

src/devtools/views/vuex/VuexHistory.vue

@@ -58,7 +58,7 @@
     >
       <template slot-scope="{ item: entry, index }">
         <div
-          v-if="index === 0"
+          v-if="index <= 0"
           :class="{ active: activeIndex === -1, inspected: inspectedIndex === -1 }"
           class="entry list-item"
           @click="inspect(null)"

src/devtools/views/vuex/actions.js

@@ -1,33 +1,47 @@
 import { snapshotsCache } from './cache'
+import Resolve from './resolve'
 import SharedData from 'src/shared-data'
 
 export function commitAll ({ commit, state }) {
   if (state.history.length > 0) {
-    commit('COMMIT_ALL')
-    travelTo(state, commit, -1)
+    travelTo(state, commit, state.history.length - 1).then(() => {
+      snapshotsCache.reset()
+      bridge.send('vuex:commit-all')
+      commit('COMMIT_ALL')
+    })
   }
 }
 
 export function revertAll ({ commit, state }) {
   if (state.history.length > 0) {
-    commit('REVERT_ALL')
-    travelTo(state, commit, -1)
+    travelTo(state, commit, -1).then(() => {
+      snapshotsCache.reset()
+      bridge.send('vuex:revert-all')
+      commit('REVERT_ALL')
+    })
   }
 }
 
 export function commit ({ commit, state }, entry) {
   const index = state.history.indexOf(entry)
   if (index > -1) {
-    commit('COMMIT', index)
-    travelTo(state, commit, -1)
+    travelTo(state, commit, index, false).then(() => {
+      snapshotsCache.reset()
+      bridge.send('vuex:commit', index)
+      commit('COMMIT', index)
+      travelTo(state, commit, state.history.length - 1)
+    })
   }
 }
 
 export function revert ({ commit, state }, entry) {
   const index = state.history.indexOf(entry)
   if (index > -1) {
-    commit('REVERT', index)
-    travelTo(state, commit, state.history.length - 1)
+    travelTo(state, commit, index - 1).then(() => {
+      snapshotsCache.reset()
+      bridge.send('vuex:revert', index)
+      commit('REVERT', index)
+    })
   }
 }
 
@@ -55,25 +69,28 @@ export function inspect ({ commit, getters }, entryOrIndex) {
 }
 
 export function timeTravelTo ({ state, commit }, entry) {
-  travelTo(state, commit, state.history.indexOf(entry))
+  return travelTo(state, commit, state.history.indexOf(entry))
 }
 
 export function updateFilter ({ commit }, filter) {
   commit('UPDATE_FILTER', filter)
 }
 
-function travelTo (state, commit, index) {
-  const { inspectedIndex } = state
+function travelTo (state, commit, index, apply = true) {
+  return new Promise((resolve) => {
+    Resolve.travel = resolve
+    const { inspectedIndex } = state
 
-  commit('UPDATE_INSPECTED_STATE', null)
-  SharedData.snapshotLoading = {
-    current: 0,
-    total: 1
-  }
-  bridge.send('vuex:travel-to-state', index)
+    commit('UPDATE_INSPECTED_STATE', null)
+    SharedData.snapshotLoading = {
+      current: 0,
+      total: 1
+    }
+    bridge.send('vuex:travel-to-state', { index, apply })
 
-  if (index !== inspectedIndex) {
-    commit('INSPECT', index)
-  }
-  commit('TIME_TRAVEL', index)
+    if (index !== inspectedIndex) {
+      commit('INSPECT', index)
+    }
+    commit('TIME_TRAVEL', index)
+  })
 }

src/devtools/views/vuex/module.js

@@ -35,7 +35,7 @@ const mutations = {
   },
 
   'COMMIT_ALL' (state) {
-    state.base = state.history[state.history.length - 1].snapshot
+    state.base = state.inspectedState
     state.lastCommit = Date.now()
     reset(state)
   },
@@ -45,9 +45,12 @@ const mutations = {
   },
 
   'COMMIT' (state, index) {
-    state.base = state.history[index].snapshot
+    state.base = state.inspectedState
     state.lastCommit = Date.now()
     state.history = state.history.slice(index + 1)
+    state.history.forEach(({ mutation }, index) => {
+      mutation.index = index
+    })
     state.inspectedIndex = -1
   },
 

src/devtools/views/vuex/resolve.js

@@ -0,0 +1,3 @@
+export default {
+  travel: null
+}