chore: Remove every call to the global variable

core/app.ts

@@ -28,7 +28,7 @@ declare var global: any
 
 if (!global.$VS) global.$VS = {}
 
-global.$VS.version = '1.2'
+store.state.version = '1.2'
 
 const storeModules = Object.assign(coreModules, themeModules || {})
 
@@ -38,7 +38,7 @@ for (const moduleName of Object.keys(storeModules)) {
 }
 
 const storeView = prepareStoreView(null, config, i18n, EventBus) // prepare the default storeView
-global.$VS.storeView = storeView
+store.state.storeView = storeView
 store.state.shipping.methods = shippingMethods
 
 Vue.use(Vuelidate)

core/client-entry.ts

@@ -19,7 +19,6 @@ declare var global: any
 declare var window: any
 
 const { app, router, store } = createApp()
-global.$VS.isSSR = false
 
 let storeCode = null // select the storeView by prefetched vuex store state (prefetched serverside)
 if (window.__INITIAL_STATE__) {

core/pages/Category.js

@@ -1,14 +1,12 @@
-// 3rd party dependecies
+import Vue from 'vue'
 import toString from 'lodash-es/toString'
 
-// Core dependecies
 import config from 'config'
 import EventBus from '@vue-storefront/core/plugins/event-bus'
 import { baseFilterProductsQuery, buildFilterProductsQuery } from '@vue-storefront/store/helpers'
 import { htmlDecode } from '@vue-storefront/core/filters/html-decode'
 import i18n from '@vue-storefront/core/lib/i18n'
 
-// Core mixins
 import Composite from '@vue-storefront/core/mixins/composite'
 
 export default {
@@ -75,19 +73,19 @@ export default {
       perPage: 50,
       sort: config.entities.productList.sort,
       filters: config.products.defaultFilters,
-      includeFields: config.entities.optimize && global.$VS.isSSR ? config.entities.productList.includeFields : null,
-      excludeFields: config.entities.optimize && global.$VS.isSSR ? config.entities.productList.excludeFields : null,
+      includeFields: config.entities.optimize && Vue.prototype.$isServer ? config.entities.productList.includeFields : null,
+      excludeFields: config.entities.optimize && Vue.prototype.$isServer ? config.entities.productList.excludeFields : null,
       append: false
     }
   },
   asyncData ({ store, route }) { // this is for SSR purposes to prefetch data
     return new Promise((resolve, reject) => {
       console.log('Entering asyncData for Category root ' + new Date())
       const defaultFilters = config.products.defaultFilters
-      store.dispatch('category/list', { includeFields: config.entities.optimize && global.$VS.isSSR ? config.entities.category.includeFields : null }).then((categories) => {
+      store.dispatch('category/list', { includeFields: config.entities.optimize && Vue.prototype.$isServer ? config.entities.category.includeFields : null }).then((categories) => {
         store.dispatch('attribute/list', { // load filter attributes for this specific category
           filterValues: defaultFilters, // TODO: assign specific filters/ attribute codes dynamicaly to specific categories
-          includeFields: config.entities.optimize && global.$VS.isSSR ? config.entities.attribute.includeFields : null
+          includeFields: config.entities.optimize && Vue.prototype.$isServer ? config.entities.attribute.includeFields : null
         }).then((attrs) => {
           store.dispatch('category/single', { key: 'slug', value: route.params.slug }).then((parentCategory) => {
             let query = store.state.category.current_product_query
@@ -115,7 +113,7 @@ export default {
   created () {
     this.$bus.$on('filter-changed-category', this.onFilterChanged)
     this.$bus.$on('list-change-sort', (param) => { this.onSortOrderChanged(param) })
-    if (!global.$VS.isSSR && this.lazyLoadProductsOnscroll) {
+    if (!Vue.prototype.$isServer && this.lazyLoadProductsOnscroll) {
       window.addEventListener('scroll', () => {
         this.bottom = this.bottomVisible()
       })

core/server-entry.ts

@@ -5,10 +5,6 @@ import { createApp } from '@vue-storefront/core/app'
 import { HttpError } from '@vue-storefront/core/lib/exceptions'
 import { prepareStoreView, storeCodeFromRoute } from '@vue-storefront/store/lib/multistore'
 
-declare var global: any
-
-global.$VS.isSSR = true
-
 function _commonErrorHandler (err, reject) {
   if (err.message.indexOf('query returned empty result') > 0) {
     reject(new HttpError(err.message, 404))

core/store/index.ts

@@ -12,6 +12,7 @@ if (!global.$VS) global.$VS = {}
 Vue.use(Vuex)
 
 const state = {
+  version: '',
   attribute: '',
   category: {
     current_path: '',
@@ -22,7 +23,8 @@ const state = {
   },
   stock: {
     cache: []
-  }
+  },
+  storeView: {}
 }
 
 const mutations = {

core/store/lib/multistore.js

@@ -4,7 +4,7 @@ import EventBus from './event-bus'
 import { loadLanguageAsync } from '@vue-storefront/core/lib/i18n'
 
 export function currentStoreView () {
-  return global.$VS.storeView
+  return store.state.storeView
 }
 
 export function prepareStoreView (storeCode, config, i18n = null, eventBus = null) {
@@ -24,8 +24,8 @@ export function prepareStoreView (storeCode, config, i18n = null, eventBus = nul
     storeView.storeCode = config.defaultStoreCode || ''
     store.state.user.current_storecode = config.defaultStoreCode || ''
   }
-  if (!global.$VS.storeView || global.$VS.storeView.storeCode !== storeCode) {
-    global.$VS.storeView = storeView
+  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)
   }

core/store/lib/storage.js

@@ -1,5 +1,6 @@
-
+import Vue from 'vue'
 import * as localForage from 'localforage'
+
 const CACHE_TIMEOUT = 1600
 const CACHE_TIMEOUT_ITERATE = 3000
 const DISABLE_PERSISTANCE_AFTER = 3
@@ -70,7 +71,7 @@ class LocalForageCacheDriver {
       })
     }
 
-    if (!global.$VS.isSSR) {
+    if (!Vue.prototype.$isServer) {
       if (global.$VS.cacheErrorsCount[this._collectionName] >= DISABLE_PERSISTANCE_AFTER && this._useLocalCacheByDefault) {
         if (!this._persistenceErrorNotified) {
           console.error('Persistent cache disabled becasue of previous errors [get]', key)
@@ -214,7 +215,7 @@ class LocalForageCacheDriver {
   setItem (key, value, callback) {
     const isCallbackCallable = (typeof callback !== 'undefined' && callback)
     this._localCache[key] = value
-    if (!global.$VS.isSSR) {
+    if (!Vue.prototype.$isServer) {
       if (global.$VS.cacheErrorsCount[this._collectionName] >= DISABLE_PERSISTANCE_AFTER && this._useLocalCacheByDefault) {
         if (!this._persistenceErrorNotified) {
           console.error('Persistent cache disabled becasue of previous errors [set]', key)

core/store/modules/cart/actions.ts

@@ -1,3 +1,4 @@
+import Vue from 'vue'
 import { ActionTree } from 'vuex'
 import config from '../../lib/config'
 import * as types from '../../mutation-types'
@@ -32,7 +33,7 @@ const actions: ActionTree<CartState, RootState> = {
     context.commit(types.CART_SAVE)
   },
   serverPull (context, { forceClientState = false, dryRun = false }) { // pull current cart FROM the server
-    if (config.cart.synchronize && !global.$VS.isSSR) {
+    if (config.cart.synchronize && !Vue.prototype.$isServer) {
       const newItemsHash = sha1({ items: context.state.cartItems, token: context.state.cartServerToken })
       if ((Date.now() - context.state.cartServerPullAt) >= CART_PULL_INTERVAL_MS || (newItemsHash !== context.state.cartItemsHash)) {
         context.state.cartServerPullAt = Date.now()
@@ -67,7 +68,7 @@ const actions: ActionTree<CartState, RootState> = {
     }
   },
   serverTotals (context, { forceClientState = false }) { // pull current cart FROM the server
-    if (config.cart.synchronize_totals && !global.$VS.isSSR) {
+    if (config.cart.synchronize_totals && !Vue.prototype.$isServer) {
       if ((Date.now() - context.state.cartServerTotalsAt) >= CART_TOTALS_INTERVAL_MS) {
         context.state.cartServerPullAt = Date.now()
         context.dispatch('sync/execute', { url: config.cart.totals_endpoint, // sync the cart
@@ -88,7 +89,7 @@ const actions: ActionTree<CartState, RootState> = {
     }
   },
   serverCreate (context, { guestCart = false }) {
-    if (config.cart.synchronize && !global.$VS.isSSR) {
+    if (config.cart.synchronize && !Vue.prototype.$isServer) {
       if ((Date.now() - context.state.cartServerCreatedAt) >= CART_CREATE_INTERVAL_MS) {
         if (guestCart) {
           global.$VS.db.usersCollection.setItem('last-cart-bypass-ts', new Date().getTime())
@@ -155,7 +156,7 @@ const actions: ActionTree<CartState, RootState> = {
   },
   load (context) {
     return new Promise((resolve, reject) => {
-      if (global.$VS.isSSR) return
+      if (Vue.prototype.$isServer) return
       console.log('Loading cart ...')
       const commit = context.commit
       const state = context.state

core/store/modules/category/actions.ts

@@ -1,3 +1,4 @@
+import Vue from 'vue'
 import { ActionTree } from 'vuex'
 import * as types from '../../mutation-types'
 import { quickSearchByQuery } from '../../lib/search'
@@ -158,7 +159,7 @@ const actions: ActionTree<CategoryState, RootState> = {
     }
 
     let prefetchGroupProducts = true
-    if (config.entities.twoStageCaching && config.entities.optimize && !global.$VS.isSSR && !global.$VS.twoStageCachingDisabled) { // only client side, only when two stage caching enabled
+    if (config.entities.twoStageCaching && config.entities.optimize && !Vue.prototype.$isServer && !global.$VS.twoStageCachingDisabled) { // only client side, only when two stage caching enabled
       includeFields = config.entities.productListWithChildren.includeFields // we need configurable_children for filters to work
       excludeFields = config.entities.productListWithChildren.excludeFields
       prefetchGroupProducts = false
@@ -275,7 +276,7 @@ const actions: ActionTree<CategoryState, RootState> = {
       })
     })
 
-    if (config.entities.twoStageCaching && config.entities.optimize && !global.$VS.isSSR && !global.$VS.twoStageCachingDisabled) { // second stage - request for caching entities
+    if (config.entities.twoStageCaching && config.entities.optimize && !Vue.prototype.$isServer && !global.$VS.twoStageCachingDisabled) { // second stage - request for caching entities
       console.log('Using two stage caching for performance optimization - executing second stage product caching') // TODO: in this case we can pre-fetch products in advance getting more products than set by pageSize
       rootStore.dispatch('product/list', {
         query: precachedQuery,

core/store/modules/product/actions.ts

@@ -1,3 +1,4 @@
+import Vue from 'vue'
 import { ActionTree } from 'vuex'
 import config from '../../lib/config'
 import * as types from '../../mutation-types'
@@ -475,7 +476,7 @@ const actions: ActionTree<ProductState, RootState> = {
       }
       let subloaders = []
       if (product) {
-        if (global.$VS.isSSR) {
+        if (Vue.prototype.$isServer) {
           subloaders.push(context.dispatch('filterUnavailableVariants', { product: product }))
         } else {
           context.dispatch('filterUnavailableVariants', { product: product }) // exec async

core/store/modules/product/helpers.ts

@@ -1,3 +1,4 @@
+import Vue from 'vue'
 import config from '../../lib/config'
 import rootStore from '../../'
 import EventBus from '../../lib/event-bus'
@@ -11,8 +12,6 @@ import { optionLabel } from '../attribute/helpers'
 import i18n from '../../lib/i18n'
 import { currentStoreView } from '../../lib/multistore'
 
-declare var global: any
-
 function _filterRootProductByStockitem (context, stockItem, product, errorCallback) {
   if (stockItem) {
     product.stock = stockItem
@@ -226,7 +225,7 @@ export function doPlatformPricesSync (products) {
         }
         resolve(products)
       })
-      if (!config.products.waitForPlatformSync && !global.$VS.isSSR) {
+      if (!config.products.waitForPlatformSync && !Vue.prototype.$isServer) {
         console.log('Returning products, the prices yet to come from backend!')
         for (let product of products) {
           product.price_is_current = false // in case we're syncing up the prices we should mark if we do have current or not

core/store/modules/sync/actions.ts

@@ -1,3 +1,4 @@
+import Vue from 'vue'
 import { ActionTree } from 'vuex'
 import * as types from '../../mutation-types'
 import { execute as taskExecute } from '../../lib/task'
@@ -10,8 +11,6 @@ import config from 'config'
 import RootState from '../../types/RootState'
 import SyncState from './types/SyncState'
 
-declare var global: any
-
 const actions: ActionTree<SyncState, RootState> = {
   /**
    * Queue synchronization task
@@ -59,7 +58,7 @@ const actions: ActionTree<SyncState, RootState> = {
       driver: localForage[config.localForage.defaultDrivers['carts']]
     }))
     return new Promise((resolve, reject) => {
-      if (global.$VS.isSSR) {
+      if (Vue.prototype.$isServer) {
         taskExecute(task, null, null).then((result) => {
           resolve(result)
         }).catch(err => {

core/store/types/RootState.ts

@@ -1,4 +1,5 @@
 export default interface RootState {
+  version: string,
   attribute: string,
   category: {
     current_path: string
@@ -9,5 +10,6 @@ export default interface RootState {
   },
   stock: {
     cache: any
-  }
+  },
+  storeView: any
 }

src/extensions/google-analytics/index.js

@@ -12,7 +12,7 @@ export default function (app, router, store, config) {
   store.registerModule(EXTENSION_KEY, extensionStore)
   console.log('Google Analytics extension registered')
 
-  if (config.analytics.id && !global.$VS.isSSR) {
+  if (config.analytics.id && !Vue.prototype.$isServer) {
     Vue.use(VueAnalytics, {
       id: config.analytics.id,
       router,

src/themes/default/components/core/blocks/Checkout/ThankYouPage.vue

@@ -72,6 +72,7 @@
 </template>
 
 <script>
+import Vue from 'vue'
 import Composite from '@vue-storefront/core/mixins/composite'
 import Breadcrumbs from 'theme/components/core/Breadcrumbs'
 import BaseTextarea from 'theme/components/core/blocks/Form/BaseTextarea'
@@ -88,17 +89,17 @@ export default {
   },
   computed: {
     isNotificationSupported () {
-      if (global.$VS.isSSR || !('Notification' in window)) return false
+      if (Vue.prototype.$isServer || !('Notification' in window)) return false
       return 'Notification' in window
     },
     isPermissionGranted () {
-      if (global.$VS.isSSR || !('Notification' in window)) return false
+      if (Vue.prototype.$isServer || !('Notification' in window)) return false
       return Notification.permission === 'granted'
     }
   },
   methods: {
     requestNotificationPermission () {
-      if (global.$VS.isSSR) return false
+      if (Vue.prototype.$isServer) return false
       if ('Notification' in window && Notification.permission !== 'granted') {
         Notification.requestPermission()
       }