From 3138dea79742d902a704d9fdadcc1ddc949285d8 Mon Sep 17 00:00:00 2001 From: jeremywu <15975785+JeremyWuuuuu@users.noreply.github.com> Date: Fri, 24 Sep 2021 19:11:56 +0800 Subject: [PATCH] fix(components): sub components no install issue (#3615) - Add noop install for all sub components for supress the warning --- packages/components/breadcrumb/index.ts | 4 +-- packages/components/button/index.ts | 4 +-- packages/components/carousel/index.ts | 21 ++++-------- packages/components/checkbox/index.ts | 29 +++++----------- packages/components/collapse/index.ts | 23 ++++--------- packages/components/container/index.ts | 41 +++++++---------------- packages/components/descriptions/index.ts | 25 ++++---------- packages/components/dropdown/index.ts | 30 +++++------------ packages/components/form/index.ts | 21 ++++-------- packages/components/menu/index.ts | 36 ++++++-------------- packages/components/radio/index.ts | 30 +++++------------ packages/components/select/index.ts | 30 +++++------------ packages/components/skeleton/index.ts | 24 ++++--------- packages/components/steps/index.ts | 24 ++++--------- packages/components/table/index.ts | 23 ++++--------- packages/components/tabs/index.ts | 23 ++++--------- packages/components/timeline/index.ts | 23 ++++--------- packages/utils/with-install.ts | 7 ++++ 18 files changed, 129 insertions(+), 289 deletions(-) diff --git a/packages/components/breadcrumb/index.ts b/packages/components/breadcrumb/index.ts index 584ac03b0c..efb6339119 100644 --- a/packages/components/breadcrumb/index.ts +++ b/packages/components/breadcrumb/index.ts @@ -1,4 +1,4 @@ -import { withInstall } from '@element-plus/utils/with-install' +import { withInstall, withNoopInstall } from '@element-plus/utils/with-install' import Breadcrumb from './src/breadcrumb.vue' import BreadcrumbItem from './src/breadcrumb-item.vue' @@ -6,7 +6,7 @@ import BreadcrumbItem from './src/breadcrumb-item.vue' export const ElBreadcrumb = withInstall(Breadcrumb, { BreadcrumbItem, }) -export const ElBreadcrumbItem = BreadcrumbItem +export const ElBreadcrumbItem = withNoopInstall(BreadcrumbItem) export default ElBreadcrumb export * from './src/breadcrumb' diff --git a/packages/components/button/index.ts b/packages/components/button/index.ts index db9e4842c9..ac9094abd6 100644 --- a/packages/components/button/index.ts +++ b/packages/components/button/index.ts @@ -1,11 +1,11 @@ -import { withInstall } from '@element-plus/utils/with-install' +import { withInstall, withNoopInstall } from '@element-plus/utils/with-install' import Button from './src/button.vue' import ButtonGroup from './src/button-group.vue' export const ElButton = withInstall(Button, { ButtonGroup, }) -export const ElButtonGroup = ButtonGroup +export const ElButtonGroup = withNoopInstall(ButtonGroup) export default ElButton export * from './src/button' diff --git a/packages/components/carousel/index.ts b/packages/components/carousel/index.ts index 23d881ba1b..8701ba89e6 100644 --- a/packages/components/carousel/index.ts +++ b/packages/components/carousel/index.ts @@ -1,20 +1,11 @@ +import { withInstall, withNoopInstall } from '@element-plus/utils/with-install' import Carousel from './src/main.vue' import CarouselItem from './src/item.vue' -import type { App } from 'vue' -import type { SFCWithInstall } from '@element-plus/utils/types' -Carousel.install = (app: App): void => { - app.component(Carousel.name, Carousel) - app.component(CarouselItem.name, CarouselItem) -} +export const ElCarousel = withInstall(Carousel, { + CarouselItem, +}) -Carousel.CarouselItem = CarouselItem +export default ElCarousel -const _Carousel = Carousel as any as SFCWithInstall & { - CarouselItem: typeof CarouselItem -} - -export default _Carousel - -export const ElCarousel = _Carousel -export const ElCarouselItem = CarouselItem +export const ElCarouselItem = withNoopInstall(CarouselItem) diff --git a/packages/components/checkbox/index.ts b/packages/components/checkbox/index.ts index 76251f2d7c..60741cc2cc 100644 --- a/packages/components/checkbox/index.ts +++ b/packages/components/checkbox/index.ts @@ -1,25 +1,14 @@ +import { withInstall, withNoopInstall } from '@element-plus/utils/with-install' + import Checkbox from './src/checkbox.vue' import CheckboxButton from './src/checkbox-button.vue' import CheckboxGroup from './src/checkbox-group.vue' -import type { App } from 'vue' -import type { SFCWithInstall } from '@element-plus/utils/types' +export const ElCheckbox = withInstall(Checkbox, { + CheckboxButton, + CheckboxGroup, +}) +export default ElCheckbox -Checkbox.install = (app: App): void => { - app.component(Checkbox.name, Checkbox) - app.component(CheckboxButton.name, CheckboxButton) - app.component(CheckboxGroup.name, CheckboxGroup) -} - -Checkbox.CheckboxButton = CheckboxButton -Checkbox.CheckboxGroup = CheckboxGroup - -const _Checkbox = Checkbox as any as SFCWithInstall & { - CheckboxButton: typeof CheckboxButton - CheckboxGroup: typeof CheckboxGroup -} - -export default _Checkbox -export const ElCheckbox = _Checkbox -export const ElCheckboxButton = CheckboxButton -export const ElCheckboxGroup = CheckboxGroup +export const ElCheckboxButton = withNoopInstall(CheckboxButton) +export const ElCheckboxGroup = withNoopInstall(CheckboxGroup) diff --git a/packages/components/collapse/index.ts b/packages/components/collapse/index.ts index 5a83931b2e..f00251c701 100644 --- a/packages/components/collapse/index.ts +++ b/packages/components/collapse/index.ts @@ -1,19 +1,10 @@ +import { withInstall, withNoopInstall } from '@element-plus/utils/with-install' + import Collapse from './src/collapse.vue' import CollapseItem from './src/collapse-item.vue' -import type { App } from 'vue' -import type { SFCWithInstall } from '@element-plus/utils/types' -Collapse.install = (app: App): void => { - app.component(Collapse.name, Collapse) - app.component(CollapseItem.name, CollapseItem) -} - -Collapse.CollapseItem = CollapseItem - -const _Collapse = Collapse as any as SFCWithInstall & { - CollapseItem: typeof CollapseItem -} - -export default _Collapse -export const ElCollapse = _Collapse -export const ElCollapseItem = CollapseItem +export const ElCollapse = withInstall(Collapse, { + CollapseItem, +}) +export default ElCollapse +export const ElCollapseItem = withNoopInstall(CollapseItem) diff --git a/packages/components/container/index.ts b/packages/components/container/index.ts index 4b4c384180..05804894b6 100644 --- a/packages/components/container/index.ts +++ b/packages/components/container/index.ts @@ -1,35 +1,20 @@ +import { withInstall, withNoopInstall } from '@element-plus/utils/with-install' + import Container from './src/container.vue' import Aside from './src/aside.vue' import Footer from './src/footer.vue' import Header from './src/header.vue' import Main from './src/main.vue' -import type { App } from 'vue' -import type { SFCWithInstall } from '@element-plus/utils/types' +export const ElContainer = withInstall(Container, { + Aside, + Footer, + Header, + Main, +}) -Container.install = (app: App): void => { - app.component(Container.name, Container) - app.component(Aside.name, Aside) - app.component(Footer.name, Footer) - app.component(Header.name, Header) - app.component(Main.name, Main) -} - -Container.Aside = Aside -Container.Footer = Footer -Container.Header = Header -Container.Main = Main - -const _Container = Container as any as SFCWithInstall & { - Aside: typeof Aside - Footer: typeof Footer - Header: typeof Header - Main: typeof Main -} - -export default _Container -export const ElContainer = _Container -export const ElAside = Aside -export const ElFooter = Footer -export const ElHeader = Header -export const ElMain = Main +export default ElContainer +export const ElAside = withNoopInstall(Aside) +export const ElFooter = withNoopInstall(Footer) +export const ElHeader = withNoopInstall(Header) +export const ElMain = withNoopInstall(Main) diff --git a/packages/components/descriptions/index.ts b/packages/components/descriptions/index.ts index 7462d129c5..0e32af2590 100644 --- a/packages/components/descriptions/index.ts +++ b/packages/components/descriptions/index.ts @@ -1,22 +1,11 @@ +import { withInstall, withNoopInstall } from '@element-plus/utils/with-install' + import Descriptions from './src/index.vue' import DescriptionsItem from './src/description-item' -import type { App } from 'vue' -import type { SFCWithInstall } from '@element-plus/utils/types' +export const ElDescriptions = withInstall(Descriptions, { + DescriptionsItem, +}) +export default ElDescriptions -Descriptions.install = (app: App): void => { - app.component(Descriptions.name, Descriptions) - app.component(ElDescriptionsItem.name, ElDescriptionsItem) -} - -Descriptions.DescriptionsItem = DescriptionsItem - -const _Descriptions = Descriptions as any as SFCWithInstall< - typeof Descriptions -> & { - DescriptionsItem: typeof DescriptionsItem -} - -export default _Descriptions -export const ElDescriptions = _Descriptions -export const ElDescriptionsItem = DescriptionsItem +export const ElDescriptionsItem = withNoopInstall(DescriptionsItem) diff --git a/packages/components/dropdown/index.ts b/packages/components/dropdown/index.ts index 56b9553571..e1b535c6ec 100644 --- a/packages/components/dropdown/index.ts +++ b/packages/components/dropdown/index.ts @@ -1,25 +1,13 @@ +import { withInstall, withNoopInstall } from '@element-plus/utils/with-install' + import Dropdown from './src/dropdown.vue' import DropdownItem from './src/dropdown-item.vue' import DropdownMenu from './src/dropdown-menu.vue' -import type { App } from 'vue' -import type { SFCWithInstall } from '@element-plus/utils/types' - -Dropdown.install = (app: App): void => { - app.component(Dropdown.name, Dropdown) - app.component(DropdownItem.name, DropdownItem) - app.component(DropdownMenu.name, DropdownMenu) -} - -Dropdown.DropdownItem = DropdownItem -Dropdown.DropdownMenu = DropdownMenu - -const _Dropdown = Dropdown as any as SFCWithInstall & { - DropdownItem: typeof DropdownItem - DropdownMenu: typeof DropdownMenu -} - -export default _Dropdown -export const ElDropdown = _Dropdown -export const ElDropdownItem = DropdownItem -export const ElDropdownMenu = DropdownMenu +export const ElDropdown = withInstall(Dropdown, { + DropdownItem, + DropdownMenu, +}) +export default ElDropdown +export const ElDropdownItem = withNoopInstall(DropdownItem) +export const ElDropdownMenu = withNoopInstall(DropdownMenu) diff --git a/packages/components/form/index.ts b/packages/components/form/index.ts index 5419c1b946..ea6e2bb0a4 100644 --- a/packages/components/form/index.ts +++ b/packages/components/form/index.ts @@ -1,20 +1,11 @@ +import { withInstall, withNoopInstall } from '@element-plus/utils/with-install' import Form from './src/form.vue' import FormItem from './src/form-item.vue' -import type { App } from 'vue' -import type { SFCWithInstall } from '@element-plus/utils/types' +export const ElForm = withInstall(Form, { + FormItem, +}) -Form.install = (app: App): void => { - app.component(Form.name, Form) - app.component(FormItem.name, FormItem) -} +export default ElForm -Form.FormItem = FormItem - -const _Form = Form as any as SFCWithInstall & { - FormItem: typeof FormItem -} - -export default _Form -export const ElForm = _Form -export const ElFormItem = FormItem +export const ElFormItem = withNoopInstall(FormItem) diff --git a/packages/components/menu/index.ts b/packages/components/menu/index.ts index 15db5a25ac..a098470046 100644 --- a/packages/components/menu/index.ts +++ b/packages/components/menu/index.ts @@ -1,32 +1,18 @@ +import { withInstall, withNoopInstall } from '@element-plus/utils/with-install' + import Menu from './src/menu' import MenuItem from './src/menuItem.vue' import MenuItemGroup from './src/menuItemGroup.vue' import SubMenu from './src/submenu.vue' -import type { App } from 'vue' -import type { SFCWithInstall } from '@element-plus/utils/types' - -Menu.install = (app: App): void => { - app.component(Menu.name, Menu) - app.component(MenuItem.name, MenuItem) - app.component(MenuItemGroup.name, MenuItemGroup) - app.component(SubMenu.name, SubMenu) -} - -Menu.MenuItem = MenuItem -Menu.MenuItemGroup = MenuItemGroup -Menu.SubMenu = SubMenu - -const _Menu = Menu as any as SFCWithInstall & { - MenuItem: typeof MenuItem - MenuItemGroup: typeof MenuItemGroup - SubMenu: typeof SubMenu -} - -export default _Menu -export const ElMenu = _Menu -export const ElMenuItem = MenuItem -export const ElMenuItemGroup = MenuItemGroup -export const ElSubMenu = SubMenu +export const ElMenu = withInstall(Menu, { + MenuItem, + MenuItemGroup, + SubMenu, +}) +export default ElMenu +export const ElMenuItem = withNoopInstall(MenuItem) +export const ElMenuItemGroup = withNoopInstall(MenuItemGroup) +export const ElSubMenu = withNoopInstall(SubMenu) export * from './src/menu.type' diff --git a/packages/components/radio/index.ts b/packages/components/radio/index.ts index dade15035f..52defd5d12 100644 --- a/packages/components/radio/index.ts +++ b/packages/components/radio/index.ts @@ -1,27 +1,15 @@ +import { withInstall, withNoopInstall } from '@element-plus/utils/with-install' + import Radio from './src/radio.vue' import RadioButton from './src/radio-button.vue' import RadioGroup from './src/radio-group.vue' -import type { App } from 'vue' -import type { SFCWithInstall } from '@element-plus/utils/types' - -Radio.install = (app: App): void => { - app.component(Radio.name, Radio) - app.component(RadioButton.name, RadioButton) - app.component(RadioGroup.name, RadioGroup) -} - -Radio.RadioButton = RadioButton -Radio.RadioGroup = RadioGroup - -const _Radio = Radio as any as SFCWithInstall & { - RadioButton: typeof RadioButton - RadioGroup: typeof RadioGroup -} - -export default _Radio -export const ElRadio = _Radio -export const ElRadioGroup = RadioGroup -export const ElRadioButton = RadioButton +export const ElRadio = withInstall(Radio, { + RadioButton, + RadioGroup, +}) +export default ElRadio +export const ElRadioGroup = withNoopInstall(RadioGroup) +export const ElRadioButton = withNoopInstall(RadioButton) export * from './src/token' diff --git a/packages/components/select/index.ts b/packages/components/select/index.ts index 157942911e..c9a7a35bb0 100644 --- a/packages/components/select/index.ts +++ b/packages/components/select/index.ts @@ -1,27 +1,15 @@ +import { withInstall, withNoopInstall } from '@element-plus/utils/with-install' + import Select from './src/select.vue' import Option from './src/option.vue' import OptionGroup from './src/option-group.vue' -import type { App } from 'vue' -import type { SFCWithInstall } from '@element-plus/utils/types' - -Select.install = (app: App): void => { - app.component(Select.name, Select) - app.component(Option.name, Option) - app.component(OptionGroup.name, OptionGroup) -} - -Select.Option = Option -Select.OptionGroup = OptionGroup - -const _Select = Select as any as SFCWithInstall & { - Option: typeof Option - OptionGroup: typeof OptionGroup -} - -export default _Select -export const ElSelect = _Select -export const ElOption = Option -export const ElOptionGroup = OptionGroup +export const ElSelect = withInstall(Select, { + Option, + OptionGroup, +}) +export default ElSelect +export const ElOption = withNoopInstall(Option) +export const ElOptionGroup = withNoopInstall(OptionGroup) export * from './src/token' diff --git a/packages/components/skeleton/index.ts b/packages/components/skeleton/index.ts index 0b8fb5f35f..798be03f43 100644 --- a/packages/components/skeleton/index.ts +++ b/packages/components/skeleton/index.ts @@ -1,22 +1,12 @@ +import { withInstall, withNoopInstall } from '@element-plus/utils/with-install' + import Skeleton from './src/index.vue' import SkeletonItem from './src/item.vue' -import type { App } from 'vue' -import type { SFCWithInstall } from '@element-plus/utils/types' - -Skeleton.install = (app: App): void => { - app.component(Skeleton.name, Skeleton) - app.component(SkeletonItem.name, SkeletonItem) -} - -Skeleton.SkeletonItem = SkeletonItem - -const _Skeleton = Skeleton as any as SFCWithInstall & { - SkeletonItem: typeof SkeletonItem -} - -export default _Skeleton -export const ElSkeleton = _Skeleton -export const ElSkeletonItem = SkeletonItem +export const ElSkeleton = withInstall(Skeleton, { + SkeletonItem, +}) +export default ElSkeleton +export const ElSkeletonItem = withNoopInstall(SkeletonItem) export * from './src/types' diff --git a/packages/components/steps/index.ts b/packages/components/steps/index.ts index fe9f2de41c..20e9a31e14 100644 --- a/packages/components/steps/index.ts +++ b/packages/components/steps/index.ts @@ -1,20 +1,10 @@ +import { withInstall, withNoopInstall } from '@element-plus/utils/with-install' + import Steps from './src/index.vue' import Step from './src/item.vue' -import type { App } from 'vue' -import type { SFCWithInstall } from '@element-plus/utils/types' - -Steps.install = (app: App): void => { - app.component(Steps.name, Steps) - app.component(Step.name, Step) -} - -Steps.Step = Step - -const _Steps = Steps as any as SFCWithInstall & { - Step: typeof Step -} - -export default _Steps -export const ElSteps = _Steps -export const ElStep = Step +export const ElSteps = withInstall(Steps, { + Step, +}) +export default ElSteps +export const ElStep = withNoopInstall(Step) diff --git a/packages/components/table/index.ts b/packages/components/table/index.ts index bb96a2280a..4134a310d9 100644 --- a/packages/components/table/index.ts +++ b/packages/components/table/index.ts @@ -1,20 +1,9 @@ +import { withInstall, withNoopInstall } from '@element-plus/utils/with-install' import Table from './src/table.vue' import TableColumn from './src/tableColumn' -import type { App } from 'vue' -import type { SFCWithInstall } from '@element-plus/utils/types' - -Table.install = (app: App): void => { - app.component(Table.name, Table) - app.component(TableColumn.name, TableColumn) -} - -Table.TableColumn = TableColumn - -const _Table = Table as any as SFCWithInstall & { - TableColumn: typeof TableColumn -} - -export default _Table -export const ElTable = _Table -export const ElTableColumn = TableColumn +export const ElTable = withInstall(Table, { + TableColumn, +}) +export default ElTable +export const ElTableColumn = withNoopInstall(TableColumn) diff --git a/packages/components/tabs/index.ts b/packages/components/tabs/index.ts index e47b0de218..a64181d819 100644 --- a/packages/components/tabs/index.ts +++ b/packages/components/tabs/index.ts @@ -1,20 +1,9 @@ +import { withInstall, withNoopInstall } from '@element-plus/utils/with-install' import Tabs from './src/tabs' import TabPane from './src/tab-pane.vue' -import type { App } from 'vue' -import type { SFCWithInstall } from '@element-plus/utils/types' - -Tabs.install = (app: App): void => { - app.component(Tabs.name, Tabs) - app.component(TabPane.name, TabPane) -} - -Tabs.TabPane = TabPane - -const _Tabs = Tabs as any as SFCWithInstall & { - TabPane: typeof TabPane -} - -export default _Tabs -export const ElTabs = _Tabs -export const ElTabPane = TabPane +export const ElTabs = withInstall(Tabs, { + TabPane, +}) +export default ElTabs +export const ElTabPane = withNoopInstall(TabPane) diff --git a/packages/components/timeline/index.ts b/packages/components/timeline/index.ts index fe2cca46dc..eb75b61667 100644 --- a/packages/components/timeline/index.ts +++ b/packages/components/timeline/index.ts @@ -1,20 +1,9 @@ +import { withInstall, withNoopInstall } from '@element-plus/utils/with-install' import Timeline from './src/index.vue' import TimelineItem from './src/item.vue' -import type { App } from 'vue' -import type { SFCWithInstall } from '@element-plus/utils/types' - -Timeline.install = (app: App): void => { - app.component(Timeline.name, Timeline) - app.component(TimelineItem.name, TimelineItem) -} - -Timeline.TimelineItem = TimelineItem - -const _Timeline = Timeline as any as SFCWithInstall & { - TimelineItem: typeof TimelineItem -} - -export default _Timeline -export const ElTimeline = _Timeline -export const ElTimelineItem = TimelineItem +export const ElTimeline = withInstall(Timeline, { + TimelineItem, +}) +export default ElTimeline +export const ElTimelineItem = withNoopInstall(TimelineItem) diff --git a/packages/utils/with-install.ts b/packages/utils/with-install.ts index af03a8705c..650d6907b7 100644 --- a/packages/utils/with-install.ts +++ b/packages/utils/with-install.ts @@ -1,3 +1,4 @@ +import { NOOP } from '@vue/shared' import type { SFCWithInstall } from './types' export const withInstall = >( @@ -25,3 +26,9 @@ export const withInstallFunction = (fn: T, name: string) => { return fn as SFCWithInstall } + +export const withNoopInstall = (component: T) => { + ;(component as SFCWithInstall).install = NOOP + + return component as SFCWithInstall +}