feat: allow labs auto-import

closes #315

Author: KaelWD

packages/shared/package.json

@@ -15,7 +15,7 @@
     "url": "git+https://github.com/vuetifyjs/vuetify-loader.git"
   },
   "scripts": {
-    "build": "unbuild",
+    "build": "unbuild && node ../../scripts/patchMJS.mjs",
     "dev": "unbuild --stub"
   },
   "author": "Kael Watts-Deuchar",

packages/shared/src/imports/generateImports.ts

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

packages/shared/src/imports/getImports.ts

@@ -1,27 +1,41 @@
 import { parseTemplate, TemplateMatch } from './parseTemplate'
-import * as importMap from 'vuetify/dist/json/importMap.json'
+import * as importMap from 'vuetify/dist/json/importMap.json' with { type: 'json' }
+import * as importMapLabs from 'vuetify/dist/json/importMap-labs.json' with { type: 'json' }
+import { isObject } from '../'
+import type { Options } from '../'
 
-export function getImports (source: string, ignore: string[] = []) {
+export function getImports (source: string, options: Options) {
   const { components, directives } = parseTemplate(source)
   const resolvedComponents: TemplateMatch[] = []
   const resolvedDirectives: TemplateMatch[] = []
   const imports = new Map<string, string[]>()
+  const ignore = (isObject(options.autoImport) && options.autoImport.ignore) || null
+  const includeLabs = isObject(options.autoImport) && options.autoImport.labs
+  const map = includeLabs
+    ? {
+      components: { ...importMap.components, ...importMapLabs.components },
+      directives: importMap.directives,
+    }
+    : importMap
 
   if (components.size || directives.size) {
     components.forEach(component => {
-      if (component.name in importMap.components && !ignore.includes(component.name)) {
+      if (ignore?.includes(component.name as any)) return
+      if (component.name in importMap.components) {
+        resolvedComponents.push(component)
+      } else if (includeLabs && component.name in importMapLabs.components) {
         resolvedComponents.push(component)
       }
     })
     directives.forEach(directive => {
-      if (importMap.directives.includes(directive.name) && !ignore.includes(directive.name)) {
+      if (importMap.directives.includes(directive.name) && !ignore?.includes(directive.name as any)) {
         resolvedDirectives.push(directive)
       }
     })
   }
 
   resolvedComponents.forEach(component => {
-    addImport(imports, component.name, component.symbol, 'vuetify/lib/' + (importMap.components as any)[component.name].from)
+    addImport(imports, component.name, component.symbol, 'vuetify/lib/' + (map.components as any)[component.name].from)
   })
   resolvedDirectives.forEach(directive => {
     addImport(imports, directive.name, directive.symbol, 'vuetify/lib/directives/index.mjs')

packages/shared/src/index.ts

@@ -3,20 +3,19 @@ import type * as Components from 'vuetify/components'
 import type * as Directives from 'vuetify/directives'
 
 export interface Options {
-  autoImport?: importPluginOptions,
+  autoImport?: ImportPluginOptions,
   styles?: true | 'none' | 'sass' | {
     configFile: string,
   },
 }
 
 export interface ObjectImportPluginOptions {
-  ignore: (keyof typeof Components | keyof typeof Directives)[]
+  labs?: boolean
+  ignore?: (keyof typeof Components | keyof typeof Directives)[]
 }
-export type importPluginOptions =
+export type ImportPluginOptions =
   | boolean
   | ObjectImportPluginOptions
-  // | ((source: string, importer: string, isVuetify: boolean) => boolean | null | replace)
-// type replace = { symbol: string, from: string, as?: string }
 
 export { generateImports } from './imports/generateImports'
 export { cacheDir, writeStyles } from './styles/writeStyles'

packages/vite-plugin/README.md

@@ -26,6 +26,17 @@ import { createVuetify } from 'vuetify'
 export default createVuetify()
 ```
 
+### Include labs components
+```js
+// vite.config.js
+plugins: [
+  vue(),
+  vuetify({
+    autoImport: { labs: true }
+  }),
+]
+```
+
 ### Ignoring components or directives
 ```js
 // vite.config.js

packages/vite-plugin/src/importPlugin.ts

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

packages/vite-plugin/src/stylesPlugin.ts

@@ -1,5 +1,5 @@
 import * as path from 'upath'
-import { resolveVuetifyBase, normalizePath } from '@vuetify/loader-shared'
+import { resolveVuetifyBase, normalizePath, isObject } from '@vuetify/loader-shared'
 
 import type { Plugin } from 'vite'
 import type { Options } from '@vuetify/loader-shared'
@@ -19,7 +19,7 @@ export function stylesPlugin (options: Options): Plugin {
     name: 'vuetify:styles',
     enforce: 'pre',
     configResolved (config) {
-      if (typeof options.styles === 'object') {
+      if (isObject(options.styles)) {
         if (path.isAbsolute(options.styles.configFile)) {
           configFile = options.styles.configFile
         } else {
@@ -40,7 +40,7 @@ export function stylesPlugin (options: Options): Plugin {
         } else if (options.styles === 'sass') {
           const target = source.replace(/\.css$/, '.sass')
           return this.resolve(target, importer, { skipSelf: true, custom })
-        } else if (typeof options.styles === 'object') {
+        } else if (isObject(options.styles)) {
           const resolution = await this.resolve(source, importer, { skipSelf: true, custom })
 
           if (!resolution) return null

packages/webpack-plugin/src/plugin.ts

@@ -34,8 +34,7 @@ export class VuetifyPlugin {
   }
 
   apply (compiler: Compiler) {
-    const autoImport = this.options.autoImport
-    if (autoImport) {
+    if (this.options.autoImport) {
       compiler.options.module.rules.unshift({
         resourceQuery: query => {
           if (!query) return false
@@ -47,7 +46,7 @@ export class VuetifyPlugin {
         },
         use: {
           loader: require.resolve('./scriptLoader'),
-          options: isObject(autoImport) ? autoImport : undefined
+          options: this.options
         },
       })
     }
@@ -88,9 +87,7 @@ export class VuetifyPlugin {
       })
     } else if (this.options.styles === 'sass') {
       hookResolve(file => file.replace(/\.css$/, '.sass'))
-    }
-
-    if (isObject(this.options.styles)) {
+    } else if (isObject(this.options.styles)) {
       const configFile = path.isAbsolute(this.options.styles.configFile)
         ? this.options.styles.configFile
         : path.join(

packages/webpack-plugin/src/scriptLoader.ts

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