chore: improve dev command

Author: siam-ese

README.md

@@ -94,7 +94,6 @@ To use **Univer Clipsheet**, ensure you have the following installed:
 2. Start the development server:
 
    ```bash
-   pnpm run dev-server // hmr-server
    pnpm run dev
    ```
 

packages/hmr/lib/constant.ts

@@ -1,2 +1,6 @@
 export const LOCAL_RELOAD_SOCKET_PORT = 8081;
 export const LOCAL_RELOAD_SOCKET_URL = `ws://localhost:${LOCAL_RELOAD_SOCKET_PORT}`;
+
+export const DO_UPDATE = 'do_update';
+export const DONE_UPDATE = 'done_update';
+export const BUILD_COMPLETE = 'build_complete';

packages/hmr/lib/debounce.ts

@@ -0,0 +1,18 @@
+import { DO_UPDATE, DONE_UPDATE, LOCAL_RELOAD_SOCKET_URL } from '../constant';
+import MessageInterpreter from '../interpreter';
+
+export default function initClient({ id, onUpdate }: { id: string; onUpdate: () => void }) {
+  const ws = new WebSocket(LOCAL_RELOAD_SOCKET_URL);
+
+  ws.onopen = () => {
+    ws.addEventListener('message', event => {
+      const message = MessageInterpreter.receive(String(event.data));
+
+      if (message.type === DO_UPDATE && message.id === id) {
+        onUpdate();
+        ws.send(MessageInterpreter.send({ type: DONE_UPDATE }));
+        return;
+      }
+    });
+  };
+}

packages/hmr/lib/initClient.ts

@@ -0,0 +1,45 @@
+import type { WebSocket } from 'ws';
+import { WebSocketServer } from 'ws';
+import { BUILD_COMPLETE, DO_UPDATE, DONE_UPDATE, LOCAL_RELOAD_SOCKET_PORT, LOCAL_RELOAD_SOCKET_URL } from '../constant';
+import MessageInterpreter from '../interpreter';
+
+const clientsThatNeedToUpdate: Set<WebSocket> = new Set();
+
+function initReloadServer() {
+  const wss = new WebSocketServer({ port: LOCAL_RELOAD_SOCKET_PORT });
+
+  wss.on('listening', () => {
+    console.log(`[HMR] Server listening at ${LOCAL_RELOAD_SOCKET_URL}`);
+  });
+
+  wss.on('connection', ws => {
+    clientsThatNeedToUpdate.add(ws);
+
+    ws.addEventListener('close', () => {
+      clientsThatNeedToUpdate.delete(ws);
+    });
+
+    ws.addEventListener('message', event => {
+      if (typeof event.data !== 'string') return;
+
+      const message = MessageInterpreter.receive(event.data);
+
+      if (message.type === DONE_UPDATE) {
+        ws.close();
+      }
+
+      if (message.type === BUILD_COMPLETE) {
+        clientsThatNeedToUpdate.forEach((ws: WebSocket) =>
+          ws.send(MessageInterpreter.send({ type: DO_UPDATE, id: message.id })),
+        );
+      }
+    });
+  });
+
+  wss.on('error', error => {
+    console.error(`[HMR] Failed to start server at ${LOCAL_RELOAD_SOCKET_URL}`);
+    throw error;
+  });
+}
+
+initReloadServer();

packages/hmr/lib/initReloadServer.ts

@@ -1,32 +1,33 @@
-import initClient from '../initClient';
+import initClient from '../initializers/initClient';
 
 function addRefresh() {
-    let pendingReload = false;
+  let pendingReload = false;
 
-    initClient({
-    // @ts-expect-error
-        id: __HMR_ID,
-        onUpdate: () => {
+  initClient({
+    // @ts-expect-error That's because of the dynamic code loading
+    id: __HMR_ID,
+    onUpdate: () => {
       // disable reload when tab is hidden
-            if (document.hidden) {
-                pendingReload = true;
-                return;
-            }
-            reload();
-        },
-    });
+      if (document.hidden) {
+        pendingReload = true;
+        return;
+      }
+      reload();
+    },
+  });
 
   // reload
-    function reload(): void {
-        pendingReload = false;
-        window.location.reload();
-    }
+  function reload(): void {
+    pendingReload = false;
+    window.location.reload();
+  }
 
   // reload when tab is visible
-    function reloadWhenTabIsVisible(): void {
-        !document.hidden && pendingReload && reload();
-    }
-    document.addEventListener('visibilitychange', reloadWhenTabIsVisible);
+  function reloadWhenTabIsVisible(): void {
+    !document.hidden && pendingReload && reload();
+  }
+
+  document.addEventListener('visibilitychange', reloadWhenTabIsVisible);
 }
 
 addRefresh();

packages/hmr/lib/initializers/initClient.ts

@@ -1,16 +1,15 @@
-import initClient from '../initClient';
+import initClient from '../initializers/initClient';
 
 function addReload() {
-    const reload = () => {
-    // @ts-expect-error
-        chrome.runtime.reload();
-    };
+  const reload = () => {
+    chrome.runtime.reload();
+  };
 
-    initClient({
-    // @ts-expect-error
-        id: __HMR_ID,
-        onUpdate: reload,
-    });
+  initClient({
+    // @ts-expect-error That's because of the dynamic code loading
+    id: __HMR_ID,
+    onUpdate: reload,
+  });
 }
 
 addReload();

packages/hmr/lib/initializers/initReloadServer.ts

@@ -1,13 +1,14 @@
-import type { SerializedMessage, WebSocketMessage } from './types';
+import type { SerializedMessage, WebSocketMessage } from '../types';
 
 export default class MessageInterpreter {
-    private constructor() {}
+  // eslint-disable-next-line @typescript-eslint/no-empty-function
+  private constructor() {}
 
-    static send(message: WebSocketMessage): SerializedMessage {
-        return JSON.stringify(message);
-    }
+  static send(message: WebSocketMessage): SerializedMessage {
+    return JSON.stringify(message);
+  }
 
-    static receive(serializedMessage: SerializedMessage): WebSocketMessage {
-        return JSON.parse(serializedMessage);
-    }
+  static receive(serializedMessage: SerializedMessage): WebSocketMessage {
+    return JSON.parse(serializedMessage);
+  }
 }

packages/hmr/lib/injections/refresh.ts

@@ -1,2 +1,3 @@
 export * from './watch-rebuild-plugin';
 export * from './make-entry-point-plugin';
+export * from './watch-public-plugin';