Validate JSX nesting

[joshwilsonvu]

Describe the need
Unless you're an HTML expert, it's not always clear exactly when browsers will consider certain patterns invalid, like <div> inside <table> or <p> inside <p>. Browsers don't warn about these issues; instead, they silently try to work around them. It would be nice to give feedback to developers quickly, so there aren't unpleasant surprises later.

Suggested Solution
Static analysis of JSX nesting would be a good fit for an ESLint rule. It should be possible to check JSXOpeningElements, track the last HTML element seen, and validate nesting for the current HTML element, clearing the last seen element when encountering unknown function components.

Possible Alternatives
There's a very new repo that puts this behavior in a Babel plugin, and it's where I got the idea: https://github.com/MananTank/validate-jsx-nesting. However, I don't think Babel is a great fit for giving warnings during development, it's better suited to producing transformed output.

Though none seem to exist, it's possible for a framework-agnostic JSX validation rule to work okay. However, this kind of rule would not be able to validate children of Show, Match, etc.

[joshwilsonvu]

Here's where React does it at runtime: https://github.com/facebook/react/blob/main/packages/react-dom/src/client/validateDOMNesting.js

[titoBouzout]

we have included this in dom-expressions ryansolid/dom-expressions#350 and the console will display a warning when nesting will be messed up by the browser. It does so by using parse5
In the linked issue there are details, but so far it goes as deep as it can go (example components cannot be resolved)