Merge branch 'main' into 1810-clean-up-data-viz-ui-component

.ds.baseline

@@ -133,7 +133,7 @@
         "filename": ".github/workflows/checks.yml",
         "hashed_secret": "5baa61e4c9b93f3f0682250b6cf8331b7ee68fd8",
         "is_verified": false,
-        "line_number": 68,
+        "line_number": 65,
         "is_secret": false
       },
       {
@@ -141,7 +141,7 @@
         "filename": ".github/workflows/checks.yml",
         "hashed_secret": "5baa61e4c9b93f3f0682250b6cf8331b7ee68fd8",
         "is_verified": false,
-        "line_number": 103,
+        "line_number": 99,
         "is_secret": false
       }
     ],
@@ -692,5 +692,5 @@
       }
     ]
   },
-  "generated_at": "2024-08-09T22:04:50Z"
+  "generated_at": "2024-08-08T19:45:34Z"
 }

.github/workflows/checks.yml

@@ -44,8 +44,6 @@ jobs:
         run: poetry run isort --check-only ./app ./tests
       - name: Check dead code
         run: make dead-code
-      - name: Run js lint
-        run: npm run lint
       - name: Run js tests
         run: npm test
       - name: Run py tests with coverage

gulpfile.js

@@ -1,15 +1,10 @@
-// GULPFILE
+const { src, dest, series } = require('gulp');
-// - - - - - - - - - - - - - - -
+const rollup = require('@rollup/stream');
-// This file processes all of the assets in the "src" folder
+const rollupPluginCommonjs = require('@rollup/plugin-commonjs');
-// and outputs the finished files in the "dist" folder.
+const rollupPluginNodeResolve = require('@rollup/plugin-node-resolve');
-
+const source = require('vinyl-source-stream');
-// 1. LIBRARIES
+const buffer = require('vinyl-buffer');
-// - - - - - - - - - - - - - - -
+const gulpMerge = require('gulp-merge');
-const { src, pipe, dest, series, parallel, watch } = require('gulp');
-const rollupPluginCommonjs = require('rollup-plugin-commonjs');
-const rollupPluginNodeResolve = require('rollup-plugin-node-resolve');
-const streamqueue = require('streamqueue');
-const stylish = require('jshint-stylish');
 const uswds = require("@uswds/compile");
 
 const plugins = {};
@@ -19,11 +14,8 @@ plugins.cleanCSS = require('gulp-clean-css');
 plugins.concat = require('gulp-concat');
 plugins.jshint = require('gulp-jshint');
 plugins.prettyerror = require('gulp-prettyerror');
-plugins.rollup = require('gulp-better-rollup')
 plugins.uglify = require('gulp-uglify');
 
-// 2. CONFIGURATION
-// - - - - - - - - - - - - - - -
 const paths = {
   src: 'app/assets/',
   dist: 'app/static/',
@@ -31,63 +23,25 @@ const paths = {
   toolkit: 'node_modules/govuk_frontend_toolkit/',
   govuk_frontend: 'node_modules/govuk-frontend/'
 };
-// Rewrite /static prefix for URLs in CSS files
-let staticPathMatcher = new RegExp('^\/static\/');
-if (process.env.NOTIFY_ENVIRONMENT == 'development') { // pass through if on development
-  staticPathMatcher = url => url;
-}
-
-// 3. TASKS
-// - - - - - - - - - - - - - - -
-
-// Move GOV.UK template resources
-
-const copy = {
-  error_pages: () => {
-    return src(paths.src + 'error_pages/**/*')
-      .pipe(dest(paths.dist + 'error_pages/'))
-  },
-  fonts: () => {
-    return src(paths.src + 'fonts/**/*')
-      .pipe(dest(paths.dist + 'fonts/'));
-  },
-  gtm: () => {
-    return src(paths.src + 'js/gtm_head.js')
-      .pipe(dest(paths.dist + 'js/'));
-  }
-};
-
-
-
 
 const javascripts = () => {
-  // JS from third-party sources
+  const vendored = rollup({
-  // We assume none of it will need to pass through Babel
+    input: paths.src + 'javascripts/modules/all.mjs',
-  const vendored = src(paths.src + 'javascripts/modules/all.mjs')
+    plugins: [
-    // Use Rollup to combine all JS in JS module format into a Immediately Invoked Function
+      rollupPluginNodeResolve({
-    // Expression (IIFE) to:
+        mainFields: ['module', 'main']
-    // - deliver it in one bundle
+      }),
-    // - allow it to run in browsers without support for JS Modules
+      rollupPluginCommonjs({
-    .pipe(plugins.rollup(
+        include: 'node_modules/**'
-      {
+      })
-        plugins: [
+    ],
-          // determine module entry points from either 'module' or 'main' fields in package.json
+    output: {
-          rollupPluginNodeResolve({
+      format: 'iife',
-            mainFields: ['module', 'main']
+      name: 'GOVUK'
-          }),
+    }
-          // gulp rollup runs on nodeJS so reads modules in commonJS format
+  })
-          // this adds node_modules to the require path so it can find the GOVUK Frontend modules
+    .pipe(source('all.mjs'))
-          rollupPluginCommonjs({
+    .pipe(buffer())
-            include: 'node_modules/**'
-          })
-        ]
-      },
-      {
-        format: 'iife',
-        name: 'GOVUK'
-      }
-    ))
-    // return a stream which pipes these files before the JS modules bundle
     .pipe(plugins.addSrc.prepend([
       paths.npm + 'hogan.js/dist/hogan-3.0.2.js',
       paths.npm + 'jquery/dist/jquery.min.js',
@@ -98,7 +52,6 @@ const javascripts = () => {
       paths.npm + 'd3/dist/d3.min.js'
     ]));
 
-  // JS local to this application
   const local = src([
     paths.toolkit + 'javascripts/govuk/modules.js',
     paths.toolkit + 'javascripts/govuk/show-hide-content.js',
@@ -123,128 +76,50 @@ const javascripts = () => {
     paths.src + 'javascripts/timeoutPopup.js',
     paths.src + 'javascripts/date.js',
     paths.src + 'javascripts/loginAlert.js',
+    paths.src + 'javascripts/main.js',
+    paths.src + 'javascripts/sampleChartDashboard.js',
     paths.src + 'javascripts/totalMessagesChart.js',
     paths.src + 'javascripts/activityChart.js',
-    paths.src + 'javascripts/main.js',
   ])
     .pipe(plugins.prettyerror())
     .pipe(plugins.babel({
       presets: ['@babel/preset-env']
     }));
 
-  // return single stream of all vinyl objects piped from the end of the vendored stream, then
+  return gulpMerge(vendored, local)
-  // those from the end of the local stream
-  return streamqueue({ objectMode: true }, vendored, local)
     .pipe(plugins.uglify())
     .pipe(plugins.concat('all.js'))
-    .pipe(dest(paths.dist + 'javascripts/'))
+    .pipe(dest(paths.dist + 'javascripts/'));
 };
 
-
+// Task to copy `gtm_head.js`
-// Copy images
+const copyGtmHead = () => {
-
+  return src(paths.src + 'js/gtm_head.js')
-const images = () => {
+    .pipe(dest(paths.dist + 'js/'));
-  return src([
-    paths.toolkit + 'images/**/*',
-    paths.govuk_frontend + 'assets/images/**/*',
-    paths.src + 'images/**/*',
-    paths.src + 'img/**/*',
-  ], {encoding: false})
-    .pipe(dest(paths.dist + 'images/'))
 };
 
-
+// Task to copy images
-const watchFiles = {
+const copyImages = () => {
-  javascripts: (cb) => {
+  return src(paths.src + 'images/**/*')
-    watch([paths.src + 'javascripts/**/*'], javascripts);
+    .pipe(dest(paths.dist + 'images/'));
-    cb();
-  },
-  images: (cb) => {
-    watch([paths.src + 'images/**/*'], images);
-    cb();
-  },
-  uswds: (cb) => {
-    watch([paths.src + 'sass/**/*'], uswds.watch);
-    cb();
-  },
-  self: (cb) => {
-    watch(['gulpfile.js'], defaultTask);
-    cb();
-  }
 };
 
-
+// Configure USWDS paths
-const lint = {
-  'js': (cb) => {
-    return src(
-      paths.src + 'javascripts/**/*.js'
-    )
-      .pipe(plugins.jshint())
-      .pipe(plugins.jshint.reporter(stylish))
-      .pipe(plugins.jshint.reporter('fail'))
-  }
-};
-
-
-// Default: compile everything
-const defaultTask = parallel(
-  parallel(
-    copy.fonts,
-    images
-  ),
-  series(
-    copy.error_pages,
-    series(
-      javascripts
-    ),
-    uswds.compile,
-    uswds.copyAssets,
-    copy.gtm
-  )
-);
-
-
-// Watch for changes and re-run tasks
-const watchForChanges = parallel(
-  watchFiles.javascripts,
-  watchFiles.images,
-  watchFiles.self
-);
-
-
-exports.default = defaultTask;
-
-exports.lint = series(lint.js);
-
-// Optional: recompile on changes
-exports.watch = series(defaultTask, watchForChanges);
-
-
-// 3. Compile USWDS
-
-/**
-* USWDS version
-* Set the major version of USWDS you're using
-* (Current options are the numbers 2 or 3)
-*/
 uswds.settings.version = 3;
+uswds.paths.dist.css = paths.dist + 'css';
+uswds.paths.dist.js = paths.dist + 'js';
+uswds.paths.dist.img = paths.dist + 'img';
+uswds.paths.dist.fonts = paths.dist + 'fonts';
+uswds.paths.dist.theme = paths.src + 'sass/uswds';
 
-/**
+// Task to compile USWDS styles
-* Path settings
+const styles = async () => {
-* Set as many as you need
+  await uswds.compile();
-*/
+};
-uswds.paths.dist.css = './app/static/css';
-uswds.paths.dist.js = './app/static/js';
-uswds.paths.dist.img = './app/static/img';
-uswds.paths.dist.fonts = './app/static/fonts';
-uswds.paths.dist.theme = './app/assets/sass/uswds';
 
-/**
+// Task to copy USWDS assets
-* Exports
+const copyAssets = async () => {
-* Add as many as you need
+  await uswds.copyAssets();
-*/
+};
-exports.init = uswds.init;
+
-exports.compile = uswds.compile;
+exports.default = series(styles, javascripts, copyGtmHead, copyImages, copyAssets);
-exports.copyAll = uswds.copyAll;
-exports.watch = uswds.watch;
-exports.copyAssets = uswds.copyAssets;

package.json

@@ -25,48 +25,48 @@
     "graceful-fs": "^4.2.11"
   },
   "dependencies": {
+    "@rollup/plugin-commonjs": "^26.0.1",
+    "@rollup/plugin-node-resolve": "^15.2.3",
+    "@rollup/stream": "^3.0.1",
     "@uswds/uswds": "^3.8.1",
     "cbor-js": "0.1.0",
     "d3": "^7.9.0",
     "govuk_frontend_toolkit": "^9.0.1",
     "govuk-frontend": "2.13.0",
+    "gulp-merge": "^0.1.1",
     "hogan": "1.0.2",
     "jquery": "3.7.1",
-    "morphdom": "^2.7.3",
+    "morphdom": "^2.7.4",
     "python": "^0.0.4",
     "query-command-supported": "1.0.0",
-    "sass-embedded": "^1.77.5",
+    "sass-embedded": "^1.77.8",
+    "socket.io-client": "^4.2.0",
     "textarea-caret": "3.1.0",
-    "timeago": "1.6.7"
+    "timeago": "1.6.7",
+    "vinyl-buffer": "^1.0.1",
+    "vinyl-source-stream": "^2.0.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.24.7",
+    "@babel/core": "^7.25.2",
-    "@babel/preset-env": "^7.24.7",
+    "@babel/preset-env": "^7.25.3",
     "@uswds/compile": "^1.1.0",
-    "babel-jest": "^29.7.0",
     "better-npm-audit": "^3.7.3",
     "gulp": "^5.0.0",
     "gulp-add-src": "^1.0.0",
     "gulp-babel": "8.0.0",
-    "gulp-better-rollup": "4.0.1",
     "gulp-clean-css": "4.3.0",
-    "gulp-concat": "2.6.1",
+    "gulp-concat": "^2.6.1",
     "gulp-include": "2.4.1",
     "gulp-jshint": "2.1.0",
     "gulp-prettyerror": "2.0.0",
     "gulp-uglify": "3.0.2",
-    "identity-obj-proxy": "^3.0.0",
+    "jest": "29.7.0",
-    "jest": "^29.7.0",
     "jest-each": "^29.2.1",
     "jest-environment-jsdom": "^29.2.2",
     "jshint": "2.13.6",
     "jshint-stylish": "2.2.1",
-    "rollup": "1.32.1",
+    "rollup": "^4.20.0",
     "rollup-plugin-commonjs": "10.1.0",
-    "rollup-plugin-node-resolve": "5.2.0",
+    "rollup-plugin-node-resolve": "5.2.0"
-    "streamqueue": "1.1.2"
-  },
-  "optionalDependencies": {
-    "sass-embedded-linux-x64": "^1.77.8"
   }
 }