Allow JSX intrinsics to have generic call signatures

[kevin-in-code]

Search Terms

type checking, jsx intrinsics, generic type, signature

Suggestion

Allow JSX intrinsics defined in IntrinsicElements to support generic call signatures, as is supported for user-defined SFCs.

Use Cases

Suppose you want to create a small DSL using JSX. You would need to model the primitive statements of the DSL. Your options are intrinsics and user-level components.

Intrinsics are clearly the more natural fit for this use case. Some reasons are:

• they are immediately available without separate import statements,
• the use of lower case makes them visually distinct from user-defined components,

However, intrinsics are not as capable as user-level components (pre-defined or user-defined). Currently they cannot be assigned generic type signatures. This makes them less expressive, and so, less useful.

The proposed change will bring parity between intrinsics and user-level components. In short, it will be possible to create a pre-defined set of intrinsics that are just as expressive as user-level SFCs.

Examples

Consider the following hypothetical DSL in JSX:

<for items={books} with={book => book.genre === 'scifi'}>
{book => (
    <b>{book.title}</b>
)}
</for>

Currently, the for intrinsic cannot be generic over the type of the items, unlike user-defined SFCs which may be generic. To bring this capability to intrinsics, we would need to allow JSX.IntrinsicElements to support generic signatures. Here is what it might look like for this example DSL:

declare namespace JSX {
    interface IntrinsicElements {
        for: <T>(props: {
            items: T[],
            with?: (item: T) => boolean,
            children?: (item: T) => Element | Element[]
        }) => Element;

        b: { children: string }
    }
}

The implementation of this change will require a small number of changes to src/compiler/checker.ts. A good starting point is the function resolveJsxOpeningLikeElement.

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.

Request to work on this feature

I would like to work on this feature improvement.

[RyanCavanaugh]

@weswigham any thoughts/concerns?

[kevin-in-code]

@RyanCavanaugh and @weswigham, any thoughts on whether I can proceed with this work?

I proposed this improvement partly because it is a valuable change that elevates capability-parity between intrinsic and user-defined components, and partly because it is a small and focused area within which to make my first contribution to the project. I am keen to prepare a PR for consideration.

[vkbansal-harness]

I also have similar requirement. But cannot proceed due to this limitation.

[itsdouges]

Hi folks 👋 we are doing some work on custom React renderers (react three fiber) and have run into some use cases where having intrinsic elements be generic would enable some powerful workflows, specifically around handling ECS components.

As this issue goes into, creating custom components is the only way to enable generic behaviour currently. We would be interested in exploring this feature, is there any appetite from the TS team to get this feature added as a contribution?