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

machine.js

(function (xstate, constants) {
  'use strict';

  /**
   * Leaf state condition generator.
   *
   * @param {String} target the target state
   */
  function matchLeafState(target) {
    return {
      type: constants.DEFAULT_GUARD_TYPE,
      name: `${target}`,
      predicate: function(context, event, condMeta) {
        var state = condMeta.state;
        var value;
        if (state) {
          value = state.toStrings().pop().split(constants.STATE_DELIMITER).pop();
        }
        return value === target;
      }
    };
  }

  function matchThroughState(key, value) {
    return {
      type: constants.DEFAULT_GUARD_TYPE,
      name: `${key} = ${value}`,
      predicate: function(context) {
        return context[key] === value;
      }
    };
  }

  function namedCondition(name, predicate) {
    return {
      type: constants.DEFAULT_GUARD_TYPE,
      name: `${name}`,
      predicate
    };
  }

  function phases(name, resolve, reject) {
    return {
      id: `phases-${name}`,
      initial: 'before',

      states: {
        before: {
          invoke: {
            src: `${name}-before`,
            onDone: 'perform',
            onError: 'reject'
          }
        },

        perform: {
          invoke: {
            src: `${name}-perform`,
            onDone: 'after',
            onError: 'reject'
          }
        },

        after: {
          invoke: {
            src: `${name}-after`,
            onDone: 'resolve',
            onError: 'reject'
          }
        },

        resolve: { type: 'final' },
        reject: { type: 'final' }
      },

      onDone: [
        { target: resolve, cond: matchLeafState('resolve') },
        { target: reject, cond: matchLeafState('reject') }
      ]
    };
  }

  const WAIT_LIMIT = 3;
  const RETRY_LIMIT = 3;

  // TODO
  // - Wire up `reject`.

  function timeout(name, completeEvent, abort, retry, wait, resolve, reject) {
    return {
      id: `timeout-${name}`,
      initial: 'reset',

      states: {
        reset: {
          on: {
            '': {
              target: 'unloaded',
              actions: [
                xstate.assign({ timeoutFinalState: '' })
              ]
            },
            [completeEvent]: {
              target: 'resolve'
            }
          }
        },
        unloaded: {
          on: {
            '': [
              { target: 'abort', cond: matchThroughState('timeoutFinalState', 'abort') },
              { target: 'retry', cond: matchThroughState('timeoutFinalState', 'retry') },
              { target: 'wait', cond: matchThroughState('timeoutFinalState', 'wait') },
              { target: 'resolve', cond: matchThroughState('timeoutFinalState', 'fail') }
            ],
            'LOAD_TIMEOUT': 'loadTimeout',
            [completeEvent]: {
              target: 'resolve'
            }
          }
        },
        loadTimeout: {
          on: {
            'COMPLETE': 'loaded',
            [completeEvent]: {
              actions: [
                xstate.assign({ timeoutFinalState: 'resolve' })
              ]
            }
          }
        },
        loaded: {
          on: {
            'ABORT': {
              actions: [
                (context) => { context.timeoutFinalState = context.timeoutFinalState || 'abort'; }
              ],
              target: 'unloadTimeout'
            },
            'RETRY': {
              cond: namedCondition('RETRY_LIMIT', (context) => { return context.retryCount < RETRY_LIMIT; }),
              actions: [
                (context) => { context.waitCount = 0; },
                (context) => { context.retryCount = context.retryCount + 1; },
                (context) => { context.timeoutFinalState = context.timeoutFinalState || 'retry'; }
              ],
              target: 'unloadTimeout'
            },
            'WAIT': {
              cond: namedCondition('WAIT_LIMIT', (context) => { return context.waitCount < WAIT_LIMIT; }),
              actions: [
                (context) => { context.waitCount = context.waitCount + 1; },
                (context) => { context.timeoutFinalState = context.timeoutFinalState || 'wait'; }
              ],
              target: 'unloadTimeout'
            },
            [completeEvent]: {
              actions: [
                xstate.assign({ timeoutFinalState: 'resolve' })
              ],
              target: 'unloadTimeout'
            }
          }
        },
        unloadTimeout: {
          on: {
            'COMPLETE': 'unloaded',
            [completeEvent]: {
              actions: [
                xstate.assign({ timeoutFinalState: 'resolve' })
              ]
            }
          }
        },

        abort: { type: 'final' },
        retry: { type: 'final' },
        wait: { type: 'final' },
        resolve: { type: 'final' },
        reject: { type: 'final' }
      },

      onDone: [
        { target: abort, cond: matchLeafState('abort') },
        { target: retry, cond: matchLeafState('retry') },
        { target: wait, cond: matchLeafState('wait') },
        { target: resolve, cond: matchLeafState('resolve') },
        { target: reject, cond: matchLeafState('reject') }
      ]
    };
  }

  function loadWindow(name, abort, retry, resolve, reject ) {
    return {
      id: `load-window-${name}`,
      initial: 'insertWindow',

      states: {
        insertWindow: {
          on: {
            'COMPLETE': 'awaitWindow'
          }
        },

        awaitWindow: {
          after: {
            10000: 'timeout'
          },
          on: {
            'TIMEOUT': 'timeout',
            'LOADED': 'resolve'
          }
        },

        timeout: timeout(name, 'WINDOW_LOADED', 'abort', 'retry', 'wait', 'resolve', 'reject'),

        wait: {
          on: {
            '': {
              target: 'awaitWindow'
            }
          }
        },

        abort: { type: 'final' },
        retry: { type: 'final' },
        resolve: { type: 'final' },
        reject: { type: 'final' }
      },
      onDone: [
        { target: abort, cond: matchLeafState('abort') },
        { target: retry, cond: matchLeafState('retry') },
        { target: resolve, cond: matchLeafState('resolve') },
        { target: reject, cond: matchLeafState('reject') }
      ]
    };
  }

  function unloadWindow(name, resolve, reject) {
    return {
      id: `unload-window-${name}`,
      initial: 'removeWindow',

      states: {
        removeWindow: {
          on: {
            'COMPLETE': 'resolve'
          }
        },
        resolve: { type: 'final' },
        reject: { type: 'final' }
      },
      onDone: [
        { target: resolve, cond: matchLeafState('resolve') },
        { target: reject, cond: matchLeafState('reject') }
      ]
    };
  }

  function windowController(name) {
    return {
      id: `window-controller-${name}`,
      initial: 'reset',

      states: {
        reset: {
          on: {
            '': {
              target: 'unloaded',
              actions: [
                xstate.assign({ windowRetryLoad: false })
              ]
            }
          }
        },
        unloaded: {
          on: {
            '': {
              target: 'loadWindow',
              cond: matchThroughState('windowRetryLoad', true)
            },
            'LOAD_WINDOW': 'loadWindow',
            'EXIT': 'resolve'
          }
        },

        loadWindow: loadWindow(name, 'abortLoad', 'retryLoad', 'proceed', 'reject'),

        abortLoad: { type: 'final' },

        retryLoad: {
          on: {
            '': {
              target: 'unloadWindow',
              actions: [
                xstate.assign({ windowRetryLoad: true })
              ]
            }
          }
        },

        proceed: {
          on: {
            '': {
              target: 'background',
              actions: [
                xstate.assign({ windowRetryLoad: false })
              ]
            }
          }
        },

        background: {
          on: {
            'FOREGROUND_WINDOW': 'foregroundWindow',
            'UNLOAD_WINDOW': 'unloadWindow'
          }
        },

        foregroundWindow: {
          on: {
            'COMPLETE': 'foreground'
          }
        },

        unloadWindow: unloadWindow(name, 'unloaded', 'reject'),

        foreground: {
          on: {
            'BACKGROUND_WINDOW': 'backgroundWindow'
          }
        },

        backgroundWindow: {
          on: {
            'COMPLETE': 'background'
          }
        },

        resolve: { type: 'final' },
        reject: { type: 'final' }
      }
    };
  }

  function windowManager() {
    return {
      id: 'window-manager',
      initial: 'windowControllers',

      states: {
        idle: {
          on: {
            'OPEN': {
              target: 'opening'
            },
            'CLOSE': {
              target: 'closing'
            },
            'FOCUS': {
              target: 'focusing'
            }
          }
        },
        opening: {
          on: {
            'COMPLETE': {
              target: 'idle'
            }
          }
        },
        closing: {
          on: {
            'COMPLETE': {
              target: 'idle'
            }
          }
        },
        focusing: {
          on: {
            'COMPLETE': {
              target: 'idle'
            }
          }
        },
        windowControllers: {
          id: 'window-controllers',
          type: 'parallel',

          states: {
            one: windowController('one')
            // two: windowMachine('two')
          }
        }
      }
    };
  }

  function application(name) {
    return {
      id: `application-${name}`,
      initial: 'load',

      context: {
        timeoutFinalState: '',
        retryCount: 0,
        waitCount: 0,
        windowRetryLoad: false
      },

      states: {
        load: phases('load', 'boot'),
        boot: phases('boot', 'ready'),

        ready: {
          id: 'ready',
          type: 'parallel',

          states: {
            windowManager: windowManager(),
            inputManager: {}
          }
        }
      }
    };
  }

  const options = {
    services: {
      'load-before': () => {
        return Promise.resolve().then(function() {
          console.log('do load before');
        });
      },
      'load-perform': () => {
        return Promise.resolve().then(function() {
          console.log('do load start');
        });
      },
      'load-after': () => {
        return Promise.resolve().then(function() {
          console.log('do load after');
        });
      },
      'boot-before': () => {
        return Promise.resolve().then(function() {
          console.log('do boot before');
        });
      },
      'boot-perform': () => {
        return Promise.resolve().then(function() {
          console.log('do boot start');
        });
      },
      'boot-after': () => {
        return Promise.resolve().then(function() {
          console.log('do boot after');
        });
      }
    }
  };

  const applicationMachine = xstate.Machine(application('web-os'), options);
  const applicationService = xstate.interpret(applicationMachine);

  applicationService.start();

}({ Machine, interpret, assign }, { DEFAULT_GUARD_TYPE: 'xstate.guard', STATE_DELIMITER: '.' }));