[WIP]: Dynamic config reload (#1290)

config/default.json

@@ -7,8 +7,11 @@
       "useOutputCacheTagging": false,
       "useOutputCache": false,
       "outputCacheDefaultTtl": 86400,
-      "availableCacheTags": ["product", "category", "home", "checkout", "page-not-found", "compare", "my-account", "P", "C"],
-      "invalidateCacheKey": "aeSu7aip"
+      "availableCacheTags": ["product", "category", "home", "checkout", "page-not-found", "compare", "my-account", "P", "C", "error"],
+      "invalidateCacheKey": "aeSu7aip",
+      "dynamicConfigReload": false,
+      "dynamicConfigExclude": ["ssr", "storeViews", "entities", "localForage", "shipping", "boost", "query"],
+      "dynamicConfigInclude": []
     },
     "console": {
       "verbosityLevel": "only-errors"
@@ -37,7 +40,7 @@
         "basic": "dist/index.basic.html"
       },
       "executeMixedinAsyncData": true,
-      "initialStateFilter": ["config", "__DEMO_MODE__", "version", "storeView"],
+      "initialStateFilter": ["__DEMO_MODE__", "version", "storeView"],
       "useInitialStateFilter": true
     },
     "defaultStoreCode": "",

core/app.ts

@@ -2,7 +2,7 @@ import Vue from 'vue'
 import { sync } from 'vuex-router-sync'
 import VueObserveVisibility from 'vue-observe-visibility'
 import { union } from 'lodash-es'
-import config from 'config'
+import buildTimeConfig from 'config'
 import VueLazyload from 'vue-lazyload'
 import Vuelidate from 'vuelidate'
 import Meta from 'vue-meta'
@@ -28,23 +28,63 @@ import { InMemoryCache } from 'apollo-cache-inmemory'
 import VueApollo from 'vue-apollo'
 
 import { takeOverConsole } from '@vue-storefront/core/helpers/log'
-if (config.console.verbosityLevel !== 'display-everything') {
-  takeOverConsole(config.console.verbosityLevel)
+if (buildTimeConfig.console.verbosityLevel !== 'display-everything') {
+  takeOverConsole(buildTimeConfig.console.verbosityLevel)
 }
 
-const httpLink = new HttpLink({
-    uri: config.server.protocol + '://' + config.graphql.host + ':' + config.graphql.port + '/graphql'
-})
-
-const apolloClient = new ApolloClient({
+export function createApp (ssrContext, config): { app: Vue, router: any, store: any } {
+  sync(store, router)
+  store.state.version = '1.4.0'
+  store.state.config = config
+  store.state.__DEMO_MODE__ = (config.demomode === true) ? true : false
+
+  if(ssrContext) Vue.prototype.$ssrRequestContext = ssrContext
+
+  if (!store.state.config) store.state.config = buildTimeConfig // if provided from SSR, don't replace it
+  const storeModules = Object.assign(coreModules, themeModules || {})
+
+  for (const moduleName of Object.keys(storeModules)) {
+    console.debug('Registering Vuex module', moduleName)
+    store.registerModule(moduleName, storeModules[moduleName])
+  }
+
+  const storeView = prepareStoreView(null) // prepare the default storeView
+  store.state.storeView = storeView
+  // store.state.shipping.methods = shippingMethods
+
+  Vue.use(Vuelidate)
+  Vue.use(VueLazyload, {attempt: 2})
+  Vue.use(Meta)
+  Vue.use(VueObserveVisibility)
+
+  require('theme/plugins')
+  const pluginsObject = plugins()
+  Object.keys(pluginsObject).forEach(key => {
+    Vue.use(pluginsObject[key])
+  })
+
+  const mixinsObject = mixins()
+  Object.keys(mixinsObject).forEach(key => {
+    Vue.mixin(mixinsObject[key])
+  })
+
+  const filtersObject = filters()
+  Object.keys(filtersObject).forEach(key => {
+    Vue.filter(key, filtersObject[key])
+  })
+  const httpLink = new HttpLink({
+    uri: store.state.config.server.protocol + '://' + store.state.config.graphql.host + ':' + store.state.config.graphql.port + '/graphql'
+  })
+
+  const apolloClient = new ApolloClient({
     link: httpLink,
     cache: new InMemoryCache(),
     connectToDevTools: true
-})
-
-let loading = 0
-
-const apolloProvider = new VueApollo({
+  })
+  
+  let loading = 0
+  
+  const apolloProvider = new VueApollo({
     clients: {
         a: apolloClient
     },
@@ -60,49 +100,10 @@ const apolloProvider = new VueApollo({
         console.log('Global error handler')
         console.error(error)
     }
-})
-
-Vue.use(VueApollo)
-// End declare Apollo graphql client
-
-store.state.version = '1.3.0'
-store.state.__DEMO_MODE__ = (config.demomode === true) ? true : false
-store.state.config = config
-
-const storeModules = Object.assign(coreModules, themeModules || {})
-
-for (const moduleName of Object.keys(storeModules)) {
-  console.debug('Registering Vuex module', moduleName)
-  store.registerModule(moduleName, storeModules[moduleName])
-}
-
-const storeView = prepareStoreView(null) // prepare the default storeView
-store.state.storeView = storeView
-// store.state.shipping.methods = shippingMethods
-
-Vue.use(Vuelidate)
-Vue.use(VueLazyload, {attempt: 2})
-Vue.use(Meta)
-Vue.use(VueObserveVisibility)
-
-require('theme/plugins')
-const pluginsObject = plugins()
-Object.keys(pluginsObject).forEach(key => {
-  Vue.use(pluginsObject[key])
-})
-
-const mixinsObject = mixins()
-Object.keys(mixinsObject).forEach(key => {
-  Vue.mixin(mixinsObject[key])
-})
-
-const filtersObject = filters()
-Object.keys(filtersObject).forEach(key => {
-  Vue.filter(key, filtersObject[key])
-})
-
-export function createApp (serverContext = null): { app: Vue, router: any, store: any } {
-  sync(store, router)
+  })
+
+  Vue.use(VueApollo)
+  // End declare Apollo graphql client    
   const app = new Vue({
     router,
     store,
@@ -115,11 +116,10 @@ export function createApp (serverContext = null): { app: Vue, router: any, store
     app,
     router,
     store,
-    config,
-    serverContext
+    store.state.config,
+    ssrContext
   )
-
-  registerTheme(config.theme, app, router, store)
+  registerTheme(buildTimeConfig.theme, app, router, store, store.state.config, ssrContext)
 
   app.$emit('application-after-init', app)
 

core/client-entry.ts

@@ -5,6 +5,7 @@ import { union } from 'lodash-es'
 import { createApp } from '@vue-storefront/core/app'
 import EventBus from '@vue-storefront/core/plugins/event-bus'
 
+import buildTimeConfig from 'config'
 import { execute } from '@vue-storefront/store/lib/task'
 import UniversalStorage from '@vue-storefront/store/lib/storage'
 import i18n from '@vue-storefront/i18n'
@@ -15,14 +16,12 @@ require('@vue-storefront/core/service-worker-registration') // register the serv
 
 declare var window: any
 
-const { app, router, store } = createApp()
-
-const config = store.state.config
+const config = Object.assign(buildTimeConfig, window.__INITIAL_STATE__.config ? window.__INITIAL_STATE__.config : buildTimeConfig)
+const { app, router, store } = createApp(null, config)
 
 let storeCode = null // select the storeView by prefetched vuex store state (prefetched serverside)
 if (window.__INITIAL_STATE__) {
-  store.replaceState(Object.assign({}, store.state, window.__INITIAL_STATE__))
-  store.state.requestContext.outputCacheTags = new Set<string>()
+  store.replaceState(Object.assign({}, store.state, window.__INITIAL_STATE__, { config: buildTimeConfig }))
 }
 if (config.storeViews.multistore === true) {
   if ((storeCode = store.state.user.current_storecode)) {
@@ -64,7 +63,7 @@ function _ssrHydrateSubcomponents (components, next, to) {
 }
 router.onReady(() => {
   router.beforeResolve((to, from, next) => {
-    store.state.requestContext.outputCacheTags = new Set<string>()
+    if (Vue.prototype.$ssrRequestContext) Vue.prototype.$ssrRequestContext.output.cacheTags = new Set<string>()
     const matched = router.getMatchedComponents(to)
     const prevMatched = router.getMatchedComponents(from)
     if (to) { // this is from url

core/components/ProductBundleOptions.js

@@ -2,7 +2,6 @@ import { mapMutations } from 'vuex'
 import * as types from '@vue-storefront/store/mutation-types'
 import rootStore from '@vue-storefront/store'
 import i18n from '@vue-storefront/i18n'
-import config from 'config'
 
 function _defaultOptionValue (co, field = 'id') {
   if (co.product_links && co.product_links.length) {
@@ -51,12 +50,12 @@ export default {
 
     this.setupInputFields()
 
-    if (config.usePriceTiers) {
+    if (rootStore.state.config.usePriceTiers) {
       this.$bus.$on('product-after-setup-associated', this.setupInputFields)
     }
   },
   beforeDestroy () {
-    if (config.usePriceTiers) {
+    if (rootStore.state.usePriceTiers) {
       this.$bus.$off('product-after-setup-associated', this.setupInputFields)
     }
   },

core/components/ProductGallery.js

@@ -1,6 +1,6 @@
 import { Carousel, Slide } from 'vue-carousel'
 import VueOffline from 'vue-offline'
-import config from 'config'
+import store from '@vue-storefront/store'
 
 export default {
   name: 'ProductGallery',
@@ -60,8 +60,8 @@ export default {
       }
     },
     selectVariant () {
-      if (config.products.gallery.mergeConfigurableChildren) {
-        let option = this.configuration[config.products.gallery.variantsGroupAttribute]
+      if (store.state.config.products.gallery.mergeConfigurableChildren) {
+        let option = this.configuration[store.state.config.products.gallery.variantsGroupAttribute]
         if (typeof option !== 'undefined' && option !== null) {
           let index = this.gallery.findIndex(obj => obj.id && Number(obj.id) === Number(option.id))
           this.navigate(index)

core/components/SortBy.js

@@ -1,4 +1,4 @@
-import config from 'config'
+import store from '@vue-storefront/store'
 export default {
   name: 'SortBy',
   data () {
@@ -18,7 +18,7 @@ export default {
   },
   computed: {
     sortByAttribute () {
-      return config.products.sortByAttributes
+      return store.state.config.products.sortByAttributes
     }
   }
 }

core/components/blocks/Footer/Footer.js

@@ -1,10 +1,10 @@
-import config from 'config'
+import rootStore from '@vue-storefront/store'
 
 export default {
   name: 'MainFooter',
   computed: {
     multistoreEnabled () {
-      return config.storeViews.multistore
+      return rootStore.state.config.storeViews.multistore
     }
   }
 }

core/lib/extensions.js

@@ -1,8 +1,8 @@
-export default function registerExtensions (extensions, app, router, store, config, serverContext = null) {
+export default function registerExtensions (extensions, app, router, store, config, ssrContext = null) {
   for (let extEntryPoint of extensions) {
     if (extEntryPoint !== null) {
       if (extEntryPoint.default) extEntryPoint = extEntryPoint.default
-      let extDescriptor = extEntryPoint(app, router, store, config, serverContext) // register module
+      let extDescriptor = extEntryPoint(app, router, store, config, ssrContext) // register module
       if (extDescriptor != null) {
         console.debug('Loaded', extDescriptor.EXTENSION_KEY)
         app.$emit('application-after-registerExtensions', extDescriptor)

core/lib/themes.js

@@ -30,10 +30,10 @@ export function extendStore (coreStore, extendStore) {
   return merge(coreStore, extendStore)
 }
 
-export function registerTheme (themeName, app, routes, store) {
+export function registerTheme (themeName, app, routes, store, config, ssrContext) {
   let themeEntryPoint = require('theme/index.js')
   if (themeEntryPoint != null && themeEntryPoint.hasOwnProperty('default')) {
-    themeEntryPoint.default(app, routes, store) // register theme
+    themeEntryPoint.default(app, routes, store, config, ssrContext) // register theme
   } else {
     throw new Error('Wrong theme name: ' + themeName)
   }

core/mixins/thumbnail/index.js

@@ -1,4 +1,4 @@
-import config from 'config'
+import store from '@vue-storefront/store'
 
 export const thumbnail = {
   methods: {
@@ -9,7 +9,7 @@ export const thumbnail = {
      * @param {Int} height
      */
     getThumbnail (relativeUrl, width, height) {
-      return relativeUrl && relativeUrl.indexOf('no_selection') < 0 ? `${config.images.baseUrl}${parseInt(width)}/${parseInt(height)}/resize${relativeUrl}` : config.images.productPlaceholder || ''
+      return relativeUrl && relativeUrl.indexOf('no_selection') < 0 ? `${store.state.config.images.baseUrl}${parseInt(width)}/${parseInt(height)}/resize${relativeUrl}` : store.state.config.images.productPlaceholder || ''
     }
   }
 }

core/modules/offline-order/features/cancelOrders.ts

@@ -7,7 +7,7 @@
  * Part of [Offline order API Module](https://github.com/DivanteLtd/vue-storefront/tree/master/doc/api-modules)
  */
 import * as localForage from 'localforage'
-import config from 'config'
+import store from '@vue-storefront/store'
 
 import EventBus from '@vue-storefront/core/plugins/event-bus'
 import UniversalStorage from '@vue-storefront/store/lib/storage'
@@ -18,7 +18,7 @@ export const cancelOrders = {
       const ordersCollection = new UniversalStorage(localForage.createInstance({
         name: 'shop',
         storeName: 'orders',
-        driver: localForage[config.localForage.defaultDrivers['orders']]
+        driver: localForage[store.state.config.localForage.defaultDrivers['orders']]
       }))
 
       ordersCollection.iterate((order, id, iterationNumber) => {

core/modules/offline-order/features/confirmOrders.ts

@@ -7,13 +7,13 @@
  * Part of [Offline order API Module](https://github.com/DivanteLtd/vue-storefront/tree/master/doc/api-modules)
  */
 import EventBus from '@vue-storefront/core/plugins/event-bus'
-import config from 'config'
+import store from '@vue-storefront/store'
 
 export const confirmOrders = {
   methods: {
     confirmOrders () {
-      EventBus.$emit('order/PROCESS_QUEUE', { config: config })
-      EventBus.$emit('sync/PROCESS_QUEUE', { config: config })
+      EventBus.$emit('order/PROCESS_QUEUE', { config: store.state.config })
+      EventBus.$emit('sync/PROCESS_QUEUE', { config: store.state.config })
       this.$store.dispatch('cart/load')
       EventBus.$emit('modal-hide', 'modal-order-confirmation')
     }

core/modules/offline-order/helpers/onNetworkStatusChange.ts

@@ -1,5 +1,5 @@
 import * as localForage from 'localforage'
-import config from 'config'
+import store from '@vue-storefront/store'
 
 import EventBus from '@vue-storefront/core/plugins/event-bus'
 
@@ -10,19 +10,19 @@ export function onNetworkStatusChange (store) {
   console.log('Are we online: ' + navigator.onLine)
 
   if (typeof navigator !== 'undefined' && navigator.onLine) {
-    EventBus.$emit('sync/PROCESS_QUEUE', { config: config }) // process checkout queue
+    EventBus.$emit('sync/PROCESS_QUEUE', { config: store.state.config }) // process checkout queue
     store.dispatch('cart/load')
 
-    if (config.orders.offline_orders.automatic_transmission_enabled || store.getters['checkout/isThankYouPage']) {
-      EventBus.$emit('order/PROCESS_QUEUE', { config: config }) // process checkout queue
+    if (store.state.config.orders.offline_orders.automatic_transmission_enabled || store.getters['checkout/isThankYouPage']) {
+      EventBus.$emit('order/PROCESS_QUEUE', { config: store.state.config }) // process checkout queue
       // store.dispatch('cart/serverPull', { forceClientState: false })
     } else {
       const ordersToConfirm = []
       const storeView = currentStoreView()
       const ordersCollection = new UniversalStorage(localForage.createInstance({
         name: 'shop',
         storeName: 'orders',
-        driver: localForage[config.localForage.defaultDrivers['orders']]
+        driver: localForage[store.state.config.localForage.defaultDrivers['orders']]
       }))
 
       ordersCollection.iterate((order, id, iterationNumber) => {