Generated by XState Viz: https://xstate.js.org/viz

machine.js

var windowId = 0;

function windowManager() {
  return Machine({
    id: 'window-manager',
    initial: 'idle',
    type: 'parallel',

    states: {
      idle: {
        on: {
          'OPEN': {
            target: 'opening',
          },
          'CLOSE': {
            target: 'closing'
          },
          'FOCUS': {
            target: 'focusing'
          }
        }
      },
      opening: {
        invoke: [
          {
            // id: () => { return `${windowId++}` },
            id: windowId,
            src: windowMachine(windowId)
          }
        ],
        on: {
          'COMPLETE': {
            target: 'idle'
          }
        }
      },
      closing: {
        on: {
          'COMPLETE': {
            target: 'idle'
          }
        }
      },
      focusing: {
        on: {
          'COMPLETE': {
            target: 'idle'
          }
        }
      }
    }
  });
}

function windowMachine(name) {
  return Machine({
    id: `window-${name}`,
    initial: 'loading',

    states: {
      loading: {},
      unloading: {},
      foregrounding: {},
      backgrounding: {},

      foreground: {},
      background: {}
    }
  });
};

windowManager();