Rule suggestion: Prevent invalid HTML DOM element name to be used

[kamataryo]

It would be nice if invalid DOM element name is detectable. How about this rule?

valid:

<div>{ 'bar' }</div>

invalid:

<foo>{ 'bar' }</foo>

[ljharb]

This seems like a good idea, provided that we don't have to maintain our own copy of the list of valid tag names - we'd need to find a way to use the same list React itself does.

[kamataryo]

React seems to examine an element with whether it is a window.HTMLUnknownElement and depends on the browser which React is running on.
https://github.com/facebook/react/blob/master/packages/react-dom/src/__tests__/ReactDOMComponent-test.js#L1033

Some tagnames for SVG and MathML are hardcoded.
https://github.com/facebook/react/blob/master/packages/react-dom/src/shared/isCustomComponent.js

We need an external DOM implementation like jsdom for this rule.

[ljharb]

If we need react to publish some of this logic, then let's file an issue to ask them for it.

[kamataryo]

What we need is a function like ReactDOMFiberComponent.createElement which is on ReactDOM. Unfortunately this function hardcodes warning() and no export found on the built library.
https://github.com/facebook/react/blob/master/packages/react-dom/src/client/ReactDOMFiberComponent.js#L333

It seems that we can arrange the detection logic with 2 utility modules:

• react-dom/src/shared/DOMNamespaces.js
• react-dom/src/shared/isCustomComponent.js

[kamataryo]

Example code with customized react-dom to export those modules:
master...kamataryo:master

Modules exportation:
https://github.com/facebook/react/compare/master...kamataryo:export-react-dom-shared?expand=1

What do you think about those?

[golopot]

Is it ok to validate html tags by this package html-tags ?

[ljharb]

@golopot a) only if react itself uses that package, and b) that author's packages tend to aggressively drop support for older nodes, so it's unlikely we can use any of them here.

@kamataryo if you can convince react to export them, or extract them to a separate package, that'd be great!