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

Remove IE8-10 JavaScript polyfills, helpers, config

.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

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()
   })
 }

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.

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', () => {

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
  *

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)

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

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

src/govuk/components/checkboxes/checkboxes.mjs

@@ -1,9 +1,4 @@
-/* eslint-disable es-x/no-function-prototype-bind -- Polyfill imported */
-
-import { nodeListForEach } from '../../common/index.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'
 
 /**
  * Checkboxes component
@@ -52,7 +47,7 @@ Checkboxes.prototype.init = function () {
   var $module = this.$module
   var $inputs = this.$inputs
 
-  nodeListForEach($inputs, function ($input) {
+  $inputs.forEach(function ($input) {
     var targetId = $input.getAttribute('data-aria-controls')
 
     // Skip checkboxes without data-aria-controls attributes, or where the
@@ -91,7 +86,7 @@ Checkboxes.prototype.init = function () {
  * @deprecated Will be made private in v5.0
  */
 Checkboxes.prototype.syncAllConditionalReveals = function () {
-  nodeListForEach(this.$inputs, this.syncConditionalRevealWithInputState.bind(this))
+  this.$inputs.forEach(this.syncConditionalRevealWithInputState.bind(this))
 }
 
 /**
@@ -135,7 +130,7 @@ Checkboxes.prototype.unCheckAllInputsExcept = function ($input) {
     'input[type="checkbox"][name="' + $input.name + '"]'
   )
 
-  nodeListForEach(allInputsWithSameName, function ($inputWithSameName) {
+  allInputsWithSameName.forEach(function ($inputWithSameName) {
     var hasSameFormOwner = ($input.form === $inputWithSameName.form)
     if (hasSameFormOwner && $inputWithSameName !== $input) {
       $inputWithSameName.checked = false
@@ -162,7 +157,7 @@ Checkboxes.prototype.unCheckExclusiveInputs = function ($input) {
     'input[data-behaviour="exclusive"][type="checkbox"][name="' + $input.name + '"]'
   )
 
-  nodeListForEach(allInputsWithSameNameAndExclusiveBehaviour, function ($exclusiveInput) {
+  allInputsWithSameNameAndExclusiveBehaviour.forEach(function ($exclusiveInput) {
     var hasSameFormOwner = ($input.form === $exclusiveInput.form)
     if (hasSameFormOwner) {
       $exclusiveInput.checked = false

src/govuk/components/details/details.mjs

@@ -1,14 +1,10 @@
-/* eslint-disable es-x/no-function-prototype-bind -- Polyfill imported */
-
 /**
  * JavaScript 'polyfill' for HTML5's <details> and <summary> elements
  * and 'shim' to add accessiblity enhancements for all browsers
  *
  * http://caniuse.com/#feat=details
  */
 import { generateUniqueID } from '../../common/index.mjs'
-import '../../vendor/polyfills/Event.mjs' // addEventListener, event.target normalization and DOMContentLoaded
-import '../../vendor/polyfills/Function/prototype/bind.mjs'
 
 var KEY_ENTER = 13
 var KEY_SPACE = 32

src/govuk/components/error-summary/error-summary.mjs

@@ -1,10 +1,6 @@
-/* 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/Element/prototype/closest.mjs'
-import '../../vendor/polyfills/Event.mjs' // addEventListener, event.target normalization and DOMContentLoaded
-import '../../vendor/polyfills/Function/prototype/bind.mjs'
 
 /**
  * JavaScript enhancements for the ErrorSummary

src/govuk/components/header/header.mjs

@@ -1,8 +1,3 @@
-/* eslint-disable es-x/no-function-prototype-bind -- Polyfill imported */
-
-import '../../vendor/polyfills/Event.mjs'
-import '../../vendor/polyfills/Function/prototype/bind.mjs'
-
 /**
  * Header component
  *

src/govuk/components/notification-banner/notification-banner.mjs

@@ -1,6 +1,5 @@
 import { mergeConfigs } from '../../common/index.mjs'
 import { normaliseDataset } from '../../common/normalise-dataset.mjs'
-import '../../vendor/polyfills/Event.mjs' // addEventListener, event.target normalization and DOMContentLoaded
 
 /**
  * Notification Banner component

src/govuk/components/radios/radios.mjs

@@ -1,9 +1,4 @@
-/* eslint-disable es-x/no-function-prototype-bind -- Polyfill imported */
-
-import { nodeListForEach } from '../../common/index.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'
 
 /**
  * Radios component
@@ -52,7 +47,7 @@ Radios.prototype.init = function () {
   var $module = this.$module
   var $inputs = this.$inputs
 
-  nodeListForEach($inputs, function ($input) {
+  $inputs.forEach(function ($input) {
     var targetId = $input.getAttribute('data-aria-controls')
 
     // Skip radios without data-aria-controls attributes, or where the
@@ -91,7 +86,7 @@ Radios.prototype.init = function () {
  * @deprecated Will be made private in v5.0
  */
 Radios.prototype.syncAllConditionalReveals = function () {
-  nodeListForEach(this.$inputs, this.syncConditionalRevealWithInputState.bind(this))
+  this.$inputs.forEach(this.syncConditionalRevealWithInputState.bind(this))
 }
 
 /**
@@ -146,7 +141,7 @@ Radios.prototype.handleClick = function (event) {
   var $clickedInputForm = $clickedInput.form
   var $clickedInputName = $clickedInput.name
 
-  nodeListForEach($allInputs, function ($input) {
+  $allInputs.forEach(function ($input) {
     var hasSameFormOwner = $input.form === $clickedInputForm
     var hasSameName = $input.name === $clickedInputName
 

src/govuk/components/skip-link/skip-link.mjs

@@ -1,8 +1,4 @@
-/* eslint-disable es-x/no-function-prototype-bind -- Polyfill imported */
-
 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'
 
 /**
  * Skip link component

src/govuk/components/tabs/tabs.mjs

@@ -1,11 +1,4 @@
-/* eslint-disable es-x/no-function-prototype-bind -- Polyfill imported */
-
-import { nodeListForEach } from '../../common/index.mjs'
 import '../../vendor/polyfills/Element/prototype/classList.mjs'
-import '../../vendor/polyfills/Element/prototype/nextElementSibling.mjs'
-import '../../vendor/polyfills/Element/prototype/previousElementSibling.mjs'
-import '../../vendor/polyfills/Event.mjs' // addEventListener, event.target normalization and DOMContentLoaded
-import '../../vendor/polyfills/Function/prototype/bind.mjs'
 
 /**
  * Tabs component
@@ -110,11 +103,11 @@ Tabs.prototype.setup = function () {
 
   $tabList.setAttribute('role', 'tablist')
 
-  nodeListForEach($tabListItems, function ($item) {
+  $tabListItems.forEach(function ($item) {
     $item.setAttribute('role', 'presentation')
   })
 
-  nodeListForEach($tabs, function ($tab) {
+  $tabs.forEach(function ($tab) {
     // Set HTML attributes
     $component.setAttributes($tab)
 
@@ -156,11 +149,11 @@ Tabs.prototype.teardown = function () {
 
   $tabList.removeAttribute('role')
 
-  nodeListForEach($tabListItems, function ($item) {
+  $tabListItems.forEach(function ($item) {
     $item.removeAttribute('role')
   })
 
-  nodeListForEach($tabs, function ($tab) {
+  $tabs.forEach(function ($tab) {
     // Remove events
     $tab.removeEventListener('click', $component.boundTabClick, true)
     $tab.removeEventListener('keydown', $component.boundTabKeydown, true)