Allow individual script imports

[alex-ju]

What

Allow individual, component-based, JavaScript imports.

Why

Follow up on #1159 to complete RFC 108
To avoid excessive code from being imported in the application.

Notes

This PR will remain draft until tested with applications consuming the gem but comments/reviews are welcome.

Tested with:

• content-publisher
• finder-frontend
• frontend

For applications dependent on static/slimmer, static requires to be updated first to use the modules system from this gem instead of govuk_frontend_toolkit.

Modules in GOV.UK

JavaScript modules in GOV.UK are actually design patterns for keeping pieces of code independent of other components. We currently have 3 design patterns for writing JavaScript in GOV.UK applications.

GOV.UK Frontend Toolkit Modules

Mostly found in legacy scripts, either migrated from Toolkit, Elements, or written in the same era.

GOVUK.Modules.TestModule = function () {
  var that = this
  that.start = function (element) {
    //
  }
}

GOV.UK Publishing Modules

Found across GOV.UK applications, on relatively new scripts (2 years or younger). Similar to the govuk-frontend approach described below, it relies on the classic prototype pattern but with a start function that takes the element that initialises on. This start function was preserved so that the module initialisation script (modules.js) would work for both legacy and new scripts without any alteration required.

function TestModule () { }
TestModule.prototype.start = function (element) {
  //
}

GOV.UK Frontend Modules

Used in govuk-frontend scripts. Relies on the classic prototype pattern with an init function. The element is passed to the constructor function.

function TestModule (element) {
  this.element = element
}
TestModule.prototype.init = function () {
  //
}

Visual Changes

No visual changes.

[andysellick]

@alex-ju this looks good - will there be a 'suggested JS' feature in the guide like for the Sass?

[alex-ju]

@alex-ju this looks good - will there be a 'suggested JS' feature in the guide like for the Sass?

It would be great to have a similar feature indeed, but I would rather do it as a separate PR – not to overload this with changes and because it feels like an independent piece of work.

[andysellick]

@alex-ju that's sensible, but can you provide that code in a comment so we can test this in an application?

[alex-ju]

@alex-ju that's sensible, but can you provide that code in a comment so we can test this in an application?

@andysellick I realised it might be simpler to add the suggested imports to this PR instead of providing a few examples that would limit testing. Added links to branches in repos I tested this with.

I found some time today and updated the PR to contain suggested imports as shown below.

[bilbof]

Excellent work 👍

I'm really pleased by this change! It implements the RFC as expected.

My only suggestion would be to share details of an upgrade path in the release notes; the examples in the PR description are probably enough.

[alex-ju]

Thank you, @bilbof! I rebased and updated the JavaScript usage section and referred it from the changelog.