Using template string in render function makes angular fail - Githubissues

BuilderIO / mitosis

Write components once, run everywhere. Compiles to React, Vue, Qwik, Solid, Angular, Svelte, and more.

https://mitosis.builder.io

MIT License

12.33k stars 546 forks source link

Using template string in render function makes angular fail #836

Open cadamsdev opened 1 year ago

cadamsdev commented 1 year ago

I am interested in helping provide a fix!

Yes

Which generators are impacted?

[ ] All
[X] 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%2BcAZlBCHAEQACARssADYAm6UAdMBAPQjAwIqYKioBuAFAT0AD0iw4bEjmRN4JZADsAxjG6a4AWQCeAYQqRN6TTAAUYcmFQBKRBLhwo6GMigHb7h5wADzAmmDIMIFBing4ALT4qHosALwIAAYAJAgOEE4cmjgg6ITxYREwGYTRcDwAfIHOkoRAA%3D%3D

    <input
      data-testid={`${props.name}-input`}
    />

however string concatenation works

    <input
      data-testid={props.name + '-input'}
    />

Expected Behaviour

You should be able to use template strings within mitosis components.

Actual Behaviour

This will throw errors.

Additional Information

No response

samijaber commented 1 year ago

It seems from looking around that we need to modify the template string to either:

become a string concatenation
use the {{ }} template syntax for Angular

https://stackoverflow.com/a/46684470/1520787

It might be easier to accomplish the latter within our generators. 🤔