Using setter inside the useStore gives MissingSemicolon error in build

[angeltrevinov]

I am interested in helping provide a fix!

Yes

Which generators are impacted?

• [ ] All
• [ ] Angular
• [ ] HTML
• [ ] Preact
• [ ] Qwik
• [X] React
• [ ] React-Native
• [ ] Solid
• [ ] Stencil
• [ ] Svelte
• [ ] Vue
• [ ] Web components

Reproduction case

https://mitosis.builder.io/playground/?code=JYWwDg9gTgLgBAbzgVwM4FMDKNrrgXzgDMoIQ4AiAAQCNlgAbAE3SgDpgIB6EYHVYKgoBuAFCj0AD0iw4LIgENkDeEWQA7AMYxO6uAFkAngGEykdenUwAFGFJhUASkSi4cTRHWp43hTDwAvCgY2LjWCK5ucAD66gog6ABccADkKQA0kW4A5ujwcQnWzhFRUVxccACqGHAwABZ4vv5wAG4KDMh4wERwGDDpcBD1rADugnjDcHYQYK3tnXDdvXmZpW7lg8NQYzWT8koqcx14ED0p2Ogt6ClZUVB5yFB6TehssfF4AD6fU%2FaobAUvj9zv4rikxKV8Kson04IDrIDirc3C83oC4EFARColDIvhHGJIvcYI89NZbgAeJjAFoAPmRcApdQATLSABLoBgMCADBCowH4ClcFn0taM4DqMDIeCeACSkulAQQ1kulhgzgCtLg1n5HwxcFVVjYMAUUFyMDYbWOjkIVs6St1CUIXFFUSF1LpkQJonwQA

Expected Behaviour

I expect the component to build correctly with a setter function using the following example from the documentation

export default function MyComponent(props) {
  const state = useStore({
    _name: '',
    get name() {
      // Use the state value if set, otherwise the prop value if set,
      // otherwise the default value of 'Steve'
      return state._name || props.name || 'Steve';
    },
    set name(name: string) {
      state._name = name;
    },
  });

  return (
    <div>
      <h2>Hello, {state.name}</h2>
      <input onInput={(event) => (state.name = event.target.value)} value={state.name} />
    </div>
  );
}

https://mitosis.builder.io/docs/components/#state

Actual Behaviour

When I build, I get the following parsing error

Could not parse file: <component-file-path>
<project>/node_modules/gluegun/build/index.js:15
    throw up;
    ^

SyntaxError: unknown: Missing semicolon. (1:11)

> 1 | let _ = set name(name: string) {
    |            ^
  2 |   state._name = name;
  3 | }

  reasonCode: 'MissingSemicolon',
  loc: Position { line: 1, column: 11, index: 11 },       
  pos: 11

Node.js v20.15.1

Additional Information

I was trying to create a computed value using set

[samijaber]

Mitosis currently only supports getters in its useStore, not setters.

What does your code achieve that can't be achieved with just a name property like this?

https://mitosis.builder.io/playground/?code=JYWwDg9gTgLgBAbzgVwM4FMDKNrrgXzgDMoIQ4AiAAQCNlgAbAE3SgDpgIB6EYHVYKgoBuAFCj0AD0iw4LIgENkDeEWQA7AMYxO6uAFkAngGEykdenUwAFGFJhUASkSi4cTRHWp43hTDwAvCgY2LjWCK5ucOoKIOgAXHB2EA5sMXFwAD6ZcADk2OgAbui5ADSR%2BI5ikVDoMMhQetaRbgA8TMCFAHwtUa0AFgBMXQAS6AwMEKWIvv5psej4rVxDPVF9wOpgyPCeAJJbOwEI1kWWMM4BXXDWs%2BjzGUFnVmwwClAA5nVshQoMyOhHIRfv90Mc7g9FnAuGs%2BlwOt1IlVRPggA%3D%3D%3D

[angeltrevinov]

This example is part of the Mitosis documentation, if setter is not supported then I think it should be removed from the docs.

https://mitosis.builder.io/docs/components/#state

[samijaber]

@angeltrevinov Thanks for pointing that out. Apologies, that example is indeed inaccurate.