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
• Lit
• 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

[samijaber]

This is specific to class for some reason:

mitosis/packages/core/src/parsers/svelte/html/element.ts

Lines 251 to 255 in b65d528

	} else {
	// otherwise just assign
	code = '`' + code + '${' + binding + '}`';
	mitosisNode.bindings.class = createSingleBinding({ code });
	}

mitosis/packages/core/src/parsers/svelte/html/element.ts

Lines 76 to 84 in b65d528

	if (attribute.name === 'class') {
	code = mitosisNode.bindings.class?.code?.length
	? insertAt(
	mitosisNode.bindings.class.code,
	' ${' + code + '}',
	mitosisNode.bindings.class.code.length - 1,
	)
	: '`${' + code + '}`';
	}

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