refactor: 📦 smaller bundlesize limit (ant-design#20356)

* 📦 samller bundlesize limit

* 🗑️ remove React static PropTypes

* 🗑️ remove react-lifecycles-compat

* 🗑️ remove matchMedia polyfill

* 🗑️ remove Transfer buggy lazy prop

* 🗑️ remove enquire.js dep

* 🗑️ remove Transfer lazy related code and fix ci

* 🗑️ remove used dom-closest

* ⚡ replace dom-scroll-into-view to scroll-into-view for bundle size

* ✅ fix eslint

* 🆙 upgrade browserslist

* ✅ fix test cases

* 🗑️ remove @ant-design/create-react-context

* 🆙 upgrade @ant-design/bisheng-plugin

* 🆙 upgrade rc-slider

* ✅ fix ci

* 🆙 upgrade rc-tabs and rc-mentions

* 📦 scroll-into-view -> scroll-into-view-if-needed

* remove unused devDep

* docs: 📝 update instruction about IE9/10

* 📦 reduce css bundle size by drop IE9/10 support

* 🆙 upgrade rc-upload

* 🗑️ drop unused swing motion css

* ✅ update upload snapshots

* 📦 lift css bundlesize limit to 55kb

README-zh_CN.md

@@ -31,13 +31,13 @@
 
 ## 🖥 支持环境
 
-- 现代浏览器和 IE9 及以上。
+- 现代浏览器和 IE11 及以上。
 - 支持服务端渲染。
 - [Electron](http://electron.atom.io/)
 
 | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png" alt="IE / Edge" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>IE / Edge | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png" alt="Firefox" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Firefox | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png" alt="Chrome" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Chrome | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png" alt="Safari" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Safari | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/opera/opera_48x48.png" alt="Opera" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Opera | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/electron/electron_48x48.png" alt="Electron" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Electron |
 | --- | --- | --- | --- | --- | --- |
-| IE9, IE10, IE11, Edge | last 2 versions | last 2 versions | last 2 versions | last 2 versions | last 2 versions |
+| IE11, Edge | last 2 versions | last 2 versions | last 2 versions | last 2 versions | last 2 versions |
 
 ## 📦 安装
 

README.md

@@ -37,7 +37,7 @@ English | [简体中文](./README-zh_CN.md)
 
 | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png" alt="IE / Edge" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>IE / Edge | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png" alt="Firefox" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Firefox | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png" alt="Chrome" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Chrome | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png" alt="Safari" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Safari | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/opera/opera_48x48.png" alt="Opera" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Opera | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/electron/electron_48x48.png" alt="Electron" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Electron |
 | --- | --- | --- | --- | --- | --- |
-| IE9, IE10, IE11, Edge | last 2 versions | last 2 versions | last 2 versions | last 2 versions | last 2 versions |
+| IE11, Edge | last 2 versions | last 2 versions | last 2 versions | last 2 versions | last 2 versions |
 
 ## 📦 Install
 

components/_util/responsiveObserve.ts

@@ -1,23 +1,3 @@
-// matchMedia polyfill for
-// https://github.com/WickyNilliams/enquire.js/issues/82
-let enquire: any;
-
-// TODO: Will be removed in antd 4.0 because we will no longer support ie9
-if (typeof window !== 'undefined') {
-  const matchMediaPolyfill = (mediaQuery: string) => {
-    return {
-      media: mediaQuery,
-      matches: false,
-      addListener() {},
-      removeListener() {},
-    };
-  };
-  // ref: https://github.com/ant-design/ant-design/issues/18774
-  if (!window.matchMedia) window.matchMedia = matchMediaPolyfill as any;
-  // eslint-disable-next-line global-require
-  enquire = require('enquire.js');
-}
-
 export type Breakpoint = 'xxl' | 'xl' | 'lg' | 'md' | 'sm' | 'xs';
 export type BreakpointMap = Partial<Record<Breakpoint, string>>;
 
@@ -42,6 +22,7 @@ let subUid = -1;
 let screens = {};
 
 const responsiveObserve = {
+  matchHandlers: {},
   dispatch(pointMap: BreakpointMap) {
     screens = pointMap;
     if (subscribers.length < 1) {
@@ -73,31 +54,30 @@ const responsiveObserve = {
     }
   },
   unregister() {
-    Object.keys(responsiveMap).map((screen: Breakpoint) =>
-      enquire.unregister(responsiveMap[screen]),
-    );
+    Object.keys(responsiveMap).forEach((screen: Breakpoint) => {
+      const matchMediaQuery = responsiveMap[screen]!;
+      const handler = this.matchHandlers[matchMediaQuery];
+      if (handler && handler.mql && handler.listener) {
+        handler.mql.removeListener(handler.listener);
+      }
+    });
   },
   register() {
-    Object.keys(responsiveMap).map((screen: Breakpoint) =>
-      enquire.register(responsiveMap[screen], {
-        match: () => {
-          const pointMap = {
-            ...screens,
-            [screen]: true,
-          };
-          this.dispatch(pointMap);
-        },
-        unmatch: () => {
-          const pointMap = {
-            ...screens,
-            [screen]: false,
-          };
-          this.dispatch(pointMap);
-        },
-        // Keep a empty destory to avoid triggering unmatch when unregister
-        destroy() {},
-      }),
-    );
+    Object.keys(responsiveMap).forEach((screen: Breakpoint) => {
+      const matchMediaQuery = responsiveMap[screen]!;
+      const listener = ({ matches }: { matches: boolean }) => {
+        this.dispatch({
+          ...screens,
+          [screen]: matches,
+        });
+      };
+      const mql = window.matchMedia(matchMediaQuery);
+      mql.addListener(listener);
+      this.matchHandlers[matchMediaQuery] = {
+        mql,
+        listener,
+      };
+    });
   },
 };
 

components/affix/index.tsx

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import { polyfill } from 'react-lifecycles-compat';
 import classNames from 'classnames';
 import omit from 'omit.js';
 import ResizeObserver from 'rc-resize-observer';
@@ -299,6 +298,4 @@ class Affix extends React.Component<AffixProps, AffixState> {
   }
 }
 
-polyfill(Affix);
-
 export default Affix;

components/anchor/AnchorLink.tsx

@@ -1,6 +1,5 @@
 import * as React from 'react';
 import * as PropTypes from 'prop-types';
-import { polyfill } from 'react-lifecycles-compat';
 import classNames from 'classnames';
 import { AntAnchor } from './Anchor';
 import { ConfigConsumer, ConfigConsumerProps } from '../config-provider';
@@ -83,6 +82,4 @@ class AnchorLink extends React.Component<AnchorLinkProps, any> {
   }
 }
 
-polyfill(AnchorLink);
-
 export default AnchorLink;

components/badge/ScrollNumber.tsx

@@ -1,7 +1,6 @@
 import * as React from 'react';
 import omit from 'omit.js';
 import classNames from 'classnames';
-import { polyfill } from 'react-lifecycles-compat';
 import { ConfigConsumer, ConfigConsumerProps } from '../config-provider';
 
 function getNumberArray(num: string | number | undefined | null) {
@@ -208,6 +207,4 @@ class ScrollNumber extends React.Component<ScrollNumberProps, ScrollNumberState>
   }
 }
 
-polyfill(ScrollNumber);
-
 export default ScrollNumber;

components/badge/index.tsx

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import * as PropTypes from 'prop-types';
 import Animate from 'rc-animate';
 import omit from 'omit.js';
 import classNames from 'classnames';
@@ -40,13 +39,6 @@ export default class Badge extends React.Component<BadgeProps, any> {
     overflowCount: 99,
   };
 
-  static propTypes = {
-    count: PropTypes.node,
-    showZero: PropTypes.bool,
-    dot: PropTypes.bool,
-    overflowCount: PropTypes.number,
-  };
-
   getNumberedDispayCount() {
     const { count, overflowCount } = this.props;
     const displayCount =

components/breadcrumb/Breadcrumb.tsx

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import * as PropTypes from 'prop-types';
 import classNames from 'classnames';
 import toArray from 'rc-util/lib/Children/toArray';
 import omit from 'omit.js';
@@ -68,12 +67,6 @@ export default class Breadcrumb extends React.Component<BreadcrumbProps, any> {
     separator: '/',
   };
 
-  static propTypes = {
-    prefixCls: PropTypes.string,
-    separator: PropTypes.node,
-    routes: PropTypes.array,
-  };
-
   getPath = (path: string, params: any) => {
     path = (path || '').replace(/^\//, '');
     Object.keys(params).forEach(key => {

components/breadcrumb/BreadcrumbItem.tsx

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import * as PropTypes from 'prop-types';
 import { DownOutlined } from '@ant-design/icons';
 import omit from 'omit.js';
 
@@ -21,12 +20,6 @@ export default class BreadcrumbItem extends React.Component<BreadcrumbItemProps,
     separator: '/',
   };
 
-  static propTypes = {
-    prefixCls: PropTypes.string,
-    separator: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
-    href: PropTypes.string,
-  };
-
   renderBreadcrumbItem = ({ getPrefixCls }: ConfigConsumerProps) => {
     const { prefixCls: customizePrefixCls, separator, children, ...restProps } = this.props;
     const prefixCls = getPrefixCls('breadcrumb', customizePrefixCls);

components/button/button.tsx

@@ -1,9 +1,7 @@
 /* eslint-disable react/button-has-type */
 import * as React from 'react';
-import * as PropTypes from 'prop-types';
 import classNames from 'classnames';
 import { LoadingOutlined } from '@ant-design/icons';
-import { polyfill } from 'react-lifecycles-compat';
 import omit from 'omit.js';
 
 import Group from './button-group';
@@ -124,19 +122,6 @@ class Button extends React.Component<ButtonProps, ButtonState> {
     htmlType: 'button',
   };
 
-  static propTypes = {
-    type: PropTypes.string,
-    shape: PropTypes.oneOf(ButtonShapes),
-    size: PropTypes.oneOf(ButtonSizes),
-    htmlType: PropTypes.oneOf(ButtonHTMLTypes),
-    onClick: PropTypes.func,
-    loading: PropTypes.oneOfType([PropTypes.bool, PropTypes.object]),
-    className: PropTypes.string,
-    icon: PropTypes.node,
-    block: PropTypes.bool,
-    title: PropTypes.string,
-  };
-
   private delayTimeout: number;
 
   private buttonNode: HTMLElement | null;
@@ -318,6 +303,4 @@ class Button extends React.Component<ButtonProps, ButtonState> {
   }
 }
 
-polyfill(Button);
-
 export default Button;

components/carousel/index.tsx

@@ -4,21 +4,6 @@ import { Settings } from 'react-slick';
 import { ConfigConsumer, ConfigConsumerProps } from '../config-provider';
 import warning from '../_util/warning';
 
-// matchMedia polyfill for
-// https://github.com/WickyNilliams/enquire.js/issues/82
-// TODO: Will be removed in antd 4.0 because we will no longer support ie9
-if (typeof window !== 'undefined') {
-  const matchMediaPolyfill = (mediaQuery: string) => {
-    return {
-      media: mediaQuery,
-      matches: false,
-      addListener() {},
-      removeListener() {},
-    };
-  };
-  // ref: https://github.com/ant-design/ant-design/issues/18774
-  if (!window.matchMedia) window.matchMedia = matchMediaPolyfill as any;
-}
 // Use require over import (will be lifted up)
 // make sure matchMedia polyfill run before require('react-slick')
 // Fix https://github.com/ant-design/ant-design/issues/6560

components/cascader/index.tsx

@@ -4,7 +4,6 @@ import arrayTreeFilter from 'array-tree-filter';
 import classNames from 'classnames';
 import omit from 'omit.js';
 import KeyCode from 'rc-util/lib/KeyCode';
-import { polyfill } from 'react-lifecycles-compat';
 import { CloseCircleFilled, DownOutlined, RightOutlined, RedoOutlined } from '@ant-design/icons';
 
 import Input from '../input';
@@ -601,6 +600,4 @@ class Cascader extends React.Component<CascaderProps, CascaderState> {
   }
 }
 
-polyfill(Cascader);
-
 export default Cascader;

components/checkbox/Checkbox.tsx

@@ -1,6 +1,5 @@
 import * as React from 'react';
 import * as PropTypes from 'prop-types';
-import { polyfill } from 'react-lifecycles-compat';
 import classNames from 'classnames';
 import RcCheckbox from 'rc-checkbox';
 import shallowEqual from 'shallowequal';
@@ -174,6 +173,4 @@ class Checkbox extends React.Component<CheckboxProps, {}> {
   }
 }
 
-polyfill(Checkbox);
-
 export default Checkbox;

components/checkbox/Group.tsx

@@ -1,6 +1,5 @@
 import * as React from 'react';
 import * as PropTypes from 'prop-types';
-import { polyfill } from 'react-lifecycles-compat';
 import classNames from 'classnames';
 import shallowEqual from 'shallowequal';
 import omit from 'omit.js';
@@ -187,6 +186,4 @@ class CheckboxGroup extends React.Component<CheckboxGroupProps, CheckboxGroupSta
   }
 }
 
-polyfill(CheckboxGroup);
-
 export default CheckboxGroup;

components/config-provider/__tests__/__snapshots__/components.test.js.snap

@@ -18444,7 +18444,20 @@ exports[`ConfigProvider components Upload configProvider 1`] = `
 >
   <div
     class="config-upload config-upload-select config-upload-select-text"
-  />
+  >
+    <span
+      class="config-upload"
+      role="button"
+      tabindex="0"
+    >
+      <input
+        accept=""
+        style="display:none"
+        type="file"
+      />
+      <span />
+    </span>
+  </div>
   <div
     class="config-upload-list config-upload-list-text"
   >
@@ -18556,7 +18569,20 @@ exports[`ConfigProvider components Upload normal 1`] = `
 >
   <div
     class="ant-upload ant-upload-select ant-upload-select-text"
-  />
+  >
+    <span
+      class="ant-upload"
+      role="button"
+      tabindex="0"
+    >
+      <input
+        accept=""
+        style="display:none"
+        type="file"
+      />
+      <span />
+    </span>
+  </div>
   <div
     class="ant-upload-list ant-upload-list-text"
   >
@@ -18668,7 +18694,20 @@ exports[`ConfigProvider components Upload prefixCls 1`] = `
 >
   <div
     class="prefix-Upload prefix-Upload-select prefix-Upload-select-text"
-  />
+  >
+    <span
+      class="prefix-Upload"
+      role="button"
+      tabindex="0"
+    >
+      <input
+        accept=""
+        style="display:none"
+        type="file"
+      />
+      <span />
+    </span>
+  </div>
   <div
     class="ant-upload-list ant-upload-list-text"
   >

components/config-provider/__tests__/components.test.js

@@ -54,7 +54,6 @@ import Tree from '../../tree';
 import TreeSelect from '../../tree-select';
 import Upload from '../../upload';
 
-jest.mock('draft-js/lib/generateRandomKey', () => () => '123');
 jest.mock('rc-util/lib/Portal');
 
 describe('ConfigProvider', () => {