[SPIKE] Configure Babel to add ES shims 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

@@ -4,6 +4,8 @@
  * @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 +16,7 @@ module.exports = function (api) {
   const browserslistEnv = isBrowser ? 'javascripts' : 'node'
 
   return {
+    browserslistEnv,
     generatorOpts: {
       shouldPrintComment(comment) {
         if (!isBrowser || comment.includes('* @preserve')) {
@@ -35,12 +38,35 @@ module.exports = function (api) {
         return !isPrivate && isDocumentation
       }
     },
+    plugins: [
+      [
+        'polyfill-es-shims',
+        {
+          // Add logging for required polyfills
+          debug: isProduction,
+
+          // Browser support polyfills to exclude
+          exclude: [
+            // ES2016 '[].includes()' sparse array fix is unnecessary
+            // https://bugzilla.mozilla.org/show_bug.cgi?id=1767541
+            // https://github.com/zloirock/core-js/commit/66be5f0b673714bc7cc72a3b5e437fe277465973
+            'Array.prototype.includes',
+
+            // ES2022 Error cause is unused
+            // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Error/cause
+            'Error cause'
+          ],
+
+          // Replace unsupported code with polyfills
+          // without modifying window globals
+          method: 'usage-pure'
+        }
+      ]
+    ],
     presets: [
       [
         '@babel/preset-env',
         {
-          browserslistEnv,
-
           // Apply bug fixes to avoid transforms
           bugfixes: true,
 

packages/govuk-frontend/package.json

@@ -68,9 +68,12 @@
     "@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-es-shims": "^0.10.2",
     "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/**'
     })
   ]
 }))