117 lines
4.1 KiB
Markdown
117 lines
4.1 KiB
Markdown
---
|
||
title: Renderer JSX
|
||
description: Twórz projekty za pomocą JSX — składni, którą LLM-y już znają z milionów komponentów React.
|
||
---
|
||
|
||
# Renderer JSX
|
||
|
||
OpenPencil używa JSX jako języka tworzenia projektów. LLM-y widziały miliony komponentów React — opisanie layoutu jako `<Frame><Text>` jest naturalne, bez potrzeby specjalnego trenowania. Każdy token ma znaczenie, gdy agent AI wykonuje dziesiątki operacji, a JSX jest najbardziej zwięzłą deklaratywną reprezentacją.
|
||
|
||
JSX jest również porównywalny w diffach. Gdy AI modyfikuje projekt, zmiana jest diffem JSX — czytelnym, weryfikowalnym, kontrolowalnym wersyjnie.
|
||
|
||
## Tworzenie projektów
|
||
|
||
Narzędzie `render` (dostępne w czacie AI, MCP i CLI eval) przyjmuje JSX:
|
||
|
||
```jsx
|
||
<Frame name="Card" w={320} h="hug" flex="col" gap={16} p={24} bg="#FFF" rounded={16}>
|
||
<Text size={18} weight="bold">Card Title</Text>
|
||
<Text size={14} color="#666">Description text</Text>
|
||
</Frame>
|
||
```
|
||
|
||
W serwerze MCP i czacie AI narzędzie `render` przyjmuje ciągi JSX bezpośrednio. W CLI użyj polecenia `export`, aby pójść w drugą stronę — [eksportowanie projektów jako JSX](./cli/exporting).
|
||
|
||
## Elementy
|
||
|
||
Wszystkie typy węzłów są dostępne jako elementy JSX:
|
||
|
||
| Element | Tworzy | Aliasy |
|
||
|---------|--------|--------|
|
||
| `<Frame>` | Ramka (kontener, obsługuje auto-layout) | `<View>` |
|
||
| `<Rectangle>` | Prostokąt | `<Rect>` |
|
||
| `<Ellipse>` | Elipsa / koło | |
|
||
| `<Text>` | Węzeł tekstowy (dzieci stają się treścią tekstu) | |
|
||
| `<Line>` | Linia | |
|
||
| `<Star>` | Gwiazda | |
|
||
| `<Polygon>` | Wielokąt | |
|
||
| `<Vector>` | Ścieżka wektorowa | |
|
||
| `<Group>` | Grupa | |
|
||
| `<Section>` | Sekcja | |
|
||
|
||
## Właściwości stylów
|
||
|
||
Zwięzłe skrócone właściwości inspirowane nazewnictwem Tailwind.
|
||
|
||
### Layout
|
||
|
||
| Właściwość | Opis |
|
||
|------------|------|
|
||
| `flex` | `"row"` lub `"col"` — włącza auto-layout |
|
||
| `gap` | Odstęp między dziećmi |
|
||
| `wrap` | Zawijanie dzieci do następnej linii |
|
||
| `rowGap` | Odstęp na osi poprzecznej przy zawijaniu |
|
||
| `justify` | `"start"`, `"end"`, `"center"`, `"between"` |
|
||
| `items` | `"start"`, `"end"`, `"center"`, `"stretch"` |
|
||
| `p`, `px`, `py`, `pt`, `pr`, `pb`, `pl` | Padding |
|
||
|
||
### Rozmiar i pozycja
|
||
|
||
| Właściwość | Opis |
|
||
|------------|------|
|
||
| `w`, `h` | Szerokość/wysokość — liczba, `"fill"` lub `"hug"` |
|
||
| `minW`, `maxW`, `minH`, `maxH` | Ograniczenia rozmiaru |
|
||
| `x`, `y` | Pozycja |
|
||
|
||
### Wygląd
|
||
|
||
| Właściwość | Opis |
|
||
|------------|------|
|
||
| `bg` | Wypełnienie tła (kolor hex) |
|
||
| `fill` | Alias dla `bg` |
|
||
| `stroke` | Kolor obrysu |
|
||
| `strokeWidth` | Szerokość obrysu (domyślnie: 1) |
|
||
| `rounded` | Zaokrąglenie narożników (lub `roundedTL`, `roundedTR`, `roundedBL`, `roundedBR`) |
|
||
| `cornerSmoothing` | Gładkie narożniki w stylu iOS (0–1) |
|
||
| `opacity` | 0–1 |
|
||
| `shadow` | Cień (np. `"0 4 8 #00000040"`) |
|
||
| `blur` | Promień rozmycia warstwy |
|
||
| `rotate` | Obrót w stopniach |
|
||
| `blendMode` | Tryb mieszania |
|
||
| `overflow` | `"hidden"` lub `"visible"` |
|
||
|
||
### Typografia
|
||
|
||
| Właściwość | Opis |
|
||
|------------|------|
|
||
| `size` / `fontSize` | Rozmiar czcionki |
|
||
| `font` / `fontFamily` | Rodzina czcionki |
|
||
| `weight` / `fontWeight` | `"bold"`, `"medium"`, `"normal"` lub liczba |
|
||
| `color` | Kolor tekstu |
|
||
| `textAlign` | `"left"`, `"center"`, `"right"`, `"justified"` |
|
||
|
||
## Eksport do JSX
|
||
|
||
Konwertuj istniejące projekty z powrotem do JSX:
|
||
|
||
```sh
|
||
openpencil export design.fig -f jsx # format OpenPencil
|
||
openpencil export design.fig -f jsx --style tailwind # klasy Tailwind
|
||
```
|
||
|
||
Pełen cykl działa: wyeksportuj projekt jako JSX, zmodyfikuj kod, wyrenderuj z powrotem.
|
||
|
||
## Wizualne porównywanie
|
||
|
||
Ponieważ projekty są reprezentowalne jako JSX, zmiany stają się diffami kodu:
|
||
|
||
```diff
|
||
<Frame name="Card" w={320} flex="col" gap={16} p={24} bg="#FFF">
|
||
- <Text size={18} weight="bold">Old Title</Text>
|
||
+ <Text size={24} weight="bold" color="#1D1B20">New Title</Text>
|
||
<Text size={14} color="#666">Description</Text>
|
||
</Frame>
|
||
```
|
||
|
||
Dzięki temu zmiany projektowe są weryfikowalne w pull requestach, śledzone w systemie kontroli wersji i audytowalne w CI.
|