mirror of
https://github.com/webstudio-is/webstudio.git
synced 2026-11-08 21:15:18 +09:00
Giuseppe
2ca3907988
Adds utils to work with JSX and transform it to Webstudio Embed Template as well as converting Tailwind styles to Webstudio Embed Template style declarations and a fake `<HeroIcon>` component to `HtmlEmbed` with inline SVG taken from heroicons (we will need this for ai).
26 lines
641 B
Markdown
26 lines
641 B
Markdown
# JSX Utils
|
|
|
|
Utilities to work with JSX, including converting it to Webstudio format.
|
|
|
|
## Usage
|
|
|
|
Install the package
|
|
|
|
```
|
|
pnpm i @webstudio-is/jsx-utils
|
|
```
|
|
|
|
Transform a JSX string to Webstudio Embed Template:
|
|
|
|
```ts
|
|
import { jsxToWSEmbedTemplate } from "@webstudio-is/jsx-utils";
|
|
|
|
await jsxToWSEmbedTemplate("<Box>hello</Box>");
|
|
```
|
|
|
|
Other utils:
|
|
|
|
- `traverseTemplate` and `traverseTemplateAsync` to traverse a WsEmbedTemplate and work with nodes
|
|
- `tailwindToWebstudio` converts a template `className` prop to Webstudio local styles
|
|
- `heroiconsToSvgEmbed` converts `<HeroIcon name="iconName" type="solid">` to `HtmlEmbed` with inline SVG
|