microsoft / microsoft/TypeScript

Translate JSX elements based on objects

Abierto
#32,619 0 comentarios 1 reacción 0 asignados Ver en GitHub

Nadie ha tomado este issue todavía.

Awaiting More Feedback Domain: JSX/TSX Suggestion
Lenguaje dominante
Go
Estrellas
111k
Forks
14.4k
Merge medio
1 d 19 h
PR fusionados (30 d)
117

Descripción

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

Guía de contribución

Abrir la guía de contribución

Primeros pasos

  1. Lee el issue completo y luego la guía de contribución del proyecto.
  2. Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
  3. Haz un fork del repositorio y trabaja en una rama.
  4. Abre un pull request que haga referencia al número del issue.

Línea de trabajo

Comienza con la reproducción TSX proporcionada y el enlace de Playground; después, sigue el flujo de comprobación de tipos de los elementos JSX para el manejo de jsxFactory personalizado. Se considera terminado cuando se aceptan etiquetas JSX cuyo valor es un objeto, como ObjectComponent, y el ejemplo se traduce a h(ObjectComponent, { text: "hello world" }) sin el error de que no existen firmas de construcción o de llamada.

Escrito por el modelo de indexación a partir del texto del issue.

Evaluación

Stack tecnológico
typescript
Área
compilers
Tipo de issue
Nueva funcionalidad
Dificultad
5/5
Tiempo estimado
Más de una semana
Estado de actividad
Estancado
Claridad
Bastante claro
Aptitud para principiantes
30/100

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.