xstate 5.0.0-beta.19 → 5.0.0-beta.21

package/dist/{actions-3b74fb92.esm.js → actions-5039c951.esm.js}

@@ -1,9 +1,18 @@
 import { devToolsAdapter } from '../dev/dist/xstate-dev.esm.js';
 
-// https://github.com/microsoft/TypeScript/issues/23182#issuecomment-379091887
+/**
+ * `T | unknown` reduces to `unknown` and that can be problematic when it comes to contextual typing.
+ * It especially is a problem when the union has a function member, like here:
+ *
+ * ```ts
+ * declare function test(cbOrVal: ((arg: number) => unknown) | unknown): void;
+ * test((arg) => {}) // oops, implicit any
+ * ```
+ *
+ * This type can be used to avoid this problem. This union represents the same value space as `unknown`.
+ */
 
-// TODO: replace in v5 with:
-// export type IndexByType<T extends { type: string }> = { [E in T as E['type']]: E; };
+// https://github.com/microsoft/TypeScript/issues/23182#issuecomment-379091887
 
 /**
  * The full definition of an event, with a string `type`.
@@ -13,8 +22,6 @@ import { devToolsAdapter } from '../dev/dist/xstate-dev.esm.js';
 // we should also accept a raw machine as actor logic here
 // or just make machine actor logic
 
-// TODO: narrow this to logic from machine
-
 /**
  * The string or object representing the state value relative to the parent state node.
  *
@@ -305,7 +312,7 @@ const symbolObservable = (() => typeof Symbol === 'function' && Symbol.observabl
  * @returns Actor logic
  */
 function fromTransition(transition, initialState) {
-  const logic = {
+  return {
     config: transition,
     transition: (state, event, actorContext) => {
       return transition(state, event, actorContext);
@@ -319,103 +326,255 @@ function fromTransition(transition, initialState) {
     getPersistedState: state => state,
     restoreState: state => state
   };
-  return logic;
 }
 
-const resolveEventType = '$$xstate.resolve';
-const rejectEventType = '$$xstate.reject';
-function fromPromise(
-// TODO: add types
-promiseCreator) {
-  // TODO: add event types, consider making the `PromiseEvent` a private type or smth alike
-  const logic = {
-    config: promiseCreator,
-    transition: (state, event) => {
-      if (state.status !== 'active') {
-        return state;
-      }
-      switch (event.type) {
-        case resolveEventType:
-          return {
-            ...state,
-            status: 'done',
-            data: event.data,
-            input: undefined
-          };
-        case rejectEventType:
-          return {
-            ...state,
-            status: 'error',
-            data: event.data,
-            input: undefined
-          };
-        case stopSignalType:
-          return {
-            ...state,
-            status: 'canceled',
-            input: undefined
-          };
-        default:
-          return state;
-      }
+function matchesState(parentStateId, childStateId) {
+  const parentStateValue = toStateValue(parentStateId);
+  const childStateValue = toStateValue(childStateId);
+  if (typeof childStateValue === 'string') {
+    if (typeof parentStateValue === 'string') {
+      return childStateValue === parentStateValue;
+    }
+
+    // Parent more specific than child
+    return false;
+  }
+  if (typeof parentStateValue === 'string') {
+    return parentStateValue in childStateValue;
+  }
+  return Object.keys(parentStateValue).every(key => {
+    if (!(key in childStateValue)) {
+      return false;
+    }
+    return matchesState(parentStateValue[key], childStateValue[key]);
+  });
+}
+function toStatePath(stateId) {
+  try {
+    if (isArray(stateId)) {
+      return stateId;
+    }
+    return stateId.toString().split(STATE_DELIMITER);
+  } catch (e) {
+    throw new Error(`'${stateId}' is not a valid state path.`);
+  }
+}
+function isStateLike(state) {
+  return typeof state === 'object' && 'value' in state && 'context' in state && 'event' in state;
+}
+function toStateValue(stateValue) {
+  if (isStateLike(stateValue)) {
+    return stateValue.value;
+  }
+  if (isArray(stateValue)) {
+    return pathToStateValue(stateValue);
+  }
+  if (typeof stateValue !== 'string') {
+    return stateValue;
+  }
+  const statePath = toStatePath(stateValue);
+  return pathToStateValue(statePath);
+}
+function pathToStateValue(statePath) {
+  if (statePath.length === 1) {
+    return statePath[0];
+  }
+  const value = {};
+  let marker = value;
+  for (let i = 0; i < statePath.length - 1; i++) {
+    if (i === statePath.length - 2) {
+      marker[statePath[i]] = statePath[i + 1];
+    } else {
+      const previous = marker;
+      marker = {};
+      previous[statePath[i]] = marker;
+    }
+  }
+  return value;
+}
+function mapValues(collection, iteratee) {
+  const result = {};
+  const collectionKeys = Object.keys(collection);
+  for (let i = 0; i < collectionKeys.length; i++) {
+    const key = collectionKeys[i];
+    result[key] = iteratee(collection[key], key, collection, i);
+  }
+  return result;
+}
+function flatten(array) {
+  return [].concat(...array);
+}
+function toArrayStrict(value) {
+  if (isArray(value)) {
+    return value;
+  }
+  return [value];
+}
+function toArray(value) {
+  if (value === undefined) {
+    return [];
+  }
+  return toArrayStrict(value);
+}
+function mapContext(mapper, context, event, self) {
+  if (typeof mapper === 'function') {
+    return mapper({
+      context,
+      event,
+      self
+    });
+  }
+  return mapper;
+}
+function isPromiseLike(value) {
+  if (value instanceof Promise) {
+    return true;
+  }
+  // Check if shape matches the Promise/A+ specification for a "thenable".
+  if (value !== null && (typeof value === 'function' || typeof value === 'object') && typeof value.then === 'function') {
+    return true;
+  }
+  return false;
+}
+function isArray(value) {
+  return Array.isArray(value);
+}
+function isErrorEvent(event) {
+  return typeof event.type === 'string' && (event.type === errorExecution || event.type.startsWith(errorPlatform));
+}
+function toTransitionConfigArray(configLike) {
+  return toArrayStrict(configLike).map(transitionLike => {
+    if (typeof transitionLike === 'undefined' || typeof transitionLike === 'string') {
+      return {
+        target: transitionLike
+      };
+    }
+    return transitionLike;
+  });
+}
+function normalizeTarget(target) {
+  if (target === undefined || target === TARGETLESS_KEY) {
+    return undefined;
+  }
+  return toArray(target);
+}
+function toInvokeConfig(invocable, id) {
+  if (typeof invocable === 'object') {
+    if ('src' in invocable) {
+      return invocable;
+    }
+    if ('transition' in invocable) {
+      return {
+        id,
+        src: invocable
+      };
+    }
+  }
+  return {
+    id,
+    src: invocable
+  };
+}
+function toObserver(nextHandler, errorHandler, completionHandler) {
+  const isObserver = typeof nextHandler === 'object';
+  const self = isObserver ? nextHandler : undefined;
+  return {
+    next: (isObserver ? nextHandler.next : nextHandler)?.bind(self),
+    error: (isObserver ? nextHandler.error : errorHandler)?.bind(self),
+    complete: (isObserver ? nextHandler.complete : completionHandler)?.bind(self)
+  };
+}
+function createInvokeId(stateNodeId, index) {
+  return `${stateNodeId}:invocation[${index}]`;
+}
+function resolveReferencedActor(referenced) {
+  return referenced ? 'transition' in referenced ? {
+    src: referenced,
+    input: undefined
+  } : referenced : undefined;
+}
+
+function fromCallback(invokeCallback) {
+  return {
+    config: invokeCallback,
+    start: (_state, {
+      self
+    }) => {
+      self.send({
+        type: startSignalType
+      });
     },
-    start: (state, {
+    transition: (state, event, {
       self,
+      id,
       system
     }) => {
-      // TODO: determine how to allow customizing this so that promises
-      // can be restarted if necessary
-      if (state.status !== 'active') {
-        return;
+      if (event.type === startSignalType) {
+        const sendBack = eventForParent => {
+          if (state.canceled) {
+            return;
+          }
+          self._parent?.send(eventForParent);
+        };
+        const receive = newListener => {
+          state.receivers.add(newListener);
+        };
+        state.dispose = invokeCallback({
+          input: state.input,
+          system,
+          self: self,
+          sendBack,
+          receive
+        });
+        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;
       }
-      const resolvedPromise = Promise.resolve(promiseCreator({
-        input: state.input,
-        system,
-        self
-      }));
-      resolvedPromise.then(response => {
-        // TODO: remove this condition once dead letter queue lands
-        if (self._state.status !== 'active') {
-          return;
+      if (event.type === stopSignalType) {
+        state.canceled = true;
+        if (typeof state.dispose === 'function') {
+          state.dispose();
         }
-        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
-        });
-      });
+        return state;
+      }
+      if (isSignal(event)) {
+        // TODO: unrecognized signal
+        return state;
+      }
+      state.receivers.forEach(receiver => receiver(event));
+      return state;
     },
     getInitialState: (_, input) => {
       return {
-        status: 'active',
-        data: undefined,
+        canceled: false,
+        receivers: new Set(),
+        dispose: undefined,
         input
       };
     },
-    getSnapshot: state => state.data,
-    getStatus: state => state,
-    getPersistedState: state => state,
-    restoreState: state => state
+    getSnapshot: () => undefined,
+    getPersistedState: ({
+      input,
+      canceled
+    }) => ({
+      input,
+      canceled
+    })
   };
-  return logic;
 }
 
-// TODO: this likely shouldn't accept TEvent, observable actor doesn't accept external events
 function fromObservable(observableCreator) {
   const nextEventType = '$$xstate.next';
   const errorEventType = '$$xstate.error';
   const completeEventType = '$$xstate.complete';
-
-  // TODO: add event types
-  const logic = {
+  return {
     config: observableCreator,
     transition: (state, event, {
       self,
@@ -445,6 +604,7 @@ function fromObservable(observableCreator) {
             status: 'error',
             input: undefined,
             data: event.data,
+            // TODO: if we keep this as `data` we should reflect this in the type
             subscription: undefined
           };
         case completeEventType:
@@ -522,7 +682,6 @@ function fromObservable(observableCreator) {
       subscription: undefined
     })
   };
-  return logic;
 }
 
 /**
@@ -539,7 +698,7 @@ function fromEventObservable(lazyObservable) {
   const completeEventType = '$$xstate.complete';
 
   // TODO: event types
-  const logic = {
+  return {
     config: lazyObservable,
     transition: (state, event) => {
       if (state.status !== 'active') {
@@ -552,329 +711,166 @@ function fromEventObservable(lazyObservable) {
             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,
-        self
-      }).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;
-}
-
-function matchesState(parentStateId, childStateId) {
-  const parentStateValue = toStateValue(parentStateId);
-  const childStateValue = toStateValue(childStateId);
-  if (typeof childStateValue === 'string') {
-    if (typeof parentStateValue === 'string') {
-      return childStateValue === parentStateValue;
-    }
-
-    // Parent more specific than child
-    return false;
-  }
-  if (typeof parentStateValue === 'string') {
-    return parentStateValue in childStateValue;
-  }
-  return Object.keys(parentStateValue).every(key => {
-    if (!(key in childStateValue)) {
-      return false;
-    }
-    return matchesState(parentStateValue[key], childStateValue[key]);
-  });
-}
-function toStatePath(stateId) {
-  try {
-    if (isArray(stateId)) {
-      return stateId;
-    }
-    return stateId.toString().split(STATE_DELIMITER);
-  } catch (e) {
-    throw new Error(`'${stateId}' is not a valid state path.`);
-  }
-}
-function isStateLike(state) {
-  return typeof state === 'object' && 'value' in state && 'context' in state && 'event' in state;
-}
-function toStateValue(stateValue) {
-  if (isStateLike(stateValue)) {
-    return stateValue.value;
-  }
-  if (isArray(stateValue)) {
-    return pathToStateValue(stateValue);
-  }
-  if (typeof stateValue !== 'string') {
-    return stateValue;
-  }
-  const statePath = toStatePath(stateValue);
-  return pathToStateValue(statePath);
-}
-function pathToStateValue(statePath) {
-  if (statePath.length === 1) {
-    return statePath[0];
-  }
-  const value = {};
-  let marker = value;
-  for (let i = 0; i < statePath.length - 1; i++) {
-    if (i === statePath.length - 2) {
-      marker[statePath[i]] = statePath[i + 1];
-    } else {
-      const previous = marker;
-      marker = {};
-      previous[statePath[i]] = marker;
-    }
-  }
-  return value;
-}
-function mapValues(collection, iteratee) {
-  const result = {};
-  const collectionKeys = Object.keys(collection);
-  for (let i = 0; i < collectionKeys.length; i++) {
-    const key = collectionKeys[i];
-    result[key] = iteratee(collection[key], key, collection, i);
-  }
-  return result;
-}
-function flatten(array) {
-  return [].concat(...array);
-}
-function toArrayStrict(value) {
-  if (isArray(value)) {
-    return value;
-  }
-  return [value];
-}
-function toArray(value) {
-  if (value === undefined) {
-    return [];
-  }
-  return toArrayStrict(value);
-}
-function mapContext(mapper, context, event) {
-  if (typeof mapper === 'function') {
-    return mapper({
-      context,
-      event
-    });
-  }
-  const result = {};
-  const args = {
-    context,
-    event
-  };
-  for (const key of Object.keys(mapper)) {
-    const subMapper = mapper[key];
-    if (typeof subMapper === 'function') {
-      result[key] = subMapper(args);
-    } else {
-      result[key] = subMapper;
-    }
-  }
-  return result;
-}
-function isPromiseLike(value) {
-  if (value instanceof Promise) {
-    return true;
-  }
-  // Check if shape matches the Promise/A+ specification for a "thenable".
-  if (value !== null && (typeof value === 'function' || typeof value === 'object') && typeof value.then === 'function') {
-    return true;
-  }
-  return false;
-}
-function isArray(value) {
-  return Array.isArray(value);
-}
-function isErrorEvent(event) {
-  return typeof event.type === 'string' && (event.type === errorExecution || event.type.startsWith(errorPlatform));
-}
-function toTransitionConfigArray(configLike) {
-  return toArrayStrict(configLike).map(transitionLike => {
-    if (typeof transitionLike === 'undefined' || typeof transitionLike === 'string') {
-      return {
-        target: transitionLike
-      };
-    }
-    return transitionLike;
-  });
-}
-function normalizeTarget(target) {
-  if (target === undefined || target === TARGETLESS_KEY) {
-    return undefined;
-  }
-  return toArray(target);
-}
-function toInvokeConfig(invocable, id) {
-  if (typeof invocable === 'object') {
-    if ('src' in invocable) {
-      return invocable;
-    }
-    if ('transition' in invocable) {
+            // TODO: if we keep this as `data` we should reflect this in the type
+            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 {
-        id,
-        src: invocable
+        subscription: undefined,
+        status: 'active',
+        data: undefined,
+        input
       };
-    }
-  }
-  return {
-    id,
-    src: invocable
-  };
-}
-function toObserver(nextHandler, errorHandler, completionHandler) {
-  const noop = () => {};
-  const isObserver = typeof nextHandler === 'object';
-  const self = isObserver ? nextHandler : null;
-  return {
-    next: ((isObserver ? nextHandler.next : nextHandler) || noop).bind(self),
-    error: ((isObserver ? nextHandler.error : errorHandler) || noop).bind(self),
-    complete: ((isObserver ? nextHandler.complete : completionHandler) || noop).bind(self)
-  };
-}
-function createInvokeId(stateNodeId, index) {
-  return `${stateNodeId}:invocation[${index}]`;
-}
-function resolveReferencedActor(referenced) {
-  return referenced ? 'transition' in referenced ? {
-    src: referenced,
-    input: undefined
-  } : referenced : undefined;
-}
-
-function fromCallback(invokeCallback) {
-  const logic = {
-    config: invokeCallback,
-    start: (_state, {
-      self
-    }) => {
-      self.send({
-        type: startSignalType
-      });
     },
-    transition: (state, event, {
+    start: (state, {
       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,
-          self: self
-        });
-        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));
+      if (state.status === 'done') {
+        // Do not restart a completed observable
+        return;
+      }
+      state.subscription = lazyObservable({
+        input: state.input,
+        system,
+        self
+      }).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
+    })
+  };
+}
+
+const resolveEventType = '$$xstate.resolve';
+const rejectEventType = '$$xstate.reject';
+function fromPromise(
+// TODO: add types
+promiseCreator) {
+  // TODO: add event types
+  const logic = {
+    config: promiseCreator,
+    transition: (state, event) => {
+      if (state.status !== 'active') {
         return state;
       }
-      if (event.type === stopSignalType) {
-        state.canceled = true;
-        if (typeof state.dispose === 'function') {
-          state.dispose();
-        }
-        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,
+            // TODO: if we keep this as `data` we should reflect this in the type
+            input: undefined
+          };
+        case stopSignalType:
+          return {
+            ...state,
+            status: 'canceled',
+            input: undefined
+          };
+        default:
+          return state;
       }
-      if (isSignal(event)) {
-        // TODO: unrecognized signal
-        return state;
+    },
+    start: (state, {
+      self,
+      system
+    }) => {
+      // TODO: determine how to allow customizing this so that promises
+      // can be restarted if necessary
+      if (state.status !== 'active') {
+        return;
       }
-      state.receivers.forEach(receiver => receiver(event));
-      return state;
+      const resolvedPromise = Promise.resolve(promiseCreator({
+        input: state.input,
+        system,
+        self
+      }));
+      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 {
-        canceled: false,
-        receivers: new Set(),
-        dispose: undefined,
+        status: 'active',
+        data: undefined,
         input
       };
     },
-    getSnapshot: () => undefined,
-    getPersistedState: ({
-      input
-    }) => input
+    getSnapshot: state => state.data,
+    getStatus: state => state,
+    getPersistedState: state => state,
+    restoreState: state => state
   };
   return logic;
 }
@@ -913,6 +909,7 @@ function toActorRef(actorRefLike) {
     id: 'anonymous',
     sessionId: '',
     getSnapshot: () => undefined,
+    // TODO: this isn't safe
     [symbolObservable]: function () {
       return this;
     },
@@ -926,6 +923,19 @@ function createEmptyActor() {
   return interpret(emptyLogic);
 }
 
+/**
+ * This function makes sure that unhandled errors are thrown in a separate macrotask.
+ * It allows those errors to be detected by global error handlers and reported to bug tracking services
+ * without interrupting our own stack of execution.
+ *
+ * @param err error to be thrown
+ */
+function reportUnhandledError(err) {
+  setTimeout(() => {
+    throw err;
+  });
+}
+
 function createSystem() {
   let sessionIdCounter = 0;
   const children = new Map();
@@ -1094,29 +1104,38 @@ class Interpreter {
       deferredFn();
     }
     for (const observer of this.observers) {
-      observer.next?.(snapshot);
+      // TODO: should observers be notified in case of the error?
+      try {
+        observer.next?.(snapshot);
+      } catch (err) {
+        reportUnhandledError(err);
+      }
     }
     const status = this.logic.getStatus?.(state);
     switch (status?.status) {
       case 'done':
         this._stopProcedure();
+        this._complete();
         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);
+        this._parent?.send(error(this.id, 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);
+    if (this.status !== ActorStatus.Stopped) {
+      this.observers.add(observer);
+    } else {
+      try {
+        observer.complete?.();
+      } catch (err) {
+        reportUnhandledError(err);
+      }
     }
     return {
       unsubscribe: () => {
@@ -1138,8 +1157,26 @@ class Interpreter {
       this.system._set(this._systemId, this);
     }
     this.status = ActorStatus.Running;
+    const status = this.logic.getStatus?.(this._state);
+    switch (status?.status) {
+      case 'done':
+        // a state machine can be "done" upon intialization (it could reach a final state using initial microsteps)
+        // we still need to complete observers, flush deferreds etc
+        this.update(this._state);
+      // fallthrough
+      case 'error':
+        // TODO: rethink cleanup of observers, mailbox, etc
+        return this;
+    }
     if (this.logic.start) {
-      this.logic.start(this._state, this._actorContext);
+      try {
+        this.logic.start(this._state, this._actorContext);
+      } catch (err) {
+        this._stopProcedure();
+        this._error(err);
+        this._parent?.send(error(this.id, err));
+        return this;
+      }
     }
 
     // TODO: this notifies all subscribers but usually this is redundant
@@ -1153,23 +1190,30 @@ class Interpreter {
     return this;
   }
   _process(event) {
+    // TODO: reexamine what happens when an action (or a guard or smth) throws
+    let nextState;
+    let caughtError;
     try {
-      const nextState = this.logic.transition(this._state, event, this._actorContext);
-      this.update(nextState);
-      if (event.type === stopSignalType) {
-        this._stopProcedure();
-        this._complete();
-      }
+      nextState = this.logic.transition(this._state, event, this._actorContext);
     } catch (err) {
-      // TODO: properly handle errors
-      if (this.observers.size > 0) {
-        this.observers.forEach(observer => {
-          observer.error?.(err);
-        });
-        this.stop();
-      } else {
-        throw err;
-      }
+      // we wrap it in a box so we can rethrow it later even if falsy value gets caught here
+      caughtError = {
+        err
+      };
+    }
+    if (caughtError) {
+      const {
+        err
+      } = caughtError;
+      this._stopProcedure();
+      this._error(err);
+      this._parent?.send(error(this.id, err));
+      return;
+    }
+    this.update(nextState);
+    if (event.type === stopSignalType) {
+      this._stopProcedure();
+      this._complete();
     }
   }
   _stop() {
@@ -1198,15 +1242,35 @@ class Interpreter {
   }
   _complete() {
     for (const observer of this.observers) {
-      observer.complete?.();
+      try {
+        observer.complete?.();
+      } catch (err) {
+        reportUnhandledError(err);
+      }
     }
     this.observers.clear();
   }
-  _error(data) {
+  _error(err) {
+    if (!this.observers.size) {
+      if (!this._parent) {
+        reportUnhandledError(err);
+      }
+      return;
+    }
+    let reportError = false;
     for (const observer of this.observers) {
-      observer.error?.(data);
+      const errorListener = observer.error;
+      reportError ||= !errorListener;
+      try {
+        errorListener?.(err);
+      } catch (err2) {
+        reportUnhandledError(err2);
+      }
     }
     this.observers.clear();
+    if (reportError) {
+      reportUnhandledError(err);
+    }
   }
   _stopProcedure() {
     if (this.status !== ActorStatus.Running) {
@@ -1528,10 +1592,10 @@ function toGuardDefinition(guardConfig, getPredicate) {
   }
 }
 
-function getOutput(configuration, context, event) {
+function getOutput(configuration, context, event, self) {
   const machine = configuration[0].machine;
   const finalChildStateNode = configuration.find(stateNode => stateNode.type === 'final' && stateNode.parent === machine.root);
-  return finalChildStateNode && finalChildStateNode.output ? mapContext(finalChildStateNode.output, context, event) : undefined;
+  return finalChildStateNode && finalChildStateNode.output ? mapContext(finalChildStateNode.output, context, event, self) : undefined;
 }
 const isAtomicStateNode = stateNode => stateNode.type === 'atomic' || stateNode.type === 'final';
 function getChildren(stateNode) {
@@ -2147,7 +2211,7 @@ function microstepProcedure(transitions, currentState, mutConfiguration, event,
   actions.push(...filteredTransitions.flatMap(t => t.actions));
 
   // Enter states
-  enterStates(event, filteredTransitions, mutConfiguration, actions, internalQueue, currentState, historyValue, isInitial);
+  enterStates(event, filteredTransitions, mutConfiguration, actions, internalQueue, currentState, historyValue, isInitial, actorCtx);
   const nextConfiguration = [...mutConfiguration];
   const done = isInFinalState(nextConfiguration);
   if (done) {
@@ -2156,7 +2220,7 @@ function microstepProcedure(transitions, currentState, mutConfiguration, event,
   }
   try {
     const nextState = resolveActionsAndContext(actions, event, currentState, actorCtx);
-    const output = done ? getOutput(nextConfiguration, nextState.context, event) : undefined;
+    const output = done ? getOutput(nextConfiguration, nextState.context, event, actorCtx.self) : undefined;
     internalQueue.push(...nextState._internalQueue);
     return cloneState(currentState, {
       configuration: nextConfiguration,
@@ -2173,7 +2237,7 @@ function microstepProcedure(transitions, currentState, mutConfiguration, event,
     throw e;
   }
 }
-function enterStates(event, filteredTransitions, mutConfiguration, actions, internalQueue, currentState, historyValue, isInitial) {
+function enterStates(event, filteredTransitions, mutConfiguration, actions, internalQueue, currentState, historyValue, isInitial, actorContext) {
   const statesToEnter = new Set();
   const statesForDefaultEntry = new Set();
   computeEntrySet(filteredTransitions, historyValue, statesForDefaultEntry, statesToEnter);
@@ -2201,7 +2265,7 @@ function enterStates(event, filteredTransitions, mutConfiguration, actions, inte
       if (!parent.parent) {
         continue;
       }
-      internalQueue.push(done(parent.id, stateNodeToEnter.output ? mapContext(stateNodeToEnter.output, currentState.context, event) : undefined));
+      internalQueue.push(done(parent.id, stateNodeToEnter.output ? mapContext(stateNodeToEnter.output, currentState.context, event, actorContext.self) : undefined));
       if (parent.parent) {
         const grandparent = parent.parent;
         if (grandparent.type === 'parallel') {
@@ -2521,6 +2585,7 @@ class State {
     this.value = void 0;
     this.done = void 0;
     this.output = void 0;
+    this.error = void 0;
     this.context = void 0;
     this.historyValue = {};
     this._internalQueue = void 0;
@@ -2537,6 +2602,7 @@ class State {
     this.tags = new Set(flatten(this.configuration.map(sn => sn.tags)));
     this.done = config.done ?? false;
     this.output = config.output;
+    this.error = config.error;
   }
 
   /**
@@ -2772,7 +2838,7 @@ function createSpawner(actorContext, {
     }
   };
   return (src, options) => {
-    const actorRef = spawn(src, options);
+    const actorRef = spawn(src, options); // TODO: fix types
     spawnedChildren[actorRef.id] = actorRef;
     actorContext.defer(() => {
       if (actorRef.status === ActorStatus.Stopped) {
@@ -2986,4 +3052,4 @@ function createInitEvent(input) {
   };
 }
 
-export { fromEventObservable as $, isAtomicStateNode as A, error as B, isStateId as C, getStateNodeByPath as D, getPersistedState as E, resolveReferencedActor as F, interpret as G, matchesState as H, sendTo as I, sendParent as J, forwardTo as K, Interpreter as L, ActorStatus as M, NULL_EVENT as N, doneInvoke as O, cancel as P, choose as Q, log as R, STATE_DELIMITER as S, pure as T, raise as U, stop as V, pathToStateValue as W, toObserver as X, fromPromise as Y, fromObservable as Z, fromCallback as _, toTransitionConfigArray as a, fromTransition as a0, stateIn as a1, not as a2, and as a3, or as a4, ConstantPrefix as a5, SpecialTargets as a6, startSignalType as a7, stopSignalType as a8, startSignal as a9, stopSignal as aa, isSignal as ab, isActorRef as ac, toActorRef as ad, createEmptyActor as ae, toGuardDefinition as af, constantPrefixes as ag, after as ah, done as ai, escalate as aj, formatTransition as b, memo as c, flatten as d, evaluateGuard as e, formatTransitions as f, createInvokeId as g, getDelayedTransitions as h, formatInitialTransition as i, getCandidates as j, toInvokeConfig as k, getConfiguration as l, mapValues as m, getStateNodes as n, isInFinalState as o, State as p, isErrorEvent as q, resolveStateValue as r, macrostep as s, toArray as t, transitionNode as u, getInitialConfiguration as v, resolveActionsAndContext as w, assign as x, createInitEvent as y, microstep as z };
+export { fromEventObservable as $, microstep as A, isAtomicStateNode as B, isStateId as C, getStateNodeByPath as D, getPersistedState as E, resolveReferencedActor as F, interpret as G, matchesState as H, sendTo as I, sendParent as J, forwardTo as K, Interpreter as L, ActorStatus as M, NULL_EVENT as N, doneInvoke as O, cancel as P, choose as Q, log as R, STATE_DELIMITER as S, pure as T, raise as U, stop as V, pathToStateValue as W, toObserver as X, fromPromise as Y, fromObservable as Z, fromCallback as _, toTransitionConfigArray as a, fromTransition as a0, stateIn as a1, not as a2, and as a3, or as a4, ConstantPrefix as a5, SpecialTargets as a6, startSignalType as a7, stopSignalType as a8, startSignal as a9, stopSignal as aa, isSignal as ab, isActorRef as ac, toActorRef as ad, createEmptyActor as ae, toGuardDefinition as af, constantPrefixes as ag, after as ah, done as ai, error as aj, escalate as ak, formatTransition as b, memo as c, flatten as d, evaluateGuard as e, formatTransitions as f, createInvokeId as g, getDelayedTransitions as h, formatInitialTransition as i, getCandidates as j, toInvokeConfig as k, getConfiguration as l, mapValues as m, getStateNodes as n, isInFinalState as o, State as p, isErrorEvent as q, resolveStateValue as r, cloneState as s, toArray as t, macrostep as u, transitionNode as v, getInitialConfiguration as w, resolveActionsAndContext as x, assign as y, createInitEvent as z };