feat(vite): introduce hmrTopLevelAwait option

packages/vite/src/modes/global/dev.ts

@@ -1,13 +1,14 @@
 import type { Plugin, Update, ViteDevServer, ResolvedConfig as ViteResolvedConfig } from 'vite'
 import type { GenerateResult, UnocssPluginContext } from '@unocss/core'
 import { notNull } from '@unocss/core'
+import type { VitePluginConfig } from 'unocss/vite'
 import { LAYER_MARK_ALL, getHash, getPath, resolveId, resolveLayer } from '../../integration'
 
 const WARN_TIMEOUT = 20000
 const WS_EVENT_PREFIX = 'unocss:hmr'
 const HASH_LENGTH = 6
 
-export function GlobalModeDevPlugin({ uno, tokens, tasks, flushTasks, affectedModules, onInvalidate, extract, filter }: UnocssPluginContext): Plugin[] {
+export function GlobalModeDevPlugin({ uno, tokens, tasks, flushTasks, affectedModules, onInvalidate, extract, filter, getConfig }: UnocssPluginContext): Plugin[] {
   const servers: ViteDevServer[] = []
   let base = ''
   const entries = new Set<string>()
@@ -162,18 +163,25 @@ export function GlobalModeDevPlugin({ uno, tokens, tasks, flushTasks, affectedMo
         return env.command === 'serve' && !config.build?.ssr
       },
       enforce: 'post',
-      transform(code, id) {
+      async transform(code, id) {
         const layer = resolveLayer(getPath(id))
 
         // inject css modules to send callback on css load
         if (layer && code.includes('import.meta.hot')) {
-          return `${code}
-if (import.meta.hot) {
+          const immediateFunction = (code: string) => `;(async function() {\n${code}\n})()`
+          const importMetaHot = `if (import.meta.hot) {
   try { await import.meta.hot.send('${WS_EVENT_PREFIX}', ['${layer}', __vite__css.slice(2,${2 + HASH_LENGTH})]); }
   catch (e) { console.warn('[unocss-hmr]', e) }
   if (!import.meta.url.includes('?'))
     await new Promise(resolve => setTimeout(resolve, 100))
 }`
+          const { hmrTopLevelAwait } = await getConfig() as VitePluginConfig
+
+          return `${code}\n${
+            hmrTopLevelAwait !== false
+              ? importMetaHot
+              : immediateFunction(importMetaHot)
+          }`
         }
       },
     },

packages/vite/src/types.ts

@@ -34,4 +34,9 @@ export interface VitePluginConfig<Theme extends {} = {}> extends UserConfig<Them
    * @default true
    */
   postcss?: boolean
+  /**
+   * Whether to use the top-level await
+   * @default true
+   */
+  hmrTopLevelAwait?: boolean
 }

playground/src/auto-imports.d.ts

@@ -111,6 +111,7 @@ declare global {
   const useArrayMap: typeof import('@vueuse/core')['useArrayMap']
   const useArrayReduce: typeof import('@vueuse/core')['useArrayReduce']
   const useArraySome: typeof import('@vueuse/core')['useArraySome']
+  const useArrayUnique: typeof import('@vueuse/core')['useArrayUnique']
   const useAsyncQueue: typeof import('@vueuse/core')['useAsyncQueue']
   const useAsyncState: typeof import('@vueuse/core')['useAsyncState']
   const useAttrs: typeof import('vue')['useAttrs']

playground/vite.config.ts

@@ -3,7 +3,7 @@ import Vue from '@vitejs/plugin-vue'
 import Inspect from 'vite-plugin-inspect'
 import Components from 'unplugin-vue-components/vite'
 import AutoImport from 'unplugin-auto-import/vite'
-import Unocss from '@unocss/vite'
+import UnoCSS from '@unocss/vite'
 import { alias } from '../alias'
 
 export default defineConfig({
@@ -13,7 +13,9 @@ export default defineConfig({
   },
   plugins: [
     Vue(),
-    Unocss(),
+    UnoCSS({
+      hmrTopLevelAwait: false,
+    }),
     Inspect(),
     Components({
       dirs: [