Ref https://github.com/webstudio-is/webstudio/issues/5223
Navigating within preview didn't work well because we relied on order of
creation and more inclusive routes like `/*` could match before
`/my-page`.
Here fixed it with routes sorting. The algorithm is very simplified but
covers our usecases within builder.
We detect cname flattening by registrar though when nameservers are
rerouted legal registar stays the same.
So instead we check if nameservers are cloudflare and can use cname
flattening.
Ref https://github.com/webstudio-is/webstudio/issues/2651
When convert tailwind breakpoints to webstudio breakpoints our algorithm
can find holes and will stop conversion. Though this will create
mobile-first breakpoints which users do not expect.
Here I added workaround to specify "unset" value on property when
tailwind breakpoints has holes. Here's examples
**sm:opacity-20** - here the hole is in the beginning, opacity: 0.2 can
be defined on base breakpoint but we need to fill with something
`max-width: 479`
**max-sm:opacity-10 md:opacity-20** - here the holr is in the middle, we
have `max-width: 479` and base breakpoint but no `max-width: 767`
<img width="335" alt="image"
src="https://github.com/user-attachments/assets/94d621c1-527a-4608-8529-53971af26b8c"
/>
<img width="321" alt="image"
src="https://github.com/user-attachments/assets/fd232773-dad5-4fde-8748-1d13645a4adf"
/>
## 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
Added editor config file to ensure that line endings are the same
regardless of the OS (This was causing problems for Windows + Docker)
## Steps for reproduction (Windows)
1. Clone webstudion builder and open with vs code, docker, etc.
2. every single file will have a git status of "m" (modified) due to
changed line endings
## Code Review
hi @kof, I need you to take a look and make sure this is an ideal fix
It seems to work great on my end.
fixes#5079
## Description
this fix was to allow case sensitive path in redirects (specifically the
"old-path" field), for users migrating from legacy system this could be
important.
1. What is this PR about (link the issue and add a short description)
## Steps for reproduction
1. click on project setting
2. go to redirects tab
3. input a path with uppercase letter(s) in the old-path field and the
page you want to redirect to
4. This should work without any error
## 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
- [x] made a self-review
- [x] added inline comments where things may be not obvious (the "why",
not "what")
## Before merging
- [x] 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/2651
Added command to let users paste tailwind fragments.
- all classes are converted to local styles
- breakpoints are adapted to desktop-first if possible
- images are automatically uploaded
- added official entrijs with types and mimimal runtime (no
dependencies)
- automatically add `www.` prefix to non-cloudflare root domains
- enabled automatic www redirect to setup with entri (though does not
work seamlesly, namecheap requires ssl certificate, godaddy requires
manual setup by user)
- toast error when click on "Configure automatically" on free plan
## 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
<img width="348" alt="image"
src="https://github.com/user-attachments/assets/85ff2cb9-9cdf-4283-b932-c03423fcc02e"
/>
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
Checks:
- show
- display
- visibility
- opacity
- rel attribute
## 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
Trying to explain that user can change the styles and position and
everything about that badge.
## 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/2651
There is an edge case which will prevent from converting breakpoints.
When there is no base breakpoint there is no value to fill with inverted
space. Though it should be very rare usecase. Need to test how often it
will create new breakpoints.
## Description
<img width="351" alt="image"
src="https://github.com/user-attachments/assets/1afca5f0-da0f-4726-a29a-cd9ed2403967"
/>
## 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
So we can know how well this is working
## 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
We have html element mutations in a few places and each can add ~250ms
of repaint time on large projects. Here I got rid of it in two places
1. Collapsed logic enforced document height to preserve scroll position.
Instead I created an absolutely positioned div which enforced scroll
where collapsed elements are reset.
2. Scroll into view logic defined position absolute on scroll container.
Though it's not necessary on html element so just ignored it.
Ref https://github.com/webstudio-is/webstudio/issues/3632
Here changed insertion logic to wrap rich text with span element instead
of Text component when drop into it. This is the last place which
creates legacy components.
Refactored tests with jsx to make them more readable.
Ref https://github.com/webstudio-is/webstudio/issues/3632
Here unflagged element component in components panel and html paste.
Additionally
- migrate link template to html element
- added :local-link state to links which is replaced with
[aria-current=page] when css is generated, sadly not yet supported in
any browser
- migrated many templates from legacy components to html elements
- put tailwind paste behind flag
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.
Bogdan Chadkin