xstate 3.3.0

on Node.js NPM

There's so many exciting improvements and features in this release. In general, the internal algorithms for determining next state, as well as actions, activities, events, and more were heavily refactored to adhere closer to the SCXML spec, as well as be easier to understand and maintain in the codebase. There's always room for improvement though, and we're always open to PRs!

Features and Improvements

• Actions (onEntry, onExit, actions) can now be named functions, which should make authoring statecharts easier. #47 (📖 Docs)
  • They take in two arguments: extState (the external state passed into the transition(...) method) and event (the event object that caused the transition)
• Guards (cond on transition configs) can now be strings, and referenced by the guards object in the machine config. #57 (docs coming soon!)

const enoughTimeElapsed = (extState, event) => {
  return event.emergency || extState.elapsed > 300;
};

const lightMachine = Machine({
  initial: 'green',
  states: {
	green: {
	  on: {
		TIMER: {
		  // string conditional
		  yellow: { cond: 'enoughTimeElapsed' }
		},
	  }
	},
	yellow: { /* ... */ }
  }
}, {
  // guard config
  guards: { enoughTimeElapsed }
});

• Explicit history states - no more $history magic (this will still work and will be deprecated in 4.0). #86 (📖 Docs)

const historyMachine = Machine({
  initial: 'off',
  states: {
    fanOff: {
      on: {
        // transitions to history state
        POWER: 'fanOn.hist',
        HIGH_POWER: 'fanOn.highPowerHist'
      }
    },
    fanOn: {
      initial: 'first',
      states: {
        first: {
          on: { SWITCH: 'second' }
        },
        second: {
          on: { SWITCH: 'third' }
        },
        third: {},

        // shallow history state
        hist: {
          history: true
        },

        // shallow history state with default
        highPowerHist: {
          history: true,
          target: 'third'
        }
      },
      on: {
        POWER: 'fanOff'
      }
    }
  }
});

• The getShortestPaths graph function now works with conditional guards when passed an external state. #100
• Guard functions (cond) can now access the current state value, meaning you can use matchesState to determine if a transition should occur. #110
• Lots of tests have been added (over 300 now!) and xstate is now even closer to full SCXML compatibility (for most use cases, it's already compatible).

Special thanks to @mogsie for his contributions!