vuestorefront · filrak · Mar 5, 2019 · Feb 8, 2019 · Feb 12, 2019 · Feb 12, 2019
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -4,11 +4,16 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/)
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [1.9.0]
+### Added
+- The Url Dispatcher feature added for friendly URLs. When `config.seo.useUrlDispatcher` set to true the `product.url_path` and `category.url_path` fields are used as absolute URL addresses (no `/c` and `/p` prefixes anymore). Check the latest `mage2vuestorefront` snapshot and reimport Your products to properly set `url_path` fields - #2010 - @pkarw
+
 ## [1.8.3] - 2019.02.27
 ### Fixed
 - Problem with placing second order (unbinding payment methods after first order) - @patzick (#2195, #2503)
 
 ### Changed / Improved
+- The `core/helpers` parsing URL methods exchanged to `query-string` package
 - Fixed an issue where the correct image for a product configuration wasn't set on the product page image carousel. Also added the fix on the productcarousel in the zoom component - @DaanKouters (#2419)
 - Way of creating VS Modules was changed to use factory method instead of explict object creation. - @filrak (#2434)
 - Added clear filters button on desktop also and only show if filters are applied - @DaanKouters (#2342)

diff --git a/config/default.json b/config/default.json
@@ -144,7 +144,7 @@
       "twoStageCaching": true,
       "optimizeShoppingCart": true,
       "category": {
-        "includeFields": [ "id", "*.children_data.id", "*.id", "children_count", "sku", "name", "is_active", "parent_id", "level", "url_key", "product_count", "path"],
+        "includeFields": [ "id", "*.children_data.id", "*.id", "children_count", "sku", "name", "is_active", "parent_id", "level", "url_key", "url_path", "product_count", "path"],
         "excludeFields": [ "sgn" ],
         "categoriesRootCategorylId": 2,
         "categoriesDynamicPrefetchLevel": 2,
@@ -155,11 +155,11 @@
       },
       "productList": {
         "sort": "",
-        "includeFields": [ "type_id", "sku", "product_links", "tax_class_id", "special_price", "special_to_date", "special_from_date", "name", "price", "priceInclTax", "originalPriceInclTax", "originalPrice", "specialPriceInclTax", "id", "image", "sale", "new", "url_key", "status", "tier_prices", "configurable_children.sku", "configurable_children.price", "configurable_children.special_price", "configurable_children.priceInclTax", "configurable_children.specialPriceInclTax", "configurable_children.originalPrice", "configurable_children.originalPriceInclTax" ],
+        "includeFields": [ "type_id", "sku", "product_links", "tax_class_id", "special_price", "special_to_date", "special_from_date", "name", "price", "priceInclTax", "originalPriceInclTax", "originalPrice", "specialPriceInclTax", "id", "image", "sale", "new", "url_path", "url_key", "status", "tier_prices", "configurable_children.sku", "configurable_children.price", "configurable_children.special_price", "configurable_children.priceInclTax", "configurable_children.specialPriceInclTax", "configurable_children.originalPrice", "configurable_children.originalPriceInclTax" ],
         "excludeFields": [ "description", "configurable_options", "sgn", "*.sgn", "msrp_display_actual_price_type", "*.msrp_display_actual_price_type", "required_options" ]
       },
       "productListWithChildren": {
-        "includeFields": [ "type_id", "sku", "name", "tax_class_id", "special_price", "special_to_date", "special_from_date", "price", "priceInclTax", "originalPriceInclTax", "originalPrice", "specialPriceInclTax", "id", "image", "sale", "new", "configurable_children.image", "configurable_children.sku", "configurable_children.price", "configurable_children.special_price", "configurable_children.priceInclTax", "configurable_children.specialPriceInclTax", "configurable_children.originalPrice", "configurable_children.originalPriceInclTax", "configurable_children.color", "configurable_children.size", "configurable_children.id", "configurable_children.tier_prices", "product_links", "url_key", "status", "tier_prices"],
+        "includeFields": [ "type_id", "sku", "name", "tax_class_id", "special_price", "special_to_date", "special_from_date", "price", "priceInclTax", "originalPriceInclTax", "originalPrice", "specialPriceInclTax", "id", "image", "sale", "new", "configurable_children.image", "configurable_children.sku", "configurable_children.price", "configurable_children.special_price", "configurable_children.priceInclTax", "configurable_children.specialPriceInclTax", "configurable_children.originalPrice", "configurable_children.originalPriceInclTax", "configurable_children.color", "configurable_children.size", "configurable_children.id", "configurable_children.tier_prices", "product_links", "url_path", "url_key", "status", "tier_prices"],
         "excludeFields": [ "description", "sgn", "*.sgn", "msrp_display_actual_price_type", "*.msrp_display_actual_price_type", "required_options"]
       },
       "review": {
@@ -192,6 +192,7 @@
           "tax_class_id",
           "media_gallery",
           "url_key",
+          "url_path",
           "max_price",
           "minimal_regular_price",
           "special_price",

diff --git a/core/app.ts b/core/app.ts
@@ -65,7 +65,7 @@ const createApp  = async (ssrContext, config): Promise<{app: Vue, router: VueRou
   // sync router with vuex 'router' store
   sync(store, router)
   // TODO: Don't mutate the state directly, use mutation instead
-  store.state.version = '1.7.0'
+  store.state.version = '1.8.2'
   store.state.config = config
   store.state.__DEMO_MODE__ = (config.demomode === true) ? true : false
   if(ssrContext) Vue.prototype.$ssrRequestContext = ssrContext

diff --git a/core/build/webpack.base.config.ts b/core/build/webpack.base.config.ts
@@ -78,6 +78,7 @@ export default {
       inject: isProd == false
     })
   ],
+  devtool: 'source-map',
   entry: {
     app: ['babel-polyfill', './core/client-entry.ts']
   },

diff --git a/core/build/webpack.client.config.ts b/core/build/webpack.client.config.ts
@@ -32,7 +32,7 @@ const config = merge(base, {
       'process.env.VUE_ENV': '"client"'
     }),
     new VueSSRClientPlugin()
-  ]
+  ],
 })
 
 export default config;
diff --git a/core/build/webpack.prod.client.config.ts b/core/build/webpack.prod.client.config.ts
@@ -7,6 +7,7 @@ const extendedConfig = require(path.join(themeRoot, '/webpack.config.js'))
 
 const prodClientConfig = merge(baseClientConfig, {
   mode: 'production',
+  devtool: 'nosources-source-map',
   plugins: [
   ]
 })

diff --git a/core/build/webpack.prod.server.config.ts b/core/build/webpack.prod.server.config.ts
@@ -8,6 +8,7 @@ const extendedConfig = require(path.join(themeRoot, '/webpack.config.js'))
 
 export default extendedConfig(baseServerConfig, {
   mode: 'production',
+  devtool: 'nosources-source-map',  
   isClient: false,
   isDev: false
 })
diff --git a/core/client-entry.ts b/core/client-entry.ts
@@ -31,7 +31,7 @@ const invokeClientEntry = async () => {
       prepareStoreView(storeCode)
     }
   }
-
+  store.dispatch('url/registerDynamicRoutes')
   function _commonErrorHandler (err, reject) {
     if (err.message.indexOf('query returned empty result') > 0) {
       rootStore.dispatch('notification/spawnNotification', {
@@ -68,7 +68,6 @@ const invokeClientEntry = async () => {
       _commonErrorHandler(err, next)
     })
   }
-
   router.onReady(() => {
     router.beforeResolve((to, from, next) => {
       if (!from.name) return next() // do not resolve asyncData on server render - already been done
@@ -88,14 +87,10 @@ const invokeClientEntry = async () => {
           }
         }
       }
-      let diffed = false
-      const activated = matched.filter((c, i) => {
-        return diffed || (diffed = (prevMatched[i] !== c))
-      })
-      if (!activated.length) {
+      if (!matched.length) {
         return next()
       }
-      Promise.all(activated.map((c: any) => { // TODO: update me for mixins support
+      Promise.all(matched.map((c: any) => { // TODO: update me for mixins support
         const components = c.mixins && config.ssr.executeMixedinAsyncData ? Array.from(c.mixins) : []
         union(components, [c]).map(SubComponent => {
           if (SubComponent.preAsyncData) {

diff --git a/core/helpers/index.ts b/core/helpers/index.ts
@@ -2,6 +2,7 @@ import rootStore from '@vue-storefront/core/store'
 import SearchQuery from '@vue-storefront/core/lib/search/searchQuery'
 import { remove as removeAccents } from 'remove-accents'
 import { Logger } from '@vue-storefront/core/lib/logger'
+import { formatCategoryLink } from '@vue-storefront/core/modules/url/helpers'
 
 /**
  * Create slugify -> "create-slugify" permalink  of text
@@ -50,15 +51,15 @@ export function getThumbnailPath (relativeUrl, width, height) {
  * @param {Array} categoryPath
  */
 export function breadCrumbRoutes (categoryPath) {
-  const tmpRts = []
-  for (let sc of categoryPath) {
-    tmpRts.push({
-      name: sc.name,
-      route_link: (rootStore.state.config.products.useShortCatalogUrls ? '/' : '/c/') + sc.slug
+  const breadCrumbRoutes = []
+  for (let category of categoryPath) {
+    breadCrumbRoutes.push({
+      name: category.name,
+      route_link: formatCategoryLink(category)
     })
   }
 
-  return tmpRts
+  return breadCrumbRoutes
 }
 
 /**

diff --git a/core/lib/async-data-loader.ts b/core/lib/async-data-loader.ts
@@ -36,13 +36,13 @@ const AsyncDataLoader = {
   flush : function (actionContext: AsyncDataLoaderActionContext) {
     if (!actionContext.category) actionContext.category = DEFAULT_ACTION_CATEGORY
     const actionsToExecute = this.queue.filter(ac => (!ac.category || !actionContext.category) || ac.category === actionContext.category && (!ac.executedAt)).map(ac => {
+      ac.executedAt = new Date()
       return ac.execute(actionContext) // function must return Promise
     })
     if (actionsToExecute.length > 0) {
       Logger.info('Executing data loader actions(' + actionsToExecute.length + ')', 'dataloader')()
     }
-    return Promise.all(actionsToExecute).then(results => {
-      actionsToExecute.map(ac => ac.executedAt = new Date())
+    return Promise.all(actionsToExecute).then(results => {      
       return results
     })
   }

diff --git a/core/lib/logger.ts b/core/lib/logger.ts
@@ -1,6 +1,5 @@
 import { isServer } from '@vue-storefront/core/helpers'
 import buildTimeConfig from 'config'
-
 const bgColorStyle = (color) => `color: white; background: ${color}; padding: 4px; font-weight: bold; font-size: 0.8em'`
 
 /** VS message logger. By default works only on dev mode */
@@ -34,6 +33,16 @@ class Logger
     this.isProduction = process.env.NODE_ENV === 'production';
   }
 
+  /**
+   * Convert message to string - as it may be object, array either primitive
+   * @param payload
+   */
+  convertToString (payload: any) {
+    if (typeof payload === 'string' || typeof payload === 'boolean' || typeof payload === 'number') return payload
+    if (payload && payload.message) return payload.message
+    return JSON.stringify(payload) 
+  }
+
   /**
    * Check if method can print into console
    *
@@ -65,12 +74,12 @@ class Logger
    * @param tag short tag specifying area where message was spawned (eg. cart, sync, module)
    * @param context meaningful data related to this message
    */
-  debug (message: string, tag: string = null, context: any = null) : () => void {
+  debug (message: any, tag: string = null, context: any = null) : () => void {
     if (!isServer && this.canPrint('debug')) {
       if (tag) {
-        return console.debug.bind(window.console, '%cVSF%c %c' + tag +'%c ' + message, bgColorStyle('grey'), 'color: inherit', bgColorStyle('gray'), 'font-weight: normal', context);
+        return console.debug.bind(window.console, '%cVSF%c %c' + tag +'%c ' + this.convertToString(message), bgColorStyle('grey'), 'color: inherit', bgColorStyle('gray'), 'font-weight: normal', context);
       } else {
-        return console.debug.bind(window.console, '%cVSF%c ' + message, bgColorStyle('white'), 'font-weight: normal', context);
+        return console.debug.bind(window.console, '%cVSF%c ' + this.convertToString(message), bgColorStyle('grey'), 'font-weight: normal', context);
       }
     } else {
       return function () {}
@@ -85,7 +94,7 @@ class Logger
    * @param tag short tag specifying area where message was spawned (eg. cart, sync, module)
    * @param context meaningful data related to this message
    */
-  log (message: string, tag: string = null, context: any = null) : () => void {
+  log (message: any, tag: string = null, context: any = null) : () => void {
     return this.info(message, tag, context);
   }
 
@@ -97,12 +106,12 @@ class Logger
    * @param tag short tag specifying area where message was spawned (eg. cart, sync, module)
    * @param context meaningful data related to this message
    */
-  info (message: string, tag: string = null, context: any = null) : () => void {
+  info (message: any, tag: string = null, context: any = null) : () => void {
     if (!isServer && this.canPrint('info')) {
       if (tag) {
-        return console.log.bind(window.console, '%cVSF%c %c' + tag +'%c ' + message, bgColorStyle('green'), 'color: inherit', bgColorStyle('gray'), 'font-weight: bold', context);
+        return console.log.bind(window.console, '%cVSF%c %c' + tag +'%c ' + this.convertToString(message), bgColorStyle('green'), 'color: inherit', bgColorStyle('gray'), 'font-weight: bold', context);
       } else {
-        return console.log.bind(window.console, '%cVSF%c ' + message, bgColorStyle('green'), 'font-weight: bold', context);
+        return console.log.bind(window.console, '%cVSF%c ' + this.convertToString(message), bgColorStyle('green'), 'font-weight: bold', context);
       }
     } else {
       return function () {}
@@ -117,12 +126,16 @@ class Logger
    * @param tag short tag specifying area where message was spawned (eg. cart, sync, module)
    * @param context meaningful data related to this message
    */
-  warn (message: string, tag: string = null, context: any = null) : () => void {
-    if (!isServer && this.canPrint('warn')) {
-      if (tag) {
-        return console.warn.bind(window.console, '%cVSF%c %c' + tag +'%c ' + message, bgColorStyle('orange'), 'color: inherit', bgColorStyle('gray'), 'font-weight: bold', context);
+  warn (message: any, tag: string = null, context: any = null) : () => void {
+    if (this.canPrint('warn')) {
+      if (!isServer) {
+        if (tag) {
+          return console.warn.bind(window.console, '%cVSF%c %c' + tag +'%c ' + this.convertToString(message), bgColorStyle('orange'), 'color: inherit', bgColorStyle('gray'), 'font-weight: bold', context);
+        } else {
+          return console.warn.bind(window.console, '%cVSF%c ' + this.convertToString(message), bgColorStyle('orange'), 'font-weight: bold', context);
+        }
       } else {
-        return console.warn.bind(window.console, '%cVSF%c ' + message, bgColorStyle('orange'), 'font-weight: bold', context);
+        return console.warn.bind(console, message, context);
       }
     } else {
       return function () {}
@@ -137,12 +150,16 @@ class Logger
    * @param tag short tag specifying area where message was spawned (eg. cart, sync, module)
    * @param context meaningful data related to this message
    */
-  error (message: string, tag: string = null, context: any = null) : () => void {
-    if (!isServer && this.canPrint('error')) {
-      if (tag) {
-        return console.error.bind(window.console, '%cVSF%c %c' + tag +'%c ' + message, bgColorStyle('red'), 'color: inherit', bgColorStyle('gray'), 'font-weight: bold', context);
+  error (message: any, tag: string = null, context: any = null) : () => void {
+    if (this.canPrint('error')) { // we should display SSR errors for better monitoring + error handling
+      if (!isServer) {
+        if (tag) {
+          return console.error.bind(window.console, '%cVSF%c %c' + tag +'%c ' + this.convertToString(message), bgColorStyle('red'), 'color: inherit', bgColorStyle('gray'), 'font-weight: bold', context);
+        } else {
+          return console.error.bind(window.console, '%cVSF%c ' + this.convertToString(message), bgColorStyle('red'), 'font-weight: bold', context);
+        }
       } else {
-        return console.error.bind(window.console, '%cVSF%c ' + message, bgColorStyle('red'), 'font-weight: bold', context);
+        return console.error.bind(console, message, context);
       }
     } else {
       return function () {}

diff --git a/core/lib/module/index.ts b/core/lib/module/index.ts
@@ -9,6 +9,7 @@ import { router } from '@vue-storefront/core/app'
 import { isServer } from '@vue-storefront/core/helpers'
 import { VSF, VueStorefrontModuleConfig } from './types'
 import { doesStoreAlreadyExists, mergeStores } from './helpers'
+import { RouterManager } from '@vue-storefront/core/lib/router-manager'
 
 const moduleExtendings: VueStorefrontModuleConfig[] = []
 const registeredModules: VueStorefrontModuleConfig[] = []
@@ -49,7 +50,7 @@ class VueStorefrontModule {
   private static _extendRouter (routerInstance, routes?: RouteConfig[], beforeEach?: NavigationGuard, afterEach?: NavigationGuard): void {
     if (routes) {
       setupMultistoreRoutes(rootStore.state.config, routerInstance, routes)
-      routerInstance.addRoutes(routes)
+      RouterManager.addRoutes(routes, routerInstance)
     }
     if (beforeEach) routerInstance.beforeEach(beforeEach)
     if (afterEach) routerInstance.afterEach(afterEach)