Use createAll to initialise components in the Design System site

.browserslistrc

@@ -1,6 +1,9 @@
 # This list builds on the GOV.UK service manual's browser testing recommendations
 # https://www.gov.uk/service-manual/technology/designing-for-different-browsers-and-devices
 
+[javascripts]
+supports es6-module
+
 [stylesheets]
 > 0.1% in GB and not dead
 last 6 Chrome versions

babel.config.js

@@ -4,13 +4,23 @@
  * @type {import('@babel/core').ConfigFunction}
  */
 module.exports = function (api) {
-  const browserslistEnv = !api.env('test') ? 'production' : 'node'
+  const isBrowser = !api.env('test')
+
+  const browserslistEnv = isBrowser ? 'javascripts' : 'node'
 
   const presets = [
     [
       '@babel/preset-env',
       {
-        browserslistEnv
+        browserslistEnv,
+        // Apply bug fixes to avoid transforms
+        bugfixes: true,
+
+        // Apply smaller "loose" transforms for browsers
+        loose: isBrowser,
+
+        // Skip ES module transforms for browsers
+        modules: isBrowser ? false : 'auto'
       }
     ]
   ]

package.json

@@ -50,6 +50,7 @@
     "@metalsmith/permalinks": "^3.0.1",
     "@metalsmith/postcss": "^5.4.1",
     "@metalsmith/sass": "^1.10.0",
+    "@rollup/plugin-babel": "^6.0.4",
     "@rollup/plugin-commonjs": "^26.0.1",
     "@rollup/plugin-node-resolve": "^15.2.3",
     "@rollup/plugin-terser": "^0.4.4",

rollup.config.js

@@ -1,3 +1,4 @@
+const babel = require('@rollup/plugin-babel')
 const commonjs = require('@rollup/plugin-commonjs')
 const resolve = require('@rollup/plugin-node-resolve')
 const terser = require('@rollup/plugin-terser')
@@ -35,5 +36,11 @@ module.exports = defineConfig({
   ],
 
   // Input plugins
-  plugins: [resolve(), commonjs()]
+  plugins: [
+    resolve(),
+    commonjs(),
+    babel({
+      babelHelpers: 'bundled'
+    })
+  ]
 })

src/.eslintrc.js

@@ -9,10 +9,13 @@ module.exports = {
       extends: ['plugin:es-x/restrict-to-es2015', 'prettier'],
       parserOptions: {
         // Note: Allow ES2015 for import/export syntax
-        ecmaVersion: '2015'
+        ecmaVersion: 'latest'
       },
       plugins: ['es-x'],
       rules: {
+        // Babel transpiles ES2020 class fields
+        'es-x/no-class-fields': 'off',
+
         // JSDoc blocks are mandatory in source code
         'jsdoc/require-jsdoc': [
           'error',

src/javascripts/application.mjs

@@ -12,7 +12,7 @@ import {
 } from './components/cookie-functions.mjs'
 import CookiesPage from './components/cookies-page.mjs'
 import Copy from './components/copy.mjs'
-import Example from './components/example.mjs'
+import ExampleFrame from './components/example-frame.mjs'
 import Navigation from './components/navigation.mjs'
 import OptionsTable from './components/options-table.mjs'
 import Search from './components/search.mjs'
@@ -23,15 +23,11 @@ createAll(Button)
 createAll(NotificationBanner)
 createAll(SkipLink)
 
-// Initialise cookie banner
-const $cookieBanner = document.querySelector(
-  '[data-module="govuk-cookie-banner"]'
-)
-if ($cookieBanner) {
-  new CookieBanner($cookieBanner)
-}
+// Cookies and analytics
+createAll(CookieBanner)
+createAll(CookiesPage)
 
-// Initialise analytics if consent is given
+// Check for consent before initialising analytics
 const userConsent = getConsentCookie()
 if (userConsent && isValidConsentCookie(userConsent) && userConsent.analytics) {
   loadAnalytics()
@@ -41,44 +37,18 @@ if (userConsent && isValidConsentCookie(userConsent) && userConsent.analytics) {
   removeUACookies()
 }
 
-// Initialise example frames
-const $examples = document.querySelectorAll('[data-module="app-example-frame"]')
-$examples.forEach(($example) => {
-  new Example($example)
-})
-
-// Initialise tabs
-const $tabs = document.querySelectorAll('[data-module="app-tabs"]')
-$tabs.forEach(($tabs) => {
-  new AppTabs($tabs)
-})
-
+// Code examples
+createAll(ExampleFrame)
+createAll(AppTabs)
 // Do this after initialising tabs
+createAll(Copy)
 new OptionsTable()
 
-// Add copy to clipboard to code blocks inside tab containers
-const $codeBlocks = document.querySelectorAll('[data-module="app-copy"] pre')
-$codeBlocks.forEach(($codeBlock) => {
-  new Copy($codeBlock)
-})
-
 // Initialise mobile navigation
 new Navigation(document)
 
 // Initialise search
-const $searchContainer = document.querySelector('[data-module="app-search"]')
-if ($searchContainer) {
-  new Search($searchContainer)
-}
+createAll(Search)
 
 // Initialise back to top
-const $backToTop = document.querySelector('[data-module="app-back-to-top"]')
-if ($backToTop) {
-  new BackToTop($backToTop)
-}
-
-// Initialise cookie page
-const $cookiesPage = document.querySelector('[data-module="app-cookies-page"]')
-if ($cookiesPage) {
-  new CookiesPage($cookiesPage)
-}
+createAll(BackToTop)

src/javascripts/components/back-to-top.mjs

@@ -2,6 +2,8 @@
  * Website back to top link
  */
 class BackToTop {
+  static moduleName = 'app-back-to-top'
+
   /**
    * @param {Element} $module - HTML element
    */

src/javascripts/components/cookie-banner.mjs

@@ -11,6 +11,7 @@ const cookieConfirmationRejectSelector = '.js-cookie-banner-confirmation-reject'
  * Website cookie banner
  */
 class CookieBanner {
+  static moduleName = 'govuk-cookie-banner'
   /**
    * @param {Element} $module - HTML element
    */

src/javascripts/components/cookies-page.mjs

@@ -4,6 +4,7 @@ import { getConsentCookie, setConsentCookie } from './cookie-functions.mjs'
  * Website cookies page
  */
 class CookiesPage {
+  static moduleName = 'app-cookies-page'
   /**
    * @param {Element} $module - HTML element
    */

src/javascripts/components/copy.mjs

@@ -4,6 +4,8 @@ import ClipboardJS from 'clipboard'
  * Copy button for code examples
  */
 class Copy {
+  static moduleName = 'app-copy'
+
   /**
    * @param {Element} $module - HTML element
    */
@@ -18,6 +20,9 @@ class Copy {
 
     this.$module = $module
 
+    this.$pre = this.$module.querySelector('pre')
+    // TODO: Throw once GOV.UK Frontend exports its errors
+
     /** @type {number | null} */
     this.resetTimeoutId = null
 
@@ -29,11 +34,11 @@ class Copy {
     this.$status.className = 'govuk-visually-hidden'
     this.$status.setAttribute('aria-live', 'assertive')
 
-    this.$module.insertAdjacentElement('beforebegin', this.$status)
-    this.$module.insertAdjacentElement('beforebegin', this.$button)
+    this.$module.prepend(this.$status)
+    this.$module.prepend(this.$button)
 
     const $clipboard = new ClipboardJS(this.$button, {
-      target: (trigger) => trigger.nextElementSibling
+      target: () => this.$pre
     })
 
     $clipboard.on('success', (event) => this.successAction(event))

src/javascripts/components/example.mjs → src/javascripts/components/example-frame.mjs

@@ -8,7 +8,8 @@ import iFrameResize from 'iframe-resizer/js/iframeResizer.js'
  *
  * @param {Element} $module - HTML element to use for example
  */
-class Example {
+class ExampleFrame {
+  static moduleName = 'app-example-frame'
   /**
    * @param {Element} $module - HTML element
    */
@@ -39,4 +40,4 @@ class Example {
   }
 }
 
-export default Example
+export default ExampleFrame

src/javascripts/components/search.mjs

@@ -37,6 +37,7 @@ const DEBOUNCE_TIME_TO_WAIT = () => {
  * Website search
  */
 class Search {
+  static moduleName = 'app-search'
   /**
    * @param {Element} $module - HTML element
    */

src/javascripts/components/tabs.mjs

@@ -9,6 +9,8 @@
  * - panels - the content that is shown/hidden/switched; same across all breakpoints
  */
 class AppTabs {
+  static moduleName = 'app-tabs'
+
   /**
    * @param {Element} $module - HTML element
    */