vue 2.6.13 → 2.7.0-alpha.2

package/src/server/template-renderer/index.js

@@ -1,277 +0,0 @@
-/* @flow */
-
-const path = require('path')
-const serialize = require('serialize-javascript')
-
-import { isJS, isCSS } from '../util'
-import TemplateStream from './template-stream'
-import { parseTemplate } from './parse-template'
-import { createMapper } from './create-async-file-mapper'
-import type { ParsedTemplate } from './parse-template'
-import type { AsyncFileMapper } from './create-async-file-mapper'
-
-type TemplateRendererOptions = {
-  template?: string | (content: string, context: any) => string;
-  inject?: boolean;
-  clientManifest?: ClientManifest;
-  shouldPreload?: (file: string, type: string) => boolean;
-  shouldPrefetch?: (file: string, type: string) => boolean;
-  serializer?: Function;
-};
-
-export type ClientManifest = {
-  publicPath: string;
-  all: Array<string>;
-  initial: Array<string>;
-  async: Array<string>;
-  modules: {
-    [id: string]: Array<number>;
-  },
-  hasNoCssVersion?: {
-    [file: string]: boolean;
-  }
-};
-
-type Resource = {
-  file: string;
-  extension: string;
-  fileWithoutQuery: string;
-  asType: string;
-};
-
-export default class TemplateRenderer {
-  options: TemplateRendererOptions;
-  inject: boolean;
-  parsedTemplate: ParsedTemplate | Function | null;
-  publicPath: string;
-  clientManifest: ClientManifest;
-  preloadFiles: Array<Resource>;
-  prefetchFiles: Array<Resource>;
-  mapFiles: AsyncFileMapper;
-  serialize: Function;
-
-  constructor (options: TemplateRendererOptions) {
-    this.options = options
-    this.inject = options.inject !== false
-    // if no template option is provided, the renderer is created
-    // as a utility object for rendering assets like preload links and scripts.
-    
-    const { template } = options
-    this.parsedTemplate = template
-      ? typeof template === 'string'
-        ? parseTemplate(template)
-        : template
-      : null
-
-    // function used to serialize initial state JSON
-    this.serialize = options.serializer || (state => {
-      return serialize(state, { isJSON: true })
-    })
-
-    // extra functionality with client manifest
-    if (options.clientManifest) {
-      const clientManifest = this.clientManifest = options.clientManifest
-      // ensure publicPath ends with /
-      this.publicPath = clientManifest.publicPath === ''
-        ? ''
-        : clientManifest.publicPath.replace(/([^\/])$/, '$1/')
-      // preload/prefetch directives
-      this.preloadFiles = (clientManifest.initial || []).map(normalizeFile)
-      this.prefetchFiles = (clientManifest.async || []).map(normalizeFile)
-      // initial async chunk mapping
-      this.mapFiles = createMapper(clientManifest)
-    }
-  }
-
-  bindRenderFns (context: Object) {
-    const renderer: any = this
-    ;['ResourceHints', 'State', 'Scripts', 'Styles'].forEach(type => {
-      context[`render${type}`] = renderer[`render${type}`].bind(renderer, context)
-    })
-    // also expose getPreloadFiles, useful for HTTP/2 push
-    context.getPreloadFiles = renderer.getPreloadFiles.bind(renderer, context)
-  }
-
-  // render synchronously given rendered app content and render context
-  render (content: string, context: ?Object): string | Promise<string> {
-    const template = this.parsedTemplate
-    if (!template) {
-      throw new Error('render cannot be called without a template.')
-    }
-    context = context || {}
-
-    if (typeof template === 'function') {
-      return template(content, context)
-    }
-
-    if (this.inject) {
-      return (
-        template.head(context) +
-        (context.head || '') +
-        this.renderResourceHints(context) +
-        this.renderStyles(context) +
-        template.neck(context) +
-        content +
-        this.renderState(context) +
-        this.renderScripts(context) +
-        template.tail(context)
-      )
-    } else {
-      return (
-        template.head(context) +
-        template.neck(context) +
-        content +
-        template.tail(context)
-      )
-    }
-  }
-
-  renderStyles (context: Object): string {
-    const initial = this.preloadFiles || []
-    const async = this.getUsedAsyncFiles(context) || []
-    const cssFiles = initial.concat(async).filter(({ file }) => isCSS(file))
-    return (
-      // render links for css files
-      (cssFiles.length
-        ? cssFiles.map(({ file }) => `<link rel="stylesheet" href="${this.publicPath}${file}">`).join('')
-        : '') +
-      // context.styles is a getter exposed by vue-style-loader which contains
-      // the inline component styles collected during SSR
-      (context.styles || '')
-    )
-  }
-
-  renderResourceHints (context: Object): string {
-    return this.renderPreloadLinks(context) + this.renderPrefetchLinks(context)
-  }
-
-  getPreloadFiles (context: Object): Array<Resource> {
-    const usedAsyncFiles = this.getUsedAsyncFiles(context)
-    if (this.preloadFiles || usedAsyncFiles) {
-      return (this.preloadFiles || []).concat(usedAsyncFiles || [])
-    } else {
-      return []
-    }
-  }
-
-  renderPreloadLinks (context: Object): string {
-    const files = this.getPreloadFiles(context)
-    const shouldPreload = this.options.shouldPreload
-    if (files.length) {
-      return files.map(({ file, extension, fileWithoutQuery, asType }) => {
-        let extra = ''
-        // by default, we only preload scripts or css
-        if (!shouldPreload && asType !== 'script' && asType !== 'style') {
-          return ''
-        }
-        // user wants to explicitly control what to preload
-        if (shouldPreload && !shouldPreload(fileWithoutQuery, asType)) {
-          return ''
-        }
-        if (asType === 'font') {
-          extra = ` type="font/${extension}" crossorigin`
-        }
-        return `<link rel="preload" href="${
-          this.publicPath}${file
-        }"${
-          asType !== '' ? ` as="${asType}"` : ''
-        }${
-          extra
-        }>`
-      }).join('')
-    } else {
-      return ''
-    }
-  }
-
-  renderPrefetchLinks (context: Object): string {
-    const shouldPrefetch = this.options.shouldPrefetch
-    if (this.prefetchFiles) {
-      const usedAsyncFiles = this.getUsedAsyncFiles(context)
-      const alreadyRendered = file => {
-        return usedAsyncFiles && usedAsyncFiles.some(f => f.file === file)
-      }
-      return this.prefetchFiles.map(({ file, fileWithoutQuery, asType }) => {
-        if (shouldPrefetch && !shouldPrefetch(fileWithoutQuery, asType)) {
-          return ''
-        }
-        if (alreadyRendered(file)) {
-          return ''
-        }
-        return `<link rel="prefetch" href="${this.publicPath}${file}">`
-      }).join('')
-    } else {
-      return ''
-    }
-  }
-
-  renderState (context: Object, options?: Object): string {
-    const {
-      contextKey = 'state',
-      windowKey = '__INITIAL_STATE__'
-    } = options || {}
-    const state = this.serialize(context[contextKey])
-    const autoRemove = process.env.NODE_ENV === 'production'
-      ? ';(function(){var s;(s=document.currentScript||document.scripts[document.scripts.length-1]).parentNode.removeChild(s);}());'
-      : ''
-    const nonceAttr = context.nonce ? ` nonce="${context.nonce}"` : ''
-    return context[contextKey]
-      ? `<script${nonceAttr}>window.${windowKey}=${state}${autoRemove}</script>`
-      : ''
-  }
-
-  renderScripts (context: Object): string {
-    if (this.clientManifest) {
-      const initial = this.preloadFiles.filter(({ file }) => isJS(file))
-      const async = (this.getUsedAsyncFiles(context) || []).filter(({ file }) => isJS(file))
-      const needed = [initial[0]].concat(async, initial.slice(1))
-      return needed.map(({ file }) => {
-        return `<script src="${this.publicPath}${file}" defer></script>`
-      }).join('')
-    } else {
-      return ''
-    }
-  }
-
-  getUsedAsyncFiles (context: Object): ?Array<Resource> {
-    if (!context._mappedFiles && context._registeredComponents && this.mapFiles) {
-      const registered = Array.from(context._registeredComponents)
-      context._mappedFiles = this.mapFiles(registered).map(normalizeFile)
-    }
-    return context._mappedFiles
-  }
-
-  // create a transform stream
-  createStream (context: ?Object): TemplateStream {
-    if (!this.parsedTemplate) {
-      throw new Error('createStream cannot be called without a template.')
-    }
-    return new TemplateStream(this, this.parsedTemplate, context || {})
-  }
-}
-
-function normalizeFile (file: string): Resource {
-  const withoutQuery = file.replace(/\?.*/, '')
-  const extension = path.extname(withoutQuery).slice(1)
-  return {
-    file,
-    extension,
-    fileWithoutQuery: withoutQuery,
-    asType: getPreloadType(extension)
-  }
-}
-
-function getPreloadType (ext: string): string {
-  if (ext === 'js') {
-    return 'script'
-  } else if (ext === 'css') {
-    return 'style'
-  } else if (/jpe?g|png|svg|gif|webp|ico/.test(ext)) {
-    return 'image'
-  } else if (/woff2?|ttf|otf|eot/.test(ext)) {
-    return 'font'
-  } else {
-    // not exhausting all possibilities here, but above covers common cases
-    return ''
-  }
-}

package/src/server/template-renderer/parse-template.js

@@ -1,42 +0,0 @@
-/* @flow */
-
-const compile = require('lodash.template')
-const compileOptions = {
-  escape: /{{([^{][\s\S]+?[^}])}}/g,
-  interpolate: /{{{([\s\S]+?)}}}/g
-}
-
-export type ParsedTemplate = {
-  head: (data: any) => string;
-  neck: (data: any) => string;
-  tail: (data: any) => string;
-};
-
-export function parseTemplate (
-  template: string,
-  contentPlaceholder?: string = '<!--vue-ssr-outlet-->'
-): ParsedTemplate {
-  if (typeof template === 'object') {
-    return template
-  }
-
-  let i = template.indexOf('</head>')
-  const j = template.indexOf(contentPlaceholder)
-
-  if (j < 0) {
-    throw new Error(`Content placeholder not found in template.`)
-  }
-
-  if (i < 0) {
-    i = template.indexOf('<body>')
-    if (i < 0) {
-      i = j
-    }
-  }
-
-  return {
-    head: compile(template.slice(0, i), compileOptions),
-    neck: compile(template.slice(i, j), compileOptions),
-    tail: compile(template.slice(j + contentPlaceholder.length), compileOptions)
-  }
-}

package/src/server/template-renderer/template-stream.js

@@ -1,82 +0,0 @@
-/* @flow */
-
-const Transform = require('stream').Transform
-import type TemplateRenderer from './index'
-import type { ParsedTemplate } from './parse-template'
-
-export default class TemplateStream extends Transform {
-  started: boolean;
-  renderer: TemplateRenderer;
-  template: ParsedTemplate;
-  context: Object;
-  inject: boolean;
-
-  constructor (
-    renderer: TemplateRenderer,
-    template: ParsedTemplate,
-    context: Object
-  ) {
-    super()
-    this.started = false
-    this.renderer = renderer
-    this.template = template
-    this.context = context || {}
-    this.inject = renderer.inject
-  }
-
-  _transform (data: Buffer | string, encoding: string, done: Function) {
-    if (!this.started) {
-      this.emit('beforeStart')
-      this.start()
-    }
-    this.push(data)
-    done()
-  }
-
-  start () {
-    this.started = true
-    this.push(this.template.head(this.context))
-
-    if (this.inject) {
-      // inline server-rendered head meta information
-      if (this.context.head) {
-        this.push(this.context.head)
-      }
-
-      // inline preload/prefetch directives for initial/async chunks
-      const links = this.renderer.renderResourceHints(this.context)
-      if (links) {
-        this.push(links)
-      }
-
-      // CSS files and inline server-rendered CSS collected by vue-style-loader
-      const styles = this.renderer.renderStyles(this.context)
-      if (styles) {
-        this.push(styles)
-      }
-    }
-
-    this.push(this.template.neck(this.context))
-  }
-
-  _flush (done: Function) {
-    this.emit('beforeEnd')
-
-    if (this.inject) {
-      // inline initial store state
-      const state = this.renderer.renderState(this.context)
-      if (state) {
-        this.push(state)
-      }
-
-      // embed scripts needed
-      const scripts = this.renderer.renderScripts(this.context)
-      if (scripts) {
-        this.push(scripts)
-      }
-    }
-
-    this.push(this.template.tail(this.context))
-    done()
-  }
-}

package/src/server/util.js

@@ -1,18 +0,0 @@
-/* @flow */
-
-export const isJS = (file: string): boolean => /\.js(\?[^.]+)?$/.test(file)
-
-export const isCSS = (file: string): boolean => /\.css(\?[^.]+)?$/.test(file)
-
-export function createPromiseCallback () {
-  let resolve, reject
-  const promise: Promise<string> = new Promise((_resolve, _reject) => {
-    resolve = _resolve
-    reject = _reject
-  })
-  const cb = (err: Error, res?: string) => {
-    if (err) return reject(err)
-    resolve(res || '')
-  }
-  return { promise, cb }
-}

package/src/server/webpack-plugin/client.js

@@ -1,65 +0,0 @@
-const hash = require('hash-sum')
-const uniq = require('lodash.uniq')
-import { isJS, isCSS, onEmit } from './util'
-
-export default class VueSSRClientPlugin {
-  constructor (options = {}) {
-    this.options = Object.assign({
-      filename: 'vue-ssr-client-manifest.json'
-    }, options)
-  }
-
-  apply (compiler) {
-    onEmit(compiler, '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.indexOf(file) < 0)
-
-      const manifest = {
-        publicPath: stats.publicPath,
-        all: allFiles,
-        initial: initialFiles,
-        async: asyncFiles,
-        modules: { /* [identifier: string]: Array<index: number> */ }
-      }
-
-      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[0]
-          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 files = manifest.modules[hash(id)] = chunk.files.map(fileToIndex)
-          // find all asset modules associated with the same chunk
-          assetModules.forEach(m => {
-            if (m.chunks.some(id => id === cid)) {
-              files.push.apply(files, m.assets.map(fileToIndex))
-            }
-          })
-        }
-      })
-
-      const json = JSON.stringify(manifest, null, 2)
-      compilation.assets[this.options.filename] = {
-        source: () => json,
-        size: () => json.length
-      }
-      cb()
-    })
-  }
-}

package/src/server/webpack-plugin/server.js

@@ -1,66 +0,0 @@
-import { validate, isJS, onEmit } from './util'
-
-export default class VueSSRServerPlugin {
-  constructor (options = {}) {
-    this.options = Object.assign({
-      filename: 'vue-ssr-server-bundle.json'
-    }, options)
-  }
-
-  apply (compiler) {
-    validate(compiler)
-
-    onEmit(compiler, 'vue-server-plugin', (compilation, cb) => {
-      const stats = compilation.getStats().toJson()
-      const entryName = Object.keys(stats.entrypoints)[0]
-      const entryInfo = stats.entrypoints[entryName]
-
-      if (!entryInfo) {
-        // #5553
-        return cb()
-      }
-
-      const entryAssets = entryInfo.assets.filter(isJS)
-
-      if (entryAssets.length > 1) {
-        throw new Error(
-          `Server-side bundle should have one single entry file. ` +
-          `Avoid using CommonsChunkPlugin in the server config.`
-        )
-      }
-
-      const entry = entryAssets[0]
-      if (!entry || typeof entry !== 'string') {
-        throw new Error(
-          `Entry "${entryName}" not found. Did you specify the correct entry option?`
-        )
-      }
-
-      const bundle = {
-        entry,
-        files: {},
-        maps: {}
-      }
-
-      stats.assets.forEach(asset => {
-        if (isJS(asset.name)) {
-          bundle.files[asset.name] = compilation.assets[asset.name].source()
-        } else if (asset.name.match(/\.js\.map$/)) {
-          bundle.maps[asset.name.replace(/\.map$/, '')] = JSON.parse(compilation.assets[asset.name].source())
-        }
-        // do not emit anything else for server
-        delete compilation.assets[asset.name]
-      })
-
-      const json = JSON.stringify(bundle, null, 2)
-      const filename = this.options.filename
-
-      compilation.assets[filename] = {
-        source: () => json,
-        size: () => json.length
-      }
-
-      cb()
-    })
-  }
-}

package/src/server/webpack-plugin/util.js

@@ -1,34 +0,0 @@
-const { red, yellow } = require('chalk')
-
-const prefix = `[vue-server-renderer-webpack-plugin]`
-const warn = exports.warn = msg => console.error(red(`${prefix} ${msg}\n`))
-const tip = exports.tip = msg => console.log(yellow(`${prefix} ${msg}\n`))
-
-export const validate = compiler => {
-  if (compiler.options.target !== 'node') {
-    warn('webpack config `target` should be "node".')
-  }
-
-  if (compiler.options.output && compiler.options.output.libraryTarget !== 'commonjs2') {
-    warn('webpack config `output.libraryTarget` should be "commonjs2".')
-  }
-
-  if (!compiler.options.externals) {
-    tip(
-      'It is recommended to externalize dependencies in the server build for ' +
-      'better build performance.'
-    )
-  }
-}
-
-export const onEmit = (compiler, name, hook) => {
-  if (compiler.hooks) {
-    // Webpack >= 4.0.0
-    compiler.hooks.emit.tapAsync(name, hook)
-  } else {
-    // Webpack < 4.0.0
-    compiler.plugin('emit', hook)
-  }
-}
-
-export { isJS, isCSS } from '../util'

package/src/server/write.js

@@ -1,50 +0,0 @@
-/* @flow */
-
-const MAX_STACK_DEPTH = 800
-const noop = _ => _
-
-const defer = typeof process !== 'undefined' && process.nextTick
-  ? process.nextTick
-  : typeof Promise !== 'undefined'
-    ? fn => Promise.resolve().then(fn)
-    : typeof setTimeout !== 'undefined'
-      ? setTimeout
-      : noop
-
-if (defer === noop) {
-  throw new Error(
-    'Your JavaScript runtime does not support any asynchronous primitives ' +
-    'that are required by vue-server-renderer. Please use a polyfill for ' +
-    'either Promise or setTimeout.'
-  )
-}
-
-export function createWriteFunction (
-  write: (text: string, next: Function) => boolean,
-  onError: Function
-): Function {
-  let stackDepth = 0
-  const cachedWrite = (text, next) => {
-    if (text && cachedWrite.caching) {
-      cachedWrite.cacheBuffer[cachedWrite.cacheBuffer.length - 1] += text
-    }
-    const waitForNext = write(text, next)
-    if (waitForNext !== true) {
-      if (stackDepth >= MAX_STACK_DEPTH) {
-        defer(() => {
-          try { next() } catch (e) {
-            onError(e)
-          }
-        })
-      } else {
-        stackDepth++
-        next()
-        stackDepth--
-      }
-    }
-  }
-  cachedWrite.caching = false
-  cachedWrite.cacheBuffer = []
-  cachedWrite.componentBuffer = []
-  return cachedWrite
-}