Migrate to mitosis?

[oskbor]

Hello there!

Currently this codebase consists of two separate packages, one for React and one for Vue.
Mitosis is subset of JSX that compiles to React, Vue and many other frameworks. It has support for Context, Hooks, Components and more. There is an interactive playground here. The idea is that if this codebase was ported to Mitosis, the maintenance burden might become lower and the reach much larger. I was wondering if the team has looked at Mitosis, and if so, what was the conclusion? I did some searching before posting but nothing came up.

The benefits would be something like this:

• One package/codebase to maintain for all frameworks
• Reach many more ecosystems (React, Vue, Svelte, Solid, Qwik, Lit, Marko etc..) with little to no extra effort.

All the best, and thank you for a great library!

[RobinMalfait]

Hey! We get this question a lot and while these kinds of tools sound awesome in theory, in practice I don't believe they work as expected (even though I would really love that!) or put another way, we have a long way to go.

Mitosis is also in Beta so there will still be many bugs which is expected. Trying out the bundler in Safari gives me a blank screen (with some console errors), using the CLI works with the example component they provide but the problem is the smallest component in Headless UI already breaks when using it.

export default function Disclosure({ children }) {
  return <>{children}</>
}

This crashes, because Mitosis tries to do this:

 import * as React from 'react';












  export default function Disclosure(props) {















    return (

      {props.children}


    );
  }

SyntaxError: ',' expected. (32:13)
  30 |     return (
  31 |
> 32 |       {props.children}
     |             ^
  33 |
  34 |
  35 |     );
    at ... stack trace {
  loc: { start: { line: 32, column: 13 } },
  codeFrame: '  30 |     return (\n' +
    '  31 |       \n' +
    '> 32 |       {props.children}\n' +
    '     |             ^\n' +
    '  33 |       \n' +
    '  34 |       \n' +
    '  35 |     );'
}

Headless UI is also used in one of our commercial products, and I don't think it is a good idea to ship beta software to our customers.

This is not me throwing shade about these tools, it is just a really hard problem. And even once everything works out you won't get fine-grained control over things. So you could run into performance issues or similar but there will be no way for you to fix it because everything is generated.

We currently already have some code in the React version that is implemented slightly differently in Vue just because it is more Vue-y and behaves better instead of a one-to-one port if that makes sense.

So maybe one day we look into generated code like this but today is too early.