Use the model Ref to use all updates

tyrian/js/src/main/scala/tyrian/runtime/Renderer.scala

@@ -2,7 +2,8 @@ package tyrian.runtime
 
 import cats.effect.kernel.Async
 import cats.effect.kernel.Ref
-import cats.effect.syntax.all.*
+import cats.effect.std.Dispatcher
+import cats.syntax.all.*
 import org.scalajs.dom
 import snabbdom.VNode
 import tyrian.Html
@@ -26,44 +27,50 @@ object Renderer:
   var renderer: Renderer = null
   val timeout: Long      = 1000
 
-  def render[Model, Msg](
-      model: Model,
+  def render[F[_], Model, Msg](
+      dispatcher: Dispatcher[F],
+      model: Ref[F, Model],
       view: Model => Html[Msg],
       onMsg: Msg => Unit,
       router: Location => Msg
-  )(t: Long): Unit =
+  )(t: Long)(using Async[F]): Unit =
     if t - renderer.lastTriggered >= timeout then
       renderer = renderer.copy(
         state = RendererState.Idle,
         runningTime = t
       )
       ()
     else
-      renderer = renderer.copy(
-        vnode = Rendering.render(renderer.vnode, model, view, onMsg, router),
-        state = RendererState.Running,
-        runningTime = t
-      )
-      dom.window.requestAnimationFrame(_ => render(model, view, onMsg, router)(Date.now().toLong))
-      ()
+      dispatcher.unsafeRunAndForget {
+        model.get.map { m =>
+          renderer = renderer.copy(
+            vnode = Rendering.render(renderer.vnode, m, view, onMsg, router),
+            state = RendererState.Running,
+            runningTime = t
+          )
+          dom.window.requestAnimationFrame(_ => render(dispatcher, model, view, onMsg, router)(Date.now().toLong))
+          ()
+        }
+      }
 
   // This function gets called on every model update
   @SuppressWarnings(Array("scalafix:DisableSyntax.null"))
-  def redraw[Model, Msg](
+  def redraw[F[_], Model, Msg](
+      dispatcher: Dispatcher[F],
       r: Renderer,
-      model: Model,
+      model: Ref[F, Model],
       view: Model => Html[Msg],
       onMsg: Msg => Unit,
       router: Location => Msg
-  ): Renderer =
+  )(using Async[F]): Renderer =
     // Sadly, needs a null check for as long as I'm using a var to hold the state.
     if renderer == null then renderer = r
 
     renderer.state match
       case RendererState.Idle =>
         // If the render state is idle, begin.
         renderer = renderer.copy(lastTriggered = Date.now().toLong)
-        dom.window.requestAnimationFrame(_ => render(model, view, onMsg, router)(Date.now().toLong))
+        dom.window.requestAnimationFrame(_ => render(dispatcher, model, view, onMsg, router)(Date.now().toLong))
         renderer
 
       case RendererState.Running =>

tyrian/js/src/main/scala/tyrian/runtime/TyrianRuntime.scala

@@ -65,8 +65,7 @@ object TyrianRuntime:
           }
 
           _ <- runCmd(cmdsAndSubs._1) *> runSub(cmdsAndSubs._2)
-          m <- model.get
-          _ <- renderer.update(r => Renderer.redraw(r, m, view, onMsg, router))
+          _ <- renderer.update(r => Renderer.redraw(dispatcher, r, model, view, onMsg, router))
         } yield ()
       }.foreverM