match-xstate.ts

import { EventObject, State, StateSchema, Typestate, createMachine, interpret } from 'xstate';

type MatchCase<
  TContext,
  TTypestate extends Typestate<TContext>,
  TSV extends TTypestate['value'],
  TResult
> = readonly [...TSV[], TResult];

// TODO:
// - [x] multiple values per case
// - [ ] functional result
// - [ ] type-predicate

export function match<
  TContext,
  TEvent extends EventObject = EventObject,
  TStateSchema extends StateSchema<TContext> = any,
  TTypestate extends Typestate<TContext> = { value: any; context: TContext; },
  TSV extends TTypestate['value'] = any,
  TResult = any
  >(state: State<TContext, TEvent, TStateSchema, TTypestate>, ...cases: MatchCase<TContext, TTypestate, TSV, TResult>[]): TResult | undefined {
    for (const matchCase of cases) {
      const values = matchCase.slice(0, -1) as TSV[];
      const result = matchCase[matchCase.length - 1] as TResult;
      if (values.some(value => state.matches(value))) {
        return result;
      }
    }

    return undefined;
}


interface User {
  name: string;
}

interface UserContext {
  user?: User;
  error?: string;
}

type UserEvent =
  | { type: 'FETCH'; id: string }
  | { type: 'RESOLVE'; user: User }
  | { type: 'REJECT'; error: string };

type UserState =
  | {
      value: 'idle';
      context: UserContext & {
        user: undefined;
        error: undefined;
      };
    }
  | {
      value: 'loading';
      context: UserContext;
    }
  | {
      value: 'success';
      context: UserContext & { user: User; error: undefined };
    }
  | {
      value: 'failure';
      context: UserContext & { user: undefined; error: string };
    };

const userMachine = createMachine<UserContext, UserEvent, UserState>({
  id: 'user',
  initial: 'idle',
  states: {
    idle: {
      /* ... */
    },
    loading: {
      /* ... */
    },
    success: {
      /* ... */
    },
    failure: {
      /* ... */
    }
  }
});

const userService = interpret(userMachine);

userService.subscribe((state) => {
  const result = match(state,
    ['idle', 'loading', 'no user yet...'],
    ['success', 'we have a user'],
    ['failure', 'error loading user']
  )
});