## Description
closes#3872
- [x] - Builder support
- [x] - Publish support
## Steps for reproduction
Example
https://add-json.staging.webstudio.is/builder/8160e16d-5ab4-4249-86de-0c98a64526a3https://test-json-ki9yj.wstd.work/
## 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` file
Here split everything imported from react-sdk by published sites into
separate entry point react-sdk/runtime.
The result in ssg fixture is the following
```diff
- 429788 chunk-CuG10VAj.js
+ 370366 chunk-D4NWbWis.js
```
We want to replace n8n handler as proprietary code with injected
handler. The idea is to return resource request from this handler which
can be executed same way as user defined resource.
Closes https://github.com/webstudio-is/webstudio/issues/3789
Here stopped submitting webhook form with custom action to n8n and
requested directly from generated code. This has a few benefits
- self-hosted websites (vercel, netlify) no longer have to setup n8n to
support forms
- we can pay n8n for these executions no more
- user no longer have to unsubscribe from emails when setup custom
webhook
Ref https://github.com/webstudio-is/webstudio/issues/3789
Here changed a few things
- replace WebhookForm action prop with resource, which is sent with
hidden field instead of instance id
- prevented generating method and action in client side code
- generate "action" resource instead of form properties for server
action prop is replaced only inside cli to not require support in
builder yet, in the future this can be part of client migrations
Closes https://github.com/webstudio-is/webstudio/issues/3788
Here switched from attribute selector to classes when atomic styles are
disabled. This will let us get rid from data-ws-* attributes in
generated html.
Here made constants path easier to access from dynamic paths by
automatically replacing __CONSTANTS__ with actual relative path.
This is necessary for vike support which has folder based routes.
Here improved replacing placeholders in our templates. Before used some
relative path to stubs. Now use explicitly named placeholders like
`__CLIENT__`, `__SERVER__`, `__CSS__` and `__SITEMAP__`.
This will give more flexibility when support other frameworks, for
example vike.
These fields should have -webkit- prefix additionally to unprefixed
version to support more browsers.
- background-clip
- user-select
- text-size-adjust
## Description
Reload scripts in HTML Embed on dynamic pages
Closes#3581
## Steps for reproduction
Open
https://scripts-reload-saas-2-pgmkm.wstd.work/test/1
dynamic link clicks should cause `console.log` from IFrame
Anchor link should not.
## 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` file
## Description
Following code in Project Setting Custom Code
```
<script data-cf-beacon='{"token": "123"}'>
```
failed on build
## 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` file
## Description
Corresponding SAAS PR
https://github.com/webstudio-is/webstudio-saas/pull/298
(Must be renamed to "release.staging" on release to allow testing)
closes#3378
## Steps for reproduction
See fixtures now have working scripts.
Publish see saas supports script and language
https://rewrites.staging.webstudio.is/builder/f30da574-8022-433e-9a15-050792747b6f
.
## 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` file
## Description
Add simple protection against non js and jsdom bots
Idea is to add hidden js generated field on submit, and check that
matchMedia is working.
## Steps for reproduction
Go here
https://saas-form-rdlrc.wstd.work/
then check via curl
```bash
curl 'https://saas-form-rdlrc.wstd.work/?index=&_data=routes%2F_index' \
-H 'content-type: application/x-www-form-urlencoded;charset=UTF-8' \
-H 'referer: https://saas-form-rdlrc.wstd.work/' \
--data-raw 'ws--form-id=2TIgyB2vQViDMitiYiGSK&name=wewe&email=wewe&ws--form-bot=18f72a6'
curl 'https://saas-form-rdlrc.wstd.work/?index=&_data=routes%2F_index' \
-H 'content-type: application/x-www-form-urlencoded;charset=UTF-8' \
-H 'referer: https://saas-form-rdlrc.wstd.work/' \
--data-raw 'ws--form-id=2TIgyB2vQViDMitiYiGSK&name=wewe&email=wewe'
curl 'https://saas-form-rdlrc.wstd.work/?index=&_data=routes%2F_index' \
-H 'content-type: application/x-www-form-urlencoded;charset=UTF-8' \
-H 'referer: https://saas-form-rdlrc.wstd.work/' \
--data-raw 'ws--form-id=2TIgyB2vQViDMitiYiGSK&name=wewe&email=wewe&ws--form-bot=jsdom'
```
## 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
Turns out no-internal-imports did not forbid anything out of the box but
requires specifying specific folders to forbid. This does not scale well
and this rule mostly harms because requires either excluding each
package with submodules or suppressing it with comment.
Fixes https://github.com/webstudio-is/webstudio/issues/3289
Here added contact email fields to use it as recipient instead of owner
email. This way users can host sites for many clients and use default
webhook form behavior without implementing own n8n workflows.
Ref https://github.com/webstudio-is/webstudio/issues/3289
We need to put sensitive information into project meta so it should not
be sent to client as whole object. Here split it into separate exports.
- added siteName to client bundle
- added customCode to server bundle (should be fixed in saas too)
- removed projectMeta from loader and from server bundle
## 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/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
## Description
review per commit.
- Add system.url.origin to the props, rename publishedUrl ->
publishedOrigin
- Add system.url.origin to the published sites
Example on published site
https://saas-sitemapxml-x1g2n.wstd.work/
Example on builder
<img width="342" alt="image"
src="https://github.com/webstudio-is/webstudio/assets/5077042/bea3c9b4-c7dc-4936-a56a-fa33327ab6d0">
We use because as of now system is not available on canvas
<img width="448" alt="image"
src="https://github.com/webstudio-is/webstudio/assets/5077042/2eaa02b0-7566-492b-b98e-7af8a4f636e0">
## 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
We use tsconfig paths option only to resolve single constants module. It
requires additional plugin in vite and all other tools. At least in
generated published sites it can be just dropped.
Moved __templates__/route-template.tsx to app/routes/template.tsx
Here used new nesting rules to generate atomic styles. Replaced separate
atomic style sheet class with just a method to generate styles
atomically. Inheritance doesn't work well with private fields caz
require a lot of internals to be public.
## Description
## First Part
Here is only new local resource `/$resources/sitemap.xml` support
It can't be implemented as route for now as we have 2 issues:
1. Cloudflare does not allow server fetches from same domain
2. Remix does not have fetch like sveltekit allowing to bypass real http
roundtrip when fetching local resources
The idea is to write/use it like any route in case of anything of above
will be solved.
Most PR Size is generated new fixture page.
Move SiteData into the resource.
Here is example of rendering this resource using html.
Project to play:
https://sitemap.staging.webstudio.is/builder/cab934af-8615-411a-99c1-5822a98eac74
Published site:
https://sitemap-saas-t6j12.wstd.work/
<img width="785" alt="image"
src="https://github.com/webstudio-is/webstudio/assets/5077042/b62af518-37bb-4daa-9f57-9145b4c77364">
## Next steps:
- Add `origin` to the system, or even better add `system.hostUrl` with
origin, hostname etc
- Add xml element and hardcoded sitemap.xml page
## Steps for reproduction
1. click button
4. 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
## 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/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
Bumped remix to v2 everywhere in CLI, fixtures and builder. Caught a lot
of type stuff. Runtime seem to work without changes. Removed
@vercel/remix and had to upgrade `remix-auth` packages.
Unable to test netlify and vercel from monorepo and need to have sdk
remix with updated remix. So will test after packages release.
## 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
---------
Co-authored-by: istarkov <istarkov@gmail.com>
Here replaced LoaderArgs and ActionArgs with LoaderFunctionArgs and
ActionFunctionArgs to simplify bump with remix v2 which changed named of
these types.
This fixes the issue with looking for social image asset in server only
image assets array. Data is generated client side but only for social
image similar to favicon asset.
## Description
Set image height to "auto" to reduce layout shift, improving
compatibility across browsers like Safari.
Unlike "fit-content," "auto" preserves the aspect ratio when the width
exceeds max-width. (in Safari)
See
https://web.dev/articles/optimize-cls#best_practice_for_setting_image_dimensions
## 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
## 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/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
## 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/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
## Description
We allow console.info (btw we should also allow warn/error/info), we
only disallow console.log in the linter because that's what we use for
debugging.
## Steps for reproduction
1. click button
2. expect xyz
## 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/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
Here another case to potentionally optimize client bundle by moving data
used only in loaders, actions, meta and links into .server.tsx module to
guarantee splitting from client bundle.
Also removed circular PageData type dependecy between route and
generated modules.
Here moved forms properties, page meta and remix params into server
module as used only in loader and never executed on client. Especially
forms properties may contain user credentials and remix does not
guarantee it to not appear in client side bundle.
Also moved those into sdk as universal generators.
## Description
Fixed few small bugs, start show loading indicator before any other
tasks
## 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
Ivan Starkov
_LY_eDOEMEwtikKi5Pyld-.png?width=144&quality=100&format=auto&height=144&fit=pad){kind=link}