refactor(polyfill): a file for polyfills

js/src/dom/selectorEngine.js

@@ -1,3 +1,4 @@
+import Polyfill from './polyfill'
 import Util from '../util'
 
 /**
@@ -10,100 +11,17 @@ import Util from '../util'
 const SelectorEngine = (() => {
   /**
    * ------------------------------------------------------------------------
-   * Polyfills
+   * Constants
    * ------------------------------------------------------------------------
    */
 
-  // matches polyfill (see: https://mzl.la/2ikXneG)
-  let fnMatches = null
-  if (!Element.prototype.matches) {
-    fnMatches =
-      Element.prototype.msMatchesSelector ||
-      Element.prototype.webkitMatchesSelector
-  } else {
-    fnMatches = Element.prototype.matches
-  }
-
-  // closest polyfill (see: https://mzl.la/2vXggaI)
-  let fnClosest = null
-  if (!Element.prototype.closest) {
-    fnClosest = (element, selector) => {
-      let ancestor = element
-      do {
-        if (fnMatches.call(ancestor, selector)) {
-          return ancestor
-        }
-
-        ancestor = ancestor.parentElement
-      } while (ancestor !== null && ancestor.nodeType === Node.ELEMENT_NODE)
-
-      return null
-    }
-  } else {
-    // eslint-disable-next-line arrow-body-style
-    fnClosest = (element, selector) => {
-      return element.closest(selector)
-    }
-  }
-
-  const scopeSelectorRegex = /:scope\b/
-  const supportScopeQuery = (() => {
-    const element = document.createElement('div')
-    try {
-      element.querySelectorAll(':scope *')
-    } catch (e) {
-      return false
-    }
-
-    return true
-  })()
-
-  let findFn = null
-  let findOneFn = null
-  if (supportScopeQuery) {
-    findFn = Element.prototype.querySelectorAll
-    findOneFn = Element.prototype.querySelector
-  } else {
-    findFn = function (selector) {
-      if (!scopeSelectorRegex.test(selector)) {
-        return this.querySelectorAll(selector)
-      }
-
-      const hasId = Boolean(this.id)
-      if (!hasId) {
-        this.id = Util.getUID('scope')
-      }
-
-      let nodeList = null
-      try {
-        selector = selector.replace(scopeSelectorRegex, `#${this.id}`)
-        nodeList = this.querySelectorAll(selector)
-      } finally {
-        if (!hasId) {
-          this.removeAttribute('id')
-        }
-      }
-
-      return nodeList
-    }
-
-    findOneFn = function (selector) {
-      if (!scopeSelectorRegex.test(selector)) {
-        return this.querySelector(selector)
-      }
-
-      const matches = findFn.call(this, selector)
-      if (typeof matches[0] !== 'undefined') {
-        return matches[0]
-      }
-
-      return null
-    }
-  }
+  const closest = Polyfill.closest
+  const find = Polyfill.find
+  const findOne = Polyfill.findOne
 
   return {
     matches(element, selector) {
-      return fnMatches.call(element, selector)
+      return element.matches(selector)
     },
 
     find(selector, element = document.documentElement) {
@@ -111,7 +29,7 @@ const SelectorEngine = (() => {
         return null
       }
 
-      return findFn.call(element, selector)
+      return find.call(element, selector)
     },
 
     findOne(selector, element = document.documentElement) {
@@ -119,7 +37,7 @@ const SelectorEngine = (() => {
         return null
       }
 
-      return findOneFn.call(element, selector)
+      return findOne.call(element, selector)
     },
 
     children(element, selector) {
@@ -140,7 +58,7 @@ const SelectorEngine = (() => {
 
       let ancestor = element.parentNode
       while (ancestor && ancestor.nodeType === Node.ELEMENT_NODE) {
-        if (fnMatches.call(ancestor, selector)) {
+        if (ancestor.matches(selector)) {
           parents.push(ancestor)
         }
 
@@ -151,7 +69,7 @@ const SelectorEngine = (() => {
     },
 
     closest(element, selector) {
-      return fnClosest(element, selector)
+      return closest(element, selector)
     },
 
     prev(element, selector) {
@@ -163,7 +81,7 @@ const SelectorEngine = (() => {
 
       let previous = element.previousSibling
       while (previous) {
-        if (fnMatches.call(previous, selector)) {
+        if (previous.matches(selector)) {
           siblings.push(previous)
         }