microsoft / microsoft/TypeScript
Translate JSX elements based on objects
Nobody has claimed this yet.
- Dominant language
- Go
- Stars
- 111k
- Forks
- 14.3k
- Avg merge
- 2d 4h
- Merged PRs (30d)
- 132
Description
When using a custom jsxFactory, it is currently only possible to use something that is a string or callable as the JSX element tag. I do not see a reason why there should be such limitation. In my use case I would like to use objects as "blueprints" for my jsx factory.
TypeScript Version: 3.5.1
Search Terms:
jsx jsxFactory object TS2604
Code
/*
* @jsx h
*/
function h (...args: any[]): string {
return 'something';
}
function FuncComponent() {
return '';
}
const StringComponent = 'test';
const ObjectComponent = { key: 'test '};
// works
const dom1 = <FuncComponent text="hello world" />;
// works
const dom3 = <StringComponent text="hello world" />;
// doesnt work
const dom4 = <ObjectComponent text="hello world" />;
Expected behavior:
JSX element <ObjectComponent text="hello world" /> should be translated to h(ObjectComponent, { text: "hello world" }).
Actual behavior:
Typescript throws an error: JSX element type 'ObjectComponent' does not have any construct or call signatures.
Related Issues:
N/A
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with the provided TSX reproduction and Playground link, then trace the JSX element type-checking path for custom jsxFactory handling. Done means object-valued JSX tags such as ObjectComponent are accepted and the example translates to h(ObjectComponent, { text: "hello world" }) without the construct-or-call-signatures error.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- typescript
- Domain
- compilers
- Issue type
- Feature
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 30/100