@buoy-gg/highlight-updates 7.0.35 → 7.0.38

package/lib/module/highlight-updates/HighlightUpdatesOverlay.js

@@ -1,274 +1 @@
-"use strict";
-
-/**
- * HighlightUpdatesOverlay
- *
- * Renders colored highlight rectangles for components that have updated.
- * Uses View-based rendering (similar to debug-borders) instead of the
- * native DebuggingOverlay component for better compatibility.
- */
-
-import React, { useEffect, useState, useRef, useCallback, useLayoutEffect } from "react";
-import { View, Text, StyleSheet } from "react-native";
-import { night, monoFont } from "@buoy-gg/shared-ui";
-import HighlightUpdatesController from "./utils/HighlightUpdatesController";
-import { PerformanceLogger, markOverlayRendered } from "./utils/PerformanceLogger";
-import { RenderTracker } from "./utils/RenderTracker";
-
-// Declare performance API available in React Native's JavaScript environment
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-// How long highlights stay visible (ms)
-const HIGHLIGHT_DURATION = 1000;
-export function HighlightUpdatesOverlay({
-  onBadgePress
-} = {}) {
-  const [highlights, setHighlights] = useState([]);
-  const [isFrozen, setIsFrozen] = useState(() => HighlightUpdatesController.getFrozen());
-  const [spotlightTag, setSpotlightTag] = useState(null);
-  const cleanupTimerRef = useRef(null);
-  const renderStartTimeRef = useRef(0);
-  const highlightCountRef = useRef(0);
-  const frozenRef = useRef(isFrozen);
-
-  // Keep ref in sync with state for use in interval callback
-  frozenRef.current = isFrozen;
-
-  // Track render start time
-  if (PerformanceLogger.isEnabled()) {
-    renderStartTimeRef.current = performance.now();
-    highlightCountRef.current = highlights.length;
-  }
-
-  // Measure render completion time using useLayoutEffect (runs after DOM mutations)
-  useLayoutEffect(() => {
-    if (PerformanceLogger.isEnabled() && renderStartTimeRef.current > 0 && highlightCountRef.current > 0) {
-      const renderTime = performance.now() - renderStartTimeRef.current;
-      // Mark end-to-end timing (for benchmark recording only - no console logs)
-      markOverlayRendered(highlightCountRef.current, renderTime);
-    }
-  });
-
-  // Subscribe to freeze state changes
-  useEffect(() => {
-    const unsubscribe = HighlightUpdatesController.subscribeToFreeze(frozen => {
-      setIsFrozen(frozen);
-    });
-    return unsubscribe;
-  }, []);
-
-  // Subscribe to filter changes - refresh frozen highlights when filters change
-  useEffect(() => {
-    const unsubscribe = RenderTracker.subscribeToFilters(() => {
-      // When filters change, filter out highlights that no longer match
-      setHighlights(prev => {
-        return prev.filter(highlight => {
-          // Look up the render by nativeTag
-          const render = RenderTracker.getRender(String(highlight.id));
-          if (!render) {
-            // If render not found, keep the highlight (it might be from a different source)
-            return true;
-          }
-          // Check if the render should still be shown based on new filters
-          return RenderTracker.shouldShowRender(render);
-        });
-      });
-    });
-    return unsubscribe;
-  }, []);
-
-  // Subscribe to spotlight changes - show which component is being viewed in detail
-  useEffect(() => {
-    HighlightUpdatesController.setSpotlightCallback(tag => {
-      setSpotlightTag(tag);
-    });
-    return () => {
-      HighlightUpdatesController.setSpotlightCallback(null);
-    };
-  }, []);
-
-  // Callback to add new highlights
-  const addHighlights = useCallback(newRects => {
-    const now = Date.now();
-    const timestampedRects = newRects.map(rect => ({
-      ...rect,
-      timestamp: now
-    }));
-    setHighlights(prev => {
-      // Merge new highlights, replacing any with same id
-      const updated = [...prev];
-      for (const newRect of timestampedRects) {
-        const existingIndex = updated.findIndex(r => r.id === newRect.id);
-        if (existingIndex >= 0) {
-          updated[existingIndex] = newRect;
-        } else {
-          updated.push(newRect);
-        }
-      }
-      return updated;
-    });
-  }, []);
-
-  // Register the callback with the controller
-  useEffect(() => {
-    HighlightUpdatesController.setHighlightCallback(addHighlights);
-
-    // Cleanup timer to remove old highlights
-    // When frozen, skip cleanup to keep highlights visible indefinitely
-    cleanupTimerRef.current = setInterval(() => {
-      // Check frozen state via ref (doesn't cause re-subscription)
-      if (frozenRef.current) {
-        return; // Skip cleanup when frozen
-      }
-      const now = Date.now();
-      setHighlights(prev => prev.filter(rect => now - rect.timestamp < HIGHLIGHT_DURATION));
-    }, 50);
-    return () => {
-      HighlightUpdatesController.setHighlightCallback(null);
-      if (cleanupTimerRef.current) {
-        clearInterval(cleanupTimerRef.current);
-      }
-    };
-  }, [addHighlights]);
-
-  // Check if badge press handling is enabled (via props or controller)
-  const hasBadgePressHandler = onBadgePress || HighlightUpdatesController.getBadgePressCallback();
-
-  // Handle badge press - navigate to detail view for this component
-  const handleBadgePress = useCallback(nativeTag => {
-    // First try the prop callback
-    if (onBadgePress) {
-      onBadgePress(nativeTag);
-    } else {
-      // Fall back to controller callback
-      HighlightUpdatesController.handleBadgePress(nativeTag);
-    }
-  }, [onBadgePress]);
-
-  // Get spotlight render info if we have a spotlight active
-  const spotlightRender = spotlightTag ? RenderTracker.getRender(String(spotlightTag)) : null;
-
-  // Render nothing if no highlights and no spotlight
-  if (highlights.length === 0 && !spotlightRender?.measurements) {
-    return null;
-  }
-  return /*#__PURE__*/_jsxs(View, {
-    style: styles.overlay,
-    pointerEvents: "box-none",
-    nativeID: "highlight-updates-overlay",
-    children: [spotlightRender?.measurements && /*#__PURE__*/_jsxs(_Fragment, {
-      children: [/*#__PURE__*/_jsx(View, {
-        pointerEvents: "none",
-        nativeID: "__spotlight_highlight__",
-        style: [styles.spotlightHighlight, {
-          // Offset by border width so border renders outside the component bounds
-          left: spotlightRender.measurements.x - 3,
-          top: spotlightRender.measurements.y - 3,
-          width: spotlightRender.measurements.width + 6,
-          height: spotlightRender.measurements.height + 6
-        }]
-      }), /*#__PURE__*/_jsx(View, {
-        pointerEvents: "none",
-        style: [styles.spotlightLabel, {
-          left: spotlightRender.measurements.x,
-          top: spotlightRender.measurements.y + spotlightRender.measurements.height + 4
-        }],
-        children: /*#__PURE__*/_jsx(Text, {
-          style: styles.spotlightLabelText,
-          children: spotlightRender.componentName || spotlightRender.displayName || spotlightRender.viewType
-        })
-      })]
-    }), highlights.map(rect => /*#__PURE__*/_jsx(View, {
-      pointerEvents: "box-none",
-      nativeID: `__highlight_rect_${rect.id}__`,
-      style: [styles.highlight, {
-        left: rect.x,
-        top: rect.y,
-        width: rect.width,
-        height: rect.height,
-        borderColor: rect.color
-      }],
-      children: rect.count > 0 && /*#__PURE__*/_jsx(View, {
-        style: [styles.badge, {
-          backgroundColor: rect.color
-        }],
-        nativeID: `__highlight_badge_${rect.id}__`,
-        pointerEvents: hasBadgePressHandler ? "auto" : "none",
-        hitSlop: {
-          top: 8,
-          bottom: 8,
-          left: 8,
-          right: 8
-        },
-        onStartShouldSetResponder: () => !!hasBadgePressHandler
-        // Fire on touch-DOWN: on churning screens the badge views are
-        // torn down and recreated between finger-down and finger-up
-        // (every highlight event rebuilds the boxes), which kills the
-        // responder before a release can fire. Grant fires immediately.
-        ,
-        onResponderGrant: () => handleBadgePress(rect.id),
-        children: /*#__PURE__*/_jsx(Text, {
-          style: styles.badgeText,
-          nativeID: `__highlight_text_${rect.id}__`,
-          children: rect.count
-        })
-      })
-    }, `highlight-${rect.id}`))]
-  });
-}
-const styles = StyleSheet.create({
-  overlay: {
-    position: "absolute",
-    top: 0,
-    left: 0,
-    right: 0,
-    bottom: 0,
-    zIndex: 999999,
-    elevation: 999999,
-    borderWidth: 0
-  },
-  highlight: {
-    position: "absolute",
-    borderWidth: 2,
-    borderStyle: "solid",
-    backgroundColor: "transparent"
-  },
-  badge: {
-    position: "absolute",
-    top: 0,
-    right: 0,
-    height: 14,
-    borderRadius: 0,
-    justifyContent: "center",
-    alignItems: "center",
-    paddingHorizontal: 2
-  },
-  badgeText: {
-    color: "#000",
-    fontSize: 9,
-    fontWeight: "bold"
-  },
-  // Spotlight highlight styles
-  spotlightHighlight: {
-    position: "absolute",
-    borderWidth: 2,
-    borderStyle: "dashed",
-    borderColor: night.color.accent,
-    backgroundColor: "transparent"
-  },
-  spotlightLabel: {
-    position: "absolute",
-    backgroundColor: night.color.surface,
-    borderWidth: 1,
-    borderColor: night.color.accent,
-    paddingHorizontal: 8,
-    paddingVertical: 3,
-    borderRadius: 4
-  },
-  spotlightLabelText: {
-    color: night.color.accent,
-    fontSize: 11,
-    fontWeight: "600",
-    fontFamily: monoFont
-  }
-});
-export default HighlightUpdatesOverlay;
+"use strict";import React,{useEffect,useState,useRef,useCallback,useLayoutEffect}from"react";import{View,Text,StyleSheet}from"react-native";import{night,monoFont}from"@buoy-gg/shared-ui";import HighlightUpdatesController from"./utils/HighlightUpdatesController";import{PerformanceLogger,markOverlayRendered}from"./utils/PerformanceLogger";import{RenderTracker}from"./utils/RenderTracker";import{jsx as _jsx,Fragment as _Fragment,jsxs as _jsxs}from"react/jsx-runtime";const HIGHLIGHT_DURATION=1e3;export function HighlightUpdatesOverlay({onBadgePress:e}={}){const[t,r]=useState([]),[o,n]=useState(()=>HighlightUpdatesController.getFrozen()),[l,i]=useState(null),s=useRef(null),a=useRef(0),h=useRef(0),g=useRef(o);g.current=o,PerformanceLogger.isEnabled()&&(a.current=performance.now(),h.current=t.length),useLayoutEffect(()=>{if(PerformanceLogger.isEnabled()&&a.current>0&&h.current>0){const e=performance.now()-a.current;markOverlayRendered(h.current,e)}}),useEffect(()=>HighlightUpdatesController.subscribeToFreeze(e=>{n(e)}),[]),useEffect(()=>RenderTracker.subscribeToFilters(()=>{r(e=>e.filter(e=>{const t=RenderTracker.getRender(String(e.id));return!t||RenderTracker.shouldShowRender(t)}))}),[]),useEffect(()=>(HighlightUpdatesController.setSpotlightCallback(e=>{i(e)}),()=>{HighlightUpdatesController.setSpotlightCallback(null)}),[]);const d=useCallback(e=>{const t=Date.now(),o=e.map(e=>({...e,timestamp:t}));r(e=>{const t=[...e];for(const e of o){const r=t.findIndex(t=>t.id===e.id);r>=0?t[r]=e:t.push(e)}return t})},[]);useEffect(()=>(HighlightUpdatesController.setHighlightCallback(d),s.current=setInterval(()=>{if(g.current)return;const e=Date.now();r(t=>t.filter(t=>e-t.timestamp<1e3))},50),()=>{HighlightUpdatesController.setHighlightCallback(null),s.current&&clearInterval(s.current)}),[d]);const c=e||HighlightUpdatesController.getBadgePressCallback(),u=useCallback(t=>{e?e(t):HighlightUpdatesController.handleBadgePress(t)},[e]),p=l?RenderTracker.getRender(String(l)):null;return 0!==t.length||p?.measurements?_jsxs(View,{style:styles.overlay,pointerEvents:"box-none",nativeID:"highlight-updates-overlay",children:[p?.measurements&&_jsxs(_Fragment,{children:[_jsx(View,{pointerEvents:"none",nativeID:"__spotlight_highlight__",style:[styles.spotlightHighlight,{left:p.measurements.x-3,top:p.measurements.y-3,width:p.measurements.width+6,height:p.measurements.height+6}]}),_jsx(View,{pointerEvents:"none",style:[styles.spotlightLabel,{left:p.measurements.x,top:p.measurements.y+p.measurements.height+4}],children:_jsx(Text,{style:styles.spotlightLabelText,children:p.componentName||p.displayName||p.viewType})})]}),t.map(e=>_jsx(View,{pointerEvents:"box-none",nativeID:`__highlight_rect_${e.id}__`,style:[styles.highlight,{left:e.x,top:e.y,width:e.width,height:e.height,borderColor:e.color}],children:e.count>0&&_jsx(View,{style:[styles.badge,{backgroundColor:e.color}],nativeID:`__highlight_badge_${e.id}__`,pointerEvents:c?"auto":"none",hitSlop:{top:8,bottom:8,left:8,right:8},onStartShouldSetResponder:()=>!!c,onResponderGrant:()=>u(e.id),children:_jsx(Text,{style:styles.badgeText,nativeID:`__highlight_text_${e.id}__`,children:e.count})})},`highlight-${e.id}`))]}):null}const styles=StyleSheet.create({overlay:{position:"absolute",top:0,left:0,right:0,bottom:0,zIndex:999999,elevation:999999,borderWidth:0},highlight:{position:"absolute",borderWidth:2,borderStyle:"solid",backgroundColor:"transparent"},badge:{position:"absolute",top:0,right:0,height:14,borderRadius:0,justifyContent:"center",alignItems:"center",paddingHorizontal:2},badgeText:{color:"#000",fontSize:9,fontWeight:"bold"},spotlightHighlight:{position:"absolute",borderWidth:2,borderStyle:"dashed",borderColor:night.color.accent,backgroundColor:"transparent"},spotlightLabel:{position:"absolute",backgroundColor:night.color.surface,borderWidth:1,borderColor:night.color.accent,paddingHorizontal:8,paddingVertical:3,borderRadius:4},spotlightLabelText:{color:night.color.accent,fontSize:11,fontWeight:"600",fontFamily:monoFont}});export default HighlightUpdatesOverlay;