fix: fix web-component tag name transform issue

[rqzheng2015]

Description

Fix the web-component tag issue mentioned in #1303

Issue Reason

The babel transform will automatically identify the "-" as an operator, and add a space before and after it.
So when it met a tag name such as swiper-container provided by web-components, it will transform the tag name as swiper - container.

How to Fix

We need to replace ' - ' with '-' in the babel transformed code to fix this issue.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
mitosis-fiddle	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jan 4, 2024 6:41am

[nx-cloud]

☁️ Nx Cloud Report

CI is running/has finished running commands for commit 3d812d5. As they complete they will appear below. Click to see the status, the terminal output, and the build insights.

📂 See all runs for this CI Pipeline Execution

---

✅ Successfully ran 4 targets

• nx build @builder.io/mitosis-fiddle
• nx run-many --skip-nx-cache --target build --parallel 4 --exclude */e2e-alpine,*/e2e-angular,@builder.io/mitosis-fiddle,@builder.io/talk-*,@builder.io/example-apps
• nx build @builder.io/eslint-plugin-mitosis
• nx build @builder.io/mitosis

---

Sent with 💌 from NxCloud.

[samijaber]

This solution is too extreme/broad: it will replace every single occurrence of - with - across every code block evaluated by the Mitosis compiler. That includes all props, state, event handlers, etc. This means that even comments inside functions will be transformed by this change.

I don't mind having a .replace() approach, but it would need to be localized to only the JSX tag name.

[samijaber]

• If you run yarns snapupdate in mitosis/core, you will see how much this code change impacts generated code.
• you also need to yarn run fmt:prettier to lint this file.

[rqzheng2015]

I see, thanks @samijaber. I will soon submit a new patch for this PR.

[samijaber]

I just commented a better solution to this problem here: #1303 (comment)

Thanks a lot for taking this on!

[rqzheng2015]

Hi @samijaber, I have commited new changes based on your advices, and have added snapshot and unit test. Please hava a look when you have time.

[rqzheng2015]

Hi @samijaber! Please check the pr if you have the free time, thanks.

[nx-cloud]

☁️ Nx Cloud Report

CI is running/has finished running commands for commit f4b2c92. As they complete they will appear below. Click to see the status, the terminal output, and the build insights.

📂 See all runs for this CI Pipeline Execution

---

✅ Successfully ran 4 targets

• nx build @builder.io/mitosis-fiddle
• nx run-many --skip-nx-cache --target build --parallel 4 --exclude */e2e-alpine,*/e2e-angular,@builder.io/mitosis-fiddle,@builder.io/talk-*,@builder.io/example-apps
• nx build @builder.io/eslint-plugin-mitosis
• nx build @builder.io/mitosis

---

Sent with 💌 from NxCloud.

[samijaber]

Wonderful fix. Well done. Thanks for the contribution! 🎉