We had db data validation enabled before but it made api requests very
slow. We disabled this validation and seems like there is no need to
enable again.
Also dropped all zod list types of our data because validation was the
only use case.
## Description
Seems like duplication were broken like 3+ months
https://discord.com/channels/955905230107738152/1137586643130396762
## 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:
5de6)
- [ ] updated [test
cases](https://github.com/webstudio-is/webstudio-builder/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
Here added support for callbacks or event handlers on components which
basically can do only assignment to variables for now with extended
(with assignment operator) syntax of expressions.
Ref https://github.com/webstudio-is/webstudio-builder/issues/1529
Here embed template will add scope to always be shown only within
instance. Before we have data sources UI the only use case is deleting
data sources along with instances.
Also found jsep enable ternary by default and forbid for now caz there
is no generation implemented anyway.
Ref https://github.com/webstudio-is/webstudio-builder/issues/1529
Here introduced two types of data sources into "variable" and
"expression". First stores the value, the second only executable code.
Execute expressions now output results of all expressions so we could
access values globally with "computed" store
Embed template references now allow to define both variable reference
and expression.
Ref https://github.com/webstudio-is/webstudio-builder/issues/1529
- added data sources store
- added dataSource type to props
- insert data sources from template (prop.dataSourceReference allows to
bind several props to the same data source)
- convert to static prop on copying (simplification until requirements
are clear)
Ref https://github.com/webstudio-is/webstudio-builder/issues/1529
Here initial setup for data sources which are will be used to maintain
runtime stores. It has unique id, name for ui, type and defaultValue to
initialize store with it.
For now added only string and boolean types which are necessary for Form
component. In the future will be extended with more types.
## Description
Add `latestBuild` for each entry in publish dialog
Now we are tracking publish stat for each domain.
This information is needed to show checkboxes in publish design (next
PRs).
2 new Views were created.
To get the latest build by project + domain
To get the latest build for wstd.xx domain
Publish status is shown per domain (as not every domain would be
published each time)
<img width="362" alt="image"
src="https://github.com/webstudio-is/webstudio-builder/assets/5077042/b4e0357a-63f5-47ba-a119-59ef1adf81d2">
During publish all buttons are disabled as per design
<img width="348" alt="image"
src="https://github.com/webstudio-is/webstudio-builder/assets/5077042/94720bd3-4bda-488c-81f7-71ea9ba2d530">
Also added tooltip on publish button (not in design)
<img width="366" alt="image"
src="https://github.com/webstudio-is/webstudio-builder/assets/5077042/c764a785-aea9-487b-a480-642410293ee3">
## 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:
5de6)
- [ ] updated [test
cases](https://github.com/webstudio-is/webstudio-builder/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
Closes https://github.com/webstudio-is/webstudio-builder/issues/1672
## Description
We need to show a confirmation dialog when user hits delete to explain
what will happen
## Steps for reproduction
1. add a token
2. click delete
<img width="906" alt="Screenshot 2023-05-31 at 15 25 43"
src="https://github.com/webstudio-is/webstudio-builder/assets/52824/eb7eb635-3c07-4bdc-bfdc-6e5cd7983d73">
## 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-builder/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
## Description
At publish we would allow to check domains we want to publish. As of now
we publish all project domains.
But already pass them from UI, so future move would be just UI changes,
without touching API
- [x] - Fix "no access to project domains using service api call"
## 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:
5de6)
- [ ] updated [test
cases](https://github.com/webstudio-is/webstudio-builder/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
## Description
The idea is to deploy by `buildId` instead of `projectId`.
Every build now can have `deployment` metadata params (currently
`domains` only, but in the future can be any additional metadata, like
vars etc)
Publish is simplified (-2 workers), the same trpc as for other saas api
is used to publish, see `cms.publish`
(also local development is simplified as edge-api at saas works on local
dev perfectly)
isDev and isProd are not needed anymore. Any published build has
`deployment` metadata, and various builds can be active now on different
domains.
Build clone now seriously faster as no parse/serialize steps involved at
all.
Partial index `CREATE UNIQUE INDEX "Build_dev_index" ON "Build"
("projectId") WHERE "deployment" IS NULL;` created so we could be sure
that no more than 1 dev build exists.
createBuild and cloneBuild are now splitted, and seriously simplified
## 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:
5de6)
- [ ] updated [test
cases](https://github.com/webstudio-is/webstudio-builder/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
Ref https://github.com/webstudio-is/webstudio-builder/issues/1664
Here added Build.version which is updated on every patch. The client
should provide latest received version to compare with stored in db.
When version mismatched user is suggested to reload.
## Description
How it looks. (Not everything aligned or have features like in design)
https://github.com/webstudio-is/webstudio-builder/assets/5077042/349c7fae-afd8-478d-9eba-701b002f0fd4
Most API methods return `{ success: true } | {success: false, error:
string}` because in the future they need to be moved into server
workflows, and do not exist or return anything.
## Steps for reproduction
Run locally, at localhost I've created a fake domain creation API, to be
able to test UI.
## 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:
5de6)
- [ ] updated [test
cases](https://github.com/webstudio-is/webstudio-builder/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
We batching transactions though each transaction and each namespaace in
it loads build data, applies patches and writes to db. This makes
patches do a lot of connections to db within single request.
Here each patch request loads and updates build only once and apply
patches of all transactions to intermediary state.
https://user-images.githubusercontent.com/52824/235469260-2a212e73-0815-4a4b-a02d-d98cf56c7a88.mp4
## Description
Closes https://github.com/webstudio-is/webstudio-builder/issues/1407
## Steps for reproduction
1. click edit breakpoints
2. test all possible inputs
## Code Review
- [ ] hi @rpominov , I need you to do
- conceptual review (architecture, feature-correctness)
- detailed review (read every line)
- test it on preview
- [ ] @TrySound please check if you have any concerns regarding removing
breakpoints and styles
## 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-builder/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
Ref
https://remix.run/docs/en/1.15.0/guides/constraints#server-code-pruning
Remix use NAME.server.ts extension to enforce omitting module from
client bundles. Though we heavily used `/server` in packages which had
no affect and blocked us in using a few node apis which were not
polifilled with empty modules while bundling for client.
Here I replaced `/server` with `/index.server` and removed all legacy
server entry points which are not longer necessary with new typescript
resolution.
## Description
1. Made `href` always present (# is used when not set, similar to
Webflow). Fixes#1380
2. Added "Section" option in URL Control. Closes#993
3. Added "ID" prop that is visible in all components. Closes#991
4. Closes#1475
## Steps for reproduction
1. Add ID prop to an instance
2. Add a link that references that instance by ID
## Description
On the server for web-studio landing it shows from 230 to 600ms for
loading now.
parseBuild time on the server varies from 18ms to 100+ms
locally sometimes I see
<img width="1306" alt="image"
src="https://user-images.githubusercontent.com/5077042/232835019-402dc3d4-876a-4eed-a716-5bdcf355fe6b.png">
## Steps for reproduction
## 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:
5de6)
- [ ] updated [test
cases](https://github.com/webstudio-is/webstudio-builder/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
InstancesItem is newer type introduced separately for gradual migration.
Not all legacy tree Instance is migrated away so we can finally use
better naming across whole system.
## Description
- Canvas behavior should be exactly as in Webflow now - responsive
canvas.
- No constraints for resizing, you can switch to different breakpoints
when you change the canvas width just like in preview
## Not done in this PR
- [ ] breakpoints dropdown menu redesign
- [ ] on-canvas resizable handles
- [ ] flash-animate breakpoints list when breakpoint is switched through
resize
- [ ] flash-animate left and right borders when breakpoint is switched
- [ ] gravity of resize handle dragging when reaching next breakpoint
- [ ] vertical labels with @media example that matches current
breakpoint
- [ ] migrate min-width 0 breakpoints to base?
- [ ] hide outline while changing size
- [ ] ensure there is never both min and max in one media
## Todo
- [x] draggable positioning calc
- [x] shortcuts for zoom
- [x] sync width and selected breakpoint
- [x] remove scale
- [x] fix mobile-first breakpoints
- [x] tabbable toolbar items
- [x] icon for base
- [x] fix flicker
- [x] After breakpoint delete/add CascadeIndicator doesn't refresh
- [x] fix when there is no base, min-width 0 should have still a full
width
## Steps for reproduction
1. click button
3. expect xyz
## Code Review
- [ ] hi @TrySound, @istarkov , 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-builder/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
## 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:
5de6)
- [ ] updated [test
cases](https://github.com/webstudio-is/webstudio-builder/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
## 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:
5de6)
- [ ] updated [test
cases](https://github.com/webstudio-is/webstudio-builder/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
## Description
To enable copy-pasting instances from webflow without creating new
breakpoints, we decided to switch by default to the breakpoints webflow
uses.
User can still switch to mobile-first breakpoints like we had before
once we have a new breakpoints editor, but then when copy/pasting from
webflow they will get the missing breakpoints added if the copied styles
are using those.
I had to temporarily hide the breakpoints editor behind a feature flag
because we need the new editor to allow editing min or max width, so
instead of adjusting this current UI, we need a new one.
I think its not a big deal right now to not have the breakpoints editor,
webflow never had one.
## 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-builder/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
This option forces all type imports to have "type" specifier even though
there are other value imports.
TS 5 forces it when new verbatimModuleSyntax is enabled.
## Description
This is in preparation for supporting webflow breakpoints which use a
combination of min and max width
## 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-builder/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
If this looks good, I will not merge it right away, but open a PR in
`webstudio-saas`
## Description
- #993
1. Added a new type of Prop `{type: "page"}`, similar to `{type:
"asset"}`
2. Added `pagesStore` to `ReactSdkContext` (will need to make changes to
`webstudio-saas` as well to support this)
3. Added a new control type `{control: "url"}` and corresponding
`<UrlControl>`
4. Updated Link components:
- set `{control: "url"}` for the `href` prop
- made them support `{type: "page"}` as `href`
- simplified / cleaned up
## Steps for reproduction
1. Add a link
2. Set a page as `href` in props panel
3. Try clicking on the link in preview mode
Ref https://github.com/webstudio-is/webstudio-builder/issues/1116
Slot is copy pastable part of the tree which is always in sync. Kinda
like primitive components.
The idea is the following. Slot is copy pasted as any other instance
though its children are preserved as is without cloning with new ids.
This lead to the problem with multiple slot children. While copy paste
they are preserved as is though when add new child to slot, the other
instance of it will not get new child.
To workaround this we add another Fragment component which groups all
children into single one and new children are always reflected in all
slot copies.
Newly created instance does not propagate to client because we no longer
reload on navigating to new page.
Here moved page and root instance creation to client with patches.
## Description
Backgrounds part 2. ref #877
- [x] - remove repeat section under gradient part
- [x] - info Icon for gradient "code"
The floating panel, gradients support.
<img width="508" alt="image"
src="https://user-images.githubusercontent.com/5077042/224417159-22a27ffd-6460-4d97-8891-f14a9a3331a3.png">
No drag, no hide, no smart insert
## 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:
5de6)
- [ ] updated [test
cases](https://github.com/webstudio-is/webstudio-builder/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
We are moving pages logic to client side to support collaboration and do
less work on server. Here migrated validation to client side. Server
validation will be removed with endpoints in following PR.
## Description
ref #877
As in this comment part 1
https://github.com/webstudio-is/webstudio-builder/issues/877#issuecomment-1441897685
<img width="647" alt="image"
src="https://user-images.githubusercontent.com/5077042/223226959-3e9b1832-07aa-425b-afcf-27f7cdafa85c.png">
You can add/remove layers. View/Hide not working. No drag.
## Steps for reproduction
Create new project. (existing could not work well because of migration)
Create background layers. Add images. Set various background layers
params.
## Code Review
- [x] 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:
5de6)
- [ ] updated [test
cases](https://github.com/webstudio-is/webstudio-builder/blob/main/apps/builder/docs/test-cases.md)
document
- [x] added tests
- [ ] if any new env variables are added, added them to `.env.example`
and the `builder/env-check.js` if mandatory
---------
Co-authored-by: Oleg Isonen <oleg008@gmail.com>
Need to cleanup all page related data to prevent bloating project with
garbage data. Delete already prevent reloading so its safe to clear data
on client.
## Description
Closes https://github.com/webstudio-is/webstudio-builder/issues/1143
Allows to select an instance and change name via settings > name
Used in navigator, outlines, props panel (design untouched, will be
updated soon)
## 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-builder/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
Ref https://github.com/webstudio-is/webstudio-builder/issues/1116
We moved all data to build and tree table no longer necessary.
- fixed writing instances on page creation (broke in my previous PRs)
- pages are no longer cloned on build cloning and preserve their ids
between builds
## Description
ref #877
As a part of above I'm changing
```
export const ImageValue = z.object({
type: z.literal("image"),
value: z.array(z.object({ type: z.literal("asset"), value: ImageAsset })),
});
```
to
```
export const ImageValue = z.object({
type: z.literal("image"),
value: z.object({ type: z.literal("asset"), value: ImageAsset }),
});
```
In favour of using in next PRs
```
const ArrayValue = z.object({
type: z.literal("array"),
value: z.array(z.union([UnitValue, KeywordValue, UnparsedValue, ImageValue])),
});
```
For now, to not break compatibility with existing code I'm not
converting to an array immediately.
Just style types simplification.
'array' type is not now supported on db level, parse/serialize will not
work. Will be done in following PRs
## Steps for reproduction
1. click button
2. expect xyz
## 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-builder/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
Ref https://github.com/webstudio-is/webstudio-builder/issues/1116
We want to have freedom in manipulation and reusability of tree parts so
gonna merge tree data of all pages into build.
Here migrated instances. Tree no longer have any data. Will cleanup in
the next PR.
Ref https://github.com/webstudio-is/webstudio-builder/issues/1116
Before we assumed the first instance in the list of instances is the
root. Though we are gonna introduce slots and for this have to combine
instances of all pages into single array. So there can be many roots in
one list.
So now we gonna specify root instance id on page. treeId will be removed
once instances are migrated to Build table.
## Description
- rename default mobile to base
- set initial canvas width to the max size within the lowest breakpoint
boundary
## Steps for reproduction
1. create new project
2. see that by default you are on base breakpoint
3. see that the initial width is at max width in the before the first
next breakpoint begins (767px)
## Code Review
- [ ] hi @istarkov , 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-builder/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
Bogdan Chadkin
