Nuxt/lib/core/renderer.js

475 lines
12 KiB
JavaScript
Raw Normal View History

const ansiHTML = require('ansi-html')
const serialize = require('serialize-javascript')
const serveStatic = require('serve-static')
const compression = require('compression')
const _ = require('lodash')
const { join, resolve } = require('path')
const fs = require('fs-extra')
const { createBundleRenderer } = require('vue-server-renderer')
const Debug = require('debug')
const connect = require('connect')
2018-01-07 08:21:36 +00:00
const launchMiddleware = require('launch-editor-middleware')
const crypto = require('crypto')
const { setAnsiColors, isUrl, waitFor } = require('../common/utils')
const { Options } = require('../common')
2017-06-11 14:17:36 +00:00
const MetaRenderer = require('./meta')
const errorMiddleware = require('./middleware/error')
const nuxtMiddleware = require('./middleware/nuxt')
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
module.exports = class Renderer {
2017-10-30 17:41:22 +00:00
constructor(nuxt) {
2017-06-11 14:17:36 +00:00
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-10-30 17:41:22 +00:00
}
2017-07-30 11:47:50 +00:00
2017-10-30 17:41:22 +00:00
async ready() {
2017-10-30 21:39:08 +00:00
await this.nuxt.callHook('render:before', this, this.options.render)
2017-07-30 11:47:50 +00:00
// Setup nuxt middleware
2017-07-03 11:11:40 +00:00
await this.setupMiddleware()
// Production: 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-10-30 21:39:08 +00:00
// Call done hook
await this.nuxt.callHook('render:done', this)
}
2017-10-30 17:41:22 +00:00
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)) {
2018-01-13 05:22:11 +00:00
this.resources.errorTemplate = parseTemplate(
fs.readFileSync(errorTemplatePath, 'utf8')
)
2017-08-05 10:24:12 +00:00
}
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')
2018-01-13 05:22:11 +00:00
this.resources.loadingHTML = this.resources.loadingHTML.replace(
/[\r|\n]/g,
''
)
2017-08-18 10:26:19 +00:00
} else {
this.resources.loadingHTML = ''
}
// Call resourcesLoaded plugin
2017-10-30 21:39:08 +00:00
await this.nuxt.callHook('render:resourcesLoaded', this.resources)
2017-06-15 14:53:00 +00:00
if (updated.length > 0) {
this.createRenderer()
}
}
2017-10-30 17:41:22 +00:00
get noSSR() {
2017-07-11 00:24:39 +00:00
return this.options.render.ssr === false
}
2017-10-30 17:41:22 +00:00
get isReady() {
2017-07-11 00:24:39 +00:00
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-10-30 17:41:22 +00:00
get isResourcesAvailable() {
2017-08-19 10:29:41 +00:00
// Required for both
2017-12-08 09:04:08 +00:00
/* istanbul ignore if */
2017-08-19 10:29:41 +00:00
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)
}
2017-10-30 17:41:22 +00:00
createRenderer() {
2017-08-19 10:29:41 +00:00
// 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)
// Skip following steps if noSSR mode
if (this.noSSR) {
return
}
// Create bundle renderer for SSR
2018-01-13 05:22:11 +00:00
this.bundleRenderer = createBundleRenderer(
this.resources.serverBundle,
Object.assign(
{
clientManifest: this.resources.clientManifest,
runInNewContext: false,
basedir: this.options.rootDir
},
this.options.render.bundleRenderer
)
)
2017-06-11 14:17:36 +00:00
}
2017-10-30 17:41:22 +00:00
useMiddleware(m) {
2017-06-19 23:15:57 +00:00
// 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
2018-01-13 05:22:11 +00:00
const path = (
(m.prefix !== false ? this.options.router.base : '') +
(typeof m.path === 'string' ? 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-10-30 17:41:22 +00:00
get publicPath() {
2018-01-13 05:22:11 +00:00
return isUrl(this.options.build.publicPath)
? Options.defaults.build.publicPath
: this.options.build.publicPath
2017-09-07 12:36:56 +00:00
}
2017-10-30 17:41:22 +00:00
async setupMiddleware() {
2017-06-20 13:32:02 +00:00
// Apply setupMiddleware from modules first
2017-10-30 21:39:08 +00:00
await this.nuxt.callHook('render: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-09-09 20:21:51 +00:00
// open in editor for debug mode only
if (this.options.debug && this.options.dev) {
2017-09-09 20:21:51 +00:00
this.useMiddleware({
path: '__open-in-editor',
handler: launchMiddleware(this.options.editor)
2017-09-09 20:21:51 +00:00
})
}
2017-06-19 23:15:57 +00:00
// For serving static/ files to /
2018-01-13 05:22:11 +00:00
this.useMiddleware(
serveStatic(
resolve(this.options.srcDir, 'static'),
this.options.render.static
)
)
2017-06-19 23:15:57 +00:00
// 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-09-07 12:36:56 +00:00
path: this.publicPath,
handler: serveStatic(distDir, {
index: false, // Don't serve index.html template
maxAge: '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
this.useMiddleware(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
this.useMiddleware(errorMiddleware.bind(this))
2017-06-11 14:17:36 +00:00
}
2017-10-30 17:41:22 +00:00
async renderRoute(url, context = {}) {
/* istanbul ignore if */
2017-07-11 00:24:39 +00:00
if (!this.isReady) {
await waitFor(1000)
return this.renderRoute(url, context)
}
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
// 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)
2017-10-28 14:10:01 +00:00
const ENV = this.options.env
2017-08-18 16:05:01 +00:00
if (this.noSSR || spa) {
2018-01-13 05:22:11 +00:00
const {
HTML_ATTRS,
BODY_ATTRS,
HEAD,
BODY_SCRIPTS,
getPreloadFiles
} = await this.metaRenderer.render(context)
const APP =
`<div id="__nuxt">${this.resources.loadingHTML}</div>` + BODY_SCRIPTS
2017-08-18 16:05:01 +00:00
2017-09-07 12:36:56 +00:00
// Detect 404 errors
2018-01-13 05:22:11 +00:00
if (
url.includes(this.options.build.publicPath) ||
url.includes('__webpack')
) {
const err = {
statusCode: 404,
message: this.options.messages.error_404,
name: 'ResourceNotFound'
}
2017-09-07 12:36:56 +00:00
throw err
}
2017-10-28 14:10:01 +00:00
const html = this.resources.spaTemplate({
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,
2017-10-28 14:10:01 +00:00
APP,
ENV
})
2018-01-04 22:33:46 +00:00
return { html, getPreloadFiles }
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()
2018-01-13 05:22:11 +00:00
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
2018-01-04 22:33:46 +00:00
if (this.options.render.resourceHints) {
HEAD += context.renderResourceHints()
2017-06-20 12:48:25 +00:00
}
2018-01-16 15:11:17 +00:00
const serializedSession = `window.__NUXT__=${serialize(context.nuxt, {
2018-01-13 05:22:11 +00:00
isJSON: true
})};`
2018-01-16 15:11:17 +00:00
const cspScriptSrcHashes = []
if (this.options.render.csp && this.options.render.csp.enabled) {
let hash = crypto.createHash(this.options.render.csp.hashAlgorithm)
hash.update(serializedSession)
2018-01-13 05:22:11 +00:00
cspScriptSrcHashes.push(
`'${this.options.render.csp.hashAlgorithm}-${hash.digest('base64')}'`
)
}
APP += `<script type="text/javascript">${serializedSession}</script>`
2017-08-19 13:31:26 +00:00
APP += context.renderScripts()
APP += m.script.text({ body: true })
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,
2017-10-28 14:10:01 +00:00
APP,
ENV
2017-06-11 14:17:36 +00:00
})
2017-06-11 14:17:36 +00:00
return {
html,
cspScriptSrcHashes,
getPreloadFiles: context.getPreloadFiles,
2017-06-11 14:17:36 +00:00
error: context.nuxt.error,
redirected: context.redirected
}
}
2017-10-30 17:41:22 +00:00
async renderAndGetWindow(url, opts = {}) {
2017-06-11 14:17:36 +00:00
/* istanbul ignore if */
if (!jsdom) {
try {
jsdom = require('jsdom')
} catch (e) /* istanbul ignore next */ {
2017-11-19 13:40:30 +00:00
/* eslint-disable no-console */
console.error('Fail when calling nuxt.renderAndGetWindow(url)')
console.error('jsdom module is not installed')
console.error('Please install jsdom with: npm install --save-dev jsdom')
/* eslint-enable 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',
2017-10-30 17:41:22 +00:00
beforeParse(window) {
2017-06-11 14:17:36 +00:00
// Mock window.scrollTo
2017-10-30 17:41:22 +00:00
window.scrollTo = () => {}
2017-06-11 14:17:36 +00:00
}
}
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)
2018-01-13 05:22:11 +00:00
const nuxtExists = window.document.body.innerHTML.includes(
this.options.render.ssr ? 'window.__NUXT__' : '<div id="__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
2018-01-13 05:22:11 +00:00
await new Promise(resolve => {
2017-06-11 14:17:36 +00:00
window._onNuxtLoaded = () => resolve(window)
})
// Send back window object
return window
}
}
2017-06-20 11:44:47 +00:00
2018-01-13 05:22:11 +00:00
const parseTemplate = templateStr =>
_.template(templateStr, {
interpolate: /{{([\s\S]+?)}}/g
})
2017-06-20 11:44:47 +00:00
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
2018-01-13 05:22:11 +00:00
const ssrResourceRegex = new RegExp(
resourceMap.map(resource => resource.fileName).join('|'),
'i'
)