Main view

SketchSystems.spec

Main view
  Logged out
    login -> Logged in
    Please log in
  Logged in
    logout -> Logged out
    home -> Welcome
    Welcome
      next -> Second page
    Second page
      next -> Third page
      previous -> Welcome
    Third page
      previous -> Second page

SketchSystems_prototype.js

const Go = ({emit,event}) => event ? <button onClick={()=>emit(event)}>{event}</button> : ' '
const Nav = ({emit, acs}) => {
  const events = acs.transitions ? acs.transitions.map(({event_name})=>event_name) : []
  const parentEvents = acs.parent && acs.parent.transitions ? acs.parent.transitions.map(({event_name})=>event_name) : []
  const parent2Events = acs.parent && acs.parent.parent && acs.parent.parent.transitions ? acs.parent.parent.transitions.map(({event_name})=>event_name) : []

  const allEvents = [...parent2Events,'', ...parentEvents,'',...events]
  
  return <>send event: { allEvents.map(event=><Go {...{event,emit}} />)}</>
}

function render({active_states,emit}){
  console.log(active_states)
  let acs = active_states[0]
  let state = acs.name
  return <>
      <h1>{state}</h1>
      <Nav {...{emit, acs}} />
    </>
}