dx: add devtools integration (#1942) (#1949)

close #1942

Co-authored-by: Eduardo San Martin Morote <[email protected]>
Co-authored-by: Kia King Ishii <[email protected]>

Author: 3 people

.babelrc

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

.eslintrc.json

@@ -4,6 +4,7 @@
     "plugin:vue-libs/recommended"
   ],
   "globals": {
-    "__DEV__": true
+    "__DEV__": true,
+    "__VUE_PROD_DEVTOOLS__": true
   }
 }

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(100)
+    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

@@ -1,4 +1,5 @@
 import shop from '../../api/shop'
+import nested from './nested'
 
 // initial state
 // shape: [{ id, quantity }]
@@ -29,20 +30,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) {
@@ -88,5 +89,8 @@ export default {
   state,
   getters,
   actions,
-  mutations
+  mutations,
+  modules: {
+    nested
+  }
 }

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

@@ -0,0 +1,9 @@
+export default {
+  namespaced: true,
+  state: () => ({
+    foo: 'bar'
+  }),
+  getters: {
+    twoBars: state => state.foo.repeat(2)
+  }
+}

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)
   }
 }
 

package.json

@@ -54,6 +54,9 @@
   "peerDependencies": {
     "vue": "^3.0.2"
   },
+  "dependencies": {
+    "@vue/devtools-api": "^6.0.0-beta.10"
+  },
   "devDependencies": {
     "@babel/core": "^7.12.10",
     "@babel/preset-env": "^7.12.11",

rollup.config.js

@@ -25,6 +25,9 @@ function createEntries() {
 }
 
 function createEntry(config) {
+  const isGlobalBuild = config.format === 'iife'
+  const isBunderBuild = config.format !== 'iife' && !config.browser
+
   const c = {
     external: ['vue'],
     input: config.input,
@@ -44,15 +47,20 @@ function createEntry(config) {
     }
   }
 
-  if (config.format === 'iife' || config.format === 'umd') {
+  if (isGlobalBuild) {
     c.output.name = c.output.name || 'Vuex'
   }
 
+  if (!isGlobalBuild) {
+    c.external.push('@vue/devtools-api')
+  }
+
   c.plugins.push(replace({
     __VERSION__: pkg.version,
-    __DEV__: config.format !== 'iife' && !config.browser
+    __DEV__: isBunderBuild
       ? `(process.env.NODE_ENV !== 'production')`
-      : config.env !== 'production'
+      : config.env !== 'production',
+    __VUE_PROD_DEVTOOLS__: isBunderBuild ? '__VUE_PROD_DEVTOOLS__' : 'false'
   }))
 
   if (config.transpile !== false) {