XState history + activities

machine.js

const myMachine = Machine({
  initial: 'slide',
  states: {
    slide: {
      id: 'slide',
      initial: 'ground',
      states: {
        ground: {
          on: {
            CLIMB_UP: 'ladder'
          }
        },
        ladder: {
          initial: 'step1',
          states: {
            step1: {
              on: {
                CLIMB_UP: 'step2',
                CLIMB_DOWN: '#slide.ground'
              }
            },
            step2: {
              on: {
                CLIMB_UP: '#slide.topOfSlide',
                CLIMB_DOWN: 'step1'
              }
            }
          }
        },
        topOfSlide: {
          on: {
            CLIMB_DOWN: 'ladder.step2',
            SLIDE: 'ground'
          }
        },
        hist: {
          type: 'history',
          history: 'deep'
        }
      },
      on: {
        FLY: '#flying'
      }
    },
    flying: {
        activities: 'yell',
        id: 'flying',
        on: {
          LAND: 'slide.hist'
        },
      }
      },
}, {
  activities: {
    yell: (ctx) => {
      
       // Start the activity
        
          const interval = setInterval(
            () => console.log('LOOK AT ME!'),
            1000
          );

          // Return a function that stops the activity
          return () => {
            clearInterval(interval);
          };
    }
  }
});