refactor: Drop IE11 support

Description: Remove the full version of the polyfill for ESL UI site renderer Remove shims and targets =ES5 in the site codebase Remove ES5-related OOTB ESL polyfills except es5-target-shim.ts Drop support for IE11 and ES5 target BREAKING CHANGES: ESL UI site renderer and ESL polyfills no longer support IE11 and ES5 target.
exadel-inc · Mar 17, 2023 · 6d376ee · 6d376ee
1 parent 1c402eb
commit 6d376ee
Show file tree

Hide file tree

Showing 25 changed files with 5 additions and 750 deletions.
diff --git a/README.md b/README.md
@@ -41,7 +41,6 @@ to meet your project needs.
 
 ESL is based solely on Web API and ECMAScript 6 features, which let our web UI components library work 
 well across all modern browsers such as Firefox, Chrome, Safari, Opera, and Edge. 
-ESL can also work on IE11 when the whole list of polyfills is provided (see [Browser support & Polyfills](https://github.com/exadel-inc/esl/blob/HEAD/docs/BROWSER_SUPPORT.md) for more details).
 
 ## Library Structure
 

diff --git a/docs/BROWSER_SUPPORT.md b/docs/BROWSER_SUPPORT.md
@@ -5,18 +5,6 @@
 Exadel Smart Library does not have dependencies but uses the following list of native browser features:
 
 - ECMAScript 6 features
-    - [Array.from](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/from) (no Iterable Objects support required)
-      ([ESL polyfill](../src/polyfills/list/es6.array.from.ts) provided)
-    - [Array.prototype.find](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/find)
-      ([ESL polyfill](../src/polyfills/list/es6.array.find.ts) provided)
-    - [Array.prototype.findIndex](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/findIndex)
-      ([ESL polyfill](../src/polyfills/list/es6.array.find.ts) provided)
-    - [Array.prototype.include](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/includes)
-      ([ESL polyfill](../src/polyfills/list/es6.array.includes.ts) provided)
-    - [Object.is](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is)
-      ([ESL polyfill](../src/polyfills/list/es6.object.is.ts) provided)
-    - [Object.assign](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/assign) (accurate polyfill required)
-      ([ESL polyfill](../src/polyfills/list/es6.object.assign.ts) provided)
     - [ES6 Promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise)
 - Web API
     - [Event](https://developer.mozilla.org/en-US/docs/Web/API/Event) constructor + `preventDefault` polyfill
@@ -34,20 +22,10 @@ All of them are fully supported by modern browsers such as Chrome, Firefox, Safa
 
 In order to make ESL work in older browsers, you can use a "light" polyfills list of IntersectionObserver, ResizeObserver and Custom Elements (for older versions of Edge and Safari).
 
-Or make the library work in IE11 or Edge (<14) by using the "full" polyfills list provided.
-
 See more details on what polyfill approach might look like in the demo pages source code.
 
 Also, ESL has built-in polyfills for some of DOM and ES6 features. They are available under [polyfills](../src/polyfills) directory:
   - ECMA Script 5: output shim (`HTMLElement` constructor call) - [es5-target-shim.ts](../src/polyfills/es5-target-shim.ts)
-  - ECMA Script 5: IE11, Edge <14 support - [polyfills.es5.ts](../src/polyfills/polyfills.es5.ts)
-    - `Object.is`, `Object.assign` 
-    - `Array.from`, `Array.prototype.find`, `Array.prototype.findIndex`, `Array.prototype.index`
-    - `Event`, `CustomEvent`, `MouseEvent`, `KeyboardEvent`, `FocusEvent` shim
-    - `Event.prototype.preventDefault` shim
-    - `Element.prototype.closest`
-    - `DOMTokenList.prototype.toggle`
-    - *Note: there is no promise polyfill embedded*, use npm:[promise-polyfill](https://www.npmjs.com/package/promise-polyfill) or similar
   - ECMA Script 6: DOM - [polyfills.es6.ts](../src/polyfills/polyfills.es6.ts)
     - `Node.isConnected` 
     - `KeyboardKey.prototype.key` 

diff --git a/package-lock.json b/package-lock.json
diff --git a/pages/src/polyfill-full.ts b/pages/src/polyfill-full.ts
diff --git a/pages/views/_includes/polyfill.njk b/pages/views/_includes/polyfill.njk
@@ -1,9 +1,7 @@
 <script>
   (function () {
     var version = '';
-    if (!window.Promise || !window.CustomEvent){
-      version = 'full';
-    } else if (!('getRootNode' in Element.prototype) || !window.customElements){
+    if (!('getRootNode' in Element.prototype) || !window.customElements) {
       version = 'medium';
     } else if (!window.scrollBy || !window.IntersectionObserver || !window.ResizeObserver || !window.ResizeObserver) {
       version = 'light';

diff --git a/pages/webpack.config.js b/pages/webpack.config.js
@@ -5,7 +5,6 @@ module.exports = {
   devtool: 'source-map',
   entry: {
     'localdev': './src/localdev.ts',
-    'polyfill-full': './src/polyfill-full.ts',
     'polyfill-medium': './src/polyfill-medium.ts',
     'polyfill-light': './src/polyfill-light.ts'
   },

diff --git a/src/modules/draft/esl-carousel/core/esl-carousel-arrows.less b/src/modules/draft/esl-carousel/core/esl-carousel-arrows.less
@@ -19,8 +19,6 @@ esl-carousel {
     border: none;
     opacity: .5;
     cursor: pointer;
-
-    // TODO: IE11 support
     appearance: none;
   }
   button.arrow-next {

diff --git a/src/modules/esl-tab/core/esl-tabs.arrows.less b/src/modules/esl-tab/core/esl-tabs.arrows.less
@@ -19,8 +19,6 @@ esl-tabs[scrollable] {
     border: none;
     opacity: .5;
     cursor: pointer;
-
-    // TODO: IE11 support
     appearance: none;
   }
   .arrow-next {

diff --git a/src/polyfills/list/dom.element.closest.ts b/src/polyfills/list/dom.element.closest.ts
diff --git a/src/polyfills/list/dom.element.toggleAttribute.ts b/src/polyfills/list/dom.element.toggleAttribute.ts
@@ -1,6 +1,6 @@
 /**
  * Group: DOM API shims
- * Target Browsers: `IE11`, `Edge < 18`, `Safari < 13`
+ * Target Browsers: `Edge < 18`, `Safari < 13`
  * Element.toggleAttribute polyfill
  */
 if (!Element.prototype.toggleAttribute) {

diff --git a/src/polyfills/list/dom.event.base.ts b/src/polyfills/list/dom.event.base.ts
diff --git a/src/polyfills/list/dom.event.custom.ts b/src/polyfills/list/dom.event.custom.ts
diff --git a/src/polyfills/list/dom.event.focus.ts b/src/polyfills/list/dom.event.focus.ts
diff --git a/src/polyfills/list/dom.event.keyboard.ts b/src/polyfills/list/dom.event.keyboard.ts
@@ -1,6 +1,6 @@
 /**
  * Group: DOM API shims
- * Target Browsers: `IE11`, `Edge < 18`
+ * Target Browsers: `Edge < 18`
  * KeyboardEvent polyfill: https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/KeyboardEvent
  */
 try {

diff --git a/src/polyfills/list/dom.event.mouse.ts b/src/polyfills/list/dom.event.mouse.ts
diff --git a/src/polyfills/list/dom.keyboard.key.ts b/src/polyfills/list/dom.keyboard.key.ts
@@ -1,6 +1,6 @@
 /**
  * Group: DOM API shims
- * Target Browsers: `IE11`, `Edge < 18`
+ * Target Browsers: `Edge < 18`
  * KeyboardEvent.prototype.key shim to normalize key values to W3C spec
  * Based on published shim https://www.npmjs.com/package/shim-keyboard-event-key
  */

diff --git a/src/polyfills/list/dom.node.isConnected.ts b/src/polyfills/list/dom.node.isConnected.ts
@@ -1,6 +1,6 @@
 /**
  * Group: DOM polyfills
- * Target browsers: `IE11`, `Edge <= 18`
+ * Target browsers: `Edge <= 18`
  * Node.isConnected polyfill
  */
 if (!('isConnected' in Node.prototype)) {

diff --git a/src/polyfills/list/dom.tokenList.toggle.ts b/src/polyfills/list/dom.tokenList.toggle.ts
diff --git a/src/polyfills/list/es6.array.find.ts b/src/polyfills/list/es6.array.find.ts
diff --git a/src/polyfills/list/es6.array.from.ts b/src/polyfills/list/es6.array.from.ts
diff --git a/src/polyfills/list/es6.array.includes.ts b/src/polyfills/list/es6.array.includes.ts