Dynamic machine definitions - Best Practices

[cunneen]

Discussed in #2646

^{Originally posted by cunneen September 14, 2021}
Hi,

We want to interpret asynchronously-retrieved machines at runtime similar to (but not identical to) #1123.

Based on the comments (specifically this comment from @davidkpiano) on that issue, I've got the below working.

My question is: is this still the recommended way to achieve this? Or is there a more elegant solution?

(NB: I haven't yet dived into the question of managing context but I suspect in my case I will be able to use a combination of initial child-context and event payload to do what I need)

import { createMachine, interpret } from "xstate";

// child machine definition : this gets interpreted in the 'invokeChild' state of the parent machine
const childMachine = createMachine({
  id: "child",
  initial: "one",
  states: {
    one: {
      entry: [
        (ctx, event) => {
          console.log("child.one entry");
        },
        { type: "sendToParent", event: "MESSAGE_FROM_CHILD" },
      ],
      after: {
        2000: {
          target: "two",
        },
      },
    },
    two: {
      entry: [
        (ctx, event) => {
          console.log("child.two entry");
        },
        { type: "sendToParent", event: "MESSAGE_FROM_CHILD" },
      ],
      after: {
        2000: { target: "finished" },
      },
    },
    finished: {
      type: "final",
      exit: [{ type: "sendToParent", event: "CHILD_FINISHED" }],
    },
  },
});

// mock asynchronous runtime retrieval of a machine definition
const asyncGetDynamicMachine = async () => {
  // fake a 2 second delay, return the childMachine
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve(childMachine);
    }, 2000);
  });
};

// the parent machine retrieves and then interprets the child machine
const parentMachine = createMachine({
  id: "parent",
  initial: "invokeChild",
  states: {
    invokeChild: {
      invoke: {
        id: "childMachine",
        src: (ctx, e) => (callback, receive) => {
          console.log("child machine callback");
          asyncGetDynamicMachine().then((machine) => {
            const service = interpret(
              machine.withConfig({
                actions: {
                  sendToParent: (ctx, e, { action }) => {
                    callback(action.event);
                  },
                },
              })
            )
              .onTransition((state) =>
                console.log("child machine transition: ", state.value)
              )
              .start();

            receive((event) => {
              service.send(event);
            });
          });
        },
        // onDone doesn't seem to get entered?
      },
      on: {
        CHILD_FINISHED: { target: "parentDone" },
      },
    },
    parentDone: {
      type: "final",
    },
  },
  on: {
    MESSAGE_FROM_CHILD: {
      actions: [
        (ctx, event) => {
          console.log("message from child: ", ctx, event);
        },
      ],
    }
  },
});

const service = interpret(parentMachine)
  .onTransition((state) =>
    console.log("parent machine transition: ", state.value)
  )
  .start();
// => child machine callback
// => parent machine transition:  invokeChild
// 
// ... after 2 seconds ...
// 
// => child.one entry
// => message from child:  undefined { type: 'MESSAGE_FROM_CHILD' }
// => parent machine transition:  invokeChild
// => child machine transition:  one
// 
// ... after 2 seconds ...
// 
// => child.two entry
// => message from child:  undefined { type: 'MESSAGE_FROM_CHILD' }
// => parent machine transition:  invokeChild
// => child machine transition:  two
// 
// ... after 2 seconds ...
// 
// => child machine transition:  finished
// => parent machine transition:  parentDone
```</div>

[feritarou]

It has been a while since this question was asked, but it's only becoming more interesting now that, with XState 5, we have actor systems. In a fairly complex actor system, it would be very useful to be able to spawn dynamically loaded state machines (e.g. levels of a game) and to persist their state along with the parent. What's the recommended strategy to achieve this?

[ohroy]

any news here?
how can I spwan different actor based on context param dynamically?