Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

chore(website): [playground] add types tab to playground #6843

Merged
merged 17 commits into from
Sep 11, 2023

Conversation

armano2
Copy link
Member

@armano2 armano2 commented Apr 4, 2023

PR Checklist

Overview

extracted from #6656

@typescript-eslint
Copy link
Contributor

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
Copy link

netlify bot commented Apr 4, 2023

Deploy Preview for typescript-eslint ready!

Name Link
🔨 Latest commit f36c655
🔍 Latest deploy log https://app.netlify.com/sites/typescript-eslint/deploys/64fee8aa7679510008876d44
😎 Deploy Preview https://deploy-preview-6843--typescript-eslint.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.
Lighthouse
Lighthouse
1 paths audited
Performance: 91 (🔴 down 8 from production)
Accessibility: 100 (no change from production)
Best Practices: 92 (no change from production)
SEO: 98 (no change from production)
PWA: 80 (no change from production)
View the detailed breakdown and full score reports

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

@armano2 armano2 added the DO NOT MERGE PRs which should not be merged yet label Apr 4, 2023
Comment on lines +168 to +176
(state.showAST === 'types' && astModel?.storedTsAST && (
<TypesDetails
typeChecker={astModel.typeChecker}
value={astModel.storedTsAST}
onHoverNode={setSelectedRange}
cursorPosition={position}
/>
)) ||
(state.showAST && astModel && (
Copy link
Member Author

@armano2 armano2 Apr 4, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

i have a feeling that i should extract this to separate component, this and/or condition chain is getting complex

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

yeah this is probably getting to the point where we might want to extract the condition into a bit of state machine logic which outputs an enum value so that we can simplify the render logic.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Agreed. I don't personally think of it as a blocker but it would be a nice to have. Maybe a good follow-up good first issue for a potential contributor?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Filed #7630. On second thought I think it's probably not a good first issue given it's touching a bunch of code.

@armano2 armano2 removed the DO NOT MERGE PRs which should not be merged yet label Apr 8, 2023
@armano2 armano2 requested a review from bradzacher May 1, 2023 13:08
Base automatically changed from v6 to main July 10, 2023 17:52
@bradzacher
Copy link
Member

in terms of the UX itself - it looks good!
haven't eyeballed the code just yet.
Sorry it's taken me so long to get to it.

Comment on lines +168 to +176
(state.showAST === 'types' && astModel?.storedTsAST && (
<TypesDetails
typeChecker={astModel.typeChecker}
value={astModel.storedTsAST}
onHoverNode={setSelectedRange}
cursorPosition={position}
/>
)) ||
(state.showAST && astModel && (
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

yeah this is probably getting to the point where we might want to extract the condition into a bit of state machine logic which outputs an enum value so that we can simplify the render logic.

packages/website/src/components/typeDetails/TypeInfo.tsx Outdated Show resolved Hide resolved
@armano2 armano2 marked this pull request as ready for review August 16, 2023 09:58
Copy link
Member

@JoshuaKGoldberg JoshuaKGoldberg left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🔥 this is great, thanks!

Just a couple of small questions or comments, nothing blocking.

Whenever you want to merge, I'm happy.

packages/website-eslint/package.json Outdated Show resolved Hide resolved
packages/website/src/components/Playground.module.css Outdated Show resolved Hide resolved
Comment on lines +168 to +176
(state.showAST === 'types' && astModel?.storedTsAST && (
<TypesDetails
typeChecker={astModel.typeChecker}
value={astModel.storedTsAST}
onHoverNode={setSelectedRange}
cursorPosition={position}
/>
)) ||
(state.showAST && astModel && (
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Agreed. I don't personally think of it as a blocker but it would be a nice to have. Maybe a good follow-up good first issue for a potential contributor?

packages/website/src/components/typeDetails/TypeInfo.tsx Outdated Show resolved Hide resolved
@JoshuaKGoldberg JoshuaKGoldberg added the 1 approval One team member has approved this PR; a second should be enough to merge it label Aug 17, 2023
@JoshuaKGoldberg
Copy link
Member

I've sent the preview link for this to 3 separate people this month already so I'm going to try to get it merged now 😄

@codecov
Copy link

codecov bot commented Sep 11, 2023

Codecov Report

Merging #6843 (266f8d1) into main (4f34d0b) will increase coverage by 0.00%.
Report is 40 commits behind head on main.
The diff coverage is 100.00%.

❗ Current head 266f8d1 differs from pull request most recent head f36c655. Consider uploading reports for the commit f36c655 to get more accurate results

Additional details and impacted files
@@           Coverage Diff           @@
##             main    #6843   +/-   ##
=======================================
  Coverage   87.23%   87.23%           
=======================================
  Files         387      387           
  Lines       13401    13404    +3     
  Branches     3962     3962           
=======================================
+ Hits        11690    11693    +3     
  Misses       1327     1327           
  Partials      384      384           
Flag Coverage Δ
unittest 87.23% <100.00%> (+<0.01%) ⬆️

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

Files Changed Coverage Δ
packages/scope-manager/src/lib/base-config.ts 100.00% <ø> (ø)
...ackages/scope-manager/src/lib/decorators.legacy.ts 100.00% <ø> (ø)
packages/scope-manager/src/lib/decorators.ts 100.00% <ø> (ø)
packages/scope-manager/src/lib/dom.iterable.ts 100.00% <ø> (ø)
packages/scope-manager/src/lib/dom.ts 100.00% <ø> (ø)
...ackages/scope-manager/src/lib/es2015.collection.ts 100.00% <ø> (ø)
packages/scope-manager/src/lib/es2015.core.ts 100.00% <ø> (ø)
packages/scope-manager/src/lib/es2015.generator.ts 100.00% <ø> (ø)
packages/scope-manager/src/lib/es2015.iterable.ts 100.00% <ø> (ø)
packages/scope-manager/src/lib/es2015.promise.ts 100.00% <ø> (ø)
... and 84 more

Copy link
Member

@JoshuaKGoldberg JoshuaKGoldberg left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is wonderful - super useful for testing out types, and will make for easier debugging & sending help playgrounds to devs! Thanks @armano2! 👏

Verified the playground works well even on fancy types: https://deploy-preview-6843--typescript-eslint.netlify.app/play#ts=5.2.2&showAST=types&fileType=.tsx&code=C4TwDgpgBAwhA28oF4oHJ1QD7oBoZzQHk0BuAKHNEigDUBLAY2AHsAnEAHgAV4BDEBDYAaKACEWfNgBMAfCnGSZUCAA9gEAHbSAzlADq9TZqMBzCVOk9%2BgtvID8UYGwCu0AFxQAZn3g6IFFTg0IbGZhYy1gJC8qgAIvR8piyavgzM7Fy80XbYUAAS7PQAXinAaUysHFG28ji0QsBMFRnV2bWB1NAJSSktVVk2MSjkUHkA3qNjUAAMnuOznu1CogCMnnyaIKIATBtbUAC%2BwlNj61ALc1Cb21DnyyJQe9cHx6dP84svt%2Bc3u0tDNhHE5jQ5THCTaZfS77H6w-5QB7A97nGHfNYAnIIm7IqHPNEPDHoj7fXFHShdApFUqacrwdIDGrDZDgi7vK4EwFEwkkpFvKGor5-O7wkk4-nTfFCrZE4XPcUg8ljCHsz5XYW-GVi16Ks5qzG2blc3mAsljKXqrWa27ynVTMHKtlQjnSuHE20gM0ii6u2Vaj1ei0GlbennPPmKsFBGgNNhNRj9TJM3Isx2Q6Yuq4863Yu0C-WI4057WeiXmgvZ0UBiUOiaqn2Wt1h2FewWNo1YkuBgsa4OPauR1npsaZ0XF8OmsvetG99197sNsdV%2Bc1inBAxGTRCTgROQjMYMpNofCiXfyNQabR6ZxuKaOY9oKaeQ-VYhoU9KPcXrS6JyuCB3ugJBPpgZBrjQAAqTAQXwjAQSwEC7go6YANoAEosAA7lARizHkqx5DsAC68zvChMAsPALgALaaDhdEzPhhEkbACDwBQoIUIcnTrgAyuUcbhJ%2ByFTKOoFEhg74kpJRwcdOXySRJ6AIjJ3FTEG4neop0mYGpanRtAaEQGA-CMBAACSmi7pwUxId%2BV5QFBcGwfBiGfoqRkmbBEDUVowAqOoP56HAiAeVh2RmQFl6-oxOAETgOyKhRVG0RF0D2TFTEJScsROtM6FYfReFxcxpFQmM5GUTRdG4bFdyle8FUYZhojJdVRFRUFUAFZhaWtVVqWmRARGNVAjieUNvm0qNni7j1RGVSlmhEXJoL2jxNAALIsAAbtAqDkWxoh1fFTzHVlTwreB0AAIJgCZIDbXtOg2WMdmBQ5TkwXBCG7oqT0QHoGV6ADKEjbEUwA0DH2-mDgG7iBd0PVDr3TBN3mWdZf1QFDKEzAt%2BOiLj%2BMoasRFE7tgN4wtxGyLqUBxGwLBgAAYvQbA6MAnBQ7IUy8wZDNM6z7Oc5wEGdQ5LiaAA1poWGaGDENjOLwPdcKAB0mtGF4QhQAAqiNYyOHrIFgxt0C8SZ9BcxBF4S7%2BnNsGYoiW-A1saECquO2YSuOXbqtoI%2BRvdYbUCeLb6j23oAAGAAk4za7r3BsBAXj0Kohzx677tCJnCeaDrQK8S4Xhpxn0eAShyep%2Bnoia%2Br2dc8Xpe11Ajce7IoeeChEfAFdAvcFI-hoXwmEo1DUdQN7mimL7yXwBAzCDxzEDSCPY%2BUy97yN9zm%2BiGgAA6mhoHTZHk%2B8D58%2BbjnQS5CG789k-T7PUyoKEW5sKjYxI-Aj2b1-0x%2BJSCaDPP6o1l7D1HuPTevMoSwKgLIa%2BAA5C8EEXBsE0GLdBmhcpoIwZPS%2Bwc3wgQfNfSywB4L8SdjPTg5DfbkIITMIOY1ZggQYQHVYzDHCrDYbSAhOwuFPBAluPabBr4QIgOvAGWCMGiHXs1ORo82q0V9j3bBohyGUOcGYTg8isJ0ygJolgVCdHr2UTg-ulJ56L2ABIteUD-5SM3k-bRM8wb9UQDY1ek9Qbk0ctggh%2BA8hvngagJxj9VZw2DtY5gq8QLhKpvjSecd86F0RCnPOeDNCHCgPHROQI9GYRyXkguuszEDWySUtJ3AWCc0OBXaJlEF5LyHqvBJW8oSM2ZmzDmXN2mnyhCheuMSNDSFEBIhJMjNCKMwgoqA5Slqd3pig9QWSpnwPgZ4EZdj2kAK6cLXpuiHHPQGdMEZq96ZZKvtdKAABRbQRkdAuHgP5VAX074QE4A06YuB6ozHeEQPC-yoS-IIjwqEgLGLAp%2BfVHYAKgXkGjogoAA&eslintrc=N4KABGBEBOCuA2BTAzpAXGYBfEWg&tsconfig=N4KABGBEDGD2C2AHAlgGwKYCcDyiAuysAdgM6QBcYoEEkJemy0eAcgK6qoDCAFutAGsylBm3TgwAXxCSgA&tokens=false

@JoshuaKGoldberg JoshuaKGoldberg merged commit 7c3475c into main Sep 11, 2023
47 of 48 checks passed
@JoshuaKGoldberg JoshuaKGoldberg deleted the chore/playground-type-inspector branch September 11, 2023 10:32
@github-actions github-actions bot locked as resolved and limited conversation to collaborators Sep 19, 2023
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
1 approval One team member has approved this PR; a second should be enough to merge it website: playground
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

3 participants