## 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-designer/blob/main/apps/designer/docs/test-cases.md)
document
- [ ] added tests
- [ ] if any new env variables are added, added them to `.env.example`
and the `designer/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-designer/blob/main/apps/designer/docs/test-cases.md)
document
- [ ] added tests
- [ ] if any new env variables are added, added them to `.env.example`
and the `designer/env-check.js` if mandatory
Before we checked looked for all asset ids in props, loaded assets and
replaced ids with resolved assets. This is all on server. We faced a few
problems with it.
- requires to maintain two versions of types: stored in db and resolved
for client
- easy to break project by writing to db wrong version
Here I provide to sdk both props and assets and resolve on client with
almost same amount of code.
Also replaced store setter with context, see
https://github.com/webstudio-is/webstudio-designer/issues/213
## 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-designer/blob/main/apps/designer/docs/test-cases.md)
document
- [ ] added tests
- [ ] if any new env variables are added, added them to `.env.example`
and the `designer/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-designer/blob/main/apps/designer/docs/test-cases.md)
document
- [ ] added tests
- [ ] if any new env variables are added, added them to `.env.example`
and the `designer/env-check.js` if mandatory
## Description
1. What is this PR about (link the issue and add a short description)
Update npm packages
## 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-designer/blob/main/apps/designer/docs/test-cases.md)
document
- [ ] added tests
- [ ] if any new env variables are added, added them to `.env.example`
and the `designer/env-check.js` if mandatory
Ref https://github.com/webstudio-is/webstudio-designer/issues/696
While normalized array of props give us flexibility with atomic updates
we still cannot use it for collaboration because patches are applied
with index in this array which may leads to unexpected results when two
users collaboate on the same tree, for example both put new prop and
edit it before synchronization by the same index, we are getting
conflict.
To avoid such issues we can switch client representation to maps. Almost
all data have ids to use in map as keys. Map makes collaboration almost
conflict free.
## Description
1. What is this PR about (link the issue and add a short description)
I want to update saas based on #928
## 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-designer/blob/main/apps/designer/docs/test-cases.md)
document
- [ ] added tests
- [ ] if any new env variables are added, added them to `.env.example`
and the `designer/env-check.js` if mandatory
Ref https://github.com/webstudio-is/webstudio-designer/issues/744
We are trying to co-locate data and simplify cloning/copying. Here I
migrated Breakpoints.values into Build.breakpoints.
This makes Build responsible to all data scoped to project build similar
to tree scope.
We get projectId defined for free and no need additional sql
maintenance.
## 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-designer/blob/main/apps/designer/docs/test-cases.md)
document
- [ ] added tests
- [ ] if any new env variables are added, added them to `.env.example`
and the `designer/env-check.js` if mandatory
## Description
1. What is this PR about (link the issue and add a short description)
Seems like this killed my dev expierence
https://github.com/remix-run/remix/issues/3123
Fixed in 1.12 gonna try, as otherwise I have 100% cpu load, and need to
stop `pnpm dev` before any changes
## 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-designer/blob/main/apps/designer/docs/test-cases.md)
document
- [ ] added tests
- [ ] if any new env variables are added, added them to `.env.example`
and the `designer/env-check.js` if mandatory
## Description
```bash
pnpm up -r -L '@remix-run/*'
pnpm up -r -L 'react-router-dom'
```
`react-router-dom` removed.
## 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-designer/blob/main/apps/designer/docs/test-cases.md)
document
- [ ] added tests
- [ ] if any new env variables are added, added them to `.env.example`
and the `designer/env-check.js` if mandatory
## Description
1. With all the new ideas and directions we don't need that initial
implementation
## 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-designer/blob/main/apps/designer/docs/test-cases.md)
document
- [ ] added tests
- [ ] if any new env variables are added, added them to `.env.example`
and the `designer/env-check.js` if mandatory
Ref https://github.com/webstudio-is/webstudio-designer/issues/696
We use store to render props in sdk components. Though it's easier to
maintain actual store in designer and provide necessary data to sdk.
Here I added utilities to inject computed store on module level. Now we
can get rid of legacy store and rewrite rest api to use normalized
props.
We want to decouple schema stored in db from sdk which generates a list
of components. Components will be added dynamically later so better
avoid component name enum.
After discussing with @kof figured we do not need to store preset styles
in db as after sdk upgrade components may still break.
Sdk versioning along with its hardcoded values will solve the problem
better.
Found zod allows to pass anything in transform without type checking.
This means we can easily get unexpected result. In this case we could
get undefined as asset.
As a solution I defined two versions of types, client side and stored in
db. Conversion is implemented on db routes side.
This makes data flow more clear and let us describe only two versions of
types instead of tree (in, out, client side).
Here is migration to new props type with more safe conversion to db
format. Added two versions StoredPropsItem for and PropsItem for client
and got rid of "as" casting.
InstanceProps is designed to store props per each instance which
requires a lot of sql updates on every props change.
Here moved per instance props into array with props for whole tree. This
way patches are safer to apply on large trees.
```
type PropsItem = {
id: string,
instanceId: string,
name: string,
required?: boolean,
type: 'number' | 'string' | 'boolean' | 'asset',
value: number | string | boolean
}
```
Props have a lot of logic to synchronize values. And after moving
updates into designer we get fresh state instantly and can simplify the
logic even more.
Turns out we store whole db representation in each props each per
instance item. This is wasteful and increase complexity of code.
```
{
[InstanceId]: {
id: UUID,
instanceId: InstanceId,
treeId: TreeId,
props: UserProp[]
}
}
```
Where instance id is duplicated and tree id is provided as patch
context. Id can be replaced with combination of instance id and tree id.
```
{
[InstanceId]: UserProp[]
}
```
Ref https://github.com/nanostores/nanostores
Nanostores is another open source implementation of reactive states.
Supports a lot of frameworks and provides useful utilities like computed
stores. Api is slightly different
```
store.get(): Value
store.set(value: Value)
```
`useStore` resolves only value so I temporary added custom `useValue` to
not rewrite whole project. Since we gonna use computed atoms it makes
more sense to invoke useStore where atom value is used instead of
reusable hook.
Ref https://github.com/webstudio-is/webstudio-designer/issues/696
Migrated updating and rendering to normalized styles. There are still a
few cases to migrate so left legacy root instance updates.
Styles are updated with immerhin consistently with whole project.
Can be tested changing styles and deleting breakpoints.
Ref https://github.com/webstudio-is/webstudio-designer/issues/696
Gradually starting to migrate to new styles format. Here replaced
getCssRules and getPresetStylesMap with getStyleRules and
getPresetStyleRules utilities.
Will reuse both at once on release.
Ref https://github.com/webstudio-is/webstudio-designer/issues/696
Here only migration and transforms for load and patch. Styles have the
following type and stored in Tree.styles column.
```
Array<{
breakpointId: string,
instanceId: string,
property: StyleProperty,
value: StyleValue
}>
```
Did migration with cursor pagination with 1000 trees per transaction.
Before we populated preset style on instance creation. This does not let
us to distinct preset style from local one.
As an option we could use preset style hardcoded in meta though this may
affect user when we change defaults.
Here I added presetStyle column in Tree table with the list of styles
for component.
```
Array<{
component: string,
property: string,
value: StyleValue
}>
```
Will style controls as grey for such styles.
Ref https://github.com/webstudio-is/webstudio-designer/issues/366
Parsed initial values to get correct unit instead of px for some
properties. There is still edge case with unitless values I'm gonna fix
in another PR.
Also bumped mdn-data and removed overrides fixed on mdn side.
## Description
Somehow we forgot to add object-position
## Steps for reproduction
1. select instance
2. go to sizes section in style panel
## Code Review
- [ ] hi @istarkov I need you to do
- conceptual review (architecture, feature-correctness)
## 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
- [ ] tested locally and on preview environment (preview dev login:
5de6)
- [ ] updated [test
cases](https://github.com/webstudio-is/webstudio-designer/blob/main/apps/designer/docs/test-cases.md)
document
- [ ] added tests
- [ ] if any new env variables are added, added them to `.env.example`
and the `designer/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-designer/blob/main/apps/designer/docs/test-cases.md)
document
- [ ] added tests
- [ ] if any new env variables are added, added them to `.env.example`
and the `designer/env-check.js` if mandatory
- all workspace dependencies are use with `workspace:^` protocol which
on publish is replaced with `^VERSION`. This will let us to upgrade
transitive packages in saas without shaman dancing around package.json
and lockfile.
- publish-to-npm script is replaced with `pnpm -r publish` which
recursively publishes all packages if version does not exist in npm
- dropped yarn lockfile
- setup corepack for pnpm and forbid yarn usage with "engines" field
- converted yarn lockfile into pnpm lockfile with `pnpm import` command
- replaced yarn with pnpm in scripts and github actions, had to use
custom cache to support corepack
This PR is only migration. Will use new pnpm features in other PRs.
```diff
du -ckd1 node_modules (yarn)
- 1125032
du -ckd1 node_modules/.pnpm
+ 857456
```
Install time (including cache downloads) in github actions reduced from
42s to 23s
## Before requesting a review
- [ ] if the PR is WIP - use draft mode
- [ ] made a self-review
- [ ] added inline comments where things may be not obvious (the "why",
not "what")
- [ ] what kind of review is needed?
- [x] conceptual
- [X] detailed
- [ ] with testing
## Test cases
- [ ] step by step interaction description and what is expected to
happen
## Before merging
- [ ] tested locally and on preview environment (preview dev login:
5de6)
- [ ] updated [test
cases](https://github.com/webstudio-is/webstudio-designer/blob/main/apps/designer/docs/test-cases.md)
document
- [ ] added tests
- [ ] if any new env variables are added, added them to `.env.example`
and the `designer/env-check.js` if mandatory
Ref https://github.com/webstudio-is/webstudio-designer/issues/651
We want to normalize our tree structure and need to distinct text
children with ids. Now instead of string its respresented as
```
{
type: 'text',
value: string
}
```
This also gives us a little type safety because typeof child ===
'string' ignores when child cannot be string.
This PR moves most of the Storybook configs into a single, private,
package that can be imported/required by your packages. It aims to keep
the config the same for all of them as much as possible - so, for
example, all of the packages are now using Webpack 5 in their
Storybooks.
Ivan Starkov
