govuk-frontend icon indicating copy to clipboard operation
govuk-frontend copied to clipboard

Migrate component data to ES modules

Open colinrotherham opened this issue 2 years ago • 5 comments

This PR migrates our component data YAML into ES modules to:

  1. Run type checks using TypeScript
  2. Run code quality checks using ESLint
  3. In future, import typed examples into tests without JSON conversion

This is important because we've accidentally missed things in the past:

  • https://github.com/alphagov/govuk-frontend/issues/1903

But makes it a lot easier to add automated tests for:

  • https://github.com/alphagov/govuk-frontend/issues/1139

Migration script

See branch component-migrator to convert YAML to ES modules via:

npm exec --workspace packages/govuk-frontend -- gulp fixtures

colinrotherham avatar Jun 15 '23 07:06 colinrotherham

Would appreciate your non-urgent thoughts on this one @36degrees

Using ES modules found some issues to fix so far:

  1. Missing property { required } in Checkboxes nested options for conditional fields
  2. Missing property { required } in Radios nested options for conditional fields
  3. Missing property { description } in Summary list 'key.html' row parameter
  4. Missing JSDoc type for example previewLayoutModifiers from #3808
  5. Missing JSDoc type for example description

That's before we've picked up:

  • https://github.com/alphagov/govuk-frontend/issues/1139

colinrotherham avatar Jun 19 '23 11:06 colinrotherham

Just rebasing since #2261 and tsc has caught another descrption typo in task-list.yaml

colinrotherham avatar Jun 20 '23 13:06 colinrotherham

@colinrotherham to add to the next show & tell

Izabela-16 avatar Jul 31 '23 09:07 Izabela-16

:clipboard: Stats

File sizes

File Size
dist/govuk-frontend-development.min.css 112.86 KiB
dist/govuk-frontend-development.min.js 38.53 KiB
packages/govuk-frontend/dist/govuk/all.bundle.js 78.63 KiB
packages/govuk-frontend/dist/govuk/all.bundle.mjs 73.89 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.85 KiB
packages/govuk-frontend/dist/govuk/govuk-frontend.min.js 38.51 KiB
packages/govuk-frontend/dist/govuk/i18n.mjs 5.38 KiB

Modules

File Size (bundled) Size (minified)
all.mjs 70.21 KiB 36.78 KiB
accordion.mjs 21.67 KiB 12.42 KiB
button.mjs 4.67 KiB 2.16 KiB
character-count.mjs 21.24 KiB 9.45 KiB
checkboxes.mjs 5.83 KiB 2.83 KiB
error-summary.mjs 6.57 KiB 2.92 KiB
exit-this-page.mjs 16.04 KiB 8.86 KiB
header.mjs 4.46 KiB 2.6 KiB
notification-banner.mjs 4.93 KiB 2.09 KiB
radios.mjs 4.83 KiB 2.38 KiB
skip-link.mjs 4.39 KiB 2.18 KiB
tabs.mjs 10.13 KiB 6.11 KiB

View stats and visualisations on the review app


Action run for 238fcf69705a85c94d6fa09b1accd716336a99ca

github-actions[bot] avatar Aug 23 '23 21:08 github-actions[bot]

@colinrotherham Book a slot to talk about it at the next show & tell (sprint one).

Izabela-16 avatar Sep 25 '23 09:09 Izabela-16

Closing for housekeeping and because there doesn't seem to be much appetite to pursue this at the moment.

querkmachine avatar Apr 15 '24 16:04 querkmachine