feat: add support for vite build (with vite-format manifest) (#450)

packages/nitro/package.json

@@ -67,7 +67,7 @@
     "unstorage": "^0.2.3",
     "upath": "^2.0.1",
     "vue": "3.2.9",
-    "vue-bundle-renderer": "^0.2.10",
+    "vue-bundle-renderer": "^0.3.0",
     "vue-server-renderer": "^2.6.14"
   },
   "devDependencies": {

packages/nitro/src/runtime/app/render.ts

@@ -21,7 +21,7 @@ const getSSRRenderer = cachedResult(async () => {
   if (!createSSRApp) { throw new Error('Server bundle is missing') }
   // Create renderer
   const { renderToString } = await import('#nitro-renderer')
-  return createRenderer((createSSRApp), { clientManifest, renderToString }).renderToString
+  return createRenderer((createSSRApp), { clientManifest, renderToString, publicPath: clientManifest.publicPath || '/_nuxt' }).renderToString
 })
 
 const getSPARenderer = cachedResult(async () => {

packages/vite/src/client.ts

@@ -1,11 +1,14 @@
 import * as vite from 'vite'
 import { resolve } from 'upath'
-import { mkdirp, writeFile } from 'fs-extra'
+import { mkdirp, readJSON, writeFile } from 'fs-extra'
+import consola from 'consola'
 import vitePlugin from '@vitejs/plugin-vue'
+
 import { cacheDirPlugin } from './plugins/cache-dir'
 import { replace } from './plugins/replace'
-import { ViteBuildContext, ViteOptions } from './vite'
 import { transformNuxtSetup } from './plugins/transformSetup'
+import { wpfs } from './utils/wpfs'
+import type { ViteBuildContext, ViteOptions } from './vite'
 
 export async function buildClient (ctx: ViteBuildContext) {
   const clientConfig: vite.InlineConfig = vite.mergeConfig(ctx.config, {
@@ -21,7 +24,14 @@ export async function buildClient (ctx: ViteBuildContext) {
       }
     },
     build: {
-      outDir: 'dist/client',
+      rollupOptions: {
+        output: {
+          chunkFileNames: ctx.nuxt.options.dev ? undefined : '[name]-[hash].mjs',
+          entryFileNames: ctx.nuxt.options.dev ? 'entry.mjs' : '[name]-[hash].mjs'
+        }
+      },
+      manifest: true,
+      outDir: resolve(ctx.nuxt.options.buildDir, 'dist/client'),
       assetsDir: '.'
     },
     plugins: [
@@ -37,19 +47,6 @@ export async function buildClient (ctx: ViteBuildContext) {
 
   await ctx.nuxt.callHook('vite:extendConfig', clientConfig, { isClient: true, isServer: false })
 
-  const clientManifest = {
-    publicPath: ctx.nuxt.options.build.publicPath,
-    all: [],
-    initial: [ctx.nuxt.options.dev && '@vite/client', 'entry.mjs'].filter(Boolean),
-    async: [],
-    modules: {}
-  }
-
-  const serverDist = resolve(ctx.nuxt.options.buildDir, 'dist/server')
-  await mkdirp(serverDist)
-  await writeFile(resolve(serverDist, 'client.manifest.json'), JSON.stringify(clientManifest, null, 2), 'utf8')
-  await writeFile(resolve(serverDist, 'client.manifest.mjs'), 'export default ' + JSON.stringify(clientManifest, null, 2), 'utf8')
-
   const viteServer = await vite.createServer(clientConfig)
   await ctx.nuxt.callHook('vite:serverCreated', viteServer)
 
@@ -66,4 +63,32 @@ export async function buildClient (ctx: ViteBuildContext) {
   ctx.nuxt.hook('close', async () => {
     await viteServer.close()
   })
+
+  if (!ctx.nuxt.options.dev) {
+    const start = Date.now()
+    await vite.build(clientConfig)
+    await ctx.nuxt.callHook('build:resources', wpfs)
+    consola.info(`Client built in ${Date.now() - start}ms`)
+  }
+
+  // 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')
+
+  // Legacy dev manifest
+  const devClientManifest = {
+    publicPath: ctx.nuxt.options.build.publicPath,
+    all: [],
+    initial: ['@vite/client', 'entry.mjs'],
+    async: [],
+    modules: {}
+  }
+
+  const clientManifest = ctx.nuxt.options.dev
+    ? devClientManifest
+    : await readJSON(resolve(clientDist, 'manifest.json'))
+
+  await mkdirp(serverDist)
+  await writeFile(resolve(serverDist, 'client.manifest.json'), JSON.stringify(clientManifest, null, 2), 'utf8')
+  await writeFile(resolve(serverDist, 'client.manifest.mjs'), 'export default ' + JSON.stringify(clientManifest, null, 2), 'utf8')
 }

yarn.lock

@@ -1526,7 +1526,7 @@ __metadata:
     unstorage: ^0.2.3
     upath: ^2.0.1
     vue: 3.2.9
-    vue-bundle-renderer: ^0.2.10
+    vue-bundle-renderer: ^0.3.0
     vue-server-renderer: ^2.6.14
   languageName: unknown
   linkType: soft
@@ -13783,12 +13783,12 @@ fsevents@~2.3.2:
   languageName: node
   linkType: hard
 
-"vue-bundle-renderer@npm:^0.2.10":
-  version: 0.2.10
-  resolution: "vue-bundle-renderer@npm:0.2.10"
+"vue-bundle-renderer@npm:^0.3.0":
+  version: 0.3.0
+  resolution: "vue-bundle-renderer@npm:0.3.0"
   dependencies:
     bundle-runner: ^0.0.1
-  checksum: a1c462deca857f1ce333cf8be72ab24306ba015f33190e00c0b6d5821783668001b1a1c13861e277b7452d625ac7cdf642fa2ceeb8f1d2bedb5e632a1275cede
+  checksum: 11600caea3afa7f8a4eeeb61c587d6b3558f32184446c3f1f22fade46a2dd94662371f125618c02a40095ae00437dafbabddc07a59b95dee063bf71d255d43ab
   languageName: node
   linkType: hard