fizzbuzz in x-state

fizzbuzz_x-state.js

// try it out here: https://codesandbox.io/s/recursing-meadow-t87lvp?file=/src/index.js

export const machine = createMachine(
  {
    id: "fizzbuzz",
    context: {
      i: "0"
    },
    initial: "Start",
    states: {
      Start: {
        on: {
          run: {
            target: "i1",
            actions: {
              params: {},
              type: "increment"
            }
          }
        }
      },
      i1: {
        always: {
          target: "Halt",
          cond: "done"
        },
        on: {
          run: {
            target: "i2",
            actions: {
              params: {},
              type: "increment"
            }
          }
        }
      },
      i2: {
        always: {
          target: "Halt",
          cond: "done"
        },
        on: {
          run: {
            target: "Fizz1",
            actions: {
              params: {},
              type: "increment"
            }
          }
        }
      },
      Halt: {},
      Fizz1: {
        always: {
          target: "Halt",
          cond: "done"
        },
        on: {
          run: {
            target: "i4",
            actions: {
              params: {},
              type: "increment"
            }
          }
        }
      },
      i4: {
        always: {
          target: "Halt",
          cond: "done"
        },
        on: {
          run: {
            target: "Buzz1",
            actions: {
              params: {},
              type: "increment"
            }
          }
        }
      },
      Buzz1: {
        always: {
          target: "Halt",
          cond: "done"
        },
        on: {
          run: {
            target: "Fizz2",
            actions: {
              params: {},
              type: "increment"
            }
          }
        }
      },
      Fizz2: {
        always: {
          target: "Halt",
          cond: "done"
        },
        on: {
          run: {
            target: "i7",
            actions: {
              params: {},
              type: "increment"
            }
          }
        }
      },
      i7: {
        always: {
          target: "Halt",
          cond: "done"
        },
        on: {
          run: {
            target: "i8",
            actions: {
              params: {},
              type: "increment"
            }
          }
        }
      },
      i8: {
        always: {
          target: "Halt",
          cond: "done"
        },
        on: {
          run: {
            target: "Fizz3",
            actions: {
              params: {},
              type: "increment"
            }
          }
        }
      },
      Fizz3: {
        always: {
          target: "Halt",
          cond: "done"
        },
        on: {
          run: {
            target: "Buzz2",
            actions: {
              params: {},
              type: "increment"
            }
          }
        }
      },
      Buzz2: {
        always: {
          target: "Halt",
          cond: "done"
        },
        on: {
          run: {
            target: "i11",
            actions: {
              params: {},
              type: "increment"
            }
          }
        }
      },
      i11: {
        always: {
          target: "Halt",
          cond: "done"
        },
        on: {
          run: {
            target: "Fizz4",
            actions: {
              params: {},
              type: "increment"
            }
          }
        }
      },
      Fizz4: {
        always: {
          target: "Halt",
          cond: "done"
        },
        on: {
          run: {
            target: "i13",
            actions: {
              params: {},
              type: "increment"
            }
          }
        }
      },
      i13: {
        always: {
          target: "Halt",
          cond: "done"
        },
        on: {
          run: {
            target: "i14",
            actions: {
              params: {},
              type: "increment"
            }
          }
        }
      },
      i14: {
        always: {
          target: "Halt",
          cond: "done"
        },
        on: {
          run: {
            target: "FizzBuzz",
            actions: {
              params: {},
              type: "increment"
            }
          }
        }
      },
      FizzBuzz: {
        always: {
          target: "Halt",
          cond: "done"
        },
        on: {
          run: {
            target: "i1",
            actions: {
              params: {},
              type: "increment"
            }
          }
        }
      }
    },
    predictableActionArguments: true,
    preserveActionOrder: true
  },
  {
    actions: {
      increment: (context, event) => {
        context.i++;
        console.log(context.i);
      }
    },
    services: {},
    guards: { done: (context, event) => context.i >= 100 },
    delays: {}
  }
);

try it out here: https://codesandbox.io/s/recursing-meadow-t87lvp?file=/src/index.js