ShMcK

import { createReactMachine } from '@avaragado/xstateful-react'
import alarm from './statefulAlarmMachine'

const AlarmMachine = createReactMachine(alarm)

export default AlarmMachine

ShMcK

<AlarmMachine.Provider>
  <>
    <AlarmClock />
    <AlarmClock />
  <>
</AlarmMachine.Provider>

ShMcK

import AlarmMachine from './statefulAlarmMachine'

const AlarmClock = () => (
  <>
    <AlarmMachine.Activity is='startRing'>
      <Ringing />
    </AlarmMachine.Activity>
    <Clock>
  </>
)

ShMcK

import { createStatefulMachine, Reducer } from '@avaragado/xstateful'
import alarmMachine from './alarmMachine'

const initialState = {
  alarmTrigger: +new Date() + 10000
}

const reducer = Reducer.map({
  alarmSet: Reducer.update(({ action, extstate }) => ({
    alarmTrigger: action.time,

ShMcK

import AlarmMachine from './statefulAlarmMachine'

const Ringing = () => (
  <AlarmMachine cond={({ state, exstate )} => (
    state === 'Ringing' && exstate.ringCount < 5
  )}>
   <PlayRinging />
  </AlarmMachine>
)

ShMcK

import AlarmMachine from './statefulAlarmMachine'

const Clock = () => (
  <AlarmMachine
    render={({ extstate, setextstate }) => (
      <TimeDisplay time={extstate.time} />
    )}
  />
)

ShMcK

import { testStatechart } from 'react-automata'
import alarmChart from './alarmChart'
import AlarmClock from './AlarmClock'

test('run all tests', () => {
  testStatechart({
    statechart: alarmChart,
  }, AlarmClock)
})

ShMcK

<parallel id="p">

    <transition event="done.state.p" target="someOtherState"/>

    <state id="S1" initial="S11">
        <state id="S11">
            <transition event="e4" target="S12"/>
        </state>
        <state id="S12">
            <transition event="e1" target="S1Final"/>

ShMcK

import { withStatechart } from "react-automata"
import alarmMachine from "./alarmMachine"

const AlarmClock = ({ machineState }) => {
  switch (machineState.value) {
    case "Snoozing":
      return <Clock />
    case "Ringing":
      return <Clock ringing />
    default:

ShMcK

{
  "initial": "Normal",
  "states": {
    "Normal": {
      "on": {
        "ALARM_ON": "AlarmSet"
      }
    },
    "AlarmGroup": {
      "initial": "AlarmSet",