ShMcK

ShMcK

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

ShMcK

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

ShMcK

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

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

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

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

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

<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 { testStatechart } from 'react-automata'
import alarmChart from './alarmChart'
import AlarmClock from './AlarmClock'

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