Skip to content

Commit

Permalink
ADD HMR
Browse files Browse the repository at this point in the history
  • Loading branch information
Jonghakseo committed Aug 20, 2022
1 parent 68ab80d commit edc0482
Show file tree
Hide file tree
Showing 9 changed files with 92 additions and 4 deletions.
8 changes: 6 additions & 2 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand All @@ -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",
Expand All @@ -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"
}
}
3 changes: 3 additions & 0 deletions src/pages/content/components/Demo/index.tsx
Original file line number Diff line number Diff line change
@@ -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();
3 changes: 3 additions & 0 deletions src/pages/newtab/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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");
Expand All @@ -13,3 +14,5 @@ function init() {
}

init();

reloadOnUpdated();
3 changes: 3 additions & 0 deletions src/pages/options/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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");
Expand All @@ -13,3 +14,5 @@ function init() {
}

init();

reloadOnUpdated();
3 changes: 3 additions & 0 deletions src/pages/panel/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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");
Expand All @@ -13,3 +14,5 @@ function init() {
}

init();

reloadOnUpdated();
3 changes: 3 additions & 0 deletions src/pages/popup/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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");
Expand All @@ -13,3 +14,5 @@ function init() {
}

init();

reloadOnUpdated();
31 changes: 31 additions & 0 deletions src/reload/client.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@
let needToReload = false;

export default function reloadOnUpdated() {
// reload
function reload() {
window.location.reload();
socket.send("remove");
}

// 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();
});
}
31 changes: 31 additions & 0 deletions src/reload/server.ts
Original file line number Diff line number Diff line change
@@ -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);
});
11 changes: 9 additions & 2 deletions yarn.lock
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down Expand Up @@ -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==
Expand Down Expand Up @@ -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==
Expand Down

0 comments on commit edc0482

Please sign in to comment.