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

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": {

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'

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<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()
+  const manifest = await getClientManifest()
-  if (!clientManifest) { throw new Error('client.manifest is not available') }
+  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 options = {
-  const renderer = createRenderer(createSSRApp, {
+    manifest,
-    clientManifest,
     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
       }
     }
-
+    ssrContext.renderMeta = ssrContext.renderMeta ?? (() => ({}))
-    let entryFiles = Object.values(clientManifest).filter((fileValue: any) => fileValue.isEntry)
+    return Promise.resolve(result)
-    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('')
-    })
   }
 
   return { renderToString }

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"

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 = [
+  const devClientManifest: Manifest = {
-    '@vite/client',
+    '@vite/client': {
-    ctx.entry,
+      isEntry: true,
-    ...extraEntries
+      file: '@vite/client',
-  ]
+      css,
-
+      module: true,
-  // Legacy dev manifest
+      resourceType: 'script'
-  const devClientManifest = {
+    },
-    publicPath: joinURL(ctx.nuxt.options.app.baseURL, ctx.nuxt.options.app.buildAssetsDir),
+    [ctx.entry]: {
-    all: entries,
+      isEntry: true,
-    initial: entries,
+      file: ctx.entry,
-    async: [],
+      module: true,
-    modules: {}
+      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')
+  const manifest = normalizeViteManifest(clientManifest)
-  await fse.writeFile(resolve(serverDist, 'client.manifest.mjs'), 'export default ' + JSON.stringify(clientManifest, null, 2), 'utf8')
+  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')
 }

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 = [
+  const manifest = normalizeViteManifest({
-    '@vite/client',
+    '@vite/client': {
-    ctx.entry,
+      file: '@vite/client',
-    ...ids.map(i => i.slice(1))
+      css,
-  ]
+      isEntry: true
+    },
+    [ctx.entry]: {
+      file: ctx.entry,
+      isEntry: true,
+      module: true,
+      resourceType: 'script'
+    }
+  })
 
-  return {
+  return manifest
-    publicPath: '',
-    all: entries,
-    initial: entries,
-    async: [],
-    modules: {}
-  }
 }
 
 function createViteNodeMiddleware (ctx: ViteBuildContext, invalidates: Set<string> = new Set()) {

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",

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)

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":
+"vue-bundle-renderer@npm:^0.4.0":
-  version: 0.3.9
+  version: 0.4.0
-  resolution: "vue-bundle-renderer@npm:0.3.9"
+  resolution: "vue-bundle-renderer@npm:0.4.0"
   dependencies:
-    bundle-runner: ^0.0.1
+    ufo: ^0.8.3
-  checksum: 647ade1068533bd11c791608da9571f6125de9cd2c31cc26c6d7eb579b695558e7574979057d2a9ebbbcd600686516b6f9d222a99afc604936202d87bc4dbaa6
+  checksum: d27698c9b774dd8dac27861939d19935e3f2f5523f5f78f87290278bbee0f61a3c2516feaec88d59164257af96348b7bda67354e693fea71627c84a6141edb2b
   languageName: node
   linkType: hard