Lit template vars are incorrectly escaped when using a svelte component

Jfoltz-adobe commented 3 months ago

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 commented 3 months ago

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 commented 3 months ago

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

samijaber commented 2 months ago

This is specific to class for some reason:

https://github.com/BuilderIO/mitosis/blob/b65d5282e927ed8019ce3c7fb94f7ecede025e6f/packages/core/src/parsers/svelte/html/element.ts#L251-L255

https://github.com/BuilderIO/mitosis/blob/b65d5282e927ed8019ce3c7fb94f7ecede025e6f/packages/core/src/parsers/svelte/html/element.ts#L76-L84

@raymondmuller is the one who wrote the Sveltosis parser, not sure what the reason was for this special behaviour 🤔

BuilderIO / mitosis