From fda6ca2d79cd026940a954257df08ebfda1da8da Mon Sep 17 00:00:00 2001 From: Matt Pocock Date: Fri, 22 Oct 2021 10:27:27 +0100 Subject: [PATCH 1/5] Fixed duplicated events issue --- src/simulationMachine.tsx | 40 +++++---------------------------------- 1 file changed, 5 insertions(+), 35 deletions(-) diff --git a/src/simulationMachine.tsx b/src/simulationMachine.tsx index 438675c5..a9d7e9cf 100644 --- a/src/simulationMachine.tsx +++ b/src/simulationMachine.tsx @@ -68,38 +68,6 @@ export const simulationMachine = simModel.createMachine( ? 'inspecting' : '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)); - }); - }); - }, - }, states: { inspecting: { tags: 'inspecting', @@ -183,6 +151,7 @@ export const simulationMachine = simModel.createMachine( ); service.subscribe((state) => { + console.log('LINE 189'); sendBack( simModel.events['SERVICE.STATE'](service.sessionId, state), ); @@ -283,14 +252,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, }); - }), + }); + }, }), ], }, From 08315004fa446771a654f7fbcd5566449c560dbf Mon Sep 17 00:00:00 2001 From: Matt Pocock Date: Fri, 22 Oct 2021 10:29:52 +0100 Subject: [PATCH 2/5] Reset other changes --- src/simulationMachine.tsx | 8 +++----- 1 file changed, 3 insertions(+), 5 deletions(-) diff --git a/src/simulationMachine.tsx b/src/simulationMachine.tsx index a9d7e9cf..5333c75f 100644 --- a/src/simulationMachine.tsx +++ b/src/simulationMachine.tsx @@ -151,7 +151,6 @@ export const simulationMachine = simModel.createMachine( ); service.subscribe((state) => { - console.log('LINE 189'); sendBack( simModel.events['SERVICE.STATE'](service.sessionId, state), ); @@ -252,15 +251,14 @@ export const simulationMachine = simModel.createMachine( e.state, ); }), - events: (ctx, e) => { - return produce(ctx.events, (draft) => { + events: (ctx, e) => + produce(ctx.events, (draft) => { draft.push({ ...e.state._event, timestamp: Date.now(), sessionId: e.sessionId, }); - }); - }, + }), }), ], }, From 2cb5ccfe5eb95ceb0919d247ba07ae70054dba5d Mon Sep 17 00:00:00 2001 From: Matt Pocock Date: Fri, 22 Oct 2021 10:30:15 +0100 Subject: [PATCH 3/5] Create strong-cameras-dream.md --- .changeset/strong-cameras-dream.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/strong-cameras-dream.md diff --git a/.changeset/strong-cameras-dream.md b/.changeset/strong-cameras-dream.md new file mode 100644 index 00000000..b457e0f2 --- /dev/null +++ b/.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. From 4be7f7b55ca7b09bc5f8f8e4ce22eee68a2ab29e Mon Sep 17 00:00:00 2001 From: Matt Pocock Date: Fri, 22 Oct 2021 11:10:01 +0100 Subject: [PATCH 4/5] Made fix which respects child machines/spawned machines --- src/simulationMachine.tsx | 43 ++++++++++++++++++++++++++++++++++++--- src/types.ts | 2 +- 2 files changed, 41 insertions(+), 4 deletions(-) diff --git a/src/simulationMachine.tsx b/src/simulationMachine.tsx index 5333c75f..f97ea90f 100644 --- a/src/simulationMachine.tsx +++ b/src/simulationMachine.tsx @@ -68,6 +68,9 @@ export const simulationMachine = simModel.createMachine( ? 'inspecting' : 'visualizing', entry: assign({ notifRef: () => spawn(notifMachine) }), + invoke: { + src: 'captureEventsFromChildServices', + }, states: { inspecting: { tags: 'inspecting', @@ -251,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, }); - }), + }); + }, }), ], }, @@ -333,6 +337,39 @@ export const simulationMachine = simModel.createMachine( }, }, { + services: { + captureEventsFromChildServices: () => (sendBack) => { + devTools.onRegister((service) => { + 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['type'] diff --git a/src/types.ts b/src/types.ts index a73dabee..68df4587 100644 --- a/src/types.ts +++ b/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; } From 01bb94bf0edf61423a4317247d6ebb476bea4bb1 Mon Sep 17 00:00:00 2001 From: Matt Pocock Date: Fri, 22 Oct 2021 14:56:39 +0100 Subject: [PATCH 5/5] Update src/simulationMachine.tsx Co-authored-by: David Khourshid --- src/simulationMachine.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/simulationMachine.tsx b/src/simulationMachine.tsx index f97ea90f..1156730a 100644 --- a/src/simulationMachine.tsx +++ b/src/simulationMachine.tsx @@ -340,6 +340,7 @@ 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']({