Merge pull request #3443 from grimasod/hotfix/router-before-each-mult…

…iple-times

Reduce addRoutes function calls

CHANGELOG.md

@@ -12,6 +12,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - `order.order_id` was not assigned in the `orders.directBackendSync` mode - @pkarw (#3398)
 - Hydration problems with UrlDispatcher :rocket: - @patzick (#3412)
 - if condition of quoteId from the `_serverDeleteItem` method on core/modules/cart/store/action.ts - @AshishSuhane (#3415)
+- Router beforeEach hooks running many times - @grimasod (#3443)
 - test:unit:watch with a workaround of a jest problem with template strings - @resubaka (#3450, #3351)
 
 ## [1.10.0] - 2019.08.10
@@ -121,8 +122,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Product video - retrieve video id from 'video_id' field (if set) instead of 'id' - @afirlejczyk
 - Webpack config improvement - @yogeshsuhagiya (#2689)
 - BaseSelect input event - @ResuBaka (#2683)
-- Fixed static file handler to immediately return 404 status for missing files - @grimason (#2685)
-- Fixed maxAge Response Header for static files and Content-Type for Service Worker - @grimason (#2686)
+- Fixed static file handler to immediately return 404 status for missing files - @grimasod (#2685)
+- Fixed maxAge Response Header for static files and Content-Type for Service Worker - @grimasod (#2686)
 - Default log verbosity is changed to show only errors - @lromanowicz (#2717)
 - Remembering last search query - @webdiver, @patzick (#2787)
 - Extracted ProductImage component to support faster images loading - @przemyslawspaczek (#2925)

core/lib/module/index.ts

@@ -4,7 +4,7 @@ import Vue from 'vue'
 import merge from 'lodash-es/merge'
 import rootStore from '@vue-storefront/core/store'
 import { Logger } from '@vue-storefront/core/lib/logger'
-import { setupMultistoreRoutes } from '..//multistore'
+import { setupMultistoreRoutes } from '../multistore'
 import { router } from '@vue-storefront/core/app'
 import { isServer } from '@vue-storefront/core/helpers'
 import { VSF, VueStorefrontModuleConfig } from './types'
@@ -47,7 +47,6 @@ class VueStorefrontModule {
   private static _extendRouter (routerInstance, routes?: RouteConfig[], beforeEach?: NavigationGuard, afterEach?: NavigationGuard): void {
     if (routes) {
       setupMultistoreRoutes(config, routerInstance, routes)
-      RouterManager.addRoutes(routes, routerInstance)
     }
     if (beforeEach) routerInstance.beforeEach(beforeEach)
     if (afterEach) routerInstance.afterEach(afterEach)

core/lib/multistore.ts

@@ -181,16 +181,16 @@ export function localizedRoute (routeObj: LocalizedRoute | string | RouteConfig
 }
 
 export function setupMultistoreRoutes (config, router: VueRouter, routes: RouteConfig[]): void {
+  const allStoreRoutes = [...routes]
   if (config.storeViews.mapStoreUrlsFor.length > 0 && config.storeViews.multistore === true) {
-    for (let storeCode of config.storeViews.mapStoreUrlsFor) {
+    for (const storeCode of config.storeViews.mapStoreUrlsFor) {
       if (storeCode && (config.defaultStoreCode !== storeCode)) {
-        let storeRoutes = []
-        for (let route of routes) {
+        for (const route of routes) {
           const localRoute = localizedRoute(Object.assign({}, route), storeCode)
-          storeRoutes.push(localRoute)
+          allStoreRoutes.push(localRoute)
         }
-        RouterManager.addRoutes(storeRoutes, router)
       }
     }
   }
+  RouterManager.addRoutes(allStoreRoutes, router)
 }

core/modules/url/helpers/index.ts

@@ -13,7 +13,7 @@ export function parametrizeRouteData (routeData: LocalizedRoute, query: { [id: s
   return parametrizedRoute
 }
 
-export function processDynamicRoute (routeData: LocalizedRoute, fullPath: string, addToRoutes: boolean = true): LocalizedRoute[] {
+function prepareDynamicRoute (routeData: LocalizedRoute, fullPath: string, addToRoutes: boolean = true): RouteConfig[] {
   const userRoute = RouterManager.findByName(routeData.name)
   if (userRoute) {
     if (addToRoutes) {
@@ -28,7 +28,6 @@ export function processDynamicRoute (routeData: LocalizedRoute, fullPath: string
           }
         }
       }
-      RouterManager.addRoutes(routes, router)
       return routes
     } else {
       const dynamicRoute = Object.assign({}, userRoute, routeData, { path: '/' + fullPath, name: `urldispatcher-${fullPath}` })
@@ -39,6 +38,25 @@ export function processDynamicRoute (routeData: LocalizedRoute, fullPath: string
   }
 }
 
+export function processDynamicRoute (routeData: LocalizedRoute, fullPath: string, addToRoutes: boolean = true): LocalizedRoute[] {
+  const preparedRoutes = prepareDynamicRoute(routeData, fullPath, addToRoutes)
+  if (addToRoutes && preparedRoutes) {
+    RouterManager.addRoutes(preparedRoutes, router)
+  }
+  return preparedRoutes
+}
+
+export function processMultipleDynamicRoutes (dispatcherMap: {}, addToRoutes: boolean = true): LocalizedRoute[] {
+  const preparedRoutes = []
+  for (const [url, routeData] of Object.entries(dispatcherMap)) {
+    preparedRoutes.push(...prepareDynamicRoute(routeData, url, addToRoutes))
+  }
+  if (addToRoutes) {
+    RouterManager.addRoutes(preparedRoutes, router)
+  }
+  return preparedRoutes
+}
+
 export function findRouteByPath (fullPath: string): RouteConfig {
   return RouterManager.findByPath(fullPath)
 }

core/modules/url/store/actions.ts

@@ -5,7 +5,7 @@ import * as types from './mutation-types'
 import { cacheStorage } from '../'
 import queryString from 'query-string'
 import SearchQuery from '@vue-storefront/core/lib/search/searchQuery'
-import { processDynamicRoute, normalizeUrlPath, parametrizeRouteData } from '../helpers'
+import { processMultipleDynamicRoutes, normalizeUrlPath, parametrizeRouteData } from '../helpers'
 import { storeCodeFromRoute, removeStoreCodeFromRoute } from '@vue-storefront/core/lib/multistore'
 
 // it's a good practice for all actions to return Promises with effect of their execution
@@ -21,8 +21,8 @@ export const actions: ActionTree<UrlState, any> = {
    */
   async registerDynamicRoutes ({ state, dispatch }) {
     if (state.dispatcherMap) {
+      processMultipleDynamicRoutes(state.dispatcherMap)
       for (const [url, routeData] of Object.entries(state.dispatcherMap)) {
-        processDynamicRoute(routeData, url)
         dispatch('registerMapping', { url, routeData })
       }
     }