Transition from Nx to wireit

[sndrs]

Nx does a lot more than we need it for, and there's a feeling that this is weighing down on maintenance and cognitive load for new devs.

Wireit provides a much lighter-weight option for defining cross-task dependency and output caching – the two things we use Nx for.

We will try incrementally swapping out Nx for wireit in the various corners of the repo, starting with the lowest impact areas (e.g. github pages) and working up the biggest (e.g. publishing source).

This way, if it works well, we'll end up removing Nx as we see the benefit. If it doesn't, we can revert the changes.

Using Nx to run repo-wide tasks, for now

Because Nx will try to run matching npm-scripts if it can't find a task in the Nx project.json, we can keep using Nx to run the new wireit tasks while Nx is still set up to handle repo-wide tasks and some project-specific tasks.

For example, once github-pages is using wireit, running make github-pages:build can still call pnpm nx run github-pages:build. Since there's no actual build task in the project.json, Nx itself will run pnpm build in the github-pages project dir (starting the wireit task).

This reduces the amount of change we need to make each time while making it easier to revert to full Nx if we need to.

If/when we decide to remove Nx, updating everything to run the npm-scripts directly will be the last step.

Tip

Use a W!RE!T comment to leave inline instructions along the way that will help with any final switch over, e.g.

// W!RE!T
// 1. remove the next line 
const someNxConfig = {}
// 2. uncomment this line
// const someWireitConfig = {}

Tasks

Beta Give feedback

1. Try out wireit on the storybook workflows #1273
   run_chromatic 📦 npm 🛠 workspace +3
2. Use wireit to orchestrate github-pages tasks #1317
   run_chromatic +1
3. Move Nx configs from project.json to package.json #1334
   @guardian/ab-core @guardian/ab-react @guardian/browserslist-config @guardian/eslint-config @guardian/eslint-config-typescript @guardian/libs @guardian/prettier @guardian/tsconfig run_chromatic 📦 npm 🛠 workspace +11