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

Update module.js ready for v5 of govuk-frontend #3992

Merged
merged 1 commit into from
May 21, 2024

Conversation

MartinJJones
Copy link
Contributor

@MartinJJones MartinJJones commented Apr 24, 2024

What

  • Update the start function in module.js to support how JS modules are initialisted in govuk-frontend v5 as initialisation now happens automatically
    • see "Remove calls to component init methods from your JavaScript" in the release notes of GOV.UK Frontend v5.0.0
  • Add tests to modules.spec.js to check modules are initialised as expected when the init method is not on the modules prototype

Why

Trello card

These changes are required to support v5 of govuk-frontend, by making these changes in advance of the release of v5 of govuk-frontend we can help avoid any potentially breaking changes when migrating to the new version of the gem that upgrades govuk-frontend to v5.

The main challenge here is when using static and frontend rendering applications. Modules are found and started in dependencies.js by including ./modules.js, this is called by static once for all applications on GOV.UK. If we were to include the changes made to modules.js as part of the upgrade to v5, this could cause some breaking changes in certain scenarios, further examples below.

Accordion Component

Scenario

  • collections is running v5 of govuk-frontend
  • static is running an old version of the gem that does not support both initialisation approaches in modules.js

Outcome
As the init method is removed from the accordion component in v5 of govuk-frontend, the accordion component from govuk-frontend will not be initialised in modules.js

Impact
The content will not be accessible as shown in the screenshots below. This is a known issue and further details are included in alphagov/govuk-frontend#999

initialised not initialised
accordion-working accordion-component-not-working

Tabs Component

Scenario

  • frontend is running v5 of govuk-frontend
  • static is running an old version of the gem that does not support both initialisation approaches in modules.js
  • the init method is removed from the tabs component in v5 of govuk-frontend

Outcome
As the init method is removed from the tabs component in v5 of govuk-frontend, the tabs component from govuk-frontend will not be initialised in modules.js

Impact

  • tabs are still styled as expected
  • tab content is accessible
  • all tab content will appear on the page
  • clicking a tab will scroll a user to the related section of the page
initialised not initialised
tabs-component-working tabs-component-not-initialised

Further information

@govuk-ci govuk-ci temporarily deployed to components-gem-pr-3992 April 24, 2024 07:47 Inactive
@MartinJJones MartinJJones force-pushed the update-js-approach-ready-for-v5 branch from 8e66272 to 2b5c083 Compare April 24, 2024 07:57
@govuk-ci govuk-ci temporarily deployed to components-gem-pr-3992 April 24, 2024 07:57 Inactive
@govuk-ci govuk-ci temporarily deployed to components-gem-pr-3992 May 15, 2024 09:28 Inactive
@MartinJJones MartinJJones force-pushed the update-js-approach-ready-for-v5 branch from a040d7e to 0cf57d3 Compare May 15, 2024 09:30
@govuk-ci govuk-ci temporarily deployed to components-gem-pr-3992 May 15, 2024 09:30 Inactive
@MartinJJones MartinJJones changed the title Update module.js approach ready for v5 of govuk-frontend Update module.js ready for v5 of govuk-frontend May 15, 2024
@MartinJJones MartinJJones force-pushed the update-js-approach-ready-for-v5 branch from 0cf57d3 to 991972b Compare May 15, 2024 14:03
@govuk-ci govuk-ci temporarily deployed to components-gem-pr-3992 May 15, 2024 14:04 Inactive
@MartinJJones MartinJJones force-pushed the update-js-approach-ready-for-v5 branch from 991972b to 655059b Compare May 15, 2024 14:04
@govuk-ci govuk-ci temporarily deployed to components-gem-pr-3992 May 15, 2024 14:04 Inactive
@govuk-ci govuk-ci temporarily deployed to components-gem-pr-3992 May 15, 2024 14:06 Inactive
@MartinJJones MartinJJones marked this pull request as ready for review May 15, 2024 15:03
@MartinJJones MartinJJones force-pushed the update-js-approach-ready-for-v5 branch from 48971de to 3947e2d Compare May 17, 2024 08:59
@govuk-ci govuk-ci temporarily deployed to components-gem-pr-3992 May 17, 2024 08:59 Inactive
@MartinJJones MartinJJones force-pushed the update-js-approach-ready-for-v5 branch from 3947e2d to 8741fef Compare May 17, 2024 10:15
@govuk-ci govuk-ci temporarily deployed to components-gem-pr-3992 May 17, 2024 10:15 Inactive
Copy link
Contributor

@andysellick andysellick left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nice work. Personally I'd merge the two commits together as they relate directly to each other.

@MartinJJones MartinJJones force-pushed the update-js-approach-ready-for-v5 branch from 8741fef to 4506753 Compare May 17, 2024 10:36
@govuk-ci govuk-ci temporarily deployed to components-gem-pr-3992 May 17, 2024 10:36 Inactive
@MartinJJones MartinJJones force-pushed the update-js-approach-ready-for-v5 branch from 4506753 to 45aab2d Compare May 21, 2024 08:51
@govuk-ci govuk-ci temporarily deployed to components-gem-pr-3992 May 21, 2024 08:52 Inactive
- Update the start function in `module.js` to support how JS modules are initialisted in govuk-frontend v5 as initialisation now happens automatically
  - see "Remove calls to component init methods from your JavaScript" in the release notes of [GOV.UK Frontend v5.0.0](https://github.com/alphagov/govuk-frontend/releases/tag/v5.0.0)
- Add tests to `modules.spec.js` to check modules are initialised as expected when the `init` method is not present
- Update CHANGELOG.md
@MartinJJones MartinJJones force-pushed the update-js-approach-ready-for-v5 branch from 45aab2d to 04a3f96 Compare May 21, 2024 08:52
@govuk-ci govuk-ci temporarily deployed to components-gem-pr-3992 May 21, 2024 08:52 Inactive
@MartinJJones MartinJJones merged commit 50eb9e1 into main May 21, 2024
10 checks passed
@MartinJJones MartinJJones deleted the update-js-approach-ready-for-v5 branch May 21, 2024 09:54
@MartinJJones MartinJJones mentioned this pull request May 21, 2024
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