What is View.map about?

[h0lg]

I can't piece it together from the tests and (sadly like many other concepts), I can't find it documented anywhere.

[edgarfgp]

/// Map the widget's message type to the parent's message type to allow for view composition
let inline map (fn: 'oldMsg -> 'newMsg) (x: WidgetBuilder<'oldMsg, 'marker>) : WidgetBuilder<'newMsg, 'marker> =

To illustrate why and when View.map is useful let's use the following sample:

Because of MVU, all the pages need to return the same Msg type but they all have their own.
To be able to wrap those Msgs into the app's root Msg type, we use the View.map helper function.

module Sample =
     type Model = ...

     type Msg =
         | PageAMsg of PageA.Msg // Here PageA has its own Msg
         | PageBMsg of PageB.Msg // Same here
         | PageCMsg of PageC.Msg // Same here

     let init () = ...

     let update msg model = ...

     let view model =
         ContentPage(
             Grid() {
                 (match model.CurrentStep with
                  // Here View.map will map/wrap any Msg has been defined in PageA into the parent/root PageAMsg so it can used in the main MVU loop
                  | Step.PageA -> View.map PageAMsg (PageA.view model.PageAModel) 
                  | Step.PageB -> View.map PageBMsg (PageB.view model.PageBModel)
                  | Step.PageC -> View.map PageCMsg (PageC.view model.PageCModel))
             }
         )

You can see the View.map implementations here

[h0lg]

Thank you for your quick response! I had already found the implementation, but couldn't connect the solution to a problem - so to speak. The first paragraph of the new documentation page answers that question for me.

[TimLariviere]

Using the approach recommended by @edgarfgp, I wrote a documentation page on how to use View.map: https://docs.fabulous.dev/advanced/composing-independent-mvu-states-into-a-single-app

[TimLariviere]

It's missing the "I want to navigate to the other page" implementation right now, it's quite a lot to explain.
But if you want to do it, you can use the ExternalMsg approach I used in FabulousContacts to do cross-page communication: https://github.com/TimLariviere/FabulousContacts/blob/master/FabulousContacts/EditPage.fs#L214

[TimLariviere]

By the way, we know Fabulous is poorly documented. If you have any other question like this one, I will try to write documentation for it.

[h0lg]

By the way, we know Fabulous is poorly documented.

I agree, it is - and that's really curbing its potential IMO. The dev experience is frustrating ATM if you stray off the beaten path. But I'm glad that you're aware of it - you are making up for it in responsiveness!

[h0lg]

Using the approach recommended by @edgarfgp, I wrote a documentation page on how to use View.map: https://docs.fabulous.dev/advanced/composing-independent-mvu-states-into-a-single-app

Thank you - that picks me up where I am!