microsoft / microsoft/TypeScript

Widen eligibility of Instrinsic Element names in JSX/TSX beyond lowercase names

Offen
#31,606 3 Kommentare 12 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen

Dieses Issue hat noch niemand übernommen.

Awaiting More Feedback Suggestion
Vorherrschende Sprache
Go
Sterne
111k
Forks
14.3k
Ø Merge
2 T. 4 Std.
Gemergte PRs (30 T.)
132

Beschreibung

Search Terms

JSX, compilation, Intrinsic Elements

Suggestion

Allow more flexibility in defining Intrinsic Elements in JSX. The lowercase/uppercase convention works for React but doesn't represent the range of the spec. Any name should be allowed to be registered as an Intrinsic Element.

Use Cases

JSX is just an XML like syntax language that gets compiled down to JavaScript. How that compilation works and what it outputs could be different depending on the library. Assuming case or character set to determine Intrinsic Elements outside the spec makes it much more difficult to support TypeScript for other JSX libraries.

Examples

Suppose a library wanted wanted to allow control flow to be precompiled using a $ symbol to prevent interference with the range of Value Elements the end user could use:

<$ each={ items }>{ item => <div>{ item.title }</div>}</$>

This is perfectly valid JSX and could be compiled away before runtime.

Or how about something like NativeScript which uses a PascalCase syntax for it's intrinsic elements? It should be perfectly fine to set aside a few of these without having mess with per file imports or messing with Global scope.

I mean given the trend to compile down, and idea very much at the heart of JSX, it seems incredibly limiting to restrict this to a convention, no matter how popular it is. If the spec allows so should Typescript.

Yet today, you cannot set $ nor Button as Intrinsic JSX elements. I mean you can but they just get ignored.

I am unclear whether it's breaking. But I believe it would not be as it would just allow more elements to be eligible and not take anything away. Although I know there is some implicit behavior here (when there are no Intrinsic Elements declared). I suppose that could stay the same.

Checklist

My suggestion meets these guidelines:

  • This wouldn't be a breaking change in existing TypeScript/JavaScript code
  • This wouldn't change the runtime behavior of existing JavaScript code
  • This could be implemented without emitting different JS based on the types of the expressions
  • This isn't a runtime feature (e.g. library functionality, non-ECMAScript syntax with JavaScript output, etc.)
  • This feature would agree with the rest of TypeScript's Design Goals.

Beitragsleitfaden

Beitragsleitfaden öffnen

Erste Schritte

  1. Lies das ganze Issue und danach den Beitragsleitfaden des Projekts.
  2. Schreib ins Issue, dass du es übernimmst — das erspart doppelte Arbeit.
  3. Forke das Repository und arbeite in einem Branch.
  4. Öffne einen Pull Request, der die Issue-Nummer nennt.

Rechercherichtung

Beginne damit, TypeScript's JSX/TSX-Prüfung von intrinsic-element und den Umgang mit kleingeschriebenen Namen nachzuverfolgen; in der Issue wird keine Datei und kein Test genannt. Vergleiche die angeforderten Beispiele $ und Button mit den aktuellen JSX-Regeln und lege fest, welche Namen einschließlich implizitem Verhalten zulässig sein sollten. Erledigt ist die Aufgabe, wenn die vorgesehenen Namen akzeptiert werden, ohne das bestehende JSX-Verhalten zu ändern, und die Fälle durch Tests abgedeckt sind.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Bewertung

Tech-Stack
typescript
Bereich
compilers
Issue-Typ
Feature
Schwierigkeit
5/5
Geschätzter Aufwand
Über eine Woche
Aktivitätsstatus
Veraltet
Klarheit
Muss geklärt werden
Anfängerfreundlichkeit
25/100

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.