use Cmd for RAF

Author: vankeisb

core/src/TeaCup/Animation.ts

@@ -24,20 +24,8 @@
  */
 
 import { Sub } from './Sub';
-
-let subs: Array<RafSub<any>> = [];
-
-let ticking = false;
-
-function tick() {
-  if (!ticking) {
-    ticking = true;
-    requestAnimationFrame((t: number) => {
-      subs.forEach((s) => s.trigger(t));
-      ticking = false;
-    });
-  }
-}
+import { Cmd } from './Cmd';
+import { Dispatcher } from './Dispatcher';
 
 class RafSub<M> extends Sub<M> {
   readonly mapper: (t: number) => M;
@@ -49,20 +37,34 @@ class RafSub<M> extends Sub<M> {
 
   protected onInit() {
     super.onInit();
-    subs.push(this);
-    tick();
-  }
-
-  protected onRelease() {
-    super.onRelease();
-    subs = subs.filter((s) => s !== this);
+    setTimeout(() => {
+      requestAnimationFrame((t) => this.trigger(t));
+    });
   }
 
   trigger(t: number) {
     this.dispatch(this.mapper(t));
   }
 }
 
+/**
+ * @deprecated Use {@link rafCmd} and manage
+ * @param mapper
+ */
 export function onAnimationFrame<M>(mapper: (t: number) => M): Sub<M> {
   return new RafSub(mapper);
 }
+
+class RafCmd<Msg> extends Cmd<Msg> {
+  constructor(private readonly mapper: (t: number) => Msg) {
+    super();
+  }
+
+  execute(dispatch: Dispatcher<Msg>): void {
+    requestAnimationFrame((t) => dispatch(this.mapper(t)));
+  }
+}
+
+export function rafCmd<Msg>(mapper: (t: number) => Msg): Cmd<Msg> {
+  return new RafCmd(mapper);
+}

samples/src/Samples/Raf.tsx

@@ -23,22 +23,28 @@
  *
  */
 
-import { Dispatcher, Cmd, noCmd, Sub, onAnimationFrame } from 'tea-cup-core';
+import { Cmd, Dispatcher, noCmd, rafCmd, Sub } from 'tea-cup-core';
 import * as React from 'react';
 
 export interface Model {
   readonly started: boolean;
   readonly t: number;
+  readonly t2: number;
   readonly fps: number;
   readonly animText: string;
 }
 
-export type Msg = { type: 'raf'; t: number } | { type: 'toggle' } | { type: 'text-changed'; text: string };
+export type Msg =
+  | { type: 'raf'; t: number }
+  | { type: 'toggle' }
+  | { type: 'text-changed'; text: string }
+  | { type: 'raf2'; t: number };
 
 export function init() {
   return noCmd<Model, Msg>({
     started: false,
     t: 0,
+    t2: 0,
     fps: 0,
     animText: 'This text gets animated...',
   });
@@ -65,6 +71,9 @@ export function view(dispatch: Dispatcher<Msg>, model: Model) {
         />
       </div>
       <span>Time = {Math.round(model.t)}</span>
+      <br />
+      <span>t2 = {Math.round(model.t2)}</span>
+      <br />
       <button onClick={(_) => dispatch({ type: 'toggle' })}>{model.started ? 'Stop' : 'Start'}</button>
       {fps}
       {anim}
@@ -101,18 +110,43 @@ function viewAnim(text: String, t: number) {
 export function update(msg: Msg, model: Model): [Model, Cmd<Msg>] {
   switch (msg.type) {
     case 'toggle':
-      return noCmd({ ...model, started: !model.started });
-    case 'raf':
-      const delta = msg.t - model.t;
-      const fps = delta === 0
-        ? model.fps
-        : 1000 / delta;
-      return noCmd({
+      const newModel: Model = {
         ...model,
-        t: msg.t,
-        fps: fps,
-      });
+        started: !model.started,
+      };
+      return [
+        newModel,
+        newModel.started
+          ? Cmd.batch([
+              rafCmd((t: number) => ({ type: 'raf', t } as Msg)),
+              rafCmd((t: number) => ({ type: 'raf2', t } as Msg)),
+            ])
+          : Cmd.none(),
+      ];
+    case 'raf': {
+      const delta = msg.t - model.t;
+      const fps = delta === 0 ? model.fps : 1000 / delta;
+      const cmd: Cmd<Msg> = model.started ? rafCmd((t: number) => ({ type: 'raf', t } as Msg)) : Cmd.none();
+      return [
+        {
+          ...model,
+          t: msg.t,
+          fps: fps,
+        },
+        cmd,
+      ];
+    }
 
+    case 'raf2': {
+      const cmd: Cmd<Msg> = model.started ? rafCmd((t: number) => ({ type: 'raf2', t } as Msg)) : Cmd.none();
+      return [
+        {
+          ...model,
+          t2: msg.t,
+        },
+        cmd,
+      ];
+    }
     case 'text-changed':
       return noCmd({
         ...model,
@@ -121,12 +155,6 @@ export function update(msg: Msg, model: Model): [Model, Cmd<Msg>] {
   }
 }
 
-export function subscriptions(model: Model) {
-  if (model.started) {
-    return onAnimationFrame((t: number) => {
-      return { type: 'raf', t: t } as Msg;
-    });
-  } else {
-    return Sub.none<Msg>();
-  }
+export function subscriptions(model: Model): Sub<Msg> {
+  return Sub.none();
 }

tea-cup/src/TeaCup/Program.ts

@@ -91,10 +91,8 @@ export class Program<Model, Msg> extends Component<ProgramProps<Model, Msg>, nev
 
       const d = this.dispatch.bind(this);
 
-      setTimeout(() => {
-        newSub.init(d);
-        prevSub?.release();
-      });
+      newSub.init(d);
+      prevSub?.release();
 
       // perform commands in a separate timout, to
       // make sure that this dispatch is done