Merge pull request #4023 from alphagov/bump-npm-modules

Bump gulp & gulp-sass to latest versions

Makefile

@@ -25,7 +25,7 @@ VIRTUALENV_ROOT := $(shell [ -z $$VIRTUAL_ENV ] && echo $$(pwd)/venv || echo $$V
 .PHONY: bootstrap
 bootstrap: generate-version-file ## Set up everything to run the app
 	pip3 install -r requirements_for_test.txt
-	npm install && npm rebuild node-sass && npm run build
+	npm install && npm run build
 
 .PHONY: run-flask
 run-flask:  ## Run flask

app/assets/javascripts/updateContent.js

@@ -2,7 +2,6 @@
   "use strict";
 
   var queues = {};
-  var dd = new global.diffDOM();
   var defaultInterval = 2000;
   var interval = 0;
 
@@ -11,10 +10,18 @@
       1000
   ));
 
-  var getRenderer = $component => response => dd.apply(
-    $component.get(0),
-    dd.diff($component.get(0), $(response[$component.data('key')]).get(0))
-  );
+  var getRenderer = $component => {
+    var key = $component.data('key'); // use closure to retain key when component is replaced
+    return response => {
+      $component = $(
+        global.domdiff(
+          $component.parent().get(0),
+          [$component.get(0)],
+          [$(response[key]).get(0)]
+        )[0]
+      );
+    };
+  };
 
   var getQueue = resource => (
     queues[resource] = queues[resource] || []

gulpfile.js

@@ -20,7 +20,7 @@ plugins.cssUrlAdjuster = require('gulp-css-url-adjuster');
 plugins.jshint = require('gulp-jshint');
 plugins.prettyerror = require('gulp-prettyerror');
 plugins.rollup = require('gulp-better-rollup')
-plugins.sass = require('gulp-sass');
+plugins.sass = require('gulp-sass')(require('sass'));
 plugins.sassLint = require('gulp-sass-lint');
 plugins.uglify = require('gulp-uglify');
 
@@ -146,7 +146,7 @@ const javascripts = () => {
       paths.npm + 'hogan.js/dist/hogan-3.0.2.js',
       paths.npm + 'jquery/dist/jquery.min.js',
       paths.npm + 'query-command-supported/dist/queryCommandSupported.min.js',
-      paths.npm + 'diff-dom/diffDOM.js',
+      paths.npm + 'domdiff/min.js',
       paths.npm + 'timeago/jquery.timeago.js',
       paths.npm + 'textarea-caret/index.js',
       paths.npm + 'cbor-js/cbor.js'
@@ -207,8 +207,7 @@ const sass = () => {
       paths.src + '/stylesheets/print.scss'
     ])
     .pipe(plugins.prettyerror())
-    .pipe(plugins.sass({
-      outputStyle: 'nested',
+    .pipe(plugins.sass.sync({
       includePaths: [
         paths.npm + 'govuk-elements-sass/public/sass/',
         paths.toolkit + 'stylesheets/',

package.json

@@ -3,7 +3,7 @@
   "version": "0.0.1",
   "description": "Admin front end for GOV.UK Notify",
   "engines": {
-    "node": "10.15.3"
+    "node": ">=10.15.3"
   },
   "scripts": {
     "test": "gulp lint && jest --config tests/javascripts/jest.config.js tests/javascripts",
@@ -23,24 +23,25 @@
     "@babel/preset-env": "7.4.2",
     "cbor-js": "0.1.0",
     "del": "5.1.0",
-    "diff-dom": "2.5.1",
+    "domdiff": "2.2.2",
     "govuk_frontend_toolkit": "8.1.0",
     "govuk-elements-sass": "3.1.2",
     "govuk-frontend": "2.13.0",
-    "gulp": "4.0.0",
+    "gulp": "4.0.2",
     "gulp-add-src": "1.0.0",
     "gulp-babel": "8.0.0",
     "gulp-better-rollup": "4.0.1",
-    "gulp-clean-css": "4.2.0",
+    "gulp-clean-css": "4.3.0",
     "gulp-concat": "2.6.1",
-    "gulp-include": "2.3.1",
-    "gulp-sass": "4.0.2",
+    "gulp-include": "2.4.1",
+    "gulp-sass": "5.0.0",
     "gulp-uglify": "3.0.2",
     "hogan": "1.0.2",
     "jquery": "3.5.0",
     "leaflet": "1.6.0",
     "query-command-supported": "1.0.0",
     "rollup": "1.23.1",
+    "sass": "1.32.7",
     "streamqueue": "1.1.2",
     "textarea-caret": "3.1.0",
     "timeago": "1.6.5"
@@ -48,7 +49,7 @@
   "devDependencies": {
     "gulp-css-url-adjuster": "0.2.3",
     "gulp-jshint": "2.1.0",
-    "gulp-prettyerror": "1.2.1",
+    "gulp-prettyerror": "2.0.0",
     "gulp-sass-lint": "1.4.0",
     "jest": "24.7.1",
     "jest-date-mock": "^1.0.8",

tests/javascripts/updateContent.test.js

@@ -31,9 +31,13 @@ beforeAll(() => {
 
   $.ajax.mockImplementation(() => jqueryAJAXReturnObj);
 
-  // because we're running in node, diffDOM executes as a module
-  // in the normal browser environment it will attach to window so we replicate that here
-  window.diffDOM = require('../../node_modules/diff-dom/diffDOM.js');
+  // using require to execute the version we use in our our frontend build here can't add
+  // the domdiff variable to this scope like it does when executed in browsers because
+  // that version doesn't export it
+  // we use CommonJS version instead because it does (as the default property)
+  // see https://nodejs.org/en/knowledge/getting-started/what-is-require/ for more info
+  // also, we're not a browser so we need to manually attach domdiff to window
+  window.domdiff = require('domdiff/cjs').default;
   require('../../app/assets/javascripts/updateContent.js');
 
 });
@@ -44,52 +48,58 @@ afterAll(() => {
 
 describe('Update content', () => {
 
+  let HTMLString;
+  let initialHTMLString;
+
   beforeEach(() => {
 
     // store HTML in string to allow use in AJAX responses
     HTMLString = `
-      <div data-module="update-content" data-resource="${resourceURL}" data-key="${updateKey}" aria-live="polite">
-        <div class="bottom-gutter ajax-block-container">
-          <ul role="tablist" class="pill">
-            <li aria-selected="true" role="tab">
-              <div class="pill-selected-item" tabindex="0">
-                <div class="big-number-smaller">
-                  <div class="big-number-number">0</div>
-                </div>
-                <div class="pill-label">total</div>
+      <div class="bottom-gutter ajax-block-container">
+        <ul role="tablist" class="pill">
+          <li aria-selected="true" role="tab">
+            <div class="pill-selected-item" tabindex="0">
+              <div class="big-number-smaller">
+                <div class="big-number-number">0</div>
               </div>
-            </li>
-            <li aria-selected="false" role="tab">
-              <a class="govuk-link govuk-link--no-visited-state" href="/services/6658542f-0cad-491f-bec8-ab8457700ead/notifications/email?status=sending">
-                <div class="big-number-smaller">
-                  <div class="big-number-number">0</div>
-                </div>
-                <div class="pill-label">sending</div>
-              </a>
-            </li>
-            <li aria-selected="false" role="tab">
-              <a class="govuk-link govuk-link--no-visited-state" href="/services/6658542f-0cad-491f-bec8-ab8457700ead/notifications/email?status=delivered">
-                <div class="big-number-smaller">
-                  <div class="big-number-number">0</div>
-                </div>
-                <div class="pill-label">delivered</div>
-              </a>
-            </li>
-            <li aria-selected="false" role="tab">
-              <a class="govuk-link govuk-link--no-visited-state" href="/services/6658542f-0cad-491f-bec8-ab8457700ead/notifications/email?status=failed">
-                <div class="big-number-smaller">
-                  <div class="big-number-number">0</div>
-                </div>
-                <div class="pill-label">failed</div>
-              </a>
-            </li>
-          </ul>
-        </div>
+              <div class="pill-label">total</div>
+            </div>
+          </li>
+          <li aria-selected="false" role="tab">
+            <a class="govuk-link govuk-link--no-visited-state" href="/services/6658542f-0cad-491f-bec8-ab8457700ead/notifications/email?status=sending">
+              <div class="big-number-smaller">
+                <div class="big-number-number">0</div>
+              </div>
+              <div class="pill-label">sending</div>
+            </a>
+          </li>
+          <li aria-selected="false" role="tab">
+            <a class="govuk-link govuk-link--no-visited-state" href="/services/6658542f-0cad-491f-bec8-ab8457700ead/notifications/email?status=delivered">
+              <div class="big-number-smaller">
+                <div class="big-number-number">0</div>
+              </div>
+              <div class="pill-label">delivered</div>
+            </a>
+          </li>
+          <li aria-selected="false" role="tab">
+            <a class="govuk-link govuk-link--no-visited-state" href="/services/6658542f-0cad-491f-bec8-ab8457700ead/notifications/email?status=failed">
+              <div class="big-number-smaller">
+                <div class="big-number-number">0</div>
+              </div>
+              <div class="pill-label">failed</div>
+            </a>
+          </li>
+        </ul>
       </div>`;
 
-    document.body.innerHTML = HTMLString;
 
-    // default the response to match the existing content
+    initialHTMLString = `<div data-module="update-content" data-resource="${resourceURL}" data-key="${updateKey}" aria-live="polite">
+                        ${HTMLString}
+                        </div>`;
+
+    document.body.innerHTML = initialHTMLString;
+
+    // default the response to match the content inside div[data-module]
     responseObj[updateKey] = HTMLString;
 
   });