chore: use logic inside the playground

Author: userquin

playground/nuxt.config.ts

@@ -23,6 +23,7 @@ export default defineNuxtConfig({
     handlers: [
       {
         middleware: true,
+        // route: '',
         handler: '~/server/image',
       },
     ],

playground/package.json

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

playground/server/dev-image.ts

@@ -1,7 +1,42 @@
+import { lstat, readFile } from 'node:fs/promises'
+import { resolve } from 'node:path'
 import { eventHandler } from 'h3'
+import { useNitro } from '@nuxt/kit'
+import sharp from 'sharp'
+import type { HttpClientHintsState } from '../../src/runtime/shared-types/types'
+import { extractHTTPClientHints } from './utils/image'
 
 export default eventHandler(async (event) => {
-  console.log('eventHandler:', event.path)
-  console.log('eventHandler:', event.context.httpClientHintsOptions)
-  console.log('eventHandler:', event.context.httpClientHints)
+  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)
+    }
+  }
 })
+
+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()
+      }
+    }
+    catch (_) {}
+  }
+}

playground/server/image.ts

@@ -1,5 +1,61 @@
-export default eventHandler(async (event) => {
-  console.log('eventHandler:', event.path)
-  console.log('eventHandler:', event.context.httpClientHintsOptions)
-  console.log('eventHandler:', event.context.httpClientHints)
+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'
+
+export default defineEventHandler(async (event) => {
+  console.log('request', useAppConfig().httpClientHints)
+  const {
+    serverImages,
+    ...rest
+  } = useAppConfig().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)
+      }
+      if (network) {
+        clientHints.network = extractNetworkHints(options, requestHeaders, userAgent)
+      }
+      if (critical) {
+        clientHints.critical = extractCriticalHints(options, requestHeaders, userAgent)
+      }
+      event.context.httpClientHintsOptions = options
+      event.context.httpClientHints = clientHints
+    }
+  }
+  catch (err) {
+    console.error(err)
+  }
 })

playground/server/utils/image.ts

@@ -0,0 +1,62 @@
+import { useAppConfig } from 'nitropack/runtime'
+import type { H3Event } from 'h3'
+import { parseUserAgent } from 'detect-browser-es'
+import { useNitro } from '@nuxt/kit'
+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'
+
+export async function extractHTTPClientHints(event: H3Event) {
+  const {
+    serverImages,
+    ...rest
+  } = useNitro().options.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)
+      }
+      if (network) {
+        clientHints.network = extractNetworkHints(options, requestHeaders, userAgent)
+      }
+      if (critical) {
+        clientHints.critical = extractCriticalHints(options, requestHeaders, userAgent)
+      }
+      event.context.httpClientHintsOptions = options
+      event.context.httpClientHints = clientHints
+    }
+  }
+  catch (err) {
+    console.error(err)
+  }
+}