b9753aa016
Eleven translated pages changed in English since the last release without matching updates: system requirements, the Lint tab, AI chat diff tools, collaboration with agents, design JSX imports and export fidelity, Storybook and live-app export, lint fixes, page navigation, and Checking Designs. Bring de, es, fr, it, pl, and ru up to date, add the sections the abridged translations lacked where a change landed, use each language's UI labels, and point the export page at documents list.
41 lines
2.7 KiB
Markdown
41 lines
2.7 KiB
Markdown
---
|
||
title: Motore JSX
|
||
description: Creare design da JSX ed esportare una selezione in JSX con Tailwind.
|
||
---
|
||
|
||
# Motore JSX
|
||
|
||
OpenPencil converte JSX dichiarativo in un albero di design. Lo stesso sistema è disponibile nella chat AI, in MCP e in `eval`.
|
||
|
||
```jsx
|
||
<Frame flex="col" gap={16} p={24} w={320} bg="#ffffff" radius={16}>
|
||
<Text size={18} weight="bold">Card Title</Text>
|
||
<Text color="#667085">Description</Text>
|
||
</Frame>
|
||
```
|
||
|
||
Nel codice dell’applicazione o nelle librerie headless, importa `Frame`, `Text` e gli altri export di scrittura da `@open-pencil/design-jsx`, poi crea i nodi con `renderTree` o `renderJSX` da `@open-pencil/core/design-jsx`, che aggiungono icone, conversione SVG e disposizione. Per scrivere gli alberi come TSX, imposta `"jsxImportSource": "@open-pencil/design-jsx"` con `"jsx": "react-jsx"` in `tsconfig.json`, oppure aggiungi al file il commento `/** @jsxImportSource @open-pencil/design-jsx */`. L’ambiente di scripting determina quali API sono esposte a `eval`: gli export dei pacchetti non diventano automaticamente globali.
|
||
|
||
## Elementi
|
||
|
||
`Frame`, `Text`, `Rectangle`, `Ellipse` e `Image` creano i rispettivi oggetti. I componenti registrati possono generare alberi riutilizzabili definiti dall’applicazione.
|
||
|
||
## Disposizione
|
||
|
||
- `flex="row"` o `flex="col"` attiva la disposizione automatica.
|
||
- `gap` regola la spaziatura.
|
||
- `p`, `px`, `py`, `pt`, `pr`, `pb` e `pl` regolano i margini interni.
|
||
- `align`, `justify` e `wrap` controllano allineamento e ritorno a capo.
|
||
|
||
## Dimensioni e aspetto
|
||
|
||
`w` e `h` accettano numeri, `"fill"` o `"hug"`; `x` e `y` definiscono la posizione fuori dal flusso. `bg`, `fill`, `color`, `stroke`, `opacity`, `radius` e `shadow` controllano l’aspetto.
|
||
|
||
Le proprietà tipografiche come `size`, `font`, `weight`, `lineHeight` e `letterSpacing` mantengono il nome inglese perché fanno parte dell’API JSX.
|
||
|
||
## Esportare in JSX
|
||
|
||
**Copia come → JSX** converte la selezione in JSX e classi Tailwind. L’output prova a conservare gerarchia, disposizione, dimensioni, colori, tipografia e bordi come punto di partenza per l’implementazione.
|
||
|
||
Il JSX esportato può essere modificato e renderizzato di nuovo nel documento. L’esportazione scrive livelli nascosti e bloccati, vincoli, limiti di dimensione, riempimenti multipli, sfumati e immagine, contorni, effetti, maschere e collegamenti alle variabili, quindi renderizzare un export li riproduce e `diff_jsx` mostra le modifiche a ciascuno di essi. Testo formattato con stili misti, tracciati vettoriali, griglie di layout, stili condivisi e definizioni delle proprietà dei componenti non vengono ancora scritti. Le istanze sono scritte come frame con il loro contenuto, così il JSX esportato è autonomo. Vedi [esportazioni dalla CLI](./cli/exporting).
|