From 41d6f372a72927ed61f9f7b58980c0068be57899 Mon Sep 17 00:00:00 2001 From: Daniel Roe Date: Sun, 7 Aug 2022 10:52:34 +0100 Subject: [PATCH] feat(nuxt): update to `vue-bundle-renderer@0.4` (#6210) --- packages/nuxt/package.json | 2 +- packages/nuxt/src/app/nuxt.ts | 2 +- .../nuxt/src/core/runtime/nitro/renderer.ts | 63 +++++++------------ packages/vite/package.json | 3 +- packages/vite/src/manifest.ts | 37 ++++++----- packages/vite/src/vite-node.ts | 29 +++++---- packages/webpack/package.json | 1 + packages/webpack/src/plugins/vue/client.ts | 3 +- yarn.lock | 23 +++---- 9 files changed, 75 insertions(+), 88 deletions(-) diff --git a/packages/nuxt/package.json b/packages/nuxt/package.json index 4a4940af75..81a7b49a4f 100644 --- a/packages/nuxt/package.json +++ b/packages/nuxt/package.json @@ -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": { diff --git a/packages/nuxt/src/app/nuxt.ts b/packages/nuxt/src/app/nuxt.ts index 921da34959..d738e5738a 100644 --- a/packages/nuxt/src/app/nuxt.ts +++ b/packages/nuxt/src/app/nuxt.ts @@ -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' diff --git a/packages/nuxt/src/core/runtime/nitro/renderer.ts b/packages/nuxt/src/core/runtime/nitro/renderer.ts index 7f157c76bf..e23f964617 100644 --- a/packages/nuxt/src/core/runtime/nitro/renderer.ts +++ b/packages/nuxt/src/core/runtime/nitro/renderer.ts @@ -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 = () => 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: () => '
', + 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: '
', - renderResourceHints: () => '', - renderStyles: () => - entryFiles - .flatMap(({ css }) => css) - .filter(css => css != null) - .map(file => ``) - .join(''), - renderScripts: () => - entryFiles - .filter(({ file }) => file) - .map(({ file }) => { - const isMJS = !file.endsWith('.js') - return `` - }) - .join('') - }) + ssrContext.renderMeta = ssrContext.renderMeta ?? (() => ({})) + return Promise.resolve(result) } return { renderToString } diff --git a/packages/vite/package.json b/packages/vite/package.json index 3c0aad4a74..30c9473a2d 100644 --- a/packages/vite/package.json +++ b/packages/vite/package.json @@ -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" diff --git a/packages/vite/src/manifest.ts b/packages/vite/src/manifest.ts index bb59ac3b1f..068c77da7a 100644 --- a/packages/vite/src/manifest.ts +++ b/packages/vite/src/manifest.ts @@ -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') } diff --git a/packages/vite/src/vite-node.ts b/packages/vite/src/vite-node.ts index 89baf2b3de..7036a8ffee 100644 --- a/packages/vite/src/vite-node.ts +++ b/packages/vite/src/vite-node.ts @@ -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)) - ] + const manifest = normalizeViteManifest({ + '@vite/client': { + file: '@vite/client', + css, + isEntry: true + }, + [ctx.entry]: { + file: ctx.entry, + isEntry: true, + module: true, + resourceType: 'script' + } + }) - return { - publicPath: '', - all: entries, - initial: entries, - async: [], - modules: {} - } + return manifest } function createViteNodeMiddleware (ctx: ViteBuildContext, invalidates: Set = new Set()) { diff --git a/packages/webpack/package.json b/packages/webpack/package.json index 0e3706fca2..49cebed04a 100644 --- a/packages/webpack/package.json +++ b/packages/webpack/package.json @@ -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", diff --git a/packages/webpack/src/plugins/vue/client.ts b/packages/webpack/src/plugins/vue/client.ts index c200b891df..49c0e142ac 100644 --- a/packages/webpack/src/plugins/vue/client.ts +++ b/packages/webpack/src/plugins/vue/client.ts @@ -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) diff --git a/yarn.lock b/yarn.lock index 9c659e470a..d9de2a2d19 100644 --- a/yarn.lock +++ b/yarn.lock @@ -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