Widen eligibility of Instrinsic Element names in JSX/TSX beyond lowercase names

Search Terms

JSX, compilation, Intrinsic Elements

Suggestion

Allow more flexibility in defining Intrinsic Elements in JSX. The lowercase/uppercase convention works for React but doesn't represent the range of the spec. Any name should be allowed to be registered as an Intrinsic Element.

Use Cases

JSX is just an XML like syntax language that gets compiled down to JavaScript. How that compilation works and what it outputs could be different depending on the library. Assuming case or character set to determine Intrinsic Elements outside the spec makes it much more difficult to support TypeScript for other JSX libraries.

Examples

Suppose a library wanted wanted to allow control flow to be precompiled using a $ symbol to prevent interference with the range of Value Elements the end user could use:

<$ each={ items }>{ item => <div>{ item.title }</div>}</$>

This is perfectly valid JSX and could be compiled away before runtime.

Or how about something like NativeScript which uses a PascalCase syntax for it's intrinsic elements? It should be perfectly fine to set aside a few of these without having mess with per file imports or messing with Global scope.

I mean given the trend to compile down, and idea very much at the heart of JSX, it seems incredibly limiting to restrict this to a convention, no matter how popular it is. If the spec allows so should Typescript.

Yet today, you cannot set $ nor Button as Intrinsic JSX elements. I mean you can but they just get ignored.

I am unclear whether it's breaking. But I believe it would not be as it would just allow more elements to be eligible and not take anything away. Although I know there is some implicit behavior here (when there are no Intrinsic Elements declared). I suppose that could stay the same.

Checklist

My suggestion meets these guidelines:

• This wouldn't be a breaking change in existing TypeScript/JavaScript code
• This wouldn't change the runtime behavior of existing JavaScript code
• This could be implemented without emitting different JS based on the types of the expressions
• This isn't a runtime feature (e.g. library functionality, non-ECMAScript syntax with JavaScript output, etc.)
• This feature would agree with the rest of TypeScript's Design Goals.

Start by tracing TypeScript's JSX/TSX intrinsic-element checking and its handling of lowercase names; no file or test is named in the issue. Compare the requested $ and Button examples with current JSX rules and define which names should be eligible, including implicit behavior. Done means the intended names are accepted without changing existing JSX behavior and the cases are covered by tests.