rescript-lang / rescript-lang/rescript

Revisit JSX syntax

Offen
#8,053 5 Kommentare 12 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen

Dieses Issue hat noch niemand übernommen.

discussion
Vorherrschende Sprache
OCaml
Sterne
7.5k
Forks
485
Ø Merge
1 T. 2 Std.
Gemergte PRs (30 T.)
55

Beschreibung

Proposal: Bring ReScript JSX Closer to the JavaScript JSX Spec

Currently, ReScript JSX differs from JavaScript’s JSX in a few key ways (docs).
I propose moving ReScript JSX closer to the official JSX spec in a future release.

Example
// Current
let foo = <p>{React.string("Hello")}</p>

// Proposed
let foo = <p>Hello</p>

Right now, Hello is treated as a React.element rather than as JSXText.
This means plain text inside JSX must be wrapped in React.string(...), unlike in JavaScript JSX.

Suggested Path Forward

Step 1: Formatter update

The formatter could automatically insert braces for identifiers used as children, making the output more consistent.

// Original
let foo = <p>children</p>

// After format 
// (notice how there's no space before the opening curly brace and after the closing one)
let foo = <p>{children}</p>

Step 2: Parser update

Next, the parser could be extended to handle JSXText as valid child input—bringing ReScript JSX semantics in line with the JSX spec.

[!NOTE]
This change will only affect syntax and won't change the type of JSX children.
Inside curly braces you'll still need React.string:

<div>
 {switch count {
 | 1 => "once"
 | n => `Int.toString(n) times`
 }->React.string}
</div>

This could also affect custom components where children are not typed as JSX element and that are often used with literals, eg before:

<Counter>6</Counter>

after:

<Counter>{6}</Counter>

This is still an early-stage idea, so feedback is welcome. Don't hesitate to chime in if you think your codebase would be affected by this change.
Please use 👍 / 👎 / 👀 to indicate your opinion.
This is just a signal, not a binding vote.

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 mit der Dokumentation zu den Abweichungen von ReScript JSX und der im Issue verlinkten offiziellen JSX-Spezifikation. Verfolge die Einstiegspunkte von Formatter und Parser, um zu bestimmen, wie JSX-Kinder derzeit behandelt werden. Als abgeschlossen gilt die Arbeit, wenn das vorgeschlagene Verhalten von Formatter und Parser definiert und für Text ohne Formatierung, Bezeichner, Ausdrücke und Kinder benutzerdefinierter Komponenten abgedeckt ist.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Bewertung

Tech-Stack
javascript, ocaml
Bereich
compilers, frontend
Issue-Typ
Feature
Schwierigkeit
5/5
Geschätzter Aufwand
Über eine Woche
Aktivitätsstatus
Ruhig
Klarheit
Größtenteils klar
Anfängerfreundlichkeit
38/100

Neue Issues direkt in Ihr Postfach

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