JSXElement name that starts with an underscore is assumed to be an intrinsic element

[meyer]

Typescript and babel both have a very similar test for deciding whether or not a JSXElement is a intrinsic element or a component.

• babel: packages/babel-types/src/react.js#L5-L7

  /^[a-z]|-/.test(tagName)

• Typescript: src/compiler/utilities.ts#L2436

  tagName[0] === tagName[0].toLowerCase()

Typescript’s test has one fatal flaw, however: it relies on a toLowerCase comparison but does not verify that the first character is a letter. I encountered an issue where a JSXElement starting with an underscore was incorrectly assumed to be an intrinsic element.

My proposal is that the Typescript JSXElement name test be more inline with the babel JSXElement name test. I’ll whip up a PR as soon as I figure out how things are done around here.

TypeScript Version: 2.6.1

Code

import { Box as _Box } from 'jsxstyle';
<_Box />;

Expected behavior:
_Box is treated like a component instead of an intrinsic element.

Actual behavior:
error TS2339: Property '_Box' does not exist on type 'JSX.IntrinsicElements'.

For reference: jsxstyle/jsxstyle#82 (comment)

[mhegazy]

thanks @meyer!