Angular: useObjectWrapper gets generated with incorrect input for object

[lukjab71]

I am interested in helping provide a fix!

Yes

Which generators are impacted?

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

Reproduction case

Can't reproduce in fiddle, it probably uses previous version of Mitosis

Expected Behaviour

Object passed as prop in mitosis jsx is generated correctly in Angular component.

Actual Behaviour

When I use object in mitosis jsx for some prop, example:

tooltipPlacementOptions={{ "positions": ["left", "bottom", "bottom-left"], "offsets": { "left": {"topOffset": 0, "leftOffset": -24}, "bottom": {"topOffset": 24, "leftOffset": 0}, "bottom-left": {"topOffset": 24, "leftOffset": 0} } }}

in generated Angular code it gets generated as input to useObjectWrapper as incorrect js object:

[tooltipPlacementOptions]='useObjectWrapper({ "positions": ["left" }, { "bottom" }, { "bottom-left"] }, { "offsets": { "left": { "topOffset": 0 }, { "leftOffset": -24 } }, { "bottom": { "topOffset": 24 }, { "leftOffset": 0 } }, { "bottom-left": { "topOffset": 24 }, { "leftOffset": 0 } } })'

The first array is completely malformed and it makes the generated component impossible to use, as this throws compilation errors.

On very initial investigation it looks like there is some bug in function "handleObjectBindings" for Angular generator.

Additional Information

It looks like only versions 0.2+ are affected. I cannot reproduce this issue neither in Fiddle nor in version 0.1.7, which suggests that this is fairly new bug. "useObjectWrapper" is not generated at all in Fiddle or the mentioned older version.

[samijaber]

@lukjab71 can you provide a link to a fiddle containing the broken input, even if the output isn't broken? This will help us reproduce with a concrete example.

[samijaber]

cc @sidmohanty11

[sidmohanty11]

Hello @lukjab71 thanks for raising this issue. Fiddle uses the latest mitosis version only and you can reproduce this bug if you pass this as a prop to a custom component:

https://mitosis.builder.io/?outputTab=IYOw5grgNsBOQ%3D%3D%3D&code=JYWwDg9gTgLgBAbzgVwM4FMDKMCGN1wC%2BcAZlBCHAEQACARssADYAm6UAdMBAPQjAwIqYKioBuAFAT0AD0iw4bEjmRN4JZADsAxjG6a4AWQCeAYQqRN6TTAAUYcmFQBKRBLhxtETangBtTRwQdAAaOAwYADkg9ABdOABeFAxsPHRbKmx0ADd0KmdJdzgodBhkKANbIo8AHhZgbIA%2Bao84GoAJADEAIThBCDVgMAAFJhxtdGCbAHkwPW9UBIQkKkhheZ8qAC44PyomdBIYKjCqOggYQRAT6nPLigBaA6OqWNOIEhII0R2V5%2BPflRBGBpp8Its4AAGU7%2FUFfUoQh4AJgALIRTncrhCEECICCwQidqiYYcYHDwTtIejbhcrk9Sdjcfj4QC4MTqLCCayqUQiIRGsZkCQajwut1mq02jx6k0igUJIQgA%3D

Will work on a fix soon or please feel free to raise a PR if you would like to contribute, this happens because we are splitting the object with commas "," (we should instead be checking for startBracket - endBracket I think incase of a nested object). Also I don't think we should be using useObjectWrapper for all objects, we should only use it when we are spreading something inside a prop.

https://github.com/BuilderIO/mitosis/blob/main/packages/core/src/generators/angular/index.ts#L126