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

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;
-}

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

@@ -1,389 +0,0 @@
-import { Image as RNImage, ImageSourcePropType, ImageURISource } from "react-native";
-import { ImageAPMState, ImageRegistration } from "./types";
-import { ApmBiz } from "../interface";
-import { isLocalFile, isDataUri, convertKeysToSnakeCase } from "../utils";
-import { apmPush } from "../apm";
-
-/**
- * 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
- */
-class ImageAPMManager {
-  private static instance: ImageAPMManager;
-
-  // Core tracking data
-  private trackers = new Map<string, ImageAPMState>();
-  private registrations = new Map<string, ImageRegistration>();
-
-  // Cache query batching
-  private pendingCacheQueries = new Map<string, string[]>(); // url -> [imageIds]
-  private cacheQueryTimer: NodeJS.Timeout | null = null;
-  private readonly CACHE_QUERY_DEBOUNCE_MS = 50;
-
-  /**
-   * Singleton pattern - ensures only one manager instance exists
-   */
-  static getInstance(): ImageAPMManager {
-    if (!ImageAPMManager.instance) {
-      ImageAPMManager.instance = new ImageAPMManager();
-    }
-    return ImageAPMManager.instance;
-  }
-
-  private constructor() {
-    // Private constructor for singleton
-  }
-
-  /**
-   * 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 {
-    // Initialize tracking state
-    const state: ImageAPMState = {
-      imageUrl: "",
-      imageHost: "",
-      intersectTime: 0,
-      imageSize: 0,
-      isFirstScreen: "", // Not determined yet
-      isPrefetch: "", // Will be set by cache query
-      isSuccess: "false",
-      errorReason: "",
-      loadedStartTime: 0,
-      loadedTime: 0,
-      loadDuration: 0,
-      viewDuration: 0,
-      _isViewable: false,
-      _hasLoaded: false,
-      _hasPushed: false,
-      _firstVisibilityChecked: false,
-    };
-
-    this.trackers.set(imageId, state);
-    this.registrations.set(imageId, { imageId, source, apmBiz });
-
-    // Extract URL/Host (corresponds to useEffect lines 105-121)
-    this.extractUrlInfo(imageId, source);
-
-    // Queue cache query (corresponds to useEffect lines 123-139)
-    this.queueCacheQuery(imageId, source);
-  }
-
-  /**
-   * Unregister and cleanup
-   * Called on component unmount
-   */
-  unregister(imageId: string): void {
-    this.trackers.delete(imageId);
-    this.registrations.delete(imageId);
-  }
-
-  /**
-   * Update source if it changes
-   * Corresponds to formatSource dependency updates
-   */
-  updateSource(imageId: string, source: ImageSourcePropType): void {
-    const registration = this.registrations.get(imageId);
-    if (!registration) return;
-
-    registration.source = source;
-    this.extractUrlInfo(imageId, source);
-    this.queueCacheQuery(imageId, source);
-  }
-
-  /**
-   * 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 {
-    const state = this.trackers.get(imageId);
-    if (!state) return;
-
-    // First screen detection (lines 80-88 and 161-167)
-    // Determines if image was in viewport on first check
-    if (!state._firstVisibilityChecked) {
-      state._firstVisibilityChecked = true;
-      state.isFirstScreen = isViewable ? "true" : "false";
-    }
-
-    // Update to viewable (lines 168-178)
-    // Record intersection time when becoming visible
-    if (!state._isViewable && isViewable) {
-      state._isViewable = true;
-      state.intersectTime = Date.now();
-
-      // Pre-loaded scenario: image loaded before becoming visible
-      // Push immediately since both conditions are met
-      if (state._hasLoaded) {
-        this.pushData(imageId);
-      }
-    }
-
-    state._isViewable = isViewable;
-  }
-
-  /**
-   * Record load start event
-   * Corresponds to onLoadStart (Image.tsx:211-213)
-   */
-  recordLoadStart(imageId: string): void {
-    const state = this.trackers.get(imageId);
-    if (!state) return;
-
-    state.loadedStartTime = Date.now();
-  }
-
-  /**
-   * Record progress event
-   * Corresponds to onProgress (Image.tsx:189-198)
-   */
-  recordProgress(imageId: string, loaded: number, total: number): void {
-    const state = this.trackers.get(imageId);
-    if (!state) return;
-
-    state.imageSize = total;
-  }
-
-  /**
-   * Record successful load
-   * Corresponds to onLoad (Image.tsx:199-209)
-   */
-  recordLoad(imageId: string): void {
-    const state = this.trackers.get(imageId);
-    if (!state) return;
-
-    const now = Date.now();
-    const loadDuration = now - state.loadedStartTime;
-
-    state.loadedTime = now;
-    state.loadDuration = loadDuration < 0 ? 0 : loadDuration;
-    state.isSuccess = "true";
-    state._hasLoaded = true;
-  }
-
-  /**
-   * Record error event
-   * Corresponds to onError (Image.tsx:215-222)
-   */
-  recordError(imageId: string, errorMessage: string): void {
-    const state = this.trackers.get(imageId);
-    if (!state) return;
-
-    state.isSuccess = "false";
-    state.errorReason = errorMessage;
-    state._hasLoaded = true;
-  }
-
-  /**
-   * 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 {
-    const state = this.trackers.get(imageId);
-    if (!state || state._hasPushed) return;
-
-    // Push only if both viewable and loaded/errored (lines 179-187)
-    if (state._isViewable && state._hasLoaded) {
-      this.pushData(imageId);
-    }
-  }
-
-  /**
-   * Extract URL and host from image source
-   * Corresponds to useEffect lines 105-121
-   */
-  private extractUrlInfo(imageId: string, source: ImageSourcePropType): void {
-    const state = this.trackers.get(imageId);
-    if (!state) return;
-
-    try {
-      if (
-        typeof source !== "number" &&
-        !isLocalFile((source as ImageURISource).uri as string) &&
-        !isDataUri((source as ImageURISource).uri as string)
-      ) {
-        const imageUrl = new URL((source as ImageURISource).uri as string);
-        state.imageHost = `${imageUrl.protocol}//${imageUrl.host}`;
-        state.imageUrl = (source as ImageURISource).uri as string;
-      }
-    } catch (error) {
-      // Silent fail, matching current behavior
-    }
-  }
-
-  /**
-   * Queue a cache query for batching
-   * Corresponds to useEffect lines 123-139
-   */
-  private queueCacheQuery(imageId: string, source: ImageSourcePropType): void {
-    const imageUrl = (source as ImageURISource)?.uri || "";
-    if (!imageUrl) return;
-
-    // Add to pending queries
-    if (!this.pendingCacheQueries.has(imageUrl)) {
-      this.pendingCacheQueries.set(imageUrl, []);
-    }
-    this.pendingCacheQueries.get(imageUrl)!.push(imageId);
-
-    // Debounce batch query
-    // Wait 50ms to collect more queries before executing
-    if (!this.cacheQueryTimer) {
-      this.cacheQueryTimer = setTimeout(() => {
-        this.flushCacheQueries();
-      }, this.CACHE_QUERY_DEBOUNCE_MS);
-    }
-  }
-
-  /**
-   * Execute batched cache queries
-   *
-   * Key optimization: Instead of 100 individual RNImage.queryCache() calls,
-   * we batch them into 1-5 calls (depending on timing)
-   */
-  private async flushCacheQueries(): Promise<void> {
-    const queries = Array.from(this.pendingCacheQueries.entries());
-    this.pendingCacheQueries.clear();
-    this.cacheQueryTimer = null;
-
-    if (typeof RNImage.queryCache !== "function") {
-      // queryCache not available, mark all as unknown
-      queries.forEach(([url, imageIds]) => {
-        imageIds.forEach((imageId) => {
-          const state = this.trackers.get(imageId);
-          if (state) {
-            state.isPrefetch = "";
-          }
-        });
-      });
-      return;
-    }
-
-    const allUrls = queries.map(([url]) => url);
-
-    try {
-      const results = await RNImage.queryCache(allUrls);
-
-      // Distribute results to all images
-      queries.forEach(([url, imageIds]) => {
-        const uriEncodeImageUrl = encodeURI(url);
-        const isPrefetched = !!results?.[uriEncodeImageUrl];
-
-        imageIds.forEach((imageId) => {
-          const state = this.trackers.get(imageId);
-          if (state) {
-            state.isPrefetch = String(isPrefetched);
-          }
-        });
-      });
-    } catch (error) {
-      // Silent fail, set all to false
-      queries.forEach(([url, imageIds]) => {
-        imageIds.forEach((imageId) => {
-          const state = this.trackers.get(imageId);
-          if (state) {
-            state.isPrefetch = "false";
-          }
-        });
-      });
-    }
-  }
-
-  /**
-   * 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(imageId: string): void {
-    const state = this.trackers.get(imageId);
-    const registration = this.registrations.get(imageId);
-
-    if (!state || !registration || state._hasPushed) return;
-
-    // Calculate viewDuration (lines 141-145)
-    // Time from viewport entry to load completion
-    const viewDuration = state.loadedTime - state.intersectTime;
-    state.viewDuration = viewDuration < 0 ? 0 : viewDuration;
-
-    // isPrefetch fallback logic (lines 147-153)
-    // If cache query hasn't completed, infer from imageSize
-    // imageSize <= 0 often indicates cached image
-    if (!state.isPrefetch) {
-      const imageSize = state.imageSize || 0;
-      state.isPrefetch = String(imageSize <= 0);
-    }
-
-    // Only push if we have a valid URL
-    if (!state.imageUrl) return;
-
-    state._hasPushed = true;
-
-    // Convert to snake_case and push (lines 154-157)
-    const apmData = convertKeysToSnakeCase({
-      imageUrl: state.imageUrl,
-      imageHost: state.imageHost,
-      intersectTime: state.intersectTime,
-      imageSize: state.imageSize,
-      isFirstScreen: state.isFirstScreen,
-      isPrefetch: state.isPrefetch,
-      isSuccess: state.isSuccess,
-      errorReason: state.errorReason,
-      loadedStartTime: state.loadedStartTime,
-      loadedTime: state.loadedTime,
-      loadDuration: state.loadDuration,
-      viewDuration: state.viewDuration,
-    });
-
-    apmPush(apmData);
-  }
-
-  /**
-   * Debug method to inspect tracker state
-   * Useful for testing and validation
-   */
-  getState(imageId: string): ImageAPMState | undefined {
-    return this.trackers.get(imageId);
-  }
-
-  /**
-   * Debug method to get all tracked image IDs
-   * Useful for testing and validation
-   */
-  getAllTrackedIds(): string[] {
-    return Array.from(this.trackers.keys());
-  }
-
-  /**
-   * Reset manager state (for testing)
-   */
-  reset(): void {
-    this.trackers.clear();
-    this.registrations.clear();
-    this.pendingCacheQueries.clear();
-    if (this.cacheQueryTimer) {
-      clearTimeout(this.cacheQueryTimer);
-      this.cacheQueryTimer = null;
-    }
-  }
-}
-
-export default ImageAPMManager;

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

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

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

@@ -1,46 +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 {
-  // Public tracking data (matches ImageTrackerProps)
-  imageUrl: string;
-  imageHost: string;
-  intersectTime: number;
-  imageSize: number;
-  isFirstScreen: string; // "true" | "false" | "" (undetermined)
-  isPrefetch: string; // "true" | "false" | "" (pending query)
-  isSuccess: string; // "true" | "false"
-  errorReason: string;
-  loadedStartTime: number;
-  loadedTime: number;
-  loadDuration: number;
-  viewDuration: number;
-
-  // Internal tracking flags (not pushed to APM)
-  _isViewable: boolean; // Current visibility state
-  _hasLoaded: boolean; // true if loaded or errored
-  _hasPushed: boolean; // true if APM data already sent
-  _firstVisibilityChecked: boolean; // true if first visibility check done
-}
-
-/**
- * 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[];
-}