[v5] Routable states

packages/core/src/stateUtils.ts

@@ -423,6 +423,19 @@ export function formatTransitions<
     }
     existing.push(delayedTransition);
   }
+  Object.values(stateNode.states).forEach((sn) => {
+    if (sn.config.route) {
+      const eventType = `xstate.route.${sn.path.join('.')}`;
+      const transition: AnyTransitionConfig = {
+        ...sn.config.route,
+        target: `.${sn.key}`
+      };
+
+      transitions.set(eventType, [
+        formatTransition(stateNode, eventType, transition)
+      ]);
+    }
+  });
   return transitions as Map<string, TransitionDefinition<TContext, any>[]>;
 }
 

packages/core/src/types.ts

@@ -1037,6 +1037,43 @@ export interface StateNodeConfig<
    * A default target for a history state
    */
   target?: string;
+  route?: RouteTransitionConfig<
+    TContext,
+    TEvent,
+    TEvent,
+    TActor,
+    TAction,
+    TGuard,
+    TDelay,
+    TEmitted
+  >;
+}
+
+export interface RouteTransitionConfig<
+  TContext extends MachineContext,
+  TExpressionEvent extends EventObject,
+  TEvent extends EventObject,
+  TActor extends ProvidedActor,
+  TAction extends ParameterizedObject,
+  TGuard extends ParameterizedObject,
+  TDelay extends string,
+  TEmitted extends EventObject
+> {
+  guard?: Guard<TContext, TExpressionEvent, undefined, TGuard>;
+  actions?: Actions<
+    TContext,
+    TExpressionEvent,
+    TEvent,
+    undefined,
+    TActor,
+    TAction,
+    TGuard,
+    TDelay,
+    TEmitted
+  >;
+  reenter?: boolean;
+  meta?: Record<string, any>;
+  description?: string;
 }
 
 export type AnyStateNodeConfig = StateNodeConfig<

packages/core/test/route.test.ts

@@ -0,0 +1,112 @@
+import { createActor, createMachine } from '../src';
+
+describe('route', () => {
+  it('should transition directly to a route if route is an empty transition config', () => {
+    const machine = createMachine({
+      id: 'routeTest',
+      initial: 'a',
+      states: {
+        a: {},
+        b: {
+          route: {}
+        },
+        c: {}
+      }
+    });
+
+    const actor = createActor(machine).start();
+
+    actor.send({
+      type: 'xstate.route.b'
+    });
+
+    expect(actor.getSnapshot().value).toEqual('b');
+
+    actor.send({
+      type: 'xstate.route.c'
+    });
+
+    expect(actor.getSnapshot().value).toEqual('b');
+  });
+
+  it('should transition directly to a route if guard passes', () => {
+    const machine = createMachine({
+      id: 'routeTest',
+      initial: 'a',
+      states: {
+        a: {},
+        b: {
+          route: {
+            guard: () => false
+          }
+        },
+        c: {
+          route: {
+            guard: () => true
+          }
+        }
+      }
+    });
+
+    const actor = createActor(machine).start();
+
+    expect(actor.getSnapshot().value).toEqual('a');
+
+    actor.send({
+      type: 'xstate.route.b'
+    });
+
+    expect(actor.getSnapshot().value).toEqual('a');
+
+    actor.send({
+      type: 'xstate.route.c'
+    });
+
+    expect(actor.getSnapshot().value).toEqual('c');
+  });
+
+  it('should work with parallel states', () => {
+    const todoMachine = createMachine({
+      type: 'parallel',
+      states: {
+        todo: {
+          initial: 'new',
+          states: {
+            new: {},
+            editing: {}
+          }
+        },
+        filter: {
+          initial: 'all',
+          states: {
+            all: {
+              route: {}
+            },
+            active: {
+              route: {}
+            },
+            completed: {
+              route: {}
+            }
+          }
+        }
+      }
+    });
+
+    const todoActor = createActor(todoMachine).start();
+
+    expect(todoActor.getSnapshot().value).toEqual({
+      todo: 'new',
+      filter: 'all'
+    });
+
+    todoActor.send({
+      type: 'xstate.route.filter.active'
+    });
+
+    expect(todoActor.getSnapshot().value).toEqual({
+      todo: 'new',
+      filter: 'active'
+    });
+  });
+});