Merge branch 'dev' of github.com:nuxt/nuxt.js into dev

lib/app/empty.js

@@ -0,0 +1 @@
+// This file is intentially left empty for noop aliases

lib/app/index.js

@@ -9,40 +9,16 @@ import Nuxt from './components/nuxt.vue'
 import App from '<%= appPath %>'
 import { getContext } from './utils'
 <% if (store) { %>import { createStore } from './store.js'<% } %>
-
-if (process.browser) {
-  // window.onNuxtReady(() => console.log('Ready')) hook
-  // Useful for jsdom testing or plugins (https://github.com/tmpvar/jsdom#dealing-with-asynchronous-script-loading)
-  window._nuxtReadyCbs = []
-  window.onNuxtReady = function (cb) {
-    window._nuxtReadyCbs.push(cb)
-  }
-}
-
-<% if (plugins.filter(p => p.ssr).length) { %>
-// Require plugins
-<% plugins.filter(p => p.ssr).forEach(plugin => { %>
-let <%= plugin.name %> = require('<%= relativeToBuild(plugin.src) %>')
-<%= plugin.name %> = <%= plugin.name %>.default || <%= plugin.name %>
+<% plugins.forEach(plugin => { %>import <%= plugin.name %> from '<%= plugin.name %>'
 <% }) %>
-<% } %>
-
-<% if (plugins.filter(p => !p.ssr).length) { %>
-// Require browser-only plugins
-if (process.browser) {
-  <% plugins.filter(p => !p.ssr).forEach(plugin => { %>
-  let <%= plugin.name %> = require('<%= relativeToBuild(plugin.src) %>')
-  <%= plugin.name %> = <%= plugin.name %>.default || <%= plugin.name %>
-  <% }) %>
-}
-<% } %>
-
 
 // Component: <nuxt-child>
 Vue.component(NuxtChild.name, NuxtChild)
+
 // Component: <nuxt-link>
 Vue.component(NuxtLink.name, NuxtLink)
-// Component: <nuxt>
+
+// Component: <nuxt>`
 Vue.component(Nuxt.name, Nuxt)
 
 // vue-meta configuration
@@ -132,24 +108,17 @@ async function createApp (ssrContext) {
     route: router.currentRoute,
     next,
     error: app._nuxt.error.bind(app),
-    <% if(store) { %> store,<%  } %> 
+    <% if(store) { %>store,<%  } %> 
     req: ssrContext ? ssrContext.req : undefined,
     res: ssrContext ? ssrContext.res : undefined,
   }, app)
 
-  <% if (plugins.filter(p => p.ssr).length) { %>
   <% plugins.filter(p => p.ssr).forEach(plugin => { %>
-    if (typeof <%= plugin.name %> === 'function') await <%= plugin.name %>(ctx) 
-  <% }) %>
-  <% } %>
-
+  if (typeof <%= plugin.name %> === 'function') await <%= plugin.name %>(ctx)<% }) %>
   <% if (plugins.filter(p => !p.ssr).length) { %>
-  if (process.browser) {
-    <% plugins.filter(p => !p.ssr).forEach(plugin => { %>
-    if (typeof <%= plugin.name %> === 'function') await <%= plugin.name %>(ctx) 
-    <% }) %>
-  }
-  <% } %>
+  if (process.browser) { <% plugins.filter(p => !p.ssr).forEach(plugin => { %>
+    if (typeof <%= plugin.name %> === 'function') await <%= plugin.name %>(ctx)<% }) %>
+  }<% } %>
 
   return {
     app,

lib/app/utils.js

@@ -2,6 +2,15 @@ import Vue from 'vue'
 
 const noopData = () => ({})
 
+// window.onNuxtReady(() => console.log('Ready')) hook
+// Useful for jsdom testing or plugins (https://github.com/tmpvar/jsdom#dealing-with-asynchronous-script-loading)
+if (process.browser) {
+  window._nuxtReadyCbs = []
+  window.onNuxtReady = function (cb) {
+    window._nuxtReadyCbs.push(cb)
+  }
+}
+
 export function applyAsyncData (Component, asyncData = {}) {
   const ComponentData = Component.options.data || noopData
   // Prevent calling this method for each request on SSR context

lib/builder/builder.js

@@ -49,6 +49,14 @@ export default class Builder extends Tapable {
     this._buildStatus = STATUS.INITIAL
   }
 
+  get plugins () {
+    return this.options.plugins.map((p, i) => {
+      if (typeof p === 'string') p = { src: p }
+      p.src = r(this.options.srcDir, p.src)
+      return { src: p.src, ssr: (p.ssr !== false), name: `plugin${i}` }
+    })
+  }
+
   async build () {
     // Avoid calling build() method multiple times when dev:true
     /* istanbul ignore if */
@@ -119,6 +127,7 @@ export default class Builder extends Tapable {
       'router.js',
       'server.js',
       'utils.js',
+      'empty.js',
       'components/nuxt-error.vue',
       'components/nuxt-loading.vue',
       'components/nuxt-child.js',
@@ -137,11 +146,7 @@ export default class Builder extends Tapable {
       middleware: fs.existsSync(join(this.options.srcDir, 'middleware')),
       store: this.options.store,
       css: this.options.css,
-      plugins: this.options.plugins.map((p, i) => {
-        if (typeof p === 'string') p = { src: p }
-        p.src = r(this.options.srcDir, p.src)
-        return { src: p.src, ssr: (p.ssr !== false), name: `plugin${i}` }
-      }),
+      plugins: this.plugins,
       appPath: './App.vue',
       layouts: Object.assign({}, this.options.layouts),
       loading: typeof this.options.loading === 'string' ? this.relativeToBuild(this.options.srcDir, this.options.loading) : this.options.loading,
@@ -264,15 +269,33 @@ export default class Builder extends Tapable {
 
   async webpackBuild () {
     debug('Building files...')
-    let compilersOptions = []
+    const compilersOptions = []
 
     // Client
-    let clientConfig = clientWebpackConfig.call(this)
+    const clientConfig = clientWebpackConfig.call(this)
     compilersOptions.push(clientConfig)
 
     // Server
-    let serverConfig = serverWebpackConfig.call(this)
-    compilersOptions.push(serverConfig)
+    const serverConfig = serverWebpackConfig.call(this)
+    if (this.options.build.ssr) {
+      compilersOptions.push(serverConfig)
+    }
+
+    // Alias plugins to their real path
+    this.plugins.forEach(p => {
+      const src = this.relativeToBuild(p.src)
+
+      // Client config
+      if (!clientConfig.resolve.alias[p.name]) {
+        clientConfig.resolve.alias[p.name] = src
+      }
+
+      // Server config
+      if (!serverConfig.resolve.alias[p.name]) {
+        // Alias to noop for ssr:false plugins
+        serverConfig.resolve.alias[p.name] = p.ssr ? src : './empty.js'
+      }
+    })
 
     // Simulate webpack multi compiler interface
     // Separate compilers are simpler, safer and faster

lib/builder/webpack/client.config.js

@@ -60,11 +60,23 @@ export default function webpackClientConfig () {
     config.plugins = []
   }
 
-  // Generate output HTML
+  // Generate output HTML for SSR
+  if (this.options.build.ssr) {
+    config.plugins.push(
+      new HTMLPlugin({
+        filename: 'index.ssr.html',
+        template: this.options.appTemplatePath,
+        inject: false // Resources will be injected using bundleRenderer
+      })
+    )
+  }
+
+  // Generate output HTML for SPA
   config.plugins.push(
     new HTMLPlugin({
+      filename: 'index.spa.html',
       template: this.options.appTemplatePath,
-      inject: this.options.ssr === false,
+      inject: true,
       chunksSortMode: 'dependency'
     })
   )

lib/core/options.js

@@ -46,16 +46,57 @@ export default function Options (_options) {
     options.store = true
   }
 
+  // Resolve mode
+  let mode = options.mode
+  if (typeof mode === 'function') {
+    mode = mode()
+  }
+  if (typeof mode === 'string') {
+    mode = Modes[mode]
+  }
+
+  // Apply mode
+  _.defaultsDeep(options, mode)
+
   return options
 }
 
+const Modes = {
+  universal: {
+    build: {
+      ssr: true
+    },
+    render: {
+      ssr: true
+    }
+  },
+  spa: {
+    build: {
+      ssr: false
+    },
+    render: {
+      ssr: false
+    }
+  },
+  static: {
+    build: {
+      ssr: true
+    },
+    render: {
+      ssr: 'static'
+    }
+  }
+}
+
 export const defaultOptions = {
-  dev: (process.env.NODE_ENV !== 'production'),
+  mode: 'universal',
+  dev: process.env.NODE_ENV !== 'production',
   buildDir: '.nuxt',
   nuxtAppDir: resolve(__dirname, '../lib/app/'), // Relative to dist
   build: {
     analyze: false,
     extractCSS: false,
+    ssr: undefined,
     publicPath: '/_nuxt/',
     filenames: {
       css: 'common.[chunkhash].css',
@@ -132,10 +173,10 @@ export const defaultOptions = {
     scrollBehavior: null,
     fallback: false
   },
-  ssr: true,
   render: {
     bundleRenderer: {},
     resourceHints: true,
+    ssr: undefined,
     http2: {
       push: false
     },

lib/core/renderer.js

@@ -42,7 +42,8 @@ export default class Renderer extends Tapable {
     this.resources = {
       clientManifest: null,
       serverBundle: null,
-      appTemplate: null,
+      ssrTemplate: null,
+      spaTemplate: null,
       errorTemplate: parseTemplate('<pre>{{ stack }}</pre>') // Will be loaded on ready
     }
 
@@ -121,7 +122,18 @@ export default class Renderer extends Tapable {
   }
 
   get noSSR () {
-    return this.options.ssr === false
+    return this.options.render.ssr === false
+  }
+
+  get staticSSR () {
+    return this.options.render.ssr === 'static'
+  }
+
+  get isReady () {
+    if (this.noSSR) {
+      return this.resources.spaTemplate
+    }
+    return this.bundleRenderer && this.resources.ssrTemplate
   }
 
   createRenderer () {
@@ -297,7 +309,7 @@ export default class Renderer extends Tapable {
 
   async renderRoute (url, context = {}) {
     /* istanbul ignore if */
-    if (!(this.noSSR || this.bundleRenderer) || !this.resources.appTemplate) {
+    if (!this.isReady) {
       return new Promise(resolve => {
         setTimeout(() => resolve(this.renderRoute(url, context)), 1000)
       })
@@ -315,7 +327,7 @@ export default class Renderer extends Tapable {
       let APP = '<div id="__nuxt"></div>'
       let HEAD = ''
 
-      let html = this.resources.appTemplate({
+      let html = this.resources.spaTemplate({
         HTML_ATTRS: '',
         BODY_ATTRS: '',
         HEAD,
@@ -340,15 +352,19 @@ export default class Renderer extends Tapable {
     }
 
     let resourceHints = ''
-    if (this.options.render.resourceHints) {
-      resourceHints = context.renderResourceHints()
-      HEAD += resourceHints
-    }
-    HEAD += context.renderStyles()
-    APP += `<script type="text/javascript">window.__NUXT__=${serialize(context.nuxt, { isJSON: true })};</script>`
-    APP += context.renderScripts()
 
-    let html = this.resources.appTemplate({
+    if (!this.staticSSR) {
+      if (this.options.render.resourceHints) {
+        resourceHints = context.renderResourceHints()
+        HEAD += resourceHints
+      }
+      APP += `<script type="text/javascript">window.__NUXT__=${serialize(context.nuxt, { isJSON: true })};</script>`
+      APP += context.renderScripts()
+    }
+
+    HEAD += context.renderStyles()
+
+    let html = this.resources.ssrTemplate({
       HTML_ATTRS: 'data-n-head-ssr ' + m.htmlAttrs.text(),
       BODY_ATTRS: m.bodyAttrs.text(),
       HEAD,
@@ -422,8 +438,13 @@ const resourceMap = [
     transform: JSON.parse
   },
   {
-    key: 'appTemplate',
-    fileName: 'index.html',
+    key: 'ssrTemplate',
+    fileName: 'index.ssr.html',
+    transform: parseTemplate
+  },
+  {
+    key: 'spaTemplate',
+    fileName: 'index.spa.html',
     transform: parseTemplate
   }
 ]

test/fixtures/module/modules/basic/reverse.js

@@ -7,3 +7,5 @@ function $reverseStr (str) {
 }
 
 Vue.prototype.$reverseStr = $reverseStr
+
+export default undefined

test/fixtures/module/router.js

@@ -3,18 +3,21 @@ import Router from 'vue-router'
 
 Vue.use(Router)
 
+const indexPage = () => import('~/views/index.vue').then(m => m.default || m)
+const aboutPage = () => import('~/views/about.vue').then(m => m.default || m)
+
 export function createRouter () {
   return new Router({
     mode: 'history',
     routes: [
       {
         path: '/',
-        component: require('~/views/index.vue').default,
+        component: indexPage,
         name: 'index'
       },
       {
         path: '/about',
-        component: require('~/views/about.vue').default,
+        component: aboutPage,
         name: 'about'
       }
     ]

test/with-config.test.js

@@ -90,7 +90,7 @@ test('/test/about-bis (added with extendRoutes)', async t => {
 
 test('Check stats.json generated by build.analyze', t => {
   const stats = require(resolve(__dirname, 'fixtures/with-config/.nuxt/dist/stats.json'))
-  t.is(stats.assets.length, 26)
+  t.is(stats.assets.length, 27)
 })
 
 test('Check /test.txt with custom serve-static options', async t => {