fix: fix breadcrumbs

Author: alexandrdrvn

package.json

@@ -18,15 +18,15 @@
     "typings": "types/index.d.ts",
     "peerDependencies": {},
     "dependencies": {
-        "@types/node": "^12.7.2",
-        "apollo-boost": "^0.4.4",
-        "cookie-universal": "^2.0.16",
-        "graphql": "^14.5.3",
+        "@types/node": "^13.7.4",
+        "apollo-boost": "^0.4.7",
+        "cookie-universal": "^2.1.1",
+        "graphql": "^14.6.0",
         "isomorphic-fetch": "^2.2.1",
         "lodash": "^4.17.15",
-        "vue": "^2.6.10",
+        "vue": "^2.6.11",
         "vue-graphql-loader": "^0.3.3",
-        "vue-i18n": "^8.14.0",
-        "vuefront": "^0.2.2"
+        "vue-i18n": "^8.15.3",
+        "vuefront": "^0.2.4"
     }
 }

src/index.js

@@ -1,9 +1,58 @@
+import { readFileSync } from 'fs'
+
 const path = require('path')
 let seoConfig = require('vuefront/seo').default
 const _ = require('lodash')
 const ApolloClient = require('apollo-boost').default
 require('isomorphic-fetch')
 const ampify = require('./plugins/ampify')
+var fs = require('fs');
+
+const readConfigFile = (path) => {
+  const result = {}
+  try {
+      var filename = require.resolve(path);
+      const configContent = fs.readFileSync(filename, 'utf8');
+      let matched = /css.*:[\s\n\r]+\{([^{]+)\}/.exec(configContent)
+      if(!_.isEmpty(matched)) {
+        const cssConfig = 
+        matched[1]
+          .replace(/\s\n/, '')
+          .split(',')
+          .map((str) => 
+            str
+            .split(':')
+            .map(strV => 
+              strV
+              .trim()
+              .replace(/\'/g, '')
+              )
+            ).reduce((accumulator, currentValue) => {
+              accumulator[currentValue[0]] = currentValue[1]
+              return accumulator
+            }, {})
+
+            result.css = cssConfig
+      }
+      matched = /theme: \'(.*)\'/.exec(configContent)
+      if(!_.isEmpty(matched)) {
+        result.theme = matched[1]
+      }
+  } catch (e) {
+  }
+
+  return result
+}
+
+const mergeConfig = (objValue, srcValue) => {
+  if (_.isArray(objValue)) {
+    return objValue.concat(srcValue)
+  } else if (_.isObject(objValue)) {
+    return _.merge(objValue, srcValue)
+  } else {
+    return srcValue
+  }
+}
 
 export default async function vuefrontModule(_moduleOptions) {
   const isNuxtVersion2 = this.options.build.transpile
@@ -159,6 +208,17 @@ export default async function vuefrontModule(_moduleOptions) {
     src: defaultRouter
   })
 
+  let themeOptions = readConfigFile('vuefront')
+
+  const config = readConfigFile(this.options.rootDir + '/vuefront.config.js')
+
+  if (typeof config.theme !== 'undefined') {
+    const customThemeOptions = readConfigFile(config.theme)
+    themeOptions = _.mergeWith(themeOptions, customThemeOptions, mergeConfig)
+  }
+
+  themeOptions = _.mergeWith(themeOptions, config, mergeConfig)
+
   this.addPlugin({
     fileName: 'vuefront.js',
     src: path.resolve(__dirname, './plugin.js'),
@@ -167,7 +227,8 @@ export default async function vuefrontModule(_moduleOptions) {
       debug: this.options.dev,
       browserBaseURL,
       baseURL,
-      pages
+      pages,
+      themeOptions
     }
   })
 

src/plugin.js

@@ -8,6 +8,14 @@ import userConfig from '~/vuefront.config'
 <% if (options.theme !== 'default' ) { %>
 import themeConfig from '<%= options.theme %>'
 <% } %>
+<% if (typeof options.themeOptions.css !== 'undefined' ) { %>
+  <% for (const key in options.themeOptions.css) { %>
+    <% if (options.themeOptions.css[key] !== 'null' ) { %>
+import '<%= options.themeOptions.css[key] %>'
+    <% } %>
+  <% } %>
+<% } %>
+  
 
 const mergeConfig = (objValue, srcValue) => {
   if (_.isArray(objValue)) {
@@ -26,10 +34,6 @@ if (typeof themeConfig !== 'undefined') {
 }
 themeOptions = _.mergeWith(themeOptions, userConfig, mergeConfig)
 
-for (var key in themeOptions.css) {
-    themeOptions.css[key]()
-}
-
 Vue.use(VueI18n)
 
 const baseURL = process.browser
@@ -43,6 +47,16 @@ export const init = (ctx, inject) => {
         accept: 'application/json; charset=UTF-8',
         'content-type': 'application/json; charset=UTF-8'
       },
+      onError: (error) => {
+        if (error.graphQLErrors) {
+          console.log('ApolloClient graphQLErrors')
+          console.log(error.graphQLErrors)
+        }
+        if (error.networkError) {
+          console.log('ApolloClient networkError')
+          console.log(error.networkError.bodyText)
+        }
+      },
       request: (operation) => {
         operation.setContext({
           fetchOptions: {

src/routes.js

@@ -15,6 +15,31 @@ const mergeConfig = (objValue, srcValue) => {
     }
 }
 
+const breadcrumbsLoad = (component) => {
+  component.serverPrefetch = function() {
+    return new Promise(async (resolve) => {
+      this.$store.dispatch('common/breadcrumbs/init');
+      if(this.handleLoadData) {
+        await this.handleLoadData(this)
+      }
+      await this.$store.dispatch('common/breadcrumbs/load');
+      resolve()
+    })
+  }
+  component.created = function() {
+    if (typeof this.loaded !== 'undefined') {
+      if(!this.loaded) {
+        this.$store.dispatch('common/breadcrumbs/init');
+        this.$watch('loaded', () => {
+            this.$store.dispatch('common/breadcrumbs/load');
+        })
+      }
+    } else {
+        this.$store.dispatch('common/breadcrumbs/load');
+    }
+  }
+}
+
 let themeOptions = mainConfig
 if (typeof themeConfig !== 'undefined') {
     themeOptions = _.mergeWith(themeOptions, themeConfig, mergeConfig)
@@ -29,18 +54,9 @@ export const getRoutes = () => {
         props: <%= JSON.stringify(options.routes[i].props) %>,
         <% } %>
         component: () => {
-            <%= 'themeOptions.pages.'+options.routes[i].component %>.created = function() {
-                if (typeof this.loaded !== 'undefined') {
-                    this.$store.dispatch('common/breadcrumbs/init');
-                    this.$watch('loaded', () => {
-                        this.$store.dispatch('common/breadcrumbs/load');
-                    })
-                } else {
-                    this.$store.dispatch('common/breadcrumbs/load');
-
-                }
-            }
-            return <%= 'themeOptions.pages.'+options.routes[i].component %>
+          const component = <%= 'themeOptions.pages.'+options.routes[i].component %>
+          breadcrumbsLoad(component)
+          return component
         }
 
     }, <% } %>]