[WORK IN PROGRESS]

The task runner may do multiple tasks in parallel. Tasks can be long-running (like "dev" or "watch") or end without user intervention (such as "build", but tasks often support --watch). Ideally the task viewer supports any combination of tasks and task types while still being usable.

Libraries

As we're currently developing this part of vite-plus in TypeScript only TS options are included:

• blessed (A high-level terminal interface library for node.js)
• node-pty (Fork pseudoterminals in Node.JS)

Depending on how fancy we want to make it, I think we can do without dependencies here. Node.js seems to have plenty of built-ins by now. Except for at least something to calculate string-width/fast-string-truncated-width.

At this point I think there are two main challenges:

• A UI that scales
• User interaction, as we'll need to "toggle" interactivity between our own TUI and running processes individually.

Had fun building this, it's under 200 LOC code. Using <Tab> and <Enter> toggles tasks and full screen mode. This example has 4 processes running:

const vite = { cmd: 'pnpm', args: ['dev'], env };
const vitest = { cmd: 'pnpm', args: ['run', 'test', '--watch'], env };
const oxlint = { cmd: 'pnpm', args: ['lint:watch'], env };
const commands = [vitest, vite, oxlint, vitest];

Existing task runners/working examples

The Turborepo and Nx task viewers aren't super snappy (you'd see and feel it if you try). I'm using Bash v5, should be fine I guess. Either way, I think we can do better. The TUIs can still serve as inspiration, e.g. having the list of taks in the left sidebar might be a good idea. On the one hand, it's clear that this isn't trivial to get right, on the other hand I feel like we can do better if we keep it clean and concise. Developing and debugging this in TypeScript is quite nice.

Turborepo

Replay

pnpm dlx create-turbo@latest --example kitchen-sink
cd kitchen-sink
pnpm run dev

Screenshot

Source code

?

Nx

Replay

npx create-nx-workspace
npx nx g @nx/web:app apps/my-solid-app --bundler=vite
npx nx run-many -t serve -p @org/org -p @org/my-solid-app

Screenshot

Source code

https://github.com/nrwl/nx/tree/master/packages/nx/src/tasks-runner/life-cycles