chore: use v4 compat. in playground

chore: cleanup playground
chore: export server utils subpackage instead using nitro imports

Author: userquin

package.json

@@ -25,10 +25,19 @@
       "types": "./dist/types.d.mts",
       "default": "./dist/module.mjs"
     },
+    "./server-utils": {
+      "types": "./dist/runtime/server/utils.d.ts",
+      "default": "./dist/runtime/server/utils.js"
+    },
     "./package.json": "./package.json"
   },
   "main": "./dist/module.mjs",
   "types": "./dist/types.d.ts",
+  "typesVersions": {
+    "*": {
+      "server-utils": ["./dist/runtime/server/utils.d.ts"]
+    }
+  },
   "files": [
     "dist"
   ],
@@ -44,10 +53,10 @@
     "test:types": "vue-tsc --noEmit && cd playground && vue-tsc --noEmit"
   },
   "dependencies": {
-    "@nuxt/kit": "^3.13.2",
     "detect-browser-es": "^0.1.1"
   },
   "devDependencies": {
+    "@nuxt/kit": "^3.13.2",
     "@nuxt/devtools": "^1.5.0",
     "@nuxt/eslint-config": "^0.5.7",
     "@nuxt/module-builder": "^0.8.4",
@@ -62,6 +71,9 @@
     "vitest": "^2.1.1",
     "vue-tsc": "^2.1.6"
   },
+  "build": {
+    "externals": ["h3"]
+  },
   "stackblitz": {
     "installDependencies": false,
     "startCommand": "pnpm install && pnpm dev:prepare && pnpm dev"

playground/app.vue renamed to playground/app/app.vue

@@ -0,0 +1,21 @@
+import { addDevServerHandler, defineNuxtModule } from '@nuxt/kit'
+
+export default defineNuxtModule({
+  async setup(_, nuxt) {
+    if (nuxt.options.dev) {
+      addDevServerHandler({
+        route: '',
+        handler: await import('../server/dev-image').then(m => m.default),
+      })
+    }
+    else {
+      nuxt.hook('nitro:build:before', async (nitro) => {
+        nitro.options.handlers.unshift({
+          route: '',
+          handler: '~~/server/image',
+          middleware: true,
+        })
+      })
+    }
+  },
+})

playground/plugins/hints.client.ts renamed to playground/app/plugins/hints.client.ts

@@ -1,10 +1,12 @@
-import DevImage from './server/dev-image'
-
 export default defineNuxtConfig({
   compatibilityDate: '2024-10-11',
   devtools: { enabled: true },
   modules: ['../src/module'],
 
+  future: {
+    compatibilityVersion: 4,
+  },
+
   httpClientHints: {
     detectBrowser: true,
     detectOS: 'windows-11',
@@ -20,17 +22,17 @@ export default defineNuxtConfig({
   },
 
   nitro: {
-    handlers: [
+    /* handlers: [
       {
         middleware: true,
         // route: '',
-        handler: '~/server/image',
+        handler: './server/image',
       },
-    ],
-    devHandlers: [{
+    ], */
+    /* devHandlers: [{
       route: '',
       handler: DevImage,
-    }],
+    }], */
   },
 
 })

playground/plugins/hints.server.ts renamed to playground/app/plugins/hints.server.ts

@@ -9,7 +9,6 @@
   },
   "dependencies": {
     "nuxt": "^3.13.2",
-    "nuxt-http-client-hints": "workspace:*",
     "sharp": "^0.33.5"
   },
   "devDependencies": {

playground/modules/image.ts

@@ -1,42 +1,71 @@
 import { lstat, readFile } from 'node:fs/promises'
 import { resolve } from 'node:path'
-import { eventHandler } from 'h3'
-import { useNitro } from '@nuxt/kit'
+import { Readable } from 'node:stream'
+import { lazyEventHandler, eventHandler, sendStream } from 'h3'
 import sharp from 'sharp'
-import type { HttpClientHintsState } from '../../src/runtime/shared-types/types'
-import { extractHTTPClientHints } from './utils/image'
+import { useNitro } from '@nuxt/kit'
+import { extractImageClientHints } from '../../src/runtime/server/utils'
+import type { ResolvedHttpClientHintsOptions, ServerHttpClientHintsOptions } from '../../src/runtime/server/utils'
 
-export default eventHandler(async (event) => {
-  console.log('dev-image:', event.path)
-  await extractHTTPClientHints(event)
-  const httpClientHintsState: HttpClientHintsState | undefined = event.context.httpClientHints
-  const { widthAvailable = false, width = -1 } = httpClientHintsState?.critical ?? {}
-  if (widthAvailable && width > -1) {
-    const image = await convertImage(event.path, width)
-    if (image) {
-      console.log('dev-image:Sec-CH-Width:', width)
-      event.node.res.setHeader('Vary', 'Sec-CH-Width')
-      event.node.res.end(image)
-    }
+export default lazyEventHandler(async () => {
+  const nitroOptions = useNitro().options
+  const {
+    serverImages,
+    ...rest
+  } = nitroOptions.appConfig.httpClientHints as ServerHttpClientHintsOptions
+  const options: ResolvedHttpClientHintsOptions = {
+    ...rest,
+    serverImages: serverImages.map(r => new RegExp(r)),
   }
-})
 
-async function convertImage(path: string, width: number) {
-  if (path.startsWith('/')) {
-    path = path.slice(1)
-  }
-  const nitro = useNitro()
-  const folders = nitro.options.publicAssets
-  let image: string
-  for (const folder of folders) {
-    try {
-      console.log(folder.dir)
-      image = resolve(folder.dir, path)
-      const stats = await lstat(image)
-      if (stats.isFile()) {
-        return sharp(await readFile(image)).resize({ width }).toBuffer()
+  return eventHandler(async (event) => {
+    console.log('dev-image', event.path)
+    const clientHints = await extractImageClientHints(event, options)
+    console.log('dev-image', event.path, clientHints?.httpClientHints.critical)
+    if (clientHints) {
+      const {
+        widthAvailable = false,
+        width = -1,
+      } = clientHints.httpClientHints.critical ?? {}
+      if (widthAvailable && width > -1) {
+        const image = await convertImage(event.path, width)
+        if (image) {
+          console.log('dev-image:Sec-CH-Width:', width)
+          event.node.res.setHeader('Vary', 'Sec-CH-Width')
+          return sendStream(event, Readable.from(image))
+        }
+      }
+    }
+  })
+  async function convertImage(path: string, width: number) {
+    /* try {
+      const image = await readAsset(path)
+      if (image) {
+        return await sharp(image).resize({ width }).toBuffer()
+      }
+    }
+    catch {
+      // just ignore
+    }
+
+    // return undefined */
+    if (path.startsWith('/')) {
+      path = path.slice(1)
+    }
+    const folders = nitroOptions.publicAssets
+    let image: string
+    for (const folder of folders) {
+      try {
+        console.log(folder.dir)
+        image = resolve(folder.dir, path)
+        const stats = await lstat(image)
+        if (stats.isFile()) {
+          return await sharp(await readFile(image)).resize({ width }).toBuffer()
+        }
+      }
+      catch {
+        // just ignore
       }
     }
-    catch (_) {}
   }
-}
+})

playground/nuxt.config.ts

@@ -1,61 +1,83 @@
-import { useAppConfig } from 'nitropack/runtime'
-import { parseUserAgent } from 'detect-browser-es'
-import type {
-  HttpClientHintsState,
-  ResolvedHttpClientHintsOptions,
-  ServerHttpClientHintsOptions,
-} from '../../src/runtime/shared-types/types'
-import { extractBrowser } from '../../src/runtime/utils/detect'
-import { extractDeviceHints } from '../../src/runtime/utils/device'
-import { extractNetworkHints } from '../../src/runtime/utils/network'
-import { extractCriticalHints } from '../../src/runtime/utils/critical'
+import { lstat, readFile } from 'node:fs/promises'
+import { resolve } from 'node:path'
+import { Readable } from 'node:stream'
+import { fileURLToPath } from 'node:url'
+import { lazyEventHandler, eventHandler, sendStream } from 'h3'
+import sharp from 'sharp'
+import { extractImageClientHints } from '../../src/runtime/server/utils'
+import type { ResolvedHttpClientHintsOptions, ServerHttpClientHintsOptions } from '../../src/runtime/server/utils'
+// import { readAsset } from '#internal/nitro/virtual/public-assets-data'
 
-export default defineEventHandler(async (event) => {
-  console.log('request', useAppConfig().httpClientHints)
+export default lazyEventHandler(() => {
+  const appConfig = useAppConfig()
+  const nitroApp = useNitroApp()
   const {
     serverImages,
     ...rest
-  } = useAppConfig().httpClientHints as ServerHttpClientHintsOptions
+  } = appConfig.httpClientHints as ServerHttpClientHintsOptions
   const options: ResolvedHttpClientHintsOptions = {
     ...rest,
     serverImages: serverImages.map(r => new RegExp(r)),
   }
-  const critical = !!options.critical
-  const device = options.device.length > 0
-  const network = options.network.length > 0
-  const detect = options.detectOS || options.detectBrowser || options.userAgent.length > 0
 
-  try {
-    // expose the client hints in the context
-    const url = event.path
-    console.log('request', { url, match: options.serverImages?.some(r => url.match(r)) })
-    if (options.serverImages?.some(r => url.match(r))) {
-      const userAgentHeader = event.headers.get('user-agent')
-      const requestHeaders: { [key in Lowercase<string>]?: string } = {}
-      for (const [key, value] of event.headers.entries()) {
-        requestHeaders[key.toLowerCase() as Lowercase<string>] = value
-      }
-      const userAgent = userAgentHeader
-        ? parseUserAgent(userAgentHeader)
-        : null
-      const clientHints: HttpClientHintsState = {}
-      if (detect) {
-        clientHints.browser = await extractBrowser(options, requestHeaders as Record<string, string>, userAgentHeader ?? undefined)
-      }
-      if (device) {
-        clientHints.device = extractDeviceHints(options, requestHeaders, userAgent)
+  const publicFolder = resolve(fileURLToPath(import.meta.url), '../../public')
+
+  const handler = eventHandler(async (event) => {
+    console.log('dev-image', event.path)
+    const clientHints = await extractImageClientHints(event, options)
+    console.log('dev-image', event.path, clientHints?.httpClientHints.critical)
+    if (clientHints) {
+      const {
+        widthAvailable = false,
+        width = -1,
+      } = clientHints.httpClientHints.critical ?? {}
+      if (widthAvailable && width > -1) {
+        const image = await convertImage(event.path, width)
+        if (image) {
+          console.log('dev-image:Sec-CH-Width:', width)
+          event.node.res.setHeader('Vary', 'Sec-CH-Width')
+          return sendStream(event, Readable.from(image))
+        }
       }
-      if (network) {
-        clientHints.network = extractNetworkHints(options, requestHeaders, userAgent)
+    }
+  })
+
+  async function convertImage(path: string, width: number) {
+    /* try {
+      const image = await readAsset(path)
+      if (image) {
+        return await sharp(image).resize({ width }).toBuffer()
       }
-      if (critical) {
-        clientHints.critical = extractCriticalHints(options, requestHeaders, userAgent)
+    }
+    catch (e) {
+      // just ignore
+      console.error('WTF', e)
+    } */
+
+    // return undefined
+    if (path.startsWith('/')) {
+      path = path.slice(1)
+    }
+    // const folders = appConfig.publicAssets
+    // let image: string
+    // for (const folder of folders) {
+    try {
+      const image = resolve(publicFolder, path)
+      const stats = await lstat(image)
+      if (stats.isFile()) {
+        return await sharp(await readFile(image)).resize({ width }).toBuffer()
       }
-      event.context.httpClientHintsOptions = options
-      event.context.httpClientHints = clientHints
+    }
+    catch {
+      // just ignore
     }
   }
-  catch (err) {
-    console.error(err)
-  }
+  // }
+
+  nitroApp.h3App.stack.unshift({
+    route: '',
+    handler,
+  })
+
+  return eventHandler(() => {})
 })