Zengtudor/Nuxt
1
0
Fork 0
mirror of https://github.com/nuxt/nuxt.git synced 2024-11-29 09:02:03 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(nuxt): update to vue-bundle-renderer@0.4 (#6210)

Browse Source
This commit is contained in:
Daniel Roe 2022-08-07 10:52:34 +01:00 committed by GitHub
parent 2cbdc5c07f
commit 41d6f372a7
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
9 changed files with 75 additions and 88 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
packages/nuxt/package.json
View File

@ -67,7 +67,7 @@
"unplugin": "^0.8.1",
"untyped": "^0.4.5",
"vue": "^3.2.37",
"vue-bundle-renderer": "^0.3.9",
"vue-bundle-renderer": "^0.4.0",
"vue-router": "^4.1.3"
},
"devDependencies": {

2
packages/nuxt/src/app/nuxt.ts
View File

@ -4,7 +4,7 @@ import type { App, onErrorCaptured, VNode } from 'vue'
import { createHooks, Hookable } from 'hookable'
import type { RuntimeConfig } from '@nuxt/schema'
import { getContext } from 'unctx'
import type { SSRContext } from 'vue-bundle-renderer'
import type { SSRContext } from 'vue-bundle-renderer/runtime'
import type { CompatibilityEvent } from 'h3'
// eslint-disable-next-line import/no-restricted-paths
import type { NuxtRenderContext } from '../core/runtime/nitro/renderer'

63
packages/nuxt/src/core/runtime/nitro/renderer.ts
View File

@ -1,4 +1,5 @@
import { createRenderer } from 'vue-bundle-renderer'
import { createRenderer } from 'vue-bundle-renderer/runtime'
import type { Manifest } from 'vite'
import { eventHandler, useQuery } from 'h3'
import devalue from '@nuxt/devalue'
import { renderToString as _renderToString } from 'vue/server-renderer'
@ -31,7 +32,7 @@ export interface NuxtRenderResponse {
}
// @ts-ignore
const getClientManifest = () => import('#build/dist/server/client.manifest.mjs')
const getClientManifest: () => Promise<Manifest> = () => import('#build/dist/server/client.manifest.mjs')
.then(r => r.default || r)
.then(r => typeof r === 'function' ? r() : r)
@ -41,19 +42,20 @@ const getServerEntry = () => import('#build/dist/server/server.mjs').then(r => r
// -- SSR Renderer --
const getSSRRenderer = lazyCachedFunction(async () => {
// Load client manifest
const clientManifest = await getClientManifest()
if (!clientManifest) { throw new Error('client.manifest is not available') }
const manifest = await getClientManifest()
if (!manifest) { throw new Error('client.manifest is not available') }
// Load server bundle
const createSSRApp = await getServerEntry()
if (!createSSRApp) { throw new Error('Server bundle is not available') }
// Create renderer
const renderer = createRenderer(createSSRApp, {
clientManifest,
const options = {
manifest,
renderToString,
publicPath: buildAssetsURL()
})
buildAssetsURL
}
// Create renderer
const renderer = createRenderer(createSSRApp, options)
async function renderToString (input, context) {
const html = await _renderToString(input, context)
@ -69,7 +71,17 @@ const getSSRRenderer = lazyCachedFunction(async () => {
// -- SPA Renderer --
const getSPARenderer = lazyCachedFunction(async () => {
const clientManifest = await getClientManifest()
const manifest = await getClientManifest()
const options = {
manifest,
renderToString: () => '<div id="__nuxt"></div>',
buildAssetsURL
}
// Create SPA renderer and cache the result for all requests
const renderer = createRenderer(() => () => {}, options)
const result = await renderer.renderToString({})
const renderToString = (ssrContext: NuxtSSRContext) => {
const config = useRuntimeConfig()
ssrContext.payload = {
@ -79,35 +91,8 @@ const getSPARenderer = lazyCachedFunction(async () => {
app: config.app
}
}
let entryFiles = Object.values(clientManifest).filter((fileValue: any) => fileValue.isEntry)
if ('all' in clientManifest && 'initial' in clientManifest) {
// Upgrade legacy manifest (also see normalizeClientManifest in vue-bundle-renderer)
// https://github.com/nuxt-contrib/vue-bundle-renderer/issues/12
entryFiles = clientManifest.initial.map(file =>
// Webpack manifest fix with SPA renderer
file.endsWith('css') ? { css: file } : { file }
)
}
return Promise.resolve({
html: '<div id="__nuxt"></div>',
renderResourceHints: () => '',
renderStyles: () =>
entryFiles
.flatMap(({ css }) => css)
.filter(css => css != null)
.map(file => `<link rel="stylesheet" href="${buildAssetsURL(file)}">`)
.join(''),
renderScripts: () =>
entryFiles
.filter(({ file }) => file)
.map(({ file }) => {
const isMJS = !file.endsWith('.js')
return `<script ${isMJS ? 'type="module"' : ''} src="${buildAssetsURL(file)}"></script>`
})
.join('')
})
ssrContext.renderMeta = ssrContext.renderMeta ?? (() => ({}))
return Promise.resolve(result)
}
return { renderToString }

3
packages/vite/package.json
View File

@ -50,7 +50,8 @@
"unplugin": "^0.8.1",
"vite": "~3.0.4",
"vite-node": "^0.20.3",
"vite-plugin-checker": "^0.4.9"
"vite-plugin-checker": "^0.4.9",
"vue-bundle-renderer": "^0.4.0"
},
"peerDependencies": {
"vue": "^3.2.37"

37
packages/vite/src/manifest.ts
View File

@ -1,27 +1,29 @@
import fse from 'fs-extra'
import { resolve } from 'pathe'
import { joinURL, withoutLeadingSlash, withTrailingSlash } from 'ufo'
import { withoutLeadingSlash, withTrailingSlash } from 'ufo'
import escapeRE from 'escape-string-regexp'
import { normalizeViteManifest, Manifest } from 'vue-bundle-renderer'
import type { ViteBuildContext } from './vite'
export async function writeManifest (ctx: ViteBuildContext, extraEntries: string[] = []) {
export async function writeManifest (ctx: ViteBuildContext, css: string[] = []) {
// Write client manifest for use in vue-bundle-renderer
const clientDist = resolve(ctx.nuxt.options.buildDir, 'dist/client')
const serverDist = resolve(ctx.nuxt.options.buildDir, 'dist/server')
const entries = [
'@vite/client',
ctx.entry,
...extraEntries
]
// Legacy dev manifest
const devClientManifest = {
publicPath: joinURL(ctx.nuxt.options.app.baseURL, ctx.nuxt.options.app.buildAssetsDir),
all: entries,
initial: entries,
async: [],
modules: {}
const devClientManifest: Manifest = {
'@vite/client': {
isEntry: true,
file: '@vite/client',
css,
module: true,
resourceType: 'script'
},
[ctx.entry]: {
isEntry: true,
file: ctx.entry,
module: true,
resourceType: 'script'
}
}
const clientManifest = ctx.nuxt.options.dev
@ -43,6 +45,7 @@ export async function writeManifest (ctx: ViteBuildContext, extraEntries: string
}
await fse.mkdirp(serverDist)
await fse.writeFile(resolve(serverDist, 'client.manifest.json'), JSON.stringify(clientManifest, null, 2), 'utf8')
await fse.writeFile(resolve(serverDist, 'client.manifest.mjs'), 'export default ' + JSON.stringify(clientManifest, null, 2), 'utf8')
const manifest = normalizeViteManifest(clientManifest)
await fse.writeFile(resolve(serverDist, 'client.manifest.json'), JSON.stringify(manifest, null, 2), 'utf8')
await fse.writeFile(resolve(serverDist, 'client.manifest.mjs'), 'export default ' + JSON.stringify(manifest, null, 2), 'utf8')
}

29
packages/vite/src/vite-node.ts
View File

@ -5,6 +5,7 @@ import fse from 'fs-extra'
import { resolve } from 'pathe'
import { addServerMiddleware } from '@nuxt/kit'
import type { ModuleNode, Plugin as VitePlugin } from 'vite'
import { normalizeViteManifest } from 'vue-bundle-renderer'
import { resolve as resolveModule } from 'mlly'
import { distDir } from './dirs'
import type { ViteBuildContext } from './vite'
@ -48,22 +49,24 @@ export function registerViteNodeMiddleware (ctx: ViteBuildContext) {
}
function getManifest (ctx: ViteBuildContext) {
const ids = Array.from(ctx.ssrServer.moduleGraph.urlToModuleMap.keys())
const css = Array.from(ctx.ssrServer.moduleGraph.urlToModuleMap.keys())
.filter(i => isCSS(i))
const entries = [
'@vite/client',
ctx.entry,
...ids.map(i => i.slice(1))
]
return {
publicPath: '',
all: entries,
initial: entries,
async: [],
modules: {}
const manifest = normalizeViteManifest({
'@vite/client': {
file: '@vite/client',
css,
isEntry: true
},
[ctx.entry]: {
file: ctx.entry,
isEntry: true,
module: true,
resourceType: 'script'
}
})
return manifest
}
function createViteNodeMiddleware (ctx: ViteBuildContext, invalidates: Set<string> = new Set()) {

1
packages/webpack/package.json
View File

@ -47,6 +47,7 @@
"ufo": "^0.8.5",
"unplugin": "^0.8.1",
"url-loader": "^4.1.1",
"vue-bundle-renderer": "^0.4.0",
"vue-loader": "^17.0.0",
"webpack": "^5.74.0",
"webpack-bundle-analyzer": "^4.5.0",

3
packages/webpack/src/plugins/vue/client.ts
View File

@ -3,6 +3,7 @@
* https://github.com/vuejs/vue/blob/dev/src/server/webpack-plugin/client.js
*/
import { normalizeWebpackManifest } from 'vue-bundle-renderer'
import { dirname } from 'pathe'
import hash from 'hash-sum'
import { uniq } from 'lodash-es'
@ -109,7 +110,7 @@ export default class VueSSRClientPlugin {
}
})
const src = JSON.stringify(manifest, null, 2)
const src = JSON.stringify(normalizeWebpackManifest(manifest), null, 2)
await fse.mkdirp(dirname(this.options.filename))
await fse.writeFile(this.options.filename, src)

23
yarn.lock
View File

@ -1894,6 +1894,7 @@ __metadata:
vite-node: ^0.20.3
vite-plugin-checker: ^0.4.9
vue: 3.2.37
vue-bundle-renderer: ^0.4.0
peerDependencies:
vue: ^3.2.37
languageName: unknown
@ -1942,6 +1943,7 @@ __metadata:
unplugin: ^0.8.1
url-loader: ^4.1.1
vue: 3.2.37
vue-bundle-renderer: ^0.4.0
vue-loader: ^17.0.0
webpack: ^5.74.0
webpack-bundle-analyzer: ^4.5.0
@ -4066,15 +4068,6 @@ __metadata:
languageName: node
linkType: hard
"bundle-runner@npm:^0.0.1":
version: 0.0.1
resolution: "bundle-runner@npm:0.0.1"
dependencies:
source-map: ^0.7.3
checksum: 26a2f681a82e57b27e788fbce71096d9417af078c09b06d0038fade878417809732ea5a785b0e4dfbe69f2b4980f8523710fae9a59e883e2680fc92e90bfc2d3
languageName: node
linkType: hard
"byte-size@npm:^7.0.0":
version: 7.0.1
resolution: "byte-size@npm:7.0.1"
@ -10006,7 +9999,7 @@ __metadata:
unplugin: ^0.8.1
untyped: ^0.4.5
vue: ^3.2.37
vue-bundle-renderer: ^0.3.9
vue-bundle-renderer: ^0.4.0
vue-meta: next
vue-router: ^4.1.3
bin:
@ -13526,12 +13519,12 @@ __metadata:
languageName: node
linkType: hard
"vue-bundle-renderer@npm:^0.3.9":
version: 0.3.9
resolution: "vue-bundle-renderer@npm:0.3.9"
"vue-bundle-renderer@npm:^0.4.0":
version: 0.4.0
resolution: "vue-bundle-renderer@npm:0.4.0"
dependencies:
bundle-runner: ^0.0.1
checksum: 647ade1068533bd11c791608da9571f6125de9cd2c31cc26c6d7eb579b695558e7574979057d2a9ebbbcd600686516b6f9d222a99afc604936202d87bc4dbaa6
ufo: ^0.8.3
checksum: d27698c9b774dd8dac27861939d19935e3f2f5523f5f78f87290278bbee0f61a3c2516feaec88d59164257af96348b7bda67354e693fea71627c84a6141edb2b
languageName: node
linkType: hard