Incremental porting of an existing app to Leptos.

[lukaszlew]

I'd like to start porting a React app to Leptos.
Porting it all at once is a daunting task that I can't attempt as a whole.
Please note that I don't care much about performance (in case of some terrible interactions between react and leptos) at this intermediate stage of porting.

Q: Is it possible to port the app incrementally?

I imagine that it should be possible using a rough approach such as <iframe>.
Q: If this is the best we can get, how should I start?
Q: If there is a better or more fine-grained way?

[gbj]

Why are you interested in porting it?

Generally speaking, mixing Framework A and Framework B is going to be an order of magnitude more complicated than writing it in A or writing it in B.

The simplest way would probably be to create custom element/web component wrappers around Leptos components that you use for "leaf nodes" and slowly replace parts of your React app by embedding Leptos components inside React instead of the other way around.

[lukaszlew]

I'm interested in porting because my Rust backend is already sending to frontend (over websocket) a flexible DSL that describes buttons, divs etc and that is rendered on the frontend using TS. I'm seeing that soon it will be useful to send only the diff.
It feels I'm retracting steps of Leptos and I don't want to reinvent the wheel.
It feels like using leptos_dom and leptos_macros (even without the reactivity) would be a clear step forward for me simplifying what I have, not making it more complex.
Using server functions or more of leptos would be even bigger win as I could drop my own enum FrontendAction.

Is there an example of how can I wrap a Leptos compoment in React? I don't know where to start.

[lukaszlew]

And if not an example, perhaps a hint of how would the tech work?

[gbj]

Here's an example someone built doing what I described (turning Leptos components into web components/custom elements and using them in React): https://github.com/austintheriot/custom-element/tree/main/examples/leptos_in_react

[lukaszlew]

Thank you