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

machine.js

// useful to use together with ws-on-change for auto-updating editor
const setContentAndUpdate = (content) => {
  ace.edit('brace-editor').setValue(content)
  document.querySelector('button[data-variant=secondary]').click()
}

const createWebSocket = (address, onMessage) => {
  const ws = new WebSocket(address)
  ws.onmessage = (msg) => {
    onMessage(msg.data)
  }
}

// usage of ^ with ws-on-change
// copy paste the two functions above to the console (setContentAndUpdate and createWebSocket)
// then execute:
// createWebSocket("ws://localhost:9090", setContentAndUpdate)
// now the visualizer should update automatically on filechange

// end dev tools

const linkingMachine = Machine({
  id: 'linking-test',
  initial: 'logged_out',
  states: {
    logged_out: {
      on: {
        LOGIN: 'login'
      }
    },
    login: {
      on: {
        EXISTING_EMAIL: 'logged_in',
        NEW_EMAIL: 'create_new_account',
        EXISTING_FIGMA_EMAIL: 'link_previous_account'
      }
    },
    logged_in: {type: 'final'},
    create_new_account: {on: {'': [{target: 'logged_in'}]}},
    link_previous_account: {on: {'': [{target: 'logged_in'}]}},
  }
})