@buoy-gg/highlight-updates 7.0.41 → 7.0.43

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 V,{useEffect as g,useState as R,useRef as c,useCallback as H,useLayoutEffect as j}from"react";import{View as a,Text as k,StyleSheet as $}from"react-native";import{night as u,monoFont as G}from"@buoy-gg/shared-ui";import o from"./utils/HighlightUpdatesController";import{PerformanceLogger as z,markOverlayRendered as N}from"./utils/PerformanceLogger";import{RenderTracker as p}from"./utils/RenderTracker";import{jsx as s,Fragment as O,jsxs as E}from"react/jsx-runtime";const U=1e3;export function HighlightUpdatesOverlay({onBadgePress:h}={}){const[m,b]=R([]);const[v,F]=R(()=>o.getFrozen());const[S,D]=R(null);const f=c(null);const _=c(0);const y=c(0);const C=c(v);C.current=v;if(z.isEnabled()){_.current=performance.now();y.current=m.length}j(()=>{if(z.isEnabled()&&_.current>0&&y.current>0){const e=performance.now()-_.current;N(y.current,e)}});g(()=>{const e=o.subscribeToFreeze(r=>{F(r)});return e},[]);g(()=>{const e=p.subscribeToFilters(()=>{b(r=>{return r.filter(l=>{const i=p.getRender(String(l.id));if(!i){return true}return p.shouldShowRender(i)})})});return e},[]);g(()=>{o.setSpotlightCallback(e=>{D(e)});return()=>{o.setSpotlightCallback(null)}},[]);const I=H(e=>{const r=Date.now();const l=e.map(i=>({...i,timestamp:r}));b(i=>{const d=[...i];for(const x of l){const w=d.findIndex(W=>W.id===x.id);if(w>=0){d[w]=x}else{d.push(x)}}return d})},[]);g(()=>{o.setHighlightCallback(I);f.current=setInterval(()=>{if(C.current){return}const e=Date.now();b(r=>r.filter(l=>e-l.timestamp<U))},50);return()=>{o.setHighlightCallback(null);if(f.current){clearInterval(f.current)}}},[I]);const T=h||o.getBadgePressCallback();const L=H(e=>{if(h){h(e)}else{o.handleBadgePress(e)}},[h]);const t=S?p.getRender(String(S)):null;if(m.length===0&&!t?.measurements){return null}return E(a,{style:n.overlay,pointerEvents:"box-none",nativeID:"highlight-updates-overlay",children:[t?.measurements&&E(O,{children:[s(a,{pointerEvents:"none",nativeID:"__spotlight_highlight__",style:[n.spotlightHighlight,{left:t.measurements.x-3,top:t.measurements.y-3,width:t.measurements.width+6,height:t.measurements.height+6}]}),s(a,{pointerEvents:"none",style:[n.spotlightLabel,{left:t.measurements.x,top:t.measurements.y+t.measurements.height+4}],children:s(k,{style:n.spotlightLabelText,children:t.componentName||t.displayName||t.viewType})})]}),m.map(e=>s(a,{pointerEvents:"box-none",nativeID:`__highlight_rect_${e.id}__`,style:[n.highlight,{left:e.x,top:e.y,width:e.width,height:e.height,borderColor:e.color}],children:e.count>0&&s(a,{style:[n.badge,{backgroundColor:e.color}],nativeID:`__highlight_badge_${e.id}__`,pointerEvents:T?"auto":"none",hitSlop:{top:8,bottom:8,left:8,right:8},onStartShouldSetResponder:()=>!!T,onResponderGrant:()=>L(e.id),children:s(k,{style:n.badgeText,nativeID:`__highlight_text_${e.id}__`,children:e.count})})},`highlight-${e.id}`))]})}const n=$.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:u.color.accent,backgroundColor:"transparent"},spotlightLabel:{position:"absolute",backgroundColor:u.color.surface,borderWidth:1,borderColor:u.color.accent,paddingHorizontal:8,paddingVertical:3,borderRadius:4},spotlightLabelText:{color:u.color.accent,fontSize:11,fontWeight:"600",fontFamily:G}});export default HighlightUpdatesOverlay;