Split config, lib and tasks into npm packages

.github/workflows/actions/install-node/action.yml

@@ -16,6 +16,7 @@ runs:
           app/node_modules
           docs/examples/*/node_modules
           package/node_modules
+          shared/*/node_modules
 
     - name: Setup Node.js
       uses: ./.github/workflows/actions/setup-node

.github/workflows/screenshots.yml

@@ -41,10 +41,7 @@ jobs:
         uses: ./.github/workflows/actions/build
 
       - name: Start review application
-
-        # Review app is already built (or restored from cache) so
-        # start with `--ignore-scripts` to prevent "prestart" build
-        run: npm start --ignore-scripts --workspace app &
+        run: npm start --workspace app &
 
       - name: Send screenshots to Percy
         run: npx percy exec --parallel -- npm run test:screenshots

app/package.json

@@ -12,36 +12,35 @@
     "build": "gulp build",
     "dev": "gulp dev",
     "serve": "nodemon",
-    "prestart": "npm run build",
     "start": "node src/start.mjs"
   },
   "dependencies": {
+    "chokidar": "^3.5.3",
     "cookie-parser": "^1.4.6",
     "express": "^4.18.2",
     "express-validator": "^6.15.0",
-    "front-matter": "^4.0.2",
-    "glob": "^10.0.0",
     "govuk_frontend_toolkit": "^9.0.1",
     "govuk_template_jinja": "^0.26.0",
     "govuk-elements-sass": "3.1.3",
-    "gulp": "^4.0.2",
-    "gulp-cli": "^2.3.0",
+    "govuk-frontend-config": "*",
+    "govuk-frontend-lib": "*",
     "highlight.js": "^11.7.0",
     "html5shiv": "^3.7.3",
     "iframe-resizer": "3.5.15",
     "jquery": "1.12.4",
     "js-beautify": "^1.14.7",
-    "js-yaml": "^4.1.0",
     "marked": "^4.3.0",
-    "minimatch": "^8.0.3",
-    "nodemon": "^2.0.22",
-    "nunjucks": "^3.2.3",
+    "nunjucks": "^3.2.4",
     "outdent": "^0.8.0",
-    "shuffle-seed": "^1.1.6",
-    "slash": "^5.0.0"
+    "shuffle-seed": "^1.1.6"
   },
   "devDependencies": {
     "cheerio": "^1.0.0-rc.12",
+    "govuk-frontend-tasks": "*",
+    "gulp": "^4.0.2",
+    "gulp-cli": "^2.3.0",
+    "nodemon": "^2.0.22",
+    "slash": "^5.0.0",
     "supertest": "^6.3.3"
   }
 }

app/src/app.mjs

@@ -1,10 +1,9 @@
 import { join } from 'path'
 
 import express from 'express'
-
-import { paths } from '../../config/index.js'
-import { getDirectories, getComponentsData, getFullPageExamples } from '../../lib/file-helper.js'
-import { componentNameToMacroName } from '../../lib/helper-functions.js'
+import { paths } from 'govuk-frontend-config'
+import { getDirectories, getComponentsData, getFullPageExamples } from 'govuk-frontend-lib/files'
+import { componentNameToMacroName } from 'govuk-frontend-lib/names'
 
 import * as middleware from './common/middleware/index.mjs'
 import * as nunjucks from './common/nunjucks/index.mjs'
@@ -28,7 +27,7 @@ export default async () => {
 
   // Set up Express.js
   app.set('flags', flags)
-  app.set('query parser', (query) => new URLSearchParams(query))
+  app.set('query parser', 'simple')
 
   // Set up middleware
   app.use('/docs', middleware.docs)
@@ -123,8 +122,7 @@ export default async () => {
 
     let bodyClasses = ''
 
-    // @ts-expect-error `URLSearchParams` as 'query parser'
-    if (req.query.has('iframe')) {
+    if ('iframe' in req.query) {
       bodyClasses = 'app-iframe-in-component-preview'
     }
 

app/src/app.test.mjs

@@ -1,9 +1,8 @@
 import { join } from 'path'
 
 import { load } from 'cheerio'
-
-import { paths, ports } from '../../config/index.js'
-import { getDirectories } from '../../lib/file-helper.js'
+import { paths, ports } from 'govuk-frontend-config'
+import { getDirectories } from 'govuk-frontend-lib/files'
 
 const expectedPages = [
   '/',

app/src/common/middleware/assets.mjs

@@ -1,8 +1,7 @@
 import { join } from 'path'
 
 import express from 'express'
-
-import { paths } from '../../../../config/index.js'
+import { paths } from 'govuk-frontend-config'
 
 const router = express.Router()
 

app/src/common/middleware/docs.mjs

@@ -1,8 +1,7 @@
 import { join } from 'path'
 
 import express from 'express'
-
-import { paths } from '../../../../config/index.js'
+import { paths } from 'govuk-frontend-config'
 
 const router = express.Router()
 

app/src/common/middleware/legacy.mjs

@@ -1,12 +1,17 @@
 /**
  * Legacy query handling
+ *
+ * @param {import('express').Request} req
+ * @param {import('express').Response} res
+ * @param {import('express').NextFunction} next
  */
 const legacy = (req, res, next) => {
   const { query } = req
 
   // Detect legacy mode
-  res.locals.legacy = ['1', 'true']
-    .includes(query.get('legacy'))
+  res.locals.legacy = typeof query.legacy === 'string'
+    ? ['1', 'true'].includes(query.legacy)
+    : false
 
   // Legacy query for link hrefs
   res.locals.legacyQuery = res.locals.legacy

app/src/common/middleware/legacy.test.mjs

@@ -13,7 +13,7 @@ describe('Middleware: Legacy mode', () => {
     agent = supertest.agent(app)
 
     // Add query parser + middleware
-    app.set('query parser', (query) => new URLSearchParams(query))
+    app.set('query parser', 'simple')
     app.use(middleware)
 
     // Add test router

app/src/common/middleware/request.test.mjs

@@ -14,7 +14,7 @@ describe('Middleware: Request handling', () => {
     agent = supertest.agent(app)
 
     // Add query parser + middleware
-    app.set('query parser', (query) => new URLSearchParams(query))
+    app.set('query parser', 'simple')
     app.use(middleware)
 
     // Add test router

app/src/common/middleware/robots.test.mjs

@@ -12,7 +12,7 @@ describe('Middleware: Search engines (robots.txt)', () => {
     agent = supertest.agent(app)
 
     // Add query parser + middleware
-    app.set('query parser', (query) => new URLSearchParams(query))
+    app.set('query parser', 'simple')
     app.use(middleware)
   })
 

app/src/common/middleware/vendor.mjs

@@ -1,6 +1,5 @@
 import express from 'express'
-
-import { packageNameToPath } from '../../../../lib/helper-functions.js'
+import { packageNameToPath } from 'govuk-frontend-lib/names'
 
 const router = express.Router()
 

app/src/common/nunjucks/filters/index.mjs

@@ -1,5 +1,5 @@
 /**
  * Nunjucks filters
  */
-export { componentNameToMacroName } from '../../../../../lib/helper-functions.js'
+export { componentNameToMacroName } from 'govuk-frontend-lib/names'
 export { highlight } from './highlight.mjs'

app/src/common/nunjucks/globals/get-html-code.mjs

@@ -1,9 +1,8 @@
 import { join } from 'path'
 
+import { paths } from 'govuk-frontend-config'
 import beautify from 'js-beautify'
 
-import { paths } from '../../../../../config/index.js'
-
 /**
  * Component HTML code (formatted)
  *

app/src/common/nunjucks/index.mjs

@@ -1,10 +1,9 @@
 
 import { join } from 'path'
 
+import { paths } from 'govuk-frontend-config'
 import nunjucks from 'nunjucks'
 
-import { paths } from '../../../../config/index.js'
-
 import * as filters from './filters/index.mjs'
 import * as globals from './globals/index.mjs'
 

app/src/routes/banner.mjs

@@ -1,11 +1,14 @@
 const BANNER_COOKIE_NAME = 'dismissed-app-banner'
 
-export default function (app) {
+/**
+ * @param {import('express').Application} app
+ */
+export default (app) => {
   // Detect if banner should be shown based on cookies set
   app.use(function (request, response, next) {
     const { query, cookies } = request
 
-    if (query.has('hide-banner')) {
+    if ('hide-banner' in query) {
       app.locals.shouldShowAppBanner = false
       return next()
     }

app/src/routes/banner.test.mjs

@@ -1,6 +1,5 @@
 import { load } from 'cheerio'
-
-import { ports } from '../../../config/index.js'
+import { ports } from 'govuk-frontend-config'
 
 // Returns Fetch API wrapper which applies these options by default
 const fetchPath = (path, options) => {

app/src/routes/full-page-examples.mjs

@@ -1,6 +1,10 @@
-import { getFullPageExamples } from '../../../lib/file-helper.js'
+import { getFullPageExamples } from 'govuk-frontend-lib/files'
+
 import * as routes from '../views/full-page-examples/index.mjs'
 
+/**
+ * @param {import('express').Application} app
+ */
 export default (app) => {
   routes.applicantDetails(app)
   routes.cookieBannerEssentialCookies(app)

app/src/routes/full-page-examples.test.mjs

@@ -1,6 +1,5 @@
 import { load } from 'cheerio'
-
-import { ports } from '../../../config/index.js'
+import { ports } from 'govuk-frontend-config'
 
 const expectedPages = [
   'bank-holidays',
@@ -337,21 +336,21 @@ describe(`http://localhost:${ports.app}/full-page-examples/`, () => {
         const body = await response.text()
         const $ = load(body)
         // Check the results are correct
-        expect($.html()).toContain('121,842 results')
+        expect($.html()).toContain('482,211 results')
       })
       it('should show sorted results when selected', async () => {
         const response = await fetchPath('search?order=updated-newest')
         const body = await response.text()
         const $ = load(body)
         // Check the results are correct
-        expect($.html()).toContain('821,124 results')
+        expect($.html()).toContain('241,128 results')
       })
       it('should show organisation results when selected', async () => {
         const response = await fetchPath('search?order=updated-newest&organisation=hmrc')
         const body = await response.text()
         const $ = load(body)
         // Check the results are correct
-        expect($.html()).toContain('212,418 results')
+        expect($.html()).toContain('814,221 results')
       })
     })
 

app/src/start.mjs

@@ -1,4 +1,4 @@
-import { ports } from '../../config/index.js'
+import { ports } from 'govuk-frontend-config'
 
 import app from './app.mjs'
 

app/src/views/full-page-examples/applicant-details/index.mjs

@@ -2,6 +2,9 @@ import { body, validationResult } from 'express-validator'
 
 import { formatValidationErrors } from '../../../utils.mjs'
 
+/**
+ * @param {import('express').Application} app
+ */
 export default (app) => {
   app.post(
     '/full-page-examples/applicant-details',
@@ -19,6 +22,12 @@ export default (app) => {
         .exists()
         .not().isEmpty().withMessage('Enter your date of birth year')
     ],
+
+    /**
+     * @param {import('express').Request} request
+     * @param {import('express').Response} response
+     * @returns {void}
+     */
     (request, response) => {
       const errors = formatValidationErrors(validationResult(request))
 

app/src/views/full-page-examples/cookie-banner-essential-cookies/index.mjs

@@ -1,3 +1,6 @@
+/**
+ * @param {import('express').Application} app
+ */
 export default (app) => {
   app.post('/full-page-examples/cookie-banner-essential-cookies', (request, response) => {
     response.render('./full-page-examples/cookie-banner-essential-cookies/index', {

app/src/views/full-page-examples/cookie-banner-server-side/index.mjs

@@ -1,3 +1,6 @@
+/**
+ * @param {import('express').Application} app
+ */
 export default (app) => {
   app.post('/full-page-examples/cookie-banner-server-side', (request, response) => {
     response.render('./full-page-examples/cookie-banner-server-side/index', {

app/src/views/full-page-examples/feedback/index.mjs

@@ -2,6 +2,9 @@ import { body, validationResult } from 'express-validator'
 
 import { formatValidationErrors } from '../../../utils.mjs'
 
+/**
+ * @param {import('express').Application} app
+ */
 export default (app) => {
   app.post(
     '/full-page-examples/feedback',
@@ -46,6 +49,12 @@ export default (app) => {
         })
 
     ],
+
+    /**
+     * @param {import('express').Request} request
+     * @param {import('express').Response} response
+     * @returns {void}
+     */
     (request, response) => {
       const errors = formatValidationErrors(validationResult(request))
       if (errors) {

app/src/views/full-page-examples/have-you-changed-your-name/index.mjs

@@ -2,6 +2,9 @@ import { body, validationResult } from 'express-validator'
 
 import { formatValidationErrors } from '../../../utils.mjs'
 
+/**
+ * @param {import('express').Application} app
+ */
 export default (app) => {
   app.post(
     '/full-page-examples/have-you-changed-your-name',
@@ -10,6 +13,12 @@ export default (app) => {
         .exists()
         .not().isEmpty().withMessage('Select if you have changed your name')
     ],
+
+    /**
+     * @param {import('express').Request} request
+     * @param {import('express').Response} response
+     * @returns {void}
+     */
     (request, response) => {
       const errors = formatValidationErrors(validationResult(request))
       if (errors) {

app/src/views/full-page-examples/how-do-you-want-to-sign-in/index.mjs

@@ -2,6 +2,9 @@ import { body, validationResult } from 'express-validator'
 
 import { formatValidationErrors } from '../../../utils.mjs'
 
+/**
+ * @param {import('express').Application} app
+ */
 export default (app) => {
   app.post(
     '/full-page-examples/how-do-you-want-to-sign-in',
@@ -10,6 +13,12 @@ export default (app) => {
         .exists()
         .not().isEmpty().withMessage('Select how you want to sign in')
     ],
+
+    /**
+     * @param {import('express').Request} request
+     * @param {import('express').Response} response
+     * @returns {void}
+     */
     (request, response) => {
       const errors = formatValidationErrors(validationResult(request))
       if (errors) {