haunted-robot

haunted-robot

The haunted-robot package provides the useMachine hook for use with Haunted.

import { createMachine, state, transition } from 'robot3';
import { component } from 'haunted';
import { html } from 'lit-html';
import { useMachine } from 'haunted-robot';

const machine = createMachine({
  off: state(
    transition('toggle', 'on')
  ),
  on: state(
    transition('toggle', 'off')
  )
});

function App() {
  const [current, send] = useMachine(machine);

  return html`
    <div>State: {current.name}</div>
    <button @click=${() => send('toggle')}>
      Toggle
    </button>
  `;
}

customElements.define('my-app', component(App));

Installation

Available as haunted-robot on npm:

npm install haunted-robot --save

Or through Yarn:

yarn add haunted-robot

API

useMachine(machine, initialContext)

Includes the arguments:

• machine: A Robot state machine.
• initialContext: An object that will be passed to the context function.

Returns the following as an array:

[current, send, service]

• current: A state object with the properties:
  • name: The name of the state (like off from the above example).
  • context: The context object for the service.
• service: A service like you normally get from interpret.

Normally only the current and send properties are needed to be used.

Here the state name is logged, as well as data from the context.

const [current, send] = useMachine(machine);
const { userName } = current.context;

console.log('Current state:', current.name);
console.log('Username from context', userName);

The send property is used to send events into the state machine:

const [current, send] = useMachine(machine);

return html`
  <button @click=${() => send('toggle')}>
    Toggle
  </button>
`;

License

BSD 2-Clause