Provide bundled packages for browsers

[g-plane]

Body

Currently the @typescript-eslint/parser and other related packages are built for Node.js. Are there any plans for building them for browsers?

Additional Info

I'm going to work on creating a playground for https://github.com/rel1cx/eslint-react which uses TypeScript-ESLint. However, we have encountered some problems about bundling the parser and its related packages.

Before you submit your discussion, please confirm the following. If any of these required steps are not taken, we may not be able to review your RFC. Help us to help you!

• I have read the discussions guidelines and per those guidelines, this fits a discussion category, not a help request or standard issue.
• I have searched for related discussions and searched for related issues and found none that match my proposal.
• I have read the FAQ and my problem is not listed.

[bradzacher]

We hadn't planned on anything - no. It's not as simple as "bundling" as you need to re-configure typescript itself, and you can't use eslint normally - you need to use the Linter class.

There's a surprising amount of complexity!

You can check out our website and website-eslint folders internally to see how we make it work.

We previously haven't had any usecases for this stuff outside our work but I know @JoshuaKGoldberg wanted to generalise things to create a better foundation for any plugin to use so we could help "lift up" the ecosystem's docs.

[g-plane]

I'm able to bundle ESLint itself by using some plugins like vite-plugin-eslint4b, but I get stuck with bundling TS-ESLint packages because those packages are compiled so bundler can't statically analyze them. One possible solution is providing ESM output (I don't mean converting those packages to ESM-only packages, otherwise it would be a breaking change), but I didn't experiment it and this solution has some drawbacks.

[bradzacher]

I'd definitely encourage you to have a look at

• https://github.com/typescript-eslint/typescript-eslint/tree/main/packages/website-eslint
• https://github.com/typescript-eslint/typescript-eslint/blob/main/packages/website/src/components/Playground.tsx

For how we build and load everything for the browser.

The difficult thing IIRC is that you you need typescript, ESLint, and typescript-eslint all setup to work together in the browser - which isn't super easy to do.

@armano2 designed a lot of it so can probably provide some more advice around the topic. I'm afraid I don't know how it fits together too well.

[g-plane]

My problem is not about how to lint files on browsers. Instead, some code use Node.js API (like CommonJS and some builtin modules). Actually, modern bundlers can detect and analyze handwrote CommonJS code and provide polyfill for Node.js builtin modules, but TS-ESLint packages on npm are compiled, which makes hard to be analyzed.

The reason why TS-ESLint's official playground can work is in build.ts of website-eslint, package entries are mapped to their actual source code (.ts files), but for downstream developers, we're not able to get those source files.