## 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:
0000)
- [ ] updated [test
cases](https://github.com/webstudio-is/webstudio/blob/main/apps/builder/docs/test-cases.md)
document
- [ ] added tests
- [ ] if any new env variables are added, added them to `.env` file
## 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:
0000)
- [ ] updated [test
cases](https://github.com/webstudio-is/webstudio/blob/main/apps/builder/docs/test-cases.md)
document
- [ ] added tests
- [ ] if any new env variables are added, added them to `.env` file
## Description
Error toasts in components instead of failing
## 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:
0000)
- [ ] updated [test
cases](https://github.com/webstudio-is/webstudio/blob/main/apps/builder/docs/test-cases.md)
document
- [ ] added tests
- [ ] if any new env variables are added, added them to `.env` file
## 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:
0000)
- [ ] updated [test
cases](https://github.com/webstudio-is/webstudio/blob/main/apps/builder/docs/test-cases.md)
document
- [ ] added tests
- [ ] if any new env variables are added, added them to `.env` file
## 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:
0000)
- [ ] updated [test
cases](https://github.com/webstudio-is/webstudio/blob/main/apps/builder/docs/test-cases.md)
document
- [ ] added tests
- [ ] if any new env variables are added, added them to `.env` file
## Description
https://issues.chromium.org/issues/403708813
## Steps for reproduction
Type in Debug Console
`ScrollTimeline`
for Chrome 134.0.6998.164 >= version >= 134.0.6998.0
This would be non native code
## 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:
0000)
- [ ] updated [test
cases](https://github.com/webstudio-is/webstudio/blob/main/apps/builder/docs/test-cases.md)
document
- [ ] added tests
- [ ] if any new env variables are added, added them to `.env` file
## 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:
0000)
- [ ] updated [test
cases](https://github.com/webstudio-is/webstudio/blob/main/apps/builder/docs/test-cases.md)
document
- [ ] added tests
- [ ] if any new env variables are added, added them to `.env` file
## 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:
0000)
- [ ] updated [test
cases](https://github.com/webstudio-is/webstudio/blob/main/apps/builder/docs/test-cases.md)
document
- [ ] added tests
- [ ] if any new env variables are added, added them to `.env` file
We have a fixture which is used for testing generated features.
Historically we use it as vercel template fixture.
Here migrated it to react-router, removed vercel stuff from it and
renamed it to webstudio-features.
## Description
ref #2645
Proof of Concept for the Animation Component Using ScrollTimeline
For FF and Safari `scroll-timeline-polyfill` is used.
SSR Support https://animate.development.webstudio.is/playground
Storybook Part 1.
https://6382151c8b47d4399fb9fc69-limlyrmprp.chromatic.com/?path=/story/sdk-components-animation-scroll-animations--in-out
Next steps:
- Add stories with additional examples i.e. closest usage, images etc.
https://scroll-driven-animations.style/
- Add support to view animations
- Add view animations examples
- Add enter/leave actions and animations support
- Builder UI
- Add lottie, rive etc compatibility (should work through
context.getAnimations()[0].effect.getComputedTiming().progress)
## 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:
0000)
- [ ] updated [test
cases](https://github.com/webstudio-is/webstudio/blob/main/apps/builder/docs/test-cases.md)
document
- [ ] added tests
- [ ] if any new env variables are added, added them to `.env` file
## Description
Allows Head component
Hidden under `headSlotComponent` flag
Vercel fixture now have a HTMLRewriter example. Improves development.
## Todo In Next PR
- Head Title support
- Icons
- Allow reset `as` field
- [x] - BG is now white always
- [x] - It's shown as fixed element to not break layout
## Implementation details
This component has more priority above PageSettings meta tags
e.g. If some tag exists in PageSettings and in HeadSlot the HeadSlot
wins
## Steps for reproduction
Create HeadSlot
<img width="674" alt="image"
src="https://github.com/user-attachments/assets/b41f878e-b8fd-48b4-9204-5f079dc1719b"
/>
- [x] - Visit
https://webstudio-fixture-project-a-0su3o.wstd.work/head-tag
check server response.
<img width="433" alt="image"
src="https://github.com/user-attachments/assets/efb7de0d-c23e-4b0d-b775-170e6b61648e"
/>
See `og:title` is not duplicated.
- [x] - Check Elements Panel
<img width="565" alt="image"
src="https://github.com/user-attachments/assets/5742c3a8-47b1-4877-9b01-528eb3afffe5"
/>
See no duplicated. All tags exists.
- [x] - Click Home.
See no meta tags are in Elements panel from `/head-tag` page
- [x] - Click back button
<img width="555" alt="image"
src="https://github.com/user-attachments/assets/2b166249-5fd0-4d0f-a451-ff3c1b4e62b5"
/>
See all meta is rendered and is not duplicated.
## 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:
0000)
- [ ] updated [test
cases](https://github.com/webstudio-is/webstudio/blob/main/apps/builder/docs/test-cases.md)
document
- [ ] added tests
- [ ] if any new env variables are added, added them to `.env` file
## Description
1 commit = fixtures
2nd commit = code changes
3rd = size changes
ref #3994
Publish result:
https://webstudio-fixture-project-a-0su3o.wstd.work/content-block
See fixtures for generated code.
## 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:
0000)
- [ ] updated [test
cases](https://github.com/webstudio-is/webstudio/blob/main/apps/builder/docs/test-cases.md)
document
- [ ] added tests
- [ ] if any new env variables are added, added them to `.env` file
Here replaced esbuild with vite for building sdk-components packages.
Vite can be configured to output preserved structure instead of bundling
everything into single module which hurts treeshaking a lot.
sdk-components-react
./fixtures/ssg/dist/client: 284kB (-24kB)
./fixtures/webstudio-remix-netlify-functions/build/client: 368kB (-28kB)
./fixtures/webstudio-remix-vercel/build/client: 1004kB (-8kB)
sdk-components-react-radix
./fixtures/ssg/dist/client: 284kB (-4kB)
./fixtures/webstudio-remix-netlify-functions/build/client: 372kB (0kB)
./fixtures/webstudio-remix-vercel/build/client: 900kB (-108kB)
Similar to react-sdk/runtime added another entry point to sdk package
which includes all the stuff imported on published sites to reduce js
size.
./fixtures/webstudio-remix-netlify-functions/build/client: 392kB
(-176kB)
Here improved our checks. No longet rely on "checks" script but run
"test" and "typescript" scripts from each package in monorepo.
Would also make each package less boilerplaty.
## Description
preview-worker-deployment
Node.js 16 actions are deprecated. Please update the following actions
to use Node.js 20: actions/checkout@v3, pnpm/action-setup@v2.2.4,
actions/setup-node@v3. For more information see:
https://github.blog/changelog/2023-09-22-github-actions-transitioning-from-node-16-to-node-20/.
## 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/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
There is no use for us from turbo. Pnpm does the same as runner. Caching
we still were not able to setup. Builds are superfast anyway. Checks are
actually faster since github tuned their actions.
Before we run two configurations of typescript on CI. Though this leads
to very long checks. Here I enabled "typecheck" script to generate dummy
.d.ts files to enable additional checks.
```diff
pnpm run -r typecheck (serial)
- 239.13s
+ 262.94s
pnpm turbo run size-test build checks dts --force (parallel locally)
- 2m30.609s
+ 1m47.622s
- pnpm turbo run size-test build checks dts --force (Ci)
- 6m 5s
+ pnpm turbo run size-test build checks --force (Ci)
+ 3m 22s
```
While turborepo does not work for us we can try to solve long checks
time with builtin caching. Eslint provides similar one to prettier we
already use.
```
pnpm -r lint
51.53s
pnpm eslint . --ext .ts,.tsx --max-warnings 0
18.10s
pnpm eslint . --ext .ts,.tsx --max-warnings 0 --cache (with cache)
1.82s
```
In this PR I removed all lint scripts in packages and added global one
in the to github workflow. It saves like 30s on my laptop because pnpm.
Already stored cache makes linting almost instant.
Also bumped all eslint dependencies.
## Description
- actions/cache@v3 for pnpm moved to setup-node
- Added on `pull_request`
- restricted push on main.
- Added build cancelation.
- Same behaviour on checkout is preserved as was on push see
```
- uses: actions/checkout@v3
with:
ref: ${{ github.event.pull_request.head.sha || github.sha }} # HEAD commit instead of merge commit
```
## 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
This fixes the bug introduced in my previous PRs and reproducable only
by running dts generation. Here added it to checks so we could avoid
broken publishes while releasing.
Here add check to have formatting always applied in case git hook was
ignored or not run for some reason.
Cached prettier for whole project is run within 2-3 seconds.
- 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
This publishes all available Storybooks to Chromatic - this happens per
push so you will always be able to check out the current state of things
in those Storybooks.
Since you have a lot of Storybooks... this isn't quite convenient. I
plan to combine all of those Storybooks into a single one (a single
storybook that will reference all of those smaller ones). I'd like to do
that in a follow-up PR though - let's now focus on getting this up and
running.
Oleg Isonen