Ref https://github.com/webstudio-is/webstudio-designer/issues/628
Same issue as with selected outline. Styles were sent from detached
element when tag prop is changed.
Moving it to selected instance connector just works because styles
already applied when effect is called and it's remounted on every style
change.
Pnpm helped to find a few dependencies were missing in projects. Some
root deps with "*" versions restricted to simplify upgrade and prevent
unwanted upgrade while migrating to pnpm.
pnpm prevents access to jest and @types/jest from packages so we need to
explicitly install it. Though @types/jest is not officially maintained
and often late for months with new major which bloats node_modules with
two versions of jest transitives.
Here is alternative way to use official types. The only downside is
complains these types has less descriptions.
While migrating to pnpm I got an issue with our extends relying on
node_modules. pnpm have only symlinks and do not have hoisted
node_modules in the root.
Here I switched extends to package name as all tools can resolve it and
tweaked remix tsconfig to extend from packages folder instead of
node_modules.
Now image delete is shown immediately on delete.
PR_1 of #546 (simplifies logic and types for image thumbnail)
## Before requesting a review
- [ ] if the PR is WIP - use draft mode
- [x] 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
- [ ] 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
closes#605
`useAssets` now use Provider to be sure that state (server data load)
updates will not be lost.
- [ ] Set random upload errors locally, and test that even with errors
it will work.
Changed Client types from instersected server Asset types to include
Asset i.e.
was
```
type ReviewAsset = Asset & { status: 'uploading', ... }
```
now
```
export type UploadedClientAsset = {
status: "uploaded";
asset: Asset;
preview: PreviewAsset | undefined;
};
export type UploadingClientAsset = {
status: "uploading";
asset: Asset | undefined;
preview: PreviewAsset;
};
export type DeletingClientAsset = {
status: "deleting";
asset: Asset;
preview: PreviewAsset | undefined;
};
```
As previous behavior was hard to manage, were mistakes like adding
client-only props to the Asset type. It was hard to add additional props
like having preview and asset simultaneously (will be needed in next PR
to avoid image flicker)
Ref https://github.com/webstudio-is/webstudio-designer/issues/598
When tracking selected element from the root it's hard to get current
element which can be changed with props.
One more issue is storing element in state doubles amount of renders and
in selected instance logic we have a chain of state -> effect -> state
-> effect cases.
Here I store element in ref so we avoid rerender when set element to
state. Then tracked element rect is not written to state and sent to
designer directly.
Since the effect is unmounted along with element we do not need to use
mutation observer to track parent changes and can just recompute rect on
remount.
Will help with
https://github.com/webstudio-is/webstudio-designer/issues/628
treeId is stored in every props update which complicates data flow and
requires passing it everywhere. Here I instead pass it inside of
transaction.
This allowed us pass undefined in props data when select instance so we
no longer need to create empty instance props. Updates will create it
lazily.
Ref https://github.com/webstudio-is/webstudio-designer/issues/600https://github.com/webstudio-is/webstudio-designer/issues/608
- wrapped getComputedStyle with requestAnimationFrame to recompute some
styles correctly
- added default to color picker to avoid hiding while styles are
recomputed
- added placeholder to select and font-weight to avoid hiding while
styles are recomputed
- removed undefined check from font-family, already falls back to empty
field
These issues comes from the fact we compute default styles from dom
instead of data.
From MDN:
A modern best practice for static resources is to include version/hashes
in their URLs, while never modifying the resources — but instead, when
necessary, updating the resources with newer versions that have new
version-numbers/hashes, so that their URLs are different. That's called
the cache-busting pattern.
Absence of exact types, stupid bugs.
## 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?
- [ ] conceptual
- [ ] 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
The reason of use opaque types, as otherwise props like `value` reused
everywhere.
Implemented same as CssValueInputLogic - during input editing nothing
changed.
Error is shown on Enter click. Value resetted on blur.
Bogdan Chadkin
