Files
webstudio/packages/jsx-utils
Oleg Isonen 59ff9c23db refactor: Move text placeholders to meta templates (#3410)
## Description

Part of https://github.com/webstudio-is/webstudio/issues/3149 this
allows us to understand if an instance has text child.
With this knowledge we can place instances into components that don't
have text children and after them if they do.

## Steps for reproduction

1. insert text or paragraph
2. see there is expected placeholder text which is editable
3. select it, tell AI to change color or something
4. see it works and see in payload it didn't send placeholder text
5. try text editing on empty body - shouldn't allow it

## Code Review

- [ ] hi @TrySound , I need you to do
  - conceptual review (architecture, feature-correctness)
  - detailed review (read every line)
  - test it on preview

## Before requesting a review

- [ ] made a self-review
- [ ] added inline comments where things may be not obvious (the "why",
not "what")

## Before merging

- [ ] tested locally and on preview environment (preview dev login:
5de6)
- [ ] updated [test
cases](https://github.com/webstudio-is/webstudio/blob/main/apps/builder/docs/test-cases.md)
document
- [ ] added tests
- [ ] if any new env variables are added, added them to `.env.example`
and the `builder/env-check.js` if mandatory
2024-05-24 13:53:19 +02:00
..
2023-10-06 09:07:59 +02:00
2023-10-01 12:17:43 +02:00
2023-10-01 12:17:43 +02:00
2023-10-01 12:17:43 +02:00
2023-10-01 12:17:43 +02:00

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:

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