feat: use http-client-hints

README.md

@@ -101,6 +101,8 @@ or in your modules, composables, or other plugins:
 const clientHints = useNuxtApp().$httpClientHints
 ```
 
+You can also use this module with [HTTP Client Hints for H3](https://github.com/userquin/http-client-hints/blob/main/src/h3.ts) (`http-client-hints/h3`) to add a custom [Nitro](https://github.com/unjs/nitro) image event handler to send back to the browser an optimized image from the original one. Check the [playground](https://github.com/userquin/nuxt-http-client-hints/tree/main/playground/server) server folder for an example using Nitro server handler in dev and production mode with [sharp](https://github.com/lovell/sharp).
+
 That's it! You can now use HTTP Client Hints in your Nuxt app ✨
 
 You can check the source code or the [JSDocs](https://www.jsdocs.io/package/nuxt-http-client-hints) for more information.

package.json

@@ -2,7 +2,7 @@
   "name": "nuxt-http-client-hints",
   "type": "module",
   "version": "0.0.2",
-  "packageManager": "[email protected].1",
+  "packageManager": "[email protected].3",
   "description": "Nuxt HTTP Client Hints",
   "author": "userquin <[email protected]>",
   "license": "MIT",
@@ -17,7 +17,7 @@
     "Device Client Hints",
     "Network Client Hints",
     "Browser detection",
-    "nuxt module"
+    "Nuxt module"
   ],
   "sideEffects": false,
   "exports": {
@@ -44,10 +44,11 @@
     "test:types": "vue-tsc --noEmit && cd playground && vue-tsc --noEmit"
   },
   "dependencies": {
-    "@nuxt/kit": "^3.13.2",
-    "detect-browser-es": "^0.1.1"
+    "detect-browser-es": "^0.1.1",
+    "http-client-hints": "^0.0.1"
   },
   "devDependencies": {
+    "@nuxt/kit": "^3.13.2",
     "@nuxt/devtools": "^1.5.0",
     "@nuxt/eslint-config": "^0.5.7",
     "@nuxt/module-builder": "^0.8.4",

playground/app.vue → playground/app/app.vue

@@ -8,7 +8,7 @@
   </div>
 </template>
 
-<script setup>
+<script setup lang="ts">
 const critical = useNuxtApp().$httpClientHints?.critical
 console.log(critical?.devicePixelRatio)
 </script>

playground/app/plugins/hints.client.ts

@@ -0,0 +1,7 @@
+export default defineNuxtPlugin({
+  setup(nuxt) {
+    nuxt.hook('http-client-hints:client-hints', (ssrClientHints) => {
+      console.log('http-client-hints:client-hints', ssrClientHints)
+    })
+  },
+})

playground/plugins/plugin.server.ts → playground/app/plugins/hints.server.ts

@@ -1,7 +1,7 @@
 export default defineNuxtPlugin({
   setup(nuxt) {
     nuxt.hook('http-client-hints:ssr-client-hints', (ssrClientHints) => {
-      console.log(ssrClientHints)
+      console.log('http-client-hints:ssr-client-hints', ssrClientHints)
     })
   },
 })

playground/modules/image.ts

@@ -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/nuxt.config.ts

@@ -3,6 +3,10 @@ export default defineNuxtConfig({
   devtools: { enabled: true },
   modules: ['../src/module'],
 
+  future: {
+    compatibilityVersion: 4,
+  },
+
   httpClientHints: {
     detectBrowser: true,
     detectOS: 'windows-11',
@@ -14,6 +18,21 @@ export default defineNuxtConfig({
       viewportSize: true,
       prefersColorScheme: true,
     },
+    serverImages: true,
+  },
+
+  nitro: {
+    /* handlers: [
+      {
+        middleware: true,
+        // route: '',
+        handler: './server/image',
+      },
+    ], */
+    /* devHandlers: [{
+      route: '',
+      handler: DevImage,
+    }], */
   },
 
 })

playground/package.json

@@ -8,6 +8,11 @@
     "generate": "nuxi generate"
   },
   "dependencies": {
-    "nuxt": "^3.13.2"
+    "nuxt": "^3.13.2",
+    "sharp": "^0.33.5"
+  },
+  "devDependencies": {
+    "typescript": "^5.6.3",
+    "vue-tsc": "^2.1.6"
   }
 }

playground/server/dev-image.ts

@@ -0,0 +1,71 @@
+import { lstat, readFile } from 'node:fs/promises'
+import { resolve } from 'node:path'
+import { Readable } from 'node:stream'
+import { lazyEventHandler, eventHandler, sendStream } from 'h3'
+import sharp from 'sharp'
+import { useNitro } from '@nuxt/kit'
+import { extractImageClientHints } from 'http-client-hints/h3'
+import type { ResolvedHttpClientHintsOptions, ServerHttpClientHintsOptions } from 'http-client-hints/h3'
+
+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)),
+  }
+
+  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
+      }
+    }
+  }
+})

playground/server/image.ts

@@ -0,0 +1,83 @@
+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 'http-client-hints/h3'
+import type { ResolvedHttpClientHintsOptions, ServerHttpClientHintsOptions } from 'http-client-hints/h3'
+// import { readAsset } from '#internal/nitro/virtual/public-assets-data'
+
+export default lazyEventHandler(() => {
+  const appConfig = useAppConfig()
+  const nitroApp = useNitroApp()
+  const {
+    serverImages,
+    ...rest
+  } = appConfig.httpClientHints as ServerHttpClientHintsOptions
+  const options: ResolvedHttpClientHintsOptions = {
+    ...rest,
+    serverImages: serverImages.map(r => new RegExp(r)),
+  }
+
+  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))
+        }
+      }
+    }
+  })
+
+  async function convertImage(path: string, width: number) {
+    /* try {
+      const image = await readAsset(path)
+      if (image) {
+        return await sharp(image).resize({ width }).toBuffer()
+      }
+    }
+    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()
+      }
+    }
+    catch {
+      // just ignore
+    }
+  }
+  // }
+
+  nitroApp.h3App.stack.unshift({
+    route: '',
+    handler,
+  })
+
+  return eventHandler(() => {})
+})