fix(vite): update transformed module when config changed (#1163)

Co-authored-by: Anthony Fu <anthonyfu117@hotmail.com>
unocss · Jun 29, 2022 · 945f90a · 945f90a
1 parent e9334c9
commit 945f90a
Show file tree

Hide file tree

Showing 4 changed files with 29 additions and 13 deletions.
diff --git a/packages/core/src/types.ts b/packages/core/src/types.ts
@@ -500,6 +500,9 @@ export interface UnocssPluginContext<Config extends UserConfig = UserConfig> {
   tokens: Set<string>
   /** Map for all module's raw content */
   modules: BetterMap<string, string>
+  /** Module IDs that been affected by UnoCSS */
+  affectedModules: Set<string>
+
   filter: (code: string, id: string) => boolean
   extract: (code: string, id?: string) => Promise<void>
 

diff --git a/packages/shared-integration/src/context.ts b/packages/shared-integration/src/context.ts
@@ -22,6 +22,7 @@ export function createContext<Config extends UserConfig<any> = UserConfig<any>>(
 
   const modules = new BetterMap<string, string>()
   const tokens = new Set<string>()
+  const affectedModules = new Set<string>()
 
   let ready = reloadConfig()
 
@@ -97,6 +98,7 @@ export function createContext<Config extends UserConfig<any> = UserConfig<any>>(
     },
     tokens,
     modules,
+    affectedModules,
     invalidate,
     onInvalidate(fn: () => void) {
       invalidations.push(fn)

diff --git a/packages/vite/src/modes/global/dev.ts b/packages/vite/src/modes/global/dev.ts
@@ -1,11 +1,12 @@
-import type { Plugin, ViteDevServer, ResolvedConfig as ViteResolvedConfig } from 'vite'
+import type { Plugin, Update, ViteDevServer, ResolvedConfig as ViteResolvedConfig } from 'vite'
 import type { UnocssPluginContext } from '@unocss/core'
+import { notNull } from '@unocss/core'
 import { LAYER_MARK_ALL, getPath, resolveId, resolveLayer } from '../../integration'
 
 const WARN_TIMEOUT = 20000
 const WS_EVENT_PREFIX = 'unocss:hmr'
 
-export function GlobalModeDevPlugin({ uno, tokens, onInvalidate, extract, filter }: UnocssPluginContext): Plugin[] {
+export function GlobalModeDevPlugin({ uno, tokens, affectedModules, onInvalidate, extract, filter }: UnocssPluginContext): Plugin[] {
   const servers: ViteDevServer[] = []
   let base = ''
 
@@ -26,30 +27,37 @@ export function GlobalModeDevPlugin({ uno, tokens, onInvalidate, extract, filter
       base = base.slice(0, base.length - 1)
   }
 
-  function invalidate(timer = 10) {
+  function invalidate(timer = 10, ids: Set<string> = entries) {
     for (const server of servers) {
-      for (const id of entries) {
+      for (const id of ids) {
         const mod = server.moduleGraph.getModuleById(id)
         if (!mod)
           continue
         server!.moduleGraph.invalidateModule(mod)
       }
     }
     clearTimeout(invalidateTimer)
-    invalidateTimer = setTimeout(sendUpdate, timer)
+    invalidateTimer = setTimeout(() => sendUpdate(ids), timer)
   }
 
-  function sendUpdate() {
+  function sendUpdate(ids: Set<string>) {
     lastUpdate = Date.now()
     for (const server of servers) {
       server.ws.send({
         type: 'update',
-        updates: Array.from(entries).map(i => ({
-          acceptedPath: i,
-          path: i,
-          timestamp: lastUpdate,
-          type: 'js-update',
-        })),
+        updates: Array.from(ids)
+          .map((id) => {
+            const mod = server.moduleGraph.getModuleById(id)
+            if (!mod)
+              return null
+            return <Update>{
+              acceptedPath: mod.url,
+              path: mod.url,
+              timestamp: lastUpdate,
+              type: 'js-update',
+            }
+          })
+          .filter(notNull),
       })
     }
   }
@@ -71,7 +79,9 @@ export function GlobalModeDevPlugin({ uno, tokens, onInvalidate, extract, filter
     }
   }
 
-  onInvalidate(invalidate)
+  onInvalidate(() => {
+    invalidate(0, new Set([...entries, ...affectedModules]))
+  })
 
   return [
     {

diff --git a/packages/vite/src/transformers.ts b/packages/vite/src/transformers.ts
@@ -24,6 +24,7 @@ export function initTransformerPlugins(ctx: UnocssPluginContext): Plugin[] {
     }
 
     if (s.hasChanged()) {
+      ctx.affectedModules.add(id)
       return {
         code: s.toString(),
         map: s.generateMap({ hires: true, source: id }),