Skip to content

Translate JSX elements based on objects #32619

Open

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Assignees

No one assigned

    Labels

    Awaiting More FeedbackThis means we'd like to hear from more people who would be helped by this featureDomain: JSX/TSXRelates to the JSX parser and emitterSuggestionAn idea for TypeScript

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions