How does Mitosis work?

You've seen how Mitosis can compile a component to React, Vue, Qwik, and tons of other frameworks... but how?

The secret is in seeing that all frameworks inevitably have to support the same few core things. A tree of components, binding inputs to expressions, binding outputs to logic, and handling state, context, and effects. To be blunt, that's about the gist of what all frameworks (and thus really all sites and apps) must do.

We start by using a strict subset of JSX. And don't be mistaken, this is not vdom. It's just using JSX as a templating system, because who wants yet another templating language...

Then, we parse it to a declarative JSON tree. We serialize code expressions as strings that can be manipulated and outputted to various frameworks, and all elements are a clean tree of parents, siblings, and children (much like DOM trees)

Finally, we stringify that data in the various flavors per framework. We can do simple manipulation of expressions as well, e.g. converting `state.name` to just `name` for Angular, which is easy to do with babel transforms

And that's the gist! Any Qs? Ama!

And you can learn more about the project here: https://github.com/builderio/mitosis