Merge pull request #270 from rackerlabs/eliminate-polyfill-io

refactor(polyfills): eliminate polyfill.io

Author: CITguy

docs/_templates/partials/after_footer.njk

@@ -1,6 +1,3 @@
-<script src="dist/scripts/helix-ui.polyfills.js"></script>
-<script src="https://cdn.polyfill.io/v2/polyfill.min.js"></script>
-
 <!-- intelligently load ES5 Adapter (if needed) -->
 <span id="ce-es5-adapter">
   <script>

docs/components/layouts/horizontal-layout-template.html

@@ -99,9 +99,6 @@ <h2>Right Panel</h2>
   <!-- FIXME: point to HelixUI polyfills in node_modules/helix-ui -->
   <script src="dist/scripts/helix-ui.polyfills.min.js"></script>
 
-  <!-- Browser polyfills (mainly for IE) -->
-  <script src="https://cdn.polyfill.io/v2/polyfill.min.js"></script>
-
   <!-- intelligently load ES5 Adapter (if needed) -->
   <span id="ce-es5-adapter">
     <script>

docs/components/layouts/vertical-layout-template.html

@@ -94,9 +94,6 @@ <h1>Page Content</h1>
   <!-- FIXME: point to HelixUI polyfills in node_modules/helix-ui -->
   <script src="dist/scripts/helix-ui.polyfills.min.js"></script>
 
-  <!-- Browser polyfills (mainly for IE) -->
-  <script src="https://cdn.polyfill.io/v2/polyfill.min.js"></script>
-
   <!-- intelligently load ES5 Adapter (if needed) -->
   <span id="ce-es5-adapter">
     <script>

rollup.config.js

@@ -120,33 +120,4 @@ export default [
             lessPlugin,
         ],
     },
-
-    // src/polyfills.js --> dis/helix-ui.polyfills.js (IIFE)
-    {
-        input: 'src/polyfills.js',
-        output: [
-            {
-                file: 'dist/scripts/helix-ui.polyfills.js',
-                format: 'iife',
-            }
-        ],
-        plugins: [
-            babelPlugin,
-        ],
-    },
-
-    // src/polyfills.js --> dis/helix-ui.polyfills.min.js (IIFE)
-    {
-        input: 'src/polyfills.js',
-        output: [
-            {
-                file: 'dist/scripts/helix-ui.polyfills.min.js',
-                format: 'iife',
-            }
-        ],
-        plugins: [
-            babelPlugin,
-            uglify({}, minify),
-        ],
-    },
 ]

src/browser-entry.js

@@ -1,8 +1,11 @@
+import './polyfills/ChildNode';
+import './polyfills/Element';
 import HelixUI from './helix-ui/index';
 
 // add HelixUI to global scope if not already defined
 if (!window.HelixUI) {
     window.HelixUI = HelixUI;
 }
 
+// Initialize on load
 HelixUI.initialize();

src/polyfills.js

@@ -0,0 +1,19 @@
+// Modified from https://developer.mozilla.org/en-US/docs/Web/API/ChildNode/remove#Polyfill
+[
+    Element.prototype,
+    CharacterData.prototype,
+    DocumentType.prototype,
+].forEach(function (proto) {
+    if (!proto.hasOwnProperty('remove')) {
+        Object.defineProperty(proto, 'remove', {
+            configurable: true,
+            enumerable: true,
+            writable: true,
+            value: function () {
+                if (this.parentNode !== null) {
+                    this.parentNode.removeChild(this);
+                }
+            },
+        });
+    }
+});

src/polyfills/ChildNode.js

@@ -0,0 +1,33 @@
+// Modified from https://developer.mozilla.org/en-US/docs/Web/API/Element/closest#Polyfill
+
+/*
+ * If browser supports a variation of matches(), (IE9+)
+ * normalize to 'matches' on the prototype.
+ */
+if (!Element.prototype.matches) {
+    Element.prototype.matches = Element.prototype.msMatchesSelector ||
+                                Element.prototype.webkitMatchesSelector;
+}
+
+if (!Element.prototype.closest) {
+    Element.prototype.closest = function (selectors) {
+        var el = this;
+
+        // fail fast if element isn't attached to the document
+        if (!document.documentElement.contains(el)) {
+            return null;
+        }
+
+        // Check if any ancestors match selectors
+        while (el !== null && el.nodetype === 1) {
+            if (el.matches(selectors)) {
+                return el;
+            } else {
+                el = el.parentElement || el.parentNode;
+            }
+        }
+
+        // Return null if no ancestors match
+        return null;
+    };
+}