[WIP] Use npm workspaces

.github/workflows/actions/build/action.yml

@@ -11,7 +11,7 @@ runs:
       with:
         # Restore build cache (unless commit SHA changes)
         key: build-cache-${{ runner.os }}-${{ github.sha }}
-        path: app/dist
+        path: packages/*/dist
 
     - name: Install dependencies
       uses: ./.github/workflows/actions/install-node

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

@@ -13,9 +13,8 @@ runs:
         key: npm-install-cache-${{ runner.os }}-${{ hashFiles('package-lock.json', '**/package.json') }}
         path: |
           node_modules
-          app/node_modules
-          docs/examples/*/node_modules
           package/node_modules
+          packages/**/*/node_modules
 
     - name: Setup Node.js
       uses: ./.github/workflows/actions/setup-node

.gitignore

@@ -18,6 +18,7 @@ dist/
 .DS_Store
 *.zip
 *.log
+*.tsbuildinfo
 
 # Project lockfile only
 package-lock.json

Procfile

@@ -1 +1 @@
-web: npm start --workspace app
+web: npm start --workspace packages/app

docs/contributing/application-architecture.md

@@ -1,17 +1,9 @@
 ## Application architecture
 
-- `app/`
-
-  [Express](https://github.com/expressjs/express) application to preview components; also referred to as the _review app_.
-
 - `bin/`
 
   Binary/executable files (i.e. bash scripts) mainly used in the [publishing process](/docs/releasing/publishing.md).
 
-- `config/`
-
-  Configuration files for the review app and [Jest](https://github.com/facebook/jest).
-
 - `dist/` **contains auto-generated files**
 
   Standalone builds of govuk-frontend. Provides a way to consume govuk-frontend without using npm.
@@ -20,19 +12,33 @@
 
   Documentation files.
 
-- `lib/`
-
-  Application modules and helpers.
-
 - `package/` **contains auto-generated files**
 
   package published on npm.
   Consume all of govuk-frontend through a single package.
 
-- `src/`
+- `packages/`
 
-  Source files. See README.md in the src directory for details.
+  - `app/`
+
+    [Express](https://github.com/expressjs/express) application to preview components; also referred to as the _review app_.
+
+  - `config/`
 
-- `tasks/`
+    Configuration files for the review app and [Jest](https://github.com/facebook/jest).
 
-  Application modules and helpers. See [tasks](tasks.md) for more information about the tasks.
+  - `examples/`
+
+    Example GOV.UK Frontend integrations
+
+  - `lib/`
+
+    Application modules and helpers.
+
+  - `tasks/`
+
+    See [tasks](tasks.md) for more information about the tasks.
+
+- `src/`
+
+  Source files. See README.md in the src directory for details.

docs/contributing/tasks.md

@@ -8,9 +8,9 @@ To run the application without any tasks being triggered, see [Express app only]
 
 npm scripts are defined in `package.json`. These trigger a number of Gulp tasks.
 
-**`npm start` will trigger `npm run dev --workspace app` that will:**
+**`npm start` will trigger `npm run dev --workspace packages/app` that will:**
 
-- clean the `./app/dist` folder
+- clean the `./packages/app/dist` folder
 - copy fonts and images
 - compile JavaScript and Sass, including documentation
 - compile again when `.scss` and `.mjs` files change
@@ -28,13 +28,13 @@ npm scripts are defined in `package.json`. These trigger a number of Gulp tasks.
 
 **`npm run build:app` will do the following:**
 
-- clean the `./app/dist` folder
-- output files into `./app/dist`
+- clean the `./packages/app/dist` folder
+- output files into `./packages/app/dist`
 - copy fonts and images
 - run sub tasks from `gulp styles` without StyleLint code quality checks
 - run sub tasks from `gulp scripts` without ESLint code quality checks
-- compile Sass documentation into `./app/dist/docs/sassdoc`
-- compile JavaScript documentation into `./app/dist/docs/jsdoc`
+- compile Sass documentation into `./packages/app/dist/docs/sassdoc`
+- compile JavaScript documentation into `./packages/app/dist/docs/jsdoc`
 
 **`npm run build:package` will do the following:**
 
@@ -71,16 +71,16 @@ This task will:
 This task will:
 
 - check Sass code quality via Stylelint (`npm run lint:scss`)
-- compile Sass to CSS into `./app/dist/stylesheets`
-- compile Sass documentation into `./app/dist/docs/sassdoc`
+- compile Sass to CSS into `./packages/app/dist/stylesheets`
+- compile Sass documentation into `./packages/app/dist/docs/sassdoc`
 
 **`gulp scripts`**
 
 This task will:
 
 - check JavaScript code quality via ESLint (`npm run lint:js`) (using JavaScript Standard Style)
-- compile JavaScript ESM to CommonJS into `./app/dist/javascripts`
-- compile JavaScript documentation into `./app/dist/docs/jsdoc`
+- compile JavaScript ESM to CommonJS into `./packages/app/dist/javascripts`
+- compile JavaScript documentation into `./packages/app/dist/docs/jsdoc`
 
 ## Express app only
 

gulpfile.mjs

@@ -1,8 +1,7 @@
+import { browser } from 'govuk-frontend-tasks'
+import * as build from 'govuk-frontend-tasks/build/index.mjs'
 import gulp from 'gulp'
 
-import * as build from './tasks/build/index.mjs'
-import { browser } from './tasks/index.mjs'
-
 /**
  * Build target tasks
  */

jest-puppeteer.config.js

@@ -1,39 +1 @@
-const devServerOptions = require('./jest-dev-server.config.js')
-
-module.exports = {
-  browserContext: 'incognito',
-
-  /**
-   * Workaround for jest-environment-puppeteer 'uncaughtException'
-   * see error handling in ./config/jest/environment/puppeteer.mjs
-   */
-  exitOnPageError: false,
-
-  /**
-   * Puppeteer launch options
-   *
-   * @type {import('puppeteer').PuppeteerLaunchOptions}
-   */
-  launch: {
-    args: [
-      /**
-       * Workaround for 'No usable sandbox! Update your kernel' error
-       * see more https://github.com/Googlechrome/puppeteer/issues/290
-       */
-      '--no-sandbox',
-      '--disable-setuid-sandbox',
-
-      /**
-       * Prevent empty Chromium startup window
-       * Tests use their own `browser.newPage()` instead
-       */
-      '--no-startup-window'
-    ],
-    waitForInitialPage: false
-  },
-
-  /**
-   * Development server options
-   */
-  server: devServerOptions
-}
+module.exports = require('govuk-frontend-config/jest/browser/jest-puppeteer.config.js')

jest.config.mjs

@@ -46,19 +46,19 @@ export default {
     {
       ...config,
       displayName: 'Nunjucks macro tests',
-      setupFilesAfterEnv: ['./config/jest/matchers.js'],
+      setupFilesAfterEnv: ['govuk-frontend-config/jest/matchers.js'],
       snapshotSerializers: [
         'jest-serializer-html'
       ],
-      testEnvironment: './config/jest/environment/jsdom.mjs',
+      testEnvironment: 'govuk-frontend-config/jest/environment/jsdom.mjs',
       testMatch: [
         '**/(*.)?template.test.{js,mjs}'
       ]
     },
     {
       ...config,
       displayName: 'JavaScript unit tests',
-      testEnvironment: './config/jest/environment/jsdom.mjs',
+      testEnvironment: 'govuk-frontend-config/jest/environment/jsdom.mjs',
       testMatch: [
         '**/*.unit.test.{js,mjs}'
       ]
@@ -80,8 +80,8 @@ export default {
       ],
 
       // Web server required
-      globalSetup: './config/jest/server/start.mjs',
-      globalTeardown: './config/jest/server/stop.mjs'
+      globalSetup: 'govuk-frontend-config/jest/server/start.mjs',
+      globalTeardown: 'govuk-frontend-config/jest/server/stop.mjs'
     },
     {
       ...config,
@@ -97,8 +97,8 @@ export default {
       ],
 
       // Web server and browser required
-      globalSetup: './config/jest/browser/open.mjs',
-      globalTeardown: './config/jest/browser/close.mjs'
+      globalSetup: 'govuk-frontend-config/jest/browser/open.mjs',
+      globalTeardown: 'govuk-frontend-config/jest/browser/close.mjs'
     }
   ],
 

jsdoc.config.js

@@ -1,6 +1,6 @@
 module.exports = {
   opts: {
-    destination: './app/dist/docs/jsdoc',
+    destination: './packages/app/dist/docs/jsdoc',
     recurse: true
   },
   plugins: [