vuetify-nuxt-module 1.0.0-beta.1 → 1.0.0-beta.3

package/README.md

@@ -52,7 +52,7 @@
 > Requires Vite, will not work with Webpack
 
 ```bash
-npx nuxi@latest module add vuetify-nuxt-module
+npx nuxt module add vuetify-nuxt-module
 ```
 
 [![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/userquin/vuetify-nuxt-module)

package/dist/module.json

@@ -4,7 +4,7 @@
   "compatibility": {
     "nuxt": ">=3.15.0"
   },
-  "version": "1.0.0-beta.1",
+  "version": "1.0.0-beta.3",
   "builder": {
     "@nuxt/module-builder": "1.0.2",
     "unbuild": "3.6.1"

package/dist/module.mjs

@@ -1,24 +1,22 @@
-import { addPluginTemplate, addTemplate, resolvePath, extendWebpackConfig, isNuxtMajorVersion, addImports, addPlugin, addVitePlugin, useLogger, defineNuxtModule, getNuxtVersion, hasNuxtModule, createResolver } from '@nuxt/kit';
-import { isPackageExists, getPackageInfo } from 'local-pkg';
+import { pathToFileURL, fileURLToPath } from 'node:url';
+import { addPluginTemplate, resolvePath, addTemplate, extendWebpackConfig, isNuxtMajorVersion, addImports, addPlugin, addVitePlugin, useLogger, defineNuxtModule, getNuxtVersion, createResolver, hasNuxtModule } from '@nuxt/kit';
 import semver from 'semver';
 import { createFilter, version as version$1 } from 'vite';
-import fs, { existsSync, statSync, readFileSync, readdirSync, rmSync, mkdirSync, writeFileSync } from 'node:fs';
-import { isAbsolute, resolve, relative } from 'pathe';
 import defu from 'defu';
 import { transformAssetUrls } from 'vite-plugin-vuetify';
-import { pathToFileURL } from 'node:url';
-import { generateImports, resolveVuetifyBase, isObject, normalizePath } from '@vuetify/loader-shared';
+import { createHash } from 'node:crypto';
+import fs, { existsSync, readdirSync, rmSync, statSync, readFileSync, mkdirSync, writeFileSync } from 'node:fs';
+import { isAbsolute, resolve, join, relative, dirname } from 'pathe';
+import { generateImports, isObject, resolveVuetifyBase, normalizePath } from '@vuetify/loader-shared';
 import destr from 'destr';
 import { parseQuery, parseURL } from 'ufo';
 import fsp, { readFile } from 'node:fs/promises';
 import path from 'upath';
-import { resolve as resolve$1, dirname, join, relative as relative$1 } from 'node:path';
 import { debounce } from 'perfect-debounce';
 import process from 'node:process';
 import { createConfigLoader } from 'unconfig';
-import { createHash } from 'node:crypto';
 
-const version = "1.0.0-beta.1";
+const version = "1.0.0-beta.3";
 
 const VIRTUAL_VUETIFY_CONFIGURATION = "virtual:vuetify-configuration";
 const RESOLVED_VIRTUAL_VUETIFY_CONFIGURATION = `\0${VIRTUAL_VUETIFY_CONFIGURATION}`;
@@ -128,6 +126,64 @@ function normalizeTransformAssetUrlsAttrs(attrs) {
   return [...result];
 }
 
+function resolveVuetifyConfigFile(configFile, nuxt) {
+  if (typeof configFile === "string" && !isAbsolute(configFile)) {
+    for (const layer of nuxt.options._layers) {
+      const resolved = resolve(layer.config.srcDir, configFile);
+      if (existsSync(resolved)) {
+        return resolved;
+      }
+    }
+  }
+  return configFile;
+}
+function createStylesCacheHash(vuetifyVersion, viteVersion, configContent, configFile) {
+  return createHash("sha256").update(vuetifyVersion).update(viteVersion).update(configContent).update(configFile).digest("hex").slice(0, 8);
+}
+function resolveStylesCachePaths(rootDir, hash) {
+  const stylesDir = resolve(rootDir, "node_modules/.cache/vuetify-nuxt-module/styles");
+  const cacheDir = join(stylesDir, hash);
+  return {
+    stylesDir,
+    cacheDir
+  };
+}
+function cleanupOldStylesCaches(stylesDir, currentHash) {
+  if (!existsSync(stylesDir)) {
+    return;
+  }
+  const dirents = readdirSync(stylesDir, { withFileTypes: true });
+  for (const dirent of dirents) {
+    if (dirent.isDirectory() && dirent.name !== currentHash) {
+      rmSync(join(stylesDir, dirent.name), { recursive: true, force: true });
+    }
+  }
+}
+function collectVuetifyCssFiles(vuetifyBase) {
+  const files = [];
+  findCssFiles(join(vuetifyBase, "lib/components"), files);
+  findCssFiles(join(vuetifyBase, "lib/styles"), files);
+  return files;
+}
+function findCssFiles(dir, fileList = []) {
+  if (!existsSync(dir)) {
+    return fileList;
+  }
+  const files = readdirSync(dir);
+  for (const file of files) {
+    const filePath = join(dir, file);
+    const stat = statSync(filePath);
+    if (stat.isDirectory()) {
+      findCssFiles(filePath, fileList);
+    } else {
+      if (file.endsWith(".css")) {
+        fileList.push(filePath);
+      }
+    }
+  }
+  return fileList;
+}
+
 function addVuetifyNuxtPlugins(nuxt, ctx) {
   addVuetifyNuxtPlugin(nuxt, ctx, "client");
   addVuetifyNuxtPlugin(nuxt, ctx, "server");
@@ -198,17 +254,6 @@ export default defineNuxtPlugin({
 function getTemplate(source, settings) {
   return [settings ? `@use '${settings}';` : "", `@use '${source}';`].filter(Boolean).join("\n");
 }
-function resolveVuetifyConfigFile(configFile, nuxt) {
-  if (typeof configFile === "string" && !isAbsolute(configFile)) {
-    for (const layer of nuxt.options._layers) {
-      const resolved = resolve(layer.config.rootDir, configFile);
-      if (existsSync(resolved)) {
-        return resolved;
-      }
-    }
-  }
-  return configFile;
-}
 async function configureNuxt(configKey, nuxt, ctx) {
   const {
     styles,
@@ -223,9 +268,10 @@ async function configureNuxt(configKey, nuxt, ctx) {
     nuxt.options.css ??= [];
     if (typeof styles === "object" && "configFile" in styles) {
       const configFile = resolveVuetifyConfigFile(styles.configFile, nuxt);
+      ctx.stylesConfigFile = await resolvePath(configFile);
       const a = addTemplate({
         filename: "vuetify.settings.scss",
-        getContents: async () => getTemplate("vuetify/styles", await resolvePath(configFile))
+        getContents: async () => getTemplate("vuetify/styles", ctx.stylesConfigFile)
       });
       nuxt.options.css.push(a.dst);
     } else if (ctx.vuetifyGte("4.0.0")) {
@@ -903,8 +949,8 @@ function vuetifySSRClientHintsPlugin(ctx) {
 
 function vuetifyStylesPlugin(ctx) {
   let configFile;
+  let vuetifyBase;
   const options = { styles: ctx.moduleOptions.styles };
-  const vuetifyBase = resolveVuetifyBase();
   const noneFiles = /* @__PURE__ */ new Set();
   let isNone = false;
   let sassVariables = false;
@@ -923,10 +969,11 @@ function vuetifyStylesPlugin(ctx) {
       if (isObject(options.styles) && "configFile" in options.styles) {
         sassVariables = true;
         fileImport = semver.gt(ctx.viteVersion, "5.4.2");
-        configFile = await resolvePath(options.styles.configFile);
+        configFile = ctx.stylesConfigFile ?? await resolvePath(options.styles.configFile);
       } else {
         isNone = options.styles === "none";
       }
+      vuetifyBase = await resolveVuetifyBase();
     },
     async resolveId(source, importer, { custom, ssr }) {
       if (!sassVariables) {
@@ -939,7 +986,7 @@ function vuetifyStylesPlugin(ctx) {
         const idx = source.indexOf("?");
         return idx === -1 ? source : source.slice(0, idx);
       }
-      if (importer && source.endsWith(".css") && isSubdir(vuetifyBase, path.isAbsolute(source) ? source : importer)) {
+      if (vuetifyBase && importer && source.endsWith(".css") && isSubdir(vuetifyBase, path.isAbsolute(source) ? source : importer)) {
         let resolutionId;
         if (source.startsWith(".")) {
           resolutionId = path.resolve(path.dirname(importer), source);
@@ -972,6 +1019,9 @@ function vuetifyStylesPlugin(ctx) {
     },
     load(id) {
       if (sassVariables) {
+        if (!vuetifyBase) {
+          return;
+        }
         const target = id.startsWith(PREFIX) ? path.resolve(vuetifyBase, id.slice(PREFIX.length)) : id.startsWith(SSR_PREFIX) ? path.resolve(vuetifyBase, id.slice(SSR_PREFIX.length)) : void 0;
         if (target) {
           const suffix = /\.scss/.test(target) ? ";\n" : "\n";
@@ -1016,7 +1066,25 @@ function isSubdir(root, test) {
   return relative$1 && !relative$1.startsWith("..") && !isAbsolute(relative$1);
 }
 
-function detectDate() {
+async function loadPackageJSON(name, parentURL = import.meta.url) {
+  try {
+    const packageJsonUrl = import.meta.resolve(`${name}/package.json`, parentURL);
+    const packageJsonPath = fileURLToPath(packageJsonUrl);
+    return JSON.parse(await readFile(packageJsonPath, "utf8"));
+  } catch {
+    return null;
+  }
+}
+function isPackageExists(name, parentURL = import.meta.url) {
+  try {
+    import.meta.resolve(name, parentURL);
+    return true;
+  } catch {
+    return false;
+  }
+}
+
+function detectDate(packageResolveFrom) {
   const result = [];
   for (const adapter of [
     "date-fns",
@@ -1028,7 +1096,7 @@ function detectDate() {
     "jalaali",
     "hijri"
   ]) {
-    if (isPackageExists(`@date-io/${adapter}`)) {
+    if (isPackageExists(`@date-io/${adapter}`, packageResolveFrom)) {
       result.push(adapter);
     }
   }
@@ -1081,7 +1149,7 @@ function configureVite(configKey, nuxt, ctx) {
     if (!ctx.moduleOptions.disableModernSassCompiler) {
       const enableModernSassCompiler = semver.gte(ctx.viteVersion, "5.4.0") && semver.lt(ctx.viteVersion, "7.0.0-0");
       if (enableModernSassCompiler) {
-        const sassEmbedded = isPackageExists("sass-embedded");
+        const sassEmbedded = isPackageExists("sass-embedded", ctx.packageResolveFrom);
         if (sassEmbedded) {
           viteInlineConfig.css ??= {};
           viteInlineConfig.css.preprocessorOptions ??= {};
@@ -1165,7 +1233,7 @@ const disabledResolvedIcons = Object.freeze({
   local: [],
   svg: {}
 });
-function prepareIcons(unocssPresent, logger, vuetifyOptions) {
+function prepareIcons(unocssPresent, logger, vuetifyOptions, packageResolveFrom) {
   if (vuetifyOptions.icons === false) {
     return disabledResolvedIcons;
   }
@@ -1209,7 +1277,7 @@ function prepareIcons(unocssPresent, logger, vuetifyOptions) {
       }
       resolvedIcons.imports.push(`import {${name === defaultSet ? "aliases," : ""}${name}} from 'vuetify/iconsets/${name}'`);
       resolvedIcons.sets.push(name);
-      if (isPackageExists(iconsPackageNames[name].name)) {
+      if (isPackageExists(iconsPackageNames[name].name, packageResolveFrom)) {
         resolvedIcons.local.push(iconsPackageNames[name].css);
       } else {
         resolvedIcons.cdn.push([name, cdn ?? iconsCDN[name]]);
@@ -1228,18 +1296,21 @@ function prepareIcons(unocssPresent, logger, vuetifyOptions) {
     if (!faSvg) {
       faSvg = {};
     }
-    let faSvgExists = isPackageExists("@fortawesome/fontawesome-svg-core");
+    let faSvgExists = isPackageExists("@fortawesome/fontawesome-svg-core", packageResolveFrom);
     if (!faSvgExists) {
       logger.warn("Missing @fortawesome/fontawesome-svg-core dependency, install it!");
     }
-    faSvgExists = isPackageExists("@fortawesome/vue-fontawesome");
+    faSvgExists = isPackageExists("@fortawesome/vue-fontawesome", packageResolveFrom);
     if (faSvgExists) {
       if (!faSvg.libraries?.length) {
         faSvg.libraries = [[false, "fas", "@fortawesome/free-solid-svg-icons"]];
       }
-      for (const p in faSvg.libraries) {
-        const [_defaultExport, _name, library] = faSvg.libraries[p];
-        if (!isPackageExists(library)) {
+      for (const libraryEntry of faSvg.libraries) {
+        if (!libraryEntry) {
+          continue;
+        }
+        const library = libraryEntry[2];
+        if (!isPackageExists(library, packageResolveFrom)) {
           faSvgExists = false;
           logger.warn(`Missing library ${library} dependency, install it!`);
         }
@@ -1251,7 +1322,11 @@ function prepareIcons(unocssPresent, logger, vuetifyOptions) {
       resolvedIcons.aliasesImportPresent ||= defaultSet === "fa-svg";
       resolvedIcons.imports.push(`import {${defaultSet === "fa-svg" ? "aliases," : ""}fa} from 'vuetify/iconsets/fa-svg'`, "import { library } from '@fortawesome/fontawesome-svg-core'", "import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'", "import { useNuxtApp } from '#imports'");
       resolvedIcons.svg.fa = ["useNuxtApp().vueApp.component('font-awesome-icon', FontAwesomeIcon)"];
-      for (const [defaultExport, name, library] of faSvg.libraries) {
+      for (const libraryEntry of faSvg.libraries ?? []) {
+        if (!libraryEntry) {
+          continue;
+        }
+        const [defaultExport, name, library] = libraryEntry;
         resolvedIcons.imports.push(`import ${defaultExport ? name : `{${name}}`} from '${library}'`);
         resolvedIcons.svg.fa.push(`library.add(${name})`);
       }
@@ -1266,7 +1341,7 @@ function prepareIcons(unocssPresent, logger, vuetifyOptions) {
     if (!mdiSvg) {
       mdiSvg = {};
     }
-    const mdiSvgExists = isPackageExists("@mdi/js");
+    const mdiSvgExists = isPackageExists("@mdi/js", packageResolveFrom);
     if (mdiSvgExists) {
       resolvedIcons.svg.mdi = true;
       resolvedIcons.aliasesImportPresent ||= defaultSet === "mdi-svg";
@@ -1314,7 +1389,7 @@ async function loadVuetifyConfiguration(cwd = process.cwd(), configOrPath = cwd,
     inlineConfig = configOrPath;
     configOrPath = process.cwd();
   }
-  const resolved = resolve$1(cwd, configOrPath);
+  const resolved = resolve(cwd, configOrPath);
   let isFile = false;
   if (existsSync(resolved) && statSync(resolved).isFile()) {
     isFile = true;
@@ -1513,11 +1588,12 @@ async function prepareVuetifyStyles(nuxt, ctx) {
   if (stylesConfig.experimental?.cache === false) {
     return;
   }
-  const vuetifyBase = resolveVuetifyBase();
+  const vuetifyBase = await resolveVuetifyBase();
   let configFile;
   let configContent = "";
   if (stylesConfig.configFile) {
-    configFile = await resolvePath(stylesConfig.configFile);
+    configFile = await resolvePath(resolveVuetifyConfigFile(stylesConfig.configFile, nuxt));
+    ctx.stylesConfigFile = configFile;
     if (existsSync(configFile)) {
       configContent = readFileSync(configFile, "utf8");
       if (!ctx.vuetifyFilesToWatch.includes(configFile)) {
@@ -1528,18 +1604,15 @@ async function prepareVuetifyStyles(nuxt, ctx) {
   if (!configFile) {
     return;
   }
-  const hash = createHash("sha256").update(ctx.vuetifyVersion).update(ctx.viteVersion).update(configContent).update(configFile).digest("hex").slice(0, 8);
-  const stylesDir = resolve$1(nuxt.options.rootDir, "node_modules/.cache/vuetify-nuxt-module/styles");
-  const cacheDir = join(stylesDir, hash);
+  const hash = createStylesCacheHash(
+    ctx.vuetifyVersion,
+    ctx.viteVersion,
+    configContent,
+    configFile
+  );
+  const { stylesDir, cacheDir } = resolveStylesCachePaths(nuxt.options.rootDir, hash);
   ctx.stylesCachePath = cacheDir;
-  if (existsSync(stylesDir)) {
-    const dirents = readdirSync(stylesDir, { withFileTypes: true });
-    for (const dirent of dirents) {
-      if (dirent.isDirectory() && dirent.name !== hash) {
-        rmSync(join(stylesDir, dirent.name), { recursive: true, force: true });
-      }
-    }
-  }
+  cleanupOldStylesCaches(stylesDir, hash);
   if (existsSync(cacheDir)) {
     return;
   }
@@ -1555,11 +1628,9 @@ async function prepareVuetifyStyles(nuxt, ctx) {
       return;
     }
   }
-  const files = [];
-  findCssFiles(join(vuetifyBase, "lib/components"), files);
-  findCssFiles(join(vuetifyBase, "lib/styles"), files);
+  const files = collectVuetifyCssFiles(vuetifyBase);
   for (const file of files) {
-    const relativePath = relative$1(vuetifyBase, file);
+    const relativePath = relative(vuetifyBase, file);
     const cacheFile = join(cacheDir, relativePath);
     const sassFile = file.replace(/\.css$/, ".sass");
     const scssFile = file.replace(/\.css$/, ".scss");
@@ -1582,8 +1653,8 @@ async function prepareVuetifyStyles(nuxt, ctx) {
           loadPaths: [
             dirname(configFile),
             dirname(targetFile),
-            resolve$1(vuetifyBase, ".."),
-            resolve$1(vuetifyBase, "../.."),
+            resolve(vuetifyBase, ".."),
+            resolve(vuetifyBase, "../.."),
             // In case of monorepo/hoisting issues, but standard is enough
             vuetifyBase
           ],
@@ -1604,24 +1675,6 @@ async function prepareVuetifyStyles(nuxt, ctx) {
   };
   writeFileSync(join(cacheDir, "metadata.json"), JSON.stringify(metadata, null, 2), "utf8");
 }
-function findCssFiles(dir, fileList = []) {
-  if (!existsSync(dir)) {
-    return fileList;
-  }
-  const files = readdirSync(dir);
-  for (const file of files) {
-    const filePath = join(dir, file);
-    const stat = statSync(filePath);
-    if (stat.isDirectory()) {
-      findCssFiles(filePath, fileList);
-    } else {
-      if (file.endsWith(".css")) {
-        fileList.push(filePath);
-      }
-    }
-  }
-  return fileList;
-}
 
 async function load(options, nuxt, ctx) {
   const {
@@ -1648,7 +1701,7 @@ async function load(options, nuxt, ctx) {
   const dateOptions = vuetifyOptions.date;
   if (dateOptions) {
     const adapter = dateOptions.adapter;
-    const date = detectDate();
+    const date = detectDate(ctx.packageResolveFrom);
     if (!adapter && date.length > 1) {
       throw new Error(`Multiple date adapters found: ${date.map((d) => `@date-io/${d[0]}`).join(", ")}, please specify the adapter to use in the "vuetifyOptions.date.adapter" option.`);
     }
@@ -1677,7 +1730,7 @@ async function load(options, nuxt, ctx) {
   ctx.enableRules = ctx.moduleOptions.enableRules;
   ctx.rulesConfiguration = ctx.moduleOptions.rulesConfiguration;
   ctx.vuetifyFilesToWatch = Array.from(vuetifyConfigurationFilesToWatch);
-  ctx.icons = prepareIcons(ctx.unocss, ctx.logger, vuetifyAppOptions);
+  ctx.icons = prepareIcons(ctx.unocss, ctx.logger, vuetifyAppOptions, ctx.packageResolveFrom);
   ctx.ssrClientHints = prepareSSRClientHints(nuxt.options.app.baseURL ?? "/", ctx);
   if (ctx.icons.enabled) {
     if (ctx.icons.local) {
@@ -1704,7 +1757,7 @@ function registerWatcher(options, nuxt, ctx) {
   if (nuxt.options.dev) {
     let pageReload;
     nuxt.hooks.hook("builder:watch", (_event, path) => {
-      path = relative$1(nuxt.options.srcDir, resolve$1(nuxt.options.srcDir, path));
+      path = relative(nuxt.options.srcDir, resolve(nuxt.options.srcDir, path));
       if (!pageReload && ctx.vuetifyFilesToWatch.includes(path)) {
         return nuxt.callHook("restart");
       }
@@ -1778,13 +1831,16 @@ const module$1 = defineNuxtModule({
     if (isNuxtMajorVersion(2, nuxt)) {
       logger.error(`Cannot support nuxt version: ${getNuxtVersion(nuxt)}`);
     }
-    const vuetifyPkg = await getPackageInfo("vuetify");
+    const resolver = createResolver(import.meta.url);
+    const packageResolveFrom = pathToFileURL(resolver.resolve(nuxt.options.rootDir, "package.json")).href;
+    const vuetifyPkg = await loadPackageJSON("vuetify", packageResolveFrom);
     const currentVersion = vuetifyPkg?.version;
     const vuetifyGte = (version2) => !!currentVersion && semver.gte(currentVersion, version2);
     const viteVersion = version$1;
     const ctx = {
       logger,
-      resolver: createResolver(import.meta.url),
+      resolver,
+      packageResolveFrom,
       moduleOptions: void 0,
       vuetifyOptions: void 0,
       vuetifyFilesToWatch: [],

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "vuetify-nuxt-module",
   "type": "module",
-  "version": "1.0.0-beta.1",
+  "version": "1.0.0-beta.3",
   "description": "Zero-Config Nuxt Module for Vuetify",
   "author": "userquin <userquin@gmail.com>",
   "license": "MIT",
@@ -54,7 +54,6 @@
     "@nuxt/kit": "^4.3.1",
     "defu": "^6.1.4",
     "destr": "^2.0.5",
-    "local-pkg": "^1.1.2",
     "pathe": "^2.0.3",
     "perfect-debounce": "^2.1.0",
     "semver": "^7.7.4",
@@ -103,7 +102,6 @@
       "consola",
       "destr",
       "esbuild",
-      "local-pkg",
       "pathe",
       "perfect-debounce",
       "rollup",