Question: Function components in InteractiveServer render mode

[mathantunes]

As of today, if I want to create a component that is rendered on the server and also has interactivity in the client, I could only manage by writing it using the class style.

e.g.:

type InteractiveComponent() =
    inherit FunComponent()

    override _.Render() = div { "Interactive component" }

    static member view = html.blazor<InteractiveComponent> RenderMode.InteractiveServer

Is it possible to write such a component in the function style and still use the InteractiveServer render mode?

What I would like to do is something like

let interactiveComponent (params) = 
    html.blazor(
        (fun ctx -> div { "Interactive component" }),
        RenderMode.InteractiveServer,
        domAttr { "params" => params }) // Parameters are optional

I couldn't manage to get something like the snippet above to work and maybe it's not possible atm 😅

Do you think such feature would add any benefit? Is it even possible with Blazor?

In any case, thanks for all the support 🙌

[albertwoo]

@mathantunes sorry, this cannot be done. Because blazor only support render mode for component, because it needs the type info, and also because it will render a placeholder for later hydrate, so the parameter of the component must be serializable, so we cannot create component wrapper with a parameter as NodeRenderFragment and pass function component to it.

As for function component, it is just NodeRenderFragment which is just a delegate, there is no way to identify it after we prerender it. We just do not have metadata for it.

[mathantunes]

Thank you for the explanation 🙏