feat: add autoImport ignore option (#323)

Co-authored-by: Kael <[email protected]>

Author: a3mitskevich

packages/shared/src/imports/generateImports.ts

@@ -1,7 +1,7 @@
 import { getImports } from './getImports'
 
-export function generateImports (source: string) {
-  const { imports, components, directives } = getImports(source)
+export function generateImports (source: string, ignore: string[] = []) {
+  const { imports, components, directives } = getImports(source, ignore)
 
   let code = ''
 

packages/shared/src/imports/getImports.ts

@@ -1,20 +1,20 @@
 import { parseTemplate, TemplateMatch } from './parseTemplate'
 import * as importMap from 'vuetify/dist/json/importMap.json'
 
-export function getImports (source: string) {
+export function getImports (source: string, ignore: string[] = []) {
   const { components, directives } = parseTemplate(source)
   const resolvedComponents: TemplateMatch[] = []
   const resolvedDirectives: TemplateMatch[] = []
   const imports = new Map<string, string[]>()
 
   if (components.size || directives.size) {
     components.forEach(component => {
-      if (component.name in importMap.components) {
+      if (component.name in importMap.components && !ignore.includes(component.name)) {
         resolvedComponents.push(component)
       }
     })
     directives.forEach(directive => {
-      if (importMap.directives.includes(directive.name)) {
+      if (importMap.directives.includes(directive.name) && !ignore.includes(directive.name)) {
         resolvedDirectives.push(directive)
       }
     })

packages/shared/src/index.ts

@@ -1,4 +1,6 @@
 import * as path from 'upath'
+import type * as Components from 'vuetify/components'
+import type * as Directives from 'vuetify/directives'
 
 export interface Options {
   autoImport?: importPluginOptions,
@@ -7,8 +9,12 @@ export interface Options {
   },
 }
 
+export interface ObjectImportPluginOptions {
+  ignore: (keyof typeof Components | keyof typeof Directives)[]
+}
 export type importPluginOptions =
   | boolean
+  | ObjectImportPluginOptions
   // | ((source: string, importer: string, isVuetify: boolean) => boolean | null | replace)
 // type replace = { symbol: string, from: string, as?: string }
 

packages/vite-plugin/README.md

@@ -26,6 +26,23 @@ import { createVuetify } from 'vuetify'
 export default createVuetify()
 ```
 
+### Ignoring components or directives
+```js
+// vite.config.js
+plugins: [
+  vue(),
+  vuetify({ 
+    autoImport: {
+      ignore: [
+        'VAlert', // Component name
+        'Ripple', // Directive name
+      ]
+    }
+  }), 
+]
+```
+Note `ignore` values are case-sensitive
+
 ## Style loading
 ### Customising variables
 ```js

packages/vite-plugin/src/importPlugin.ts

@@ -1,6 +1,6 @@
 import { extname } from 'path'
 import { Plugin } from 'vite'
-import { generateImports } from '@vuetify/loader-shared'
+import { generateImports, importPluginOptions, isObject } from '@vuetify/loader-shared'
 import { parse as parseUrl, URLSearchParams } from 'url'
 
 function parseId (id: string) {
@@ -12,7 +12,8 @@ function parseId (id: string) {
   }
 }
 
-export function importPlugin (): Plugin {
+export function importPlugin (_options: importPluginOptions): Plugin {
+  const options = isObject(_options) ? _options : { ignore: [] };
   return {
     name: 'vuetify:import',
     configResolved (config) {
@@ -27,7 +28,7 @@ export function importPlugin (): Plugin {
         ((!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)
+        const { code: imports, source } = generateImports(code, options.ignore)
         return {
           code: source + imports,
           map: null,

packages/vite-plugin/src/index.ts

@@ -13,7 +13,7 @@ export default function vuetify (_options: Options = {}): Plugin[] {
 
   const plugins: Plugin[] = []
   if (options.autoImport) {
-    plugins.push(importPlugin())
+    plugins.push(importPlugin(options.autoImport))
   }
   if (includes(['none', 'sass'], options.styles) || isObject(options.styles)) {
     plugins.push(stylesPlugin(options))

packages/webpack-plugin/src/plugin.ts

@@ -34,7 +34,8 @@ export class VuetifyPlugin {
   }
 
   apply (compiler: Compiler) {
-    if (this.options.autoImport) {
+    const autoImport = this.options.autoImport
+    if (autoImport) {
       compiler.options.module.rules.unshift({
         resourceQuery: query => {
           if (!query) return false
@@ -44,7 +45,10 @@ export class VuetifyPlugin {
             (qs.get('type') === 'script' && qs.has('setup'))
           )
         },
-        use: { loader: require.resolve('./scriptLoader') },
+        use: {
+          loader: require.resolve('./scriptLoader'),
+          options: isObject(autoImport) ? autoImport : undefined
+        },
       })
     }
 

packages/webpack-plugin/src/scriptLoader.ts

@@ -1,5 +1,5 @@
 import { LoaderDefinitionFunction } from 'webpack'
-import { generateImports } from '@vuetify/loader-shared'
+import { generateImports, ObjectImportPluginOptions } from '@vuetify/loader-shared'
 
 export default (function VuetifyLoader (content, sourceMap) {
   if (this.data?.skip) {
@@ -9,10 +9,12 @@ export default (function VuetifyLoader (content, sourceMap) {
   this.async()
   this.cacheable()
 
-  const { code: imports, source } = generateImports(content)
+  const options = this.getOptions()
+
+  const { code: imports, source } = generateImports(content, options?.ignore)
 
   this.callback(null, source + imports, sourceMap)
-} as LoaderDefinitionFunction)
+} as LoaderDefinitionFunction<ObjectImportPluginOptions | undefined>)
 
 export const pitch = (function VuetifyLoaderPitch (remainingRequest, precedingRequest, data) {
   if (this.loaders.some(loader => loader.path.endsWith('vue-loader/dist/pitcher.js'))) {