Unable to access "state" property within an object
- Dominant language
- TypeScript
- Stars
- 14.4k
- Forks
- 671
- PR merge metrics
- No merged PRs in 30d
Description
### I am interested in helping provide a fix!
Yes
### Which generators are impacted?
- [X] All
- [ ] Angular
- [ ] HTML
- [ ] Qwik
- [ ] React
- [ ] React-Native
- [ ] Solid
- [ ] Stencil
- [ ] Svelte
- [ ] Vue
- [ ] Web components
### Reproduction case
https://mitosis.builder.io/?outputTab=E4UwhgxgLkA%3D&code=KYDwDg9gTgLgBAE2AMwIYFcA29noHYDGMAlhHnALICeAwhALaR7B4wAUYUEYAzgJRwA3gChhcOLkIkyE%2FEQCMbHg2AB5AEYArASPHiA9PrgR0MMKbjEecelZ7E8AczgA6HjFQxgYvQTLu4MExUAmB6FngAXjhlcI1NNw8vFyCQsIiAbh8AX1FxSSJScgKYACYlFXidHwMjAHdoAGtULnwEGrg%2FPADY4ABlJOA4aN74xM9gLL1O%2F3hU0PDWYZiVAYmU4IXMnLy4KGAYdChyNg6AHgRiADc4fQA%2BHz4s7KA%3D%3D%3D
### Expected Behaviour
When there's a javascript object structured like this e.g
```js
{
state: {
placement: 'some test'
}
}
```
mitosis code
```tsx
function funct1(someObj) {
const placement = someObj.state.placement;
}
```
should keep "state" in the output
e.g react
```tsx
function funct1(someObj) {
const placement = someObj.state.placement;
}
```
### Actual Behaviour
mitosis
```tsx
function funct1(someObj) {
// output is missing .state
const placement = someObj.state.placement;
}
```
outputs (react)
```tsx
function funct1(someObj) {
// output is missing .state
const placement = someObj.placement;
}
```
### Additional Information
There is a workaround which is to do this
mitosis
```tsx
function funct2(someObj) {
// workaround
const someState = someObj.state;
const placement = someState.placement;
}
```
react
```tsx
function funct2(someObj) {
// workaround
const someState = someObj.state;
const placement = someState.placement;
}
```
This seems to be an issue with all outputs (I see this same issue with angular as well)
Contributor guide
Research direction
Open the linked Mitosis reproduction and compare the generated React and Angular output with the expected object access. Trace how the expression `someObj.state.placement` is handled across the generators. Done means `state` is preserved in the output for all affected generators, including the reported workaround case.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- angular, react, typescript
- Domain
- compilers
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 38/100