Do not clear dispatcher in Subs, use isActive() instead

Fix RAF (no Cmds)
Fix Doc events (timeout)

Author: vankeisb

core/src/TeaCup/Animation.ts

@@ -24,8 +24,6 @@
  */
 
 import { Sub } from './Sub';
-import { Cmd } from './Cmd';
-import { Dispatcher } from './Dispatcher';
 
 class RafSub<M> extends Sub<M> {
   readonly mapper: (t: number) => M;
@@ -38,7 +36,7 @@ class RafSub<M> extends Sub<M> {
   protected onInit() {
     super.onInit();
     setTimeout(() => {
-      requestAnimationFrame((t) => this.trigger(t));
+      this.isActive() && requestAnimationFrame((t) => this.trigger(t));
     });
   }
 
@@ -47,24 +45,6 @@ class RafSub<M> extends Sub<M> {
   }
 }
 
-/**
- * @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);
-}

core/src/TeaCup/Sub.ts

@@ -27,6 +27,7 @@ import { Dispatcher } from './Dispatcher';
 
 export abstract class Sub<Msg> {
   protected dispatcher: Dispatcher<Msg> | undefined;
+  private active: boolean = false;
 
   static none<Msg>(): Sub<Msg> {
     return new SubNone();
@@ -38,16 +39,21 @@ export abstract class Sub<Msg> {
 
   init(dispatch: Dispatcher<Msg>): void {
     this.dispatcher = dispatch;
+    this.active = true;
     this.onInit();
   }
 
   release(): void {
-    this.dispatcher = undefined;
+    this.active = false;
     this.onRelease();
   }
 
+  isActive() {
+    return this.active;
+  }
+
   protected dispatch(m: Msg): void {
-    this.dispatcher && this.dispatcher(m);
+    this.dispatcher?.(m);
   }
 
   protected onInit() {}

samples/src/Samples/EventsSample.tsx

@@ -25,37 +25,41 @@
 
 import * as React from 'react';
 import { Dispatcher, Cmd, Sub, noCmd, nothing, just, Maybe } from 'tea-cup-core';
-import {DocumentEvents, WindowEvents} from "react-tea-cup";
+import { DocumentEvents, WindowEvents } from 'react-tea-cup';
 
 export type Model = {
-  clicked: Maybe<MousePosition>
-  moved: Maybe<MousePosition>
-  scrolled: Maybe<Position>
-  nbResizeLeft: number
-  nbResizeRight: number
+  clicked: Maybe<MousePosition>;
+  moved: Maybe<MousePosition>;
+  scrolled: Maybe<Position>;
+  nbResizeLeft: number;
+  nbResizeRight: number;
 };
 
 type MousePosition = {
   pos: Position;
   page: Position;
   offset: Position;
-}
+};
 
-type Position = [number, number]
+type Position = [number, number];
 
-export type Msg = {
-  type: 'clicked',
-  position: MousePosition
-} | {
-  type: 'moved',
-  position: MousePosition
-} | {
-  type: 'resized',
-  left: boolean
-} | {
-  type: 'scrolled',
-  scroll: Position
-};
+export type Msg =
+  | {
+      type: 'clicked';
+      position: MousePosition;
+    }
+  | {
+      type: 'moved';
+      position: MousePosition;
+    }
+  | {
+      type: 'resized';
+      left: boolean;
+    }
+  | {
+      type: 'scrolled';
+      scroll: Position;
+    };
 
 export function init(): [Model, Cmd<Msg>] {
   return noCmd({
@@ -70,18 +74,9 @@ export function init(): [Model, Cmd<Msg>] {
 export function view(dispatch: Dispatcher<Msg>, model: Model) {
   return (
     <div className="events">
-      {model.clicked
-        .map(viewMousePosition('Clicked'))
-        .withDefault(<div>Waiting for click ...</div>)
-      }
-      {model.moved
-        .map(viewMousePosition('Moved'))
-        .withDefault(<div>Waiting for move ...</div>)
-      }
-      {model.scrolled
-        .map(viewPosition('Scrolled'))
-        .withDefault(<div>Waiting for move ...</div>)
-      }
+      {model.clicked.map(viewMousePosition('Clicked')).withDefault(<div>Waiting for click ...</div>)}
+      {model.moved.map(viewMousePosition('Moved')).withDefault(<div>Waiting for move ...</div>)}
+      {model.scrolled.map(viewPosition('Scrolled')).withDefault(<div>Waiting for move ...</div>)}
       <div>resized left : {model.nbResizeLeft}</div>
       <div>resized right : {model.nbResizeRight}</div>
     </div>
@@ -93,21 +88,21 @@ export function update(msg: Msg, model: Model): [Model, Cmd<Msg>] {
     case 'clicked': {
       const model1: Model = {
         ...model,
-        clicked: just(msg.position)
+        clicked: just(msg.position),
       };
       return [model1, Cmd.none()];
     }
     case 'moved': {
       const model1: Model = {
         ...model,
-        moved: just(msg.position)
+        moved: just(msg.position),
       };
       return [model1, Cmd.none()];
     }
     case 'scrolled': {
       const model1: Model = {
         ...model,
-        scrolled: just(msg.scroll)
+        scrolled: just(msg.scroll),
       };
       return [model1, Cmd.none()];
     }
@@ -126,55 +121,62 @@ 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)),
+    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]
+        scroll: [window.scrollX, window.scrollY],
       } as Msg;
     }),
     windowEvents.on('resize', () => {
       return {
         type: 'resized',
-        left: true
+        left: true,
       } as Msg;
     }),
     windowEvents.on('resize', () => {
       return {
         type: 'resized',
-        left: false
+        left: false,
       } as Msg;
     }),
   ]);
 }
 
 function viewMousePosition(title: string) {
   return (position: MousePosition) => {
-    return (<div>
-      <b>{title}: </b>
-      {viewPosition('Position')(position.pos)}&nbsp;
-      {viewPosition('Page')(position.page)}&nbsp;
-      {viewPosition('Offset')(position.offset)}
-    </div>
+    return (
+      <div>
+        <b>{title}: </b>
+        {viewPosition('Position')(position.pos)}&nbsp;
+        {viewPosition('Page')(position.page)}&nbsp;
+        {viewPosition('Offset')(position.offset)}
+      </div>
     );
-  }
+  };
 }
 
 function viewPosition(title: string) {
@@ -184,5 +186,5 @@ function viewPosition(title: string) {
         {title} {position[0]},{position[1]}&nbsp;
       </>
     );
-  }
+  };
 }

samples/src/Samples/Raf.tsx

@@ -23,7 +23,7 @@
  *
  */
 
-import { Cmd, Dispatcher, noCmd, rafCmd, Sub } from 'tea-cup-core';
+import { Cmd, Dispatcher, noCmd, onAnimationFrame, Sub } from 'tea-cup-core';
 import * as React from 'react';
 
 export interface Model {
@@ -110,42 +110,22 @@ function viewAnim(text: String, t: number) {
 export function update(msg: Msg, model: Model): [Model, Cmd<Msg>] {
   switch (msg.type) {
     case 'toggle':
-      const newModel: Model = {
-        ...model,
-        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(),
-      ];
+      return noCmd({ ...model, started: !model.started });
     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,
-      ];
+      return noCmd({
+        ...model,
+        t: msg.t,
+        fps: fps,
+      });
     }
 
     case 'raf2': {
-      const cmd: Cmd<Msg> = model.started ? rafCmd((t: number) => ({ type: 'raf2', t } as Msg)) : Cmd.none();
-      return [
-        {
-          ...model,
-          t2: msg.t,
-        },
-        cmd,
-      ];
+      return noCmd({
+        ...model,
+        t2: msg.t,
+      });
     }
     case 'text-changed':
       return noCmd({
@@ -156,5 +136,16 @@ export function update(msg: Msg, model: Model): [Model, Cmd<Msg>] {
 }
 
 export function subscriptions(model: Model): Sub<Msg> {
-  return Sub.none();
+  if (model.started) {
+    return Sub.batch([
+      onAnimationFrame((t: number) => {
+        return { type: 'raf', t: t } as Msg;
+      }),
+      onAnimationFrame((t: number) => {
+        return { type: 'raf2', t: t } as Msg;
+      }),
+    ]);
+  } else {
+    return Sub.none<Msg>();
+  }
 }