Ref https://github.com/webstudio-is/webstudio/issues/2532
Here introduce the new expression editor as a replacement to code
editor. It is implemented with codemirror and will improve DX of our
bindings and cms usage.
- autocomplete now completes nested objects in variables
- javascript syntax is highlighted in expressions
- json values are formatted as multiline text
- autocomplete shows fields value/type
Additionally improved a couple of things
- json objects are wrapped with parentheses `({ param: "value" })` to be
treated as object instead of block in highlighter
- objects and arrays are rendered as "object" and "array" in variables
list for cleaner UI
Integrated in builder only for variable value and json prop value. Will
require additional logic to integrate as expression editor.
<img width="559" alt="Screenshot 2023-12-19 at 12 13 28"
src="https://github.com/webstudio-is/webstudio/assets/5635476/c3a3907a-9c08-4343-a1a7-ed12dbdb2404">
<img width="239" alt="Screenshot 2023-12-19 at 12 12 24"
src="https://github.com/webstudio-is/webstudio/assets/5635476/777a2ac5-db79-46c7-8438-538f03edcbf7">
Closes https://github.com/webstudio-is/webstudio/issues/2696
broke this when refactored props computing, normalizing props should
always be called on whole props list to allow getting id prop from other
pages and instances and copmute hash.
Ref https://github.com/webstudio-is/webstudio/issues/2532
Here added new schema type "Resources" to contain configuration of
requests to services. Their first use case is referencing from variable
to store loaded data.
For now added only client side generation. Later add support for server
code generation as part of remix loaders.
## Description
NPM Release 0.123.0
## 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
seems like `// return` was commented for local testing
## 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
Make sure browser support message clarifies cross-browser support for
produced sites
Closing
https://github.com/webstudio-is/webstudio-community/discussions/89
## Steps for reproduction
1. open in any non-chromium browser to see the message
## 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
## Description
- Change "Pro" badge according to design
https://www.figma.com/file/xCBegXEWxROLqA1Y31z2Xo/%F0%9F%93%96-Webstudio-Design-Docs?node-id=8821%3A11999&mode=dev
- Add `Upgrade to Pro` menu item
See lostpixel changes too
ref #2661
## 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
closes#2676
## 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
Ref https://github.com/webstudio-is/webstudio/issues/2532
Here added dataSource.type = 'parameter' without initial value because
value is always provided by context. It let us fix a few issues with
variables without complicating logic.
- prevent deleting parameter variable (collection item) in variables
panel
- allow changing only name of parameter variable
- show only name in the list of variables
- fix removing expression from collection data
- hide item parameter from collection variable list
- prevent editing parameter value from props
- make collection unstylable
## Description
ref #2661
We use GENERATED columns in our database to simplify field extraction
from events. This avoids using JSON operators in our views. We store the
entire event data. In our SaaS, there's a script that runs once to
populate the eventData. We've also updated the n8n schemas in our SaaS
to automatically fill eventData. This setup makes it quicker to add new
events or update logic in n8n schemas.
## Steps for reproduction
## 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
Use same well tested utility to slice and insert its copy for copy
paste. Moved most utilities inside of instance plugin and added more
tests for it.
## Steps for reproduction
1. play with copy paste
Fix https://github.com/webstudio-is/webstudio/issues/2516
Here added "duplicate" button to page settings and implemented logic
based on recent instances slice utilities.
## Steps for reproduction
1. open pages
2. click on page
3. click "copy" button
Ref https://github.com/webstudio-is/webstudio/issues/2532
Here added a "core" collection component to support iterating over json
arrays.
There is a lot of room for unification of all this logic though would
require building reactive tree abstraction.
Canvas automatically renders stub component for collection to make it
droppable. We can do the same for slot component.
Slot and Fragment eventually will go to "core" components too.
Added json/parameter prop types to embed template to support collection.
Fixed loosing focus while typing in json prop.
## Steps for reproduction
1. Drop collection component
2. play with it
Part of https://github.com/webstudio-is/webstudio/issues/2516
Here added new copy implementation. There are 2 differences
- it does not change existing instances and not change their children,
we will need this to copy pages
- it handles cross-project copy of portals (slots) properly, now each
portal content is inserted separately if the root does not exist and
skips otherwise
- much better covered with tests
## Steps for reproduction
1. try duplicating form and change form state prop
2. try duplicating form error message and change form state prop
## Description
Ref #2661
This allows us to extract posthog (and probably other trackers) cookies
distinct_id for the user on the server side
And then using aliasing to use in n8n schemas
https://posthog.com/docs/product-analytics/identify#alias-assigning-multiple-distinct-ids-to-the-same-user
See corresponding n8n schemas in saas repo
## 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
Succeeds https://github.com/webstudio-is/webstudio/pull/2136 in more
simple way. Active states are preresolved for everything except local
styles. And local styles shown as overwritten when defined state is
active.
Fixes
https://discord.com/channels/955905230107738152/1177028091227418654
## Steps for reproduction
1. create form component
2. choose error state
3. set background red
4. go to error state in style source menu
5. should be "remote" label
6. set background green
7. go to stateless style source
8. reset background color
9. should be "overwritten" label
## 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
SaaS has new n8n schema "Stripe Customer Subscription Deleted"
Other schemas updated accordingly
Now unsubscribe is handled by our system
## 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
Apply project owner's plan features to the projects shared via link
## Steps for reproduction
Need to be merged to test (see migrations)
After merge:
Create project shared link.
Open in incognito.
## 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
fixes#1966
The steps to reproduce are in the linked issue. The popover shouldn't
close when the name in the input field is empty.
@taylornowotny i would like you to check this one for the error state
please, the Input field didn't have a red outline for error as defined
in the figma file. I added it now, So, in order to check the effects of
this in other place. It would be great if you can check it once.
---------
Co-authored-by: Oleg Isonen <oleg008@gmail.com>
## 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
Add additional fields to transaction log, so we can create billing
portal for users to unsubscribe/change etc of subscriptions
Plus:
- [x] Allow unlimited domains to all "pro" users
- [x] Add subscriptions link to users with subscriptions (created by n8n
schema on click)
<img width="213" alt="image"
src="https://github.com/webstudio-is/webstudio/assets/5077042/08d40835-3273-4ca9-a0e3-8a4f7614da93">
- [x] Allow admin link sharing
## 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
Ref https://github.com/webstudio-is/webstudio/issues/2532
Here refactored props values computing to reuse in both canvas and
settings panel and support future collections which need to provide
different values for same variables.
Grouped whole logic and covered with tests.
## Testing
- check image src is working
- check link switch page in preview
## 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
All the PR's related to transitions are merged now.
#2581#2572#2538#2511
## Before requesting a review
- [x] made a self-review
- [x] added inline comments where things may be not obvious (the "why",
not "what")
## Description
- Prisma way of creating migrations comparing local db with schema model
is super error prone
- Adding 'preview' | 'production' or 'local' to n8n webhooks otherway no
way to host hooks together
## 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 have experimented quite a bit before and now apparently on windows
the canvas is still blurry and removing all the hacks apparently solves
it. All of this is according to @itsNintu because he is the only one
with windows on the team, I don't see a good way to test it, because the
blur is very subtle and you won't clearly see it remote browsers.
## Steps for reproduction
1. open builder, resize canvas within workspace (100% scale)
2. resize canvas bigger than workspace, so that scale is lower than 100%
3. see that at no point in time canvas is blurry
## Code Review
- [ ] hi @istarkov , 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 replaced scripts injection with special body override which already
includes those scripts.
This would simplify the logic with collections support.
Ref https://github.com/webstudio-is/webstudio/issues/2532
Here first part for collection support. Collections are generated as
```tsx
list.map((item, index) => <Fragment key={index}></Fragment>)
```
Added new "parameter" prop type to represent "item" which always refers
to variable. "parameter" reflects same semantics as js functions where
in function call it is argument `fn(1, 2, 3)` and in function definition
it is parameter `function fn(a, b, c) {}`.
Collection children are always wrapped with fragment to let having more
than one child and always pass key to avoid react warnings.
Ref https://github.com/webstudio-is/webstudio/issues/2532
We need json control in settings panel to support editing current value
of variables for example for collection data.
Here tweaked props logic and fixed a few bugs related to switching prop
type based on variable type.
Testing:
- type something in body id
- add this expression to body id `{ id: 1 }`
- remove expression
- add variable with `{ id: 1 }`
- select variable
- remove expression
## 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
Also add default asset path to remove env variables from setup
## 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
Make image path consistent with worker
Changed vercel env for this branch `ASSET_BASE_URL = "/cgi/asset"`
## 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
Ref https://github.com/webstudio-is/webstudio/issues/2532
Collections will introduce nested scope within same component and some
expressions at component scope will not be able to access collection
item. For example
```ts
const PageComponent = () => {
let [value, set$value] = useState('')
let show = value === 'error'
let arialabel = item + ' label'
return <Form>
<ErrorMessage data-ws-show={show}></ErrorMessage>
{list.map(item =>
<Button aria-label={arialabel}></Button>
)}
</Form>
}
```
So the easiest way to workaround it without complicated scope selecting
is just inline all expressions into props.
```ts
const PageComponent = () => {
let [value, set$value] = useState('')
return <Form>
<ErrorMessage data-ws-show={value === 'error'}></ErrorMessage>
{list.map(item =>
<Button aria-label={item + ' label'}></Button>
)}
</Form>
}
```
## Steps for reproduction
1. Create `Form`
2. Try to change `state` prop
## 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
Bogdan Chadkin