@buoy-gg/highlight-updates 7.0.41 → 7.0.43

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

@@ -1,235 +1 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.RenderListItem = void 0;
-var _react = _interopRequireWildcard(require("react"));
-var _reactNative = require("react-native");
-var _sharedUi = require("@buoy-gg/shared-ui");
-var _IdentifierBadge = require("./IdentifierBadge");
-var _RenderCauseBadge = require("./RenderCauseBadge");
-var _testIDs = require("../utils/testIDs");
-var _jsxRuntime = require("react/jsx-runtime");
-function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
-/**
- * RenderListItem
- *
- * Compact list item showing a tracked component render.
- * Displays viewType, identifier (testID/nativeID/component), render count, and timing.
- */
-
-function RenderListItemInner({
-  render,
-  onPress
-}) {
-  // Get best identifier to show (primary)
-  const identifier = (0, _react.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 = (0, _react.useMemo)(() => {
-    if (render.accessibilityLabel && identifier.type !== "accessibilityLabel") {
-      return {
-        type: "accessibilityLabel",
-        value: render.accessibilityLabel
-      };
-    }
-    return null;
-  }, [render.accessibilityLabel, identifier.type]);
-
-  // Format time since last render (live-updating)
-  const timeSinceRender = (0, _sharedUi.useRelativeTime)(render.lastRenderTime);
-
-  // The row is addressed by the identifier it SHOWS, never by nativeTag — see
-  // utils/testIDs.ts for why a tag can't be a handle. The label spells the row
-  // out for assistive tech, which otherwise gets a coloured bar and a count.
-  const rowTestID = (0, _testIDs.renderRowTestID)(identifier.value);
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.TouchableOpacity, {
-    testID: rowTestID,
-    accessibilityRole: "button",
-    accessibilityLabel: `${render.displayName}, ${identifier.type} ${identifier.value}, ${render.renderCount} renders`,
-    style: styles.container,
-    onPress: () => onPress(render),
-    activeOpacity: 0.7,
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-      style: [styles.colorIndicator, {
-        backgroundColor: render.color
-      }]
-    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-      style: styles.content,
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-        style: styles.topRow,
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-          style: styles.viewTypeContainer,
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-            testID: `${rowTestID}-name`,
-            style: styles.viewType,
-            numberOfLines: 1,
-            children: render.displayName
-          }), secondaryIdentifier ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_IdentifierBadge.IdentifierBadge, {
-            type: secondaryIdentifier.type,
-            value: secondaryIdentifier.value,
-            compact: true,
-            shortLabel: true
-          }) : render.displayName !== render.viewType ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-            testID: `${rowTestID}-type`,
-            style: styles.nativeType,
-            numberOfLines: 1,
-            children: render.viewType
-          }) : null]
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-          style: [styles.renderCountBadge, {
-            backgroundColor: render.color + "30"
-          }],
-          children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Text, {
-            testID: `${rowTestID}-count`,
-            style: [styles.renderCount, {
-              color: render.color
-            }],
-            children: [render.renderCount, "x"]
-          })
-        })]
-      }), render.lastRenderCause && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-        style: styles.causeRow,
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_RenderCauseBadge.RenderCauseBadge, {
-          testID: `${rowTestID}-cause`,
-          cause: render.lastRenderCause,
-          compact: true,
-          showKeys: true,
-          showTwoLevel: true
-        })
-      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-        style: styles.bottomRow,
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-          style: styles.identifierContainer,
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_IdentifierBadge.IdentifierBadge, {
-            testID: `${rowTestID}-identifier`,
-            type: identifier.type,
-            value: identifier.value,
-            compact: true,
-            shortLabel: true
-          })
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-          testID: `${rowTestID}-time`,
-          style: styles.timing,
-          children: timeSinceRender
-        })]
-      })]
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ChevronRight, {
-      size: 16,
-      color: _sharedUi.night.color.textTertiary
-    })]
-  });
-}
-
-// Memoize with custom comparison - only re-render when relevant props change
-// This is critical for performance when the modal is open during rapid renders
-const RenderListItem = exports.RenderListItem = /*#__PURE__*/_react.default.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 = _reactNative.StyleSheet.create({
-  container: {
-    flexDirection: "row",
-    alignItems: "center",
-    paddingVertical: 10,
-    paddingHorizontal: 12,
-    marginHorizontal: 12,
-    marginBottom: 6,
-    backgroundColor: _sharedUi.night.color.surface,
-    borderRadius: 8,
-    borderWidth: 1,
-    borderColor: _sharedUi.night.color.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: _sharedUi.night.color.text
-  },
-  nativeType: {
-    fontSize: 10,
-    color: _sharedUi.night.color.textTertiary,
-    fontFamily: _sharedUi.monoFont,
-    marginTop: 1
-  },
-  accessibilityLabel: {
-    fontSize: 10,
-    color: _sharedUi.night.color.accent,
-    fontStyle: "italic",
-    marginTop: 1
-  },
-  renderCountBadge: {
-    paddingHorizontal: 8,
-    paddingVertical: 2,
-    borderRadius: 10
-  },
-  renderCount: {
-    fontSize: 11,
-    fontWeight: "700",
-    fontFamily: _sharedUi.monoFont
-  },
-  bottomRow: {
-    flexDirection: "row",
-    alignItems: "center",
-    justifyContent: "space-between",
-    gap: 8
-  },
-  identifierContainer: {
-    flex: 1,
-    flexShrink: 1,
-    overflow: "hidden"
-  },
-  timing: {
-    fontSize: 10,
-    color: _sharedUi.night.color.textTertiary,
-    fontWeight: "500",
-    flexShrink: 0
-  }
-});
-var _default = exports.default = RenderListItem;
+"use strict";Object.defineProperty(exports,"__esModule",{value:true});exports.default=exports.RenderListItem=void 0;var _react=_interopRequireWildcard(require("react"));var _reactNative=require("react-native");var _sharedUi=require("@buoy-gg/shared-ui");var _IdentifierBadge=require("./IdentifierBadge");var _RenderCauseBadge=require("./RenderCauseBadge");var _testIDs=require("../utils/testIDs");var _jsxRuntime=require("react/jsx-runtime");function _interopRequireWildcard(e,r){if("function"==typeof WeakMap)var t=new WeakMap,o=new WeakMap;return(_interopRequireWildcard=function(i,n){if(!n&&i&&i.__esModule)return i;var a,c,l={__proto__:null,default:i};if(null===i||"object"!=typeof i&&"function"!=typeof i)return l;if(a=n?o:t){if(a.has(i))return a.get(i);a.set(i,l)}for(const s in i)"default"!==s&&{}.hasOwnProperty.call(i,s)&&((c=(a=Object.defineProperty)&&Object.getOwnPropertyDescriptor(i,s))&&(c.get||c.set)?a(l,s,c):l[s]=i[s]);return l})(e,r)}function RenderListItemInner({render:e,onPress:r}){const t=(0,_react.useMemo)(()=>{if(e.testID)return{type:"testID",value:e.testID};if(e.nativeID)return{type:"nativeID",value:e.nativeID};if(e.componentName)return{type:"component",value:e.componentName};if(e.accessibilityLabel)return{type:"accessibilityLabel",value:e.accessibilityLabel};return{type:"nativeTag",value:String(e.nativeTag)}},[e.testID,e.nativeID,e.componentName,e.accessibilityLabel,e.nativeTag]);const o=(0,_react.useMemo)(()=>{if(e.accessibilityLabel&&t.type!=="accessibilityLabel"){return{type:"accessibilityLabel",value:e.accessibilityLabel}}return null},[e.accessibilityLabel,t.type]);const i=(0,_sharedUi.useRelativeTime)(e.lastRenderTime);const n=(0,_testIDs.renderRowTestID)(t.value);return(0,_jsxRuntime.jsxs)(_reactNative.TouchableOpacity,{testID:n,accessibilityRole:"button",accessibilityLabel:`${e.displayName}, ${t.type} ${t.value}, ${e.renderCount} renders`,style:styles.container,onPress:()=>r(e),activeOpacity:.7,children:[(0,_jsxRuntime.jsx)(_reactNative.View,{style:[styles.colorIndicator,{backgroundColor:e.color}]}),(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.content,children:[(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.topRow,children:[(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.viewTypeContainer,children:[(0,_jsxRuntime.jsx)(_reactNative.Text,{testID:`${n}-name`,style:styles.viewType,numberOfLines:1,children:e.displayName}),o?(0,_jsxRuntime.jsx)(_IdentifierBadge.IdentifierBadge,{type:o.type,value:o.value,compact:true,shortLabel:true}):e.displayName!==e.viewType?(0,_jsxRuntime.jsx)(_reactNative.Text,{testID:`${n}-type`,style:styles.nativeType,numberOfLines:1,children:e.viewType}):null]}),(0,_jsxRuntime.jsx)(_reactNative.View,{style:[styles.renderCountBadge,{backgroundColor:e.color+"30"}],children:(0,_jsxRuntime.jsxs)(_reactNative.Text,{testID:`${n}-count`,style:[styles.renderCount,{color:e.color}],children:[e.renderCount,"x"]})})]}),e.lastRenderCause&&(0,_jsxRuntime.jsx)(_reactNative.View,{style:styles.causeRow,children:(0,_jsxRuntime.jsx)(_RenderCauseBadge.RenderCauseBadge,{testID:`${n}-cause`,cause:e.lastRenderCause,compact:true,showKeys:true,showTwoLevel:true})}),(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.bottomRow,children:[(0,_jsxRuntime.jsx)(_reactNative.View,{style:styles.identifierContainer,children:(0,_jsxRuntime.jsx)(_IdentifierBadge.IdentifierBadge,{testID:`${n}-identifier`,type:t.type,value:t.value,compact:true,shortLabel:true})}),(0,_jsxRuntime.jsx)(_reactNative.Text,{testID:`${n}-time`,style:styles.timing,children:i})]})]}),(0,_jsxRuntime.jsx)(_sharedUi.ChevronRight,{size:16,color:_sharedUi.night.color.textTertiary})]})}const RenderListItem=exports.RenderListItem=_react.default.memo(RenderListItemInner,(e,r)=>{const t=e.render;const o=r.render;return t.id===o.id&&t.renderCount===o.renderCount&&t.color===o.color&&t.lastRenderTime===o.lastRenderTime&&t.lastRenderCause?.type===o.lastRenderCause?.type&&t.lastRenderCause?.componentCause===o.lastRenderCause?.componentCause&&e.onPress===r.onPress});const styles=_reactNative.StyleSheet.create({container:{flexDirection:"row",alignItems:"center",paddingVertical:10,paddingHorizontal:12,marginHorizontal:12,marginBottom:6,backgroundColor:_sharedUi.night.color.surface,borderRadius:8,borderWidth:1,borderColor:_sharedUi.night.color.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:_sharedUi.night.color.text},nativeType:{fontSize:10,color:_sharedUi.night.color.textTertiary,fontFamily:_sharedUi.monoFont,marginTop:1},accessibilityLabel:{fontSize:10,color:_sharedUi.night.color.accent,fontStyle:"italic",marginTop:1},renderCountBadge:{paddingHorizontal:8,paddingVertical:2,borderRadius:10},renderCount:{fontSize:11,fontWeight:"700",fontFamily:_sharedUi.monoFont},bottomRow:{flexDirection:"row",alignItems:"center",justifyContent:"space-between",gap:8},identifierContainer:{flex:1,flexShrink:1,overflow:"hidden"},timing:{fontSize:10,color:_sharedUi.night.color.textTertiary,fontWeight:"500",flexShrink:0}});var _default=exports.default=RenderListItem;