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

machine.js

  // Available variables:
  // - Machine
  // - interpret
  // - assign
  // - send
  // - sendParent
  // - spawn
  // - raise
  // - actions
  // - XState (all XState exports)
  
  const fetchMachine = Machine({
    id: 'responsive-shit',
    initial: 'indexHtml',
    context: {
      previous: '',
      // from the index
      viewport: 'responsive'
    },
    actions: {
      // action implementations
      setResponsive: context=> {
        context.viewport = 'responsive'
      },
      setNonResponsive: context=> {
        console.log('setting to non-responsive');
        context.viewport = 'non-responsive'
      },
      savePrevious: assign({
        previous: (context,event)=>context.viewport
      }),
      resetViewportToPrevious: assign({
        viewport: (context,event)=>context.previous
      }),
      clearPrevious: assign({
        previous: ''
      }),
    },
    states: {
      indexHtml: {
        on: {
          responsiveEmberPage: {
            target: 'responsiveEmberPage'
          },
          nonResponsiveEmberPage: {
            target: 'nonResponsiveEmberPage',
          },
          reactPage: {
            target: 'reactPage',
          }
        }
      },
      reactPage: {
        entry: ['setNonResponsive','savePrevious'],
        exit: ['setNonResponsive','resetViewportToPrevius', 'clearPrevious'],
        on: {
          responsiveEmberPage: {
            target: 'responsiveEmberPage'
          },
          nonResponsiveEmberPage: {
            target: 'nonResponsiveEmberPage'
          },
          reactPage: {
            target: 'reactPage'
          }
        }
      },
      responsiveEmberPage: {
        on: {
          responsiveEmberPage: {
            target: 'responsiveEmberPage'
          },
          nonResponsiveEmberPage: {
            target: 'nonResponsiveEmberPage'
          },
          reactPage: {
            target: 'reactPage'
          }
        }
      },
      nonResponsiveEmberPage: {
        on: {
          // nonResponsiveEmberPage: {
          //   target: 'nonResponsiveEmberPage',
          //   // actions: assign({
          //   //   retries: (context, event) => context.retries + 1
          //   // })
          // }
          responsiveEmberPage: {
            target: 'responsiveEmberPage'
          },
          nonResponsiveEmberPage: {
            target: 'nonResponsiveEmberPage'
          },
          reactPage: {
            target: 'reactPage'
          }
        }
      }
    }
  });