## 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.
Our designer bundle heavily bloated with not analyzable commonjs
generated by typescript.
The biggest problem comes from bundled icons library which esbuild
cannot tree shake because of cjs.
Another issue is broken code splitting. Packages in one piece are appear
in chunks and always loaded even with dynamic import and React.lazy.
To solve this I migrated each package to native node es modules.
Storybook and jest work almost without changes. Though it's not possible
to run remix in esm project (while still esm packages can be bundled for
ssr). And as a result designer jest failed because of cjs tests requires
from esm packages. As a solution I generated additional commonjs
artifacts in lib/cjs.
du -ck public/build
2336
1736
The new version got more readable snapshots, no longer depends jsdom and
has much better esm support (will be enabled in next PR).
Had to switch to babel to support typescript, react and esm for now.
Generated .props.json in react-sdk added huge amount of unused data to
app bundle.
Here I loaded only what's used, validated generated data and covered
meta with strict types.
As you can see this heavily reduced app size
du -ck public/build
2800
2336
Here "include" often have list of extensions and forgotten .tsx so such
modules are left unchecked. Replaced with just "src" which consider all
typescript extensions.
Ideally stop using tsc to build artifacts, switch to esbuild and remove
complex configuration from all tsconfig.json.
Eslint always had issues finding unused variables. And it's usually
required two more plugins beside builtin functionality to handle this
case.
Typescript has this builtin and handles all cases out of the box. Also
it works faster and more responsive in ide than eslint.
Ivan Starkov
