Merge pull request #3570 from alphagov/remove-ie8-js

Remove IE8-10 JavaScript polyfills, helpers, config
alphagov · May 4, 2023 · a7f1e57 · a7f1e57
2 parents 6642806 + 1df7e0e
commit a7f1e57
Show file tree

Hide file tree

Showing 43 changed files with 41 additions and 1,007 deletions.
diff --git a/.github/dependabot.yml b/.github/dependabot.yml
@@ -17,12 +17,6 @@ updates:
     allow:
       - dependency-type: direct
 
-    ignore:
-      # Always ignore legacy packages
-      - dependency-name: iframe-resizer
-      - dependency-name: jquery
-      - dependency-name: rollup
-
   # Update GitHub Actions
   - package-ecosystem: github-actions
     directory: /

diff --git a/docs/contributing/coding-standards/js.md b/docs/contributing/coding-standards/js.md
@@ -13,8 +13,6 @@ component
 ## Skeleton
 
 ```js
-import '../../vendor/polyfills/Element.mjs'
-
 /**
  * Component name
  *
@@ -146,10 +144,10 @@ Prefer named exports over default exports to avoid compatibility issues with tra
 
 If you need to support older browsers, import the necessary [polyfills](/packages/govuk-frontend/src/govuk/vendor/polyfills) and they will be added to the environment when the feature is not supported.
 
-For example, if you want to polyfill `addEventListener` for IE8, import the Event polyfills.
+For example, if you want to polyfill `Element.closest()` for IE11, import the closest polyfill.
 
 ```js
-import '../vendor/polyfills/Event.mjs'
+import '../../vendor/polyfills/Element/prototype/closest.mjs'
 ```
 
 If you need polyfills for features that are not yet included in this project, please see the following guide on [how to add polyfills](../polyfilling.md).

diff --git a/docs/contributing/polyfilling.md b/docs/contributing/polyfilling.md
@@ -1,15 +1,15 @@
 ## Polyfilling
 
-The following example shows how to add a polyfill for `addEventListener`.
+The following example shows how to add a polyfill for `Element.closest()`.
 
 1. Determine if the feature needs to be polyfilled
 
-   You can use resources such as [caniuse.com](https://caniuse.com/) and [developer.mozilla.org](https://developer.mozilla.org/en-US/) to check feature support.
+   You can use resources such as ["Can I use"](https://caniuse.com/) and [developer.mozilla.org](https://developer.mozilla.org/en-US/) to check feature support.
 
-   In this example we’ve looked at [caniuse addEventListener](https://caniuse.com/#search=addEventListener) and seen that it’s not supported in IE8.
+   In this example we’ve looked at ["Can I use" `Element.closest()`](https://caniuse.com/element-closest) and seen that it’s not supported in IE11.
 
 2. Use polyfill.io service to generate the polyfill required
-   You can [use the library](https://github.com/Financial-Times/polyfill-library) to do this or [use their CDN](https://cdn.polyfill.io/v2/polyfill.js?features=Event&flags=always) directly: `https://cdn.polyfill.io/v2/polyfill.js?features=Event&flags=always`
+   You can [use the library](https://github.com/Financial-Times/polyfill-library) to do this or [use their CDN](https://cdn.polyfill.io/v3/polyfill.js?features=Element.prototype.closest&flags=always) directly: `https://cdn.polyfill.io/v3/polyfill.js?features=Element.prototype.closest&flags=always`
 
    Then save this in the same structure that is used in the main project (https://github.com/Financial-Times/polyfill-library/tree/master/polyfills)
 
@@ -18,21 +18,21 @@ The following example shows how to add a polyfill for `addEventListener`.
    We need to make sure we only run the polyfills if they’re needed.
 
    We can take the associated detection code from
-   https://github.com/Financial-Times/polyfill-library/blob/master/polyfills/Event/detect.js
+   https://github.com/Financial-Times/polyfill-library/blob/master/polyfills/Element/prototype/closest/detect.js
 
 4. Put everything together
 
 ```js
 (function(undefined) {
 
-    // Detection from https://github.com/Financial-Times/polyfill-library/blob/master/polyfills/Event/detect.js
+    https://github.com/Financial-Times/polyfill-library/blob/master/polyfills/Element/prototype/closest/detect.js
     var detect = (
       // code goes here
     )
 
     if (detect) return
 
-    // Polyfill from https://cdn.polyfill.io/v2/polyfill.js?features=Event&flags=always
+    // Polyfill from https://cdn.polyfill.io/v3/polyfill.js?features=Element.prototype.closest&flags=always
     // code goes here
 
 }).call('object' === typeof window && window || 'object' === typeof self && self || 'object' === typeof global && global || {});

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json.unit.test.js b/package.json.unit.test.js
diff --git a/packages/govuk-frontend-review/package.json b/packages/govuk-frontend-review/package.json
@@ -28,9 +28,8 @@
     "govuk-frontend-config": "*",
     "govuk-frontend-lib": "*",
     "highlight.js": "^11.7.0",
-    "html5shiv": "^3.7.3",
-    "iframe-resizer": "3.5.15",
-    "jquery": "1.12.4",
+    "iframe-resizer": "^3.5.15",
+    "jquery": "^1.12.4",
     "js-beautify": "^1.14.7",
     "marked": "^4.3.0",
     "nunjucks": "^3.2.4",

diff --git a/packages/govuk-frontend-review/src/common/middleware/vendor.mjs b/packages/govuk-frontend-review/src/common/middleware/vendor.mjs
@@ -3,12 +3,6 @@ import { packageNameToPath } from 'govuk-frontend-lib/names'
 
 const router = express.Router()
 
-/**
- * Add middleware to serve HTML5 Shiv
- * from node_modules
- */
-router.use('/html5-shiv/', express.static(packageNameToPath('html5shiv', 'dist')))
-
 /**
  * Add middleware to serve legacy code
  * from node_modules

diff --git a/packages/govuk-frontend-review/src/views/component-preview.njk b/packages/govuk-frontend-review/src/views/component-preview.njk
@@ -16,8 +16,5 @@
 {% endblock %}
 
 {% block scripts %}
-  <!--[if lt IE 9]>
-    <script src="/vendor/iframe-resizer/ie8.polyfils.min.js"></script>
-  <![endif]-->
   <script src="/vendor/iframe-resizer/iframeResizer.contentWindow.min.js"></script>
 {% endblock %}
diff --git a/packages/govuk-frontend-review/src/views/examples/scoped-initialisation/index.njk b/packages/govuk-frontend-review/src/views/examples/scoped-initialisation/index.njk
@@ -4,9 +4,6 @@
 
 {% block head %}
   <link rel="stylesheet" href="/stylesheets/app.min.css">
-  <!--[if lt IE 9]>
-    <script src="/vendor/html5-shiv/html5shiv.min.js"></script>
-  <![endif]-->
 {% endblock %}
 
 {% block content %}

diff --git a/packages/govuk-frontend-review/src/views/examples/template-custom/index.njk b/packages/govuk-frontend-review/src/views/examples/template-custom/index.njk
@@ -26,9 +26,6 @@
 {% block head %}
   <!-- block:head -->
   <link rel="stylesheet" href="/stylesheets/app.min.css">
-  <!--[if lt IE 9]>
-    <script src="/vendor/html5-shiv/html5shiv.min.js"></script>
-  <![endif]-->
   <!-- endblock:head -->
 {% endblock %}
 

diff --git a/packages/govuk-frontend-review/src/views/examples/template-default/index.njk b/packages/govuk-frontend-review/src/views/examples/template-default/index.njk
@@ -2,9 +2,6 @@
 
 {% block head %}
   <link rel="stylesheet" href="/stylesheets/app.min.css">
-  <!--[if lt IE 9]>
-    <script src="/vendor/html5-shiv/html5shiv.min.js"></script>
-  <![endif]-->
 {% endblock %}
 
 {% block content %}

diff --git a/packages/govuk-frontend-review/src/views/layouts/layout.njk b/packages/govuk-frontend-review/src/views/layouts/layout.njk
@@ -11,9 +11,6 @@
 {% block bodyEnd %}
   {{ super() }}
   {% block scripts %}
-    <!--[if lt IE 9]>
-      <script src="/vendor/iframe-resizer/ie8.polyfils.min.js"></script>
-    <![endif]-->
     <script src="/vendor/iframe-resizer/iframeResizer.min.js"></script>
     <script>
       window.iFrameResize({}, '.js-component-preview')

diff --git a/packages/govuk-frontend/.eslintrc.js b/packages/govuk-frontend/.eslintrc.js
@@ -30,7 +30,7 @@ module.exports = {
       excludedFiles: ['**/*.test.mjs'],
       parser: '@typescript-eslint/parser',
       parserOptions: {
-        // Note: Allow ES6 for import/export syntax (although our code is ES3 for legacy browsers)
+        // Note: Allow ES6 for import/export syntax
         ecmaVersion: '2015',
         project: [resolve(__dirname, 'tsconfig.json')]
       },
@@ -41,7 +41,7 @@ module.exports = {
       extends: [
         'plugin:@typescript-eslint/recommended',
         'plugin:@typescript-eslint/recommended-requiring-type-checking',
-        'plugin:es-x/restrict-to-es3'
+        'plugin:es-x/restrict-to-es5'
       ],
       rules: {
         // Allow unknown `.prototype` members until ES6 classes

diff --git a/packages/govuk-frontend/src/govuk/all.mjs b/packages/govuk-frontend/src/govuk/all.mjs
@@ -1,5 +1,4 @@
 import { version } from './common/govuk-frontend-version.mjs'
-import { nodeListForEach } from './common/index.mjs'
 import Accordion from './components/accordion/accordion.mjs'
 import Button from './components/button/button.mjs'
 import CharacterCount from './components/character-count/character-count.mjs'
@@ -28,27 +27,27 @@ function initAll (config) {
   var $scope = config.scope instanceof HTMLElement ? config.scope : document
 
   var $accordions = $scope.querySelectorAll('[data-module="govuk-accordion"]')
-  nodeListForEach($accordions, function ($accordion) {
+  $accordions.forEach(function ($accordion) {
     new Accordion($accordion, config.accordion).init()
   })
 
   var $buttons = $scope.querySelectorAll('[data-module="govuk-button"]')
-  nodeListForEach($buttons, function ($button) {
+  $buttons.forEach(function ($button) {
     new Button($button, config.button).init()
   })
 
   var $characterCounts = $scope.querySelectorAll('[data-module="govuk-character-count"]')
-  nodeListForEach($characterCounts, function ($characterCount) {
+  $characterCounts.forEach(function ($characterCount) {
     new CharacterCount($characterCount, config.characterCount).init()
   })
 
   var $checkboxes = $scope.querySelectorAll('[data-module="govuk-checkboxes"]')
-  nodeListForEach($checkboxes, function ($checkbox) {
+  $checkboxes.forEach(function ($checkbox) {
     new Checkboxes($checkbox).init()
   })
 
   var $details = $scope.querySelectorAll('[data-module="govuk-details"]')
-  nodeListForEach($details, function ($detail) {
+  $details.forEach(function ($detail) {
     new Details($detail).init()
   })
 
@@ -65,12 +64,12 @@ function initAll (config) {
   }
 
   var $notificationBanners = $scope.querySelectorAll('[data-module="govuk-notification-banner"]')
-  nodeListForEach($notificationBanners, function ($notificationBanner) {
+  $notificationBanners.forEach(function ($notificationBanner) {
     new NotificationBanner($notificationBanner, config.notificationBanner).init()
   })
 
   var $radios = $scope.querySelectorAll('[data-module="govuk-radios"]')
-  nodeListForEach($radios, function ($radio) {
+  $radios.forEach(function ($radio) {
     new Radios($radio).init()
   })
 
@@ -81,7 +80,7 @@ function initAll (config) {
   }
 
   var $tabs = $scope.querySelectorAll('[data-module="govuk-tabs"]')
-  nodeListForEach($tabs, function ($tabs) {
+  $tabs.forEach(function ($tabs) {
     new Tabs($tabs).init()
   })
 }

diff --git a/packages/govuk-frontend/src/govuk/common/index.mjs b/packages/govuk-frontend/src/govuk/common/index.mjs
@@ -8,26 +8,6 @@
  * @module common/index
  */
 
-/**
- * TODO: Ideally this would be a NodeList.prototype.forEach polyfill
- * This seems to fail in IE8, requires more investigation.
- * See: https://github.com/imagitama/nodelist-foreach-polyfill
- *
- * @deprecated Will be made private in v5.0
- * @template {Node} ElementType
- * @param {NodeListOf<ElementType>} nodes - NodeList from querySelectorAll()
- * @param {(value: ElementType, index: number, nodes: NodeListOf<ElementType>) => void} callback - Callback function to run for each node
- * @returns {void}
- */
-export function nodeListForEach (nodes, callback) {
-  if (window.NodeList.prototype.forEach) {
-    return nodes.forEach(callback)
-  }
-  for (var i = 0; i < nodes.length; i++) {
-    callback.call(window, nodes[i], i, nodes)
-  }
-}
-
 /**
  * Used to generate a unique string, allows multiple instances of the component
  * without them conflicting with each other.

diff --git a/packages/govuk-frontend/src/govuk/common/index.unit.test.mjs b/packages/govuk-frontend/src/govuk/common/index.unit.test.mjs
@@ -1,6 +1,6 @@
 import { mergeConfigs, extractConfigByNamespace } from './index.mjs'
 
-// TODO: Write unit tests for `nodeListForEach` and `generateUniqueID`
+// TODO: Write unit tests for `generateUniqueID`
 
 describe('Common JS utilities', () => {
   describe('mergeConfigs', () => {

diff --git a/packages/govuk-frontend/src/govuk/common/normalise-dataset.mjs b/packages/govuk-frontend/src/govuk/common/normalise-dataset.mjs
@@ -1,8 +1,3 @@
-/* eslint-disable es-x/no-string-prototype-trim -- Polyfill imported */
-
-import '../vendor/polyfills/Element/prototype/dataset.mjs'
-import '../vendor/polyfills/String/prototype/trim.mjs'
-
 /**
  * Normalise string
  *

diff --git a/packages/govuk-frontend/src/govuk/components/accordion/accordion.mjs b/packages/govuk-frontend/src/govuk/components/accordion/accordion.mjs
@@ -1,14 +1,8 @@
-/* eslint-disable es-x/no-function-prototype-bind -- Polyfill imported */
-/* eslint-disable es-x/no-string-prototype-trim -- Polyfill imported */
-
-import { nodeListForEach, mergeConfigs, extractConfigByNamespace } from '../../common/index.mjs'
+import { mergeConfigs, extractConfigByNamespace } from '../../common/index.mjs'
 import { normaliseDataset } from '../../common/normalise-dataset.mjs'
 import { I18n } from '../../i18n.mjs'
 import '../../vendor/polyfills/Element/prototype/classList.mjs'
 import '../../vendor/polyfills/Element/prototype/closest.mjs'
-import '../../vendor/polyfills/Event.mjs' // addEventListener, event.target normalization and DOMContentLoaded
-import '../../vendor/polyfills/Function/prototype/bind.mjs'
-import '../../vendor/polyfills/String/prototype/trim.mjs'
 
 /**
  * Accordion translation defaults
@@ -212,7 +206,7 @@ Accordion.prototype.initSectionHeaders = function () {
   var $sections = this.$sections
 
   // Loop through sections
-  nodeListForEach($sections, function ($section, i) {
+  $sections.forEach(function ($section, i) {
     var $header = $section.querySelector('.' + $component.sectionHeaderClass)
     if (!$header) {
       return
@@ -385,7 +379,7 @@ Accordion.prototype.onShowOrHideAllToggle = function () {
   var nowExpanded = !this.checkIfAllSectionsOpen()
 
   // Loop through sections
-  nodeListForEach($sections, function ($section) {
+  $sections.forEach(function ($section) {
     $component.setExpanded(nowExpanded, $section)
     // Store the state in sessionStorage when a change is triggered
     $component.storeState($section)

diff --git a/packages/govuk-frontend/src/govuk/components/button/button.mjs b/packages/govuk-frontend/src/govuk/components/button/button.mjs
@@ -1,9 +1,5 @@
-/* eslint-disable es-x/no-function-prototype-bind -- Polyfill imported */
-
 import { mergeConfigs } from '../../common/index.mjs'
 import { normaliseDataset } from '../../common/normalise-dataset.mjs'
-import '../../vendor/polyfills/Event.mjs' // addEventListener, event.target normalization and DOMContentLoaded
-import '../../vendor/polyfills/Function/prototype/bind.mjs'
 
 var KEY_SPACE = 32
 var DEBOUNCE_TIMEOUT_IN_SECONDS = 1

diff --git a/packages/govuk-frontend/src/govuk/components/character-count/character-count.mjs b/packages/govuk-frontend/src/govuk/components/character-count/character-count.mjs
@@ -1,14 +1,8 @@
-/* eslint-disable es-x/no-date-now -- Polyfill imported */
-/* eslint-disable es-x/no-function-prototype-bind -- Polyfill imported */
-
 import { closestAttributeValue } from '../../common/closest-attribute-value.mjs'
 import { extractConfigByNamespace, mergeConfigs } from '../../common/index.mjs'
 import { normaliseDataset } from '../../common/normalise-dataset.mjs'
 import { I18n } from '../../i18n.mjs'
-import '../../vendor/polyfills/Date/now.mjs'
 import '../../vendor/polyfills/Element/prototype/classList.mjs'
-import '../../vendor/polyfills/Event.mjs' // addEventListener, event.target normalization and DOMContentLoaded
-import '../../vendor/polyfills/Function/prototype/bind.mjs'
 
 /**
  * Character count translation defaults