Optional chaining operator on props produces wrong output in angular

I am interested in helping provide a fix!

Yes

Which generators are impacted?

• All
• Angular
• HTML
• Qwik
• React
• React-Native
• Solid
• Stencil
• Svelte
• Vue
• Web components

Reproduction case

https://mitosis.builder.io/?outputTab=IYOw5grgNsBOQ%3D%3D%3D&code=JYWwDg9gTgLgBAbzgVwM4FMDKMCGN1wC%2BcAZlBCHAEQACARssADYAm6UAdMBAPQjAwIqYKioBuAFAT0AD0iw4bEjmRN4JZADsAxjG6a4AWQCeAYQqRN6TTAAUYcmFQBKRBLhwo6GMigHb7h5wADwswABuAHyBQSFh4TGxcMAsALwIDhBOAPxcLISJsdpMOKioAHI4IOjpmTkcqBTopiVlBUlBhXDRHR4sEOiocJoQ8ADu0ADWXcE88T1Bs%2FOBzpKEQA%3D

Expected Behaviour

export default function MyComponent(props) {
  const state = useStore({
    value: true,
    visibile: false,
  });

  const someRef = useRef(null);

  return (
    <div
      ref={someRef}
      className={classNames({ 'some-class': state.value })}
    >
      testing
    </div>
  );
}

should produce

@Component({
  selector: "my-component, MyComponent",
  template: `
    <div>
      <div [attr.id]="id" [class]="someClass">does not work</div>
    </div>
  `,
})
export class MyComponent {
  @Input() id: any;
  @Input() someClass: any;
}

Actual Behaviour

This

export default function MyComponent(props) {
  return (
    <div>
      <div
        id={props?.id}
        className={props?.someClass}
        
      >
        does not work
      </div>
    </div>
  );
}

produces

@Component({
  selector: "my-component, MyComponent",
  template: `
    <div>
      <div [attr.id]="props?.id" [class]="props?.someClass">does not work</div>
    </div>
  `,
})
export class MyComponent {}

but props is not defined anywhere.

Additional Information

If you don’t use optional chaining operator ?. works as expected.

[samijaber]

I am in the process of making the code that strips/replaces props. more intelligent, using babel ASTs. So we’ll wait for that to happen before digging into this any further, as it’s a lot priority issue.

[samijaber]

That’s fair. Was mostly pointing out that it’s never technically needed in the Mitosis code.

Fixing this should be as simple as updating this regex check:

https://github.com/BuilderIO/mitosis/blob/a762948e6014450d5b8b80c961b771df4568f847/packages/core/src/helpers/strip-state-and-props-refs.ts#L67-L71

to include an optional ?, e.g. /props(\??)\./