This page is part of a static HTML representation of TriTarget.org at https://tritarget.org

XStateGlimmerComponent

Sukima 7th April 2020 at 10:24am

View official documentation

import Component from '@glimmer/component';
import { Machine, interpret } from 'xstate';
import { action } from '@ember/object';
import { tracked } from '@glimmer/tracking';

export default class MyComponent extends Component {

  @tracked state;

  constructor() {
    super(...arguments);
    this.machine = interpret(Machine({ … }).withConfig({ … }));
    this.machine.onTransition(state => this.state = state);
    this.machine.start();
  }

  willDestroy() {
    super.willDestroy(...arguments);
    this.machine.stop();
  }

  @action
  transition(...args) {
    this.machine.send(...args);
  }

}