Support vite2 (vueComponent#3490)

* refactor: supports vite2

* refactor: remove CommonJS dependencies

* chore: update pkg

* refactor: update

* chore: update pkg

components/_util/component-classes.ts

@@ -0,0 +1,168 @@
+/**
+ * source by `component-classes`
+ * https://github.com/component/classes.git
+ */
+
+import { indexOf } from 'lodash-es';
+
+/**
+ * Whitespace regexp.
+ */
+const re = /\s+/;
+
+export class ClassList {
+  el: Element;
+  list: DOMTokenList;
+
+  constructor(el: Element) {
+    if (!el || !el.nodeType) {
+      throw new Error('A DOM element reference is required');
+    }
+    this.el = el;
+    this.list = el.classList;
+  }
+
+  array() {
+    const className = this.el.getAttribute('class') || '';
+    const str = className.replace(/^\s+|\s+$/g, '');
+    const arr = str.split(re);
+    if ('' === arr[0]) arr.shift();
+    return arr;
+  }
+
+  /**
+   * Add class `name` if not already present.
+   *
+   * @param {String} name
+   * @return {ClassList}
+   * @api public
+   */
+  add(name: string): ClassList {
+    // classList
+    if (this.list) {
+      this.list.add(name);
+      return this;
+    }
+
+    // fallback
+    const arr = this.array();
+    const i = indexOf(arr, name);
+    if (!~i) arr.push(name);
+    this.el.className = arr.join(' ');
+    return this;
+  }
+  /**
+   * Remove class `name` when present, or
+   * pass a regular expression to remove
+   * any which match.
+   *
+   * @param {String|RegExp} name
+   * @return {ClassList}
+   * @api public
+   */
+  remove(name: string | RegExp): ClassList {
+    if ('[object RegExp]' === toString.call(name)) {
+      return this._removeMatching(name as RegExp);
+    }
+
+    // classList
+    if (this.list) {
+      this.list.remove(name as string);
+      return this;
+    }
+
+    // fallback
+    const arr = this.array();
+    const i = indexOf(arr, name);
+    if (~i) arr.splice(i, 1);
+    this.el.className = arr.join(' ');
+    return this;
+  }
+  /**
+   * Remove all classes matching `re`.
+   *
+   * @param {RegExp} re
+   * @return {ClassList}
+   * @api private
+   */
+  _removeMatching(re: RegExp): ClassList {
+    const arr = this.array();
+    for (let i = 0; i < arr.length; i++) {
+      if (re.test(arr[i])) {
+        this.remove(arr[i]);
+      }
+    }
+    return this;
+  }
+
+  /**
+   * Toggle class `name`, can force state via `force`.
+   *
+   * For browsers that support classList, but do not support `force` yet,
+   * the mistake will be detected and corrected.
+   *
+   * @param {String} name
+   * @param {Boolean} force
+   * @return {ClassList}
+   * @api public
+   */
+  toggle(name: string, force: boolean): ClassList {
+    // classList
+    if (this.list) {
+      if ('undefined' !== typeof force) {
+        if (force !== this.list.toggle(name, force)) {
+          this.list.toggle(name); // toggle again to correct
+        }
+      } else {
+        this.list.toggle(name);
+      }
+      return this;
+    }
+
+    // fallback
+    if ('undefined' !== typeof force) {
+      if (!force) {
+        this.remove(name);
+      } else {
+        this.add(name);
+      }
+    } else {
+      if (this.has(name)) {
+        this.remove(name);
+      } else {
+        this.add(name);
+      }
+    }
+
+    return this;
+  }
+  /**
+   * Check if class `name` is present.
+   *
+   * @param {String} name
+   * @api public
+   */
+  has(name: string) {
+    return this.list ? this.list.contains(name) : !!~indexOf(this.array(), name);
+  }
+  /**
+   * Check if class `name` is present.
+   *
+   * @param {String} name
+   * @api public
+   */
+  contains(name: string) {
+    return this.has(name);
+  }
+}
+
+/**
+ * Wrap `el` in a `ClassList`.
+ *
+ * @param {Element} el
+ * @return {ClassList}
+ * @api public
+ */
+export default function(el: Element): ClassList {
+  return new ClassList(el);
+}

components/_util/css-animation/index.js

@@ -1,7 +1,7 @@
 // https://github.com/yiminghe/css-animation 1.5.0
 
 import Event from './Event';
-import classes from 'component-classes';
+import classes from '../component-classes';
 import { requestAnimationTimeout, cancelAnimationTimeout } from '../requestAnimationTimeout';
 
 const isCssAnimationSupported = Event.endEvents.length !== 0;

components/_util/dom-closest.js

@@ -0,0 +1,24 @@
+/**
+ * source by `dom-closest`
+ * https://github.com/necolas/dom-closest.git
+ */
+
+import matches from './dom-matches';
+
+/**
+ * @param element {Element}
+ * @param selector {String}
+ * @param context {Element=}
+ * @return {Element}
+ */
+export default function(element, selector, context) {
+  context = context || document;
+  // guard against orphans
+  element = { parentNode: element };
+
+  while ((element = element.parentNode) && element !== context) {
+    if (matches(element, selector)) {
+      return element;
+    }
+  }
+}

components/_util/dom-matches.js

@@ -0,0 +1,47 @@
+/**
+ * source by `dom-matches`
+ * https://github.com/necolas/dom-matches.git
+ */
+
+/**
+ * Determine if a DOM element matches a CSS selector
+ *
+ * @param {Element} elem
+ * @param {String} selector
+ * @return {Boolean}
+ * @api public
+ */
+
+export default function matches(elem, selector) {
+  // Vendor-specific implementations of `Element.prototype.matches()`.
+  const proto = window.Element.prototype;
+  const nativeMatches =
+    proto.matches ||
+    proto.mozMatchesSelector ||
+    proto.msMatchesSelector ||
+    proto.oMatchesSelector ||
+    proto.webkitMatchesSelector;
+
+  if (!elem || elem.nodeType !== 1) {
+    return false;
+  }
+
+  const parentElem = elem.parentNode;
+
+  // use native 'matches'
+  if (nativeMatches) {
+    return nativeMatches.call(elem, selector);
+  }
+
+  // native support for `matches` is missing and a fallback is required
+  const nodes = parentElem.querySelectorAll(selector);
+  const len = nodes.length;
+
+  for (let i = 0; i < len; i++) {
+    if (nodes[i] === elem) {
+      return true;
+    }
+  }
+
+  return false;
+}

components/_util/json2mq.js

@@ -0,0 +1,60 @@
+/**
+ * source by `json2mq`
+ * https://github.com/akiran/json2mq.git
+ */
+
+const camel2hyphen = function(str) {
+  return str
+    .replace(/[A-Z]/g, function(match) {
+      return '-' + match.toLowerCase();
+    })
+    .toLowerCase();
+};
+
+const isDimension = function(feature) {
+  const re = /[height|width]$/;
+  return re.test(feature);
+};
+
+const obj2mq = function(obj) {
+  let mq = '';
+  const features = Object.keys(obj);
+  features.forEach(function(feature, index) {
+    let value = obj[feature];
+    feature = camel2hyphen(feature);
+    // Add px to dimension features
+    if (isDimension(feature) && typeof value === 'number') {
+      value = value + 'px';
+    }
+    if (value === true) {
+      mq += feature;
+    } else if (value === false) {
+      mq += 'not ' + feature;
+    } else {
+      mq += '(' + feature + ': ' + value + ')';
+    }
+    if (index < features.length - 1) {
+      mq += ' and ';
+    }
+  });
+  return mq;
+};
+
+export default function(query) {
+  let mq = '';
+  if (typeof query === 'string') {
+    return query;
+  }
+  // Handling array of media queries
+  if (query instanceof Array) {
+    query.forEach(function(q, index) {
+      mq += obj2mq(q);
+      if (index < query.length - 1) {
+        mq += ', ';
+      }
+    });
+    return mq;
+  }
+  // Handling single media query
+  return obj2mq(query);
+}

components/_util/openAnimation.js

@@ -1,5 +1,4 @@
 import cssAnimation from './css-animation';
-import raf from 'raf';
 import { nextTick } from 'vue';
 
 function animate(node, show, done) {
@@ -9,7 +8,7 @@ function animate(node, show, done) {
   return cssAnimation(node, 'ant-motion-collapse-legacy', {
     start() {
       if (appearRequestAnimationFrameId) {
-        raf.cancel(appearRequestAnimationFrameId);
+        cancelAnimationFrame(appearRequestAnimationFrameId);
       }
       if (!show) {
         node.style.height = `${node.offsetHeight}px`;
@@ -19,7 +18,7 @@ function animate(node, show, done) {
         // not get offsetHeight when appear
         // set it into raf get correct offsetHeight
         if (height === 0) {
-          appearRequestAnimationFrameId = raf(() => {
+          appearRequestAnimationFrameId = requestAnimationFrame(() => {
             height = node.offsetHeight;
             node.style.height = '0px';
             node.style.opacity = '0';
@@ -32,19 +31,19 @@ function animate(node, show, done) {
     },
     active() {
       if (requestAnimationFrameId) {
-        raf.cancel(requestAnimationFrameId);
+        cancelAnimationFrame(requestAnimationFrameId);
       }
-      requestAnimationFrameId = raf(() => {
+      requestAnimationFrameId = requestAnimationFrame(() => {
         node.style.height = `${show ? height : 0}px`;
         node.style.opacity = show ? '1' : '0';
       });
     },
     end() {
       if (appearRequestAnimationFrameId) {
-        raf.cancel(appearRequestAnimationFrameId);
+        cancelAnimationFrame(appearRequestAnimationFrameId);
       }
       if (requestAnimationFrameId) {
-        raf.cancel(requestAnimationFrameId);
+        cancelAnimationFrame(requestAnimationFrameId);
       }
       node.style.height = '';
       node.style.opacity = '';

components/_util/raf.ts

@@ -1,5 +1,3 @@
-import raf from 'raf';
-
 interface RafMap {
   [id: number]: number;
 }
@@ -19,19 +17,19 @@ export default function wrapperRaf(callback: () => void, delayFrames = 1): numbe
       callback();
       delete ids[myId];
     } else {
-      ids[myId] = raf(internalCallback);
+      ids[myId] = requestAnimationFrame(internalCallback);
     }
   }
 
-  ids[myId] = raf(internalCallback);
+  ids[myId] = requestAnimationFrame(internalCallback);
 
   return myId;
 }
 
 wrapperRaf.cancel = function cancel(pid?: number) {
   if (pid === undefined) return;
 
-  raf.cancel(ids[pid]);
+  cancelAnimationFrame(ids[pid]);
   delete ids[pid];
 };