refactor: migrate getInstance method from main to AppLoader class

src/app-loader.js

@@ -9,7 +9,6 @@ import utils from '@/support/utils'
 import store from '@/store/store'
 import router from '@/router'
 import lodash from 'lodash'
-import main from '@/main'
 
 
 class AppLoader {
@@ -131,12 +130,9 @@ class AppLoader {
     }
     this.storeLocale(mapSettings, locale)
 
-    let mainVue = main
-    if (mainVue) { // main maz be not available when app is loading
-      let appInstance = mainVue.getInstance()
-      if (appInstance) {
-        appInstance.appHooks.run('mapSettingsChanged', mapSettings)
-      }
+    let appInstance = AppLoader.getInstance()
+    if (appInstance) { // main app instance may not be available when app is still loading
+      appInstance.appHooks.run('mapSettingsChanged', mapSettings)
     }
 
     // Save the data acquired flag as true
@@ -220,13 +216,17 @@ class AppLoader {
             store: store,
             template: templateTag
           })
+          store.commit('mainAppInstanceRef', context.vueInstance)
           resolve(context.vueInstance)
         })
       }
     })
   }
 
-
+  /**
+   * Load app external data
+   * @returns {Promise}
+   */
   loadAppData () {
     let context = this
     return new Promise((resolve) => {
@@ -244,6 +244,14 @@ class AppLoader {
       }, 500)      
     })
   }
+
+  /**
+   * Get a pointer to the main app vue instance
+   * @returns {Vue} instance
+   */
+  static getInstance () {
+    return store.getters.mainAppInstanceRef
+  }
 }
 
 export default AppLoader

src/common/global-mixins.js

@@ -1,7 +1,7 @@
 import * as showToaster from './show-toaster-mixin'
-import main from '@/main'
 import appConstants from '@/resources/constants'
 import AppHooks from '@/support/app-hooks'
+import AppLoader from '@/app-loader'
 
 const globalMixins = {
   data: () => ({
@@ -15,7 +15,7 @@ const globalMixins = {
       confirm.text = text
       confirm.title = title
       confirm.neverOption = options && options.neverOption
-      let VueInstance = main.getInstance()
+      let VueInstance = AppLoader.getInstance()
       VueInstance.eventBus.$emit('triggerConfirm', confirm)
 
       return new Promise((resolve, reject) => {
@@ -32,7 +32,7 @@ const globalMixins = {
       const info = options || {}
       info.text = text
       info.title = title
-      let VueInstance = main.getInstance()
+      let VueInstance = AppLoader.getInstance()
       VueInstance.eventBus.$emit('triggerShowInfo', info)
 
       return new Promise((resolve) => {

src/common/main-menu.js

@@ -2,7 +2,6 @@ import menuManager from '@/support/menu-manager'
 import appConfig from '@/config/app-config'
 import AppLoader from '@/app-loader'
 import store from '@/store/store'
-import main from '@/main'
 
 /**
  * Load the primary menu by its slug defined app config
@@ -18,7 +17,7 @@ const loadItems = () => {
         resolve([])
       })
     } else {
-      let expectedPromise = main.getInstance().appHooks.run('loadMenuItems')
+      let expectedPromise = AppLoader.getInstance().appHooks.run('loadMenuItems')
       if (expectedPromise instanceof Promise) {
         expectedPromise.then((result) => {
           resolve(result)

src/common/show-toaster-mixin.js

@@ -1,8 +1,8 @@
-import main from '@/main'
+import AppLoader from '@/app-loader'
 
 const showMessage = (msg, theme, options) => {
   options = options || {}
-  let VueInstance = main.getInstance()
+  let VueInstance = AppLoader.getInstance()
   VueInstance.eventBus.$emit('showSnack', { message: msg, theme: theme, options: options })
 }
 

src/config-examples/hooks-example.js

@@ -5,10 +5,10 @@
 // THE CODE BELOW IS COMMENTED OUT BECAUSE THEY ARE JUST EXAMPLES
 
 /*
-import main from '@/main'
+import AppLoader from '@/app-loader'
 import PluginExample from '@/plugins/plugin-example/plugin-example.js'
 
-const appHooks = main.getInstance().appHooks
+const appHooks = AppLoader.getInstance().appHooks
 
 // When adding a hook, three parameters can be passed:
 // the name of the hook (string) to be listened, the 

src/directives/smart-tooltip.js

@@ -1,10 +1,8 @@
-import {
-  createPopper
-} from '@popperjs/core'
+import { createPopper } from '@popperjs/core'
 import appConfig from '@/config/app-config'
+import AppLoader from '@/app-loader'
 import utils from '@/support/utils'
 import store from '@/store/store'
-import main from '@/main'
 
 /**
  * Popper tooltip directive handler
@@ -36,7 +34,7 @@ const smartTooltip = {
 const render = (el, binding, vNode, rerendering = false) => {
   let options = binding.value
   if (options.show) {
-    if (rerendering) { // it is rerendering, show it imediattly
+    if (rerendering) { // it is rerendering, show it immediately
       showToolTip(el, options, vNode)
     } else { // otherwise, wait 2 seconds
       setTimeout(() => {
@@ -51,13 +49,13 @@ const render = (el, binding, vNode, rerendering = false) => {
 /**
  * Handle the close tooltip click
  * @param {*} tooltipGuid
- * @param {*} hidePermantely
+ * @param {*} hidePermanently
  * @param {*} name
  */
-const closeTooltip = (tooltipGuid, hidePermantely, name) => {
+const closeTooltip = (tooltipGuid, hidePermanently, name) => {
   removeTooltipEl(tooltipGuid)
 
-  if (hidePermantely && name) {
+  if (hidePermanently && name) {
     storeTooltipAlreadyShown(name)
   }
 }
@@ -85,7 +83,7 @@ const storeTooltipAlreadyShown = (tooltipName) => {
   mapSettings.shownOnceTooltips[tooltipName] = true
 
   store.dispatch('saveSettings', mapSettings).then(() => {
-    console.log(tooltipName + ' tooltip hidden permantely')
+    console.log(tooltipName + ' tooltip hidden permanently')
   })
 }
 /**
@@ -158,7 +156,7 @@ const showToolTip = (el, options, vNode) => {
  * @returns {HtmlFragment}
  */
 const buildTooltipEl = (guid, options) => {
-  let vueInstance = main.getInstance()
+  let vueInstance = AppLoader.getInstance()
   let background = options.dark === true ? '#333;' : 'white'
   let contentColor = options.dark === true ? 'white' : '#333'
 

src/fragments/box/box.store.js

@@ -1,4 +1,4 @@
-import main from '@/main'
+import AppLoader from '@/app-loader'
 
 const state = {
   boxMaximizedStack: null
@@ -13,7 +13,7 @@ const getters = {
 const mutations = {
   boxMaximizedStack: (state, value) => {
     state.boxMaximizedStack = value
-    let VueInstance = main.getInstance()
+    let VueInstance = AppLoader.getInstance()
     VueInstance.eventBus.$emit('boxMaximizedStackChanged', value)
   }
 }

src/fragments/map-view/map-definitions.js

@@ -1,6 +1,6 @@
-import store from '@/store/store'
 import appConfig from '@/config/app-config'
-import main from '@/main'
+import AppLoader from '@/app-loader'
+import store from '@/store/store'
 
 const mapDefinitions = {
   /**
@@ -99,7 +99,7 @@ const mapDefinitions = {
 
     // Add custom tile service if defined in settings
     const customTileProviderUrl = store.getters.mapSettings.customTileProviderUrl
-    let vueInstance = main.getInstance()
+    let vueInstance = AppLoader.getInstance()
     if (customTileProviderUrl) {
       const customTileService = [
         {
@@ -122,7 +122,7 @@ const mapDefinitions = {
     let providers = []
     // Add custom over layer tile service if defined in settings
     const customOverlayerTileProviderUrl = store.getters.mapSettings.customOverlayerTileProviderUrl
-    let vueInstance = main.getInstance()
+    let vueInstance = AppLoader.getInstance()
     if (customOverlayerTileProviderUrl) {
       const overlayerTileService =
       {

src/main.js

@@ -1,15 +1,9 @@
 import AppLoader from '@/app-loader'
 import AppRootComponent from '@/App'
 import store from '@/store/store'
+store.getters.mainAppInstanceRef
 
 const main = {
-  /**
-   * Get the main app vue instance
-   * @returns {Vue} instance
-   */
-  getInstance: () => {
-    return main.vueInstance || store.getters.mainAppInstanceRef
-  },
   // Store the vue instance singleton
   vueInstance: null
 }

src/pages/maps/map.store.js

@@ -1,5 +1,5 @@
 import AppRouteData from '@/models/app-route-data'
-import main from '@/main'
+import AppLoader from '@/app-loader'
 
 const state = {
   appRouteData: new AppRouteData(),
@@ -30,7 +30,7 @@ const getters = {
 const mutations = {
   appRouteData: (state, value) => {
     state.appRouteData = value
-    main.getInstance().appHooks.run('appRouteDataChanged', state.appRouteData)
+    AppLoader.getInstance().appHooks.run('appRouteDataChanged', state.appRouteData)
   },
   mapReady: (state, value) => {
     state.mapReady = value

src/store/modules/app-state.js

@@ -1,7 +1,7 @@
 import constants from '@/resources/constants'
 import defaultMapSettings from '@/config/default-map-settings'
 import utils from '@/support/utils'
-import main from '@/main'
+import AppLoader from '@/app-loader'
 
 const state = {
   mode: constants.modes.place,
@@ -44,7 +44,7 @@ const getters = {
 const mutations = {
   mode: (state, mode) => {
     state.mode = mode
-    main.getInstance().appHooks.run('appModeChanged', mode)
+    AppLoader.getInstance().appHooks.run('appModeChanged', mode)
   },
   apiDataRequested: (state, requested) => {
     state.apiDataRequested = requested

src/store/modules/map-state.js

@@ -1,4 +1,4 @@
-import main from '@/main'
+import AppLoader from '@/app-loader'
 
 const state = {
   browserLocation: null,
@@ -33,7 +33,7 @@ const mutations = {
     state.mapBounds = mapBounds
   },
   currentLocation: (state, currentLocation) => {
-    main.getInstance().appHooks.run('beforeUseNewDeviceLocation', currentLocation)
+    AppLoader.getInstance().appHooks.run('beforeUseNewDeviceLocation', currentLocation)
     state.currentLocation = currentLocation
   }
 }

src/support/app-modes/app-mode.js

@@ -1,8 +1,8 @@
 
 import OrsParamsParser from '@/support/map-data-services/ors-params-parser'
 import OrsMapFilters from '@/config/ors-map-filters'
+import AppLoader from '@/app-loader'
 import store from '@/store/store'
-import main from '@/main'
 
 // Modes
 import directionsMode from './strategies/directions-mode'
@@ -37,7 +37,7 @@ class AppMode {
     store.commit('appRouteData', newAppRouteData)
     const options = this.getRouteOptions(newAppRouteData.options)
     var route = this.targetMode.getRoute(newAppRouteData, options)
-    main.getInstance().appHooks.run('appModeRouteReady', route)
+    AppLoader.getInstance().appHooks.run('appModeRouteReady', route)
     return route
   }
 
@@ -75,7 +75,7 @@ class AppMode {
    * @returns {*} options
    */
   getRouteOptions = (options) => {
-    main.getInstance().appHooks.run('afterGetRouteOptions', options)
+    AppLoader.getInstance().appHooks.run('afterGetRouteOptions', options)
     return options
   }
 }

src/support/app-modes/strategies/directions-mode.js

@@ -2,13 +2,13 @@ import OrsParamsParser from '@/support/map-data-services/ors-params-parser'
 import OrsMapFilters from '@/config/ors-map-filters'
 import AppRouteData from '@/models/app-route-data'
 import constants from '@/resources/constants'
-import Utils from '@/support/utils'
 import RouteUtils from '@/support/route-utils'
 import GeoUtils from '@/support/geo-utils'
 import appConfig from '@/config/app-config'
+import AppLoader from '@/app-loader'
+import Utils from '@/support/utils'
 import Place from '@/models/place'
 import store from '@/store/store'
-import main from '@/main'
 
 /**
  * DirectionsMode class
@@ -100,7 +100,7 @@ class DirectionsMode {
       })
     }
 
-    main.getInstance().appHooks.run('afterDirectionsPathDecoded', appRouteData)
+    AppLoader.getInstance().appHooks.run('afterDirectionsPathDecoded', appRouteData)
     return appRouteData
   }
 }

src/support/app-modes/strategies/isochrones-mode.js

@@ -2,11 +2,11 @@ import OrsParamsParser from '@/support/map-data-services/ors-params-parser'
 import OrsMapFilters from '@/config/ors-map-filters'
 import AppRouteData from '@/models/app-route-data'
 import constants from '@/resources/constants'
-import Utils from '@/support/utils'
 import RouteUtils from '@/support/route-utils'
 import appConfig from '@/config/app-config'
+import AppLoader from '@/app-loader'
+import Utils from '@/support/utils'
 import store from '@/store/store'
-import main from '@/main'
 
 /**
  * IsochronesMode class
@@ -55,7 +55,7 @@ class IsochronesMode {
     }
 
     appRouteData.places = RouteUtils.getRoutePlaces(currentRoute)
-    main.getInstance().appHooks.run('afterIsochronesPathDecoded', appRouteData)
+    AppLoader.getInstance().appHooks.run('afterIsochronesPathDecoded', appRouteData)
     return appRouteData
   }
 }

src/support/app-modes/strategies/place-mode.js

@@ -1,10 +1,10 @@
 import AppRouteData from '@/models/app-route-data'
+import RouteUtils from '@/support/route-utils'
 import GeoUtils from '@/support/geo-utils'
+import AppLoader from '@/app-loader'
+import utils from '@/support/utils'
 import Place from '@/models/place'
 import store from '@/store/store'
-import utils from '@/support/utils'
-import RouteUtils from '@/support/route-utils'
-import main from '@/main'
 
 /**
  * PlaceMode class
@@ -82,7 +82,7 @@ class PlaceMode {
       appRouteData.places.push(place)
     }
     // Return the object
-    main.getInstance().appHooks.run('afterPlacePathDecoded', appRouteData)
+    AppLoader.getInstance().appHooks.run('afterPlacePathDecoded', appRouteData)
     return appRouteData
   }
 }