Add support for inspecting via websocket (#293)

* Add support for inspecting via websocket

* Create URLSearchParams only on client side

* Add changeset

* Refactor inspector proxy into service config
Refactor receiver ref into context

* Add todo tests

* Draft test for simulation machine

* Combine inspecting substates and query params

* Update changeset

* Remove receiverRef from context

* Clean up diff

* Update .changeset/brave-shoes-flow.md

Co-authored-by: Mateusz Burzyński <[email protected]>

.changeset/brave-shoes-flow.md

@@ -0,0 +1,5 @@
+---
+'xstate-viz-app': minor
+---
+
+You can now inspect via WebSocket. To do that you can add the WebSocket server url as a query parameter, for example `https://stately.ai/viz?inspect&server=ws://localhost:3000`

src/__tests__/simulationMachine.test.ts

@@ -0,0 +1,31 @@
+import { interpret } from 'xstate';
+import { simulationMachine } from '../simulationMachine';
+
+describe('simulationMachine', () => {
+  const service = interpret(simulationMachine);
+  afterEach(() => service.stop());
+
+  describe('UrlSearchParams', () => {
+    const paramsGetSpy = jest.spyOn(URLSearchParams.prototype, 'get');
+    const paramsHasSpy = jest.spyOn(URLSearchParams.prototype, 'has');
+
+    describe('with no search params', () => {
+      it('goes to state "visualizing"', () => {
+        paramsGetSpy.mockReturnValue(null);
+        paramsHasSpy.mockReturnValue(false);
+
+        service.start();
+
+        expect(service.getSnapshot().matches('visualizing')).toBe(true);
+      });
+    });
+    describe('with /viz?inspect', () => {
+      it.todo('goes to state "inspecting"');
+      it.todo('creates a window receiver');
+    });
+    describe('with /viz?inspect&server=ws://localhost:8080', () => {
+      it.todo('goes to state "inspecting"');
+      it.todo('creates a websocket receiver');
+    });
+  });
+});

src/simulationMachine.tsx

@@ -7,7 +7,11 @@ import {
   SCXML,
 } from 'xstate';
 import { AnyEventObject, assign, interpret, send, spawn } from 'xstate';
-import { createWindowReceiver } from '@xstate/inspect';
+import {
+  createWebSocketReceiver,
+  createWindowReceiver,
+  InspectReceiver,
+} from '@xstate/inspect';
 
 import { createModel } from 'xstate/lib/model';
 import { devTools } from './devInterface';
@@ -77,13 +81,26 @@ export const simulationMachine = simModel.createMachine(
         invoke: {
           id: 'proxy',
           src: () => (sendBack, onReceive) => {
-            const receiver = createWindowReceiver({
-              // for some random reason the `window.top` is being rewritten to `window.self`
-              // looks like maybe some webpack replacement plugin (or similar) plays tricks on us
-              // this breaks the auto-detection of the correct `targetWindow` in the `createWindowReceiver`
-              // so we pass it explicitly here
-              targetWindow: window.opener || window.parent,
-            });
+            const serverUrl = new URLSearchParams(window.location.search).get(
+              'server',
+            );
+
+            let receiver: InspectReceiver;
+            if (serverUrl) {
+              const [protocol, ...server] = serverUrl.split('://');
+              receiver = createWebSocketReceiver({
+                protocol: protocol as 'ws' | 'wss',
+                server: server.join('://'),
+              });
+            } else {
+              receiver = createWindowReceiver({
+                // for some random reason the `window.top` is being rewritten to `window.self`
+                // looks like maybe some webpack replacement plugin (or similar) plays tricks on us
+                // this breaks the auto-detection of the correct `targetWindow` in the `createWindowReceiver`
+                // so we pass it explicitly here
+                targetWindow: window.opener || window.parent,
+              });
+            }
 
             onReceive((event) => {
               if (event.type === 'xstate.event') {