/
renderer.js
391 lines (325 loc) · 11 KB
/
renderer.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
import path from 'path'
import fs from 'fs-extra'
import consola from 'consola'
import { template } from 'lodash'
import { TARGETS, isModernRequest, urlJoin, waitFor } from '@nuxt/utils'
import { normalizeURL } from 'ufo'
import { defu } from 'defu'
import SPARenderer from './renderers/spa'
import SSRRenderer from './renderers/ssr'
import ModernRenderer from './renderers/modern'
export default class VueRenderer {
constructor (context) {
this.serverContext = context
this.options = this.serverContext.options
// Will be set by createRenderer
this.renderer = {
ssr: undefined,
modern: undefined,
spa: undefined
}
// Renderer runtime resources
Object.assign(this.serverContext.resources, {
clientManifest: undefined,
modernManifest: undefined,
serverManifest: undefined,
ssrTemplate: undefined,
spaTemplate: undefined,
errorTemplate: this.parseTemplate('Nuxt Internal Server Error')
})
// Default status
this._state = 'created'
this._error = null
}
ready () {
if (!this._readyPromise) {
this._state = 'loading'
this._readyPromise = this._ready()
.then(() => {
this._state = 'ready'
return this
})
.catch((error) => {
this._state = 'error'
this._error = error
throw error
})
}
return this._readyPromise
}
async _ready () {
// Resolve dist path
this.distPath = path.resolve(this.options.buildDir, 'dist', 'server')
// -- Development mode --
if (this.options.dev) {
this.serverContext.nuxt.hook('build:resources', mfs => this.loadResources(mfs))
return
}
// -- Production mode --
// Try once to load SSR resources from fs
await this.loadResources(fs)
// Without using `nuxt start` (programmatic, tests and generate)
if (!this.options._start) {
this.serverContext.nuxt.hook('build:resources', () => this.loadResources(fs))
return
}
// Verify resources
if (this.options.modern && !this.isModernReady) {
throw new Error(
`No modern build files found in ${this.distPath}.\nUse either \`nuxt build --modern\` or \`modern\` option to build modern files.`
)
} else if (!this.isReady) {
throw new Error(
`No build files found in ${this.distPath}.\nUse either \`nuxt build\` or \`builder.build()\` or start nuxt in development mode.`
)
}
}
async loadResources (_fs) {
const updated = []
const readResource = async (fileName, encoding) => {
try {
const fullPath = path.resolve(this.distPath, fileName)
if (!await _fs.exists(fullPath)) {
return
}
const contents = await _fs.readFile(fullPath, encoding)
return contents
} catch (err) {
consola.error('Unable to load resource:', fileName, err)
}
}
for (const resourceName in this.resourceMap) {
const { fileName, transform, encoding } = this.resourceMap[resourceName]
// Load resource
let resource = await readResource(fileName, encoding)
// Skip unavailable resources
if (!resource) {
continue
}
// Apply transforms
if (typeof transform === 'function') {
resource = await transform(resource, { readResource })
}
// Update resource
this.serverContext.resources[resourceName] = resource
updated.push(resourceName)
}
// Load templates
await this.loadTemplates()
await this.serverContext.nuxt.callHook('render:resourcesLoaded', this.serverContext.resources)
// Detect if any resource updated
if (updated.length > 0) {
// Create new renderer
this.createRenderer()
}
}
async loadTemplates () {
// Reload error template
const errorTemplatePath = path.resolve(this.options.buildDir, 'views/error.html')
if (await fs.exists(errorTemplatePath)) {
const errorTemplate = await fs.readFile(errorTemplatePath, 'utf8')
this.serverContext.resources.errorTemplate = this.parseTemplate(errorTemplate)
}
// Reload loading template
const loadingHTMLPath = path.resolve(this.options.buildDir, 'loading.html')
if (await fs.exists(loadingHTMLPath)) {
this.serverContext.resources.loadingHTML = await fs.readFile(loadingHTMLPath, 'utf8')
this.serverContext.resources.loadingHTML =
this.serverContext.resources.loadingHTML.replace(/\r|\n/g, ' ').replace(/[\t\s]+/g, ' ')
} else {
this.serverContext.resources.loadingHTML = ''
}
}
// TODO: Remove in Nuxt 3
get noSSR () { /* Backward compatibility */
return this.options.render.ssr === false
}
get SSR () {
return this.options.render.ssr === true
}
get isReady () {
// SPA
if (!this.serverContext.resources.spaTemplate || !this.renderer.spa) {
return false
}
// SSR
if (this.SSR && (!this.serverContext.resources.ssrTemplate || !this.renderer.ssr)) {
return false
}
return true
}
get isModernReady () {
return this.isReady && this.serverContext.resources.modernManifest
}
// TODO: Remove in Nuxt 3
get isResourcesAvailable () { /* Backward compatibility */
return this.isReady
}
detectModernBuild () {
const { options, resources } = this.serverContext
if ([false, 'client', 'server'].includes(options.modern)) {
return
}
const isExplicitStaticModern = options.target === TARGETS.static && options.modern
if (!resources.modernManifest && !isExplicitStaticModern) {
options.modern = false
return
}
options.modern = options.render.ssr ? 'server' : 'client'
consola.info(`Modern bundles are detected. Modern mode (\`${options.modern}\`) is enabled now.`)
}
createRenderer () {
// Resource clientManifest is always required
if (!this.serverContext.resources.clientManifest) {
return
}
this.detectModernBuild()
// Create SPA renderer
if (this.serverContext.resources.spaTemplate) {
this.renderer.spa = new SPARenderer(this.serverContext)
}
// Skip the rest if SSR resources are not available
if (this.serverContext.resources.ssrTemplate && this.serverContext.resources.serverManifest) {
// Create bundle renderer for SSR
this.renderer.ssr = new SSRRenderer(this.serverContext)
if (this.options.modern !== false) {
this.renderer.modern = new ModernRenderer(this.serverContext)
}
}
}
renderSPA (renderContext) {
return this.renderer.spa.render(renderContext)
}
renderSSR (renderContext) {
// Call renderToString from the bundleRenderer and generate the HTML (will update the renderContext as well)
const renderer = renderContext.modern ? this.renderer.modern : this.renderer.ssr
return renderer.render(renderContext)
}
async renderRoute (url, renderContext = {}, _retried = 0) {
/* istanbul ignore if */
if (!this.isReady) {
// Fall-back to loading-screen if enabled
if (this.options.build.loadingScreen) {
// Tell nuxt middleware to use `server:nuxt:renderLoading hook
return false
}
// Retry
const retryLimit = this.options.dev ? 60 : 3
if (_retried < retryLimit && this._state !== 'error') {
await this.ready().then(() => waitFor(1000))
return this.renderRoute(url, renderContext, _retried + 1)
}
// Throw Error
switch (this._state) {
case 'created':
throw new Error('Renderer ready() is not called! Please ensure `nuxt.ready()` is called and awaited.')
case 'loading':
throw new Error('Renderer is loading.')
case 'error':
throw this._error
case 'ready':
throw new Error(`Renderer resources are not loaded! Please check possible console errors and ensure dist (${this.distPath}) exists.`)
default:
throw new Error('Renderer is in unknown state!')
}
}
// Log rendered url
consola.debug(`Rendering url ${url}`)
// Add url to the renderContext
renderContext.url = normalizeURL(url)
// Add target to the renderContext
renderContext.target = this.options.target
const { req = {}, res = {} } = renderContext
// renderContext.spa
if (renderContext.spa === undefined) {
// TODO: Remove reading from renderContext.res in Nuxt3
renderContext.spa = !this.SSR || req.spa || res.spa
}
// renderContext.modern
if (renderContext.modern === undefined) {
const modernMode = this.options.modern
renderContext.modern = modernMode === 'client' || isModernRequest(req, modernMode)
}
// Set runtime config on renderContext
renderContext.runtimeConfig = {
private: renderContext.spa ? {} : defu(this.options.privateRuntimeConfig, this.options.publicRuntimeConfig),
public: { ...this.options.publicRuntimeConfig }
}
// Call renderContext hook
await this.serverContext.nuxt.callHook('vue-renderer:context', renderContext)
// Render SPA or SSR
return renderContext.spa
? this.renderSPA(renderContext)
: this.renderSSR(renderContext)
}
get resourceMap () {
const publicPath = urlJoin(this.options.app.cdnURL, this.options.app.assetsPath)
return {
clientManifest: {
fileName: 'client.manifest.json',
transform: src => Object.assign(JSON.parse(src), { publicPath })
},
modernManifest: {
fileName: 'modern.manifest.json',
transform: src => Object.assign(JSON.parse(src), { publicPath })
},
serverManifest: {
fileName: 'server.manifest.json',
// BundleRenderer needs resolved contents
transform: async (src, { readResource }) => {
const serverManifest = JSON.parse(src)
const readResources = async (obj) => {
const _obj = {}
await Promise.all(Object.keys(obj).map(async (key) => {
_obj[key] = await readResource(obj[key])
}))
return _obj
}
const [files, maps] = await Promise.all([
readResources(serverManifest.files),
readResources(serverManifest.maps)
])
// Try to parse sourcemaps
for (const map in maps) {
if (maps[map] && maps[map].version) {
continue
}
try {
maps[map] = JSON.parse(maps[map])
} catch (e) {
maps[map] = { version: 3, sources: [], mappings: '' }
}
}
return {
...serverManifest,
files,
maps
}
}
},
ssrTemplate: {
fileName: 'index.ssr.html',
transform: src => this.parseTemplate(src)
},
spaTemplate: {
fileName: 'index.spa.html',
transform: src => this.parseTemplate(src)
}
}
}
parseTemplate (templateStr) {
return template(templateStr, {
interpolate: /{{([\s\S]+?)}}/g,
evaluate: /{%([\s\S]+?)%}/g
})
}
close () {
if (this.__closed) {
return
}
this.__closed = true
for (const key in this.renderer) {
delete this.renderer[key]
}
}
}