vuetify-nuxt-module 0.6.1 → 0.6.4

package/dist/module.json

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

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.4";
 
 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.client.mjs

@@ -50,8 +50,14 @@ export default defineNuxtPlugin((nuxtApp) => {
           clientHeight
         } : true;
       }
-      if (prefersColorScheme && prefersColorSchemeOptions)
-        vuetifyOptions.theme.defaultTheme = state.value.colorSchemeFromCookie ?? prefersColorSchemeOptions.defaultTheme;
+      if (prefersColorScheme && prefersColorSchemeOptions) {
+        if (vuetifyOptions.theme === false) {
+          vuetifyOptions.theme = { defaultTheme: state.value.colorSchemeFromCookie ?? prefersColorSchemeOptions.defaultTheme };
+        } else {
+          vuetifyOptions.theme = vuetifyOptions.theme ?? {};
+          vuetifyOptions.theme.defaultTheme = state.value.colorSchemeFromCookie ?? prefersColorSchemeOptions.defaultTheme;
+        }
+      }
     });
     if (prefersColorScheme && prefersColorSchemeOptions) {
       const themeCookie = state.value.colorSchemeCookie;

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";
@@ -9,18 +10,27 @@ import {
   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,
@@ -33,11 +43,20 @@ export default defineNuxtPlugin((nuxtApp) => {
       clientWidth,
       clientHeight
     } : true;
-    if (clientHintsRequest.colorSchemeFromCookie)
-      vuetifyOptions.theme.defaultTheme = clientHintsRequest.colorSchemeFromCookie;
+    if (clientHintsRequest.colorSchemeFromCookie) {
+      if (vuetifyOptions.theme === false) {
+        vuetifyOptions.theme = { defaultTheme: clientHintsRequest.colorSchemeFromCookie };
+      } else {
+        vuetifyOptions.theme ??= {};
+        vuetifyOptions.theme.defaultTheme = clientHintsRequest.colorSchemeFromCookie;
+      }
+    }
     await nuxtApp.hooks.callHook("vuetify:ssr-client-hints", {
       vuetifyOptions,
-      ssrClientHintsConfiguration,
+      ssrClientHintsConfiguration: {
+        ...ssrClientHintsConfiguration,
+        enabled: true
+      },
       ssrClientHints: state.value
     });
   });
@@ -47,12 +66,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 +85,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 +131,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 +141,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 +156,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 +176,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 +195,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 +207,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.4",
   "packageManager": "pnpm@8.10.2",
   "description": "Zero-Config Nuxt Module for Vuetify",
   "author": "userquin <userquin@gmail.com>",
@@ -43,24 +43,23 @@
     "*.mjs"
   ],
   "scripts": {
-    "build": "pnpm dev:prepare && nuxt-module-build",
+    "prepack": "nuxt-module-build",
     "dev": "nuxi dev playground",
     "dev:multiple-json": "MULTIPLE_LANG_FILES=true nuxi dev playground",
-    "dev:prepare": "nuxt-module-build --stub && nuxi prepare playground",
-    "dev:prepare:multiple-json": "nuxt-module-build --stub && MULTIPLE_LANG_FILES=true nuxi prepare playground",
+    "dev:prepare": "nuxt-module-build --stub && nuxt-module-build prepare && nuxi prepare playground",
+    "dev:prepare:multiple-json": "nuxt-module-build --stub && nuxt-module-build prepare && MULTIPLE_LANG_FILES=true nuxi prepare playground",
     "dev:build": "nuxi build playground",
     "dev:generate": "nuxi generate playground",
     "dev:build:multiple-json": "MULTIPLE_LANG_FILES=true nuxi build playground",
     "dev:generate:multiple-json": "MULTIPLE_LANG_FILES=true nuxi generate playground",
     "dev:preview": "nuxi preview playground",
     "docs:dev": "pnpm -C docs run dev",
-    "docs:build": "pnpm dev:prepare && pnpm -C docs run build",
+    "docs:build": "nuxt-module-build prepare && pnpm -C docs run build",
     "docs:serve": "pnpm -C docs run serve",
     "lint": "eslint .",
     "lint:fix": "nr lint --fix",
     "test": "vitest run",
     "test:watch": "vitest watch",
-    "prepublishOnly": "pnpm build",
     "release": "bumpp && npm publish"
   },
   "dependencies": {
@@ -129,4 +128,4 @@
     "installDependencies": false,
     "startCommand": "node .stackblitz.js && pnpm install && pnpm run dev"
   }
-}
+}