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.
56 lines
3.3 KiB
Markdown
56 lines
3.3 KiB
Markdown
---
|
||
title: Moteur JSX
|
||
description: Créer des designs à partir de JSX et exporter une sélection en JSX avec Tailwind.
|
||
---
|
||
|
||
# Moteur JSX
|
||
|
||
OpenPencil convertit du JSX déclaratif en arbre de design. Le même système est disponible dans le chat avec l’AI, MCP et `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>
|
||
<Button>Continue</Button>
|
||
</Frame>
|
||
```
|
||
|
||
## Créer des designs
|
||
|
||
L’outil `render` accepte des chaînes JSX dans le chat AI et MCP. Dans le code d’une application ou d’une bibliothèque sans interface, importez `Frame`, `Text` et les autres exports d’écriture depuis `@open-pencil/design-jsx`, puis créez les objets avec `renderTree` ou `renderJSX` depuis `@open-pencil/core/design-jsx`, qui ajoutent les icônes, la conversion SVG et la disposition. Pour écrire les arbres en TSX, définissez `"jsxImportSource": "@open-pencil/design-jsx"` avec `"jsx": "react-jsx"` dans `tsconfig.json`, ou ajoutez au fichier un commentaire `/** @jsxImportSource @open-pencil/design-jsx */`. L’environnement de script détermine les API exposées à `eval` ; les exports des paquets n’y sont pas automatiquement des variables globales.
|
||
|
||
## Éléments
|
||
|
||
| JSX | Résultat |
|
||
|-----|----------|
|
||
| `<Frame>` | Cadre, éventuellement avec disposition automatique |
|
||
| `<Text>` | Objet texte |
|
||
| `<Rectangle>` | Rectangle |
|
||
| `<Ellipse>` | Ellipse |
|
||
| `<Image>` | Forme avec remplissage d’image |
|
||
| Composant enregistré | Arbre réutilisable défini par l’application |
|
||
|
||
## Disposition
|
||
|
||
- `flex="row"` ou `flex="col"` active la disposition automatique.
|
||
- `gap` règle l’espacement.
|
||
- `p`, `px`, `py`, `pt`, `pr`, `pb` et `pl` règlent les marges intérieures.
|
||
- `align` et `justify` règlent l’alignement.
|
||
- `wrap` autorise le retour à la ligne.
|
||
|
||
## Taille et position
|
||
|
||
- `w` et `h` acceptent des nombres, `"fill"` ou `"hug"`.
|
||
- `minW`, `maxW`, `minH` et `maxH` posent des limites.
|
||
- `x` et `y` définissent la position hors du flux.
|
||
|
||
## Apparence et typographie
|
||
|
||
`bg`, `fill`, `color`, `stroke`, `strokeWidth`, `opacity`, `radius` et `shadow` contrôlent l’apparence. `size`, `font`, `weight`, `lineHeight`, `letterSpacing` et `align` contrôlent le texte. Ces noms restent en anglais car ils font partie de l’API JSX.
|
||
|
||
## Exporter vers JSX
|
||
|
||
**Copier comme → JSX** convertit la sélection en JSX et classes Tailwind. La sortie tente de préserver hiérarchie, disposition, dimensions, couleurs, typographie et bordures comme point de départ d’une implémentation.
|
||
|
||
Le JSX OpenPencil exporté peut être modifié puis rendu de nouveau dans le document. L’export écrit les calques masqués et verrouillés, les contraintes, les limites de taille, les remplissages multiples, en dégradé et en image, les contours, les effets, les masques et les liaisons de variables : le rendu d’un export les reproduit, et `diff_jsx` montre les changements de chacun d’eux. Le texte riche à styles mixtes, les tracés vectoriels, les grilles de disposition, les styles partagés et les définitions de propriétés de composant ne sont pas encore écrits. Les instances sont écrites sous forme de cadres avec leur contenu, si bien que le JSX exporté se suffit à lui-même. Voir [Exports de la CLI](./cli/exporting).
|