Run playground Gen1/2 in IE11 (#3599)

OKTA-714198 Adds script `start:ie11`
okta · Apr 17, 2024 · f999c2b · f999c2b
1 parent 1858480
commit f999c2b
Show file tree

Hide file tree

Showing 4 changed files with 31 additions and 1 deletion.
diff --git a/package.json b/package.json
@@ -93,6 +93,7 @@
     "build:webpack-dev": "webpack --config webpack.dev.config.js",
     "build:webpack-release": "webpack --config webpack.release.config.js",
     "start": "node scripts/buildtools start",
+    "start:ie11": "IE11_COMPAT_MODE=true OKTA_SIW_HOST=0.0.0.0 ENTRY=default yarn start --watch",
     "start:test:app": "yarn workspace @okta/test.app start",
     "mock:device-authenticator": "dyson playground/mocks/spec-device-authenticator/ 6512",
     "clean:types": "grunt clean:types",

diff --git a/webpack.common.config.js b/webpack.common.config.js
@@ -24,6 +24,7 @@ module.exports = function({
   cdn = true,
   useBuiltIns = false,
 }) {
+  /* eslint complexity: [2, 11] */
 
   // normalize entry so it is always an array
   entry = Array.isArray(entry) ? entry : [entry];
@@ -53,6 +54,15 @@ module.exports = function({
         corejs: '3.9',
       } : {}
     ]);
+  } else if (process.env.IE11_COMPAT_MODE === 'true') {
+    babelOptions.presets.unshift([
+      '@babel/preset-env',
+      {
+        targets: {
+          ie: '11'
+        },
+      }
+    ]);
   } else {
     // In local development, we would prefer not to include any babel transforms as they make debugging more difficult
     // However, there is an issue with testcafe which requires us to include the optional chaining transform

diff --git a/webpack.dev.config.js b/webpack.dev.config.js
@@ -73,6 +73,9 @@ module.exports = (env = {}) => {
       usePolyfill(webpackConfig);
     } else {
       webpackConfig.optimization.minimize = false;
+      if (process.env.IE11_COMPAT_MODE === 'true' && entryName === 'default') {
+        usePolyfill(webpackConfig);
+      }
     }
 
     if (env.mockDuo) {

diff --git a/webpack.playground.config.js b/webpack.playground.config.js
@@ -42,6 +42,12 @@ if (!process.env.DISABLE_CSP) {
   headers['Content-Security-Policy'] = csp;
 }
 
+const hotReloadOptions = process.env.IE11_COMPAT_MODE === 'true' ? {
+  hot: false,
+  liveReload: false,
+  webSocketServer: false,
+} : {};
+
 module.exports = {
   mode: 'development',
   target: 'web',
@@ -81,14 +87,24 @@ module.exports = {
           presets: [
             // preset-env is disabled for a better debugging experience.
             // It can be enabled if necessary to run playground on IE11
-            // '@babel/preset-env',
+            ...(process.env.IE11_COMPAT_MODE === 'true' ? [
+              [
+                '@babel/preset-env',
+                {
+                  targets: {
+                    ie: '11'
+                  }
+                }
+              ]
+            ] : []),
             '@babel/preset-typescript' // must run before preset-env: https://github.com/babel/babel/issues/12066
           ]
         }
       },
     ]
   },
   devServer: {
+    ...hotReloadOptions,
     host: HOST,
     watchFiles: [...staticDirs],
     static: [