diff --git a/.prettierrc.json b/.prettierrc.json index 9614d131..e5e9ede8 100644 --- a/.prettierrc.json +++ b/.prettierrc.json @@ -6,6 +6,5 @@ "bracketSpacing": true, "arrowParens": "avoid", "bracketSameLine": true, - "semi": false, - "ignore": ["**/*.json"] + "semi": false } diff --git a/postcss.config.js b/postcss.config.js index 2aa7205d..2e7af2b7 100644 --- a/postcss.config.js +++ b/postcss.config.js @@ -3,4 +3,4 @@ export default { tailwindcss: {}, autoprefixer: {}, }, -}; +} diff --git a/src/global.d.ts b/src/global.d.ts index b2c42db1..41768a38 100644 --- a/src/global.d.ts +++ b/src/global.d.ts @@ -1,37 +1,37 @@ -import Chrome from "chrome"; +import Chrome from 'chrome' declare namespace chrome { - export default Chrome; + export default Chrome } -declare module "virtual:reload-on-update-in-background-script" { - export const reloadOnUpdate: (watchPath: string) => void; - export default reloadOnUpdate; +declare module 'virtual:reload-on-update-in-background-script' { + export const reloadOnUpdate: (watchPath: string) => void + export default reloadOnUpdate } -declare module "virtual:reload-on-update-in-view" { - const refreshOnUpdate: (watchPath: string) => void; - export default refreshOnUpdate; +declare module 'virtual:reload-on-update-in-view' { + const refreshOnUpdate: (watchPath: string) => void + export default refreshOnUpdate } -declare module "*.svg" { - import React = require("react"); - export const ReactComponent: React.SFC>; - const src: string; - export default src; +declare module '*.svg' { + import React = require('react') + export const ReactComponent: React.SFC> + const src: string + export default src } -declare module "*.jpg" { - const content: string; - export default content; +declare module '*.jpg' { + const content: string + export default content } -declare module "*.png" { - const content: string; - export default content; +declare module '*.png' { + const content: string + export default content } -declare module "*.json" { - const content: string; - export default content; +declare module '*.json' { + const content: string + export default content } diff --git a/src/pages/content/style.scss b/src/pages/content/style.scss index 659e18b8..8abd0d3e 100644 --- a/src/pages/content/style.scss +++ b/src/pages/content/style.scss @@ -1,4 +1,4 @@ -@import "@assets/style/theme.scss"; +@import '@assets/style/theme.scss'; @tailwind base; @tailwind components; @tailwind utilities; diff --git a/src/pages/popup/index.css b/src/pages/popup/index.css index 22c086c8..0e196430 100644 --- a/src/pages/popup/index.css +++ b/src/pages/popup/index.css @@ -6,9 +6,8 @@ body { width: 300px; height: 260px; margin: 0; - font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', - 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', - sans-serif; + font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', + 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; @@ -16,6 +15,5 @@ body { } code { - font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', - monospace; + font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace; } diff --git a/src/pages/popup/index.html b/src/pages/popup/index.html index 5aaf8b3c..1130bcb8 100644 --- a/src/pages/popup/index.html +++ b/src/pages/popup/index.html @@ -1,12 +1,12 @@ - + Popup - + - -
- - + +
+ + diff --git a/tsconfig.json b/tsconfig.json index c5a55d82..daa0be89 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -10,49 +10,21 @@ "esModuleInterop": true, "resolveJsonModule": true, "moduleResolution": "node", - "types": [ - "vite/client", - "node" - ], + "types": ["vite/client", "node"], "noFallthroughCasesInSwitch": true, "allowSyntheticDefaultImports": true, - "lib": [ - "dom", - "dom.iterable", - "esnext" - ], + "lib": ["dom", "dom.iterable", "esnext"], "forceConsistentCasingInFileNames": true, - "typeRoots": [ - "./src/global.d.ts" - ], + "typeRoots": ["./src/global.d.ts"], "paths": { - "@src/*": [ - "src/*" - ], - "@assets/*": [ - "src/assets/*" - ], - "@pages/*": [ - "src/pages/*" - ], - "@lib/*": [ - "src/lib/*" - ], - "@hooks/*": [ - "src/hooks/*" - ], - "virtual:reload-on-update-in-background-script": [ - "./src/global.d.ts" - ], - "virtual:reload-on-update-in-view": [ - "./src/global.d.ts" - ] + "@src/*": ["src/*"], + "@assets/*": ["src/assets/*"], + "@pages/*": ["src/pages/*"], + "@lib/*": ["src/lib/*"], + "@hooks/*": ["src/hooks/*"], + "virtual:reload-on-update-in-background-script": ["./src/global.d.ts"], + "virtual:reload-on-update-in-view": ["./src/global.d.ts"] } }, - "include": [ - "src", - "utils", - "vite.config.ts", - "node_modules/@types" - ] + "include": ["src", "utils", "vite.config.ts", "node_modules/@types"] } diff --git a/utils/reload/initReloadServer.js b/utils/reload/initReloadServer.js index 51ec8e40..d04bfa3c 100644 --- a/utils/reload/initReloadServer.js +++ b/utils/reload/initReloadServer.js @@ -1,72 +1,75 @@ -import { WebSocketServer } from 'ws'; -import chokidar from 'chokidar'; -import { clearTimeout } from 'timers'; +import { WebSocketServer } from 'ws' +import chokidar from 'chokidar' +import { clearTimeout } from 'timers' function debounce(callback, delay) { - let timer; - return function (...args) { - clearTimeout(timer); - timer = setTimeout(() => callback(...args), delay); - }; + let timer + return function (...args) { + clearTimeout(timer) + timer = setTimeout(() => callback(...args), delay) + } } -const LOCAL_RELOAD_SOCKET_PORT = 8081; -const LOCAL_RELOAD_SOCKET_URL = `ws://localhost:${LOCAL_RELOAD_SOCKET_PORT}`; -const UPDATE_PENDING_MESSAGE = "wait_update"; -const UPDATE_REQUEST_MESSAGE = "do_update"; -const UPDATE_COMPLETE_MESSAGE = "done_update"; +const LOCAL_RELOAD_SOCKET_PORT = 8081 +const LOCAL_RELOAD_SOCKET_URL = `ws://localhost:${LOCAL_RELOAD_SOCKET_PORT}` +const UPDATE_PENDING_MESSAGE = 'wait_update' +const UPDATE_REQUEST_MESSAGE = 'do_update' +const UPDATE_COMPLETE_MESSAGE = 'done_update' class MessageInterpreter { - // eslint-disable-next-line @typescript-eslint/no-empty-function - constructor() { } - static send(message) { - return JSON.stringify(message); - } - static receive(serializedMessage) { - return JSON.parse(serializedMessage); - } + // eslint-disable-next-line @typescript-eslint/no-empty-function + constructor() {} + static send(message) { + return JSON.stringify(message) + } + static receive(serializedMessage) { + return JSON.parse(serializedMessage) + } } -const clientsThatNeedToUpdate = new Set(); +const clientsThatNeedToUpdate = new Set() function initReloadServer() { - const wss = new WebSocketServer({ port: LOCAL_RELOAD_SOCKET_PORT }); - wss.on("listening", () => console.log(`[HRS] Server listening at ${LOCAL_RELOAD_SOCKET_URL}`)); - wss.on("connection", (ws) => { - clientsThatNeedToUpdate.add(ws); - ws.addEventListener("close", () => clientsThatNeedToUpdate.delete(ws)); - ws.addEventListener("message", (event) => { - const message = MessageInterpreter.receive(String(event.data)); - if (message.type === UPDATE_COMPLETE_MESSAGE) { - ws.close(); - } - }); - }); + const wss = new WebSocketServer({ port: LOCAL_RELOAD_SOCKET_PORT }) + wss.on('listening', () => console.log(`[HRS] Server listening at ${LOCAL_RELOAD_SOCKET_URL}`)) + wss.on('connection', ws => { + clientsThatNeedToUpdate.add(ws) + ws.addEventListener('close', () => clientsThatNeedToUpdate.delete(ws)) + ws.addEventListener('message', event => { + const message = MessageInterpreter.receive(String(event.data)) + if (message.type === UPDATE_COMPLETE_MESSAGE) { + ws.close() + } + }) + }) } /** CHECK:: src file was updated **/ const debounceSrc = debounce(function (path) { - // Normalize path on Windows - const pathConverted = path.replace(/\\/g, "/"); - clientsThatNeedToUpdate.forEach((ws) => ws.send(MessageInterpreter.send({ + // Normalize path on Windows + const pathConverted = path.replace(/\\/g, '/') + clientsThatNeedToUpdate.forEach(ws => + ws.send( + MessageInterpreter.send({ type: UPDATE_PENDING_MESSAGE, path: pathConverted, - }))); - // Delay waiting for public assets to be copied -}, 400); -chokidar.watch("src").on("all", (event, path) => debounceSrc(path)); + }), + ), + ) + // Delay waiting for public assets to be copied +}, 400) +chokidar.watch('src').on('all', (event, path) => debounceSrc(path)) /** CHECK:: build was completed **/ const debounceDist = debounce(() => { - clientsThatNeedToUpdate.forEach((ws) => { - ws.send(MessageInterpreter.send({ type: UPDATE_REQUEST_MESSAGE })); - }); -}, 100); -chokidar.watch("dist").on("all", (event) => { - // Ignore unlink, unlinkDir and change events - // that happen in beginning of build:watch and - // that will cause ws.send() if it takes more than 400ms - // to build (which it might). This fixes: - // https://github.com/Jonghakseo/chrome-extension-boilerplate-react-vite/issues/100 - if (event !== "add" && event !== "addDir") - return; - debounceDist(); -}); -initReloadServer(); + clientsThatNeedToUpdate.forEach(ws => { + ws.send(MessageInterpreter.send({ type: UPDATE_REQUEST_MESSAGE })) + }) +}, 100) +chokidar.watch('dist').on('all', event => { + // Ignore unlink, unlinkDir and change events + // that happen in beginning of build:watch and + // that will cause ws.send() if it takes more than 400ms + // to build (which it might). This fixes: + // https://github.com/Jonghakseo/chrome-extension-boilerplate-react-vite/issues/100 + if (event !== 'add' && event !== 'addDir') return + debounceDist() +}) +initReloadServer() diff --git a/utils/reload/injections/script.js b/utils/reload/injections/script.js index 3509e8bc..a3df2004 100644 --- a/utils/reload/injections/script.js +++ b/utils/reload/injections/script.js @@ -1,60 +1,62 @@ -const LOCAL_RELOAD_SOCKET_PORT = 8081; -const LOCAL_RELOAD_SOCKET_URL = `ws://localhost:${LOCAL_RELOAD_SOCKET_PORT}`; -const UPDATE_PENDING_MESSAGE = "wait_update"; -const UPDATE_REQUEST_MESSAGE = "do_update"; -const UPDATE_COMPLETE_MESSAGE = "done_update"; +const LOCAL_RELOAD_SOCKET_PORT = 8081 +const LOCAL_RELOAD_SOCKET_URL = `ws://localhost:${LOCAL_RELOAD_SOCKET_PORT}` +const UPDATE_PENDING_MESSAGE = 'wait_update' +const UPDATE_REQUEST_MESSAGE = 'do_update' +const UPDATE_COMPLETE_MESSAGE = 'done_update' class MessageInterpreter { - // eslint-disable-next-line @typescript-eslint/no-empty-function - constructor() { } - static send(message) { - return JSON.stringify(message); - } - static receive(serializedMessage) { - return JSON.parse(serializedMessage); - } + // eslint-disable-next-line @typescript-eslint/no-empty-function + constructor() {} + static send(message) { + return JSON.stringify(message) + } + static receive(serializedMessage) { + return JSON.parse(serializedMessage) + } } -let needToUpdate = false; -function initReloadClient({ watchPath, onUpdate, }) { - const socket = new WebSocket(LOCAL_RELOAD_SOCKET_URL); - function sendUpdateCompleteMessage() { - socket.send(MessageInterpreter.send({ type: UPDATE_COMPLETE_MESSAGE })); - } - socket.addEventListener("message", (event) => { - const message = MessageInterpreter.receive(String(event.data)); - switch (message.type) { - case UPDATE_REQUEST_MESSAGE: { - if (needToUpdate) { - sendUpdateCompleteMessage(); - needToUpdate = false; - onUpdate(); - } - return; - } - case UPDATE_PENDING_MESSAGE: { - if (!needToUpdate) { - needToUpdate = message.path.includes(watchPath); - } - return; - } +let needToUpdate = false +function initReloadClient({ watchPath, onUpdate }) { + const socket = new WebSocket(LOCAL_RELOAD_SOCKET_URL) + function sendUpdateCompleteMessage() { + socket.send(MessageInterpreter.send({ type: UPDATE_COMPLETE_MESSAGE })) + } + socket.addEventListener('message', event => { + const message = MessageInterpreter.receive(String(event.data)) + switch (message.type) { + case UPDATE_REQUEST_MESSAGE: { + if (needToUpdate) { + sendUpdateCompleteMessage() + needToUpdate = false + onUpdate() } - }); - socket.onclose = () => { - console.warn(`Reload server disconnected.\nPlease check if the WebSocket server is running properly on ${LOCAL_RELOAD_SOCKET_URL}. This feature detects changes in the code and helps the browser to reload the extension or refresh the current tab.`); - }; - return socket; + return + } + case UPDATE_PENDING_MESSAGE: { + if (!needToUpdate) { + needToUpdate = message.path.includes(watchPath) + } + return + } + } + }) + socket.onclose = () => { + console.warn( + `Reload server disconnected.\nPlease check if the WebSocket server is running properly on ${LOCAL_RELOAD_SOCKET_URL}. This feature detects changes in the code and helps the browser to reload the extension or refresh the current tab.`, + ) + } + return socket } function addHmrIntoScript(watchPath) { - initReloadClient({ - watchPath, - onUpdate: () => { - // eslint-disable-next-line @typescript-eslint/ban-ts-comment - // @ts-ignore - chrome.runtime.reload(); - }, - }); + initReloadClient({ + watchPath, + onUpdate: () => { + // eslint-disable-next-line @typescript-eslint/ban-ts-comment + // @ts-ignore + chrome.runtime.reload() + }, + }) } -export { addHmrIntoScript as default }; +export { addHmrIntoScript as default } diff --git a/utils/reload/injections/view.js b/utils/reload/injections/view.js index 1aba4967..a0bd529e 100644 --- a/utils/reload/injections/view.js +++ b/utils/reload/injections/view.js @@ -1,74 +1,76 @@ -const LOCAL_RELOAD_SOCKET_PORT = 8081; -const LOCAL_RELOAD_SOCKET_URL = `ws://localhost:${LOCAL_RELOAD_SOCKET_PORT}`; -const UPDATE_PENDING_MESSAGE = "wait_update"; -const UPDATE_REQUEST_MESSAGE = "do_update"; -const UPDATE_COMPLETE_MESSAGE = "done_update"; +const LOCAL_RELOAD_SOCKET_PORT = 8081 +const LOCAL_RELOAD_SOCKET_URL = `ws://localhost:${LOCAL_RELOAD_SOCKET_PORT}` +const UPDATE_PENDING_MESSAGE = 'wait_update' +const UPDATE_REQUEST_MESSAGE = 'do_update' +const UPDATE_COMPLETE_MESSAGE = 'done_update' class MessageInterpreter { - // eslint-disable-next-line @typescript-eslint/no-empty-function - constructor() { } - static send(message) { - return JSON.stringify(message); - } - static receive(serializedMessage) { - return JSON.parse(serializedMessage); - } + // eslint-disable-next-line @typescript-eslint/no-empty-function + constructor() {} + static send(message) { + return JSON.stringify(message) + } + static receive(serializedMessage) { + return JSON.parse(serializedMessage) + } } -let needToUpdate = false; -function initReloadClient({ watchPath, onUpdate, }) { - const socket = new WebSocket(LOCAL_RELOAD_SOCKET_URL); - function sendUpdateCompleteMessage() { - socket.send(MessageInterpreter.send({ type: UPDATE_COMPLETE_MESSAGE })); - } - socket.addEventListener("message", (event) => { - const message = MessageInterpreter.receive(String(event.data)); - switch (message.type) { - case UPDATE_REQUEST_MESSAGE: { - if (needToUpdate) { - sendUpdateCompleteMessage(); - needToUpdate = false; - onUpdate(); - } - return; - } - case UPDATE_PENDING_MESSAGE: { - if (!needToUpdate) { - needToUpdate = message.path.includes(watchPath); - } - return; - } +let needToUpdate = false +function initReloadClient({ watchPath, onUpdate }) { + const socket = new WebSocket(LOCAL_RELOAD_SOCKET_URL) + function sendUpdateCompleteMessage() { + socket.send(MessageInterpreter.send({ type: UPDATE_COMPLETE_MESSAGE })) + } + socket.addEventListener('message', event => { + const message = MessageInterpreter.receive(String(event.data)) + switch (message.type) { + case UPDATE_REQUEST_MESSAGE: { + if (needToUpdate) { + sendUpdateCompleteMessage() + needToUpdate = false + onUpdate() + } + return + } + case UPDATE_PENDING_MESSAGE: { + if (!needToUpdate) { + needToUpdate = message.path.includes(watchPath) } - }); - socket.onclose = () => { - console.warn(`Reload server disconnected.\nPlease check if the WebSocket server is running properly on ${LOCAL_RELOAD_SOCKET_URL}. This feature detects changes in the code and helps the browser to reload the extension or refresh the current tab.`); - }; - return socket; + return + } + } + }) + socket.onclose = () => { + console.warn( + `Reload server disconnected.\nPlease check if the WebSocket server is running properly on ${LOCAL_RELOAD_SOCKET_URL}. This feature detects changes in the code and helps the browser to reload the extension or refresh the current tab.`, + ) + } + return socket } function addHmrIntoView(watchPath) { - let pendingReload = false; - initReloadClient({ - watchPath, - onUpdate: () => { - // disable reload when tab is hidden - if (document.hidden) { - pendingReload = true; - return; - } - reload(); - }, - }); - // reload - function reload() { - pendingReload = false; - window.location.reload(); - } - // reload when tab is visible - function reloadWhenTabIsVisible() { - !document.hidden && pendingReload && reload(); - } - document.addEventListener("visibilitychange", reloadWhenTabIsVisible); + let pendingReload = false + initReloadClient({ + watchPath, + onUpdate: () => { + // disable reload when tab is hidden + if (document.hidden) { + pendingReload = true + return + } + reload() + }, + }) + // reload + function reload() { + pendingReload = false + window.location.reload() + } + // reload when tab is visible + function reloadWhenTabIsVisible() { + !document.hidden && pendingReload && reload() + } + document.addEventListener('visibilitychange', reloadWhenTabIsVisible) } -export { addHmrIntoView as default }; +export { addHmrIntoView as default }