Nuxt/lib/core/renderer.js

483 lines
14 KiB
JavaScript
Raw Normal View History

2018-03-16 19:52:17 +00:00
import path from 'path'
import crypto from 'crypto'
import devalue from 'devalue'
2018-03-16 16:12:06 +00:00
import serveStatic from 'serve-static'
import _ from 'lodash'
import fs from 'fs-extra'
import { createBundleRenderer } from 'vue-server-renderer'
2018-03-16 16:12:06 +00:00
import connect from 'connect'
import launchMiddleware from 'launch-editor-middleware'
import consola from 'consola'
2018-03-16 16:12:06 +00:00
import { isUrl, timeout, waitFor, determineGlobals } from '../common/utils'
2018-03-16 17:23:15 +00:00
import defaults from '../common/nuxt.config'
2018-03-16 16:12:06 +00:00
import MetaRenderer from './meta'
import errorMiddleware from './middleware/error'
import nuxtMiddleware from './middleware/nuxt'
2017-06-11 14:17:36 +00:00
let jsdom = null
2018-03-16 16:12:06 +00:00
export default 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
this.globals = determineGlobals(nuxt.options.globalName, nuxt.options.globals)
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) {
const distPath = path.resolve(this.options.buildDir, 'dist', 'server')
2018-08-08 10:54:05 +00:00
const updated = []
2017-06-15 14:53:00 +00:00
resourceMap.forEach(({ key, fileName, transform }) => {
2018-08-08 10:54:05 +00:00
const rawKey = '$$' + key
2018-03-16 19:11:24 +00:00
const _path = path.join(distPath, fileName)
2018-03-16 19:11:24 +00:00
if (!_fs.existsSync(_path)) {
2017-06-15 14:53:00 +00:00
return // Resource not exists
}
2018-08-08 10:54:05 +00:00
const rawData = _fs.readFileSync(_path, 'utf8')
2017-06-15 14:53:00 +00:00
if (!rawData || rawData === this.resources[rawKey]) {
return // No changes
}
2017-06-15 14:53:00 +00:00
this.resources[rawKey] = rawData
2018-08-08 10:54:05 +00:00
const 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
2018-03-16 19:11:24 +00:00
const errorTemplatePath = path.resolve(this.options.buildDir, 'views/error.html')
2017-08-05 10:24:12 +00:00
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
2018-03-16 19:11:24 +00:00
const loadingHTMLPath = path.resolve(this.options.buildDir, 'loading.html')
2017-08-18 10:26:19 +00:00
if (fs.existsSync(loadingHTMLPath)) {
this.resources.loadingHTML = fs.readFileSync(loadingHTMLPath, 'utf8')
2018-03-25 18:35:13 +00:00
this.resources.loadingHTML = this.resources.loadingHTML
.replace(/\r|\n|[\t\s]{3,}/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
}
const hasModules = fs.existsSync(path.resolve(this.options.rootDir, 'node_modules'))
// Create bundle renderer for SSR
this.bundleRenderer = createBundleRenderer(
2018-01-13 05:22:11 +00:00
this.resources.serverBundle,
Object.assign(
{
clientManifest: this.resources.clientManifest,
runInNewContext: false,
// for globally installed nuxt command, search dependencies in global dir
basedir: hasModules ? this.options.rootDir : __dirname
2018-01-13 05:22:11 +00:00
},
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
2017-06-19 23:15:57 +00:00
if (typeof m === 'string') {
2018-03-16 16:12:06 +00:00
m = this.nuxt.requireModule(m)
2017-06-19 23:15:57 +00:00
}
2017-08-25 13:07:45 +00:00
if (typeof m.handler === 'string') {
2018-03-16 16:12:06 +00:00
m.handler = this.nuxt.requireModule(m.handler)
}
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
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)
2018-03-16 17:23:15 +00:00
? defaults.build.publicPath
2018-01-13 05:22:11 +00:00
: 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
// Compression middleware for production
if (!this.options.dev) {
const compressor = this.options.render.compressor
if (typeof compressor === 'object') {
// If only setting for `compression` are provided, require the module and insert
// Prefer require instead of requireModule to keep dependency in nuxt-start
const compression = require('compression')
this.useMiddleware(compression(compressor))
} else {
// Else, require own compression middleware
this.useMiddleware(compressor)
}
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-02-05 14:54:36 +00:00
const staticMiddleware = serveStatic(
2018-03-16 19:11:24 +00:00
path.resolve(this.options.srcDir, this.options.dir.static),
2018-02-05 14:54:36 +00:00
this.options.render.static
2018-01-13 05:22:11 +00:00
)
2018-02-03 16:54:42 +00:00
staticMiddleware.prefix = this.options.render.static.prefix
this.useMiddleware(staticMiddleware)
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 = path.resolve(this.options.buildDir, 'dist', 'client')
this.useMiddleware({
2017-09-07 12:36:56 +00:00
path: this.publicPath,
handler: serveStatic(
distDir,
this.options.render.dist
)
})
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) => {
2017-06-20 13:32:02 +00:00
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
// Apply errorMiddleware from modules first
await this.nuxt.callHook('render:errorMiddleware', this.app)
// Apply errorMiddleware from Nuxt
this.useMiddleware(errorMiddleware.bind(this))
2017-06-11 14:17:36 +00:00
}
renderTemplate(ssr, opts) {
// Fix problem with HTMLPlugin's minify option (#3392)
opts.html_attrs = opts.HTML_ATTRS
opts.body_attrs = opts.BODY_ATTRS
const fn = ssr ? this.resources.ssrTemplate : this.resources.spaTemplate
return fn(opts)
}
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
2018-04-01 20:20:46 +00:00
consola.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="${this.globals.id}">${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
}
const html = this.renderTemplate(false, {
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="${this.globals.id}"></div>`
2017-06-11 14:17:36 +00:00
}
const m = context.meta.inject()
2018-01-13 05:22:11 +00:00
let HEAD =
m.title.text() +
m.meta.text() +
2018-01-13 05:22:11 +00:00
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
}
await this.nuxt.callHook('render:routeContext', context.nuxt)
const serializedSession = `window.${this.globals.context}=${devalue(context.nuxt)};`
2018-01-16 15:11:17 +00:00
const cspScriptSrcHashSet = new Set()
2018-07-01 12:39:30 +00:00
if (this.options.render.csp) {
const { hashAlgorithm } = this.options.render.csp
2018-08-08 10:54:05 +00:00
const hash = crypto.createHash(hashAlgorithm)
hash.update(serializedSession)
cspScriptSrcHashSet.add(`'${hashAlgorithm}-${hash.digest('base64')}'`)
}
APP += `<script>${serializedSession}</script>`
2017-08-19 13:31:26 +00:00
APP += context.renderScripts()
APP += m.script.text({ body: true })
2018-01-23 10:30:36 +00:00
APP += m.noscript.text({ body: true })
2017-07-11 00:24:39 +00:00
2017-06-20 12:48:25 +00:00
HEAD += context.renderStyles()
const html = this.renderTemplate(true, {
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,
cspScriptSrcHashSet,
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 */ {
consola.error(`
Fail when calling nuxt.renderAndGetWindow(url)
jsdom module is not installed
Please install jsdom with: npm install --save-dev jsdom
`)
2017-06-13 22:09:03 +00:00
throw e
2017-06-11 14:17:36 +00:00
}
}
const options = Object.assign({
2017-06-11 14:17:36 +00:00
resources: 'usable', // load subresources (https://github.com/tmpvar/jsdom#loading-subresources)
runScripts: 'dangerously',
virtualConsole: true,
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
}
}, opts)
const jsdomErrHandler = (err) => { throw err }
if (options.virtualConsole) {
if (options.virtualConsole === true) {
options.virtualConsole = new jsdom.VirtualConsole().sendTo(consola)
}
// throw error when window creation failed
options.virtualConsole.on('jsdomError', jsdomErrHandler)
2017-06-11 14:17:36 +00:00
}
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.${this.globals.context}` : `<div id="${this.globals.id}">`
2018-01-13 05:22:11 +00:00
)
2017-06-19 15:47:31 +00:00
/* istanbul ignore if */
2017-06-11 14:17:36 +00:00
if (!nuxtExists) {
2018-08-08 10:54:05 +00:00
const error = new Error('Could not load the nuxt app')
2017-06-11 14:17:36 +00:00
error.body = window.document.body.innerHTML
throw error
}
// Used by nuxt.js to say when the components are loaded and the app ready
const onNuxtLoaded = this.globals.loadedCallback
await timeout(new Promise((resolve) => {
window[onNuxtLoaded] = () => resolve(window)
}), 20000, 'Components loading in renderAndGetWindow was not completed in 20s')
if (options.virtualConsole) {
// after window initialized successfully
options.virtualConsole.removeListener('jsdomError', jsdomErrHandler)
}
2017-06-11 14:17:36 +00:00
// 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
2018-04-10 17:16:47 +00:00
export const resourceMap = [
2017-06-20 11:44:47 +00:00
{
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
}
]