Function: formatPlayRouteTransitions()

API / @xmachines/play-xstate / formatPlayRouteTransitions

function formatPlayRouteTransitions<T>(machineConfig): T;

Defined in: packages/play-xstate/src/routing/format-play-route-transitions.ts:112

Makes the play.route transitions from the declarative route configs

The function walks the machine states. It looks for each state with a meta.route field, and it generates the transitions that handle a play.route event: each transition matches event.to against a state ID.

The internal formatRouteTransitions function of XState was the model for this function (stateUtils.ts, line 391).

Type Parameters

Type Parameter
T extends RouteMachineConfig

Parameters

Parameter	Type	Description
machineConfig	T	The XState machine config, before createMachine. It must extend RouteMachineConfig.

Returns

T

The same machine config, with the generated play.route handlers in it. The original type T stays.

Example

const machineConfig = {
  id: "myMachine",
  states: {
    home: { id: "home", meta: { route: "/home" } },
    dashboard: { id: "dashboard", meta: { route: "/dashboard" } },
  },
};

const machine = createMachine(formatPlayRouteTransitions(machineConfig));

The function generates the play.route handlers at the root level. Those handlers:

• match event.to against a state ID, for example event.to === “#home”
• target the correct state
• assign the params and the query of the event to the context