@buoy-gg/highlight-updates 7.0.38 → 7.0.39

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

@@ -1 +1,274 @@
-"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;
+"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;