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.
111 lines
7 KiB
Markdown
111 lines
7 KiB
Markdown
---
|
||
title: Рендерер JSX
|
||
description: Декларативное создание дизайна с помощью JSX и обратный экспорт в JSX или HTML с Tailwind.
|
||
---
|
||
|
||
# Рендерер JSX
|
||
|
||
OpenPencil использует JSX как декларативный язык создания дизайна. Он подходит для агентов ИИ, сценариев и воспроизводимого построения интерфейсов.
|
||
|
||
JSX также служит читаемым представлением существующего дизайна. Изменения выглядят как обычная разница в коде, которую удобно проверять и хранить в системе управления версиями.
|
||
|
||
## Создание дизайна
|
||
|
||
Инструмент `render`, доступный в чате с ИИ, MCP и `eval` CLI, принимает 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>
|
||
```
|
||
|
||
В MCP и чате с ИИ передайте инструменту `render` строку JSX. В коде приложения или библиотеки без интерфейса импортируйте `Frame`, `Text` и другие элементы для описания дизайна из `@open-pencil/design-jsx`, а узлы создавайте через `renderTree` или `renderJSX` из `@open-pencil/core/design-jsx`: они добавляют значки, преобразование SVG и компоновку. Чтобы писать такие деревья в TSX, укажите в `tsconfig.json` `"jsxImportSource": "@open-pencil/design-jsx"` вместе с `"jsx": "react-jsx"` или добавьте в файл комментарий `/** @jsxImportSource @open-pencil/design-jsx */`. Для обратного преобразования используйте команду `export` — подробнее в разделе [Экспорт дизайна в JSX](./cli/exporting).
|
||
|
||
## Элементы
|
||
|
||
| Элемент | Создаёт | Псевдоним |
|
||
|---------|---------|-----------|
|
||
| `<Frame>` | Фрейм с автоматической компоновкой | `<View>` |
|
||
| `<Rectangle>` | Прямоугольник | `<Rect>` |
|
||
| `<Ellipse>` | Эллипс или круг | |
|
||
| `<Text>` | Текстовый объект; дочерние элементы становятся содержимым | |
|
||
| `<Line>` | Линия | |
|
||
| `<Star>` | Звезда | |
|
||
| `<Polygon>` | Многоугольник | |
|
||
| `<Vector>` | Векторный контур | |
|
||
| `<Group>` | Группа | |
|
||
| `<Section>` | Секция | |
|
||
|
||
## Свойства оформления
|
||
|
||
Для краткости свойства используют имена, близкие к Tailwind.
|
||
|
||
### Компоновка
|
||
|
||
| Свойство | Назначение |
|
||
|----------|------------|
|
||
| `flex` | `"row"` или `"col"`; включает автоматическую компоновку |
|
||
| `gap` | Расстояние между дочерними элементами |
|
||
| `wrap` | Перенос дочерних элементов на следующую строку |
|
||
| `rowGap` | Расстояние между строками при переносе |
|
||
| `justify` | `"start"`, `"end"`, `"center"` или `"between"` |
|
||
| `items` | `"start"`, `"end"`, `"center"` или `"stretch"` |
|
||
| `p`, `px`, `py`, `pt`, `pr`, `pb`, `pl` | Внутренние отступы |
|
||
|
||
### Размер и положение
|
||
|
||
| Свойство | Назначение |
|
||
|----------|------------|
|
||
| `w`, `h` | Ширина и высота: число, `"fill"` или `"hug"` |
|
||
| `minW`, `maxW`, `minH`, `maxH` | Ограничения размера |
|
||
| `x`, `y` | Положение |
|
||
|
||
### Внешний вид
|
||
|
||
| Свойство | Назначение |
|
||
|----------|------------|
|
||
| `bg` | Цвет фоновой заливки в шестнадцатеричном формате |
|
||
| `fill` | Псевдоним для `bg` |
|
||
| `stroke` | Цвет обводки |
|
||
| `strokeWidth` | Толщина обводки; по умолчанию 1 |
|
||
| `rounded` | Радиус углов; отдельные углы: `roundedTL`, `roundedTR`, `roundedBL`, `roundedBR` |
|
||
| `cornerSmoothing` | Сглаживание углов от 0 до 1 |
|
||
| `opacity` | Прозрачность от 0 до 1 |
|
||
| `shadow` | Внешняя тень, например `"0 4 8 #00000040"` |
|
||
| `blur` | Радиус размытия слоя |
|
||
| `rotate` | Угол поворота в градусах |
|
||
| `blendMode` | Режим наложения |
|
||
| `overflow` | `"hidden"` или `"visible"` |
|
||
|
||
### Типографика
|
||
|
||
| Свойство | Назначение |
|
||
|----------|------------|
|
||
| `size` / `fontSize` | Размер шрифта |
|
||
| `font` / `fontFamily` | Семейство шрифта |
|
||
| `weight` / `fontWeight` | `"bold"`, `"medium"`, `"normal"` или число |
|
||
| `color` | Цвет текста |
|
||
| `textAlign` | `"left"`, `"center"`, `"right"` или `"justified"` |
|
||
|
||
## Экспорт в JSX
|
||
|
||
```sh
|
||
openpencil export design.fig -f jsx # Формат OpenPencil
|
||
openpencil export design.fig -f jsx --style tailwind # Классы Tailwind
|
||
```
|
||
|
||
Экспортированный дизайн можно изменить как код и снова отрисовать. Экспорт записывает скрытые и заблокированные слои, ограничения, ограничения размеров, многослойные, градиентные и изображённые заливки, обводки, эффекты, маски и привязки переменных, поэтому при повторной отрисовке они воспроизводятся, а `diff_jsx` показывает изменения любого из них. Форматированный текст со смешанными стилями, векторные контуры, сетки компоновки, общие стили и определения свойств компонентов пока не записываются. Экземпляры записываются как фреймы со своим содержимым, поэтому экспортированный JSX самодостаточен.
|
||
|
||
## Сравнение изменений
|
||
|
||
```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>
|
||
```
|
||
|
||
Такое сравнение можно проверить в запросе на включение изменений, сохранить в системе управления версиями и анализировать в CI.
|