Preview v5: Update to use <script type="module">

lib/metalsmith.js

@@ -163,14 +163,9 @@ module.exports = metalsmith
     done()
   })
 
-  // build the entrypoint for application specific JavaScript
+  // build the entrypoints for application specific JavaScript
   .use(rollup('javascripts/application.mjs'))
-
-  // build GOV.UK Frontend JavaScript
-  .use(rollup('javascripts/govuk-frontend.mjs'))
-
-  // build the entrypoint for example specific JavaScript
-  .use(rollup('javascripts/example.mjs'))
+  .use(rollup('javascripts/application-example.mjs'))
 
   // add hash to files in production
   .use((files, metalsmith, done) => {

src/javascripts/application-example.mjs

@@ -0,0 +1,13 @@
+import { initAll } from 'govuk-frontend'
+
+import ExamplePage from './components/example-page.mjs'
+
+// Initialise GOV.UK Frontend
+initAll({
+  // Auto focusing the error summary and notification banner is not useful
+  // when used in examples, and causes the viewport to scroll
+  errorSummary: { disableAutoFocus: true },
+  notificationBanner: { disableAutoFocus: true }
+})
+
+new ExamplePage(document).init()

src/javascripts/application.mjs

@@ -1,3 +1,5 @@
+import { initAll } from 'govuk-frontend'
+
 import Analytics from './components/analytics.mjs'
 import BackToTop from './components/back-to-top.mjs'
 import CookieBanner from './components/cookie-banner.mjs'
@@ -11,6 +13,9 @@ import OptionsTable from './components/options-table.mjs'
 import Search from './components/search.mjs'
 import AppTabs from './components/tabs.mjs'
 
+// Initialise GOV.UK Frontend
+initAll()
+
 // Initialise cookie banner
 var $cookieBanner = document.querySelector('[data-module="govuk-cookie-banner"]')
 new CookieBanner($cookieBanner).init()

src/javascripts/example.mjs → src/javascripts/components/example-page.mjs

@@ -1,6 +1,7 @@
 function ExamplePage ($module) {
   this.$module = $module
 }
+
 ExamplePage.prototype.init = function () {
   var $module = this.$module
   if (!$module) {
@@ -9,6 +10,7 @@ ExamplePage.prototype.init = function () {
   var $form = $module.querySelector('form[action="/form-handler"]')
   this.preventFormSubmission($form)
 }
+
 ExamplePage.prototype.preventFormSubmission = function ($form) {
   // we should only have one form per example
   if (!$form) {
@@ -19,4 +21,4 @@ ExamplePage.prototype.preventFormSubmission = function ($form) {
   })
 }
 
-new ExamplePage(document).init()
+export default ExamplePage

src/styles/page-template/block-areas/index.njk

@@ -81,7 +81,7 @@ stylesheets:
     <span class="app-annotate-block__label">block: bodyEnd</span>
     {{ super() }}
     {# Since we’re not extending the Design System layout we need to add this manually #}
-    <script src="{{ getFingerprint('javascripts/govuk-frontend.js') }}"></script>
-    <script src="{{ getFingerprint('javascripts/vendor/iframeResizer.contentWindow.min.js') }}"></script>
+    <script type="module" src="{{ getFingerprint('javascripts/application-example.js') }}"></script>
+    <script type="module" src="{{ getFingerprint('javascripts/vendor/iframeResizer.contentWindow.min.js') }}"></script>
   </div>
 {%- endblock %}

src/styles/page-template/custom/code.njk

@@ -147,5 +147,9 @@ ignoreInSitemap: true
 {% endblock %}
 
 {% block bodyEnd %}
-  <script src="/govuk-frontend/all.js"></script>
+  <script type="module" src="/javascripts/govuk-frontend.min.js"></script>
+  <script type="module">
+    import { initAll } from '/javascripts/govuk-frontend.min.js'
+    initAll()
+  </script>
 {% endblock %}

src/styles/page-template/custom/index.njk

@@ -149,6 +149,6 @@ ignoreInSitemap: true
 {% endblock %}
 
 {% block bodyEnd %}
-  <script src="{{ getFingerprint('javascripts/govuk-frontend.js') }}"></script>
-  <script src="{{ getFingerprint('javascripts/vendor/iframeResizer.contentWindow.min.js') }}"></script>
+  <script type="module" src="{{ getFingerprint('javascripts/application-example.js') }}"></script>
+  <script type="module" src="{{ getFingerprint('javascripts/vendor/iframeResizer.contentWindow.min.js') }}"></script>
 {% endblock %}

src/styles/page-template/default/code.njk

@@ -15,6 +15,9 @@ ignoreInSitemap: true
 
 {% block bodyEnd %}
   {# Run JavaScript at end of the <body>, to avoid blocking the initial render. #}
-  <script src="/govuk-frontend/all.js"></script>
-  <script>window.GOVUKFrontend.initAll()</script>
+  <script type="module" src="/javascripts/govuk-frontend.min.js"></script>
+  <script type="module">
+    import { initAll } from '/javascripts/govuk-frontend.min.js'
+    initAll()
+  </script>
 {% endblock %}

src/styles/page-template/default/index.njk

@@ -14,6 +14,6 @@ layout: false
 {% endblock %}
 
 {% block bodyEnd %}
-  <script src="{{ getFingerprint('javascripts/govuk-frontend.js') }}"></script>
-  <script src="{{ getFingerprint('javascripts/vendor/iframeResizer.contentWindow.min.js') }}"></script>
+  <script type="module" src="{{ getFingerprint('javascripts/application-example.js') }}"></script>
+  <script type="module" src="{{ getFingerprint('javascripts/vendor/iframeResizer.contentWindow.min.js') }}"></script>
 {% endblock %}

views/layouts/_generic.njk

@@ -37,6 +37,5 @@
 {% block footer %}{% endblock %}
 
 {% block bodyEnd %}
-  <script src="{{ getFingerprint('javascripts/govuk-frontend.js') }}"></script>
-  <script src="{{ getFingerprint('javascripts/application.js') }}"></script>
+  <script type="module" src="{{ getFingerprint('javascripts/application.js') }}"></script>
 {% endblock %}

views/layouts/layout-example-full-page-govuk.njk

@@ -22,7 +22,6 @@
   {{ contents | safe }}
 {% endblock %}
 {% block bodyEnd %}
-  <script src="{{ getFingerprint('javascripts/govuk-frontend.js') }}"></script>
-  <script src="{{ getFingerprint('javascripts/example.js') }}"></script>
-  <script src="{{ getFingerprint('javascripts/vendor/iframeResizer.contentWindow.min.js') }}"></script>
+  <script type="module" src="{{ getFingerprint('javascripts/application-example.js') }}"></script>
+  <script type="module" src="{{ getFingerprint('javascripts/vendor/iframeResizer.contentWindow.min.js') }}"></script>
 {% endblock %}

views/layouts/layout-example-full-page.njk

@@ -24,7 +24,6 @@
   {{ contents | safe }}
 {% endblock %}
 {% block bodyEnd %}
-  <script src="{{ getFingerprint('javascripts/govuk-frontend.js') }}"></script>
-  <script src="{{ getFingerprint('javascripts/example.js') }}"></script>
-  <script src="{{ getFingerprint('javascripts/vendor/iframeResizer.contentWindow.min.js') }}"></script>
+  <script type="module" src="{{ getFingerprint('javascripts/application-example.js') }}"></script>
+  <script type="module" src="{{ getFingerprint('javascripts/vendor/iframeResizer.contentWindow.min.js') }}"></script>
 {% endblock %}

views/layouts/layout-example.njk

@@ -35,9 +35,8 @@
 {% endblock %}
 
 {% block bodyEnd %}
-  <script src="{{ getFingerprint('javascripts/govuk-frontend.js') }}"></script>
-  <script src="{{ getFingerprint('javascripts/example.js') }}"></script>
-  <script src="{{ getFingerprint('javascripts/vendor/iframeResizer.contentWindow.min.js') }}"></script>
+  <script type="module" src="{{ getFingerprint('javascripts/application-example.js') }}"></script>
+  <script type="module" src="{{ getFingerprint('javascripts/vendor/iframeResizer.contentWindow.min.js') }}"></script>
 {% endblock %}
 
 {# Example pages shouldn't have a footer, so blank the one provided by the template #}

views/partials/_cookie-banner.njk

@@ -72,25 +72,31 @@
 to avoid a high cumulative layout shift (CLS) score https://web.dev/cls/ #}
 <script>
 
-  /* If cookie policy changes and/or the user preferences object format needs to
-  * change, bump this version up afterwards. The user should then be shown the
-  * banner again to consent to the new policy.
-  *
-  * Note that because isValidCookieConsent checks that the version in the user's
-  * cookie is equal to or greater than this number, you should be careful to
-  * check backwards compatibility when changing the object format.
-  *
+  /**
+   * If cookie policy changes and/or the user preferences object format needs to
+   * change, bump this version up afterwards. The user should then be shown the
+   * banner again to consent to the new policy.
+   *
+   * Note that because isValidCookieConsent checks that the version in the user's
+   * cookie is equal to or greater than this number, you should be careful to
+   * check backwards compatibility when changing the object format.
   */
   window.GDS_CONSENT_COOKIE_VERSION = 1;
 
   (function () {
-    /** Check the cookie preferences object.
-    *
-    * If the consent object is not present, malformed, or incorrect version,
-    * returns false, otherwise returns true.
-    *
-    * This is also duplicated in cookie-functions.js - the two need to be kept in sync
-    */
+    // Skip early setup when cookie banner component is not supported
+    if (!('noModule' in HTMLScriptElement.prototype)) {
+      return
+    }
+
+    /**
+     * Check the cookie preferences object.
+     *
+     * If the consent object is not present, malformed, or incorrect version,
+     * returns false, otherwise returns true.
+     *
+     * This is also duplicated in cookie-functions.js - the two need to be kept in sync
+     */
     function isValidConsentCookie (options) {
       return (options && options.version >= window.GDS_CONSENT_COOKIE_VERSION)
     }