fix: duplicate watcher, virtual module hmr

client.d.ts

@@ -1 +1 @@
-export * from './dist/client/index.js'
+export * from './dist/client'

package.json

@@ -56,7 +56,7 @@
     "bump": "bumpp package.json -c --no-push -t --all -x \"pnpm run changelog\""
   },
   "peerDependencies": {
-    "esbuild": ">=0.19.0",
+    "esbuild": ">=0.21.3",
     "vite": ">=4.0.0 || >=5.0.0"
   },
   "peerDependenciesMeta": {
@@ -71,6 +71,7 @@
     "@babel/preset-typescript": "^7.24.1",
     "browserslist": "^4.23.0",
     "core-js": "^3.37.1",
+    "debounce": "^2.1.0",
     "debug": "^4.3.4",
     "esbuild": "^0.21.3",
     "esbuild-plugin-browserslist": "^0.12.0",

src/node/helper/file-watcher.ts

@@ -1,3 +1,4 @@
+import debounce from 'debounce'
 import createDebug from 'debug'
 import path from 'node:path'
 import colors from 'picocolors'
@@ -38,6 +39,10 @@ async function handleFileChange(filePath: string, cb?: () => void) {
   handleFileAdded(filePath, cb)
 }
 
+function debounced(fn: () => void) {
+  debounce(fn, 200, { immediate: true })()
+}
+
 export async function initWatcher(cb: (file: HmrFile) => void) {
   try {
     const { default: Watcher } = await import('watcher')
@@ -49,16 +54,20 @@ export async function initWatcher(cb: (file: HmrFile) => void) {
       renameTimeout: 100,
     })
 
-    watcher.on('unlink', (filePath: string) => handleUnlink(filePath, () => cb({ path: filePath, event: 'deleted' })))
+    watcher.on('unlink', (filePath: string) =>
+      debounced(() => handleUnlink(filePath, () => cb({ path: filePath, event: 'deleted' }))),
+    )
 
-    watcher.on('add', (filePath: string) => handleFileAdded(filePath, () => cb({ path: filePath, event: 'added' })))
+    watcher.on('add', (filePath: string) =>
+      debounced(() => handleFileAdded(filePath, () => cb({ path: filePath, event: 'added' }))),
+    )
 
     watcher.on('rename', async (f: string, fNext: string) => {
-      handleFileRenamed(f, fNext, () => cb({ path: fNext, event: `renamed` }))
+      debounced(() => handleFileRenamed(f, fNext, () => cb({ path: fNext, event: `renamed` })))
     })
 
     watcher.on('change', (filePath: string) => {
-      handleFileChange(filePath, () => cb({ path: filePath, event: 'changed' }))
+      debounced(() => handleFileChange(filePath, () => cb({ path: filePath, event: 'changed' })))
     })
 
     return watcher

src/node/index.ts

@@ -1,7 +1,8 @@
+import type Watcher from 'watcher'
 import createDebug from 'debug'
 import fs from 'fs-extra'
 import path from 'node:path'
-import { type PluginOption, type ResolvedConfig } from 'vite'
+import { type PluginOption, type ResolvedConfig, type ViteDevServer } from 'vite'
 import { buildAllOnce } from './build'
 import { globalConfig } from './global-config'
 import { resolveOptions } from './helper/default-options'
@@ -18,17 +19,21 @@ import {
   setupGlobalConfig,
   setupManifestCache,
 } from './helper/utils'
+import { resolvedVirtualModuleId } from './helper/virtual'
 import { type VitePublicTypescriptOptions } from './interface'
-import { getManifest, manifestCache } from './manifest-cache'
+import { getManifestInNode, manifestCache } from './manifest-cache'
 import { pluginServer } from './plugins/server'
 import { pluginVirtual } from './plugins/virtual'
 
 const debug = createDebug('vite-plugin-public-typescript:index ===> ')
 
+let wathcer: Watcher | undefined
+
 export default function publicTypescript(options: VitePublicTypescriptOptions = {}) {
   debug('user options:', options)
 
   let viteConfig: ResolvedConfig
+  let server: ViteDevServer
 
   let opts = {
     ...options,
@@ -48,12 +53,17 @@ export default function publicTypescript(options: VitePublicTypescriptOptions =
         await setupGlobalConfig(viteConfig, opts)
         await setupManifestCache(viteConfig, opts)
       },
-      async configureServer(server) {
+      async configureServer(_server) {
+        server = _server
         const { ws } = server
 
         globalConfig.set('viteDevServer', server)
 
-        const wathcer = await initWatcher((file) => reloadPage(ws, file))
+        if (wathcer) {
+          wathcer.close()
+        }
+
+        wathcer = await initWatcher((file) => reloadPage(ws, file))
         server.httpServer?.addListener('close', () => {
           wathcer?.close()
         })
@@ -65,7 +75,7 @@ export default function publicTypescript(options: VitePublicTypescriptOptions =
 
         fs.ensureFileSync(manifestPath)
 
-        const parsedCacheJson = getManifest()
+        const parsedCacheJson = getManifestInNode()
 
         debug('buildStart - parsedCacheJson:', parsedCacheJson)
 
@@ -137,10 +147,15 @@ export default function publicTypescript(options: VitePublicTypescriptOptions =
       },
       async handleHotUpdate(ctx) {
         const { file } = ctx
-
+        const { moduleGraph } = server
+        moduleGraph.onFileChange(resolvedVirtualModuleId)
+        const module = moduleGraph.getModuleById(resolvedVirtualModuleId)
+        // virtual module hmr
+        if (module) {
+          moduleGraph.invalidateModule(module)
+        }
         if (_isPublicTypescript(file) || isManifestFile(file)) {
           debug('hmr disabled:', file)
-
           return []
         }
       },
@@ -153,7 +168,12 @@ export default function publicTypescript(options: VitePublicTypescriptOptions =
   return plugins as any
 }
 
-export { getManifest } from './manifest-cache'
-export { type Scripts, type ScriptDescriptor, injectScripts, injectScriptsToHtml } from './plugins/inject-script'
+export { getManifestInNode } from './manifest-cache'
+export {
+  type ManifestScriptsFn,
+  type ScriptDescriptor,
+  injectScripts,
+  injectScriptsToHtml,
+} from './plugins/inject-script'
 export { publicTypescript }
 export { type VitePublicTypescriptOptions }

src/node/manifest-cache/index.ts

@@ -35,7 +35,7 @@ export function saveManifestPathToDisk(cacheDir: string) {
   })
 }
 
-export function getManifest(root?: string): Record<string, string> {
+export function getManifestInNode(root?: string): Record<string, string> {
   if (!isEmptyObject(manifestCache.getManifestJson())) {
     return manifestCache.getManifestJson()
   }

src/node/plugins/inject-script.ts

@@ -1,12 +1,12 @@
 import { type HtmlTagDescriptor, type PluginOption } from 'vite'
 import { VPPT_DATA_ATTR, injectTagsToHtml } from '../helper/html'
-import { getManifest } from '../manifest-cache'
+import { getManifestInNode } from '../manifest-cache'
 
 export type ScriptDescriptor = Omit<HtmlTagDescriptor, 'tag'>[]
-export type Scripts = (manifest: Record<string, string>) => ScriptDescriptor
+export type ManifestScriptsFn = (manifest: Record<string, string>) => ScriptDescriptor
 
-function generateScriptTags(scripts: Scripts) {
-  const _scripts = scripts(getManifest()) || []
+function generateScriptTags(scripts: ManifestScriptsFn) {
+  const _scripts = scripts(getManifestInNode()) || []
   const tags: HtmlTagDescriptor[] = _scripts.map((s) => ({
     ...s,
     attrs: {
@@ -19,11 +19,11 @@ function generateScriptTags(scripts: Scripts) {
   return tags
 }
 
-export function injectScriptsToHtml(html: string, scripts: Scripts) {
+export function injectScriptsToHtml(html: string, scripts: ManifestScriptsFn) {
   return injectTagsToHtml(html, generateScriptTags(scripts))
 }
 
-export function injectScripts(scripts: Scripts) {
+export function injectScripts(scripts: ManifestScriptsFn) {
   const plugin: PluginOption = {
     name: 'vite:public-typescript:inject-script',
     enforce: 'post',

src/node/plugins/virtual.ts

@@ -1,6 +1,6 @@
 import { type PluginOption } from 'vite'
 import { resolvedVirtualModuleId, virtualModuleId } from '../helper/virtual'
-import { getManifest } from '../manifest-cache'
+import { getManifestInNode } from '../manifest-cache'
 
 export function pluginVirtual(): PluginOption {
   const plugin: PluginOption = {
@@ -18,7 +18,7 @@ export function pluginVirtual(): PluginOption {
     },
     async load(id) {
       if (id === resolvedVirtualModuleId) {
-        return `export default ${JSON.stringify(getManifest())}`
+        return `export default ${JSON.stringify(getManifestInNode())}`
       }
     },
   }