Program inits/releases Subs in timeout, to allow previous dispatch to finish without side-effects on other Subs.

Author: vankeisb

core/src/TeaCup/Animation.ts

@@ -27,25 +27,11 @@ import { Sub } from './Sub';
 
 let subs: Array<RafSub<any>> = [];
 
-let ticking = false;
-
 function tick() {
-  // console.log("tick()");
-  if (!ticking) {
-    ticking = true;
-    const subsNow = [...subs];
-    // console.log("tick() subsNow=" + subsNow);
-    if (subsNow.length > 0) {
-      requestAnimationFrame((t: number) => {
-        // console.log("tick() trigger subsNow=" + subsNow);
-        subsNow.forEach((s) => s.trigger(t));
-        ticking = false;
-        // console.log("tick() recursing");
-        tick();
-      });
-    } else {
-      ticking = false;
-    }
+  if (subs.length > 0) {
+    requestAnimationFrame((t: number) => {
+      subs.forEach((s) => s.trigger(t));
+    });
   }
 }
 
@@ -66,9 +52,6 @@ class RafSub<M> extends Sub<M> {
   protected onRelease() {
     super.onRelease();
     subs = subs.filter((s) => s !== this);
-    if (subs.length === 0) {
-      ticking = false;
-    }
   }
 
   trigger(t: number) {

samples/src/Samples/EventsSample.tsx

@@ -126,30 +126,30 @@ const windowEvents = new WindowEvents<Msg>();
 
 export function subscriptions(model: Model): Sub<Msg> {
   return Sub.batch([
-    documentEvents.on('click', (e: MouseEvent) => (
-      {
-        type: 'clicked',
-        position: {
-          pos: [e.x, e.y],
-          page: [e.pageX, e.pageY],
-          offset: [e.offsetX, e.offsetY]
-        }
-      } as Msg
-    )),
-    documentEvents.on('mousemove', (e: MouseEvent) => ({
-      type: 'moved',
-      position: {
-        pos: [e.x, e.y],
-        page: [e.pageX, e.pageY],
-        offset: [e.offsetX, e.offsetY]
-      }
-    } as Msg)),
-    windowEvents.on('scroll', (e: Event) => {
-      return {
-        type: 'scrolled',
-        scroll: [window.scrollX, window.scrollY]
-      } as Msg;
-    }),
+    // documentEvents.on('click', (e: MouseEvent) => (
+    //   {
+    //     type: 'clicked',
+    //     position: {
+    //       pos: [e.x, e.y],
+    //       page: [e.pageX, e.pageY],
+    //       offset: [e.offsetX, e.offsetY]
+    //     }
+    //   } as Msg
+    // )),
+    // documentEvents.on('mousemove', (e: MouseEvent) => ({
+    //   type: 'moved',
+    //   position: {
+    //     pos: [e.x, e.y],
+    //     page: [e.pageX, e.pageY],
+    //     offset: [e.offsetX, e.offsetY]
+    //   }
+    // } as Msg)),
+    // windowEvents.on('scroll', (e: Event) => {
+    //   return {
+    //     type: 'scrolled',
+    //     scroll: [window.scrollX, window.scrollY]
+    //   } as Msg;
+    // }),
     windowEvents.on('resize', () => {
       return {
         type: 'resized',

samples/src/Samples/Raf.tsx

@@ -104,7 +104,9 @@ export function update(msg: Msg, model: Model): [Model, Cmd<Msg>] {
       return noCmd({ ...model, started: !model.started });
     case 'raf':
       const delta = msg.t - model.t;
-      const fps = 1000 / delta;
+      const fps = delta === 0
+        ? model.fps
+        : 1000 / delta;
       return noCmd({
         ...model,
         t: msg.t,

samples/src/Samples/SelectSample.tsx

@@ -47,7 +47,6 @@ export function init(): [Model, Cmd<Msg>] {
 
 export function view(dispatch: Dispatcher<Msg>, model: Model) {
     const value = model.selected.withDefault("select me");
-    console.log("rendering value", value)
     return (
         <div className="select">
             <p><em>(Use me with Firefox, too.)</em></p>

tea-cup/src/TeaCup/DocumentEvents.ts

@@ -42,15 +42,6 @@ class DocSub<K extends keyof Map, Map, Msg> extends Sub<Msg> {
         this.listener = (e) => this.dispatch(this.mapper(e));
     }
 
-    protected dispatch(m: Msg) {
-        const d = this.dispatcher;
-        if (d !== undefined) {
-            setTimeout(() => {
-                d(m);
-            });
-        }
-    }
-
     protected onInit() {
         super.onInit();
         this.documentEvents.doAddListener(this.key, this.listener, this.options)

tea-cup/src/TeaCup/Program.ts

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