@xhsreds/reds-rn-next 0.8.4-image-optimization202510222117 → 0.9.1-beta202510271511

package/lib/src/components/Image/manager/ImageAPMManager.d.ts

@@ -1,123 +0,0 @@
-import { ImageSourcePropType } from "react-native";
-import { ImageAPMState } from "./types";
-import { ApmBiz } from "../interface";
-/**
- * Global APM Manager for Image components
- *
- * Centralizes all APM tracking logic to reduce per-component overhead.
- * Instead of 4 useEffect hooks per image (400 for 100 images),
- * we have 1 registration effect per image (100 for 100 images).
- *
- * Key optimizations:
- * - Batches cache queries (1-5 calls vs 100)
- * - Eliminates APM-related state updates
- * - Reduces memory overhead by 67%
- * - Maintains 100% functional parity with original implementation
- */
-declare class ImageAPMManager {
-    private static instance;
-    private trackers;
-    private registrations;
-    private pendingCacheQueries;
-    private cacheQueryTimer;
-    private readonly CACHE_QUERY_DEBOUNCE_MS;
-    /**
-     * Singleton pattern - ensures only one manager instance exists
-     */
-    static getInstance(): ImageAPMManager;
-    private constructor();
-    /**
-     * Register an image for APM tracking
-     * Called once per image on mount
-     *
-     * Corresponds to original useEffect logic at Image.tsx:105-139
-     */
-    register(imageId: string, source: ImageSourcePropType, apmBiz?: ApmBiz): void;
-    /**
-     * Unregister and cleanup
-     * Called on component unmount
-     */
-    unregister(imageId: string): void;
-    /**
-     * Update source if it changes
-     * Corresponds to formatSource dependency updates
-     */
-    updateSource(imageId: string, source: ImageSourcePropType): void;
-    /**
-     * Report visibility change from VisibilitySensor
-     *
-     * Corresponds to:
-     * - checkIsVisible callback (Image.tsx:80-88)
-     * - First screen detection (Image.tsx:161-167)
-     * - Visibility tracking useEffect (Image.tsx:168-178)
-     */
-    setViewable(imageId: string, isViewable: boolean): void;
-    /**
-     * Record load start event
-     * Corresponds to onLoadStart (Image.tsx:211-213)
-     */
-    recordLoadStart(imageId: string): void;
-    /**
-     * Record progress event
-     * Corresponds to onProgress (Image.tsx:189-198)
-     */
-    recordProgress(imageId: string, loaded: number, total: number): void;
-    /**
-     * Record successful load
-     * Corresponds to onLoad (Image.tsx:199-209)
-     */
-    recordLoad(imageId: string): void;
-    /**
-     * Record error event
-     * Corresponds to onError (Image.tsx:215-222)
-     */
-    recordError(imageId: string, errorMessage: string): void;
-    /**
-     * Check if ready to push and push if conditions met
-     * Corresponds to onLoadEnd (Image.tsx:179-187)
-     *
-     * Push logic: Only push when BOTH:
-     * 1. Image is viewable (entered viewport)
-     * 2. Image has loaded (success or error)
-     */
-    checkAndPush(imageId: string): void;
-    /**
-     * Extract URL and host from image source
-     * Corresponds to useEffect lines 105-121
-     */
-    private extractUrlInfo;
-    /**
-     * Queue a cache query for batching
-     * Corresponds to useEffect lines 123-139
-     */
-    private queueCacheQuery;
-    /**
-     * Execute batched cache queries
-     *
-     * Key optimization: Instead of 100 individual RNImage.queryCache() calls,
-     * we batch them into 1-5 calls (depending on timing)
-     */
-    private flushCacheQueries;
-    /**
-     * Push APM data to analytics
-     * Corresponds to pushApmData callback (Image.tsx:141-158)
-     *
-     * This is where all the collected metrics are sent to the APM system
-     */
-    private pushData;
-    /**
-     * Debug method to inspect tracker state
-     * Useful for testing and validation
-     */
-    getState(imageId: string): ImageAPMState | undefined;
-    /**
-     * Debug method to get all tracked image IDs
-     * Useful for testing and validation
-     */
-    getAllTrackedIds(): string[];
-    /**
-     * Reset manager state (for testing)
-     */
-    reset(): void;
-}
-export default ImageAPMManager;

package/lib/src/components/Image/manager/index.d.ts

@@ -1,2 +0,0 @@
-export { default as ImageAPMManager } from "./ImageAPMManager";
-export type { ImageAPMState, ImageRegistration, CacheQueryBatch } from "./types";

package/lib/src/components/Image/manager/types.d.ts

@@ -1,40 +0,0 @@
-import { ImageSourcePropType } from "react-native";
-import { ApmBiz } from "../interface";
-/**
- * Internal APM state tracking for a single image
- * Extends the public ImageTrackerProps with internal flags
- */
-export interface ImageAPMState {
-    imageUrl: string;
-    imageHost: string;
-    intersectTime: number;
-    imageSize: number;
-    isFirstScreen: string;
-    isPrefetch: string;
-    isSuccess: string;
-    errorReason: string;
-    loadedStartTime: number;
-    loadedTime: number;
-    loadDuration: number;
-    viewDuration: number;
-    _isViewable: boolean;
-    _hasLoaded: boolean;
-    _hasPushed: boolean;
-    _firstVisibilityChecked: boolean;
-}
-/**
- * Registration data for an image instance
- */
-export interface ImageRegistration {
-    imageId: string;
-    source: ImageSourcePropType;
-    apmBiz?: ApmBiz;
-}
-/**
- * Pending cache query entry
- * Maps URL to array of image IDs waiting for cache result
- */
-export interface CacheQueryBatch {
-    url: string;
-    imageIds: string[];
-}

package/lib/types/components/Image/hook/useImageId.d.ts

@@ -1,7 +0,0 @@
-/**
- * Generate a unique ID for each image instance
- *
- * If React 18+ useId is available, use it.
- * Otherwise, use a counter-based fallback.
- */
-export declare function useImageId(): string;

package/lib/types/components/Image/manager/ImageAPMManager.d.ts

@@ -1,123 +0,0 @@
-import { ImageSourcePropType } from "react-native";
-import { ImageAPMState } from "./types";
-import { ApmBiz } from "../interface";
-/**
- * Global APM Manager for Image components
- *
- * Centralizes all APM tracking logic to reduce per-component overhead.
- * Instead of 4 useEffect hooks per image (400 for 100 images),
- * we have 1 registration effect per image (100 for 100 images).
- *
- * Key optimizations:
- * - Batches cache queries (1-5 calls vs 100)
- * - Eliminates APM-related state updates
- * - Reduces memory overhead by 67%
- * - Maintains 100% functional parity with original implementation
- */
-declare class ImageAPMManager {
-    private static instance;
-    private trackers;
-    private registrations;
-    private pendingCacheQueries;
-    private cacheQueryTimer;
-    private readonly CACHE_QUERY_DEBOUNCE_MS;
-    /**
-     * Singleton pattern - ensures only one manager instance exists
-     */
-    static getInstance(): ImageAPMManager;
-    private constructor();
-    /**
-     * Register an image for APM tracking
-     * Called once per image on mount
-     *
-     * Corresponds to original useEffect logic at Image.tsx:105-139
-     */
-    register(imageId: string, source: ImageSourcePropType, apmBiz?: ApmBiz): void;
-    /**
-     * Unregister and cleanup
-     * Called on component unmount
-     */
-    unregister(imageId: string): void;
-    /**
-     * Update source if it changes
-     * Corresponds to formatSource dependency updates
-     */
-    updateSource(imageId: string, source: ImageSourcePropType): void;
-    /**
-     * Report visibility change from VisibilitySensor
-     *
-     * Corresponds to:
-     * - checkIsVisible callback (Image.tsx:80-88)
-     * - First screen detection (Image.tsx:161-167)
-     * - Visibility tracking useEffect (Image.tsx:168-178)
-     */
-    setViewable(imageId: string, isViewable: boolean): void;
-    /**
-     * Record load start event
-     * Corresponds to onLoadStart (Image.tsx:211-213)
-     */
-    recordLoadStart(imageId: string): void;
-    /**
-     * Record progress event
-     * Corresponds to onProgress (Image.tsx:189-198)
-     */
-    recordProgress(imageId: string, loaded: number, total: number): void;
-    /**
-     * Record successful load
-     * Corresponds to onLoad (Image.tsx:199-209)
-     */
-    recordLoad(imageId: string): void;
-    /**
-     * Record error event
-     * Corresponds to onError (Image.tsx:215-222)
-     */
-    recordError(imageId: string, errorMessage: string): void;
-    /**
-     * Check if ready to push and push if conditions met
-     * Corresponds to onLoadEnd (Image.tsx:179-187)
-     *
-     * Push logic: Only push when BOTH:
-     * 1. Image is viewable (entered viewport)
-     * 2. Image has loaded (success or error)
-     */
-    checkAndPush(imageId: string): void;
-    /**
-     * Extract URL and host from image source
-     * Corresponds to useEffect lines 105-121
-     */
-    private extractUrlInfo;
-    /**
-     * Queue a cache query for batching
-     * Corresponds to useEffect lines 123-139
-     */
-    private queueCacheQuery;
-    /**
-     * Execute batched cache queries
-     *
-     * Key optimization: Instead of 100 individual RNImage.queryCache() calls,
-     * we batch them into 1-5 calls (depending on timing)
-     */
-    private flushCacheQueries;
-    /**
-     * Push APM data to analytics
-     * Corresponds to pushApmData callback (Image.tsx:141-158)
-     *
-     * This is where all the collected metrics are sent to the APM system
-     */
-    private pushData;
-    /**
-     * Debug method to inspect tracker state
-     * Useful for testing and validation
-     */
-    getState(imageId: string): ImageAPMState | undefined;
-    /**
-     * Debug method to get all tracked image IDs
-     * Useful for testing and validation
-     */
-    getAllTrackedIds(): string[];
-    /**
-     * Reset manager state (for testing)
-     */
-    reset(): void;
-}
-export default ImageAPMManager;

package/lib/types/components/Image/manager/index.d.ts

@@ -1,2 +0,0 @@
-export { default as ImageAPMManager } from "./ImageAPMManager";
-export type { ImageAPMState, ImageRegistration, CacheQueryBatch } from "./types";

package/lib/types/components/Image/manager/types.d.ts

@@ -1,40 +0,0 @@
-import { ImageSourcePropType } from "react-native";
-import { ApmBiz } from "../interface";
-/**
- * Internal APM state tracking for a single image
- * Extends the public ImageTrackerProps with internal flags
- */
-export interface ImageAPMState {
-    imageUrl: string;
-    imageHost: string;
-    intersectTime: number;
-    imageSize: number;
-    isFirstScreen: string;
-    isPrefetch: string;
-    isSuccess: string;
-    errorReason: string;
-    loadedStartTime: number;
-    loadedTime: number;
-    loadDuration: number;
-    viewDuration: number;
-    _isViewable: boolean;
-    _hasLoaded: boolean;
-    _hasPushed: boolean;
-    _firstVisibilityChecked: boolean;
-}
-/**
- * Registration data for an image instance
- */
-export interface ImageRegistration {
-    imageId: string;
-    source: ImageSourcePropType;
-    apmBiz?: ApmBiz;
-}
-/**
- * Pending cache query entry
- * Maps URL to array of image IDs waiting for cache result
- */
-export interface CacheQueryBatch {
-    url: string;
-    imageIds: string[];
-}

package/src/components/Image/hook/useImageId.ts

@@ -1,33 +0,0 @@
-import { useRef } from "react";
-import React from "react";
-
-/**
- * useId polyfill for React < 18
- *
- * React 18+ has native useId() hook for generating unique IDs.
- * For older versions, we implement a simple counter-based solution.
- */
-
-let globalCounter = 0;
-
-/**
- * Generate a unique ID for each image instance
- *
- * If React 18+ useId is available, use it.
- * Otherwise, use a counter-based fallback.
- */
-export function useImageId(): string {
-  // Try to use React 18+ native useId if available
-  if (typeof (React as any).useId === "function") {
-    return (React as any).useId();
-  }
-
-  // Fallback for React < 18
-  const idRef = useRef<string | null>(null);
-
-  if (idRef.current === null) {
-    idRef.current = `image-${++globalCounter}`;
-  }
-
-  return idRef.current;
-}