Frontend Routing

indigo-sandbox/src/main/scala/example/IndigoSandbox.scala

@@ -3,6 +3,7 @@ package example
 import example.game.MyAwesomeGame
 import org.scalajs.dom.document
 import tyrian.Html.*
+import tyrian.SinglePage
 import tyrian.*
 import tyrian.cmds.Logger
 import tyrian.cmds.Random
@@ -12,7 +13,7 @@ import zio.interop.catz.*
 import scala.scalajs.js.annotation.*
 
 @JSExportTopLevel("TyrianApp")
-object IndigoSandbox extends TyrianApp[Msg, Model]:
+object IndigoSandbox extends SinglePage[Msg, Model]:
 
   val gameDivId1: String    = "my-game-1"
   val gameDivId2: String    = "my-game-2"

sandbox/src/main/scala/example/Sandbox.scala

@@ -17,7 +17,17 @@ import scala.scalajs.js.annotation.*
 import scalajs.js
 
 @JSExportTopLevel("TyrianApp")
-object Sandbox extends TyrianApp[Msg, Model]:
+object Sandbox extends MultiPage[Msg, Model]:
+
+  // Here we just do a simple string match, but this could be a route matching
+  // lib like: https://github.com/sherpal/url-dsl
+  def router: String => Msg =
+    case "/#page2" => Msg.NavigateTo(Page.Page2)
+    case "/#page3" => Msg.NavigateTo(Page.Page3)
+    case "/#page4" => Msg.NavigateTo(Page.Page4)
+    case "/#page5" => Msg.NavigateTo(Page.Page5)
+    case "/#page6" => Msg.NavigateTo(Page.Page6)
+    case _         => Msg.NavigateTo(Page.Page1)
 
   val hotReloadKey: String = "hotreload"
 
@@ -29,10 +39,6 @@ object Sandbox extends TyrianApp[Msg, Model]:
           case Right(model) => Msg.OverwriteModel(model)
         },
         Logger.info(flags.toString),
-        Navigation.getLocationHash {
-          case Navigation.Result.CurrentHash(hash) => Msg.NavigateTo(Page.fromString(hash))
-          case _                                   => Msg.NavigateTo(Page.Page1)
-        },
         LocalStorage.key(0) {
           case LocalStorage.Result.Key(key) => Msg.Log("Found local storage key: " + key)
           case _                            => Msg.Log("No local storage enties found.")
@@ -187,7 +193,7 @@ object Sandbox extends TyrianApp[Msg, Model]:
       (model.copy(tmpSaveData = content), Cmd.None)
 
     case Msg.JumpToHomePage =>
-      (model, Navigation.setLocationHash(Page.Page1.toHash))
+      (model, setLocationHash(Page.Page1.toHash))
 
     case Msg.NavigateTo(page) =>
       (model.copy(page = page), Cmd.None)
@@ -569,7 +575,6 @@ object Sandbox extends TyrianApp[Msg, Model]:
 
     Sub.Batch(
       webSocketSubs,
-      Navigation.onLocationHashChange(hashChange => Msg.NavigateTo(Page.fromString(hashChange.newFragment))),
       simpleSubs,
       clockSub,
       Sub.animationFrameTick("frametick") { t =>
@@ -694,21 +699,6 @@ enum Page:
       case Page5 => "#page5"
       case Page6 => "#page6"
 
-object Page:
-  def fromString(pageString: String): Page =
-    pageString match
-      case "#page2" => Page2
-      case "page2"  => Page2
-      case "#page3" => Page3
-      case "page3"  => Page3
-      case "#page4" => Page4
-      case "page4"  => Page4
-      case "#page5" => Page5
-      case "page5"  => Page5
-      case "#page6" => Page6
-      case "page6"  => Page6
-      case _        => Page1
-
 object Model:
   // val echoServer = "ws://ws.ifelse.io" // public echo server
   val echoServer = "ws://localhost:8080/wsecho"

tyrian-io/src/main/scala/tyrian/TyrianApp.scala → tyrian-io/src/main/scala/tyrian/MultiPage.scala

@@ -3,16 +3,17 @@ package tyrian
 import cats.effect.IO
 import cats.effect.kernel.Resource
 import cats.effect.unsafe.implicits.global
+import org.scalajs.dom.Element
 import org.scalajs.dom.document
 import tyrian.TyrianAppF
 import tyrian.runtime.TyrianRuntime
 
 import scala.scalajs.js.annotation._
 
-/** The TyrianApp trait can be extended to conveniently prompt you for all the methods needed for a Tyrian app, as well
+/** The MultiPage trait can be extended to conveniently prompt you for all the methods needed for a Tyrian app, as well
   * as providing a number of standard app launching methods.
   */
-trait TyrianApp[Msg, Model] extends TyrianAppF[IO, Msg, Model]:
+trait MultiPage[Msg, Model] extends TyrianRoutedAppF[IO, Msg, Model]:
 
   val run: Resource[IO, TyrianRuntime[IO, Model, Msg]] => Unit =
     _.map(_.start()).useForever.unsafeRunAndForget()

tyrian-io/src/main/scala/tyrian/SinglePage.scala

@@ -0,0 +1,19 @@
+package tyrian
+
+import cats.effect.IO
+import cats.effect.kernel.Resource
+import cats.effect.unsafe.implicits.global
+import org.scalajs.dom.Element
+import org.scalajs.dom.document
+import tyrian.TyrianAppF
+import tyrian.runtime.TyrianRuntime
+
+import scala.scalajs.js.annotation._
+
+/** The SinglePage trait can be extended to conveniently prompt you for all the methods needed for a Tyrian app, as well
+  * as providing a number of standard app launching methods.
+  */
+trait SinglePage[Msg, Model] extends TyrianAppF[IO, Msg, Model]:
+
+  val run: Resource[IO, TyrianRuntime[IO, Model, Msg]] => Unit =
+    _.map(_.start()).useForever.unsafeRunAndForget()

tyrian-zio/src/main/scala/tyrian/TyrianApp.scala → tyrian-zio/src/main/scala/tyrian/MultiPage.scala

@@ -3,6 +3,7 @@ package tyrian
 import cats.effect.Async
 import cats.effect.kernel.Resource
 import cats.effect.unsafe.implicits.global
+import org.scalajs.dom.Element
 import org.scalajs.dom.document
 import tyrian.TyrianAppF
 import tyrian.runtime.TyrianRuntime
@@ -12,10 +13,10 @@ import zio.Unsafe
 
 import scala.scalajs.js.annotation._
 
-/** The TyrianApp trait can be extended to conveniently prompt you for all the methods needed for a Tyrian app, as well
+/** The MultiPage trait can be extended to conveniently prompt you for all the methods needed for a Tyrian app, as well
   * as providing a number of standard app launching methods.
   */
-trait TyrianApp[Msg, Model](using Async[Task]) extends TyrianAppF[Task, Msg, Model]:
+trait MultiPage[Msg, Model](using Async[Task]) extends TyrianRoutedAppF[Task, Msg, Model]:
 
   val run: Resource[Task, TyrianRuntime[Task, Model, Msg]] => Unit = res =>
     val runtime  = Runtime.default

tyrian-zio/src/main/scala/tyrian/SinglePage.scala

@@ -0,0 +1,27 @@
+package tyrian
+
+import cats.effect.Async
+import cats.effect.kernel.Resource
+import cats.effect.unsafe.implicits.global
+import org.scalajs.dom.Element
+import org.scalajs.dom.document
+import tyrian.TyrianAppF
+import tyrian.runtime.TyrianRuntime
+import zio.Runtime
+import zio.Task
+import zio.Unsafe
+
+import scala.scalajs.js.annotation._
+
+/** The SinglePage trait can be extended to conveniently prompt you for all the methods needed for a Tyrian app, as well
+  * as providing a number of standard app launching methods.
+  */
+trait SinglePage[Msg, Model](using Async[Task]) extends TyrianAppF[Task, Msg, Model]:
+
+  val run: Resource[Task, TyrianRuntime[Task, Model, Msg]] => Unit = res =>
+    val runtime  = Runtime.default
+    val runnable = res.map(_.start()).useForever
+
+    Unsafe.unsafe { implicit unsafe =>
+      runtime.unsafe.run(runnable).getOrThrowFiberFailure()
+    }

tyrian/js/src/main/scala/tyrian/TyrianRoutedAppF.scala

@@ -0,0 +1,75 @@
+package tyrian
+
+import cats.effect.kernel.Async
+import cats.effect.kernel.Resource
+import org.scalajs.dom.Element
+import org.scalajs.dom.Location
+import org.scalajs.dom.document
+import org.scalajs.dom.window
+import tyrian.runtime.TyrianRuntime
+
+import scala.scalajs.js
+import scala.scalajs.js.annotation._
+
+/** The TyrianApp trait can be extended to conveniently prompt you for all the methods needed for a Tyrian app, as well
+  * as providing a number of standard app launching methods.
+  */
+trait TyrianRoutedAppF[F[_]: Async, Msg, Model] extends TyrianAppF[F, Msg, Model]:
+
+  def router: String => Msg
+
+  def setLocationHash(newHash: String): Cmd[F, Nothing] =
+    Routing.setLocation(newHash)
+
+  private def _init(flags: Map[String, String]): (Model, Cmd[F, Msg]) =
+    val (m, cmd) = init(flags)
+    (m, Routing.getLocation[F, Msg](router) |+| cmd)
+
+  private def _update(model: Model): Msg => (Model, Cmd[F, Msg]) =
+    msg => update(model)(msg)
+
+  private def _view(model: Model): Html[Msg] =
+    view(model)
+
+  private def _subscriptions(model: Model): Sub[F, Msg] =
+    Routing.onLocationChange[F, Msg](router) |+| subscriptions(model)
+
+  override def ready(node: Element, flags: Map[String, String]): Unit =
+    run(
+      Tyrian.start(
+        node,
+        _init(flags),
+        _update,
+        _view,
+        _subscriptions,
+        MaxConcurrentTasks
+      )
+    )
+
+object Routing:
+
+  private def locationToRoute(loc: Location): String =
+    val origin = loc.origin.getOrElse("")
+    loc.toString.replaceFirst(origin, "")
+
+  def onLocationChange[F[_]: Async, Msg](router: String => Msg): Sub[F, Msg] =
+    Sub.Batch(
+      Sub.fromEvent("DOMContentLoaded", window) { _ =>
+        Option((locationToRoute andThen router)(window.location))
+      },
+      Sub.fromEvent("popstate", window) { _ =>
+        Option((locationToRoute andThen router)(window.location))
+      }
+    )
+
+  def getLocation[F[_]: Async, Msg](router: String => Msg): Cmd[F, Msg] =
+    val task =
+      Async[F].delay {
+        locationToRoute(window.location)
+      }
+    Cmd.Run(task, router)
+
+  def setLocation[F[_]: Async](newHash: String): Cmd[F, Nothing] =
+    Cmd.SideEffect {
+      window.location.hash = if newHash.startsWith("#") then newHash else "#" + newHash
+    }