- Devtools <-> Client communication improvements + metaData passing

GerasNyx · GerasNyx · commit f6dece8b91b3 · 2025-03-31T18:55:31.000+02:00
diff --git a/packages/devtools-plugin/src/devtools.event.handler.ts b/packages/devtools-plugin/src/devtools.event.handler.ts
@@ -1,7 +1,7 @@
 import { CacheValueType, ClientInstance } from "@hyper-fetch/core";
 import { Emitter, Listener, Socket } from "@hyper-fetch/sockets";
 
-import { EmitableCoreEvents, EmitableCustomEvents, DevtoolsPluginOptions } from "devtools.types";
+import { EmitableCoreEvents, EmitableCustomEvents, DevtoolsPluginOptions, MessageTypes } from "devtools.types";
 
 export class DevtoolsEventHandler {
   client: ClientInstance;
@@ -10,6 +10,7 @@ export class DevtoolsEventHandler {
   socketListener: Listener<any, any, any>;
   unmountHooks: any; // TODO FIX ANY
   isConnected: boolean;
+  isInitialized: boolean;
   eventQueue: any[] = [];
   connectionName: string;
 
@@ -18,6 +19,7 @@ export class DevtoolsEventHandler {
     { socketAddress = "ws://localhost", socketPort = 1234, appName, debug = false }: DevtoolsPluginOptions,
   ) {
     this.isConnected = false;
+    this.isInitialized = false;
     this.eventQueue = [];
     this.client = client;
     this.unmountHooks = this.initializeHooks();
@@ -51,23 +53,40 @@ export class DevtoolsEventHandler {
         console.log("[HyperFetch Devtools] connected");
       }
       this.isConnected = true;
-      while (this.eventQueue.length > 0) {
-        const nextEvent = this.eventQueue.shift();
-        this.socketEmitter.emit({ payload: nextEvent });
-      }
+      this.socketEmitter.emit({
+        payload: {
+          messageType: MessageTypes.PLUGIN_INITIALIZED,
+          eventData: {
+            clientOptions: this.client.options,
+            adapterOptions: this.client.adapter.options,
+          },
+          connectionName: this.connectionName,
+        },
+      });
     });
     this.socketListener.listen((message) => {
-      const eventData = message.data.eventData as CacheValueType;
-      client.cache.update(
-        { cacheKey: eventData.cacheKey, cache: true, cacheTime: eventData.cacheTime, staleTime: eventData.staleTime },
-        eventData,
-        true,
-      );
+      switch (message.data.messageType) {
+        case MessageTypes.HF_DEVTOOLS_EVENT: {
+          this.handleDevtoolsMessage(message);
+          break;
+        }
+        case MessageTypes.CLIENT_INITIALIZED: {
+          this.isInitialized = true;
+          while (this.eventQueue.length > 0) {
+            const nextEvent = this.eventQueue.shift();
+            this.socketEmitter.emit({ payload: nextEvent });
+          }
+          break;
+        }
+        default: {
+          console.error("NO EVENT TYPE", message);
+        }
+      }
     });
   }
 
   sendEvent = (eventType: EmitableCoreEvents | EmitableCustomEvents, data: any) => {
-    if (this.isConnected) {
+    if (this.isConnected && this.isInitialized) {
       try {
         this.socketEmitter.emit({
           payload: {
@@ -90,6 +109,28 @@ export class DevtoolsEventHandler {
     }
   };
 
+  handleDevtoolsMessage = (message: any) => {
+    switch (message.data.eventType) {
+      case EmitableCoreEvents.ON_CACHE_CHANGE: {
+        const eventData = message.data.eventData as CacheValueType;
+        this.client.cache.update(
+          {
+            cacheKey: eventData.cacheKey,
+            cache: true,
+            cacheTime: eventData.cacheTime,
+            staleTime: eventData.staleTime,
+          },
+          eventData,
+          true,
+        );
+        break;
+      }
+      default: {
+        console.error("NO EVENT TYPE", message);
+      }
+    }
+  };
+
   initializeHooks = () => {
     return {
       unmountOnRequestStart: this.unmountOnRequestStart(),
@@ -159,7 +200,6 @@ export class DevtoolsEventHandler {
       this.sendEvent(EmitableCoreEvents.ON_CACHE_INVALIDATE, {});
     });
   };
-
   unmountCacheDelete = () => {
     return this.client.cache.events.onDelete(() => {
       this.sendEvent(EmitableCoreEvents.ON_CACHE_DELETE, {});
diff --git a/packages/devtools-plugin/src/devtools.plugin.ts b/packages/devtools-plugin/src/devtools.plugin.ts
@@ -7,18 +7,18 @@ export const devtoolsPlugin = (options: DevtoolsPluginOptions) => {
   const plugin = new Plugin({
     name: "devtools-plugin",
     data: {
-      emitter: undefined as DevtoolsEventHandler | undefined,
+      eventHandler: undefined as DevtoolsEventHandler | undefined,
       requests: [] as RequestInstance[],
     },
   });
 
   plugin.onMount(({ client }) => {
-    plugin.data.emitter = new DevtoolsEventHandler(client, options);
+    plugin.data.eventHandler = new DevtoolsEventHandler(client, options);
   });
 
   plugin.onRequestCreate(({ request }) => {
     plugin.data.requests.push(request);
-    plugin.data.emitter?.sendEvent(EmitableCustomEvents.REQUEST_CREATED, plugin.data.requests);
+    plugin.data.eventHandler?.sendEvent(EmitableCustomEvents.REQUEST_CREATED, plugin.data.requests);
   });
 
   return plugin;
diff --git a/packages/devtools-plugin/src/devtools.types.ts b/packages/devtools-plugin/src/devtools.types.ts
@@ -16,4 +16,10 @@ export enum EmitableCustomEvents {
   REQUEST_CREATED = "REQUEST_CREATED",
 }
 
+export enum MessageTypes {
+  HF_DEVTOOLS_EVENT = "HF_DEVTOOLS_EVENT",
+  PLUGIN_INITIALIZED = "PLUGIN_INITIALIZED",
+  CLIENT_INITIALIZED = "CLIENT_INITIALIZED",
+}
+
 export type DevtoolsPluginOptions = { appName: string; socketAddress?: string; socketPort?: number; debug?: boolean };
diff --git a/packages/devtools/__tests__/helpers/helpers.ts b/packages/devtools/__tests__/helpers/helpers.ts
@@ -1,6 +1,7 @@
 import { Client } from "@hyper-fetch/core";
 import { devtoolsPlugin } from "@hyper-fetch/devtools-plugin";
 import { Socket } from "@hyper-fetch/sockets";
+
 import { ConnectionName } from "frontend/constants/connection.name";
 
 export const connectDevtoolsClient = ({
@@ -43,22 +44,3 @@ export const connectDevtoolsFrontend = async ({
   await initSocket.connect();
   return initSocket;
 };
-
-export const listenForServerMessage = async (wss: any) => {
-  return new Promise((resolve) => {
-    wss.on("connection", (wsConn, request) => {
-      wsConn.on("message", (message) => {
-        return resolve(message);
-      });
-    });
-  });
-};
-
-export const listenForSocketMessage = async (socket: Socket) => {
-  return new Promise((resolve) => {
-    socket.onMessage((message) => {
-      console.log("SOCKET MESSAGE", message);
-      return resolve(message);
-    });
-  });
-};
diff --git a/packages/devtools/__tests__/server/server.spec.ts b/packages/devtools/__tests__/server/server.spec.ts
@@ -1,12 +1,21 @@
-import { MessageType } from "types/messages.types";
-import { startServer } from "../../src/server";
-import { connectDevtoolsFrontend, connectDevtoolsClient, listenForServerMessage } from "../helpers/helpers";
 import { waitFor } from "@testing-library/react";
-// TODO handle lost connection from client
+
+import { MessageType } from "types/messages.types";
+import { StartServer, startServer } from "../../src/server";
+import { connectDevtoolsFrontend, connectDevtoolsClient } from "../helpers/helpers";
+
 describe("Devtools Socket Server", () => {
+  let serverObject: StartServer | null = null;
+  beforeEach(async () => {
+    serverObject = await startServer();
+  });
+  afterEach(async () => {
+    await serverObject?.server?.close();
+    jest.clearAllMocks();
+  });
   describe("If connection to the frontend is established and client is connected", () => {
     it("Should created the appropriate connections", async () => {
-      const { connections, DEVTOOLS_FRONTEND_WS_CONNECTION } = (await startServer()) || {};
+      const { connections, DEVTOOLS_FRONTEND_WS_CONNECTION } = serverObject || {};
       await connectDevtoolsFrontend({
         socketAddress: "localhost",
         socketPort: 1234,
@@ -18,8 +27,8 @@ describe("Devtools Socket Server", () => {
   });
   describe("If connection to the frontend app is established and then disconnected and reconnected again", () => {
     it("Should allow for reconnection", async () => {
-      let receivedMessage = null;
-      const { DEVTOOLS_FRONTEND_WS_CONNECTION, connections } = (await startServer()) || {};
+      let receivedMessage: any = null;
+      const { DEVTOOLS_FRONTEND_WS_CONNECTION, connections } = serverObject || {};
 
       const socket = await connectDevtoolsFrontend({
         socketAddress: "localhost",
@@ -35,7 +44,7 @@ describe("Devtools Socket Server", () => {
       expect(DEVTOOLS_FRONTEND_WS_CONNECTION).toBeDefined();
       expect(connections?.["HF_DEVTOOLS_CLIENT_test-client"].ws).toBeDefined();
 
-      await plugin.data.emitter?.socket.disconnect();
+      await plugin.data.eventHandler?.socket.disconnect();
       await waitFor(() => expect(connections?.["HF_DEVTOOLS_CLIENT_test-client"].ws).toBeNull);
       await waitFor(() => expect(receivedMessage).toBeDefined);
       expect(receivedMessage).toEqual({
@@ -46,9 +55,29 @@ describe("Devtools Socket Server", () => {
       expect(DEVTOOLS_FRONTEND_WS_CONNECTION).toBeNull();
 
       await socket.connect();
-      await plugin.data.emitter?.socket.connect();
+      await plugin.data.eventHandler?.socket.connect();
       expect(DEVTOOLS_FRONTEND_WS_CONNECTION).toBeDefined();
       await waitFor(() => expect(connections?.["HF_DEVTOOLS_CLIENT_test-client"].ws).toBeDefined);
     });
   });
+  describe("If the frontend connection is established and initialized", () => {
+    it("Should send the appropriate metadata to the client", async () => {
+      const clientReceivedMessages: any = [];
+      const { connections } = serverObject || {};
+      const socket = await connectDevtoolsFrontend({
+        socketAddress: "localhost",
+        socketPort: 1234,
+      });
+      socket.onMessage((message) => {
+        clientReceivedMessages.push(message);
+        return message;
+      });
+      const { client } = connectDevtoolsClient();
+      await waitFor(() => expect(Object.keys(connections || {}).length).toBeGreaterThan(0));
+      await waitFor(() => expect(clientReceivedMessages.length).toBeGreaterThan(0));
+      const receivedMetaData = clientReceivedMessages[0].event.eventData;
+      expect(receivedMetaData.clientOptions).toEqual(client.options);
+      expect(receivedMetaData.adapterOptions).toEqual(client.adapter.options);
+    });
+  });
 });
diff --git a/packages/devtools/src/frontend/context/projects/bridge/bridge.tsx b/packages/devtools/src/frontend/context/projects/bridge/bridge.tsx
@@ -64,7 +64,7 @@ export const Bridge = memo(({ port, address = "localhost" }: { port: number; add
 
     // TODO - Kacper fix this type?
     devtoolsListener.listen((event: any) => {
-      const { connectionName, messageType } = event.data;
+      const { connectionName, messageType, eventData } = event.data;
 
       nameRef.current = connectionName;
 
@@ -78,7 +78,7 @@ export const Bridge = memo(({ port, address = "localhost" }: { port: number; add
                   ...prev,
                   [connectionName]: {
                     name: connectionName,
-                    // TODO - Kacper add the adapter name to event and pick adapter here
+                    metaData: eventData,
                     client: new Client({ url: "http://localhost.dummyhost:5000" }),
                     connected: true,
                     eventListener,
diff --git a/packages/devtools/src/frontend/context/projects/connection/connection.tsx b/packages/devtools/src/frontend/context/projects/connection/connection.tsx
@@ -8,6 +8,18 @@ import { createContext } from "frontend/utils/context";
 export type Connection = {
   name: string;
   client: ClientInstance;
+  metaData: {
+    clientOptions: { url?: string };
+    // TODO - not sure if any is the best approach
+    adapterOptions: {
+      name?: string;
+      defaultMethod?: any;
+      defaultExtra?: any;
+      systemErrorStatus?: any;
+      systemErrorExtra?: any;
+      defaultRequestOptions?: any;
+    };
+  };
   connected: boolean;
   eventListener: ExtendListener<ListenerInstance, { response: BaseMessage["data"] }>;
   eventEmitter: ExtendEmitter<EmitterInstance, { payload: BaseMessage["data"] }>;
diff --git a/packages/devtools/src/server/index.ts b/packages/devtools/src/server/index.ts
diff --git a/packages/devtools/src/types/messages.types.ts b/packages/devtools/src/types/messages.types.ts
