chore(website): [playground] add support for extends, ts types and more

[armano2]

PR Checklist

• Addresses an existing open issue: #000
• That issue was marked as accepting prs
• Steps in Contributing were taken

Overview

New features

TODO: explain what changed

• Improved mobile experience
• Preview type information chore(website): [playground] add types tab to playground #6843
  

[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 failed.

Name	Link
🔨 Latest commit	99af316
🔍 Latest deploy log	https://app.netlify.com/sites/typescript-eslint/deploys/6508f62c81750e00087f5cd4

[nx-cloud]

☁️ Nx Cloud Report

CI is running/has finished running commands for commit 99af316. 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

---

🟥 Failed Commands
nx run-many --target=typecheck --parallel
nx build website

✅ Successfully ran 17 targets

• nx test eslint-plugin --coverage=false
• nx test visitor-keys --coverage=false
• nx test typescript-estree --coverage=false
• nx run types:build
• nx test utils --coverage=false
• nx run repo-tools:postinstall-script
• nx test type-utils --coverage=false
• nx test parser --coverage=false
• nx test rule-schema-to-typescript-types --coverage=false
• nx test eslint-plugin-internal --coverage=false
• nx test scope-manager --coverage=false
• nx test repo-tools --coverage=false
• nx test eslint-plugin-tslint --coverage=false
• nx test ast-spec --coverage=false
• nx run integration-tests:test
• nx run eslint-plugin:generate:configs
• nx run-many --target=build --parallel --exclude=website --exclude=website-eslint

---

Sent with 💌 from NxCloud.

[armano2]

@JoshuaKGoldberg when you find some time can you do preliminary review on this?
git generated way to many file changes :)

[JoshuaKGoldberg]

I will... try 🥺 😅

[JoshuaKGoldberg]

cc @jakebailey @orta - if either or both of you have time, this PR might be of interest to you. See in particular the packages/website/src/components/linter/bridge.ts file for how we're using @typescript/vfs.

[JoshuaKGoldberg]

Yeah @armano2 this is fantastic, really great stuff! It works smoothly and the new features (types, scopes, file type, ...) are awesome.

I mainly looked at how the PlaygroundRoot component along with the component & hooks it uses. Also the new build scripts.

My biggest point of feedback would be that if you can split up the changes at all that would be really helpful for reviewing. It's a big one 😄. But if not I think it's a direct step in many positive directions from the site today, and it'd be also great to work from what's here.

LMK when it's ready for a full review! 🙌

[armano2]

I will try to split this PR up a little

[bradzacher]

would it be possible to rebase this against the v6 branch?
There are a bunch of changes we've got in v6 to the website tools - so we don't want to accidentally get into a bad state and break things if we merge this into main before v6.

[armano2]

@bradzacher changes rebased