Sample template using Fable.Lit with routing with Elmish?

[leolorenzoluis]

Is there any template that I could look at on how to create a simple web app with routing? There are packages out there for React, but if I'm building pure Lit apps.. what routing libraries should I use? There is template such as https://github.com/JordanMarr/fable-lit-fullstack-template, and that uses grapnel library for routing. I'm not really sure how to connect the dots if I'm implementing Elmish with Lit with a routing library?

Of course I could use Feliz libraries, but like I mentioned I prefer to use pure lit components with basic routing rather than pulling React.

[AngelMunoz]

There are some options out there, in general any javascript router should work fine lit while it is a small framework for web components, it is just another tool, you can pick up any other similar alternatives when it comes for part of your application. That being said I have a few options to offer

• Navigo (https://github.com/krasimir/navigo) (here's my custom bindings for navigo)
• Vaadin Router (https://vaadin.com/docs/v22/fusion/routing/router)
• Grapnel (as in the template you mentioned)

Vaadin router pairs nicely with Lit components (that means Fable.Lit as well)
in the first two cases you have to write some bindings unless I'm missing something

for both Navigo/Vaadin you have to basically create a subscription so you can hook up your main elmish view and switch pages accordingly

[<AutoOpen>]
module Router =
  open Navigo
  // using navigo 
  let Router = Navigo("/", {| hash = true |})

module Home =
  type State { page: Page }
  type Msg =
    | PageChange of Page 

  module Subs =
    let PageChange _ = 
      let sub dispatch = 
         Router
           .on("/", fun _ -> dispatch Home)
           .on("/about", fun _ -> dispatch About)
           // ...
           // please note that resolve must be called at least once
           // for the navigo router
           .resolve() 
         |> ignore
      Cmd.ofSub sub

  let init = // ...
  let update state msg = 
    match msg with 
    | PageChange page -> { state with page = page }, Cmd.none // or any other command as required
    //...
  let view state dispatch = //...

// somewhere else
open Home

Program.mkProgram init update view
|> Program.withLit "app-container"
|> Program.withSubscription Subs.PageChange
|> Program.run

In any case, any agnostic solution should work fine with Lit/Fable.Lit as Lit isn't meant to lock you in the framework/tool rather enable you to use the platform and anything that works with it

[alfonsogarciacaro]

Thanks @AngelMunoz, that's a great way to adapt any JS router to Elmish! 👏

@leolorenzoluis I haven't tested it, but I also assume that the Elmish router in the Fable.Elmish.Browser package should work as is, and it doesn't have a React dependency.

[leolorenzoluis]

Thanks @AngelMunoz. How will this work if I have 2 pages that are currently open and I have to pass in a message from one other to the other? For example, a tree view on the side bar that triggers selected change to load the data on the main page?

  let update state msg = 
    match msg with 
    | PageChange page -> { state with page = page }, Cmd.none // or any other command as required
    | SidebarPage dataFromSideBar -> 
       let (sideBarState, msg) =  SidebarPage.update state msg
       { state with SideBarState = sideBarState }, Cmd.ofMsg MainPageMessage.Something sideBarState.newDataFromSideBar // ??? 
    | MainPage dataFromSideBar -> 
       let (mainPageState, msg) =  MainPage.update state msg
       { state with MainPageState = mainPageState }, Cmd.none //
    //...

I suppose it's just the reality if I'm building MVU architecture that there's a global app state that knows the state/msg for all pages/components for that web app?

@alfonsogarciacaro Thanks will take a look.

[alfonsogarciacaro]

@leolorenzoluis Not sure if there's any router that works like this, but I think the case you mention is about components and not pages. Pages are URLs that work with links and can be entered directly in the browser address bar. SPA usually use hash routes and other tricks to avoid actual reloads in the browser but any page can become a starting point for the app, so the only way to pass arguments is through the URL: as query params or part of the route itself.

In the sample you mention, communication between sibling components in hierarchical component architecture is always tricky. The easiest solution is to have a common parent component that exchanges the messages between the two. Or simpler yet: have a parent shell component that controls the sidebar and re-renders the main section when the selection changes.

But now that I think about it, if you want to implement your sidebar with links as with a nav bar, you can indeed use the router (although you'll still need to pass arguments through the URL). In this case, usually the app root renders both the nav and the main page, and it's only the main page that changes depending on the route. You can see how it's done in the fulma-demo: https://github.com/MangelMaxime/fulma-demo/blob/74fa398d0207e521d0918990d8960ffd80190731/src/App.fs#L72-L75