vercel/satori

Playground support for the object syntax (ie. use without JSX)

Open

Aperta il 12 mar 2023

Vedi su GitHub
 (2 commenti) (1 reazione) (0 assegnatari)TypeScript (13.452 star) (352 fork)user submission
good first issue

Descrizione

Feature Request

Description

Per the readme, Satori supports JSX (with a transpiler enabled), and also a React-like object syntax with type, props.children, and props.style fields. It would be nice if this syntax was usable on the playground as a toggle.

Additional Context

Using Satori without a transpiler, you end up needing to constantly tweak your structure, rerun the script, and re-check the output, in order to iteratively develop and tinker on Satori-made images. When I was previously using Satori with a transpiler, this was easy, thanks to the playground.

Guida contributor

Tech stack
typescriptreact
Dominio
frontenddeveloper experience
Tipo issue
feature
DifficoltàQuanto dovrebbe essere impegnativa per un nuovo contributor.
3
Tempo stimatoTempo stimato per completare e verificare uno scope piccolo.
half day
Stato attivitàQuanto è probabile che la issue sia ancora attiva e reviewable.
fresh
ChiarezzaQuanto chiaramente la issue descrive problema, scope e risultato atteso.
mostly clear
Prerequisiti
Familiarity with ReactUnderstanding of Satori playground codebase
Adatta ai principiantiQuanto la issue è adatta a contributor alla prima esperienza.
60
Direzione di ricerca
The playground likely has a component for code input/editor. Look at the playground source code in the repository (likely under a 'site' or 'playground' directory). The goal is to add a toggle that switches between JSX (with transpiler) and object syntax. Study how the current playground handles parsing and rendering. Check if any existing UI components (e.g., a dropdown) can be reused. Consider how the object syntax examples are provided in the documentation to inform the implementation.