Merge pull request #3769 from alphagov/module-script

Migrate to use `<script type="module">`

docs/examples/webpack/src/index.html

@@ -21,6 +21,6 @@
       </main>
     </div>
 
-    <script src="/assets/javascripts/main.min.js"></script>
+    <script type="module" src="/assets/javascripts/main.min.js"></script>
   </body>
 </html>

docs/examples/webpack/webpack.config.js

@@ -76,7 +76,6 @@ module.exports = ({ WEBPACK_SERVE }, { mode }) => ({
         format: { comments: false },
 
         // Compatibility workarounds
-        ecma: 5,
         safari10: true
       }
     })]
@@ -85,7 +84,7 @@ module.exports = ({ WEBPACK_SERVE }, { mode }) => ({
   output: {
     clean: true,
     filename: 'assets/javascripts/[name].min.js',
-    library: { type: 'umd' },
+    iife: true,
     path: destPath,
     publicPath: '/'
   },
@@ -108,5 +107,5 @@ module.exports = ({ WEBPACK_SERVE }, { mode }) => ({
     errorDetails: true
   },
 
-  target: ['web', 'es5']
+  target: ['web', 'es2015']
 })

packages/govuk-frontend-review/rollup.config.mjs

@@ -29,7 +29,6 @@ export default defineConfig(({ i: input }) => ({
         },
 
         // Compatibility workarounds
-        ecma: 5,
         safari10: true
       })
     ]

packages/govuk-frontend-review/src/views/component-preview.njk

@@ -16,5 +16,5 @@
 {% endblock %}
 
 {% block scripts %}
-  <script src="/vendor/iframe-resizer/iframeResizer.contentWindow.min.js"></script>
+  <script src="/vendor/iframe-resizer/iframeResizer.contentWindow.min.js" defer></script>
 {% endblock %}

packages/govuk-frontend-review/src/views/examples/scoped-initialisation/index.njk

@@ -45,8 +45,8 @@
 {% endblock %}
 
 {% block bodyEnd %}
-  <script src="/javascripts/all.min.js"></script>
-  <script>
+  <script type="module" src="/javascripts/all.min.js"></script>
+  <script type="module">
     var $scope = document.getElementById('scoped')
     window.GOVUKFrontend.initAll({
       scope: $scope

packages/govuk-frontend-review/src/views/examples/template-custom/index.njk

@@ -121,7 +121,7 @@
 
 {% block bodyEnd %}
   <!-- block:bodyEnd -->
-  <script src="/javascripts/all.min.js"></script>
-  <script>window.GOVUKFrontend.initAll()</script>
+  <script type="module" src="/javascripts/all.min.js"></script>
+  <script type="module">window.GOVUKFrontend.initAll()</script>
   <!-- endblock:bodyEnd -->
 {% endblock %}

packages/govuk-frontend-review/src/views/examples/template-default/index.njk

@@ -10,8 +10,9 @@
   <!-- endblock:content -->
 {% endblock %}
 
-
 {% block bodyEnd %}
-  <script src="/javascripts/all.min.js"></script>
-  <script>window.GOVUKFrontend.initAll()</script>
+  <!-- block:bodyEnd -->
+  <script type="module" src="/javascripts/all.min.js"></script>
+  <script type="module">window.GOVUKFrontend.initAll()</script>
+  <!-- endblock:bodyEnd -->
 {% endblock %}

packages/govuk-frontend-review/src/views/examples/translated/index.njk

@@ -937,8 +937,8 @@
 {% endblock %}
 
 {% block bodyEnd %}
-  <script src="/javascripts/all.min.js"></script>
-  <script>
+  <script type="module" src="/javascripts/all.min.js"></script>
+  <script type="module">
     window.GOVUKFrontend.initAll({
       accordion: {
         i18n: {

packages/govuk-frontend-review/src/views/full-page-examples/cookie-banner-client-side/index.njk

@@ -194,7 +194,7 @@ notes: >-
     </div>
   </div>
 
-  <script>
+  <script type="module">
     var acceptButton = document.querySelector('.js-cookies-button-accept')
     var rejectButton = document.querySelector('.js-cookies-button-reject')
 
@@ -226,11 +226,11 @@ notes: >-
         event.preventDefault()
     })
 
-    acceptedBanner.querySelector('.js-hide').addEventListener('click', function() {
+    acceptedBanner.querySelector('.js-hide').addEventListener('click', function () {
       cookieBanner.setAttribute('hidden', 'hidden')
     })
 
-    rejectedBanner.querySelector('.js-hide').addEventListener('click', function() {
+    rejectedBanner.querySelector('.js-hide').addEventListener('click', function () {
       cookieBanner.setAttribute('hidden', 'hidden')
     })
   </script>

packages/govuk-frontend-review/src/views/full-page-examples/cookie-banner-essential-cookies/index.njk

@@ -156,7 +156,7 @@ notes: >-
   {# As the cookie banner component does not currently include JavaScript, we
     have to take care of the 'Hide' button to make progressive enhancement in
     the example functional #}
-  <script>
+  <script type="module">
     var hideButton = document.querySelector('.js-hide')
     var cookieBanner = document.querySelector(".govuk-cookie-banner")
 

packages/govuk-frontend-review/src/views/full-page-examples/cookie-banner-server-side/index.njk

@@ -188,7 +188,7 @@ notes: >-
   {# As the cookie banner component does not currently include JavaScript, we
     have to take care of the 'Hide' button to make progressive enhancement in
     the example functional #}
-  <script>
+  <script type="module">
     var hideButton = document.querySelector('.js-hide')
     var cookieBanner = document.querySelector(".govuk-cookie-banner")
     var confirmationBanner = document.querySelector('.js-confirmation-banner')

packages/govuk-frontend-review/src/views/layouts/_generic.njk

@@ -15,6 +15,6 @@
 {% set mainClasses = 'govuk-main-wrapper--auto-spacing' %}
 
 {% block bodyEnd %}
-  <script src="/javascripts/all.min.js"></script>
-  <script>window.GOVUKFrontend.initAll()</script>
+  <script type="module" src="/javascripts/all.min.js"></script>
+  <script type="module">window.GOVUKFrontend.initAll()</script>
 {% endblock %}

packages/govuk-frontend-review/src/views/layouts/layout.njk

@@ -11,9 +11,11 @@
 {% block bodyEnd %}
   {{ super() }}
   {% block scripts %}
-    <script src="/vendor/iframe-resizer/iframeResizer.min.js"></script>
+    <script src="/vendor/iframe-resizer/iframeResizer.min.js" defer></script>
     <script>
-      window.iFrameResize({}, '.js-component-preview')
+      document.addEventListener('DOMContentLoaded', function () {
+        window.iFrameResize({}, '.js-component-preview')
+      })
     </script>
   {% endblock %}
 {% endblock %}

packages/govuk-frontend-review/src/views/tests/boilerplate.njk

@@ -12,6 +12,6 @@
       Used during testing to inject rendered components and test specific configurations
     </p>
     <div id="slot"></div>
-    <script src="/javascripts/all.min.js"></script>
+    <script type="module" src="/javascripts/all.min.js"></script>
   </body>
 </html>

packages/govuk-frontend/README.md

@@ -51,13 +51,13 @@ initialising Javascript in your application to ensure that all users can use it
 You can include Javascript for all components either by copying the `all.js` from `node_modules/govuk-frontend/dist/govuk/` into your application or referencing the file directly:
 
 ```html
-<script src="<path-to-govuk-frontend-all-file>/all.js"></script>
+<script type="module" src="<path-to-govuk-frontend-all-file>/all.js"></script>
 ```
 
 Next you need to initialise the script by adding:
 
 ```html
-<script>window.GOVUKFrontend.initAll()</script>
+<script type="module">window.GOVUKFrontend.initAll()</script>
 ```
 
 [More details on importing Javascript and advanced options](https://frontend.design-system.service.gov.uk/importing-css-assets-and-javascript/#javascript)

packages/govuk-frontend/rollup.release.config.mjs

@@ -34,7 +34,6 @@ export default defineConfig(({ i: input }) => ({
         },
 
         // Compatibility workarounds
-        ecma: 5,
         safari10: true
       })
     ],

packages/govuk-frontend/src/govuk/components/character-count/character-count.mjs

@@ -193,11 +193,13 @@ CharacterCount.prototype.init = function () {
   this.bindChangeEvents()
 
   // When the page is restored after navigating 'back' in some browsers the
-  // state of the character count is not restored until *after* the
-  // DOMContentLoaded event is fired, so we need to manually update it after the
-  // pageshow event.
+  // state of form controls is not restored until *after* the DOMContentLoaded
+  // event is fired, so we need to sync after the pageshow event.
   window.addEventListener('pageshow', this.updateCountMessage.bind(this))
 
+  // Although we've set up handlers to sync state on the pageshow event, init
+  // could be called after those events have fired, for example if they are
+  // added to the page dynamically, so update now too.
   this.updateCountMessage()
 }
 

packages/govuk-frontend/src/govuk/components/checkboxes/checkboxes.mjs

@@ -65,9 +65,9 @@ Checkboxes.prototype.init = function () {
   // event is fired, so we need to sync after the pageshow event.
   window.addEventListener('pageshow', this.syncAllConditionalReveals.bind(this))
 
-  // Although we've set up handlers to sync state on the pageshow or
-  // DOMContentLoaded event, init could be called after those events have fired,
-  // for example if they are added to the page dynamically, so sync now too.
+  // Although we've set up handlers to sync state on the pageshow event, init
+  // could be called after those events have fired, for example if they are
+  // added to the page dynamically, so sync now too.
   this.syncAllConditionalReveals()
 
   // Handle events

packages/govuk-frontend/src/govuk/components/radios/radios.mjs

@@ -65,9 +65,9 @@ Radios.prototype.init = function () {
   // event is fired, so we need to sync after the pageshow event.
   window.addEventListener('pageshow', this.syncAllConditionalReveals.bind(this))
 
-  // Although we've set up handlers to sync state on the pageshow or
-  // DOMContentLoaded event, init could be called after those events have fired,
-  // for example if they are added to the page dynamically, so sync now too.
+  // Although we've set up handlers to sync state on the pageshow event, init
+  // could be called after those events have fired, for example if they are
+  // added to the page dynamically, so sync now too.
   this.syncAllConditionalReveals()
 
   // Handle events