ensure hooks are called in correct order even when transition is asynchronous (onbeforeevent, onleavestate, onenterstate, onafterevent)

Author: jakesgordon

README.md

@@ -8,12 +8,12 @@ Something like
 
     fsm.onleavemenu = function() {
       $('menu').fade(function() {
-        fsm.next();
+        fsm.transition();
       });
     }
 
     fsm.onentergame = function() {
-      // this doesn't get called until fsm.next() is called when the menu has finished fading
+      // this doesn't get called until fsm.transition() is called when the menu has finished fading
     }
 
 Or.... something else ! Have to wait and see how it pans out (without breaking existing synchronous behavior)

RELEASE_NOTES.md

@@ -1,4 +1,5 @@
-Version 1.3.0 (unreleased)
+
+Version 2.0.0 (unreleased)
 --------------------------
  * adding support for `async` event transitions (see README)
  * added a generic `onchangestate(from,to)` hook to detect all state changes with a single callback.

state-machine.js

@@ -76,10 +76,11 @@ StateMachine = {
       func.apply(this, args);
   },
 
-  transition: function(from, to, args) {
+  transition: function(name, from, to, args) {
     this.current = to;
     StateMachine.enterState.call(this, to, args);
     StateMachine.changeState.call(this, from, to, args);
+    StateMachine.afterEvent.call(this, name, args);
   },
 
   buildEvent: function(name, map) {
@@ -97,20 +98,17 @@ StateMachine = {
       var self  = this;
       var args  = Array.prototype.slice.call(arguments);
 
-      if (StateMachine.beforeEvent.call(this, name, args) === false)
-        return;
-
       if (this.current != to) {
-        this.transition      = function() { StateMachine.transition.call(self, from, to, args); self.transition = null; };
+        if (StateMachine.beforeEvent.call(this, name, args) === false)
+          return;
+        this.transition      = function() { StateMachine.transition.call(self, name, from, to, args); self.transition = null; };
         this.transition.from = from;
         this.transition.to   = to;
         StateMachine.exitState.call(this, this.current, arguments);
         if (!async && this.transition) // if not async OR user already called transition method (e.g. in an onleavestate hook)
           this.transition();
       }
 
-      StateMachine.afterEvent.call(this, name, arguments);
-
     };
   }
 

test/test_async.js

@@ -157,3 +157,57 @@ test("state transition fired without completing previous transition", function()
 
 //-----------------------------------------------------------------------------
 
+test("hooks are called when appropriate", function() {
+
+  var fsm = StateMachine.create({
+    initial: 'green',
+    events: [
+      { name: 'warn',  from: 'green',  to: 'yellow', async: true },
+      { name: 'panic', from: 'yellow', to: 'red',    async: true },
+      { name: 'calm',  from: 'red',    to: 'yellow', async: true },
+      { name: 'clear', from: 'yellow', to: 'green',  async: true },
+  ]});
+
+  var called = [];
+
+  // generic state hook
+  fsm.onchangestate = function(from,to) { called.push('onchange from ' + from + ' to ' + to); };
+
+  // state hooks
+  fsm.onentergreen    = function() { called.push('onentergreen');     };
+  fsm.onleavegreen    = function() { called.push('onleavegreen');     };
+  fsm.onenteryellow   = function() { called.push('onenteryellow');    };
+  fsm.onleaveyellow   = function() { called.push('onleaveyellow');    };
+  fsm.onenterred      = function() { called.push('onenterred');       };
+  fsm.onleavered      = function() { called.push('onleavered');       };
+
+  // event hooks
+  fsm.onbeforewarn    = function() { called.push('onbeforewarn');     };
+  fsm.onafterwarn     = function() { called.push('onafterwarn');      };
+  fsm.onbeforepanic   = function() { called.push('onbeforepanic');    };
+  fsm.onafterpanic    = function() { called.push('onafterpanic');     };
+  fsm.onbeforecalm    = function() { called.push('onbeforecalm');     };
+  fsm.onaftercalm     = function() { called.push('onaftercalm');      };
+  fsm.onbeforeclear   = function() { called.push('onbeforeclear');    };
+  fsm.onafterclear    = function() { called.push('onafterclear');     };
+
+  called = [];
+  fsm.warn();       deepEqual(called, ['onbeforewarn', 'onleavegreen']);
+  fsm.transition(); deepEqual(called, ['onbeforewarn', 'onleavegreen', 'onenteryellow', 'onchange from green to yellow', 'onafterwarn']);
+
+  called = [];
+  fsm.panic();      deepEqual(called, ['onbeforepanic', 'onleaveyellow']);
+  fsm.transition(); deepEqual(called, ['onbeforepanic', 'onleaveyellow', 'onenterred', 'onchange from yellow to red', 'onafterpanic']);
+
+  called = [];
+  fsm.calm();       deepEqual(called, ['onbeforecalm', 'onleavered']);
+  fsm.transition(); deepEqual(called, ['onbeforecalm', 'onleavered', 'onenteryellow', 'onchange from red to yellow', 'onaftercalm']);
+
+  called = [];
+  fsm.clear();      deepEqual(called, ['onbeforeclear', 'onleaveyellow']);
+  fsm.transition(); deepEqual(called, ['onbeforeclear', 'onleaveyellow', 'onentergreen', 'onchange from yellow to green', 'onafterclear']);
+
+});
+
+//-----------------------------------------------------------------------------
+