Update how we load JavaScript in browser

[vanitabarrett]

What

We're updating how browsers should load our JavaScript to ensure it only runs in browsers that are actually capable of executing it, letting older browsers show our components in their non-JavaScript state.

This involves:

• govuk-frontend providing code that can be parsed in any browser supporting <script type="module">
• recommending to use <script type="module"> to avoid scripts being downloaded in older browsers

Why

We have decided to reduce support for IE11 in GOV.UK Frontend and drop support completely for IE8-10. We shared these proposed changes with the frontend community in GDS and across government, and have only received positive feedback.

As part of this proposal, we said we would stop shipping JavaScript to IE browsers. These browsers will fall back to a no-JavaScript experience.

Who needs to work on this

Developers; Tech Writer

Who needs to review this

Developers

Done when

Update JavaScript loading

Preview Give feedback

1. Define new strategy for JavaScript loading
2. Define which methods for loading govuk-frontend we want to support in v5.0 #3721
   1 of 4
   +0
   
3. Define new package directories, filenames, extensions #3482
   5 of 5
   +0
4. Set up Babel transpilation for browser compatibility #3504
   1 of 1
   interoperability javascript tooling +3
5. Update review app to use new JavaScript loading strategy #3508
   4 of 4
   javascript +1
6. Update components to only initialise where GOV.UK Frontend is supported #3509
   javascript +1
7. Implement new class for early styling #3507
   1 of 1
   sass / css +1
8. Update installation instruction to reflect new JavaScript loading strategy govuk-frontend-docs#308
   3 of 3
   javascript +1
   
9. Write up decisions on JavaScript browser compatibility in v5 govuk-design-system-architecture#27
   Decision Record +1
   
10. Write up decisions on package structure and JavaScript formats in v5 govuk-design-system-architecture#26
    Decision Record +1
    

[querkmachine]

Changing the <script> element to use type="module" is unfortunately not a complete quick fix. Defining it as a module scopes all of the variables within it, so GOVUKFrontend never becomes globally available on window.

That association is currently created through Rollup's bundling process, and I couldn't find anything in the Rollup docs that would create an explicit window.GOVUKFrontend = [all.js exports] line of code. I did get this approach working with a few other changes though.

Changing the Rollup configuration in tasks/gulp/compile-assets.js to output ESM files…

      return gulp.src(file)
        .pipe(rollup({
          // Used to set the `window` global and UMD/AMD export name
          // Component JavaScript is given a unique name to aid individual imports, e.g GOVUKFrontend.Accordion
          name: moduleName,
-         // Legacy mode is required for IE8 support
-         legacy: true,
-         // UMD allows the published bundle to work in CommonJS and in the browser.
-         format: 'umd'
+         format: 'es'
        }))

…and changing the initialisation code in HTML:

- <script src="/public/all.js"></script>
- <script>window.GOVUKFrontend.initAll()</script>
+ <script type="module">
+   import { initAll } from '/public/all.js'
+   initAll()
+ </script>

This seems to work as desired. JS is loaded in modern browsers that understand type="module", and isn't loaded in IE and older browsers.

However this still presented some weirdness in IE: styles used when JS is available were still being applied to components like the Accordion, which in that case was making the accordion's content inaccessible.

This is because the code that adds the js-enabled class lives in the template HTML, not in Frontend's JS.

Adding type="module" to the script block in src/govuk/template.njk seemed to fix this.

-    <script{% if cspNonce %} nonce="{{ cspNonce }}"{% endif %}>document.body.className = ((document.body.className) ? document.body.className + ' js-enabled' : 'js-enabled');</script>
+    <script type="module" {%- if cspNonce %} nonce="{{ cspNonce }}"{% endif %}>document.body.className = ((document.body.className) ? document.body.className + ' js-enabled' : 'js-enabled');</script>

This probably wouldn't be necessary if this code was present in the compiled JS; or if we made it so that components had individual 'enabled' states. (I imagine this JS is currently separated so that the class is applied as soon as possible and the browser doesn't first render a no-JS version of the CSS, before having to switch to yes-JS styles.) But that might be a discussion for another time.

[colinrotherham]

Was going to add #2639 but that's also done

Can mark this as closed too 🎉