feat(varlet-ui):support auto import directives

haoziqaq · haoziqaq · commit 275dae778782 · 2021-11-01T01:29:15.000+08:00
diff --git a/src/core/resolvers/varlet-ui.ts b/src/core/resolvers/varlet-ui.ts
@@ -1,4 +1,4 @@
-import { ComponentResolver } from '../../types'
+import { ComponentResolver, ComponentResolveResult } from '../../types'
 import { kebabCase } from '../utils'
 
 export interface VarletUIResolverOptions {
@@ -9,48 +9,69 @@ export interface VarletUIResolverOptions {
    */
   importStyle?: boolean | 'css' | 'less'
 
+  /**
+   * auto import for directives
+   *
+   * @default true
+   */
+  directives?: boolean
+
   /**
    * @deprecated use `importStyle: 'css'` instead
    */
   importCss?: boolean
+
   /**
    * @deprecated use `importStyle: 'less'` instead
    */
   importLess?: boolean
 }
 
+export function getResolved(name: string, options: VarletUIResolverOptions): ComponentResolveResult {
+  const {
+    importStyle = 'css',
+    importCss = true,
+    importLess,
+  } = options
+
+  const sideEffects = []
+
+  if (importStyle || importCss) {
+    if (importStyle === 'less' || importLess)
+      sideEffects.push(`@varlet/ui/es/${kebabCase(name)}/style/less.js`)
+    else
+      sideEffects.push(`@varlet/ui/es/${kebabCase(name)}/style`)
+  }
+
+  return {
+    path: '@varlet/ui',
+    importName: `_${name}Component`,
+    sideEffects,
+  }
+}
+
 /**
  * Resolver for VarletUI
  *
  * @link https://github.com/haoziqaq/varlet
  */
-export function VarletUIResolver(options: VarletUIResolverOptions = {}): ComponentResolver {
-  return {
-    type: 'component',
-    resolve: (name: string) => {
-      const {
-        importStyle = 'css',
-        importCss = true,
-        importLess,
-      } = options
-
-      if (name.startsWith('Var')) {
-        const partialName = name.slice(3)
-        const sideEffects = []
-
-        if (importStyle || importCss) {
-          if (importStyle === 'less' || importLess)
-            sideEffects.push(`@varlet/ui/es/${kebabCase(partialName)}/style/less.js`)
-          else
-            sideEffects.push(`@varlet/ui/es/${kebabCase(partialName)}/style`)
-        }
-
-        return {
-          importName: `_${partialName}Component`,
-          path: '@varlet/ui',
-          sideEffects,
-        }
-      }
+export function VarletUIResolver(options: VarletUIResolverOptions = {}): ComponentResolver[] {
+  return [
+    {
+      type: 'component',
+      resolve: (name: string) => {
+        if (name.startsWith('Var')) return getResolved(name.slice(3), options)
+      },
     },
-  }
+    {
+      type: 'directive',
+      resolve: (name: string) => {
+        const { directives = true } = options
+
+        if (!directives) return
+
+        return getResolved(name, options)
+      },
+    },
+  ]
 }
