wip: layout hydration strategies

packages/runtime-core/src/apiAsyncComponent.ts

@@ -16,15 +16,14 @@ import { ErrorCodes, handleError } from './errorHandling'
 import { isKeepAlive } from './components/KeepAlive'
 import { queueJob } from './scheduler'
 import { markAsyncBoundary } from './helpers/useId'
+import type { HydrationStrategy } from './hydrationStrategies'
 
 export type AsyncComponentResolveResult<T = Component> = T | { default: T } // es modules
 
 export type AsyncComponentLoader<T = any> = () => Promise<
   AsyncComponentResolveResult<T>
 >
 
-type HydrationStrategy = (doHydrate: () => void) => void
-
 export interface AsyncComponentOptions<T = any> {
   loader: AsyncComponentLoader<T>
   loadingComponent?: Component
@@ -57,7 +56,7 @@ export function defineAsyncComponent<
     loadingComponent,
     errorComponent,
     delay = 200,
-    // hydrate,
+    hydrate: hydrateStrategy,
     timeout, // undefined = never times out
     suspensible = true,
     onError: userOnError,
@@ -122,11 +121,12 @@ export function defineAsyncComponent<
 
     __asyncLoader: load,
 
-    __asyncHydrate(instance, hydrate) {
+    __asyncHydrate(el, instance, hydrate) {
+      const doHydrate = hydrateStrategy ? hydrateStrategy(el, hydrate) : hydrate
       if (resolvedComp) {
-        hydrate()
+        doHydrate()
       } else {
-        load().then(() => !instance.isUnmounted && hydrate())
+        load().then(() => !instance.isUnmounted && doHydrate())
       }
     },
 

packages/runtime-core/src/componentOptions.ts

@@ -204,6 +204,7 @@ export interface ComponentOptionsBase<
    * @internal
    */
   __asyncHydrate?: (
+    el: Element,
     instance: ComponentInternalInstance,
     hydrate: () => void,
   ) => void

packages/runtime-core/src/hydrationStrategies.ts

@@ -0,0 +1,19 @@
+export type HydrationStrategy = (el: Element, hydrate: () => void) => () => void
+
+export type HydrationStrategyFactory<Options = any> = (
+  options?: Options,
+) => HydrationStrategy
+
+export const hydrateOnTimeout: HydrationStrategyFactory<number> =
+  (delay = 100) =>
+  (el, hydrate) =>
+  () =>
+    setTimeout(hydrate, delay)
+
+export const hydrateOnVisible: HydrationStrategyFactory<number> = margin => {
+  return hydrate => () => hydrate
+}
+
+export const hydrateOnMediaQuery: HydrationStrategyFactory<string> = query => {
+  return hydrate => () => hydrate
+}

packages/runtime-core/src/index.ts

@@ -64,6 +64,7 @@ export { useAttrs, useSlots } from './apiSetupHelpers'
 export { useModel } from './helpers/useModel'
 export { useTemplateRef } from './helpers/useTemplateRef'
 export { useId } from './helpers/useId'
+export { hydrateOnTimeout } from './hydrationStrategies'
 
 // <script setup> API ----------------------------------------------------------
 
@@ -327,6 +328,10 @@ export type {
   AsyncComponentOptions,
   AsyncComponentLoader,
 } from './apiAsyncComponent'
+export type {
+  HydrationStrategy,
+  HydrationStrategyFactory,
+} from './hydrationStrategies'
 export type { HMRRuntime } from './hmr'
 
 // Internal API ----------------------------------------------------------------

packages/runtime-core/src/renderer.ts

@@ -1327,6 +1327,7 @@ function baseCreateRenderer(
 
           if (isAsyncWrapperVNode) {
             ;(type as ComponentOptions).__asyncHydrate!(
+              el as Element,
               instance,
               hydrateSubTree,
             )