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

JavaScript modules are attached to the same global variable when imported individually #1836

Closed
2 tasks done
Tracked by #2274
alex-ju opened this issue Jun 12, 2020 · 4 comments · Fixed by #2426
Closed
2 tasks done
Tracked by #2274

Comments

@alex-ju
Copy link
Contributor

alex-ju commented Jun 12, 2020

Context

When we compile the JavaScript assets to UMD we attach them to GOVUKFrontend, which works well when importing all components, but not so great when importing individual scripts.

Problem

For example, in GOV.UK Publishing Components, when importing multiple components individually from govuk-frontend only the last one will be available.

//= require govuk/components/accordion/accordion.js
# accordion.js is exposed via window.GOVUKFrontend; not GOVUKFrontend.Accordion as expected
//= require govuk/components/accordion/button.js
# button.js is exposed via window.GOVUKFrontend; accordion.js is lost

As a workaround, we attached the component to another global GOVUK.Modules.[ComponentName] right after importing it.

Potential solution

Update compile-assets.js script to attach components to GOVUKFrontend.[ComponentName] instead of GOVUKFrontend.

Done when

  • Importing multiple individual component JavaScript modules no longer overwrites the previous one
  • "Details of breaking change" section below completed to help with writing release notes

Details of breaking change

  • which users are affected: users who import component JavaScript individually
  • the change that’s been made: component JavaScript is now attached to window.GOVUKFrontend.[ComponentName] rather than window.GOVUKFrontend to avoid multiple imports for individual components overwriting each other
  • changes users will have to make: any users who important component JavaScript individually may have written their own code to work around this problem or may be relying on the JavaScript being available with window.GOVUKFrontend. Users must update references to account for the new naming, for example switching calls to window.GOVUKFrontend to window.GOVUKFrontend.[ComponentName]
  • impact of users not making those changes: their JavaScript code may error as it's unable to find the correct module
@alex-ju alex-ju changed the title JavaScript modules are attached to the same global variable JavaScript modules are attached to the same global variable when imported individually Jun 12, 2020
@36degrees 36degrees added the awaiting triage Needs triaging by team label Jun 16, 2020
@36degrees
Copy link
Contributor

Although the current behaviour definitely doesn't seem 'correct', I think we'd have to treat this as a breaking change so I'm going to attach this to the 4.0 milestone.

@36degrees 36degrees added this to the v4.0.0 milestone Jun 24, 2020
@alex-ju
Copy link
Contributor Author

alex-ju commented Jun 25, 2020

Thank you @36degrees! I'm pretty confident I introduced this problem, so happy to work on it if the team decides so.

@vanitabarrett
Copy link
Contributor

Had a discussion in the v4 planning session about whether we should make this change backwards compatible by supporting the current way of doing things with the new way (and then removing that in a later release). I think we're all in agreement that the current behaviour is a bug that people are now probably relying on working in that way (as we haven't had many reports of this issue). Probably needs a little bit of investigation into what the fix would look like before we know for certain whether it's something to include in v4.

@vanitabarrett
Copy link
Contributor

Moving this into Blocked for now as I've asked Alex from GOV.UK to test this change to make sure it works for them. Waiting to hear back.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment