Angular: Template literals inside render body break

[CKGrafico]

Not a huge problem but FYI its difficult to work with template literals in mitosis (and more if you're compiling to angular)

Code:

export default function Button(props: ButtonProps) {
  return <button class={`pa-button ${props.variant ? `pa-button--${props.variant}` : ''} `}>{props.children}</button>;
}

Result:

import { Component, Input } from "@angular/core";

@Component({
  selector: "button",
  template: `
    <button
      [class]="\`pa-button \${variant ? \`pa-button--\${variant}\` : ''} \`"
    >
      <ng-content></ng-content>
    </button>
  `,
})
export default class Button {
  @Input() variant: any;
  @Input() children: any;
}

The problem is that you're transforming to strings, the bundler cannot understand the template literal inside (this is not happening in react or vue)

Fix (obvious fix... hah)

export default function Button(props: ButtonProps) {
  return <button class={'pa-button ' + props.variant ? 'pa-button--' + props.variant : ''}>{props.children}</button>;
}

Result:

import { Component, Input } from "@angular/core";

@Component({
  selector: "button",
  template: `
    <button [class]="'pa-button ' + variant ? 'pa-button--' + variant : ''">
      <ng-content></ng-content>
    </button>
  `,
})
export default class Button {
  @Input() variant: any;
  @Input() children: any;
}

[PatrickJS]

yeah we need this. @samijaber is this a jsx parser issue?

[samijaber]

Thanks @CKGrafico. For the future, if you don't mind, please follow the Bug template! It includes a request for a mitosis.builder.io fiddle which makes it easier to immediately see what the issue is.

As for the issue: I see this works fine for every framework besides Angular, in which case it's just a bug in the Angular generator specifically. Do you see it anywhere else?

[CKGrafico]

Hello @samijaber the "non- transformation" is happening everywhere as you can easily check in the builder.

The only difference is that seems that in angular is the only one where you are taking all the html and wrapping in a string.

[samijaber]

the "non- transformation" is happening everywhere

@CKGrafico I must be misunderstanding you! I am not sure what you mean by "the non-transformation".

If I look at this Fiddle based on the code you provided, I see this output for React:

export default function Button(props) {
  return (
    <button
      className={`pa-button ${
        props.variant ? `pa-button--${props.variant}` : ""
      } `}
    >
      {props.children}
    </button>
  );
}

if I try to run this template literal in the console, I get the output that I would expect:

Am I confusing something here? Can you please provide me with what the correct output for React should be in your opinion? That way, I can clearly see how it's different from the above component.

[PatrickJS]

yeah we ran into this issue too I think it's more of an issue with certain generators

[CKGrafico]

Do the same test with angular and you will understand the problem :)

[samijaber]

Do the same test with angular and you will understand the problem :)

Right. Like I said earlier, I understand that angular has a bug! So we're saying the same thing: template literals inside of the render body work in general, but not in the case of Angular.

Worth noting that in Mitosis, we usually suggest that you put any sort of state inside of your useState hook, and avoid computing things inside of your render body. This will avoid edge-cases such as this and many others. See this fiddle, or:

import { useState } from '@builder.io/mitosis';

export default function Button(props) {
  const state = useState({
    get buttonClass() {
      return `pa-button ${props.variant ? `pa-button--${props.variant}` : ''} `
    }
    // or, if you want, you can also use a function
    getButtonClass() {
      return `pa-button ${props.variant ? `pa-button--${props.variant}` : ''} `
    }
  })

  return (
    <div>
      <button class={state.buttonClass}>{props.children}</button>
      <button class={state.getButtonClass()}>{props.children}</button>
    </div>
  );
}

[CKGrafico]

Oh clean solution thanks, I was guessing this but was not sure.. although you recommend to use always state or bateas a regular const for a static values?

[samijaber]

@CKGrafico You cannot use "regular consts" in Mitosis 😄. If you take a look at this example, you will see that we strip those away.

Any kind of function, state, value, or logic needs to love inside of useState, and cannot be in the naked render body.

[CKGrafico]

understood, thank you for the clarification!

[CKGrafico]

Maybe we can close this? For me it’s ok.

[samijaber]

Yeah, will close this for now since having state in useState takes care of the issue, and is how we want users to handle their component state.