wip: save

diff --git a/packages/runtime-core/src/apiAsyncComponent.ts b/packages/runtime-core/src/apiAsyncComponent.ts
index 199b451f66ffcee4b781849d090c3248d7e786f4..2c0ac4b7d20a0c735b9fab7116bef5a97ee633d0 100644 (file)
--- a/packages/runtime-core/src/apiAsyncComponent.ts
+++ b/packages/runtime-core/src/apiAsyncComponent.ts
@@ -115,26 +115,33 @@ export function defineAsyncComponent<
     )
   }
 
+  let performLoad: () => Promise<ConcreteComponent | void>
+
   return defineComponent({
     name: 'AsyncComponentWrapper',
 
     __asyncLoader: load,
 
     __asyncHydrate(el, instance, hydrate) {
-      const doHydrate = hydrateStrategy
-        ? () => {
-            const teardown = hydrateStrategy(hydrate, cb =>
-              forEachElement(el, cb),
-            )
-            if (teardown) {
-              ;(instance.bum || (instance.bum = [])).push(teardown)
-            }
-          }
-        : hydrate
-      if (resolvedComp) {
-        doHydrate()
+      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),
+          )
+        }
+        if (teardown) {
+          ;(instance.bum || (instance.bum = [])).push(teardown)
+        }
       } else {
-        load().then(() => !instance.isUnmounted && doHydrate())
+        if (resolvedComp) {
+          hydrate()
+        } else {
+          load().then(() => !instance.isUnmounted && hydrate())
+        }
       }
     },
 
@@ -166,19 +173,25 @@ export function defineAsyncComponent<
         (__FEATURE_SUSPENSE__ && suspensible && instance.suspense) ||
         (__SSR__ && isInSSRComponentSetup)
       ) {
-        return load()
-          .then(comp => {
-            return () => createInnerComp(comp, instance)
-          })
-          .catch(err => {
-            onError(err)
-            return () =>
-              errorComponent
-                ? createVNode(errorComponent as ConcreteComponent, {
-                    error: err,
-                  })
-                : null
-          })
+        performLoad = () =>
+          load()
+            .then(comp => {
+              return () => createInnerComp(comp, instance)
+            })
+            .catch(err => {
+              onError(err)
+              return () =>
+                errorComponent
+                  ? createVNode(errorComponent as ConcreteComponent, {
+                      error: err,
+                    })
+                  : null
+            })
+
+        if (!hydrateStrategy) {
+          return performLoad()
+        }
+        return
       }
 
       const loaded = ref(false)
@@ -203,19 +216,25 @@ export function defineAsyncComponent<
         }, timeout)
       }
 
-      load()
-        .then(() => {
-          loaded.value = true
-          if (instance.parent && isKeepAlive(instance.parent.vnode)) {
-            // parent is keep-alive, force update so the loaded component's
-            // name is taken into account
-            instance.parent.update()
-          }
-        })
-        .catch(err => {
-          onError(err)
-          error.value = err
-        })
+      performLoad = () =>
+        load()
+          .then(() => {
+            loaded.value = true
+            if (instance.parent && isKeepAlive(instance.parent.vnode)) {
+              // parent is keep-alive, force update so the loaded component's
+              // name is taken into account
+              instance.parent.update()
+            }
+          })
+          .catch(err => {
+            onError(err)
+            error.value = err
+          })
+
+      // lazy perform load if hydrate strategy is present
+      if (!hydrateStrategy) {
+        performLoad()
+      }
 
       return () => {
         if (loaded.value && resolvedComp) {

diff --git a/packages/vue/__tests__/e2e/hydration-strat-idle.html b/packages/vue/__tests__/e2e/hydration-strat-idle.html
index 23e3aa32a59d5f4776af0cb76d1b92265672600b..d2e71815ffba4b9d55b03dba3c359ec229b0e8ad 100644 (file)
--- a/packages/vue/__tests__/e2e/hydration-strat-idle.html
+++ b/packages/vue/__tests__/e2e/hydration-strat-idle.html
@@ -28,6 +28,7 @@
     loader: () =>
       new Promise(resolve => {
         setTimeout(() => {
+          debugger
           console.log('resolve')
           resolve(Comp)
           requestIdleCallback(() => {