perf: improve component packaging to enable instance method retrieval (#5795)

改进组件适配器里的包装函数，使得组件暴露的方法可以透传
11 months ago · a77bb8e68d
4 changed files with 97 additions and 176 deletions
--- a/apps/web-antd/src/adapter/component/index.ts
+++ b/apps/web-antd/src/adapter/component/index.ts
@ -41,6 +41,7 @@ import {
 const withDefaultPlaceholder = <T extends Component>(
  component: T,
  type: 'input' | 'select',
+  componentProps: Recordable<any> = {},
 ) => {
  return defineComponent({
    inheritAttrs: false,
@ -63,7 +64,11 @@ const withDefaultPlaceholder = <T extends Component>(
        }
      });
      return () =>
-        h(component, { ...props, ...attrs, placeholder, ref: innerRef }, slots);
+        h(
+          component,
+          { ...componentProps, placeholder, ...props, ...attrs, ref: innerRef },
+          slots,
+        );
    },
  });
 };
@ -102,38 +107,20 @@ async function initComponentAdapter() {
    // 如果你的组件体积比较大，可以使用异步加载
    // Button: () =>
    // import('xxx').then((res) => res.Button),
-    ApiSelect: (props, { attrs, slots }) => {
-      return h(
-        ApiComponent,
-        {
-          placeholder: $t('ui.placeholder.select'),
-          ...props,
-          ...attrs,
-          component: Select,
-          loadingSlot: 'suffixIcon',
-          visibleEvent: 'onDropdownVisibleChange',
-          modelPropName: 'value',
-        },
-        slots,
-      );
-    },
-    ApiTreeSelect: (props, { attrs, slots }) => {
-      return h(
-        ApiComponent,
-        {
-          placeholder: $t('ui.placeholder.select'),
-          ...props,
-          ...attrs,
-          component: TreeSelect,
-          fieldNames: { label: 'label', value: 'value', children: 'children' },
-          loadingSlot: 'suffixIcon',
-          modelPropName: 'value',
-          optionsPropName: 'treeData',
-          visibleEvent: 'onVisibleChange',
-        },
-        slots,
-      );
-    },
+    ApiSelect: withDefaultPlaceholder(ApiComponent, 'select', {
+      component: Select,
+      loadingSlot: 'suffixIcon',
+      visibleEvent: 'onDropdownVisibleChange',
+      modelPropName: 'value',
+    }),
+    ApiTreeSelect: withDefaultPlaceholder(ApiComponent, 'select', {
+      component: TreeSelect,
+      fieldNames: { label: 'label', value: 'value', children: 'children' },
+      loadingSlot: 'suffixIcon',
+      modelPropName: 'value',
+      optionsPropName: 'treeData',
+      visibleEvent: 'onVisibleChange',
+    }),
    AutoComplete,
    Checkbox,
    CheckboxGroup,
@ -143,19 +130,11 @@ async function initComponentAdapter() {
      return h(Button, { ...props, attrs, type: 'default' }, slots);
    },
    Divider,
-    IconPicker: (props, { attrs, slots }) => {
-      return h(
-        IconPicker,
-        {
-          iconSlot: 'addonAfter',
-          inputComponent: Input,
-          modelValueProp: 'value',
-          ...props,
-          ...attrs,
-        },
-        slots,
-      );
-    },
+    IconPicker: withDefaultPlaceholder(IconPicker, 'select', {
+      iconSlot: 'addonAfter',
+      inputComponent: Input,
+      modelValueProp: 'value',
+    }),
    Input: withDefaultPlaceholder(Input, 'input'),
    InputNumber: withDefaultPlaceholder(InputNumber, 'input'),
    InputPassword: withDefaultPlaceholder(InputPassword, 'input'),
--- a/apps/web-ele/src/adapter/component/index.ts
+++ b/apps/web-ele/src/adapter/component/index.ts
@ -37,6 +37,7 @@ import {
 const withDefaultPlaceholder = <T extends Component>(
  component: T,
  type: 'input' | 'select',
+  componentProps: Recordable<any> = {},
 ) => {
  return defineComponent({
    inheritAttrs: false,
@ -59,7 +60,11 @@ const withDefaultPlaceholder = <T extends Component>(
        }
      });
      return () =>
-        h(component, { ...props, ...attrs, placeholder, ref: innerRef }, slots);
+        h(
+          component,
+          { ...componentProps, placeholder, ...props, ...attrs, ref: innerRef },
+          slots,
+        );
    },
  });
 };
@ -89,37 +94,19 @@ async function initComponentAdapter() {
    // 如果你的组件体积比较大，可以使用异步加载
    // Button: () =>
    // import('xxx').then((res) => res.Button),
-    ApiSelect: (props, { attrs, slots }) => {
-      return h(
-        ApiComponent,
-        {
-          placeholder: $t('ui.placeholder.select'),
-          ...props,
-          ...attrs,
-          component: ElSelectV2,
-          loadingSlot: 'loading',
-          visibleEvent: 'onVisibleChange',
-        },
-        slots,
-      );
-    },
-    ApiTreeSelect: (props, { attrs, slots }) => {
-      return h(
-        ApiComponent,
-        {
-          placeholder: $t('ui.placeholder.select'),
-          ...props,
-          ...attrs,
-          component: ElTreeSelect,
-          props: { label: 'label', children: 'children' },
-          nodeKey: 'value',
-          loadingSlot: 'loading',
-          optionsPropName: 'data',
-          visibleEvent: 'onVisibleChange',
-        },
-        slots,
-      );
-    },
+    ApiSelect: withDefaultPlaceholder(ApiComponent, 'select', {
+      component: ElSelectV2,
+      loadingSlot: 'loading',
+      visibleEvent: 'onVisibleChange',
+    }),
+    ApiTreeSelect: withDefaultPlaceholder(ApiComponent, 'select', {
+      component: ElTreeSelect,
+      props: { label: 'label', children: 'children' },
+      nodeKey: 'value',
+      loadingSlot: 'loading',
+      optionsPropName: 'data',
+      visibleEvent: 'onVisibleChange',
+    }),
    Checkbox: ElCheckbox,
    CheckboxGroup: (props, { attrs, slots }) => {
      let defaultSlot;
@ -149,19 +136,11 @@ async function initComponentAdapter() {
      return h(ElButton, { ...props, attrs, type: 'primary' }, slots);
    },
    Divider: ElDivider,
-    IconPicker: (props, { attrs, slots }) => {
-      return h(
-        IconPicker,
-        {
-          iconSlot: 'append',
-          modelValueProp: 'model-value',
-          inputComponent: ElInput,
-          ...props,
-          ...attrs,
-        },
-        slots,
-      );
-    },
+    IconPicker: withDefaultPlaceholder(IconPicker, 'select', {
+      iconSlot: 'append',
+      modelValueProp: 'model-value',
+      inputComponent: ElInput,
+    }),
    Input: withDefaultPlaceholder(ElInput, 'input'),
    InputNumber: withDefaultPlaceholder(ElInputNumber, 'input'),
    RadioGroup: (props, { attrs, slots }) => {
--- a/apps/web-naive/src/adapter/component/index.ts
+++ b/apps/web-naive/src/adapter/component/index.ts
@ -37,6 +37,7 @@ import { message } from '#/adapter/naive';
 const withDefaultPlaceholder = <T extends Component>(
  component: T,
  type: 'input' | 'select',
+  componentProps: Recordable<any> = {},
 ) => {
  return defineComponent({
    inheritAttrs: false,
@ -59,7 +60,11 @@ const withDefaultPlaceholder = <T extends Component>(
        }
      });
      return () =>
-        h(component, { ...props, ...attrs, placeholder, ref: innerRef }, slots);
+        h(
+          component,
+          { ...componentProps, placeholder, ...props, ...attrs, ref: innerRef },
+          slots,
+        );
    },
  });
 };
@ -90,37 +95,19 @@ async function initComponentAdapter() {
    // Button: () =>
    // import('xxx').then((res) => res.Button),

-    ApiSelect: (props, { attrs, slots }) => {
-      return h(
-        ApiComponent,
-        {
-          placeholder: $t('ui.placeholder.select'),
-          ...props,
-          ...attrs,
-          component: NSelect,
-          modelPropName: 'value',
-        },
-        slots,
-      );
-    },
-    ApiTreeSelect: (props, { attrs, slots }) => {
-      return h(
-        ApiComponent,
-        {
-          placeholder: $t('ui.placeholder.select'),
-          ...props,
-          ...attrs,
-          component: NTreeSelect,
-          nodeKey: 'value',
-          loadingSlot: 'arrow',
-          keyField: 'value',
-          modelPropName: 'value',
-          optionsPropName: 'options',
-          visibleEvent: 'onVisibleChange',
-        },
-        slots,
-      );
-    },
+    ApiSelect: withDefaultPlaceholder(ApiComponent, 'select', {
+      component: NSelect,
+      modelPropName: 'value',
+    }),
+    ApiTreeSelect: withDefaultPlaceholder(ApiComponent, 'select', {
+      component: NTreeSelect,
+      nodeKey: 'value',
+      loadingSlot: 'arrow',
+      keyField: 'value',
+      modelPropName: 'value',
+      optionsPropName: 'options',
+      visibleEvent: 'onVisibleChange',
+    }),
    Checkbox: NCheckbox,
    CheckboxGroup: (props, { attrs, slots }) => {
      let defaultSlot;
@ -148,13 +135,10 @@ async function initComponentAdapter() {
      return h(NButton, { ...props, attrs, type: 'primary' }, slots);
    },
    Divider: NDivider,
-    IconPicker: (props, { attrs, slots }) => {
-      return h(
-        IconPicker,
-        { iconSlot: 'suffix', inputComponent: NInput, ...props, ...attrs },
-        slots,
-      );
-    },
+    IconPicker: withDefaultPlaceholder(IconPicker, 'select', {
+      iconSlot: 'suffix',
+      inputComponent: NInput,
+    }),
    Input: withDefaultPlaceholder(NInput, 'input'),
    InputNumber: withDefaultPlaceholder(NInputNumber, 'input'),
    RadioGroup: (props, { attrs, slots }) => {
--- a/playground/src/adapter/component/index.ts
+++ b/playground/src/adapter/component/index.ts
@ -41,6 +41,7 @@ import {
 const withDefaultPlaceholder = <T extends Component>(
  component: T,
  type: 'input' | 'select',
+  componentProps: Recordable<any> = {},
 ) => {
  return defineComponent({
    inheritAttrs: false,
@ -63,7 +64,11 @@ const withDefaultPlaceholder = <T extends Component>(
        }
      });
      return () =>
-        h(component, { ...props, ...attrs, placeholder, ref: innerRef }, slots);
+        h(
+          component,
+          { ...componentProps, placeholder, ...props, ...attrs, ref: innerRef },
+          slots,
+        );
    },
  });
 };
@ -103,38 +108,20 @@ async function initComponentAdapter() {
    // Button: () =>
    // import('xxx').then((res) => res.Button),

-    ApiSelect: (props, { attrs, slots }) => {
-      return h(
-        ApiComponent,
-        {
-          placeholder: $t('ui.placeholder.select'),
-          ...props,
-          ...attrs,
-          component: Select,
-          loadingSlot: 'suffixIcon',
-          modelPropName: 'value',
-          visibleEvent: 'onVisibleChange',
-        },
-        slots,
-      );
-    },
-    ApiTreeSelect: (props, { attrs, slots }) => {
-      return h(
-        ApiComponent,
-        {
-          placeholder: $t('ui.placeholder.select'),
-          ...props,
-          ...attrs,
-          component: TreeSelect,
-          fieldNames: { label: 'label', value: 'value', children: 'children' },
-          loadingSlot: 'suffixIcon',
-          modelPropName: 'value',
-          optionsPropName: 'treeData',
-          visibleEvent: 'onVisibleChange',
-        },
-        slots,
-      );
-    },
+    ApiSelect: withDefaultPlaceholder(ApiComponent, 'select', {
+      component: Select,
+      loadingSlot: 'suffixIcon',
+      modelPropName: 'value',
+      visibleEvent: 'onVisibleChange',
+    }),
+    ApiTreeSelect: withDefaultPlaceholder(ApiComponent, 'select', {
+      component: TreeSelect,
+      fieldNames: { label: 'label', value: 'value', children: 'children' },
+      loadingSlot: 'suffixIcon',
+      modelPropName: 'value',
+      optionsPropName: 'treeData',
+      visibleEvent: 'onVisibleChange',
+    }),
    AutoComplete,
    Checkbox,
    CheckboxGroup,
@ -144,19 +131,11 @@ async function initComponentAdapter() {
      return h(Button, { ...props, attrs, type: 'default' }, slots);
    },
    Divider,
-    IconPicker: (props, { attrs, slots }) => {
-      return h(
-        IconPicker,
-        {
-          iconSlot: 'addonAfter',
-          inputComponent: Input,
-          modelValueProp: 'value',
-          ...props,
-          ...attrs,
-        },
-        slots,
-      );
-    },
+    IconPicker: withDefaultPlaceholder(IconPicker, 'select', {
+      iconSlot: 'addonAfter',
+      inputComponent: Input,
+      modelValueProp: 'value',
+    }),
    Input: withDefaultPlaceholder(Input, 'input'),
    InputNumber: withDefaultPlaceholder(InputNumber, 'input'),
    InputPassword: withDefaultPlaceholder(InputPassword, 'input'),