feat(arco): add arco design vue resolver (unplugin#252)

flsion · web-flow · commit e613c81e7e66 · 2021-12-21T01:51:48.000+08:00
diff --git a/README.md b/README.md
@@ -166,6 +166,7 @@ We have several built-in resolvers for popular UI libraries like **Vuetify**, **
 Supported Resolvers:
 
 - [Ant Design Vue](https://github.com/antfu/unplugin-vue-components/blob/main/src/core/resolvers/antdv.ts)
+- [Arco Design Vue](https://github.com/antfu/unplugin-vue-components/blob/main/src/core/resolvers/arco.ts)
 - [Element Plus](https://github.com/antfu/unplugin-vue-components/blob/main/src/core/resolvers/element-plus.ts)
 - [Element UI](https://github.com/antfu/unplugin-vue-components/blob/main/src/core/resolvers/element-ui.ts)
 - [Headless UI](https://github.com/antfu/unplugin-vue-components/blob/main/src/core/resolvers/headless-ui.ts)
diff --git a/src/core/resolvers/arco.ts b/src/core/resolvers/arco.ts
@@ -0,0 +1,179 @@
+import { ComponentResolver } from '../../types'
+import { kebabCase } from '../utils'
+
+const matchComponents = [
+  {
+    pattern: /^AnchorLink$/,
+    componentDir: 'anchor',
+  },
+  {
+    pattern: /^AvatarGroup$/,
+    componentDir: 'avatar',
+  },
+  {
+    pattern: /^BreadcrumbItem$/,
+    componentDir: 'breadcrumb',
+  },
+
+  {
+    pattern: /^ButtonGroup$/,
+    componentDir: 'button',
+  },
+  {
+    pattern: /^(CardMeta|CardGrid)$/,
+    componentDir: 'card',
+  },
+  {
+    pattern: /^CarouselItem$/,
+    componentDir: 'carousel',
+  },
+  {
+    pattern: /^CheckboxGroup$/,
+    componentDir: 'checkbox',
+  },
+  {
+    pattern: /^CollapseItem$/,
+    componentDir: 'collapse',
+  },
+  {
+    pattern: /^(WeekPicker|MonthPicker|YearPicker|QuarterPicker|RangePicker)$/,
+    componentDir: 'date-picker',
+  },
+  {
+    pattern: /^(Doption|Dgroup|Dsubmenu)$/,
+    componentDir: 'dropdown',
+  },
+  {
+    pattern: /^FormItem$/,
+    componentDir: 'form',
+  },
+  {
+    pattern: /^(Col|Row)$/,
+    componentDir: 'grid',
+  },
+
+  {
+    pattern: /^(ImagePreview|ImagePreviewGroup)$/,
+    componentDir: 'image',
+  },
+  {
+    pattern: /^(InputGroup|InputSearch|InputPassword)$/,
+    componentDir: 'input',
+  },
+
+  {
+    pattern: /^(LayoutHeader|LayoutContent|LayoutFooter|LayoutSider)$/,
+    componentDir: 'layout',
+  },
+  {
+    pattern: /^(ListItem|ListItemMeta)$/,
+    componentDir: 'list',
+  },
+  {
+    pattern: /^(MenuItem|MenuItemGroup|SubMenu)$/,
+    componentDir: 'menu',
+  },
+  {
+    pattern: /^RadioGroup$/,
+    componentDir: 'radio',
+  },
+  {
+    pattern: /^(Option|Optgroup)$/,
+    componentDir: 'select',
+  },
+
+  {
+    pattern: /^(SkeletonLine|SkeletonShape)$/,
+    componentDir: 'table',
+  },
+  {
+    pattern: /^Countdown$/,
+    componentDir: 'statistic',
+  },
+
+  {
+    pattern: /^Step$/,
+    componentDir: 'steps',
+  },
+
+  {
+    pattern: /^(Thead|Td|Th|Tr|Tbody|TableColumn)$/,
+    componentDir: 'table',
+  },
+
+  {
+    pattern: /^TabPane$/,
+    componentDir: 'tabs',
+  },
+  {
+    pattern: /^TimelineItem$/,
+    componentDir: 'timeline',
+  },
+
+  {
+    pattern: /^(TypographyParagraph|TypographyTitle|TypographyText)$/,
+    componentDir: 'typography',
+  },
+]
+
+function getComponentStyleDir(importName: string, importStyle: boolean | 'css' | 'less') {
+  let componentDir = kebabCase(importName)
+  for (const item of matchComponents) {
+    if (item.pattern.test(importName)) {
+      componentDir = item.componentDir
+      break
+    }
+  }
+  if (importStyle === 'less') return `@arco-design/web-vue/es/${componentDir}/style/index.js`
+  if (importStyle === 'css' || importStyle) return `@arco-design/web-vue/es/${componentDir}/style/css.js`
+}
+
+export interface ArcoResolverOptions {
+  /**
+   * import style css or less with components
+   *
+   * @default 'css'
+   */
+  importStyle?: boolean | 'css' | 'less'
+  /**
+   * resolve icons
+   *
+   * @default false
+   */
+  resolveIcons?: boolean
+}
+
+/**
+ * Resolver for Arco Design Vue
+ *
+ * Requires arco-design/web-vue@2.11.0 or later
+ *
+ * @author @flsion
+ * @link https://arco.design/ for arco-design
+ *
+ */
+export function ArcoResolver(
+  options: ArcoResolverOptions = {},
+): ComponentResolver {
+  return {
+    type: 'component',
+    resolve: (name: string) => {
+      if (options.resolveIcons && name.match(/^Icon/)) {
+        return {
+          importName: name,
+          path: '@arco-design/web-vue/es/icon',
+        }
+      }
+      if (name.match(/^A/)) {
+        const importStyle = options.importStyle ?? 'css'
+
+        const importName = name.slice(1)
+        return {
+          importName,
+          path: '@arco-design/web-vue',
+          sideEffects: getComponentStyleDir(importName, importStyle),
+        }
+      }
+    },
+  }
+}
