microsoft / microsoft/TypeScript

Separate JSX/TSX from React and present it as a general XML-in-JS solution

Ouverte
#62,721 11 commentaires 0 réactions 0 personnes assignées Voir sur GitHub

Personne n'a encore pris cette issue.

Awaiting More Feedback Suggestion
Langage dominant
Go
Étoiles
111k
Forks
14.3k
Merge moyen
2 j 4 h
PR mergées (30 j)
132

Description

### 🔍 Search Terms

"jsx react", "jsx scope", "jsx generic"

### ✅ Viability Checklist

- [ ] This wouldn't be a breaking change in existing TypeScript/JavaScript code
- [ ] This wouldn't change the runtime behavior of existing JavaScript code
- [x] This could be implemented without emitting different JS based on the types of the expressions
- [x] This isn't a runtime feature (e.g. library functionality, non-ECMAScript syntax with JavaScript output, new syntax sugar for JS, etc.)
- [x] This isn't a request to add a new utility type: https://github.com/microsoft/TypeScript/wiki/No-New-Utility-Types
- [x] This feature would agree with the rest of our Design Goals: https://github.com/Microsoft/TypeScript/wiki/TypeScript-Design-Goals

### ⭐ Suggestion

Right now TypeScript's JSX/TSX options are tied to React:

1. This includes `jsx` tsconfig option names (`react`, `react-jsx`, `react-native` and etc.)
2. And TypeScript docs (official docs describe JSX/TSX usage only giving examples for React).

All this creates great confusion and makes new people think that JSX/TSX stuff is ONLY used for React which damages the whole idea of jsx. Yes, it used to be like that from historical point of view, but I think it is time to separate one from another.

The problem is that current option names (and tsconfig docs) are not self-explanatory for someone who never worked with React or front end in general.

I think that jsx has grown enought to have it's own independent standart.
Something like this:

```json
"jsx": {
"mode": "scope" | "import" | "preserve",
"elementTypeStrictness": "strict" | "relaxed",
"elementSpec": "two-argument" | "three-argument",
"elementFactory": "jsx",
"fragmentFactory": "Fragment",
"importSource": "...",
}
```

From that perspective, React will be just one example of how this general feature can be used, **not the only one**!

Of course it also worth mentioning that there is a awaited by many feature request to provide full generic support for jsx nodes instead of widening to `JSX.Element`:

* https://github.com/microsoft/TypeScript/issues/14729
* https://github.com/microsoft/TypeScript/issues/21699

### 📃 Motivating Example

Separating JSX/TSX from React especially on docs level would attract more people to writing their own XML-in-JS languages, instead of using external tools.

### 💻 Use Cases

This is mainly useful for writing content with strict typings and full JS/TS environment support (variables, conditions, functions, comments and etc) — no need to use external Markdown/XML/... parsers.

Consider the following prose example:

```tsx
export const pythagoreanTheorem = (



In any right triangle, the square of the length of the
hypotenuse c is equal to the sum of the squares of
the lengths of the other two sides a and b.


{`
a^2 + b^2 = c^2
`}



The theorem can be visualized as the area of the square
constructed on the hypotenuse being equal to the sum of the
areas of the squares constructed on the other two sides.
This relationship holds true for all right triangles,
regardless of their size or orientation.





The most well-known Pythagorean triple is (3, 4, 5),
where 3^2 + 4^2 = 9 + 16 = 25 = 5^2. Other common
triples include (5, 12, 13) and (8, 15, 17).




);
```

This is not a React code. All these tags are custom functions so we can parse it, detect writing errors on both compile and runtime levels, extract search snippets and do so much stuff! And all this within TypeScript — no external tools needed.

Of course XML-in-JS can be used not only for prose content, but for other structured data, that is easier to express with XML structures other than JS code.

Not to mention how flexible it is — we can save such XML structures to variables, export and import them in different files!

Guide de contribution

Ouvrir le guide de contribution

Par où commencer

  1. Lisez l'issue en entier, puis le guide de contribution du projet.
  2. Signalez en commentaire que vous la prenez — cela évite que deux personnes fassent le même travail.
  3. Forkez le dépôt et travaillez sur une branche.
  4. Ouvrez une pull request qui référence le numéro de l'issue.

Piste de recherche

Commencez par examiner les noms des options tsconfig de JSX/TSX et la documentation officielle de JSX décrite dans l’issue, puis comparez la manière dont ils sont actuellement liés à React. Le travail sera considéré comme terminé lorsqu’un design accepté pour une configuration JSX indépendante et les modifications correspondantes de la documentation auront été définis ; l’issue ne nomme aucun fichier d’implémentation ni aucun test.

Rédigé par le modèle d'indexation à partir du texte de l'issue.

Évaluation

Stack technique
javascript, react, typescript
Domaine
compilers, developer-experience, documentation
Type d'issue
Fonctionnalité
Difficulté
5/5
Temps estimé
Plus d'une semaine
Activité
À l'abandon
Clarté
À clarifier
Accessibilité débutants
25/100

Recevez les nouvelles issues par e-mail

Un résumé court des issues GitHub adaptées aux débutants.