diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 3086f22..c1e6a1e 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -55,8 +55,8 @@ importers: version: link:../shared devDependencies: '@playwright/test': - specifier: ^1.49.1 - version: 1.49.1 + specifier: ^1.50.0 + version: 1.50.0 '@types/node': specifier: ^20 version: 20.17.14 @@ -102,7 +102,7 @@ importers: version: 29.7.0(@types/node@20.17.14) ts-jest: specifier: ^29.2.5 - version: 29.2.5(@babel/core@7.24.7)(@jest/transform@29.7.0)(@jest/types@29.6.3)(babel-jest@29.7.0(@babel/core@7.24.7))(esbuild@0.24.0)(jest@29.7.0(@types/node@20.17.14))(typescript@5.7.3) + version: 29.2.5(@babel/core@7.26.0)(@jest/transform@29.7.0)(@jest/types@29.6.3)(babel-jest@29.7.0(@babel/core@7.26.0))(jest@29.7.0(@types/node@20.17.14))(typescript@5.7.3) tsup: specifier: ^8.3.5 version: 8.3.5(@microsoft/api-extractor@7.48.1(@types/node@20.17.14))(jiti@2.4.2)(postcss@8.5.1)(typescript@5.7.3)(yaml@2.4.5) @@ -139,7 +139,7 @@ importers: version: 6.0.1 ts-jest: specifier: ^29.2.5 - version: 29.2.5(@babel/core@7.26.0)(@jest/transform@29.7.0)(@jest/types@29.6.3)(babel-jest@29.7.0(@babel/core@7.26.0))(jest@29.7.0(@types/node@20.17.14))(typescript@5.7.3) + version: 29.2.5(@babel/core@7.24.7)(@jest/transform@29.7.0)(@jest/types@29.6.3)(babel-jest@29.7.0(@babel/core@7.24.7))(esbuild@0.24.0)(jest@29.7.0(@types/node@20.17.14))(typescript@5.7.3) tsup: specifier: ^8.3.5 version: 8.3.5(@microsoft/api-extractor@7.48.1(@types/node@20.17.14))(jiti@2.4.2)(postcss@8.5.1)(typescript@5.7.3)(yaml@2.4.5) @@ -1060,8 +1060,8 @@ packages: resolution: {integrity: sha512-cq8o4cWH0ibXh9VGi5P20Tu9XF/0fFXl9EUinr9QfTM7a7p0oTA4iJRCQWppXR1Pg8dSM0UCItCkPwsk9qWWYA==} engines: {node: ^12.20.0 || ^14.18.0 || >=16.0.0} - '@playwright/test@1.49.1': - resolution: {integrity: sha512-Ky+BVzPz8pL6PQxHqNRW1k3mIyv933LML7HktS8uik0bUXNCdPhoS/kLihiO1tMf/egaJb4IutXd7UywvXEW+g==} + '@playwright/test@1.50.0': + resolution: {integrity: sha512-ZGNXbt+d65EGjBORQHuYKj+XhCewlwpnSd/EDuLPZGSiEWmgOJB5RmMCCYGy5aMfTs9wx61RivfDKi8H/hcMvw==} engines: {node: '>=18'} hasBin: true @@ -3331,13 +3331,13 @@ packages: resolution: {integrity: sha512-HRDzbaKjC+AOWVXxAU/x54COGeIv9eb+6CkDSQoNTt4XyWoIJvuPsXizxu/Fr23EiekbtZwmh1IcIG/l/a10GQ==} engines: {node: '>=8'} - playwright-core@1.49.1: - resolution: {integrity: sha512-BzmpVcs4kE2CH15rWfzpjzVGhWERJfmnXmniSyKeRZUs9Ws65m+RGIi7mjJK/euCegfn3i7jvqWeWyHe9y3Vgg==} + playwright-core@1.50.0: + resolution: {integrity: sha512-CXkSSlr4JaZs2tZHI40DsZUN/NIwgaUPsyLuOAaIZp2CyF2sN5MM5NJsyB188lFSSozFxQ5fPT4qM+f0tH/6wQ==} engines: {node: '>=18'} hasBin: true - playwright@1.49.1: - resolution: {integrity: sha512-VYL8zLoNTBxVOrJBbDuRgDWa3i+mfQgDTrL8Ah9QXZ7ax4Dsj0MSq5bYgytRnDVVe+njoKnfsYkH3HzqVj5UZA==} + playwright@1.50.0: + resolution: {integrity: sha512-+GinGfGTrd2IfX1TA4N2gNmeIksSb+IAe589ZH+FlmpV3MYTx6+buChGIuDLQwrGNCw2lWibqV50fU510N7S+w==} engines: {node: '>=18'} hasBin: true @@ -5125,9 +5125,9 @@ snapshots: '@pkgr/core@0.1.1': {} - '@playwright/test@1.49.1': + '@playwright/test@1.50.0': dependencies: - playwright: 1.49.1 + playwright: 1.50.0 '@preact/signals-core@1.8.0': {} @@ -7910,11 +7910,11 @@ snapshots: dependencies: find-up: 4.1.0 - playwright-core@1.49.1: {} + playwright-core@1.50.0: {} - playwright@1.49.1: + playwright@1.50.0: dependencies: - playwright-core: 1.49.1 + playwright-core: 1.50.0 optionalDependencies: fsevents: 2.3.2 diff --git a/workspaces/e2e/package.json b/workspaces/e2e/package.json index 5518394..ee9e6c6 100644 --- a/workspaces/e2e/package.json +++ b/workspaces/e2e/package.json @@ -15,7 +15,7 @@ "@flows/shared": "workspace:*" }, "devDependencies": { - "@playwright/test": "^1.49.1", + "@playwright/test": "^1.50.0", "@types/node": "^20", "@types/react": "19.0.7", "@types/react-dom": "19.0.3", diff --git a/workspaces/e2e/tests/websocket.spec.ts b/workspaces/e2e/tests/websocket.spec.ts index da29f1a..2d6fe49 100644 --- a/workspaces/e2e/tests/websocket.spec.ts +++ b/workspaces/e2e/tests/websocket.spec.ts @@ -30,6 +30,7 @@ const run = (packageName: string) => { route.fulfill({ json: { blocks: [] } }); }); await page.goto(`/${packageName}.html`); + await expect(page.locator("h1")).toBeVisible(); await expect(page.getByText("Hello world")).toBeHidden(); const payload: BlockUpdatesPayload = { exitedBlockIds: [], diff --git a/workspaces/react/src/hooks/use-websocket.ts b/workspaces/react/src/hooks/use-websocket.ts index 8a54587..4682ffe 100644 --- a/workspaces/react/src/hooks/use-websocket.ts +++ b/workspaces/react/src/hooks/use-websocket.ts @@ -16,6 +16,14 @@ export const useWebsocket = ({ url, onMessage, onOpen }: Props): void => { onOpenRef.current = onOpen; }, [onOpen]); + const onMessageRef = useRef(onMessage); + useEffect(() => { + onMessageRef.current = onMessage; + }, [onMessage]); + const handleMessage = useCallback((event: MessageEvent) => { + onMessageRef.current(event); + }, []); + const connect = useCallback(() => { if (cleanupRef.current) { cleanupRef.current(); @@ -35,10 +43,12 @@ export const useWebsocket = ({ url, onMessage, onOpen }: Props): void => { }; socket.addEventListener("open", handleOpen); socket.addEventListener("close", handleClose); + socket.addEventListener("message", handleMessage); const cleanup = (): void => { socket.removeEventListener("open", handleOpen); socket.removeEventListener("close", handleClose); + socket.removeEventListener("message", handleMessage); if (socket.readyState === WebSocket.CONNECTING) { socket.addEventListener("open", () => { @@ -51,7 +61,7 @@ export const useWebsocket = ({ url, onMessage, onOpen }: Props): void => { cleanupRef.current = cleanup; return cleanup; - }, [url]); + }, [handleMessage, url]); useEffect(() => { const cleanup = connect(); @@ -75,15 +85,6 @@ export const useWebsocket = ({ url, onMessage, onOpen }: Props): void => { }; }, [reconnectAttempts, ws, connect]); - useEffect(() => { - if (!ws) return; - - ws.addEventListener("message", onMessage); - return () => { - ws.removeEventListener("message", onMessage); - }; - }, [onMessage, ws]); - useEffect(() => { return () => { if (cleanupRef.current) {