chore(website): add playground to website

[armano2]

Overview

Migrated version of playground from #3147

Fixes #168

• array-type: default
• array-type: generic

TODO:

• make it work with latest versions of packages
• add way to load config instead of drop-down with rules
• use lzstringto compress code for url
• add button to generate markdown to copy/paste in tickets
• in options add dropdown to pick typescript version
• AST viewer should expand childs when needed
• add more tsconfig options

[netlify]

✔️ Deploy Preview for typescript-eslint ready!

🔨 Explore the source changes: e66e0a0

🔍 Inspect the deploy log: https://app.netlify.com/sites/typescript-eslint/deploys/61a4a28da2a6310065ee5260

😎 Browse the preview: https://deploy-preview-4108--typescript-eslint.netlify.app

[armano2]

The type hint is obstructed by the navbar. (Not sure what to do here, adjust z-index?)

@Josh-Cena fixed

[bradzacher]

one feature request to add to the todo later list for this:

we should add a panel where you can view the "fix" output.
That'd be great as it'd let us repro fix breakages (like #4090) concretely.

[bradzacher]

if you merge main in then it should fix the linter oom as well

[armano2]

we should add a panel where you can view the "fix" output.
That'd be great as it'd let us repro fix breakages (like #4090) concretely.

added to https://github.com/orgs/typescript-eslint/projects/3/views/1

[bradzacher]

We should talk to / learn from the TS folks with respect to their multi-file playground. I know they added it for their Halloween event and want to enable it more broadly. It'd be good for more complex repros down the line.

(Obv not part of this PR)

[bradzacher]

Fix up the lint errors and then we can merge this in 😃

[armano2]

Fix up the lint errors and then we can merge this in 😃

fixed

[armano2]

not sure why nx is failing here on netlify, looks like its cache issue

@bradzacher any ideas?

[bradzacher]

https://github.com/armano2/typescript-eslint/blob/website-playground/workspace.json

I think you need to add the package here?

I don't know much about the setup tho. James is the expert with it

[armano2]

https://github.com/armano2/typescript-eslint/blob/website-playground/workspace.json

I think you need to add the package here?

I don't know much about the setup tho. James is the expert with it

but @typescript-eslint/website-eslint is already there, hmm

[bradzacher]

/opt/build/repo/node_modules/@nrwl/workspace/src/utilities/project-graph-utils.js:8
    return project.data && project.data.targets && project.data.targets[target];
                   ^
TypeError: Cannot read properties of undefined (reading 'data')
    at Object.projectHasTarget (/opt/build/repo/node_modules/@nrwl/workspace/src/utilities/project-graph-utils.js:8:20)
    at addTasksForProjectDependencyConfig (/opt/build/repo/node_modules/@nrwl/workspace/src/tasks-runner/run-command.js:168:43)
    at addTasksForProjectTarget (/opt/build/repo/node_modules/@nrwl/workspace/src/tasks-runner/run-command.js:106:13)
    at addTasksForProjectDependencyConfig (/opt/build/repo/node_modules/@nrwl/workspace/src/tasks-runner/run-command.js:169:21)
    at addTasksForProjectTarget (/opt/build/repo/node_modules/@nrwl/workspace/src/tasks-runner/run-command.js:106:13)
    at addTasksForProjectDependencyConfig (/opt/build/repo/node_modules/@nrwl/workspace/src/tasks-runner/run-command.js:169:21)
    at addTasksForProjectTarget (/opt/build/repo/node_modules/@nrwl/workspace/src/tasks-runner/run-command.js:106:13)
    at addTasksForProjectDependencyConfig (/opt/build/repo/node_modules/@nrwl/workspace/src/tasks-runner/run-command.js:169:21)
    at addTasksForProjectTarget (/opt/build/repo/node_modules/@nrwl/workspace/src/tasks-runner/run-command.js:106:13)
    at createTasksForProjectToRun (/opt/build/repo/node_modules/@nrwl/workspace/src/tasks-runner/run-command.js:90:9)

@JamesHenry might have an idea of what's causing the above crash?

[JamesHenry]

@bradzacher @armano2 Fixed!

I didn't bother to look into the specific error too deeply because it was occurring when building all projects as part of the postinstall process. That is repeated work for us because we already do that in the GitHub Actions and so I instead figured out how to skip the postinstall within the Netlify build.

I just had to set the YARN_FLAGS environment variable equal to --ignore-scripts and that did the trick.

Thanks so much again for your great work on this @armano2!

[JamesHenry]

🎉

[bradzacher]

I just used this to inspect the AST for TS 4.5 import/export specifier kinds so I could build scope analysis support.
It's truly awesome! astexplorer.net is so far behind (4.1.0 of our package - 1 year old) - so I couldn't use it - but our website is completely up to date!

Such a HUGE win here. I'm so happy you built this with AST support!