Options
All
  • Public
  • Public/Protected
  • All
Menu

Module usables/use-machine

Index

Type aliases

ConfigurableMachineDefinition

ConfigurableMachineDefinition<TContext, TStateSchema, TEvent, TTypestate>: { _onTransition?: StateListener<TContext, TEvent, TStateSchema, TTypestate>; _update?: UpdateFunction<TContext, TStateSchema, TEvent, TTypestate>; args: { config?: Partial<MachineOptions<TContext, TEvent>>; context?: TContext; interpreterOptions: Partial<InterpreterOptions>; machine: StateMachine<TContext, TStateSchema, TEvent, TTypestate> }; interpreterOptions: Partial<InterpreterOptions>; machine: StateMachine<TContext, TStateSchema, TEvent, TTypestate>; onTransition: (fn: StateListener<TContext, TEvent, TStateSchema, TTypestate>) => ConfigurableMachineDefinition<TContext, TStateSchema, TEvent, TTypestate>; update: (fn: UpdateFunction<TContext, TStateSchema, TEvent, TTypestate>) => ConfigurableMachineDefinition<TContext, TStateSchema, TEvent, TTypestate>; withConfig: (config: Partial<MachineOptions<TContext, TEvent>>) => ConfigurableMachineDefinition<TContext, TStateSchema, TEvent, TTypestate>; withContext: (context: TContext) => ConfigurableMachineDefinition<TContext, TStateSchema, TEvent, TTypestate> }

Type parameters

  • TContext

  • TStateSchema: StateSchema

  • TEvent: EventObject

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

Type declaration

  • Optional _onTransition?: StateListener<TContext, TEvent, TStateSchema, TTypestate>
  • Optional _update?: UpdateFunction<TContext, TStateSchema, TEvent, TTypestate>
  • args: { config?: Partial<MachineOptions<TContext, TEvent>>; context?: TContext; interpreterOptions: Partial<InterpreterOptions>; machine: StateMachine<TContext, TStateSchema, TEvent, TTypestate> }
    • Optional config?: Partial<MachineOptions<TContext, TEvent>>
    • Optional context?: TContext
    • interpreterOptions: Partial<InterpreterOptions>
    • machine: StateMachine<TContext, TStateSchema, TEvent, TTypestate>
  • interpreterOptions: Partial<InterpreterOptions>
  • machine: StateMachine<TContext, TStateSchema, TEvent, TTypestate>
  • onTransition: (fn: StateListener<TContext, TEvent, TStateSchema, TTypestate>) => ConfigurableMachineDefinition<TContext, TStateSchema, TEvent, TTypestate>
      • Parameters

        • fn: StateListener<TContext, TEvent, TStateSchema, TTypestate>

        Returns ConfigurableMachineDefinition<TContext, TStateSchema, TEvent, TTypestate>

  • update: (fn: UpdateFunction<TContext, TStateSchema, TEvent, TTypestate>) => ConfigurableMachineDefinition<TContext, TStateSchema, TEvent, TTypestate>
  • withConfig: (config: Partial<MachineOptions<TContext, TEvent>>) => ConfigurableMachineDefinition<TContext, TStateSchema, TEvent, TTypestate>
  • withContext: (context: TContext) => ConfigurableMachineDefinition<TContext, TStateSchema, TEvent, TTypestate>

InterpreterUsable

InterpreterUsable<TContext, TStateSchema, TEvent, TTypestate>: { send: Send<TContext, TStateSchema, TEvent, TTypestate>; service: Interpreter<TContext, TStateSchema, TEvent, TTypestate>; state: State<TContext, TEvent, TStateSchema, TTypestate> }

An object that makes an XState-Interpreter accessible to the outside world and allows sending events to it.

This is actually the return value of InterpreterService.state.

Type parameters

  • TContext

  • TStateSchema: StateSchema

  • TEvent: EventObject

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

Type declaration

  • send: Send<TContext, TStateSchema, TEvent, TTypestate>
  • service: Interpreter<TContext, TStateSchema, TEvent, TTypestate>
  • state: State<TContext, TEvent, TStateSchema, TTypestate>

Send

Send<TContext, TStateSchema, TEvent, TTypestate>: Interpreter<TContext, TStateSchema, TEvent, TTypestate>["send"]

Type parameters

  • TContext

  • TStateSchema: StateSchema

  • TEvent: EventObject

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

UpdateFunction

UpdateFunction<TContext, TStateSchema, TEvent, TTypestate>: (args: { config?: Partial<MachineOptions<TContext, TEvent>>; context?: TContext; machine: StateMachine<TContext, TStateSchema, TEvent, TTypestate>; restart: (initialState?: State<TContext, TEvent, TStateSchema, TTypestate> | StateValue) => void; send: Send<TContext, TStateSchema, TEvent, TTypestate> }) => void

Type parameters

  • TContext

  • TStateSchema: StateSchema

  • TEvent: EventObject

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

Type declaration

    • (args: { config?: Partial<MachineOptions<TContext, TEvent>>; context?: TContext; machine: StateMachine<TContext, TStateSchema, TEvent, TTypestate>; restart: (initialState?: State<TContext, TEvent, TStateSchema, TTypestate> | StateValue) => void; send: Send<TContext, TStateSchema, TEvent, TTypestate> }): void
    • Parameters

      • args: { config?: Partial<MachineOptions<TContext, TEvent>>; context?: TContext; machine: StateMachine<TContext, TStateSchema, TEvent, TTypestate>; restart: (initialState?: State<TContext, TEvent, TStateSchema, TTypestate> | StateValue) => void; send: Send<TContext, TStateSchema, TEvent, TTypestate> }
        • Optional config?: Partial<MachineOptions<TContext, TEvent>>
        • Optional context?: TContext
        • machine: StateMachine<TContext, TStateSchema, TEvent, TTypestate>
        • restart: (initialState?: State<TContext, TEvent, TStateSchema, TTypestate> | StateValue) => void
            • (initialState?: State<TContext, TEvent, TStateSchema, TTypestate> | StateValue): void
            • Parameters

              • Optional initialState: State<TContext, TEvent, TStateSchema, TTypestate> | StateValue

              Returns void

        • send: Send<TContext, TStateSchema, TEvent, TTypestate>

      Returns void

UsableStatechart

UsableStatechart<TContext, TStateSchema, TEvent, TTypestate>: MachineConfig<TContext, TStateSchema, TEvent> | StateMachine<TContext, TStateSchema, TEvent, TTypestate>

Type parameters

  • TContext

  • TStateSchema: StateSchema

  • TEvent: EventObject

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

UseMachineBucket

UseMachineBucket<TContext, TStateSchema, TEvent, TTypestate>: { interpreter: InterpreterService<TContext, TStateSchema, TEvent, TTypestate>; setupOptions?: { initialState: State<TContext, TEvent, TStateSchema, TTypestate> | StateValue } }

Type parameters

  • TContext

  • TStateSchema: StateSchema

  • TEvent: EventObject

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

Type declaration

  • interpreter: InterpreterService<TContext, TStateSchema, TEvent, TTypestate>
  • Optional setupOptions?: { initialState: State<TContext, TEvent, TStateSchema, TTypestate> | StateValue }
    • initialState: State<TContext, TEvent, TStateSchema, TTypestate> | StateValue

Variables

Const ARGS_STATE_CHANGE_WARNING

ARGS_STATE_CHANGE_WARNING: "A change to passed `args` or a local state change triggered an update to a `useMachine`-usable. You can send a dedicated event to the machine or restart it so this is handled. This is done via the `.update`-hook of the `useMachine`-usable." = 'A change to passed `args` or a local state change triggered an update to a `useMachine`-usable. You can send a dedicated event to the machine or restart it so this is handled. This is done via the `.update`-hook of the `useMachine`-usable.'

Functions

default

  • default<TContext, TStateSchema, TEvent, TTypestate>(machine: UsableStatechart<TContext, TStateSchema, TEvent, TTypestate>, interpreterOptions?: Partial<InterpreterOptions>): ConfigurableMachineDefinition<TContext, TStateSchema, TEvent, TTypestate>
  • A function that lets you define a ConfigurableMachineDefinition that can be @used.

    import Component from '@glimmer/component';
    import buttonMachine from '../machines/button';
    
    export default ButtonComponent extends Component {
     @use statechart = useMachine(buttonMachine)
    
     @action
     buttonClicked() {
       this.statechart.send('CLICK');
     }
    }
    

    The ConfigurableMachineDefinition can be used to override properties of the UsableStatechart that was passed to useMachine.

    import Component from '@glimmer/component';
    import formMachine from '../machines/form';
    // ...
    
    export default FormComponent extends Component {
     // ...
     @use statechart = useMachine(formMachine)
       .withContext({
         // we can override the machine's context here
         formObject: this.formObject
       })
       .withConfig({
         services: {
           // to override an async function that can be invoked
           submitForm: this.submitForm
         },
         actions: {
           notifyFormSubmission: this.notifyFormSubmission
         },
         guards: {
           // ...
         }
       })
       .onTransition((state) => {
         // when you want to react to transitions manually
       })
       .update(({ send }) => {
         // decide how to handle properties passed to `useMachine` changing
         send('MY_EVENT_TO_HANDLE_ARGS_CHANGES');
       })
    
     @action
     submitForm(context, event) {
       return this.onSubmitForm(context.formObject);
     }
    
     @action
     notifyFormSubmission() {
       this.notifications.notify('Form was submitted');
     }
    }
    

    A ConfigurableMachineDefinition is only used to configure how the interpreted UsableStatechart will behave when interacting with it.

    When accessing the @used value you are actually dealing with a InterpreterUsable - i.e. an object that gives you access to the state-property of an XState-Interpreter and a send-function that can be used to send events to the interpreter.

    Type parameters

    • TContext

    • TStateSchema: StateSchema<any, TStateSchema>

    • TEvent: EventObject

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

    Parameters

    • machine: UsableStatechart<TContext, TStateSchema, TEvent, TTypestate>
    • interpreterOptions: Partial<InterpreterOptions> = {}

    Returns ConfigurableMachineDefinition<TContext, TStateSchema, TEvent, TTypestate>

Generated using TypeDoc