Playground: allow picking specific release tags for the typescript-eslint version

[bradzacher]

Suggestion

Currently the playground is pinned to the latest version.
It used to just use main, but we changed that as part of resolving #5939.
Unfortunately now it's not possible for us to test the playground against the latest code!

We should add a picker that lets us switch between latest, canary or any other "blessed" tags (eg rc-v6) so that we can test and show things as fixed in specific tags.

As an example - #6077 was fixed in #6059, but you can't see that in the playground:

I had to manually test locally to verify that it had indeed been fixed!

[armano2]

if we want to support this, we are going to need to start saving previous versions of eslint/tselint somewhere because as for now we do not store older versions of compiled libraries

@bradzacher any thoughts where we could store them?

[bradzacher]

Could we drop the "latest" bit and instead just do the npm-tagged versions?

That way we could fetch ad-hoc versions via unpkg or something?

[armano2]

fetching released packages is not going to be that easy as they are not processed to run on web (think that we are doing in website-eslint)

we can def support now:

• latest: https://typescript-eslint.io/sandbox/index.js
• cannary: https://main--typescript-eslint.netlify.app/sandbox/index.js

[armano2]

i have been investigating this, and there is a lot of issues while trying to load eslint/ts-eslint and all its dependencies in browser, i made small POC to verify if this is even possible and it seem that in theory we could load them,

while trying to load packages we have mix of cjs/esm/umd files to deal with and we need to process them before importing, additionally almost all packages just import all it's files eg.
ts-eslint/utils imports always rule tester that imports eslint root that imports so many dependencies that are not really suited to be used by browser

---

How does it work now?

we are using rollup to postprocess and remove unneded files before bundling them in https://github.com/typescript-eslint/typescript-eslint/blob/main/packages/website-eslint/rollup.config.js

Can't we just import all?

sadly no its not going to work

What are our options

• implement filter for dependencies while loading them
• bundle versions that we want to expose and store them somewhere

---

results of my investigation: (this is not fully working)

https://github.com/armano2/ts-eslint-playground-tests/blob/main/src/components/importer/importer.ts
https://cool-quokka-60b2bb.netlify.app/

(loader code is not the best, and if we ever decide to use something like it has to be heavily refined)

import log after filtering some of dependencies

require.ts:93 Loading file: https://cdn.jsdelivr.net/npm/@typescript-eslint/scope-manager/+esm
require.ts:93 Loading file: https://cdn.jsdelivr.net/npm/@typescript-eslint/visitor-keys@5.54.1/+esm
require.ts:93 Loading file: https://cdn.jsdelivr.net/npm/eslint-visitor-keys@3.3.0/+esm
require.ts:93 Loading file: https://cdn.jsdelivr.net/npm/@typescript-eslint/types@5.54.1/+esm
require.ts:93 Loading file: https://cdn.jsdelivr.net/npm/@typescript-eslint/visitor-keys/dist/visitor-keys/+esm
require.ts:93 Loading file: https://cdn.jsdelivr.net/npm/@typescript-eslint/typescript-estree@5.54.1/dist/ast-converter.js/+esm
require.ts:93 Loading file: https://cdn.jsdelivr.net/npm/@typescript-deploys/monaco-typescript@4.5.1-rc/release/esm/lib/typescriptServices.js/+esm
require.ts:93 Loading file: https://cdn.jsdelivr.net/npm/semver@7.3.8/functions/major/+esm
require.ts:93 Loading file: https://cdn.jsdelivr.net/npm/@typescript-eslint/typescript-estree@5.54.1/dist/create-program/getScriptKind/+esm

---

@bradzacher @JoshuaKGoldberg do you think its still worth to continue exploring this?

[JoshuaKGoldberg]

I have faith it's doable, but it's not a particularly high value feature compared to how much work it is. Maybe we could keep a Netlify deploy of each version instead?

[bradzacher]

i wonder if we can refactor our code so that we can just use the version from unpkg or whatever without bundling/tree-shaking?

[armano2]

Definitely it's possible, as long as we simplify utils, and don't import eslint with all its dependencies, we are doing so for type overrides eg rule tester, and cli

If we stop importing them in every rule we can simply import them from jsdelivery or unpkg,

As for bundling, I'm going to push soon simplified version, as a lot of stuff that we are doing in website eslint is no longer needed