eslint-plugin-validate-jsx-nesting VS validate-html-nesting

I just looked and found eslint-plugin-validate-jsx-nesting that specifically checks nesting, but it doesn't look very popular or active.

The problem is not the Invalid HTML, but that the browser fixes it and so framework's code to update the DOM ends up updating the wrong DOM nodes and may even throw error. Example

Invalid HTML Nestings such as a

inside a

is invalid and browser automatically fixes it by putting the

outside the parent

and so the DOM ends up rendering different structure than JSX. There are a lot of such invalid nestings. See [this](https://github.com/MananTank/validate-html-nesting/blob/main...) For Example.

This is problematic and creates all sorts of bugs in Frameworks. Most Frameworks that use JSX (such as React, SolidJS, Preact) checks for invalid HTML Nestings at runtime and logs an error. ( Though this runtime checks are not very comprehensive - React has decent list of checks but is still missing quite a few )

Until now there was no way to check for such invalid Nestings without running the code. So I've created this ESLint Plugin to do just that.

This does not mean that we get rid of runtime invalid nesting checking, because This ESLint plugin can not predict what your component's top level element will be - because that would require running the code. So consider this as a tool to catch 99% of the invalid nestings without running the code.