update govuk scripts to use esm modules and update scriptsrc shas

cabinetoffice · Jul 18, 2024 · f0fb126 · f0fb126
1 parent 21062db
commit f0fb126
Show file tree

Hide file tree

Showing 5 changed files with 30 additions and 30 deletions.
diff --git a/src/config/helmet.ts b/src/config/helmet.ts
@@ -16,8 +16,8 @@ export const configureHelmet = (app: express.Application) => {
                 styleSrc: ["'self'", "'unsafe-hashes'", "'sha256-6FWIojjtZwiNizws7ImlHjGH3DA5yMh5x4c+/4UVpXk='", config.CDN_HOST],
                 scriptSrc: [
                     "'self'",
-                    "'sha256-l1eTVSK8DTnK8+yloud7wZUqFrI0atVo6VlC6PJvYaQ='",
-                    "'sha256-+6WnXIl4mbFTCARd8N3COQmT3bJJmo32N8q8ZSQAIcU='",
+                    "'sha256-GUQ5ad8JK5KmEWmROf3LZd9ge94daqNvd8xy9YS1iDw='",
+                    "'sha256-rDMP7u4Lf+tIufrYmUZIhcf2T3WBD4Pweu0EXe+qaLA='",
                     config.CDN_HOST
                 ],
                 imgSrc: ["'self'", 'data:', config.CDN_HOST],

diff --git a/src/config/nunjucks.ts b/src/config/nunjucks.ts
@@ -8,7 +8,7 @@ export const configureNunjucks = (app: express.Application, viewsPath: string) =
     log.info(`Set nunjucks configurations and where nunjucks templates should resolve to: ${viewsPath}`);
 
     const nunjucksEnv = nunjucks.configure(
-        [viewsPath, 'node_modules/govuk-frontend', 'node_modules/govuk-frontend/components'],
+        [viewsPath, 'node_modules/govuk-frontend/dist', 'node_modules/govuk-frontend/dist/components'],
         {
             autoescape: true,
             express: app

diff --git a/src/views/layout.html b/src/views/layout.html
@@ -1,23 +1,23 @@
-{% extends "dist/govuk/template.njk" %}
+{% extends "govuk/template.njk" %}
 
-{% from "dist/govuk/components/footer/macro.njk"                 import govukFooter %}
-{% from "dist/govuk/components/header/macro.njk"                 import govukHeader %}
-{% from "dist/govuk/components/error-summary/macro.njk"          import govukErrorSummary %}
-{% from "dist/govuk/components/panel/macro.njk"                  import govukPanel %}
-{% from "dist/govuk/components/input/macro.njk"                  import govukInput %}
-{% from "dist/govuk/components/fieldset/macro.njk"               import govukFieldset %}
-{% from "dist/govuk/components/button/macro.njk"                 import govukButton %}
-{% from "dist/govuk/components/back-link/macro.njk"              import govukBackLink %}
-{% from "dist/govuk/components/radios/macro.njk"                 import govukRadios %}
-{% from "dist/govuk/components/date-input/macro.njk"             import govukDateInput %}
-{% from "dist/govuk/components/textarea/macro.njk"               import govukTextarea %}
-{% from "dist/govuk/components/radios/macro.njk"                 import govukRadios %}
-{% from "dist/govuk/components/inset-text/macro.njk"             import govukInsetText %}
-{% from "dist/govuk/components/summary-list/macro.njk"           import govukSummaryList %}
-{% from "dist/govuk/components/select/macro.njk"                 import govukSelect %}
-{% from "dist/govuk/components/cookie-banner/macro.njk"          import govukCookieBanner %}
-{% from "dist/govuk/components/phase-banner/macro.njk"           import govukPhaseBanner %}
-{% from "dist/govuk/components/notification-banner/macro.njk"    import govukNotificationBanner %}
+{% from "govuk/components/footer/macro.njk"                 import govukFooter %}
+{% from "govuk/components/header/macro.njk"                 import govukHeader %}
+{% from "govuk/components/error-summary/macro.njk"          import govukErrorSummary %}
+{% from "govuk/components/panel/macro.njk"                  import govukPanel %}
+{% from "govuk/components/input/macro.njk"                  import govukInput %}
+{% from "govuk/components/fieldset/macro.njk"               import govukFieldset %}
+{% from "govuk/components/button/macro.njk"                 import govukButton %}
+{% from "govuk/components/back-link/macro.njk"              import govukBackLink %}
+{% from "govuk/components/radios/macro.njk"                 import govukRadios %}
+{% from "govuk/components/date-input/macro.njk"             import govukDateInput %}
+{% from "govuk/components/textarea/macro.njk"               import govukTextarea %}
+{% from "govuk/components/radios/macro.njk"                 import govukRadios %}
+{% from "govuk/components/inset-text/macro.njk"             import govukInsetText %}
+{% from "govuk/components/summary-list/macro.njk"           import govukSummaryList %}
+{% from "govuk/components/select/macro.njk"                 import govukSelect %}
+{% from "govuk/components/cookie-banner/macro.njk"          import govukCookieBanner %}
+{% from "govuk/components/phase-banner/macro.njk"           import govukPhaseBanner %}
+{% from "govuk/components/notification-banner/macro.njk"    import govukNotificationBanner %}
 
 {% block head %}
   <link rel="stylesheet" type="text/css" media="all" href="//{{CDN_HOST}}/govuk-frontend/v5.3.0/govuk-frontend-5.3.0.min.css">
@@ -87,6 +87,9 @@
   {% if FEATURE_FLAG_ENABLE_COOKIE_BANNER == "true" %}
     <script src="/assets/javascripts/cookies.js"></script>
   {% endif %}
-  <script src="//{{CDN_HOST}}/govuk-frontend/v5.3.0/govuk-frontend-5.3.0.min.js"></script>
-  <script>window.GOVUKFrontend.initAll()</script>
+  <script type="module" src="//{{CDN_HOST}}/govuk-frontend/v5.3.0/govuk-frontend-5.3.0.min.js"></script>
+  <script type="module">
+    import { initAll } from '//{{CDN_HOST}}/govuk-frontend/v5.3.0/govuk-frontend.min.js'
+    initAll()
+  </script>
 {% endblock %}
diff --git a/test/mock/data.ts b/test/mock/data.ts
@@ -110,11 +110,8 @@ export const MOCK_HELMET_VALUE = {
             styleSrc: ["'self'", "'unsafe-hashes'", "'sha256-6FWIojjtZwiNizws7ImlHjGH3DA5yMh5x4c+/4UVpXk='", config.CDN_HOST],
             scriptSrc: [
                 "'self'",
-                // Hash of the inline scripts respectively for:
-                // `<script> document.body.className = ((document.body.className) ? document.body.className + ' js-enabled' : 'js-enabled');</script>`
-                "'sha256-l1eTVSK8DTnK8+yloud7wZUqFrI0atVo6VlC6PJvYaQ='",
-                // `<script>window.GOVUKFrontend.initAll()</script>`
-                "'sha256-+6WnXIl4mbFTCARd8N3COQmT3bJJmo32N8q8ZSQAIcU='",
+                "'sha256-GUQ5ad8JK5KmEWmROf3LZd9ge94daqNvd8xy9YS1iDw='",
+                "'sha256-rDMP7u4Lf+tIufrYmUZIhcf2T3WBD4Pweu0EXe+qaLA='",
                 config.CDN_HOST
             ],
             imgSrc: ["'self'", 'data:', config.CDN_HOST],

diff --git a/test/unit/config/nunjucks.spec.ts b/test/unit/config/nunjucks.spec.ts
@@ -32,7 +32,7 @@ describe('Nunjucks Configuration test suites', () => {
         configureNunjucks(MOCK_EXPRESS_APP, MOCK_VIEWS_PATH);
 
         expect(nunjucks.configure).toHaveBeenCalledWith(
-            [MOCK_VIEWS_PATH, 'node_modules/govuk-frontend', 'node_modules/govuk-frontend/components'],
+            [MOCK_VIEWS_PATH, 'node_modules/govuk-frontend/dist', 'node_modules/govuk-frontend/dist/components'],
             {
                 autoescape: true,
                 express: MOCK_EXPRESS_APP