chore(website): [playground] add copy as json and simplify ast viewer

[armano2]

PR Checklist

• Addresses an existing open issue: fixes Website: [Playground] Add "copy as JSON" option to AST Viewer #6037
• That issue was marked as accepting prs
• Steps in Contributing were taken

Overview

migrate ast viewer changes from #6656

this change is required to implement type viewer

notable changes:

• improved accessibility
• code is simplified and prepared to display other json like structures
• show additional flags (languageVersion, languageVariant, scriptKind, transformFlags)
  
• iterable elements are now properly displayed
  
• copy as json is now available
  

[typescript-eslint]

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.

[netlify]

✅ Deploy Preview for typescript-eslint ready!

Name	Link
🔨 Latest commit	c0e6213
🔍 Latest deploy log	https://app.netlify.com/sites/typescript-eslint/deploys/6429c917622ead0009a702c3
😎 Deploy Preview	https://deploy-preview-6728--typescript-eslint.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site settings.

[nx-cloud]

☁️ Nx Cloud Report

CI is running/has finished running commands for commit c0e6213. As they complete they will appear below. Click to see the status, the terminal output, and the build insights.

📂 See all runs for this branch

---

✅ Successfully ran 30 targets

• Node 18 - nx test eslint-plugin
• Node 14 - nx test eslint-plugin --coverage=false
• nx run-many --target=build --projects=website-eslint,website
• nx run-many --target=lint --parallel
• Node 18 - nx test typescript-estree
• Node 18 - nx test visitor-keys
• Node 18 - nx run types:build
• Node 18 - nx test type-utils
• Node 18 - nx test scope-manager
• nx run types:build
• Node 14 - nx test typescript-estree --coverage=false
• Node 18 - nx test utils
• Node 18 - nx test eslint-plugin-internal
• Node 18 - nx test parser
• Node 18 - nx test ast-spec
• Node 18 - nx test eslint-plugin-tslint
• Node 18 - nx test repo-tools
• Node 14 - nx test visitor-keys --coverage=false
• Node 14 - nx run types:build
• Node 14 - nx test type-utils --coverage=false
• nx run-many --target=typecheck --parallel
• nx run integration-tests:test
• Node 14 - nx test utils --coverage=false
• Node 14 - nx test scope-manager --coverage=false
• Node 14 - nx test eslint-plugin-tslint --coverage=false
• Node 14 - nx test parser --coverage=false
• Node 14 - nx test repo-tools --coverage=false
• Node 14 - nx test eslint-plugin-internal --coverage=false
• Node 14 - nx test ast-spec --coverage=false
• nx run-many --target=build --parallel --exclude=website --exclude=website-eslint

---

Sent with 💌 from NxCloud.

[JoshuaKGoldberg]

I started reviewing but then couldn't get the demo to work locally - is this just me? 😞

[armano2]

I started reviewing but then couldn't get the demo to work locally - is this just me? 😞

not sure about what issue you have during local dev, but there was actual issue with undefined, i missed one thing while moving this change to standalone PR

[codecov]

Codecov Report

Merging #6728 (c0e6213) into v6 (6a307f0) will increase coverage by 2.31%.
The diff coverage is n/a.

Additional details and impacted files

@@            Coverage Diff             @@
##               v6    #6728      +/-   ##
==========================================
+ Coverage   85.15%   87.46%   +2.31%     
==========================================
  Files         383      374       -9     
  Lines       13026    12879     -147     
  Branches     3839     3811      -28     
==========================================
+ Hits        11092    11265     +173     
+ Misses       1572     1229     -343     
- Partials      362      385      +23     

Flag	Coverage Δ
unittest	87.46% <ø> (+2.31%)	⬆️

Flags with carried forward coverage won't be shown. Click here to find out more.

see 166 files with indirect coverage changes

[armano2]

i did some profiling on update tree, and I refactored code to be a little faster
issue with re-renders when you change tabs has been fixed

[JoshuaKGoldberg]

Looks wonderful, thanks! I'm real stoked about this one in particular for the AST copying 😄

Requesting changes on a few small touchups - but nothing I'm particularly passionate about.

[JoshuaKGoldberg]

[Docs] Is there a tracking issue on TypeScript to expose this? (I couldn't find one) If not, could you please file one? And either way, link the issue here?

[armano2]

this is intentionally a private API, and normally ts doesn't expose properties that have this in their types.

ast viewer actually prints both public and internal properties of object's and some of them normally are accessible trough functions

[JoshuaKGoldberg]

Yeah I'm thinking if it's a API that we care about & would want to show, it'd make sense to ask for it to be turned public.

[JoshuaKGoldberg]

Yay!