Add HMR

package.json

@@ -9,7 +9,8 @@
   },
   "scripts": {
     "build": "tsc --noEmit && vite build",
-    "dev": "nodemon",
+    "dev": "yarn wss & nodemon",
+    "wss": "ts-node-esm src/reload/server.ts",
     "test": "jest"
   },
   "type": "module",
@@ -24,9 +25,11 @@
     "@types/node": "18.0.6",
     "@types/react": "18.0.15",
     "@types/react-dom": "18.0.6",
+    "@types/ws": "^8.5.3",
     "@typescript-eslint/eslint-plugin": "5.30.6",
     "@typescript-eslint/parser": "5.30.6",
     "@vitejs/plugin-react": "2.0.0",
+    "chokidar": "^3.5.3",
     "eslint": "8.20.0",
     "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-import": "^2.25.4",
@@ -44,6 +47,7 @@
     "ts-loader": "9.3.1",
     "ts-node": "10.9.1",
     "typescript": "4.7.4",
-    "vite": "3.0.1"
+    "vite": "3.0.1",
+    "ws": "^8.8.1"
   }
 }

src/pages/content/components/Demo/index.tsx

@@ -1,8 +1,11 @@
 import { createRoot } from "react-dom/client";
 import App from "@src/pages/content/components/Demo/app";
+import reloadOnUpdated from "@src/reload/client";
 
 const root = document.createElement("div");
 root.id = "chrome-extension-boilerplate-react-vite-content-view-root";
 document.body.append(root);
 
 createRoot(root).render(<App />);
+
+reloadOnUpdated();

src/pages/newtab/index.tsx

@@ -2,6 +2,7 @@ import React from "react";
 import { createRoot } from "react-dom/client";
 import Newtab from "@pages/newtab/Newtab";
 import "@pages/newtab/index.css";
+import reloadOnUpdated from "@src/reload/client";
 
 function init() {
   const appContainer = document.querySelector("#app-container");
@@ -13,3 +14,5 @@ function init() {
 }
 
 init();
+
+reloadOnUpdated();

src/pages/options/index.tsx

@@ -2,6 +2,7 @@ import React from "react";
 import { createRoot } from "react-dom/client";
 import Options from "@pages/options/Options";
 import "@pages/options/index.css";
+import reloadOnUpdated from "@src/reload/client";
 
 function init() {
   const appContainer = document.querySelector("#app-container");
@@ -13,3 +14,5 @@ function init() {
 }
 
 init();
+
+reloadOnUpdated();

src/pages/panel/index.tsx

@@ -2,6 +2,7 @@ import React from "react";
 import { createRoot } from "react-dom/client";
 import Panel from "@pages/panel/Panel";
 import "@pages/panel/index.css";
+import reloadOnUpdated from "@src/reload/client";
 
 function init() {
   const appContainer = document.querySelector("#app-container");
@@ -13,3 +14,5 @@ function init() {
 }
 
 init();
+
+reloadOnUpdated();

src/pages/popup/index.tsx

@@ -2,6 +2,7 @@ import React from "react";
 import { createRoot } from "react-dom/client";
 import "@pages/popup/index.css";
 import Popup from "@pages/popup/Popup";
+import reloadOnUpdated from "@src/reload/client";
 
 function init() {
   const appContainer = document.querySelector("#app-container");
@@ -13,3 +14,5 @@ function init() {
 }
 
 init();
+
+reloadOnUpdated();

src/reload/client.ts

@@ -0,0 +1,32 @@
+let needToReload = false;
+
+export default function reloadOnUpdated() {
+  // reload
+  function reload() {
+    window.location.reload();
+    socket.send("remove");
+    needToReload = false;
+  }
+
+  // reload when document visible
+  document.addEventListener("visibilitychange", () => {
+    !document.hidden && needToReload && reload();
+  });
+
+  // reload server setting
+  const socket = new WebSocket("ws://localhost:8081");
+  socket.addEventListener("open", () => {
+    socket.send("add");
+  });
+  socket.addEventListener("message", (event) => {
+    if (event.data !== "update") {
+      return;
+    }
+    // disable reload when document hidden
+    if (document.hidden) {
+      needToReload = true;
+      return;
+    }
+    reload();
+  });
+}

src/reload/server.ts

@@ -0,0 +1,31 @@
+import { WebSocketServer, WebSocket } from "ws";
+import chokidar from "chokidar";
+import { clearTimeout } from "timers";
+
+const PORT = 8081;
+const wss = new WebSocketServer({ port: PORT });
+
+const wsSet: Set<WebSocket> = new Set();
+
+console.log("ws server:" + PORT);
+
+wss.on("connection", (ws) => {
+  ws.addEventListener("message", (event) => {
+    switch (event.data) {
+      case "add":
+        return wsSet.add(ws);
+      case "remove":
+        return wsSet.delete(ws);
+    }
+  });
+});
+
+let timer: NodeJS.Timeout;
+const DELAY = 200;
+chokidar.watch("dist").on("all", () => {
+  clearTimeout(timer);
+  // debounce
+  timer = setTimeout(() => {
+    wsSet.forEach((ws) => ws.send("update"));
+  }, DELAY);
+});

yarn.lock

@@ -913,6 +913,13 @@
   resolved "https://registry.yarnpkg.com/@types/tough-cookie/-/tough-cookie-4.0.2.tgz#6286b4c7228d58ab7866d19716f3696e03a09397"
   integrity sha512-Q5vtl1W5ue16D+nIaW8JWebSSraJVlK+EthKn7e7UcD4KWsaSJ8BqGPXNaPghgtcn/fhvrN17Tv8ksUsQpiplw==
 
+"@types/ws@^8.5.3":
+  version "8.5.3"
+  resolved "https://registry.yarnpkg.com/@types/ws/-/ws-8.5.3.tgz#7d25a1ffbecd3c4f2d35068d0b283c037003274d"
+  integrity sha512-6YOoWjruKj1uLf3INHH7D3qTXwFfEsg1kf3c0uDdSBJwfa/llkwIjrAGV7j7mVgGNbzTQ3HiHKKDXl6bJPD97w==
+  dependencies:
+    "@types/node" "*"
+
 "@types/yargs-parser@*":
   version "21.0.0"
   resolved "https://registry.yarnpkg.com/@types/yargs-parser/-/yargs-parser-21.0.0.tgz#0c60e537fa790f5f9472ed2776c2b71ec117351b"
@@ -1387,7 +1394,7 @@ char-regex@^1.0.2:
   resolved "https://registry.yarnpkg.com/char-regex/-/char-regex-1.0.2.tgz#d744358226217f981ed58f479b1d6bcc29545dcf"
   integrity sha512-kWWXztvZ5SBQV+eRgKFeh8q5sLuZY2+8WUIzlxWVTg+oGwY14qylx1KbKzHd8P6ZYkAg0xyIDU9JMHhyJMZ1jw==
 
-"chokidar@>=3.0.0 <4.0.0", chokidar@^3.5.2:
+"chokidar@>=3.0.0 <4.0.0", chokidar@^3.5.2, chokidar@^3.5.3:
   version "3.5.3"
   resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-3.5.3.tgz#1cf37c8707b932bd1af1ae22c0432e2acd1903bd"
   integrity sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw==
@@ -4506,7 +4513,7 @@ write-file-atomic@^4.0.1:
     imurmurhash "^0.1.4"
     signal-exit "^3.0.7"
 
-ws@^8.2.3:
+ws@^8.2.3, ws@^8.8.1:
   version "8.8.1"
   resolved "https://registry.yarnpkg.com/ws/-/ws-8.8.1.tgz#5dbad0feb7ade8ecc99b830c1d77c913d4955ff0"
   integrity sha512-bGy2JzvzkPowEJV++hF07hAD6niYSr0JzBNo/J29WsB57A2r7Wlc1UFcTR9IzrPvuNVO4B8LGqF8qcpsVOhJCA==