Options
All
  • Public
  • Public/Protected
  • All
Menu

Module index

Index

References

Functions

References

useMachine

Renames and exports default

Functions

interpreterFor

  • No-op typecast function that turns what TypeScript believes to be a ConfigurableMachineDefinition into an InterpreterUsable.

    TypeScript can't deal with decorators changing types thus we need this typecasting function because @use- will take what useMachine returns and initialize the actual usable which is the thing that you will work with from your code after accessing the usable's value.

    This function can be used in two ways:

    1. Whenever you want to send an event to a statechart:
    import { useMachine, interpreterFor } from 'ember-statecharts';
    
    class Foo extends EmberObject {
      @use statechart = useMachine(...) {
        // ...
      }
    
      someMethod() {
        this.statechart.send('WAT'); // TypeError
        interpreterFor(this.statechart).send('WAT'); // ok!
      }
    }
    
    1. By wrapping useMachine directly. This way you don't have to litter the rest of your code with interpreterFor:
    import { useMachine, interpreterFor } from 'ember-statecharts';
    
    class Foo extends EmberObject {
      @use statechart = interpreterFor(useMachine(...) {
        // ...
      })
    
      someMethod() {
        this.statechart.send('WAT'); // ok!
      }
    }
    

    Type parameters

    • TContext

    • TStateSchema: StateSchema<any, TStateSchema>

    • TEvent: EventObject

    • TTypestate: Typestate<TContext, TTypestate> = { context: TContext; value: any }

    Parameters

    Returns InterpreterUsable<TContext, TStateSchema, TEvent>

matchesState

  • matchesState(state: StateValue, statechartPropertyName?: string): any
  • A decorator that can be used to create a getter that matches against an InterpreterUsable's state and will return either true or false

    import Component from '@glimmer/component';
    import buttonMachine from '../machines/button';
    
    export default class Button extends Component {
     @use statechart = useMachine(buttonMachine)
    
     @matchesState('disabled')
     isDisabled; // true when statechart is in `disabled` state
    
     @matchesState({ interactivity: 'disabled' })
     isDisabled; // it is possible to match against nested/parallel states
    }
    

    You can match against any XState StateValue

    By default matchesState expects your InterpreterUsable to be called statechart. If you named it differently you can use the second param to this decorator:

    import Component from '@glimmer/component';
    import buttonMachine from '../machines/button';
    
    export default class Button extends Component {
     @use sc = useMachine(buttonMachine)
    
     @matchesState('disabled', 'sc')
     isDisabled;
    }
    

    Parameters

    • state: StateValue
    • statechartPropertyName: string = 'statechart'

    Returns any

Generated using TypeDoc