feat: add unplugin-vue-components and unimport integration

packages/docs/package.json

@@ -78,7 +78,8 @@
     "markdown-it-meta": "^0.0.1",
     "markdown-it-prism": "^2.3.0",
     "markdownlint-cli": "^0.39.0",
-    "unplugin-auto-import": "0.17.5",
+    "unimport": "^3.13.1",
+    "unplugin-auto-import": "^0.18.3",
     "unplugin-fonts": "1.0.3",
     "unplugin-vue-components": "^0.27.4",
     "vite": "^5.4.3",

packages/docs/vite.config.mts

@@ -23,6 +23,7 @@ import { Examples } from './build/examples-plugin'
 import { genAppMetaInfo } from './src/utils/metadata'
 import { MdiJs } from './build/mdi-js'
 import { frontmatterBuilder, getRouteMeta, scriptFixer } from './build/markdownBuilders'
+import { VuetifyComposables, VuetifyDirectives } from 'vuetify/unimport'
 
 const resolve = (file: string) => fileURLToPath(new URL(file, import.meta.url))
 
@@ -95,6 +96,8 @@ export default defineConfig(({ command, mode, isSsrBuild }) => {
           'vue',
           'vue-router',
           'pinia',
+          VuetifyComposables(),
+          VuetifyDirectives(),
           {
             '@vuetify/one': [
               'createOne',
@@ -108,12 +111,16 @@ export default defineConfig(({ command, mode, isSsrBuild }) => {
             ],
             'lodash-es': ['camelCase', 'kebabCase', 'upperFirst'],
             vue: ['camelize', 'mergeProps'],
-            vuetify: ['useDate', 'useDisplay', 'useGoTo', 'useRtl', 'useTheme'],
             'vue-gtag-next': ['useGtag'],
             'vue-i18n': ['useI18n'],
           }
         ],
         vueTemplate: true,
+        // when this PR https://github.com/unplugin/unplugin-auto-import/pull/534 merged and released
+        // this option will create the `v<Directive>` for Vuetify directives in vue module augmentation
+        // Volar will show Vuetify directives (VSCode only)
+        // check it here: packages/docs/src/examples/v-ripple/misc-custom-color.vue
+        // vueDirectives: true,
       }),
 
       // https://github.com/stafyniaksacha/vite-plugin-fonts

packages/vuetify/.eslintignore

@@ -8,6 +8,8 @@
 /lib/
 /lib-temp/
 /dist/
+/unimport/
+/unplugin-vue-components/
 /cypress/
 *.spec.cy.ts
 *.spec.cy.tsx

packages/vuetify/.gitignore

@@ -9,6 +9,8 @@
 /types-temp/
 /dist/
 /dev/dist/
+/unplugin-vue-components/
+/unimport/
 
 # local env files
 .env.local

packages/vuetify/build/constants.mjs

@@ -0,0 +1,17 @@
+import packageJson from '../package.json' with { type: 'json' }
+import path from 'upath'
+import { fileURLToPath } from 'url'
+
+export const banner = `/*!
+* Vuetify v${packageJson.version}
+* Forged by John Leider
+* Released under the MIT License.
+*/\n`
+
+export const root = path.resolve(fileURLToPath(import.meta.url), '../..')
+export const srcDir = path.resolve(root, 'src')
+export const libDir = path.resolve(root, 'lib')
+export const unpluginLibDistDir = path.resolve(libDir, 'unplugin')
+export const labsDir = path.resolve(srcDir, 'labs')
+
+export const externals = Array.from(Object.keys(packageJson.devDependencies))

packages/vuetify/build/rollup.config.mjs

@@ -2,32 +2,27 @@ import path from 'upath'
 import { mkdirp } from 'mkdirp'
 import { writeFile } from 'fs/promises'
 import { fileURLToPath } from 'url'
-
-import packageJson from '../package.json' with { type: 'json' }
-
 import alias from '@rollup/plugin-alias'
 import sass from 'rollup-plugin-sass'
 import { babel } from '@rollup/plugin-babel'
 import { terser } from 'rollup-plugin-terser'
 import { nodeResolve } from '@rollup/plugin-node-resolve'
-
 import autoprefixer from 'autoprefixer'
 import cssnano from 'cssnano'
 import postcss from 'postcss'
 import { simple as walk } from 'acorn-walk'
+import {
+  banner,
+  labsDir,
+  libDir,
+  root,
+  srcDir,
+} from './constants.mjs'
+import { unpluginModules } from './unplugin-config.mjs'
 
 const extensions = ['.ts', '.tsx', '.js', '.jsx', '.es6', '.es', '.mjs']
-const banner = `/*!
-* Vuetify v${packageJson.version}
-* Forged by John Leider
-* Released under the MIT License.
-*/\n`
-
-const root = path.resolve(fileURLToPath(import.meta.url), '../..')
-const srcDir = path.resolve(root, 'src')
-const libDir = path.resolve(root, 'lib')
-const labsDir = path.resolve(srcDir, 'labs')
 
+/** @type {import("rollup").RollupOptions[]} */
 export default [
   {
     input: 'src/entry-bundler.ts',
@@ -291,4 +286,5 @@ export default [
       }
     ],
   },
+  ...unpluginModules(),
 ]

packages/vuetify/build/rollup.types.config.mjs

@@ -1,4 +1,3 @@
-import path from 'path'
 import fs from 'fs/promises'
 import { readFileSync } from 'fs'
 import { fileURLToPath } from 'url'
@@ -12,7 +11,9 @@ import MagicString from 'magic-string'
 
 import importMap from '../dist/json/importMap.json' with { type: 'json' }
 import importMapLabs from '../dist/json/importMap-labs.json' with { type: 'json' }
+import {unpluginTypes} from "./unplugin-config.mjs";
 
+/** @type {() => import("rollup").Plugin} */
 const externalsPlugin = () => ({
   resolveId (source, importer) {
     if (importer && (source.endsWith('.sass') || source.endsWith('.scss'))) {
@@ -25,6 +26,13 @@ const externalsPlugin = () => ({
   }
 })
 
+/**
+ * @param input {string}
+ * @param output {string}
+ * @param [renderChunk] {(code: MagicString) => Promise<void>}
+ * @param [filter] {(files: string[]) => string[]}
+ * @return {import("rollup").RollupOptions[]}
+ */
 function createTypesConfig (input, output, renderChunk, filter) {
   input = 'types-temp/' + input
   let files = fg.sync(input)
@@ -33,7 +41,8 @@ function createTypesConfig (input, output, renderChunk, filter) {
 
   return files.map(file => {
     const outputFile = output.replace('*', mm.capture(input, file)[0])
-    return {
+    /** @type {import("rollup").RollupOptions} */
+    const config = {
       input: file,
       output: [{ file: outputFile, format: 'es', sourcemap: false }],
       plugins: [
@@ -70,9 +79,11 @@ function createTypesConfig (input, output, renderChunk, filter) {
         // sourcemaps(),
       ],
     }
+    return config
   })
 }
 
+/** @return {Promise<string>} */
 async function getShims () {
   const components = Object.keys(importMap.components).map(name => (
     `    ${name}: typeof import('vuetify/components')['${name}']`
@@ -87,6 +98,7 @@ async function getShims () {
     .replace(/^\s*\/\/ @generate-components$/gm, components)
 }
 
+/** @type {import("rollup").RollupOptions[]} */
 export default [
   createTypesConfig('framework.d.ts', 'lib/index.d.mts', async code => {
     code.append('\n\n')
@@ -114,4 +126,5 @@ export default [
   createTypesConfig('locale/adapters/*.d.ts', 'lib/locale/adapters/*.d.mts'),
   createTypesConfig('iconsets/*.d.ts', 'lib/iconsets/*.d.mts'),
   createTypesConfig('util/colors.d.ts', 'lib/util/colors.d.mts'),
+  unpluginTypes()
 ].flat()

packages/vuetify/build/unplugin-config.mjs

@@ -0,0 +1,115 @@
+import { banner, externals, root, unpluginLibDistDir } from './constants.mjs'
+import { nodeResolve } from "@rollup/plugin-node-resolve"
+import { babel } from '@rollup/plugin-babel'
+import { rm } from 'fs/promises'
+import dts from 'rollup-plugin-dts'
+
+const extensions = ['.ts']
+
+export function unpluginModules() {
+  return [
+    unpluginModule('components'),
+    unpluginModule('unimport'),
+  ]
+}
+
+export function unpluginTypes() {
+  return [
+    unpluginDts('components'),
+    unpluginDts('unimport'),
+  ]
+}
+
+/**
+ * @param name {'components' | 'unimport'}
+ * @returns {import("rollup").RollupOptions}
+ */
+function unpluginModule(name) {
+  const input = `src/unplugin/${name}.ts`
+  const file = `${name === 'components' ? 'unplugin-vue-components' : name}/index`
+  /** @type {import("rollup").RollupOptions}  */
+  const config = {
+    input,
+    external: ['vuetify', 'unplugin-vue-components/types', ...externals],
+    output: [{
+      file: `${file}.mjs`,
+      format: 'esm',
+      exports: "named",
+      generatedCode: { constBindings: true },
+      externalLiveBindings: false,
+      freeze: false,
+      banner,
+    }, {
+      file: `${file}.cjs`,
+      format: 'cjs',
+      exports: "named",
+      generatedCode: { constBindings: true },
+      externalLiveBindings: false,
+      freeze: false,
+      banner,
+    }],
+    onwarn(warning, rollupWarn) {
+      if (!warning.code || !["CIRCULAR_DEPENDENCY"].includes(warning.code)) {
+        rollupWarn(warning);
+      }
+    },
+    plugins: [
+      nodeResolve({ extensions, browser: false, modulesOnly: true }),
+      babel({
+        extensions,
+      }),
+      dts({
+        respectExternal: true,
+        compilerOptions: {
+          rootDir: root,
+        },
+      }),
+      {
+        async buildEnd() {
+          // cleanup lib/unplugin
+          await rm(unpluginLibDistDir, { force: true, recursive: true })
+        },
+      },
+    ],
+  }
+  return config
+}
+
+/**
+ * @param name {'components' | 'unimport'}
+ * @returns {import("rollup").RollupOptions}
+ */
+function unpluginDts(name) {
+  const dir = `${root}/${name === 'components' ? 'unplugin-vue-components' : 'unimport'}`
+  /** @type {import("rollup").RollupOptions}  */
+  const config = {
+    input: `src/unplugin/${name}.ts`,
+    external: ['vuetify', 'unplugin-vue-components/types', ...externals],
+    output: [{
+      dir,
+      entryFileNames: 'index.d.mts',
+      format: 'esm',
+      banner,
+    }, {
+      dir,
+      entryFileNames: 'index.d.ts',
+      format: 'esm',
+      banner,
+    }, {
+      dir,
+      entryFileNames: 'index.d.cts',
+      format: 'cjs',
+      banner,
+    }],
+    plugins: [
+      dts({
+        dir: `${root}/${name === 'components' ? 'unplugin-vue-components' : 'unimport'}`,
+        respectExternal: true,
+        compilerOptions: {
+          rootDir: root,
+        },
+      }),
+    ],
+  }
+  return config
+}

packages/vuetify/dev/vuetify.js

@@ -2,15 +2,13 @@ import '@mdi/font/css/materialdesignicons.css'
 import '@/styles/main.sass'
 
 import { createVuetify } from '@/framework'
-import * as directives from '@/directives'
 
 import date from './vuetify/date'
 import defaults from './vuetify/defaults'
 import icons from './vuetify/icons'
 import locale from './vuetify/locale'
 
 export default createVuetify({
-  directives,
   ssr: !!process.env.VITE_SSR,
   date,
   defaults,

packages/vuetify/package.json

@@ -45,6 +45,8 @@
   "files": [
     "dist/",
     "lib/",
+    "unplugin-vue-components/",
+    "unimport/",
     "_settings.scss",
     "_styles.scss",
     "_tools.scss",
@@ -75,6 +77,14 @@
     "./labs/components": "./lib/labs/components.mjs",
     "./labs/*": "./lib/labs/*/index.mjs",
     "./util/colors": "./lib/util/colors.mjs",
+    "./unplugin-vue-components": {
+      "import": "./unplugin-vue-components/index.mjs",
+      "require": "./unplugin-vue-components/index.cjs"
+    },
+    "./unimport": {
+      "import": "./unimport/index.mjs",
+      "require": "./unimport/index.cjs"
+    },
     "./*": "./*"
   },
   "typesVersions": {
@@ -85,6 +95,12 @@
       "framework": [
         "lib/index.d.mts"
       ],
+      "unplugin-vue-components": [
+        "unplugin-vue-components/index.d.ts"
+      ],
+      "unimport": [
+        "unimport/index.d.ts"
+      ],
       "*": [
         "*",
         "dist/*",
@@ -103,7 +119,7 @@
     "dev:ssr": "NODE_ENV=development VITE_SSR=true vite-ssr",
     "dev:prod": "concurrently \"vite build -w\" \"vite preview\"",
     "dev:typecheck": "vue-tsc --noEmit --skipLibCheck --project ./tsconfig.dev.json",
-    "build": "rimraf lib dist && concurrently \"pnpm run build:dist\" \"pnpm run build:lib\" -n \"dist,lib\" --kill-others-on-fail -r && pnpm run build:types",
+    "build": "rimraf lib dist unplugin-vue-components unimport && concurrently \"pnpm run build:dist\" \"pnpm run build:lib\" -n \"dist,lib\" --kill-others-on-fail -r && pnpm run build:types",
     "build:dist": "rollup --config build/rollup.config.mjs",
     "build:lib": "NODE_ENV=lib babel src --out-dir lib --source-maps --extensions \".ts\",\".tsx\",\".snap\" --copy-files --no-copy-ignored --out-file-extension .mjs",
     "build:types": "rimraf types-temp && tsc --pretty --emitDeclarationOnly -p tsconfig.dist.json && rollup --config build/rollup.types.config.mjs && rimraf types-temp",
@@ -172,7 +188,8 @@
     "rollup-plugin-sourcemaps": "^0.6.3",
     "rollup-plugin-terser": "^7.0.2",
     "timezone-mock": "^1.3.6",
-    "unplugin-auto-import": "0.17.5",
+    "unimport": "^3.13.1",
+    "unplugin-auto-import": "^0.18.3",
     "unplugin-vue-components": "^0.27.4",
     "upath": "^2.0.1",
     "vite": "^5.4.3",

packages/vuetify/src/auto-imports.d.ts

@@ -3,6 +3,7 @@
 // @ts-nocheck
 // noinspection JSUnusedGlobalSymbols
 // Generated by unplugin-auto-import
+// biome-ignore lint: disable
 export {}
 declare global {
   const afterAll: typeof import('vitest')['afterAll']