new devtools ui

Author: prc5

packages/devtools-plugin/src/devtools.event.handler.ts

@@ -15,7 +15,7 @@ export class DevtoolsEventHandler {
 
   constructor(
     client: ClientInstance,
-    { socketAddress = "ws://localhost", socketPort = 1234, appName }: DevtoolsPluginOptions,
+    { socketAddress = "ws://localhost", socketPort = 1234, appName, debug = false }: DevtoolsPluginOptions,
   ) {
     this.isConnected = false;
     this.eventQueue = [];
@@ -25,6 +25,8 @@ export class DevtoolsEventHandler {
     this.socket = new Socket({
       url: `${socketAddress}:${socketPort}`,
       adapterOptions: { autoConnect: false },
+      reconnect: 100,
+      reconnectTime: 3000,
     }).setQueryParams({
       connectionName: this.connectionName,
     });
@@ -33,12 +35,21 @@ export class DevtoolsEventHandler {
     this.socketListener = this.socket.createListener<any>()({ topic: "DEVTOOLS_PLUGIN_LISTENER" });
     this.socket.connect();
     this.socket.onDisconnected(() => {
-      // TODO handle reconnection?
+      if (debug) {
+        // eslint-disable-next-line no-console
+        console.log("[HyperFetch Devtools] disconnected");
+      }
     });
-    this.socket.onError(() => {
-      // TODO handle err?
+    this.socket.onError(({ error }) => {
+      if (debug) {
+        console.error("[HyperFetch Devtools] error:", error);
+      }
     });
     this.socket.onConnected(() => {
+      if (debug) {
+        // eslint-disable-next-line no-console
+        console.log("[HyperFetch Devtools] connected");
+      }
       this.isConnected = true;
       while (this.eventQueue.length > 0) {
         const nextEvent = this.eventQueue.shift();

packages/devtools-plugin/src/devtools.types.ts

@@ -16,4 +16,4 @@ export enum EmitableCustomEvents {
   REQUEST_CREATED = "REQUEST_CREATED",
 }
 
-export type DevtoolsPluginOptions = { appName: string; socketAddress?: string; socketPort?: number };
+export type DevtoolsPluginOptions = { appName: string; socketAddress?: string; socketPort?: number; debug?: boolean };

packages/devtools/package.json

@@ -73,8 +73,8 @@
     "@radix-ui/react-tooltip": "^1.1.8",
     "@reins/hooks": "^0.17.0",
     "@reins/router": "^0.17.0",
-    "@reins/types": "^0.17.0",
-    "@reins/utils": "^0.17.0",
+    "@reins/types": "^0.23.0",
+    "@reins/utils": "^0.19.0",
     "@tailwindcss/typography": "^0.5.16",
     "@tailwindcss/vite": "^4.0.9",
     "class-variance-authority": "^0.7.1",

packages/devtools/src/frontend/context/projects/bridge/bridge.tsx

@@ -78,6 +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
                     client: new Client({ url: "http://localhost.dummyhost:5000" }),
                     connected: true,
                     eventListener,

packages/devtools/src/main/index.ts

@@ -53,7 +53,10 @@ export const ServerSentEventsAdapter = (): ServerSentEventsAdapterType =>
       }) => {
         let sse: ReturnType<typeof getServerSentEventsAdapter> | undefined;
 
-        const autoConnect = adapter.adapterOptions?.autoConnect ?? true;
+        const autoConnect =
+          typeof socket.adapter.adapterOptions?.autoConnect === "boolean"
+            ? socket.adapter.adapterOptions?.autoConnect
+            : true;
 
         const connect = () => {
           const url = getSocketUrl(socket.url, getQueryParams());

packages/devtools/src/main/window-controls.ts

@@ -41,31 +41,31 @@ export const getServerSentEventsAdapter = (url: string, adapterOptions: SSEAdapt
       });
     };
 
-    addEventListener<K extends keyof EventSourceEventMap>(
+    addEventListener = <K extends keyof EventSourceEventMap>(
       type: K,
       listener: (this: EventSource, ev: EventSourceEventMap[K]) => any,
       options?: boolean | (AddEventListenerOptions & { disableCleanup?: boolean }),
-    ): void {
+    ): void => {
       super.addEventListener(type, listener, options);
       this.listeners.set(listener, { type, listener, options });
-    }
+    };
 
-    removeEventListener<K extends keyof EventSourceEventMap>(
+    removeEventListener = <K extends keyof EventSourceEventMap>(
       type: K,
       listener: (this: EventSource, ev: EventSourceEventMap[K]) => any,
       options?: boolean | EventListenerOptions,
-    ): void {
+    ): void => {
       super.removeEventListener(type, listener, options);
       this.listeners.delete(listener);
-    }
+    };
 
-    clearListeners() {
+    clearListeners = () => {
       this.listeners.forEach(({ type, listener, options }) => {
         if (!options?.disableCleanup) {
           this.removeEventListener(type, listener, options);
         }
       });
-    }
+    };
   }
 
   return new HyperFetchEventSource(url, adapterOptions?.eventSourceInit);

packages/sockets/src/adapter-sse/sse-adapter.ts

@@ -53,12 +53,16 @@ export const WebsocketAdapter = (): WebsocketAdapterType =>
         onError,
         onEvent,
       }) => {
-        const autoConnect = socket.adapter.adapterOptions?.autoConnect ?? true;
+        const autoConnect =
+          typeof socket.adapter.adapterOptions?.autoConnect === "boolean"
+            ? socket.adapter.adapterOptions?.autoConnect
+            : true;
 
         let websocket: ReturnType<typeof getWebsocketAdapter> | undefined;
 
         let pingTimer: ReturnType<typeof setTimeout> | undefined;
         let pongTimer: ReturnType<typeof setTimeout> | undefined;
+        let timeout: ReturnType<typeof setTimeout> | undefined;
 
         const connect = async (): Promise<boolean> => {
           const url = getSocketUrl(socket.url, getQueryParams());
@@ -67,6 +71,7 @@ export const WebsocketAdapter = (): WebsocketAdapterType =>
             return Promise.resolve(false);
           }
 
+          clearTimeout(timeout);
           websocket?.clearListeners();
           websocket?.close();
 
@@ -89,7 +94,7 @@ export const WebsocketAdapter = (): WebsocketAdapterType =>
           newWebsocket.clearListeners();
 
           // Reconnection timeout
-          const timeout = setTimeout(() => {
+          timeout = setTimeout(() => {
             reconnect();
           }, socket.reconnectTime);
 
@@ -104,11 +109,18 @@ export const WebsocketAdapter = (): WebsocketAdapterType =>
           });
 
           newWebsocket.addEventListener("close", (event) => {
-            const error = getSocketError(event);
-
-            onError({ error: new Error(error) });
+            clearTimeout(timeout);
             onDisconnected();
             clearTimers();
+            const error = getSocketError(event);
+            onError({ error: new Error(error) });
+
+            // If close was not by calling disconnect method, reconnect
+            if (event.code !== 1000) {
+              timeout = setTimeout(() => {
+                reconnect();
+              }, socket.reconnectTime);
+            }
           });
 
           newWebsocket.addEventListener("message", (newEvent: MessageEvent<SocketData>) => {
@@ -169,7 +181,7 @@ export const WebsocketAdapter = (): WebsocketAdapterType =>
           });
 
           onDisconnect();
-          currentWebsocket.close();
+          currentWebsocket.close(1000);
           clearTimers();
 
           return promise;
@@ -224,10 +236,10 @@ export const WebsocketAdapter = (): WebsocketAdapterType =>
         };
 
         // Initialize
-
         if (autoConnect) {
           connect();
         }
+
         socket.appManager.events.onOnline(() => {
           if (autoConnect && !socket.adapter.connected) {
             connect();

packages/sockets/src/adapter-sse/sse-adapter.utils.ts

@@ -17,31 +17,31 @@ export const getWebsocketAdapter = (url: string, adapterOptions: WebsocketAdapte
       super(socketUrl, protocols);
     }
 
-    addEventListener<K extends keyof WebSocketEventMap>(
+    addEventListener = <K extends keyof WebSocketEventMap>(
       type: K,
       listener: (this: WebSocket, ev: WebSocketEventMap[K]) => any,
       options?: boolean | (AddEventListenerOptions & { disableCleanup?: boolean }),
-    ): void {
+    ) => {
       super.addEventListener(type, listener, options);
       this.listeners.set(listener, { type, listener, options });
-    }
+    };
 
-    removeEventListener<K extends keyof WebSocketEventMap>(
+    removeEventListener = <K extends keyof WebSocketEventMap>(
       type: K,
       listener: (this: WebSocket, ev: WebSocketEventMap[K]) => any,
       options?: boolean | EventListenerOptions,
-    ): void {
+    ) => {
       super.removeEventListener(type, listener, options);
       this.listeners.delete(listener);
-    }
+    };
 
-    clearListeners() {
+    clearListeners = () => {
       this.listeners.forEach(({ type, listener, options }) => {
         if (!options?.disableCleanup) {
           this.removeEventListener(type, listener, options);
         }
       });
-    }
+    };
   }
 
   return new HyperFetchWebsocket(url, adapterOptions?.protocols);