Is there similar pattern in Lit that uses React.useContext (Context propagation)? #43

[leolorenzoluis]

Assuming Lit components are written in MVU. Is there an alternative to write code so we don't have to pass t he message between Parent/Child?

https://zaid-ajaj.github.io/Feliz/#/Feliz/React/ContextPropagation

[alfonsogarciacaro]

I think we haven't implemented something like this yet in Fable.Lit. Apparently Lit doesn't implement context by itself, a quick Google search only reveals this npm package. As Lit elements are just HTML elements maybe we could just implement something that looks for a context up in the DOM hierarchy, although this may not work for Hook components which are "virtual" (for that, I assume we would have to pass the context implicitly somehow). @AngelMunoz any ideas?

[AngelMunoz]

The only context proposal that I'm aware is this one which is not Lit specific but rather something general

https://github.com/webcomponents-cg/community-protocols/blob/main/proposals/context.md

My wild guess is that lit element users can create a reactive controller for those purposes but HookComponents would need something different

I'm thinking something Fable.Store (or even a simple map) that keeps track of the context of the user and the hook just takes the values present in the store

// stores.fs / contexts.fs
let MyContext = new Store({ Theme = Theme.Light })

// app.fs

open Lit
[<HookComponent>]
let MyComponent() =
    let context = Hook.useContext (MyContext)
    html $"<p>Current Theme is {context.Theme}</p>"

the useContext/useStore hook would trigger a re-render when the values of the store change I think that could accomplish a similar goal to what context does but I don't have anything concrete in mind

[JordanMarr]

Does this seem like a reasonable implementation of Hook.useContext using Fable.Store?
@alfonsogarciacaro, @AngelMunoz

UseContext Branch

Usage

Create Shared Context

module WebLit.AppContext

open ElmishStore

type Model = 
    { Username: string }

let init () = 
    { Username = "Anonymous" }, Cmd.none

type Msg = 
    | SetUsername of string

let update (msg: Msg) (model: Model) =
    match msg with
    | SetUsername username -> 
        { model with Username = username }, Cmd.none

let store, dispatch = UseContextHook.makeElmishContext init update

Component 1

[<HookComponent>]
let Page() = 
    let ctx = Hook.useContext(AppContext.store)

    html $"""
        <h1>Welcome to Cat Facts!</h1>
        <sl-input 
            style="width: 300px;"
            label="Please enter a username:"
            value={ctx.Username} 
            @sl-change={Ev (fun e -> AppContext.dispatch (AppContext.SetUsername e.target.Value))}></sl-input>
        """

Component 2

[<LitElement("my-app")>]
let MyApp() =
    let model, dispatch = Hook.useElmish(init, update)
    let ctx = Hook.useContext(AppContext.store)

    // ...
    
    html $"""
        <nav>
            <div style="float: right; padding: 10px">  
                <bs-icon src="person-fill" color="white" size="18px"></bs-icon>
                {ctx.Username}
            </div>
        </nav>

    // ...

Implementation

module UseContextHook

open Lit
open System

type UseContextStore<'Model>(store: Fable.IStore<'Model>, defaultModel: 'Model) =
    member val internal Current = defaultModel with get,set
    interface Fable.IStore<'Model> with
        member this.Dispose() = store.Dispose()
        member this.Update(f) = store.Update(f)
        member this.Subscribe(observer: IObserver<'Model>) = store.Subscribe(observer)

let makeElmishContext init update = 
    let dispose = fun _ -> printfn "store.Dispose()"
    let store, dispatch = Store.makeElmish init update dispose ()
    let defaultModel = init () |> fst
    let ucStore = new UseContextStore<'Model>(store, defaultModel)
    ucStore, dispatch

type HookContext with
    member ctx.useContext<'Model>(store: UseContextStore<'Model>) = 
        let model, setModel = ctx.useState(store.Current)
        ctx.useEffectOnce (fun () -> 
            store.Subscribe (fun m -> 
                store.Current <- m
                setModel m
            )
        )
        model

type Hook with
    static member inline useContext<'Model>(store: UseContextStore<'Model>) = 
        Hook.getContext().useContext<'Model>(store)

[JordanMarr]

Thanks, that will be a very nice improvement!

[JordanMarr]

I worked through your example code (here it is again with comments and a small compile error fix).
Now I just need to test to make sure that the subscription can't be created multiple times since it is not created within useEffectOnce.

module UseStore

open Fable
open Lit
open System

type HookContext with
    member ctx.useStore<'Model>(store: IStore<'Model>) = 
        
        // Create placeholder refs with temp defaults (to be replaced with real values from store)
        let setModelRef = ref(fun (_: 'Model) -> ())
        let subscriptionRef = ref { new IDisposable with member _.Dispose() = () }
        
        // Ensure that store subscription is disposed when component is destroyed
        ctx.useEffectOnce(fun () -> subscriptionRef.Value)

        let model, setModel = 
            ctx.useState(fun () ->            

                let initialModel, subscription = 
                    Store.subscribeImmediate (fun newModel -> 
                        printfn "Setting model..."
                        setModelRef.Value newModel
                    ) store 

                // Assign subscription ref (to be disposed with component)                
                subscriptionRef.Value <- subscription

                initialModel
            )

        setModelRef.Value <- setModel
        model

type Hook with
    static member inline useStore<'Model>(store: IStore<'Model>) = 
        Hook.getContext().useStore<'Model>(store)

[JordanMarr]

It seems to be only executing once, so I think this is good to go.

This will be useful for others, but it probably needs to be in a separate NuGet package since it depends on Fable.Store.

I would be happy to release this package as Fable.Lit.UseStore (similar to Feliz.UseElmish), unless you would prefer to do it under the Fable account.

[alfonsogarciacaro]

That's very helpful @JordanMarr, thank you! Whatever is more convenient for you. We have adapters for React and Svelte here so maybe it's a good place to put it (I can give you permissions for the repo. But if you prefer to keep it in a personal repo that's fine too :)

I need to check React docs because hooks are always full of caveats, but my understanding is the initialization function of useState only runs once.

[JordanMarr]

In that case, I would like to put it alongside the other Fable.Store adapters.