Skip to content

v0.5.0

Compare
Choose a tag to compare
@LevelbossMike LevelbossMike released this 01 Oct 10:52
· 324 commits to master since this release

This is a breaking release. You need to update your statechart configurations going from 0.4.0 to 0.5.0.

No more Statechart-mixin

Instead of relying on magically adding functionality to your Ember-Objects via a mixin ember-statechart will now rely on a statechart-computed-property-macro to add statechart functionality to your Ember-Objects.

You have to refactor the old way:

import Component from '@ember/component';
import Statechart from 'ember-statecharts/mixins/statechart';
import { matchesState } from 'ember-statecharts/computed';

export default Component.extend(Statechart, {
  statechart: computed(function() {
    initial: 'powerOff',
    states: {
      powerOff: {
        on: {
          power: 'powerOn'
        }
      },
      powerOn: {
        on: {
          power: 'powerOff'
        },
        initial: 'stopped',
        states: {
          stopped: {},
          playing: {}
        }
      }
    }
  }),

  playerIsStopped: matchesState({
    powerOn: 'stopped'
  }),
  
  actions: {
    power() {
      return this.states.send('power');
    }
  }
})

To this:

import Component from '@ember/component';
import { statechart, matchesState } from 'ember-statecharts/computed';

export default Component.extend({
  statechart: statechart({
    initial: 'powerOff',
    states: {
      powerOff: {
        on: {
          power: 'powerOn'
        }
      },
      powerOn: {
        on: {
          power: 'powerOff'
        },
        initial: 'stopped',
        states: {
          stopped: {},
          playing: {}
        }
      }
    }
  }),
  
  playerIsStopped: matchesState({
    powerOn: 'stopped'
  }),

  actions: {
    power() {
      return this.statechart.send('power');
    }
  }
})

Overall this is a very minimal change. If you want to use statechart-options (for guards via string references introduced in v0.4.0) this is still possible. Instead of an array of parameters you will pass two parameters directly instead:

const wat = EmberObject.extend({
  power: 1,

  statechart: statechart(
    {
      initial: 'powerOff',
      states: {
        powerOff: {
          on: {
            power: {
              powerOn: {
                cond: 'enoughPowerIsAvailable'
              }
            }
          }
        },
        powerOn: {
          initial: 'stopped',
          states: {
            stopped: {},
            playing: {}
          },
          on: {
            power: 'powerOff'
          }
        }
      }
    },
    {
      guards: {
        enougPowerIsAvailable: (context, eventData) => {
          return context.get('power') > 9000;
        }
      }
    }
  })
});


wat.get('statechart').send('power'); // won't transition power is not over 9000

wat.set('power', 9001);

wat.get('statechart').send('power') // will transition to `powerOn` as power is now over 9000