expeditaea 1.0.0

package/packages/webpack/src/config/client.js

@@ -0,0 +1,221 @@
+import path from 'path'
+import querystring from 'querystring'
+import webpack from 'webpack'
+import HTMLPlugin from 'html-webpack-plugin'
+import BundleAnalyzer from 'webpack-bundle-analyzer'
+import OptimizeCSSAssetsPlugin from 'optimize-css-assets-webpack-plugin'
+import FriendlyErrorsWebpackPlugin from '@nuxt/friendly-errors-webpack-plugin'
+
+import CorsPlugin from '../plugins/vue/cors'
+import ModernModePlugin from '../plugins/vue/modern'
+import VueSSRClientPlugin from '../plugins/vue/client'
+import WebpackBaseConfig from './base'
+
+export default class WebpackClientConfig extends WebpackBaseConfig {
+  constructor (builder) {
+    super(builder)
+    this.name = 'client'
+    this.isServer = false
+    this.isModern = false
+  }
+
+  get devtool () {
+    if (!this.dev) {
+      return false
+    }
+    const scriptPolicy = this.getCspScriptPolicy()
+    const noUnsafeEval = scriptPolicy && !scriptPolicy.includes('\'unsafe-eval\'')
+    return noUnsafeEval
+      ? 'cheap-module-source-map'
+      : 'cheap-module-eval-source-map'
+  }
+
+  getCspScriptPolicy () {
+    const { csp } = this.buildContext.options.render
+    if (csp) {
+      const { policies = {} } = csp
+      return policies['script-src'] || policies['default-src'] || []
+    }
+  }
+
+  env () {
+    return Object.assign(
+      super.env(),
+      {
+        'process.env.VUE_ENV': JSON.stringify('client'),
+        'process.browser': true,
+        'process.client': true,
+        'process.server': false,
+        'process.modern': false
+      }
+    )
+  }
+
+  optimization () {
+    const optimization = super.optimization()
+    const { splitChunks } = optimization
+    const { cacheGroups } = splitChunks
+
+    // Small, known and common modules which are usually used project-wise
+    // Sum of them may not be more than 244 KiB
+    if (
+      this.buildContext.buildOptions.splitChunks.commons === true &&
+      cacheGroups.commons === undefined
+    ) {
+      cacheGroups.commons = {
+        test: /node_modules[\\/](vue|vue-loader|vue-router|vuex|vue-meta|core-js|@babel\/runtime|axios|webpack|setimmediate|timers-browserify|process|regenerator-runtime|cookie|js-cookie|is-buffer|dotprop|url-polyfill|@nuxt[\\/]ufo|ufo|nuxt\.js)[\\/]/,
+        chunks: 'all',
+        name: true,
+        priority: 10
+      }
+    }
+
+    return optimization
+  }
+
+  minimizer () {
+    const minimizer = super.minimizer()
+    const { optimizeCSS } = this.buildContext.buildOptions
+
+    // https://github.com/NMFR/optimize-css-assets-webpack-plugin
+    // https://github.com/webpack-contrib/mini-css-extract-plugin#minimizing-for-production
+    // TODO: Remove OptimizeCSSAssetsPlugin when upgrading to webpack 5
+    if (optimizeCSS) {
+      minimizer.push(new OptimizeCSSAssetsPlugin(Object.assign({}, optimizeCSS)))
+    }
+
+    return minimizer
+  }
+
+  alias () {
+    const aliases = super.alias()
+
+    for (const p of this.buildContext.plugins) {
+      if (!aliases[p.name]) {
+        // Do not load server-side plugins on client-side
+        aliases[p.name] = p.mode === 'server' ? './empty.js' : p.src
+      }
+    }
+
+    return aliases
+  }
+
+  plugins () {
+    const plugins = super.plugins()
+    const { buildOptions, options: { appTemplatePath, buildDir, modern, render } } = this.buildContext
+
+    // Generate output HTML for SSR
+    if (buildOptions.ssr) {
+      plugins.push(
+        new HTMLPlugin({
+          filename: '../server/index.ssr.html',
+          template: appTemplatePath,
+          minify: buildOptions.html.minify,
+          inject: false // Resources will be injected using bundleRenderer
+        })
+      )
+    }
+
+    plugins.push(
+      new HTMLPlugin({
+        filename: '../server/index.spa.html',
+        template: appTemplatePath,
+        minify: buildOptions.html.minify,
+        inject: true
+      }),
+      new VueSSRClientPlugin({
+        filename: `../server/${this.name}.manifest.json`
+      }),
+      new webpack.DefinePlugin(this.env())
+    )
+
+    if (this.dev) {
+      // TODO: webpackHotUpdate is not defined: https://github.com/webpack/webpack/issues/6693
+      plugins.push(new webpack.HotModuleReplacementPlugin())
+    }
+
+    // Webpack Bundle Analyzer
+    // https://github.com/webpack-contrib/webpack-bundle-analyzer
+    if (!this.dev && buildOptions.analyze) {
+      const statsDir = path.resolve(buildDir, 'stats')
+
+      plugins.push(new BundleAnalyzer.BundleAnalyzerPlugin(Object.assign({
+        analyzerMode: 'static',
+        defaultSizes: 'gzip',
+        generateStatsFile: true,
+        openAnalyzer: !buildOptions.quiet,
+        reportFilename: path.resolve(statsDir, `${this.name}.html`),
+        statsFilename: path.resolve(statsDir, `${this.name}.json`)
+      }, buildOptions.analyze)))
+    }
+
+    if (modern) {
+      const scriptPolicy = this.getCspScriptPolicy()
+      const noUnsafeInline = scriptPolicy && !scriptPolicy.includes('\'unsafe-inline\'')
+      plugins.push(new ModernModePlugin({
+        targetDir: path.resolve(buildDir, 'dist', 'client'),
+        isModernBuild: this.isModern,
+        noUnsafeInline
+      }))
+    }
+
+    if (render.crossorigin) {
+      plugins.push(new CorsPlugin({
+        crossorigin: render.crossorigin
+      }))
+    }
+
+    return plugins
+  }
+
+  config () {
+    const config = super.config()
+    const {
+      options: { router, buildDir },
+      buildOptions: { hotMiddleware, quiet, friendlyErrors }
+    } = this.buildContext
+
+    const { client = {} } = hotMiddleware || {}
+    const { ansiColors, overlayStyles, ...options } = client
+
+    const hotMiddlewareClientOptions = {
+      reload: true,
+      timeout: 30000,
+      ansiColors: JSON.stringify(ansiColors),
+      overlayStyles: JSON.stringify(overlayStyles),
+      path: `${router.base}/__webpack_hmr/${this.name}`.replace(/\/\//g, '/'),
+      ...options,
+      name: this.name
+    }
+
+    const hotMiddlewareClientOptionsStr = querystring.stringify(hotMiddlewareClientOptions)
+
+    // Entry points
+    config.entry = Object.assign({}, config.entry, {
+      app: [path.resolve(buildDir, 'client.js')]
+    })
+
+    // Add HMR support
+    if (this.dev) {
+      config.entry.app.unshift(
+        // https://github.com/webpack-contrib/webpack-hot-middleware/issues/53#issuecomment-162823945
+        this.resolveModule('eventsource-polyfill'),
+        // https://github.com/glenjamin/webpack-hot-middleware#config
+        `${this.resolveModule('webpack-hot-middleware/client')}?${hotMiddlewareClientOptionsStr}`
+      )
+    }
+
+    // Add friendly error plugin
+    if (this.dev && !quiet && friendlyErrors) {
+      config.plugins.push(
+        new FriendlyErrorsWebpackPlugin({
+          clearConsole: false,
+          reporter: 'consola',
+          logLevel: 'WARNING'
+        })
+      )
+    }
+
+    return config
+  }
+}

package/packages/webpack/src/config/index.js

@@ -0,0 +1,3 @@
+export { default as client } from './client'
+export { default as modern } from './modern'
+export { default as server } from './server'

package/packages/webpack/src/config/modern.js

@@ -0,0 +1,15 @@
+import WebpackClientConfig from './client'
+
+export default class WebpackModernConfig extends WebpackClientConfig {
+  constructor (...args) {
+    super(...args)
+    this.name = 'modern'
+    this.isModern = true
+  }
+
+  env () {
+    return Object.assign(super.env(), {
+      'process.modern': true
+    })
+  }
+}

package/packages/webpack/src/config/server.js

@@ -0,0 +1,147 @@
+import path from 'path'
+import fs from 'fs'
+import { DefinePlugin, ProvidePlugin } from 'webpack'
+import nodeExternals from 'webpack-node-externals'
+
+import VueSSRServerPlugin from '../plugins/vue/server'
+
+import WebpackBaseConfig from './base'
+
+const nativeFileExtensions = [
+  '.json',
+  '.js'
+]
+
+export default class WebpackServerConfig extends WebpackBaseConfig {
+  constructor (...args) {
+    super(...args)
+    this.name = 'server'
+    this.isServer = true
+  }
+
+  get devtool () {
+    return 'cheap-module-source-map'
+  }
+
+  get externalsAllowlist () {
+    return [
+      this.isNonNativeImport.bind(this),
+      ...this.normalizeTranspile()
+    ]
+  }
+
+  /**
+   * files *not* ending on js|json should be processed by webpack
+   *
+   * this might generate false-positives for imports like
+   * - "someFile.umd" (actually requiring someFile.umd.js)
+   * - "some.folder" (some.folder being a directory containing a package.json)
+   */
+  isNonNativeImport (modulePath) {
+    const extname = path.extname(modulePath)
+    return extname !== '' && !nativeFileExtensions.includes(extname)
+  }
+
+  env () {
+    return Object.assign(
+      super.env(),
+      {
+        'process.env.VUE_ENV': JSON.stringify('server'),
+        'process.browser': false,
+        'process.client': false,
+        'process.server': true,
+        'process.modern': false
+      }
+    )
+  }
+
+  optimization () {
+    const { _minifyServer } = this.buildContext.buildOptions
+
+    return {
+      splitChunks: false,
+      minimizer: _minifyServer ? this.minimizer() : []
+    }
+  }
+
+  resolve () {
+    const resolveConfig = super.resolve()
+
+    resolveConfig.resolve.mainFields = ['main', 'module']
+
+    return resolveConfig
+  }
+
+  alias () {
+    const aliases = super.alias()
+
+    for (const p of this.buildContext.plugins) {
+      if (!aliases[p.name]) {
+        // Do not load client-side plugins on server-side
+        aliases[p.name] = p.mode === 'client' ? './empty.js' : p.src
+      }
+    }
+
+    return aliases
+  }
+
+  plugins () {
+    const plugins = super.plugins()
+    plugins.push(
+      new VueSSRServerPlugin({ filename: `${this.name}.manifest.json` }),
+      new DefinePlugin(this.env())
+    )
+
+    const { serverURLPolyfill } = this.buildContext.options.build
+
+    if (serverURLPolyfill) {
+      plugins.push(new ProvidePlugin({
+        URL: [serverURLPolyfill, 'URL'],
+        URLSearchParams: [serverURLPolyfill, 'URLSearchParams']
+      }))
+    }
+
+    return plugins
+  }
+
+  config () {
+    const config = super.config()
+
+    Object.assign(config, {
+      target: 'node',
+      node: false,
+      entry: Object.assign({}, config.entry, {
+        app: [path.resolve(this.buildContext.options.buildDir, 'server.js')]
+      }),
+      output: Object.assign({}, config.output, {
+        filename: 'server.js',
+        chunkFilename: '[name].js',
+        libraryTarget: 'commonjs2'
+      }),
+      performance: {
+        hints: false,
+        maxEntrypointSize: Infinity,
+        maxAssetSize: Infinity
+      },
+      externals: [].concat(config.externals || [])
+    })
+
+    // https://webpack.js.org/configuration/externals/#externals
+    // https://github.com/liady/webpack-node-externals
+    // https://vue-loader.vuejs.org/migrating.html#ssr-externals
+    if (!this.buildContext.buildOptions.standalone) {
+      this.buildContext.options.modulesDir.forEach((dir) => {
+        if (fs.existsSync(dir)) {
+          config.externals.push(
+            nodeExternals({
+              allowlist: this.externalsAllowlist,
+              modulesDir: dir
+            })
+          )
+        }
+      })
+    }
+
+    return config
+  }
+}

package/packages/webpack/src/index.js

@@ -0,0 +1 @@
+export { WebpackBundler as BundleBuilder } from './builder'

package/packages/webpack/src/plugins/vue/client.js

@@ -0,0 +1,111 @@
+/**
+ * This file is based on Vue.js (MIT) webpack plugins
+ * https://github.com/vuejs/vue/blob/dev/src/server/webpack-plugin/client.js
+ */
+
+import hash from 'hash-sum'
+import { uniq } from 'lodash'
+
+import { isJS, isCSS } from './util'
+
+export default class VueSSRClientPlugin {
+  constructor (options = {}) {
+    this.options = Object.assign({
+      filename: null
+    }, options)
+  }
+
+  apply (compiler) {
+    compiler.hooks.emit.tapAsync('vue-client-plugin', (compilation, cb) => {
+      const stats = compilation.getStats().toJson()
+
+      const allFiles = uniq(stats.assets
+        .map(a => a.name))
+
+      const initialFiles = uniq(Object.keys(stats.entrypoints)
+        .map(name => stats.entrypoints[name].assets)
+        .reduce((assets, all) => all.concat(assets), [])
+        .filter(file => isJS(file) || isCSS(file)))
+
+      const asyncFiles = allFiles
+        .filter(file => isJS(file) || isCSS(file))
+        .filter(file => !initialFiles.includes(file))
+
+      const assetsMapping = {}
+      stats.assets
+        .filter(({ name }) => isJS(name))
+        .forEach(({ name, chunkNames }) => {
+          const componentHash = hash(chunkNames.join('|'))
+          if (!assetsMapping[componentHash]) {
+            assetsMapping[componentHash] = []
+          }
+          assetsMapping[componentHash].push(name)
+        })
+
+      const manifest = {
+        publicPath: stats.publicPath,
+        all: allFiles,
+        initial: initialFiles,
+        async: asyncFiles,
+        modules: { /* [identifier: string]: Array<index: number> */ },
+        assetsMapping
+      }
+
+      const { entrypoints, namedChunkGroups } = stats
+      const assetModules = stats.modules.filter(m => m.assets.length)
+      const fileToIndex = file => manifest.all.indexOf(file)
+      stats.modules.forEach((m) => {
+        // Ignore modules duplicated in multiple chunks
+        if (m.chunks.length === 1) {
+          const [cid] = m.chunks
+          const chunk = stats.chunks.find(c => c.id === cid)
+          if (!chunk || !chunk.files) {
+            return
+          }
+          const id = m.identifier.replace(/\s\w+$/, '') // remove appended hash
+          const filesSet = new Set(chunk.files.map(fileToIndex))
+
+          for (const chunkName of chunk.names) {
+            if (!entrypoints[chunkName]) {
+              const chunkGroup = namedChunkGroups[chunkName]
+              if (chunkGroup) {
+                for (const asset of chunkGroup.assets) {
+                  filesSet.add(fileToIndex(asset))
+                }
+              }
+            }
+          }
+
+          const files = Array.from(filesSet)
+          manifest.modules[hash(id)] = files
+
+          // In production mode, modules may be concatenated by scope hoisting
+          // Include ConcatenatedModule for not losing module-component mapping
+          if (Array.isArray(m.modules)) {
+            for (const concatenatedModule of m.modules) {
+              const id = hash(concatenatedModule.identifier.replace(/\s\w+$/, ''))
+              if (!manifest.modules[id]) {
+                manifest.modules[id] = files
+              }
+            }
+          }
+
+          // Find all asset modules associated with the same chunk
+          assetModules.forEach((m) => {
+            if (m.chunks.includes(cid)) {
+              files.push.apply(files, m.assets.map(fileToIndex))
+            }
+          })
+        }
+      })
+
+      const src = JSON.stringify(manifest, null, 2)
+
+      compilation.assets[this.options.filename] = {
+        source: () => src,
+        size: () => src.length
+      }
+      cb()
+    })
+  }
+}

package/packages/webpack/src/plugins/vue/cors.js

@@ -0,0 +1,25 @@
+import HtmlWebpackPlugin from 'html-webpack-plugin'
+
+export default class CorsPlugin {
+  constructor ({ crossorigin }) {
+    this.crossorigin = crossorigin
+  }
+
+  apply (compiler) {
+    const ID = 'vue-cors-plugin'
+    compiler.hooks.compilation.tap(ID, (compilation) => {
+      HtmlWebpackPlugin.getHooks(compilation).alterAssetTagGroups.tap(ID, (data) => {
+        if (!this.crossorigin) {
+          return
+        }
+        [...data.headTags, ...data.bodyTags].forEach((tag) => {
+          if (['script', 'link'].includes(tag.tagName)) {
+            if (tag.attributes) {
+              tag.attributes.crossorigin = this.crossorigin
+            }
+          }
+        })
+      })
+    })
+  }
+}

package/packages/webpack/src/plugins/vue/modern.js

@@ -0,0 +1,121 @@
+/*
+* This file is based on @vue/cli-service (MIT) ModernModePlugin
+* https://github.com/vuejs/vue-cli/blob/dev/packages/@vue/cli-service/lib/webpack/ModernModePlugin.js
+*/
+
+import EventEmitter from 'events'
+import HtmlWebpackPlugin from 'html-webpack-plugin'
+import { safariNoModuleFix } from '@nuxt/utils'
+
+const legacyTemplateTags = {}
+const legacyTemplateWatcher = new EventEmitter()
+
+export default class ModernModePlugin {
+  constructor ({ targetDir, isModernBuild, noUnsafeInline }) {
+    this.targetDir = targetDir
+    this.isModernBuild = isModernBuild
+    this.noUnsafeInline = noUnsafeInline
+  }
+
+  apply (compiler) {
+    if (!this.isModernBuild) {
+      this.applyLegacy(compiler)
+    } else {
+      this.applyModern(compiler)
+    }
+  }
+
+  getLegacyTemplateTags (name) {
+    return new Promise((resolve) => {
+      const tags = legacyTemplateTags[name]
+      if (tags) {
+        return resolve(tags)
+      }
+      return legacyTemplateWatcher.once(name, () => {
+        const tags = legacyTemplateTags[name]
+        return tags && resolve(tags)
+      })
+    })
+  }
+
+  applyLegacy (compiler) {
+    const ID = 'nuxt-legacy-bundle'
+    compiler.hooks.compilation.tap(ID, (compilation) => {
+      HtmlWebpackPlugin.getHooks(compilation).alterAssetTagGroups.tap(ID, (data) => {
+        HtmlWebpackPlugin.getHooks(compilation).afterEmit.tap(ID, ({ outputName }) => {
+          // get stats, write to disk
+          legacyTemplateTags[data.plugin.options.filename] = data.bodyTags
+          legacyTemplateWatcher.emit(outputName)
+        })
+        return data
+      })
+    })
+  }
+
+  applyModern (compiler) {
+    const ID = 'nuxt-modern-bundle'
+    compiler.hooks.compilation.tap(ID, (compilation) => {
+      HtmlWebpackPlugin.getHooks(compilation).alterAssetTagGroups.tapPromise(ID, async (data) => {
+        // use <script type="module"> for modern assets
+        data.bodyTags.forEach((tag) => {
+          if (tag.tagName === 'script' && tag.attributes) {
+            tag.attributes.type = 'module'
+          }
+        })
+
+        // use <link rel="modulepreload"> instead of <link rel="preload">
+        // for modern assets
+        data.headTags.forEach((tag) => {
+          if (tag.tagName === 'link' &&
+              tag.attributes.rel === 'preload' &&
+              tag.attributes.as === 'script') {
+            tag.attributes.rel = 'modulepreload'
+          }
+        })
+
+        // inject links for legacy assets as <script nomodule>
+        const fileName = data.plugin.options.filename
+        const legacyScriptTags = (await this.getLegacyTemplateTags(fileName))
+          .filter(a => a.tagName === 'script' && a.attributes)
+
+        for (const a of legacyScriptTags) {
+          a.attributes.nomodule = true
+          data.bodyTags.push(a)
+        }
+
+        if (this.noUnsafeInline) {
+          // inject the fix as an external script
+          const safariFixFilename = 'safari-nomodule-fix.js'
+          const safariFixPath = legacyScriptTags[0].attributes.src
+            .split('/')
+            .slice(0, -1)
+            .concat([safariFixFilename])
+            .join('/')
+
+          compilation.assets[safariFixFilename] = {
+            source: () => Buffer.from(safariNoModuleFix),
+            size: () => Buffer.byteLength(safariNoModuleFix)
+          }
+          data.bodyTags.push({
+            tagName: 'script',
+            closeTag: true,
+            attributes: {
+              src: safariFixPath
+            }
+          })
+        } else {
+          // inject Safari 10 nomodule fix
+          data.bodyTags.push({
+            tagName: 'script',
+            closeTag: true,
+            innerHTML: safariNoModuleFix
+          })
+        }
+
+        delete legacyTemplateTags[fileName]
+
+        return data
+      })
+    })
+  }
+}