Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(utils): implement a new design for stdout #206

Merged
merged 2 commits into from
Nov 13, 2023

Conversation

IKatsuba
Copy link
Contributor

@IKatsuba IKatsuba commented Nov 6, 2023

Closes #190

@IKatsuba IKatsuba marked this pull request as ready for review November 6, 2023 21:49
Copy link
Collaborator

@matejchalk matejchalk left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I tested it out for our example app (npx nx run cli:run-collect), added a few visual notes. I'm not sure why the bold formatting isn't working properly in the audits section, since the code is the same as my PoC 😕

I got the feeling cliui was quite buggy in this, so maybe we could also consider some alternative package (maybe table-layout?) or even write it ourselves (all we need is the column alignment and word wrapping).

image

@IKatsuba
Copy link
Contributor Author

IKatsuba commented Nov 9, 2023

I tested it out for our example app (npx nx run cli:run-collect) and added a few visual notes. I'm not sure why the bold formatting isn't working correctly in the audits section since the code is the same as my PoC 😕

I got the feeling cloud was quite buggy in this, so maybe we could also consider some alternative package (maybe table-layout?) or even write it ourselves (all we need is the column alignment and word wrapping).

All CLI packages do strange things. I left the current packages but rendered the full report one time.

Do not use nx run-collect if you want to test it. It removes new line symbols with no reason. Just run

npx ../../dist/packages/cli collect --persist.format=stdout --persist.format=stdout

in examples/react-todos-app.

Copy link
Collaborator

@Tlacenka Tlacenka left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I ran it on Windows in VSCode with light theme. Looking good! 🌈

In-scope comment

  • While a preceding empty line is nice for the section, it should visually belong to the text below so I wouldn't put a new line right after it. In the original design, the preceding line is bigger than the gap after the title as well.

OOS

  • Is there any way of wrapping words to a new line so that they aren't cut off like that?
  • The footer line is missing a whitespace (has been ever since I joined) and I would really like to see that fixed. → Won't fix atm.
  • This is a suggestion for both MD and stdout - can we sort the output e.g. based on number of errros, then warnings? The user now has to skim through it seemingly with no logical ordering.

image

matejchalk
matejchalk previously approved these changes Nov 9, 2023
Copy link
Collaborator

@matejchalk matejchalk left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for the fixes, the output looks really good now 👍

I have suggestions regarding code style. But the functionality itself is now working as I would expect and the sanitized snapshot is now much more easy to understand as well.

packages/utils/src/lib/report-to-stdout.ts Outdated Show resolved Hide resolved
packages/utils/src/lib/report-to-stdout.ts Outdated Show resolved Hide resolved
@matejchalk
Copy link
Collaborator

@Tlacenka While I agree with your comments, I think changes to the original design should handled as another issue, so we don't bloat this PR. These changes are already a big improvement over the formatting we have in main, in my opinion.

Is there any way of wrapping words to a new line so that they aren't cut off like that?

Yes, that bugs me as well 😬

Unfortunately, it looks like cliui doesn't handle it properly because of some complicated ESM vs CJS stuff, I came across this issue. So we may have to switch libraries or implement the inteligent word wrapping ourselves.

But I do agree it would improve the output a lot, many of the audit titles won't fit on one line, so it's not really an edge case.

The footer line is missing a whitespace (has been ever since I joined) and I would really like to see that fixed.

This is a weird one. The space is actually there, it's just that some terminals don't render it after the heart. E.g. my VSCode integrated terminal renders it, but my regular Linux terminal doesn't (same as your Windows terminal) 😕

This is a suggestion for both MD and stdout - can we sort the output e.g. based on number of errros, then warnings? The user now has to skim through it seemingly with no logical ordering.

Yes, I can see that would be useful. Could you create a separate issue for that? I'm not sure what the best ordering would be (could be weight, score, alphabetical 🤷‍♂️), that's something we can discuss during refinement.

While a preceding empty line is nice for the section, it should visually belong to the text below so I wouldn't put a new line right after it. In the original design, the preceding line is bigger than the gap after the title as well.

Good catch 👍 In my PoC, I put an extra blank line before the title (so it's 2 blank lines before and 1 after). That would be an easy improvement, I believe.

@IKatsuba
Copy link
Contributor Author

IKatsuba commented Nov 9, 2023

I added the extra line before the titles. I agree; this is more readable.

I did minor refactoring. reportToStdout now returns string.

About whitespace after ❤️. I tried to change to another symbol.
image

@Tlacenka, could you check it out? If it is OK, I'll add some changes to the test.

@matejchalk
Copy link
Collaborator

About whitespace after ❤️. I tried to change to another symbol.

For me that did the trick 👍

image

Before it rendered like this:

image

Tlacenka
Tlacenka previously approved these changes Nov 10, 2023
Copy link
Collaborator

@Tlacenka Tlacenka left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

All defined acceptance criteria is met based on the original design now. 💯

The preceding gap for a section title is now bigger. ✔️

Unfortunately, the heart emoji still does not render a whitespace after it. It is now a different emoji than before (black and white) but the space is still missing. 😢

image

matejchalk
matejchalk previously approved these changes Nov 13, 2023
Copy link
Collaborator

@BioPhoton BioPhoton left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

left some small comments, but over all I love the improvements! 🏆

packages/core/src/lib/implementation/persist.spec.ts Outdated Show resolved Hide resolved
packages/core/src/lib/implementation/persist.spec.ts Outdated Show resolved Hide resolved
Copy link
Collaborator

@BioPhoton BioPhoton left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

<3

@IKatsuba IKatsuba merged commit 84b8c28 into main Nov 13, 2023
11 checks passed
@IKatsuba IKatsuba deleted the stdout-design-implementation branch November 13, 2023 21:02
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Implement stdout report formatting
4 participants