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]>

.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) {