React XState interpreter

A simple function that use XState like a RXjs Observable.

Short introduction

Xstate

XState is a implementation of Statecharts, a graphical way to represent complexity in code.

Problems

1. Complexity of React context :

When hooks were introduced, everyone was very happy. But with useState and useReducer, you cannot share data between components. So you need another function : createContext. But it cames with some complexity. So the “createContext” function returns a component named Provider. You need to wrap all components inside the Provider so you can use another hook “useContext”. Again three steps to share just a variable. It appears that it add more complexity than solutions.

2. Recommend way to use XState globally :

• In XState docs, it’s recommended to use react context to have a global service shareable between components. The procedure is tedious but it works like a charm.
• Statecharts are usually big and has can have compound states, with many events. So it’s unusual to use it only in one component.

3. Version 13 of Next.js :

The new app directory contains only server components by default. To use react context, you need to mark the component as client component. So the upper in the stack a client component is added, the harder you lose the benefits of SSR.

The solution

Just a simple function reactInterpret. It’s a hook creator and function generator.

It accepts the same arguments as XState function interpret.

It returns some functions :

{
  "start": "Start the interpreter (The same as Xstate Interpreter)",
  "stop": "Stop the interpreter (The same as Xstate Interpreter)",
  "send": "Send Event to the machine (The same as Xstate Interpreter)",
  "sender": {
    "definition": "A new way to simplify sending events",
    "example": {
      "event": {
        "type": "INPUT",
        "input": "string"
      },
      "prepareFunction": "const mySend = sender('INPUT')",
      "usage": "mySend({ input: 'name' })"
    }
  },
  "createSelector": "Create selector for hooks"
  /* ... */
}

, and hooks :

{
  "useSelector": "Select an element inside the current state (The same as Xstate hook but without the last parameter).",
  "useMatches": "Macther for the value of the current state (not from XState, derived from @bemedev/x-matches).",
  "useHasTags": "Macther for tags of current value. Accept param array."
}

NB : Check the Library : @bemedev/x-matches to see how useMatches works.

Live documentation here

Enjoy your function ✌🏾😎 !