feat: add unplugin-vue-components and unimport integration

packages/vuetify/.eslintignore

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

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/package.json

@@ -119,8 +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 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 && pnpm run build:unimport",
-    "build:unimport": "unbuild",
+    "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",
@@ -189,7 +188,6 @@
     "rollup-plugin-sourcemaps": "^0.6.3",
     "rollup-plugin-terser": "^7.0.2",
     "timezone-mock": "^1.3.6",
-    "unbuild": "^2.0.0",
     "unimport": "^3.13.1",
     "unplugin-auto-import": "^0.18.3",
     "unplugin-vue-components": "^0.27.4",