Merge pull request #303 from statelyai/matt/fixed-duplicated-events-i…

…ssue

Fixed duplicated events issue

.changeset/strong-cameras-dream.md

@@ -0,0 +1,5 @@
+---
+"xstate-viz-app": patch
+---
+
+Fixed an issue where events were being duplicated in the right-hand events panel.

src/simulationMachine.tsx

@@ -69,36 +69,7 @@ export const simulationMachine = simModel.createMachine(
         : 'visualizing',
     entry: assign({ notifRef: () => spawn(notifMachine) }),
     invoke: {
-      src: () => (sendBack) => {
-        devTools.onRegister((service) => {
-          sendBack(
-            simModel.events['SERVICE.REGISTER']({
-              sessionId: service.sessionId,
-              machine: service.machine,
-              state: service.state || service.initialState,
-              parent: service.parent?.sessionId,
-              source: 'in-app',
-            }),
-          );
-
-          service.subscribe((state) => {
-            // `onRegister`'s callback gets called from within `.start()`
-            // `subscribe` calls the callback immediately with the current state
-            // but the `service.state` state has not yet been set when this gets called for the first time from within `.start()`
-            if (!state) {
-              return;
-            }
-
-            sendBack(
-              simModel.events['SERVICE.STATE'](service.sessionId, state),
-            );
-          });
-
-          service.onStop(() => {
-            sendBack(simModel.events['SERVICE.STOP'](service.sessionId));
-          });
-        });
-      },
+      src: 'captureEventsFromChildServices',
     },
     states: {
       inspecting: {
@@ -283,14 +254,15 @@ export const simulationMachine = simModel.createMachine(
                   e.state,
                 );
               }),
-            events: (ctx, e) =>
-              produce(ctx.events, (draft) => {
+            events: (ctx, e) => {
+              return produce(ctx.events, (draft) => {
                 draft.push({
                   ...e.state._event,
                   timestamp: Date.now(),
                   sessionId: e.sessionId,
                 });
-              }),
+              });
+            },
           }),
         ],
       },
@@ -365,6 +337,40 @@ export const simulationMachine = simModel.createMachine(
     },
   },
   {
+    services: {
+      captureEventsFromChildServices: () => (sendBack) => {
+        devTools.onRegister((service) => {
+          // Only capture machines that are spawned or invoked
+          if (service.parent) {
+            sendBack(
+              simModel.events['SERVICE.REGISTER']({
+                sessionId: service.sessionId,
+                machine: service.machine,
+                state: service.state || service.initialState,
+                parent: service.parent?.sessionId,
+                source: 'child',
+              }),
+            );
+            service.subscribe((state) => {
+              // `onRegister`'s callback gets called from within `.start()`
+              // `subscribe` calls the callback immediately with the current state
+              // but the `service.state` state has not yet been set when this gets called for the first time from within `.start()`
+              if (!state) {
+                return;
+              }
+
+              sendBack(
+                simModel.events['SERVICE.STATE'](service.sessionId, state),
+              );
+            });
+
+            service.onStop(() => {
+              sendBack(simModel.events['SERVICE.STOP'](service.sessionId));
+            });
+          }
+        });
+      },
+    },
     actions: {
       resetVisualizationState: simModel.assign<
         EventFrom<typeof simModel>['type']

src/types.ts

@@ -45,7 +45,7 @@ export interface ServiceData {
   machine: AnyStateMachine;
   state: AnyState;
   status: AnyInterpreter['status'];
-  source: 'inspector' | 'visualizer' | 'in-app';
+  source: 'inspector' | 'visualizer' | 'child';
   parent: string | undefined;
 }