xstate 5.0.0-beta.32 → 5.0.0-beta.33

package/dist/{interpreter-d5fa7ce0.esm.js → interpreter-03737810.esm.js}

@@ -147,13 +147,14 @@ function reportUnhandledError(err) {
 
 const symbolObservable = (() => typeof Symbol === 'function' && Symbol.observable || '@@observable')();
 
-function createSystem() {
-  let sessionIdCounter = 0;
+let idCounter = 0;
+function createSystem(rootActor) {
   const children = new Map();
   const keyedActors = new Map();
   const reverseKeyedActors = new WeakMap();
+  const observers = new Set();
   const system = {
-    _bookId: () => `x:${sessionIdCounter++}`,
+    _bookId: () => `x:${idCounter++}`,
     _register: (sessionId, actorRef) => {
       children.set(sessionId, actorRef);
       return sessionId;
@@ -176,6 +177,25 @@ function createSystem() {
       }
       keyedActors.set(systemId, actorRef);
       reverseKeyedActors.set(actorRef, systemId);
+    },
+    inspect: observer => {
+      observers.add(observer);
+    },
+    _sendInspectionEvent: event => {
+      const resolvedInspectionEvent = {
+        ...event,
+        rootId: rootActor.sessionId
+      };
+      observers.forEach(observer => observer.next?.(resolvedInspectionEvent));
+    },
+    _relay: (source, target, event) => {
+      system._sendInspectionEvent({
+        type: '@xstate.event',
+        sourceRef: source,
+        targetRef: target,
+        event
+      });
+      target._send(event);
     }
   };
   return system;
@@ -403,10 +423,14 @@ class Actor {
       logger,
       parent,
       id,
-      systemId
+      systemId,
+      inspect
     } = resolvedOptions;
-    const self = this;
-    this.system = parent?.system ?? createSystem();
+    this.system = parent?.system ?? createSystem(this);
+    if (inspect && !parent) {
+      // Always inspect at the system-level
+      this.system.inspect(toObserver(inspect));
+    }
     if (systemId) {
       this._systemId = systemId;
       this.system._set(systemId, this);
@@ -420,7 +444,7 @@ class Actor {
     this.src = resolvedOptions.src;
     this.ref = this;
     this._actorContext = {
-      self,
+      self: this,
       id: this.id,
       sessionId: this.sessionId,
       logger: this.logger,
@@ -439,6 +463,10 @@ class Actor {
     // Ensure that the send method is bound to this Actor instance
     // if destructured
     this.send = this.send.bind(this);
+    this.system._sendInspectionEvent({
+      type: '@xstate.actor',
+      actorRef: this
+    });
     this._initState();
   }
   _initState() {
@@ -447,7 +475,7 @@ class Actor {
 
   // array of functions to defer
 
-  update(snapshot) {
+  update(snapshot, event) {
     // Update state
     this._state = snapshot;
 
@@ -469,14 +497,24 @@ class Actor {
         this._stopProcedure();
         this._complete();
         this._doneEvent = createDoneActorEvent(this.id, this._state.output);
-        this._parent?.send(this._doneEvent);
+        if (this._parent) {
+          this.system._relay(this, this._parent, this._doneEvent);
+        }
         break;
       case 'error':
         this._stopProcedure();
         this._error(this._state.error);
-        this._parent?.send(createErrorActorEvent(this.id, this._state.error));
+        if (this._parent) {
+          this.system._relay(this, this._parent, createErrorActorEvent(this.id, this._state.error));
+        }
         break;
     }
+    this.system._sendInspectionEvent({
+      type: '@xstate.snapshot',
+      actorRef: this,
+      event,
+      snapshot
+    });
   }
   subscribe(nextListenerOrObserver, errorListener, completeListener) {
     const observer = toObserver(nextListenerOrObserver, errorListener, completeListener);
@@ -509,12 +547,19 @@ class Actor {
       this.system._set(this._systemId, this);
     }
     this.status = ActorStatus.Running;
+    const initEvent = createInitEvent(this.options.input);
+    this.system._sendInspectionEvent({
+      type: '@xstate.event',
+      sourceRef: this._parent,
+      targetRef: this,
+      event: initEvent
+    });
     const status = this._state.status;
     switch (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);
+        this.update(this._state, initEvent);
       // fallthrough
       case 'error':
         // TODO: rethink cleanup of observers, mailbox, etc
@@ -534,7 +579,7 @@ class Actor {
     // 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);
+    this.update(this._state, initEvent);
     if (this.options.devTools) {
       this.attachDevTools();
     }
@@ -562,7 +607,7 @@ class Actor {
       this._parent?.send(createErrorActorEvent(this.id, err));
       return;
     }
-    this.update(nextState);
+    this.update(nextState, event);
     if (event.type === XSTATE_STOP) {
       this._stopProcedure();
       this._complete();
@@ -648,20 +693,24 @@ class Actor {
   }
 
   /**
-   * Sends an event to the running Actor to trigger a transition.
-   *
-   * @param event The event to send
+   * @internal
    */
-  send(event) {
-    if (typeof event === 'string') {
-      throw new Error(`Only event objects may be sent to actors; use .send({ type: "${event}" }) instead`);
-    }
+  _send(event) {
     if (this.status === ActorStatus.Stopped) {
       return;
     }
     this.mailbox.enqueue(event);
   }
 
+  /**
+   * Sends an event to the running Actor to trigger a transition.
+   *
+   * @param event The event to send
+   */
+  send(event) {
+    this.system._relay(undefined, this, event);
+  }
+
   // TODO: make private (and figure out a way to do this within the machine)
   delaySend({
     event,
@@ -670,11 +719,7 @@ class Actor {
     to
   }) {
     const timerId = this.clock.setTimeout(() => {
-      if (to) {
-        to.send(event);
-      } else {
-        this.send(event);
-      }
+      this.system._relay(this, to ?? this, event);
     }, delay);
 
     // TODO: consider the rehydration story here

package/dist/{interpreter-05e11c15.cjs.js → interpreter-054e9fb7.cjs.js}

@@ -149,13 +149,14 @@ function reportUnhandledError(err) {
 
 const symbolObservable = (() => typeof Symbol === 'function' && Symbol.observable || '@@observable')();
 
-function createSystem() {
-  let sessionIdCounter = 0;
+let idCounter = 0;
+function createSystem(rootActor) {
   const children = new Map();
   const keyedActors = new Map();
   const reverseKeyedActors = new WeakMap();
+  const observers = new Set();
   const system = {
-    _bookId: () => `x:${sessionIdCounter++}`,
+    _bookId: () => `x:${idCounter++}`,
     _register: (sessionId, actorRef) => {
       children.set(sessionId, actorRef);
       return sessionId;
@@ -178,6 +179,25 @@ function createSystem() {
       }
       keyedActors.set(systemId, actorRef);
       reverseKeyedActors.set(actorRef, systemId);
+    },
+    inspect: observer => {
+      observers.add(observer);
+    },
+    _sendInspectionEvent: event => {
+      const resolvedInspectionEvent = {
+        ...event,
+        rootId: rootActor.sessionId
+      };
+      observers.forEach(observer => observer.next?.(resolvedInspectionEvent));
+    },
+    _relay: (source, target, event) => {
+      system._sendInspectionEvent({
+        type: '@xstate.event',
+        sourceRef: source,
+        targetRef: target,
+        event
+      });
+      target._send(event);
     }
   };
   return system;
@@ -405,10 +425,14 @@ class Actor {
       logger,
       parent,
       id,
-      systemId
+      systemId,
+      inspect
     } = resolvedOptions;
-    const self = this;
-    this.system = parent?.system ?? createSystem();
+    this.system = parent?.system ?? createSystem(this);
+    if (inspect && !parent) {
+      // Always inspect at the system-level
+      this.system.inspect(toObserver(inspect));
+    }
     if (systemId) {
       this._systemId = systemId;
       this.system._set(systemId, this);
@@ -422,7 +446,7 @@ class Actor {
     this.src = resolvedOptions.src;
     this.ref = this;
     this._actorContext = {
-      self,
+      self: this,
       id: this.id,
       sessionId: this.sessionId,
       logger: this.logger,
@@ -441,6 +465,10 @@ class Actor {
     // Ensure that the send method is bound to this Actor instance
     // if destructured
     this.send = this.send.bind(this);
+    this.system._sendInspectionEvent({
+      type: '@xstate.actor',
+      actorRef: this
+    });
     this._initState();
   }
   _initState() {
@@ -449,7 +477,7 @@ class Actor {
 
   // array of functions to defer
 
-  update(snapshot) {
+  update(snapshot, event) {
     // Update state
     this._state = snapshot;
 
@@ -471,14 +499,24 @@ class Actor {
         this._stopProcedure();
         this._complete();
         this._doneEvent = createDoneActorEvent(this.id, this._state.output);
-        this._parent?.send(this._doneEvent);
+        if (this._parent) {
+          this.system._relay(this, this._parent, this._doneEvent);
+        }
         break;
       case 'error':
         this._stopProcedure();
         this._error(this._state.error);
-        this._parent?.send(createErrorActorEvent(this.id, this._state.error));
+        if (this._parent) {
+          this.system._relay(this, this._parent, createErrorActorEvent(this.id, this._state.error));
+        }
         break;
     }
+    this.system._sendInspectionEvent({
+      type: '@xstate.snapshot',
+      actorRef: this,
+      event,
+      snapshot
+    });
   }
   subscribe(nextListenerOrObserver, errorListener, completeListener) {
     const observer = toObserver(nextListenerOrObserver, errorListener, completeListener);
@@ -511,12 +549,19 @@ class Actor {
       this.system._set(this._systemId, this);
     }
     this.status = ActorStatus.Running;
+    const initEvent = createInitEvent(this.options.input);
+    this.system._sendInspectionEvent({
+      type: '@xstate.event',
+      sourceRef: this._parent,
+      targetRef: this,
+      event: initEvent
+    });
     const status = this._state.status;
     switch (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);
+        this.update(this._state, initEvent);
       // fallthrough
       case 'error':
         // TODO: rethink cleanup of observers, mailbox, etc
@@ -536,7 +581,7 @@ class Actor {
     // 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);
+    this.update(this._state, initEvent);
     if (this.options.devTools) {
       this.attachDevTools();
     }
@@ -564,7 +609,7 @@ class Actor {
       this._parent?.send(createErrorActorEvent(this.id, err));
       return;
     }
-    this.update(nextState);
+    this.update(nextState, event);
     if (event.type === XSTATE_STOP) {
       this._stopProcedure();
       this._complete();
@@ -650,20 +695,24 @@ class Actor {
   }
 
   /**
-   * Sends an event to the running Actor to trigger a transition.
-   *
-   * @param event The event to send
+   * @internal
    */
-  send(event) {
-    if (typeof event === 'string') {
-      throw new Error(`Only event objects may be sent to actors; use .send({ type: "${event}" }) instead`);
-    }
+  _send(event) {
     if (this.status === ActorStatus.Stopped) {
       return;
     }
     this.mailbox.enqueue(event);
   }
 
+  /**
+   * Sends an event to the running Actor to trigger a transition.
+   *
+   * @param event The event to send
+   */
+  send(event) {
+    this.system._relay(undefined, this, event);
+  }
+
   // TODO: make private (and figure out a way to do this within the machine)
   delaySend({
     event,
@@ -672,11 +721,7 @@ class Actor {
     to
   }) {
     const timerId = this.clock.setTimeout(() => {
-      if (to) {
-        to.send(event);
-      } else {
-        this.send(event);
-      }
+      this.system._relay(this, to ?? this, event);
     }, delay);
 
     // TODO: consider the rehydration story here

package/dist/{interpreter-a2236840.development.cjs.js → interpreter-0c630f66.development.cjs.js}

@@ -149,13 +149,14 @@ function reportUnhandledError(err) {
 
 const symbolObservable = (() => typeof Symbol === 'function' && Symbol.observable || '@@observable')();
 
-function createSystem() {
-  let sessionIdCounter = 0;
+let idCounter = 0;
+function createSystem(rootActor) {
   const children = new Map();
   const keyedActors = new Map();
   const reverseKeyedActors = new WeakMap();
+  const observers = new Set();
   const system = {
-    _bookId: () => `x:${sessionIdCounter++}`,
+    _bookId: () => `x:${idCounter++}`,
     _register: (sessionId, actorRef) => {
       children.set(sessionId, actorRef);
       return sessionId;
@@ -178,6 +179,25 @@ function createSystem() {
       }
       keyedActors.set(systemId, actorRef);
       reverseKeyedActors.set(actorRef, systemId);
+    },
+    inspect: observer => {
+      observers.add(observer);
+    },
+    _sendInspectionEvent: event => {
+      const resolvedInspectionEvent = {
+        ...event,
+        rootId: rootActor.sessionId
+      };
+      observers.forEach(observer => observer.next?.(resolvedInspectionEvent));
+    },
+    _relay: (source, target, event) => {
+      system._sendInspectionEvent({
+        type: '@xstate.event',
+        sourceRef: source,
+        targetRef: target,
+        event
+      });
+      target._send(event);
     }
   };
   return system;
@@ -408,10 +428,14 @@ class Actor {
       logger,
       parent,
       id,
-      systemId
+      systemId,
+      inspect
     } = resolvedOptions;
-    const self = this;
-    this.system = parent?.system ?? createSystem();
+    this.system = parent?.system ?? createSystem(this);
+    if (inspect && !parent) {
+      // Always inspect at the system-level
+      this.system.inspect(toObserver(inspect));
+    }
     if (systemId) {
       this._systemId = systemId;
       this.system._set(systemId, this);
@@ -425,7 +449,7 @@ class Actor {
     this.src = resolvedOptions.src;
     this.ref = this;
     this._actorContext = {
-      self,
+      self: this,
       id: this.id,
       sessionId: this.sessionId,
       logger: this.logger,
@@ -444,6 +468,10 @@ class Actor {
     // Ensure that the send method is bound to this Actor instance
     // if destructured
     this.send = this.send.bind(this);
+    this.system._sendInspectionEvent({
+      type: '@xstate.actor',
+      actorRef: this
+    });
     this._initState();
   }
   _initState() {
@@ -452,7 +480,7 @@ class Actor {
 
   // array of functions to defer
 
-  update(snapshot) {
+  update(snapshot, event) {
     // Update state
     this._state = snapshot;
 
@@ -474,14 +502,24 @@ class Actor {
         this._stopProcedure();
         this._complete();
         this._doneEvent = createDoneActorEvent(this.id, this._state.output);
-        this._parent?.send(this._doneEvent);
+        if (this._parent) {
+          this.system._relay(this, this._parent, this._doneEvent);
+        }
         break;
       case 'error':
         this._stopProcedure();
         this._error(this._state.error);
-        this._parent?.send(createErrorActorEvent(this.id, this._state.error));
+        if (this._parent) {
+          this.system._relay(this, this._parent, createErrorActorEvent(this.id, this._state.error));
+        }
         break;
     }
+    this.system._sendInspectionEvent({
+      type: '@xstate.snapshot',
+      actorRef: this,
+      event,
+      snapshot
+    });
   }
   subscribe(nextListenerOrObserver, errorListener, completeListener) {
     const observer = toObserver(nextListenerOrObserver, errorListener, completeListener);
@@ -514,12 +552,19 @@ class Actor {
       this.system._set(this._systemId, this);
     }
     this.status = ActorStatus.Running;
+    const initEvent = createInitEvent(this.options.input);
+    this.system._sendInspectionEvent({
+      type: '@xstate.event',
+      sourceRef: this._parent,
+      targetRef: this,
+      event: initEvent
+    });
     const status = this._state.status;
     switch (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);
+        this.update(this._state, initEvent);
       // fallthrough
       case 'error':
         // TODO: rethink cleanup of observers, mailbox, etc
@@ -539,7 +584,7 @@ class Actor {
     // 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);
+    this.update(this._state, initEvent);
     if (this.options.devTools) {
       this.attachDevTools();
     }
@@ -567,7 +612,7 @@ class Actor {
       this._parent?.send(createErrorActorEvent(this.id, err));
       return;
     }
-    this.update(nextState);
+    this.update(nextState, event);
     if (event.type === XSTATE_STOP) {
       this._stopProcedure();
       this._complete();
@@ -653,14 +698,9 @@ class Actor {
   }
 
   /**
-   * Sends an event to the running Actor to trigger a transition.
-   *
-   * @param event The event to send
+   * @internal
    */
-  send(event) {
-    if (typeof event === 'string') {
-      throw new Error(`Only event objects may be sent to actors; use .send({ type: "${event}" }) instead`);
-    }
+  _send(event) {
     if (this.status === ActorStatus.Stopped) {
       // do nothing
       {
@@ -672,6 +712,18 @@ class Actor {
     this.mailbox.enqueue(event);
   }
 
+  /**
+   * Sends an event to the running Actor 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`);
+    }
+    this.system._relay(undefined, this, event);
+  }
+
   // TODO: make private (and figure out a way to do this within the machine)
   delaySend({
     event,
@@ -680,11 +732,7 @@ class Actor {
     to
   }) {
     const timerId = this.clock.setTimeout(() => {
-      if (to) {
-        to.send(event);
-      } else {
-        this.send(event);
-      }
+      this.system._relay(this, to ?? this, event);
     }, delay);
 
     // TODO: consider the rehydration story here