Bogdan Chadkin 4e9986d6e3 refactor: inline expressions into props (#2603) ...

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

2023-11-12 13:07:14 +03:00

..

webstudio-custom-template

fix: Fix cli types (#2592)

2023-11-09 23:05:22 +02:00

webstudio-remix-netlify-edge-functions

fix: Fix cli types (#2592)

2023-11-09 23:05:22 +02:00

webstudio-remix-netlify-functions

fix: Fix cli types (#2592)

2023-11-09 23:05:22 +02:00

webstudio-remix-vercel

refactor: inline expressions into props (#2603)

2023-11-12 13:07:14 +03:00