fix: refactor watch code for tsconfig changes to use watchChange hook

Author: dominikg

packages/vite/src/node/plugins/esbuild.ts

@@ -251,14 +251,48 @@ export function esbuildPlugin(config: ResolvedConfig): Plugin {
     },
   }
 
+  let server: ViteDevServer
+
   return {
     name: 'vite:esbuild',
     configureServer(_server) {
       server = _server
-      server.watcher
-        .on('add', reloadOnTsconfigChange)
-        .on('change', reloadOnTsconfigChange)
-        .on('unlink', reloadOnTsconfigChange)
+    },
+    watchChange(id) {
+      // any tsconfig.json that's added in the workspace could be closer to a code file than a previously cached one
+      // any json file in the tsconfig cache could have been used to compile ts
+      if (
+        path.basename(id) === 'tsconfig.json' ||
+        id.endsWith('.json') /*
+        TODO: the tsconfckCache?.clear() line will make this fail if there are several servers
+              we may need a cache per server if we don't want all servers to share the reset
+              leaving it commented for now because it should still work
+        && tsconfckCache?.hasParseResult(changedFile)
+        */
+      ) {
+        server.config.logger.info(
+          `changed tsconfig file detected: ${id} - Clearing cache and forcing full-reload to ensure TypeScript is compiled with updated config values.`,
+          { clear: server.config.clearScreen, timestamp: true },
+        )
+
+        // TODO: more finegrained invalidation than the nuclear option below
+
+        // clear module graph to remove code compiled with outdated config
+        for (const environment of Object.values(server.environments)) {
+          environment.moduleGraph.invalidateAll()
+        }
+
+        // reset tsconfck cache so that recompile works with up2date configs
+        tsconfckCache?.clear()
+
+        // reload environments
+        for (const environment of Object.values(server.environments)) {
+          environment.hot.send({
+            type: 'full-reload',
+            path: '*',
+          })
+        }
+      }
     },
     buildEnd() {
       // recycle serve to avoid preventing Node self-exit (#6815)
@@ -476,35 +510,3 @@ export async function loadTsconfigJsonForFile(
     throw e
   }
 }
-
-async function reloadOnTsconfigChange(changedFile: string) {
-  // server could be closed externally after a file change is detected
-  if (!server) return
-  // any tsconfig.json that's added in the workspace could be closer to a code file than a previously cached one
-  // any json file in the tsconfig cache could have been used to compile ts
-  if (
-    path.basename(changedFile) === 'tsconfig.json' ||
-    (changedFile.endsWith('.json') &&
-      tsconfckCache?.hasParseResult(changedFile))
-  ) {
-    server.config.logger.info(
-      `changed tsconfig file detected: ${changedFile} - Clearing cache and forcing full-reload to ensure TypeScript is compiled with updated config values.`,
-      { clear: server.config.clearScreen, timestamp: true },
-    )
-
-    // clear module graph to remove code compiled with outdated config
-    server.moduleGraph.invalidateAll()
-
-    // reset tsconfck so that recompile works with up2date configs
-    tsconfckCache?.clear()
-
-    // server may not be available if vite config is updated at the same time
-    if (server) {
-      // force full reload
-      server.hot.send({
-        type: 'full-reload',
-        path: '*',
-      })
-    }
-  }
-}