@buoy-gg/debug-borders 2.0.2

package/lib/commonjs/debug-borders/utils/ViewTypeMapper.js

@@ -0,0 +1,264 @@
+/**
+ * ViewTypeMapper
+ *
+ * Maps native view class names (e.g., "RCTView", "RCTText") to their
+ * developer-friendly React Native component names (e.g., "View", "Text").
+ *
+ * This makes the render tracking UI more understandable since developers
+ * work with component names, not native class names.
+ *
+ * Sources:
+ * - React Native core: packages/react-native/Libraries/Components/*
+ * - React Native Android: ReactAndroid/src/main/java/com/facebook/react/views/*
+ * - FabricNameComponentMapping.kt
+ * - Common third-party libraries (react-native-svg, gesture-handler, etc.)
+ */
+
+"use strict";
+
+/**
+ * Mapping from native view class names to React component names.
+ *
+ * Format: { "NativeClassName": "ComponentName" }
+ */
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.VIEW_TYPE_MAP = void 0;
+exports.getAllComponentNames = getAllComponentNames;
+exports.getAllNativeViewTypes = getAllNativeViewTypes;
+exports.getComponentDisplayName = getComponentDisplayName;
+exports.getNativeViewType = getNativeViewType;
+exports.isKnownViewType = isKnownViewType;
+const VIEW_TYPE_MAP = exports.VIEW_TYPE_MAP = {
+  // ==========================================================================
+  // REACT NATIVE CORE - Views
+  // ==========================================================================
+  RCTView: "View",
+  RCTSafeAreaView: "SafeAreaView",
+  RCTModalHostView: "Modal",
+  // ==========================================================================
+  // REACT NATIVE CORE - Text
+  // ==========================================================================
+  RCTText: "Text",
+  RCTRawText: "RawText",
+  RCTVirtualText: "VirtualText",
+  RCTTextInlineImage: "TextInlineImage",
+  // ==========================================================================
+  // REACT NATIVE CORE - Images
+  // ==========================================================================
+  RCTImageView: "Image",
+  RCTImage: "Image",
+  // ==========================================================================
+  // REACT NATIVE CORE - ScrollView
+  // ==========================================================================
+  RCTScrollView: "ScrollView",
+  RCTScrollContentView: "ScrollContentView",
+  AndroidHorizontalScrollView: "HorizontalScrollView",
+  AndroidHorizontalScrollContentView: "HorizontalScrollContentView",
+  // ==========================================================================
+  // REACT NATIVE CORE - TextInput
+  // ==========================================================================
+  RCTSinglelineTextInputView: "TextInput",
+  RCTMultilineTextInputView: "TextInput (Multiline)",
+  AndroidTextInput: "TextInput",
+  RCTInputAccessoryView: "InputAccessoryView",
+  // ==========================================================================
+  // REACT NATIVE CORE - Lists (FlatList/SectionList internals)
+  // ==========================================================================
+  RCTRefreshControl: "RefreshControl",
+  AndroidSwipeRefreshLayout: "RefreshControl",
+  PullToRefreshView: "RefreshControl",
+  // ==========================================================================
+  // REACT NATIVE CORE - Buttons & Touchables
+  // ==========================================================================
+  RCTSwitch: "Switch",
+  AndroidSwitch: "Switch",
+  RCTSlider: "Slider",
+  // ==========================================================================
+  // REACT NATIVE CORE - Activity Indicators
+  // ==========================================================================
+  RCTActivityIndicatorView: "ActivityIndicator",
+  AndroidProgressBar: "ActivityIndicator",
+  // ==========================================================================
+  // REACT NATIVE CORE - Android-specific
+  // ==========================================================================
+  AndroidDrawerLayout: "DrawerLayout",
+  VirtualView: "VirtualView",
+  VirtualViewExperimental: "VirtualView",
+  // ==========================================================================
+  // REACT NATIVE CORE - Debugging & Internal
+  // ==========================================================================
+  DebuggingOverlay: "DebuggingOverlay",
+  LayoutConformance: "LayoutConformance",
+  UnimplementedNativeView: "UnimplementedView",
+  // ==========================================================================
+  // REACT NATIVE CORE - Legacy/Deprecated
+  // ==========================================================================
+  RKShimmeringView: "ShimmeringView",
+  RCTTemplateView: "TemplateView",
+  RCTAxialGradientView: "AxialGradientView",
+  // "RCTVideo": "Video",
+  RCTMap: "Map",
+  RCTWebView: "WebView",
+  RCTKeyframes: "Keyframes",
+  RCTImpressionTrackingView: "ImpressionTrackingView",
+  // ==========================================================================
+  // REACT-NATIVE-SVG
+  // ==========================================================================
+  RNSVGSvgView: "Svg",
+  RNSVGGroup: "G",
+  RNSVGPath: "Path",
+  RNSVGText: "SvgText",
+  RNSVGTSpan: "TSpan",
+  RNSVGTextPath: "TextPath",
+  RNSVGImage: "SvgImage",
+  RNSVGCircle: "Circle",
+  RNSVGEllipse: "Ellipse",
+  RNSVGLine: "Line",
+  RNSVGRect: "Rect",
+  RNSVGClipPath: "ClipPath",
+  RNSVGDefs: "Defs",
+  RNSVGUse: "Use",
+  RNSVGSymbol: "Symbol",
+  RNSVGPattern: "Pattern",
+  RNSVGMask: "Mask",
+  RNSVGForeignObject: "ForeignObject",
+  RNSVGMarker: "Marker",
+  RNSVGLinearGradient: "LinearGradient",
+  RNSVGRadialGradient: "RadialGradient",
+  RNSVGFilter: "Filter",
+  RNSVGFeBlend: "FeBlend",
+  RNSVGFeColorMatrix: "FeColorMatrix",
+  RNSVGFeComposite: "FeComposite",
+  RNSVGFeFlood: "FeFlood",
+  RNSVGFeGaussianBlur: "FeGaussianBlur",
+  RNSVGFeMerge: "FeMerge",
+  RNSVGFeOffset: "FeOffset",
+  RNSVGPolygon: "Polygon",
+  RNSVGPolyline: "Polyline",
+  RNSVGStop: "Stop",
+  // ==========================================================================
+  // REACT-NATIVE-GESTURE-HANDLER
+  // ==========================================================================
+  RNGestureHandlerRootView: "GestureHandlerRootView",
+  RNGestureHandlerButton: "GestureHandlerButton",
+  // ==========================================================================
+  // REACT-NATIVE-SAFE-AREA-CONTEXT
+  // ==========================================================================
+  RNCSafeAreaProvider: "SafeAreaProvider",
+  RNCSafeAreaView: "SafeAreaView",
+  // ==========================================================================
+  // REACT-NATIVE-SCREENS (React Navigation)
+  // ==========================================================================
+  RNSScreen: "Screen",
+  RNSScreenContainer: "ScreenContainer",
+  RNSScreenStack: "ScreenStack",
+  RNSScreenStackHeaderConfig: "ScreenStackHeaderConfig",
+  RNSScreenStackHeaderSubview: "ScreenStackHeaderSubview",
+  RNSSearchBar: "SearchBar",
+  RNSFullWindowOverlay: "FullWindowOverlay",
+  RNSModalScreen: "ModalScreen",
+  // ==========================================================================
+  // REACT-NATIVE-REANIMATED
+  // ==========================================================================
+  ReanimatedView: "Animated.View",
+  // ==========================================================================
+  // EXPO MODULES
+  // ==========================================================================
+  ExpoView: "ExpoView",
+  ExpoBlurView: "BlurView",
+  ExpoLinearGradient: "LinearGradient",
+  ExpoImage: "ExpoImage",
+  ExpoVideoView: "VideoView",
+  ExpoCamera: "Camera",
+  ExpoBarCodeScannerView: "BarCodeScanner",
+  // ==========================================================================
+  // REACT-NATIVE-WEBVIEW
+  // ==========================================================================
+  RNCWebView: "WebView",
+  // ==========================================================================
+  // REACT-NATIVE-MAPS
+  // ==========================================================================
+  AIRMap: "MapView",
+  AIRMapMarker: "Marker",
+  AIRMapPolyline: "Polyline",
+  AIRMapPolygon: "Polygon",
+  AIRMapCircle: "Circle",
+  AIRMapCallout: "Callout",
+  // ==========================================================================
+  // REACT-NATIVE-VIDEO
+  // ==========================================================================
+  RCTVideo: "Video",
+  // ==========================================================================
+  // LOTTIE-REACT-NATIVE
+  // ==========================================================================
+  LottieAnimationView: "LottieView",
+  // ==========================================================================
+  // REACT-NATIVE-FAST-IMAGE
+  // ==========================================================================
+  FastImageView: "FastImage"
+};
+
+/**
+ * Get the developer-friendly component name for a native view type.
+ * Returns the original viewType if no mapping exists.
+ *
+ * @param viewType - The native view class name (e.g., "RCTView")
+ * @returns The component name (e.g., "View")
+ */
+function getComponentDisplayName(viewType) {
+  return VIEW_TYPE_MAP[viewType] || viewType;
+}
+
+/**
+ * Get the native view class name for a component name (reverse lookup).
+ * Returns null if no mapping exists.
+ *
+ * @param componentName - The component name (e.g., "View")
+ * @returns The native view class name (e.g., "RCTView") or null
+ */
+function getNativeViewType(componentName) {
+  for (const [native, display] of Object.entries(VIEW_TYPE_MAP)) {
+    if (display === componentName) {
+      return native;
+    }
+  }
+  return null;
+}
+
+/**
+ * Check if a view type is a known native component.
+ *
+ * @param viewType - The native view class name
+ * @returns true if it's a known component
+ */
+function isKnownViewType(viewType) {
+  return viewType in VIEW_TYPE_MAP;
+}
+
+/**
+ * Get all known view types (useful for autocomplete/suggestions).
+ *
+ * @returns Array of all native view class names
+ */
+function getAllNativeViewTypes() {
+  return Object.keys(VIEW_TYPE_MAP);
+}
+
+/**
+ * Get all known component names (useful for autocomplete/suggestions).
+ *
+ * @returns Array of all component display names
+ */
+function getAllComponentNames() {
+  return [...new Set(Object.values(VIEW_TYPE_MAP))];
+}
+var _default = exports.default = {
+  VIEW_TYPE_MAP,
+  getComponentDisplayName,
+  getNativeViewType,
+  isKnownViewType,
+  getAllNativeViewTypes,
+  getAllComponentNames
+};

package/lib/commonjs/debug-borders/utils/colorGeneration.js

@@ -0,0 +1,76 @@
+'use strict';
+
+const GOLDEN_ANGLE = 137.508;
+const HUE_START = 0;
+const SATURATION = 70;
+const LIGHTNESS = 50;
+function hslToHex(h, s, l) {
+  const hNorm = h / 360;
+  const sNorm = s / 100;
+  const lNorm = l / 100;
+  let r, g, b;
+  if (sNorm === 0) {
+    r = g = b = lNorm;
+  } else {
+    const hue2rgb = (p, q, t) => {
+      if (t < 0) t += 1;
+      if (t > 1) t -= 1;
+      if (t < 1 / 6) return p + (q - p) * 6 * t;
+      if (t < 1 / 2) return q;
+      if (t < 2 / 3) return p + (q - p) * (2 / 3 - t) * 6;
+      return p;
+    };
+    const q = lNorm < 0.5 ? lNorm * (1 + sNorm) : lNorm + sNorm - lNorm * sNorm;
+    const p = 2 * lNorm - q;
+    r = hue2rgb(p, q, hNorm + 1 / 3);
+    g = hue2rgb(p, q, hNorm);
+    b = hue2rgb(p, q, hNorm - 1 / 3);
+  }
+  const toHex = x => {
+    const hex = Math.round(x * 255).toString(16);
+    return hex.length === 1 ? '0' + hex : hex;
+  };
+  return `#${toHex(r)}${toHex(g)}${toHex(b)}`;
+}
+function getColorForDepth(depth) {
+  const hue = (HUE_START + depth * GOLDEN_ANGLE) % 360;
+  return hslToHex(hue, SATURATION, LIGHTNESS);
+}
+function getRandomColor() {
+  const hue = Math.random() * 360;
+  return hslToHex(hue, SATURATION, LIGHTNESS);
+}
+function generateColorPalette(count) {
+  const colors = [];
+  for (let i = 0; i < count; i++) {
+    colors.push(getColorForDepth(i));
+  }
+  return colors;
+}
+const PREDEFINED_PALETTE = ['#FF5733', '#33FF57', '#3357FF', '#FF33F5', '#F5FF33', '#33FFF5', '#FF8333', '#8333FF', '#33FF83', '#FF3383'];
+function getColorFromPalette(depth) {
+  return PREDEFINED_PALETTE[depth % PREDEFINED_PALETTE.length];
+}
+function hexToRgba(hex, alpha = 1) {
+  const r = parseInt(hex.slice(1, 3), 16);
+  const g = parseInt(hex.slice(3, 5), 16);
+  const b = parseInt(hex.slice(5, 7), 16);
+  return `rgba(${r}, ${g}, ${b}, ${alpha})`;
+}
+function hexToProcessColor(hex) {
+  const r = parseInt(hex.slice(1, 3), 16);
+  const g = parseInt(hex.slice(3, 5), 16);
+  const b = parseInt(hex.slice(5, 7), 16);
+  const a = 255;
+  return a << 24 | r << 16 | g << 8 | b;
+}
+module.exports = {
+  getColorForDepth,
+  getRandomColor,
+  generateColorPalette,
+  getColorFromPalette,
+  hslToHex,
+  hexToRgba,
+  hexToProcessColor,
+  PREDEFINED_PALETTE
+};

package/lib/commonjs/debug-borders/utils/componentInfo.js

@@ -0,0 +1,183 @@
+/**
+ * Component Info Extraction
+ *
+ * Extracts identifying information from React fiber nodes for display labels.
+ * Uses a priority order similar to highlight-updates:
+ * 1. testID (green)
+ * 2. nativeID (amber)
+ * 3. componentName (purple) - React component name from fiber
+ * 4. accessibilityLabel (pink)
+ * 5. displayName - Friendly name from ViewTypeMapper
+ * 6. viewType - Native class name fallback
+ */
+
+"use strict";
+
+const {
+  getComponentDisplayName
+} = require("./ViewTypeMapper");
+const {
+  getNativeViewClassName,
+  getComponentName
+} = require("./fiberTreeTraversal");
+
+/**
+ * Identifier types with their display configuration
+ */
+const IDENTIFIER_CONFIG = {
+  testID: {
+    label: "test",
+    color: "#10b981" // Green
+  },
+  nativeID: {
+    label: "native",
+    color: "#f59e0b" // Amber
+  },
+  component: {
+    label: "comp",
+    color: "#a855f7" // Purple
+  },
+  accessibilityLabel: {
+    label: "a11y",
+    color: "#ec4899" // Pink
+  },
+  viewType: {
+    label: "view",
+    color: "#6b7280" // Gray (fallback)
+  }
+};
+
+/**
+ * Extracts component information from a fiber node
+ *
+ * @param {Object} fiber - The fiber node
+ * @param {Object} stateNode - The fiber's stateNode (public instance)
+ * @returns {Object} - Component info with label, type, and color
+ */
+function extractComponentInfo(fiber, stateNode) {
+  const props = fiber.memoizedProps || fiber.pendingProps || {};
+
+  // Get native view class name (e.g., "RCTView", "RCTText")
+  const viewType = getNativeViewClassName(stateNode) || "Unknown";
+
+  // Get friendly display name (e.g., "View", "Text")
+  const displayName = getComponentDisplayName(viewType);
+
+  // Get React component name from fiber (walks up tree to find user component)
+  const componentName = getComponentName(fiber);
+
+  // Extract identifiers from props
+  const testID = props.testID || null;
+  const nativeID = props.nativeID || null;
+  const accessibilityLabel = props.accessibilityLabel || props.accessible?.label || null;
+
+  // Extract additional accessibility props
+  const accessibilityRole = props.accessibilityRole || props.role || null;
+  const accessibilityHint = props.accessibilityHint || null;
+  const accessibilityState = props.accessibilityState || null;
+
+  // Extract style info (flatten if array)
+  let styleInfo = null;
+  if (props.style) {
+    try {
+      const flatStyle = Array.isArray(props.style) ? Object.assign({}, ...props.style.filter(Boolean)) : props.style;
+      styleInfo = flatStyle;
+    } catch (e) {
+      styleInfo = null;
+    }
+  }
+
+  // Get fiber debug info
+  const fiberTag = fiber.tag;
+  const fiberKey = fiber.key;
+
+  // Get parent component name
+  let parentComponentName = null;
+  let parentFiber = fiber.return;
+  while (parentFiber) {
+    if (parentFiber.type && typeof parentFiber.type === "function") {
+      parentComponentName = parentFiber.type.displayName || parentFiber.type.name || null;
+      if (parentComponentName) break;
+    }
+    parentFiber = parentFiber.return;
+  }
+
+  // Build the info object
+  const info = {
+    viewType,
+    displayName,
+    componentName,
+    parentComponentName,
+    testID,
+    nativeID,
+    accessibilityLabel,
+    accessibilityRole,
+    accessibilityHint,
+    accessibilityState,
+    fiberTag,
+    fiberKey,
+    styleInfo,
+    // Primary identifier (following priority order)
+    primaryLabel: null,
+    primaryType: null,
+    primaryColor: null
+  };
+
+  // Determine primary label following priority order
+  // 1. testID (most specific)
+  // 2. accessibilityLabel (user-facing identifier)
+  // 3. everything else (componentName, nativeID, viewType)
+  if (testID) {
+    info.primaryLabel = testID;
+    info.primaryType = "testID";
+    info.primaryColor = IDENTIFIER_CONFIG.testID.color;
+  } else if (accessibilityLabel) {
+    info.primaryLabel = accessibilityLabel;
+    info.primaryType = "accessibilityLabel";
+    info.primaryColor = IDENTIFIER_CONFIG.accessibilityLabel.color;
+  } else if (componentName) {
+    info.primaryLabel = componentName;
+    info.primaryType = "component";
+    info.primaryColor = IDENTIFIER_CONFIG.component.color;
+  } else if (nativeID) {
+    info.primaryLabel = nativeID;
+    info.primaryType = "nativeID";
+    info.primaryColor = IDENTIFIER_CONFIG.nativeID.color;
+  } else {
+    // Fallback to display name
+    info.primaryLabel = displayName;
+    info.primaryType = "viewType";
+    info.primaryColor = IDENTIFIER_CONFIG.viewType.color;
+  }
+  return info;
+}
+
+/**
+ * Gets a short label for display (truncates long values)
+ *
+ * @param {string} label - The full label
+ * @param {number} maxLength - Maximum length (default 20)
+ * @returns {string} - Truncated label
+ */
+function getShortLabel(label, maxLength = 20) {
+  if (!label) return "";
+  if (label.length <= maxLength) return label;
+  return label.substring(0, maxLength - 1) + "…";
+}
+
+/**
+ * Gets the type prefix for a label (e.g., "test:", "a11y:")
+ *
+ * @param {string} type - The identifier type
+ * @returns {string} - The prefix
+ */
+function getLabelPrefix(type) {
+  const config = IDENTIFIER_CONFIG[type];
+  return config ? config.label + ":" : "";
+}
+module.exports = {
+  extractComponentInfo,
+  getShortLabel,
+  getLabelPrefix,
+  IDENTIFIER_CONFIG
+};

package/lib/commonjs/debug-borders/utils/componentMeasurement.js

@@ -0,0 +1,111 @@
+"use strict";
+
+let addLog = null;
+try {
+  const debugInfo = require("./DebugInfo");
+  addLog = debugInfo.addLog;
+} catch (e) {}
+function measureInstance(instance) {
+  return new Promise(resolve => {
+    try {
+      let publicInstance = instance;
+      if (instance.canonical) {
+        if (instance.canonical.publicInstance) {
+          publicInstance = instance.canonical.publicInstance;
+        } else {
+          publicInstance = instance.canonical;
+        }
+      }
+      if (typeof publicInstance.getBoundingClientRect === "function") {
+        const rect = publicInstance.getBoundingClientRect();
+        if (rect && typeof rect.x === "number" && typeof rect.y === "number" && typeof rect.width === "number" && typeof rect.height === "number" && rect.width >= 0 && rect.height >= 0) {
+          resolve({
+            x: rect.x,
+            y: rect.y,
+            width: rect.width,
+            height: rect.height
+          });
+          return;
+        }
+      }
+      if (typeof publicInstance.measure === "function") {
+        const timeout = setTimeout(() => {
+          resolve(null);
+        }, 100);
+        publicInstance.measure((x, y, width, height, pageX, pageY) => {
+          clearTimeout(timeout);
+          if (pageX != null && pageY != null && width != null && height != null && width >= 0 && height >= 0) {
+            resolve({
+              x: pageX,
+              y: pageY,
+              width: width,
+              height: height
+            });
+          } else {
+            resolve(null);
+          }
+        });
+        return;
+      }
+      resolve(null);
+    } catch (error) {
+      resolve(null);
+    }
+  });
+}
+const {
+  extractComponentInfo
+} = require("./componentInfo");
+async function measureInstances(instances) {
+  const measurements = await Promise.all(instances.map(async ({
+    instance,
+    fiber,
+    depth
+  }) => {
+    const rect = await measureInstance(instance);
+    if (rect) {
+      const componentInfo = extractComponentInfo(fiber, instance);
+      return {
+        ...rect,
+        depth: depth,
+        componentInfo: componentInfo
+      };
+    }
+    return null;
+  }));
+  const validMeasurements = measurements.filter(m => m != null);
+  return validMeasurements;
+}
+function getMeasurementCapabilities(instance) {
+  return {
+    hasFabricBoundingRect: typeof instance.getBoundingClientRect === "function",
+    hasPaperMeasure: typeof instance.measure === "function",
+    hasNode: instance.node != null
+  };
+}
+function getMeasurementStats(instances) {
+  const stats = {
+    fabric: 0,
+    paper: 0,
+    none: 0
+  };
+  instances.forEach(({
+    instance
+  }) => {
+    const caps = getMeasurementCapabilities(instance);
+    if (caps.hasFabricBoundingRect) {
+      stats.fabric++;
+    } else if (caps.hasPaperMeasure) {
+      stats.paper++;
+    } else {
+      stats.none++;
+    }
+  });
+  return stats;
+}
+module.exports = {
+  measureInstance,
+  measureInstances,
+  getMeasurementCapabilities,
+  getMeasurementStats
+};