[SPIKE] Configure Babel to add core-js polyfills

babel.config.js

@@ -7,13 +7,7 @@ module.exports = function (api) {
  api.cache.forever()
 
  return {
- presets: [
- [
- '@babel/preset-env',
- {
- browserslistEnv: 'node'
- }
- ]
- ]
+ browserslistEnv: 'node',
+ presets: ['@babel/preset-env']
  }
 }

docs/examples/webpack/babel.config.js

@@ -12,12 +12,11 @@ module.exports = function (api) {
  const browserslistEnv = isBrowser ? 'javascripts' : 'node'
 
  return {
+ browserslistEnv,
  presets: [
  [
  '@babel/preset-env',
  {
- browserslistEnv,
-
  // Apply bug fixes to avoid transforms
  bugfixes: true,
 

packages/govuk-frontend/.browserslistrc

@@ -3,6 +3,7 @@
 
 [javascripts]
 supports es6-module
+not OperaMobile > 0
 
 [stylesheets]
 > 0.1% in GB and not dead

packages/govuk-frontend/babel.config.js

@@ -1,9 +1,13 @@
+const { pkg } = require('@govuk-frontend/config')
+
 /**
  * Babel config
  *
  * @type {import('@babel/core').ConfigFunction}
  */
 module.exports = function (api) {
+ const isProduction = !api.env('development')
+
  // Assume browser environment via Rollup plugin
  const isBrowser = api.caller(
  (caller) => caller?.name === '@rollup/plugin-babel'
@@ -14,6 +18,7 @@ module.exports = function (api) {
  const browserslistEnv = isBrowser ? 'javascripts' : 'node'
 
  return {
+ browserslistEnv,
  generatorOpts: {
  shouldPrintComment(comment) {
  if (!isBrowser || comment.includes('* @preserve')) {
@@ -35,12 +40,55 @@ module.exports = function (api) {
  return !isPrivate && isDocumentation
  }
  },
+ plugins: [
+ [
+ 'polyfill-corejs3',
+ {
+ // Add logging for required polyfills
+ debug: isProduction,
+
+ // Browser support polyfills to exclude
+ exclude: [
+ // Ignore various fixes in supported features
+ // https://github.com/zloirock/core-js/blob/v3/packages/core-js-compat/src/data.mjs
+ 'es.array.includes',
+ 'es.array.iterator',
+ 'es.array.push',
+ 'es.regexp.exec',
+ 'es.regexp.to-string',
+ 'es.string.includes',
+ 'es.string.match',
+ 'es.string.replace',
+ 'es.string.trim',
+
+ // ES2022 Error cause is unused
+ // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Error/cause
+ 'es.error.cause',
+
+ // DOM collection iteration is unnecessary with `Array.from()`
+ // see https://github.com/zloirock/core-js/issues/1003
+ 'web.dom-collections.iterator',
+
+ // WHATWG URL constructor `undefined` base fix is unnecessary
+ // https://bugs.webkit.org/show_bug.cgi?id=216841
+ // https://github.com/zloirock/core-js/commit/0ef4be7352e900dfa6f1eda27de22f7974576531
+ 'web.url',
+ 'web.url-search-params',
+ 'web.url-search-params.delete',
+ 'web.url-search-params.has',
+ 'web.url-search-params.size'
+ ],
+
+ // Replace unsupported code with polyfills
+ method: 'usage-global',
+ version: pkg.devDependencies['core-js']
+ }
+ ]
+ ],
  presets: [
  [
  '@babel/preset-env',
  {
- browserslistEnv,
-
  // Apply bug fixes to avoid transforms
  bugfixes: true,
 

packages/govuk-frontend/package.json

@@ -68,9 +68,13 @@
  "@govuk-frontend/lib": "*",
  "@govuk-frontend/tasks": "*",
  "@rollup/plugin-babel": "^6.0.4",
+ "@rollup/plugin-commonjs": "^25.0.7",
+ "@rollup/plugin-node-resolve": "^15.2.3",
  "@rollup/plugin-replace": "^5.0.5",
  "@rollup/plugin-terser": "^0.4.4",
  "autoprefixer": "^10.4.17",
+ "babel-plugin-polyfill-corejs3": "^0.9.0",
+ "core-js": "^3.36.0",
  "cssnano": "^6.0.3",
  "cssnano-preset-default": "^6.0.1",
  "govuk-prototype-kit": "^13.16.0",

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

@@ -1,5 +1,7 @@
 import config from '@govuk-frontend/config'
 import { babel } from '@rollup/plugin-babel'
+import commonjs from '@rollup/plugin-commonjs'
+import resolve from '@rollup/plugin-node-resolve'
 import replace from '@rollup/plugin-replace'
 import { defineConfig } from 'rollup'
 
@@ -54,15 +56,23 @@ export default defineConfig(({ i: input }) => ({
  * Input plugins
  */
  plugins: [
+ resolve({
+ browser: true
+ }),
  replace({
  include: '**/common/govuk-frontend-version.mjs',
  preventAssignment: true,
 
  // Add GOV.UK Frontend release version
  development: config.version
  }),
+ commonjs({
+ requireReturnsDefault: 'preferred',
+ defaultIsModuleExports: true
+ }),
  babel({
- babelHelpers: 'bundled'
+ babelHelpers: 'bundled',
+ exclude: '**/node_modules/**'
  })
  ]
 }))

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

@@ -1,5 +1,7 @@
 import config from '@govuk-frontend/config'
 import { babel } from '@rollup/plugin-babel'
+import commonjs from '@rollup/plugin-commonjs'
+import resolve from '@rollup/plugin-node-resolve'
 import replace from '@rollup/plugin-replace'
 import terser from '@rollup/plugin-terser'
 import * as GOVUKFrontend from 'govuk-frontend/src/govuk/all.mjs'
@@ -54,15 +56,23 @@ export default defineConfig(({ i: input }) => ({
  * Input plugins
  */
  plugins: [
+ resolve({
+ browser: true
+ }),
  replace({
  include: '**/common/govuk-frontend-version.mjs',
  preventAssignment: true,
 
  // Add GOV.UK Frontend release version
  development: config.version
  }),
+ commonjs({
+ requireReturnsDefault: 'preferred',
+ defaultIsModuleExports: true
+ }),
  babel({
- babelHelpers: 'bundled'
+ babelHelpers: 'bundled',
+ exclude: '**/node_modules/**'
  })
  ]
 }))