chore: remove require

Author: tangjinzhou

antdv-demo

@@ -1,23 +1,3 @@
-// matchMedia polyfill for
-// https://github.com/WickyNilliams/enquire.js/issues/82
-let enquire;
-
-// TODO: Will be removed in antd 4.0 because we will no longer support ie9
-if (typeof window !== 'undefined') {
-  const matchMediaPolyfill = mediaQuery => {
-    return {
-      media: mediaQuery,
-      matches: false,
-      addListener() {},
-      removeListener() {},
-    };
-  };
-  // ref: https://github.com/ant-design/ant-design/issues/18774
-  if (!window.matchMedia) window.matchMedia = matchMediaPolyfill;
-  // eslint-disable-next-line global-require
-  enquire = require('enquire.js');
-}
-
 export const responsiveArray = ['xxl', 'xl', 'lg', 'md', 'sm', 'xs'];
 
 export const responsiveMap = {
@@ -29,65 +9,54 @@ export const responsiveMap = {
   xxl: '(min-width: 1600px)',
 };
 
-let subscribers = [];
+const subscribers = new Map();
 let subUid = -1;
 let screens = {};
 
 const responsiveObserve = {
+  matchHandlers: {},
   dispatch(pointMap) {
     screens = pointMap;
-    if (subscribers.length < 1) {
-      return false;
-    }
-
-    subscribers.forEach(item => {
-      item.func(screens);
-    });
-
-    return true;
+    subscribers.forEach(func => func(screens));
+    return subscribers.size >= 1;
   },
   subscribe(func) {
-    if (subscribers.length === 0) {
-      this.register();
-    }
-    const token = (++subUid).toString();
-    subscribers.push({
-      token,
-      func,
-    });
+    if (!subscribers.size) this.register();
+    subUid += 1;
+    subscribers.set(subUid, func);
     func(screens);
-    return token;
+    return subUid;
   },
   unsubscribe(token) {
-    subscribers = subscribers.filter(item => item.token !== token);
-    if (subscribers.length === 0) {
-      this.unregister();
-    }
+    subscribers.delete(token);
+    if (!subscribers.size) this.unregister();
   },
   unregister() {
-    Object.keys(responsiveMap).map(screen => enquire.unregister(responsiveMap[screen]));
+    Object.keys(responsiveMap).forEach(screen => {
+      const matchMediaQuery = responsiveMap[screen];
+      const handler = this.matchHandlers[matchMediaQuery];
+      handler?.mql.removeListener(handler?.listener);
+    });
+    subscribers.clear();
   },
   register() {
-    Object.keys(responsiveMap).map(screen =>
-      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 destroy to avoid triggering unmatch when unregister
-        destroy() {},
-      }),
-    );
+    Object.keys(responsiveMap).forEach(screen => {
+      const matchMediaQuery = responsiveMap[screen];
+      const listener = ({ matches }) => {
+        this.dispatch({
+          ...screens,
+          [screen]: matches,
+        });
+      };
+      const mql = window.matchMedia(matchMediaQuery);
+      mql.addListener(listener);
+      this.matchHandlers[matchMediaQuery] = {
+        mql,
+        listener,
+      };
+
+      listener(mql);
+    });
   },
 };
 

components/_util/responsiveObserve.js

@@ -314,28 +314,28 @@ exports[`renders ./antdv-demo/docs/carousel/demo/fade.md correctly 1`] = `
     <!---->
     <div class="slick-list">
       <div class="slick-track" style="width: 900%; left: -100%;">
-        <div tabindex="-1" data-index="0" aria-hidden="false" class="slick-slide slick-active slick-current" style="outline: none; position: relative; opacity: 1; transition: opacity 500ms ease, visibility 500ms ease; width: 11.11111111111111%; left: 0px;">
+        <div tabindex="-1" data-index="0" aria-hidden="false" class="slick-slide slick-active slick-current" style="outline: none; width: 11.11111111111111%; position: relative; left: 0px; opacity: 1; transition: opacity 500ms ease, visibility 500ms ease;">
           <div>
             <div tabindex="-1" style="width: 100%; display: inline-block;">
               <h3>1</h3>
             </div>
           </div>
         </div>
-        <div tabindex="-1" data-index="1" aria-hidden="true" class="slick-slide" style="outline: none; position: relative; opacity: 0; transition: opacity 500ms ease, visibility 500ms ease; width: 11.11111111111111%; left: -11px;">
+        <div tabindex="-1" data-index="1" aria-hidden="true" class="slick-slide" style="outline: none; width: 11.11111111111111%; position: relative; left: -11px; opacity: 0; transition: opacity 500ms ease, visibility 500ms ease;">
           <div>
             <div tabindex="-1" style="width: 100%; display: inline-block;">
               <h3>2</h3>
             </div>
           </div>
         </div>
-        <div tabindex="-1" data-index="2" aria-hidden="true" class="slick-slide" style="outline: none; position: relative; opacity: 0; transition: opacity 500ms ease, visibility 500ms ease; width: 11.11111111111111%; left: -22px;">
+        <div tabindex="-1" data-index="2" aria-hidden="true" class="slick-slide" style="outline: none; width: 11.11111111111111%; position: relative; left: -22px; opacity: 0; transition: opacity 500ms ease, visibility 500ms ease;">
           <div>
             <div tabindex="-1" style="width: 100%; display: inline-block;">
               <h3>3</h3>
             </div>
           </div>
         </div>
-        <div tabindex="-1" data-index="3" aria-hidden="true" class="slick-slide" style="outline: none; position: relative; opacity: 0; transition: opacity 500ms ease, visibility 500ms ease; width: 11.11111111111111%; left: -33px;">
+        <div tabindex="-1" data-index="3" aria-hidden="true" class="slick-slide" style="outline: none; width: 11.11111111111111%; position: relative; left: -33px; opacity: 0; transition: opacity 500ms ease, visibility 500ms ease;">
           <div>
             <div tabindex="-1" style="width: 100%; display: inline-block;">
               <h3>4</h3>

components/carousel/__tests__/__snapshots__/demo.test.js.snap

@@ -5,26 +5,7 @@ import hasProp, { initDefaultProps, getComponent } from '../_util/props-util';
 import { ConfigConsumerProps } from '../config-provider';
 import warning from '../_util/warning';
 import classNames from 'classnames';
-
-// matchMedia polyfill for
-// https://github.com/WickyNilliams/enquire.js/issues/82
-if (typeof window !== 'undefined') {
-  const matchMediaPolyfill = mediaQuery => {
-    return {
-      media: mediaQuery,
-      matches: false,
-      addListener() {},
-      removeListener() {},
-    };
-  };
-  // ref: https://github.com/ant-design/ant-design/issues/18774
-  if (!window.matchMedia) window.matchMedia = matchMediaPolyfill;
-}
-// Use require over import (will be lifted up)
-// make sure matchMedia polyfill run before require('vc-slick')
-// Fix https://github.com/ant-design/ant-design/issues/6560
-// Fix https://github.com/ant-design/ant-design/issues/3308
-const SlickCarousel = require('../vc-slick/src').default;
+import SlickCarousel from '../vc-slick/src';
 
 export const CarouselEffect = PropTypes.oneOf(['scrollx', 'fade']);
 // Carousel