feat(devtools): actions timeline layer

.babelrc

@@ -1,3 +1,9 @@
 {
-  "presets": ["@babel/preset-env"]
+  "presets": [
+    ["@babel/preset-env", {
+      "exclude": [
+        "transform-regenerator"
+      ]
+    }]
+  ]
 }

examples/classic/shopping-cart/api/shop.js

@@ -8,16 +8,26 @@ const _products = [
 ]
 
 export default {
-  getProducts (cb) {
-    setTimeout(() => cb(_products), 100)
+  async getProducts () {
+    await wait(100)
+    return _products
   },
 
-  buyProducts (products, cb, errorCb) {
-    setTimeout(() => {
+  async buyProducts (products) {
+    await wait(1000)
+    if (
       // simulate random checkout failure.
       (Math.random() > 0.5 || navigator.webdriver)
-        ? cb()
-        : errorCb()
-    }, 100)
+    ) {
+      return
+    } else {
+      throw new Error('Checkout error')
+    }
   }
 }
+
+function wait (ms) {
+  return new Promise(resolve => {
+    setTimeout(resolve, ms)
+  })
+}

examples/classic/shopping-cart/store/modules/cart.js

@@ -29,20 +29,20 @@ const getters = {
 
 // actions
 const actions = {
-  checkout ({ commit, state }, products) {
+  async checkout ({ commit, state }, products) {
     const savedCartItems = [...state.items]
     commit('setCheckoutStatus', null)
     // empty cart
     commit('setCartItems', { items: [] })
-    shop.buyProducts(
-      products,
-      () => commit('setCheckoutStatus', 'successful'),
-      () => {
-        commit('setCheckoutStatus', 'failed')
-        // rollback to the cart saved before sending the request
-        commit('setCartItems', { items: savedCartItems })
-      }
-    )
+    try {
+      await shop.buyProducts(products)
+      commit('setCheckoutStatus', 'successful')
+    } catch (e) {
+      console.error(e)
+      commit('setCheckoutStatus', 'failed')
+      // rollback to the cart saved before sending the request
+      commit('setCartItems', { items: savedCartItems })
+    }
   },
 
   addProductToCart ({ state, commit }, product) {

examples/classic/shopping-cart/store/modules/products.js

@@ -10,10 +10,9 @@ const getters = {}
 
 // actions
 const actions = {
-  getAllProducts ({ commit }) {
-    shop.getProducts(products => {
-      commit('setProducts', products)
-    })
+  async getAllProducts ({ commit }) {
+    const products = await shop.getProducts()
+    commit('setProducts', products)
   }
 }
 

src/plugins/devtool.js

@@ -5,6 +5,7 @@ const LABEL_VUEX_BINDINGS = 'vuex bindings'
 let isAlreadyInstalled
 
 const MUTATIONS_LAYER_ID = 'vuex:mutations'
+const ACTIONS_LAYER_ID = 'vuex:actions'
 const INSPECTOR_ID = 'vuex'
 
 export function addDevtools (app, store) {
@@ -22,7 +23,13 @@ export function addDevtools (app, store) {
       if (!isAlreadyInstalled) {
         api.addTimelineLayer({
           id: MUTATIONS_LAYER_ID,
-          label: 'Vuex',
+          label: 'Vuex Mutations',
+          color: COLOR_LIME_500
+        })
+
+        api.addTimelineLayer({
+          id: ACTIONS_LAYER_ID,
+          label: 'Vuex Actions',
           color: COLOR_LIME_500
         })
 
@@ -82,6 +89,55 @@ export function addDevtools (app, store) {
           }
         })
       })
+
+      store.subscribeAction({
+        before: (action, state) => {
+          const data = {}
+          if (action.payload) {
+            data.payload = action.payload
+          }
+          action.time = Date.now()
+          data.state = state
+
+          api.addTimelineEvent({
+            layerId: ACTIONS_LAYER_ID,
+            event: {
+              time: action.time,
+              title: action.type,
+              groupId: action.id,
+              subtitle: 'start',
+              data
+            }
+          })
+        },
+        after: (action, state) => {
+          const data = {}
+          const duration = Date.now() - action.time
+          data.duration = {
+            _custom: {
+              type: 'duration',
+              display: `${duration}ms`,
+              tooltip: 'Action duration',
+              value: duration
+            }
+          }
+          if (action.payload) {
+            data.payload = action.payload
+          }
+          data.state = state
+
+          api.addTimelineEvent({
+            layerId: ACTIONS_LAYER_ID,
+            event: {
+              time: Date.now(),
+              title: action.type,
+              groupId: action.id,
+              subtitle: 'end',
+              data
+            }
+          })
+        }
+      })
     }
   )
 }

src/store.js

@@ -23,6 +23,7 @@ export class Store {
     // store internal state
     this._committing = false
     this._actions = Object.create(null)
+    this._actionId = 0
     this._actionSubscribers = []
     this._mutations = Object.create(null)
     this._wrappedGetters = Object.create(null)
@@ -122,7 +123,11 @@ export class Store {
       payload
     } = unifyObjectStyle(_type, _payload)
 
-    const action = { type, payload }
+    const action = {
+      id: this._actionId++,
+      type,
+      payload
+    }
     const entry = this._actions[type]
     if (!entry) {
       if (__DEV__) {