lazy-render-virtual-scroll 2.0.0 → 2.1.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +172 -87
- package/dist/cjs/adapters/react/adapters/react/components/withLazyRender.d.ts +22 -0
- package/dist/cjs/adapters/react/adapters/react/components/withLazyRender.d.ts.map +1 -0
- package/dist/cjs/adapters/react/adapters/react/hooks/useLazyComponent.d.ts +38 -0
- package/dist/cjs/adapters/react/adapters/react/hooks/useLazyComponent.d.ts.map +1 -0
- package/dist/cjs/adapters/react/components/withLazyRender.d.ts +22 -0
- package/dist/cjs/adapters/react/components/withLazyRender.d.ts.map +1 -0
- package/dist/cjs/adapters/react/core/GlobalScrollManager.d.ts +61 -0
- package/dist/cjs/adapters/react/core/GlobalScrollManager.d.ts.map +1 -0
- package/dist/cjs/adapters/react/hooks/useLazyComponent.d.ts +38 -0
- package/dist/cjs/adapters/react/hooks/useLazyComponent.d.ts.map +1 -0
- package/dist/cjs/adapters/react/index.d.ts +5 -0
- package/dist/cjs/adapters/react/index.d.ts.map +1 -1
- package/dist/cjs/angular/adapters/react/components/withLazyRender.d.ts +22 -0
- package/dist/cjs/angular/adapters/react/components/withLazyRender.d.ts.map +1 -0
- package/dist/cjs/angular/adapters/react/hooks/useLazyComponent.d.ts +38 -0
- package/dist/cjs/angular/adapters/react/hooks/useLazyComponent.d.ts.map +1 -0
- package/dist/cjs/angular/core/GlobalScrollManager.d.ts +61 -0
- package/dist/cjs/angular/core/GlobalScrollManager.d.ts.map +1 -0
- package/dist/cjs/angular/index.d.ts +5 -0
- package/dist/cjs/angular/index.d.ts.map +1 -1
- package/dist/cjs/core/GlobalScrollManager.d.ts +61 -0
- package/dist/cjs/core/GlobalScrollManager.d.ts.map +1 -0
- package/dist/cjs/index.d.ts +5 -0
- package/dist/cjs/index.d.ts.map +1 -1
- package/dist/cjs/index.js +269 -0
- package/dist/cjs/index.js.map +1 -1
- package/dist/cjs/svelte/adapters/react/components/withLazyRender.d.ts +22 -0
- package/dist/cjs/svelte/adapters/react/components/withLazyRender.d.ts.map +1 -0
- package/dist/cjs/svelte/adapters/react/hooks/useLazyComponent.d.ts +38 -0
- package/dist/cjs/svelte/adapters/react/hooks/useLazyComponent.d.ts.map +1 -0
- package/dist/cjs/svelte/core/GlobalScrollManager.d.ts +61 -0
- package/dist/cjs/svelte/core/GlobalScrollManager.d.ts.map +1 -0
- package/dist/cjs/svelte/index.d.ts +5 -0
- package/dist/cjs/svelte/index.d.ts.map +1 -1
- package/dist/cjs/vue/adapters/react/components/withLazyRender.d.ts +22 -0
- package/dist/cjs/vue/adapters/react/components/withLazyRender.d.ts.map +1 -0
- package/dist/cjs/vue/adapters/react/hooks/useLazyComponent.d.ts +38 -0
- package/dist/cjs/vue/adapters/react/hooks/useLazyComponent.d.ts.map +1 -0
- package/dist/cjs/vue/core/GlobalScrollManager.d.ts +61 -0
- package/dist/cjs/vue/core/GlobalScrollManager.d.ts.map +1 -0
- package/dist/cjs/vue/index.d.ts +5 -0
- package/dist/cjs/vue/index.d.ts.map +1 -1
- package/dist/esm/adapters/react/adapters/react/components/withLazyRender.d.ts +22 -0
- package/dist/esm/adapters/react/adapters/react/components/withLazyRender.d.ts.map +1 -0
- package/dist/esm/adapters/react/adapters/react/hooks/useLazyComponent.d.ts +38 -0
- package/dist/esm/adapters/react/adapters/react/hooks/useLazyComponent.d.ts.map +1 -0
- package/dist/esm/adapters/react/components/withLazyRender.d.ts +22 -0
- package/dist/esm/adapters/react/components/withLazyRender.d.ts.map +1 -0
- package/dist/esm/adapters/react/core/GlobalScrollManager.d.ts +61 -0
- package/dist/esm/adapters/react/core/GlobalScrollManager.d.ts.map +1 -0
- package/dist/esm/adapters/react/hooks/useLazyComponent.d.ts +38 -0
- package/dist/esm/adapters/react/hooks/useLazyComponent.d.ts.map +1 -0
- package/dist/esm/adapters/react/index.d.ts +5 -0
- package/dist/esm/adapters/react/index.d.ts.map +1 -1
- package/dist/esm/angular/adapters/react/components/withLazyRender.d.ts +22 -0
- package/dist/esm/angular/adapters/react/components/withLazyRender.d.ts.map +1 -0
- package/dist/esm/angular/adapters/react/hooks/useLazyComponent.d.ts +38 -0
- package/dist/esm/angular/adapters/react/hooks/useLazyComponent.d.ts.map +1 -0
- package/dist/esm/angular/core/GlobalScrollManager.d.ts +61 -0
- package/dist/esm/angular/core/GlobalScrollManager.d.ts.map +1 -0
- package/dist/esm/angular/index.d.ts +5 -0
- package/dist/esm/angular/index.d.ts.map +1 -1
- package/dist/esm/core/GlobalScrollManager.d.ts +61 -0
- package/dist/esm/core/GlobalScrollManager.d.ts.map +1 -0
- package/dist/esm/index.d.ts +5 -0
- package/dist/esm/index.d.ts.map +1 -1
- package/dist/esm/index.js +266 -1
- package/dist/esm/index.js.map +1 -1
- package/dist/esm/svelte/adapters/react/components/withLazyRender.d.ts +22 -0
- package/dist/esm/svelte/adapters/react/components/withLazyRender.d.ts.map +1 -0
- package/dist/esm/svelte/adapters/react/hooks/useLazyComponent.d.ts +38 -0
- package/dist/esm/svelte/adapters/react/hooks/useLazyComponent.d.ts.map +1 -0
- package/dist/esm/svelte/core/GlobalScrollManager.d.ts +61 -0
- package/dist/esm/svelte/core/GlobalScrollManager.d.ts.map +1 -0
- package/dist/esm/svelte/index.d.ts +5 -0
- package/dist/esm/svelte/index.d.ts.map +1 -1
- package/dist/esm/vue/adapters/react/components/withLazyRender.d.ts +22 -0
- package/dist/esm/vue/adapters/react/components/withLazyRender.d.ts.map +1 -0
- package/dist/esm/vue/adapters/react/hooks/useLazyComponent.d.ts +38 -0
- package/dist/esm/vue/adapters/react/hooks/useLazyComponent.d.ts.map +1 -0
- package/dist/esm/vue/core/GlobalScrollManager.d.ts +61 -0
- package/dist/esm/vue/core/GlobalScrollManager.d.ts.map +1 -0
- package/dist/esm/vue/index.d.ts +5 -0
- package/dist/esm/vue/index.d.ts.map +1 -1
- package/dist/index.d.ts +113 -2
- package/package.json +3 -3
|
@@ -0,0 +1,61 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Global Scroll Manager
|
|
3
|
+
* Singleton that manages scroll events for all lazy-render components
|
|
4
|
+
* Uses only 2 event listeners for ALL components (scroll + resize)
|
|
5
|
+
*/
|
|
6
|
+
export interface ScrollManagerConfig {
|
|
7
|
+
scrollThrottle?: number;
|
|
8
|
+
resizeDebounce?: number;
|
|
9
|
+
}
|
|
10
|
+
export interface ScrollListener {
|
|
11
|
+
id: string;
|
|
12
|
+
callback: (scrollTop: number, container: HTMLElement) => void;
|
|
13
|
+
container: HTMLElement;
|
|
14
|
+
}
|
|
15
|
+
declare class GlobalScrollManagerClass {
|
|
16
|
+
private static instance;
|
|
17
|
+
private listeners;
|
|
18
|
+
private scrollThrottle;
|
|
19
|
+
private resizeDebounce;
|
|
20
|
+
private scrollHandler;
|
|
21
|
+
private resizeHandler;
|
|
22
|
+
private isInitialized;
|
|
23
|
+
private constructor();
|
|
24
|
+
static getInstance(config?: ScrollManagerConfig): GlobalScrollManagerClass;
|
|
25
|
+
/**
|
|
26
|
+
* Register a scroll listener
|
|
27
|
+
* Only 2 event listeners total (scroll + resize) for ALL components
|
|
28
|
+
*/
|
|
29
|
+
register(id: string, container: HTMLElement, callback: (scrollTop: number, container: HTMLElement) => void): void;
|
|
30
|
+
/**
|
|
31
|
+
* Unregister a scroll listener
|
|
32
|
+
*/
|
|
33
|
+
unregister(id: string): void;
|
|
34
|
+
/**
|
|
35
|
+
* Initialize global event listeners
|
|
36
|
+
* Only called once, regardless of how many components
|
|
37
|
+
*/
|
|
38
|
+
private initialize;
|
|
39
|
+
/**
|
|
40
|
+
* Cleanup event listeners
|
|
41
|
+
*/
|
|
42
|
+
private cleanup;
|
|
43
|
+
/**
|
|
44
|
+
* Throttle helper
|
|
45
|
+
*/
|
|
46
|
+
private throttle;
|
|
47
|
+
/**
|
|
48
|
+
* Debounce helper
|
|
49
|
+
*/
|
|
50
|
+
private debounce;
|
|
51
|
+
/**
|
|
52
|
+
* Get stats
|
|
53
|
+
*/
|
|
54
|
+
getStats(): {
|
|
55
|
+
listenerCount: number;
|
|
56
|
+
isInitialized: boolean;
|
|
57
|
+
};
|
|
58
|
+
}
|
|
59
|
+
export declare const GlobalScrollManager: GlobalScrollManagerClass;
|
|
60
|
+
export default GlobalScrollManager;
|
|
61
|
+
//# sourceMappingURL=GlobalScrollManager.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"GlobalScrollManager.d.ts","sourceRoot":"","sources":["../../src/core/GlobalScrollManager.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,MAAM,WAAW,mBAAmB;IAClC,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB;AAED,MAAM,WAAW,cAAc;IAC7B,EAAE,EAAE,MAAM,CAAC;IACX,QAAQ,EAAE,CAAC,SAAS,EAAE,MAAM,EAAE,SAAS,EAAE,WAAW,KAAK,IAAI,CAAC;IAC9D,SAAS,EAAE,WAAW,CAAC;CACxB;AAED,cAAM,wBAAwB;IAC5B,OAAO,CAAC,MAAM,CAAC,QAAQ,CAA2B;IAClD,OAAO,CAAC,SAAS,CAA0C;IAC3D,OAAO,CAAC,cAAc,CAAS;IAC/B,OAAO,CAAC,cAAc,CAAS;IAC/B,OAAO,CAAC,aAAa,CAA6B;IAClD,OAAO,CAAC,aAAa,CAA6B;IAClD,OAAO,CAAC,aAAa,CAAkB;IAEvC,OAAO;IAKP,MAAM,CAAC,WAAW,CAAC,MAAM,CAAC,EAAE,mBAAmB,GAAG,wBAAwB;IAO1E;;;OAGG;IACH,QAAQ,CACN,EAAE,EAAE,MAAM,EACV,SAAS,EAAE,WAAW,EACtB,QAAQ,EAAE,CAAC,SAAS,EAAE,MAAM,EAAE,SAAS,EAAE,WAAW,KAAK,IAAI,GAC5D,IAAI;IAQP;;OAEG;IACH,UAAU,CAAC,EAAE,EAAE,MAAM,GAAG,IAAI;IAQ5B;;;OAGG;IACH,OAAO,CAAC,UAAU;IAwBlB;;OAEG;IACH,OAAO,CAAC,OAAO;IAcf;;OAEG;IACH,OAAO,CAAC,QAAQ;IAWhB;;OAEG;IACH,OAAO,CAAC,QAAQ;IAQhB;;OAEG;IACH,QAAQ,IAAI;QACV,aAAa,EAAE,MAAM,CAAC;QACtB,aAAa,EAAE,OAAO,CAAC;KACxB;CAMF;AAGD,eAAO,MAAM,mBAAmB,0BAAyC,CAAC;AAC1E,eAAe,mBAAmB,CAAC"}
|
|
@@ -25,10 +25,15 @@ export { PerformanceAnalytics } from './core/PerformanceAnalytics';
|
|
|
25
25
|
export { PerformanceDashboard } from './core/PerformanceDashboard';
|
|
26
26
|
export { AccessibilityManager } from './core/AccessibilityManager';
|
|
27
27
|
export { AnimationManager } from './core/AnimationManager';
|
|
28
|
+
export { GlobalScrollManager } from './core/GlobalScrollManager';
|
|
28
29
|
export type { EngineConfig, VisibleRange, FetchMoreCallback, EngineState, ScrollAnalysis } from './core/types';
|
|
29
30
|
export { ScrollObserver } from './platform/browser/ScrollObserver';
|
|
30
31
|
export { useLazyList } from './adapters/react/useLazyList';
|
|
31
32
|
export { LazyList } from './adapters/react/LazyList';
|
|
33
|
+
export { useLazyComponent } from './adapters/react/hooks/useLazyComponent';
|
|
34
|
+
export { withLazyRender } from './adapters/react/hooks/useLazyComponent';
|
|
35
|
+
export { createLazyComponent } from './adapters/react/components/withLazyRender';
|
|
36
|
+
export type { LazyMode } from './adapters/react/hooks/useLazyComponent';
|
|
32
37
|
export { LazyScroll, createLazyScroll } from './adapters/vanilla/lazyScroll';
|
|
33
38
|
declare class LazyScrollElementClass {
|
|
34
39
|
constructor();
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AACvC,OAAO,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AACrD,OAAO,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAC;AACzD,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AACnD,OAAO,EAAE,yBAAyB,EAAE,MAAM,kCAAkC,CAAC;AAC7E,OAAO,EAAE,oBAAoB,EAAE,MAAM,6BAA6B,CAAC;AACnE,OAAO,EAAE,2BAA2B,EAAE,MAAM,oCAAoC,CAAC;AACjF,OAAO,EAAE,wBAAwB,EAAE,MAAM,iCAAiC,CAAC;AAC3E,OAAO,EAAE,wBAAwB,EAAE,MAAM,iCAAiC,CAAC;AAC3E,OAAO,EAAE,wBAAwB,EAAE,MAAM,iCAAiC,CAAC;AAC3E,OAAO,EAAE,yBAAyB,EAAE,MAAM,kCAAkC,CAAC;AAC7E,OAAO,EAAE,oBAAoB,EAAE,MAAM,6BAA6B,CAAC;AACnE,OAAO,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AACrD,OAAO,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AACvD,OAAO,EAAE,kBAAkB,EAAE,MAAM,2BAA2B,CAAC;AAC/D,OAAO,EAAE,mBAAmB,EAAE,MAAM,4BAA4B,CAAC;AACjE,OAAO,EAAE,oBAAoB,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AAC7E,OAAO,EAAE,sBAAsB,EAAE,MAAM,+BAA+B,CAAC;AACvE,OAAO,EAAE,qBAAqB,EAAE,MAAM,8BAA8B,CAAC;AACrE,OAAO,EAAE,mBAAmB,EAAE,MAAM,4BAA4B,CAAC;AACjE,OAAO,EAAE,sBAAsB,EAAE,MAAM,+BAA+B,CAAC;AACvE,OAAO,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAC;AACzD,OAAO,EAAE,qBAAqB,EAAE,MAAM,8BAA8B,CAAC;AACrE,OAAO,EAAE,oBAAoB,EAAE,MAAM,6BAA6B,CAAC;AACnE,OAAO,EAAE,oBAAoB,EAAE,MAAM,6BAA6B,CAAC;AACnE,OAAO,EAAE,oBAAoB,EAAE,MAAM,6BAA6B,CAAC;AACnE,OAAO,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAC3D,YAAY,EAAE,YAAY,EAAE,YAAY,EAAE,iBAAiB,EAAE,WAAW,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAG/G,OAAO,EAAE,cAAc,EAAE,MAAM,mCAAmC,CAAC;AAGnE,OAAO,EAAE,WAAW,EAAE,MAAM,8BAA8B,CAAC;AAC3D,OAAO,EAAE,QAAQ,EAAE,MAAM,2BAA2B,CAAC;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AACvC,OAAO,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AACrD,OAAO,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAC;AACzD,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AACnD,OAAO,EAAE,yBAAyB,EAAE,MAAM,kCAAkC,CAAC;AAC7E,OAAO,EAAE,oBAAoB,EAAE,MAAM,6BAA6B,CAAC;AACnE,OAAO,EAAE,2BAA2B,EAAE,MAAM,oCAAoC,CAAC;AACjF,OAAO,EAAE,wBAAwB,EAAE,MAAM,iCAAiC,CAAC;AAC3E,OAAO,EAAE,wBAAwB,EAAE,MAAM,iCAAiC,CAAC;AAC3E,OAAO,EAAE,wBAAwB,EAAE,MAAM,iCAAiC,CAAC;AAC3E,OAAO,EAAE,yBAAyB,EAAE,MAAM,kCAAkC,CAAC;AAC7E,OAAO,EAAE,oBAAoB,EAAE,MAAM,6BAA6B,CAAC;AACnE,OAAO,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AACrD,OAAO,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AACvD,OAAO,EAAE,kBAAkB,EAAE,MAAM,2BAA2B,CAAC;AAC/D,OAAO,EAAE,mBAAmB,EAAE,MAAM,4BAA4B,CAAC;AACjE,OAAO,EAAE,oBAAoB,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AAC7E,OAAO,EAAE,sBAAsB,EAAE,MAAM,+BAA+B,CAAC;AACvE,OAAO,EAAE,qBAAqB,EAAE,MAAM,8BAA8B,CAAC;AACrE,OAAO,EAAE,mBAAmB,EAAE,MAAM,4BAA4B,CAAC;AACjE,OAAO,EAAE,sBAAsB,EAAE,MAAM,+BAA+B,CAAC;AACvE,OAAO,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAC;AACzD,OAAO,EAAE,qBAAqB,EAAE,MAAM,8BAA8B,CAAC;AACrE,OAAO,EAAE,oBAAoB,EAAE,MAAM,6BAA6B,CAAC;AACnE,OAAO,EAAE,oBAAoB,EAAE,MAAM,6BAA6B,CAAC;AACnE,OAAO,EAAE,oBAAoB,EAAE,MAAM,6BAA6B,CAAC;AACnE,OAAO,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAC3D,OAAO,EAAE,mBAAmB,EAAE,MAAM,4BAA4B,CAAC;AACjE,YAAY,EAAE,YAAY,EAAE,YAAY,EAAE,iBAAiB,EAAE,WAAW,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAG/G,OAAO,EAAE,cAAc,EAAE,MAAM,mCAAmC,CAAC;AAGnE,OAAO,EAAE,WAAW,EAAE,MAAM,8BAA8B,CAAC;AAC3D,OAAO,EAAE,QAAQ,EAAE,MAAM,2BAA2B,CAAC;AACrD,OAAO,EAAE,gBAAgB,EAAE,MAAM,yCAAyC,CAAC;AAC3E,OAAO,EAAE,cAAc,EAAE,MAAM,yCAAyC,CAAC;AACzE,OAAO,EAAE,mBAAmB,EAAE,MAAM,4CAA4C,CAAC;AACjF,YAAY,EAAE,QAAQ,EAAE,MAAM,yCAAyC,CAAC;AAGxE,OAAO,EAAE,UAAU,EAAE,gBAAgB,EAAE,MAAM,+BAA+B,CAAC;AAK7E,cAAM,sBAAsB;;IAE1B,QAAQ,CAAC,KAAK,EAAE,GAAG,EAAE;IACrB,OAAO;IACP,eAAe;;;;IACf,MAAM,CAAC,eAAe;CACvB;AAGD,QAAA,MAAM,iBAAiB,+BAEG,CAAC;AAE3B,OAAO,EAAE,iBAAiB,EAAE,CAAC;AAG7B,OAAO,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAC5C,OAAO,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC"}
|
|
@@ -0,0 +1,61 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Global Scroll Manager
|
|
3
|
+
* Singleton that manages scroll events for all lazy-render components
|
|
4
|
+
* Uses only 2 event listeners for ALL components (scroll + resize)
|
|
5
|
+
*/
|
|
6
|
+
export interface ScrollManagerConfig {
|
|
7
|
+
scrollThrottle?: number;
|
|
8
|
+
resizeDebounce?: number;
|
|
9
|
+
}
|
|
10
|
+
export interface ScrollListener {
|
|
11
|
+
id: string;
|
|
12
|
+
callback: (scrollTop: number, container: HTMLElement) => void;
|
|
13
|
+
container: HTMLElement;
|
|
14
|
+
}
|
|
15
|
+
declare class GlobalScrollManagerClass {
|
|
16
|
+
private static instance;
|
|
17
|
+
private listeners;
|
|
18
|
+
private scrollThrottle;
|
|
19
|
+
private resizeDebounce;
|
|
20
|
+
private scrollHandler;
|
|
21
|
+
private resizeHandler;
|
|
22
|
+
private isInitialized;
|
|
23
|
+
private constructor();
|
|
24
|
+
static getInstance(config?: ScrollManagerConfig): GlobalScrollManagerClass;
|
|
25
|
+
/**
|
|
26
|
+
* Register a scroll listener
|
|
27
|
+
* Only 2 event listeners total (scroll + resize) for ALL components
|
|
28
|
+
*/
|
|
29
|
+
register(id: string, container: HTMLElement, callback: (scrollTop: number, container: HTMLElement) => void): void;
|
|
30
|
+
/**
|
|
31
|
+
* Unregister a scroll listener
|
|
32
|
+
*/
|
|
33
|
+
unregister(id: string): void;
|
|
34
|
+
/**
|
|
35
|
+
* Initialize global event listeners
|
|
36
|
+
* Only called once, regardless of how many components
|
|
37
|
+
*/
|
|
38
|
+
private initialize;
|
|
39
|
+
/**
|
|
40
|
+
* Cleanup event listeners
|
|
41
|
+
*/
|
|
42
|
+
private cleanup;
|
|
43
|
+
/**
|
|
44
|
+
* Throttle helper
|
|
45
|
+
*/
|
|
46
|
+
private throttle;
|
|
47
|
+
/**
|
|
48
|
+
* Debounce helper
|
|
49
|
+
*/
|
|
50
|
+
private debounce;
|
|
51
|
+
/**
|
|
52
|
+
* Get stats
|
|
53
|
+
*/
|
|
54
|
+
getStats(): {
|
|
55
|
+
listenerCount: number;
|
|
56
|
+
isInitialized: boolean;
|
|
57
|
+
};
|
|
58
|
+
}
|
|
59
|
+
export declare const GlobalScrollManager: GlobalScrollManagerClass;
|
|
60
|
+
export default GlobalScrollManager;
|
|
61
|
+
//# sourceMappingURL=GlobalScrollManager.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"GlobalScrollManager.d.ts","sourceRoot":"","sources":["../../src/core/GlobalScrollManager.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,MAAM,WAAW,mBAAmB;IAClC,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB;AAED,MAAM,WAAW,cAAc;IAC7B,EAAE,EAAE,MAAM,CAAC;IACX,QAAQ,EAAE,CAAC,SAAS,EAAE,MAAM,EAAE,SAAS,EAAE,WAAW,KAAK,IAAI,CAAC;IAC9D,SAAS,EAAE,WAAW,CAAC;CACxB;AAED,cAAM,wBAAwB;IAC5B,OAAO,CAAC,MAAM,CAAC,QAAQ,CAA2B;IAClD,OAAO,CAAC,SAAS,CAA0C;IAC3D,OAAO,CAAC,cAAc,CAAS;IAC/B,OAAO,CAAC,cAAc,CAAS;IAC/B,OAAO,CAAC,aAAa,CAA6B;IAClD,OAAO,CAAC,aAAa,CAA6B;IAClD,OAAO,CAAC,aAAa,CAAkB;IAEvC,OAAO;IAKP,MAAM,CAAC,WAAW,CAAC,MAAM,CAAC,EAAE,mBAAmB,GAAG,wBAAwB;IAO1E;;;OAGG;IACH,QAAQ,CACN,EAAE,EAAE,MAAM,EACV,SAAS,EAAE,WAAW,EACtB,QAAQ,EAAE,CAAC,SAAS,EAAE,MAAM,EAAE,SAAS,EAAE,WAAW,KAAK,IAAI,GAC5D,IAAI;IAQP;;OAEG;IACH,UAAU,CAAC,EAAE,EAAE,MAAM,GAAG,IAAI;IAQ5B;;;OAGG;IACH,OAAO,CAAC,UAAU;IAwBlB;;OAEG;IACH,OAAO,CAAC,OAAO;IAcf;;OAEG;IACH,OAAO,CAAC,QAAQ;IAWhB;;OAEG;IACH,OAAO,CAAC,QAAQ;IAQhB;;OAEG;IACH,QAAQ,IAAI;QACV,aAAa,EAAE,MAAM,CAAC;QACtB,aAAa,EAAE,OAAO,CAAC;KACxB;CAMF;AAGD,eAAO,MAAM,mBAAmB,0BAAyC,CAAC;AAC1E,eAAe,mBAAmB,CAAC"}
|
package/dist/esm/index.d.ts
CHANGED
|
@@ -25,10 +25,15 @@ export { PerformanceAnalytics } from './core/PerformanceAnalytics';
|
|
|
25
25
|
export { PerformanceDashboard } from './core/PerformanceDashboard';
|
|
26
26
|
export { AccessibilityManager } from './core/AccessibilityManager';
|
|
27
27
|
export { AnimationManager } from './core/AnimationManager';
|
|
28
|
+
export { GlobalScrollManager } from './core/GlobalScrollManager';
|
|
28
29
|
export type { EngineConfig, VisibleRange, FetchMoreCallback, EngineState, ScrollAnalysis } from './core/types';
|
|
29
30
|
export { ScrollObserver } from './platform/browser/ScrollObserver';
|
|
30
31
|
export { useLazyList } from './adapters/react/useLazyList';
|
|
31
32
|
export { LazyList } from './adapters/react/LazyList';
|
|
33
|
+
export { useLazyComponent } from './adapters/react/hooks/useLazyComponent';
|
|
34
|
+
export { withLazyRender } from './adapters/react/hooks/useLazyComponent';
|
|
35
|
+
export { createLazyComponent } from './adapters/react/components/withLazyRender';
|
|
36
|
+
export type { LazyMode } from './adapters/react/hooks/useLazyComponent';
|
|
32
37
|
export { LazyScroll, createLazyScroll } from './adapters/vanilla/lazyScroll';
|
|
33
38
|
declare class LazyScrollElementClass {
|
|
34
39
|
constructor();
|
package/dist/esm/index.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AACvC,OAAO,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AACrD,OAAO,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAC;AACzD,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AACnD,OAAO,EAAE,yBAAyB,EAAE,MAAM,kCAAkC,CAAC;AAC7E,OAAO,EAAE,oBAAoB,EAAE,MAAM,6BAA6B,CAAC;AACnE,OAAO,EAAE,2BAA2B,EAAE,MAAM,oCAAoC,CAAC;AACjF,OAAO,EAAE,wBAAwB,EAAE,MAAM,iCAAiC,CAAC;AAC3E,OAAO,EAAE,wBAAwB,EAAE,MAAM,iCAAiC,CAAC;AAC3E,OAAO,EAAE,wBAAwB,EAAE,MAAM,iCAAiC,CAAC;AAC3E,OAAO,EAAE,yBAAyB,EAAE,MAAM,kCAAkC,CAAC;AAC7E,OAAO,EAAE,oBAAoB,EAAE,MAAM,6BAA6B,CAAC;AACnE,OAAO,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AACrD,OAAO,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AACvD,OAAO,EAAE,kBAAkB,EAAE,MAAM,2BAA2B,CAAC;AAC/D,OAAO,EAAE,mBAAmB,EAAE,MAAM,4BAA4B,CAAC;AACjE,OAAO,EAAE,oBAAoB,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AAC7E,OAAO,EAAE,sBAAsB,EAAE,MAAM,+BAA+B,CAAC;AACvE,OAAO,EAAE,qBAAqB,EAAE,MAAM,8BAA8B,CAAC;AACrE,OAAO,EAAE,mBAAmB,EAAE,MAAM,4BAA4B,CAAC;AACjE,OAAO,EAAE,sBAAsB,EAAE,MAAM,+BAA+B,CAAC;AACvE,OAAO,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAC;AACzD,OAAO,EAAE,qBAAqB,EAAE,MAAM,8BAA8B,CAAC;AACrE,OAAO,EAAE,oBAAoB,EAAE,MAAM,6BAA6B,CAAC;AACnE,OAAO,EAAE,oBAAoB,EAAE,MAAM,6BAA6B,CAAC;AACnE,OAAO,EAAE,oBAAoB,EAAE,MAAM,6BAA6B,CAAC;AACnE,OAAO,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAC3D,YAAY,EAAE,YAAY,EAAE,YAAY,EAAE,iBAAiB,EAAE,WAAW,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAG/G,OAAO,EAAE,cAAc,EAAE,MAAM,mCAAmC,CAAC;AAGnE,OAAO,EAAE,WAAW,EAAE,MAAM,8BAA8B,CAAC;AAC3D,OAAO,EAAE,QAAQ,EAAE,MAAM,2BAA2B,CAAC;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AACvC,OAAO,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AACrD,OAAO,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAC;AACzD,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AACnD,OAAO,EAAE,yBAAyB,EAAE,MAAM,kCAAkC,CAAC;AAC7E,OAAO,EAAE,oBAAoB,EAAE,MAAM,6BAA6B,CAAC;AACnE,OAAO,EAAE,2BAA2B,EAAE,MAAM,oCAAoC,CAAC;AACjF,OAAO,EAAE,wBAAwB,EAAE,MAAM,iCAAiC,CAAC;AAC3E,OAAO,EAAE,wBAAwB,EAAE,MAAM,iCAAiC,CAAC;AAC3E,OAAO,EAAE,wBAAwB,EAAE,MAAM,iCAAiC,CAAC;AAC3E,OAAO,EAAE,yBAAyB,EAAE,MAAM,kCAAkC,CAAC;AAC7E,OAAO,EAAE,oBAAoB,EAAE,MAAM,6BAA6B,CAAC;AACnE,OAAO,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AACrD,OAAO,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AACvD,OAAO,EAAE,kBAAkB,EAAE,MAAM,2BAA2B,CAAC;AAC/D,OAAO,EAAE,mBAAmB,EAAE,MAAM,4BAA4B,CAAC;AACjE,OAAO,EAAE,oBAAoB,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AAC7E,OAAO,EAAE,sBAAsB,EAAE,MAAM,+BAA+B,CAAC;AACvE,OAAO,EAAE,qBAAqB,EAAE,MAAM,8BAA8B,CAAC;AACrE,OAAO,EAAE,mBAAmB,EAAE,MAAM,4BAA4B,CAAC;AACjE,OAAO,EAAE,sBAAsB,EAAE,MAAM,+BAA+B,CAAC;AACvE,OAAO,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAC;AACzD,OAAO,EAAE,qBAAqB,EAAE,MAAM,8BAA8B,CAAC;AACrE,OAAO,EAAE,oBAAoB,EAAE,MAAM,6BAA6B,CAAC;AACnE,OAAO,EAAE,oBAAoB,EAAE,MAAM,6BAA6B,CAAC;AACnE,OAAO,EAAE,oBAAoB,EAAE,MAAM,6BAA6B,CAAC;AACnE,OAAO,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAC3D,OAAO,EAAE,mBAAmB,EAAE,MAAM,4BAA4B,CAAC;AACjE,YAAY,EAAE,YAAY,EAAE,YAAY,EAAE,iBAAiB,EAAE,WAAW,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAG/G,OAAO,EAAE,cAAc,EAAE,MAAM,mCAAmC,CAAC;AAGnE,OAAO,EAAE,WAAW,EAAE,MAAM,8BAA8B,CAAC;AAC3D,OAAO,EAAE,QAAQ,EAAE,MAAM,2BAA2B,CAAC;AACrD,OAAO,EAAE,gBAAgB,EAAE,MAAM,yCAAyC,CAAC;AAC3E,OAAO,EAAE,cAAc,EAAE,MAAM,yCAAyC,CAAC;AACzE,OAAO,EAAE,mBAAmB,EAAE,MAAM,4CAA4C,CAAC;AACjF,YAAY,EAAE,QAAQ,EAAE,MAAM,yCAAyC,CAAC;AAGxE,OAAO,EAAE,UAAU,EAAE,gBAAgB,EAAE,MAAM,+BAA+B,CAAC;AAK7E,cAAM,sBAAsB;;IAE1B,QAAQ,CAAC,KAAK,EAAE,GAAG,EAAE;IACrB,OAAO;IACP,eAAe;;;;IACf,MAAM,CAAC,eAAe;CACvB;AAGD,QAAA,MAAM,iBAAiB,+BAEG,CAAC;AAE3B,OAAO,EAAE,iBAAiB,EAAE,CAAC;AAG7B,OAAO,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAC5C,OAAO,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC"}
|
package/dist/esm/index.js
CHANGED
|
@@ -3672,6 +3672,120 @@ class AnimationManager {
|
|
|
3672
3672
|
}
|
|
3673
3673
|
}
|
|
3674
3674
|
|
|
3675
|
+
/**
|
|
3676
|
+
* Global Scroll Manager
|
|
3677
|
+
* Singleton that manages scroll events for all lazy-render components
|
|
3678
|
+
* Uses only 2 event listeners for ALL components (scroll + resize)
|
|
3679
|
+
*/
|
|
3680
|
+
class GlobalScrollManagerClass {
|
|
3681
|
+
constructor(config = {}) {
|
|
3682
|
+
this.listeners = new Map();
|
|
3683
|
+
this.scrollHandler = null;
|
|
3684
|
+
this.resizeHandler = null;
|
|
3685
|
+
this.isInitialized = false;
|
|
3686
|
+
this.scrollThrottle = config.scrollThrottle || 16;
|
|
3687
|
+
this.resizeDebounce = config.resizeDebounce || 100;
|
|
3688
|
+
}
|
|
3689
|
+
static getInstance(config) {
|
|
3690
|
+
if (!GlobalScrollManagerClass.instance) {
|
|
3691
|
+
GlobalScrollManagerClass.instance = new GlobalScrollManagerClass(config);
|
|
3692
|
+
}
|
|
3693
|
+
return GlobalScrollManagerClass.instance;
|
|
3694
|
+
}
|
|
3695
|
+
/**
|
|
3696
|
+
* Register a scroll listener
|
|
3697
|
+
* Only 2 event listeners total (scroll + resize) for ALL components
|
|
3698
|
+
*/
|
|
3699
|
+
register(id, container, callback) {
|
|
3700
|
+
this.listeners.set(id, { id, callback, container });
|
|
3701
|
+
if (!this.isInitialized) {
|
|
3702
|
+
this.initialize();
|
|
3703
|
+
}
|
|
3704
|
+
}
|
|
3705
|
+
/**
|
|
3706
|
+
* Unregister a scroll listener
|
|
3707
|
+
*/
|
|
3708
|
+
unregister(id) {
|
|
3709
|
+
this.listeners.delete(id);
|
|
3710
|
+
if (this.listeners.size === 0) {
|
|
3711
|
+
this.cleanup();
|
|
3712
|
+
}
|
|
3713
|
+
}
|
|
3714
|
+
/**
|
|
3715
|
+
* Initialize global event listeners
|
|
3716
|
+
* Only called once, regardless of how many components
|
|
3717
|
+
*/
|
|
3718
|
+
initialize() {
|
|
3719
|
+
this.isInitialized = true;
|
|
3720
|
+
// Single scroll handler for ALL components
|
|
3721
|
+
this.scrollHandler = this.throttle(() => {
|
|
3722
|
+
this.listeners.forEach((listener) => {
|
|
3723
|
+
const scrollTop = listener.container.scrollTop;
|
|
3724
|
+
listener.callback(scrollTop, listener.container);
|
|
3725
|
+
});
|
|
3726
|
+
}, this.scrollThrottle);
|
|
3727
|
+
// Single resize handler for ALL components
|
|
3728
|
+
this.resizeHandler = this.debounce(() => {
|
|
3729
|
+
this.listeners.forEach((listener) => {
|
|
3730
|
+
const scrollTop = listener.container.scrollTop;
|
|
3731
|
+
listener.callback(scrollTop, listener.container);
|
|
3732
|
+
});
|
|
3733
|
+
}, this.resizeDebounce);
|
|
3734
|
+
// Attach to document (global)
|
|
3735
|
+
document.addEventListener('scroll', this.scrollHandler, { passive: true, capture: true });
|
|
3736
|
+
window.addEventListener('resize', this.resizeHandler);
|
|
3737
|
+
}
|
|
3738
|
+
/**
|
|
3739
|
+
* Cleanup event listeners
|
|
3740
|
+
*/
|
|
3741
|
+
cleanup() {
|
|
3742
|
+
if (this.scrollHandler) {
|
|
3743
|
+
document.removeEventListener('scroll', this.scrollHandler, { capture: true });
|
|
3744
|
+
this.scrollHandler = null;
|
|
3745
|
+
}
|
|
3746
|
+
if (this.resizeHandler) {
|
|
3747
|
+
window.removeEventListener('resize', this.resizeHandler);
|
|
3748
|
+
this.resizeHandler = null;
|
|
3749
|
+
}
|
|
3750
|
+
this.isInitialized = false;
|
|
3751
|
+
}
|
|
3752
|
+
/**
|
|
3753
|
+
* Throttle helper
|
|
3754
|
+
*/
|
|
3755
|
+
throttle(func, limit) {
|
|
3756
|
+
let inThrottle;
|
|
3757
|
+
return ((...args) => {
|
|
3758
|
+
if (!inThrottle) {
|
|
3759
|
+
func.apply(this, args);
|
|
3760
|
+
inThrottle = true;
|
|
3761
|
+
setTimeout(() => (inThrottle = false), limit);
|
|
3762
|
+
}
|
|
3763
|
+
});
|
|
3764
|
+
}
|
|
3765
|
+
/**
|
|
3766
|
+
* Debounce helper
|
|
3767
|
+
*/
|
|
3768
|
+
debounce(func, wait) {
|
|
3769
|
+
let timeout;
|
|
3770
|
+
return ((...args) => {
|
|
3771
|
+
if (timeout)
|
|
3772
|
+
clearTimeout(timeout);
|
|
3773
|
+
timeout = setTimeout(() => func.apply(this, args), wait);
|
|
3774
|
+
});
|
|
3775
|
+
}
|
|
3776
|
+
/**
|
|
3777
|
+
* Get stats
|
|
3778
|
+
*/
|
|
3779
|
+
getStats() {
|
|
3780
|
+
return {
|
|
3781
|
+
listenerCount: this.listeners.size,
|
|
3782
|
+
isInitialized: this.isInitialized
|
|
3783
|
+
};
|
|
3784
|
+
}
|
|
3785
|
+
}
|
|
3786
|
+
// Export singleton
|
|
3787
|
+
const GlobalScrollManager = GlobalScrollManagerClass.getInstance();
|
|
3788
|
+
|
|
3675
3789
|
class ScrollObserver {
|
|
3676
3790
|
constructor(container, callback, options) {
|
|
3677
3791
|
this.observer = null;
|
|
@@ -3870,6 +3984,157 @@ const LazyList = forwardRef((props, ref) => {
|
|
|
3870
3984
|
});
|
|
3871
3985
|
LazyList.displayName = 'LazyList';
|
|
3872
3986
|
|
|
3987
|
+
/**
|
|
3988
|
+
* Hook for lazy component rendering with multiple modes
|
|
3989
|
+
*
|
|
3990
|
+
* Modes:
|
|
3991
|
+
* - virtual: Traditional virtual scrolling (render all, show visible)
|
|
3992
|
+
* - visibility: Intersection Observer (mount only when visible)
|
|
3993
|
+
* - hybrid: Combine both (best performance)
|
|
3994
|
+
*/
|
|
3995
|
+
function useLazyComponent(props = {}) {
|
|
3996
|
+
const { mode = 'hybrid', threshold = 0, rootMargin = '0px', onVisible, onHidden } = props;
|
|
3997
|
+
const ref = useRef(null);
|
|
3998
|
+
const [isVisible, setIsVisible] = useState(false);
|
|
3999
|
+
const [isInView, setIsInView] = useState(false);
|
|
4000
|
+
const [hasMounted, setHasMounted] = useState(false);
|
|
4001
|
+
// Visibility API (Intersection Observer)
|
|
4002
|
+
useEffect(() => {
|
|
4003
|
+
if (mode === 'visibility' || mode === 'hybrid') {
|
|
4004
|
+
const observer = new IntersectionObserver(([entry]) => {
|
|
4005
|
+
const visible = entry.isIntersecting;
|
|
4006
|
+
setIsVisible(visible);
|
|
4007
|
+
setIsInView(visible);
|
|
4008
|
+
if (visible) {
|
|
4009
|
+
onVisible === null || onVisible === void 0 ? void 0 : onVisible();
|
|
4010
|
+
setHasMounted(true); // Keep mounted once visible
|
|
4011
|
+
}
|
|
4012
|
+
else {
|
|
4013
|
+
onHidden === null || onHidden === void 0 ? void 0 : onHidden();
|
|
4014
|
+
if (mode === 'visibility') {
|
|
4015
|
+
setHasMounted(false); // Unmount when not visible
|
|
4016
|
+
}
|
|
4017
|
+
}
|
|
4018
|
+
}, { threshold, rootMargin });
|
|
4019
|
+
if (ref.current) {
|
|
4020
|
+
observer.observe(ref.current);
|
|
4021
|
+
}
|
|
4022
|
+
return () => observer.disconnect();
|
|
4023
|
+
}
|
|
4024
|
+
}, [mode, threshold, rootMargin, onVisible, onHidden]);
|
|
4025
|
+
// Determine if should render based on mode
|
|
4026
|
+
const shouldRender = useCallback(() => {
|
|
4027
|
+
switch (mode) {
|
|
4028
|
+
case 'virtual':
|
|
4029
|
+
return true; // Always render, control visibility with CSS
|
|
4030
|
+
case 'visibility':
|
|
4031
|
+
return hasMounted; // Mount when visible, keep mounted
|
|
4032
|
+
case 'hybrid':
|
|
4033
|
+
return hasMounted; // Mount when visible, keep mounted
|
|
4034
|
+
default:
|
|
4035
|
+
return true;
|
|
4036
|
+
}
|
|
4037
|
+
}, [mode, hasMounted]);
|
|
4038
|
+
// Determine if should mount based on mode
|
|
4039
|
+
const shouldMount = useCallback(() => {
|
|
4040
|
+
switch (mode) {
|
|
4041
|
+
case 'virtual':
|
|
4042
|
+
return true; // Always mount
|
|
4043
|
+
case 'visibility':
|
|
4044
|
+
return isVisible; // Mount only when visible
|
|
4045
|
+
case 'hybrid':
|
|
4046
|
+
return isVisible; // Mount only when visible
|
|
4047
|
+
default:
|
|
4048
|
+
return true;
|
|
4049
|
+
}
|
|
4050
|
+
}, [mode, isVisible]);
|
|
4051
|
+
return {
|
|
4052
|
+
isVisible,
|
|
4053
|
+
isInView,
|
|
4054
|
+
ref,
|
|
4055
|
+
shouldRender: shouldRender(),
|
|
4056
|
+
shouldMount: shouldMount()
|
|
4057
|
+
};
|
|
4058
|
+
}
|
|
4059
|
+
/**
|
|
4060
|
+
* HOC for lazy rendering components
|
|
4061
|
+
*
|
|
4062
|
+
* Usage:
|
|
4063
|
+
* const LazyCard = withLazyRender(Card);
|
|
4064
|
+
*
|
|
4065
|
+
* <LazyCard mode="hybrid" />
|
|
4066
|
+
*/
|
|
4067
|
+
function withLazyRender(WrappedComponent) {
|
|
4068
|
+
return function LazyComponent(props) {
|
|
4069
|
+
const { isVisible, ref, shouldMount } = useLazyComponent({
|
|
4070
|
+
mode: props.mode || 'hybrid'
|
|
4071
|
+
});
|
|
4072
|
+
if (!shouldMount) {
|
|
4073
|
+
return React.createElement("div", { ref: ref, style: { height: '100px', background: '#f0f0f0' } }, "Loading...");
|
|
4074
|
+
}
|
|
4075
|
+
return (React.createElement("div", { ref: ref, style: { opacity: isVisible ? 1 : 0, transition: 'opacity 0.3s' } },
|
|
4076
|
+
React.createElement(WrappedComponent, { ...props })));
|
|
4077
|
+
};
|
|
4078
|
+
}
|
|
4079
|
+
|
|
4080
|
+
/**
|
|
4081
|
+
* Higher-Order Component for lazy rendering
|
|
4082
|
+
*
|
|
4083
|
+
* Usage:
|
|
4084
|
+
* const LazyCard = withLazyRender(Card);
|
|
4085
|
+
*
|
|
4086
|
+
* <LazyCard mode="hybrid" placeholder={<div>Loading...</div>} />
|
|
4087
|
+
*/
|
|
4088
|
+
function createLazyComponent(WrappedComponent, options = {}) {
|
|
4089
|
+
return function LazyComponent(props) {
|
|
4090
|
+
const { mode = options.mode || 'hybrid', placeholder = options.placeholder || React.createElement("div", null, "Loading..."), onVisible, onHidden, ...rest } = props;
|
|
4091
|
+
const [isVisible, setIsVisible] = React.useState(false);
|
|
4092
|
+
const [hasMounted, setHasMounted] = React.useState(false);
|
|
4093
|
+
const ref = React.useRef(null);
|
|
4094
|
+
React.useEffect(() => {
|
|
4095
|
+
if (mode === 'visibility' || mode === 'hybrid') {
|
|
4096
|
+
const observer = new IntersectionObserver(([entry]) => {
|
|
4097
|
+
const visible = entry.isIntersecting;
|
|
4098
|
+
setIsVisible(visible);
|
|
4099
|
+
if (visible) {
|
|
4100
|
+
onVisible === null || onVisible === void 0 ? void 0 : onVisible();
|
|
4101
|
+
setHasMounted(true);
|
|
4102
|
+
}
|
|
4103
|
+
else {
|
|
4104
|
+
onHidden === null || onHidden === void 0 ? void 0 : onHidden();
|
|
4105
|
+
if (mode === 'visibility') {
|
|
4106
|
+
setHasMounted(false);
|
|
4107
|
+
}
|
|
4108
|
+
}
|
|
4109
|
+
}, { threshold: 0, rootMargin: '0px' });
|
|
4110
|
+
if (ref.current) {
|
|
4111
|
+
observer.observe(ref.current);
|
|
4112
|
+
}
|
|
4113
|
+
return () => observer.disconnect();
|
|
4114
|
+
}
|
|
4115
|
+
}, [mode, onVisible, onHidden]);
|
|
4116
|
+
const shouldRender = React.useCallback(() => {
|
|
4117
|
+
switch (mode) {
|
|
4118
|
+
case 'virtual':
|
|
4119
|
+
return true;
|
|
4120
|
+
case 'visibility':
|
|
4121
|
+
case 'hybrid':
|
|
4122
|
+
return hasMounted;
|
|
4123
|
+
default:
|
|
4124
|
+
return true;
|
|
4125
|
+
}
|
|
4126
|
+
}, [mode, hasMounted]);
|
|
4127
|
+
if (!shouldRender()) {
|
|
4128
|
+
return React.createElement("div", { ref: ref }, placeholder);
|
|
4129
|
+
}
|
|
4130
|
+
return (React.createElement("div", { ref: ref, style: {
|
|
4131
|
+
opacity: isVisible ? 1 : 0,
|
|
4132
|
+
transition: 'opacity 0.3s ease-in-out'
|
|
4133
|
+
} },
|
|
4134
|
+
React.createElement(WrappedComponent, { ...rest })));
|
|
4135
|
+
};
|
|
4136
|
+
}
|
|
4137
|
+
|
|
3873
4138
|
class LazyScroll {
|
|
3874
4139
|
constructor(container, config) {
|
|
3875
4140
|
this.container = container;
|
|
@@ -4041,5 +4306,5 @@ const LazyScrollElement = typeof window !== 'undefined' && typeof HTMLElement !=
|
|
|
4041
4306
|
? LazyScrollElementClass // Will be replaced with actual element in browser
|
|
4042
4307
|
: LazyScrollElementClass; // SSR-safe fallback
|
|
4043
4308
|
|
|
4044
|
-
export { AccessibilityManager, AdaptiveBufferCalculator, AnimationManager, BatchSizeOptimizer, ContentComplexityAnalyzer, DevicePerformanceMonitor, DynamicHeightEngine, Engine, GPUAccelerator, HeightMeasurementCache, IntelligentPagination, IntelligentScrollDetector, LazyList, LazyScroll, LazyScrollElement, MemoryManager, NetworkAwarePrefetchManager, NetworkAwareRequestQueue, NetworkSpeedDetector, PerformanceAnalytics, PerformanceDashboard, PerformanceOptimizer, PreemptiveCache, PrefetchManager, Priority, PriorityRequestQueue, RequestDeduplicator, RequestQueue, ScrollObserver, SmartPrefetchAlgorithm, VariableHeightManager, WindowManager, createLazyScroll, debounce, throttle, useLazyList };
|
|
4309
|
+
export { AccessibilityManager, AdaptiveBufferCalculator, AnimationManager, BatchSizeOptimizer, ContentComplexityAnalyzer, DevicePerformanceMonitor, DynamicHeightEngine, Engine, GPUAccelerator, GlobalScrollManager, HeightMeasurementCache, IntelligentPagination, IntelligentScrollDetector, LazyList, LazyScroll, LazyScrollElement, MemoryManager, NetworkAwarePrefetchManager, NetworkAwareRequestQueue, NetworkSpeedDetector, PerformanceAnalytics, PerformanceDashboard, PerformanceOptimizer, PreemptiveCache, PrefetchManager, Priority, PriorityRequestQueue, RequestDeduplicator, RequestQueue, ScrollObserver, SmartPrefetchAlgorithm, VariableHeightManager, WindowManager, createLazyComponent, createLazyScroll, debounce, throttle, useLazyComponent, useLazyList, withLazyRender };
|
|
4045
4310
|
//# sourceMappingURL=index.js.map
|