Nuxt/lib/core/renderer.js

581 lines
17 KiB
JavaScript
Raw Normal View History

2017-06-19 16:09:01 +00:00
import ansiHTML from 'ansi-html'
import serialize from 'serialize-javascript'
import generateETag from 'etag'
import fresh from 'fresh'
import Tapable from 'tappable'
import pify from 'pify'
import serveStatic from 'serve-static'
import compression from 'compression'
import _ from 'lodash'
import { join, resolve } from 'path'
import fs from 'fs-extra'
import { createBundleRenderer } from 'vue-server-renderer'
2017-08-21 09:38:21 +00:00
import { getContext, setAnsiColors, isUrl } from 'utils'
2017-06-19 16:09:01 +00:00
import Debug from 'debug'
import Youch from '@nuxtjs/youch'
import { SourceMapConsumer } from 'source-map'
2017-06-19 23:15:57 +00:00
import connect from 'connect'
2017-07-30 12:20:58 +00:00
import { Options } from 'common'
2017-08-18 16:05:01 +00:00
import MetaRenderer from './meta'
2017-06-11 14:17:36 +00:00
2017-06-18 09:35:00 +00:00
const debug = Debug('nuxt:render')
2017-06-11 14:17:36 +00:00
debug.color = 4 // Force blue color
2017-06-18 09:35:00 +00:00
2017-06-11 14:17:36 +00:00
setAnsiColors(ansiHTML)
let jsdom = null
export default class Renderer extends Tapable {
constructor (nuxt) {
super()
this.nuxt = nuxt
this.options = nuxt.options
2017-06-14 16:33:04 +00:00
// Will be set by createRenderer
this.bundleRenderer = null
2017-08-18 16:05:01 +00:00
this.metaRenderer = null
// Will be available on dev
this.webpackDevMiddleware = null
this.webpackHotMiddleware = null
2017-06-19 23:15:57 +00:00
// Create new connect instance
this.app = connect()
// Renderer runtime resources
this.resources = {
clientManifest: null,
serverBundle: null,
2017-07-11 00:24:39 +00:00
ssrTemplate: null,
spaTemplate: null,
errorTemplate: parseTemplate('Nuxt.js Internal Server Error')
}
}
2017-07-17 19:26:41 +00:00
async _ready () {
2017-07-30 11:47:50 +00:00
await this.nuxt.applyPluginsAsync('renderer', this)
// Setup nuxt middleware
2017-07-03 11:11:40 +00:00
await this.setupMiddleware()
2017-06-19 23:15:57 +00:00
// Load SSR resources from fs
2017-06-15 14:53:00 +00:00
if (!this.options.dev) {
2017-06-15 22:19:53 +00:00
await this.loadResources()
2017-06-15 14:53:00 +00:00
}
2017-06-15 22:19:53 +00:00
2017-07-30 11:47:50 +00:00
// Call ready plugin
await this.applyPluginsAsync('ready', this)
}
async loadResources (_fs = fs) {
2017-06-15 22:19:53 +00:00
let distPath = resolve(this.options.buildDir, 'dist')
2017-06-15 14:53:00 +00:00
let updated = []
resourceMap.forEach(({ key, fileName, transform }) => {
let rawKey = '$$' + key
const path = join(distPath, fileName)
2017-06-15 14:53:00 +00:00
let rawData, data
if (!_fs.existsSync(path)) {
return // Resource not exists
}
2017-06-15 14:53:00 +00:00
rawData = _fs.readFileSync(path, 'utf8')
if (!rawData || rawData === this.resources[rawKey]) {
return // No changes
}
2017-06-15 14:53:00 +00:00
this.resources[rawKey] = rawData
data = transform(rawData)
2017-06-19 15:47:31 +00:00
/* istanbul ignore if */
2017-06-15 14:53:00 +00:00
if (!data) {
return // Invalid data ?
}
this.resources[key] = data
updated.push(key)
})
2017-08-05 10:24:12 +00:00
// Reload error template
const errorTemplatePath = resolve(this.options.buildDir, 'views/error.html')
if (fs.existsSync(errorTemplatePath)) {
this.resources.errorTemplate = parseTemplate(fs.readFileSync(errorTemplatePath, 'utf8'))
}
2017-08-18 10:26:19 +00:00
// Load loading template
const loadingHTMLPath = resolve(this.options.buildDir, 'loading.html')
if (fs.existsSync(loadingHTMLPath)) {
this.resources.loadingHTML = fs.readFileSync(loadingHTMLPath, 'utf8')
this.resources.loadingHTML = this.resources.loadingHTML.replace(/[\r|\n]/g, '')
} else {
this.resources.loadingHTML = ''
}
2017-06-15 14:53:00 +00:00
if (updated.length > 0) {
2017-06-15 22:19:53 +00:00
// debug('Updated', updated.join(', '), isServer)
2017-06-15 14:53:00 +00:00
this.createRenderer()
}
}
2017-07-02 23:53:19 +00:00
get noSSR () {
2017-07-11 00:24:39 +00:00
return this.options.render.ssr === false
}
get isReady () {
if (this.noSSR) {
2017-08-19 10:29:41 +00:00
return Boolean(this.resources.spaTemplate)
2017-07-11 00:24:39 +00:00
}
2017-08-19 10:29:41 +00:00
return Boolean(this.bundleRenderer && this.resources.ssrTemplate)
2017-07-02 23:53:19 +00:00
}
2017-08-19 10:29:41 +00:00
get isResourcesAvailable () {
// Required for both
if (!this.resources.clientManifest) {
return false
}
2017-08-18 16:05:01 +00:00
2017-08-19 10:29:41 +00:00
// Required for SPA rendering
2017-07-02 23:53:19 +00:00
if (this.noSSR) {
2017-08-19 10:29:41 +00:00
return Boolean(this.resources.spaTemplate)
}
// Required for bundle renderer
return Boolean(this.resources.ssrTemplate && this.resources.serverBundle)
}
createRenderer () {
// Ensure resources are available
if (!this.isResourcesAvailable) {
2017-07-02 23:53:19 +00:00
return
}
2017-08-19 10:29:41 +00:00
// Create Meta Renderer
this.metaRenderer = new MetaRenderer(this.nuxt, this)
// Show Open URL
this.nuxt.showOpen()
// Skip following steps if noSSR mode
if (this.noSSR) {
return
}
// Create bundle renderer for SSR
this.bundleRenderer = createBundleRenderer(this.resources.serverBundle, Object.assign({
clientManifest: this.resources.clientManifest,
runInNewContext: false,
basedir: this.options.rootDir
2017-07-04 21:50:43 +00:00
}, this.options.render.bundleRenderer))
// Promisify renderToString
this.bundleRenderer.renderToString = pify(this.bundleRenderer.renderToString)
2017-06-11 14:17:36 +00:00
}
2017-06-19 23:15:57 +00:00
useMiddleware (m) {
// Resolve
2017-08-25 13:07:45 +00:00
const $m = m
let src
2017-06-19 23:15:57 +00:00
if (typeof m === 'string') {
2017-08-25 13:07:45 +00:00
src = this.nuxt.resolvePath(m)
m = require(src)
2017-06-19 23:15:57 +00:00
}
2017-08-25 13:07:45 +00:00
if (typeof m.handler === 'string') {
src = this.nuxt.resolvePath(m.handler)
m.handler = require(src)
}
2017-08-25 13:07:45 +00:00
2017-08-25 12:01:16 +00:00
const handler = m.handler || m
const path = (this.options.router.base + (m.path ? m.path : '')).replace(/\/\//g, '/')
2017-08-25 13:07:45 +00:00
// Inject $src and $m to final handler
if (src) handler.$src = src
handler.$m = $m
// Use middleware
2017-08-25 12:01:16 +00:00
this.app.use(path, handler)
2017-06-19 23:15:57 +00:00
}
2017-07-03 11:11:40 +00:00
async setupMiddleware () {
2017-06-20 13:32:02 +00:00
// Apply setupMiddleware from modules first
2017-07-03 11:11:40 +00:00
await this.applyPluginsAsync('setupMiddleware', this.app)
2017-06-20 13:32:02 +00:00
2017-06-19 23:15:57 +00:00
// Gzip middleware for production
if (!this.options.dev && this.options.render.gzip) {
this.useMiddleware(compression(this.options.render.gzip))
}
// Common URL checks
this.useMiddleware((req, res, next) => {
// Prevent access to SSR resources
2017-06-19 23:15:57 +00:00
if (ssrResourceRegex.test(req.url)) {
res.statusCode = 404
return res.end()
2017-06-15 23:00:53 +00:00
}
2017-06-19 23:15:57 +00:00
next()
})
2017-06-15 23:00:53 +00:00
2017-06-19 23:15:57 +00:00
// Add webpack middleware only for development
if (this.options.dev) {
this.useMiddleware(async (req, res, next) => {
if (this.webpackDevMiddleware) {
await this.webpackDevMiddleware(req, res)
}
if (this.webpackHotMiddleware) {
await this.webpackHotMiddleware(req, res)
}
next()
})
}
2017-06-19 23:15:57 +00:00
// For serving static/ files to /
this.useMiddleware(serveStatic(resolve(this.options.srcDir, 'static'), this.options.render.static))
// Serve .nuxt/dist/ files only for production
// For dev they will be served with devMiddleware
if (!this.options.dev) {
const distDir = resolve(this.options.buildDir, 'dist')
this.useMiddleware({
2017-07-30 12:20:58 +00:00
path: isUrl(this.options.build.publicPath) ? Options.defaults.build.publicPath : this.options.build.publicPath,
handler: serveStatic(distDir, {
index: false, // Don't serve index.html template
maxAge: (this.options.dev ? 0 : '1y') // 1 year in production
})
})
2017-06-19 23:15:57 +00:00
}
2017-06-20 13:32:02 +00:00
// Add User provided middleware
this.options.serverMiddleware.forEach(m => {
this.useMiddleware(m)
})
2017-06-19 23:15:57 +00:00
// Finally use nuxtMiddleware
2017-07-30 11:47:50 +00:00
this.useMiddleware(this.nuxtMiddleware.bind(this))
// Error middleware for errors that occurred in middleware that declared above
// Middleware should exactly take 4 arguments
// https://github.com/senchalabs/connect#error-middleware
2017-07-30 11:47:50 +00:00
this.useMiddleware(this.errorMiddleware.bind(this))
2017-06-19 23:15:57 +00:00
}
async nuxtMiddleware (req, res, next) {
2017-06-19 23:15:57 +00:00
// Get context
const context = getContext(req, res)
res.statusCode = 200
try {
const { html, error, redirected, resourceHints } = await this.renderRoute(req.url, context)
2017-06-11 14:17:36 +00:00
if (redirected) {
return html
}
if (error) {
res.statusCode = context.nuxt.error.statusCode || 500
}
2017-06-19 23:15:57 +00:00
// Add ETag header
2017-06-11 14:17:36 +00:00
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) {
/* istanbul ignore if */
if (context && context.redirected) {
console.error(err) // eslint-disable-line no-console
return err
}
next(err)
}
}
errorMiddleware (err, req, res, next) {
2017-08-05 07:43:10 +00:00
// ensure statusCode, message and name fields
err.statusCode = err.statusCode || 500
err.message = err.message || 'Nuxt Server Error'
2017-08-05 19:20:26 +00:00
err.name = (!err.name || err.name === 'Error') ? 'NuxtServerError' : err.name
const sendResponse = (content, type = 'text/html') => {
// Set Headers
res.statusCode = err.statusCode
2017-08-22 13:57:11 +00:00
res.statusMessage = err.name
res.setHeader('Content-Type', type + '; charset=utf-8')
res.setHeader('Content-Length', Buffer.byteLength(content))
// Send Response
res.end(content, 'utf-8')
2017-06-11 14:17:36 +00:00
}
// Check if request accepts JSON
const hasReqHeader = (header, includes) => req.headers[header] && req.headers[header].toLowerCase().includes(includes)
const isJson = hasReqHeader('accept', 'application/json') || hasReqHeader('user-agent', 'curl/')
// Use basic errors when debug mode is disabled
if (!this.options.debug) {
// Json format is compatible with Youch json responses
const json = {
status: err.statusCode,
message: err.message,
2017-08-05 07:43:10 +00:00
name: err.name
}
if (isJson) {
sendResponse(JSON.stringify(json, undefined, 2), 'text/json')
return
}
const html = this.resources.errorTemplate(json)
sendResponse(html)
return
}
// Show stack trace
const youch = new Youch(err, req, this.readSource.bind(this))
if (isJson) {
youch.toJSON().then(json => { sendResponse(JSON.stringify(json, undefined, 2), 'text/json') })
} else {
youch.toHTML().then(html => { sendResponse(html) })
}
}
async readSource (frame) {
const serverBundle = this.resources.serverBundle
// Remove webpack:/// & query string from the end
const sanitizeName = name => name ? name.replace('webpack:///', '').split('?')[0] : ''
// SourceMap Support for SSR Bundle
if (serverBundle && serverBundle.maps[frame.fileName]) {
2017-08-18 16:05:01 +00:00
// Initialize smc cache
if (!serverBundle.$maps) {
serverBundle.$maps = {}
}
// Read SourceMap object
const smc = serverBundle.$maps[frame.fileName] || new SourceMapConsumer(serverBundle.maps[frame.fileName])
serverBundle.$maps[frame.fileName] = smc
// Try to find original position
const { line, column, name, source } = smc.originalPositionFor({
line: frame.getLineNumber() || 0,
column: frame.getColumnNumber() || 0
})
if (line) {
frame.lineNumber = line
}
if (column) {
frame.columnNumber = column
}
if (name) {
frame.functionName = name
}
if (source) {
frame.fileName = sanitizeName(source)
// Source detected, try to get original source code
const contents = smc.sourceContentFor(source)
if (contents) {
frame.contents = contents
return
}
}
}
// Return if fileName is still unknown
if (!frame.fileName) {
return
}
frame.fileName = sanitizeName(frame.fileName)
// Try to read from SSR bundle files
if (serverBundle && serverBundle.files[frame.fileName]) {
frame.contents = serverBundle.files[frame.fileName]
return
}
// Possible paths for file
const searchPath = [
this.options.rootDir,
join(this.options.buildDir, 'dist'),
this.options.srcDir,
this.options.buildDir
]
// Scan filesystem
for (let pathDir of searchPath) {
let fullPath = resolve(pathDir, frame.fileName)
let source = await fs.readFile(fullPath, 'utf-8').catch(() => null)
if (source) {
frame.contents = source
return
}
}
2017-06-11 14:17:36 +00:00
}
2017-06-14 17:42:20 +00:00
async renderRoute (url, context = {}) {
/* istanbul ignore if */
2017-07-11 00:24:39 +00:00
if (!this.isReady) {
2017-06-15 14:53:00 +00:00
return new Promise(resolve => {
setTimeout(() => resolve(this.renderRoute(url, context)), 1000)
})
}
2017-06-11 14:17:36 +00:00
// 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
// Basic response if SSR is disabled or spa data provided
2017-08-18 16:05:01 +00:00
const spa = context.spa || (context.res && context.res.spa)
if (this.noSSR || spa) {
2017-08-30 12:47:07 +00:00
const { HTML_ATTRS, BODY_ATTRS, HEAD, resourceHints } = await this.metaRenderer.render(context)
2017-08-18 16:05:01 +00:00
const APP = `<div id="__nuxt">${this.resources.loadingHTML}</div>`
const data = {
2017-08-18 16:05:01 +00:00
HTML_ATTRS,
2017-08-21 09:38:21 +00:00
BODY_ATTRS,
2017-08-18 16:05:01 +00:00
HEAD,
APP
2017-07-02 23:53:19 +00:00
}
const html = this.resources.spaTemplate(data)
2017-08-30 12:47:07 +00:00
return { html, resourceHints }
2017-07-02 23:53:19 +00:00
}
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}">`
}
2017-06-20 12:48:25 +00:00
let resourceHints = ''
2017-07-11 00:24:39 +00:00
2017-08-19 13:31:26 +00:00
if (this.options.render.resourceHints) {
resourceHints = context.renderResourceHints()
HEAD += resourceHints
2017-06-20 12:48:25 +00:00
}
2017-08-19 13:31:26 +00:00
APP += `<script type="text/javascript">window.__NUXT__=${serialize(context.nuxt, { isJSON: true })};</script>`
APP += context.renderScripts()
2017-07-11 00:24:39 +00:00
2017-06-20 12:48:25 +00:00
HEAD += context.renderStyles()
2017-07-11 00:24:39 +00:00
let html = this.resources.ssrTemplate({
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) /* istanbul ignore next */ {
2017-06-11 14:17:36 +00:00
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__')
2017-06-19 15:47:31 +00:00
/* istanbul ignore if */
2017-06-11 14:17:36 +00:00
if (!nuxtExists) {
let error = new Error('Could not load the nuxt app')
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
}
}
2017-06-20 11:44:47 +00:00
const parseTemplate = templateStr => _.template(templateStr, {
interpolate: /{{([\s\S]+?)}}/g
})
const resourceMap = [
{
key: 'clientManifest',
fileName: 'vue-ssr-client-manifest.json',
transform: JSON.parse
},
{
key: 'serverBundle',
fileName: 'server-bundle.json',
transform: JSON.parse
},
{
2017-07-11 00:24:39 +00:00
key: 'ssrTemplate',
fileName: 'index.ssr.html',
transform: parseTemplate
},
{
key: 'spaTemplate',
fileName: 'index.spa.html',
2017-06-20 11:44:47 +00:00
transform: parseTemplate
}
]
// Protector utility against request to SSR bundle files
const ssrResourceRegex = new RegExp(resourceMap.map(resource => resource.fileName).join('|'), 'i')