|
|
@@ -3,10 +3,17 @@ import { DOMNodeTypes, isComment } from './hydration'
|
|
|
|
|
|
// Polyfills for Safari support
|
|
|
// see https://caniuse.com/requestidlecallback
|
|
|
-const requestIdleCallback: Window['requestIdleCallback'] =
|
|
|
- getGlobalThis().requestIdleCallback || (cb => setTimeout(cb, 1))
|
|
|
-const cancelIdleCallback: Window['cancelIdleCallback'] =
|
|
|
- getGlobalThis().cancelIdleCallback || (id => clearTimeout(id))
|
|
|
+// Use lazy initialization to allow tree-shaking when hydrateOnIdle is not used
|
|
|
+let requestIdleCallback: Window['requestIdleCallback']
|
|
|
+let cancelIdleCallback: Window['cancelIdleCallback']
|
|
|
+
|
|
|
+function ensureIdleCallbacks() {
|
|
|
+ if (!requestIdleCallback) {
|
|
|
+ const g = getGlobalThis()
|
|
|
+ requestIdleCallback = g.requestIdleCallback || (cb => setTimeout(cb, 1))
|
|
|
+ cancelIdleCallback = g.cancelIdleCallback || (id => clearTimeout(id))
|
|
|
+ }
|
|
|
+}
|
|
|
|
|
|
/**
|
|
|
* A lazy hydration strategy for async components.
|
|
|
@@ -29,6 +36,7 @@ export type HydrationStrategyFactory<Options> = (
|
|
|
export const hydrateOnIdle: HydrationStrategyFactory<number> =
|
|
|
(timeout = 10000) =>
|
|
|
hydrate => {
|
|
|
+ ensureIdleCallbacks()
|
|
|
const id = requestIdleCallback(hydrate, { timeout })
|
|
|
return () => cancelIdleCallback(id)
|
|
|
}
|