@buoy-gg/highlight-updates 3.0.0 → 3.0.2

package/lib/commonjs/sync/highlightUpdatesSyncAdapter.js

@@ -0,0 +1,83 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.highlightUpdatesSyncAdapter = void 0;
+var _HighlightUpdatesController = _interopRequireDefault(require("../highlight-updates/utils/HighlightUpdatesController"));
+var _RenderTracker = require("../highlight-updates/utils/RenderTracker");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function ensureInitialized() {
+  if (!_HighlightUpdatesController.default.isInitialized()) {
+    _HighlightUpdatesController.default.initialize();
+  }
+}
+
+/**
+ * Sync adapter for the highlight-updates tool, consumed by
+ * @buoy-gg/external-sync's `useExternalSync` (structurally matches its
+ * ToolSyncAdapter interface so this package doesn't need a dependency on it).
+ *
+ * The visual highlights draw on the DEVICE's UI, but the render-tracking
+ * data (component list, render counts, causes, history) is plain data — the
+ * snapshot carries it so the dashboard renders the real HighlightUpdatesModal
+ * as a mirror. Mutations (toggle, freeze, clear, spotlight) come back as
+ * actions and run on the device; spotlight even highlights the component on
+ * the phone screen while browsing details from the desktop.
+ */
+const highlightUpdatesSyncAdapter = exports.highlightUpdatesSyncAdapter = {
+  version: 1,
+  getSnapshot: () => ({
+    enabled: _HighlightUpdatesController.default.isEnabled(),
+    frozen: _HighlightUpdatesController.default.getFrozen(),
+    // True while tracking but the visual boxes are hidden (screenshot tool).
+    highlightsSuppressed: _HighlightUpdatesController.default.getHighlightsSuppressed(),
+    renders: _RenderTracker.RenderTracker.getRenders(),
+    trackerState: _RenderTracker.RenderTracker.getState()
+  }),
+  subscribe: onChange => {
+    const unsubscribeEnabled = _HighlightUpdatesController.default.subscribe(onChange);
+    const unsubscribeFreeze = _HighlightUpdatesController.default.subscribeToFreeze(onChange);
+    const unsubscribeRenders = _RenderTracker.RenderTracker.subscribe(onChange);
+    const unsubscribeTrackerState = _RenderTracker.RenderTracker.subscribeToState(onChange);
+    return () => {
+      unsubscribeEnabled();
+      unsubscribeFreeze();
+      unsubscribeRenders();
+      unsubscribeTrackerState();
+    };
+  },
+  actions: {
+    toggle: () => {
+      ensureInitialized();
+      _HighlightUpdatesController.default.toggle();
+    },
+    setEnabled: params => {
+      ensureInitialized();
+      _HighlightUpdatesController.default.setEnabled(params.enabled);
+    },
+    toggleFreeze: () => {
+      _HighlightUpdatesController.default.toggleFreeze();
+    },
+    clearRenderCounts: () => {
+      _HighlightUpdatesController.default.clearRenderCounts();
+    },
+    setSpotlight: params => {
+      _HighlightUpdatesController.default.setSpotlight(params.nativeTag);
+    },
+    // Resolve a component (by testID/nativeID/name/nativeTag) to a fresh
+    // on-screen rectangle — best-effort scrolling it into view first — so the
+    // desktop can crop a simulator screenshot to exactly that component. The
+    // returned value (rect + scale + screen) flows back as the action result.
+    locateComponent: params => {
+      ensureInitialized();
+      return _HighlightUpdatesController.default.locateComponent(params ?? {});
+    },
+    // Track + measure components WITHOUT drawing the highlight boxes, so the
+    // desktop screenshot tool can locate components with no on-device overlay.
+    setSilentTracking: params => {
+      ensureInitialized();
+      _HighlightUpdatesController.default.setSilentTracking(params.enabled ?? false);
+    }
+  }
+};

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

@@ -1 +1,278 @@
-"use strict";import React,{useEffect,useState,useRef,useCallback,useLayoutEffect}from"react";import{View,Text,StyleSheet,TouchableOpacity}from"react-native";import{buoyColors}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,l]=useState(()=>HighlightUpdatesController.getFrozen()),[s,i]=useState(null),n=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=>{l(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),n.current=setInterval(()=>{if(g.current)return;const e=Date.now();r(t=>t.filter(t=>e-t.timestamp<1e3))},50),()=>{HighlightUpdatesController.setHighlightCallback(null),n.current&&clearInterval(n.current)}),[d]);const c=e||HighlightUpdatesController.getBadgePressCallback(),u=useCallback(t=>{e?e(t):HighlightUpdatesController.handleBadgePress(t)},[e]),p=s?RenderTracker.getRender(String(s)):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&&(c?_jsx(TouchableOpacity,{onPress:()=>u(e.id),style:[styles.badge,{backgroundColor:e.color}],activeOpacity:.7,hitSlop:{top:8,bottom:8,left:8,right:8},children:_jsx(Text,{style:styles.badgeText,nativeID:`__highlight_text_${e.id}__`,children:e.count})}):_jsx(View,{style:[styles.badge,{backgroundColor:e.color}],nativeID:`__highlight_badge_${e.id}__`,pointerEvents:"none",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:buoyColors.primary,backgroundColor:"transparent"},spotlightLabel:{position:"absolute",backgroundColor:buoyColors.card,borderWidth:1,borderColor:buoyColors.primary,paddingHorizontal:8,paddingVertical:3,borderRadius:4},spotlightLabelText:{color:buoyColors.primary,fontSize:11,fontWeight:"600",fontFamily:"monospace"}});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, TouchableOpacity } from "react-native";
+import { buoyColors } 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 && (hasBadgePressHandler ? /*#__PURE__*/_jsx(TouchableOpacity, {
+        onPress: () => handleBadgePress(rect.id),
+        style: [styles.badge, {
+          backgroundColor: rect.color
+        }],
+        activeOpacity: 0.7,
+        hitSlop: {
+          top: 8,
+          bottom: 8,
+          left: 8,
+          right: 8
+        },
+        children: /*#__PURE__*/_jsx(Text, {
+          style: styles.badgeText,
+          nativeID: `__highlight_text_${rect.id}__`,
+          children: rect.count
+        })
+      }) : /*#__PURE__*/_jsx(View, {
+        style: [styles.badge, {
+          backgroundColor: rect.color
+        }],
+        nativeID: `__highlight_badge_${rect.id}__`,
+        pointerEvents: "none",
+        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: buoyColors.primary,
+    backgroundColor: "transparent"
+  },
+  spotlightLabel: {
+    position: "absolute",
+    backgroundColor: buoyColors.card,
+    borderWidth: 1,
+    borderColor: buoyColors.primary,
+    paddingHorizontal: 8,
+    paddingVertical: 3,
+    borderRadius: 4
+  },
+  spotlightLabelText: {
+    color: buoyColors.primary,
+    fontSize: 11,
+    fontWeight: "600",
+    fontFamily: "monospace"
+  }
+});
+export default HighlightUpdatesOverlay;