xstate 5.0.0-beta.15 → 5.0.0-beta.16

package/dist/{actions-98f362b9.development.esm.js → actions-6f7fbc84.development.esm.js}

@@ -35,7 +35,7 @@ import { devToolsAdapter } from '../dev/dist/xstate-dev.development.esm.js';
 let ActionTypes = /*#__PURE__*/function (ActionTypes) {
   ActionTypes["Stop"] = "xstate.stop";
   ActionTypes["Raise"] = "xstate.raise";
-  ActionTypes["Send"] = "xstate.send";
+  ActionTypes["SendTo"] = "xstate.sendTo";
   ActionTypes["Cancel"] = "xstate.cancel";
   ActionTypes["Assign"] = "xstate.assign";
   ActionTypes["After"] = "xstate.after";
@@ -61,7 +61,7 @@ let SpecialTargets = /*#__PURE__*/function (SpecialTargets) {
 // xstate-specific action types
 const stop$1 = ActionTypes.Stop;
 const raise$1 = ActionTypes.Raise;
-const send$1 = ActionTypes.Send;
+const sendTo$1 = ActionTypes.SendTo;
 const cancel$1 = ActionTypes.Cancel;
 const assign$1 = ActionTypes.Assign;
 const after$1 = ActionTypes.After;
@@ -79,7 +79,7 @@ var actionTypes = /*#__PURE__*/Object.freeze({
   __proto__: null,
   stop: stop$1,
   raise: raise$1,
-  send: send$1,
+  sendTo: sendTo$1,
   cancel: cancel$1,
   assign: assign$1,
   after: after$1,
@@ -304,22 +304,19 @@ function isDynamicAction(action) {
 }
 
 /**
- * Sends an event. This returns an action that will be read by an interpreter to
- * send the event in the next step, after the current step is finished executing.
- *
- * @deprecated Use the `sendTo(...)` action creator instead.
+ * Sends an event to an actor.
  *
- * @param eventOrExpr The event to send.
- * @param options Options to pass into the send event:
+ * @param actor The `ActorRef` to send the event to.
+ * @param event The event to send, or an expression that evaluates to the event to send
+ * @param options Send action options
  *  - `id` - The unique send event identifier (used with `cancel()`).
  *  - `delay` - The number of milliseconds to delay the sending of the event.
- *  - `to` - The target of this event (by default, the machine the event was sent from).
  */
-function send(eventOrExpr, options) {
+function sendTo(actor, eventOrExpr, options) {
   return createDynamicAction({
-    type: send$1,
+    type: sendTo$1,
     params: {
-      to: options ? options.to : undefined,
+      to: actor,
       delay: options ? options.delay : undefined,
       event: eventOrExpr,
       id: options && options.id !== undefined ? options.id : isFunction(eventOrExpr) ? eventOrExpr.name : eventOrExpr.type
@@ -329,7 +326,7 @@ function send(eventOrExpr, options) {
     state
   }) => {
     const params = {
-      to: options ? options.to : undefined,
+      to: actor,
       delay: options ? options.delay : undefined,
       event: eventOrExpr,
       // TODO: don't auto-generate IDs here like that
@@ -377,13 +374,12 @@ function send(eventOrExpr, options) {
       targetActorRef = resolvedTarget || actorContext?.self;
     }
     const resolvedAction = {
-      type: send$1,
+      type: sendTo$1,
       params: {
         ...params,
         to: targetActorRef,
         event: resolvedEvent,
-        delay: resolvedDelay,
-        internal: resolvedTarget === SpecialTargets.Internal
+        delay: resolvedDelay
       },
       execute: actorCtx => {
         const sendAction = resolvedAction;
@@ -413,12 +409,8 @@ function send(eventOrExpr, options) {
  * @param options Options to pass into the send event.
  */
 function sendParent(event, options) {
-  return send(event, {
-    ...options,
-    to: SpecialTargets.Parent
-  });
+  return sendTo(SpecialTargets.Parent, event, options);
 }
-
 /**
  * Forwards (sends) an event to a specified service.
  *
@@ -436,12 +428,9 @@ function forwardTo(target, options) {
       return resolvedTarget;
     };
   }
-  return send(({
+  return sendTo(target, ({
     event
-  }) => event, {
-    ...options,
-    to: target
-  });
+  }) => event, options);
 }
 
 /**
@@ -457,25 +446,7 @@ function escalate(errorData, options) {
       type: error$1,
       data: isFunction(errorData) ? errorData(arg) : errorData
     };
-  }, {
-    ...options,
-    to: SpecialTargets.Parent
-  });
-}
-
-/**
- * Sends an event to an actor.
- *
- * @param actor The `ActorRef` to send the event to.
- * @param event The event to send, or an expression that evaluates to the event to send
- * @param options Send action options
- * @returns An XState send action object
- */
-function sendTo(actor, event, options) {
-  return send(event, {
-    ...options,
-    to: actor
-  });
+  }, options);
 }
 
 const cache = new WeakMap();
@@ -529,8 +500,6 @@ function cancel(sendId) {
   });
 }
 
-const symbolObservable = (() => typeof Symbol === 'function' && Symbol.observable || '@@observable')();
-
 class Mailbox {
   constructor(_process) {
     this._process = _process;
@@ -598,698 +567,317 @@ class Mailbox {
   }
 }
 
-function createSystem() {
-  let sessionIdCounter = 0;
-  const children = new Map();
-  const keyedActors = new Map();
-  const reverseKeyedActors = new WeakMap();
-  const system = {
-    _bookId: () => `x:${sessionIdCounter++}`,
-    _register: (sessionId, actorRef) => {
-      children.set(sessionId, actorRef);
-      return sessionId;
-    },
-    _unregister: actorRef => {
-      children.delete(actorRef.sessionId);
-      const systemId = reverseKeyedActors.get(actorRef);
-      if (systemId !== undefined) {
-        keyedActors.delete(systemId);
-        reverseKeyedActors.delete(actorRef);
-      }
+const symbolObservable = (() => typeof Symbol === 'function' && Symbol.observable || '@@observable')();
+
+/**
+ * Returns actor logic from a transition function and its initial state.
+ *
+ * A transition function is a function that takes the current state and an event and returns the next state.
+ *
+ * @param transition The transition function that returns the next state given the current state and event.
+ * @param initialState The initial state of the transition function.
+ * @returns Actor logic
+ */
+function fromTransition(transition, initialState) {
+  const logic = {
+    config: transition,
+    transition: (state, event, actorContext) => {
+      return transition(state, event, actorContext);
     },
-    get: systemId => {
-      return keyedActors.get(systemId);
+    getInitialState: (_, input) => {
+      return typeof initialState === 'function' ? initialState({
+        input
+      }) : initialState;
     },
-    _set: (systemId, actorRef) => {
-      const existing = keyedActors.get(systemId);
-      if (existing && existing !== actorRef) {
-        throw new Error(`Actor with system ID '${systemId}' already exists.`);
-      }
-      keyedActors.set(systemId, actorRef);
-      reverseKeyedActors.set(actorRef, systemId);
-    }
+    getSnapshot: state => state,
+    getPersistedState: state => state,
+    restoreState: state => state
   };
-  return system;
+  return logic;
 }
 
-let ActorStatus = /*#__PURE__*/function (ActorStatus) {
-  ActorStatus[ActorStatus["NotStarted"] = 0] = "NotStarted";
-  ActorStatus[ActorStatus["Running"] = 1] = "Running";
-  ActorStatus[ActorStatus["Stopped"] = 2] = "Stopped";
-  return ActorStatus;
-}({});
-const defaultOptions = {
-  deferEvents: true,
-  clock: {
-    setTimeout: (fn, ms) => {
-      return setTimeout(fn, ms);
+const resolveEventType = '$$xstate.resolve';
+const rejectEventType = '$$xstate.reject';
+function fromPromise(
+// TODO: add types
+promiseCreator) {
+  // TODO: add event types, consider making the `PromiseEvent` a private type or smth alike
+  const logic = {
+    config: promiseCreator,
+    transition: (state, event) => {
+      if (state.status !== 'active') {
+        return state;
+      }
+      switch (event.type) {
+        case resolveEventType:
+          return {
+            ...state,
+            status: 'done',
+            data: event.data,
+            input: undefined
+          };
+        case rejectEventType:
+          return {
+            ...state,
+            status: 'error',
+            data: event.data,
+            input: undefined
+          };
+        case stopSignalType:
+          return {
+            ...state,
+            status: 'canceled',
+            input: undefined
+          };
+        default:
+          return state;
+      }
     },
-    clearTimeout: id => {
-      return clearTimeout(id);
-    }
-  },
-  logger: console.log.bind(console),
-  devTools: false
-};
-class Interpreter {
-  /**
-   * The current state of the interpreted logic.
-   */
-
-  /**
-   * The clock that is responsible for setting and clearing timeouts, such as delayed events and transitions.
-   */
-
-  /**
-   * The unique identifier for this actor relative to its parent.
-   */
-
-  /**
-   * Whether the service is started.
-   */
-
-  // Actor Ref
-
-  // TODO: add typings for system
+    start: (state, {
+      self,
+      system
+    }) => {
+      // TODO: determine how to allow customizing this so that promises
+      // can be restarted if necessary
+      if (state.status !== 'active') {
+        return;
+      }
+      const resolvedPromise = Promise.resolve(promiseCreator({
+        input: state.input,
+        system
+      }));
+      resolvedPromise.then(response => {
+        // TODO: remove this condition once dead letter queue lands
+        if (self._state.status !== 'active') {
+          return;
+        }
+        self.send({
+          type: resolveEventType,
+          data: response
+        });
+      }, errorData => {
+        // TODO: remove this condition once dead letter queue lands
+        if (self._state.status !== 'active') {
+          return;
+        }
+        self.send({
+          type: rejectEventType,
+          data: errorData
+        });
+      });
+    },
+    getInitialState: (_, input) => {
+      return {
+        status: 'active',
+        data: undefined,
+        input
+      };
+    },
+    getSnapshot: state => state.data,
+    getStatus: state => state,
+    getPersistedState: state => state,
+    restoreState: state => state
+  };
+  return logic;
+}
 
-  /**
-   * The globally unique process ID for this invocation.
-   */
+// TODO: this likely shouldn't accept TEvent, observable actor doesn't accept external events
+function fromObservable(observableCreator) {
+  const nextEventType = '$$xstate.next';
+  const errorEventType = '$$xstate.error';
+  const completeEventType = '$$xstate.complete';
 
-  /**
-   * Creates a new Interpreter instance (i.e., service) for the given logic with the provided options, if any.
-   *
-   * @param logic The logic to be interpreted
-   * @param options Interpreter options
-   */
-  constructor(logic, options) {
-    this.logic = logic;
-    this._state = void 0;
-    this.clock = void 0;
-    this.options = void 0;
-    this.id = void 0;
-    this.mailbox = new Mailbox(this._process.bind(this));
-    this.delayedEventsMap = {};
-    this.observers = new Set();
-    this.logger = void 0;
-    this.status = ActorStatus.NotStarted;
-    this._parent = void 0;
-    this.ref = void 0;
-    this._actorContext = void 0;
-    this._systemId = void 0;
-    this.sessionId = void 0;
-    this.system = void 0;
-    this._doneEvent = void 0;
-    this.src = void 0;
-    this._deferred = [];
-    const resolvedOptions = {
-      ...defaultOptions,
-      ...options
-    };
-    const {
-      clock,
-      logger,
-      parent,
+  // TODO: add event types
+  const logic = {
+    config: observableCreator,
+    transition: (state, event, {
+      self,
       id,
-      systemId
-    } = resolvedOptions;
-    const self = this;
-    this.system = parent?.system ?? createSystem();
-    if (systemId) {
-      this._systemId = systemId;
-      this.system._set(systemId, this);
-    }
-    this.sessionId = this.system._bookId();
-    this.id = id ?? this.sessionId;
-    this.logger = logger;
-    this.clock = clock;
-    this._parent = parent;
-    this.options = resolvedOptions;
-    this.src = resolvedOptions.src;
-    this.ref = this;
-    this._actorContext = {
+      defer
+    }) => {
+      if (state.status !== 'active') {
+        return state;
+      }
+      switch (event.type) {
+        case nextEventType:
+          // match the exact timing of events sent by machines
+          // send actions are not executed immediately
+          defer(() => {
+            self._parent?.send({
+              type: `xstate.snapshot.${id}`,
+              data: event.data
+            });
+          });
+          return {
+            ...state,
+            data: event.data
+          };
+        case errorEventType:
+          return {
+            ...state,
+            status: 'error',
+            input: undefined,
+            data: event.data,
+            subscription: undefined
+          };
+        case completeEventType:
+          return {
+            ...state,
+            status: 'done',
+            input: undefined,
+            subscription: undefined
+          };
+        case stopSignalType:
+          state.subscription.unsubscribe();
+          return {
+            ...state,
+            status: 'canceled',
+            input: undefined,
+            subscription: undefined
+          };
+        default:
+          return state;
+      }
+    },
+    getInitialState: (_, input) => {
+      return {
+        subscription: undefined,
+        status: 'active',
+        data: undefined,
+        input
+      };
+    },
+    start: (state, {
       self,
-      id: this.id,
-      sessionId: this.sessionId,
-      logger: this.logger,
-      defer: fn => {
-        this._deferred.push(fn);
-      },
-      system: this.system,
-      stopChild: child => {
-        if (child._parent !== this) {
-          throw new Error(`Cannot stop child actor ${child.id} of ${this.id} because it is not a child`);
-        }
-        child._stop();
+      system
+    }) => {
+      if (state.status === 'done') {
+        // Do not restart a completed observable
+        return;
       }
-    };
-
-    // Ensure that the send method is bound to this interpreter instance
-    // if destructured
-    this.send = this.send.bind(this);
-    this._initState();
-  }
-  _initState() {
-    this._state = this.options.state ? this.logic.restoreState ? this.logic.restoreState(this.options.state, this._actorContext) : this.options.state : this.logic.getInitialState(this._actorContext, this.options?.input);
-  }
-
-  // array of functions to defer
-
-  update(state) {
-    // Update state
-    this._state = state;
-    const snapshot = this.getSnapshot();
+      state.subscription = observableCreator({
+        input: state.input,
+        system
+      }).subscribe({
+        next: value => {
+          self.send({
+            type: nextEventType,
+            data: value
+          });
+        },
+        error: err => {
+          self.send({
+            type: errorEventType,
+            data: err
+          });
+        },
+        complete: () => {
+          self.send({
+            type: completeEventType
+          });
+        }
+      });
+    },
+    getSnapshot: state => state.data,
+    getPersistedState: ({
+      status,
+      data,
+      input
+    }) => ({
+      status,
+      data,
+      input
+    }),
+    getStatus: state => state,
+    restoreState: state => ({
+      ...state,
+      subscription: undefined
+    })
+  };
+  return logic;
+}
 
-    // Execute deferred effects
-    let deferredFn;
-    while (deferredFn = this._deferred.shift()) {
-      deferredFn();
-    }
-    for (const observer of this.observers) {
-      observer.next?.(snapshot);
-    }
-    const status = this.logic.getStatus?.(state);
-    switch (status?.status) {
-      case 'done':
-        this._stopProcedure();
-        this._doneEvent = doneInvoke(this.id, status.data);
-        this._parent?.send(this._doneEvent);
-        this._complete();
-        break;
-      case 'error':
-        this._stopProcedure();
-        this._parent?.send(error(this.id, status.data));
-        this._error(status.data);
-        break;
-    }
-  }
-  subscribe(nextListenerOrObserver, errorListener, completeListener) {
-    const observer = toObserver(nextListenerOrObserver, errorListener, completeListener);
-    this.observers.add(observer);
-    if (this.status === ActorStatus.Stopped) {
-      observer.complete?.();
-      this.observers.delete(observer);
-    }
-    return {
-      unsubscribe: () => {
-        this.observers.delete(observer);
-      }
-    };
-  }
+/**
+ * Creates event observable logic that listens to an observable
+ * that delivers event objects.
+ *
+ *
+ * @param lazyObservable A function that creates an observable
+ * @returns Event observable logic
+ */
 
-  /**
-   * Starts the interpreter from the initial state
-   */
-  start() {
-    if (this.status === ActorStatus.Running) {
-      // Do not restart the service if it is already started
-      return this;
-    }
-    this.system._register(this.sessionId, this);
-    if (this._systemId) {
-      this.system._set(this._systemId, this);
-    }
-    this.status = ActorStatus.Running;
-    if (this.logic.start) {
-      this.logic.start(this._state, this._actorContext);
-    }
+function fromEventObservable(lazyObservable) {
+  const errorEventType = '$$xstate.error';
+  const completeEventType = '$$xstate.complete';
 
-    // TODO: this notifies all subscribers but usually this is redundant
-    // there is no real change happening here
-    // we need to rethink if this needs to be refactored
-    this.update(this._state);
-    if (this.options.devTools) {
-      this.attachDevTools();
-    }
-    this.mailbox.start();
-    return this;
-  }
-  _process(event) {
-    try {
-      const nextState = this.logic.transition(this._state, event, this._actorContext);
-      this.update(nextState);
-      if (event.type === stopSignalType) {
-        this._stopProcedure();
-        this._complete();
+  // TODO: event types
+  const logic = {
+    config: lazyObservable,
+    transition: (state, event) => {
+      if (state.status !== 'active') {
+        return state;
       }
-    } catch (err) {
-      // TODO: properly handle errors
-      if (this.observers.size > 0) {
-        this.observers.forEach(observer => {
-          observer.error?.(err);
-        });
-        this.stop();
-      } else {
-        throw err;
+      switch (event.type) {
+        case errorEventType:
+          return {
+            ...state,
+            status: 'error',
+            input: undefined,
+            data: event.data,
+            subscription: undefined
+          };
+        case completeEventType:
+          return {
+            ...state,
+            status: 'done',
+            input: undefined,
+            subscription: undefined
+          };
+        case stopSignalType:
+          state.subscription.unsubscribe();
+          return {
+            ...state,
+            status: 'canceled',
+            input: undefined,
+            subscription: undefined
+          };
+        default:
+          return state;
       }
-    }
-  }
-  _stop() {
-    if (this.status === ActorStatus.Stopped) {
-      return this;
-    }
-    this.mailbox.clear();
-    if (this.status === ActorStatus.NotStarted) {
-      this.status = ActorStatus.Stopped;
-      return this;
-    }
-    this.mailbox.enqueue({
-      type: stopSignalType
-    });
-    return this;
-  }
-
-  /**
-   * Stops the interpreter and unsubscribe all listeners.
-   */
-  stop() {
-    if (this._parent) {
-      throw new Error('A non-root actor cannot be stopped directly.');
-    }
-    return this._stop();
-  }
-  _complete() {
-    for (const observer of this.observers) {
-      observer.complete?.();
-    }
-    this.observers.clear();
-  }
-  _error(data) {
-    for (const observer of this.observers) {
-      observer.error?.(data);
-    }
-    this.observers.clear();
-  }
-  _stopProcedure() {
-    if (this.status !== ActorStatus.Running) {
-      // Interpreter already stopped; do nothing
-      return this;
-    }
-
-    // Cancel all delayed events
-    for (const key of Object.keys(this.delayedEventsMap)) {
-      this.clock.clearTimeout(this.delayedEventsMap[key]);
-    }
-
-    // TODO: mailbox.reset
-    this.mailbox.clear();
-    // TODO: after `stop` we must prepare ourselves for receiving events again
-    // events sent *after* stop signal must be queued
-    // it seems like this should be the common behavior for all of our consumers
-    // so perhaps this should be unified somehow for all of them
-    this.mailbox = new Mailbox(this._process.bind(this));
-    this.status = ActorStatus.Stopped;
-    this.system._unregister(this);
-    return this;
-  }
-
-  /**
-   * Sends an event to the running interpreter to trigger a transition.
-   *
-   * @param event The event to send
-   */
-  send(event) {
-    if (typeof event === 'string') {
-      throw new Error(`Only event objects may be sent to actors; use .send({ type: "${event}" }) instead`);
-    }
-    if (this.status === ActorStatus.Stopped) {
-      // do nothing
-      {
-        const eventString = JSON.stringify(event);
-        console.warn(`Event "${event.type.toString()}" was sent to stopped actor "${this.id} (${this.sessionId})". This actor has already reached its final state, and will not transition.\nEvent: ${eventString}`);
-      }
-      return;
-    }
-    if (this.status !== ActorStatus.Running && !this.options.deferEvents) {
-      throw new Error(`Event "${event.type}" was sent to uninitialized actor "${this.id
-      // tslint:disable-next-line:max-line-length
-      }". Make sure .start() is called for this actor, or set { deferEvents: true } in the actor options.\nEvent: ${JSON.stringify(event)}`);
-    }
-    this.mailbox.enqueue(event);
-  }
-
-  // TODO: make private (and figure out a way to do this within the machine)
-  delaySend(sendAction) {
-    this.delayedEventsMap[sendAction.params.id] = this.clock.setTimeout(() => {
-      if ('to' in sendAction.params && sendAction.params.to) {
-        sendAction.params.to.send(sendAction.params.event);
-      } else {
-        this.send(sendAction.params.event);
-      }
-    }, sendAction.params.delay);
-  }
-
-  // TODO: make private (and figure out a way to do this within the machine)
-  cancel(sendId) {
-    this.clock.clearTimeout(this.delayedEventsMap[sendId]);
-    delete this.delayedEventsMap[sendId];
-  }
-  attachDevTools() {
-    const {
-      devTools
-    } = this.options;
-    if (devTools) {
-      const resolvedDevToolsAdapter = typeof devTools === 'function' ? devTools : devToolsAdapter;
-      resolvedDevToolsAdapter(this);
-    }
-  }
-  toJSON() {
-    return {
-      id: this.id
-    };
-  }
-  getPersistedState() {
-    return this.logic.getPersistedState?.(this._state);
-  }
-  [symbolObservable]() {
-    return this;
-  }
-  getSnapshot() {
-    return this.logic.getSnapshot ? this.logic.getSnapshot(this._state) : this._state;
-  }
-}
-
-/**
- * Creates a new Interpreter instance for the given machine with the provided options, if any.
- *
- * @param machine The machine to interpret
- * @param options Interpreter options
- */
-
-function interpret(logic, options) {
-  const interpreter = new Interpreter(logic, options);
-  return interpreter;
-}
-
-/**
- * Returns actor logic from a transition function and its initial state.
- *
- * A transition function is a function that takes the current state and an event and returns the next state.
- *
- * @param transition The transition function that returns the next state given the current state and event.
- * @param initialState The initial state of the transition function.
- * @returns Actor logic
- */
-function fromTransition(transition, initialState) {
-  const logic = {
-    config: transition,
-    transition: (state, event, actorContext) => {
-      return transition(state, event, actorContext);
     },
     getInitialState: (_, input) => {
-      return typeof initialState === 'function' ? initialState({
+      return {
+        subscription: undefined,
+        status: 'active',
+        data: undefined,
         input
-      }) : initialState;
-    },
-    getSnapshot: state => state,
-    getPersistedState: state => state,
-    restoreState: state => state
-  };
-  return logic;
-}
-
-const resolveEventType = '$$xstate.resolve';
-const rejectEventType = '$$xstate.reject';
-function fromPromise(
-// TODO: add types
-promiseCreator) {
-  // TODO: add event types, consider making the `PromiseEvent` a private type or smth alike
-  const logic = {
-    config: promiseCreator,
-    transition: (state, event) => {
-      if (state.status !== 'active') {
-        return state;
-      }
-      switch (event.type) {
-        case resolveEventType:
-          return {
-            ...state,
-            status: 'done',
-            data: event.data,
-            input: undefined
-          };
-        case rejectEventType:
-          return {
-            ...state,
-            status: 'error',
-            data: event.data,
-            input: undefined
-          };
-        case stopSignalType:
-          return {
-            ...state,
-            status: 'canceled',
-            input: undefined
-          };
-        default:
-          return state;
-      }
+      };
     },
     start: (state, {
       self,
       system
     }) => {
-      // TODO: determine how to allow customizing this so that promises
-      // can be restarted if necessary
-      if (state.status !== 'active') {
+      if (state.status === 'done') {
+        // Do not restart a completed observable
         return;
       }
-      const resolvedPromise = Promise.resolve(promiseCreator({
+      state.subscription = lazyObservable({
         input: state.input,
         system
-      }));
-      resolvedPromise.then(response => {
-        // TODO: remove this condition once dead letter queue lands
-        if (self._state.status !== 'active') {
-          return;
-        }
-        self.send({
-          type: resolveEventType,
-          data: response
-        });
-      }, errorData => {
-        // TODO: remove this condition once dead letter queue lands
-        if (self._state.status !== 'active') {
-          return;
-        }
-        self.send({
-          type: rejectEventType,
-          data: errorData
-        });
-      });
-    },
-    getInitialState: (_, input) => {
-      return {
-        status: 'active',
-        data: undefined,
-        input
-      };
-    },
-    getSnapshot: state => state.data,
-    getStatus: state => state,
-    getPersistedState: state => state,
-    restoreState: state => state
-  };
-  return logic;
-}
-
-// TODO: this likely shouldn't accept TEvent, observable actor doesn't accept external events
-function fromObservable(observableCreator) {
-  const nextEventType = '$$xstate.next';
-  const errorEventType = '$$xstate.error';
-  const completeEventType = '$$xstate.complete';
-
-  // TODO: add event types
-  const logic = {
-    config: observableCreator,
-    transition: (state, event, {
-      self,
-      id,
-      defer
-    }) => {
-      if (state.status !== 'active') {
-        return state;
-      }
-      switch (event.type) {
-        case nextEventType:
-          // match the exact timing of events sent by machines
-          // send actions are not executed immediately
-          defer(() => {
-            self._parent?.send({
-              type: `xstate.snapshot.${id}`,
-              data: event.data
-            });
-          });
-          return {
-            ...state,
-            data: event.data
-          };
-        case errorEventType:
-          return {
-            ...state,
-            status: 'error',
-            input: undefined,
-            data: event.data,
-            subscription: undefined
-          };
-        case completeEventType:
-          return {
-            ...state,
-            status: 'done',
-            input: undefined,
-            subscription: undefined
-          };
-        case stopSignalType:
-          state.subscription.unsubscribe();
-          return {
-            ...state,
-            status: 'canceled',
-            input: undefined,
-            subscription: undefined
-          };
-        default:
-          return state;
-      }
-    },
-    getInitialState: (_, input) => {
-      return {
-        subscription: undefined,
-        status: 'active',
-        data: undefined,
-        input
-      };
-    },
-    start: (state, {
-      self,
-      system
-    }) => {
-      if (state.status === 'done') {
-        // Do not restart a completed observable
-        return;
-      }
-      state.subscription = observableCreator({
-        input: state.input,
-        system
-      }).subscribe({
-        next: value => {
-          self.send({
-            type: nextEventType,
-            data: value
-          });
-        },
-        error: err => {
-          self.send({
-            type: errorEventType,
-            data: err
-          });
-        },
-        complete: () => {
-          self.send({
-            type: completeEventType
-          });
-        }
-      });
-    },
-    getSnapshot: state => state.data,
-    getPersistedState: ({
-      status,
-      data,
-      input
-    }) => ({
-      status,
-      data,
-      input
-    }),
-    getStatus: state => state,
-    restoreState: state => ({
-      ...state,
-      subscription: undefined
-    })
-  };
-  return logic;
-}
-
-/**
- * Creates event observable logic that listens to an observable
- * that delivers event objects.
- *
- *
- * @param lazyObservable A function that creates an observable
- * @returns Event observable logic
- */
-
-function fromEventObservable(lazyObservable) {
-  const errorEventType = '$$xstate.error';
-  const completeEventType = '$$xstate.complete';
-
-  // TODO: event types
-  const logic = {
-    config: lazyObservable,
-    transition: (state, event) => {
-      if (state.status !== 'active') {
-        return state;
-      }
-      switch (event.type) {
-        case errorEventType:
-          return {
-            ...state,
-            status: 'error',
-            input: undefined,
-            data: event.data,
-            subscription: undefined
-          };
-        case completeEventType:
-          return {
-            ...state,
-            status: 'done',
-            input: undefined,
-            subscription: undefined
-          };
-        case stopSignalType:
-          state.subscription.unsubscribe();
-          return {
-            ...state,
-            status: 'canceled',
-            input: undefined,
-            subscription: undefined
-          };
-        default:
-          return state;
-      }
-    },
-    getInitialState: (_, input) => {
-      return {
-        subscription: undefined,
-        status: 'active',
-        data: undefined,
-        input
-      };
-    },
-    start: (state, {
-      self,
-      system
-    }) => {
-      if (state.status === 'done') {
-        // Do not restart a completed observable
-        return;
-      }
-      state.subscription = lazyObservable({
-        input: state.input,
-        system
-      }).subscribe({
-        next: value => {
-          self._parent?.send(value);
-        },
-        error: err => {
-          self.send({
-            type: errorEventType,
-            data: err
-          });
-        },
-        complete: () => {
-          self.send({
-            type: completeEventType
-          });
+      }).subscribe({
+        next: value => {
+          self._parent?.send(value);
+        },
+        error: err => {
+          self.send({
+            type: errorEventType,
+            data: err
+          });
+        },
+        complete: () => {
+          self.send({
+            type: completeEventType
+          });
         }
       });
     },
@@ -1341,92 +929,475 @@ function fromCallback(invokeCallback) {
           input: state.input,
           system
         });
-        if (isPromiseLike(state.dispose)) {
-          state.dispose.then(resolved => {
-            self._parent?.send(doneInvoke(id, resolved));
-            state.canceled = true;
-          }, errorData => {
-            state.canceled = true;
-            self._parent?.send(error(id, errorData));
-          });
-        }
-        return state;
+        if (isPromiseLike(state.dispose)) {
+          state.dispose.then(resolved => {
+            self._parent?.send(doneInvoke(id, resolved));
+            state.canceled = true;
+          }, errorData => {
+            state.canceled = true;
+            self._parent?.send(error(id, errorData));
+          });
+        }
+        return state;
+      }
+      if (event.type === stopSignalType) {
+        state.canceled = true;
+        if (isFunction(state.dispose)) {
+          state.dispose();
+        }
+        return state;
+      }
+      if (isSignal(event)) {
+        // TODO: unrecognized signal
+        return state;
+      }
+      state.receivers.forEach(receiver => receiver(event));
+      return state;
+    },
+    getInitialState: (_, input) => {
+      return {
+        canceled: false,
+        receivers: new Set(),
+        dispose: undefined,
+        input
+      };
+    },
+    getSnapshot: () => undefined,
+    getPersistedState: ({
+      input
+    }) => input
+  };
+  return logic;
+}
+
+const startSignalType = 'xstate.init';
+const stopSignalType = 'xstate.stop';
+const startSignal = {
+  type: 'xstate.init'
+};
+const stopSignal = {
+  type: 'xstate.stop'
+};
+/**
+ * An object that expresses the actor logic in reaction to received events,
+ * as well as an optionally emitted stream of values.
+ *
+ * @template TReceived The received event
+ * @template TSnapshot The emitted value
+ */
+
+function isSignal(event) {
+  return event.type === startSignalType || event.type === stopSignalType;
+}
+function isActorRef(item) {
+  return !!item && typeof item === 'object' && typeof item.send === 'function';
+}
+
+// TODO: refactor the return type, this could be written in a better way
+// but it's best to avoid unneccessary breaking changes now
+// @deprecated use `interpret(actorLogic)` instead
+function toActorRef(actorRefLike) {
+  return {
+    subscribe: () => ({
+      unsubscribe: () => void 0
+    }),
+    id: 'anonymous',
+    sessionId: '',
+    getSnapshot: () => undefined,
+    [symbolObservable]: function () {
+      return this;
+    },
+    status: ActorStatus.Running,
+    stop: () => void 0,
+    ...actorRefLike
+  };
+}
+const emptyLogic = fromTransition(_ => undefined, undefined);
+function createEmptyActor() {
+  return interpret(emptyLogic);
+}
+
+function createSystem() {
+  let sessionIdCounter = 0;
+  const children = new Map();
+  const keyedActors = new Map();
+  const reverseKeyedActors = new WeakMap();
+  const system = {
+    _bookId: () => `x:${sessionIdCounter++}`,
+    _register: (sessionId, actorRef) => {
+      children.set(sessionId, actorRef);
+      return sessionId;
+    },
+    _unregister: actorRef => {
+      children.delete(actorRef.sessionId);
+      const systemId = reverseKeyedActors.get(actorRef);
+      if (systemId !== undefined) {
+        keyedActors.delete(systemId);
+        reverseKeyedActors.delete(actorRef);
+      }
+    },
+    get: systemId => {
+      return keyedActors.get(systemId);
+    },
+    _set: (systemId, actorRef) => {
+      const existing = keyedActors.get(systemId);
+      if (existing && existing !== actorRef) {
+        throw new Error(`Actor with system ID '${systemId}' already exists.`);
+      }
+      keyedActors.set(systemId, actorRef);
+      reverseKeyedActors.set(actorRef, systemId);
+    }
+  };
+  return system;
+}
+
+let ActorStatus = /*#__PURE__*/function (ActorStatus) {
+  ActorStatus[ActorStatus["NotStarted"] = 0] = "NotStarted";
+  ActorStatus[ActorStatus["Running"] = 1] = "Running";
+  ActorStatus[ActorStatus["Stopped"] = 2] = "Stopped";
+  return ActorStatus;
+}({});
+const defaultOptions = {
+  deferEvents: true,
+  clock: {
+    setTimeout: (fn, ms) => {
+      return setTimeout(fn, ms);
+    },
+    clearTimeout: id => {
+      return clearTimeout(id);
+    }
+  },
+  logger: console.log.bind(console),
+  devTools: false
+};
+class Interpreter {
+  /**
+   * The current state of the interpreted logic.
+   */
+
+  /**
+   * The clock that is responsible for setting and clearing timeouts, such as delayed events and transitions.
+   */
+
+  /**
+   * The unique identifier for this actor relative to its parent.
+   */
+
+  /**
+   * Whether the service is started.
+   */
+
+  // Actor Ref
+
+  // TODO: add typings for system
+
+  /**
+   * The globally unique process ID for this invocation.
+   */
+
+  /**
+   * Creates a new Interpreter instance (i.e., service) for the given logic with the provided options, if any.
+   *
+   * @param logic The logic to be interpreted
+   * @param options Interpreter options
+   */
+  constructor(logic, options) {
+    this.logic = logic;
+    this._state = void 0;
+    this.clock = void 0;
+    this.options = void 0;
+    this.id = void 0;
+    this.mailbox = new Mailbox(this._process.bind(this));
+    this.delayedEventsMap = {};
+    this.observers = new Set();
+    this.logger = void 0;
+    this.status = ActorStatus.NotStarted;
+    this._parent = void 0;
+    this.ref = void 0;
+    this._actorContext = void 0;
+    this._systemId = void 0;
+    this.sessionId = void 0;
+    this.system = void 0;
+    this._doneEvent = void 0;
+    this.src = void 0;
+    this._deferred = [];
+    const resolvedOptions = {
+      ...defaultOptions,
+      ...options
+    };
+    const {
+      clock,
+      logger,
+      parent,
+      id,
+      systemId
+    } = resolvedOptions;
+    const self = this;
+    this.system = parent?.system ?? createSystem();
+    if (systemId) {
+      this._systemId = systemId;
+      this.system._set(systemId, this);
+    }
+    this.sessionId = this.system._bookId();
+    this.id = id ?? this.sessionId;
+    this.logger = logger;
+    this.clock = clock;
+    this._parent = parent;
+    this.options = resolvedOptions;
+    this.src = resolvedOptions.src;
+    this.ref = this;
+    this._actorContext = {
+      self,
+      id: this.id,
+      sessionId: this.sessionId,
+      logger: this.logger,
+      defer: fn => {
+        this._deferred.push(fn);
+      },
+      system: this.system,
+      stopChild: child => {
+        if (child._parent !== this) {
+          throw new Error(`Cannot stop child actor ${child.id} of ${this.id} because it is not a child`);
+        }
+        child._stop();
+      }
+    };
+
+    // Ensure that the send method is bound to this interpreter instance
+    // if destructured
+    this.send = this.send.bind(this);
+    this._initState();
+  }
+  _initState() {
+    this._state = this.options.state ? this.logic.restoreState ? this.logic.restoreState(this.options.state, this._actorContext) : this.options.state : this.logic.getInitialState(this._actorContext, this.options?.input);
+  }
+
+  // array of functions to defer
+
+  update(state) {
+    // Update state
+    this._state = state;
+    const snapshot = this.getSnapshot();
+
+    // Execute deferred effects
+    let deferredFn;
+    while (deferredFn = this._deferred.shift()) {
+      deferredFn();
+    }
+    for (const observer of this.observers) {
+      observer.next?.(snapshot);
+    }
+    const status = this.logic.getStatus?.(state);
+    switch (status?.status) {
+      case 'done':
+        this._stopProcedure();
+        this._doneEvent = doneInvoke(this.id, status.data);
+        this._parent?.send(this._doneEvent);
+        this._complete();
+        break;
+      case 'error':
+        this._stopProcedure();
+        this._parent?.send(error(this.id, status.data));
+        this._error(status.data);
+        break;
+    }
+  }
+  subscribe(nextListenerOrObserver, errorListener, completeListener) {
+    const observer = toObserver(nextListenerOrObserver, errorListener, completeListener);
+    this.observers.add(observer);
+    if (this.status === ActorStatus.Stopped) {
+      observer.complete?.();
+      this.observers.delete(observer);
+    }
+    return {
+      unsubscribe: () => {
+        this.observers.delete(observer);
+      }
+    };
+  }
+
+  /**
+   * Starts the interpreter from the initial state
+   */
+  start() {
+    if (this.status === ActorStatus.Running) {
+      // Do not restart the service if it is already started
+      return this;
+    }
+    this.system._register(this.sessionId, this);
+    if (this._systemId) {
+      this.system._set(this._systemId, this);
+    }
+    this.status = ActorStatus.Running;
+    if (this.logic.start) {
+      this.logic.start(this._state, this._actorContext);
+    }
+
+    // TODO: this notifies all subscribers but usually this is redundant
+    // there is no real change happening here
+    // we need to rethink if this needs to be refactored
+    this.update(this._state);
+    if (this.options.devTools) {
+      this.attachDevTools();
+    }
+    this.mailbox.start();
+    return this;
+  }
+  _process(event) {
+    try {
+      const nextState = this.logic.transition(this._state, event, this._actorContext);
+      this.update(nextState);
+      if (event.type === stopSignalType) {
+        this._stopProcedure();
+        this._complete();
+      }
+    } catch (err) {
+      // TODO: properly handle errors
+      if (this.observers.size > 0) {
+        this.observers.forEach(observer => {
+          observer.error?.(err);
+        });
+        this.stop();
+      } else {
+        throw err;
       }
-      if (event.type === stopSignalType) {
-        state.canceled = true;
-        if (isFunction(state.dispose)) {
-          state.dispose();
-        }
-        return state;
+    }
+  }
+  _stop() {
+    if (this.status === ActorStatus.Stopped) {
+      return this;
+    }
+    this.mailbox.clear();
+    if (this.status === ActorStatus.NotStarted) {
+      this.status = ActorStatus.Stopped;
+      return this;
+    }
+    this.mailbox.enqueue({
+      type: stopSignalType
+    });
+    return this;
+  }
+
+  /**
+   * Stops the interpreter and unsubscribe all listeners.
+   */
+  stop() {
+    if (this._parent) {
+      throw new Error('A non-root actor cannot be stopped directly.');
+    }
+    return this._stop();
+  }
+  _complete() {
+    for (const observer of this.observers) {
+      observer.complete?.();
+    }
+    this.observers.clear();
+  }
+  _error(data) {
+    for (const observer of this.observers) {
+      observer.error?.(data);
+    }
+    this.observers.clear();
+  }
+  _stopProcedure() {
+    if (this.status !== ActorStatus.Running) {
+      // Interpreter already stopped; do nothing
+      return this;
+    }
+
+    // Cancel all delayed events
+    for (const key of Object.keys(this.delayedEventsMap)) {
+      this.clock.clearTimeout(this.delayedEventsMap[key]);
+    }
+
+    // TODO: mailbox.reset
+    this.mailbox.clear();
+    // TODO: after `stop` we must prepare ourselves for receiving events again
+    // events sent *after* stop signal must be queued
+    // it seems like this should be the common behavior for all of our consumers
+    // so perhaps this should be unified somehow for all of them
+    this.mailbox = new Mailbox(this._process.bind(this));
+    this.status = ActorStatus.Stopped;
+    this.system._unregister(this);
+    return this;
+  }
+
+  /**
+   * Sends an event to the running interpreter to trigger a transition.
+   *
+   * @param event The event to send
+   */
+  send(event) {
+    if (typeof event === 'string') {
+      throw new Error(`Only event objects may be sent to actors; use .send({ type: "${event}" }) instead`);
+    }
+    if (this.status === ActorStatus.Stopped) {
+      // do nothing
+      {
+        const eventString = JSON.stringify(event);
+        console.warn(`Event "${event.type.toString()}" was sent to stopped actor "${this.id} (${this.sessionId})". This actor has already reached its final state, and will not transition.\nEvent: ${eventString}`);
       }
-      if (isSignal(event)) {
-        // TODO: unrecognized signal
-        return state;
+      return;
+    }
+    if (this.status !== ActorStatus.Running && !this.options.deferEvents) {
+      throw new Error(`Event "${event.type}" was sent to uninitialized actor "${this.id
+      // tslint:disable-next-line:max-line-length
+      }". Make sure .start() is called for this actor, or set { deferEvents: true } in the actor options.\nEvent: ${JSON.stringify(event)}`);
+    }
+    this.mailbox.enqueue(event);
+  }
+
+  // TODO: make private (and figure out a way to do this within the machine)
+  delaySend(sendAction) {
+    this.delayedEventsMap[sendAction.params.id] = this.clock.setTimeout(() => {
+      if ('to' in sendAction.params && sendAction.params.to) {
+        sendAction.params.to.send(sendAction.params.event);
+      } else {
+        this.send(sendAction.params.event);
       }
-      state.receivers.forEach(receiver => receiver(event));
-      return state;
-    },
-    getInitialState: (_, input) => {
-      return {
-        canceled: false,
-        receivers: new Set(),
-        dispose: undefined,
-        input
-      };
-    },
-    getSnapshot: () => undefined,
-    getPersistedState: ({
-      input
-    }) => input
-  };
-  return logic;
+    }, sendAction.params.delay);
+  }
+
+  // TODO: make private (and figure out a way to do this within the machine)
+  cancel(sendId) {
+    this.clock.clearTimeout(this.delayedEventsMap[sendId]);
+    delete this.delayedEventsMap[sendId];
+  }
+  attachDevTools() {
+    const {
+      devTools
+    } = this.options;
+    if (devTools) {
+      const resolvedDevToolsAdapter = typeof devTools === 'function' ? devTools : devToolsAdapter;
+      resolvedDevToolsAdapter(this);
+    }
+  }
+  toJSON() {
+    return {
+      id: this.id
+    };
+  }
+  getPersistedState() {
+    return this.logic.getPersistedState?.(this._state);
+  }
+  [symbolObservable]() {
+    return this;
+  }
+  getSnapshot() {
+    return this.logic.getSnapshot ? this.logic.getSnapshot(this._state) : this._state;
+  }
 }
 
-const startSignalType = 'xstate.init';
-const stopSignalType = 'xstate.stop';
-const startSignal = {
-  type: 'xstate.init'
-};
-const stopSignal = {
-  type: 'xstate.stop'
-};
 /**
- * An object that expresses the actor logic in reaction to received events,
- * as well as an optionally emitted stream of values.
+ * Creates a new Interpreter instance for the given machine with the provided options, if any.
  *
- * @template TReceived The received event
- * @template TSnapshot The emitted value
+ * @param machine The machine to interpret
+ * @param options Interpreter options
  */
 
-function isSignal(event) {
-  return event.type === startSignalType || event.type === stopSignalType;
-}
-function isActorRef(item) {
-  return !!item && typeof item === 'object' && typeof item.send === 'function';
-}
-
-// TODO: refactor the return type, this could be written in a better way
-// but it's best to avoid unneccessary breaking changes now
-// @deprecated use `interpret(actorLogic)` instead
-function toActorRef(actorRefLike) {
-  return {
-    subscribe: () => ({
-      unsubscribe: () => void 0
-    }),
-    id: 'anonymous',
-    sessionId: '',
-    getSnapshot: () => undefined,
-    [symbolObservable]: function () {
-      return this;
-    },
-    status: ActorStatus.Running,
-    stop: () => void 0,
-    ...actorRefLike
-  };
-}
-const emptyLogic = fromTransition(_ => undefined, undefined);
-function createEmptyActor() {
-  return interpret(emptyLogic);
+function interpret(logic, options) {
+  const interpreter = new Interpreter(logic, options);
+  return interpreter;
 }
 
 function invoke(invokeDef) {
@@ -1443,42 +1414,32 @@ function invoke(invokeDef) {
       src
     } = invokeDef;
     let resolvedInvokeAction;
-    if (isActorRef(src)) {
+    const referenced = resolveReferencedActor(state.machine.implementations.actors[src]);
+    if (!referenced) {
+      resolvedInvokeAction = {
+        type,
+        params: invokeDef
+      };
+    } else {
+      const input = 'input' in invokeDef ? invokeDef.input : referenced.input;
+      const ref = interpret(referenced.src, {
+        id,
+        src,
+        parent: actorContext?.self,
+        systemId: invokeDef.systemId,
+        input: typeof input === 'function' ? input({
+          context: state.context,
+          event,
+          self: actorContext?.self
+        }) : input
+      });
       resolvedInvokeAction = {
         type,
         params: {
           ...invokeDef,
-          ref: src
+          ref
         }
       };
-    } else {
-      const referenced = resolveReferencedActor(state.machine.implementations.actors[src]);
-      if (!referenced) {
-        resolvedInvokeAction = {
-          type,
-          params: invokeDef
-        };
-      } else {
-        const input = 'input' in invokeDef ? invokeDef.input : referenced.input;
-        const ref = interpret(referenced.src, {
-          id,
-          src,
-          parent: actorContext?.self,
-          systemId: invokeDef.systemId,
-          input: typeof input === 'function' ? input({
-            context: state.context,
-            event,
-            self: actorContext?.self
-          }) : input
-        });
-        resolvedInvokeAction = {
-          type,
-          params: {
-            ...invokeDef,
-            ref
-          }
-        };
-      }
     }
     const actorRef = resolvedInvokeAction.params.ref;
     const invokedState = cloneState(state, {
@@ -2483,7 +2444,7 @@ function resolveActionsAndContext(actions, event, currentState, actorCtx) {
       });
       const matchedActions = resolvedAction.params?.actions;
       intermediateState = nextState;
-      if ((resolvedAction.type === raise$1 || resolvedAction.type === send$1 && resolvedAction.params.internal) && typeof resolvedAction.params.delay !== 'number') {
+      if (resolvedAction.type === raise$1 && typeof resolvedAction.params.delay !== 'number') {
         raiseActions.push(resolvedAction);
       }
 
@@ -2801,11 +2762,14 @@ function stop(actorRef) {
       actor
     }
   }, (event, {
-    state
+    state,
+    actorContext
   }) => {
     const actorRefOrString = isFunction(actor) ? actor({
       context: state.context,
-      event
+      event,
+      self: actorContext?.self ?? {},
+      system: actorContext?.system
     }) : actor;
     const actorRef = typeof actorRefOrString === 'string' ? state.children[actorRefOrString] : actorRefOrString;
     let children = state.children;
@@ -2889,59 +2853,60 @@ function log(expr = defaultLogExpr, label) {
   });
 }
 
-function createSpawner(self, machine, context, event, mutCapturedActions) {
-  return (src, options = {}) => {
+function createSpawner(actorContext, {
+  machine,
+  context
+}, event, spawnedChildren) {
+  const spawn = (src, options = {}) => {
     const {
       systemId
     } = options;
-    if (isString(src)) {
+    if (typeof src === 'string') {
       const referenced = resolveReferencedActor(machine.implementations.actors[src]);
-      if (referenced) {
-        const input = 'input' in options ? options.input : referenced.input;
-
-        // TODO: this should also receive `src`
-        const actorRef = interpret(referenced.src, {
-          id: options.id,
-          parent: self,
-          input: typeof input === 'function' ? input({
-            context,
-            event,
-            self
-          }) : input
-        });
-        mutCapturedActions.push(invoke({
-          id: actorRef.id,
-          // @ts-ignore TODO: fix types
-          src: actorRef,
-          // TODO
-          ref: actorRef,
-          meta: undefined,
-          input,
-          systemId
-        }));
-        return actorRef; // TODO: fix types
-      }
-
-      throw new Error(`Actor logic '${src}' not implemented in machine '${machine.id}'`);
+      if (!referenced) {
+        throw new Error(`Actor logic '${src}' not implemented in machine '${machine.id}'`);
+      }
+      const input = 'input' in options ? options.input : referenced.input;
+
+      // TODO: this should also receive `src`
+      const actor = interpret(referenced.src, {
+        id: options.id,
+        parent: actorContext.self,
+        input: typeof input === 'function' ? input({
+          context,
+          event,
+          self: actorContext.self
+        }) : input,
+        systemId
+      });
+      spawnedChildren[actor.id] = actor;
+      return actor;
     } else {
       // TODO: this should also receive `src`
-      const actorRef = interpret(src, {
+      return interpret(src, {
         id: options.id,
-        parent: self,
+        parent: actorContext.self,
         input: options.input,
         systemId
       });
-      mutCapturedActions.push(invoke({
-        // @ts-ignore TODO: fix types
-        src: actorRef,
-        ref: actorRef,
-        id: actorRef.id,
-        meta: undefined,
-        input: options.input
-      }));
-      return actorRef; // TODO: fix types
     }
   };
+  return (src, options) => {
+    const actorRef = spawn(src, options);
+    spawnedChildren[actorRef.id] = actorRef;
+    actorContext.defer(() => {
+      if (actorRef.status === ActorStatus.Stopped) {
+        return;
+      }
+      try {
+        actorRef.start?.();
+      } catch (err) {
+        actorContext.self.send(error(actorRef.id, err));
+        return;
+      }
+    });
+    return actorRef;
+  };
 }
 
 /**
@@ -2960,15 +2925,15 @@ function assign(assignment) {
     action,
     actorContext
   }) => {
-    const capturedActions = [];
     if (!state.context) {
       throw new Error('Cannot assign to undefined `context`. Ensure that `context` is defined in the machine config.');
     }
+    const spawnedChildren = {};
     const args = {
       context: state.context,
       event,
       action,
-      spawn: createSpawner(actorContext?.self, state.machine, state.context, event, capturedActions),
+      spawn: createSpawner(actorContext, state, event, spawnedChildren),
       self: actorContext?.self ?? {},
       system: actorContext?.system
     };
@@ -2983,12 +2948,15 @@ function assign(assignment) {
     }
     const updatedContext = Object.assign({}, state.context, partialUpdate);
     return [cloneState(state, {
-      context: updatedContext
+      context: updatedContext,
+      children: Object.keys(spawnedChildren).length ? {
+        ...state.children,
+        ...spawnedChildren
+      } : state.children
     }), {
       type: assign$1,
       params: {
-        context: updatedContext,
-        actions: capturedActions
+        context: updatedContext
       }
     }];
   });
@@ -3099,9 +3067,6 @@ function pure(getActions) {
   });
 }
 
-const initEvent = {
-  type: init
-};
 function resolveActionObject(actionObject, actionFunctionMap) {
   if (isDynamicAction(actionObject)) {
     return actionObject;
@@ -3246,4 +3211,4 @@ function createInitEvent(input) {
   };
 }
 
-export { pathToStateValue as $, resolveActionsAndContext as A, microstep as B, isAtomicStateNode as C, error as D, isStateId as E, getStateNodeByPath as F, getPersistedState as G, resolveReferencedActor as H, interpret as I, createInitEvent as J, initEvent as K, matchesState as L, sendTo as M, NULL_EVENT as N, sendParent as O, forwardTo as P, Interpreter as Q, ActorStatus as R, STATE_DELIMITER as S, doneInvoke as T, assign as U, cancel as V, choose as W, log as X, pure as Y, raise as Z, stop as _, toArray as a, toObserver as a0, fromPromise as a1, fromObservable as a2, fromCallback as a3, fromEventObservable as a4, fromTransition as a5, stateIn as a6, not as a7, and as a8, or as a9, ActionTypes as aa, SpecialTargets as ab, startSignalType as ac, stopSignalType as ad, startSignal as ae, stopSignal as af, isSignal as ag, isActorRef as ah, toActorRef as ai, createEmptyActor as aj, toGuardDefinition as ak, actionTypes as al, resolveActionObject as am, toActionObject as an, after as ao, done as ap, send as aq, escalate as ar, toTransitionConfigArray as b, formatTransition as c, memo as d, evaluateGuard as e, formatTransitions as f, flatten as g, createInvokeId as h, isString as i, invoke$1 as j, getDelayedTransitions as k, formatInitialTransition as l, mapValues as m, getCandidates as n, toInvokeConfig as o, createSpawner as p, getConfiguration as q, getStateNodes as r, resolveStateValue as s, toActionObjects as t, isInFinalState as u, State as v, isErrorEvent as w, macrostep as x, transitionNode as y, getInitialConfiguration as z };
+export { fromPromise as $, assign as A, microstep as B, isAtomicStateNode as C, error as D, isStateId as E, getStateNodeByPath as F, getPersistedState as G, resolveReferencedActor as H, interpret as I, createInitEvent as J, matchesState as K, sendTo as L, sendParent as M, NULL_EVENT as N, forwardTo as O, Interpreter as P, ActorStatus as Q, doneInvoke as R, STATE_DELIMITER as S, cancel as T, choose as U, log as V, pure as W, raise as X, stop as Y, pathToStateValue as Z, toObserver as _, toArray as a, fromObservable as a0, fromCallback as a1, fromEventObservable as a2, fromTransition as a3, stateIn as a4, not as a5, and as a6, or as a7, ActionTypes as a8, SpecialTargets as a9, startSignalType as aa, stopSignalType as ab, startSignal as ac, stopSignal as ad, isSignal as ae, isActorRef as af, toActorRef as ag, createEmptyActor as ah, toGuardDefinition as ai, actionTypes as aj, resolveActionObject as ak, toActionObject as al, after as am, done as an, escalate as ao, toTransitionConfigArray as b, formatTransition as c, memo as d, evaluateGuard as e, formatTransitions as f, flatten as g, createInvokeId as h, isString as i, invoke$1 as j, getDelayedTransitions as k, formatInitialTransition as l, mapValues as m, getCandidates as n, toInvokeConfig as o, getConfiguration as p, getStateNodes as q, resolveStateValue as r, isInFinalState as s, toActionObjects as t, State as u, isErrorEvent as v, macrostep as w, transitionNode as x, getInitialConfiguration as y, resolveActionsAndContext as z };