@ai-growth/nextjs
Version:
Seamlessly integrate Sanity CMS with Next.js applications for automated blog routing and rendering
143 lines • 4.31 kB
TypeScript
/**
* @fileoverview Lazy Loading Utilities
*
* This module provides utilities for implementing lazy loading patterns,
* including React.lazy() wrappers, dynamic imports, and intersection observer-based loading.
*/
import React, { ComponentType } from 'react';
import type { ReactNode } from 'react';
/**
* Lazy component loader function
*/
export type LazyComponentLoader<T = any> = () => Promise<{
default: ComponentType<T>;
} | ComponentType<T>>;
/**
* Lazy load options
*/
export interface LazyLoadOptions {
/** Loading fallback component */
fallback?: ReactNode;
/** Error fallback component */
errorFallback?: ComponentType<{
error: Error;
retry: () => void;
}>;
/** Retry attempts on failure */
retryAttempts?: number;
/** Delay before retry (ms) */
retryDelay?: number;
/** Enable loading in development */
enableInDev?: boolean;
/** Preload on hover */
preloadOnHover?: boolean;
/** Preload on viewport enter */
preloadOnIntersect?: boolean;
}
/**
* Dynamic import result
*/
export interface DynamicImportResult<T = any> {
/** Loaded component */
component: ComponentType<T> | null;
/** Loading state */
loading: boolean;
/** Error state */
error: Error | null;
/** Load function */
load: () => Promise<void>;
/** Retry function */
retry: () => void;
}
/**
* Intersection observer options
*/
export interface IntersectionObserverOptions {
/** Root margin for intersection */
rootMargin?: string;
/** Intersection threshold */
threshold?: number | number[];
/** Root element */
root?: Element | null;
/** Trigger once only */
triggerOnce?: boolean;
}
/**
* Bundle chunk information
*/
export interface ChunkInfo {
/** Chunk name */
name: string;
/** Estimated size */
size?: number;
/** Dependencies */
dependencies?: string[];
/** Preload priority */
priority?: 'high' | 'medium' | 'low';
}
/**
* Enhanced React.lazy wrapper with error handling and retry logic
*/
export declare function createLazyComponent<T = any>(loader: LazyComponentLoader<T>, options?: LazyLoadOptions): ComponentType<T> & {
preload: () => Promise<any>;
};
/**
* Create lazy component with chunk information
*/
export declare function createLazyComponentWithChunk<T = any>(loader: LazyComponentLoader<T>, chunkInfo: ChunkInfo, options?: LazyLoadOptions): ComponentType<T> & {
preload: () => Promise<any>;
chunkInfo: ChunkInfo;
};
/**
* Dynamic import hook for runtime component loading
*/
export declare function useDynamicImport<T = any>(loader: LazyComponentLoader<T>, trigger?: boolean): DynamicImportResult<T>;
/**
* Intersection observer hook for lazy loading
*/
export declare function useIntersectionObserver(options?: IntersectionObserverOptions): [React.RefObject<Element>, boolean];
/**
* Preload multiple components
*/
export declare function preloadComponents(components: Array<ComponentType<any> & {
preload?: () => Promise<any>;
}>): Promise<void>;
/**
* Preload components by priority
*/
export declare function preloadByPriority(components: Array<{
component: ComponentType<any> & {
preload?: () => Promise<any>;
};
priority: 'high' | 'medium' | 'low';
}>): Promise<void>;
/**
* Route-based preloading
*/
export declare function preloadOnRouteChange(routeComponentMap: Record<string, ComponentType<any> & {
preload?: () => Promise<any>;
}>): void;
/**
* Hover-based preloading
*/
export declare function useHoverPreload<T = any>(loader: LazyComponentLoader<T>, delay?: number): [React.RefObject<HTMLElement>, () => void];
/**
* Check if lazy loading is supported
*/
export declare function isLazyLoadingSupported(): boolean;
/**
* Get component bundle size estimate
*/
export declare function estimateComponentSize(component: ComponentType<any>): number;
/**
* Create chunk naming strategy
*/
export declare function createChunkName(componentName: string, category?: string): string;
/**
* Create preloader for Next.js pages
*/
export declare function createPagePreloader(pageMap: Record<string, () => Promise<any>>): {
preloadPage: (route: string) => void;
preloadPages: (routes: string[]) => void;
};
//# sourceMappingURL=lazy-loading.d.ts.map