search

dbrattli / Feliz.ViewEngine

Feliz DSL and engine for HTML generation and server side rendering (SSR)
Other
67 stars 3 forks source link

Support for mixed-mode Feliz & Fable.React code? #11

Open l3m opened 4 years ago

l3m commented 4 years ago

I have a code base written mostly in Fable.React. I'm interested in using Feliz & Feliz.ViewEngine.

However, my existing code is using Fable.React's ReactDomServer to perform SSR. Adding Feliz, I would need to have a way to support both Fable.React-style code as well as Feliz.

I can imagine this might be out of scope, but .. can't hurt to ask, right? Is that something that is possible, or even reasonable?

dbrattli commented 4 years ago

The README mentions this problem. The way I would think about this is that SSR is just HTML, or at least it will end up as HTML. So you can always wrap your Fable.React / Feliz code and use some translate function (e.g type prop extension) that uses prop.dangerouslySetInnerHTML (content: string) one way or the other. Then make sure what the client generates matches this HTML.

type prop with
    static member inline react (content: ReactElement) =
        let text = ... /// Convert your Fable.React into a string
        Interop.mkChildren [ Interop.createRawTextElement text ]

It's hard to add such a translate method for Fable.React to Feliz.ViewEngine without taking dependency to Fable.React so it's best to do it in the project that already have the dependency. But if you get it working we should document it to the README.

l3m commented 4 years ago

Thanks! I'll see if I get this to work.