From 079c8449fa5a4aec0bda15f9b43ad76855cfcbc3 Mon Sep 17 00:00:00 2001 From: patzick Date: Fri, 14 Dec 2018 20:46:52 +0100 Subject: [PATCH 1/2] async await support --- core/build/dev-server.js | 2 +- core/build/webpack.base.config.js | 2 +- core/build/webpack.prod.sw.config.js | 2 +- core/build/webpack.server.config.js | 2 +- core/scripts/entry.js | 1 + package.json | 1 + yarn.lock | 14 ++++++++++++++ 7 files changed, 20 insertions(+), 4 deletions(-) diff --git a/core/build/dev-server.js b/core/build/dev-server.js index eb957e6949..358c335fa8 100644 --- a/core/build/dev-server.js +++ b/core/build/dev-server.js @@ -16,7 +16,7 @@ module.exports = function setupDevServer (app, cb) { let template // modify client config to work with hot middleware - clientConfig.entry.app = ['webpack-hot-middleware/client', clientConfig.entry.app] + clientConfig.entry.app = ['webpack-hot-middleware/client', ...clientConfig.entry.app] clientConfig.output.filename = '[name].js' clientConfig.plugins.push( new webpack.HotModuleReplacementPlugin(), diff --git a/core/build/webpack.base.config.js b/core/build/webpack.base.config.js index 85bc2b50a3..361e5c3ca1 100644 --- a/core/build/webpack.base.config.js +++ b/core/build/webpack.base.config.js @@ -74,7 +74,7 @@ module.exports = { ], devtool: 'source-map', entry: { - app: './core/client-entry.ts' + app: ['babel-polyfill', './core/client-entry.ts'] }, output: { path: path.resolve(__dirname, '../../dist'), diff --git a/core/build/webpack.prod.sw.config.js b/core/build/webpack.prod.sw.config.js index 3244b1731d..1dc15e1388 100644 --- a/core/build/webpack.prod.sw.config.js +++ b/core/build/webpack.prod.sw.config.js @@ -6,7 +6,7 @@ const SWPrecachePlugin = require('sw-precache-webpack-plugin') module.exports = merge(base, { mode: 'production', target: 'web', - entry: './core/service-worker/index.js', + entry: ['babel-polyfill', './core/service-worker/index.js'], output: { filename: 'core-service-worker.js' }, diff --git a/core/build/webpack.server.config.js b/core/build/webpack.server.config.js index ac42c35ac7..0b3b037308 100644 --- a/core/build/webpack.server.config.js +++ b/core/build/webpack.server.config.js @@ -6,7 +6,7 @@ const VueSSRPlugin = require('vue-ssr-webpack-plugin') module.exports = merge(base, { mode: 'development', target: 'node', - entry: './core/server-entry.ts', + entry: ['babel-polyfill', './core/server-entry.ts'], output: { filename: 'server-bundle.js', libraryTarget: 'commonjs2' diff --git a/core/scripts/entry.js b/core/scripts/entry.js index 8d6e8d3564..0ddb81ce9d 100644 --- a/core/scripts/entry.js +++ b/core/scripts/entry.js @@ -1,5 +1,6 @@ require('babel-register')({ presets: [ 'env' ] }) +require('babel-polyfill') module.exports = require('./server.js') diff --git a/package.json b/package.json index fa5cdcafcb..e01d741ea0 100755 --- a/package.json +++ b/package.json @@ -87,6 +87,7 @@ "babel-core": "^6.26.0", "babel-eslint": "^8.2.6", "babel-loader": "^7.1.3", + "babel-polyfill": "^6.26.0", "babel-preset-env": "^1.6.x", "babel-preset-stage-2": "^6.13.0", "case-sensitive-paths-webpack-plugin": "^2.1.2", diff --git a/yarn.lock b/yarn.lock index cc280951e9..619204ae17 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1972,6 +1972,15 @@ babel-plugin-transform-vue-jsx@^4.0.1: dependencies: esutils "^2.0.2" +babel-polyfill@^6.26.0: + version "6.26.0" + resolved "https://registry.yarnpkg.com/babel-polyfill/-/babel-polyfill-6.26.0.tgz#379937abc67d7895970adc621f284cd966cf2153" + integrity sha1-N5k3q8Z9eJWXCtxiHyhM2WbPIVM= + dependencies: + babel-runtime "^6.26.0" + core-js "^2.5.0" + regenerator-runtime "^0.10.5" + babel-preset-env@^1.6.x: version "1.7.0" resolved "https://registry.yarnpkg.com/babel-preset-env/-/babel-preset-env-1.7.0.tgz#dea79fa4ebeb883cd35dab07e260c1c9c04df77a" @@ -8610,6 +8619,11 @@ regenerate@^1.2.1, regenerate@^1.4.0: version "1.4.0" resolved "https://registry.yarnpkg.com/regenerate/-/regenerate-1.4.0.tgz#4a856ec4b56e4077c557589cae85e7a4c8869a11" +regenerator-runtime@^0.10.5: + version "0.10.5" + resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.10.5.tgz#336c3efc1220adcedda2c9fab67b5a7955a33658" + integrity sha1-M2w+/BIgrc7dosn6tntaeVWjNlg= + regenerator-runtime@^0.11.0, regenerator-runtime@^0.11.1: version "0.11.1" resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.11.1.tgz#be05ad7f9bf7d22e056f9726cee5017fbf19e2e9" From 9935b2bce9cd244c8a34bfae1d4e0782e598632b Mon Sep 17 00:00:00 2001 From: patzick Date: Fri, 14 Dec 2018 20:53:25 +0100 Subject: [PATCH 2/2] refactor for async/await showcase --- core/pages/Home.js | 20 +++-- .../theme/blocks/Collection/Collection.vue | 11 ++- src/themes/default/pages/Home.vue | 73 ++++++++----------- 3 files changed, 44 insertions(+), 60 deletions(-) diff --git a/core/pages/Home.js b/core/pages/Home.js index eeb1e9631b..cc71b160e5 100644 --- a/core/pages/Home.js +++ b/core/pages/Home.js @@ -14,17 +14,15 @@ export default { rootCategories: 'category/list' }) }, - asyncData ({ store, route, context }) { // this is for SSR purposes to prefetch data - return new Promise((resolve, reject) => { - if (context) context.output.cacheTags.add(`home`) - Logger.info('Calling asyncData in Home Page (core)')() - EventBus.$emitFilter('home-after-load', { store: store, route: route }).then((results) => { - return resolve() - }).catch((err) => { - console.error(err) - reject(err) - }) - }) + async asyncData ({ store, route, context }) { // this is for SSR purposes to prefetch data + if (context) context.output.cacheTags.add(`home`) + Logger.info('Calling asyncData in Home Page (core)')() + try { + await EventBus.$emitFilter('home-after-load', { store: store, route: route }) + } catch (e) { + console.error(e) + throw e + } }, beforeMount () { this.$store.dispatch('category/reset') diff --git a/src/themes/default/components/theme/blocks/Collection/Collection.vue b/src/themes/default/components/theme/blocks/Collection/Collection.vue index 303d077b91..5b953fbff0 100644 --- a/src/themes/default/components/theme/blocks/Collection/Collection.vue +++ b/src/themes/default/components/theme/blocks/Collection/Collection.vue @@ -45,18 +45,17 @@ export default { } } }, - beforeMount () { + async beforeMount () { let inspirationsQuery = prepareQuery({queryConfig: 'inspirations'}) - this.$store.dispatch('product/list', { + const res = await this.$store.dispatch('product/list', { query: inspirationsQuery, size: 12, sort: 'created_at:desc' - }).then(res => { - if (res) { - this.products = res.items - } }) + if (res) { + this.products = res.items + } }, components: { ProductsSlider diff --git a/src/themes/default/pages/Home.vue b/src/themes/default/pages/Home.vue index ae88b79e98..f7173215b1 100755 --- a/src/themes/default/pages/Home.vue +++ b/src/themes/default/pages/Home.vue @@ -72,57 +72,44 @@ export default { // Load personal and shipping details for Checkout page from IndexedDB this.$store.dispatch('checkout/load') }, - beforeMount () { + async beforeMount () { if (this.$store.state.__DEMO_MODE__) { - this.$store.dispatch('claims/check', { claimCode: 'onboardingAccepted' }).then((onboardingClaim) => { - if (!onboardingClaim) { // show onboarding info - this.$bus.$emit('modal-toggle', 'modal-onboard') - this.$store.dispatch('claims/set', { claimCode: 'onboardingAccepted', value: true }) - } - }) + const onboardingClaim = await this.$store.dispatch('claims/check', { claimCode: 'onboardingAccepted' }) + if (!onboardingClaim) { // show onboarding info + this.$bus.$emit('modal-toggle', 'modal-onboard') + this.$store.dispatch('claims/set', { claimCode: 'onboardingAccepted', value: true }) + } } }, - asyncData ({ store, route }) { // this is for SSR purposes to prefetch data + async asyncData ({ store, route }) { // this is for SSR purposes to prefetch data const config = store.state.config - return new Promise((resolve, reject) => { - Logger.info('Calling asyncData in Home (theme)')() - let newProductsQuery = prepareQuery({ queryConfig: 'newProducts' }) - let coolBagsQuery = prepareQuery({ queryConfig: 'coolBags' }) + Logger.info('Calling asyncData in Home (theme)')() - store.dispatch('category/list', { includeFields: config.entities.optimize ? config.entities.category.includeFields : null }).then((categories) => { - store.dispatch('product/list', { - query: newProductsQuery, - size: 8, - sort: 'created_at:desc', - includeFields: config.entities.optimize ? (config.products.setFirstVarianAsDefaultInURL ? config.entities.productListWithChildren.includeFields : config.entities.productList.includeFields) : [] - }).catch(err => { - reject(err) - }).then((res) => { - if (res) { - store.state.homepage.new_collection = res.items - } + let newProductsQuery = prepareQuery({ queryConfig: 'newProducts' }) + let coolBagsQuery = prepareQuery({ queryConfig: 'coolBags' }) - store.dispatch('product/list', { - query: coolBagsQuery, - size: 4, - sort: 'created_at:desc', - includeFields: config.entities.optimize ? (config.products.setFirstVarianAsDefaultInURL ? config.entities.productListWithChildren.includeFields : config.entities.productList.includeFields) : [] - }).then((res) => { - if (res) { - store.state.homepage.coolbags_collection = res.items - } - return resolve() - }).catch(err => { - reject(err) - }) - }).catch(err => { - reject(err) - }) - }).catch(err => { - reject(err) - }) + await store.dispatch('category/list', { includeFields: config.entities.optimize ? config.entities.category.includeFields : null }) + + const newProductsResult = await store.dispatch('product/list', { + query: newProductsQuery, + size: 8, + sort: 'created_at:desc', + includeFields: config.entities.optimize ? (config.products.setFirstVarianAsDefaultInURL ? config.entities.productListWithChildren.includeFields : config.entities.productList.includeFields) : [] }) + if (newProductsResult) { + store.state.homepage.new_collection = newProductsResult.items + } + + const coolBagsResult = await store.dispatch('product/list', { + query: coolBagsQuery, + size: 4, + sort: 'created_at:desc', + includeFields: config.entities.optimize ? (config.products.setFirstVarianAsDefaultInURL ? config.entities.productListWithChildren.includeFields : config.entities.productList.includeFields) : [] + }) + if (coolBagsResult) { + store.state.homepage.coolbags_collection = coolBagsResult.items + } } }