Manually test that v5 works with the Prototype Kit

[romaricpascal]

What

Share our strategy for loading JavaScript to the Prototype Kit team and confirm that necessary changes on their side are feasible. Use the change they've made and validate that it works, e.g. build a prototype kit review app.

Add a Prototype Kit example loading the govuk-frontend package using the new Prototype Kit option for loading scripts using type="module".

The approach discussed on Slack would be to create a new workspace that:

• runs npx govuk-prototype-kit create dist to scaffold a new kit
• links the govuk-frontend package to use the one in packages with npm link
• we'd run manually when necessary

Post v5, we can look into added automated tests to check that assets load OK (using Jest + Puppeteer).

Why

We'll be updating how our JavaScript loads in the browser and need to make sure that our approach is compatible with what the Prototype Kit can support.

Who needs to work on this

Developers

Who needs to review this

Developers

Done when

• We've implemented a Prototype Kit example that lets us check we integrate OK

[36degrees]

The Prototype Kit team have created an issue to allow scripts loaded using the plugin system to use type="module".

[colinrotherham]

Moving this to blocked for now

The new type="module" feature works great but the kit tries to initialise itself before GOV.UK Frontend is available

1. Preview branch govuk-frontend installs causes test timeouts
2. Preview branch govuk-frontend is replaced with v4.5.0 (or latest) in test teardowns
3. Heroku password pages have hard-coded "allowed" files from GOV.UK Frontend
4. Prototype management pages and plugins can still run GOV.UK Frontend v4

These aren't necessarily blockers but you can track progress in:

• Locate GOV.UK Frontend using require.resolve() govuk-prototype-kit#2306

[colinrotherham]

Just an update to track progress a little better

The following changes were made by the Prototype Kit team:

• Plugin authors can now use scripts with type module govuk-prototype-kit#2088
• Make the manage prototype pages independent of the govuk-frontend plugin govuk-prototype-kit#2118
• Using internal Govuk Frontend more widely govuk-prototype-kit#2317
• Add metadata to Prototype Kit plugin config #4101

With support fixes contributed by GOV.UK Frontend:

• Locate GOV.UK Frontend using require.resolve() govuk-prototype-kit#2306
• Fix errors.json logging ENOENT: no such file or directory govuk-prototype-kit#2332
• Fix error server /manage-prototype/dependencies govuk-prototype-kit#2333
• Fix GOV.UK Frontend initAll() on management pages govuk-prototype-kit#2349
• Prevent management pages using "plugin" GOV.UK Frontend views govuk-prototype-kit#2355

But with extra backwards compatibility considerations from GOV.UK Frontend too:

• Bump govuk-frontend from 4.5.0 to 4.7.0 govuk-prototype-kit#2334
• Suppress Sass warnings for $legacy deprecated colour palette govuk-prototype-kit#2358
• Defer prototype application.js to load after plugin scripts govuk-prototype-kit#2359