ShMcK

import { Machine } from 'xstate'
import { createStatefulMachine } from '@avaragado/xstateful'
import { createReactMachine } from '@avaragado/xstateful-react'
import machineState from './state.json'

// a stateless machine
const machine = Machine(machineState)

// a stateful machine
const xsf = createStatefulMachine({ machine })

ShMcK

import * as React from 'react'

import { Display, Time } from './components'
import ClockMachine from './Machine'

export default class Clock extends React.Component {
  render() {
    return (
      <ClockMachine.Provider>
        <ClockMachine.Control onDidMount={this.init}>

ShMcK

<Display>
  <Time />
  <ClockMachine.State
    is="AlarmGroup.Ringing"
    render={() => <AlarmSetIndicator ringing />}
  />
  <ClockMachine.State
    is={['AlarmGroup.AlarmSet', 'AlarmGroup.Snoozing']}
    render={() => <AlarmSetIndicator />}
  />

ShMcK

  // Available variables:
  // - Machine
  // - interpret
  // - assign
  // - send
  // - sendParent
  // - spawn
  // - raise
  // - actions

ShMcK

  // Available variables:
  // - Machine
  // - interpret
  // - assign
  // - send
  // - sendParent
  // - spawn
  // - raise
  // - actions

ShMcK