feat: add an option for pre-built components

src/core/resolvers/antdv.ts

@@ -230,7 +230,7 @@ function getSideEffects(compName: string, options: AntDesignVueResolverOptions):
     return `ant-design-vue/${lib}/${styleDir}/style/css`
   }
 }
-const primitiveNames = ['Affix', 'Anchor', 'AnchorLink', 'AutoComplete', 'AutoCompleteOptGroup', 'AutoCompleteOption', 'Alert', 'Avatar', 'AvatarGroup', 'BackTop', 'Badge', 'BadgeRibbon', 'Breadcrumb', 'BreadcrumbItem', 'BreadcrumbSeparator', 'Button', 'ButtonGroup', 'Calendar', 'Card', 'CardGrid', 'CardMeta', 'Collapse', 'CollapsePanel', 'Carousel', 'Cascader', 'Checkbox', 'CheckboxGroup', 'Col', 'Comment', 'ConfigProvider', 'DatePicker', 'MonthPicker', 'WeekPicker', 'RangePicker', 'QuarterPicker', 'Descriptions', 'DescriptionsItem', 'Divider', 'Dropdown', 'DropdownButton', 'Drawer', 'Empty', 'Form', 'FormItem', 'FormItemRest', 'Grid', 'Input', 'InputGroup', 'InputPassword', 'InputSearch', 'Textarea', 'Image', 'ImagePreviewGroup', 'InputNumber', 'Layout', 'LayoutHeader', 'LayoutSider', 'LayoutFooter', 'LayoutContent', 'List', 'ListItem', 'ListItemMeta', 'Menu', 'MenuDivider', 'MenuItem', 'MenuItemGroup', 'SubMenu', 'Mentions', 'MentionsOption', 'Modal', 'Statistic', 'StatisticCountdown', 'PageHeader', 'Pagination', 'Popconfirm', 'Popover', 'Progress', 'Radio', 'RadioButton', 'RadioGroup', 'Rate', 'Result', 'Row', 'Select', 'SelectOptGroup', 'SelectOption', 'Skeleton', 'SkeletonButton', 'SkeletonAvatar', 'SkeletonInput', 'SkeletonImage', 'Slider', 'Space', 'Spin', 'Steps', 'Step', 'Switch', 'Table', 'TableColumn', 'TableColumnGroup', 'TableSummary', 'TableSummaryRow', 'TableSummaryCell', 'Transfer', 'Tree', 'TreeNode', 'DirectoryTree', 'TreeSelect', 'TreeSelectNode', 'Tabs', 'TabPane', 'Tag', 'CheckableTag', 'TimePicker', 'TimeRangePicker', 'Timeline', 'TimelineItem', 'Tooltip', 'Typography', 'TypographyLink', 'TypographyParagraph', 'TypographyText', 'TypographyTitle', 'Upload', 'UploadDragger', 'LocaleProvider']
+const primitiveNames = ['Affix', 'Anchor', 'AnchorLink', 'AutoComplete', 'AutoCompleteOptGroup', 'AutoCompleteOption', 'Alert', 'Avatar', 'AvatarGroup', 'BackTop', 'Badge', 'BadgeRibbon', 'Breadcrumb', 'BreadcrumbItem', 'BreadcrumbSeparator', 'Button', 'ButtonGroup', 'Calendar', 'Card', 'CardGrid', 'CardMeta', 'Collapse', 'CollapsePanel', 'Carousel', 'Cascader', 'Checkbox', 'CheckboxGroup', 'Col', 'Comment', 'ConfigProvider', 'DatePicker', 'MonthPicker', 'WeekPicker', 'RangePicker', 'Descriptions', 'DescriptionsItem', 'Divider', 'Dropdown', 'DropdownButton', 'Drawer', 'Empty', 'Form', 'FormItem', 'FormItemRest', 'Grid', 'Input', 'InputGroup', 'InputPassword', 'InputSearch', 'Textarea', 'Image', 'ImagePreviewGroup', 'InputNumber', 'Layout', 'LayoutHeader', 'LayoutSider', 'LayoutFooter', 'LayoutContent', 'List', 'ListItem', 'ListItemMeta', 'Menu', 'MenuDivider', 'MenuItem', 'MenuItemGroup', 'SubMenu', 'Mentions', 'MentionsOption', 'Modal', 'Statistic', 'StatisticCountdown', 'PageHeader', 'Pagination', 'Popconfirm', 'Popover', 'Progress', 'Radio', 'RadioButton', 'RadioGroup', 'Rate', 'Result', 'Row', 'Select', 'SelectOptGroup', 'SelectOption', 'Skeleton', 'SkeletonButton', 'SkeletonAvatar', 'SkeletonInput', 'SkeletonImage', 'Slider', 'Space', 'Spin', 'Steps', 'Step', 'Switch', 'Table', 'TableColumn', 'TableColumnGroup', 'TableSummary', 'TableSummaryRow', 'TableSummaryCell', 'Transfer', 'Tree', 'TreeNode', 'DirectoryTree', 'TreeSelect', 'TreeSelectNode', 'Tabs', 'TabPane', 'Tag', 'CheckableTag', 'TimePicker', 'TimeRangePicker', 'Timeline', 'TimelineItem', 'Tooltip', 'Typography', 'TypographyLink', 'TypographyParagraph', 'TypographyText', 'TypographyTitle', 'Upload', 'UploadDragger', 'LocaleProvider']
 const prefix = 'A'
 
 let antdvNames: Set<string>
@@ -278,5 +278,8 @@ export function AntDesignVueResolver(options: AntDesignVueResolverOptions = {
         }
       }
     },
+    getAllComponentNames: () => {
+      return [...antdvNames]
+    },
   }
 }

src/core/resolvers/vant.ts

@@ -10,6 +10,103 @@ export interface VantResolverOptions {
   importStyle?: boolean | 'css' | 'less'
 }
 
+const primitiveNames = [
+  'ActionBar',
+  'ActionBarButton',
+  'ActionBarIcon',
+  'ActionSheet',
+  'AddressEdit',
+  'AddressList',
+  'Area',
+  'Badge',
+  'Button',
+  'Calendar',
+  'Card',
+  'Cascader',
+  'Cell',
+  'CellGroup',
+  'Checkbox',
+  'CheckboxGroup',
+  'Circle',
+  'Col',
+  'Collapse',
+  'CollapseItem',
+  'ConfigProvider',
+  'ContactCard',
+  'ContactEdit',
+  'ContactList',
+  'CountDown',
+  'Coupon',
+  'CouponCell',
+  'CouponList',
+  'DatetimePicker',
+  'Dialog',
+  'Divider',
+  'DropdownItem',
+  'DropdownMenu',
+  'Empty',
+  'Field',
+  'Form',
+  'Grid',
+  'GridItem',
+  'Icon',
+  'Image',
+  'ImagePreview',
+  'IndexAnchor',
+  'IndexBar',
+  'List',
+  'Loading',
+  'Locale',
+  'NavBar',
+  'NoticeBar',
+  'Notify',
+  'NumberKeyboard',
+  'Overlay',
+  'Pagination',
+  'PasswordInput',
+  'Picker',
+  'Popover',
+  'Popup',
+  'Progress',
+  'PullRefresh',
+  'Radio',
+  'RadioGroup',
+  'Rate',
+  'Row',
+  'Search',
+  'ShareSheet',
+  'Sidebar',
+  'SidebarItem',
+  'Skeleton',
+  'Slider',
+  'Step',
+  'Stepper',
+  'Steps',
+  'Sticky',
+  'SubmitBar',
+  'Swipe',
+  'SwipeCell',
+  'SwipeItem',
+  'Switch',
+  'Tab',
+  'Tabbar',
+  'TabbarItem',
+  'Tabs',
+  'Tag',
+  'Toast',
+  'TreeSelect',
+  'Uploader',
+]
+
+const prefix = 'Van'
+
+let vantNames: Set<string>
+
+function genVantNames(primitiveNames: string[]): void {
+  vantNames = new Set(primitiveNames.map(name => `${prefix}${name}`))
+}
+genVantNames(primitiveNames)
+
 function getSideEffects(dirName: string, options: VantResolverOptions): SideEffectsInfo | undefined {
   const { importStyle = true } = options
 
@@ -43,5 +140,8 @@ export function VantResolver(options: VantResolverOptions = {}): ComponentResolv
         }
       }
     },
+    getAllComponentNames: () => {
+      return [...vantNames]
+    },
   }
 }

src/core/unplugin.ts

@@ -1,11 +1,14 @@
 import { createUnplugin } from 'unplugin'
 import { createFilter } from '@rollup/pluginutils'
 import chokidar from 'chokidar'
-import type { ResolvedConfig, ViteDevServer } from 'vite'
-import type { Options } from '../types'
+import Debug from 'debug'
+import type { ResolvedConfig, UserConfig, ViteDevServer } from 'vite'
+import type { ComponentInfo, Options } from '../types'
 import { Context } from './context'
 import { shouldTransform } from './utils'
 
+const debug = Debug('unplugin-vue-components:unplugin')
+
 export default createUnplugin<Options>((options = {}) => {
   const filter = createFilter(
     options.include || [/\.vue$/, /\.vue\?vue/],
@@ -35,6 +38,30 @@ export default createUnplugin<Options>((options = {}) => {
     },
 
     vite: {
+      config(config: UserConfig) {
+        if (ctx.options.preBuild) {
+          ctx.options.resolvers.forEach((r) => {
+            if (r.getAllComponentNames) {
+              const allComponentNames = r.getAllComponentNames()
+              const resolvedNames = allComponentNames
+                .map((name) => {
+                  const componentInfo = r.resolve(name) as ComponentInfo
+                  debug(componentInfo)
+
+                  const fullPath = componentInfo.name ? `${componentInfo.path}/${componentInfo.name}` : componentInfo.path
+
+                  const sideEffects = (componentInfo?.sideEffects as string) || ''
+
+                  return [fullPath, sideEffects]
+                })
+                .flat()
+              config.optimizeDeps = config.optimizeDeps || {}
+              config.optimizeDeps.include = Array.from(new Set([...(config.optimizeDeps.include || []), ...resolvedNames]))
+              config.optimizeDeps.include.sort()
+            }
+          })
+        }
+      },
       configResolved(config: ResolvedConfig) {
         ctx.setRoot(config.root)
         ctx.sourcemap = true

src/types.ts

@@ -20,6 +20,7 @@ export type ComponentResolverFunction = (name: string) => ComponentResolveResult
 export interface ComponentResolverObject {
   type: 'component' | 'directive'
   resolve: ComponentResolverFunction
+  getAllComponentNames?: () => Array<string>
 }
 export type ComponentResolver = ComponentResolverFunction | ComponentResolverObject
 export interface UILibraryOptions {
@@ -152,6 +153,7 @@ Required<Options>,
   globs: string[]
   dts: string | false
   root: string
+  preBuild?: boolean
 }
 
 export type ComponentsImportMap = Record<string, string[] | undefined>