W# UI.Next routing with easy way to add new pages

Client.fs

namespace RouterTest

open WebSharper
open WebSharper.JavaScript
open WebSharper.JQuery
open WebSharper.UI.Next
open WebSharper.UI.Next.Client
open WebSharper.UI.Next.Html

[<JavaScript>]
module Client =

    type Feature = {
        mutable Router: Router<Page>
        mutable Page: Page
        Id: string
    }
    and Page = {
        Id: string
        RouteId: RouteId
    }

    let Main =
        
        let create title =
            let unitRouter = RouteMap.Create (fun ()-> []) ignore
            let feature = { 
                Id = title
                Router = Unchecked.defaultof<_>
                Page = Unchecked.defaultof<_>
            }
            feature.Router <- Router.Route unitRouter () (fun id cur ->
                let page = { Id = title; RouteId = id }
                feature.Page <- page
                page) |> Router.Prefix title
            feature

        let features =
            [
                create "RouteOne"
                create "RouteTwo"
                create "RouteThree"
                // ... add more
            ] 
        
        let router = 
            features
            |> List.map (fun f -> f.Router)
            |> Router.Merge

        let rvRouter = Router.Install (fun x -> x.RouteId) router

        [
            features 
            |> List.map (fun f -> Doc.Button f.Id [] (fun () -> Var.Set rvRouter f.Page) :> Doc)
            |> Doc.Concat

            rvRouter.View 
            |> View.Map (fun page -> h1 [text page.Id]) 
            |> Doc.EmbedView
        ]
        |> Doc.Concat
        |> Doc.RunById "main"