chore(website): error viewer in playground

[armano2]

PR Checklist

• Addresses an existing open issue: fixes Bug(website): compiler options are not passed to the lint run #5079 part of Playground: improve mobile UX #5016
• That issue was marked as accepting prs
• Steps in CONTRIBUTING.md were taken

Overview

Supper basic design for listing all errors when no ast viewer is selected, prints both ts and eslint errors (and any other errors reported by editor)

Changes

• playground by default displays all errors in right panel with ability to fix fixable eslint errors
• suggestions are now correctly displayed in Fix me in editor

---

Demo

[nx-cloud]

☁️ Nx Cloud Report

CI is running/has finished running commands for commit 3694da2. 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 47 targets

• Node 18 - nx test @typescript-eslint/visitor-keys
• Node 18 - nx run-many --target=build --all --parallel --exclude website --exclude website
• nx run-many --target=build --all --parallel --exclude website
• Node 18 - nx test @typescript-eslint/utils
• nx run-many --target=build --all --parallel --exclude website --exclude website
• Node 18 - nx run-many --target=build --all --parallel --exclude website --exclude website
• Node 18 - nx test @typescript-eslint/type-utils
• Node 18 - nx run-many --target=build --all --parallel --exclude website --exclude website
• Node 18 - nx test @typescript-eslint/typescript-estree
• Node 18 - nx run-many --target=build --all --parallel --exclude website --exclude website
• nx run-many --target=typecheck --all --parallel
• Node 12 - nx test @typescript-eslint/ast-spec --coverage=false
• Node 12 - nx run-many --target=build --all --parallel --exclude website --exclude website
• Node 18 - nx test @typescript-eslint/ast-spec
• Node 18 - nx test @typescript-eslint/eslint-plugin-internal
• Node 18 - nx run-many --target=build --all --parallel --exclude website --exclude website
• Node 18 - nx run-many --target=build --all --parallel --exclude website --exclude website
• Node 18 - nx test @typescript-eslint/eslint-plugin-tslint
• Node 12 - nx test @typescript-eslint/utils --coverage=false
• Node 12 - nx test @typescript-eslint/eslint-plugin-tslint --coverage=false
• Node 18 - nx run-many --target=build --all --parallel --exclude website --exclude website
• Node 12 - nx run-many --target=build --all --parallel --exclude website --exclude website
• Node 12 - nx run-many --target=build --all --parallel --exclude website --exclude website
• Node 12 - nx test @typescript-eslint/type-utils --coverage=false
• Node 12 - nx run-many --target=build --all --parallel --exclude website --exclude website
• Node 12 - nx test @typescript-eslint/visitor-keys --coverage=false
• Node 18 - nx test @typescript-eslint/eslint-plugin
• nx run-many --target=build --all --parallel --exclude website --exclude website
• Node 12 - nx run-many --target=build --all --parallel --exclude website --exclude website
• Node 18 - nx run-many --target=build --all --parallel --exclude website --exclude website
• Node 12 - nx test @typescript-eslint/eslint-plugin-internal --coverage=false
• Node 12 - nx run-many --target=build --all --parallel --exclude website --exclude website
• Node 18 - nx test @typescript-eslint/parser
• Node 18 - nx run-many --target=build --all --parallel --exclude website --exclude website
• Node 12 - nx test @typescript-eslint/eslint-plugin --coverage=false
• Node 12 - nx run-many --target=build --all --parallel --exclude website --exclude website
• Node 12 - nx test @typescript-eslint/scope-manager --coverage=false
• nx run-many --target=build --all --parallel --exclude website --exclude website
• Node 12 - nx run-many --target=build --all --parallel --exclude website --exclude website
• Node 18 - nx test @typescript-eslint/scope-manager
• Node 18 - nx run-many --target=build --all --parallel --exclude website --exclude website
• Node 12 - nx test @typescript-eslint/parser --coverage=false
• Node 12 - nx run-many --target=build --all --parallel --exclude website --exclude website
• Node 12 - nx test @typescript-eslint/typescript-estree --coverage=false
• nx run-many --target=build --all --parallel --exclude website --exclude website
• Node 12 - nx run-many --target=build --all --parallel --exclude website --exclude website
• nx run-many --target=build --all --parallel --exclude website --exclude website

---

Sent with 💌 from NxCloud.

[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. As a thank you, your profile/company logo will be added to our main README which receives thousands of unique visitors per day.

[netlify]

✅ Deploy Preview for typescript-eslint ready!

Name	Link
🔨 Latest commit	3694da2
🔍 Latest deploy log	https://app.netlify.com/sites/typescript-eslint/deploys/628f8ef7fe53d900084a2a5a
😎 Deploy Preview	https://deploy-preview-5061--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.

[bradzacher]

this is so good.

[armano2]

while working on this i noticed that we are displaying in UI only first fixer or suggestion,

vs

https://deploy-preview-5061--typescript-eslint.netlify.app/play/#ts=4.7.1-rc&sourceType=module&code=JYMwBAFALgTgrgUzAMmZAjGA1GdBKPMAbwF8BYAKAHcALYAGyQhAEN6BnJAHy7ACIWfbPwBGfQqUoQAHgC4wAexEArBAGMohALwA+MLERgeYVh269pYAPz74Seac4BuSkA&rules=N4IgAgLgngDgpgZwMYCcCWMIFpEBs0B2EA9AhOktgEYD2NucAhgTgB4wqIJo0EIgAuANog4KFDRQgANKEa5cNAO4BlcoQDmggGbyEcaSHmKlAOQCuAWypideg0YXKLCxlQYB5KgCs4lO7j6AL4AukFAA&tsConfig=N4IgzgLgTglgxhAcgVwDaoMIAsCmcDWYIAXNMjgL5A

should we fix it with this change or should i push it separately?

[bradzacher]

Just do it here if you like!

[armano2]

most of functionalities seem to be working now, any ideas how fixers should look like?

[bradzacher]

any ideas how fixers should look like?

I'm okay with having the button on the message like you've currently got.
Maybe make the text say "Fix" instead of "apply"

Do you have handling for suggestion fixers?
Maybe if it has suggestions then it can be a split button eg:

[armano2]

yes, suggestions and fixers are joined together, you can see an example here Demo I was thinking about adding dropdown, but, its going to be even harder to make it work well in mobile (witch is most likely next)

strict-boolean-expressions has only suggestions

[JoshuaKGoldberg]

What an odd Netlify failure... https://app.netlify.com/sites/typescript-eslint/deploys/628d85ad0e4cb800089c5202

9:27:08 PM: [3/5] Fetching packages...
9:27:09 PM: error Couldn't find a package.json file in "/opt/build/repo/packages/utils"

[JoshuaKGoldberg]

👏 Glorious!! This is going to be awesome to have in prod!

[JoshuaKGoldberg]

Awesome!! 👏

[bradzacher]