chore: cleanup

Author: userquin

playground/nuxt.config.ts

@@ -7,7 +7,8 @@ export default defineNuxtConfig({
     detectBrowser: true,
     detectOS: 'windows-11',
     device: 'memory',
-    network: ['savedata', 'downlink', 'ect', 'rtt'],
+    network: true,
+    userAgent: true,
     critical: {
       width: true,
       viewportSize: true,

src/module.ts

@@ -1,4 +1,4 @@
-import { createResolver, defineNuxtModule } from '@nuxt/kit'
+import { createResolver, defineNuxtModule, useLogger } from '@nuxt/kit'
 import type { HookResult } from '@nuxt/schema'
 import { version } from '../package.json'
 import type { HttpClientHintsOptions as ModuleOptions } from './types'
@@ -12,9 +12,11 @@ export interface ModuleRuntimeHooks {
   'http-client-hints:ssr-client-hints': (clientHints: HttpClientHintsState) => HookResult
 }
 
+const NAME = 'http-client-hints'
+
 export default defineNuxtModule<ModuleOptions>({
   meta: {
-    name: 'http-client-hints',
+    name: NAME,
     configKey: 'httpClientHints',
     compatibility: {
       nuxt: '>=3.9.0',
@@ -25,6 +27,22 @@ export default defineNuxtModule<ModuleOptions>({
     detectBrowser: false,
   }),
   setup(options, nuxt) {
-    configure(createResolver(import.meta.url), options, nuxt)
+    configure(
+      {
+        resolver: createResolver(import.meta.url),
+        logger: useLogger(`nuxt:${NAME}`),
+        options,
+        resolvedOptions: {
+          detectBrowser: false,
+          detectOS: false,
+          userAgent: [],
+          network: [],
+          device: [],
+        },
+        clientDependsOn: [],
+        serverDependsOn: [],
+      },
+      nuxt,
+    )
   },
 })

src/runtime/plugins/critical.client.ts

@@ -1,5 +1,4 @@
-import type { Browser } from 'detect-browser-es'
-import { parseUserAgent } from 'detect-browser-es'
+import type { Browser, parseUserAgent } from 'detect-browser-es'
 import type {
   ResolvedHttpClientHintsOptions,
   CriticalInfo,
@@ -40,16 +39,13 @@ export default defineNuxtPlugin({
   parallel: true,
   // @ts-expect-error missing at build time
   dependsOn: ['http-client-hints:init-server:plugin'],
-  async setup() {
+  async setup(nuxtApp) {
     const state = useHttpClientHintsState()
     const httpClientHints = useRuntimeConfig().public.httpClientHints as ResolvedHttpClientHintsOptions
     const requestHeaders = useRequestHeaders<string>(HttpRequestHeaders)
-    const userAgentHeader = requestHeaders['user-agent']
 
     // 1. extract browser info
-    const userAgent = userAgentHeader
-      ? parseUserAgent(userAgentHeader)
-      : null
+    const userAgent = nuxtApp.ssrContext?._httpClientHintsUserAgent as ReturnType<typeof parseUserAgent>
     // 2. prepare client hints request
     const clientHintsRequest = collectClientHints(userAgent, httpClientHints.critical!, requestHeaders)
     // 3. write client hints response headers

src/runtime/plugins/critical.server.ts

@@ -1,5 +1,4 @@
-import type { Browser } from 'detect-browser-es'
-import { parseUserAgent } from 'detect-browser-es'
+import type { Browser, parseUserAgent } from 'detect-browser-es'
 import type {
   DeviceInfo,
   DeviceHints,
@@ -32,16 +31,13 @@ export default defineNuxtPlugin({
   parallel: true,
   // @ts-expect-error missing at build time
   dependsOn: ['http-client-hints:init-server:plugin'],
-  setup() {
+  setup(nuxtApp) {
     const state = useHttpClientHintsState()
     const httpClientHints = useRuntimeConfig().public.httpClientHints as ResolvedHttpClientHintsOptions
     const requestHeaders = useRequestHeaders<string>(HttpRequestHeaders)
-    const userAgentHeader = requestHeaders['user-agent']
 
     // 1. extract browser info
-    const userAgent = userAgentHeader
-      ? parseUserAgent(userAgentHeader)
-      : null
+    const userAgent = nuxtApp.ssrContext?._httpClientHintsUserAgent as ReturnType<typeof parseUserAgent>
     // 2. prepare client hints request
     const clientHintsRequest = collectClientHints(userAgent, httpClientHints.device!, requestHeaders)
     // 3. write client hints response headers

src/runtime/plugins/device.client.ts

@@ -1,11 +1,18 @@
+import { parseUserAgent } from 'detect-browser-es'
 import { useHttpClientHintsState } from './state'
-import { defineNuxtPlugin } from '#imports'
+import { defineNuxtPlugin, useRequestHeaders } from '#imports'
 
 export default defineNuxtPlugin({
   name: 'http-client-hints:init-server:plugin',
   enforce: 'pre',
   parallel: false,
-  setup() {
+  setup(nuxtApp) {
     useHttpClientHintsState()
+    const ssrContext = nuxtApp.ssrContext!
+    const requestHeaders = useRequestHeaders<string>(['user-agent'])
+    const userAgentHeader = requestHeaders['user-agent']
+    ssrContext._httpClientHintsUserAgent = userAgentHeader
+      ? parseUserAgent(userAgentHeader)
+      : null
   },
 })

src/runtime/plugins/device.server.ts

@@ -1,5 +1,4 @@
-import type { Browser } from 'detect-browser-es'
-import { parseUserAgent } from 'detect-browser-es'
+import type { Browser, parseUserAgent } from 'detect-browser-es'
 import type { NetworkInfo, NetworkHints, ResolvedHttpClientHintsOptions } from '../shared-types/types'
 import { useHttpClientHintsState } from './state'
 import type { GetHeaderType } from './headers'
@@ -35,16 +34,13 @@ export default defineNuxtPlugin({
   parallel: true,
   // @ts-expect-error missing at build time
   dependsOn: ['http-client-hints:init-server:plugin'],
-  setup() {
+  setup(nuxtApp) {
     const state = useHttpClientHintsState()
     const httpClientHints = useRuntimeConfig().public.httpClientHints as ResolvedHttpClientHintsOptions
     const requestHeaders = useRequestHeaders<string>(HttpRequestHeaders)
-    const userAgentHeader = requestHeaders['user-agent']
 
     // 1. extract browser info
-    const userAgent = userAgentHeader
-      ? parseUserAgent(userAgentHeader)
-      : null
+    const userAgent = nuxtApp.ssrContext?._httpClientHintsUserAgent as ReturnType<typeof parseUserAgent>
     // 2. prepare client hints request
     const clientHintsRequest = collectClientHints(userAgent, httpClientHints.network!, requestHeaders)
     // 3. write client hints response headers
@@ -147,7 +143,6 @@ function collectClientHints(
         AcceptClientHintsRequestHeaders[hint],
         headers,
       )
-      console.log({ hint, value })
       if (typeof value !== 'undefined') {
         // @ts-expect-error Type 'number | "on" | NetworkECT | undefined' is not assignable to type 'undefined'.
         hints[hint] = value as typeof hints[typeof hint]