From 8435c5b841e318c5d35dfea65242246dfb4b34f8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mateusz=20Burzy=C5=84ski?= Date: Mon, 27 Dec 2021 16:21:12 +0100 Subject: [PATCH] Upgrade `@xstate/inspect` to use `ws@8.x` (#2894) --- .changeset/tame-ants-eat.md | 5 +++ packages/xstate-inspect/examples/server.ts | 2 +- packages/xstate-inspect/package.json | 12 ++++-- packages/xstate-inspect/rollup.config.js | 14 ++++++- packages/xstate-inspect/src/server.ts | 48 ++++++++++------------ yarn.lock | 15 ++++--- 6 files changed, 59 insertions(+), 37 deletions(-) create mode 100644 .changeset/tame-ants-eat.md diff --git a/.changeset/tame-ants-eat.md b/.changeset/tame-ants-eat.md new file mode 100644 index 0000000000..eeb3f30825 --- /dev/null +++ b/.changeset/tame-ants-eat.md @@ -0,0 +1,5 @@ +--- +'@xstate/inspect': minor +--- + +The package has been upgraded to be compatible with `ws@8.x`. The WS server created server-side has to be of a compatible version now. diff --git a/packages/xstate-inspect/examples/server.ts b/packages/xstate-inspect/examples/server.ts index eaf94bf7f9..3b799eb412 100644 --- a/packages/xstate-inspect/examples/server.ts +++ b/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'; diff --git a/packages/xstate-inspect/package.json b/packages/xstate-inspect/package.json index 622b3c37e9..2425e3b5b1 100644 --- a/packages/xstate-inspect/package.json +++ b/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" diff --git a/packages/xstate-inspect/rollup.config.js b/packages/xstate-inspect/rollup.config.js index 693421dca5..43929238af 100644 --- a/packages/xstate-inspect/rollup.config.js +++ b/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()] }); diff --git a/packages/xstate-inspect/src/server.ts b/packages/xstate-inspect/src/server.ts index d59f721358..052d952435 100644 --- a/packages/xstate-inspect/src/server.ts +++ b/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; - - 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 = { + 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; diff --git a/yarn.lock b/yarn.lock index 6ec0d792f8..e7c1842ed9 100644 --- a/yarn.lock +++ b/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"