feat!: upgrade to new major nitropack/h3 (#589)

Author: danielroe

package.json

@@ -50,12 +50,12 @@
     "fs-extra": "^10.1.0",
     "get-port-please": "^2.6.1",
     "globby": "^13.1.2",
-    "h3": "^0.7.21",
+    "h3": "^0.8.5",
     "hash-sum": "^2.0.0",
     "knitwork": "^0.1.2",
     "magic-string": "^0.26.7",
     "mlly": "^0.5.16",
-    "nitropack": "^0.5.4",
+    "nitropack": "^0.6.0",
     "node-fetch": "^3.2.10",
     "nuxi": "3.0.0-rc.12",
     "ohash": "^0.1.5",

playground/nuxt.config.ts

@@ -1,3 +1,4 @@
+import { defineEventHandler } from 'h3'
 import { defineNuxtConfig } from '..'
 
 // @ts-ignore
@@ -7,10 +8,9 @@ export default defineNuxtConfig({
   components: true,
   serverMiddleware: [
     {
-      handle (req, _res, next) {
-        req.spa = req.url.includes('?spa')
-        next()
-      }
+      handle: defineEventHandler((event) => {
+        event.req.spa = event.req.url.includes('?spa')
+      })
     }
   ],
   modules: [

playground/server/api/hello.ts

@@ -1 +1 @@
-export default () => 'Hello API'
+export default defineEventHandler(() => 'Hello API')

playground/server/api/hey/index.ts

@@ -1,4 +1,4 @@
-export default () => ({
+export default defineEventHandler(() => ({
   foo: 'bar',
   baz: 'qux'
-})
+}))

src/nitro.ts

@@ -6,7 +6,7 @@ import { addPluginTemplate, resolvePath, tryImportModule, useNuxt } from '@nuxt/
 import { joinURL, stringifyQuery, withBase, withoutTrailingSlash } from 'ufo'
 import { resolve, join, dirname, normalize } from 'pathe'
 import { createNitro, createDevServer, build, writeTypes, prepare, copyPublicAssets, prerender } from 'nitropack'
-import { dynamicEventHandler, toEventHandler } from 'h3'
+import { dynamicEventHandler } from 'h3'
 import type { Nitro, NitroEventHandler, NitroDevEventHandler, NitroConfig } from 'nitropack'
 import { Nuxt, NuxtPage } from '@nuxt/schema'
 import { defu } from 'defu'
@@ -65,7 +65,6 @@ export async function setupNitroBridge () {
     rootDir: resolve(nuxt.options.rootDir),
     srcDir: resolve(nuxt.options.srcDir, 'server'),
     dev: nuxt.options.dev,
-    preset: nuxt.options.dev ? 'nitro-dev' : undefined,
     buildDir: resolve(nuxt.options.buildDir),
     scanDirs: nuxt.options._layers.map(layer => join(layer.config.srcDir, 'server')),
     renderer: resolve(distDir, 'runtime/nitro/renderer'),
@@ -251,8 +250,8 @@ export async function setupNitroBridge () {
   })
 
   // Setup handlers
-  const devMidlewareHandler = dynamicEventHandler()
-  nitro.options.devHandlers.unshift({ handler: devMidlewareHandler })
+  const devMiddlewareHandler = dynamicEventHandler()
+  nitro.options.devHandlers.unshift({ handler: devMiddlewareHandler })
   const { handlers, devHandlers } = await resolveHandlers(nuxt)
   nitro.options.handlers.push(...handlers)
   nitro.options.devHandlers.push(...devHandlers)
@@ -359,7 +358,7 @@ export async function setupNitroBridge () {
     nuxt.hook('build:compile', ({ compiler }) => {
       compiler.outputFileSystem = { ...fsExtra, join } as any
     })
-    nuxt.hook('server:devMiddleware', (m) => { devMidlewareHandler.set(toEventHandler(m)) })
+    nuxt.hook('server:devHandler', (h) => { devMiddlewareHandler.set(h) })
   }
 
   // nuxt generate

src/runtime/composables.ts

@@ -197,9 +197,9 @@ export const navigateTo = (to: RawLocation, options: NavigateToOptions = {}): Pr
   const router = useRouter()
   if (process.server && useNuxtApp().ssrContext) {
     // Server-side redirection using h3 res from ssrContext
-    const res = useNuxtApp().ssrContext?.res
+    const event = useNuxtApp().ssrContext?.event
     const redirectLocation = joinURL(useRuntimeConfig().app.baseURL, router.resolve(to).fullPath || '/')
-    return sendRedirect(res, redirectLocation)
+    return sendRedirect(event, redirectLocation)
   }
   // Client-side redirection using vue-router
   return options.replace ? router.replace(to) : router.push(to)

src/runtime/cookie.ts

@@ -1,7 +1,7 @@
 import { Ref, ref, watch } from 'vue'
 import { parse, serialize, CookieParseOptions, CookieSerializeOptions } from 'cookie-es'
 import { appendHeader } from 'h3'
-import type { CompatibilityEvent } from 'h3'
+import type { H3Event } from 'h3'
 import destr from 'destr'
 import { useNuxtApp } from './app'
 import { useRequestEvent } from './ssr'
@@ -64,7 +64,7 @@ function writeClientCookie (name: string, value: any, opts: CookieSerializeOptio
   }
 }
 
-function writeServerCookie (event: CompatibilityEvent, name: string, value: any, opts: CookieSerializeOptions = {}) {
+function writeServerCookie (event: H3Event, name: string, value: any, opts: CookieSerializeOptions = {}) {
   if (event) {
     // TODO: Try to smart join with existing Set-Cookie headers
     appendHeader(event, 'Set-Cookie', serializeCookie(name, value, opts))

src/runtime/nitro/renderer.ts

@@ -1,6 +1,6 @@
 import { createRenderer } from 'vue-bundle-renderer/runtime'
 import type { SSRContext } from 'vue-bundle-renderer/runtime'
-import { CompatibilityEvent, getQuery } from 'h3'
+import { H3Event, getQuery } from 'h3'
 import devalue from '@nuxt/devalue'
 import type { RuntimeConfig } from '@nuxt/schema'
 import type { RenderResponse } from 'nitropack'
@@ -37,9 +37,11 @@ interface NuxtSSRContext extends SSRContext {
   url: string
   noSSR: boolean
   redirected?: boolean
-  event: CompatibilityEvent
-  req: CompatibilityEvent['req']
-  res: CompatibilityEvent['res']
+  event: H3Event
+  /** @deprecated use `ssrContext.event` instead */
+  req: H3Event['req']
+  /** @deprecated use `ssrContext.event` instead */
+  res: H3Event['res']
   runtimeConfig: RuntimeConfig
   error?: any
   nuxt?: any

src/runtime/ssr.ts

@@ -1,5 +1,5 @@
 /* eslint-disable no-redeclare */
-import type { CompatibilityEvent } from 'h3'
+import type { H3Event } from 'h3'
 import { NuxtAppCompat, useNuxtApp } from './app'
 
 export function useRequestHeaders<K extends string = string> (include: K[]): Record<K, string>
@@ -11,6 +11,6 @@ export function useRequestHeaders (include?) {
   return Object.fromEntries(include.filter(key => headers[key]).map(key => [key, headers[key]]))
 }
 
-export function useRequestEvent (nuxtApp: NuxtAppCompat = useNuxtApp()): CompatibilityEvent {
-  return nuxtApp.ssrContext?.event as CompatibilityEvent
+export function useRequestEvent (nuxtApp: NuxtAppCompat = useNuxtApp()): H3Event {
+  return nuxtApp.ssrContext?.event as H3Event
 }

src/vite/client.ts

@@ -1,10 +1,10 @@
 import { join, resolve } from 'pathe'
 import createVuePlugin from '@vitejs/plugin-vue2'
 import { logger } from '@nuxt/kit'
-import { joinURL, withLeadingSlash, withoutLeadingSlash, withTrailingSlash } from 'ufo'
-import escapeRE from 'escape-string-regexp'
+import { joinURL, withoutLeadingSlash } from 'ufo'
 import { getPort } from 'get-port-please'
-import type { ServerOptions, Connect, InlineConfig } from 'vite'
+import type { ServerOptions, InlineConfig } from 'vite'
+import { defineEventHandler } from 'h3'
 import defu from 'defu'
 import PluginLegacy from './stub-legacy.cjs'
 import { mergeConfig, createServer, build } from './stub-vite.cjs'
@@ -24,6 +24,9 @@ export async function buildClient (ctx: ViteBuildContext) {
   }
 
   const clientConfig: InlineConfig = await mergeConfig(ctx.config, {
+    base: ctx.nuxt.options.dev
+      ? joinURL(ctx.nuxt.options.app.baseURL.replace(/^\.\//, '/') || '/', ctx.nuxt.options.app.buildAssetsDir)
+      : './',
     experimental: {
       renderBuiltUrl: (filename, { type, hostType }) => {
         if (hostType !== 'js' || type === 'asset') {
@@ -104,18 +107,20 @@ export async function buildClient (ctx: ViteBuildContext) {
     const viteServer = await createServer(clientConfig)
     ctx.clientServer = viteServer
     await ctx.nuxt.callHook('vite:serverCreated', viteServer, { isClient: true, isServer: false })
-    const baseURL = joinURL(ctx.nuxt.options.app.baseURL.replace(/^\./, '') || '/', ctx.nuxt.options.app.buildAssetsDir)
-    const BASE_RE = new RegExp(`^${escapeRE(withTrailingSlash(withLeadingSlash(baseURL)))}`)
-    const viteMiddleware: Connect.NextHandleFunction = (req, res, next) => {
+    const viteMiddleware = defineEventHandler(async (event) => {
       // Workaround: vite devmiddleware modifies req.url
-      const originalURL = req.url
-      req.url = req.url.replace(BASE_RE, '/')
-      viteServer.middlewares.handle(req, res, (err: unknown) => {
-        req.url = originalURL
-        next(err)
+      const originalURL = event.req.url
+      if (!originalURL.startsWith(clientConfig.base!)) {
+        event.req.url = joinURL('/__url', originalURL)
+      }
+      await new Promise((resolve, reject) => {
+        viteServer.middlewares.handle(event.req, event.res, (err: Error) => {
+          event.req.url = originalURL
+          return err ? reject(err) : resolve(null)
+        })
       })
-    }
-    await ctx.nuxt.callHook('server:devMiddleware', viteMiddleware)
+    })
+    await ctx.nuxt.callHook('server:devHandler', viteMiddleware)
 
     ctx.nuxt.hook('close', async () => {
       await viteServer.close()