How to best use the visualizer with Typescript and multiple files?

[vck3000]

I'm working on a typescript project that has the state machine defined in a couple files which I would like to be able to use in the visualizer available at https://xstate.js.org/viz/.

For a simple example, I have two files, one containing the state machine definition, and the other containing actions.

File room-machine.ts:

import { Machine } from 'xstate';
import {
  PLAYER_JOIN_ACTION,
  PLAYER_LEAVE_ACTION,
  PLAYER_SIT_DOWN_ACTION,
  PLAYER_STAND_UP_ACTION,
} from './room-machine-actions';

export interface RoomPlayer {
  id: string;
  username: string;
  displayUsername: string;
  // socketId: string;
}

export interface RoomContext {
  players: RoomPlayer[];
  spectators: RoomPlayer[];
}

export interface RoomStateSchema {
  states: {
    waiting: {};
    inProgress: {};
    finished: {};
  };
}

export type RoomEvent =
  | { type: 'PLAYER_JOIN'; player: RoomPlayer }
  | { type: 'PLAYER_LEAVE'; player: RoomPlayer }
  | { type: 'PLAYER_SIT_DOWN'; player: RoomPlayer }
  | { type: 'PLAYER_STAND_UP'; player: RoomPlayer }
  | { type: 'START_GAME' }
  | { type: 'GAME_END' };

export const RoomMachine = Machine<RoomContext, RoomStateSchema, RoomEvent>({
  id: 'room',
  initial: 'waiting',
  context: { players: [], spectators: [] },
  states: {
    waiting: {
      on: {
        PLAYER_JOIN: {
          actions: PLAYER_JOIN_ACTION,
        },
        PLAYER_LEAVE: {
          actions: PLAYER_LEAVE_ACTION,
        },
        PLAYER_SIT_DOWN: {
          actions: PLAYER_SIT_DOWN_ACTION,
        },
        PLAYER_STAND_UP: {
          actions: PLAYER_STAND_UP_ACTION,
        },
        START_GAME: 'inProgress',
      },
    },
    inProgress: {
      on: {
        GAME_END: 'finished',
      },
    },
    finished: {
      type: 'final',
    },
  },
});

File room-machine-actions.ts:

import { assign } from 'xstate';
import { RoomContext, RoomEvent } from './room-machine';

export const PLAYER_JOIN_ACTION = assign<RoomContext, RoomEvent>({
  spectators: (context, event) => {
    if (
      event.type === 'PLAYER_JOIN' &&
      context.spectators.indexOf(event.player) === -1
    ) {
      context.spectators.push(event.player);
    }
    return context.spectators;
  },
});

export const PLAYER_LEAVE_ACTION = assign<RoomContext, RoomEvent>(
  (context, event) => {
    if (event.type === 'PLAYER_LEAVE') {
      // Remove from players and spectators
      let index = context.players.indexOf(event.player);
      context.players.splice(index, 1);

      index = context.spectators.indexOf(event.player);
      context.spectators.splice(index, 1);
    }
    return {
      ...context,
      players: context.players,
      spectators: context.spectators,
    };
  },
);

export const PLAYER_SIT_DOWN_ACTION = assign<RoomContext, RoomEvent>(
  (context, event) => {
    if (event.type === 'PLAYER_SIT_DOWN') {
      // Add to players
      context.players.push(event.player);

      // Remove from spectator
      const index = context.spectators.indexOf(event.player);
      context.spectators.splice(index, 1);
    }
    return {
      ...context,
      players: context.players,
      spectators: context.spectators,
    };
  },
);

export const PLAYER_STAND_UP_ACTION = assign<RoomContext, RoomEvent>(
  (context, event) => {
    if (event.type === 'PLAYER_STAND_UP') {
      // Remove from players
      let index = context.players.indexOf(event.player);
      context.players.splice(index, 1);

      // Add to spectator if doesn't exist there already
      index = context.spectators.indexOf(event.player);
      if (index === -1) {
        context.spectators.push(event.player);
      }
    }
    return {
      ...context,
      players: context.players,
      spectators: context.spectators,
    };
  },
);

How could I go about inserting this into the visualizer?

Thanks!

[davidkpiano]

There's a solution coming out soon!

[montogeek]

Soon is August 29?

[davidkpiano]

Soon is August 29?

Yes!