I want to add guards as strings (for visualizer compatibility). This requires passing

Hey <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url=

Support xstate Machine options parameter about react-automata HOT 4 CLOSED

michelebertoli commented on May 16, 2024 1

Support xstate Machine options parameter

from react-automata.

Comments (4)

MicheleBertoli commented on May 16, 2024

Hey @tastywheat, thanks for opening this issue.

As described in the README:

The withStatechart higher-order component takes an xstate configuration object or an xstate machine [...]

So it's already possible to create a Machine with options and use it with this library.

const SuperComponent = withStatechart(lightmachine)(Component)

I hope this helps.

from react-automata.

brianlawasdf123 commented on May 16, 2024

That sort of helps, but I'm running into an error with the guards not being recognized (I'm not sure if its xstate or react-automata).

Uncaught Error: String condition 'hasResults' is not defined on machine '(machine)'

const machine = Machine({
    "initial": "waiting",
    "states": {
        "waiting": {
            "on": {
                "SEARCH": "searching"
            },
        },
        "searching": {
            "onEntry": "search",
            "on": {
                "SUCCESS": [
                    {
                        "target": "waiting",
                        "cond": "hasResults"
                    }
                ],
            }
        }
    },
}, {
    guards: {
        hasResults: (es, eventObj) => {
            return eventObj.query.items.length > 0;
        },
    },
});

this.props.transition({ 
    type: 'SEARCH',
    query: {
        items: []
    }
})

from react-automata.

MicheleBertoli commented on May 16, 2024

Hey @brianlawasdf123, I quickly tried your machine:

class App extends React.Component {
  handleSearch = () => {
    this.props.transition({
      type: 'SEARCH',
    })
  }

  handleSuccess0 = () => {
    this.props.transition({
      type: 'SUCCESS',
      query: {
        items: [],
      },
    })
  }

  handleSuccess1 = () => {
    this.props.transition({
      type: 'SUCCESS',
      query: {
        items: [{}],
      },
    })
  }

  render() {
    return (
      <React.Fragment>
        <button onClick={this.handleSearch}>SEARCH</button>
        <button onClick={this.handleSuccess0}>SUCCESS 0</button>
        <button onClick={this.handleSuccess1}>SUCCESS 1</button>
        {this.props.machineState.toString()}
      </React.Fragment>
    )
  }
}

const StateMachine = withStatechart(machine)(App)