From 03933440125c5ae46e9cb2a2f4196538bca43e38 Mon Sep 17 00:00:00 2001 From: Colin Rotherham Date: Fri, 22 Sep 2023 09:33:45 +0100 Subject: [PATCH 01/10] Move JSDoc task to workspace `postbuild` via `predev` Runs before development sessions but not during --- packages/govuk-frontend-review/gulpfile.mjs | 3 +-- packages/govuk-frontend-review/package.json | 2 +- .../govuk-frontend-review/tasks/build/dist.mjs | 5 ++--- packages/govuk-frontend-review/tasks/index.mjs | 1 - packages/govuk-frontend-review/tasks/scripts.mjs | 11 ----------- packages/govuk-frontend-review/tasks/watch.mjs | 15 +-------------- 6 files changed, 5 insertions(+), 32 deletions(-) delete mode 100644 packages/govuk-frontend-review/tasks/scripts.mjs diff --git a/packages/govuk-frontend-review/gulpfile.mjs b/packages/govuk-frontend-review/gulpfile.mjs index c90f8e2dd0..a549ab7a99 100644 --- a/packages/govuk-frontend-review/gulpfile.mjs +++ b/packages/govuk-frontend-review/gulpfile.mjs @@ -3,7 +3,7 @@ import gulp from 'gulp' import * as build from './tasks/build/index.mjs' import { options } from './tasks/build/options.mjs' -import { scripts, styles } from './tasks/index.mjs' +import { styles } from './tasks/index.mjs' /** * Build target tasks @@ -14,7 +14,6 @@ gulp.task('dev', build.dev(options)) /** * Utility tasks */ -gulp.task('scripts', scripts(options)) gulp.task('styles', styles(options)) /** diff --git a/packages/govuk-frontend-review/package.json b/packages/govuk-frontend-review/package.json index 165a73ce4f..bd496f7807 100644 --- a/packages/govuk-frontend-review/package.json +++ b/packages/govuk-frontend-review/package.json @@ -14,7 +14,7 @@ "build:sassdoc": "sassdoc --config sassdoc.config.yaml ../govuk-frontend/src/govuk", "build:types": "tsc --build tsconfig.build.json", "build:jsdoc": "typedoc", - "postbuild": "npm run build:types", + "postbuild": "npm run build:jsdoc && npm run build:types", "proxy": "browser-sync start --config browsersync.config.js", "serve": "nodemon", "start": "node src/start.mjs", diff --git a/packages/govuk-frontend-review/tasks/build/dist.mjs b/packages/govuk-frontend-review/tasks/build/dist.mjs index 5315bfcefd..5d0de32906 100644 --- a/packages/govuk-frontend-review/tasks/build/dist.mjs +++ b/packages/govuk-frontend-review/tasks/build/dist.mjs @@ -1,7 +1,7 @@ import { files, task } from '@govuk-frontend/tasks' import gulp from 'gulp' -import { scripts, styles } from '../index.mjs' +import { styles } from '../index.mjs' /** * Build review app task @@ -12,6 +12,5 @@ import { scripts, styles } from '../index.mjs' export default (options) => gulp.series( task.name('clean', () => files.clean('*', options)), - - gulp.parallel(scripts(options), styles(options)) + styles(options) ) diff --git a/packages/govuk-frontend-review/tasks/index.mjs b/packages/govuk-frontend-review/tasks/index.mjs index 5cea86ea78..2e3fca5541 100644 --- a/packages/govuk-frontend-review/tasks/index.mjs +++ b/packages/govuk-frontend-review/tasks/index.mjs @@ -1,6 +1,5 @@ /** * Build tasks */ -export { compile as scripts } from './scripts.mjs' export { compile as styles } from './styles.mjs' export { watch } from './watch.mjs' diff --git a/packages/govuk-frontend-review/tasks/scripts.mjs b/packages/govuk-frontend-review/tasks/scripts.mjs deleted file mode 100644 index 66a9a2219b..0000000000 --- a/packages/govuk-frontend-review/tasks/scripts.mjs +++ /dev/null @@ -1,11 +0,0 @@ -import { npm } from '@govuk-frontend/tasks' -import gulp from 'gulp' - -/** - * JavaScripts task (for watch) - * Documentation - * - * @type {import('@govuk-frontend/tasks').TaskFunction} - */ -export const compile = (options) => - gulp.series(npm.script('build:jsdoc', [], options)) diff --git a/packages/govuk-frontend-review/tasks/watch.mjs b/packages/govuk-frontend-review/tasks/watch.mjs index 3a53f78b76..3a8f80029a 100644 --- a/packages/govuk-frontend-review/tasks/watch.mjs +++ b/packages/govuk-frontend-review/tasks/watch.mjs @@ -5,7 +5,7 @@ import { npm, task } from '@govuk-frontend/tasks' import gulp from 'gulp' import slash from 'slash' -import { scripts, styles } from './index.mjs' +import { styles } from './index.mjs' /** * Watch task @@ -41,18 +41,5 @@ export const watch = (options) => ], styles(options) ) - ), - - /** - * JavaScripts build watcher - */ - task.name('compile:js watch', () => - gulp.watch( - [ - `${slash(paths.app)}/typedoc.config.js`, - `${slash(paths.package)}/dist/govuk/**/*.mjs` - ], - scripts(options) - ) ) ) From 4073a2478a990a8b320d764d136500f355b4c73d Mon Sep 17 00:00:00 2001 From: Colin Rotherham Date: Thu, 21 Sep 2023 10:17:38 +0100 Subject: [PATCH 02/10] Move SassDoc task to workspace `postbuild` via `predev` Runs before development sessions but not during --- packages/govuk-frontend-review/package.json | 2 +- packages/govuk-frontend-review/tasks/styles.mjs | 8 ++------ packages/govuk-frontend-review/tasks/watch.mjs | 1 - 3 files changed, 3 insertions(+), 8 deletions(-) diff --git a/packages/govuk-frontend-review/package.json b/packages/govuk-frontend-review/package.json index bd496f7807..1c2ac6ebbf 100644 --- a/packages/govuk-frontend-review/package.json +++ b/packages/govuk-frontend-review/package.json @@ -14,7 +14,7 @@ "build:sassdoc": "sassdoc --config sassdoc.config.yaml ../govuk-frontend/src/govuk", "build:types": "tsc --build tsconfig.build.json", "build:jsdoc": "typedoc", - "postbuild": "npm run build:jsdoc && npm run build:types", + "postbuild": "npm run build:jsdoc && npm run build:sassdoc && npm run build:types", "proxy": "browser-sync start --config browsersync.config.js", "serve": "nodemon", "start": "node src/start.mjs", diff --git a/packages/govuk-frontend-review/tasks/styles.mjs b/packages/govuk-frontend-review/tasks/styles.mjs index f3338ed4d6..9f3812e7e0 100644 --- a/packages/govuk-frontend-review/tasks/styles.mjs +++ b/packages/govuk-frontend-review/tasks/styles.mjs @@ -1,11 +1,10 @@ import { join } from 'path' -import { npm, styles, task } from '@govuk-frontend/tasks' +import { styles, task } from '@govuk-frontend/tasks' import gulp from 'gulp' /** * Stylesheets task (for watch) - * Compilation, documentation * * @type {import('@govuk-frontend/tasks').TaskFunction} */ @@ -24,8 +23,5 @@ export const compile = (options) => return join(dir, `${name}.min.css`) } }) - ), - - // Build SassDoc for /docs/sass - npm.script('build:sassdoc', [], options) + ) ) diff --git a/packages/govuk-frontend-review/tasks/watch.mjs b/packages/govuk-frontend-review/tasks/watch.mjs index 3a8f80029a..67493aba36 100644 --- a/packages/govuk-frontend-review/tasks/watch.mjs +++ b/packages/govuk-frontend-review/tasks/watch.mjs @@ -35,7 +35,6 @@ export const watch = (options) => task.name('compile:scss watch', () => gulp.watch( [ - `${slash(paths.app)}/sassdoc.config.yaml`, `${slash(paths.app)}/src/**/*.scss`, `${slash(paths.package)}/dist/govuk/all.scss` ], From 4dd1bbcba00aca8e26a26d870250173930301032 Mon Sep 17 00:00:00 2001 From: Colin Rotherham Date: Thu, 21 Sep 2023 10:04:00 +0100 Subject: [PATCH 03/10] Move Rollup stats task to workspace `postbuild` via `predev` Runs before development sessions but not during --- packages/govuk-frontend/package.json | 2 +- packages/govuk-frontend/tasks/scripts.mjs | 7 ++----- 2 files changed, 3 insertions(+), 6 deletions(-) diff --git a/packages/govuk-frontend/package.json b/packages/govuk-frontend/package.json index f4ddd68fb4..4cc36c85f6 100644 --- a/packages/govuk-frontend/package.json +++ b/packages/govuk-frontend/package.json @@ -51,7 +51,7 @@ "build:release": "gulp build:release --color", "build:stats": "npm run stats --workspace @govuk-frontend/stats", "build:types": "tsc --build tsconfig.build.json", - "postbuild:package": "npm run build:types && govuk-prototype-kit validate-plugin .", + "postbuild:package": "npm run build:stats && npm run build:types && govuk-prototype-kit validate-plugin .", "dev": "gulp dev --color", "version": "echo $npm_package_version" }, diff --git a/packages/govuk-frontend/tasks/scripts.mjs b/packages/govuk-frontend/tasks/scripts.mjs index 197ce8dc7c..1f59a7aae9 100644 --- a/packages/govuk-frontend/tasks/scripts.mjs +++ b/packages/govuk-frontend/tasks/scripts.mjs @@ -1,7 +1,7 @@ import { join, resolve } from 'path' import { pkg } from '@govuk-frontend/config' -import { configs, scripts, npm, task } from '@govuk-frontend/tasks' +import { configs, scripts, task } from '@govuk-frontend/tasks' import gulp from 'gulp' /** @@ -64,8 +64,5 @@ export const compile = (options) => srcPath: join(options.srcPath, 'govuk-prototype-kit'), destPath: resolve(options.destPath, '../') // Top level (not dist) for compatibility }) - ), - - // Compile GOV.UK Frontend build stats - npm.script('build:stats', [], options) + ) ) From ff3576551ca0c2072881152afdee79364f20ec68 Mon Sep 17 00:00:00 2001 From: Colin Rotherham Date: Thu, 21 Sep 2023 11:14:37 +0100 Subject: [PATCH 04/10] Always run `postbuild` scripts in production Since we no longer build JSDoc, SassDoc or stats via Gulp we can turn these back on --- .github/workflows/actions/build/action.yml | 5 ++--- .github/workflows/tests.yml | 4 ++-- package.json | 2 +- 3 files changed, 5 insertions(+), 6 deletions(-) diff --git a/.github/workflows/actions/build/action.yml b/.github/workflows/actions/build/action.yml index 3dbc9f3faa..4a68de93ff 100644 --- a/.github/workflows/actions/build/action.yml +++ b/.github/workflows/actions/build/action.yml @@ -25,6 +25,5 @@ runs: if: steps.build-cache.outputs.cache-hit != 'true' shell: bash - # Build all workspaces but skip `postbuild` scripts - # since we run these in other workflow steps instead - run: npm run build --workspaces --if-present --ignore-scripts + # Build all workspaces + run: npm run build --workspaces --if-present diff --git a/.github/workflows/tests.yml b/.github/workflows/tests.yml index 8dba7923cc..af72699c37 100644 --- a/.github/workflows/tests.yml +++ b/.github/workflows/tests.yml @@ -218,11 +218,11 @@ jobs: task: - description: Verify package build name: test-build-package - run: npm run build:package -- --ignore-scripts + run: npm run build:package - description: Verify distribution build name: test-build-release - run: npm run build:release -- --ignore-scripts + run: npm run build:release steps: - name: Checkout diff --git a/package.json b/package.json index 3d950aab80..e539d054e0 100644 --- a/package.json +++ b/package.json @@ -29,7 +29,7 @@ "build:types": "npm run build:types --workspaces --if-present", "postbuild:package": "jest --color --selectProjects \"Build tasks\" --testMatch \"**/build/package.unit.test.mjs\"", "postbuild:release": "jest --color --selectProjects \"Build tasks\" --testMatch \"**/build/release.unit.test.mjs\"", - "heroku-postbuild": "npm run build -- --ignore-scripts", + "heroku-postbuild": "npm run build", "postheroku-postbuild": "NPM_CONFIG_PRODUCTION=true npm ci --ignore-scripts --omit=optional --workspace @govuk-frontend/review", "pretest": "npm run build", "test": "jest --color --ignoreProjects \"Build tasks\" --maxWorkers=50%", From 28e39e3dc80fe21bfd370b6b86c4dcc6f0a366da Mon Sep 17 00:00:00 2001 From: Colin Rotherham Date: Mon, 25 Sep 2023 11:03:40 +0100 Subject: [PATCH 05/10] Never run `postbuild` scripts in development --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index e539d054e0..97d7387fb4 100644 --- a/package.json +++ b/package.json @@ -20,7 +20,7 @@ "build-release": "./bin/build-release.sh", "publish-release": "./bin/publish-release.sh", "publish-preview": "./bin/publish-preview.sh", - "predev": "npm run build", + "predev": "npm run build -- --ignore-scripts", "dev": "concurrently \"npm run dev --workspace @govuk-frontend/review\" \"npm run dev --workspace govuk-frontend\" --kill-others --names \"app,pkg\" --prefix-colors \"red.dim,blue.dim\"", "build": "npm run build --workspace govuk-frontend --workspace @govuk-frontend/review", "build:app": "cross-env-shell NODE_ENV=production npm run build --workspace @govuk-frontend/review", From 8f353c1f147753f12f5d4771fd58021bfda3386a Mon Sep 17 00:00:00 2001 From: Colin Rotherham Date: Mon, 25 Sep 2023 11:28:35 +0100 Subject: [PATCH 06/10] Toggle Review app docs/stats when built --- packages/govuk-frontend-review/nodemon.json | 1 + packages/govuk-frontend-review/src/app.mjs | 14 ++++++++++++-- .../govuk-frontend-review/src/views/index.njk | 8 ++++++++ shared/lib/files.js | 16 ++++++++++++++++ 4 files changed, 37 insertions(+), 2 deletions(-) diff --git a/packages/govuk-frontend-review/nodemon.json b/packages/govuk-frontend-review/nodemon.json index 824360eb37..39a0bfc4f9 100644 --- a/packages/govuk-frontend-review/nodemon.json +++ b/packages/govuk-frontend-review/nodemon.json @@ -1,6 +1,7 @@ { "watch": [ "./src", + "./dist/**/index.html", "../govuk-frontend/dist/govuk/**/*.json", "../../shared/config", "../../shared/lib", diff --git a/packages/govuk-frontend-review/src/app.mjs b/packages/govuk-frontend-review/src/app.mjs index 24e3768c0c..4d33813a5d 100644 --- a/packages/govuk-frontend-review/src/app.mjs +++ b/packages/govuk-frontend-review/src/app.mjs @@ -1,3 +1,5 @@ +import { join } from 'path' + import { paths } from '@govuk-frontend/config' import { getComponentsFixtures, @@ -5,7 +7,7 @@ import { getComponentNamesFiltered, renderComponent } from '@govuk-frontend/lib/components' -import { filterPath } from '@govuk-frontend/lib/files' +import { filterPath, hasPath } from '@govuk-frontend/lib/files' import { getStats, modulePaths } from '@govuk-frontend/stats' import express from 'express' @@ -48,7 +50,12 @@ export default async () => { // Feature flags const flags = /** @type {FeatureFlags} */ ({ isDeployedToHeroku: !!process.env.HEROKU_APP, - isDevelopment: !['test', 'production'].includes(process.env.NODE_ENV) + isDevelopment: !['test', 'production'].includes(process.env.NODE_ENV), + + // Check for JSDoc, SassDoc and Rollup stats + hasDocsScripts: await hasPath(join(paths.app, 'dist/docs/jsdoc')), + hasDocsStyles: await hasPath(join(paths.app, 'dist/docs/sassdoc')), + hasStats: await hasPath(join(paths.stats, 'dist')) }) // Set up Express.js @@ -213,4 +220,7 @@ export default async () => { * @typedef {object} FeatureFlags * @property {boolean} isDeployedToHeroku - Review app using `HEROKU_APP` * @property {boolean} isDevelopment - Review app not using `NODE_ENV` production or test + * @property {boolean} hasDocsStyles - Stylesheets documentation (SassDoc) is available + * @property {boolean} hasDocsScripts - JavaScripts documentation (JSDoc) is available + * @property {boolean} hasStats - Rollup stats are available */ diff --git a/packages/govuk-frontend-review/src/views/index.njk b/packages/govuk-frontend-review/src/views/index.njk index c2b245610f..7cb49da2f5 100644 --- a/packages/govuk-frontend-review/src/views/index.njk +++ b/packages/govuk-frontend-review/src/views/index.njk @@ -61,6 +61,7 @@ + {% if flags.hasDocsStyles or flags.hasDocsScripts %}
@@ -69,6 +70,7 @@
+ {% if flags.hasDocsStyles %}

Sass API reference

+ {% endif %} + {% if flags.hasDocsScripts %}

JavaScript API reference

+ {% endif %}
+ {% endif %} + {% if flags.hasStats %}
@@ -138,4 +145,5 @@ }) }}
+ {% endif %} {% endblock %} diff --git a/shared/lib/files.js b/shared/lib/files.js index 90432b7d82..fad6869a20 100644 --- a/shared/lib/files.js +++ b/shared/lib/files.js @@ -8,6 +8,21 @@ const yaml = require('js-yaml') const { minimatch } = require('minimatch') const slash = require('slash') +/** + * Check path exists + * + * @param {string} entryPath - File or directory path + * @returns {Promise} Returns true for paths that exist + */ +async function hasPath(entryPath) { + try { + await stat(entryPath) + return true + } catch { + return false + } +} + /** * Directory listing for path * @@ -107,6 +122,7 @@ async function getYaml(configPath) { module.exports = { filterPath, + hasPath, getDirectories, getFileSizes, getFileSize, From ae90d6dd70b47ea97d32e4e9c647f1417f0c0827 Mon Sep 17 00:00:00 2001 From: Colin Rotherham Date: Fri, 22 Sep 2023 09:28:08 +0100 Subject: [PATCH 07/10] =?UTF-8?q?Split=20watch=20tasks=20into=20separate?= =?UTF-8?q?=20=E2=80=9Clint=E2=80=9D=20versus=20=E2=80=9Ccompile=E2=80=9D?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Whilst it’s important to re-compile the Review app when the package changes, we can avoid running StyleLint unless Review app files have changes Also makes paths consistent since we had a mixture of template strings, path joins, and duplicated some ignore paths already found in config files --- .../govuk-frontend-review/tasks/watch.mjs | 10 +++- packages/govuk-frontend/tasks/watch.mjs | 55 +++++++++++-------- 2 files changed, 40 insertions(+), 25 deletions(-) diff --git a/packages/govuk-frontend-review/tasks/watch.mjs b/packages/govuk-frontend-review/tasks/watch.mjs index 67493aba36..e9c6a460c2 100644 --- a/packages/govuk-frontend-review/tasks/watch.mjs +++ b/packages/govuk-frontend-review/tasks/watch.mjs @@ -22,7 +22,9 @@ export const watch = (options) => */ task.name('lint:scss watch', () => gulp.watch( - [`${slash(paths.app)}/src/**/*.scss`], + [join(options.srcPath, '**/*.scss')], + + // Run Stylelint checks npm.script('lint:scss:cli', [ slash(join(options.workspace, '**/*.scss')) ]) @@ -35,9 +37,11 @@ export const watch = (options) => task.name('compile:scss watch', () => gulp.watch( [ - `${slash(paths.app)}/src/**/*.scss`, - `${slash(paths.package)}/dist/govuk/all.scss` + join(options.srcPath, '**/*.scss'), + join(paths.package, 'dist/govuk/all.scss') ], + + // Run Sass compile styles(options) ) ) diff --git a/packages/govuk-frontend/tasks/watch.mjs b/packages/govuk-frontend/tasks/watch.mjs index 89bfeb5f7e..606a484822 100644 --- a/packages/govuk-frontend/tasks/watch.mjs +++ b/packages/govuk-frontend/tasks/watch.mjs @@ -11,51 +11,62 @@ import { assets, fixtures, scripts, styles, templates } from './index.mjs' * During development, this task will: * - lint and run `gulp styles` when `.scss` files change * - lint and run `gulp scripts` when `.{cjs,js,mjs}` files change + * - lint and run `gulp fixtures` when `.yaml` files change * - lint and run `gulp templates` when `.{md,njk}` files change + * - lint and run `gulp assets` when assets change * * @type {import('@govuk-frontend/tasks').TaskFunction} */ export const watch = (options) => gulp.parallel( /** - * Stylesheets build + lint watcher + * Stylesheets lint watcher */ task.name('lint:scss watch', () => gulp.watch( - [ - `${slash(options.srcPath)}/govuk/**/*.scss`, - `!${slash(options.srcPath)}/govuk/vendor/*` - ], - gulp.parallel( - npm.script('lint:scss:cli', [ - slash(join(options.workspace, '**/*.scss')) - ]), - styles(options) - ) + [join(options.srcPath, '**/*.scss')], + + // Run Stylelint checks + npm.script('lint:scss:cli', [ + slash(join(options.workspace, '**/*.scss')) + ]) ) ), /** - * JavaScripts build + lint watcher + * Stylesheets build watcher + */ + task.name('compile:scss watch', () => + gulp.watch([join(options.srcPath, '**/*.scss')], styles(options)) + ), + + /** + * JavaScripts lint watcher */ task.name('lint:js watch', () => gulp.watch( - [`${slash(options.srcPath)}/govuk/**/*.mjs`], - gulp.parallel( - npm.script('lint:js:cli', [ - slash(join(options.workspace, '**/*.{cjs,js,md,mjs}')) - ]), - scripts(options) - ) + [join(options.srcPath, '**/*.{cjs,js,mjs}')], + + // Run ESLint checks + npm.script('lint:js:cli', [ + slash(join(options.workspace, '**/*.{cjs,js,mjs}')) + ]) ) ), + /** + * JavaScripts build watcher + */ + task.name('compile:js watch', () => + gulp.watch([join(options.srcPath, '**/*.{cjs,js,mjs}')], scripts(options)) + ), + /** * Component fixtures watcher */ task.name('compile:fixtures watch', () => gulp.watch( - [`${slash(options.srcPath)}/govuk/components/*/*.yaml`], + [join(options.srcPath, 'govuk/components/*/*.yaml')], fixtures(options) ) ), @@ -65,13 +76,13 @@ export const watch = (options) => */ task.name('copy:templates watch', () => gulp.watch( - [`${slash(options.srcPath)}/govuk/**/*.{md,njk}`], + [join(options.srcPath, 'govuk/**/*.{md,njk}')], templates(options) ) ), // Copy GOV.UK Frontend static assets task.name('copy:assets watch', () => - gulp.watch([`${slash(options.srcPath)}/govuk/assets/**`], assets(options)) + gulp.watch([join(options.srcPath, 'govuk/assets/**')], assets(options)) ) ) From dfc7aeb16ebd2f455cfd51920795fe8a867726c1 Mon Sep 17 00:00:00 2001 From: Colin Rotherham Date: Fri, 22 Sep 2023 09:34:08 +0100 Subject: [PATCH 08/10] Add watch task for ESLint (review app only) --- packages/govuk-frontend-review/tasks/watch.mjs | 14 ++++++++++++++ 1 file changed, 14 insertions(+) diff --git a/packages/govuk-frontend-review/tasks/watch.mjs b/packages/govuk-frontend-review/tasks/watch.mjs index e9c6a460c2..1ff395c43c 100644 --- a/packages/govuk-frontend-review/tasks/watch.mjs +++ b/packages/govuk-frontend-review/tasks/watch.mjs @@ -44,5 +44,19 @@ export const watch = (options) => // Run Sass compile styles(options) ) + ), + + /** + * JavaScripts lint watcher + */ + task.name('lint:js watch', () => + gulp.watch( + [join(options.srcPath, '**/*.{cjs,js,mjs}')], + + // Run ESLint checks + npm.script('lint:js:cli', [ + slash(join(options.workspace, '**/*.{cjs,js,mjs}')) + ]) + ) ) ) From 34109cd783924480d5efd7cb336389a757b6ae69 Mon Sep 17 00:00:00 2001 From: Colin Rotherham Date: Thu, 21 Sep 2023 17:16:39 +0100 Subject: [PATCH 09/10] Move TypeScript `build:types` to watch task We already have type checks in editors and IDEs, plus we run `lint:types` during the GitHub Actions workflow So this check is more useful as a watch task for early feedback Adds flag `--incremental` to use the compiler cache (10x faster) and flag `--pretty` to preserve colour output via `concurrently` CLI --- .github/workflows/tests.yml | 2 +- packages/govuk-frontend-review/package.json | 2 +- packages/govuk-frontend-review/tasks/watch.mjs | 12 ++++++++---- packages/govuk-frontend/package.json | 2 +- packages/govuk-frontend/tasks/watch.mjs | 12 ++++++++---- 5 files changed, 19 insertions(+), 11 deletions(-) diff --git a/.github/workflows/tests.yml b/.github/workflows/tests.yml index af72699c37..a8adac0c95 100644 --- a/.github/workflows/tests.yml +++ b/.github/workflows/tests.yml @@ -96,7 +96,7 @@ jobs: - description: TypeScript compiler name: lint-types - run: npm run lint:types -- --incremental + run: npm run lint:types -- --incremental --pretty cache: '**/*.tsbuildinfo' steps: diff --git a/packages/govuk-frontend-review/package.json b/packages/govuk-frontend-review/package.json index 1c2ac6ebbf..129e2d0d69 100644 --- a/packages/govuk-frontend-review/package.json +++ b/packages/govuk-frontend-review/package.json @@ -14,7 +14,7 @@ "build:sassdoc": "sassdoc --config sassdoc.config.yaml ../govuk-frontend/src/govuk", "build:types": "tsc --build tsconfig.build.json", "build:jsdoc": "typedoc", - "postbuild": "npm run build:jsdoc && npm run build:sassdoc && npm run build:types", + "postbuild": "npm run build:jsdoc && npm run build:sassdoc", "proxy": "browser-sync start --config browsersync.config.js", "serve": "nodemon", "start": "node src/start.mjs", diff --git a/packages/govuk-frontend-review/tasks/watch.mjs b/packages/govuk-frontend-review/tasks/watch.mjs index 1ff395c43c..502deec321 100644 --- a/packages/govuk-frontend-review/tasks/watch.mjs +++ b/packages/govuk-frontend-review/tasks/watch.mjs @@ -52,11 +52,15 @@ export const watch = (options) => task.name('lint:js watch', () => gulp.watch( [join(options.srcPath, '**/*.{cjs,js,mjs}')], + gulp.parallel( + // Run TypeScript compiler + npm.script('build:types', ['--incremental', '--pretty'], options), - // Run ESLint checks - npm.script('lint:js:cli', [ - slash(join(options.workspace, '**/*.{cjs,js,mjs}')) - ]) + // Run ESLint checks + npm.script('lint:js:cli', [ + slash(join(options.workspace, '**/*.{cjs,js,mjs}')) + ]) + ) ) ) ) diff --git a/packages/govuk-frontend/package.json b/packages/govuk-frontend/package.json index 4cc36c85f6..66932a85f0 100644 --- a/packages/govuk-frontend/package.json +++ b/packages/govuk-frontend/package.json @@ -51,7 +51,7 @@ "build:release": "gulp build:release --color", "build:stats": "npm run stats --workspace @govuk-frontend/stats", "build:types": "tsc --build tsconfig.build.json", - "postbuild:package": "npm run build:stats && npm run build:types && govuk-prototype-kit validate-plugin .", + "postbuild:package": "npm run build:stats && govuk-prototype-kit validate-plugin .", "dev": "gulp dev --color", "version": "echo $npm_package_version" }, diff --git a/packages/govuk-frontend/tasks/watch.mjs b/packages/govuk-frontend/tasks/watch.mjs index 606a484822..6686d537c8 100644 --- a/packages/govuk-frontend/tasks/watch.mjs +++ b/packages/govuk-frontend/tasks/watch.mjs @@ -46,11 +46,15 @@ export const watch = (options) => task.name('lint:js watch', () => gulp.watch( [join(options.srcPath, '**/*.{cjs,js,mjs}')], + gulp.parallel( + // Run TypeScript compiler + npm.script('build:types', ['--incremental', '--pretty'], options), - // Run ESLint checks - npm.script('lint:js:cli', [ - slash(join(options.workspace, '**/*.{cjs,js,mjs}')) - ]) + // Run ESLint checks + npm.script('lint:js:cli', [ + slash(join(options.workspace, '**/*.{cjs,js,mjs}')) + ]) + ) ) ), From f655b6d076557d95af4e3dbfba1d19361bf96529 Mon Sep 17 00:00:00 2001 From: Colin Rotherham Date: Mon, 25 Sep 2023 07:34:10 +0100 Subject: [PATCH 10/10] Replace `files.clean()` task with `npm run clean` MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The Rollup stats and webpack example don’t run Gulp so this gives us a consistent way to “reset everything” before a build --- docs/contributing/tasks.md | 4 ++++ docs/examples/webpack/package.json | 4 +++- jest.config.mjs | 4 ++-- package-lock.json | 22 ++++++++++++++++++- package.json | 2 ++ packages/govuk-frontend-review/package.json | 2 ++ .../tasks/build/dist.mjs | 7 ++---- packages/govuk-frontend/package.json | 7 +++++- .../govuk-frontend/tasks/build/package.mjs | 6 +++-- .../govuk-frontend/tasks/build/release.mjs | 4 ++-- shared/stats/package.json | 2 ++ shared/tasks/files.mjs | 15 +------------ shared/tasks/npm.mjs | 8 +++++-- shared/tasks/package.json | 1 - 14 files changed, 57 insertions(+), 31 deletions(-) diff --git a/docs/contributing/tasks.md b/docs/contributing/tasks.md index 623ecaec16..d3f0224827 100644 --- a/docs/contributing/tasks.md +++ b/docs/contributing/tasks.md @@ -25,6 +25,10 @@ npm scripts are defined in `package.json`. These trigger a number of Gulp tasks. - run tasks from `npm run build:package` - run tasks from `npm run build:app` +**`npm run clean` will do the following:** + +- clean the `./dist` folder from all workspaces + **`npm run build:app` will trigger `npm run build --workspace @govuk-frontend/review` that will:** - clean the `./packages/govuk-frontend-review/dist` folder diff --git a/docs/examples/webpack/package.json b/docs/examples/webpack/package.json index 380cd92fd5..7bc889a71c 100644 --- a/docs/examples/webpack/package.json +++ b/docs/examples/webpack/package.json @@ -4,7 +4,9 @@ "description": "Boilerplate example for govuk-frontend using webpack", "scripts": { "dev": "webpack serve --progress --mode development", - "build": "webpack --progress --mode production" + "prebuild": "npm run clean", + "build": "webpack --progress --mode production", + "clean": "del-cli dist" }, "dependencies": { "govuk-frontend": "*" diff --git a/jest.config.mjs b/jest.config.mjs index 965f46ae34..381d035516 100644 --- a/jest.config.mjs +++ b/jest.config.mjs @@ -48,7 +48,7 @@ const config = { // Transform some `*.js` to compatible CommonJS ...Object.fromEntries( - ['del', 'slash'].map((packagePath) => [ + ['slash'].map((packagePath) => [ replacePathSepForRegex(`${packageResolveToPath(packagePath)}$`), [ 'babel-jest', @@ -63,7 +63,7 @@ const config = { // Enable Babel transforms for ESM-only node_modules // See: https://jestjs.io/docs/ecmascript-modules transformIgnorePatterns: [ - `/node_modules/(?!${['del', 'slash'].join('|')}/)` + `/node_modules/(?!${['slash'].join('|')}/)` ] } diff --git a/package-lock.json b/package-lock.json index fa38b6aa26..537da832e2 100644 --- a/package-lock.json +++ b/package-lock.json @@ -25,6 +25,7 @@ "@typescript-eslint/parser": "^6.7.0", "concurrently": "^8.2.1", "cross-env": "^7.0.3", + "del-cli": "^5.1.0", "editorconfig-checker": "^5.1.1", "eslint": "^8.49.0", "eslint-config-prettier": "^9.0.0", @@ -9698,6 +9699,26 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/del-cli": { + "version": "5.1.0", + "resolved": "https://registry.npmjs.org/del-cli/-/del-cli-5.1.0.tgz", + "integrity": "sha512-xwMeh2acluWeccsfzE7VLsG3yTr7nWikbfw+xhMnpRrF15pGSkw+3/vJZWlGoE4I86UiLRNHicmKt4tkIX9Jtg==", + "dev": true, + "dependencies": { + "del": "^7.1.0", + "meow": "^10.1.3" + }, + "bin": { + "del": "cli.js", + "del-cli": "cli.js" + }, + "engines": { + "node": ">=14.16" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, "node_modules/del/node_modules/aggregate-error": { "version": "4.0.1", "resolved": "https://registry.npmjs.org/aggregate-error/-/aggregate-error-4.0.1.tgz", @@ -30399,7 +30420,6 @@ "@percy/puppeteer": "^2.0.2", "chalk": "^5.3.0", "cpy": "^10.1.0", - "del": "^7.1.0", "gulp": "^4.0.2", "gulp-cli": "^2.3.0", "nunjucks": "^3.2.4", diff --git a/package.json b/package.json index 97d7387fb4..58b909a149 100644 --- a/package.json +++ b/package.json @@ -29,6 +29,7 @@ "build:types": "npm run build:types --workspaces --if-present", "postbuild:package": "jest --color --selectProjects \"Build tasks\" --testMatch \"**/build/package.unit.test.mjs\"", "postbuild:release": "jest --color --selectProjects \"Build tasks\" --testMatch \"**/build/release.unit.test.mjs\"", + "clean": "npm run clean --workspaces --if-present", "heroku-postbuild": "npm run build", "postheroku-postbuild": "NPM_CONFIG_PRODUCTION=true npm ci --ignore-scripts --omit=optional --workspace @govuk-frontend/review", "pretest": "npm run build", @@ -56,6 +57,7 @@ "@typescript-eslint/parser": "^6.7.0", "concurrently": "^8.2.1", "cross-env": "^7.0.3", + "del-cli": "^5.1.0", "editorconfig-checker": "^5.1.1", "eslint": "^8.49.0", "eslint-config-prettier": "^9.0.0", diff --git a/packages/govuk-frontend-review/package.json b/packages/govuk-frontend-review/package.json index 129e2d0d69..767d085b4e 100644 --- a/packages/govuk-frontend-review/package.json +++ b/packages/govuk-frontend-review/package.json @@ -10,11 +10,13 @@ "license": "MIT", "scripts": { "dev": "gulp dev --color", + "prebuild": "npm run clean", "build": "gulp build --color", "build:sassdoc": "sassdoc --config sassdoc.config.yaml ../govuk-frontend/src/govuk", "build:types": "tsc --build tsconfig.build.json", "build:jsdoc": "typedoc", "postbuild": "npm run build:jsdoc && npm run build:sassdoc", + "clean": "del-cli dist", "proxy": "browser-sync start --config browsersync.config.js", "serve": "nodemon", "start": "node src/start.mjs", diff --git a/packages/govuk-frontend-review/tasks/build/dist.mjs b/packages/govuk-frontend-review/tasks/build/dist.mjs index 5d0de32906..13301eb35d 100644 --- a/packages/govuk-frontend-review/tasks/build/dist.mjs +++ b/packages/govuk-frontend-review/tasks/build/dist.mjs @@ -1,4 +1,4 @@ -import { files, task } from '@govuk-frontend/tasks' +import { npm } from '@govuk-frontend/tasks' import gulp from 'gulp' import { styles } from '../index.mjs' @@ -10,7 +10,4 @@ import { styles } from '../index.mjs' * @type {import('@govuk-frontend/tasks').TaskFunction} */ export default (options) => - gulp.series( - task.name('clean', () => files.clean('*', options)), - styles(options) - ) + gulp.series(npm.script('clean', [], options), styles(options)) diff --git a/packages/govuk-frontend/package.json b/packages/govuk-frontend/package.json index 66932a85f0..3f30a3d7b0 100644 --- a/packages/govuk-frontend/package.json +++ b/packages/govuk-frontend/package.json @@ -46,13 +46,18 @@ ], "license": "MIT", "scripts": { + "dev": "gulp dev --color", + "prebuild:package": "npm run clean:package", + "prebuild:release": "npm run clean:release", "build": "npm run build:package", "build:package": "gulp build:package --color", "build:release": "gulp build:release --color", "build:stats": "npm run stats --workspace @govuk-frontend/stats", "build:types": "tsc --build tsconfig.build.json", + "clean": "npm run clean:package", + "clean:package": "del-cli dist", + "clean:release": "del-cli ../../dist --force", "postbuild:package": "npm run build:stats && govuk-prototype-kit validate-plugin .", - "dev": "gulp dev --color", "version": "echo $npm_package_version" }, "devDependencies": { diff --git a/packages/govuk-frontend/tasks/build/package.mjs b/packages/govuk-frontend/tasks/build/package.mjs index 499a2b5937..f42833b25b 100644 --- a/packages/govuk-frontend/tasks/build/package.mjs +++ b/packages/govuk-frontend/tasks/build/package.mjs @@ -1,6 +1,7 @@ import { join } from 'path' -import { files, task } from '@govuk-frontend/tasks' +import { paths } from '@govuk-frontend/config' +import { files, npm, task } from '@govuk-frontend/tasks' import gulp from 'gulp' import { assets, fixtures, scripts, styles, templates } from '../index.mjs' @@ -13,7 +14,8 @@ import { assets, fixtures, scripts, styles, templates } from '../index.mjs' */ export default (options) => gulp.series( - task.name('clean', () => files.clean('*', options)), + npm.script('clean', [], { basePath: paths.stats }), + npm.script('clean:package', [], options), assets(options), fixtures(options), diff --git a/packages/govuk-frontend/tasks/build/release.mjs b/packages/govuk-frontend/tasks/build/release.mjs index 9e9c79a60d..c1ef809d42 100644 --- a/packages/govuk-frontend/tasks/build/release.mjs +++ b/packages/govuk-frontend/tasks/build/release.mjs @@ -1,7 +1,7 @@ import { join } from 'path' import { pkg } from '@govuk-frontend/config' -import { files, scripts, styles, task } from '@govuk-frontend/tasks' +import { files, npm, scripts, styles, task } from '@govuk-frontend/tasks' import gulp from 'gulp' /** @@ -12,7 +12,7 @@ import gulp from 'gulp' */ export default (options) => gulp.series( - task.name('clean', () => files.clean('*', options)), + npm.script('clean:release', [], options), // Copy GOV.UK Frontend static assets task.name('copy:assets', () => diff --git a/shared/stats/package.json b/shared/stats/package.json index 20d5e0095a..950bfbdb50 100644 --- a/shared/stats/package.json +++ b/shared/stats/package.json @@ -9,6 +9,8 @@ }, "license": "MIT", "scripts": { + "clean": "del-cli dist", + "prestats": "npm run clean", "stats": "rollup --config rollup.config.mjs" }, "dependencies": { diff --git a/shared/tasks/files.mjs b/shared/tasks/files.mjs index aa8d24df44..c0a2afc46b 100644 --- a/shared/tasks/files.mjs +++ b/shared/tasks/files.mjs @@ -1,23 +1,10 @@ import { mkdir, writeFile } from 'fs/promises' import { dirname, join, parse } from 'path' -import { paths, pkg } from '@govuk-frontend/config' +import { pkg } from '@govuk-frontend/config' import cpy from 'cpy' -import { deleteAsync } from 'del' import slash from 'slash' -/** - * Delete path globs for a given destination - * - * @param {string} pattern - Pattern to remove - * @param {Pick} options - Asset options - */ -export async function clean(pattern, { destPath }) { - await deleteAsync(slash(join(destPath, pattern)), { - cwd: paths.root - }) -} - /** * Write `packages/govuk-frontend/package.json` version to file * diff --git a/shared/tasks/npm.mjs b/shared/tasks/npm.mjs index 81e1d4851b..0d4a55dc6f 100644 --- a/shared/tasks/npm.mjs +++ b/shared/tasks/npm.mjs @@ -9,7 +9,7 @@ import { task } from './index.mjs' * * @param {string} name - npm script name * @param {string[]} [args] - npm script CLI arguments - * @param {import('./index.mjs').TaskOptions} [options] - Task options + * @param {Pick} [options] - Task options * @returns {Promise} Script run */ export async function run(name, args = [], options) { @@ -46,7 +46,7 @@ export async function run(name, args = [], options) { * * @param {string} name - npm script name * @param {string[]} [args] - npm script CLI arguments - * @param {import('./index.mjs').TaskOptions} [options] - Task options + * @param {Pick} [options] - Task options * @returns {() => Promise} Script run */ export function script(name, args = [], options) { @@ -58,3 +58,7 @@ export function script(name, args = [], options) { return task.name(displayName, () => run(name, args, options)) } + +/** + * @typedef {import('./index.mjs').TaskOptions} TaskOptions + */ diff --git a/shared/tasks/package.json b/shared/tasks/package.json index 28e25ec38e..046786579e 100644 --- a/shared/tasks/package.json +++ b/shared/tasks/package.json @@ -17,7 +17,6 @@ "@percy/puppeteer": "^2.0.2", "chalk": "^5.3.0", "cpy": "^10.1.0", - "del": "^7.1.0", "gulp": "^4.0.2", "gulp-cli": "^2.3.0", "nunjucks": "^3.2.4",