microsoft / typescript-analyze-trace

A tool for analyzing the output of `tsc --generateTrace`
MIT License
334 stars 19 forks source link

feature request: Show source code in the output #34

Open dylang opened 2 years ago

dylang commented 2 years ago

Showing the filename and line numbers is helpful, but it means a lot of manually digging when looking for common patterns.

I made another POC. The tree component may need to be fixed or replaced to support new lines.

Screen Shot 2022-09-22 at 11 45 53 AM

As a developer using TypeScript, and not somebody developing TypeScript, it might even be more helpful to show less of the internal information, and instead display the results similar to how tsc shows errors.

BEFORE

 {"id":4961,"kind":"GenericTypeAlias","name":"Pick","aliasTypeArguments":[4909,4960],"location":{"path":"/users/dylang/repo/node_modules/typescript/lib/lib.es5.d.ts","line":1578,"char":1}}

AFTER

repo/node_modules/typescript/lib/lib.es5.d.ts:1578:1

1578 type Pick<T, K extends keyof T> = {
     ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
amcasey commented 2 years ago

FWIW, the source positions are specifically printed in such a way that smart terminals (like the one in VS Code) can use them as hyperlinks. Since the output is already pretty verbose, that seemed more practical than including source.

dylang commented 2 years ago

Hi @amcasey, thanks for the follow-up.

I agree, the links are helpful, which is why I kept them in the AFTER above.

However, in the screenshot above there are 16 links. This is one page of perhaps hundreds.

We're not going to click on each link to open the file and to look for patterns that are causing problems.

Showing the source has made it pretty easy for us to scan the code by scrolling through the output.

dylang commented 2 years ago

I tried to make a better POC, but the way the typeTree data is sometimes an object and sometimes JSON.stringify'ed had me confused and I didn't want to break what you were doing.