Merge pull request #96 from vankeisb/feature/fix-subs

Fix subs

Author: vankeisb

.circleci/config.yml

@@ -1,4 +1,6 @@
-version: 2
+version: 2.1
+orbs:
+  browser-tools: circleci/browser-tools@1.1.1
 
 defaults: &defaults
   working_directory: ~/repo
@@ -16,6 +18,31 @@ jobs:
           root: ~/repo
           paths: .
 
+  webtests:
+    working_directory: ~/repo
+    docker:
+      - image: circleci/openjdk:11-jdk-browsers
+    environment:
+      DISPLAY: :99
+
+    steps:
+      - run: sudo Xvfb :99 -screen 0 1920x1200x24 > /dev/null 2>&1 &
+      - attach_workspace:
+          at: ~/repo
+      - browser-tools/install-chrome
+      - browser-tools/install-chromedriver
+      - run:
+          command: |
+            google-chrome --version
+            chromedriver --version
+            ps -efa | grep Xvfb
+          name: Check install
+      - run: cd webtests && export DISPLAY=:99 && mvn clean install -Dwebdriver.chrome.driver=/usr/local/bin/chromedriver
+      - store_artifacts:
+          path: ~/repo/webtests/target/surefire-reports
+      - store_artifacts:
+          path: ~/repo/webtests/target/videos
+
   deploy:
     <<: *defaults
     steps:
@@ -34,9 +61,13 @@ workflows:
           filters:
             tags:
               only: /\d+\.\d+\.\d+/
+      - webtests:
+          requires:
+            - build
       - deploy:
           requires:
             - build
+            - webtests
           filters:
             tags:
               only: /\d+\.\d+\.\d+/

build.sh

@@ -5,4 +5,5 @@ cd core &&          \
 cd ../tea-cup &&    \
 ./build.sh &&       \
 cd ../samples &&    \
-yarn test --watchAll=false
+yarn test --watchAll=false && \
+yarn build

core/src/TeaCup/Animation.ts

@@ -25,20 +25,6 @@
 
 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;
-    });
-  }
-}
-
 class RafSub<M> extends Sub<M> {
   readonly mapper: (t: number) => M;
 
@@ -49,13 +35,9 @@ 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(() => {
+      this.isActive() && requestAnimationFrame((t) => this.trigger(t));
+    });
   }
 
   trigger(t: number) {

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/App.tsx

@@ -24,18 +24,7 @@
  */
 
 import React from 'react';
-import {
-  Cmd,
-  Dispatcher,
-  just,
-  map,
-  Maybe,
-  maybeOf,
-  noCmd,
-  nothing,
-  Sub,
-  Task,
-} from 'tea-cup-core';
+import { Cmd, Dispatcher, just, map, Maybe, maybeOf, noCmd, nothing, Sub, Task } from 'tea-cup-core';
 import {
   DevTools,
   newUrl,
@@ -60,7 +49,7 @@ import * as TimeSample from './Samples/TimeSample';
 import * as EventsSample from './Samples/EventsSample';
 import * as SelectSample from './Samples/SelectSample';
 import * as PortsSample from './Samples/PortsSample';
-import { appSamplePorts } from "./Samples/PortsSample";
+import { appSamplePorts } from './Samples/PortsSample';
 
 enum Tab {
   All,
@@ -367,7 +356,7 @@ function mapPortsSample(m: PortsSample.Msg): Msg {
   return {
     type: 'portsSample',
     child: m,
-  }
+  };
 }
 
 function view(dispatch: Dispatcher<Msg>, model: Model) {
@@ -464,16 +453,16 @@ function viewTodos(dispatch: Dispatcher<Msg>, todoMvc: TodoMvc) {
         {active ? (
           <span>{label}</span>
         ) : (
-            <a
-              href="#x"
-              onClick={(e) => {
-                e.preventDefault();
-                dispatch({ type: 'tabClicked', tab: t });
-              }}
-            >
-              {label}
-            </a>
-          )}
+          <a
+            href="#x"
+            onClick={(e) => {
+              e.preventDefault();
+              dispatch({ type: 'tabClicked', tab: t });
+            }}
+          >
+            {label}
+          </a>
+        )}
       </li>
     );
   }
@@ -485,46 +474,46 @@ function viewTodos(dispatch: Dispatcher<Msg>, todoMvc: TodoMvc) {
       {todos.length === 0 ? (
         <p>You have nothing to do ! Neat !!</p>
       ) : (
-          <div>
-            <ul>
-              {viewTab(Tab.All)}
-              {viewTab(Tab.Open)}
-              {viewTab(Tab.Closed)}
-            </ul>
-            <ul>
-              {todos
-                .filter((todo) => {
-                  switch (tab) {
-                    case Tab.All:
-                      return true;
-                    case Tab.Open:
-                      return !todo.done;
-                    case Tab.Closed:
-                      return todo.done;
-                  }
-                  return false;
-                })
-                .map((todo) => {
-                  const style = {
-                    textDecoration: todo.done ? 'line-through' : 'none',
-                  };
-                  return (
-                    <li key={todo.id} style={style}>
-                      <a
-                        href="#x"
-                        onClick={(e) => {
-                          e.preventDefault();
-                          dispatch(navigateTo(todoRoute(todo.id)));
-                        }}
-                      >
-                        {todo.text}
-                      </a>
-                    </li>
-                  );
-                })}
-            </ul>
-          </div>
-        )}
+        <div>
+          <ul>
+            {viewTab(Tab.All)}
+            {viewTab(Tab.Open)}
+            {viewTab(Tab.Closed)}
+          </ul>
+          <ul>
+            {todos
+              .filter((todo) => {
+                switch (tab) {
+                  case Tab.All:
+                    return true;
+                  case Tab.Open:
+                    return !todo.done;
+                  case Tab.Closed:
+                    return todo.done;
+                }
+                return false;
+              })
+              .map((todo) => {
+                const style = {
+                  textDecoration: todo.done ? 'line-through' : 'none',
+                };
+                return (
+                  <li key={todo.id} style={style}>
+                    <a
+                      href="#x"
+                      onClick={(e) => {
+                        e.preventDefault();
+                        dispatch(navigateTo(todoRoute(todo.id)));
+                      }}
+                    >
+                      {todo.text}
+                    </a>
+                  </li>
+                );
+              })}
+          </ul>
+        </div>
+      )}
     </div>
   );
 }
@@ -566,7 +555,6 @@ function viewSamples(dispatch: Dispatcher<Msg>, samples: Samples) {
   return (
     <div>
       {backToHome(dispatch)}
-      <h1>Samples</h1>
       <p>
         This is the samples app for <code>react-tea-cup</code>.
       </p>
@@ -594,10 +582,14 @@ function viewSamples(dispatch: Dispatcher<Msg>, samples: Samples) {
       {SelectSample.view(map(dispatch, mapSelectSample), samples.select)}
       <h2>Ports</h2>
       {PortsSample.view(map(dispatch, mapPortsSample), samples.ports)}
-      <button onClick={() => {
-        // call ports without going through any update loop
-        appSamplePorts.setCounter.send(0)
-      }}>Reset using port</button>
+      <button
+        onClick={() => {
+          // call ports without going through any update loop
+          appSamplePorts.setCounter.send(0);
+        }}
+      >
+        Reset using port
+      </button>
     </div>
   );
 }
@@ -661,7 +653,7 @@ function update(msg: Msg, model: Model): [Model, Cmd<Msg>] {
         const macTime = TimeSample.update(msg.child, s.time);
         return [{ ...s, time: macTime[0] }, macTime[1].map(mapTimeSample)];
       });
-    case "portsSample":
+    case 'portsSample':
       return mapSample((s: Samples) => {
         const mac = PortsSample.update(msg.child, s.ports);
         return [{ ...s, ports: mac[0] }, mac[1].map(mapPortsSample)];

samples/src/Samples/Counter.tsx

@@ -42,10 +42,14 @@ export function init(): [Model, Cmd<Msg>] {
 // need this "dispatch" arg, so that you can emit Msgs
 export function view(dispatch: Dispatcher<Msg>, model: Model) {
   return (
-    <div className="counter">
-      <button onClick={(_) => dispatch({ type: 'dec' })}>-</button>
-      <span>{model}</span>
-      <button onClick={(_) => dispatch({ type: 'inc' })}>+</button>
+    <div className="counter" id="sample-counter">
+      <button id="counter-sub" onClick={(_) => dispatch({ type: 'dec' })}>
+        -
+      </button>
+      <span id="counter-value">{model}</span>
+      <button id="counter-add" onClick={(_) => dispatch({ type: 'inc' })}>
+        +
+      </button>
     </div>
   );
 }