chore: add headers extraction helper

Author: userquin

playground/nuxt.config.ts

@@ -9,6 +9,7 @@ export default defineNuxtConfig({
     device: 'memory',
     critical: {
       width: true,
+      viewportSize: true,
       prefersColorScheme: true,
     },
   },

src/runtime/plugins/critical.server.ts

@@ -6,7 +6,7 @@ import type {
   CriticalClientHintsConfiguration,
 } from '../shared-types/types'
 import { useHttpClientHintsState } from './state'
-import { writeClientHintHeaders, writeHeaders } from './headers'
+import { lookupHeader, writeClientHintHeaders, writeHeaders } from './headers'
 import {
   defineNuxtPlugin,
   useCookie,
@@ -171,8 +171,12 @@ function lookupClientHints(
     // Since sec-ch-ua-mobile is a low entropy header, we don't need to include it in Accept-CH,
     // the user agent will send it always unless blocked by a user agent permission policy, check:
     // https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Sec-CH-UA-Mobile
-    const mobileHeader = headers[SecChUaMobile]
-    if (mobileHeader === '?1')
+    const mobileHeader = lookupHeader(
+      'boolean',
+      SecChUaMobile,
+      headers,
+    )
+    if (mobileHeader)
       features.devicePixelRatioAvailable = browserFeatureAvailable(userAgent, 'devicePixelRatio')
   }
 
@@ -239,48 +243,56 @@ function collectClientHints(
   }
 
   if (hints.viewportHeightAvailable && criticalClientHintsConfiguration.viewportSize) {
-    const header = headers[AcceptClientHintsRequestHeaders.viewportHeight]
-    if (header) {
+    const viewportHeight = lookupHeader(
+      'int',
+      AcceptClientHintsRequestHeaders.viewportHeight,
+      headers,
+    )
+    if (typeof viewportHeight === 'number') {
       hints.firstRequest = false
-      try {
-        hints.viewportHeight = Number.parseInt(header)
-      }
-      catch {
-        hints.viewportHeight = criticalClientHintsConfiguration.clientHeight
-      }
+      hints.viewportHeight = viewportHeight
+    }
+    else {
+      hints.viewportHeight = criticalClientHintsConfiguration.clientHeight
     }
   }
   else {
     hints.viewportHeight = criticalClientHintsConfiguration.clientHeight
   }
 
   if (hints.viewportWidthAvailable && criticalClientHintsConfiguration.viewportSize) {
-    const header = headers[AcceptClientHintsRequestHeaders.viewportWidth]
-    if (header) {
+    const viewportWidth = lookupHeader(
+      'int',
+      AcceptClientHintsRequestHeaders.viewportWidth,
+      headers,
+    )
+    if (typeof viewportWidth === 'number') {
       hints.firstRequest = false
-      try {
-        hints.viewportWidth = Number.parseInt(header)
-      }
-      catch {
-        hints.viewportWidth = criticalClientHintsConfiguration.clientWidth
-      }
+      hints.viewportWidth = viewportWidth
+    }
+    else {
+      hints.viewportWidth = criticalClientHintsConfiguration.clientWidth
     }
   }
   else {
     hints.viewportWidth = criticalClientHintsConfiguration.clientWidth
   }
 
   if (hints.devicePixelRatioAvailable && criticalClientHintsConfiguration.viewportSize) {
-    const header = headers[AcceptClientHintsRequestHeaders.devicePixelRatio]
-    if (header) {
+    const devicePixelRatio = lookupHeader(
+      'float',
+      AcceptClientHintsRequestHeaders.devicePixelRatio,
+      headers,
+    )
+    if (typeof devicePixelRatio === 'number') {
       hints.firstRequest = false
       try {
-        hints.devicePixelRatio = Number.parseFloat(header)
-        if (!Number.isNaN(hints.devicePixelRatio) && hints.devicePixelRatio > 0) {
+        hints.devicePixelRatio = devicePixelRatio
+        if (!Number.isNaN(devicePixelRatio) && devicePixelRatio > 0) {
           if (typeof hints.viewportWidth === 'number')
-            hints.viewportWidth = Math.round(hints.viewportWidth / hints.devicePixelRatio)
+            hints.viewportWidth = Math.round(hints.viewportWidth / devicePixelRatio)
           if (typeof hints.viewportHeight === 'number')
-            hints.viewportHeight = Math.round(hints.viewportHeight / hints.devicePixelRatio)
+            hints.viewportHeight = Math.round(hints.viewportHeight / devicePixelRatio)
         }
       }
       catch {
@@ -290,15 +302,14 @@ function collectClientHints(
   }
 
   if (hints.widthAvailable && criticalClientHintsConfiguration.width) {
-    const header = headers[AcceptClientHintsRequestHeaders.width]
-    if (header) {
+    const width = lookupHeader(
+      'int',
+      AcceptClientHintsRequestHeaders.width,
+      headers,
+    )
+    if (typeof width === 'number') {
       hints.firstRequest = false
-      try {
-        hints.width = Number.parseInt(header)
-      }
-      catch {
-        // just ignore
-      }
+      hints.width = width
     }
   }
 

src/runtime/plugins/device.server.ts

@@ -6,13 +6,17 @@ import type {
   ResolvedHttpClientHintsOptions,
 } from '../shared-types/types'
 import { useHttpClientHintsState } from './state'
-import { writeClientHintHeaders, writeHeaders } from './headers'
+import { type GetHeaderType, lookupHeader, writeClientHintHeaders, writeHeaders } from './headers'
 import { defineNuxtPlugin, useRequestHeaders, useRuntimeConfig } from '#imports'
 
 const DeviceClientHintsHeaders: Record<DeviceHints, string> = {
   memory: 'Device-Memory',
 }
 
+const DeviceClientHintsHeadersTypes: Record<DeviceHints, GetHeaderType> = {
+  memory: 'float',
+}
+
 type DeviceClientHintsHeadersKey = keyof typeof DeviceClientHintsHeaders
 
 const AcceptClientHintsRequestHeaders = Object.entries(DeviceClientHintsHeaders).reduce((acc, [key, value]) => {
@@ -119,18 +123,15 @@ function collectClientHints(
   const hints = lookupClientHints(userAgent, deviceHints)
 
   for (const hint of deviceHints) {
-    // TODO: review this logic, we need some helpers to parse headers
-    if (hint === 'memory') {
-      if (hints.memoryAvailable) {
-        const header = headers[AcceptClientHintsRequestHeaders.memory]
-        if (header) {
-          try {
-            hints.memory = Number.parseFloat(header)
-          }
-          catch {
-            // just ignore
-          }
-        }
+    if (hints[`${hint}Available`]) {
+      const value = lookupHeader(
+        DeviceClientHintsHeadersTypes[hint],
+        AcceptClientHintsRequestHeaders[hint],
+        headers,
+      )
+      console.log({ hint, value })
+      if (typeof value !== 'undefined') {
+        hints[hint] = value as typeof hints[typeof hint]
       }
     }
   }

src/runtime/plugins/headers.ts

@@ -26,3 +26,48 @@ export function writeHeaders(headers: Record<string, string[]>) {
     return callback()
   })
 }
+
+export type GetHeaderType = 'string' | 'int' | 'float' | 'boolean'
+type GetHeaderReturnType<T extends GetHeaderType> = T extends 'string'
+  ? string
+  : T extends 'int'
+    ? number
+    : T extends 'float'
+      ? number
+      : T extends 'boolean'
+        ? boolean
+        : never
+
+export function lookupHeader<T extends GetHeaderType>(
+  type: T,
+  key: Lowercase<string>,
+  headers: { [key in Lowercase<string>]?: string | undefined },
+): GetHeaderReturnType<T> | undefined {
+  const value = headers[key]
+  if (!value)
+    return undefined
+
+  if (type === 'string')
+    return value as GetHeaderReturnType<T>
+
+  if (type === 'int' || type === 'float') {
+    try {
+      const numberValue = type === 'int'
+        ? Number.parseInt(value)
+        : Number.parseFloat(value)
+      return Number.isNaN(numberValue)
+        ? undefined
+        : numberValue as GetHeaderReturnType<T>
+    }
+    catch {
+      return undefined
+    }
+  }
+
+  if (type === 'boolean') {
+    const booleanValue = value === '?1'
+    return booleanValue as GetHeaderReturnType<T>
+  }
+
+  return undefined
+}