chore: replace runtime caching with app config

Author: userquin

src/runtime/plugins/critical.server.ts

@@ -1,9 +1,8 @@
 import type { parseUserAgent } from 'detect-browser-es'
 import { CriticalHintsHeaders, extractCriticalHints } from '../utils/critical'
-import type { ResolvedHttpClientHintsOptions } from '../shared-types/types'
-import { useHttpClientHintsState } from './state'
 import { writeHeaders } from './headers'
-import { defineNuxtPlugin, useCookie, useRequestHeaders, useRuntimeConfig } from '#imports'
+import { useHttpClientHintsOptions, useHttpClientHintsState } from './utils'
+import { defineNuxtPlugin, useCookie, useRequestHeaders } from '#imports'
 import type { Plugin } from '#app'
 
 const plugin: Plugin = defineNuxtPlugin({
@@ -14,7 +13,7 @@ const plugin: Plugin = defineNuxtPlugin({
   dependsOn: ['http-client-hints:init-server:plugin'],
   async setup(nuxtApp) {
     const state = useHttpClientHintsState()
-    const httpClientHints = useRuntimeConfig().public.httpClientHints as ResolvedHttpClientHintsOptions
+    const httpClientHints = useHttpClientHintsOptions()
     const requestHeaders = useRequestHeaders<string>(CriticalHintsHeaders)
     const userAgent = nuxtApp.ssrContext?._httpClientHintsUserAgent as ReturnType<typeof parseUserAgent>
     state.value.critical = extractCriticalHints(

src/runtime/plugins/detect.server.ts

@@ -6,14 +6,14 @@ import {
   parseUserAgent,
 } from 'detect-browser-es'
 import { appendHeader } from 'h3'
-import type { ResolvedHttpClientHintsOptions, UserAgentHints } from '../shared-types/types'
+import type { UserAgentHints } from '../shared-types/types'
 import { extractBrowser } from '../utils/detect'
-import { useHttpClientHintsState } from './state'
+import { useHttpClientHintsOptions, useHttpClientHintsState } from './utils'
 import {
   defineNuxtPlugin,
   useNuxtApp,
   useRequestEvent,
-  useRequestHeaders, useRuntimeConfig,
+  useRequestHeaders,
 } from '#imports'
 import type { Plugin } from '#app'
 
@@ -25,7 +25,7 @@ const plugin: Plugin = defineNuxtPlugin({
   dependsOn: ['http-client-hints:init-server:plugin'],
   async setup() {
     const state = useHttpClientHintsState()
-    const httpClientHints = useRuntimeConfig().public.httpClientHints as ResolvedHttpClientHintsOptions
+    const httpClientHints = useHttpClientHintsOptions()
     const requestHeaders = useRequestHeaders()
 
     const userAgentHeader = requestHeaders['user-agent']

src/runtime/plugins/device.server.ts

@@ -1,10 +1,9 @@
 import type { parseUserAgent } from 'detect-browser-es'
 import { extractDeviceHints, HttpRequestHeaders } from '../utils/device'
-import { useHttpClientHintsState } from './state'
+import { useHttpClientHintsOptions, useHttpClientHintsState } from './utils'
 import { writeHeaders } from './headers'
-import { defineNuxtPlugin, useRequestHeaders, useRuntimeConfig } from '#imports'
+import { defineNuxtPlugin, useRequestHeaders } from '#imports'
 import type { Plugin } from '#app'
-import type { ResolvedHttpClientHintsOptions } from '~/src/runtime/shared-types/types'
 
 const plugin: Plugin = defineNuxtPlugin({
   name: 'http-client-hints:device-server:plugin',
@@ -13,9 +12,9 @@ const plugin: Plugin = defineNuxtPlugin({
   // @ts-expect-error missing at build time
   dependsOn: ['http-client-hints:init-server:plugin'],
   setup(nuxtApp) {
-    const state = useHttpClientHintsState()
     const userAgent = nuxtApp.ssrContext?._httpClientHintsUserAgent as ReturnType<typeof parseUserAgent>
-    const httpClientHints = useRuntimeConfig().public.httpClientHints as ResolvedHttpClientHintsOptions
+    const state = useHttpClientHintsState()
+    const httpClientHints = useHttpClientHintsOptions()
     const requestHeaders = useRequestHeaders<string>(HttpRequestHeaders)
     state.value.device = extractDeviceHints(httpClientHints, requestHeaders, userAgent, writeHeaders)
   },

src/runtime/plugins/init.server.ts

@@ -1,5 +1,5 @@
 import { parseUserAgent } from 'detect-browser-es'
-import { useHttpClientHintsState } from './state'
+import { useHttpClientHintsState } from './utils'
 import { defineNuxtPlugin, useRequestHeaders } from '#imports'
 import type { Plugin } from '#app'
 

src/runtime/plugins/network.server.ts

@@ -1,10 +1,9 @@
 import type { parseUserAgent } from 'detect-browser-es'
 import { extractNetworkHints, NetworkHintsHeaders } from '../utils/network'
-import { useHttpClientHintsState } from './state'
+import { useHttpClientHintsOptions, useHttpClientHintsState } from './utils'
 import { writeHeaders } from './headers'
-import { defineNuxtPlugin, useRequestHeaders, useRuntimeConfig } from '#imports'
+import { defineNuxtPlugin, useRequestHeaders } from '#imports'
 import type { Plugin } from '#app'
-import type { ResolvedHttpClientHintsOptions } from '~/src/runtime/shared-types/types'
 
 const plugin: Plugin = defineNuxtPlugin({
   name: 'http-client-hints:network-server:plugin',
@@ -15,7 +14,7 @@ const plugin: Plugin = defineNuxtPlugin({
   setup(nuxtApp) {
     const state = useHttpClientHintsState()
     const userAgent = nuxtApp.ssrContext?._httpClientHintsUserAgent as ReturnType<typeof parseUserAgent>
-    const httpClientHints = useRuntimeConfig().public.httpClientHints as ResolvedHttpClientHintsOptions
+    const httpClientHints = useHttpClientHintsOptions()
     const requestHeaders = useRequestHeaders<string>(NetworkHintsHeaders)
     state.value.network = extractNetworkHints(httpClientHints, requestHeaders, userAgent, writeHeaders)
   },

src/runtime/plugins/state.ts

@@ -0,0 +1,18 @@
+import type {
+  HttpClientHintsState,
+  ResolvedHttpClientHintsOptions,
+  ServerHttpClientHintsOptions,
+} from '../shared-types/types'
+import { useAppConfig, useState } from '#imports'
+
+export function useHttpClientHintsState() {
+  return useState<HttpClientHintsState>('http-client-hints:state', () => ({}))
+}
+
+export function useHttpClientHintsOptions(): ResolvedHttpClientHintsOptions {
+  const { serverImages, ...rest } = useAppConfig().httpClientHints as ServerHttpClientHintsOptions
+  return {
+    ...rest,
+    serverImages: serverImages.map(r => new RegExp(r)),
+  }
+}

src/runtime/plugins/utils.ts

@@ -1,24 +1,23 @@
 import { defineNitroPlugin, useAppConfig } from 'nitropack/runtime'
 import { parseUserAgent } from 'detect-browser-es'
-import type { HttpClientHintsState, ResolvedHttpClientHintsOptions } from '../shared-types/types'
+import type {
+  HttpClientHintsState,
+  ResolvedHttpClientHintsOptions,
+  ServerHttpClientHintsOptions,
+} from '../shared-types/types'
 import { extractBrowser } from '../utils/detect'
 import { extractCriticalHints } from '../utils/critical'
 import { extractDeviceHints } from '../utils/device'
 import { extractNetworkHints } from '../utils/network'
 
-interface ServerRuntimeConfig extends Omit<ResolvedHttpClientHintsOptions, 'serverImages'> {
-  serverImages: string[]
-}
-
 export default defineNitroPlugin((nitroApp) => {
-  const { serverImages, ...rest } = useAppConfig().httpClientHints as ServerRuntimeConfig
+  const { serverImages, ...rest } = useAppConfig().httpClientHints as ServerHttpClientHintsOptions
   const options: ResolvedHttpClientHintsOptions = {
     ...rest,
     serverImages: serverImages.map(r => new RegExp(r)),
   }
-  console.log(options)
-  nitroApp.hooks.hook('afterResponse', async (event) => {
-    // we should add the vary header to the response
+  nitroApp.hooks.hook('afterResponse', async (_event) => {
+    // we should add the Vary header to the response: is there a way to check if the response has been committed?
   })
   nitroApp.hooks.hook('request', async (event) => {
     // expose the client hints in the context
@@ -48,15 +47,15 @@ export default defineNitroPlugin((nitroApp) => {
         if (detect) {
           clientHints.browser = await extractBrowser(options, requestHeaders as Record<string, string>, userAgentHeader ?? undefined)
         }
-        if (critical) {
-          clientHints.critical = extractCriticalHints(options, requestHeaders, userAgent)
-        }
         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.httpClientHints = clientHints
       }
     }

src/runtime/server/plugin.ts

@@ -180,3 +180,7 @@ export interface ResolvedHttpClientHintsOptions {
   critical?: CriticalClientHintsConfiguration
   serverImages?: RegExp[]
 }
+
+export interface ServerHttpClientHintsOptions extends Omit<ResolvedHttpClientHintsOptions, 'serverImages'> {
+  serverImages: string[]
+}

src/runtime/shared-types/types.ts

@@ -125,8 +125,6 @@ export function configure(ctx: HttpClientHintsContext, nuxt: Nuxt) {
     resolvedOptions.detectOS = options.detectOS
   }
 
-  nuxt.options.runtimeConfig.public.httpClientHints = resolvedOptions
-
   addPlugin(resolver.resolve(runtimeDir, 'plugins/init.server'))
 
   if (resolvedOptions.detectBrowser || resolvedOptions.detectOS || resolvedOptions.userAgent.length) {
@@ -161,21 +159,22 @@ export function configure(ctx: HttpClientHintsContext, nuxt: Nuxt) {
     )
   }) */
 
-  resolvedOptions.serverImages = serverImages
+  const useServerImages = serverImages
     ? serverImages === true
       ? [/\.(png|jpeg|jpg|webp|avi)$/]
       : Array.isArray(serverImages)
         ? serverImages
         : [serverImages]
     : undefined
 
+  const { serverImages: _, ...rest } = resolvedOptions
+  nuxt.options.appConfig.httpClientHints = {
+    ...rest,
+    serverImages: useServerImages ? useServerImages.map(r => r.source) : undefined,
+  }
+
   if (resolvedOptions.serverImages?.length) {
     addServerPlugin(resolver.resolve(runtimeDir, 'server/plugin'))
-    const { serverImages, ...rest } = resolvedOptions
-    nuxt.options.appConfig.httpClientHints = {
-      ...rest,
-      serverImages: serverImages.map(r => r.source),
-    }
     /* nuxt.hook('nitro:init', (nitro) => {
       nitro.options.appConfig.public ??= {}
       nitro.options.appConfig.public.httpClientHints = resolvedOptions