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

package/dist/{actions-2d912781.cjs.js → actions-c619a105.cjs.js}

@@ -2,10 +2,19 @@
 
 var dev_dist_xstateDev = require('../dev/dist/xstate-dev.cjs.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`.
@@ -15,8 +24,6 @@ var dev_dist_xstateDev = require('../dev/dist/xstate-dev.cjs.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.
  *
@@ -307,7 +314,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);
@@ -321,103 +328,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,
@@ -447,6 +606,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:
@@ -524,7 +684,6 @@ function fromObservable(observableCreator) {
       subscription: undefined
     })
   };
-  return logic;
 }
 
 /**
@@ -541,7 +700,7 @@ function fromEventObservable(lazyObservable) {
   const completeEventType = '$$xstate.complete';
 
   // TODO: event types
-  const logic = {
+  return {
     config: lazyObservable,
     transition: (state, event) => {
       if (state.status !== 'active') {
@@ -554,329 +713,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;
 }
@@ -915,6 +911,7 @@ function toActorRef(actorRefLike) {
     id: 'anonymous',
     sessionId: '',
     getSnapshot: () => undefined,
+    // TODO: this isn't safe
     [symbolObservable]: function () {
       return this;
     },
@@ -928,6 +925,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();
@@ -1096,29 +1106,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: () => {
@@ -1140,8 +1159,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
@@ -1155,23 +1192,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() {
@@ -1200,15 +1244,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) {
@@ -1530,10 +1594,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) {
@@ -2149,7 +2213,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) {
@@ -2158,7 +2222,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,
@@ -2175,7 +2239,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);
@@ -2203,7 +2267,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') {
@@ -2523,6 +2587,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;
@@ -2539,6 +2604,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;
   }
 
   /**
@@ -2774,7 +2840,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) {
@@ -3000,6 +3066,7 @@ exports.and = and;
 exports.assign = assign;
 exports.cancel = cancel;
 exports.choose = choose;
+exports.cloneState = cloneState;
 exports.constantPrefixes = constantPrefixes;
 exports.createEmptyActor = createEmptyActor;
 exports.createInitEvent = createInitEvent;