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.

eslint.config.mjs

@@ -15,6 +15,8 @@ export default createConfigForNuxt({
     ],
   },
 })
-  .append(
+  .append([{
+    ignores: ['server-utils.d.ts'],
+  }],
     // your custom flat config here...
   )

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",
@@ -25,19 +25,10 @@
       "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"
   ],
@@ -53,7 +44,8 @@
     "test:types": "vue-tsc --noEmit && cd playground && vue-tsc --noEmit"
   },
   "dependencies": {
-    "detect-browser-es": "^0.1.1"
+    "detect-browser-es": "^0.1.1",
+    "http-client-hints": "^0.0.1"
   },
   "devDependencies": {
     "@nuxt/kit": "^3.13.2",

playground/server/dev-image.ts

@@ -4,8 +4,8 @@ import { Readable } from 'node:stream'
 import { lazyEventHandler, eventHandler, sendStream } from 'h3'
 import sharp from 'sharp'
 import { useNitro } from '@nuxt/kit'
-import { extractImageClientHints } from '../../src/runtime/server/utils'
-import type { ResolvedHttpClientHintsOptions, ServerHttpClientHintsOptions } from '../../src/runtime/server/utils'
+import { extractImageClientHints } from 'http-client-hints/h3'
+import type { ResolvedHttpClientHintsOptions, ServerHttpClientHintsOptions } from 'http-client-hints/h3'
 
 export default lazyEventHandler(async () => {
   const nitroOptions = useNitro().options

playground/server/image.ts

@@ -4,8 +4,8 @@ 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 { 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(() => {

src/module.ts

@@ -1,9 +1,9 @@
 import { createResolver, defineNuxtModule, useLogger } from '@nuxt/kit'
 import type { HookResult } from '@nuxt/schema'
+import type { HttpClientHintsState } from 'http-client-hints'
 import { version } from '../package.json'
 import type { HttpClientHintsOptions as ModuleOptions } from './types'
 import { configure } from './utils/configuration'
-import type { HttpClientHintsState } from './runtime/shared-types/types'
 
 export type { ModuleOptions }
 

src/runtime/plugins/critical.server.ts

@@ -1,6 +1,6 @@
 import type { parseUserAgent } from 'detect-browser-es'
-import { CriticalHintsHeaders, extractCriticalHints } from '../utils/critical'
-import type { ResolvedHttpClientHintsOptions } from '../shared-types/types'
+import { CriticalHintsHeaders, extractCriticalHints } from 'http-client-hints/critical'
+import type { ResolvedHttpClientHintsOptions } from 'http-client-hints'
 import { writeHeaders } from './headers'
 import { useHttpClientHintsState } from './utils'
 import { defineNuxtPlugin, useCookie, useRequestHeaders } from '#imports'

src/runtime/plugins/detect.client.ts

@@ -1,5 +1,5 @@
 import { browserName, detect, asyncDetect, detectOS, parseUserAgent } from 'detect-browser-es'
-import type { UserAgentHints } from '../shared-types/types'
+import type { UserAgentHints } from 'http-client-hints'
 import { defineNuxtPlugin } from '#imports'
 import type { Plugin } from '#app'
 

src/runtime/plugins/detect.server.ts

@@ -6,8 +6,8 @@ import {
   parseUserAgent,
 } from 'detect-browser-es'
 import { appendHeader } from 'h3'
-import type { ResolvedHttpClientHintsOptions, UserAgentHints } from '../shared-types/types'
-import { extractBrowser } from '../utils/detect'
+import type { ResolvedHttpClientHintsOptions, UserAgentHints } from 'http-client-hints'
+import { extractBrowserHints } from 'http-client-hints/detect'
 import { useHttpClientHintsState } from './utils'
 import {
   defineNuxtPlugin,
@@ -30,7 +30,7 @@ const plugin: Plugin = defineNuxtPlugin({
 
     const userAgentHeader = requestHeaders['user-agent']
 
-    const browser = await extractBrowser(
+    const browser = await extractBrowserHints(
       httpClientHints,
       requestHeaders,
       userAgentHeader,

src/runtime/plugins/device.server.ts

@@ -1,6 +1,6 @@
 import type { parseUserAgent } from 'detect-browser-es'
-import { extractDeviceHints, HttpRequestHeaders } from '../utils/device'
-import type { ResolvedHttpClientHintsOptions } from '../shared-types/types'
+import { extractDeviceHints, DeviceHintsHeaders } from 'http-client-hints/device'
+import type { ResolvedHttpClientHintsOptions } from 'http-client-hints'
 import { useHttpClientHintsState } from './utils'
 import { writeHeaders } from './headers'
 import { defineNuxtPlugin, useRequestHeaders } from '#imports'
@@ -17,7 +17,7 @@ const plugin: Plugin = defineNuxtPlugin({
     const httpClientHints = ssrContext._httpClientHintsOptions as ResolvedHttpClientHintsOptions
     const userAgent = ssrContext._httpClientHintsUserAgent as ReturnType<typeof parseUserAgent>
     const state = useHttpClientHintsState()
-    const requestHeaders = useRequestHeaders<string>(HttpRequestHeaders)
+    const requestHeaders = useRequestHeaders<string>(DeviceHintsHeaders)
     state.value.device = extractDeviceHints(httpClientHints, requestHeaders, userAgent, writeHeaders)
   },
 })

src/runtime/plugins/network.server.ts

@@ -1,6 +1,6 @@
 import type { parseUserAgent } from 'detect-browser-es'
-import { extractNetworkHints, NetworkHintsHeaders } from '../utils/network'
-import type { ResolvedHttpClientHintsOptions } from '../shared-types/types'
+import { extractNetworkHints, NetworkHintsHeaders } from 'http-client-hints/network'
+import type { ResolvedHttpClientHintsOptions } from 'http-client-hints'
 import { useHttpClientHintsState } from './utils'
 import { writeHeaders } from './headers'
 import { defineNuxtPlugin, useRequestHeaders } from '#imports'

src/runtime/plugins/types.d.ts

@@ -1,6 +1,6 @@
 import type { DeepReadonly } from '@vue/reactivity'
 import type { Browser, asyncDetect, detect, detectOS, parseUserAgent } from 'detect-browser-es'
-import type { HttpClientHintsState, UserAgentDataHints } from '../shared-types/types'
+import type { HttpClientHintsState, UserAgentDataHints } from 'http-client-hints'
 
 declare module '#app' {
   interface NuxtApp {

src/runtime/plugins/utils.ts

@@ -1,8 +1,8 @@
 import type {
   HttpClientHintsState,
   ResolvedHttpClientHintsOptions,
-  ServerHttpClientHintsOptions,
-} from '../shared-types/types'
+} from 'http-client-hints'
+import type { ServerHttpClientHintsOptions } from 'http-client-hints/h3'
 import { useAppConfig, useState } from '#imports'
 
 export function useHttpClientHintsState() {