PP-13452 remove nunjucksify dependency from build toolchain

- bundle nunjucks in clientside code and inline multiselect template
alphagov · Jan 6, 2025 · e749ad6 · e749ad6
1 parent 18df97b
commit e749ad6
Show file tree

Hide file tree

Showing 6 changed files with 61 additions and 90 deletions.
diff --git a/Gruntfile.js b/Gruntfile.js
@@ -105,15 +105,7 @@ module.exports = function (grunt) {
       options: {
         browserifyOptions: {
           standalone: 'module'
-        },
-        transform: [
-          [
-            'nunjucksify',
-            {
-              extension: '.njk'
-            }
-          ]
-        ]
+        }
       }
     },
 

diff --git a/app/browsered/multi-select.js b/app/browsered/multi-select.js
@@ -1,9 +1,33 @@
 // TODO: we should probably do some browser testing in this project to prove this all works as intended
-
-const multiSelect = require('../views/includes/multi-select.njk')
-
 // Polyfills introduced as a temporary fix to make Smoketests pass. See PP-3489
 require('./polyfills')
+const nunjucks = require('nunjucks')
+
+const multiSelectTemplate = `
+<div id="{{ id }}__container" class="multi-select">
+  <button type="button"
+          class="multi-select__title"
+          id="{{ id }}" aria-expanded="false">
+    <div><span class="govuk-visually-hidden">Currently selected: </span><span
+        class="multi-select-current-selections"></span></div>
+  </button>
+  <div role="group" aria-labelledby="option-select-title-{{ name }}"
+       class="multi-select-dropdown"
+       id="list-of-sectors-{{ name }}"
+       style="visibility:hidden;">
+    <button type="button" class="govuk-button govuk-button--secondary multi-select-dropdown__close-button">Close</button>
+    <div class="multi-select-dropdown__inner-container govuk-checkboxes govuk-checkboxes--small" data-module="govuk-checkboxes">
+      {% for item in items %}
+        <div class="govuk-checkboxes__item">
+          <input class="govuk-checkboxes__input" name="{{ name }}" value="{{ item.value }}" id="{{ item.id }}"
+                 type="checkbox" {% if item.checked %}checked{% endif %}>
+          <label for="{{ item.id }}" class="govuk-label govuk-checkboxes__label">{{ item.text }}</label>
+        </div>
+      {% endfor %}
+    </div>
+  </div>
+</div>
+`
 
 const MAXIMUM_VISIBLE_ITEMS = 8.5 // Maximum amount of items to show in dropdown
 const MINIMUM_VISIBLE_ITEMS = 3.5 // Minimum amount of items to show in dropdown (assuming total is larger than this value)
@@ -43,7 +67,7 @@ function progressivelyEnhanceSelects () {
         return { value, id, checked, text }
       })
     }
-    select.outerHTML = multiSelect(configuration)
+    select.outerHTML = nunjucks.renderString(multiSelectTemplate, configuration)
     const newMultiSelect = document.getElementById(`${configuration.id}__container`)
 
     const openButton = [...newMultiSelect.querySelectorAll(OPEN_BUTTON_SELECTOR)][0]
@@ -53,20 +77,6 @@ function progressivelyEnhanceSelects () {
     const dropdown = [...newMultiSelect.querySelectorAll(DROPDOWN_SELECTOR)][0]
     const scrollContainer = [...newMultiSelect.querySelectorAll(SCROLL_CONTAINER_SELECTOR)][0]
 
-    // close if user clicks outside the dropdown
-    document.addEventListener('click', (event) => {
-      const dropdowns = document.querySelectorAll(DROPDOWN_SELECTOR)
-      dropdowns.forEach(dropdown => {
-        if (!dropdown.contains(event.target) &&
-          !event.target.closest(OPEN_BUTTON_SELECTOR)) {
-          dropdown.style.visibility = 'hidden'
-          dropdown.closest(TOP_LEVEL_SELECTOR)
-            .querySelector(OPEN_BUTTON_SELECTOR)
-            .setAttribute('aria-expanded', false)
-        }
-      })
-    }, false)
-
     openButton.addEventListener('click', onOpenButtonClick, false)
     closeButton.addEventListener('click', onCloseButtonClick, false)
     items.forEach(item => {
@@ -82,6 +92,7 @@ function progressivelyEnhanceSelects () {
   })
 
   closeMultiSelectOnEscapeKeypress()
+  closeMultiSelectOnOutOfBoundsClick()
 }
 
 const closeMultiSelectOnEscapeKeypress = function () {
@@ -102,6 +113,22 @@ const closeMultiSelectOnEscapeKeypress = function () {
   }
 }
 
+const closeMultiSelectOnOutOfBoundsClick = function () {
+  // close if user clicks outside the dropdown
+  document.addEventListener('click', (event) => {
+    const dropdowns = document.querySelectorAll(DROPDOWN_SELECTOR)
+    dropdowns.forEach(dropdown => {
+      if (!dropdown.contains(event.target) &&
+        !event.target.closest(OPEN_BUTTON_SELECTOR)) {
+        dropdown.style.visibility = 'hidden'
+        dropdown.closest(TOP_LEVEL_SELECTOR)
+          .querySelector(OPEN_BUTTON_SELECTOR)
+          .setAttribute('aria-expanded', false)
+      }
+    })
+  }, false)
+}
+
 const onCloseButtonClick = event => {
   const { target } = event
   event.stopPropagation()

diff --git a/app/utils/logger.js b/app/utils/logger.js
@@ -24,11 +24,11 @@ const logger = createLogger({
   ]
 })
 
-const nsDebugFormat = printf(({ level, message, timestamp }) => {
+const simpleLoggingFormat = printf(({ level, message, timestamp, ...metadata }) => {
   return `${timestamp} [${level}]: ${message}`
 })
 
-const nsDebugLogger = createLogger({
+const simpleLogger = createLogger({
   format: combine(
     colorize({
       colors: {
@@ -41,7 +41,7 @@ const nsDebugLogger = createLogger({
     timestamp({
       format: 'YYYY-MM-DD HH:mm:ss'
     }),
-    nsDebugFormat
+    simpleLoggingFormat
   ),
   transports: [
     new transports.Console({
@@ -50,14 +50,9 @@ const nsDebugLogger = createLogger({
   ]
 })
 
-const nsDebug = process.env.GOVUK_PAY__USE_BASIC_LOGGER === 'true'
-
 module.exports = (loggerName) => {
   if (process.env.GOVUK_PAY__USE_BASIC_LOGGER === 'true') {
-    return console
+    return simpleLogger
   }
-  const childLogger = nsDebug
-    ? nsDebugLogger.child({ logger_name: loggerName })
-    : logger.child({ logger_name: loggerName })
-  return addSentryToErrorLevel(childLogger)
+  return addSentryToErrorLevel(logger.child({ logger_name: loggerName }))
 }
diff --git a/app/views/includes/multi-select.njk b/app/views/includes/multi-select.njk
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -95,7 +95,7 @@
   "dependencies": {
     "@aws-sdk/client-s3": "3.693.0",
     "@aws-sdk/s3-request-presigner": "3.693.0",
-    "@govuk-pay/pay-js-commons": "^6.0.15",
+    "@govuk-pay/pay-js-commons": "^6.0.22",
     "@govuk-pay/pay-js-metrics": "^1.0.6",
     "@sentry/node": "6.12.0",
     "accessible-autocomplete": "2.0.4",
@@ -171,7 +171,6 @@
     "nock": "13.3.3",
     "nodemon": "3.0.1",
     "notp": "2.0.3",
-    "nunjucksify": "2.2.0",
     "portfinder": "1.0.32",
     "proxyquire": "~2.1.0",
     "sass": "^1.66.1",