Actor logic for a timer implemented using `xstate` ⏱️

timer-machine.ts

import { assign, fromCallback, setup } from "xstate";

type TickEvent = { type: "tick" };

const timerLogic = fromCallback(({ sendBack }) => {
  const timer = setInterval(() => {
    sendBack({ type: "tick" } satisfies TickEvent);
  }, 1000);

  return () => {
    clearInterval(timer);
  };
});

const machine = setup({
  types: {
    context: {} as { time: number },
    events: {} as TickEvent,
    children: {} as { timer: "timer" },
  },
  actors: { timer: timerLogic },
}).createMachine({
  context: { time: 0 },
  invoke: { src: "timer", id: "timer" },
  on: {
    tick: {
      actions: assign(({ context }) => ({
        time: context.time + 1,
      })),
    },
  },
});