Update build to support IE11/Edge out of the box (#2909)

Update build to support IE11/Edge out of the box

.babelrc

-{
-  "presets": ["@babel/preset-env", "@babel/preset-react"],
-  "plugins": [
-    "@babel/plugin-transform-runtime",
-    "transform-react-remove-prop-types",
-    ["lodash", { "id": [
-      "lodash",
-      ]}
-    ]],
-}

babel.config.js

+/*
+ * babel.config.js used to support a UMD built version of Mirador that is
+ * compatible with IE11 and Edge.
+ */
+
+// eslint-disable-next-line func-names
+module.exports = function (api) {
+  const isDevelopmentEnv = api.env('development');
+  const isProductionEnv = api.env('production');
+  const isTestEnv = api.env('test');
+
+  const presets = [
+    isTestEnv && [
+      '@babel/preset-env',
+      {
+        modules: 'commonjs',
+        targets: {
+          node: 'current',
+        },
+      },
+      '@babel/preset-react',
+    ],
+    (isProductionEnv || isDevelopmentEnv) && [
+      '@babel/preset-env',
+      {
+        corejs: 3,
+        exclude: ['transform-typeof-symbol'],
+        forceAllTransforms: true,
+        modules: false,
+        useBuiltIns: 'entry',
+      },
+    ],
+    [
+      '@babel/preset-react',
+      {
+        development: isDevelopmentEnv || isTestEnv,
+        useBuiltIns: true,
+      },
+    ],
+  ].filter(Boolean);
+
+  const plugins = [
+    'babel-plugin-macros',
+    '@babel/plugin-transform-destructuring',
+    [
+      '@babel/plugin-proposal-class-properties',
+      {
+        loose: true,
+      },
+    ],
+    [
+      '@babel/plugin-proposal-object-rest-spread',
+      {
+        useBuiltIns: true,
+      },
+    ],
+    [
+      '@babel/plugin-transform-runtime',
+      {
+        corejs: false,
+        helpers: false, // Needed to support IE/Edge
+        regenerator: true,
+      },
+    ],
+    [
+      '@babel/plugin-transform-regenerator',
+      {
+        async: false,
+      },
+    ],
+    ['transform-react-remove-prop-types',
+      {
+        ignoreFilenames: ['node_modules'],
+        removeImport: true,
+      },
+    ],
+    ['lodash', {
+      id: [
+        'lodash',
+      ],
+    },
+    ]];
+
+  return {
+    plugins,
+    presets,
+  };
+};

bundlewatch.config.json

@@ -2,7 +2,7 @@
   "files": [
     {
       "path": "dist/mirador.min.js",
-      "maxSize": "430 KB"
+      "maxSize": "460 KB"
     }
   ]
 }

package.json

@@ -71,18 +71,23 @@
   "devDependencies": {
     "@babel/cli": "^7.5.0",
     "@babel/core": "^7.5.0",
-    "@babel/plugin-transform-runtime": "^7.5.0",
+    "@babel/plugin-proposal-class-properties": "^7.7.4",
+    "@babel/plugin-proposal-object-rest-spread": "^7.7.4",
+    "@babel/plugin-transform-regenerator": "^7.7.5",
+    "@babel/plugin-transform-runtime": "^7.7.6",
     "@babel/preset-env": "^7.5.0",
     "@babel/preset-react": "^7.0.0",
     "babel-eslint": "10.0.2",
     "babel-jest": "^24.8.0",
     "babel-loader": "^8.0.6",
     "babel-plugin-lodash": "^3.3.4",
+    "babel-plugin-macros": "^2.8.0",
     "babel-plugin-transform-react-remove-prop-types": "^0.4.24",
     "bundlewatch": "^0.2.5",
     "chalk": "^2.4.2",
     "codecov": "^3.5.0",
     "concurrently": "^4.1.1",
+    "core-js": "^3.4.8",
     "css-loader": "^3.0.0",
     "enzyme": "^3.10.0",
     "enzyme-adapter-react-16": "^1.14.0",
@@ -110,6 +115,8 @@
     "style-loader": "^0.23.1",
     "supertest": "^4.0.2",
     "terser-webpack-plugin": "^1.3.0",
+    "unfetch": "^4.1.0",
+    "url-polyfill": "^1.1.7",
     "webpack": "^4.35.3",
     "webpack-cli": "^3.3.5"
   },

src/polyfills.js

+/**
+ * Polyfill file used to build Webpack UMD build. These polyfills are needed to
+ * support both IE and Edge. If you are using Mirador ES imports these will not
+ * get bundled up.
+ */
+
+import 'core-js/stable'; // eslint-disable-line import/no-extraneous-dependencies
+import 'url-polyfill/url-polyfill'; // eslint-disable-line import/no-extraneous-dependencies
+import 'unfetch/polyfill'; // eslint-disable-line import/no-extraneous-dependencies

webpack.config.js

@@ -4,7 +4,7 @@ const TerserPlugin = require('terser-webpack-plugin');
 const paths = require('./config/paths');
 
 const babelLoaderConfig = {
-  include: paths.appSrc, // CRL
+  include: paths.appPath, // CRL
   loader: require.resolve('babel-loader'),
   options: {
     // Save disk space when time isn't as important
@@ -14,7 +14,6 @@ const babelLoaderConfig = {
   },
   test: /\.(js|mjs|jsx)$/,
 };
-
 const baseConfig = [
   {
     entry: './src/index-core.js',
@@ -31,7 +30,7 @@ const baseConfig = [
     },
   },
   {
-    entry: './src/index.js',
+    entry: ['./src/polyfills.js', './src/index.js'],
     module: {
       rules: [
         babelLoaderConfig,