diff --git a/.changeset/remove-debounce.md b/.changeset/remove-debounce.md new file mode 100644 index 0000000000..fca2e424ae --- /dev/null +++ b/.changeset/remove-debounce.md @@ -0,0 +1,5 @@ +--- +"react-email": patch +--- + +Remove the `debounce` dependency. diff --git a/packages/react-email/package.json b/packages/react-email/package.json index 139fecef7e..e685451aa4 100644 --- a/packages/react-email/package.json +++ b/packages/react-email/package.json @@ -52,7 +52,6 @@ "commander": "catalog:", "conf": "^15.0.2", "css-tree": "3.2.1", - "debounce": "^2.0.0", "esbuild": "^0.28.0", "glob": "^13.0.6", "jiti": "2.6.1", diff --git a/packages/react-email/src/cli/utils/preview/hot-reloading/setup-hot-reloading.ts b/packages/react-email/src/cli/utils/preview/hot-reloading/setup-hot-reloading.ts index 04f776e6ef..05c7e9905b 100644 --- a/packages/react-email/src/cli/utils/preview/hot-reloading/setup-hot-reloading.ts +++ b/packages/react-email/src/cli/utils/preview/hot-reloading/setup-hot-reloading.ts @@ -1,7 +1,6 @@ import type http from 'node:http'; import path from 'node:path'; import { watch } from 'chokidar'; -import debounce from 'debounce'; import { type Socket, Server as SocketServer } from 'socket.io'; import type { HotReloadChange } from '../../types/hot-reload-change.js'; import { createDependencyGraph } from './create-dependency-graph.js'; @@ -25,7 +24,14 @@ export const setupHotreloading = async ( // and send them at once to the preview app through the web socket let changes = [] as HotReloadChange[]; - const reload = debounce(() => { + // Waits for 150ms without new changes before sending them all at once + let reloadTimeout: NodeJS.Timeout | undefined; + const reload = () => { + clearTimeout(reloadTimeout); + reloadTimeout = setTimeout(sendChanges, 150); + }; + + const sendChanges = () => { // we detect these using the useHotreload hook on the Next app clients.forEach((client) => { client.emit( @@ -40,7 +46,7 @@ export const setupHotreloading = async ( }); changes = []; - }, 150); + }; const absolutePathToEmailsDirectory = path.resolve( process.cwd(), diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 23dac5852b..5eb2c8610e 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -650,9 +650,6 @@ importers: css-tree: specifier: 3.2.1 version: 3.2.1 - debounce: - specifier: ^2.0.0 - version: 2.2.0 esbuild: specifier: ^0.28.0 version: 0.28.2 @@ -3806,10 +3803,6 @@ packages: resolution: {integrity: sha512-rBMW+F2TXryBwB54Q0d8drNEI+TfoS9JpNTAoVpukbWEhjXQq4rySFYLaqXMFXwdv61Zb2OHtj5bviSoimqxRQ==} engines: {node: '>=18'} - debounce@2.2.0: - resolution: {integrity: sha512-Xks6RUDLZFdz8LIdR6q0MTH44k7FikOmnh5xkSjMig6ch45afc8sjTjRQf3P6ax8dMgcQrYO/AR2RGWURrruqw==} - engines: {node: '>=18'} - debug@4.4.3: resolution: {integrity: sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA==} engines: {node: '>=6.0'} @@ -8815,8 +8808,6 @@ snapshots: dependencies: mimic-function: 5.0.1 - debounce@2.2.0: {} - debug@4.4.3: dependencies: ms: 2.1.3