[docs-app] fix: add polyfills to support IE11 (#4602)

packages/docs-app/package.json

@@ -29,16 +29,19 @@
         "@documentalist/client": "~3.0.0",
         "chroma-js": "^2.1.0",
         "classnames": "^2.2",
+        "core-js": "^3.8.1",
         "dom4": "^2.1.5",
         "downloadjs": "^1.4.7",
         "lodash-es": "^4.17.15",
         "moment": "^2.29.1",
         "normalize.css": "^8.0.1",
         "popper.js": "^1.16.1",
-        "react": "^16.14.0",
+        "promise": "^8.1.0",
         "react-dom": "^16.14.0",
         "react-transition-group": "^4.4.1",
-        "tslib": "~1.13.0"
+        "react": "^16.14.0",
+        "tslib": "~1.13.0",
+        "whatwg-fetch": "^3.4.1"
     },
     "devDependencies": {
         "@blueprintjs/node-build-scripts": "^1.5.0",

packages/docs-app/polyfill.js

@@ -0,0 +1,52 @@
+/*
+ * Copyright 2017 Palantir Technologies, Inc. All rights reserved.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * Require the minimal set of ES2015+ polyfills from `core-js`, `promise`, and `whatwg-fetch` to run in IE11+.
+ * Adapted from the "react-app-polyfill" package.
+ * See "NPM Installation" section of docs homepage for more information.
+ */
+
+if (typeof Promise === "undefined") {
+    // Rejection tracking prevents a common issue where React gets into an
+    // inconsistent state due to an error, but it gets swallowed by a Promise,
+    // and the user has no idea what causes React's erratic future behavior.
+    require("promise/lib/rejection-tracking").enable();
+    self.Promise = require("promise/lib/es6-extensions.js");
+}
+
+// Make sure we're in a Browser-like environment before importing polyfills
+// This prevents `fetch()` from being imported in a Node test environment
+if (typeof window !== "undefined") {
+    // fetch() polyfill for making API calls.
+    require("whatwg-fetch");
+}
+
+// Object.assign() is commonly used with React.
+require("core-js/features/object/assign");
+// Support for...of (a commonly used syntax feature that requires Symbols)
+require("core-js/features/symbol");
+// Support iterable spread (...Set, ...Map)
+require("core-js/features/array/from");
+// Support Array(...).fill(), used by popper.js
+require("core-js/features/array/fill");
+// Support [...].find()
+require("core-js/features/array/find");
+// Support Map()
+require("core-js/features/map");
+// Support Set()
+require("core-js/features/set");
+// Support "string".startsWith()
+require("core-js/features/string/starts-with");

packages/docs-app/src/getting-started.md

@@ -63,17 +63,16 @@ Blueprint can instead be quickly added to a page using the Unpkg CDN.
 
 @### Language features
 
-Note that since the minimum supported version of React is [v16](https://reactjs.org/blog/2017/09/26/react-v16.0.html),
-all of its [JavaScript Environment Requirements](https://reactjs.org/docs/javascript-environment-requirements.html) apply to
-Blueprint as well. Blueprint components require the following ES2015 features:
+Blueprint components require the following ES2015 features:
 
 -   `Map`
 -   `Set`
--   `Array.fill`
--   `Array.from`
+-   `Array.prototype.fill`
+-   `Array.prototype.from`
+-   `String.prototype.startsWith`
 
-We recommend polyfilling these features using [es6-shim](https://github.com/paulmillr/es6-shim) or
-[core-js](https://github.com/zloirock/core-js).
+Popper.js also has some polyfill requirements, [see the docs here](https://popper.js.org/docs/v2/browser-support/).
+We recommend polyfilling these features using [core-js](https://github.com/zloirock/core-js).
 
 @### DOM4
 

packages/docs-app/src/index.tsx

@@ -13,10 +13,6 @@
  * limitations under the License.
  */
 
-// tslint:disable-next-line:no-submodule-imports
-import "@blueprintjs/test-commons/polyfill";
-import "dom4";
-
 import * as React from "react";
 import * as ReactDOM from "react-dom";
 

packages/docs-app/webpack.config.js

@@ -20,7 +20,14 @@ const { baseConfig } = require("@blueprintjs/webpack-build-scripts");
 
 module.exports = Object.assign({}, baseConfig, {
     entry: {
-        "docs-app": ["./src/index.tsx", "./src/index.scss"],
+        "docs-app": [
+            // environment polyfills
+            "dom4",
+            "./polyfill.js",
+            // bundle entry points
+            "./src/index.tsx",
+            "./src/index.scss",
+        ],
     },
 
     output: {

packages/test-commons/polyfill.js

@@ -23,3 +23,4 @@ require("core-js/features/array/fill");
 require("core-js/features/array/from");
 require("core-js/features/map");
 require("core-js/features/set");
+require("core-js/features/string/starts-with");

packages/webpack-build-scripts/package.json

@@ -6,7 +6,7 @@
         "test": "exit 0"
     },
     "dependencies": {
-        "@pmmmwh/react-refresh-webpack-plugin": "^0.4.3",
+        "@pmmmwh/react-refresh-webpack-plugin": "^0.5.0-beta.1",
         "assert": "^2.0.0",
         "autoprefixer": "^10.2.4",
         "css-loader": "^5.0.1",

packages/webpack-build-scripts/webpack.config.base.js

@@ -155,4 +155,7 @@ module.exports = {
     resolve: {
         extensions: [".js", ".jsx", ".ts", ".tsx", ".scss"],
     },
+
+    // add support for IE11 (otherwise, webpack 5 uses some ES2015 syntax by default)
+    target: ["web", "es5"],
 };

yarn.lock

@@ -1158,16 +1158,17 @@
     "@octokit/openapi-types" "^2.0.0"
     "@types/node" ">= 8"
 
-"@pmmmwh/react-refresh-webpack-plugin@^0.4.3":
-  version "0.4.3"
-  resolved "https://registry.yarnpkg.com/@pmmmwh/react-refresh-webpack-plugin/-/react-refresh-webpack-plugin-0.4.3.tgz#1eec460596d200c0236bf195b078a5d1df89b766"
-  integrity sha512-br5Qwvh8D2OQqSXpd1g/xqXKnK0r+Jz6qVKBbWmpUcrbGOxUrf39V5oZ1876084CGn18uMdR5uvPqBv9UqtBjQ==
+"@pmmmwh/react-refresh-webpack-plugin@^0.5.0-beta.1":
+  version "0.5.0-beta.1"
+  resolved "https://registry.yarnpkg.com/@pmmmwh/react-refresh-webpack-plugin/-/react-refresh-webpack-plugin-0.5.0-beta.1.tgz#8399a7c18d6bea0bee77d06a77410a635af19828"
+  integrity sha512-AnFkt6vpvT9fQQemNX/QkRKy2+kLbFNSO0MAy6/LvHXu6FyMtJC8qWmrZzjUq14wu/g9M/sLcy6gch/XQvymcQ==
   dependencies:
     ansi-html "^0.0.7"
+    core-js-pure "^3.8.1"
     error-stack-parser "^2.0.6"
-    html-entities "^1.2.1"
-    native-url "^0.2.6"
-    schema-utils "^2.6.5"
+    html-entities "^2.1.0"
+    native-url "^0.3.4"
+    schema-utils "^3.0.0"
     source-map "^0.7.3"
 
 "@polka/url@^1.0.0-next.9":
@@ -2197,7 +2198,7 @@ arrify@^1.0.1:
   resolved "https://registry.yarnpkg.com/arrify/-/arrify-1.0.1.tgz#898508da2226f380df904728456849c1501a4b0d"
   integrity sha1-iYUI2iIm84DfkEcoRWhJwVAaSw0=
 
-asap@^2.0.0, asap@^2.0.3, asap@~2.0.3:
+asap@^2.0.0, asap@^2.0.3, asap@~2.0.3, asap@~2.0.6:
   version "2.0.6"
   resolved "https://registry.yarnpkg.com/asap/-/asap-2.0.6.tgz#e50347611d7e690943208bbdafebcbc2fb866d46"
   integrity sha1-5QNHYR1+aQlDIIu9r+vLwvuGbUY=
@@ -3508,7 +3509,7 @@ copy-webpack-plugin@^7.0.0:
     schema-utils "^3.0.0"
     serialize-javascript "^5.0.1"
 
-core-js-pure@^3.0.0:
+core-js-pure@^3.0.0, core-js-pure@^3.8.1:
   version "3.9.1"
   resolved "https://registry.yarnpkg.com/core-js-pure/-/core-js-pure-3.9.1.tgz#677b322267172bd490e4464696f790cbc355bec5"
   integrity sha512-laz3Zx0avrw9a4QEIdmIblnVuJz8W51leY9iLThatCsFawWxC3sE4guASC78JbCin+DkwMpCdp1AVAuzL/GN7A==
@@ -6230,11 +6231,16 @@ html-element-map@^1.2.0:
   dependencies:
     array-filter "^1.0.0"
 
-html-entities@^1.2.1, html-entities@^1.3.1:
+html-entities@^1.3.1:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/html-entities/-/html-entities-1.4.0.tgz#cfbd1b01d2afaf9adca1b10ae7dffab98c71d2dc"
   integrity sha512-8nxjcBcd8wovbeKx7h3wTji4e6+rhaVuPNpMqwWgnHh+N9ToqsCs6XztWRBPQ+UtzsoMAdKZtUENoVzU/EMtZA==
 
+html-entities@^2.1.0:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/html-entities/-/html-entities-2.1.1.tgz#faa5fc521e2d18499627835d22be3554c202208f"
+  integrity sha512-HjNLgm9Ba8zKd6NDMkXa0mMPn3eDUxOUnEIm/qy2Rm6rnqRHgI9DpMYIv1Fndu8haUmfMQHNYNrlNKmdU8GMnQ==
+
 html-escaper@^2.0.0:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/html-escaper/-/html-escaper-2.0.2.tgz#dfd60027da36a36dfcbe236262c00a5822681453"
@@ -8558,10 +8564,10 @@ nanomatch@^1.2.9:
     snapdragon "^0.8.1"
     to-regex "^3.0.1"
 
-native-url@^0.2.6:
-  version "0.2.6"
-  resolved "https://registry.yarnpkg.com/native-url/-/native-url-0.2.6.tgz#ca1258f5ace169c716ff44eccbddb674e10399ae"
-  integrity sha512-k4bDC87WtgrdD362gZz6zoiXQrl40kYlBmpfmSjwRO1VU0V5ccwJTlxuE72F6m3V0vc1xOf6n3UCP9QyerRqmA==
+native-url@^0.3.4:
+  version "0.3.4"
+  resolved "https://registry.yarnpkg.com/native-url/-/native-url-0.3.4.tgz#29c943172aed86c63cee62c8c04db7f5756661f8"
+  integrity sha512-6iM8R99ze45ivyH8vybJ7X0yekIcPf5GgLV5K0ENCbmRcaRIDoj37BC8iLEmaaBfqqb8enuZ5p0uhY+lVAbAcA==
   dependencies:
     querystring "^0.2.0"
 
@@ -10251,6 +10257,13 @@ promise@^7.1.1:
   dependencies:
     asap "~2.0.3"
 
+promise@^8.1.0:
+  version "8.1.0"
+  resolved "https://registry.yarnpkg.com/promise/-/promise-8.1.0.tgz#697c25c3dfe7435dd79fcd58c38a135888eaf05e"
+  integrity sha512-W04AqnILOL/sPRXziNicCjSNRruLAuIHEOVBazepu0545DDNGYHz7ar9ZgZ1fMU8/MA4mVxp5rkBWRi6OXIy3Q==
+  dependencies:
+    asap "~2.0.6"
+
 promzard@^0.3.0:
   version "0.3.0"
   resolved "https://registry.yarnpkg.com/promzard/-/promzard-0.3.0.tgz#26a5d6ee8c7dee4cb12208305acfb93ba382a9ee"
@@ -11141,7 +11154,7 @@ scheduler@^0.19.1:
     loose-envify "^1.1.0"
     object-assign "^4.1.1"
 
-[email protected], schema-utils@^2.6.5:
+[email protected]:
   version "2.7.0"
   resolved "https://registry.yarnpkg.com/schema-utils/-/schema-utils-2.7.0.tgz#17151f76d8eae67fbbf77960c33c676ad9f4efc7"
   integrity sha512-0ilKFI6QQF5nxDZLFn2dMjvc4hjg/Wkg7rHd3jK6/A4a1Hl9VFdQWvgB1UMGoU94pad1P/8N7fMcEnLnSiju8A==
@@ -13390,10 +13403,10 @@ websocket-extensions@>=0.1.1:
   resolved "https://registry.yarnpkg.com/websocket-extensions/-/websocket-extensions-0.1.4.tgz#7f8473bc839dfd87608adb95d7eb075211578a42"
   integrity sha512-OqedPIGOfsDlo31UNwYbCFMSaO9m9G/0faIHj5/dZFDMFqPTcx6UwqyOy3COEaEOg/9VsGIpdqn62W5KhoKSpg==
 
-whatwg-fetch@>=0.10.0:
-  version "3.5.0"
-  resolved "https://registry.yarnpkg.com/whatwg-fetch/-/whatwg-fetch-3.5.0.tgz#605a2cd0a7146e5db141e29d1c62ab84c0c4c868"
-  integrity sha512-jXkLtsR42xhXg7akoDKvKWE40eJeI+2KZqcp2h3NsOrRnDvtWX36KcKl30dy+hxECivdk2BVUHVNrPtoMBUx6A==
+whatwg-fetch@>=0.10.0, whatwg-fetch@^3.4.1:
+  version "3.6.2"
+  resolved "https://registry.yarnpkg.com/whatwg-fetch/-/whatwg-fetch-3.6.2.tgz#dced24f37f2624ed0281725d51d0e2e3fe677f8c"
+  integrity sha512-bJlen0FcuU/0EMLrdbJ7zOnW6ITZLrZMIarMUVmdKtsGvZna8vxKYaexICWPfZ8qwf9fzNq+UEIZrnSaApt6RA==
 
 whatwg-url@^7.0.0:
   version "7.1.0"