Lit template vars are incorrectly escaped when using a svelte component

[Jfoltz-adobe]

I am interested in helping provide a fix!

Yes

Which generators are impacted?

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

Reproduction case

https://mitosis.builder.io/playground/?code=DwZwxgTglgDgLgPgFAAIVgPYDsR3QGwEMQQA5QgWwFMUBeFAcgBNCIBrBgbiWAHpxo8ZDyZQAbgWIhaAbzBES5agF9kaNKHwY8vZH1FjkQA%3D

Expected Behaviour

Should compile correctly

  render() {
    return html`

          <div class="{${state.className}}"><my-slot></my-slot></div>

        `
  }

Actual Behaviour

  render() {
    return html`

          <div class="{`${state.className}`}"><my-slot></my-slot></div>

        `
  }

Additional Information

"@builder.io/mitosis": "^0.3.20",
"@builder.io/mitosis-cli": "^0.3.20",

In the playground the svelte templates don't appear to be working

[Jfoltz-adobe]

Looks like the issue is in this file: https://github.com/BuilderIO/mitosis/blob/main/packages/core/src/generators/lit/collect-class-string.ts

It looks like some of the dynamic class strings include string template markers. I was able to get this working locally by updating: https://github.com/BuilderIO/mitosis/blob/main/packages/core/src/generators/lit/generate.ts

All I had to do was strip string template characters like this:

collectClassString(json)?.replace(/`/g,'');

So I'm guessing something changed in the class string data that started including template tags. The simplest fix was just to strip them but it might be a sign of a bigger regression.

[Jfoltz-adobe]

https://mitosis.builder.io/playground/?outputTab=G4VwpkA%3D&code=DwZwxgTglgDgLgPgFAAIUBsCmcUDsCGAtpigLwoBEAynJgG6YUDcSwA9ONPMqwCZR0UYdPhAhSAbwLEAvsjTAouGAFccw0eIpLVcCigBGS3gC46%2BdCsyTpmGSjbyUACUzp0AewCEKAJJD8XBQIFSCCOAE3AE8UJRQAJUx8MDgAGhQANSt0qgZ0WnSARQB3KABrdMDeFEJAmMIPCBIAMwgiTGLGspAvVjZ%2BOh5QOCisJwA6HTUUCVQ0IQ9PCBNgzF4WNBk%2BkBGxoA