Add Babel to transform ES2020 public and static class fields

docs/contributing/coding-standards/js.md

@@ -40,7 +40,9 @@ export class Example {
  }
 
  // Code goes here
- const $module = this.$module
+ this.$module.addEventListener('click', () => {
+ // ...
+ })
  }
 }
 ```

docs/examples/webpack/babel.config.js

@@ -4,18 +4,25 @@
  * @type {import('@babel/core').ConfigFunction}
  */
 module.exports = function (api) {
- const browserslistEnv = !api.env('test')
- ? 'javascripts'
- : 'node'
+ const isBrowser = !api.env('test')
+
+ // Apply Browserslist environment for supported targets
+ // https://github.com/browserslist/browserslist#configuring-for-different-environments
+ const browserslistEnv = isBrowser ? 'javascripts' : 'node'
 
  return {
  presets: [
  ['@babel/preset-env', {
  browserslistEnv,
- loose: browserslistEnv === 'javascripts',
 
- // Transform ES modules for Node.js
- modules: browserslistEnv === 'node' ? 'auto' : false
+ // 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'
  }]
  ]
  }

packages/govuk-frontend-review/tasks/watch.mjs

@@ -30,7 +30,7 @@ export const watch = (options) => gulp.parallel(
  */
  task.name('compile:scss watch', () =>
  gulp.watch([
- `${slash(paths.root)}/sassdoc.config.yaml`,
+ `${slash(paths.app)}/sassdoc.config.yaml`,
  `${slash(paths.app)}/src/**/*.scss`,
  `${slash(paths.package)}/dist/govuk/**/*.scss`
  ], styles(options))
@@ -41,7 +41,7 @@ export const watch = (options) => gulp.parallel(
  */
  task.name('compile:js watch', () =>
  gulp.watch([
- `${slash(paths.root)}/typedoc.config.js`,
+ `${slash(paths.app)}/typedoc.config.js`,
  `${slash(paths.package)}/dist/govuk/**/*.mjs`
  ], scripts(options))
  )

packages/govuk-frontend-review/typedoc.config.js

@@ -16,8 +16,9 @@ module.exports = {
  tsconfig: packageResolveToPath('govuk-frontend/tsconfig.build.json'),
  out: './dist/docs/jsdoc',
 
- // Ignore warnings about CharacterCountTranslations using I18n (@private)
+ // Ignore warnings about class fields using I18n (@private)
  intentionallyNotExported: [
+ 'I18n',
  'TranslationPluralForms'
  ]
 }

packages/govuk-frontend/.eslintrc.js

@@ -38,6 +38,9 @@ module.exports = {
  }
  ],
 
+ // Babel transpiles ES2020 class fields
+ 'es-x/no-class-fields': 'off',
+
  // JSDoc blocks are mandatory
  'jsdoc/require-jsdoc': [
  'error', {

packages/govuk-frontend/babel.config.js

@@ -0,0 +1,29 @@
+/**
+ * Babel config
+ *
+ * @type {import('@babel/core').ConfigFunction}
+ */
+module.exports = function (api) {
+ const isBrowser = !api.env('test')
+
+ // Apply Browserslist environment for supported targets
+ // https://github.com/browserslist/browserslist#configuring-for-different-environments
+ const browserslistEnv = isBrowser ? 'javascripts' : 'node'
+
+ return {
+ presets: [
+ ['@babel/preset-env', {
+ 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'
+ }]
+ ]
+ }
+}

packages/govuk-frontend/package.json

@@ -53,6 +53,9 @@
  "dev": "gulp dev --color"
  },
  "devDependencies": {
+ "@babel/core": "^7.22.8",
+ "@babel/preset-env": "^7.22.7",
+ "@rollup/plugin-babel": "^6.0.3",
  "@rollup/plugin-replace": "^5.0.2",
  "@rollup/plugin-terser": "^0.4.3",
  "autoprefixer": "^10.4.14",

packages/govuk-frontend/rollup.publish.config.mjs

@@ -1,3 +1,4 @@
+import { babel } from '@rollup/plugin-babel'
 import replace from '@rollup/plugin-replace'
 import { pkg } from 'govuk-frontend-config'
 import { componentPathToModuleName } from 'govuk-frontend-lib/names'
@@ -61,6 +62,9 @@ export default defineConfig(({ i: input }) => ({
 
  // Add GOV.UK Frontend release version
  development: pkg.version
+ }),
+ babel({
+ babelHelpers: 'bundled'
  })
  ]
 }))

packages/govuk-frontend/rollup.release.config.mjs

@@ -1,3 +1,4 @@
+import { babel } from '@rollup/plugin-babel'
 import replace from '@rollup/plugin-replace'
 import terser from '@rollup/plugin-terser'
 import * as GOVUKFrontend from 'govuk-frontend/src/govuk/all.mjs'
@@ -53,6 +54,9 @@ export default defineConfig(({ i: input }) => ({
 
  // Add GOV.UK Frontend release version
  development: pkg.version
+ }),
+ babel({
+ babelHelpers: 'bundled'
  })
  ]
 }))