docs(website): add simple ts ast viewer #4243
Conversation
|
Thanks for the PR, @armano2! typescript-eslint is a 100% community driven project, and we are incredibly grateful that you are contributing to that community. The core maintainers work on this in their personal time, so please understand that it may not be possible for them to review your work immediately. Thanks again! 🙏 Please, if you or your company is finding typescript-eslint valuable, help us sustain the project by sponsoring it transparently on https://opencollective.com/typescript-eslint. As a thank you, your profile/company logo will be added to our main README which receives thousands of unique visitors per day. |
|
❌ Deploy Preview for typescript-eslint failed. 🔨 Explore the source changes: 137fd38 🔍 Inspect the deploy log: https://app.netlify.com/sites/typescript-eslint/deploys/61b1d21c2ff1c900079d08c5 |
There was a problem hiding this comment.
right now the right panel has 3 states: off, ESTree AST, TS AST.
instead of "off", it'd probably good to instead make it show the lint results (eg similar to how the TS playground shows the TS typecheck results in the right panel).
This would probably make for a nicer UX as you can make the right-panel a tabbed view rather than putting right panel controls in the left bar. Also means you can represent them as a set of tabs (eg more "radio button" like), rather than the current UX of a "checkbox".
"radio button" is nicer because it's a singular selection whereas "checkboxes" are intended for multi-select.
In terms of the AST - have you used https://ts-ast-viewer.com/ ?
My problem with just dumping the TS AST like this is that there is so much cruft, and a lot of the state is stored as integer flags.
I also think there are different methods for traversing the AST which can reveal a different structure.
For example - this is what your traversal shows:
But this is what ts-ast-viewer shows:
Note how yours has the "useless" FirstStatement node. Different traversal styles? Or does ts-ast-viewer ignore some nodes?
Also for the integer flags - can we "decompose" them?
EG instead of displaying 256 - we could do something like ts-ast-viewer does:
|
thank you for your feedback main difference between ts-ast-viewer and what i'm showing is, that i do not use functions / iterators to traverse nodes, (i also hide undefined fields) in ts-ast-viewer iteration is either done by doing getChildren or ferEachChild, rather than that i just print entire object structure as is from what we get in ts additionally i do hide few of internal properties, and everything that starts with export const propsToFilter = [
'parent',
'comments',
'tokens',
// 'loc',
'jsDoc',
'lineMap',
'externalModuleIndicator',
'bindDiagnostics',
'modifierFlagsCache',
'transformFlags',
'resolvedModules',
];as for there is actualy lots of values in this enum that we should ignore current logic to retrieve node name looks like this function getTypeName(value: unknown): string | undefined {
if (
isRecord(value) &&
typeof value.kind === 'number' &&
window.ts.SyntaxKind[value.kind]
) {
return String(window.ts.SyntaxKind[value.kind]);
}
return undefined;
}as for displaying eslint lint result, i'm fine with that but not in this PR |
|
ok small update, i added tooltips to display flags:
do you prefer to hide or show undefined values in tree? we could maybe add some options to it, but i'm not sure about design tho
|
|
update: switching between different ast viewer options is now a drop-down instead of checkboxes
|
Let's hide them - there's so much junk in the AST so lets not pollute it with junk |
|
let me know if you see something else design / functionality wise that has to be fixed. as for arrays, instead of
we are going now properly count only array values
|
|
type informations are a little more tricky, and they are going to be added in separate PR (after figure out how to display them) |
|
fyi @G-Rath - you can use our playground instead of using astexplorer now! |
PR Checklist
Overview
This is initial draft of ast viewer that supports / prints typescript ast
Notable changes
TODO:
flagsMaybe we should split this PR to ast viewer changes and accessibility fixes