Syntax similar to JSX

Offen

#918 erstellt am 09.2.2023 21 Kommentare 2 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen

Dieses Issue hat noch niemand übernommen.

Bewertung

Schwierigkeit: 5/5
Geschätzter Aufwand: Über eine Woche
Anfängerfreundlichkeit: 25/100

Issue-Typ: Feature
Klarheit: Muss geklärt werden
Aktivitätsstatus: Veraltet
Tech-Stack: javascript, python, react
Bereich: frontend, web-dev

Rechercherichtung

Start by reading the linked tagstr transpiler issue and the example implementation in tagstr/examples/htmldom.py. Clarify whether the work targets the interim transpiler, the tag string PEP, or both, then define the html tag function's expected behavior from the JSX examples. Done means an agreed implementation path with working transpiler support and an html tag usable by the shown example.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Beschreibung

priority-2-moderate

Current Situation

ReactJS has a method of HTML templating called JSX. We currently do not have an equivalent. We should create a Python-based JSX equivalent that operates similarly to how it is used in ReactJS (Javascript).

The key difference here is we will not use a dedicated file extension (such as .psx) in order to not break existing toolchains. Instead, we will rely on the tag string PEP that adds template literals to Python. Here is an example of the tag string syntax:

from reactpy import html

button_style = {"font_style": "bold"}
button_text = "Click me!"
view = html(t"<button on_click={lambda event: ...} style={button_text}>{button_text}</button>")

While we wait for the tag string PEP to be merged, we could potentially use an interim transpiler to use a similar syntax. The interim transpiler syntax would look something like this:

from reactpy import html

button_style = {"font_style": "bold"}
button_text = "Click me!"
view = html @ f"<button on_click={lambda event: ...} style={button_text}>{button_text}</button>"

Proposed Actions

Aid in the development of this proposed transpiler and then develop an html tag function. An initial implementation of an html tag can be found here.

News: There is now a VSCode Extension to add syntax highlighting for inline HTML. (and a second one)

Vorherrschende Sprache: Python
Sterne: 8.1k
Forks: 332
PR-Merge-Kennzahlen: Keine gemergten PRs in 30 T.

Beitragsleitfaden

Für dieses Repository ist kein Beitragsleitfaden indexiert

Erste Schritte

Lesen Sie das ganze Issue und danach den Beitragsleitfaden des Projekts.
Schreiben Sie ins Issue, dass Sie es übernehmen — das erspart doppelte Arbeit.
Forken Sie das Repository und arbeiten Sie in einem Branch.
Öffnen Sie einen Pull Request, der die Issue-Nummer nennt.

Mehr aus reactive-python/reactpy

Outdated GIF in Docs Offen

priority-3-low type-docs

Schwierigkeit 2/5 1-3 Stunden Anfängerfreundlichkeit 65/100

reactive-python/reactpy#1034 · Erstellt am 09.6.2023
Allow JavaScript components inside of props dict Offen

priority-2-moderate type-revision

Schwierigkeit 5/5 Über eine Woche Anfängerfreundlichkeit 25/100

reactive-python/reactpy#1319 · Erstellt am 15.12.2025
Create PyScript-compatible interface for ReactPy SSR and ReactJS components Offen

priority-1-high

Schwierigkeit 5/5 Über eine Woche Anfängerfreundlichkeit 25/100

reactive-python/reactpy#1277 · Erstellt am 13.2.2025
Add MicroPython as ReactPy executor Offen

priority-3-low

Schwierigkeit 5/5 Über eine Woche Anfängerfreundlichkeit 35/100

reactive-python/reactpy#1273 · 1 Reaktion · Erstellt am 11.2.2025
ReactPy static site generation (SSG) Offen

priority-2-moderate

Schwierigkeit 5/5 Über eine Woche Anfängerfreundlichkeit 30/100

reactive-python/reactpy#1272 · 2 Reaktionen · Erstellt am 11.2.2025

Alle Issues in reactive-python/reactpy