mattpocock

Intro

Static analysis of state machines has enormous potential. In this RFC, I'd like to talk about using a CLI tool to generate perfect Typescript types by analysing XState machines in your code.

Typescript with XState is currently imperfect because of XState's innate complexity. The goal is to:

1. Get perfect typing of any MachineOptions types passed into Machine, interpret, useMachine etc. This includes typings of events, services, actions, guards and activities based on their usage in the machine.
2. Get autocomplete on the matches function in interpreted state nodes, to allow state.matches('even.deep.nested.states') to be type-checkable.

This CLI could, in the future, be tooled to achieve some other stretch goals:

mattpocock

import { useMachine } from '@xstate/react';
import {
  StateMachine,
  AnyEventObject,
  EventObject,
  State,
  Interpreter,
  ActionObject,
  ActionFunction,
} from 'xstate';

rauschma

/* 
Proof of concept: Writing dual-mode (sync and async) code via generators

Recommendation: start by reading the example (at the end).

API:
– The API object is called `def`.
– Dual-mode `await`: const unwrapped = yield wrapped;
– Dual-mode `yield`: yield def.$one(singleValue)
– Dual-mode `yield*`: yield def.$all(iterable)

alexreardon

import React, { createContext, ReactNode, useEffect, useMemo, useRef, useState } from 'react';
import { interpret } from 'xstate';
import useRequiredContext from '../shared/use-required-context';
import { Nullable } from '../types';
import isShallowEqual from './is-shallow-equal';
import machine from './machine';
import { MachineEvents, MachineStateType, ServiceType } from './machine-types';

const ServiceContext = createContext<Nullable<ServiceType>>(null);

mergesort

import SwiftUI

let colors = [
    Color.pink,
    Color.blue,
    Color.green,
    Color.orange,
    Color.purple,
    Color.black,
]

ggoodman

{
  "PendingSocket": {
    "kind": "Intermediate",
    "onEnter": [
      {}
    ],
    "onEvent": {
      "Error": [
        {
          "targetStates": [

AleksejDix

<template>
  <Machine :machine="machine">
    <template #default="{current, send}">
      <div
        id="box"
        :style="{
          '--dx': current.context.dx,
          '--dy': current.context.dy,
          '--x': current.context.x,
          '--y': current.context.y

busypeoples

/**
 * TS Helper Functions
 */
type ConvertTo<Type, From, To> = {
  [Key in keyof Type]: Required<Type>[Key] extends From ? To : Type[Key];
};

type FilterByType<T, U> = {
  [Key in keyof Required<T>]: Required<T>[Key] extends U ? Key : never;
}[keyof T];

chrisdmacrae

// Compare fluent to object notation

const pedestrianMachine = Machine({
  id: "pedestrian",
  initial: 'walk',
  states: {
    walk: {
      on: {
        PED_TIMER: 'wait'
      }

tPl0ch

import cats.instances.either._
import Transducer.run
import UserRegistration._

object Main extends App {

  private val commands = List(GDPRDeletion, StartRegistration, StartRegistration, ConfirmAccount, GDPRDeletion)

  run(userRegistration)(commands).foreach(println)
  // OUTPUT