Unable to access "state" property within an object

[cadamsdev]

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

{
    state: {
        placement: 'some test'
    }
}

mitosis code

  function funct1(someObj) {
    const placement = someObj.state.placement;
  }

should keep "state" in the output

e.g react

  function funct1(someObj) {
    const placement = someObj.state.placement;
  }

Actual Behaviour

mitosis

  function funct1(someObj) {
    // output is missing .state
    const placement = someObj.state.placement;
  }

outputs (react)

  function funct1(someObj) {
    // output is missing .state
    const placement = someObj.placement;
  }

Additional Information

There is a workaround which is to do this

mitosis

  function funct2(someObj) {
    // workaround
    const someState = someObj.state;
    const placement = someState.placement;
  }

react

  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)

[samijaber]

Ah. I think that's because we haven't improved our state. prefix replacement logic to be better than just a regex.

Workaround is to call it something other than state. Fixing it will require replacing this:

https://github.com/BuilderIO/mitosis/blob/ebee81104cea791a08896a578800b339a8397201/packages/core/src/helpers/strip-state-and-props-refs.ts#L77-L83

with a babel transform. Will try to write up how soon

[cadamsdev]

Workaround is to call it something other than state. Fixing it will require replacing this:

In my scenario I don't have control over that because this object is provided by a 3rd party library see here

[samijaber]

Gotcha. Then we'll definitely need to fix this.

[samijaber]

What we want is replaceIdentifiers: https://github.com/BuilderIO/mitosis/blob/ebee81104cea791a08896a578800b339a8397201/packages/core/src/helpers/replace-identifiers.ts#L24-L35

But the problem is that replaceIdentifiers does not allow you to complete remove state. without replacing it with something. We have to provide a replacement. So we need to update that function so that it doesn't need to do that:

• instead of checking for Identifier nodes, it needs to check for the parent, which is a MemberExpression node
• it makes sure it's PARENT is not also a MemberExpression node (otherwise we will replace cases like obj.state.foo)
• if the object property of the MemberExpression has a value that matches our from, then:
  • if to exists, we do what we currently do (replace the object property with a new babel.identifier with the new value)
  • if to is undefined, then we replace the whole parent MemberExpression with its property

this AST explorer is very helpful to visualize this better: https://astexplorer.net/#/gist/4528525361ba7f6a4c7ecf12b6a70878/189cadebfe99437196acc5d8339709489cc6496f