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

package/dist/{actions-60622c0c.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,
@@ -100,9 +100,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;
@@ -121,12 +121,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.`);
   }
@@ -134,7 +134,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;
   }
@@ -144,7 +144,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) {
@@ -157,8 +157,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;
@@ -303,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
@@ -328,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
@@ -341,7 +339,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') {
@@ -376,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;
@@ -412,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.
  *
@@ -435,12 +428,9 @@ function forwardTo(target, options) {
       return resolvedTarget;
     };
   }
-  return send(({
+  return sendTo(target, ({
     event
-  }) => event, {
-    ...options,
-    to: target
-  });
+  }) => event, options);
 }
 
 /**
@@ -456,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();
@@ -528,8 +500,6 @@ function cancel(sendId) {
   });
 }
 
-const symbolObservable = (() => typeof Symbol === 'function' && Symbol.observable || '@@observable')();
-
 class Mailbox {
   constructor(_process) {
     this._process = _process;
@@ -597,533 +567,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 : 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,
@@ -1167,15 +861,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({
@@ -1190,7 +881,7 @@ function fromObservable(observableCreator) {
         }
       });
     },
-    getSnapshot: state => state.data,
+    getSnapshot: _ => undefined,
     getPersistedState: ({
       status,
       data,
@@ -1209,226 +900,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 : 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) {
@@ -1445,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.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, {
@@ -1595,7 +1554,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.'.`);
   }
@@ -1608,14 +1567,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 {
@@ -1627,12 +1600,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) {
@@ -1837,7 +1822,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?
@@ -1933,7 +1918,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;
     }),
@@ -1953,7 +1938,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) {
@@ -2036,7 +2021,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();
@@ -2054,7 +2039,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]];
   }
@@ -2247,40 +2232,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
@@ -2289,7 +2252,7 @@ function microstepProcedure(transitions, currentState, mutConfiguration, event,
   const internalQueue = [...currentState._internalQueue];
 
   // Exit states
-  if (!currentState._initial) {
+  if (!isInitial) {
     exitStates(filteredTransitions, mutConfiguration, historyValue, actions);
   }
 
@@ -2297,7 +2260,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) {
@@ -2305,10 +2268,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,
@@ -2316,20 +2279,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)) {
@@ -2454,7 +2417,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);
   }
 }
@@ -2462,11 +2425,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 {
@@ -2474,7 +2435,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,
@@ -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);
       }
 
@@ -2499,9 +2460,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) {
@@ -2512,7 +2473,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,
@@ -2525,7 +2486,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) {
@@ -2536,12 +2497,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);
     }
   }
@@ -2595,20 +2556,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;
@@ -2631,15 +2578,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.
    */
@@ -2662,7 +2600,6 @@ class State {
           meta: {},
           configuration: [],
           // TODO: fix,
-          transitions: [],
           children: {}
         }, machine);
       }
@@ -2692,8 +2629,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;
@@ -2714,12 +2649,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 {
@@ -2827,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;
@@ -2915,61 +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)) {
-      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;
+  };
 }
 
 /**
@@ -2988,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
     };
@@ -3011,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
       }
     }];
   });
@@ -3052,7 +2992,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') {
@@ -3094,7 +3034,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, {
@@ -3127,9 +3067,6 @@ function pure(getActions) {
   });
 }
 
-const initEvent = {
-  type: init
-};
 function resolveActionObject(actionObject, actionFunctionMap) {
   if (isDynamicAction(actionObject)) {
     return actionObject;
@@ -3274,4 +3211,4 @@ function createInitEvent(input) {
   };
 }
 
-export { toObserver as $, resolveActionsAndContext as A, microstep as B, error as C, isStateId as D, getStateNodeByPath as E, getPersistedState as F, resolveReferencedActor as G, interpret as H, createInitEvent as I, initEvent 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, assign as T, cancel as U, choose as V, log as W, pure as X, raise as Y, stop as Z, pathToStateValue as _, toArray as a, fromPromise as a0, fromObservable as a1, fromCallback as a2, fromEventObservable as a3, fromTransition as a4, stateIn as a5, not as a6, and as a7, or as a8, ActionTypes as a9, SpecialTargets as aa, startSignalType as ab, stopSignalType as ac, startSignal as ad, stopSignal as ae, isSignal as af, isActorRef as ag, toActorRef as ah, createEmptyActor as ai, toGuardDefinition as aj, actionTypes as ak, resolveActionObject as al, toActionObject as am, after as an, done as ao, send as ap, escalate as aq, 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 };