[SPIKE] Configure Babel to add ES shims polyfills #4301

colinrotherham · 2023-10-04T10:10:22Z

This PR adds the Babel polyfill provider ES shims via:
https://www.npmjs.com/package/babel-plugin-polyfill-es-shims

This is part of a two spike series:

Findings

Lots of polyfills are missing in ES shims when compared to core-js in #4557

We also have some unwanted bug fixes:

ES shims adds Array.prototype.includes polyfill to avoid bugs
ES shims adds Error.prototype.cause polyfill to avoid bugs

Remaining issues

Browserslist matches Opera Mobile 73 under es6-module but Babel disagrees
Rollup plugin @rollup/plugin-commonjs adds ES module wrappers to polyfills
Rollup plugin @rollup/plugin-babel adds helpers to avoid ES module wrappers
Rollup outputs dist/govuk/node_modules not dist/govuk/vendor

Automatic polyfills

When Babel was added we chose "transforms only" without polyfills (see decision record)

Add Babel to transform ES2020 public and static class fields #3820

This PR ensures early investigations aren't lost for:

Decision record implications

Since Babel with "transforms only" silently skips polyfills, we noted that care must be taken:

When writing or changing JavaScript we currently have to remember not to use features that aren't available in the oldest browsers we support, or to manually add a polyfill. We also rely heavily on manual testing across multiple browsers.

This spike PR ensures:

Babel logger lists required polyfills
Babel injects imports for required polyfills
Rollup builds fail when imports are missing

i.e. Support for both polyfills and protection from missed polyfills all-in-one

github-actions · 2023-10-04T10:16:40Z

📋 Stats

File sizes

File	Size
dist/govuk-frontend-development.min.css	112.47 KiB
dist/govuk-frontend-development.min.js	38.58 KiB
packages/govuk-frontend/dist/govuk/all.bundle.js	78.74 KiB
packages/govuk-frontend/dist/govuk/all.bundle.mjs	73.99 KiB
packages/govuk-frontend/dist/govuk/all.mjs	3.86 KiB
packages/govuk-frontend/dist/govuk/govuk-frontend-component.mjs	359 B
packages/govuk-frontend/dist/govuk/govuk-frontend.min.css	112.46 KiB
packages/govuk-frontend/dist/govuk/govuk-frontend.min.js	38.57 KiB
packages/govuk-frontend/dist/govuk/i18n.mjs	5.38 KiB

Modules

File	Size
all.mjs	70.32 KiB
components/accordion/accordion.mjs	21.67 KiB
components/button/button.mjs	4.7 KiB
components/character-count/character-count.mjs	21.24 KiB
components/checkboxes/checkboxes.mjs	5.83 KiB
components/error-summary/error-summary.mjs	6.57 KiB
components/exit-this-page/exit-this-page.mjs	16.08 KiB
components/header/header.mjs	4.46 KiB
components/notification-banner/notification-banner.mjs	4.93 KiB
components/radios/radios.mjs	4.83 KiB
components/skip-link/skip-link.mjs	4.39 KiB
components/tabs/tabs.mjs	10.16 KiB

View stats and visualisations on the review app

Action run for 9234e61

This option is no longer `@babel/preset-env` specific since v7.13.0

Opera Mobile has relaunched for Android using Chromium but the compatibility data still thinks lots of features are unsupported: ``` The es-shims polyfill added the following polyfills: Array.prototype.every { "opera_mobile":"73" } Array.prototype.indexOf { "opera_mobile":"73" } Array.prototype.keys { "opera_mobile":"73" } Date.now { "opera_mobile":"73" } Function.prototype.name { "opera_mobile":"73" } Object.entries { "opera_mobile":"73" } String.prototype.split { "opera_mobile":"73" } String.prototype.trim { "opera_mobile":"73" } ``` See related issues: browserslist/browserslist#766 babel/babel#15711

Rollup will log a warning for code requiring polyfills: > (!) Unresolved dependencies > https://rollupjs.org/troubleshooting/#warning-treating-module-as-external-dependency > error-cause/Error (imported by "src/govuk/errors/index.mjs") Babel will also log a warning: > Some polyfills have been added but are not present in your dependencies. > > Please run one of the following commands: > npm install --save error-cause@^1.0.1 > yarn add error-cause@^1.0.1 See ES shims on GitHub: https://github.com/es-shims

Although this polyfill is required for feature complete Error support, we don’t use the `.cause` property yet ``` The es-shims polyfill added the following polyfills: Error cause { "android":"61", "chrome":"61", "edge":"16", "firefox":"60", "ios":"10.3", "opera":"48", "safari":"10.1", "samsung":"8.2" } ```

Although this polyfill is required for bug-free `[].includes()` in legacy Firefox versions with sparse arrays, we don’t have any: ``` The es-shims polyfill added the following polyfills: Array.prototype.includes { "firefox":"60" } ```

querkmachine · 2024-04-15T16:49:44Z

Closing for housekeeping reasons, as this spike seems unlikely to be resolved at this time.

The related issue remains open for comments. #3948

govuk-design-system-ci temporarily deployed to govuk-frontend-pr-4301 October 4, 2023 10:10 Inactive

colinrotherham mentioned this pull request Oct 5, 2023

Log formatted warnings from Rollup #4306

Merged

colinrotherham force-pushed the babel-polyfills branch from 368a66d to c9cc644 Compare October 5, 2023 16:37

govuk-design-system-ci temporarily deployed to govuk-frontend-pr-4301 October 5, 2023 16:37 Inactive

colinrotherham force-pushed the babel-polyfills branch from c9cc644 to 376a0c4 Compare October 17, 2023 09:52

govuk-design-system-ci temporarily deployed to govuk-frontend-pr-4301 October 17, 2023 09:52 Inactive

colinrotherham force-pushed the babel-polyfills branch from 376a0c4 to 283917f Compare October 24, 2023 09:20

govuk-design-system-ci temporarily deployed to govuk-frontend-pr-4301 October 24, 2023 09:20 Inactive

colinrotherham force-pushed the babel-polyfills branch from 283917f to 701b232 Compare October 31, 2023 12:46

govuk-design-system-ci temporarily deployed to govuk-frontend-pr-4301 October 31, 2023 12:46 Inactive

colinrotherham changed the title ~~[SPIKE] Configure Babel to add polyfills~~ [SPIKE] Configure Babel to add ES shims polyfills Oct 31, 2023

colinrotherham force-pushed the babel-polyfills branch from 701b232 to 59c752c Compare October 31, 2023 17:17

govuk-design-system-ci temporarily deployed to govuk-frontend-pr-4301 October 31, 2023 17:17 Inactive

colinrotherham force-pushed the babel-polyfills branch from 59c752c to afbfefc Compare November 27, 2023 14:54

govuk-design-system-ci temporarily deployed to govuk-frontend-pr-4301 November 27, 2023 14:54 Inactive

colinrotherham mentioned this pull request Nov 27, 2023

Add PR diff comments for npm package changes #4511

Merged

colinrotherham force-pushed the babel-polyfills branch from afbfefc to c6b31d5 Compare November 27, 2023 19:02

govuk-design-system-ci temporarily deployed to govuk-frontend-pr-4301 November 27, 2023 19:02 Inactive

alphagov deleted a comment from github-actions bot Nov 27, 2023

colinrotherham force-pushed the babel-polyfills branch from c6b31d5 to cef6a0c Compare November 28, 2023 13:31

govuk-design-system-ci temporarily deployed to govuk-frontend-pr-4301 November 28, 2023 13:31 Inactive

colinrotherham force-pushed the babel-polyfills branch 2 times, most recently from 1a09dd5 to 259bedb Compare November 30, 2023 13:56

govuk-design-system-ci temporarily deployed to govuk-frontend-pr-4301 November 30, 2023 13:57 Inactive

colinrotherham force-pushed the babel-polyfills branch from 259bedb to ec5bebc Compare December 11, 2023 14:05

govuk-design-system-ci temporarily deployed to govuk-frontend-pr-4301 December 11, 2023 14:05 Inactive

colinrotherham force-pushed the babel-polyfills branch from ec5bebc to 7fbe825 Compare December 11, 2023 14:48

govuk-design-system-ci temporarily deployed to govuk-frontend-pr-4301 December 11, 2023 14:48 Inactive

colinrotherham mentioned this pull request Dec 11, 2023

[SPIKE] Configure Babel to add core-js polyfills #4557

Closed

colinrotherham force-pushed the babel-polyfills branch from 7fbe825 to 21e8f56 Compare December 14, 2023 19:40

govuk-design-system-ci temporarily deployed to govuk-frontend-pr-4301 December 14, 2023 19:40 Inactive

colinrotherham force-pushed the babel-polyfills branch from 21e8f56 to eb4ce76 Compare January 8, 2024 17:39

govuk-design-system-ci temporarily deployed to govuk-frontend-pr-4301 January 8, 2024 17:40 Inactive

colinrotherham added 6 commits February 19, 2024 19:43

Move Babel browserslistEnv to config root

0862adf

This option is no longer `@babel/preset-env` specific since v7.13.0

Allow Rollup to bundle browser dependencies

4ee513f

colinrotherham force-pushed the babel-polyfills branch from eb4ce76 to 9234e61 Compare February 19, 2024 19:58

govuk-design-system-ci temporarily deployed to govuk-frontend-pr-4301 February 19, 2024 19:59 Inactive

querkmachine closed this Apr 15, 2024

colinrotherham mentioned this pull request Jul 31, 2024

Bundle size query (and 8kB version) alphagov/accessible-autocomplete#712

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[SPIKE] Configure Babel to add ES shims polyfills #4301

[SPIKE] Configure Babel to add ES shims polyfills #4301

colinrotherham commented Oct 4, 2023 •

edited

Loading

github-actions bot commented Oct 4, 2023 •

edited

Loading

querkmachine commented Apr 15, 2024 •

edited

Loading

[SPIKE] Configure Babel to add ES shims polyfills #4301

[SPIKE] Configure Babel to add ES shims polyfills #4301

Conversation

colinrotherham commented Oct 4, 2023 • edited Loading

Findings

Remaining issues

Automatic polyfills

Decision record implications

github-actions bot commented Oct 4, 2023 • edited Loading

📋 Stats

File sizes

Modules

querkmachine commented Apr 15, 2024 • edited Loading

colinrotherham commented Oct 4, 2023 •

edited

Loading

github-actions bot commented Oct 4, 2023 •

edited

Loading

querkmachine commented Apr 15, 2024 •

edited

Loading