- Add Token class and token() helper in template package for JSX token
support
- Refactor insertFragmentWithConflictResolution to
detectFragmentTokenConflicts
- Refactor insertPageWithConflictResolution to detectPageTokenConflicts
- Move dialog display to callers for better testability
- Add conflictResolution parameter to page-utils
- Add comprehensive tests for token functionality and conflict detection
- Fix bug: remove .values() call on arrays in breakpoint handling
## Description
1. What is this PR about (link the issue and add a short description)
## Steps for reproduction
1. click button
2. expect xyz
## Code Review
- [ ] hi @kof, 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:
0000)
- [ ] 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` file
Now we have first-class support for html tags and able to figure out
which tags are rendered so unused preset styles can be removed from
websites.
For example
```
<Box ws:tag="div">
<Box ws:tag="span">
</Box>
</Box>
```
will render only div.w-box and span.w-box though there are more presets
for for other tags like main, section etc.
Before all tags were generated
Ref https://github.com/webstudio-is/webstudio/issues/3632
Added `ws:element` component to represent any html and svg elements
within webstudio.
It is rendered as `<div>` by default which can be customized with "tag"
system property (instance.tag in data).
Here added only CLI generator support with converting html attribute
names to react compatible. Will add builder support separately.
---------
Co-authored-by: Oleg Isonen <oleg008@gmail.com>
## Description
<img width="280" alt="image"
src="https://github.com/user-attachments/assets/b3c29952-8c10-4e8f-88f0-8cea45df87ba"
/>
## Steps for reproduction
1. click button
2. expect xyz
## Code Review
- [ ] hi @kof, 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:
0000)
- [ ] 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` file
We are going to switch to hyphenated properties in styles. Here
refactored css parser to output hyphenated property instead of camel
case and added camelCaseProperty utility which does the opposite of
hyphenateProperty.
Here replaced renderJsx with renderData everywhere and refreshed copy
paste tests so they not break CI occasionally. Will help with writing
tests for global variables.
renderData is similar to renderTemplate but returns maps of data which
is used by most of builder utilities and component generator.
Here migrated to it css and component generator and used it to generate
data sources where possible.
Big one
- added `new Variable(name, initialValue)` to defined unique variable
- added `expression\`${variable}\`` to access variables by reference
- added `new Action(args, expression\`\`)` support
- added `ws:show` prop which is converted to data-ws-show under the hood
All these features are necessary to represent all webhook form features.
They also may be handy in tests.
Here added support for local styles with ws:style prop. It accepts the
result of css`` tagged template which enables formatter support.
Migrated vimeo to new template. Need to check all styles are rewritten
accurately.
```js
<$.Box
ws:style={css`
font-size: 10px;
`}
></$.Box>
```
Here added one more description file for components `*.template.tsx`.
It is decoupled from component meta to fix the issue with some templates
like Sheet being treated as components though we don't have actual
components with this name.
Another reason is have it separately to not include builder specific
code and dependencies into CLI and published websites. Template package
is defined as optional in peer dependencies meta.
In this PR migrated only Button and List as examples. There is still not
support for data sources and styles.
Added support for text placeholders in children
Here added new renderTemplate function which outputs simplified format
with arrays instead of maps and "children" array to describe roots.
This format is partial of webstudio fragment but does not implement it
fully.
Added support for top level fragment to allow having multiple roots.
We can start using testing utilities for components meta. It will
drastically simplify maintenance of components, already works pretty
well for tests.
Here just replaced @webstudio-is/sdk/testing with
@webstudio-is/template.
Oleg Isonen