Merge branch 'release/1.1.0'

vankeisb · Sep 30, 2020 · 8466651 · 8466651
2 parents d7239d3 + ef1c4c6
commit 8466651
Show file tree

Hide file tree

Showing 9 changed files with 96 additions and 100 deletions.
diff --git a/.grenrc.js b/.grenrc.js
@@ -0,0 +1,7 @@
+module.exports = {
+    "dataSource": "prs",
+    "prefix": "v",
+    "onlyMilestones": false,
+    "groupBy": "label",
+    "changelogFilename": "CHANGELOG.md"
+}
diff --git a/build.sh b/build.sh
@@ -4,4 +4,4 @@ cd core &&          \
 cd ../tea-cup &&    \
 ./build.sh &&       \
 cd ../samples &&    \
-yarn test -- --watchAll=false
+yarn test --watchAll=false
diff --git a/core/package.json b/core/package.json
@@ -1,6 +1,6 @@
 {
   "name": "tea-cup-core",
-  "version": "1.0.2",
+  "version": "1.1.0",
   "description": "react-tea-cup core classes and utilities (Maybe etc)",
   "author": "Rémi Van Keisbelck <[email protected]>",
   "license": "MIT",

diff --git a/samples/package.json b/samples/package.json
@@ -11,7 +11,7 @@
     "react": "^16.7.0",
     "react-dom": "^16.7.0",
     "react-scripts": "3.4.1",
-    "react-tea-cup": "1.0.2"
+    "react-tea-cup": "1.1.0"
   },
   "scripts": {
     "start": "react-scripts start",

diff --git a/samples/src/App.tsx b/samples/src/App.tsx
@@ -645,14 +645,16 @@ function onUrlChange(l: Location): Msg {
 }
 
 const App = () => (
-  <ProgramWithNav
-    init={init}
-    view={view}
-    update={update}
-    subscriptions={subscriptions}
-    onUrlChange={onUrlChange}
-    devTools={withReduxDevTools(DevTools.init<Model, Msg>(window))}
-  />
+    <React.StrictMode>
+      <ProgramWithNav
+          init={init}
+          view={view}
+          update={update}
+          subscriptions={subscriptions}
+          onUrlChange={onUrlChange}
+          devTools={withReduxDevTools(DevTools.init<Model, Msg>(window))}
+      />
+    </React.StrictMode>
 );
 
 export default App;
diff --git a/samples/src/Samples/Raf.tsx b/samples/src/Samples/Raf.tsx
@@ -82,7 +82,6 @@ function viewAnim(text: String, t: number) {
       // height: "24px",
       // width: "12px"
       display: 'block',
-      'white-space': 'pre',
       fontSize: 32 + y1 + 'px',
     };
     return (

diff --git a/tea-cup/package.json b/tea-cup/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-tea-cup",
-  "version": "1.0.2",
+  "version": "1.1.0",
   "description": "Put some TEA in your React.",
   "author": "Rémi Van Keisbelck <[email protected]>",
   "license": "MIT",
@@ -19,7 +19,7 @@
     "samples": "tsc --outFile ./dist/Samples/index.js && cp ./src/Samples/index.html ./dist/Samples"
   },
   "dependencies": {
-    "tea-cup-core": "1.0.2",
+    "tea-cup-core": "1.1.0",
     "react": "^16.7.0"
   },
   "devDependencies": {

diff --git a/tea-cup/src/TeaCup/Navigation.tsx b/tea-cup/src/TeaCup/Navigation.tsx
@@ -44,7 +44,7 @@ export interface NavProps<Model, Msg> {
 /**
  * Program that handles navigation (routing).
  */
-export class ProgramWithNav<Model, Msg> extends Component<NavProps<Model, Msg>, any> {
+export class ProgramWithNav<Model, Msg> extends Component<NavProps<Model, Msg>, never> {
   private listener: Maybe<EventListener>;
   private readonly ref: RefObject<Program<Model, Msg>> = createRef();
 
@@ -76,7 +76,7 @@ export class ProgramWithNav<Model, Msg> extends Component<NavProps<Model, Msg>,
     window.addEventListener('popstate', l);
   }
 
-  componentWillMount(): void {
+  componentWillUnmount() {
     if (this.listener.type === 'Just') {
       window.removeEventListener('popstate', this.listener.value);
       this.listener = nothing;

diff --git a/tea-cup/src/TeaCup/Program.ts b/tea-cup/src/TeaCup/Program.ts
@@ -39,11 +39,6 @@ export interface ProgramProps<Model, Msg> {
   devTools?: DevTools<Model, Msg>;
 }
 
-interface ProgramState<Model> {
-  currentModel: Model;
-  currentSub: Sub<any>;
-}
-
 class Guid {
   static newGuid() {
     return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
@@ -57,63 +52,14 @@ class Guid {
 /**
  * A React component that holds a TEA "program", provides the Dispatcher, and implements the MVU loop.
  */
-export class Program<Model, Msg> extends Component<ProgramProps<Model, Msg>, ProgramState<Model>> {
+export class Program<Model, Msg> extends Component<ProgramProps<Model, Msg>, never> {
   readonly uuid = Guid.newGuid();
   private readonly bd: Dispatcher<Msg>;
   private readonly devTools?: DevTools<Model, Msg>;
   private count: number = 0;
-
-  private fireEvent(e: DevToolsEvent<Model, Msg>) {
-    if (this.devTools) {
-      this.devTools.onEvent(e);
-    }
-  }
-
-  dispatch(msg: Msg) {
-    if (this.devTools && this.devTools.isPaused()) {
-      // do not process messages if we are paused
-      return;
-    }
-
-    this.setState((state, props) => {
-      this.count++;
-      const count = this.count;
-      const currentModel = state.currentModel;
-      const updated = props.update(msg, currentModel);
-      if (this.devTools) {
-        this.fireEvent({
-          tag: 'updated',
-          msgNum: count,
-          time: new Date().getTime(),
-          msg: msg,
-          modelBefore: currentModel,
-          modelAfter: updated[0],
-          cmd: updated[1],
-        });
-      }
-      const newSub = props.subscriptions(updated[0]);
-      const prevSub = state.currentSub;
-
-      const d = this.dispatch.bind(this);
-
-      newSub.init(d);
-      prevSub.release();
-
-      // perform commands in a separate timout, to
-      // make sure that this dispatch is done
-      setTimeout(() => {
-        // console.log("dispatch: processing commands");
-        // debug("performing command", updated[1]);
-        updated[1].execute(d);
-        // debug("<<<  done");
-      }, 0);
-
-      return {
-        currentModel: updated[0],
-        currentSub: newSub,
-      };
-    });
-  }
+  private readonly initialCmd: Cmd<any>;
+  private currentModel: Model;
+  private currentSub: Sub<Msg>
 
   constructor(props: Readonly<ProgramProps<Model, Msg>>) {
     super(props);
@@ -130,44 +76,86 @@ export class Program<Model, Msg> extends Component<ProgramProps<Model, Msg>, Pro
       });
     }
     const sub = props.subscriptions(mac[0]);
-    this.state = {
-      currentModel: mac[0],
-      currentSub: sub,
-    };
+    this.currentModel = mac[0];
+    this.currentSub = sub;
     // connect to sub
     const d = this.dispatch.bind(this);
     this.bd = d;
     sub.init(d);
+    this.initialCmd = mac[1];
+  }
+
+  private fireEvent(e: DevToolsEvent<Model, Msg>) {
+    if (this.devTools) {
+      this.devTools.onEvent(e);
+    }
+  }
+
+  dispatch(msg: Msg) {
+    if (this.devTools && this.devTools.isPaused()) {
+      // do not process messages if we are paused
+      return;
+    }
+
+    this.count++;
+    const count = this.count;
+    const currentModel = this.currentModel;
+    const updated = this.props.update(msg, currentModel);
+    if (this.devTools) {
+      this.fireEvent({
+        tag: 'updated',
+        msgNum: count,
+        time: new Date().getTime(),
+        msg: msg,
+        modelBefore: currentModel,
+        modelAfter: updated[0],
+        cmd: updated[1],
+      });
+    }
+    const newSub = this.props.subscriptions(updated[0]);
+    const prevSub = this.currentSub;
+
+    const d = this.dispatch.bind(this);
+
+    newSub.init(d);
+    prevSub.release();
+
+    // perform commands in a separate timout, to
+    // make sure that this dispatch is done
+    setTimeout(() => {
+      // console.log("dispatch: processing commands");
+      // debug("performing command", updated[1]);
+      updated[1].execute(d);
+      // debug("<<<  done");
+    }, 0);
+
+    this.currentModel = updated[0];
+    this.currentSub = newSub;
+    this.forceUpdate();
+  }
+
+  componentDidMount() {
     // trigger initial command
     setTimeout(() => {
-      mac[1].execute(d);
+      this.initialCmd.execute(this.bd);
     }, 0);
   }
 
   render(): ReactNode {
-    if (this.state.currentModel === undefined) {
-      // console.log("render : no model, returning null");
-      return null;
-    }
-    const model = this.state.currentModel;
-    // console.log("render : calling view");
-    return this.props.view(this.bd, model);
+    return this.props.view(this.bd, this.currentModel);
   }
 
   setModel(model: Model, withSubs: boolean) {
-    this.setState(state => {
-      let newSub: Sub<Msg>;
-      if (withSubs) {
-        newSub = this.props.subscriptions(model);
-      } else {
-        newSub = Sub.none();
-      }
-      newSub.init(this.bd);
-      state.currentSub.release();
-      return {
-        currentModel: model,
-        currentSub: newSub,
-      };
-    });
+    let newSub: Sub<Msg>;
+    if (withSubs) {
+      newSub = this.props.subscriptions(model);
+    } else {
+      newSub = Sub.none();
+    }
+    newSub.init(this.bd);
+    this.currentSub.release();
+    this.currentModel = model;
+    this.currentSub = newSub;
+    this.forceUpdate();
   }
 }