Merge pull request #4286 from alphagov/syntax-enabled

Allow ES2015+ supported features

packages/govuk-frontend/.eslintrc.js

@@ -35,12 +35,6 @@ module.exports = {
           }
         ],
 
-        // Turn off known code suggestions until support is confirmed
-        // e.g. Already supported ES2015+ features or via Babel transforms
-        '@typescript-eslint/prefer-includes': 'off',
-        '@typescript-eslint/prefer-nullish-coalescing': 'off',
-        '@typescript-eslint/prefer-optional-chain': 'off',
-
         // Check type support for template string implicit `.toString()`
         '@typescript-eslint/restrict-template-expressions': [
           'error',
@@ -53,10 +47,20 @@ module.exports = {
         // Babel transpiles ES2020 class fields
         'es-x/no-class-fields': 'off',
 
+        // ES modules include ES2016 '[].includes()' coverage
+        // https://browsersl.ist/#q=supports+es6-module+and+not+supports+array-includes
+        'es-x/no-array-prototype-includes': 'off',
+
+        // Babel transpiles ES2020 `??` nullish coalescing
+        'es-x/no-nullish-coalescing-operators': 'off',
+
         // ES modules include ES2017 'Object.entries()' coverage
         // https://browsersl.ist/#q=supports+es6-module+and+not+supports+object-entries
         'es-x/no-object-entries': 'off',
 
+        // Babel transpiles ES2020 optional chaining
+        'es-x/no-optional-chaining': 'off',
+
         // JSDoc blocks are mandatory in source code
         'jsdoc/require-jsdoc': [
           'error',

packages/govuk-frontend/src/govuk/all.mjs

@@ -48,7 +48,7 @@ function initAll(config) {
 
   // Allow the user to initialise GOV.UK Frontend in only certain sections of the page
   // Defaults to the entire document if nothing is set.
-  const $scope = config.scope || document
+  const $scope = config.scope ?? document
 
   components.forEach(([Component, config]) => {
     const $elements = $scope.querySelectorAll(

packages/govuk-frontend/src/govuk/common/index.mjs

@@ -126,7 +126,7 @@ export function extractConfigByNamespace(configObject, namespace) {
  * @returns {string | undefined} Fragment from URL, without the hash
  */
 export function getFragmentFromUrl(url) {
-  if (url.indexOf('#') === -1) {
+  if (!url.includes('#')) {
     return undefined
   }
 

packages/govuk-frontend/src/govuk/components/accordion/accordion.mjs

@@ -312,7 +312,7 @@ export class Accordion extends GOVUKFrontendComponent {
     $button.appendChild(this.getButtonPunctuationEl())
 
     // If summary content exists add to DOM in correct order
-    if ($summary && $summary.parentNode) {
+    if ($summary?.parentNode) {
       // Create a new `span` element and copy the summary line content from the
       // original `div` to the new `span`. This is because the summary line text
       // is now inside a button element, which can only contain phrasing

packages/govuk-frontend/src/govuk/components/character-count/character-count.mjs

@@ -128,7 +128,7 @@ export class CharacterCount extends GOVUKFrontendComponent {
     })
 
     // Determine the limit attribute (characters or words)
-    this.maxLength = this.config.maxwords || this.config.maxlength || Infinity
+    this.maxLength = this.config.maxwords ?? this.config.maxlength ?? Infinity
 
     this.$module = $module
     this.$textarea = $textarea
@@ -344,7 +344,7 @@ export class CharacterCount extends GOVUKFrontendComponent {
    */
   count(text) {
     if (this.config.maxwords) {
-      const tokens = text.match(/\S+/g) || [] // Matches consecutive non-whitespace chars
+      const tokens = text.match(/\S+/g) ?? [] // Matches consecutive non-whitespace chars
       return tokens.length
     }
 

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

@@ -187,7 +187,7 @@ export class ErrorSummary extends GOVUKFrontendComponent {
     }
 
     return (
-      document.querySelector(`label[for='${$input.getAttribute('id')}']`) ||
+      document.querySelector(`label[for='${$input.getAttribute('id')}']`) ??
       $input.closest('label')
     )
   }

packages/govuk-frontend/src/govuk/components/radios/radios.mjs

@@ -112,7 +112,7 @@ export class Radios extends GOVUKFrontendComponent {
     }
 
     const $target = document.getElementById(targetId)
-    if ($target && $target.classList.contains('govuk-radios__conditional')) {
+    if ($target?.classList.contains('govuk-radios__conditional')) {
       const inputIsChecked = $input.checked
 
       $input.setAttribute('aria-expanded', inputIsChecked.toString())

packages/govuk-frontend/src/govuk/components/tabs/tabs.mjs

@@ -126,7 +126,7 @@ export class Tabs extends GOVUKFrontendComponent {
    * @private
    */
   checkMode() {
-    if (this.mql && this.mql.matches) {
+    if (this.mql?.matches) {
       this.setup()
     } else {
       this.teardown()
@@ -158,7 +158,7 @@ export class Tabs extends GOVUKFrontendComponent {
     })
 
     // Show either the active tab according to the URL's hash or the first tab
-    const $activeTab = this.getTab(window.location.hash) || this.$tabs[0]
+    const $activeTab = this.getTab(window.location.hash) ?? this.$tabs[0]
 
     this.showTab($activeTab)
 
@@ -386,7 +386,7 @@ export class Tabs extends GOVUKFrontendComponent {
    */
   activateNextTab() {
     const $currentTab = this.getCurrentTab()
-    if (!$currentTab || !$currentTab.parentElement) {
+    if (!$currentTab?.parentElement) {
       return
     }
 
@@ -413,7 +413,7 @@ export class Tabs extends GOVUKFrontendComponent {
    */
   activatePreviousTab() {
     const $currentTab = this.getCurrentTab()
-    if (!$currentTab || !$currentTab.parentElement) {
+    if (!$currentTab?.parentElement) {
       return
     }
 

packages/govuk-frontend/src/govuk/errors/index.mjs

@@ -84,7 +84,7 @@ export class ElementError extends GOVUKFrontendError {
 
       // Append reason
       message += element
-        ? ` is not of type ${expectedType || 'HTMLElement'}`
+        ? ` is not of type ${expectedType ?? 'HTMLElement'}`
         : ' not found'
     }
 

packages/govuk-frontend/src/govuk/i18n.mjs

@@ -19,7 +19,7 @@ export class I18n {
     this.translations = translations
 
     // The locale to use for PluralRules and NumberFormat
-    this.locale = config.locale || document.documentElement.lang || 'en'
+    this.locale = config.locale ?? (document.documentElement.lang || 'en')
   }
 
   /**
@@ -42,7 +42,7 @@ export class I18n {
     // If the `count` option is set, determine which plural suffix is needed and
     // change the lookupKey to match. We check to see if it's numeric instead of
     // falsy, as this could legitimately be 0.
-    if (options && typeof options.count === 'number') {
+    if (typeof options?.count === 'number') {
       // Get the plural suffix
       lookupKey = `${lookupKey}.${this.getPluralSuffix(
         lookupKey,
@@ -242,10 +242,9 @@ export class I18n {
     // Look through the plural rules map to find which `pluralRule` is
     // appropriate for our current `locale`.
     for (const pluralRule in I18n.pluralRulesMap) {
-      for (const language of I18n.pluralRulesMap[pluralRule]) {
-        if (language === this.locale || language === localeShort) {
-          return pluralRule
-        }
+      const languages = I18n.pluralRulesMap[pluralRule]
+      if (languages.includes(this.locale) || languages.includes(localeShort)) {
+        return pluralRule
       }
     }
   }