vuetify-nuxt-module 0.6.0 → 0.6.2

package/dist/module.json

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

package/dist/module.mjs

@@ -2,17 +2,20 @@ import { addVitePlugin, extendWebpackConfig, addImports, addPlugin, useLogger, d
 import defu from 'defu';
 import { debounce } from 'perfect-debounce';
 import { existsSync, statSync } from 'node:fs';
-import { resolve, dirname } from 'node:path';
+import { resolve, dirname, extname } from 'node:path';
 import process from 'node:process';
 import { createConfigLoader } from 'unconfig';
 import { readFile, utimes } from 'node:fs/promises';
 import { isPackageExists } from 'local-pkg';
-import { resolveVuetifyBase, normalizePath, writeStyles, cacheDir } from '@vuetify/loader-shared';
-import vuetify, { transformAssetUrls } from 'vite-plugin-vuetify';
+import { resolveVuetifyBase, normalizePath, writeStyles, cacheDir, generateImports } from '@vuetify/loader-shared';
 import { isAbsolute, join, relative } from 'pathe';
 import { normalizePath as normalizePath$1 } from 'vite';
+import { pathToFileURL } from 'node:url';
+import { parseQuery, parseURL } from 'ufo';
+import destr from 'destr';
+import { transformAssetUrls } from 'vite-plugin-vuetify';
 
-const version = "0.6.0";
+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)}`;
@@ -1192,6 +1195,40 @@ function vuetifySSRClientHintsPlugin(ctx) {
   };
 }
 
+function parseId2(id) {
+  id = id.replace(/^(virtual:nuxt:|virtual:)/, "");
+  return parseURL(decodeURIComponent(isAbsolute(id) ? pathToFileURL(id).href : id));
+}
+function parseId(id) {
+  const { search, pathname } = parseId2(id);
+  const query = parseQuery(search);
+  const urlProps = query.props ? destr(query.props) : void 0;
+  return {
+    query: urlProps,
+    path: pathname ?? id
+  };
+}
+function vuetifyImportPlugin() {
+  return {
+    name: "vuetify:import",
+    configResolved(config) {
+      if (config.plugins.findIndex((plugin) => plugin.name === "vuetify:import") < config.plugins.findIndex((plugin) => plugin.name === "vite:vue"))
+        throw new Error("Vuetify plugin must be loaded after the vue plugin");
+    },
+    async transform(code, id) {
+      const { query, path } = parseId(id);
+      if ((!query || !("vue" in query)) && extname(path) === ".vue" && !/^import { render as _sfc_render } from ".*"$/m.test(code) || query && "vue" in query && (query.type === "template" || query.type === "script" && query.setup === "true")) {
+        const { code: imports, source } = generateImports(code);
+        return {
+          code: source + imports,
+          map: null
+        };
+      }
+      return null;
+    }
+  };
+}
+
 function configureVite(configKey, nuxt, ctx) {
   nuxt.hook("vite:extend", ({ config }) => checkVuetifyPlugins(config));
   nuxt.hook("vite:extendConfig", (viteInlineConfig) => {
@@ -1205,7 +1242,7 @@ function configureVite(configKey, nuxt, ctx) {
         configKey
       ];
     }
-    viteInlineConfig.plugins.push(vuetify({ styles: true, autoImport: true }));
+    viteInlineConfig.plugins.push(vuetifyImportPlugin());
     viteInlineConfig.plugins.push(vuetifyStylesPlugin({ styles: ctx.moduleOptions.styles }, ctx.logger));
     viteInlineConfig.plugins.push(vuetifyConfigurationPlugin(ctx));
     viteInlineConfig.plugins.push(vuetifyIconsPlugin(ctx));

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,8 +1,8 @@
 {
   "name": "vuetify-nuxt-module",
   "type": "module",
-  "version": "0.6.0",
-  "packageManager": "pnpm@8.9.2",
+  "version": "0.6.2",
+  "packageManager": "pnpm@8.10.2",
   "description": "Zero-Config Nuxt Module for Vuetify",
   "author": "userquin <userquin@gmail.com>",
   "license": "MIT",
@@ -69,7 +69,7 @@
     "perfect-debounce": "^1.0.0",
     "unconfig": "^0.3.9",
     "vite-plugin-vuetify": "^1.0.2",
-    "vuetify": "^3.3.17"
+    "vuetify": "^3.3.23"
   },
   "devDependencies": {
     "@antfu/eslint-config": "^0.41.0",
@@ -104,6 +104,7 @@
       "node:child_process",
       "node:fs",
       "consola",
+      "destr",
       "esbuild",
       "local-pkg",
       "pathe",