Remember to call usePassedRead

[marklam]

This isn't really a question, more of a note of a 'gotcha', and a check that there's not a way to avoid the pitfall.

I made a component that takes an IReadable, and renders its .Current value, but I didn't get any updates. The component has local state from useState, and changes to that do cause a re-render (including the updated values from the IReadable).

The missing bit was a call to usePassedRead with the IReadable. I didn't notice, because it takes IReadable and returns IReadable, so the code can grab .Current with or without the call.

Here's the code with the important line commented-out. (I 'hide' the passed-in model with the result of usePassedRead otherwise I could end up using both/either within the component layout).

namespace FuncUIFileDialog

open System
open Elmish
open Avalonia
open Avalonia.Themes.Fluent
open Avalonia.FuncUI.Hosts
open Avalonia.Controls.ApplicationLifetimes

open Avalonia.Controls
open Avalonia.FuncUI
open Avalonia.FuncUI.DSL
open Avalonia.FuncUI.Elmish.ElmishHook

type Model = { Value : int }

type Msg = | IncrementValue

module MainView =
    let handler msg model =
        match msg with
        | IncrementValue ->
            { model with Value = model.Value + 1}, Cmd.none

    let myComponent key (model : IReadable<Model>) dispatch =
        Component.create (key,
            fun ctx ->
                //let model = ctx.usePassedRead model
                let flag = ctx.useState false
                let value = model |> State.readMap (fun m -> m.Value)

                StackPanel.create [
                    StackPanel.children [
                        CheckBox.create [
                            CheckBox.content "Checkbox with local state"
                            CheckBox.isChecked flag.Current
                            CheckBox.onChecked (fun _ -> flag.Set true)
                            CheckBox.onUnchecked (fun _ -> flag.Set false)
                        ]
                        Button.create [
                            Button.content "Send increment message"
                            Button.onClick (fun _ -> dispatch IncrementValue)
                        ]
                        TextBlock.create [
                            TextBlock.text $"Value: {value.Current}"
                        ]
                    ]
                ]
        )

    let create () =
        let initial = { Value = 0 }

        Component (
            fun ctx ->
                let model = ctx.useState(initial)
                let _, dispatch = ctx.useElmish (model, handler)

                Grid.create [
                    Grid.rowDefinitions "*"
                    Grid.children [
                        ContentControl.create [
                            Grid.row 0
                            ContentControl.content (
                                myComponent "c1" model dispatch
                            )
                        ]
                    ]
                ]
        )


type MainWindow() =
    inherit HostWindow()

    do
        base.Title   <- "FuncUIExperiments"
        base.Content <- MainView.create ()

type App() =
    inherit Application()

    override this.Initialize() =
        this.Styles.Add (FluentTheme())

    override this.OnFrameworkInitializationCompleted() =
        this.Name <- "FuncUIExperiments"
        match this.ApplicationLifetime with
        | :? IClassicDesktopStyleApplicationLifetime as desktopLifetime ->
            let mainWindow = MainWindow()
            mainWindow.MinWidth <- 850.0
            mainWindow.MinHeight <- 600.0

            desktopLifetime.MainWindow <- mainWindow
        | _ -> ()

module Program =

    [<EntryPoint; STAThread>]
    let main(args: string[]) =
        AppBuilder
            .Configure<App>()
            .UsePlatformDetect()
            .UseSkia()
            .StartWithClassicDesktopLifetime(args)

[JaggerJo]

Yes, your observation here is correct.

The call to ctx.usePassed/ctx.usePassedRead basically subscribes the component to changes of the passed IReadable.

[marklam]

Thanks for the confirmation.
I'll make a convention in my codebase something like this, to prevent me shooting myself in the foot:

type Readable<'t> = | Readable of IReadable<'t>
module Readable =
    let subscribe (ctx : IComponentContext) (Readable r) = ctx.usePassedRead r

... then

    let myComponent key (model : IReadable<Model>) dispatch =
        Component.create (key,
            fun ctx ->
                //let model = ctx.usePassedRead model

becomes

    let myComponent key (rmodel : Readable<Model>) dispatch =
        Component.create (key,
            fun ctx ->
                let model = Readable.subscribe ctx rmodel

... and

                        ContentControl.create [
                            Grid.row 0
                            ContentControl.content (
                                myComponent "c1" (Readable model) dispatch
                            )
                        ]

F# makes stuff like this quite painless :-)

[JaggerJo]

My suggestion is to use shadowing.

module MainView =
   ...
    let myComponent key (model : IReadable<Model>) dispatch =
        Component.create (key, fun ctx ->
            (* shadows the passed model *)
            let model = ctx.usePassedRead model 
            let flag = ctx.useState false
            let value = model |> State.readMap (fun m -> m.Value)
            ...
        )

[marklam]

That's what I was doing in my original code, the problem I had is that if you forget the line

  let model = ctx.usePassedRead model 

(as I did), then everything compiles fine, but it doesn't update.

By passing IReadable to components in a DU, it's harder for me to forget to usePassedRead. In my example I put it in Readable.subscribe where it also returns the un-wrapped IReadable (and that can shadow the model if desired).

[marklam]

So with shadowing too it looks like:

    let myComponent key (model : Readable<Model>) dispatch =
        Component.create (key,
            fun ctx ->
                let model = Readable.subscribe ctx model

(although I'd have to re-wrap model if my component contained other components expecting my discriminated union)

But either way I can't (easily) get at the Current property without also invoking usePassedRead (via Readable.subscribe).