From 37bab503b4c0f4c9e09e87331511f7567cad486a Mon Sep 17 00:00:00 2001
From: David Gertmenian-Wong <dgertmenianwong@gmail.com>
Date: Tue, 29 Jan 2019 16:16:12 -0800
Subject: [PATCH] Use `babel-polyfill` in place of `polyfill.io` CDN (#2496)

Update provides support for running the examples app on IE 11.

There appeared to be a number of issues with using `polyfill.io`
with slate. While trying to run the example app on IE 11, I ran
into each of the following:
https://github.com/Financial-Times/polyfill-service/issues/792
https://github.com/Financial-Times/polyfill-service/issues/854
https://github.com/Financial-Times/polyfill-service/issues/1341

`babel-polyfill` provides more robust support for polyfilling and
will allow for better targeting of supported browser envs in the
future (if desired).

Also includes `element-closest` polyfill, which is necessary for
using with IE 11 :(
---
 package.json              |  2 ++
 support/webpack/config.js | 10 ++++++++--
 yarn.lock                 |  4 ++++
 3 files changed, 14 insertions(+), 2 deletions(-)

diff --git a/package.json b/package.json
index 70aa82c92..6d448275a 100644
--- a/package.json
+++ b/package.json
@@ -12,6 +12,7 @@
     "babel-plugin-external-helpers": "^6.22.0",
     "babel-plugin-module-resolver": "^3.1.1",
     "babel-plugin-transform-runtime": "^6.23.0",
+    "babel-polyfill": "^6.26.0",
     "babel-preset-env": "^1.6.1",
     "babel-preset-react": "^6.24.1",
     "babel-preset-stage-0": "^6.24.1",
@@ -22,6 +23,7 @@
     "copy-webpack-plugin": "^4.4.1",
     "cross-env": "^5.1.3",
     "css-loader": "^0.28.9",
+    "element-closest": "^2.0.2",
     "emojis": "^1.0.10",
     "emotion": "^9.2.4",
     "eslint": "^4.19.1",
diff --git a/support/webpack/config.js b/support/webpack/config.js
index 844d799ef..42f27e5cf 100644
--- a/support/webpack/config.js
+++ b/support/webpack/config.js
@@ -13,7 +13,14 @@ const IS_PROD = process.env.NODE_ENV === 'production'
 const IS_DEV = !IS_PROD
 
 const config = {
-  entry: ['react-hot-loader/patch', './examples/index.js'],
+  entry: [
+    'babel-polyfill',
+    // COMPAT: Missing in IE 11 and included separately because babel-polyfill does not support DOM elements:
+    // https://github.com/zloirock/core-js/issues/317
+    'element-closest',
+    'react-hot-loader/patch',
+    './examples/index.js',
+  ],
   output: {
     path: path.resolve(__dirname, '../../build'),
     filename: '[name]-[hash].js',
@@ -79,7 +86,6 @@ const config = {
           content: 'width=device-width, initial-scale=1',
         },
       ],
-      scripts: ['https://cdn.polyfill.io/v2/polyfill.min.js'],
       links: [
         'https://fonts.googleapis.com/css?family=Roboto:400,400i,700,700i&subset=latin-ext',
         'https://fonts.googleapis.com/icon?family=Material+Icons',
diff --git a/yarn.lock b/yarn.lock
index 343702a9e..cbebb7846 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2702,6 +2702,10 @@ electron@0.4.x:
   dependencies:
     drip "1.1.x"
 
+element-closest@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/element-closest/-/element-closest-2.0.2.tgz#72a740a107453382e28df9ce5dbb5a8df0f966ec"
+
 elliptic@^6.0.0:
   version "6.4.0"
   resolved "https://registry.yarnpkg.com/elliptic/-/elliptic-6.4.0.tgz#cac9af8762c85836187003c8dfe193e5e2eae5df"