chore: improve

packages/runtime-core/src/apiAsyncComponent.ts

@@ -124,15 +124,22 @@ export function defineAsyncComponent<
 
     __asyncHydrate(el, instance, hydrate) {
       if (hydrateStrategy) {
-        let teardown: (() => void) | void
-        if (resolvedComp) {
-          teardown = hydrateStrategy(hydrate, cb => forEachElement(el, cb))
-        } else {
-          teardown = hydrateStrategy(
-            () => performLoad().then(() => !instance.isUnmounted && hydrate()),
-            cb => forEachElement(el, cb),
-          )
+        const hydrateWithCallback = (postHydrate?: () => void) => {
+          if (resolvedComp) {
+            hydrate()
+            postHydrate && postHydrate()
+          } else {
+            performLoad().then(() => {
+              if (!instance.isUnmounted) {
+                hydrate()
+                postHydrate && postHydrate()
+              }
+            })
+          }
         }
+        let teardown = hydrateStrategy(hydrateWithCallback, cb =>
+          forEachElement(el, cb),
+        )
         if (teardown) {
           ;(instance.bum || (instance.bum = [])).push(teardown)
         }

packages/runtime-core/src/hydrationStrategies.ts

@@ -18,7 +18,7 @@ const cancelIdleCallback: Window['cancelIdleCallback'] =
  *          listeners.
  */
 export type HydrationStrategy = (
-  hydrate: () => void | Promise<any>,
+  hydrate: (postHydrate?: () => void) => void,
   forEachElement: (cb: (el: Element) => any) => void,
 ) => (() => void) | void
 
@@ -29,7 +29,7 @@ export type HydrationStrategyFactory<Options> = (
 export const hydrateOnIdle: HydrationStrategyFactory<number> =
   (timeout = 10000) =>
   hydrate => {
-    const id = requestIdleCallback(hydrate, { timeout })
+    const id = requestIdleCallback(() => hydrate(), { timeout })
     return () => cancelIdleCallback(id)
   }
 
@@ -73,8 +73,9 @@ export const hydrateOnMediaQuery: HydrationStrategyFactory<string> =
       if (mql.matches) {
         hydrate()
       } else {
-        mql.addEventListener('change', hydrate, { once: true })
-        return () => mql.removeEventListener('change', hydrate)
+        const doHydrate = () => hydrate()
+        mql.addEventListener('change', doHydrate, { once: true })
+        return () => mql.removeEventListener('change', doHydrate)
       }
     }
   }
@@ -86,14 +87,14 @@ export const hydrateOnInteraction: HydrationStrategyFactory<
   (hydrate, forEach) => {
     if (isString(interactions)) interactions = [interactions]
     let hasHydrated = false
-    const doHydrate = async (e: Event) => {
+    const doHydrate = (e: Event) => {
       if (!hasHydrated) {
         hasHydrated = true
         teardown()
-        // eslint-disable-next-line no-restricted-syntax
-        await hydrate()
-        // replay event
-        e.target!.dispatchEvent(new (e.constructor as any)(e.type, e))
+        hydrate(() => {
+          // replay event
+          e.target!.dispatchEvent(new (e.constructor as any)(e.type, e))
+        })
       }
     }
     const teardown = () => {