Prettify the outputs of the `npm run develop` command

[LoicPoullain]

Issue

Currently:

1. The outputs of the node process and the compiler are all mixed, making it difficult to know at a glance which error belongs to which step.
2. The colors of the compiler outputs are not displayed.

Possible solution

Prettify the outputs by splitting the terminal in two boxes.

Note that the shortcut Cmd + click (or Ctrl + click) should still work in VSCode.

Resources

• stmux, simple Terminal Multiplexer for Node.js Environments.
• blessed, a high-level terminal interface library for node.js.

[cr4ftx]

Hi Loic,

I was trying to build my own TypeScript config to run with Koa and i had the same issues for the dev mode.

I've found a couple of solutions to have better outputs :

1. Simply execute ts-node with supervisor but doesn't clear on reload and i didn't find a solution to clear the console with supervisor.

2. Use ts-node-dev.

Under the hood, it is based on ts-node and node-dev and you have all of the options of those two libraries.

To clear on reload and to not display a system notification, you just have to add a .node-dev.json file on the project root https://github.com/fgnass/node-dev#settings.

It is way simpler than splitting the console.

[LoicPoullain]

Thanks for your suggestion @swanncastel

About the output architecture

I like you approach. I made some tests with ts-node-dev and it's true that the output is prettier and less complex than when splitting the console.

For people who would read this issue, here is the behavior when a TS file is changed:

• If a TS error is thrown, the node process is stopped and the error is displayed in the terminal with the proper colors.
• If the compilation succeeds, the node process is restarted.

Going down this path seems like a good idea to me.

About the technologies to use

Regarding the way to implement this, I first did a benchmark on node-dev and supervisor (used independently from anything else) to see what we have.

Library	Total number of dependencies	node_modules/ size	Known vulnerabilities (Snyk)	Weekly downloads	Memory usage
supervisor	0	29 KB	none	25 183	9,9 / 10,4 MB
node-dev	92	3,7 MB	one	9 098	17,9 / 18 MB

Used on their own, supervisor looks to be a better solution that node-dev.

As for our problem, the use of ts-node-env has indeed several advantages:

• It directly "implements" the above output specification.
• It consumes less CPU and memory that the current npm run develop command.

	npm run develop (supervisor)	npm run develop (node-dev)	ts-node-dev
Node memory use (at rest)	189,9 MB	204,8 MB	137,6 MB
Node CPU use (at rest)	2,6 %	2,6 %	0,0 %

• We can get rid of concurrently and its 85 direct and indirect dependencies.
• It is increasingly being used (37 057 weekly downloads), so we can suppose that it's becoming a reliable solution.

I have some concerns on the product though:

• There are some issues on Github about performance problems and incorrect watching.
• The latest version of the package is 1.0.0-pre.32 which implies that the solution is not stable yet (cf semantic versioning conventions).
• The process is ran using ts-node and not node itself. This can be a problem because the code is not executed in the same way in production or during development. Here's an example of failing situation:

  
  // Directory Structure
  // src/
  // '- index.ts
  // '- schema.graphql

// index.ts import { readFileSync } from 'fs'; import { join } from 'path';

readFileSync(join(__dirname, 'schema.graphql'));

This is working using `ts-node-dev` but this may not work with `npm run start` (`node ./build/index.js`) if I forget to copy `*.graphql` files in the `npm run build` command.

Another approach could be also to include a build command in Foal's CLI. The CLI would take care of watching, compiling, copying the files and start and restart the node process in `./build`. This would be a huge work though.

[LoicPoullain]

This improvement is not essential and its implementation would be very complicated to maintain and test. Closing this for now.