Skip to content

fix: sync devtool with socket client #25

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
mimshins merged 5 commits into from
Aug 9, 2025
Merged

fix: sync devtool with socket client #25

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
38075a6
fix(core): sync devtool with socket instance
amir78729 Jul 28, 2025
23d85ae
resolve conflicts
amir78729 Jul 28, 2025
e67025c
fix: revert package json
amir78729 Jul 28, 2025
a04b515
fix: revert tsconfig json
amir78729 Jul 28, 2025
7e2e7cf
docs: update changelog
amir78729 Jul 28, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 7 additions & 0 deletions .changeset/soft-cars-return.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
---
"@tapsioss/react-client-socket-manager": patch
"@tapsioss/client-socket-manager": patch
---

Sync devtool with socket instance.

10 changes: 2 additions & 8 deletions packages/core/src/ClientSocketManager.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -306,7 +306,7 @@ describe("ClientSocketManager: unit tests", () => {
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();
Expand All @@ -332,9 +332,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,
Expand All @@ -350,11 +349,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();
Expand Down
150 changes: 64 additions & 86 deletions packages/core/src/ClientSocketManager.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -52,8 +52,8 @@ class ClientSocketManager<

this._inputListeners.onInit?.call(this);

devtool.setZIndex(devtoolZIndex);
if (devtoolEnabled) {
devtool.setZIndex(devtoolZIndex);
this.showDevtool();
}
} catch (err) {
Expand All @@ -78,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;
});
});

Expand All @@ -95,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) {
Expand All @@ -125,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,
});
});
});

Expand All @@ -142,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)`,
});
});
});
}
Expand Down Expand Up @@ -354,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`,
});
});
}

Expand All @@ -387,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`,
});
});
}

Expand All @@ -407,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`,
});
});
}

Expand All @@ -430,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`,
});
});
}

Expand Down Expand Up @@ -468,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();
}
}

Expand Down
56 changes: 20 additions & 36 deletions packages/core/src/devtool/devtool.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,14 +11,7 @@ import * as devtool from "./devtool.ts";
describe("Devtool", () => {
beforeEach(() => {
devtool.setZIndex(99999);
devtool.render({
force: true,
action: s => {
s.channels.clear();
s.status = devtool.Status.UNKNOWN;
s.logs.clear();
},
});
devtool.show();
});

afterEach(() => {
Expand All @@ -36,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);
Expand All @@ -65,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();
Expand All @@ -97,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(),
});
});
}

Expand All @@ -118,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(
Expand Down
Loading