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.
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.
## 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
## 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
## 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
Build of whole monorepo without cache takes 1min or more on my laptop.
tsc is very slow tool for this. Also having rootDir in tsconfig prevents
checking outside of src folder.
Here I added "scripts" package with "build-package" bin. It does both
esm and cjs builds. --watch flag support completely replaces tsup for
us.
Now full rebuild of monorepo without cache takes only 10s including
prisma-client, http-client and designer builds.
Right now our build and CI take a lot of time. 1:40min - 2min on CI and
1min locally. We spend time on vercel, on main CI, on publish and
locally.
At the moment in packages anything outside of src folder is not checked
because of rootDir.
We have to generate "references" field on precommit.
All these issues can be avoided if remove .d.ts generation completely
and specify sources in "types" field. This way we get zero build time
for types and can switch to other build tool (like esbuild) for .js
generation and get almost instant build on vercel, on main CI and on
publish.
Downsides
- it can be slower (actually not really caz we delete .tsbuildinfo cache
anyway and we can still generate it with incremental flag)
- it contraditcs recommended practices for published packages (we can
generate .d.ts in publish script only and use "types" as source
internally)
meta props are moved to *.ws.ts
Component removed from *.ws.ts
This allows to merge ws props with registered components props
`registerComponents` now are
- registerComponents(customComponents);
- registerComponentsMeta(customComponentsMeta);
_(Splitting will allow for code splitting to work.)_
Removal of `Component` (and then `Icon` prop) would allow serializing
*.ws.ts metadata between iframe and app designer
Next PR:
Move Icon into base64 or like.
publish/subscribe ws meta of registered components, so it can be reused
on the Designer side
I need this to pass props of registered components to Designer.
Boolean flags may have a lot of combinations which can lead to
unexpected bugs. Better approach is to categorize nodes with specific
behaviours.
Here I added 5 types
- container - can accept other components with dnd
- control - usually form controls like inputs, without children
- embed - images, videos or other embeddable components, without
children
- rich-text - can be edited on double click
- rich-text-child - formatted text fragment, not listed in components
list
Droppable link an link created in text editor have different
requirements. We should split them. In the next PR they will get
different types so we will avoid similar issues in the future.
https://github.com/webstudio-is/webstudio-designer/issues/494
This PR Renders this UI and, when adding tokens - renders CSS variables
on the canvas: It's behind a feature flag.
<img width="411" alt="Screenshot 2022-11-25 at 15 51 00"
src="https://user-images.githubusercontent.com/52824/204009859-81ed72c4-e758-4973-be49-c8c65e6b4661.png">
## 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
Co-authored-by: istarkov <istarkov@gmail.com>
- [x] - Image optimization component moved into standalone package
- [x] - generate-arg-types moved into standalone package - one issue
with current yarn https://github.com/yarnpkg/yarn/issues/4964 (you need
to delete root node_modules, then yarn and yarn build to make
generate-arg-types to work)
- [x] - move json into `__generated__` folder, (allow import json from
__generated__ folders only)
- [x] - Icons moved all gen into `__generated__`
- [x] - css-data generated content moved to `__generated__`
Current solution often fails with
> You cannot publish over the previously published versions
Here I added small script which compares committed version and version
on npm and publish if do not match.
All scripts are run by turbo. So publishing new package is just changing
package script now.
Bogdan Chadkin
