lazy.tsx

/**
 * @public
 *
 * Wraps an xstate-tree returning Promise (generated by `import()` in an xstate-tree machine responsible for
 * booting up the machine upon resolution
 *
 * @param factory - the factory function that returns the promise that resolves to the machine
 * @param options - configure loading component and context to invoke machine with
 * @returns an xstate-tree machine that wraps the promise, invoking the resulting machine when it resolves
 */
export function lazy<TMachine extends AnyXstateTreeMachine>(
  factory: () => Promise<TMachine>,
  {
    Loader = () => null,
    input,
  }: Options<ContextFrom<TMachine>> = {}
): AnyXstateTreeMachine {
  const loadedMachineSlot = singleSlot("loadedMachine");
  const slots = [loadedMachineSlot];
  let loadedMachine: AnyXstateTreeMachine | undefined = undefined;
  const machine = createMachine({
    initial: "loading",
    states: {
      loading: {
        invoke: {
          src: fromPromise(factory),
          onDone: {target: "rendering", actions: ({event}) =>  loadedMachine = event.output},
        },
      },
      rendering: {
        entry: () => console.log("Lazy loaded", loadedMachine),
        invoke: {
          id: loadedMachineSlot.getId(),
          src: (loadedMachine as unknown as AnyXstateTreeMachine),
          onSnapshot: {actions: ({context, event}) => {
            console.log("Snapshot", context, event);
          }},
          input
        },
      },
    },
  });

  // <snip>
}