Upgrade @xstate/inspect to use [email protected] (#2894)

.changeset/tame-ants-eat.md

@@ -0,0 +1,5 @@
+---
+'@xstate/inspect': minor
+---
+
+The package has been upgraded to be compatible with `[email protected]`. The WS server created server-side has to be of a compatible version now.

packages/xstate-inspect/examples/server.ts

@@ -1,4 +1,4 @@
-import * as WebSocket from 'ws';
+import WebSocket from 'ws';
 import { createMachine, interpret, send } from 'xstate';
 import { toSCXMLEvent } from 'xstate/lib/utils';
 import { inspect } from '@xstate/inspect/lib/server';

packages/xstate-inspect/package.json

@@ -38,15 +38,21 @@
     "url": "https://github.com/davidkpiano/xstate/issues"
   },
   "devDependencies": {
-    "@types/ws": "^7.2.6",
+    "@types/ws": "^8.2.2",
     "rollup": "^2.35.1",
     "rollup-plugin-typescript2": "^0.30.0",
     "typescript": "^4.5.2",
-    "ws": "^7.3.1",
+    "ws": "^8.4.0",
     "xstate": "*"
   },
   "peerDependencies": {
-    "ws": "^7.3.1"
+    "@types/ws": "^8.0.0",
+    "ws": "^8.0.0"
+  },
+  "peerDependenciesMeta": {
+    "@types/ws": {
+      "optional": true
+    }
   },
   "dependencies": {
     "fast-safe-stringify": "^2.0.7"

packages/xstate-inspect/rollup.config.js

@@ -1,4 +1,13 @@
 import typescript from 'rollup-plugin-typescript2';
+import pkg from './package.json';
+
+const makeExternalPredicate = (externalArr) => {
+  if (externalArr.length === 0) {
+    return () => false;
+  }
+  const pattern = new RegExp(`^(${externalArr.join('|')})($|/)`);
+  return (id) => pattern.test(id);
+};
 
 const createTsPlugin = () =>
   typescript({
@@ -14,7 +23,10 @@ const createNpmConfig = ({ input, output }) => ({
   input,
   output,
   preserveModules: true,
-  external: ['xstate', 'xstate/lib/utils'],
+  external: makeExternalPredicate([
+    ...Object.keys(pkg.dependencies || {}),
+    ...Object.keys(pkg.peerDependencies | {})
+  ]),
   plugins: [createTsPlugin()]
 });
 

packages/xstate-inspect/src/server.ts

@@ -1,4 +1,4 @@
-import * as WebSocket from 'ws';
+import { WebSocketServer } from 'ws';
 import {
   ActorRef,
   EventData,
@@ -43,7 +43,7 @@ function createDevTools() {
 }
 
 interface ServerInspectorOptions {
-  server: WebSocket.Server;
+  server: WebSocketServer;
   serialize?: Replacer | undefined;
 }
 
@@ -53,35 +53,28 @@ export function inspect(options: ServerInspectorOptions): Inspector {
   const inspectService = interpret(
     createInspectMachine(globalThis.__xstate__, options)
   ).start();
-  let client: ActorRef<any, undefined>;
-
-  server.on('connection', function connection(wss) {
-    client = {
-      id: '@@xstate/ws-client',
-      send: (event: any) => {
-        server.clients.forEach((ws) => {
-          if (ws.readyState === ws.OPEN) {
-            ws.send(JSON.stringify(event));
-          }
-        });
-      },
-      subscribe: () => {
-        return { unsubscribe: () => void 0 };
-      },
-      getSnapshot: () => undefined
-    };
+  let client: ActorRef<any, undefined> = {
+    id: '@@xstate/ws-client',
+    send: (event: any) => {
+      server.clients.forEach((wsClient) => {
+        if (wsClient.readyState === wsClient.OPEN) {
+          wsClient.send(JSON.stringify(event));
+        }
+      });
+    },
+    subscribe: () => {
+      return { unsubscribe: () => void 0 };
+    },
+    getSnapshot: () => undefined
+  };
 
-    wss.on('message', function incoming(message) {
-      let msg: string;
-      if (typeof message === 'string') {
-        msg = message;
-      } else if (message instanceof Buffer) {
-        msg = message.toString('utf8');
-      } else {
+  server.on('connection', function connection(wsClient) {
+    wsClient.on('message', function incoming(data, isBinary) {
+      if (isBinary) {
         return;
       }
 
-      const jsonMessage = JSON.parse(msg);
+      const jsonMessage = JSON.parse(data.toString());
       inspectService.send({
         ...jsonMessage,
         client
@@ -167,6 +160,7 @@ export function inspect(options: ServerInspectorOptions): Inspector {
 
   server.on('close', () => {
     inspectService.stop();
+    server.clients.forEach((client) => client.terminate());
   });
 
   return inspector;

yarn.lock

@@ -1277,10 +1277,10 @@
   resolved "https://registry.yarnpkg.com/@types/use-subscription/-/use-subscription-1.0.0.tgz#d146f8d834f70f50d48bd8246a481d096f11db19"
   integrity sha512-0WWZ5GUDKMXUY/1zy4Ur5/zsC0s/B+JjXfHdkvx6JgDNZzZV5eW+KKhDqsTGyqX56uh99gwGwbsKbVwkcVIKQA==
 
-"@types/ws@^7.2.6":
-  version "7.4.0"
-  resolved "https://registry.yarnpkg.com/@types/ws/-/ws-7.4.0.tgz#499690ea08736e05a8186113dac37769ab251a0e"
-  integrity sha512-Y29uQ3Uy+58bZrFLhX36hcI3Np37nqWE7ky5tjiDoy1GDZnIwVxS0CgF+s+1bXMzjKBFy+fqaRfb708iNzdinw==
+"@types/ws@^8.2.2":
+  version "8.2.2"
+  resolved "https://registry.yarnpkg.com/@types/ws/-/ws-8.2.2.tgz#7c5be4decb19500ae6b3d563043cd407bf366c21"
+  integrity sha512-NOn5eIcgWLOo6qW8AcuLZ7G8PycXu0xTxxkS6Q18VWFxgPUSOwV0pBj2a/4viNZVu25i7RIB7GttdkAIUUXOOg==
   dependencies:
     "@types/node" "*"
 
@@ -8279,11 +8279,16 @@ ws@^6.1.2:
   dependencies:
     async-limiter "~1.0.0"
 
-ws@^7.2.3, ws@^7.3.1:
+ws@^7.2.3:
   version "7.4.2"
   resolved "https://registry.yarnpkg.com/ws/-/ws-7.4.2.tgz#782100048e54eb36fe9843363ab1c68672b261dd"
   integrity sha512-T4tewALS3+qsrpGI/8dqNMLIVdq/g/85U98HPMa6F0m6xTbvhXU6RCQLqPH3+SlomNV/LdY6RXEbBpMH6EOJnA==
 
+ws@^8.4.0:
+  version "8.4.0"
+  resolved "https://registry.yarnpkg.com/ws/-/ws-8.4.0.tgz#f05e982a0a88c604080e8581576e2a063802bed6"
+  integrity sha512-IHVsKe2pjajSUIl4KYMQOdlyliovpEPquKkqbwswulszzI7r0SfQrxnXdWAEqOlDCLrVSJzo+O1hAwdog2sKSQ==
+
 xml-js@^1.6.11:
   version "1.6.11"
   resolved "https://registry.yarnpkg.com/xml-js/-/xml-js-1.6.11.tgz#927d2f6947f7f1c19a316dd8eea3614e8b18f8e9"