[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/**'
     })
   ]
 }))