feat(onError): adding basic onError cb

docs/.vuepress/config.js

@@ -1,48 +1,34 @@
 module.exports = {
+  dest: 'docs/.vuepress/dist',
   base: '/',
-  serviceWorker: true,
+  title: 'Vue CLI SSR plugin',
+  description: 'Dead Simple Server-Side-Rendering',
   head: [
-    ['link', { rel: 'icon', href: '/logo.png' }],
+    ['link', { rel: 'icon', href: '/favicon.png' }]
   ],
-  locales: {
-    '/': {
-      lang: 'en-US',
-      title: 'Vue CLI SSR plugin',
-      description: 'Dead Simple Server-Side-Rendering',
-    },
-  },
+  evergreen: true,
+  displayAllHeaders: true,
+  sidebarDepth: 3,
   themeConfig: {
-    repo: 'Akryum/vue-cli-plugin-ssr',
-    docsDir: 'docs',
-    editLinks: true,
-    serviceWorker: {
-      updatePopup: true,
+    sidebar: {
+      '/guide/': [
+        '',
+        'configuration',
+        'directives',
+        'webpack',
+      ],
     },
-    locales: {
-      '/': {
-        selectText: 'Languages',
-        label: 'English',
-        lastUpdated: 'Last Updated',
-        nav: [
-          {
-            text: 'Guide',
-            link: '/guide/',
-          },
-          {
-            text: 'Patreon',
-            link: 'https://www.patreon.com/akryum',
-          },
-        ],
-        sidebarDepth: 3,
-        sidebar: {
-          '/guide/': [
-            '',
-            'configuration',
-            'directives',
-            'webpack',
-          ],
-        },
+    nav: [
+      {
+        text: 'Guide',
+        link: '/guide/',
       },
-    },
+      {
+        text: 'Patreon',
+        link: 'https://www.patreon.com/akryum',
+      },
+    ],
   },
+  host: '127.0.0.1',
 }
+

docs/guide/configuration.md

@@ -27,6 +27,8 @@ module.exports = {
         const cookieParser = require('cookie-parser')
         app.use(cookieParser())
       },
+      // Copy URL to system clipboard on start
+      copyUrlOnStart: true,
       // Paths
       distPath: path.resolve(__dirname, './dist'),
       error500Html: null,

generator/index.js

@@ -6,7 +6,7 @@ const chalk = require('chalk')
 
 module.exports = (api, options, rootOptions) => {
   if (!api.hasPlugin('router')) {
-    throw new Error(`Please install router plugin with 'vue add router'.`)
+    throw new Error('Please install router plugin with \'vue add router\'.')
   }
 
   api.extendPackage({
@@ -42,16 +42,16 @@ module.exports = (api, options, rootOptions) => {
       const file = getFile(api, './src/main.js')
       if (file) {
         let contents = fs.readFileSync(file, { encoding: 'utf8' })
-        contents = contents.replace(/import router from ('|")\.\/router(\.\w+)?('|")/, `import { createRouter } from $1./router$3`)
-        contents = contents.replace(/import store from ('|")\.\/store(\.\w+)?('|")/, `import { createStore } from $1./store$3`)
-        contents = contents.replace(/import ('|")\.\/registerServiceWorker('|")\n/, ``)
-        contents = contents.replace(/const apolloProvider = createProvider\(({(.|\s)*?})?\)\n/, ``)
+        contents = contents.replace(/import router from ('|")\.\/router(\.\w+)?('|")/, 'import { createRouter } from $1./router$3')
+        contents = contents.replace(/import store from ('|")\.\/store(\.\w+)?('|")/, 'import { createStore } from $1./store$3')
+        contents = contents.replace(/import ('|")\.\/registerServiceWorker('|")\n/, '')
+        contents = contents.replace(/const apolloProvider = createProvider\(({(.|\s)*?})?\)\n/, '')
         contents = contents.replace(/new Vue\({((.|\s)*)}\)\.\$mount\(.*?\)/, `export async function createApp ({
           beforeApp = () => {},
           afterApp = () => {}
         } = {}) {
           const router = createRouter()
-          ${templateOptions.vuex ? `const store = createStore()` : ''}
+          ${templateOptions.vuex ? 'const store = createStore()' : ''}
           ${templateOptions.apollo ? `const apolloProvider = createProvider({
             ssr: process.server,
           })` : ''}
@@ -87,7 +87,7 @@ module.exports = (api, options, rootOptions) => {
         let contents = fs.readFileSync(file, { encoding: 'utf8' })
         contents = contents.replace(/export default new Router\({((.|\s)+)}\)/, `export function createRouter () {
           return new Router({
-            ${contents.includes('mode:') ? '' : `mode: 'history',`}$1})
+            ${contents.includes('mode:') ? '' : 'mode: \'history\','}$1})
         }`)
         contents = contents.replace(/mode:\s*("|')(hash|abstract)("|'),/, '')
         fs.writeFileSync(file, contents, { encoding: 'utf8' })
@@ -126,7 +126,7 @@ module.exports = (api, options, rootOptions) => {
         contents = contents.replace(/export default app => {((.|\s)*)}/, `export default app => {$1
           ssrMiddleware(app, { prodOnly: true })
         }`)
-        contents = `import ssrMiddleware from '@akryum/vue-cli-plugin-ssr/lib/app'\n` + contents
+        contents = 'import ssrMiddleware from \'@akryum/vue-cli-plugin-ssr/lib/app\'\n' + contents
         fs.writeFileSync(file, contents, { encoding: 'utf8' })
       }
 

generator/templates/default/src/entry-client.js

@@ -1,3 +1,6 @@
+<%_ if (apollo) { _%>
+import 'isomorphic-fetch'
+  <%_ } _%>
 import { loadAsyncComponents } from '@akryum/vue-cli-plugin-ssr/client'
 <%_ if (pwa) { _%>
 import './registerServiceWorker'
@@ -14,13 +17,16 @@ createApp({
 
   afterApp ({
     app,
+    router,
     <%_ if (vuex) { _%>
       store,
     <%_ } _%>
   }) {
     <%_ if (vuex) { _%>
     store.replaceState(window.__INITIAL_STATE__)
     <%_ } _%>
-    app.$mount('#app')
+    router.onReady(() => {
+      app.$mount('#app')
+    })
   }
 })

lib/app.js

@@ -123,6 +123,10 @@ module.exports = (app, options) => {
                 ? errorHtml = errorHtml.replace('<!--server-error-msg-->', errorMessage)
                 : errorHtml += errorMessage
             }
+
+            if (config.onError) {
+              config.onError(err, res)
+            }
           }
 
           res.status(500).send(errorHtml)

lib/config.js

@@ -9,6 +9,7 @@ module.exports = {
   skipRequests: req => req.originalUrl === '/graphql',
   nodeExternalsWhitelist: [/\.css$/, /\?vue&type=style/],
   extendServer: null,
+  copyUrlOnStart: true,
   // Paths
   distPath: null,
   error500Html: null,

lib/dev-server.js

@@ -5,7 +5,7 @@ const chalk = require('chalk')
 
 const config = require('./config')
 
-module.exports.setupDevServer = ({ server, templatePath, onUpdate }) => new Promise((resolve, reject) => {
+module.exports.setupDevServer = ({ server, templatePath, onUpdate, webpackConfig }) => new Promise((resolve, reject) => {
   const service = config.service
   if (!service) {
     reject(new Error('No cli-service available. Make sure you ran the command with `vue-cli-service`.'))
@@ -20,7 +20,7 @@ module.exports.setupDevServer = ({ server, templatePath, onUpdate }) => new Prom
   }
 
   const { getWebpackConfigs } = require('./webpack')
-  const [clientConfig, serverConfig] = getWebpackConfigs(service)
+  const [clientConfig, serverConfig] = getWebpackConfigs(service, webpackConfig)
 
   let serverBundle
   let template
@@ -116,17 +116,18 @@ module.exports.setupDevServer = ({ server, templatePath, onUpdate }) => new Prom
   })
 
   function onCompilationCompleted () {
+    copied = ''
     if (firstRun) {
       firstRun = false
-      require('clipboardy').write(url)
-      copied = chalk.dim('(copied to clipboard)')
-    } else {
-      copied = ''
+      if (config.copyUrlOnStart) {
+        require('clipboardy').write(url)
+        copied = chalk.dim('(copied to clipboard)')
+      }
     }
 
     setTimeout(() => {
       console.log()
-      console.log(`  App running at:`)
+      console.log('  App running at:')
       console.log(`  - Local:   ${chalk.cyan(url)} ${copied}`)
     })
   }

lib/loaders/css-context.js

@@ -27,23 +27,23 @@ module.exports.pitch = function (remainingRequest) {
 
   if (isServer && isProduction) {
     const shared = [
-      `// load the styles`,
+      '// load the styles',
       `var content = require(${request});`,
       // content list format is [id, css, media, sourceMap]
-      `if(typeof content === 'string') content = [[module.id, content, '']];`,
-      `module.exports = content;`,
-      `if(content.locals) module.exports = content.locals;`,
+      'if(typeof content === \'string\') content = [[module.id, content, \'\']];',
+      'module.exports = content;',
+      'if(content.locals) module.exports = content.locals;',
     ]
     // on the server: attach to Vue SSR context
     if (isVue) {
       // inside *.vue file: expose a function so it can be called in
       // component's lifecycle hooks
       return shared.concat([
-        `// add CSS to SSR context`,
+        '// add CSS to SSR context',
         `var add = require(${addStylesServerPath}).default`,
-        `module.exports.__inject__ = function (context) {`,
+        'module.exports.__inject__ = function (context) {',
         `  add(${id}, content, ${isProduction}, context)`,
-        `};`,
+        '};',
       ]).join('\n')
     } else {
       // normal import

lib/server.js

@@ -5,6 +5,7 @@ exports.createServer = ({
   port,
   host,
 }) => {
+  /* eslint-disable-next-line no-async-promise-executor */
   return new Promise(async (resolve, reject) => {
     const app = express()
 

lib/webpack.js

@@ -43,24 +43,26 @@ exports.chainWebpack = (webpackConfig) => {
   // HTML
   webpackConfig.plugin('html-filter').use(HtmlFilterPlugin)
   if (isProd) {
+    // TODO Make customizable from outside
     webpackConfig.plugin('html').tap(args => {
       args[0].minify.removeComments = false
+      args[0].minify.caseSensitive = true
       return args
     })
   }
 
   webpackConfig.entry('app').clear().add(config.entry(target))
 
   webpackConfig.plugin('define').tap(args => {
-    return [Object.assign(args[0], {'process.client': target === 'client', 'process.server': target === 'server'})]
+    return [Object.assign(args[0], { 'process.client': target === 'client', 'process.server': target === 'server' })]
   })
 
   webpackConfig.stats(isProd ? 'normal' : 'none')
   webpackConfig.devServer.stats('errors-only').quiet(true).noInfo(true)
 
   if (isClient) {
     webpackConfig.plugin('ssr').use(VueSSRClientPlugin)
-    webpackConfig.plugin('loader').use(WebpackBar, [{name: 'Client', color: 'green'}])
+    webpackConfig.plugin('loader').use(WebpackBar, [{ name: 'Client', color: 'green' }])
 
     webpackConfig.devtool(!isProd ? '#cheap-module-source-map' : undefined)
 
@@ -70,10 +72,10 @@ exports.chainWebpack = (webpackConfig) => {
     })
   } else {
     webpackConfig.plugin('ssr').use(VueSSRServerPlugin)
-    webpackConfig.plugin('loader').use(WebpackBar, [{name: 'Server', color: 'orange'}])
+    webpackConfig.plugin('loader').use(WebpackBar, [{ name: 'Server', color: 'orange' }])
 
     webpackConfig.devtool('source-map')
-    webpackConfig.externals(nodeExternals({whitelist: config.nodeExternalsWhitelist}))
+    webpackConfig.externals(nodeExternals({ whitelist: config.nodeExternalsWhitelist }))
     webpackConfig.output.libraryTarget('commonjs2'); webpackConfig.target('node')
     webpackConfig.optimization.splitChunks(false).minimize(false)