Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Use govuk-frontend v5 #3855

Draft
wants to merge 9 commits into
base: main
Choose a base branch
from
Draft

Conversation

patrickpatrickpatrick
Copy link
Contributor

@patrickpatrickpatrick patrickpatrickpatrick commented Nov 14, 2023

Trello

What

  • Replace Uglifier with Terser, add patch which adds Sprockets support for Terser
  • Update how JS modules are initialised in-line with changes in govuk-frontend and govuk_publishing_components
  • Move components that rely on govuk-frontend modules to separate es6-components.js file
  • Remove deprecated scss variables

Why

govuk_publishing_components uses v5 of govuk-frontend. There are several breaking changes in this release and so we need to update the applications that use govuk_publishing_components. Please read what has changed in govuk_publishing_components and govuk-frontend. This specific changes this PR addresses are:

  • Replace Uglifier with Terser, add patch which adds Sprockets support for Terser
    • govuk-frontend v5 UMD component JS uses ES6 features which aren't supported by Uglifier, so we have to make the change to use Terser instead
    • Sprockets doesn't support Terser by default, need to add in a patch which adds Terser to list of supported JS compressors
  • Update initialisation method of application JS modules
    • Initialisation is now called upon module creation, so init methods have been moved to the constructors to reflect this
  • Move components that rely on govuk-frontend modules to seperate es6-components.js file
    • In the event that a browser below the target for govuk-frontend loads a page with JS on it, attempting to parse the JS from govuk-frontend will cause an error. To avoid this from happening, JS that contains govuk-frontend JS has been moved to seperate file which will be loaded in a script tag with type="module". This will prevent the JS from being parsed and so prevent the error
  • Remove deprecated scss variables
    • In govuk-frontend v5 the $legacy attribute in govuk-colour has been deprecated and using it will have no effect (other than generating warnings on pre-compilation)
    • In govuk-frontend v5 the $govuk-compatibility-govuktemplate has been removed and using it will have no effect
    • In govuk-frontend v5 the new link styles are default and so $govuk-new-link-styles does not need to be set

⚠️ This repo is Continuously Deployed: make sure you follow the guidance ⚠️

Follow these steps if you are doing a Rails upgrade.

@govuk-ci govuk-ci temporarily deployed to govuk-frontend-app-pr-3855 November 14, 2023 11:11 Inactive
@govuk-ci govuk-ci temporarily deployed to govuk-frontend-app-pr-3855 November 14, 2023 15:58 Inactive
@govuk-ci govuk-ci temporarily deployed to govuk-frontend-app-pr-3855 November 15, 2023 11:35 Inactive
@govuk-ci govuk-ci temporarily deployed to govuk-frontend-app-pr-3855 November 15, 2023 11:40 Inactive
@patrickpatrickpatrick
Copy link
Contributor Author

This is blocked by alphagov/govuk_publishing_components#3700

@patrickpatrickpatrick patrickpatrickpatrick changed the title use govuk frontend v5 Use govuk frontend v5 Nov 15, 2023
@patrickpatrickpatrick patrickpatrickpatrick changed the title Use govuk frontend v5 Use govuk-frontend v5 Nov 15, 2023
@govuk-ci govuk-ci temporarily deployed to govuk-frontend-app-pr-3855 November 16, 2023 15:31 Inactive
@govuk-ci govuk-ci temporarily deployed to govuk-frontend-app-pr-3855 November 20, 2023 14:28 Inactive
@jon-kirwan jon-kirwan force-pushed the use-govuk-frontend-v5 branch 4 times, most recently from e756597 to db1dbfe Compare March 20, 2024 11:30
govuk_publishing_components has govuk-frontend as a dependency.
govuk-frontend v5 now targets browsers that support ES6. This means that
the UMD modules used in govuk_publsihing_components from govuk-frontend
use features of ES6 and so it means that Uglifier can't be used anymore
because it only supports ES5.

As well as installing terser and updating the config, this commit also
contains a patch for getting terser working. Sprockets doesn't have
an built-in loader for terser so we need to add this functionality.
To prevent browsers evaluating JS that isn't supported, components that
contain code from govuk-frontend have been moved to a separate file
`es6-components.js` which is included in `application.html.erb` as a
script tag with `type="module"`.
In govuk-frontend v5, the `init` function is now called when a module is
created. This meant changing how the `initAll()` function works in
govuk_publishing_components so that it does not call `init()` when
initialising components JavaScript. It also meant moving `init`
functions in components to the constructor to bring them in line with
the new way of initialising.
- Remove $legacy attribute in govuk-colour
- Remove $govuk-compatibility-govuktemplate
- Remove $govuk-new-link-styles
@govuk-ci govuk-ci temporarily deployed to govuk-frontend-app-pr-3855 March 25, 2024 14:11 Inactive
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

3 participants