xstate 5.0.0-beta.14 → 5.0.0-beta.16

package/dist/{actions-73b8d456.development.cjs.js → actions-0f903c0d.development.cjs.js}

@@ -37,7 +37,7 @@ var dev_dist_xstateDev = require('../dev/dist/xstate-dev.development.cjs.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";
@@ -63,7 +63,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;
@@ -81,7 +81,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,
@@ -102,9 +102,9 @@ const NULL_EVENT = '';
 const STATE_IDENTIFIER = '#';
 const WILDCARD = '*';
 
-function matchesState(parentStateId, childStateId, delimiter = STATE_DELIMITER) {
-  const parentStateValue = toStateValue(parentStateId, delimiter);
-  const childStateValue = toStateValue(childStateId, delimiter);
+function matchesState(parentStateId, childStateId) {
+  const parentStateValue = toStateValue(parentStateId);
+  const childStateValue = toStateValue(childStateId);
   if (isString(childStateValue)) {
     if (isString(parentStateValue)) {
       return childStateValue === parentStateValue;
@@ -123,12 +123,12 @@ function matchesState(parentStateId, childStateId, delimiter = STATE_DELIMITER)
     return matchesState(parentStateValue[key], childStateValue[key]);
   });
 }
-function toStatePath(stateId, delimiter) {
+function toStatePath(stateId) {
   try {
     if (isArray(stateId)) {
       return stateId;
     }
-    return stateId.toString().split(delimiter);
+    return stateId.toString().split(STATE_DELIMITER);
   } catch (e) {
     throw new Error(`'${stateId}' is not a valid state path.`);
   }
@@ -136,7 +136,7 @@ function toStatePath(stateId, delimiter) {
 function isStateLike(state) {
   return typeof state === 'object' && 'value' in state && 'context' in state && 'event' in state;
 }
-function toStateValue(stateValue, delimiter) {
+function toStateValue(stateValue) {
   if (isStateLike(stateValue)) {
     return stateValue.value;
   }
@@ -146,7 +146,7 @@ function toStateValue(stateValue, delimiter) {
   if (typeof stateValue !== 'string') {
     return stateValue;
   }
-  const statePath = toStatePath(stateValue, delimiter);
+  const statePath = toStatePath(stateValue);
   return pathToStateValue(statePath);
 }
 function pathToStateValue(statePath) {
@@ -159,8 +159,9 @@ function pathToStateValue(statePath) {
     if (i === statePath.length - 2) {
       marker[statePath[i]] = statePath[i + 1];
     } else {
-      marker[statePath[i]] = {};
-      marker = marker[statePath[i]];
+      const previous = marker;
+      marker = {};
+      previous[statePath[i]] = marker;
     }
   }
   return value;
@@ -305,22 +306,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
@@ -330,7 +328,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
@@ -343,7 +341,7 @@ function send(eventOrExpr, options) {
       self: actorContext?.self ?? null,
       system: actorContext?.system
     };
-    const delaysMap = state.machine.options.delays;
+    const delaysMap = state.machine.implementations.delays;
 
     // TODO: helper function for resolving Expr
     if (typeof eventOrExpr === 'string') {
@@ -378,13 +376,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;
@@ -414,12 +411,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.
  *
@@ -437,12 +430,9 @@ function forwardTo(target, options) {
       return resolvedTarget;
     };
   }
-  return send(({
+  return sendTo(target, ({
     event
-  }) => event, {
-    ...options,
-    to: target
-  });
+  }) => event, options);
 }
 
 /**
@@ -458,25 +448,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();
@@ -530,8 +502,6 @@ function cancel(sendId) {
   });
 }
 
-const symbolObservable = (() => typeof Symbol === 'function' && Symbol.observable || '@@observable')();
-
 class Mailbox {
   constructor(_process) {
     this._process = _process;
@@ -599,533 +569,257 @@ 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 = {
-      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;
-      }
-    }
-  }
-  _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 : dev_dist_xstateDev.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({
-        input
-      }) : initialState;
-    },
-    getSnapshot: state => state,
-    getPersistedState: state => state,
-    restoreState: state => state
-  };
-  return logic;
-}
-
-function fromPromise(
-// TODO: add types
-promiseCreator) {
-  const resolveEventType = '$$xstate.resolve';
-  const rejectEventType = '$$xstate.reject';
-
-  // TODO: add event types
-  const logic = {
-    config: promiseCreator,
-    transition: (state, event) => {
+      defer
+    }) => {
       if (state.status !== 'active') {
         return state;
       }
       switch (event.type) {
-        case resolveEventType:
+        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,
-            status: 'done',
-            data: event.data,
-            input: undefined
+            data: event.data
           };
-        case rejectEventType:
+        case errorEventType:
           return {
             ...state,
             status: 'error',
+            input: undefined,
             data: event.data,
-            input: undefined
+            subscription: undefined
+          };
+        case completeEventType:
+          return {
+            ...state,
+            status: 'done',
+            input: undefined,
+            subscription: undefined
           };
         case stopSignalType:
+          state.subscription.unsubscribe();
           return {
             ...state,
             status: 'canceled',
-            input: undefined
+            input: undefined,
+            subscription: undefined
           };
         default:
           return state;
       }
     },
+    getInitialState: (_, input) => {
+      return {
+        subscription: undefined,
+        status: 'active',
+        data: undefined,
+        input
+      };
+    },
     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 = observableCreator({
         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;
+      }).subscribe({
+        next: value => {
+          self.send({
+            type: nextEventType,
+            data: value
+          });
+        },
+        error: err => {
+          self.send({
+            type: errorEventType,
+            data: err
+          });
+        },
+        complete: () => {
+          self.send({
+            type: completeEventType
+          });
         }
-        self.send({
-          type: rejectEventType,
-          data: errorData
-        });
       });
     },
-    getInitialState: (_, input) => {
-      return {
-        status: 'active',
-        data: undefined,
-        input
-      };
-    },
     getSnapshot: state => state.data,
+    getPersistedState: ({
+      status,
+      data,
+      input
+    }) => ({
+      status,
+      data,
+      input
+    }),
     getStatus: state => state,
-    getPersistedState: state => state,
-    restoreState: state => state
+    restoreState: state => ({
+      ...state,
+      subscription: undefined
+    })
   };
   return logic;
 }
 
-// TODO: this likely shouldn't accept TEvent, observable actor doesn't accept external events
-function fromObservable(observableCreator) {
-  const nextEventType = '$$xstate.next';
+/**
+ * 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: add event types
+  // TODO: event types
   const logic = {
-    config: observableCreator,
-    transition: (state, event, {
-      self,
-      id,
-      defer
-    }) => {
+    config: lazyObservable,
+    transition: (state, event) => {
       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,
@@ -1169,15 +863,12 @@ function fromObservable(observableCreator) {
         // Do not restart a completed observable
         return;
       }
-      state.subscription = observableCreator({
+      state.subscription = lazyObservable({
         input: state.input,
         system
       }).subscribe({
         next: value => {
-          self.send({
-            type: nextEventType,
-            data: value
-          });
+          self._parent?.send(value);
         },
         error: err => {
           self.send({
@@ -1192,7 +883,7 @@ function fromObservable(observableCreator) {
         }
       });
     },
-    getSnapshot: state => state.data,
+    getSnapshot: _ => undefined,
     getPersistedState: ({
       status,
       data,
@@ -1211,226 +902,504 @@ function fromObservable(observableCreator) {
   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 fromCallback(invokeCallback) {
+  const logic = {
+    config: invokeCallback,
+    start: (_state, {
+      self
+    }) => {
+      self.send({
+        type: startSignalType
+      });
+    },
+    transition: (state, event, {
+      self,
+      id,
+      system
+    }) => {
+      if (event.type === startSignalType) {
+        const sender = eventForParent => {
+          if (state.canceled) {
+            return;
+          }
+          self._parent?.send(eventForParent);
+        };
+        const receiver = newListener => {
+          state.receivers.add(newListener);
+        };
+        state.dispose = invokeCallback(sender, receiver, {
+          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 (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);
+  }
 
-function fromEventObservable(lazyObservable) {
-  const errorEventType = '$$xstate.error';
-  const completeEventType = '$$xstate.complete';
+  // array of functions to defer
 
-  // 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
-          });
-        }
-      });
-    },
-    getSnapshot: _ => undefined,
-    getPersistedState: ({
-      status,
-      data,
-      input
-    }) => ({
-      status,
-      data,
-      input
-    }),
-    getStatus: state => state,
-    restoreState: state => ({
-      ...state,
-      subscription: undefined
-    })
-  };
-  return logic;
-}
+  update(state) {
+    // Update state
+    this._state = state;
+    const snapshot = this.getSnapshot();
 
-function fromCallback(invokeCallback) {
-  const logic = {
-    config: invokeCallback,
-    start: (_state, {
-      self
-    }) => {
-      self.send({
-        type: startSignalType
-      });
-    },
-    transition: (state, event, {
-      self,
-      id,
-      system
-    }) => {
-      if (event.type === startSignalType) {
-        const sender = eventForParent => {
-          if (state.canceled) {
-            return;
-          }
-          self._parent?.send(eventForParent);
-        };
-        const receiver = newListener => {
-          state.receivers.add(newListener);
-        };
-        state.dispose = invokeCallback(sender, receiver, {
-          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;
+    // 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) {
-        state.canceled = true;
-        if (isFunction(state.dispose)) {
-          state.dispose();
-        }
-        return state;
+        this._stopProcedure();
+        this._complete();
       }
-      if (isSignal(event.type)) {
-        // TODO: unrecognized signal
-        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;
+      }
+    }
+  }
+  _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.type)) {
-        state.receivers.forEach(receiver => receiver(event));
+      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);
       }
-      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 : dev_dist_xstateDev.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(eventType) {
-  return eventType === startSignalType || eventType === 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) {
@@ -1447,42 +1416,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.options.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, {
@@ -1597,7 +1556,7 @@ function evaluateGuard(guard, context, event, state) {
   const {
     machine
   } = state;
-  const predicate = machine?.options?.guards?.[guard.type] ?? guard.predicate;
+  const predicate = machine?.implementations?.guards?.[guard.type] ?? guard.predicate;
   if (!predicate) {
     throw new Error(`Guard '${guard.type}' is not implemented.'.`);
   }
@@ -1610,14 +1569,28 @@ function evaluateGuard(guard, context, event, state) {
   });
 }
 function toGuardDefinition(guardConfig, getPredicate) {
+  // TODO: check for cycles and consider a refactor to more lazily evaluated guards
+  // TODO: resolve this more recursively: https://github.com/statelyai/xstate/pull/4064#discussion_r1229915724
   if (isString(guardConfig)) {
-    return {
-      type: guardConfig,
-      predicate: getPredicate?.(guardConfig) || undefined,
-      params: {
-        type: guardConfig
-      }
-    };
+    const predicateOrDef = getPredicate?.(guardConfig);
+    if (isFunction(predicateOrDef)) {
+      return {
+        type: guardConfig,
+        predicate: predicateOrDef,
+        params: {
+          type: guardConfig
+        }
+      };
+    } else if (predicateOrDef) {
+      return predicateOrDef;
+    } else {
+      return {
+        type: guardConfig,
+        params: {
+          type: guardConfig
+        }
+      };
+    }
   }
   if (isFunction(guardConfig)) {
     return {
@@ -1629,12 +1602,24 @@ function toGuardDefinition(guardConfig, getPredicate) {
       }
     };
   }
-  return {
-    type: guardConfig.type,
-    params: guardConfig.params || guardConfig,
-    children: guardConfig.children?.map(childGuard => toGuardDefinition(childGuard, getPredicate)),
-    predicate: getPredicate?.(guardConfig.type) || guardConfig.predicate
-  };
+  const predicateOrDef = getPredicate?.(guardConfig.type);
+  if (isFunction(predicateOrDef)) {
+    return {
+      type: guardConfig.type,
+      params: guardConfig.params || guardConfig,
+      children: guardConfig.children?.map(childGuard => toGuardDefinition(childGuard, getPredicate)),
+      predicate: getPredicate?.(guardConfig.type) || guardConfig.predicate
+    };
+  } else if (predicateOrDef) {
+    return predicateOrDef;
+  } else {
+    return {
+      type: guardConfig.type,
+      params: guardConfig.params || guardConfig,
+      children: guardConfig.children?.map(childGuard => toGuardDefinition(childGuard, getPredicate)),
+      predicate: guardConfig.predicate
+    };
+  }
 }
 
 function getOutput(configuration, context, event) {
@@ -1839,7 +1824,7 @@ function formatTransition(stateNode, transitionConfig) {
   const reenter = transitionConfig.reenter ?? false;
   const {
     guards
-  } = stateNode.machine.options;
+  } = stateNode.machine.implementations;
   const target = resolveTarget(stateNode, normalizedTarget);
 
   // TODO: should this be part of a lint rule instead?
@@ -1935,7 +1920,7 @@ function formatInitialTransition(stateNode, _target) {
   return formatTransition(stateNode, {
     target: toArray(_target.target).map(t => {
       if (isString(t)) {
-        return isStateId(t) ? t : `${stateNode.machine.delimiter}${t}`;
+        return isStateId(t) ? t : `${STATE_DELIMITER}${t}`;
       }
       return t;
     }),
@@ -1955,7 +1940,7 @@ function resolveTarget(stateNode, targets) {
     if (isStateId(target)) {
       return stateNode.machine.getStateNodeById(target);
     }
-    const isInternalTarget = target[0] === stateNode.machine.delimiter;
+    const isInternalTarget = target[0] === STATE_DELIMITER;
     // If internal target is defined on machine,
     // do not include machine key on target
     if (isInternalTarget && !stateNode.parent) {
@@ -2038,7 +2023,7 @@ function getStateNodeByPath(stateNode, statePath) {
       // throw e;
     }
   }
-  const arrayStatePath = toStatePath(statePath, stateNode.machine.delimiter).slice();
+  const arrayStatePath = toStatePath(statePath).slice();
   let currentStateNode = stateNode;
   while (arrayStatePath.length) {
     const key = arrayStatePath.shift();
@@ -2056,7 +2041,7 @@ function getStateNodeByPath(stateNode, statePath) {
  * @param state The state value or State instance
  */
 function getStateNodes(stateNode, state) {
-  const stateValue = state instanceof State ? state.value : toStateValue(state, stateNode.machine.delimiter);
+  const stateValue = state instanceof State ? state.value : toStateValue(state);
   if (isString(stateValue)) {
     return [stateNode, stateNode.states[stateValue]];
   }
@@ -2249,40 +2234,18 @@ function computeExitSet(transitions, configuration, historyValue) {
  * @param mutConfiguration
  */
 
-function microstep(transitions, currentState, actorCtx, event) {
-  const {
-    machine
-  } = currentState;
-  // Transition will "apply" if:
-  // - the state node is the initial state (there is no current state)
-  // - OR there are transitions
-  const willTransition = currentState._initial || transitions.length > 0;
+function microstep(transitions, currentState, actorCtx, event, isInitial) {
   const mutConfiguration = new Set(currentState.configuration);
-  if (!currentState._initial && !willTransition) {
-    const inertState = cloneState(currentState, {});
-    inertState.changed = false;
-    return inertState;
-  }
-  const [microstate, actions] = microstepProcedure(currentState._initial ? [{
-    target: [...currentState.configuration].filter(isAtomicStateNode),
-    source: machine.root,
-    reenter: true,
-    actions: [],
-    eventType: null,
-    toJSON: null // TODO: fix
-  }] : transitions, currentState, mutConfiguration, event, actorCtx);
-  const {
-    context
-  } = microstate;
-  const nextState = cloneState(microstate, {
-    value: {},
-    // TODO: make optional
-    transitions
+  if (!transitions.length) {
+    return currentState;
+  }
+  const microstate = microstepProcedure(transitions, currentState, mutConfiguration, event, actorCtx, isInitial);
+  return cloneState(microstate, {
+    value: {} // TODO: make optional
   });
-  nextState.changed = currentState._initial ? undefined : !stateValuesEqual(nextState.value, currentState.value) || actions.length > 0 || context !== currentState.context;
-  return nextState;
 }
-function microstepProcedure(transitions, currentState, mutConfiguration, event, actorCtx) {
+
+function microstepProcedure(transitions, currentState, mutConfiguration, event, actorCtx, isInitial) {
   const actions = [];
   const historyValue = {
     ...currentState.historyValue
@@ -2291,7 +2254,7 @@ function microstepProcedure(transitions, currentState, mutConfiguration, event,
   const internalQueue = [...currentState._internalQueue];
 
   // Exit states
-  if (!currentState._initial) {
+  if (!isInitial) {
     exitStates(filteredTransitions, mutConfiguration, historyValue, actions);
   }
 
@@ -2299,7 +2262,7 @@ function microstepProcedure(transitions, currentState, mutConfiguration, event,
   actions.push(...filteredTransitions.flatMap(t => t.actions));
 
   // Enter states
-  enterStates(event, filteredTransitions, mutConfiguration, actions, internalQueue, currentState, historyValue);
+  enterStates(event, filteredTransitions, mutConfiguration, actions, internalQueue, currentState, historyValue, isInitial);
   const nextConfiguration = [...mutConfiguration];
   const done = isInFinalState(nextConfiguration);
   if (done) {
@@ -2307,10 +2270,10 @@ function microstepProcedure(transitions, currentState, mutConfiguration, event,
     actions.push(...finalActions);
   }
   try {
-    const [nextState, resolvedActions] = resolveActionsAndContext(actions, event, currentState, actorCtx);
+    const nextState = resolveActionsAndContext(actions, event, currentState, actorCtx);
     const output = done ? getOutput(nextConfiguration, nextState.context, event) : undefined;
     internalQueue.push(...nextState._internalQueue);
-    return [cloneState(currentState, {
+    return cloneState(currentState, {
       configuration: nextConfiguration,
       historyValue,
       _internalQueue: internalQueue,
@@ -2318,20 +2281,20 @@ function microstepProcedure(transitions, currentState, mutConfiguration, event,
       done,
       output,
       children: nextState.children
-    }), resolvedActions];
+    });
   } catch (e) {
     // TODO: Refactor this once proper error handling is implemented.
     // See https://github.com/statelyai/rfcs/pull/4
     throw e;
   }
 }
-function enterStates(event, filteredTransitions, mutConfiguration, actions, internalQueue, currentState, historyValue) {
+function enterStates(event, filteredTransitions, mutConfiguration, actions, internalQueue, currentState, historyValue, isInitial) {
   const statesToEnter = new Set();
   const statesForDefaultEntry = new Set();
   computeEntrySet(filteredTransitions, historyValue, statesForDefaultEntry, statesToEnter);
 
   // In the initial state, the root state node is "entered".
-  if (currentState._initial) {
+  if (isInitial) {
     statesForDefaultEntry.add(currentState.machine.root);
   }
   for (const stateNodeToEnter of [...statesToEnter].sort((a, b) => a.order - b.order)) {
@@ -2456,7 +2419,7 @@ function exitStates(transitions, mutConfiguration, historyValue, actions) {
     }
   }
   for (const s of statesToExit) {
-    actions.push(...s.exit.flat(), ...s.invoke.map(def => stop(def.id)));
+    actions.push(...s.exit, ...s.invoke.map(def => stop(def.id)));
     mutConfiguration.delete(s);
   }
 }
@@ -2464,11 +2427,9 @@ function resolveActionsAndContext(actions, event, currentState, actorCtx) {
   const {
     machine
   } = currentState;
-  const resolvedActions = [];
   const raiseActions = [];
   let intermediateState = currentState;
   function handleAction(action) {
-    resolvedActions.push(action);
     if (actorCtx?.self.status === ActorStatus.Running) {
       action.execute?.(actorCtx);
     } else {
@@ -2476,7 +2437,7 @@ function resolveActionsAndContext(actions, event, currentState, actorCtx) {
     }
   }
   function resolveAction(actionObject) {
-    const executableActionObject = resolveActionObject(actionObject, machine.options.actions);
+    const executableActionObject = resolveActionObject(actionObject, machine.implementations.actions);
     if (isDynamicAction(executableActionObject)) {
       const [nextState, resolvedAction] = executableActionObject.resolve(event, {
         state: intermediateState,
@@ -2485,7 +2446,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);
       }
 
@@ -2501,9 +2462,9 @@ function resolveActionsAndContext(actions, event, currentState, actorCtx) {
   for (const actionObject of actions) {
     resolveAction(actionObject);
   }
-  return [cloneState(intermediateState, {
+  return cloneState(intermediateState, {
     _internalQueue: raiseActions.map(a => a.params.event)
-  }), resolvedActions];
+  });
 }
 function macrostep(state, event, actorCtx) {
   if (event.type === WILDCARD) {
@@ -2514,7 +2475,7 @@ function macrostep(state, event, actorCtx) {
 
   // Handle stop event
   if (event.type === stopSignalType) {
-    nextState = stopStep(event, nextState, actorCtx)[0];
+    nextState = stopStep(event, nextState, actorCtx);
     states.push(nextState);
     return {
       state: nextState,
@@ -2527,7 +2488,7 @@ function macrostep(state, event, actorCtx) {
   // Determine the next state based on the next microstep
   if (nextEvent.type !== init) {
     const transitions = selectTransitions(nextEvent, nextState);
-    nextState = microstep(transitions, state, actorCtx, nextEvent);
+    nextState = microstep(transitions, state, actorCtx, nextEvent, false);
     states.push(nextState);
   }
   while (!nextState.done) {
@@ -2538,12 +2499,12 @@ function macrostep(state, event, actorCtx) {
       } else {
         nextEvent = nextState._internalQueue[0];
         const transitions = selectTransitions(nextEvent, nextState);
-        nextState = microstep(transitions, nextState, actorCtx, nextEvent);
+        nextState = microstep(transitions, nextState, actorCtx, nextEvent, false);
         nextState._internalQueue.shift();
         states.push(nextState);
       }
     } else {
-      nextState = microstep(enabledTransitions, nextState, actorCtx, nextEvent);
+      nextState = microstep(enabledTransitions, nextState, actorCtx, nextEvent, false);
       states.push(nextState);
     }
   }
@@ -2597,20 +2558,6 @@ function resolveStateValue(rootNode, stateValue) {
   const configuration = getConfiguration(getStateNodes(rootNode, stateValue));
   return getStateValue(rootNode, [...configuration]);
 }
-function stateValuesEqual(a, b) {
-  if (a === b) {
-    return true;
-  }
-  if (a === undefined || b === undefined) {
-    return false;
-  }
-  if (isString(a) || isString(b)) {
-    return a === b;
-  }
-  const aKeys = Object.keys(a);
-  const bKeys = Object.keys(b);
-  return aKeys.length === bKeys.length && aKeys.every(key => stateValuesEqual(a[key], b[key]));
-}
 function getInitialConfiguration(rootNode) {
   const configuration = [];
   const initialTransition = rootNode.initial;
@@ -2633,15 +2580,6 @@ class State {
    */
   // TODO: add an explicit type for `output`
 
-  /**
-   * Indicates whether the state has changed from the previous state. A state is considered "changed" if:
-   *
-   * - Its value is not equal to its previous value, or:
-   * - It has any new actions (side-effects) to execute.
-   *
-   * An initial state (with no history) will return `undefined`.
-   */
-
   /**
    * The enabled state nodes representative of the state value.
    */
@@ -2664,7 +2602,6 @@ class State {
           meta: {},
           configuration: [],
           // TODO: fix,
-          transitions: [],
           children: {}
         }, machine);
       }
@@ -2694,8 +2631,6 @@ class State {
     this.context = void 0;
     this.historyValue = {};
     this._internalQueue = void 0;
-    this._initial = false;
-    this.changed = void 0;
     this.configuration = void 0;
     this.children = void 0;
     this.context = config.context;
@@ -2716,12 +2651,12 @@ class State {
    * @param stateValue
    * @param delimiter The character(s) that separate each subpath in the string state node path.
    */
-  toStrings(stateValue = this.value, delimiter = '.') {
+  toStrings(stateValue = this.value) {
     if (isString(stateValue)) {
       return [stateValue];
     }
     const valueKeys = Object.keys(stateValue);
-    return valueKeys.concat(...valueKeys.map(key => this.toStrings(stateValue[key], delimiter).map(s => key + delimiter + s)));
+    return valueKeys.concat(...valueKeys.map(key => this.toStrings(stateValue[key]).map(s => key + STATE_DELIMITER + s)));
   }
   toJSON() {
     const {
@@ -2829,11 +2764,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;
@@ -2917,61 +2855,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)) {
-      const referenced = resolveReferencedActor(machine.options.actors[src]);
-      if (referenced) {
-        const resolvedName = options.id ?? 'anon'; // TODO: better name
-        const input = 'input' in options ? options.input : referenced.input;
-
-        // TODO: this should also receive `src`
-        const actorRef = interpret(referenced.src, {
-          id: resolvedName,
-          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 (typeof src === 'string') {
+      const referenced = resolveReferencedActor(machine.implementations.actors[src]);
+      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`
-      // TODO: instead of anonymous, it should be a unique stable ID
-      const actorRef = interpret(src, {
-        id: options.id || 'anonymous',
-        parent: self,
+      return interpret(src, {
+        id: options.id,
+        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;
+  };
 }
 
 /**
@@ -2990,15 +2927,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
     };
@@ -3013,12 +2950,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
       }
     }];
   });
@@ -3054,7 +2994,7 @@ function raise(eventOrExpr, options) {
       self: actorContext?.self ?? {},
       system: actorContext?.system
     };
-    const delaysMap = state.machine.options.delays;
+    const delaysMap = state.machine.implementations.delays;
 
     // TODO: helper function for resolving Expr
     if (typeof eventOrExpr === 'string') {
@@ -3096,7 +3036,7 @@ function choose(guards) {
     state
   }) => {
     const matchedActions = guards.find(condition => {
-      const guard = condition.guard && toGuardDefinition(condition.guard, guardType => state.machine.options.guards[guardType]);
+      const guard = condition.guard && toGuardDefinition(condition.guard, guardType => state.machine.implementations.guards[guardType]);
       return !guard || evaluateGuard(guard, state.context, event, state);
     })?.actions;
     return [state, {
@@ -3129,9 +3069,6 @@ function pure(getActions) {
   });
 }
 
-const initEvent = {
-  type: init
-};
 function resolveActionObject(actionObject, actionFunctionMap) {
   if (isDynamicAction(actionObject)) {
     return actionObject;
@@ -3292,7 +3229,6 @@ exports.choose = choose;
 exports.createEmptyActor = createEmptyActor;
 exports.createInitEvent = createInitEvent;
 exports.createInvokeId = createInvokeId;
-exports.createSpawner = createSpawner;
 exports.done = done;
 exports.doneInvoke = doneInvoke;
 exports.error = error;
@@ -3315,10 +3251,10 @@ exports.getInitialConfiguration = getInitialConfiguration;
 exports.getPersistedState = getPersistedState;
 exports.getStateNodeByPath = getStateNodeByPath;
 exports.getStateNodes = getStateNodes;
-exports.initEvent = initEvent;
 exports.interpret = interpret;
 exports.invoke = invoke$1;
 exports.isActorRef = isActorRef;
+exports.isAtomicStateNode = isAtomicStateNode;
 exports.isErrorEvent = isErrorEvent;
 exports.isInFinalState = isInFinalState;
 exports.isSignal = isSignal;
@@ -3339,7 +3275,6 @@ exports.resolveActionObject = resolveActionObject;
 exports.resolveActionsAndContext = resolveActionsAndContext;
 exports.resolveReferencedActor = resolveReferencedActor;
 exports.resolveStateValue = resolveStateValue;
-exports.send = send;
 exports.sendParent = sendParent;
 exports.sendTo = sendTo;
 exports.startSignal = startSignal;