web VS typescript-eslint

i have around 5+ years of experience in web development. starting from angular js 1 to react-native, react & along with typescript. Well aware of most of the modern web tools, esbuild, react-query, swc, rollup, vite, https://modern-web.dev/, testing-library , etc..

In a future release, Angular will replace Karma with the web-test-runner from ModernWeb. That future release might already be Angular 17. ModernWeb is a modern community project that embeds tests into a browser.

So, you write web components and you're interested in expanding the work you put into unit testing them? Well, you've come to the right place. This is just the beginning, but Testing Web Components: the Series is going to lay out for you how Open Web Components and Modern Web help you to do just that. We'll start with how the Open Web Components generator can get you up and running in no time with @web/test/runner right out of the box.

Rocket is an SSG that allows seamless integration of Markdown and WebComponents. There is a project to support the development of web standard technologies called Modern Web, and rocket is a subproject of that project. Other sub-projects are test runner and development server, modern-web for development server, and open-wc for WebComponents development, testing, and linter.

Just setting up a front end dev environment is a lesson in complexity theory

FWIW, because I've been out of web dev for a while and may need to get back into it, I came across this site today:

https://modern-web.dev/

I followed their example ts+preact+esbuild setup and was very pleasantly surprised by the ergonomics.

I was expecting way worse.

astro modern-web

web-test-runner

Typescript-eslint can assist in this task. This tool helps identify all instances of unsafe any usage. Specifically, all usages of JSON.parse can be found and it can be ensured that the received data's format is checked. More about getting rid of the any type in a codebase can be read in the article Making TypeScript Truly "Strongly Typed".

> Only lint files that have changed? How hard that is?

Quite hard, especially since type-aware rules from e.g. https://typescript-eslint.io/ mean that changing the type of a variable in file A can break your code in file B, even if file B hasn't changed.

The article only touches this: when converting to TypeScript, `any` is useful, but in the end you don't want this type in your codebase - so don't forget to use typescript-eslint [0] and turn on those no-unsafe-* rules which guard against `any` leaking into your code.

[0] https://github.com/typescript-eslint/typescript-eslint

By convention, React components should be named in PascalCase. @typescript-eslint has the config we need, and though we can't specifically target React components, we can target variables (and set some other conventions while we're at it):