Ref<'T>.Value should be an option type

Problem: Forgetting to set your Reference, but using it throws an Exception.

Example:

comp<MatButton> [ attr.ref button; on.click (fun _ -> menu.Value.OpenAsync(button.Value.Ref)) ][  ]
comp<MatMenu> [ attr.ref menu ][]

Forgetting to set attr.ref menu gives a NullReferenceException. Forgetting to set attr.ref button gives “Uncaught (in promise)” (probably because of a NullReferenceException)

Sollution: Currently to avoid this you would have to check for null. The functional approach would be to use an option type. I made this workaround to accomplish this:

type RefOpt<'T>() =
    inherit Ref<'T option>()

    member val Value = None with get, set
    
    override this.Render(builder, sequence) =
        builder.AddComponentReferenceCapture(sequence, fun v ->
            this.Value <-
                match v with
                | :? 'T as result -> Some (result)
                | _ -> None)
        sequence + 1

[Tarmil]

Or use tryUnbox 😉

[Tarmil]

So I’ve been thinking about this a bit. I still don’t quite like the boilerplate you’re adding in your specific example, especially considering that it’s simplified because it ignores the return value of the OpenAsync method. Across an application you might end up needing a whole set of these combinators, depending on the number of refs, the sync/async result, etc.

But then I realized that it would be made nicer and more consistent by adhering more closely to MVU, and moving the call to a command:

type Message =
    | OpenMenu of menu: MatMenu option * button: MatButton option
    | OpenedMenu
    | Error of exn

let update message model =
    match message with
    | OpenMenu (Some menu, Some button) ->
        model, Cmd.OfTask.either menu.OpenAsync button (fun () -> OpenedMenu) Error
    | OpenMenu _ ->
        model, Cmd.ofMsg (Error (exn "You forgot to set a reference!"))
    | OpenedMenu ->
        model, Cmd.none // If OpenAsync had a Task<_> result, you could process it here
    // ...

type MyComponent() =
    inherit ElmishComponent<Model, Message>()

    let menu = Ref<MatMenu>()
    let button = Ref<MatButton>()

    override this.View model dispatch =
        concat [
            comp<MatButton> [ attr.ref button; on.click (fun _ -> dispatch (OpenMenu (menu.Value, button.Value))) ] []
            comp<MatMenu> [ attr.ref menu ][]
        ]