vuetify-nuxt-module 0.6.1 → 0.6.2

package/dist/module.json

@@ -4,5 +4,5 @@
   "compatibility": {
     "nuxt": "^3.0.0"
   },
-  "version": "0.6.1"
+  "version": "0.6.2"
 }

package/dist/module.mjs

@@ -15,7 +15,7 @@ import { parseQuery, parseURL } from 'ufo';
 import destr from 'destr';
 import { transformAssetUrls } from 'vite-plugin-vuetify';
 
-const version = "0.6.1";
+const version = "0.6.2";
 
 const VIRTUAL_VUETIFY_CONFIGURATION = "virtual:vuetify-configuration";
 const RESOLVED_VIRTUAL_VUETIFY_CONFIGURATION = `/@nuxt-vuetify-configuration/${VIRTUAL_VUETIFY_CONFIGURATION.slice("virtual:".length)}`;

package/dist/runtime/plugins/vuetify-client-hints.server.mjs

@@ -1,3 +1,4 @@
+import { setResponseHeader } from "h3";
 import {
   ssrClientHintsConfiguration
 } from "virtual:vuetify-ssr-client-hints-configuration";
@@ -8,19 +9,27 @@ import {
   defineNuxtPlugin,
   useCookie,
   useNuxtApp,
-  useRequestEvent,
+  useRequestHeaders,
   useState
 } from "#imports";
+const AcceptClientHintsHeaders = {
+  prefersColorScheme: "Sec-CH-Prefers-Color-Scheme",
+  prefersReducedMotion: "Sec-CH-Prefers-Reduced-Motion",
+  viewportHeight: "Sec-CH-Viewport-Height",
+  viewportWidth: "Sec-CH-Viewport-Width"
+};
+const AcceptClientHintsRequestHeaders = Object.entries(AcceptClientHintsHeaders).reduce((acc, [key, value]) => {
+  acc[key] = value.toLowerCase();
+  return acc;
+}, {});
+const HttpRequestHeaders = Array.from(Object.values(AcceptClientHintsRequestHeaders)).concat("user-agent", "cookie");
 export default defineNuxtPlugin((nuxtApp) => {
-  const event = useRequestEvent();
   const state = useState(VuetifyHTTPClientHints);
-  const request = event.node.req;
-  const response = event.node.res;
-  const requestHeaders = request.headers ?? {};
-  const userAgentHeader = readClientHeader("user-agent", requestHeaders);
+  const requestHeaders = useRequestHeaders(HttpRequestHeaders);
+  const userAgentHeader = requestHeaders["user-agent"];
   const userAgent = userAgentHeader ? parseUserAgent(userAgentHeader) : null;
   const clientHintsRequest = collectClientHints(userAgent, ssrClientHintsConfiguration, requestHeaders);
-  writeClientHintsResponseHeaders(clientHintsRequest, ssrClientHintsConfiguration, response);
+  writeClientHintsResponseHeaders(clientHintsRequest, ssrClientHintsConfiguration);
   state.value = clientHintsRequest;
   state.value.colorSchemeCookie = writeThemeCookie(
     clientHintsRequest,
@@ -47,12 +56,6 @@ export default defineNuxtPlugin((nuxtApp) => {
     })
   };
 });
-const AcceptClientHintsHeaders = {
-  prefersColorScheme: "Sec-CH-Prefers-Color-Scheme",
-  prefersReducedMotion: "Sec-CH-Prefers-Reduced-Motion",
-  viewportHeight: "Sec-CH-Viewport-Height",
-  viewportWidth: "Sec-CH-Viewport-Width"
-};
 const chromiumBasedBrowserFeatures = {
   prefersColorScheme: (_, v) => v[0] >= 93,
   prefersReducedMotion: (_, v) => v[0] >= 108,
@@ -72,17 +75,7 @@ const allowedBrowsers = [
     viewportWidth: (android, v) => v[0] >= (android ? 73 : 94)
   }]
 ];
-const AcceptClientHintsRequestHeaders = Object.entries(AcceptClientHintsHeaders).reduce((acc, [key, value]) => {
-  acc[key] = value.toLowerCase();
-  return acc;
-}, {});
 const ClientHeaders = ["Accept-CH", "Vary", "Critical-CH"];
-function readClientHeader(name, headers) {
-  const value = headers[name];
-  if (Array.isArray(value))
-    return value[0];
-  return value;
-}
 function browserFeatureAvailable(userAgent, feature) {
   if (userAgent == null || userAgent.type !== "browser")
     return false;
@@ -128,7 +121,7 @@ function collectClientHints(userAgent, ssrClientHintsConfiguration2, headers) {
   if (ssrClientHintsConfiguration2.prefersColorScheme) {
     if (ssrClientHintsConfiguration2.prefersColorSchemeOptions) {
       const cookieName = ssrClientHintsConfiguration2.prefersColorSchemeOptions.cookieName;
-      const cookieValue = readClientHeader("cookie", headers)?.split(";").find((c) => c.trim().startsWith(`${cookieName}=`));
+      const cookieValue = headers.cookie?.split(";").find((c) => c.trim().startsWith(`${cookieName}=`));
       if (cookieValue) {
         const value = cookieValue.split("=")?.[1].trim();
         if (ssrClientHintsConfiguration2.prefersColorSchemeOptions.themeNames.includes(value)) {
@@ -138,7 +131,7 @@ function collectClientHints(userAgent, ssrClientHintsConfiguration2, headers) {
       }
     }
     if (!hints.colorSchemeFromCookie) {
-      const value = hints.prefersColorSchemeAvailable ? readClientHeader(AcceptClientHintsRequestHeaders.prefersColorScheme, headers)?.toLowerCase() : void 0;
+      const value = hints.prefersColorSchemeAvailable ? headers[AcceptClientHintsRequestHeaders.prefersColorScheme]?.toLowerCase() : void 0;
       if (value === "dark" || value === "light" || value === "no-preference") {
         hints.prefersColorScheme = value;
         hints.firstRequest = false;
@@ -153,14 +146,14 @@ function collectClientHints(userAgent, ssrClientHintsConfiguration2, headers) {
     }
   }
   if (hints.prefersReducedMotionAvailable && ssrClientHintsConfiguration2.prefersReducedMotion) {
-    const value = readClientHeader(AcceptClientHintsRequestHeaders.prefersReducedMotion, headers)?.toLowerCase();
+    const value = headers[AcceptClientHintsRequestHeaders.prefersReducedMotion]?.toLowerCase();
     if (value === "no-preference" || value === "reduce") {
       hints.prefersReducedMotion = value;
       hints.firstRequest = false;
     }
   }
   if (hints.viewportHeightAvailable && ssrClientHintsConfiguration2.viewportSize) {
-    const header = readClientHeader(AcceptClientHintsRequestHeaders.viewportHeight, headers);
+    const header = headers[AcceptClientHintsRequestHeaders.viewportHeight];
     if (header) {
       hints.firstRequest = false;
       try {
@@ -173,7 +166,7 @@ function collectClientHints(userAgent, ssrClientHintsConfiguration2, headers) {
     hints.viewportHeight = ssrClientHintsConfiguration2.clientHeight;
   }
   if (hints.viewportWidthAvailable && ssrClientHintsConfiguration2.viewportSize) {
-    const header = readClientHeader(AcceptClientHintsRequestHeaders.viewportWidth, headers);
+    const header = headers[AcceptClientHintsRequestHeaders.viewportWidth];
     if (header) {
       hints.firstRequest = false;
       try {
@@ -192,15 +185,7 @@ function writeClientHintHeaders(key, headers) {
     headers[header] = (headers[header] ? headers[header] : []).concat(key);
   });
 }
-function withNuxtAppRendered(callback) {
-  const nuxtApp = useNuxtApp();
-  const unhook = nuxtApp.hooks.hookOnce("app:rendered", callback);
-  nuxtApp.hooks.hookOnce("app:error", () => {
-    unhook();
-    return callback();
-  });
-}
-function writeClientHintsResponseHeaders(clientHintsRequest, ssrClientHintsConfiguration2, response) {
+function writeClientHintsResponseHeaders(clientHintsRequest, ssrClientHintsConfiguration2) {
   const headers = {};
   if (ssrClientHintsConfiguration2.prefersColorScheme && clientHintsRequest.prefersColorSchemeAvailable)
     writeClientHintHeaders(AcceptClientHintsHeaders.prefersColorScheme, headers);
@@ -212,10 +197,17 @@ function writeClientHintsResponseHeaders(clientHintsRequest, ssrClientHintsConfi
   }
   if (Object.keys(headers).length === 0)
     return;
-  withNuxtAppRendered(() => {
+  const nuxtApp = useNuxtApp();
+  const callback = () => {
+    const event = useRequestEvent(nuxtApp);
     Object.entries(headers).forEach(([key, value]) => {
-      response.setHeader(key, value);
+      setResponseHeader(event, key, value);
     });
+  };
+  const unhook = nuxtApp.hooks.hookOnce("app:rendered", callback);
+  nuxtApp.hooks.hookOnce("app:error", () => {
+    unhook();
+    return callback();
   });
 }
 function writeThemeCookie(clientHintsRequest, ssrClientHintsConfiguration2) {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "vuetify-nuxt-module",
   "type": "module",
-  "version": "0.6.1",
+  "version": "0.6.2",
   "packageManager": "pnpm@8.10.2",
   "description": "Zero-Config Nuxt Module for Vuetify",
   "author": "userquin <userquin@gmail.com>",
@@ -129,4 +129,4 @@
     "installDependencies": false,
     "startCommand": "node .stackblitz.js && pnpm install && pnpm run dev"
   }
-}
+}