Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: setup devtools integration #1949

Merged
merged 18 commits into from May 20, 2021
Merged
Show file tree
Hide file tree
Changes from 14 commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
8 changes: 7 additions & 1 deletion .babelrc
@@ -1,3 +1,9 @@
{
"presets": ["@babel/preset-env"]
"presets": [
["@babel/preset-env", {
"exclude": [
"transform-regenerator"
]
}]
]
}
3 changes: 2 additions & 1 deletion .eslintrc.json
Expand Up @@ -4,6 +4,7 @@
"plugin:vue-libs/recommended"
],
"globals": {
"__DEV__": true
"__DEV__": true,
"__VUE_PROD_DEVTOOLS__": true
}
}
24 changes: 17 additions & 7 deletions examples/classic/shopping-cart/api/shop.js
Expand Up @@ -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)
})
}
26 changes: 15 additions & 11 deletions 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 }]
Expand Down Expand Up @@ -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) {
Expand Down Expand Up @@ -88,5 +89,8 @@ export default {
state,
getters,
actions,
mutations
mutations,
modules: {
nested
}
}
9 changes: 9 additions & 0 deletions 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)
}
}
7 changes: 3 additions & 4 deletions examples/classic/shopping-cart/store/modules/products.js
Expand Up @@ -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)
}
}

Expand Down
3 changes: 3 additions & 0 deletions package.json
Expand Up @@ -54,6 +54,9 @@
"peerDependencies": {
"vue": "^3.0.2"
},
"dependencies": {
"@vue/devtools-api": "^6.0.0-beta.7"
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If it is added as a dependency, shouldn't we mark it as external too? I will need to follow the same on Vue Router. Currently it is not marked as external and therefor is only a dev dependency

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I thought this was here to support Type imports in TS...? In that case I think it should be the same in Router too. Am I correct @Akryum ?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It does nothing except calling a function or putting the plugin into a queue array.

},
"devDependencies": {
"@babel/core": "^7.12.10",
"@babel/preset-env": "^7.12.11",
Expand Down
6 changes: 4 additions & 2 deletions rollup.config.js
Expand Up @@ -48,11 +48,13 @@ function createEntry(config) {
c.output.name = c.output.name || 'Vuex'
}

const useBuildFlags = config.format !== 'iife' && !config.browser
c.plugins.push(replace({
__VERSION__: pkg.version,
__DEV__: config.format !== 'iife' && !config.browser
__DEV__: useBuildFlags
? `(process.env.NODE_ENV !== 'production')`
: config.env !== 'production'
: config.env !== 'production',
__VUE_PROD_DEVTOOLS__: useBuildFlags ? '__VUE_PROD_DEVTOOLS__' : 'false'
}))

if (config.transpile !== false) {
Expand Down