Reverse-Mitosis

[Mutondi]

Greetings.

Does anyone know of a good way to go from "framework" code back to mitosis 😁

[christiankozalla]

I think, this question is in the same vein as my question:

Suppose I have an existing component-library written in React, that I want to be the single source of truth and generate output in Vue from. Is Mitosis suitable for my use-case? React => Mitosis => Vue

Big thanks in advance!

[samijaber]

Mitosis's scope is (at least currently) focused only on outputting web framework code.

Parsing framework code is a separate task/undertaking, and a rather complex one given that we have zero control over how folks build their React/Angular/Vue/etc. components.

Suppose I have an existing component-library written in React, that I want to be the single source of truth and generate output in Vue from. Is Mitosis suitable for my use-case?

Mitosis was made to be your single source of truth! For your use-case, I would suggest that you perform a one-time manual migration from React to Mitosis, and then use Mitosis as your single source-of-truth moving forward

• React => Mitosis (one off migration)
• Mitosis => React, Vue, & everything else

😄

[PatrickJS]

We can probably make an Alpha version of React => Mitosis. We would just have to change the jsx parser a bit and create a few escape hatches.

Mitosis can be a slightly stricter version of whatever framework the lib author chooses (so long as they maintain some of the escape hatches). The lib author would need testing oh every new changes to mitosis to make sure their lib can output to everything they want to support.

This will likely only work with new libs allows mitosis to be a super linter but the benefits are huge. If the community decides to change what they see as "Components", wanted classes, or the lib author doesn't update their lib then you can always refactor the output once you convert it to json

[milahu]

React => Mitosis

see also https://github.com/milahu/awesome-component-converters

[zoubingwu]

We would just have to change the jsx parser a bit and create a few escape hatches.

Is it possible to make the parser pluggable and let the community to maintain so we can turn whatever framework to mitosis.

Mitosis was made to be your single source of truth!

This design is understandable but it's trying to create another standard in some way here, there will be lots of marketing work needed. I believe reusing an exsiting one will be a big boost for mitosis.

[samijaber]

Is it possible to make the parser pluggable and let the community to maintain so we can turn whatever framework to mitosis.

Yes, anyone is able to create their own parser for Mitosis, so the community is definitely able to attempt a React -> Mitosis parser. What you need is to write a parser that outputs a MitosisComponent JSON object (see type here). Then you can feed that into any of Mitosis' generators.

This is how @raymondmuller created a Svelte parser for Mitosis.

This design is understandable but it's trying to create another standard in some way here

Not really. Read our docs for more information. TL;DR: Mitosis is not "another standard", but rather an attempt at abstracting over existing how current web frameworks author components.

I believe reusing an exsiting one will be a big boost for mitosis.

I understand that many people want this, but it requires an enormous amount of additional effort that doesn't overlap with any of the other work we're doing, and so we do not have the resources to spend on it at the moment.

A React parser will constantly need to be improved to handle more edge cases. As soon as it exists, the expectation from people will be that it can parse their existing React components, which it won't easily be able to do, as React allows folks to write components in very flexible ways. One of the first things people will try to do is create custom hooks, which is also a very complex problem to solve, and we've only had high-level discussions about: see #548.

Seeing as we have no plans to look into this in the foreseeable future, I am going to close this issue for now (so that community expectations are clear). As I said, all of the Mitosis internals are exposed from the @builder.io/mitosis package, so folks are more than welcome to attempt this on their own! Reach out to us on Discord if we do, and we can try to help wherever possible. 😃