style: align ESLint with GOV.UK Frontend (#1129)

* fix(docs): use ES module file extensions * style: align ESLint configs with GOV.UK Frontend * style: run npm script `lint:js -- --fix` * style: fix package require order * style: add ESLint comments where necessary * fix: avoid incompatible syntax * style: fix ESLint unexpected expressions * style: fix ESLint not defined * fix: resolve missing packages * chore: remove unused code * style: misc ESLint fixes * style: avoid calling expect conditionally * fix(date picker): enable skipped tests
ministryofjustice · Feb 3, 2025 · f2a9acb · f2a9acb
1 parent 9d3edc1
commit f2a9acb
Show file tree

Hide file tree

Showing 43 changed files with 3,328 additions and 447 deletions.
diff --git a/.eleventy.js b/.eleventy.js
@@ -1,17 +1,17 @@
-const beautifyHTML = require('js-beautify').html
+const { execSync } = require('child_process')
 const fs = require('fs')
+const path = require('path')
+
+const eleventyNavigationPlugin = require('@11ty/eleventy-navigation')
+const matter = require('gray-matter')
 const hljs = require('highlight.js')
+const beautifyHTML = require('js-beautify').html
 const markdownIt = require('markdown-it')
 const markdownItAnchor = require('markdown-it-anchor')
-const matter = require('gray-matter')
-const mojFilters = require('./src/moj/filters/all')
 const nunjucks = require('nunjucks')
-const path = require('path')
-const { execSync } = require('child_process')
+
 const releasePackage = require('./package/package.json')
-const sass = require('sass')
-const esbuild = require('esbuild')
-const eleventyNavigationPlugin = require('@11ty/eleventy-navigation')
+const mojFilters = require('./src/moj/filters/all')
 
 module.exports = function (eleventyConfig) {
   eleventyConfig.addPlugin(eleventyNavigationPlugin)
@@ -116,7 +116,7 @@ module.exports = function (eleventyConfig) {
   )
 
   eleventyConfig.addShortcode('lastUpdated', function (component) {
-    if (process.env.ENV == 'staging') return ''
+    if (process.env.ENV === 'staging') return ''
 
     const dirPath = path.join(__dirname, 'src/moj/components', component)
     const [commit, lastUpdated] = execSync(
@@ -281,23 +281,22 @@ module.exports = function (eleventyConfig) {
   )
 
   eleventyConfig.addFilter('getScriptPath', function (inputPath) {
-    return inputPath.split('/').slice(1, -1).join('/') + '/script.js'
+    return `${inputPath.split('/').slice(1, -1).join('/')}/script.js`
   })
 
   eleventyConfig.addFilter('getStylesPath', function (inputPath) {
-    return inputPath.split('/').slice(1, -1).join('/') + '/style.css'
+    return `${inputPath.split('/').slice(1, -1).join('/')}/style.css`
   })
 
   eleventyConfig.addFilter('rev', (filepath) => {
-    if (process.env.ENV == 'production' || process.env.ENV == 'staging') {
+    if (process.env.ENV === 'production' || process.env.ENV === 'staging') {
       const manifest = JSON.parse(
         fs.readFileSync('public/assets/rev-manifest.json', 'utf8')
       )
       const revision = manifest[filepath]
       return `/${revision || filepath}`
-    } else {
-      return `/${filepath}`
     }
+    return `/${filepath}`
   })
 
   // Rebuild when a change is made to a component template file
@@ -313,7 +312,7 @@ module.exports = function (eleventyConfig) {
     // Reload once assets have been rebuilt by gulp
     watch: [
       'public/assets/stylesheets/application.css',
-      'public/assets/javascript/all.js'
+      'public/assets/javascript/application.js'
     ],
     // Show local network IP addresses for device testing
     showAllHosts: true,

diff --git a/.eslintrc.js b/.eslintrc.js
@@ -1,31 +1,42 @@
 module.exports = {
-  env: {
-    browser: 1
-  },
   extends: ['standard', 'prettier'],
   globals: {
-    MOJFrontend: 'readonly',
-    $: 'readonly'
+    $: 'readonly',
+    jQuery: 'readonly',
+    MOJFrontend: 'readonly'
   },
-  ignorePatterns: ['package/**/*', 'node_modules', 'node_modules/.*'],
+  ignorePatterns: [
+    '**/vendor/**',
+    'package/**',
+
+    // Enable dotfile linting
+    '!.*',
+    'node_modules',
+    'node_modules/.*'
+  ],
   overrides: [
     {
       extends: [
         'eslint:recommended',
         'plugin:import/recommended',
-        // 'plugin:jest/style',
-        // 'plugin:jest-dom/recommended',
-        // 'plugin:jsdoc/recommended-typescript-flavor',
+        'plugin:jest/style',
+        'plugin:jest-dom/recommended',
+        'plugin:jsdoc/recommended-typescript-flavor',
         'plugin:n/recommended',
         'plugin:promise/recommended',
         'prettier'
       ],
-      files: ['**/*.{cjs,js,mjs}'],
+      files: [
+        '**/*.{cjs,js,mjs}',
+
+        // Check markdown `*.md` contains valid code blocks
+        // https://www.npmjs.com/package/eslint-plugin-markdown#user-content-advanced-configuration
+        '**/*.md/*.{cjs,js,mjs}'
+      ],
       parserOptions: {
         ecmaVersion: 'latest'
       },
-      // plugins: ['import', 'jsdoc', 'n', 'promise', 'jest', 'jest-dom'],
-      plugins: ['import', 'jsdoc', 'n', 'promise'],
+      plugins: ['import', 'jsdoc', 'n', 'promise', 'jest', 'jest-dom'],
       rules: {
         // Check import or require statements are A-Z ordered
         'import/order': [
@@ -56,14 +67,20 @@ module.exports = {
         // JSDoc blocks are optional by default
         'jsdoc/require-jsdoc': 'off',
 
+        // Require hyphens before param description
+        // Aligns with TSDoc style: https://tsdoc.org/pages/tags/param/
+        'jsdoc/require-hyphen-before-param-description': 'warn',
+
         // JSDoc @param required in (optional) blocks but
         // @param description is not necessary by default
         'jsdoc/require-param-description': 'off',
-        'jsdoc/require-param': 'error',
+        'jsdoc/require-param-type': 'error',
+        'jsdoc/require-param': 'off',
 
-        // Require hyphens before param description
-        // Aligns with TSDoc style: https://tsdoc.org/pages/tags/param/
-        'jsdoc/require-hyphen-before-param-description': 'warn',
+        // JSDoc @returns is optional
+        'jsdoc/require-returns-description': 'off',
+        'jsdoc/require-returns-type': 'off',
+        'jsdoc/require-returns': 'off',
 
         // Maintain new line after description
         'jsdoc/tag-lines': [
@@ -87,14 +104,10 @@ module.exports = {
         'no-multi-assign': 'error'
       },
       settings: {
-        // jsdoc: {
-        //   // Allows us to use type declarations that exist in our dependencies
-        //   mode: 'typescript',
-        //   tagNamePreference: {
-        //     // TypeDoc doesn't understand '@abstract' but '@virtual'
-        //     abstract: 'virtual'
-        //   }
-        // }
+        jsdoc: {
+          // Allows us to use type declarations that exist in our dependencies
+          mode: 'typescript'
+        }
       }
     },
     {
@@ -116,10 +129,12 @@ module.exports = {
       }
     },
     {
-      files: ['**/*.spec.{cjs,js,mjs}'],
+      files: ['**/*.spec.{cjs,js,mjs}', 'jest.config.*', 'jest.setup.*'],
+      extends: ['plugin:jest/recommended', 'plugin:jest/style'],
       env: {
-        jest: true
-      }
+        'jest/globals': true
+      },
+      plugins: ['jest']
     },
     {
       // Add plugin for markdown `*.md` code blocks. Its config is in the new
@@ -130,11 +145,15 @@ module.exports = {
       processor: 'markdown/markdown'
     },
     {
-      // Check markdown `*.md` contains valid code blocks
-      // https://www.npmjs.com/package/eslint-plugin-markdown#user-content-advanced-configuration
-      files: ['**/*.md/*.{cjs,js,mjs}'],
+      files: [
+        '**/assets/javascript/**/*.{cjs,js,mjs}',
+        '**/docs/examples/**/*.{cjs,js,mjs}',
+        '**/*.md/*.{cjs,js,mjs}'
+      ],
+      env: {
+        browser: true
+      },
       rules: {
-        quotes: ['error', 'single'],
         // Ignore unused example code
         'no-new': 'off',
         'no-undef': 'off',
@@ -145,14 +164,8 @@ module.exports = {
         // Ignore paths to example modules
         'import/no-unresolved': 'off',
         'n/no-missing-import': 'off'
-      },
-      parserOptions: {
-        ecmaVersion: 'latest'
       }
     }
   ],
-  parserOptions: {
-    // project: './tsconfig.json'
-  },
   root: true
 }
diff --git a/docs/_data/env.js b/docs/_data/env.js
@@ -1,5 +1,5 @@
 module.exports = function () {
   return {
-    isStaging: process.env.ENV == 'staging' || false
+    isStaging: process.env.ENV === 'staging' || false
   }
 }
diff --git a/docs/_includes/layouts/base.njk b/docs/_includes/layouts/base.njk
@@ -47,7 +47,7 @@
         async></script>
 
         <script type="module" src="{{ 'assets/javascript/jquery.js' | rev | url }}"></script>
-        <script type="module" src="{{ 'assets/javascript/all.js' | rev | url }}"></script>
+        <script type="module" src="{{ 'assets/javascript/application.js' | rev | url }}"></script>
     </head>
     <body class="govuk-template__body">
         <!-- Google Tag Manager (noscript) -->
@@ -58,7 +58,7 @@
         {% block body %}
            <div>
         {% include "./partials/header.njk" %}
-        
+
         <div class="app-layout">
             <div id="sidebar" class="app-layout__sidebar">
                 {% include "./partials/side-navigation.njk" %}
@@ -75,9 +75,8 @@
         </div>
 
         {% include "./partials/footer.njk" %}
-      </div> 
+      </div>
         {% endblock %}
         {% block pageScripts %}{% endblock %}
     </body>
 </html>
-
diff --git a/docs/assets/javascript/all.js → docs/assets/javascript/application.mjs b/docs/assets/javascript/all.js → docs/assets/javascript/application.mjs
@@ -1,15 +1,17 @@
-import { initAll as initGOVUKFrontend } from 'govuk-frontend/dist/govuk/all.mjs'
-import MOJFrontend from '../../../package/moj/all.js'
+/* eslint-disable no-new */
+
+import * as GOVUKFrontend from 'govuk-frontend'
 
-import Cookies from './cookies'
-import Copy from './copy'
-import Tabs from './tabs'
-import IFrameResizer from './iframe-resizer.js'
+import MOJFrontend from '../../../package/moj/all.js'
 
-import MenuToggle from './menu-toggle.js'
-import CollapsibleNav from './collapsible-nav.js'
+import CollapsibleNav from './collapsible-nav.mjs'
+import Cookies from './cookies.mjs'
+import Copy from './copy.mjs'
+import IFrameResizer from './iframe-resizer.mjs'
+import MenuToggle from './menu-toggle.mjs'
+import Tabs from './tabs.mjs'
 
-initGOVUKFrontend()
+GOVUKFrontend.initAll()
 MOJFrontend.initAll()
 
 $(function () {
@@ -30,5 +32,5 @@ $(function () {
 })
 
 window.MOJFrontend = MOJFrontend
-customElements.define('moj-menu-toggle', MenuToggle)
-customElements.define('moj-collapsible-nav', CollapsibleNav)
+window.customElements.define('moj-menu-toggle', MenuToggle)
+window.customElements.define('moj-collapsible-nav', CollapsibleNav)
diff --git a/docs/assets/javascript/collapsible-nav.js → docs/assets/javascript/collapsible-nav.mjs b/docs/assets/javascript/collapsible-nav.js → docs/assets/javascript/collapsible-nav.mjs
diff --git a/docs/assets/javascript/cookies.js → docs/assets/javascript/cookies.mjs b/docs/assets/javascript/cookies.js → docs/assets/javascript/cookies.mjs
@@ -3,7 +3,7 @@ function Cookies($module) {
 }
 
 Cookies.prototype.init = function () {
-  let $module = this.$module
+  const $module = this.$module
   if (!$module) {
     return
   }
@@ -27,10 +27,6 @@ Cookies.prototype.init = function () {
 Cookies.prototype.load = function (config) {
   if (config.analytics) {
     window.dataLayer = window.dataLayer || []
-    function gtag() {
-      dataLayer.push(arguments)
-    }
-
     gtag('js', new Date())
     gtag('config', 'G-VTGX4YLSVL')
   } else {
@@ -60,4 +56,8 @@ Cookies.prototype.reject = function () {
   window.location.reload()
 }
 
+function gtag() {
+  dataLayer.push(arguments)
+}
+
 export default Cookies
diff --git a/docs/assets/javascript/copy.js → docs/assets/javascript/copy.mjs b/docs/assets/javascript/copy.js → docs/assets/javascript/copy.mjs
@@ -5,11 +5,11 @@ function Copy($module) {
 }
 
 Copy.prototype.init = function () {
-  let $module = this.$module
+  const $module = this.$module
   if (!$module) {
     return
   }
-  let $button = document.createElement('button')
+  const $button = document.createElement('button')
   $button.className = 'app-copy-button js-copy-button'
   $button.setAttribute('aria-live', 'assertive')
   $button.textContent = 'Copy code'

diff --git a/docs/assets/javascript/iframe-resizer.js → docs/assets/javascript/iframe-resizer.mjs b/docs/assets/javascript/iframe-resizer.js → docs/assets/javascript/iframe-resizer.mjs
@@ -78,7 +78,7 @@ export default class IFrameResizer {
       const elements = body.getElementsByTagName('*')
 
       let maxHeight = html.offsetHeight
-      let padding = 30
+      const padding = 30
 
       // Check each element's bottom edge position
       for (const element of elements) {

diff --git a/docs/assets/javascript/menu-toggle.js → docs/assets/javascript/menu-toggle.mjs b/docs/assets/javascript/menu-toggle.js → docs/assets/javascript/menu-toggle.mjs
@@ -45,7 +45,7 @@ export default class MenuToggle extends HTMLElement {
   onresize(event) {
     // Check if the window width has changed - prevents resize events triggered
     // by scrolling on mobile browsers
-    if (window.innerWidth != this.windowWidth) {
+    if (window.innerWidth !== this.windowWidth) {
       this.windowWidth = window.innerWidth
       this.setState()
     }