feat: replace listr with listr2

[iiroj]

This PR replaces listr with listr2.

The most notable change is that the task output is shown "inline" where the task is run, and it's not collapsed.

Most of the refactoring came from listr2 not adding the errors array to its context, but it was a good update in any case.

What do you think, @okonet?

[iiroj]

Here's a successful task run (no collapsing):

❯ node bin/lint-staged.js
✔ Preparing...
✔ Running tasks...
  ✔ Running tasks for *.{js,json,md}
    ✔ prettier --write
  ↓ No staged files match *.js [SKIPPED]
✔ Applying modifications...
✔ Cleaning up... 

Here's a failure:

❯ node bin/lint-staged.js
✔ Preparing...
⚠ Running tasks...
  ❯ Running tasks for *.{js,json,md}
    ✖ prettier found some errors. Please fix them and try committing again.
    lib/resolveTaskFn.js
  ✔ Running tasks for *.js
    ✔ npm run lint:base -- --fix
↓ Skipped because of errors from tasks. [SKIPPED]
✔ Reverting to original state because of errors...
✔ Cleaning up... 

[iiroj]

Here's a fancy screenshot

[iiroj]

I'm fine with not changing the way errors are displayed, but the other stuff is pretty nice.

[okonet]

This looks cool to me. The only concern is how it's going to look like when there are more errors? Like 20-30 lines? Now, they are printed last but with this update they won't be anymore. Can you test it and let me know how you feel about it?

[iiroj]

@okonet I'll try to generate a huge error log. It does seem that listr2 updates the output into the correct positions without issues.

In any case might be safer to print them out last, like it is now.

[okonet]

I was thinking about writing our own printer using https://github.com/vadimdemedes/ink but I don't have much time for it at the moment and Listr also solves lots of other edge cases for us.

[iiroj]

Well, it doesn't seem to handle a lot of output, so let's just forget about it. In this example it loses the initial steps, and the start of the output itself:

❯ npx lint-staged
                      prettier/prettier
       46:18  error  Replace `".js",·".jsx"` with `'.js',·'.jsx'`                                        prettier/prettier
       55:21  error  Replace `"babel-loader"` with `'babel-loader'`                                      prettier/prettier
       58:19  error  Replace `"webpack_production"` with `'webpack_production'`                          prettier/prettier
       59:19  error  Replace `"webpack_development"` with `'webpack_development'`                        prettier/prettier
       73:27  error  Replace `"main"` with `'main'`                                                      prettier/prettier
       77:19  error  Replace `"initial"` with `'initial'`                                                prettier/prettier
       78:17  error  Replace `"vendor"` with `'vendor'`                                                  prettier/prettier
      108:21  error  Replace `"disabled"` with `'disabled'`                                              prettier/prettier
    
    ✖ 113 problems (113 errors, 0 warnings)
      110 errors and 0 warnings potentially fixable with the `--fix` option.
    

    Error while parsing /Users/iiro/git/iiro.fi/src/constants/fonts.js
    Line 4, column 33: Line 4: Unexpected token, expected ";"

      2 |   "https://fonts.googleapis.com/css?family=IBM+Plex+Sans+Condensed:400,600|IBM+Plex+Serif:300&display=swap"
      3 | 
    > 4 | export const IBM_PLEX_SERIF = ""IBM Plex Serif""
        |                                 ^
      5 | 
      6 | export const IBM_PLEX_SANS_CONDENSED = ""IBM Plex Sans Condensed""
      7 | 
    `parseForESLint` from parser `/Users/iiro/git/iiro.fi/node_modules/babel-eslint/lib/index.js` is invalid and will just be ignored
↓ Skipped because of errors from tasks. [SKIPPED]
✔ Reverting to original state because of errors...
✔ Cleaning up... 

[iiroj]

This is a bit closer to how it's currently working:

❯ node bin/lint-staged.js
✔ Preparing...
⚠ Running tasks...
  ❯ Running tasks for *.{js,json,md}
    ✖ prettier --check
↓ Skipped because of errors from tasks. [SKIPPED]
✔ Reverting to original state because of errors...
✔ Cleaning up... 

✖ prettier --check:
Checking formatting...
lib/index.js
Code style issues found in the above file(s). Forgot to run Prettier?

[iiroj]

It would be pretty simple to allow showing task output in the same way even when tasks pass, thoughts?

[okonet]

I think that would be a great addition.

[iiroj]

Here's some refactoring.

task failed without output (because it's not found):

task failed with output:

Killing and SIGINT will work the same way, pringint the code and possible output.

I could add --output or similar, that would then always print output in the same way.

[iiroj]

Here's a run with --output:

What do you think, @okonet? The extra line-break in the second output comes from the task output itself.

[okonet]

What does output flag do?

[iiroj]

@okonet --output makes lint-staged always print task ouput, like in the screenshot. What would be a better name?

[iiroj]

Hmm, adding more failure codes like ENOENT unearthed that on Appveyor at least one test fails differently:

--- × node -e "process.exit(1)" failed without output (FAILED).
+++ × node -e "process.exit(1)" failed without output (ENOENT).

[iiroj]

@okonet do you think --verbose would fit better to "always show output, even when tasks succeed"? We already have the debug option, but maybe these wouldn't get mixed up.

[okonet]

I believe verbose is a better name for what we’re trying to do. And as you said since we have debug flag it won’t be collided.

[iiroj]

@okonet I also went ahead and bumbed Node.js v13 to v14 in the CI, since that was recently released and should be the next LTS version.

[iiroj]

@okonet I removed eslint-config-okonet since it was failing Windows Node.js 14.

[okonet]

Yeah sure I didn’t update for years. Not sure I want to use it anymore :)

[iiroj]

@okonet can you also update the CI check config to expect Node 14 instead of 13?

[okonet]

Which check do you mean? How do I do that?

[iiroj]

@okonet Sorry, "required status checks":
https://help.github.com/en/github/administering-a-repository/about-required-status-checks

[okonet]

Ah yeah I’ll do this from my computer

[okonet]

Done

[iiroj]

@okonet I found a few places where the quiet option is not respected (mostly errors), but let's resolve these in another PR, since they're not directly related to this PR.

EDIT: Well, I managed to fix it, let me push...

[github-actions]

🎉 This PR is included in version 10.2.0 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀