feat: add unplugin-vue-components and unimport integration

packages/docs/package.json

@@ -79,7 +79,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.js

@@ -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',
@@ -293,4 +288,5 @@ export default [
       }
     ],
   },
+  ...unpluginModules(),
 ]

packages/vuetify/build/unplugin-config.mjs

@@ -0,0 +1,114 @@
+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',
+      'vuetify/directives',
+      'vuetify/components',
+      'vuetify/labs/components',
+      'unplugin-vue-components/types',
+      ...externals,
+    ],
+    output: [{
+      file: `${file}.mjs`,
+      format: 'esm',
+      generatedCode: { constBindings: true },
+      externalLiveBindings: false,
+      freeze: false,
+      banner,
+    }, {
+      file: `${file}.cjs`,
+      format: 'cjs',
+      generatedCode: { constBindings: true },
+      externalLiveBindings: false,
+      freeze: false,
+      banner,
+    }],
+    onwarn(warning, rollupWarn) {
+      if (!warning.code || !["CIRCULAR_DEPENDENCY"].includes(warning.code)) {
+        rollupWarn(warning);
+      }
+    },
+    plugins: [
+      nodeResolve({ extensions }),
+      babel({
+        extensions,
+      }),
+      {
+        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/package.json

@@ -46,6 +46,8 @@
   "files": [
     "dist/",
     "lib/",
+    "unplugin-vue-components/",
+    "unimport/",
     "_settings.scss",
     "_styles.scss",
     "_tools.scss",
@@ -76,10 +78,30 @@
     "./labs/components": "./lib/labs/components.js",
     "./labs/*": "./lib/labs/*/index.js",
     "./util/colors": "./lib/util/colors.js",
-    "./*": "./*"
+    "./*": "./*",
+    "./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": {
     "*": {
+      "lib/framework.mjs": [
+        "lib/index.d.mts"
+      ],
+      "framework": [
+        "lib/index.d.mts"
+      ],
+      "unplugin-vue-components": [
+        "unplugin-vue-components/index.d.ts"
+      ],
+      "unimport": [
+        "unimport/index.d.ts"
+      ],
       "*": [
         "*",
         "dist/*",
@@ -98,7 +120,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.js",
     "build:lib": "NODE_ENV=lib babel src --out-dir lib --source-maps --extensions \".ts\",\".tsx\",\".snap\" --copy-files --no-copy-ignored --out-file-extension .js",
     "build:types": "tspc --pretty --emitDeclarationOnly -p tsconfig.dist.json && node build/transform-types.js && rollup --config build/rollup.types.config.js",
@@ -171,7 +193,8 @@
     "ts-node": "^10.9.2",
     "ts-patch": "^3.2.1",
     "typescript-transform-paths": "^3.5.1",
-    "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']