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 diceWare = Machine({
    id: 'virtual-diceware',
    type: 'parallel',
    context: {
      useSpecialChars: false,
      searchTerm: ''
    },
    states: {
      entropy: {
        initial: 'harvesting',
        states: {
          harvesting: {
            initial: 'seeding',
            activities: ['harvestEntropy'],
            on: {
              TOGGLE_HARVESTING: 'paused'
            },
            states: {
              seeding: {
                on: {
                  DONE_SEEDING: 'seeded'
                }
              },
              seeded: {
                id: 'seeded',
                type: 'final'
              },
              hist: { type: 'history' }
            }
          },
          paused: {
            on: {
              TOGGLE_HARVESTING: 'harvesting.hist'
            }
          }
        }
      },
      routes: {
        id: 'routes',
        initial: 'main',
        on: {
          VISIT_MAIN: '.main',
          VISIT_ENTROPY: '.entropyViewer',
          VISIT_WORDS: '.wordList',
          VISIT_ABOUT: '.about'
        },
        states: {
          main: {
            initial: 'seeding',
            on: {
              TOGGLE_SPECIAL_CHARS: {
                target: undefined,
                actions: 'toggleSpecialChars'
              }
            },
            states: {
              seeding: {
                on: {
                  '': {
                    target: 'ready',
                    in: '#seeded'
                  }
                }
              },
              ready: {
                on: {
                  CREATE: {
                    target: undefined,
                    actions: 'createPassword'
                  }
                }
              }
            }
          },
          entropyViewer: {},
          wordList: {
            initial: 'idle',
            states: {
              idle: {
                on: {
                  SEARCH: {
                    target: 'searching',
                    actions: 'storeSearchTerm'
                  }
                }
              },
              searching: {
                invoke: {
                  src: 'search',
                  onDone: 'idle'
                }
              }
            }
          },
          about: {}
        }
      }
    }
  }, {
    actions: {
      toggleSpecialChars: assign({
        useSpecialChars: ctx => !ctx.useSpecialChars
      }),
      storeSearchTerm: assign({
        searchTerm: (xs, e) => e.term
      })
    }
  });