Duplicate extensions when using multiple UI frameworks

[totto2727]

Hello! Thank you for providing us with a great tool!

I often use Astro and sometimes use several UI frameworks together.

Example: Astro + React (tsx) + Qwik (tsx)

I really like the ability to output multiple framework files from a single CSS file.

However, files output as tsx will have the file name {css basename}.mist.tsx regardless of the target. Therefore, combinations such as React and Vue cannot properly generate files due to duplicate file names.

How about adding an optional setting to add the UI framework identifier to the file name to prevent destructive changes?

--extention-with-target: Add target to the extension(Button.mist.react.tsx, Button.mist.vue.tsx, etc...) [default: false]

I would appreciate your response.

[typicode]

Hi, thanks for the kind words :) May I ask why not settling on one UI framework? I feel it's a bit of a edge case.

[totto2727]

It's certainly an edge case...

There is no renderer itself yet, but Qwik has the ability to use React in conjunction with the excellent React library.

https://qwik.dev/docs/integrations/react/

The Qwik component is not available for this React-using part, so you will want both React and Qwik components. However, there is currently a problem with both outputting as .tsx.

But then again, it looks like JSX Pragma will be required, and maintenance costs will likely go up...

Example.

// React Component
/** @jsxImportSource react */

// Qwik Component
/** @jsxImportSource@builder.io/qwik */