For JSX Class Components, allow attributes based on the type of the class constructor

[dbartholomae]

Suggestion

Currently, only the first argument of the constructor of a Class Component can be used as attributes in JSX. This is not in accordance with the JSX spec: In pure JavaScript, there is no problem at all defining a JSX pragma that uses JSX attributes as the third argument to construct the class.

🔍 Search Terms

JSX, React, CDK, class, constructor

✅ Viability 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, new syntax sugar for JS, etc.)
• This feature would agree with the rest of TypeScript's Design Goals.

⭐ Suggestion

A generic way to introduce this would be e. g.

declare global {
  namespace JSX {
    interface ElementAttributesFromConstructor<Constructor extends new () => unknown> {
        props: ConstructorParameters<Constructor>[2]
    }
  }
}

📃 Motivating Example

It is now possible to define JSX Class Components that take their attributes from any part of the constructor function with help of ElementAttributesFromConstructor. Previously, it was only possible to use the first argument to the constructor.
This is helpful when adding JSX to existing structures. One example is the AWS CDK which uses Constructs in the following form:

class ExampleConstruct extends Construct {
  constructor(scope: Construct, id: string, props: { message: string }) {
    console.log(props.message)
  }
}

When setting ElementAttributesFromConstructor like this

declare global {
  namespace JSX {
    interface ElementAttributesFromConstructor<Constructor extends new () => unknown> {
        props: ConstructorParameters<Constructor>[2]
    }
  }
}

TypeScript will support you when using classes in JSX:

/* @jsx createElement */

function createElement (component: Construct,  attributes: Record<string, unknown> | null) {
  // Put the logic to create the JSX element here
}

const construct = <ExampleConstruct message="Hello World" />

💻 Use Cases

Currently, JSX is still mostly used for React and very similar libraries (e. g. Preact, Vue). But there are already other use cases for JSX (e. g. https://github.com/developit/jsxobj, https://github.com/dbartholomae/jsx-readme).
One ongoing discussion is about configuring AWS CDK via JSX, which is limited by this: AWS CDK uses the third constructor parameter for properties, and while this works in JavaScript, the TypeScript types do not allow for it.