Skip JSDoc, SassDoc, Rollup stats during dev, add ESLint

[colinrotherham]

This PR does a few things to speed up development:

1. Skips JSDoc, SassDoc, and Rollup stats
2. Splits watch tasks into separate “lint” and “compile”
3. Moves TypeScript compiler build:types to a watch task
4. Adds new npm run clean task for workspaces without Gulp

Where have my type checks gone?

Type checks moved to npm run lint last month so we can skip npm run build:types

In development, ESLint, StyleLint and the TypeScript compiler now run via gulp.watch() instead

Where have my stats gone?

JSDoc, SassDoc and Rollup stats are now considered optional in development

That said, the Review app will turn on these optional sections when they're built using:

npm run build:jsdoc --workspace @govuk-frontend/review
npm run build:sassdoc --workspace @govuk-frontend/review
npm run build:stats --workspace govuk-frontend

[github-actions]

📋 Stats

File sizes

File	Size
dist/govuk-frontend-4.6.0.min.css	118.07 KiB
dist/govuk-frontend-4.6.0.min.js	47.1 KiB
dist/govuk-frontend-ie8-4.6.0.min.css	79.27 KiB
packages/govuk-frontend/dist/govuk/all.bundle.js	76.96 KiB
packages/govuk-frontend/dist/govuk/all.bundle.mjs	72.29 KiB
packages/govuk-frontend/dist/govuk/all.mjs	3.84 KiB
packages/govuk-frontend/dist/govuk/govuk-frontend-component.mjs	359 B
packages/govuk-frontend/dist/govuk/govuk-frontend.min.css	121.15 KiB
packages/govuk-frontend/dist/govuk/govuk-frontend.min.js	37.41 KiB
packages/govuk-frontend/dist/govuk/i18n.mjs	5.83 KiB

Modules

File	Size
all.mjs	68.39 KiB
components/accordion/accordion.mjs	21.9 KiB
components/button/button.mjs	4.71 KiB
components/character-count/character-count.mjs	21.64 KiB
components/checkboxes/checkboxes.mjs	5.69 KiB
components/error-summary/error-summary.mjs	6.01 KiB
components/exit-this-page/exit-this-page.mjs	16.6 KiB
components/header/header.mjs	3.83 KiB
components/notification-banner/notification-banner.mjs	4.54 KiB
components/radios/radios.mjs	4.68 KiB
components/skip-link/skip-link.mjs	3.73 KiB
components/tabs/tabs.mjs	9.07 KiB

View stats and visualisations on the review app

---

Action run for f655b6d

[domoscargin]

I don't have any major problem with this - takes my rebuild time from 4+ seconds to 1-2 seconds.

One slight concern is it makes it more annoying to develop things that focus on the stuff that's skipped. I can't just run npm run build:sassdoc, for example - I have to remember how to access the review app workspace and run it from there. Don't see that being a particular problem though.

Relatedly, does this mean we'll get all the type complaints only when we run the Github action workflow?

[colinrotherham]

@domoscargin Yeah, that's the downside for documentation and stats

For others reading this you can still run them manually at any time:

npm run build:jsdoc --workspace @govuk-frontend/review
npm run build:sassdoc --workspace @govuk-frontend/review
npm run build:stats --workspace govuk-frontend

Relatedly, does this mean we'll get all the type complaints only when we run the Github action workflow?

Yeah but up for discussion? Similar with Prettier, we don't run it via gulp.watch()

Good to find the right balance

[colinrotherham]

Sometimes you might want to skip the slow predev build entirely and run these in separate tabs:

npm run dev --workspace govuk-frontend
npm run dev --workspace @govuk-frontend/review

Another top tip

[domoscargin]

Yeah, I think running the doc stuff manually will be absolutely fine 99.5% of the time so that's grand.

Completely on the fence about whether it's nicer to develop without getting type failures, or whether it'd be worse to get a bunch of 'em at once and potentially have to do a bigger refactor. Hopefully somebody else chimes in and leans one way or the other!

[colinrotherham]

@domoscargin I'd quite like them turned on too, but it's usually just me with that opinion 😆

If you don't mind TypeScript *.tsbuildinfo cache files it goes from ~7 seconds to 500ms (see below)

We do this in GitHub Actions already:

govuk-frontend/.github/workflows/tests.yml

Line 99 in c397f76

run: npm run lint:types -- --incremental

Type check

6.63s user 0.41s system 208% cpu 3.376 total

time npm run build:types --workspace govuk-frontend

Type check with cache

0.52s user 0.13s system 79% cpu 0.821 total

time npm run build:types --workspace govuk-frontend -- --incremental

[colinrotherham]

@domoscargin I've added the TypeScript compiler build:types back as a watch task this morning

Ready for review again

[36degrees]

I think this makes sense most of the time but that there are scenarios where it'd be useful to see the stats or docs update as you make changes.

How hard would it be to:

• provide an easy way to re-enable the stats / docs (using a command line flag or environment variable)
• hide the stats and docs in the review app when they're not being 'live updated' (but always show them on Heroku deploys)

That way you won't end up in situation where you can forget you're looking at stale stats / docs. Thoughts?

[colinrotherham]

@36degrees Sounds like a nice addition, can decide the best approach today?

In readiness, I've pushed flags.hasDocs and flags.hasStats to the Review app to hide them for npm start

[colinrotherham]

We talked about this in today's dev catch-up and will keep the speed improvements

Suggested flags to "opt in" to JSDoc, SassDoc or Rollup stats can be added in future

In the meantime we can use existing npm scripts when optional features are required:

npm run build:jsdoc --workspace @govuk-frontend/review
npm run build:sassdoc --workspace @govuk-frontend/review
npm run build:stats --workspace govuk-frontend

These will automatically appear in the Review app when available

See PR description for updates

[domoscargin]

This is great! Can definitely feel the difference when developing locally, and there's not as much gumph in my terminal to scroll through to find any relevant errors.

And the type checking seems really speedy too!