Improve the rendered files print for each dir by grouping

[qmhc]

Description

Current prints maybe misaligned when there have two or more output dirs:

Suggested solution

For beauty and neatness, I think group each dir print will be better:

lib/
  test.js ...
  other.js ...
  dir/index.js ...

es/
  test.mjs ...
  other.mjs ...
  dir/index.mjs ...

I can create a PR if you approve this idea.

Alternative

No response

Additional context

No response

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that request the same feature to avoid creating a duplicate.

[bluwy]

Ref: #9111

Actually I just realized something about the output style, because it's not a full path anymore, we cant ctrl/cmd-click the file path to open the file in vscode, for example. I think that would be a feature we won't want to lose.

[qmhc]

How about keeping the full paths:

lib:
  lib/test.js ...
  lib/other.js ...
  lib/dir/index.js ...

es:
  es/test.mjs ...
  es/other.mjs ...
  es/dir/index.mjs ...

The above looks a little weird with indent.

Or we using a title on the top with other color:

lib
lib/test.js ...
lib/other.js ...
lib/dir/index.js ...

es
es/test.mjs ...
es/other.mjs ...
es/dir/index.mjs ...

Or for simple, only using a empty line to divide each group:

lib/test.js ...
lib/other.js ...

es/test.mjs ...
es/other.mjs ...

[bluwy]

I don't really have an opinion though as the suggestions are slight variations to the current output 😬 If I have to choose, I'd prefer the current Vite way as the lib/ and es/ etc are dimmed by default, so it should be easy to differentiate in the console. Happy to hear if others have thoughts about this too though.

[bluwy]

Vite 4 has updated the logs to be a bit more aligned so I think this is resolved