Nuxt/lib/renderer.js

324 lines
10 KiB
JavaScript
Raw Normal View History

2017-06-11 14:17:36 +00:00
import ansiHTML from 'ansi-html'
import serialize from 'serialize-javascript'
import generateETag from 'etag'
import fresh from 'fresh'
2017-06-13 17:58:04 +00:00
import Tapable from 'tappable'
import pify from 'pify'
import serveStatic from 'serve-static'
import compression from 'compression'
import _ from 'lodash'
import { resolve, join } from 'path'
import fs from 'fs-extra'
import { createBundleRenderer } from 'vue-server-renderer'
2017-06-12 20:32:34 +00:00
import { getContext, setAnsiColors, encodeHtml } from './utils'
2017-06-11 14:17:36 +00:00
const debug = require('debug')('nuxt:render')
debug.color = 4 // Force blue color
setAnsiColors(ansiHTML)
let jsdom = null
const parseTemplate = templateStr => _.template(templateStr, {
interpolate: /{{([\s\S]+?)}}/g
})
2017-06-11 14:17:36 +00:00
export default class Renderer extends Tapable {
constructor (nuxt) {
super()
this.nuxt = nuxt
this.options = nuxt.options
// Will be loaded by createRenderer
this.bundleRenderer = null
this.renderToStream = null
this.renderToString = null
if (nuxt.initialized) {
// If nuxt already initialized
this._init = this.init().catch(this.nuxt.errorHandler)
} else {
// Wait for hook
this.nuxt.plugin('init', this.init.bind(this))
}
}
async init () {
if (this._init) {
return this._init
}
// Renderer runtime resources
this.resources = {
clientManifest: null,
serverBundle: null,
appTemplate: null,
errorTemplate: parseTemplate(fs.readFileSync(resolve(__dirname, 'views', 'error.html'), 'utf8'))
}
// For serving static/ files to /
this.serveStatic = pify(serveStatic(resolve(this.options.srcDir, 'static'), this.options.render.static))
// For serving .nuxt/dist/ files (only when build.publicPath is not an URL)
this.serveStaticNuxt = pify(serveStatic(resolve(this.options.buildDir, 'dist'), {
maxAge: (this.options.dev ? 0 : '1y') // 1 year in production
}))
// gzip middleware for production
if (!this.options.dev && this.options.render.gzip) {
this.gzipMiddleware = pify(compression(this.options.render.gzip))
}
// Try to load resources from fs
return this.loadResources()
}
async loadResources (_fs = fs, distPath) {
distPath = distPath || resolve(this.options.buildDir, 'dist')
const resourceMap = {
clientManifest: {
path: join(distPath, 'client-manifest.json'),
transform: JSON.parse
},
serverBundle: {
path: join(distPath, 'server-bundle.json'),
transform: JSON.parse
},
appTemplate: {
path: join(distPath, 'index.html'),
transform: parseTemplate
}
}
Object.keys(resourceMap).forEach(resourceKey => {
let { path, transform } = resourceMap[resourceKey]
let data
if (_fs.existsSync(path)) {
data = _fs.readFileSync(path, 'utf8')
if (typeof transform === 'function') {
data = transform(data)
}
}
if (data) {
this.resources[resourceKey] = data
}
})
this.createRenderer()
}
createRenderer () {
// If resources are not yet provided
if (!this.resources.serverBundle || !this.resources.clientManifest) {
return
}
// Create bundle renderer for SSR
this.bundleRenderer = createBundleRenderer(this.resources.serverBundle, Object.assign({
clientManifest: this.resources.clientManifest,
runInNewContext: false,
basedir: this.options.rootDir
}, this.options.render.ssr))
// Promisify renderToString
this.bundleRenderer.renderToString = pify(this.bundleRenderer.renderToString)
debug('ready')
2017-06-11 14:17:36 +00:00
}
async render (req, res) {
/* istanbul ignore if */
if (!this.bundleRenderer || !this.resources.appTemplate) {
2017-06-11 14:17:36 +00:00
return new Promise((resolve) => {
setTimeout(() => {
resolve(this.render(req, res))
}, 1000)
})
}
2017-06-11 14:17:36 +00:00
// Get context
const context = getContext(req, res)
res.statusCode = 200
2017-06-11 14:17:36 +00:00
try {
// Call webpack middleware only in development
if (this.options.dev && this.nuxt.builder && this.nuxt.builder.webpackDevMiddleware) {
2017-06-11 14:17:36 +00:00
await this.nuxt.builder.webpackDevMiddleware(req, res)
await this.nuxt.builder.webpackHotMiddleware(req, res)
}
// Gzip middleware for production
if (this.gzipMiddleware) {
2017-06-13 20:23:02 +00:00
await this.gzipMiddleware(req, res)
2017-06-11 14:17:36 +00:00
}
2017-06-11 14:17:36 +00:00
// If base in req.url, remove it for the middleware and vue-router
if (this.options.router.base !== '/' && req.url.indexOf(this.options.router.base) === 0) {
// Compatibility with base url for dev server
req.url = req.url.replace(this.options.router.base, '/')
}
2017-06-11 14:17:36 +00:00
// Serve static/ files
2017-06-13 20:23:02 +00:00
await this.serveStatic(req, res)
2017-06-11 14:17:36 +00:00
// Serve .nuxt/dist/ files (only for production)
if (!this.options.dev && req.url.indexOf(this.options.build.publicPath) === 0) {
const url = req.url
req.url = req.url.replace(this.options.build.publicPath, '/')
2017-06-13 20:23:02 +00:00
await this.serveStaticNuxt(req, res)
2017-06-11 14:17:36 +00:00
/* istanbul ignore next */
req.url = url
}
2017-06-11 14:17:36 +00:00
if (this.options.dev && req.url.indexOf(this.options.build.publicPath) === 0 && req.url.includes('.hot-update.json')) {
res.statusCode = 404
return res.end()
}
2017-06-11 14:17:36 +00:00
const { html, error, redirected, resourceHints } = await this.renderRoute(req.url, context)
2017-06-11 14:17:36 +00:00
if (redirected) {
return html
}
2017-06-11 14:17:36 +00:00
if (error) {
res.statusCode = context.nuxt.error.statusCode || 500
}
2017-06-11 14:17:36 +00:00
// ETag header
if (!error && this.options.render.etag) {
const etag = generateETag(html, this.options.render.etag)
if (fresh(req.headers, { etag })) {
res.statusCode = 304
res.end()
return
}
res.setHeader('ETag', etag)
}
2017-06-11 14:17:36 +00:00
// HTTP2 push headers
if (!error && this.options.render.http2.push) {
// Parse resourceHints to extract HTTP.2 prefetch/push headers
// https://w3c.github.io/preload/#server-push-http-2
const regex = /link rel="([^"]*)" href="([^"]*)" as="([^"]*)"/g
const pushAssets = []
let m
while (m = regex.exec(resourceHints)) { // eslint-disable-line no-cond-assign
const [_, rel, href, as] = m // eslint-disable-line no-unused-vars
if (rel === 'preload') {
pushAssets.push(`<${href}>; rel=${rel}; as=${as}`)
}
}
// Pass with single Link header
// https://blog.cloudflare.com/http-2-server-push-with-multiple-assets-per-link-header
res.setHeader('Link', pushAssets.join(','))
}
// Send response
2017-06-11 14:17:36 +00:00
res.setHeader('Content-Type', 'text/html; charset=utf-8')
res.setHeader('Content-Length', Buffer.byteLength(html))
res.end(html, 'utf8')
return html
} catch (err) {
if (context.redirected) {
console.error(err) // eslint-disable-line no-console
return err
}
// Render error template
const html = this.resources.errorTemplate({
2017-06-11 14:17:36 +00:00
/* istanbul ignore if */
error: err,
stack: ansiHTML(encodeHtml(err.stack))
})
// Send response
2017-06-11 14:17:36 +00:00
res.statusCode = 500
res.setHeader('Content-Type', 'text/html; charset=utf-8')
res.setHeader('Content-Length', Buffer.byteLength(html))
res.end(html, 'utf8')
return err
}
}
async renderRoute (url, context = {}) {
// Log rendered url
debug(`Rendering url ${url}`)
2017-06-11 14:17:36 +00:00
// Add url and isSever to the context
context.url = url
context.isServer = true
2017-06-11 14:17:36 +00:00
// Call renderToString from the bundleRenderer and generate the HTML (will update the context as well)
let APP = await this.bundleRenderer.renderToString(context)
2017-06-11 14:17:36 +00:00
if (!context.nuxt.serverRendered) {
APP = '<div id="__nuxt"></div>'
}
const m = context.meta.inject()
let HEAD = m.meta.text() + m.title.text() + m.link.text() + m.style.text() + m.script.text() + m.noscript.text()
if (this.options._routerBaseSpecified) {
2017-06-11 14:17:36 +00:00
HEAD += `<base href="${this.options.router.base}">`
}
const resourceHints = context.renderResourceHints()
HEAD += resourceHints + context.renderStyles()
APP += `<script type="text/javascript">window.__NUXT__=${serialize(context.nuxt, { isJSON: true })}</script>`
APP += context.renderScripts()
const html = this.resources.appTemplate({
2017-06-11 14:17:36 +00:00
HTML_ATTRS: 'data-n-head-ssr ' + m.htmlAttrs.text(),
BODY_ATTRS: m.bodyAttrs.text(),
HEAD,
APP
})
2017-06-11 14:17:36 +00:00
return {
html,
resourceHints,
error: context.nuxt.error,
redirected: context.redirected
}
}
async renderAndGetWindow (url, opts = {}) {
/* istanbul ignore if */
if (!jsdom) {
try {
jsdom = require('jsdom')
} catch (e) {
console.error('Fail when calling nuxt.renderAndGetWindow(url)') // eslint-disable-line no-console
console.error('jsdom module is not installed') // eslint-disable-line no-console
console.error('Please install jsdom with: npm install --save-dev jsdom') // eslint-disable-line no-console
2017-06-13 22:09:03 +00:00
throw e
2017-06-11 14:17:36 +00:00
}
}
let options = {
resources: 'usable', // load subresources (https://github.com/tmpvar/jsdom#loading-subresources)
runScripts: 'dangerously',
beforeParse (window) {
// Mock window.scrollTo
window.scrollTo = () => {
}
}
}
if (opts.virtualConsole !== false) {
options.virtualConsole = new jsdom.VirtualConsole().sendTo(console)
}
url = url || 'http://localhost:3000'
const { window } = await jsdom.JSDOM.fromURL(url, options)
// If Nuxt could not be loaded (error from the server-side)
const nuxtExists = window.document.body.innerHTML.includes('window.__NUXT__')
if (!nuxtExists) {
/* istanbul ignore next */
let error = new Error('Could not load the nuxt app')
/* istanbul ignore next */
error.body = window.document.body.innerHTML
throw error
}
// Used by nuxt.js to say when the components are loaded and the app ready
await new Promise((resolve) => {
window._onNuxtLoaded = () => resolve(window)
})
// Send back window object
return window
}
}