Update review app to import { initAll } from ES module bundle

Author: colinrotherham

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

@@ -14,7 +14,7 @@ export default defineConfig(({ i: input }) => ({
    * Output options
    */
   output: {
-    format: 'iife',
+    format: 'es',
 
     /**
      * Output plugins

packages/govuk-frontend-review/src/javascripts/all.mjs

@@ -1,4 +1 @@
-import * as GOVUKFrontend from 'govuk-frontend'
-
-// @ts-expect-error Manually add globals to window for tests
-window.GOVUKFrontend = GOVUKFrontend
+export * from 'govuk-frontend'

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

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

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

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

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

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

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

@@ -937,18 +937,19 @@
 {% endblock %}
 
 {% block bodyEnd %}
-  <script type="module" src="/javascripts/all.min.js"></script>
+  <script type="module" src="/javascripts/all.bundle.min.mjs"></script>
   <script type="module">
-    window.GOVUKFrontend.initAll({
+    import { initAll } from '/javascripts/all.bundle.min.mjs'
+    initAll({
       accordion: {
         i18n: {
-          showAllSections: "Dangos adrannau",
-          hideAllSections: "Cuddio adrannau",
+          showAllSections: 'Dangos adrannau',
+          hideAllSections: 'Cuddio adrannau',
         },
-        "i18n.showSection": "Dangos",
-        "i18n.showSectionAriaLabel": "Dangos adran",
-        "i18n.hideSection": "Cuddio",
-        "i18n.hideSectionAriaLabel": "Cuddio adran"
+        'i18n.showSection': 'Dangos',
+        'i18n.showSectionAriaLabel': 'Dangos adran',
+        'i18n.hideSection': 'Cuddio',
+        'i18n.hideSectionAriaLabel': 'Cuddio adran'
       }
     })
   </script>

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

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

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

@@ -14,5 +14,5 @@
 {% endblock %}
 
 {% block scripts %}
-  <script type="module" src="/javascripts/all.min.js"></script>
+  <script type="module" src="/javascripts/all.bundle.min.mjs"></script>
 {% endblock %}

packages/govuk-frontend-review/tasks/scripts.mjs

@@ -18,9 +18,9 @@ export const compile = (options) => gulp.series(
       destPath: join(options.destPath, 'javascripts'),
       configPath: join(options.basePath, 'rollup.config.mjs'),
 
-      // Rename with `*.min.js` extension
+      // Rename with `*.bundle.min.mjs` extension
       filePath ({ dir, name }) {
-        return join(dir, `${name}.min.js`)
+        return join(dir, `${name}.bundle.min.mjs`)
       }
     })
   ),