rescript-lang / rescript-lang/rescript

Revisit JSX syntax

Aperta
#8,053 5 commenti 12 reazioni 0 assegnatari Vedi su GitHub

Nessuno ha ancora preso questa issue.

discussion
Lingua principale
OCaml
Stelle
7.5k
Fork
485
Merge medio
1g 2h
PR unite (30g)
55

Descrizione

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.

Guida per i contributori

Apri la guida per i contributori

Come iniziare

  1. Leggi tutta la issue e poi la guida ai contributi del progetto.
  2. Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
  3. Fai un fork del repository e lavora su un branch.
  4. Apri una pull request che faccia riferimento al numero della issue.

Direzione di ricerca

Inizia dalla documentazione sulle differenze di ReScript JSX e dalla specifica ufficiale JSX collegata nell’issue. Segui i punti di ingresso del formatter e del parser per determinare come vengono gestiti attualmente i figli JSX. Il lavoro sarà considerato completato quando il comportamento proposto di formatter e parser sarà definito e coperto per testo semplice, identificatori, espressioni e figli di componenti personalizzati.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Valutazione

Stack tecnologico
javascript, ocaml
Ambito
compilers, frontend
Tipo di issue
Funzionalità
Difficoltà
5/5
Tempo stimato
Più di una settimana
Stato di attività
Tranquilla
Chiarezza
Abbastanza chiara
Idoneità per principianti
38/100

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.