npm xstate 4.2.0

latest releases: 5.13.0, 5.12.0, 5.11.0...
5 years ago
  • ➕ Added CODE_OF_CONDUCT.md
  • 💙 Added Webflow as a sponsor
  • 📖 Added documentation directly to the master branch for easier maintenance (in the /docs directory)
  • The send(...) action creator now accepts an "event expression", which is a function that provides context and event as arguments and returns an Event:
import { actions } from 'xstate';
const { send } = actions;

// contrived example
const sendName = send((ctx, event) => ({
  type: 'NAME',
  name: ctx.user.name
}));

Only use this when necessary - a static argument, e.g., send({ type: 'FOO' }) is still preferred (because it's more deterministic). This follows the <send> SCXML spec for the eventexpr attribute.

This also works with sendParent(eventExpr).

  • 🆕 Added the state.inert getter property on State instances, which represents a state as-is without actions.
  • #️⃣ Targets can now be represented as getters that return references to StateNodes rather than string IDs:
const lightMachine = Machine({
  // ...
  states: {
	green: {
	  on: {
		get TIMER() {
		  return lightMachine.states.yellow;
		}
	  }
    },
	yellow: { /* ... */ }
  }
});

This is completely optional, and useful when if you want to avoid strings or have stricter typings.

  • 🔧 Strict machines (strict: true) will no longer throw errors for built-in events, such as done.state.* or done.invoke.* events.
  • 📞 Now you can invoke a service that can send multiple events back to the parent via a callback:
// ...
states: {
  counting: {
	invoke: {
	  src: (ctx, event) => (callback) => {
		const interval = setInterval(() => {
		  // sends 'SOME_EVENT' to parent on interval
		  callback('SOME_EVENT');
		}, ctx.interval);

		return () => clearInterval(interval);
	  }
	}
  }
}
// ...

This makes it easy to communicate with streams of events (such as Observables) through invoke. Note that since there can be an infinite number of events, it's not assumed that a callback interval will call onDone. Instead, you have to manually send doneInvoke(id) via the callback (this will be in the docs 🔜).

  • ⛔️ An interpreted machine (service) will now throw an error if the initial state given to it is invalid.

Don't miss a new xstate release

NewReleases is sending notifications on new releases.