Use <script type="module"> to defer inline scripts

Since `<script defer>` is not available for inline scripts, this change ensures inline scripts are also deferred until after `window.GOVUKPrototypeKit` is available
alphagov · Sep 18, 2023 · 7291342 · 7291342
1 parent a710825
commit 7291342
Show file tree

Hide file tree

Showing 6 changed files with 17 additions and 18 deletions.
diff --git a/cypress/e2e/plugins/0-mock-plugin-tests/install-plugin-via-cli-test.cypress.js b/cypress/e2e/plugins/0-mock-plugin-tests/install-plugin-via-cli-test.cypress.js
@@ -21,7 +21,7 @@ const pluginBazViewMarkup = `
 {% endblock %}
 
 {% block pageScripts %}
-<script>
+<script type="module">
   window.GOVUKPrototypeKit.documentReady(() => {
     new window.BAZ.Modules.PluginBaz('.test-baz')
   })

diff --git a/cypress/e2e/plugins/0-mock-plugin-tests/multi-combined-plugin-test.cypress.js b/cypress/e2e/plugins/0-mock-plugin-tests/multi-combined-plugin-test.cypress.js
@@ -24,7 +24,7 @@ const pluginFooBarCombinedViewMarkup = `
 {% endblock %}
 
 {% block pageScripts %}
-<script>
+<script type="module">
   window.GOVUKPrototypeKit.documentReady(() => {
     new window.BAR.Modules.PluginBar('.test-bar')
     new window.FOO.Modules.PluginFoo('.test-foo')

diff --git a/cypress/e2e/plugins/0-mock-plugin-tests/multi-plugin-test.cypress.js b/cypress/e2e/plugins/0-mock-plugin-tests/multi-plugin-test.cypress.js
@@ -22,7 +22,7 @@ const pluginFooBarSeparatedViewMarkup = `
 {% endblock %}
 
 {% block pageScripts %}
-<script>
+<script type="module">
   window.GOVUKPrototypeKit.documentReady(() => {
     new window.FOO.Modules.PluginFoo('.test-foo')
     new window.BAR.Modules.PluginBar('.test-bar')

diff --git a/cypress/e2e/plugins/0-mock-plugin-tests/single-plugin-test.cypress.js b/cypress/e2e/plugins/0-mock-plugin-tests/single-plugin-test.cypress.js
@@ -22,7 +22,7 @@ const pluginFooViewMarkup = `
 {% endblock %}
 
 {% block pageScripts %}
-<script>
+<script type="module">
   window.GOVUKPrototypeKit.documentReady(() => {
     new window.FOO.Modules.PluginFoo('.test-foo')
   })

diff --git a/lib/nunjucks/views/error-handling/server-error.njk b/lib/nunjucks/views/error-handling/server-error.njk
@@ -55,7 +55,7 @@
 
 
 {% block pageScripts %}
-<script>
+<script type="module">
   ;(() => {
     const toggleErrorStack = (event) => {
       const button = event.target

diff --git a/lib/nunjucks/views/manage-prototype/plugin-install-or-uninstall.njk b/lib/nunjucks/views/manage-prototype/plugin-install-or-uninstall.njk
@@ -111,18 +111,17 @@
 {% endblock %}
 
 {% block pageScripts %}
-  <script>
-    if (window.Promise) {
-      // Dynamically load and execute the script
-      const managePluginsScript = document.createElement('script')
-      managePluginsScript.addEventListener('load', () => {
-        window.GOVUKPrototypeKit.documentReady(window.GOVUKPrototypeKit.internal.managePlugins.init)
-      })
-      managePluginsScript.setAttribute('src', '/plugin-assets/govuk-prototype-kit/lib/assets/javascripts/manage-prototype/manage-plugins.js')
-      document.body.appendChild(managePluginsScript)
-    } else {
-      // Display the page as if javascript was not enabled
-      document.body.classList.remove('js-enabled')
-    }
+  <script type="module">
+    // Dynamically load and execute the script
+    const managePluginsScript = document.createElement('script')
+    managePluginsScript.addEventListener('load', () => {
+      window.GOVUKPrototypeKit.documentReady(window.GOVUKPrototypeKit.internal.managePlugins.init)
+    })
+    managePluginsScript.setAttribute('src', '/plugin-assets/govuk-prototype-kit/lib/assets/javascripts/manage-prototype/manage-plugins.js')
+    document.body.appendChild(managePluginsScript)
+  </script>
+  <script nomodule>
+    // Display the page as if javascript was not enabled
+    document.body.classList.remove('js-enabled')
   </script>
 {% endblock %}