feat: support import.meta.hot.invalidate

Self-accepting modules can call this to continue propagating the HMR update to importers. Conditional `hot.accept` calls do not work unless `hot.invalidate` is called when the condition fails.

packages/plugin-react/src/fast-refresh.ts

@@ -104,6 +104,8 @@ import(/* @vite-ignore */ import.meta.url).then(mod => {
   if (isReactRefreshBoundary(mod)) {
     import.meta.hot.accept();
     ${timeout}
+  } else {
+    import.meta.hot.invalidate();
   }
 })
 `

packages/vite/src/client/client.ts

@@ -546,10 +546,9 @@ export function createHotContext(ownerPath: string): ViteHotContext {
     // eslint-disable-next-line @typescript-eslint/no-empty-function
     decline() {},
 
+    // tell the server to re-perform hmr propagation from this module as root
     invalidate() {
-      // TODO should tell the server to re-perform hmr propagation
-      // from this module as root
-      location.reload()
+      this.send('vite:invalidate', ownerPath)
     },
 
     // custom events

packages/vite/src/node/server/index.ts

@@ -64,14 +64,15 @@ import {
   serveStaticMiddleware
 } from './middlewares/static'
 import { timeMiddleware } from './middlewares/time'
-import { ModuleGraph } from './moduleGraph'
+import { ModuleGraph, ModuleNode } from './moduleGraph'
 import { errorMiddleware, prepareError } from './middlewares/error'
-import type { HmrOptions } from './hmr'
+import { getShortName, HmrOptions, updateModules } from './hmr'
 import { handleFileAddUnlink, handleHMRUpdate } from './hmr'
 import { openBrowser } from './openBrowser'
 import type { TransformOptions, TransformResult } from './transformRequest'
 import { transformRequest } from './transformRequest'
 import { searchForWorkspaceRoot } from './searchRoot'
+import { HMRPayload } from '../../types/hmrPayload'
 
 export { searchForWorkspaceRoot } from './searchRoot'
 
@@ -489,6 +490,18 @@ export async function createServer(
     handleFileAddUnlink(normalizePath(file), server)
   })
 
+  ws.on('vite:invalidate', async (url: string) => {
+    const mod = moduleGraph.urlToModuleMap.get(url)
+    if (mod) {
+      const importers = new Set<ModuleNode>()
+      for (const importer of mod.importers) {
+        importers.add(importer)
+      }
+      const file = getShortName(mod.file!, config.root)
+      updateModules(file, Array.from(importers), Date.now(), server)
+    }
+  })
+
   if (!middlewareMode && httpServer) {
     httpServer.once('listening', () => {
       // update actual port since this may be different from initial value