@buoy-gg/highlight-updates 2.1.4-beta.2 → 2.1.5

package/lib/module/highlight-updates/components/RenderListItem.js

@@ -1,221 +1 @@
-"use strict";
-
-/**
- * RenderListItem
- *
- * Compact list item showing a tracked component render.
- * Displays viewType, identifier (testID/nativeID/component), render count, and timing.
- */
-
-import React, { useMemo } from "react";
-import { View, Text, TouchableOpacity, StyleSheet } from "react-native";
-import { ChevronRight, buoyColors } from "@buoy-gg/shared-ui";
-import { IdentifierBadge } from "./IdentifierBadge";
-import { RenderCauseBadge } from "./RenderCauseBadge";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-function RenderListItemInner({
-  render,
-  onPress
-}) {
-  // Get best identifier to show (primary)
-  const identifier = useMemo(() => {
-    if (render.testID) return {
-      type: "testID",
-      value: render.testID
-    };
-    if (render.nativeID) return {
-      type: "nativeID",
-      value: render.nativeID
-    };
-    if (render.componentName) return {
-      type: "component",
-      value: render.componentName
-    };
-    if (render.accessibilityLabel) return {
-      type: "accessibilityLabel",
-      value: render.accessibilityLabel
-    };
-    return {
-      type: "nativeTag",
-      value: String(render.nativeTag)
-    };
-  }, [render.testID, render.nativeID, render.componentName, render.accessibilityLabel, render.nativeTag]);
-
-  // Get secondary identifier (accessibilityLabel if not already primary)
-  const secondaryIdentifier = useMemo(() => {
-    if (render.accessibilityLabel && identifier.type !== "accessibilityLabel") {
-      return {
-        type: "accessibilityLabel",
-        value: render.accessibilityLabel
-      };
-    }
-    return null;
-  }, [render.accessibilityLabel, identifier.type]);
-
-  // Format time since last render
-  const timeSinceRender = useMemo(() => {
-    const diff = Date.now() - render.lastRenderTime;
-    if (diff < 1000) return "just now";
-    if (diff < 60000) return `${Math.floor(diff / 1000)}s ago`;
-    if (diff < 3600000) return `${Math.floor(diff / 60000)}m ago`;
-    return `${Math.floor(diff / 3600000)}h ago`;
-  }, [render.lastRenderTime]);
-  return /*#__PURE__*/_jsxs(TouchableOpacity, {
-    style: styles.container,
-    onPress: () => onPress(render),
-    activeOpacity: 0.7,
-    children: [/*#__PURE__*/_jsx(View, {
-      style: [styles.colorIndicator, {
-        backgroundColor: render.color
-      }]
-    }), /*#__PURE__*/_jsxs(View, {
-      style: styles.content,
-      children: [/*#__PURE__*/_jsxs(View, {
-        style: styles.topRow,
-        children: [/*#__PURE__*/_jsxs(View, {
-          style: styles.viewTypeContainer,
-          children: [/*#__PURE__*/_jsx(Text, {
-            style: styles.viewType,
-            numberOfLines: 1,
-            children: render.displayName
-          }), secondaryIdentifier ? /*#__PURE__*/_jsx(IdentifierBadge, {
-            type: secondaryIdentifier.type,
-            value: secondaryIdentifier.value,
-            compact: true,
-            shortLabel: true
-          }) : render.displayName !== render.viewType ? /*#__PURE__*/_jsx(Text, {
-            style: styles.nativeType,
-            numberOfLines: 1,
-            children: render.viewType
-          }) : null]
-        }), /*#__PURE__*/_jsx(View, {
-          style: [styles.renderCountBadge, {
-            backgroundColor: render.color + "30"
-          }],
-          children: /*#__PURE__*/_jsxs(Text, {
-            style: [styles.renderCount, {
-              color: render.color
-            }],
-            children: [render.renderCount, "x"]
-          })
-        })]
-      }), render.lastRenderCause && /*#__PURE__*/_jsx(View, {
-        style: styles.causeRow,
-        children: /*#__PURE__*/_jsx(RenderCauseBadge, {
-          cause: render.lastRenderCause,
-          compact: true,
-          showKeys: true,
-          showTwoLevel: true
-        })
-      }), /*#__PURE__*/_jsxs(View, {
-        style: styles.bottomRow,
-        children: [/*#__PURE__*/_jsx(View, {
-          style: styles.identifierContainer,
-          children: /*#__PURE__*/_jsx(IdentifierBadge, {
-            type: identifier.type,
-            value: identifier.value,
-            compact: true,
-            shortLabel: true
-          })
-        }), /*#__PURE__*/_jsx(Text, {
-          style: styles.timing,
-          children: timeSinceRender
-        })]
-      })]
-    }), /*#__PURE__*/_jsx(ChevronRight, {
-      size: 16,
-      color: buoyColors.textMuted
-    })]
-  });
-}
-
-// Memoize with custom comparison - only re-render when relevant props change
-// This is critical for performance when the modal is open during rapid renders
-export const RenderListItem = /*#__PURE__*/React.memo(RenderListItemInner, (prevProps, nextProps) => {
-  // Return true if props are EQUAL (skip re-render)
-  // Return false if props are DIFFERENT (trigger re-render)
-  const prevRender = prevProps.render;
-  const nextRender = nextProps.render;
-  return prevRender.id === nextRender.id && prevRender.renderCount === nextRender.renderCount && prevRender.color === nextRender.color && prevRender.lastRenderTime === nextRender.lastRenderTime && prevRender.lastRenderCause?.type === nextRender.lastRenderCause?.type && prevRender.lastRenderCause?.componentCause === nextRender.lastRenderCause?.componentCause && prevProps.onPress === nextProps.onPress;
-});
-const styles = StyleSheet.create({
-  container: {
-    flexDirection: "row",
-    alignItems: "center",
-    paddingVertical: 10,
-    paddingHorizontal: 12,
-    marginHorizontal: 12,
-    marginBottom: 6,
-    backgroundColor: buoyColors.card,
-    borderRadius: 8,
-    borderWidth: 1,
-    borderColor: buoyColors.border
-  },
-  colorIndicator: {
-    width: 4,
-    height: 36,
-    borderRadius: 2,
-    marginRight: 10
-  },
-  content: {
-    flex: 1,
-    marginRight: 8
-  },
-  topRow: {
-    flexDirection: "row",
-    alignItems: "center",
-    marginBottom: 4
-  },
-  causeRow: {
-    marginBottom: 4
-  },
-  viewTypeContainer: {
-    flex: 1,
-    marginRight: 8
-  },
-  viewType: {
-    fontSize: 13,
-    fontWeight: "600",
-    color: buoyColors.text
-  },
-  nativeType: {
-    fontSize: 10,
-    color: buoyColors.textMuted,
-    fontFamily: "monospace",
-    marginTop: 1
-  },
-  accessibilityLabel: {
-    fontSize: 10,
-    color: buoyColors.primary,
-    fontStyle: "italic",
-    marginTop: 1
-  },
-  renderCountBadge: {
-    paddingHorizontal: 8,
-    paddingVertical: 2,
-    borderRadius: 10
-  },
-  renderCount: {
-    fontSize: 11,
-    fontWeight: "700",
-    fontFamily: "monospace"
-  },
-  bottomRow: {
-    flexDirection: "row",
-    alignItems: "center",
-    justifyContent: "space-between",
-    gap: 8
-  },
-  identifierContainer: {
-    flex: 1,
-    flexShrink: 1,
-    overflow: "hidden"
-  },
-  timing: {
-    fontSize: 10,
-    color: buoyColors.textMuted,
-    fontWeight: "500",
-    flexShrink: 0
-  }
-});
-export default RenderListItem;
+"use strict";import React,{useMemo}from"react";import{View,Text,TouchableOpacity,StyleSheet}from"react-native";import{ChevronRight,buoyColors}from"@buoy-gg/shared-ui";import{IdentifierBadge}from"./IdentifierBadge";import{RenderCauseBadge}from"./RenderCauseBadge";import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";function RenderListItemInner({render:e,onPress:t}){const o=useMemo(()=>e.testID?{type:"testID",value:e.testID}:e.nativeID?{type:"nativeID",value:e.nativeID}:e.componentName?{type:"component",value:e.componentName}:e.accessibilityLabel?{type:"accessibilityLabel",value:e.accessibilityLabel}:{type:"nativeTag",value:String(e.nativeTag)},[e.testID,e.nativeID,e.componentName,e.accessibilityLabel,e.nativeTag]),i=useMemo(()=>e.accessibilityLabel&&"accessibilityLabel"!==o.type?{type:"accessibilityLabel",value:e.accessibilityLabel}:null,[e.accessibilityLabel,o.type]),r=useMemo(()=>{const t=Date.now()-e.lastRenderTime;return t<1e3?"just now":t<6e4?`${Math.floor(t/1e3)}s ago`:t<36e5?`${Math.floor(t/6e4)}m ago`:`${Math.floor(t/36e5)}h ago`},[e.lastRenderTime]);return _jsxs(TouchableOpacity,{style:styles.container,onPress:()=>t(e),activeOpacity:.7,children:[_jsx(View,{style:[styles.colorIndicator,{backgroundColor:e.color}]}),_jsxs(View,{style:styles.content,children:[_jsxs(View,{style:styles.topRow,children:[_jsxs(View,{style:styles.viewTypeContainer,children:[_jsx(Text,{style:styles.viewType,numberOfLines:1,children:e.displayName}),i?_jsx(IdentifierBadge,{type:i.type,value:i.value,compact:!0,shortLabel:!0}):e.displayName!==e.viewType?_jsx(Text,{style:styles.nativeType,numberOfLines:1,children:e.viewType}):null]}),_jsx(View,{style:[styles.renderCountBadge,{backgroundColor:e.color+"30"}],children:_jsxs(Text,{style:[styles.renderCount,{color:e.color}],children:[e.renderCount,"x"]})})]}),e.lastRenderCause&&_jsx(View,{style:styles.causeRow,children:_jsx(RenderCauseBadge,{cause:e.lastRenderCause,compact:!0,showKeys:!0,showTwoLevel:!0})}),_jsxs(View,{style:styles.bottomRow,children:[_jsx(View,{style:styles.identifierContainer,children:_jsx(IdentifierBadge,{type:o.type,value:o.value,compact:!0,shortLabel:!0})}),_jsx(Text,{style:styles.timing,children:r})]})]}),_jsx(ChevronRight,{size:16,color:buoyColors.textMuted})]})}export const RenderListItem=React.memo(RenderListItemInner,(e,t)=>{const o=e.render,i=t.render;return o.id===i.id&&o.renderCount===i.renderCount&&o.color===i.color&&o.lastRenderTime===i.lastRenderTime&&o.lastRenderCause?.type===i.lastRenderCause?.type&&o.lastRenderCause?.componentCause===i.lastRenderCause?.componentCause&&e.onPress===t.onPress});const styles=StyleSheet.create({container:{flexDirection:"row",alignItems:"center",paddingVertical:10,paddingHorizontal:12,marginHorizontal:12,marginBottom:6,backgroundColor:buoyColors.card,borderRadius:8,borderWidth:1,borderColor:buoyColors.border},colorIndicator:{width:4,height:36,borderRadius:2,marginRight:10},content:{flex:1,marginRight:8},topRow:{flexDirection:"row",alignItems:"center",marginBottom:4},causeRow:{marginBottom:4},viewTypeContainer:{flex:1,marginRight:8},viewType:{fontSize:13,fontWeight:"600",color:buoyColors.text},nativeType:{fontSize:10,color:buoyColors.textMuted,fontFamily:"monospace",marginTop:1},accessibilityLabel:{fontSize:10,color:buoyColors.primary,fontStyle:"italic",marginTop:1},renderCountBadge:{paddingHorizontal:8,paddingVertical:2,borderRadius:10},renderCount:{fontSize:11,fontWeight:"700",fontFamily:"monospace"},bottomRow:{flexDirection:"row",alignItems:"center",justifyContent:"space-between",gap:8},identifierContainer:{flex:1,flexShrink:1,overflow:"hidden"},timing:{fontSize:10,color:buoyColors.textMuted,fontWeight:"500",flexShrink:0}});export default RenderListItem;

package/lib/module/highlight-updates/components/StatsDisplay.js

@@ -1,67 +1 @@
-"use strict";
-
-/**
- * StatsDisplay
- *
- * Isolated component for displaying render statistics in the header.
- * Subscribes to RenderTracker updates independently so parent header
- * doesn't re-render when stats change.
- *
- * Following the optimization guide: move subscriptions to child components.
- */
-
-import React, { useState, useEffect, memo } from "react";
-import { View, Text, StyleSheet } from "react-native";
-import { Activity, buoyColors } from "@buoy-gg/shared-ui";
-import { RenderTracker } from "../utils/RenderTracker";
-
-/**
- * Isolated stats display that owns its own subscription.
- * Only this component re-renders when stats change.
- */
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-function StatsDisplayInner() {
-  const [stats, setStats] = useState({
-    totalComponents: 0,
-    totalRenders: 0
-  });
-  useEffect(() => {
-    const unsubscribe = RenderTracker.subscribe(() => {
-      setStats(RenderTracker.getStats());
-    });
-    return unsubscribe;
-  }, []);
-  return /*#__PURE__*/_jsxs(View, {
-    nativeID: "__rn_buoy__stats-row",
-    style: styles.headerChip,
-    children: [/*#__PURE__*/_jsx(Activity, {
-      size: 12,
-      color: buoyColors.primary
-    }), /*#__PURE__*/_jsx(Text, {
-      style: [styles.headerChipValue, {
-        color: buoyColors.primary
-      }],
-      children: stats.totalComponents
-    })]
-  });
-}
-export const StatsDisplay = /*#__PURE__*/memo(StatsDisplayInner);
-const styles = StyleSheet.create({
-  headerChip: {
-    flexDirection: "row",
-    alignItems: "center",
-    gap: 4,
-    backgroundColor: buoyColors.hover,
-    paddingHorizontal: 8,
-    paddingVertical: 5,
-    borderRadius: 12,
-    borderWidth: 1,
-    borderColor: buoyColors.border
-  },
-  headerChipValue: {
-    fontSize: 12,
-    fontWeight: "600",
-    fontFamily: "monospace"
-  }
-});
-export default StatsDisplay;
+"use strict";import React,{useState,useEffect,memo}from"react";import{View,Text,StyleSheet}from"react-native";import{Activity,buoyColors}from"@buoy-gg/shared-ui";import{RenderTracker}from"../utils/RenderTracker";import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";function StatsDisplayInner(){const[e,t]=useState({totalComponents:0,totalRenders:0});return useEffect(()=>RenderTracker.subscribe(()=>{t(RenderTracker.getStats())}),[]),_jsxs(View,{nativeID:"__rn_buoy__stats-row",style:styles.headerChip,children:[_jsx(Activity,{size:12,color:buoyColors.primary}),_jsx(Text,{style:[styles.headerChipValue,{color:buoyColors.primary}],children:e.totalComponents})]})}export const StatsDisplay=memo(StatsDisplayInner);const styles=StyleSheet.create({headerChip:{flexDirection:"row",alignItems:"center",gap:4,backgroundColor:buoyColors.hover,paddingHorizontal:8,paddingVertical:5,borderRadius:12,borderWidth:1,borderColor:buoyColors.border},headerChipValue:{fontSize:12,fontWeight:"600",fontFamily:"monospace"}});export default StatsDisplay;

package/lib/module/highlight-updates/components/index.js

@@ -1,16 +1 @@
-"use strict";
-
-/**
- * Highlight Updates Modal Components
- */
-
-export { HighlightUpdatesModal } from "./HighlightUpdatesModal";
-export { RenderListItem } from "./RenderListItem";
-export { RenderDetailView } from "./RenderDetailView";
-export { HighlightFilterView } from "./HighlightFilterView";
-export { IdentifierBadge, CategoryBadge, IDENTIFIER_CONFIG } from "./IdentifierBadge";
-
-// Performance-optimized isolated components
-export { IsolatedRenderList } from "./IsolatedRenderList";
-export { StatsDisplay } from "./StatsDisplay";
-export { MainListHeader, FilterViewHeader, DetailViewHeader, HeaderActions, SearchSection } from "./ModalHeaderContent";
+"use strict";export{HighlightUpdatesModal}from"./HighlightUpdatesModal";export{RenderListItem}from"./RenderListItem";export{RenderDetailView}from"./RenderDetailView";export{HighlightFilterView}from"./HighlightFilterView";export{IdentifierBadge,CategoryBadge,IDENTIFIER_CONFIG}from"./IdentifierBadge";export{IsolatedRenderList}from"./IsolatedRenderList";export{StatsDisplay}from"./StatsDisplay";export{MainListHeader,FilterViewHeader,DetailViewHeader,HeaderActions,SearchSection}from"./ModalHeaderContent";