## 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
## 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
Show a warning banner when a redirect path matches the current page
path, indicating the redirect will override access to the page.
Changes:
- Add PanelBanner component with warning variant to page settings
- Implement findMatchingRedirect utility to detect redirect conflicts
- Show contextual warning with link to Redirects settings section
- Add comprehensive tests for redirect conflict detection
Code quality:
- Replace 'return undefined' with 'return' per style guide
- Use 'return null' for React components returning nothing
- Changed safe mode detection from .has() to strict === 'true' check
- Made safemode a required boolean parameter in builderPath/builderUrl
- Added 'Open in safe mode' option to dashboard project menu
- Added safe mode indicator button with shield icon in topbar
- Safe mode now prevents all script execution in HTML embeds
- Added isSafeMode to React SDK context
- Added test coverage for safe mode in HTML embed component
## 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
## Description
- Provide a key variable next to collection item to access array index
or object key
- Add .length autocomplete for arrays
- Add coercion rules when validating bindings, so you can bind a number
to a text attribute or textContent without errors/warnings
## 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
## Description
Now user can pass to collection an array like this (this worked before):
[{a: 1}] and also object like this {key: {a: 1}}.
What this means is that now you can just iterate over objects returned
from some api, you don't need arrays-only any more.
As an item, the value of each object key will be provied.
Ref https://github.com/webstudio-is/webstudio/issues/5389
1. **Title and meta tags (specified in page settings) are no longer
removed when page is loaded.** For this I switched to the same
components we use in cloud template.
2. **Avoid duplicating custom code**. Both server and client rendered
the same custom code and react instead of hydrating just duplicates
them. To fix this I removed custom code from client side so all scripts
and styles are rendered only once.
3. **Removed origin from og:image url.** Turns out it is not necessary
to have full url for og:image to work, all services are capable to
resolve url. We can remove it at least for static websites.
4. **SSG rendered fake url (https://url) in ld-json** which can have
unexpected results in search engines. Removed it, google should be able
to provide necessary url by itself.
Ref https://github.com/webstudio-is/webstudio/issues/3632
This is big one. So I switched to html elements whole forms section in
components. Though here I introduced some deviation from specification
**Textarea**
Initial value is represented as text content
```html
<textarea>content</textarea>
````
Though it is trickier to manage text content as state and all frameworks
rely on value property of textarea dom interface.
**Select**
Similar story. There is no value attribute and state is represented by
selected boolean attribute on options
```html
<select>
<option value="value1" selected></option>
<option value="value2"></option>
</select>
```
We replace selected attribute on option with value attribute on selected
when paste.
So basically all form elements are using "value" and "checked"
attributes which can be easily mapped to html and all frameworks.
Proper fix for https://github.com/webstudio-is/webstudio/pull/5211
Now props meta are available in component generator and can be used to
figure if prop is defined by component or comes from html attributes.
Added same logic in canvas and component generator.
Also got rid from no longer necessary registeredComponentPropsMetas
store since all props are described by component meta.
Ref https://github.com/webstudio-is/webstudio/issues/3632
Here enabled converting class -> className for all components with tags.
Now it does not affect anything though later will unlock using html
attributes instead of component props.
Also got rid from huge map with react properties and replaced it with a
set of proper aliases.
Here added lists of attributes from html and aria specifications for
future Element component.
Html provides an easy to navigate table with all types with relations to
specific tags and descriptions.
Aria list with types is extracted from aria-query library. Though
descriptions are parsed from specification. In the future we will use
more aria-query data to navigate specific roles.
All attributes types are tested with react types
You can see generated data in
- packages/html-data/src/__generated__/attributes.ts
- packages/html-data/src/__generated__/aria.ts
Succeeds https://github.com/webstudio-is/webstudio/pull/2341
## 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
## Description
Error toasts in components instead of failing
## 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
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>
Here got rid from auto namespacing meta.constraints and
meta.indexWithinAncestor to unlock using components from other sdk
packages.
Now package prefixes should be explicitly specified in meta though with
the help of proxy.
Though exports are still need to prefix automatically when install
package.
## Description
Show eye icon (in primary color) if Node is Animating because of
Selection or if it's Pinned.
<img width="757" alt="image"
src="https://github.com/user-attachments/assets/41597955-6974-49c4-96a9-708480e4d644"
/>
## 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
## Description
https://animations.wstd.work/
Breakpoints Example
See on narrow screen animation is disabled.
<img width="699" alt="image"
src="https://github.com/user-attachments/assets/f464fdf3-f57a-4cf7-91a1-beb355f8a5bd"
/>
## 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
User reported in discord.
Radix components like accordion does not open first item by default when
use with content block. The reason was in our default detection.
We used indexes within ancestor and when put item inside of content
block template it gets 0 but not rendered.
Here improved the logic to reset index when render inside of block
template.
<img width="837" alt="Screenshot 2025-03-01 at 21 14 09"
src="https://github.com/user-attachments/assets/788df39a-b7c5-466b-a80e-09cc40de9e3f"
/>
## 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
Closes https://github.com/webstudio-is/webstudio/issues/4897
Added "placeholder" field to component meta to signal the instance
accepts should not be insertion target. This reverts us to previous
behavior even with empty instances.
Also slightly refactored placeholder rendering to use attr() instead of
extra css variable.
Here added support for generating global system variable with CLI. It's
not available yet in builder though.
Global system not presented in data but instead can be referenced with
`$ws$system` in expression instead of encoded id like
`$ws$dataSource$id`. Legacy page system variable will continue to work.
User got 500 on published site. Turned out collection got invalid data
(not array). We need to keep site working in such cases, missing piece
will be more intuitive than 500 on whole website.
Ref https://github.com/webstudio-is/webstudio/issues/4768https://github.com/webstudio-is/webstudio/issues/4753
User can paste expression with not defined variable and should get it
saved in case of accidental closing popover.
Now such expressions can be executed in builder and will be compiled
with undefined instead of variables in published sites.
In the future we need to add global diagnostics to let users find such
places faster.
Also fixed a couple of ui issues
- react error about using button inside of button in data variables list
- react error about using unknown middlewareData prop from floating-ui
<img width="307" alt="Screenshot 2025-01-27 at 16 30 58"
src="https://github.com/user-attachments/assets/2ddc9ead-33a2-4438-b641-6943d7472f7e"
/>
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.
## 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
## Description
Allows Head component
Hidden under `headSlotComponent` flag
Vercel fixture now have a HTMLRewriter example. Improves development.
## Todo In Next PR
- Head Title support
- Icons
- Allow reset `as` field
- [x] - BG is now white always
- [x] - It's shown as fixed element to not break layout
## Implementation details
This component has more priority above PageSettings meta tags
e.g. If some tag exists in PageSettings and in HeadSlot the HeadSlot
wins
## Steps for reproduction
Create HeadSlot
<img width="674" alt="image"
src="https://github.com/user-attachments/assets/b41f878e-b8fd-48b4-9204-5f079dc1719b"
/>
- [x] - Visit
https://webstudio-fixture-project-a-0su3o.wstd.work/head-tag
check server response.
<img width="433" alt="image"
src="https://github.com/user-attachments/assets/efb7de0d-c23e-4b0d-b775-170e6b61648e"
/>
See `og:title` is not duplicated.
- [x] - Check Elements Panel
<img width="565" alt="image"
src="https://github.com/user-attachments/assets/5742c3a8-47b1-4877-9b01-528eb3afffe5"
/>
See no duplicated. All tags exists.
- [x] - Click Home.
See no meta tags are in Elements panel from `/head-tag` page
- [x] - Click back button
<img width="555" alt="image"
src="https://github.com/user-attachments/assets/2b166249-5fd0-4d0f-a451-ff3c1b4e62b5"
/>
See all meta is rendered and is not duplicated.
## 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
Closes https://github.com/webstudio-is/webstudio/issues/4749
Classes were merged without considering ternaries like this
```js
"cls1" + " " + condition ? "cls2" : ""
```
which made condition part always truthy
Fixed by generating template literal instead of concatenation operator.
Reimplemented generate-stories command in sdk-cli
to not rely on sdk components and load metas
and templates dynamically according to files convention.
Oleg Isonen