microsoft / microsoft/TypeScript

Translate JSX elements based on objects

Open
#32,619 0 comments 1 reaction 0 assignees View on GitHub

Nobody has claimed this yet.

Awaiting More Feedback Domain: JSX/TSX Suggestion
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.

Playground Link:
https://www.typescriptlang.org/play/index.html?jsx=2#code/PQKgsAUABCUAICsDOAPKALSNiUgMwFcA7AYwBcBLAeyIygAoA6ZgQwCcBzJALihaICeAbQC6ASl5IybCkQ5QA3lihsApmQJtaAciRUAtuvSyO2gNyQAvrgiFSlGlABixEgGEDABxqqiZemKKymoaWlDa5laQJDRSUADK0iYe+t5EvmRQALzhZKpSkRAxRHEA8gBGCKrkKWkZ2YpQANaqArzaeXHalhYQkMDAUADuVGxNSNGxmQAmBgCMDQA8LqS1Pn5QeShkWQBE6KoANodUw6OH07tQwAB8vf2DI2MTRVNQs-oAzEuJMnJr6Q2Wx2+yOJzObAuV1u9wgA3eVHyGyeTUmJRmBgALEsKlUal51plgXsDsdTk8odc7pAgA

Related Issues:
N/A

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.