feat(devui): refactor devui resolver (unplugin#478)

libondev · web-flow · commit f27472d702e3 · 2022-08-04T14:48:18.000+08:00
diff --git a/README.md b/README.md
@@ -202,6 +202,7 @@ Supported Resolvers:
 - [View UI](https://github.com/antfu/unplugin-vue-components/blob/main/src/core/resolvers/view-ui.ts)
 - [Vuetify](https://github.com/antfu/unplugin-vue-components/blob/main/src/core/resolvers/vuetify.ts)
 - [VueUse Components](https://github.com/antfu/unplugin-vue-components/blob/main/src/core/resolvers/vueuse.ts)
+- [Dev UI](https://github.com/antfu/unplugin-vue-components/blob/main/src/core/resolvers/devui.ts)
 
 ```ts
 // vite.config.js
diff --git a/src/core/resolvers/devui.ts b/src/core/resolvers/devui.ts
@@ -15,73 +15,78 @@ export interface DevResolverOptions {
    * @default true
    */
   directives?: boolean
+
+  /**
+   * use umd lib file
+   */
+  ssr?: boolean
 }
 
 const LIB_NAME = 'vue-devui'
+const HARMLESS = ['ripple']
 
-const findStyle = (name: string) => {
-  if (!name || !Array.isArray(name))
-    return `${LIB_NAME}/${name}/style.css`
+// Locate the target path folder.
+function resolveDirectory(name: string, filename: string) {
+  return `${LIB_NAME}/${name}/${filename}`
 }
 
-const effectComponentMaps: Record<string, string> = {
-  'row,col': 'grid',
-  'aside,content,footer,header,layout': 'layout',
-  'overlay,fixed-overlay,flexible-overlay': 'overlay',
-}
+// Gets the component style file
+function getSideEffects(name: string) {
+  if (HARMLESS.includes(name))
+    return
 
-const effectDirectiveMaps: Record<string, string> = {
-  // Directives exist, but style files are not required
-  Ripple: '',
-  Draggable: '',
-  Droppable: '',
+  if (['row', 'col'].includes(name))
+    return resolveDirectory('grid', 'style.css')
 
-  Loading: 'loading',
-  ImagePreview: 'image-preview',
-}
+  if (['aside', 'content', 'footer', 'header', 'layout'].includes(name))
+    return resolveDirectory('layout', 'style.css')
 
-const effectComponentKeys = Object.keys(effectComponentMaps)
+  if (['overlay', 'fixed-overlay', 'flexible-overlay'].includes(name))
+    return resolveDirectory('overlay', 'style.css')
 
-// Gets the component style file
-function getSideEffects(name: string): string | undefined {
-  const match = effectComponentKeys.find((key: string) => key.includes(name))
-  return (match && effectComponentMaps[match]) && findStyle(match)
+  return resolveDirectory(name, 'style.css')
 }
 
-function componentsResolver(name: string): ComponentInfo | undefined {
+function componentsResolver(name: string, { ssr }: DevResolverOptions): ComponentInfo | undefined {
   if (!name.match(/^D[A-Z]/))
     return
 
   // Alert => alert; DatePicker => date-picker
   const resolveId = kebabCase(name = name.slice(1))
 
   return {
-    from: LIB_NAME,
-    as: name,
+    name,
     sideEffects: getSideEffects(resolveId),
+    from: resolveDirectory(resolveId, `index.${ssr ? 'umd' : 'es'}.js`),
   }
 }
 
-function directivesResolver(name: string): ComponentInfo | undefined {
-  if (!(name in effectDirectiveMaps))
-    return
+function directivesResolver(name: string, { ssr }: DevResolverOptions): ComponentInfo | undefined {
+  const resolveId = kebabCase(name)
 
   return {
-    from: LIB_NAME,
-    as: `${name}Directive`,
-    sideEffects: findStyle(effectDirectiveMaps[name]),
+    name: `${name}Directive`,
+    sideEffects: getSideEffects(resolveId),
+    from: resolveDirectory(resolveId, `index.${ssr ? 'umd' : 'es'}.js`),
   }
 }
 
 export function DevUiResolver(options: DevResolverOptions = {}): ComponentResolver[] {
-  const config = { directives: true, importStyle: true, ...options }
+  const config = { directives: true, importStyle: true, ssr: false, ...options }
 
   const resolvers: ComponentResolver[] = [
-    { type: 'component', resolve: componentsResolver },
+    {
+      type: 'component',
+      resolve: (name: string) => componentsResolver(name, config),
+    },
   ]
 
-  if (config.directives)
-    resolvers.push({ type: 'directive', resolve: directivesResolver })
+  if (config.directives) {
+    resolvers.push({
+      type: 'directive',
+      resolve: (name: string) => directivesResolver(name, config),
+    })
+  }
 
   return resolvers
 }
