Nuxt/lib/builder/builder.js

const { promisify } = require('util')
const _ = require('lodash')
const chokidar = require('chokidar')
const { remove, readFile, writeFile, mkdirp, existsSync } = require('fs-extra')
const fs = require('fs')
const hash = require('hash-sum')
const webpack = require('webpack')
const serialize = require('serialize-javascript')
const { join, resolve, basename, extname, dirname } = require('path')
const MFS = require('memory-fs')
const webpackDevMiddleware = require('webpack-dev-middleware')
const webpackHotMiddleware = require('webpack-hot-middleware')
const Debug = require('debug')
const Glob = require('glob')
const { r, wp, wChunk, createRoutes, parallel, relativeTo, waitFor } = require('../common/utils')
const { Options } = require('../common')
const clientWebpackConfig = require('./webpack/client.config.js')
const serverWebpackConfig = require('./webpack/server.config.js')
const upath = require('upath')
const ORA = require('ora')

const debug = Debug('nuxt:build')
debug.color = 2 // Force green color

const glob = promisify(Glob)

module.exports = class Builder {
  constructor(nuxt) {
    this.nuxt = nuxt
    this.isStatic = false // Flag to know if the build is for a generated app
    this.options = nuxt.options

    // Fields that set on build
    this.compilers = []
    this.compilersWatching = []
    this.webpackDevMiddleware = null
    this.webpackHotMiddleware = null
    this.filesWatcher = null
    this.customFilesWatcher = null
    this.spinner = new ORA()

    // Mute stats on dev
    this.webpackStats = this.options.dev ? false : this.options.build.stats

    // Helper to resolve build paths
    this.relativeToBuild = (...args) =>
      relativeTo(this.options.buildDir, ...args)

    this._buildStatus = STATUS.INITIAL

    // Stop watching on nuxt.close()
    if (this.options.dev) {
      this.nuxt.hook('close', () => this.unwatch())
    }
    // else {
    // TODO: enable again when unsafe concern resolved.(common/options.js:42)
    // this.nuxt.hook('build:done', () => this.generateConfig())
    // }
  }

  get plugins() {
    return _.uniqBy(
      this.options.plugins.map((p, i) => {
        if (typeof p === 'string') p = { src: p }
        const pluginBaseName = basename(p.src, extname(p.src)).replace(
          /[^a-zA-Z?\d\s:]/g,
          ''
        )
        return {
          src: this.nuxt.resolveAlias(p.src),
          ssr: p.ssr !== false,
          name: 'nuxt_plugin_' + pluginBaseName + '_' + hash(p.src)
        }
      }),
      p => p.name
    )
  }

  forGenerate() {
    this.isStatic = true
  }

  async build() {
    // Avoid calling build() method multiple times when dev:true
    /* istanbul ignore if */
    if (this._buildStatus === STATUS.BUILD_DONE && this.options.dev) {
      return this
    }
    // If building
    /* istanbul ignore if */
    if (this._buildStatus === STATUS.BUILDING) {
      await waitFor(1000)
      return this.build()
    }
    this._buildStatus = STATUS.BUILDING

    this.spinner.start('Initializing builder')

    // Wait for nuxt ready
    await this.nuxt.ready()

    // Call before hook
    await this.nuxt.callHook('build:before', this, this.options.build)

    // Check if pages dir exists and warn if not
    this._nuxtPages = typeof this.options.build.createRoutes !== 'function'
    if (this._nuxtPages) {
      if (!existsSync(join(this.options.srcDir, this.options.dir.pages))) {
        let dir = this.options.srcDir
        if (existsSync(join(this.options.srcDir, '..', this.options.dir.pages))) {
          throw new Error(
            `No \`${this.options.dir.pages}\` directory found in ${dir}. Did you mean to run \`nuxt\` in the parent (\`../\`) directory?`
          )
        } else {
          throw new Error(
            `Couldn't find a \`${this.options.dir.pages}\` directory in ${dir}. Please create one under the project root`
          )
        }
      }
    }

    this.spinner.succeed('Builder ready')

    this.spinner.start(`Generating nuxt files...`)

    debug(`App root: ${this.options.srcDir}`)

    // Create .nuxt/, .nuxt/components and .nuxt/dist folders
    await remove(r(this.options.buildDir))
    await mkdirp(r(this.options.buildDir, 'components'))
    if (!this.options.dev) {
      await mkdirp(r(this.options.buildDir, 'dist'))
    }

    // Generate routes and interpret the template files
    await this.generateRoutesAndFiles()

    this.spinner.succeed('Files genrated')

    this.spinner.start('Compiling...')

    // Start webpack build
    await this.webpackBuild()

    // Flag to set that building is done
    this._buildStatus = STATUS.BUILD_DONE

    // Call done hook
    await this.nuxt.callHook('build:done', this)

    return this
  }

  getBabelOptions({ isServer }) {
    const options = _.clone(this.options.build.babel)

    if (typeof options.presets === 'function') {
      options.presets = options.presets({ isServer })
    }

    if (!options.babelrc && !options.presets) {
      options.presets = [
        [
          require.resolve('babel-preset-vue-app'),
          {
            targets: isServer ? { node: '8.0.0' } : { ie: 9, uglify: true }
          }
        ]
      ]
    }

    return options
  }

  getFileName(name) {
    let fileName = this.options.build.filenames[name]

    // Don't use hashes when watching
    // https://github.com/webpack/webpack/issues/1914#issuecomment-174171709
    if (this.options.dev) {
      fileName = fileName.replace(/\[(chunkhash|contenthash|hash)\]\./g, '')
    }

    return fileName
  }

  async generateRoutesAndFiles() {
    debug('Generating files...')
    // -- Templates --
    let templatesFiles = [
      'App.js',
      'client.js',
      'index.js',
      'middleware.js',
      'router.js',
      'server.js',
      'utils.js',
      'empty.js',
      'components/nuxt-error.vue',
      'components/nuxt-loading.vue',
      'components/nuxt-child.js',
      'components/nuxt-link.js',
      'components/nuxt.js',
      'components/no-ssr.js',
      'views/app.template.html',
      'views/error.html'
    ]
    const templateVars = {
      options: this.options,
      extensions: this.options.extensions
        .map(ext => ext.replace(/^\./, ''))
        .join('|'),
      messages: this.options.messages,
      uniqBy: _.uniqBy,
      isDev: this.options.dev,
      debug: this.options.debug,
      mode: this.options.mode,
      router: this.options.router,
      env: this.options.env,
      head: this.options.head,
      middleware: existsSync(join(this.options.srcDir, this.options.dir.middleware)),
      store: this.options.store,
      css: this.options.css,
      plugins: this.plugins,
      appPath: './App.js',
      ignorePrefix: this.options.ignorePrefix,
      layouts: Object.assign({}, this.options.layouts),
      loading:
        typeof this.options.loading === 'string'
          ? this.relativeToBuild(this.options.srcDir, this.options.loading)
          : this.options.loading,
      transition: this.options.transition,
      layoutTransition: this.options.layoutTransition,
      dir: this.options.dir,
      components: {
        ErrorPage: this.options.ErrorPage
          ? this.relativeToBuild(this.options.ErrorPage)
          : null
      }
    }

    // -- Layouts --
    if (existsSync(resolve(this.options.srcDir, this.options.dir.layouts))) {
      const layoutsFiles = await glob(`${this.options.dir.layouts}/**/*.{vue,js}`, {
        cwd: this.options.srcDir,
        ignore: this.options.ignore
      })
      let hasErrorLayout = false
      layoutsFiles.forEach(file => {
        let name = file
          .split('/')
          .slice(1)
          .join('/')
          .replace(/\.(vue|js)$/, '')
        if (name === 'error') {
          hasErrorLayout = true
          return
        }
        if (!templateVars.layouts[name] || /\.vue$/.test(file)) {
          templateVars.layouts[name] = this.relativeToBuild(
            this.options.srcDir,
            file
          )
        }
      })
      if (!templateVars.components.ErrorPage && hasErrorLayout) {
        templateVars.components.ErrorPage = this.relativeToBuild(
          this.options.srcDir,
          `${this.options.dir.layouts}/error.vue`
        )
      }
    }
    // If no default layout, create its folder and add the default folder
    if (!templateVars.layouts.default) {
      await mkdirp(r(this.options.buildDir, 'layouts'))
      templatesFiles.push('layouts/default.vue')
      templateVars.layouts.default = './layouts/default.vue'
    }

    // -- Routes --
    debug('Generating routes...')
    // If user defined a custom method to create routes
    if (this._nuxtPages) {
      // Use nuxt.js createRoutes bases on pages/
      const files = {}
      ;(await glob(`${this.options.dir.pages}/**/*.{vue,js}`, {
        cwd: this.options.srcDir,
        ignore: this.options.ignore
      })).forEach(f => {
        const key = f.replace(/\.(js|vue)$/, '')
        if (/\.vue$/.test(f) || !files[key]) {
          files[key] = f.replace(/(['|"])/g, '\\$1')
        }
      })
      templateVars.router.routes = createRoutes(
        Object.values(files),
        this.options.srcDir,
        this.options.dir.pages
      )
    } else {
      templateVars.router.routes = this.options.build.createRoutes(
        this.options.srcDir
      )
    }

    await this.nuxt.callHook(
      'build:extendRoutes',
      templateVars.router.routes,
      r
    )

    // router.extendRoutes method
    if (typeof this.options.router.extendRoutes === 'function') {
      // let the user extend the routes
      const extendedRoutes = this.options.router.extendRoutes(
        templateVars.router.routes,
        r
      )
      // Only overwrite routes when something is returned for backwards compatibility
      if (extendedRoutes !== undefined) {
        templateVars.router.routes = extendedRoutes
      }
    }

    // Make routes accessible for other modules and webpack configs
    this.routes = templateVars.router.routes

    // -- Store --
    // Add store if needed
    if (this.options.store) {
      templatesFiles.push('store.js')
    }

    // Resolve template files
    const customTemplateFiles = this.options.build.templates.map(
      t => t.dst || basename(t.src || t)
    )

    templatesFiles = templatesFiles
      .map(file => {
        // Skip if custom file was already provided in build.templates[]
        if (customTemplateFiles.indexOf(file) !== -1) {
          return
        }
        // Allow override templates using a file with same name in ${srcDir}/app
        const customPath = r(this.options.srcDir, 'app', file)
        const customFileExists = existsSync(customPath)

        return {
          src: customFileExists ? customPath : r(this.options.nuxtAppDir, file),
          dst: file,
          custom: customFileExists
        }
      })
      .filter(i => !!i)

    // -- Custom templates --
    // Add custom template files
    templatesFiles = templatesFiles.concat(
      this.options.build.templates.map(t => {
        return Object.assign(
          {
            src: r(this.options.srcDir, t.src || t),
            dst: t.dst || basename(t.src || t),
            custom: true
          },
          t
        )
      })
    )

    // -- Loading indicator --
    if (this.options.loadingIndicator.name) {
      const indicatorPath1 = resolve(
        this.options.nuxtAppDir,
        'views/loading',
        this.options.loadingIndicator.name + '.html'
      )
      const indicatorPath2 = this.nuxt.resolveAlias(
        this.options.loadingIndicator.name
      )
      const indicatorPath = existsSync(indicatorPath1)
        ? indicatorPath1
        : existsSync(indicatorPath2) ? indicatorPath2 : null
      if (indicatorPath) {
        templatesFiles.push({
          src: indicatorPath,
          dst: 'loading.html',
          options: this.options.loadingIndicator
        })
      } else {
        /* istanbul ignore next */
        // eslint-disable-next-line no-console
        console.error(
          `Could not fetch loading indicator: ${
            this.options.loadingIndicator.name
          }`
        )
      }
    }

    await this.nuxt.callHook('build:templates', {
      templatesFiles,
      templateVars,
      resolve: r
    })

    // Interpret and move template files to .nuxt/
    await Promise.all(
      templatesFiles.map(async ({ src, dst, options, custom }) => {
        // Add template to watchers
        this.options.build.watch.push(src)
        // Render template to dst
        const fileContent = await readFile(src, 'utf8')
        let content
        try {
          const template = _.template(fileContent, {
            imports: {
              serialize,
              hash,
              r,
              wp,
              wChunk,
              resolvePath: this.nuxt.resolvePath.bind(this.nuxt),
              resolveAlias: this.nuxt.resolveAlias.bind(this.nuxt),
              relativeToBuild: this.relativeToBuild
            }
          })
          content = template(
            Object.assign({}, templateVars, {
              options: options || {},
              custom,
              src,
              dst
            })
          )
        } catch (err) {
          /* istanbul ignore next */
          throw new Error(`Could not compile template ${src}: ${err.message}`)
        }
        const path = r(this.options.buildDir, dst)
        // Ensure parent dir exits
        await mkdirp(dirname(path))
        // Write file
        await writeFile(path, content, 'utf8')
      })
    )
  }

  async webpackBuild() {
    debug('Building files...')
    const compilersOptions = []

    // Client
    const clientConfig = clientWebpackConfig.call(this)
    compilersOptions.push(clientConfig)

    // Server
    let serverConfig = null
    if (this.options.build.ssr) {
      serverConfig = serverWebpackConfig.call(this)
      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 && !serverConfig.resolve.alias[p.name]) {
        // Alias to noop for ssr:false plugins
        serverConfig.resolve.alias[p.name] = p.ssr ? src : './empty.js'
      }
    })

    // Initialize shared FS and Cache
    const sharedFS = this.options.dev && new MFS()

    // Initialize compilers
    this.compilers = compilersOptions.map(compilersOption => {
      const compiler = webpack(compilersOption)
      // In dev, write files in memory FS
      if (sharedFS) {
        compiler.outputFileSystem = sharedFS
      }

      return compiler
    })

    // Start Builds
    await parallel(
      this.compilers,
      compiler =>
        new Promise(async (resolve, reject) => {
          const name = compiler.options.name
          await this.nuxt.callHook('build:compile', { name, compiler })

          // Resolve only when compiler emit done event
          compiler.hooks.done.tap('load-resources', async stats => {
            await this.nuxt.callHook('build:compiled', {
              name,
              compiler,
              stats
            })
            // Reload renderer if available
            this.nuxt.renderer.loadResources(sharedFS || fs)
            // Resolve on next tick
            process.nextTick(resolve)
          })
          // --- Dev Build ---
          if (this.options.dev) {
            // Client Build, watch is started by dev-middleware
            if (compiler.options.name === 'client') {
              return this.webpackDev(compiler)
            }
            // Server, build and watch for changes
            this.compilersWatching.push(
              compiler.watch(this.options.watchers.webpack, err => {
                /* istanbul ignore if */
                if (err) return reject(err)
              })
            )
            return
          }
          // --- Production Build ---
          compiler.run((err, stats) => {
            /* istanbul ignore if */
            if (err) {
              console.error(err) // eslint-disable-line no-console
              return reject(err)
            }

            /* istanbul ignore if */
            if (stats.hasErrors()) {
              return reject(new Error('Webpack build exited with errors'))
            }
          })
        })
    )
  }

  webpackDev(compiler) {
    debug('Adding webpack middleware...')

    // Create webpack dev middleware
    this.webpackDevMiddleware = promisify(
      webpackDevMiddleware(
        compiler,
        Object.assign(
          {
            publicPath: this.options.build.publicPath,
            stats: this.webpackStats,
            logLevel: 'silent',
            watchOptions: this.options.watchers.webpack
          },
          this.options.build.devMiddleware
        )
      )
    )

    this.webpackDevMiddleware.close = promisify(this.webpackDevMiddleware.close)

    this.webpackHotMiddleware = promisify(
      webpackHotMiddleware(
        compiler,
        Object.assign(
          {
            log: false,
            heartbeat: 10000
          },
          this.options.build.hotMiddleware
        )
      )
    )

    // Inject to renderer instance
    if (this.nuxt.renderer) {
      this.nuxt.renderer.webpackDevMiddleware = this.webpackDevMiddleware
      this.nuxt.renderer.webpackHotMiddleware = this.webpackHotMiddleware
    }

    // Start watching files
    this.watchFiles()
  }

  watchFiles() {
    const src = this.options.srcDir
    let patterns = [
      r(src, this.options.dir.layouts),
      r(src, this.options.dir.store),
      r(src, this.options.dir.middleware),
      r(src, `${this.options.dir.layouts}/*.{vue,js}`),
      r(src, `${this.options.dir.layouts}/**/*.{vue,js}`)
    ]
    if (this._nuxtPages) {
      patterns.push(
        r(src, this.options.dir.pages),
        r(src, `${this.options.dir.pages}/*.{vue,js}`),
        r(src, `${this.options.dir.pages}/**/*.{vue,js}`)
      )
    }
    patterns = _.map(patterns, p => upath.normalizeSafe(p))

    const options = Object.assign({}, this.options.watchers.chokidar, {
      ignoreInitial: true
    })
    /* istanbul ignore next */
    const refreshFiles = _.debounce(() => this.generateRoutesAndFiles(), 200)

    // Watch for src Files
    this.filesWatcher = chokidar
      .watch(patterns, options)
      .on('add', refreshFiles)
      .on('unlink', refreshFiles)

    // Watch for custom provided files
    let customPatterns = _.concat(
      this.options.build.watch,
      ..._.values(_.omit(this.options.build.styleResources, ['options']))
    )
    customPatterns = _.map(_.uniq(customPatterns), p =>
      upath.normalizeSafe(p)
    )
    this.customFilesWatcher = chokidar
      .watch(customPatterns, options)
      .on('change', refreshFiles)
  }

  async unwatch() {
    if (this.filesWatcher) {
      this.filesWatcher.close()
    }

    if (this.customFilesWatcher) {
      this.customFilesWatcher.close()
    }

    this.compilersWatching.forEach(watching => watching.close())

    // Stop webpack middleware
    await this.webpackDevMiddleware.close()
  }

  // TODO: remove ignore when generateConfig enabled again
  async generateConfig() /* istanbul ignore next */ {
    const config = resolve(this.options.buildDir, 'build.config.js')
    const options = _.omit(this.options, Options.unsafeKeys)
    await writeFile(
      config,
      `module.exports = ${JSON.stringify(options, null, '  ')}`,
      'utf8'
    )
  }
}

const STATUS = {
  INITIAL: 1,
  BUILD_DONE: 2,
  BUILDING: 3
}