vuetify-nuxt-module 0.15.2 → 0.16.1

package/dist/module.json

@@ -5,5 +5,5 @@
     "nuxt": ">=3.9.0",
     "bridge": false
   },
-  "version": "0.15.2"
+  "version": "0.16.1"
 }

package/dist/module.mjs

@@ -14,7 +14,7 @@ import { pathToFileURL } from 'node:url';
 import { parseQuery, parseURL } from 'ufo';
 import destr from 'destr';
 
-const version = "0.15.2";
+const version = "0.16.1";
 
 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/types.d.ts

@@ -7,12 +7,14 @@ export interface ClientHintRequestFeatures {
   prefersReducedMotionAvailable: boolean
   viewportHeightAvailable: boolean
   viewportWidthAvailable: boolean
+  devicePixelRatioAvailable: boolean
 }
 export interface SSRClientHints extends ClientHintRequestFeatures {
   prefersColorScheme?: 'dark' | 'light' | 'no-preference'
   prefersReducedMotion?: 'no-preference' | 'reduce'
   viewportHeight?: number
   viewportWidth?: number
+  devicePixelRatio?: number
   colorSchemeFromCookie?: string
   colorSchemeCookie?: string
 }

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

@@ -44,46 +44,46 @@ const plugin = defineNuxtPlugin({
       if (viewportSize && viewportWidthAvailable)
         window.location.reload();
     }
-    if (viewportSize || prefersColorScheme && prefersColorSchemeOptions) {
-      nuxtApp.hook("vuetify:before-create", ({ vuetifyOptions }) => {
-        if (viewportSize) {
-          const clientWidth = state.value.viewportWidth;
-          const clientHeight = state.value.viewportHeight;
-          vuetifyOptions.ssr = typeof clientWidth === "number" ? {
-            clientWidth,
-            clientHeight
-          } : true;
-        }
-        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;
-          }
-        }
-      });
+    nuxtApp.hook("vuetify:before-create", ({ vuetifyOptions }) => {
+      if (viewportSize) {
+        const clientWidth = state.value.viewportWidth;
+        const clientHeight = state.value.viewportHeight;
+        vuetifyOptions.ssr = typeof clientWidth === "number" ? {
+          clientWidth,
+          clientHeight
+        } : true;
+      } else {
+        vuetifyOptions.ssr = true;
+      }
       if (prefersColorScheme && prefersColorSchemeOptions) {
-        const themeCookie = state.value.colorSchemeCookie;
-        if (themeCookie) {
-          nuxtApp.hook("app:beforeMount", () => {
-            const vuetify = useNuxtApp().$vuetify;
-            const cookieName = prefersColorSchemeOptions.cookieName;
-            const parseCookieName = `${cookieName}=`;
-            const cookieEntry = `${parseCookieName}${state.value.colorSchemeFromCookie ?? prefersColorSchemeOptions.defaultTheme};`;
-            watch(vuetify.theme.global.name, (newThemeName) => {
-              document.cookie = themeCookie.replace(cookieEntry, `${cookieName}=${newThemeName};`);
-            });
-            if (prefersColorSchemeOptions.useBrowserThemeOnly) {
-              const { darkThemeName, lightThemeName } = prefersColorSchemeOptions;
-              const prefersDark = window.matchMedia("(prefers-color-scheme: dark)");
-              prefersDark.addEventListener("change", (e) => {
-                vuetify.theme.global.name.value = e.matches ? darkThemeName : lightThemeName;
-              });
-            }
-          });
+        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;
+      if (themeCookie) {
+        nuxtApp.hook("app:beforeMount", () => {
+          const vuetify = useNuxtApp().$vuetify;
+          const cookieName = prefersColorSchemeOptions.cookieName;
+          const parseCookieName = `${cookieName}=`;
+          const cookieEntry = `${parseCookieName}${state.value.colorSchemeFromCookie ?? prefersColorSchemeOptions.defaultTheme};`;
+          watch(vuetify.theme.global.name, (newThemeName) => {
+            document.cookie = themeCookie.replace(cookieEntry, `${cookieName}=${newThemeName};`);
+          });
+          if (prefersColorSchemeOptions.useBrowserThemeOnly) {
+            const { darkThemeName, lightThemeName } = prefersColorSchemeOptions;
+            const prefersDark = window.matchMedia("(prefers-color-scheme: dark)");
+            prefersDark.addEventListener("change", (e) => {
+              vuetify.theme.global.name.value = e.matches ? darkThemeName : lightThemeName;
+            });
+          }
+        });
+      }
     }
     return {
       provide: reactive({

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

@@ -17,16 +17,18 @@ const AcceptClientHintsHeaders = {
   prefersColorScheme: "Sec-CH-Prefers-Color-Scheme",
   prefersReducedMotion: "Sec-CH-Prefers-Reduced-Motion",
   viewportHeight: "Sec-CH-Viewport-Height",
-  viewportWidth: "Sec-CH-Viewport-Width"
+  viewportWidth: "Sec-CH-Viewport-Width",
+  devicePixelRatio: "Sec-CH-DPR"
 };
 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");
+const SecChUaMobile = "Sec-CH-UA-Mobile".toLowerCase();
+const HttpRequestHeaders = Array.from(Object.values(AcceptClientHintsRequestHeaders)).concat("user-agent", "cookie", SecChUaMobile);
 const plugin = defineNuxtPlugin({
   name: "vuetify:client-hints:server:plugin",
-  order: -25,
+  order: 24,
   parallel: true,
   setup(nuxtApp) {
     const state = useState(VuetifyHTTPClientHints);
@@ -75,19 +77,24 @@ const chromiumBasedBrowserFeatures = {
   prefersColorScheme: (_, v) => v[0] >= 93,
   prefersReducedMotion: (_, v) => v[0] >= 108,
   viewportHeight: (_, v) => v[0] >= 108,
-  viewportWidth: (_, v) => v[0] >= 108
+  viewportWidth: (_, v) => v[0] >= 108,
+  devicePixelRatio: (_, v) => v[0] >= 46
 };
 const allowedBrowsers = [
   // 'edge',
   // 'edge-ios',
   ["chrome", chromiumBasedBrowserFeatures],
-  ["edge-chromium", chromiumBasedBrowserFeatures],
+  ["edge-chromium", {
+    ...chromiumBasedBrowserFeatures,
+    devicePixelRatio: (_, v) => v[0] >= 79
+  }],
   ["chromium-webview", chromiumBasedBrowserFeatures],
   ["opera", {
     prefersColorScheme: (android, v) => v[0] >= (android ? 66 : 79),
     prefersReducedMotion: (android, v) => v[0] >= (android ? 73 : 94),
     viewportHeight: (android, v) => v[0] >= (android ? 73 : 94),
-    viewportWidth: (android, v) => v[0] >= (android ? 73 : 94)
+    viewportWidth: (android, v) => v[0] >= (android ? 73 : 94),
+    devicePixelRatio: (_, v) => v[0] >= 33
   }]
 ];
 const ClientHeaders = ["Accept-CH", "Vary", "Critical-CH"];
@@ -111,13 +118,14 @@ function browserFeatureAvailable(userAgent, feature) {
     return false;
   }
 }
-function lookupClientHints(userAgent, ssrClientHintsConfiguration2) {
+function lookupClientHints(userAgent, ssrClientHintsConfiguration2, headers) {
   const features = {
     firstRequest: true,
     prefersColorSchemeAvailable: false,
     prefersReducedMotionAvailable: false,
     viewportHeightAvailable: false,
-    viewportWidthAvailable: false
+    viewportWidthAvailable: false,
+    devicePixelRatioAvailable: false
   };
   if (userAgent == null || userAgent.type !== "browser")
     return features;
@@ -128,11 +136,14 @@ function lookupClientHints(userAgent, ssrClientHintsConfiguration2) {
   if (ssrClientHintsConfiguration2.viewportSize) {
     features.viewportHeightAvailable = browserFeatureAvailable(userAgent, "viewportHeight");
     features.viewportWidthAvailable = browserFeatureAvailable(userAgent, "viewportWidth");
+    const mobileHeader = headers[SecChUaMobile];
+    if (mobileHeader === "?1")
+      features.devicePixelRatioAvailable = browserFeatureAvailable(userAgent, "devicePixelRatio");
   }
   return features;
 }
 function collectClientHints(userAgent, ssrClientHintsConfiguration2, headers) {
-  const hints = lookupClientHints(userAgent, ssrClientHintsConfiguration2);
+  const hints = lookupClientHints(userAgent, ssrClientHintsConfiguration2, headers);
   if (ssrClientHintsConfiguration2.prefersColorScheme) {
     if (ssrClientHintsConfiguration2.prefersColorSchemeOptions) {
       const cookieName = ssrClientHintsConfiguration2.prefersColorSchemeOptions.cookieName;
@@ -193,6 +204,22 @@ function collectClientHints(userAgent, ssrClientHintsConfiguration2, headers) {
   } else {
     hints.viewportWidth = ssrClientHintsConfiguration2.clientWidth;
   }
+  if (hints.devicePixelRatioAvailable && ssrClientHintsConfiguration2.viewportSize) {
+    const header = headers[AcceptClientHintsRequestHeaders.devicePixelRatio];
+    if (header) {
+      hints.firstRequest = false;
+      try {
+        hints.devicePixelRatio = Number.parseFloat(header);
+        if (!Number.isNaN(hints.devicePixelRatio) && hints.devicePixelRatio > 0) {
+          if (typeof hints.viewportWidth === "number")
+            hints.viewportWidth = Math.round(hints.viewportWidth / hints.devicePixelRatio);
+          if (typeof hints.viewportHeight === "number")
+            hints.viewportHeight = Math.round(hints.viewportHeight / hints.devicePixelRatio);
+        }
+      } catch {
+      }
+    }
+  }
   return hints;
 }
 function writeClientHintHeaders(key, headers) {
@@ -209,6 +236,8 @@ function writeClientHintsResponseHeaders(clientHintsRequest, ssrClientHintsConfi
   if (ssrClientHintsConfiguration2.viewportSize && clientHintsRequest.viewportHeightAvailable && clientHintsRequest.viewportWidthAvailable) {
     writeClientHintHeaders(AcceptClientHintsHeaders.viewportHeight, headers);
     writeClientHintHeaders(AcceptClientHintsHeaders.viewportWidth, headers);
+    if (clientHintsRequest.devicePixelRatioAvailable)
+      writeClientHintHeaders(AcceptClientHintsHeaders.devicePixelRatio, headers);
   }
   if (Object.keys(headers).length === 0)
     return;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "vuetify-nuxt-module",
   "type": "module",
-  "version": "0.15.2",
+  "version": "0.16.1",
   "packageManager": "pnpm@9.5.0",
   "description": "Zero-Config Nuxt Module for Vuetify",
   "author": "userquin <userquin@gmail.com>",