search

solidjs-community / eslint-plugin-solid

Solid-specific linting rules for ESLint.
MIT License
216 stars 26 forks source link

Validate JSX nesting #25

Open joshwilsonvu opened 2 years ago

joshwilsonvu commented 2 years ago

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 commented 2 years ago

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