Possible to mix Feliz.React and Fable.Lit in a single app?

[leolorenzoluis]

There are great libraries written for Fable but leverages React. How do you mix two frameworks into a single one? Leveraging existing react controls in Feliz and also creating your own web components with Lit?

[alfonsogarciacaro]

There's actually a helper here to do that. Not sure if it's the best approach but it works:

Fable.Lit/src/Lit.React/Lit.React.fs

Lines 47 to 65 in 3e29301

	/// <summary>
	/// Renders a Lit template into a React element
	/// </summary>
	/// <param name="template">A Lit template result.</param>
	/// <param name="tag">the name of the tag that will wrap the Lit template result .</param>
	/// <param name="className">a class name for the wrapper element.</param>
	/// <returns>A ReactElement</returns>
	static member inline ofLit (template: TemplateResult, ?tag: string, ?className: string) =
	let tag = defaultArg tag "div"
	let container = Hooks.useRef Unchecked.defaultof<Element option>
	Hooks.useEffect((fun () ->
	match container.current with
	| None -> ()
	| Some el -> template |> Lit.render (el :?> HTMLElement)
	))
	domEl tag [
	Props.Class (defaultArg className "")
	Props.RefValue container
	] []

You can get the Fable.Feliz.Lit package from Nuget or simply copy that code into your project. Please note you need to use in a React component, like:

open Feliz
open Lit

[<ReactComponent>]
let MyReactWrapper (aValue: int) =
    MyLitComponent aValue |> React.ofLit

[leolorenzoluis]

What about converting a react component to a lit? I believe your sample code converts an existing Lit component to React but not vice versa?

[alfonsogarciacaro]

There's a helper in the same file to do exactly that :) Although I'm not entirely sure if the solution has performance issues.

Fable.Lit/src/Lit.React/Lit.React.fs

Lines 42 to 45 in 3e29301

	static member toLit (reactComponent: 'Props -> ReactElement, ?className: string): 'Props -> TemplateResult =
	emitJsExpr (jsConstructor<ReactDirective>, reactComponent, defaultArg className "")
	"class extends $0 { renderFn = $1; className = $2 }"
	|> LitBindings.directive :?> _

[leolorenzoluis]

@alfonsogarciacaro Could we leverage the @lit-labs/react instead? I tried using this helper but I'm faced with lifecycle bug issues (i'm guessing here)

EDIT: Ok I conclude mixing Lit and React doesn't play nice with its own lifecycles but again maybe I'm too tired mixing renders that don't play well.