From 38075a652a4541e11f617747bc600492413e00fd Mon Sep 17 00:00:00 2001 From: Amirhossein Alibakhshi Date: Mon, 28 Jul 2025 16:40:25 +0330 Subject: [PATCH 1/4] fix(core): sync devtool with socket instance --- packages/core/package.json | 16 +- packages/core/src/ClientSocketManager.test.ts | 16 +- packages/core/src/ClientSocketManager.ts | 156 ++++++++---------- packages/core/src/devtool/devtool.test.ts | 57 +++---- packages/core/src/devtool/devtool.ts | 106 ++++++------ packages/core/src/devtool/utils.ts | 24 ++- packages/core/src/types.ts | 31 ++-- packages/core/tsconfig.esm.json | 2 +- playground/client/index.ts | 5 +- 9 files changed, 207 insertions(+), 206 deletions(-) diff --git a/packages/core/package.json b/packages/core/package.json index a8dd922..766a954 100644 --- a/packages/core/package.json +++ b/packages/core/package.json @@ -1,11 +1,10 @@ { "name": "@tapsioss/client-socket-manager", - "version": "0.5.0", - "type": "module", + "version": "0.5.1", "packageManager": "pnpm@9.15.0", - "main": "./dist/cjs/index.js", - "module": "./dist/esm/index.js", - "types": "./dist/cjs/index.d.ts", + "main": "./dist/index.js", + "module": "./dist/index.js", + "types": "./dist/index.d.ts", "files": [ "./dist", "./README.md", @@ -13,9 +12,8 @@ ], "exports": { ".": { - "require": "./dist/cjs/index.js", - "import": "./dist/esm/index.js", - "types": "./dist/cjs/index.d.ts" + "default": "./dist/index.js", + "types": "./dist/index.d.ts" } }, "keywords": [ @@ -36,7 +34,7 @@ "build:cjs": "tsc --project ./tsconfig.cjs.json", "build:esm": "tsc --project ./tsconfig.esm.json", "prebuild": "pnpm run clear", - "build": "run-p build:*", + "build": "pnpm build:esm", "release": "pnpm publish . --tag latest --access public --no-git-checks" }, "devDependencies": { diff --git a/packages/core/src/ClientSocketManager.test.ts b/packages/core/src/ClientSocketManager.test.ts index ed4582b..f0c2131 100644 --- a/packages/core/src/ClientSocketManager.test.ts +++ b/packages/core/src/ClientSocketManager.test.ts @@ -299,19 +299,21 @@ describe("ClientSocketManager: unit tests", () => { socketManager.dispose(); socketManager = new ClientSocketManager(socketServerUri, { - devtool: true, + devtool: { + enabled: true, + }, }); expect(devtool.getDevtoolElement()).not.toBeNull(); }); - it("should update devtool ui when socket was updated", async () => { + it("should be synchronized with the devtool", async () => { const connectResolver = createPromiseResolvers(); const initResolver = createPromiseResolvers(); const initMessageResolver = createPromiseResolvers(); const diposeResolver = createPromiseResolvers(); socketManager = new ClientSocketManager(socketServerUri, { - devtool: true, + devtool: { enabled: true }, eventHandlers: { onSocketConnection() { connectResolver.resolve(); @@ -328,9 +330,8 @@ describe("ClientSocketManager: unit tests", () => { }, }); - // at first the devtool should be in the dom but because no we have no logs or channels, these sections shouldn't exist. + // at first the devtool should be in the dom but because we have no logs or channels, these sections shouldn't exist. expect(devtool.getDevtoolElement()).not.toBeNull(); - expect(devtool.getDevtoolChannelsElement()).toBeNull(); expect(devtool.getDevtoolInfoElement()).not.toBeNull(); expect(devtool.getDevtoolStatusElement()?.innerHTML).not.toEqual( devtool.Status.CONNECTED, @@ -346,11 +347,6 @@ describe("ClientSocketManager: unit tests", () => { await initResolver.promise; // subscribing to a channel... - expect(devtool.getDevtoolLogSectionElement()!.innerHTML).not.toContain( - devtool.LogType.SUBSCRIBED, - ); - expect(devtool.getDevtoolChannelsElement()).toBeNull(); - socketManager.subscribe("test/init", () => {}); expect(devtool.getDevtoolChannelsElement()).not.toBeNull(); diff --git a/packages/core/src/ClientSocketManager.ts b/packages/core/src/ClientSocketManager.ts index 1df2b45..0beef5c 100644 --- a/packages/core/src/ClientSocketManager.ts +++ b/packages/core/src/ClientSocketManager.ts @@ -28,10 +28,13 @@ class ClientSocketManager< reconnectionDelay = 500, reconnectionDelayMax = 2000, eventHandlers, - devtool: devtoolOpt = false, + devtool: devtoolOpt, ...restOptions } = options ?? {}; + const { enabled: devtoolEnabled = false, zIndex: devtoolZIndex = 999999 } = + devtoolOpt ?? {}; + try { this._socket = io(uri, { ...restOptions, @@ -49,7 +52,8 @@ class ClientSocketManager< this._inputListeners.onInit?.call(this); - if (devtoolOpt) { + devtool.setZIndex(devtoolZIndex); + if (devtoolEnabled) { this.showDevtool(); } } catch (err) { @@ -74,10 +78,8 @@ class ClientSocketManager< this._socket.on(SocketReservedEvents.CONNECTION, () => { this._inputListeners.onSocketConnection?.call(this); - devtool.render({ - action: s => { - s.status = devtool.Status.CONNECTED; - }, + devtool.update(s => { + s.status = devtool.Status.CONNECTED; }); }); @@ -91,10 +93,8 @@ class ClientSocketManager< this._socket.on(SocketReservedEvents.DISCONNECTION, (reason, details) => { this._inputListeners.onSocketDisconnection?.call(this, reason, details); - devtool.render({ - action: s => { - s.status = devtool.Status.DISCONNECTED; - }, + devtool.update(s => { + s.status = devtool.Status.DISCONNECTED; }); if (!this.autoReconnectable) { @@ -121,14 +121,12 @@ class ClientSocketManager< manager.on(ManagerReservedEvents.CONNECTION_ERROR, error => { onConnectionError?.call(this, error); - devtool.render({ - action: s => { - s.logs.enqueue({ - type: devtool.LogType.CONNECTION_ERROR, - date: new Date(), - detail: error.message, - }); - }, + devtool.update(s => { + s.logs.enqueue({ + type: devtool.LogType.CONNECTION_ERROR, + date: new Date(), + detail: error.message, + }); }); }); @@ -138,54 +136,46 @@ class ClientSocketManager< manager.on(ManagerReservedEvents.RECONNECTING, attempt => { onReconnecting?.call(this, attempt); - devtool.render({ - action: s => { - s.status = devtool.Status.RECONNECTING; - s.logs.enqueue({ - type: devtool.LogType.RECONNECTING, - date: new Date(), - detail: `Reconnecting... (${attempt} attempt(s))`, - }); - }, + devtool.update(s => { + s.status = devtool.Status.RECONNECTING; + s.logs.enqueue({ + type: devtool.LogType.RECONNECTING, + date: new Date(), + detail: `Reconnecting... (${attempt} attempt(s))`, + }); }); }); manager.on(ManagerReservedEvents.RECONNECTING_ERROR, error => { onReconnectingError?.call(this, error); - devtool.render({ - action: s => { - s.logs.enqueue({ - type: devtool.LogType.RECONNECTING_ERROR, - date: new Date(), - detail: error.message, - }); - }, + devtool.update(s => { + s.logs.enqueue({ + type: devtool.LogType.RECONNECTING_ERROR, + date: new Date(), + detail: error.message, + }); }); }); manager.on(ManagerReservedEvents.RECONNECTION_FAILURE, () => { onReconnectionFailure?.call(this); - devtool.render({ - action: s => { - s.logs.enqueue({ - type: devtool.LogType.RECONNECTION_FAILURE, - date: new Date(), - detail: `Failed to reconnect.`, - }); - }, + devtool.update(s => { + s.logs.enqueue({ + type: devtool.LogType.RECONNECTION_FAILURE, + date: new Date(), + detail: `Failed to reconnect.`, + }); }); }); manager.on(ManagerReservedEvents.SUCCESSFUL_RECONNECTION, attempt => { onSuccessfulReconnection?.call(this, attempt); - devtool.render({ - action: s => { - s.logs.enqueue({ - type: devtool.LogType.SUCCESSFUL_RECONNECTION, - date: new Date(), - detail: `Successfully connected after ${attempt} attempt(s)`, - }); - }, + devtool.update(s => { + s.logs.enqueue({ + type: devtool.LogType.SUCCESSFUL_RECONNECTION, + date: new Date(), + detail: `Successfully connected after ${attempt} attempt(s)`, + }); }); }); } @@ -350,15 +340,13 @@ class ClientSocketManager< onSubscriptionComplete?.call(this, channel); - devtool.render({ - action: s => { - s.channels.add(channel); - s.logs.enqueue({ - type: devtool.LogType.SUBSCRIBED, - date: new Date(), - detail: `subscribed to \`${channel}\` channel`, - }); - }, + devtool.update(s => { + s.channels.add(channel); + s.logs.enqueue({ + type: devtool.LogType.SUBSCRIBED, + date: new Date(), + detail: `subscribed to \`${channel}\` channel`, + }); }); } @@ -383,15 +371,13 @@ class ClientSocketManager< if (cb) this._socket.off(channel, cb); else this._socket.off(channel); - devtool.render({ - action: s => { - s.channels.delete(channel); - s.logs.enqueue({ - type: devtool.LogType.UNSUBSCRIBED, - date: new Date(), - detail: `unsubscribed from \`${channel}\` channel`, - }); - }, + devtool.update(s => { + s.channels.delete(channel); + s.logs.enqueue({ + type: devtool.LogType.UNSUBSCRIBED, + date: new Date(), + detail: `unsubscribed from \`${channel}\` channel`, + }); }); } @@ -403,14 +389,12 @@ class ClientSocketManager< this._socket?.connect(); - devtool.render({ - action: s => { - s.logs.enqueue({ - type: devtool.LogType.CONNECTED, - date: new Date(), - detail: `socket was conneced manually`, - }); - }, + devtool.update(s => { + s.logs.enqueue({ + type: devtool.LogType.CONNECTED, + date: new Date(), + detail: `socket was conneced manually`, + }); }); } @@ -426,14 +410,12 @@ class ClientSocketManager< this._socket?.disconnect(); - devtool.render({ - action: s => { - s.logs.enqueue({ - type: devtool.LogType.DISCONNECTED, - date: new Date(), - detail: `socket was disconneced manually`, - }); - }, + devtool.update(s => { + s.logs.enqueue({ + type: devtool.LogType.DISCONNECTED, + date: new Date(), + detail: `socket was disconneced manually`, + }); }); } @@ -464,14 +446,14 @@ class ClientSocketManager< * Show devtool in the browser programmatically. */ public showDevtool(): void { - devtool.render({ force: true }); + devtool.show(); } /** * Hide devtool in the browser programmatically. */ public hideDevtool(): void { - devtool.dispose(); + devtool.hide(); } } diff --git a/packages/core/src/devtool/devtool.test.ts b/packages/core/src/devtool/devtool.test.ts index c9c159b..003ee7f 100644 --- a/packages/core/src/devtool/devtool.test.ts +++ b/packages/core/src/devtool/devtool.test.ts @@ -10,14 +10,8 @@ import * as devtool from "./devtool.ts"; describe("Devtool", () => { beforeEach(() => { - devtool.render({ - force: true, - action: s => { - s.channels.clear(); - s.status = devtool.Status.UNKNOWN; - s.logs.clear(); - }, - }); + devtool.setZIndex(99999); + devtool.show(); }); afterEach(() => { @@ -35,22 +29,19 @@ describe("Devtool", () => { it("should not double-init", () => { const originalWrapper = devtool.getDevtoolWrapperElement(); - devtool.render(); // re-init should do nothing expect(document.querySelectorAll(`#${DEVTOOL_WRAPPER_ID}`)).toHaveLength(1); expect(devtool.getDevtoolWrapperElement()).toBe(originalWrapper); }); it("should dispose properly", () => { - devtool.dispose(); + devtool.hide(); expect(devtool.getDevtoolWrapperElement()).toBeNull(); }); it("should be able to update status of the socket using render", () => { Object.values(Status).forEach(status => { - devtool.render({ - action: state => { - state.status = status; - }, + devtool.update(state => { + state.status = status; }); expect(devtool.getDevtoolInfoElement()!.innerHTML).toContain(status); @@ -64,12 +55,10 @@ describe("Devtool", () => { date: new Date(), }; - devtool.render({ - action: state => { - state.logs.enqueue(mockLog); - state.channels.add("my-channel"); - state.status = Status.DISCONNECTED; - }, + devtool.update(state => { + state.logs.enqueue(mockLog); + state.channels.add("my-channel"); + state.status = Status.DISCONNECTED; }); const info = devtool.getDevtoolInfoElement(); @@ -96,14 +85,12 @@ describe("Devtool", () => { // Fill the logs for (let i = 0; i < LOG_CAPACITY; i++) { - devtool.render({ - action: state => { - state.logs.enqueue({ - type: LogType.CONNECTION_ERROR, - detail: `log-${i}`, - date: new Date(), - }); - }, + devtool.update(state => { + state.logs.enqueue({ + type: LogType.CONNECTION_ERROR, + detail: `log-${i}`, + date: new Date(), + }); }); } @@ -117,14 +104,12 @@ describe("Devtool", () => { expect(devtool.getDevtoolLogSectionElement()!.innerHTML).toContain(`log-0`); // after adding new log, the first element will not be available and the new log will append to the queue. - devtool.render({ - action: state => { - state.logs.enqueue({ - type: LogType.CONNECTION_ERROR, - detail: `log-${LOG_CAPACITY}`, - date: new Date(), - }); - }, + devtool.update(state => { + state.logs.enqueue({ + type: LogType.CONNECTION_ERROR, + detail: `log-${LOG_CAPACITY}`, + date: new Date(), + }); }); expect(devtool.getDevtoolLogSectionElement()!.innerHTML).not.toContain( diff --git a/packages/core/src/devtool/devtool.ts b/packages/core/src/devtool/devtool.ts index 154648f..b62b094 100644 --- a/packages/core/src/devtool/devtool.ts +++ b/packages/core/src/devtool/devtool.ts @@ -19,6 +19,7 @@ import { import { FixedQueue } from "./FixedQueue.ts"; import { type DevtoolState, type Log } from "./types.ts"; import { + formatDate, generateAttributes, generateInlineStyle, makeElementDraggable, @@ -54,6 +55,7 @@ const devtool: DevtoolState = { let active = false; let expanded = false; +let zIndex: number = NaN; export const renderDivider = () => { return `
`; @@ -150,7 +152,7 @@ export const renderLog = (log: Log) => { return `
-

${log.date.toISOString()}

+

${formatDate(log.date)}

${log.type}

${log.detail}

@@ -273,48 +275,26 @@ export const updateInfoSection = () => { return infoSection; }; -const init = () => { - if (active) return; - - active = true; - - const devtoolWrapper = document.createElement("div"); - - devtoolWrapper.style.position = "fixed"; - devtoolWrapper.style.top = "8px"; - devtoolWrapper.style.left = "8px"; - devtoolWrapper.id = DEVTOOL_WRAPPER_ID; - devtoolWrapper.innerHTML = renderDevtool(); - - document.body.appendChild(devtoolWrapper); - makeElementDraggable(devtoolWrapper); - - getDevtoolIconElement()?.addEventListener("click", toggle); - - [DEVTOOL_CLOSE_ICON_ID, DEVTOOL_SOCKET_ICON_ID].forEach(icon => { - const buttonIcon = document.getElementById(icon); - - if (buttonIcon) { - buttonIcon.style.position = "absolute"; - buttonIcon.style.top = "50%"; - buttonIcon.style.left = "50%"; - buttonIcon.style.transform = "translate(-50%, -50%)"; - buttonIcon.style.transition = "opacity 0.2s"; - - if (icon === DEVTOOL_CLOSE_ICON_ID) { - buttonIcon.style.opacity = "0"; - } - } - }); +export const setZIndex = (z: number) => { + zIndex = z; }; -export const dispose = () => { +export const hide = () => { getDevtoolWrapperElement()?.remove(); active = false; expanded = false; }; +export const dispose = () => { + update(s => { + s.channels.clear(); + s.logs.clear(); + s.status = Status.UNKNOWN; + }); + hide(); +}; + const toggle = () => { const socketIcon = getDevtoolSocketIconElement()!; const closeIcon = getDevtoolCloseIconElement()!; @@ -331,25 +311,59 @@ const toggle = () => { ); }; -type RenderOptions = { - action?: (s: typeof devtool) => void; - force?: boolean; +export const update = (cb: (s: typeof devtool) => void) => { + cb?.(devtool); + + if (active) { + updateInfoSection(); + } }; -export const render = (options?: RenderOptions) => { - const { action, force = false } = options ?? {}; +export const show = () => { + if (active) return; - if (force) { - init(); + active = true; + + const devtoolWrapper = document.createElement("div"); + + if (Number.isNaN(zIndex)) { + throw new Error("No z-index was set for the devtool."); } else { - if (!active) return; + devtoolWrapper.style.zIndex = `${zIndex}`; + } + + devtoolWrapper.style.position = "fixed"; + devtoolWrapper.style.top = "8px"; + devtoolWrapper.style.left = "8px"; + + devtoolWrapper.id = DEVTOOL_WRAPPER_ID; + devtoolWrapper.innerHTML = renderDevtool(); + + document.body.appendChild(devtoolWrapper); - const devtoolElement = getDevtoolElement(); + const iconButton = getDevtoolIconElement(); - if (!devtoolElement) init(); + if (iconButton) { + iconButton.addEventListener("click", toggle); + makeElementDraggable(iconButton, devtoolWrapper); } - action?.(devtool); + [DEVTOOL_CLOSE_ICON_ID, DEVTOOL_SOCKET_ICON_ID].forEach(icon => { + const buttonIcon = document.getElementById(icon); + + if (buttonIcon) { + buttonIcon.style.position = "absolute"; + buttonIcon.style.top = "50%"; + buttonIcon.style.left = "50%"; + buttonIcon.style.transform = "translate(-50%, -50%)"; + buttonIcon.style.transition = "opacity 0.2s"; + + if (icon === DEVTOOL_CLOSE_ICON_ID) { + buttonIcon.style.opacity = "0"; + } + } + }); + updateInfoSection(); }; diff --git a/packages/core/src/devtool/utils.ts b/packages/core/src/devtool/utils.ts index fbb494d..4f88c3d 100644 --- a/packages/core/src/devtool/utils.ts +++ b/packages/core/src/devtool/utils.ts @@ -51,9 +51,13 @@ export const generateAttributes = ( * - The element must be absolutely or fixed-positioned, and should not be constrained by layout flow * - Internally sets `element.style.touchAction = 'none'` to disable browser-native touch gestures * - * @param element - The HTMLElement to make draggable + * @param dragHandle - The drag handle. + * @param dragTarget - The HTMLElement that will move when dragging with the handler. */ -export const makeElementDraggable = (element: HTMLElement) => { +export const makeElementDraggable = ( + dragHandle: HTMLElement, + dragTarget: HTMLElement, +) => { // Extract clientX from MouseEvent or TouchEvent const getClientX = (event: MouseEvent | TouchEvent) => { if (event instanceof MouseEvent) return event.clientX; @@ -112,7 +116,7 @@ export const makeElementDraggable = (element: HTMLElement) => { x = initialX + deltaX; y = initialY + deltaY; - element.style.transform = `translate(${x}px, ${y}px)`; + dragTarget.style.transform = `translate(${x}px, ${y}px)`; } }; @@ -125,10 +129,10 @@ export const makeElementDraggable = (element: HTMLElement) => { }; // Disable browser-native touch gestures (scroll, nav swipe) - element.style.touchAction = "none"; + dragHandle.style.touchAction = "none"; - element.addEventListener("touchstart", handleDragStart, false); - element.addEventListener("mousedown", handleDragStart, false); + dragHandle.addEventListener("touchstart", handleDragStart, false); + dragHandle.addEventListener("mousedown", handleDragStart, false); document.addEventListener("mousemove", handleDragging, false); document.addEventListener("touchmove", handleDragging, false); @@ -136,3 +140,11 @@ export const makeElementDraggable = (element: HTMLElement) => { document.addEventListener("mouseup", handleDragEnd, false); document.addEventListener("touchend", handleDragEnd, false); }; + +export const formatDate = (date: Date) => { + const hours = String(date.getHours()).padStart(2, "0"); + const minutes = String(date.getMinutes()).padStart(2, "0"); + const seconds = String(date.getSeconds()).padStart(2, "0"); + + return `${hours}:${minutes}:${seconds}`; +}; diff --git a/packages/core/src/types.ts b/packages/core/src/types.ts index ec3ab5b..d4a2174 100644 --- a/packages/core/src/types.ts +++ b/packages/core/src/types.ts @@ -136,17 +136,28 @@ export type ClientSocketManagerOptions = OverrideMembers< */ eventHandlers?: ClientSocketManagerListenerOptions; /** - * Enables the in-browser DevTool panel for socket debugging. - * - * When set to `true`, a floating DevTool UI will appear in the browser that displays: - * - The current socket connection status (`connected`, `disconnected`, `reconnecting`) - * - A list of currently subscribed channels - * - A log panel showing socket events and debugging messages + * Client Socket Devtool options. * * This is useful for development and debugging purposes. - * In production environments, it's recommended to leave this disabled. - * - * @default false + * In production environments, it's recommended to leave this section empty. */ - devtool?: boolean; + devtool?: { + /** + * Enables the in-browser DevTool panel for socket debugging. + * + * When set to `true`, a floating DevTool UI will appear in the browser that displays: + * - The current socket connection status (`connected`, `disconnected`, `reconnecting`) + * - A list of currently subscribed channels + * - A log panel showing socket events and debugging messages. + * + * @default false + */ + enabled: boolean; + /** + * The `z-index` of the devtool. + * + * @default 9999 + */ + zIndex?: number; + }; }; diff --git a/packages/core/tsconfig.esm.json b/packages/core/tsconfig.esm.json index 620f367..c3597d0 100644 --- a/packages/core/tsconfig.esm.json +++ b/packages/core/tsconfig.esm.json @@ -2,6 +2,6 @@ "extends": "./tsconfig.build.json", "compilerOptions": { "module": "ES2020", - "outDir": "./dist/esm" + "outDir": "./dist" } } diff --git a/playground/client/index.ts b/playground/client/index.ts index 156bdc9..543c727 100644 --- a/playground/client/index.ts +++ b/playground/client/index.ts @@ -4,7 +4,10 @@ import { ClientSocketManager } from "@tapsioss/client-socket-manager"; const socketManager = new ClientSocketManager("http://localhost:3000", { - devtool: true, + devtool: { + enabled: false, + zIndex: 2000, + }, eventHandlers: { onReconnectingError(err) { console.log("reconnecting error", err); From e67025c3297b91beb68f435cb391084344d9a1da Mon Sep 17 00:00:00 2001 From: Amirhossein Alibakhshi Date: Mon, 28 Jul 2025 16:49:28 +0330 Subject: [PATCH 2/4] fix: revert package json --- packages/core/package.json | 13 +++++++------ packages/core/src/ClientSocketManager.ts | 2 +- packages/core/src/devtool/devtool.ts | 3 --- 3 files changed, 8 insertions(+), 10 deletions(-) diff --git a/packages/core/package.json b/packages/core/package.json index a4e25d4..adfa17a 100644 --- a/packages/core/package.json +++ b/packages/core/package.json @@ -3,9 +3,9 @@ "version": "0.6.0", "type": "module", "packageManager": "pnpm@9.15.0", - "main": "./dist/index.js", - "module": "./dist/index.js", - "types": "./dist/index.d.ts", + "main": "./dist/cjs/index.js", + "module": "./dist/esm/index.js", + "types": "./dist/cjs/index.d.ts", "files": [ "./dist", "./README.md", @@ -13,8 +13,9 @@ ], "exports": { ".": { - "default": "./dist/index.js", - "types": "./dist/index.d.ts" + "require": "./dist/cjs/index.js", + "import": "./dist/esm/index.js", + "types": "./dist/cjs/index.d.ts" } }, "keywords": [ @@ -35,7 +36,7 @@ "build:cjs": "tsc --project ./tsconfig.cjs.json", "build:esm": "tsc --project ./tsconfig.esm.json", "prebuild": "pnpm run clear", - "build": "pnpm build:esm", + "build": "run-p build:*", "release": "pnpm publish . --tag latest --access public --no-git-checks" }, "devDependencies": { diff --git a/packages/core/src/ClientSocketManager.ts b/packages/core/src/ClientSocketManager.ts index e5bfa75..0beef5c 100644 --- a/packages/core/src/ClientSocketManager.ts +++ b/packages/core/src/ClientSocketManager.ts @@ -28,7 +28,7 @@ class ClientSocketManager< reconnectionDelay = 500, reconnectionDelayMax = 2000, eventHandlers, - devtool: devtoolOpt = false, + devtool: devtoolOpt, ...restOptions } = options ?? {}; diff --git a/packages/core/src/devtool/devtool.ts b/packages/core/src/devtool/devtool.ts index d254286..a320b68 100644 --- a/packages/core/src/devtool/devtool.ts +++ b/packages/core/src/devtool/devtool.ts @@ -56,7 +56,6 @@ const devtool: DevtoolState = { let active = false; let expanded = false; let zIndex: number = NaN; -let zIndex: number = NaN; export const renderDivider = () => { return `
`; @@ -352,8 +351,6 @@ export const show = () => { const iconButton = getDevtoolIconElement(); - const iconButton = getDevtoolIconElement(); - if (iconButton) { iconButton.addEventListener("click", toggle); makeElementDraggable(iconButton, devtoolWrapper); From a04b515b526c5c1b6635fe98a56b523882a0a08b Mon Sep 17 00:00:00 2001 From: Amirhossein Alibakhshi Date: Mon, 28 Jul 2025 16:50:08 +0330 Subject: [PATCH 3/4] fix: revert tsconfig json --- packages/core/tsconfig.esm.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/core/tsconfig.esm.json b/packages/core/tsconfig.esm.json index c3597d0..620f367 100644 --- a/packages/core/tsconfig.esm.json +++ b/packages/core/tsconfig.esm.json @@ -2,6 +2,6 @@ "extends": "./tsconfig.build.json", "compilerOptions": { "module": "ES2020", - "outDir": "./dist" + "outDir": "./dist/esm" } } From 7e2e7cfb7546f5f8a7e4b4f5007802c283da6d41 Mon Sep 17 00:00:00 2001 From: Amirhossein Alibakhshi Date: Mon, 28 Jul 2025 16:51:29 +0330 Subject: [PATCH 4/4] docs: update changelog --- .changeset/soft-cars-return.md | 7 +++++++ 1 file changed, 7 insertions(+) create mode 100644 .changeset/soft-cars-return.md diff --git a/.changeset/soft-cars-return.md b/.changeset/soft-cars-return.md new file mode 100644 index 0000000..a9365e0 --- /dev/null +++ b/.changeset/soft-cars-return.md @@ -0,0 +1,7 @@ +--- +"@tapsioss/react-client-socket-manager": patch +"@tapsioss/client-socket-manager": patch +--- + +Sync devtool with socket instance. + \ No newline at end of file