chore: Remove every call to the global variable (part 2)

core/app.ts

@@ -29,6 +29,10 @@ declare var global: any
 if (!global.$VS) global.$VS = {}
 
 store.state.version = '1.3'
+store.state.__DEMO_MODE__ = (config.demomode === true) ? true : false
+store.state.config = config
+global.$VS.i18n = i18n
+global.$VS.eventBus = EventBus
 
 const storeModules = Object.assign(coreModules, themeModules || {})
 
@@ -37,7 +41,7 @@ for (const moduleName of Object.keys(storeModules)) {
   store.registerModule(moduleName, storeModules[moduleName])
 }
 
-const storeView = prepareStoreView(null, config, i18n, EventBus) // prepare the default storeView
+const storeView = prepareStoreView(null) // prepare the default storeView
 store.state.storeView = storeView
 store.state.shipping.methods = shippingMethods
 
@@ -83,11 +87,5 @@ export function createApp (): { app: Vue, router: any, store: any } {
 
   app.$emit('application-after-init', app)
 
-  if (config.demomode === true) {
-    global.$VS.__DEMO_MODE__ = true
-  } else {
-    global.$VS.__DEMO_MODE__ = false
-  }
-
   return { app, router, store }
 }

core/client-entry.ts

@@ -1,12 +1,10 @@
 import * as localForage from 'localforage'
 import { union } from 'lodash-es'
 import sizeof from 'object-sizeof'
-import config from 'config'
 
 import { createApp } from '@vue-storefront/core/app'
 import EventBus from '@vue-storefront/core/plugins/event-bus'
 
-import rootStore from '@vue-storefront/store'
 import { execute } from '@vue-storefront/store/lib/task'
 import UniversalStorage from '@vue-storefront/store/lib/storage'
 import i18n from '@vue-storefront/core/lib/i18n'
@@ -20,13 +18,15 @@ declare var window: any
 
 const { app, router, store } = createApp()
 
+const config = store.state.config
+
 let storeCode = null // select the storeView by prefetched vuex store state (prefetched serverside)
 if (window.__INITIAL_STATE__) {
   store.replaceState(window.__INITIAL_STATE__)
 }
 if (config.storeViews.multistore === true) {
-  if ((storeCode = rootStore.state.user.current_storecode)) {
-    prepareStoreView(storeCode, config)
+  if ((storeCode = store.state.user.current_storecode)) {
+    prepareStoreView(storeCode)
   }
 }
 
@@ -74,7 +74,7 @@ router.onReady(() => {
           if (storeCode !== currentStore.storeCode) {
             document.location = to.path // full reload
           } else {
-            prepareStoreView(storeCode, config)
+            prepareStoreView(storeCode)
           }
         }
       }
@@ -314,8 +314,8 @@ EventBus.$on('user-before-logout', () => {
   }
 })
 
-rootStore.dispatch('cart/load')
-rootStore.dispatch('compare/load')
-rootStore.dispatch('user/startSession')
+store.dispatch('cart/load')
+store.dispatch('compare/load')
+store.dispatch('user/startSession')
 
 window.addEventListener('online', () => { onNetworkStatusChange(store) })

core/lib/i18n.ts

@@ -7,19 +7,12 @@ Vue.use(VueI18n)
 const loadedLanguages = ['en-US']
 const i18n = new VueI18n({
   locale: 'en-US', // set locale
-  fallbackLocale: 'en-US'
+  fallbackLocale: 'en-US',
+  messages: {
+    'en-US': require('../resource/i18n/en-US.json')
+  }
 })
 
-i18n.setLocaleMessage('en-US', require('../resource/i18n/en-US.json'))
-
-declare var global: any
-
-if (!global.$VS) {
-  global.$VS = { i18n: i18n }
-} else {
-  global.$VS.i18n = i18n
-}
-
 function setI18nLanguage (lang: string): string {
   i18n.locale = lang
   return lang
@@ -32,6 +25,9 @@ export function loadLanguageAsync (lang: string): Promise<string> {
         i18n.setLocaleMessage(lang, msgs.default)
         loadedLanguages.push(lang)
         return setI18nLanguage(lang)
+      }).catch(err => {
+        console.debug('Unable to load translation')
+        return ''
       })
     }
     return Promise.resolve(setI18nLanguage(lang))
@@ -41,4 +37,4 @@ export function loadLanguageAsync (lang: string): Promise<string> {
 
 loadLanguageAsync(config.i18n.defaultLocale)
 
-export default global.$VS.i18n
+export default i18n

core/package.json

@@ -10,7 +10,7 @@
   "dependencies": {
     "@vue-storefront/store": "^1.1.0",
     "app-root-path": "^2.0.1",
-    "bodybuilder": "^2.2.1",
+    "bodybuilder": "^2.2.13",
     "config": "^1.30.0",
     "d3-dsv": "^1.0.8",
     "detect-installed": "^2.0.4",
@@ -26,7 +26,7 @@
     "url-parse": "^1.2.0",
     "vue": "^2.5.2",
     "vue-carousel": "^0.6.9",
-    "vue-i18n": "^7.4.2",
+    "vue-i18n": "^8.0.0",
     "vue-lazyload": "^1.2.6",
     "vue-meta": "^1.4.3",
     "vue-observe-visibility": "^0.3.1",

core/server-entry.ts

@@ -1,4 +1,3 @@
-import config from 'config'
 import { union } from 'lodash-es'
 
 import { createApp } from '@vue-storefront/core/app'
@@ -37,13 +36,13 @@ export default context => {
     router.push(context.url)
     context.meta = meta
     router.onReady(() => {
-      if (config.storeViews.multistore === true) {
+      if (store.state.config.storeViews.multistore === true) {
         let storeCode = context.storeCode // this is from http header or env variable
         if (router.currentRoute) { // this is from url
           storeCode = storeCodeFromRoute(router.currentRoute)
         }
         if (storeCode !== '' && storeCode !== null) {
-          prepareStoreView(storeCode, config)
+          prepareStoreView(storeCode)
         }
       }
       const matchedComponents = router.getMatchedComponents()

core/store/helpers/index.js → core/store/helpers/index.ts

@@ -1,5 +1,5 @@
-import builder from 'bodybuilder'
-import config from '../lib/config'
+import rootStore from '../'
+import bodybuilder from 'bodybuilder'
 
 /**
  * Create slugify -> "create-slugify" permalink  of text
@@ -21,7 +21,7 @@ export function slugify (text) {
  */
 
 export function getThumbnailPath (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 ? `${rootStore.state.config.images.baseUrl}${parseInt(width)}/${parseInt(height)}/resize${relativeUrl}` : rootStore.state.config.images.productPlaceholder || ''
 }
 
 /**
@@ -33,7 +33,7 @@ export function breadCrumbRoutes (categoryPath) {
   for (let sc of categoryPath) {
     tmpRts.push({
       name: sc.name,
-      route_link: (config.products.useShortCatalogUrls ? '/' : '/c/') + sc.slug
+      route_link: (rootStore.state.config.products.useShortCatalogUrls ? '/' : '/c/') + sc.slug
     })
   }
 
@@ -65,7 +65,7 @@ export function productThumbnailPath (product, ignoreConfig = false) {
 }
 
 export function buildFilterProductsQuery (currentCategory, chosenFilters, defaultFilters = null) {
-  let filterQr = baseFilterProductsQuery(currentCategory, defaultFilters == null ? config.products.defaultFilters : defaultFilters)
+  let filterQr = baseFilterProductsQuery(currentCategory, defaultFilters == null ? rootStore.state.config.products.defaultFilters : defaultFilters)
   let attrFilterBuilder = (filterQr, attrPostfix = '') => {
     for (let code of Object.keys(chosenFilters)) {
       const filter = chosenFilters[code]
@@ -91,8 +91,8 @@ export function buildFilterProductsQuery (currentCategory, chosenFilters, defaul
 }
 
 export function baseFilterProductsQuery (parentCategory, filters = []) { // TODO add aggregation of color_options and size_options fields
-  let searchProductQuery = builder().andFilter('range', 'status', { 'gte': 0, 'lt': 2 }/* 2 = disabled, 4 = out of stock */).andFilter('range', 'visibility', { 'gte': 2, 'lte': 4 }/** Magento visibility in search & categories */)
-  if (config.products.listOutOfStockProducts === false) {
+  let searchProductQuery = bodybuilder().andFilter('range', 'status', { 'gte': 0, 'lt': 2 }/* 2 = disabled, 4 = out of stock */).andFilter('range', 'visibility', { 'gte': 2, 'lte': 4 }/** Magento visibility in search & categories */)
+  if (rootStore.state.config.products.listOutOfStockProducts === false) {
     searchProductQuery = searchProductQuery.andFilter('match', 'stock.is_in_stock', true)
   }
   // add filters to query

core/store/index.ts

@@ -1,5 +1,6 @@
 import Vue from 'vue'
 import Vuex from 'vuex'
+import { Plugin } from 'vuex'
 import * as types from './mutation-types'
 import * as localForage from 'localforage'
 import UniversalStorage from './lib/storage'
@@ -13,18 +14,36 @@ Vue.use(Vuex)
 
 const state = {
   version: '',
+  __DEMO_MODE__: false,
+  config: {},
+  cart: {},
+  checkout: {},
+  cms: {},
+  compare: {},
+  product: {},
+  shipping: {},
+  user: {},
+  wishlist: {},
   attribute: '',
   category: {
     current_path: '',
+    current_product_query: {},
     current: {
       slug: '',
       name: ''
-    }
+    },
+    filters: {}
   },
   stock: {
     cache: []
   },
-  storeView: {}
+  storeView: {},
+  twoStageCachingDelta1: 0,
+  twoStageCachingDelta2: 0,
+  twoStageCachingDisabled: false,
+  userTokenInvalidated: null,
+  userTokenInvalidateAttemptsCount: 0,
+  userTokenInvalidateLock: 0
 }
 
 const mutations = {
@@ -41,7 +60,7 @@ const mutations = {
   }
 }
 
-const plugins = [
+const plugins: Plugin<RootState>[] = [
   store => {
     store.subscribe((mutation, state) => {
       let nameArray = mutation.type.split('/')
@@ -127,38 +146,12 @@ let rootStore = new Vuex.Store<RootState>({
   state,
   mutations,
   plugins
-}) as any
+})
 
-rootStore.i18n = {
-  t: function (key) {
-    return key
-  }
-}
-rootStore.eventBus = new Vue()
-
-rootStore.init = function (config, i18n = null, eventBus = null) { // TODO: init sub modules "context" with i18n + eventBus
-  if (config !== null) {
-    console.debug('Vuex VS store - using external config')
-    this.config = config
-    global.$VS.config = Object.assign(global.$VS.config, config)
-  }
-  if (i18n !== null) {
-    console.debug('Vuex VS store - using external i18n')
-    this.i18n = i18n
-    global.$VS.i18n = Object.assign(global.$VS.i18n, i18n)
-  } else {
-    global.$VS.i18n = {
-      t: function (key) {
-        return key
-      }
-    }
-  }
-  if (eventBus !== null) {
-    console.debug('Vuex VS store - using external event-bus')
-    this.eventBus = eventBus
-    global.$VS.eventBus = Object.assign(global.$VS.eventBus, eventBus)
-  }
+export default rootStore
 
+export function initStore () {
+  const config = rootStore.state.config
   const storeView = currentStoreView()
   const dbNamePrefix = storeView.storeCode ? storeView.storeCode + '-' : ''
   Vue.prototype.$db = {
@@ -238,5 +231,4 @@ rootStore.init = function (config, i18n = null, eventBus = null) { // TODO: init
     }))
   }
   global.$VS.db = Vue.prototype.$db // localForage instance
-}
-export default rootStore
+}

core/store/lib/multistore.js

@@ -1,13 +1,12 @@
-import config from 'config'
-import store from '../'
-import EventBus from './event-bus'
+import rootStore, { initStore } from '../'
 import { loadLanguageAsync } from '@vue-storefront/core/lib/i18n'
 
 export function currentStoreView () {
-  return store.state.storeView
+  return rootStore.state.storeView
 }
 
-export function prepareStoreView (storeCode, config, i18n = null, eventBus = null) {
+export function prepareStoreView (storeCode) {
+  const config = rootStore.state.config
   let storeView = { // current, default store
     tax: config.tax,
     i18n: config.i18n,
@@ -18,23 +17,23 @@ export function prepareStoreView (storeCode, config, i18n = null, eventBus = nul
   if (storeCode) { // current store code
     if ((storeView = config.storeViews[storeCode])) {
       storeView.storeCode = storeCode
-      store.state.user.current_storecode = storeCode
+      rootStore.state.user.current_storecode = storeCode
     }
   } else {
     storeView.storeCode = config.defaultStoreCode || ''
-    store.state.user.current_storecode = config.defaultStoreCode || ''
+    rootStore.state.user.current_storecode = config.defaultStoreCode || ''
   }
-  if (!store.state.storeView || store.state.storeView.storeCode !== storeCode) {
-    store.state.storeView = storeView
-    loadLanguageAsync(storeView.i18n.defaultLocale)
-    store.init(config, i18n || global.$VS.i18n, eventBus || EventBus)
+  loadLanguageAsync(storeView.i18n.defaultLocale)
+  if (!rootStore.state.storeView || rootStore.state.storeView.storeCode !== storeCode) {
+    rootStore.state.storeView = storeView
+    initStore()
   }
   return storeView
 }
 
 export function storeCodeFromRoute (matchedRoute) {
   if (matchedRoute) {
-    for (const storeCode of config.storeViews.mapStoreUrlsFor) {
+    for (const storeCode of rootStore.state.config.storeViews.mapStoreUrlsFor) {
       if (matchedRoute.path.indexOf('/' + storeCode + '/') === 0 || matchedRoute.path === '/' + storeCode) {
         return storeCode
       }
@@ -55,7 +54,7 @@ export function adjustMultistoreApiUrl (url) {
 }
 
 export function localizedRoute (routeObj, storeCode) {
-  if (storeCode && routeObj && config.defaultStoreCode !== storeCode) {
+  if (storeCode && routeObj && rootStore.state.config.defaultStoreCode !== storeCode) {
     if (typeof routeObj === 'object') {
       if (routeObj.name) {
         routeObj.name = storeCode + '-' + routeObj.name