@buoy-gg/highlight-updates 7.0.77 → 7.0.79
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lib/commonjs/highlight-updates/components/HighlightFilterView.js +1 -1
- package/lib/commonjs/highlight-updates/components/IsolatedRenderList.js +1 -1
- package/lib/commonjs/highlight-updates/components/RenderDetailView.js +1 -1
- package/lib/commonjs/highlight-updates/components/RenderHistoryViewer.js +1 -1
- package/lib/commonjs/highlight-updates/components/RendersCopySettingsView.js +1 -1
- package/lib/commonjs/highlight-updates/utils/domScreenElements.js +1 -1
- package/lib/module/highlight-updates/components/HighlightFilterView.js +1 -1
- package/lib/module/highlight-updates/components/IsolatedRenderList.js +1 -1
- package/lib/module/highlight-updates/components/RenderDetailView.js +1 -1
- package/lib/module/highlight-updates/components/RenderHistoryViewer.js +1 -1
- package/lib/module/highlight-updates/components/RendersCopySettingsView.js +1 -1
- package/lib/module/highlight-updates/utils/domScreenElements.js +1 -1
- package/lib/web/index.mjs +14 -14
- package/package.json +6 -6
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";import fe,{useState as f,useCallback as I}from"react";import{View as a,Text as i,TouchableOpacity as g,TextInput as A,StyleSheet as ie,ScrollView as O,Modal as ce,Pressable as ae,Switch as w}from"react-native";import{Eye as q,Filter as N,Plus as K,X as L,Box as X,Settings as de,Hash as se,SectionHeader as p,night as o,monoFont as v}from"@buoy-gg/shared-ui";import{IdentifierBadge as G,IDENTIFIER_CONFIG as ue}from"./IdentifierBadge";import{detectedItemTestID as he,patternChipTestID as pe,settingTestID as R}from"../utils/testIDs";import{jsx as t,jsxs as l,Fragment as M}from"react/jsx-runtime";const P=d=>ue[d];const ge=["any","viewType","testID","nativeID","component","accessibilityLabel"];function Y({mode:d,onSelect:u,onCancel:s}){return l(a,{nativeID:"__rn_buoy__type-picker",testID:`buoy-highlight-${d}-types`,style:e.typePicker,children:[t(a,{style:e.typePickerRow,children:ge.map(h=>{const r=P(h);const b=r.icon;return l(g,{testID:`buoy-highlight-${d}-type-${h.toLowerCase()}`,accessibilityRole:"button",accessibilityLabel:r.label,style:[e.typeOption,{backgroundColor:r.color+"15",borderColor:r.color+"40"}],onPress:()=>u(h),children:[t(b,{size:14,color:r.color}),t(i,{style:[e.typeOptionText,{color:r.color}],children:r.label})]},h)})}),t(g,{testID:`buoy-highlight-${d}-types-cancel`,accessibilityRole:"button",accessibilityLabel:"Cancel",onPress:s,style:e.typePickerCancel,children:t(L,{size:16,color:o.color.textTertiary})})]})}function Z({mode:d,type:u,onSubmit:s,onCancel:h}){const[r,b]=f("");const z=P(u);const C=()=>{if(r.trim()){s(r.trim())}};return l(a,{nativeID:"__rn_buoy__pattern-input",testID:`buoy-highlight-${d}-input-row`,style:e.patternInputContainer,children:[t(G,{type:u,value:"",badgeOnly:true,compact:true}),t(A,{testID:`buoy-highlight-${d}-input`,value:r,onChangeText:b,onSubmitEditing:C,placeholder:"Enter pattern...",placeholderTextColor:o.color.placeholder,style:e.patternInput,autoFocus:true,returnKeyType:"done",autoCorrect:false,autoCapitalize:"none"}),r.trim()&&t(g,{testID:`buoy-highlight-${d}-submit`,accessibilityRole:"button",accessibilityLabel:"Add pattern",onPress:C,style:[e.addPatternButton,{backgroundColor:z.color+"20"}],children:t(i,{style:[e.addPatternButtonText,{color:z.color}],children:"Add"})}),t(g,{testID:`buoy-highlight-${d}-input-cancel`,accessibilityRole:"button",accessibilityLabel:"Cancel",onPress:h,style:e.cancelButton,children:t(L,{size:16,color:o.color.textTertiary})})]})}function J({mode:d,pattern:u,onRemove:s}){const h=P(u.type);return l(g,{testID:pe(d,u.type,u.value),accessibilityRole:"button",accessibilityLabel:`${h.label} ${u.value}, tap to remove`,style:[e.patternChip,{borderColor:h.color+"40"}],onPress:s,activeOpacity:.7,children:[t(a,{style:[e.patternChipBadge,{backgroundColor:h.color+"20"}],children:t(i,{style:[e.patternChipBadgeText,{color:h.color}],children:h.shortLabel})}),t(i,{style:e.patternChipValue,numberOfLines:1,children:u.value}),t(L,{size:12,color:o.color.textTertiary,style:e.patternChipX})]})}const ye={label:"All",shortLabel:"All",color:o.color.textSecondary,icon:X};function D({filterType:d,count:u,isSelected:s,onPress:h}){const r=d==="all"?ye:P(d);const b=`buoy-highlight-detected-cat-${String(d).toLowerCase()}`;return l(g,{testID:b,accessibilityRole:"button",accessibilityLabel:`${r.label}, ${u}`,style:[e.categoryBadge,{backgroundColor:r.color+"15",borderColor:s?r.color:r.color+"40",borderWidth:s?2:1}],onPress:h,children:[t(r.icon,{size:12,color:r.color}),t(i,{style:[e.categoryBadgeText,{color:r.color}],children:r.label}),t(a,{style:[e.categoryBadgeCountBubble,{backgroundColor:r.color+"25"}],children:t(i,{testID:`${b}-count`,style:[e.categoryBadgeCount,{color:r.color}],children:u})})]})}const be=[{value:20,label:"20"},{value:50,label:"50"},{value:100,label:"100"},{value:150,label:"150"},{value:250,label:"250"},{value:500,label:"500"}];const j=[{value:"off",label:"Off",description:"No debug logging"},{value:"minimal",label:"Minimal",description:"Only hook value changes"},{value:"verbose",label:"Verbose",description:"Component + cause + changes"},{value:"all",label:"All",description:"Full fiber dump"}];export function HighlightFilterView({filters:d,onFilterChange:u,settings:s,onSettingsChange:h,availableProps:r,activeTab:b}){const[z,C]=f(false);const[Q,k]=f(false);const[B,H]=f(null);const[W,E]=f(null);const[m,x]=f("all");const[y,T]=f(null);const ee=n=>{switch(n){case"viewType":return r.viewTypes.map(c=>({value:c,type:"viewType"}));case"testID":return r.testIDs.map(c=>({value:c,type:"testID"}));case"nativeID":return r.nativeIDs.map(c=>({value:c,type:"nativeID"}));case"component":return r.componentNames.map(c=>({value:c,type:"component"}));case"accessibilityLabel":return r.accessibilityLabels.map(c=>({value:c,type:"accessibilityLabel"}));case"all":default:return[...r.viewTypes.map(c=>({value:c,type:"viewType"})),...r.testIDs.map(c=>({value:c,type:"testID"})),...r.nativeIDs.map(c=>({value:c,type:"nativeID"})),...r.componentNames.map(c=>({value:c,type:"component"})),...r.accessibilityLabels.map(c=>({value:c,type:"accessibilityLabel"}))]}};const F=ee(m);const U=r.viewTypes.length+r.testIDs.length+r.nativeIDs.length+r.componentNames.length+r.accessibilityLabels.length;const V=I((n,c)=>{const S=[...d.includePatterns,{type:n,value:c}];u({includePatterns:S});H(null)},[d.includePatterns,u]);const _=I((n,c)=>{const S=[...d.excludePatterns,{type:n,value:c}];u({excludePatterns:S});E(null)},[d.excludePatterns,u]);const te=I(n=>{const c=d.includePatterns.filter((S,$)=>$!==n);u({includePatterns:c})},[d.includePatterns,u]);const oe=I(n=>{const c=d.excludePatterns.filter((S,$)=>$!==n);u({excludePatterns:c})},[d.excludePatterns,u]);const ne=I((n,c)=>{T({type:n,value:c})},[]);const le=I(()=>{if(y){V(y.type,y.value);T(null)}},[y,V]);const re=I(()=>{if(y){_(y.type,y.value);T(null)}},[y,_]);return t(a,{style:e.container,children:t(O,{nativeID:"__rn_buoy__filter-view",testID:"buoy-highlight-filter-scroll",style:e.scrollView,contentContainerStyle:e.scrollContent,showsVerticalScrollIndicator:false,children:b==="filters"?l(M,{children:[l(a,{style:e.section,children:[l(p,{children:[t(p.Icon,{icon:q,color:o.color.accent,size:12}),t(p.Title,{children:"INCLUDE ONLY"}),d.includePatterns.length>0&&t(p.Badge,{testID:"buoy-highlight-include-count",count:d.includePatterns.length,color:o.color.accent})]}),t(i,{style:e.sectionDescription,children:"Show only components matching these patterns. If any are set, components must match at least one."}),d.includePatterns.length>0&&t(a,{style:e.patternChips,children:d.includePatterns.map((n,c)=>t(J,{mode:"include",pattern:n,onRemove:()=>te(c)},`${n.type}-${n.value}-${c}`))}),t(a,{style:e.addPatternRow,children:z?t(Y,{mode:"include",onSelect:n=>{C(false);H(n)},onCancel:()=>C(false)}):B?t(Z,{mode:"include",type:B,onSubmit:n=>V(B,n),onCancel:()=>H(null)}):l(g,{testID:"buoy-highlight-include-add",accessibilityRole:"button",accessibilityLabel:"Add include pattern",style:[e.addButton,{borderColor:o.color.accentBorderStrong}],onPress:()=>C(true),children:[t(K,{size:14,color:o.color.accent}),t(i,{style:[e.addButtonText,{color:o.color.accent}],children:"Add include pattern"})]})})]}),l(a,{style:e.section,children:[l(p,{children:[t(p.Icon,{icon:N,color:o.color.accent,size:12}),t(p.Title,{children:"EXCLUDE"}),d.excludePatterns.length>0&&t(p.Badge,{testID:"buoy-highlight-exclude-count",count:d.excludePatterns.length,color:o.color.accent})]}),t(i,{style:e.sectionDescription,children:"Hide components matching these patterns from the list."}),d.excludePatterns.length>0&&t(a,{style:e.patternChips,children:d.excludePatterns.map((n,c)=>t(J,{mode:"exclude",pattern:n,onRemove:()=>oe(c)},`${n.type}-${n.value}-${c}`))}),t(a,{style:e.addPatternRow,children:Q?t(Y,{mode:"exclude",onSelect:n=>{k(false);E(n)},onCancel:()=>k(false)}):W?t(Z,{mode:"exclude",type:W,onSubmit:n=>_(W,n),onCancel:()=>E(null)}):l(g,{testID:"buoy-highlight-exclude-add",accessibilityRole:"button",accessibilityLabel:"Add exclude pattern",style:[e.addButton,{borderColor:o.color.accentBorderStrong}],onPress:()=>k(true),children:[t(K,{size:14,color:o.color.accent}),t(i,{style:[e.addButtonText,{color:o.color.accent}],children:"Add exclude pattern"})]})})]}),l(a,{style:e.section,children:[l(p,{children:[t(p.Icon,{icon:se,color:o.color.warning,size:12}),t(p.Title,{children:"RENDER COUNT RANGE"}),(d.minRenderCount!==void 0||d.maxRenderCount!==void 0)&&t(p.Badge,{count:1,color:o.color.warning})]}),t(i,{style:e.sectionDescription,children:"Show only components with render count in a specific range."}),l(a,{nativeID:"__rn_buoy__render-count-range",testID:"buoy-highlight-range",style:e.renderCountRangeContainer,children:[l(a,{style:e.renderCountInputRow,children:[l(a,{style:e.renderCountInputGroup,children:[t(i,{style:e.renderCountLabel,children:"Min"}),t(A,{value:d.minRenderCount!==void 0?String(d.minRenderCount):"",onChangeText:n=>{const c=parseInt(n,10);if(n===""||n===void 0){u({minRenderCount:void 0})}else if(!isNaN(c)&&c>=0){u({minRenderCount:c})}},testID:"buoy-highlight-range-min",placeholder:"0",placeholderTextColor:o.color.placeholder,style:e.renderCountInput,keyboardType:"number-pad",returnKeyType:"done"})]}),t(i,{style:e.renderCountSeparator,children:"to"}),l(a,{style:e.renderCountInputGroup,children:[t(i,{style:e.renderCountLabel,children:"Max"}),t(A,{value:d.maxRenderCount!==void 0?String(d.maxRenderCount):"",onChangeText:n=>{const c=parseInt(n,10);if(n===""||n===void 0){u({maxRenderCount:void 0})}else if(!isNaN(c)&&c>=0){u({maxRenderCount:c})}},testID:"buoy-highlight-range-max",placeholder:"\u221E",placeholderTextColor:o.color.placeholder,style:e.renderCountInput,keyboardType:"number-pad",returnKeyType:"done"})]})]}),(d.minRenderCount!==void 0||d.maxRenderCount!==void 0)&&l(g,{testID:"buoy-highlight-range-clear",accessibilityRole:"button",accessibilityLabel:"Clear range",style:e.clearRangeButton,onPress:()=>u({minRenderCount:void 0,maxRenderCount:void 0}),children:[t(L,{size:12,color:o.color.warning}),t(i,{style:e.clearRangeButtonText,children:"Clear Range"})]})]})]}),l(a,{style:e.section,children:[l(p,{children:[t(p.Icon,{icon:X,color:o.color.textSecondary,size:12}),t(p.Title,{children:"DETECTED ITEMS"})]}),t(i,{style:e.sectionDescription,children:"Tap an item to quickly add it as an exclude pattern."}),l(O,{horizontal:true,showsHorizontalScrollIndicator:false,style:e.categoryBadgeScroll,contentContainerStyle:e.categoryBadgeScrollContent,children:[U>0&&t(D,{filterType:"all",count:U,isSelected:m==="all",onPress:()=>x("all")}),r.viewTypes.length>0&&t(D,{filterType:"viewType",count:r.viewTypes.length,isSelected:m==="viewType",onPress:()=>x("viewType")}),r.testIDs.length>0&&t(D,{filterType:"testID",count:r.testIDs.length,isSelected:m==="testID",onPress:()=>x("testID")}),r.nativeIDs.length>0&&t(D,{filterType:"nativeID",count:r.nativeIDs.length,isSelected:m==="nativeID",onPress:()=>x("nativeID")}),r.componentNames.length>0&&t(D,{filterType:"component",count:r.componentNames.length,isSelected:m==="component",onPress:()=>x("component")}),r.accessibilityLabels.length>0&&t(D,{filterType:"accessibilityLabel",count:r.accessibilityLabels.length,isSelected:m==="accessibilityLabel",onPress:()=>x("accessibilityLabel")})]}),t(a,{nativeID:"__rn_buoy__detected-items",testID:"buoy-highlight-detected",style:e.detectedItemsContainer,children:F.length>0?t(O,{testID:"buoy-highlight-detected-scroll",style:e.detectedItemsScroll,contentContainerStyle:e.detectedItems,nestedScrollEnabled:true,showsVerticalScrollIndicator:true,children:F.map(n=>{const c=P(n.type);return t(g,{testID:he(n.type,n.value),accessibilityRole:"button",accessibilityLabel:`${c.label} ${n.value}`,style:[e.detectedItem,{borderColor:c.color+"40"}],onPress:()=>ne(n.type,n.value),children:m==="all"?t(G,{type:n.type,value:n.value,compact:true,shortLabel:true}):t(i,{style:e.detectedItemText,numberOfLines:1,children:n.value})},`${n.type}-${n.value}`)})}):t(i,{testID:"buoy-highlight-detected-empty",style:e.emptyText,children:"No items detected yet. Start tracking to see components here."})})]}),t(ce,{visible:y!==null,transparent:true,animationType:"fade",onRequestClose:()=>T(null),children:t(ae,{accessible:false,testID:"buoy-highlight-detected-popup-backdrop",style:e.modalOverlay,onPress:()=>T(null),children:t(a,{accessible:false,testID:"buoy-highlight-detected-popup",style:e.actionPopup,children:y&&l(M,{children:[t(a,{style:e.actionPopupHeader,children:t(G,{type:y.type,value:y.value,compact:true,shortLabel:true})}),l(a,{style:e.actionPopupButtons,children:[l(g,{testID:"buoy-highlight-detected-popup-include",accessibilityRole:"button",accessibilityLabel:"Include only",style:[e.actionPopupButton,e.actionPopupInclude],onPress:le,children:[t(q,{size:16,color:o.color.accent}),t(i,{style:[e.actionPopupButtonText,{color:o.color.accent}],children:"Include Only"})]}),l(g,{testID:"buoy-highlight-detected-popup-exclude",accessibilityRole:"button",accessibilityLabel:"Exclude",style:[e.actionPopupButton,e.actionPopupExclude],onPress:re,children:[t(N,{size:16,color:o.color.accent}),t(i,{style:[e.actionPopupButtonText,{color:o.color.accent}],children:"Exclude"})]})]}),t(g,{testID:"buoy-highlight-detected-popup-cancel",accessibilityRole:"button",accessibilityLabel:"Cancel",style:e.actionPopupCancel,onPress:()=>T(null),children:t(i,{style:e.actionPopupCancelText,children:"Cancel"})})]})})})}),l(a,{style:e.section,children:[l(p,{children:[t(p.Icon,{icon:N,color:o.color.textTertiary,size:12}),t(p.Title,{children:"HOW FILTERS WORK"})]}),t(a,{style:e.howItWorks,children:l(i,{style:e.howItWorksText,children:[t(i,{style:e.howItWorksBold,children:"Any:"})," Matches against all fields","\n",t(i,{style:e.howItWorksBold,children:"ViewType:"})," Native component class (RCTView, RCTText)","\n",t(i,{style:e.howItWorksBold,children:"testID:"})," Component testID prop","\n",t(i,{style:e.howItWorksBold,children:"Component:"})," React component name from fiber"]})})]})]}):t(M,{children:l(a,{style:e.section,children:[l(p,{children:[t(p.Icon,{icon:de,color:o.color.textTertiary,size:12}),t(p.Title,{children:"SETTINGS"})]}),l(a,{style:e.settingsSection,children:[l(a,{style:e.settingItem,children:[l(a,{style:e.settingHeader,children:[t(i,{style:e.settingLabel,children:"Show Render Count"}),t(w,{testID:R("showRenderCount"),value:s.showRenderCount,onValueChange:n=>{h({showRenderCount:n});if(!n&&s.trackRenderCauses){h({trackRenderCauses:false})}},trackColor:{false:o.color.surfaceElevated,true:o.color.accent+"80"},thumbColor:s.showRenderCount?o.color.accent:o.color.knob})]}),t(i,{style:e.settingDescription,children:"Display render count badge on highlights. Disabling improves performance by skipping count tracking."})]}),l(a,{style:[e.settingItem,e.settingItemSpaced],children:[l(a,{style:e.settingHeader,children:[t(i,{style:[e.settingLabel,!s.showRenderCount&&e.settingLabelDisabled],children:"Track Render Causes"}),t(w,{testID:R("trackRenderCauses"),value:s.trackRenderCauses,onValueChange:n=>h({trackRenderCauses:n}),trackColor:{false:o.color.surfaceElevated,true:o.color.warning+"80"},thumbColor:s.trackRenderCauses?o.color.warning:o.color.knob,disabled:!s.showRenderCount})]}),l(i,{style:e.settingDescription,children:["Detect WHY components render (props, hooks, parent re-render).",!s.showRenderCount&&l(i,{style:e.settingWarning,children:["\n",'Requires "Show Render Count" to be enabled.']})]})]}),l(a,{style:[e.settingItem,e.settingItemSpaced],children:[l(a,{style:e.settingHeader,children:[t(i,{style:[e.settingLabel,!s.trackRenderCauses&&e.settingLabelDisabled],children:"Enable Render History"}),t(w,{testID:R("enableRenderHistory"),value:s.enableRenderHistory,onValueChange:n=>h({enableRenderHistory:n}),trackColor:{false:o.color.surfaceElevated,true:o.color.accent+"80"},thumbColor:s.enableRenderHistory?o.color.accent:o.color.knob,disabled:!s.trackRenderCauses})]}),l(i,{style:e.settingDescription,children:["Store render events for each component to view in the History tab.",!s.trackRenderCauses&&l(i,{style:e.settingWarning,children:["\n",'Requires "Track Render Causes" to be enabled.']})]})]}),l(a,{style:[e.settingItem,e.settingItemSpaced],children:[l(a,{style:e.settingHeader,children:[t(i,{style:e.settingLabel,children:"Debug Log Level"}),t(a,{style:e.settingValue,children:t(i,{testID:"buoy-highlight-setting-debugLogLevel-value",style:[e.settingValueText,s.debugLogLevel!=="off"&&{color:o.color.warning}],children:j.find(n=>n.value===s.debugLogLevel)?.label||"Off"})})]}),t(i,{style:e.settingDescription,children:"Control console logging verbosity for render cause detection."}),t(a,{style:e.batchSizePresets,children:j.map(n=>t(g,{style:[e.batchSizePreset,s.debugLogLevel===n.value&&e.batchSizePresetActive,n.value!=="off"&&s.debugLogLevel===n.value&&{backgroundColor:o.color.warningSoft,borderColor:o.color.warning}],onPress:()=>h({debugLogLevel:n.value}),testID:`buoy-highlight-preset-log-${n.value}`,accessibilityRole:"button",accessibilityLabel:`Debug log level ${n.label}`,children:t(i,{style:[e.batchSizePresetText,s.debugLogLevel===n.value&&e.batchSizePresetTextActive,n.value!=="off"&&s.debugLogLevel===n.value&&{color:o.color.warning}],children:n.label})},n.value))}),l(i,{style:e.settingDescriptionMuted,children:[j.find(n=>n.value===s.debugLogLevel)?.description,s.debugLogLevel!=="off"&&" \u2022 Check Metro console for logs"]})]}),l(a,{style:[e.settingItem,e.settingItemSpaced],children:[l(a,{style:e.settingHeader,children:[t(i,{style:e.settingLabel,children:"Batch Size"}),t(a,{style:e.settingValue,children:t(i,{testID:"buoy-highlight-setting-batchSize-value",style:e.settingValueText,children:s.batchSize})})]}),t(i,{style:e.settingDescription,children:"Maximum components to highlight per render update. Higher values capture more re-renders but may impact performance on complex screens."}),t(a,{style:e.batchSizePresets,children:be.map(n=>t(g,{style:[e.batchSizePreset,s.batchSize===n.value&&e.batchSizePresetActive],onPress:()=>h({batchSize:n.value}),testID:`buoy-highlight-preset-batch-${n.value}`,accessibilityRole:"button",accessibilityLabel:`Batch size ${n.label}`,children:t(i,{style:[e.batchSizePresetText,s.batchSize===n.value&&e.batchSizePresetTextActive],children:n.label})},n.value))})]}),l(a,{style:[e.settingItem,e.settingItemSpaced],children:[l(a,{style:e.settingHeader,children:[t(i,{style:e.settingLabel,children:"Show host views"}),t(w,{testID:R("showHostViews"),value:!!s.showHostViews,onValueChange:n=>h({showHostViews:n}),trackColor:{false:o.color.surfaceElevated,true:o.color.accent+"80"},thumbColor:s.showHostViews?o.color.accent:o.color.knob})]}),t(i,{style:e.settingDescription,children:"Include anonymous View / RCTView / Text hosts. Off by default so the list is named composites (what actually re-rendered)."})]}),l(a,{style:[e.settingItem,e.settingItemSpaced],children:[l(a,{style:e.settingHeader,children:[t(i,{style:e.settingLabel,children:"Highlight Dev Tools"}),t(w,{testID:R("excludeDevTools"),value:!s.excludeDevTools,onValueChange:n=>h({excludeDevTools:!n}),trackColor:{false:o.color.surfaceElevated,true:o.color.accent+"80"},thumbColor:!s.excludeDevTools?o.color.accent:o.color.knob})]}),l(i,{style:e.settingDescription,children:["Show re-render highlights on Buoy dev tools (floating menu, modals, etc.). Useful for optimizing the dev tools themselves.",!s.excludeDevTools&&l(i,{style:e.settingWarning,children:["\n","The highlight overlay is always excluded to prevent infinite loops."]})]})]})]})]})})})})}const e=ie.create({container:{flex:1,backgroundColor:"transparent"},scrollView:{flex:1},scrollContent:{paddingHorizontal:16,paddingTop:12,paddingBottom:32},section:{backgroundColor:o.color.surface,borderRadius:8,borderWidth:1,borderColor:o.color.border,marginBottom:12,overflow:"hidden"},sectionDescription:{fontSize:11,color:o.color.textSecondary,paddingHorizontal:16,paddingTop:8,lineHeight:16},patternChips:{flexDirection:"row",flexWrap:"wrap",gap:8,paddingHorizontal:16,paddingTop:12},patternChip:{flexDirection:"row",alignItems:"center",backgroundColor:o.color.surfaceElevated,borderRadius:6,borderWidth:1,paddingVertical:4,paddingLeft:4,paddingRight:6,maxWidth:"100%",gap:4},patternChipBadge:{paddingVertical:2,paddingHorizontal:5,borderRadius:4},patternChipBadgeText:{fontSize:9,fontWeight:"700"},patternChipValue:{fontSize:11,color:o.color.text,fontFamily:v,flexShrink:1},patternChipX:{marginLeft:2},addPatternRow:{paddingHorizontal:16,paddingTop:12,paddingBottom:16},addButton:{flexDirection:"row",alignItems:"center",justifyContent:"center",paddingVertical:10,paddingHorizontal:16,borderRadius:8,borderWidth:1,borderStyle:"dashed",gap:6},addButtonText:{fontSize:12,fontWeight:"500"},typePicker:{flexDirection:"row",alignItems:"center",gap:8},typePickerRow:{flex:1,flexDirection:"row",flexWrap:"wrap",gap:8},typeOption:{flexDirection:"row",alignItems:"center",paddingVertical:8,paddingHorizontal:12,borderRadius:6,borderWidth:1,backgroundColor:o.color.surfaceElevated,gap:6},typeOptionText:{fontSize:11,fontWeight:"600"},typePickerCancel:{padding:8},patternInputContainer:{flexDirection:"row",alignItems:"center",backgroundColor:o.color.surfaceElevated,borderRadius:8,borderWidth:1,borderColor:o.color.border,paddingLeft:4,paddingRight:8,paddingVertical:4,gap:4},patternInput:{flex:1,fontSize:12,color:o.color.text,paddingVertical:6,paddingHorizontal:4},addPatternButton:{paddingVertical:6,paddingHorizontal:10,borderRadius:4},addPatternButtonText:{fontSize:11,fontWeight:"600"},cancelButton:{padding:4},categoryBadgeScroll:{marginTop:12},categoryBadgeScrollContent:{paddingHorizontal:16,gap:8},categoryBadge:{flexDirection:"row",alignItems:"center",paddingVertical:8,paddingLeft:10,paddingRight:6,borderRadius:8,borderWidth:1,gap:6},categoryBadgeText:{fontSize:11,fontWeight:"600"},categoryBadgeCountBubble:{paddingHorizontal:6,paddingVertical:2,borderRadius:10,minWidth:20,alignItems:"center"},categoryBadgeCount:{fontSize:10,fontWeight:"600"},detectedItemsContainer:{paddingHorizontal:16,paddingTop:12,paddingBottom:16},detectedItemsScroll:{maxHeight:200},detectedItems:{flexDirection:"row",flexWrap:"wrap",gap:8},detectedItem:{flexDirection:"row",alignItems:"center",backgroundColor:o.color.surfaceElevated,borderRadius:6,borderWidth:1,paddingVertical:6,paddingHorizontal:10,gap:6},detectedItemText:{fontSize:11,color:o.color.text,fontFamily:v},emptyText:{fontSize:11,color:o.color.textTertiary,fontStyle:"italic",textAlign:"center",paddingVertical:16,paddingHorizontal:16},howItWorks:{paddingHorizontal:16,paddingVertical:12},howItWorksText:{fontSize:11,color:o.color.textTertiary,lineHeight:18,fontFamily:v},howItWorksBold:{fontWeight:"700",color:o.color.textSecondary},modalOverlay:{flex:1,backgroundColor:"rgba(0, 0, 0, 0.5)",justifyContent:"center",alignItems:"center",padding:32},actionPopup:{backgroundColor:o.color.surface,borderRadius:12,borderWidth:1,borderColor:o.color.border,width:"100%",maxWidth:300,overflow:"hidden"},actionPopupHeader:{padding:16,borderBottomWidth:1,borderBottomColor:o.color.separator,alignItems:"center"},actionPopupButtons:{flexDirection:"row",padding:12,gap:8},actionPopupButton:{flex:1,flexDirection:"row",alignItems:"center",justifyContent:"center",paddingVertical:12,paddingHorizontal:12,borderRadius:8,gap:8},actionPopupInclude:{backgroundColor:o.color.accentSoft},actionPopupExclude:{backgroundColor:o.color.accentSoft},actionPopupButtonText:{fontSize:13,fontWeight:"600"},actionPopupCancel:{padding:12,borderTopWidth:1,borderTopColor:o.color.separator,alignItems:"center"},actionPopupCancelText:{fontSize:13,color:o.color.textTertiary,fontWeight:"500"},settingsSection:{paddingHorizontal:16,paddingTop:8,paddingBottom:16},settingItem:{gap:8},settingItemSpaced:{marginTop:16,paddingTop:16,borderTopWidth:1,borderTopColor:o.color.separator},settingHeader:{flexDirection:"row",alignItems:"center",justifyContent:"space-between"},settingLabel:{fontSize:13,fontWeight:"600",color:o.color.text},settingValue:{backgroundColor:o.color.fillSecondary,paddingHorizontal:10,paddingVertical:4,borderRadius:6},settingValueText:{fontSize:12,fontWeight:"700",color:o.color.textTertiary,fontFamily:v},settingDescription:{fontSize:11,color:o.color.textSecondary,lineHeight:16},settingDescriptionMuted:{fontSize:10,color:o.color.textTertiary,lineHeight:14,marginTop:4,fontStyle:"italic"},settingLabelDisabled:{color:o.color.textTertiary},settingWarning:{color:o.color.warning,fontWeight:"500"},batchSizePresets:{flexDirection:"row",flexWrap:"wrap",gap:8,marginTop:4},batchSizePreset:{paddingVertical:8,paddingHorizontal:14,borderRadius:6,backgroundColor:o.color.surfaceElevated,borderWidth:1,borderColor:o.color.border},batchSizePresetActive:{backgroundColor:o.color.fillSecondary,borderColor:o.color.fillTertiary},batchSizePresetText:{fontSize:12,fontWeight:"500",color:o.color.textSecondary,fontFamily:v},batchSizePresetTextActive:{color:o.color.textTertiary,fontWeight:"700"},renderCountRangeContainer:{paddingHorizontal:16,paddingTop:12,paddingBottom:16,gap:12},renderCountInputRow:{flexDirection:"row",alignItems:"center",gap:12},renderCountInputGroup:{flex:1,gap:4},renderCountLabel:{fontSize:10,fontWeight:"600",color:o.color.textTertiary,textTransform:"uppercase",letterSpacing:.5},renderCountInput:{backgroundColor:o.color.surfaceElevated,borderRadius:8,borderWidth:1,borderColor:o.color.border,paddingVertical:10,paddingHorizontal:12,fontSize:14,fontWeight:"600",color:o.color.text,fontFamily:v,textAlign:"center"},renderCountSeparator:{fontSize:12,color:o.color.textTertiary,marginTop:18},clearRangeButton:{flexDirection:"row",alignItems:"center",justifyContent:"center",paddingVertical:8,paddingHorizontal:12,borderRadius:6,backgroundColor:o.color.warningSoft,borderWidth:1,borderColor:o.color.warning+"40",gap:6,alignSelf:"center"},clearRangeButtonText:{fontSize:11,fontWeight:"600",color:o.color.warning}});export default HighlightFilterView;
|
|
1
|
+
"use strict";import fe,{useState as f,useCallback as I}from"react";import{View as a,Text as i,TouchableOpacity as g,TextInput as A,StyleSheet as ie,ScrollView as O,Modal as ce,Pressable as ae,Switch as w}from"react-native";import{Eye as q,Filter as N,Plus as K,X as L,Box as X,Settings as de,Hash as se,SectionHeader as p,night as o,monoFont as v}from"@buoy-gg/shared-ui";import{IdentifierBadge as G,IDENTIFIER_CONFIG as ue}from"./IdentifierBadge";import{detectedItemTestID as he,patternChipTestID as pe,settingTestID as R}from"../utils/testIDs";import{jsx as t,jsxs as l,Fragment as M}from"react/jsx-runtime";const P=d=>ue[d];const ge=["any","viewType","testID","nativeID","component","accessibilityLabel"];function Y({mode:d,onSelect:u,onCancel:s}){return l(a,{nativeID:"__rn_buoy__type-picker",testID:`buoy-highlight-${d}-types`,style:e.typePicker,children:[t(a,{style:e.typePickerRow,children:ge.map(h=>{const r=P(h);const b=r.icon;return l(g,{testID:`buoy-highlight-${d}-type-${h.toLowerCase()}`,accessibilityRole:"button",accessibilityLabel:r.label,style:[e.typeOption,{backgroundColor:r.color+"15",borderColor:r.color+"40"}],onPress:()=>u(h),children:[t(b,{size:14,color:r.color}),t(i,{style:[e.typeOptionText,{color:r.color}],children:r.label})]},h)})}),t(g,{testID:`buoy-highlight-${d}-types-cancel`,accessibilityRole:"button",accessibilityLabel:"Cancel",onPress:s,style:e.typePickerCancel,children:t(L,{size:16,color:o.color.textTertiary})})]})}function Z({mode:d,type:u,onSubmit:s,onCancel:h}){const[r,b]=f("");const z=P(u);const C=()=>{if(r.trim()){s(r.trim())}};return l(a,{nativeID:"__rn_buoy__pattern-input",testID:`buoy-highlight-${d}-input-row`,style:e.patternInputContainer,children:[t(G,{type:u,value:"",badgeOnly:true,compact:true}),t(A,{testID:`buoy-highlight-${d}-input`,value:r,onChangeText:b,onSubmitEditing:C,placeholder:"Enter pattern...",placeholderTextColor:o.color.placeholder,style:e.patternInput,autoFocus:true,returnKeyType:"done",autoCorrect:false,autoCapitalize:"none"}),r.trim()&&t(g,{testID:`buoy-highlight-${d}-submit`,accessibilityRole:"button",accessibilityLabel:"Add pattern",onPress:C,style:[e.addPatternButton,{backgroundColor:z.color+"20"}],children:t(i,{style:[e.addPatternButtonText,{color:z.color}],children:"Add"})}),t(g,{testID:`buoy-highlight-${d}-input-cancel`,accessibilityRole:"button",accessibilityLabel:"Cancel",onPress:h,style:e.cancelButton,children:t(L,{size:16,color:o.color.textTertiary})})]})}function J({mode:d,pattern:u,onRemove:s}){const h=P(u.type);return l(g,{testID:pe(d,u.type,u.value),accessibilityRole:"button",accessibilityLabel:`${h.label} ${u.value}, tap to remove`,style:[e.patternChip,{borderColor:h.color+"40"}],onPress:s,activeOpacity:.7,children:[t(a,{style:[e.patternChipBadge,{backgroundColor:h.color+"20"}],children:t(i,{style:[e.patternChipBadgeText,{color:h.color}],children:h.shortLabel})}),t(i,{style:e.patternChipValue,numberOfLines:1,children:u.value}),t(L,{size:12,color:o.color.textTertiary,style:e.patternChipX})]})}const ye={label:"All",shortLabel:"All",color:o.color.textSecondary,icon:X};function S({filterType:d,count:u,isSelected:s,onPress:h}){const r=d==="all"?ye:P(d);const b=`buoy-highlight-detected-cat-${String(d).toLowerCase()}`;return l(g,{testID:b,accessibilityRole:"button",accessibilityLabel:`${r.label}, ${u}`,style:[e.categoryBadge,{backgroundColor:r.color+"15",borderColor:s?r.color:r.color+"40",borderWidth:s?2:1}],onPress:h,children:[t(r.icon,{size:12,color:r.color}),t(i,{style:[e.categoryBadgeText,{color:r.color}],children:r.label}),t(a,{style:[e.categoryBadgeCountBubble,{backgroundColor:r.color+"25"}],children:t(i,{testID:`${b}-count`,style:[e.categoryBadgeCount,{color:r.color}],children:u})})]})}const be=[{value:20,label:"20"},{value:50,label:"50"},{value:100,label:"100"},{value:150,label:"150"},{value:250,label:"250"},{value:500,label:"500"}];const j=[{value:"off",label:"Off",description:"No debug logging"},{value:"minimal",label:"Minimal",description:"Only hook value changes"},{value:"verbose",label:"Verbose",description:"Component + cause + changes"},{value:"all",label:"All",description:"Full fiber dump"}];export function HighlightFilterView({filters:d,onFilterChange:u,settings:s,onSettingsChange:h,availableProps:r,activeTab:b}){const[z,C]=f(false);const[Q,k]=f(false);const[B,H]=f(null);const[W,E]=f(null);const[m,x]=f("all");const[y,T]=f(null);const ee=n=>{switch(n){case"viewType":return r.viewTypes.map(c=>({value:c,type:"viewType"}));case"testID":return r.testIDs.map(c=>({value:c,type:"testID"}));case"nativeID":return r.nativeIDs.map(c=>({value:c,type:"nativeID"}));case"component":return r.componentNames.map(c=>({value:c,type:"component"}));case"accessibilityLabel":return r.accessibilityLabels.map(c=>({value:c,type:"accessibilityLabel"}));case"all":default:return[...r.viewTypes.map(c=>({value:c,type:"viewType"})),...r.testIDs.map(c=>({value:c,type:"testID"})),...r.nativeIDs.map(c=>({value:c,type:"nativeID"})),...r.componentNames.map(c=>({value:c,type:"component"})),...r.accessibilityLabels.map(c=>({value:c,type:"accessibilityLabel"}))]}};const F=ee(m);const U=r.viewTypes.length+r.testIDs.length+r.nativeIDs.length+r.componentNames.length+r.accessibilityLabels.length;const V=I((n,c)=>{const D=[...d.includePatterns,{type:n,value:c}];u({includePatterns:D});H(null)},[d.includePatterns,u]);const _=I((n,c)=>{const D=[...d.excludePatterns,{type:n,value:c}];u({excludePatterns:D});E(null)},[d.excludePatterns,u]);const te=I(n=>{const c=d.includePatterns.filter((D,$)=>$!==n);u({includePatterns:c})},[d.includePatterns,u]);const oe=I(n=>{const c=d.excludePatterns.filter((D,$)=>$!==n);u({excludePatterns:c})},[d.excludePatterns,u]);const ne=I((n,c)=>{T({type:n,value:c})},[]);const le=I(()=>{if(y){V(y.type,y.value);T(null)}},[y,V]);const re=I(()=>{if(y){_(y.type,y.value);T(null)}},[y,_]);return t(a,{style:e.container,children:t(O,{keyboardShouldPersistTaps:"handled",nativeID:"__rn_buoy__filter-view",testID:"buoy-highlight-filter-scroll",style:e.scrollView,contentContainerStyle:e.scrollContent,showsVerticalScrollIndicator:false,children:b==="filters"?l(M,{children:[l(a,{style:e.section,children:[l(p,{children:[t(p.Icon,{icon:q,color:o.color.accent,size:12}),t(p.Title,{children:"INCLUDE ONLY"}),d.includePatterns.length>0&&t(p.Badge,{testID:"buoy-highlight-include-count",count:d.includePatterns.length,color:o.color.accent})]}),t(i,{style:e.sectionDescription,children:"Show only components matching these patterns. If any are set, components must match at least one."}),d.includePatterns.length>0&&t(a,{style:e.patternChips,children:d.includePatterns.map((n,c)=>t(J,{mode:"include",pattern:n,onRemove:()=>te(c)},`${n.type}-${n.value}-${c}`))}),t(a,{style:e.addPatternRow,children:z?t(Y,{mode:"include",onSelect:n=>{C(false);H(n)},onCancel:()=>C(false)}):B?t(Z,{mode:"include",type:B,onSubmit:n=>V(B,n),onCancel:()=>H(null)}):l(g,{testID:"buoy-highlight-include-add",accessibilityRole:"button",accessibilityLabel:"Add include pattern",style:[e.addButton,{borderColor:o.color.accentBorderStrong}],onPress:()=>C(true),children:[t(K,{size:14,color:o.color.accent}),t(i,{style:[e.addButtonText,{color:o.color.accent}],children:"Add include pattern"})]})})]}),l(a,{style:e.section,children:[l(p,{children:[t(p.Icon,{icon:N,color:o.color.accent,size:12}),t(p.Title,{children:"EXCLUDE"}),d.excludePatterns.length>0&&t(p.Badge,{testID:"buoy-highlight-exclude-count",count:d.excludePatterns.length,color:o.color.accent})]}),t(i,{style:e.sectionDescription,children:"Hide components matching these patterns from the list."}),d.excludePatterns.length>0&&t(a,{style:e.patternChips,children:d.excludePatterns.map((n,c)=>t(J,{mode:"exclude",pattern:n,onRemove:()=>oe(c)},`${n.type}-${n.value}-${c}`))}),t(a,{style:e.addPatternRow,children:Q?t(Y,{mode:"exclude",onSelect:n=>{k(false);E(n)},onCancel:()=>k(false)}):W?t(Z,{mode:"exclude",type:W,onSubmit:n=>_(W,n),onCancel:()=>E(null)}):l(g,{testID:"buoy-highlight-exclude-add",accessibilityRole:"button",accessibilityLabel:"Add exclude pattern",style:[e.addButton,{borderColor:o.color.accentBorderStrong}],onPress:()=>k(true),children:[t(K,{size:14,color:o.color.accent}),t(i,{style:[e.addButtonText,{color:o.color.accent}],children:"Add exclude pattern"})]})})]}),l(a,{style:e.section,children:[l(p,{children:[t(p.Icon,{icon:se,color:o.color.warning,size:12}),t(p.Title,{children:"RENDER COUNT RANGE"}),(d.minRenderCount!==void 0||d.maxRenderCount!==void 0)&&t(p.Badge,{count:1,color:o.color.warning})]}),t(i,{style:e.sectionDescription,children:"Show only components with render count in a specific range."}),l(a,{nativeID:"__rn_buoy__render-count-range",testID:"buoy-highlight-range",style:e.renderCountRangeContainer,children:[l(a,{style:e.renderCountInputRow,children:[l(a,{style:e.renderCountInputGroup,children:[t(i,{style:e.renderCountLabel,children:"Min"}),t(A,{value:d.minRenderCount!==void 0?String(d.minRenderCount):"",onChangeText:n=>{const c=parseInt(n,10);if(n===""||n===void 0){u({minRenderCount:void 0})}else if(!isNaN(c)&&c>=0){u({minRenderCount:c})}},testID:"buoy-highlight-range-min",placeholder:"0",placeholderTextColor:o.color.placeholder,style:e.renderCountInput,keyboardType:"number-pad",returnKeyType:"done"})]}),t(i,{style:e.renderCountSeparator,children:"to"}),l(a,{style:e.renderCountInputGroup,children:[t(i,{style:e.renderCountLabel,children:"Max"}),t(A,{value:d.maxRenderCount!==void 0?String(d.maxRenderCount):"",onChangeText:n=>{const c=parseInt(n,10);if(n===""||n===void 0){u({maxRenderCount:void 0})}else if(!isNaN(c)&&c>=0){u({maxRenderCount:c})}},testID:"buoy-highlight-range-max",placeholder:"\u221E",placeholderTextColor:o.color.placeholder,style:e.renderCountInput,keyboardType:"number-pad",returnKeyType:"done"})]})]}),(d.minRenderCount!==void 0||d.maxRenderCount!==void 0)&&l(g,{testID:"buoy-highlight-range-clear",accessibilityRole:"button",accessibilityLabel:"Clear range",style:e.clearRangeButton,onPress:()=>u({minRenderCount:void 0,maxRenderCount:void 0}),children:[t(L,{size:12,color:o.color.warning}),t(i,{style:e.clearRangeButtonText,children:"Clear Range"})]})]})]}),l(a,{style:e.section,children:[l(p,{children:[t(p.Icon,{icon:X,color:o.color.textSecondary,size:12}),t(p.Title,{children:"DETECTED ITEMS"})]}),t(i,{style:e.sectionDescription,children:"Tap an item to quickly add it as an exclude pattern."}),l(O,{keyboardShouldPersistTaps:"handled",horizontal:true,showsHorizontalScrollIndicator:false,style:e.categoryBadgeScroll,contentContainerStyle:e.categoryBadgeScrollContent,children:[U>0&&t(S,{filterType:"all",count:U,isSelected:m==="all",onPress:()=>x("all")}),r.viewTypes.length>0&&t(S,{filterType:"viewType",count:r.viewTypes.length,isSelected:m==="viewType",onPress:()=>x("viewType")}),r.testIDs.length>0&&t(S,{filterType:"testID",count:r.testIDs.length,isSelected:m==="testID",onPress:()=>x("testID")}),r.nativeIDs.length>0&&t(S,{filterType:"nativeID",count:r.nativeIDs.length,isSelected:m==="nativeID",onPress:()=>x("nativeID")}),r.componentNames.length>0&&t(S,{filterType:"component",count:r.componentNames.length,isSelected:m==="component",onPress:()=>x("component")}),r.accessibilityLabels.length>0&&t(S,{filterType:"accessibilityLabel",count:r.accessibilityLabels.length,isSelected:m==="accessibilityLabel",onPress:()=>x("accessibilityLabel")})]}),t(a,{nativeID:"__rn_buoy__detected-items",testID:"buoy-highlight-detected",style:e.detectedItemsContainer,children:F.length>0?t(O,{keyboardShouldPersistTaps:"handled",testID:"buoy-highlight-detected-scroll",style:e.detectedItemsScroll,contentContainerStyle:e.detectedItems,nestedScrollEnabled:true,showsVerticalScrollIndicator:true,children:F.map(n=>{const c=P(n.type);return t(g,{testID:he(n.type,n.value),accessibilityRole:"button",accessibilityLabel:`${c.label} ${n.value}`,style:[e.detectedItem,{borderColor:c.color+"40"}],onPress:()=>ne(n.type,n.value),children:m==="all"?t(G,{type:n.type,value:n.value,compact:true,shortLabel:true}):t(i,{style:e.detectedItemText,numberOfLines:1,children:n.value})},`${n.type}-${n.value}`)})}):t(i,{testID:"buoy-highlight-detected-empty",style:e.emptyText,children:"No items detected yet. Start tracking to see components here."})})]}),t(ce,{visible:y!==null,transparent:true,animationType:"fade",onRequestClose:()=>T(null),children:t(ae,{accessible:false,testID:"buoy-highlight-detected-popup-backdrop",style:e.modalOverlay,onPress:()=>T(null),children:t(a,{accessible:false,testID:"buoy-highlight-detected-popup",style:e.actionPopup,children:y&&l(M,{children:[t(a,{style:e.actionPopupHeader,children:t(G,{type:y.type,value:y.value,compact:true,shortLabel:true})}),l(a,{style:e.actionPopupButtons,children:[l(g,{testID:"buoy-highlight-detected-popup-include",accessibilityRole:"button",accessibilityLabel:"Include only",style:[e.actionPopupButton,e.actionPopupInclude],onPress:le,children:[t(q,{size:16,color:o.color.accent}),t(i,{style:[e.actionPopupButtonText,{color:o.color.accent}],children:"Include Only"})]}),l(g,{testID:"buoy-highlight-detected-popup-exclude",accessibilityRole:"button",accessibilityLabel:"Exclude",style:[e.actionPopupButton,e.actionPopupExclude],onPress:re,children:[t(N,{size:16,color:o.color.accent}),t(i,{style:[e.actionPopupButtonText,{color:o.color.accent}],children:"Exclude"})]})]}),t(g,{testID:"buoy-highlight-detected-popup-cancel",accessibilityRole:"button",accessibilityLabel:"Cancel",style:e.actionPopupCancel,onPress:()=>T(null),children:t(i,{style:e.actionPopupCancelText,children:"Cancel"})})]})})})}),l(a,{style:e.section,children:[l(p,{children:[t(p.Icon,{icon:N,color:o.color.textTertiary,size:12}),t(p.Title,{children:"HOW FILTERS WORK"})]}),t(a,{style:e.howItWorks,children:l(i,{style:e.howItWorksText,children:[t(i,{style:e.howItWorksBold,children:"Any:"})," Matches against all fields","\n",t(i,{style:e.howItWorksBold,children:"ViewType:"})," Native component class (RCTView, RCTText)","\n",t(i,{style:e.howItWorksBold,children:"testID:"})," Component testID prop","\n",t(i,{style:e.howItWorksBold,children:"Component:"})," React component name from fiber"]})})]})]}):t(M,{children:l(a,{style:e.section,children:[l(p,{children:[t(p.Icon,{icon:de,color:o.color.textTertiary,size:12}),t(p.Title,{children:"SETTINGS"})]}),l(a,{style:e.settingsSection,children:[l(a,{style:e.settingItem,children:[l(a,{style:e.settingHeader,children:[t(i,{style:e.settingLabel,children:"Show Render Count"}),t(w,{testID:R("showRenderCount"),value:s.showRenderCount,onValueChange:n=>{h({showRenderCount:n});if(!n&&s.trackRenderCauses){h({trackRenderCauses:false})}},trackColor:{false:o.color.surfaceElevated,true:o.color.accent+"80"},thumbColor:s.showRenderCount?o.color.accent:o.color.knob})]}),t(i,{style:e.settingDescription,children:"Display render count badge on highlights. Disabling improves performance by skipping count tracking."})]}),l(a,{style:[e.settingItem,e.settingItemSpaced],children:[l(a,{style:e.settingHeader,children:[t(i,{style:[e.settingLabel,!s.showRenderCount&&e.settingLabelDisabled],children:"Track Render Causes"}),t(w,{testID:R("trackRenderCauses"),value:s.trackRenderCauses,onValueChange:n=>h({trackRenderCauses:n}),trackColor:{false:o.color.surfaceElevated,true:o.color.warning+"80"},thumbColor:s.trackRenderCauses?o.color.warning:o.color.knob,disabled:!s.showRenderCount})]}),l(i,{style:e.settingDescription,children:["Detect WHY components render (props, hooks, parent re-render).",!s.showRenderCount&&l(i,{style:e.settingWarning,children:["\n",'Requires "Show Render Count" to be enabled.']})]})]}),l(a,{style:[e.settingItem,e.settingItemSpaced],children:[l(a,{style:e.settingHeader,children:[t(i,{style:[e.settingLabel,!s.trackRenderCauses&&e.settingLabelDisabled],children:"Enable Render History"}),t(w,{testID:R("enableRenderHistory"),value:s.enableRenderHistory,onValueChange:n=>h({enableRenderHistory:n}),trackColor:{false:o.color.surfaceElevated,true:o.color.accent+"80"},thumbColor:s.enableRenderHistory?o.color.accent:o.color.knob,disabled:!s.trackRenderCauses})]}),l(i,{style:e.settingDescription,children:["Store render events for each component to view in the History tab.",!s.trackRenderCauses&&l(i,{style:e.settingWarning,children:["\n",'Requires "Track Render Causes" to be enabled.']})]})]}),l(a,{style:[e.settingItem,e.settingItemSpaced],children:[l(a,{style:e.settingHeader,children:[t(i,{style:e.settingLabel,children:"Debug Log Level"}),t(a,{style:e.settingValue,children:t(i,{testID:"buoy-highlight-setting-debugLogLevel-value",style:[e.settingValueText,s.debugLogLevel!=="off"&&{color:o.color.warning}],children:j.find(n=>n.value===s.debugLogLevel)?.label||"Off"})})]}),t(i,{style:e.settingDescription,children:"Control console logging verbosity for render cause detection."}),t(a,{style:e.batchSizePresets,children:j.map(n=>t(g,{style:[e.batchSizePreset,s.debugLogLevel===n.value&&e.batchSizePresetActive,n.value!=="off"&&s.debugLogLevel===n.value&&{backgroundColor:o.color.warningSoft,borderColor:o.color.warning}],onPress:()=>h({debugLogLevel:n.value}),testID:`buoy-highlight-preset-log-${n.value}`,accessibilityRole:"button",accessibilityLabel:`Debug log level ${n.label}`,children:t(i,{style:[e.batchSizePresetText,s.debugLogLevel===n.value&&e.batchSizePresetTextActive,n.value!=="off"&&s.debugLogLevel===n.value&&{color:o.color.warning}],children:n.label})},n.value))}),l(i,{style:e.settingDescriptionMuted,children:[j.find(n=>n.value===s.debugLogLevel)?.description,s.debugLogLevel!=="off"&&" \u2022 Check Metro console for logs"]})]}),l(a,{style:[e.settingItem,e.settingItemSpaced],children:[l(a,{style:e.settingHeader,children:[t(i,{style:e.settingLabel,children:"Batch Size"}),t(a,{style:e.settingValue,children:t(i,{testID:"buoy-highlight-setting-batchSize-value",style:e.settingValueText,children:s.batchSize})})]}),t(i,{style:e.settingDescription,children:"Maximum components to highlight per render update. Higher values capture more re-renders but may impact performance on complex screens."}),t(a,{style:e.batchSizePresets,children:be.map(n=>t(g,{style:[e.batchSizePreset,s.batchSize===n.value&&e.batchSizePresetActive],onPress:()=>h({batchSize:n.value}),testID:`buoy-highlight-preset-batch-${n.value}`,accessibilityRole:"button",accessibilityLabel:`Batch size ${n.label}`,children:t(i,{style:[e.batchSizePresetText,s.batchSize===n.value&&e.batchSizePresetTextActive],children:n.label})},n.value))})]}),l(a,{style:[e.settingItem,e.settingItemSpaced],children:[l(a,{style:e.settingHeader,children:[t(i,{style:e.settingLabel,children:"Show host views"}),t(w,{testID:R("showHostViews"),value:!!s.showHostViews,onValueChange:n=>h({showHostViews:n}),trackColor:{false:o.color.surfaceElevated,true:o.color.accent+"80"},thumbColor:s.showHostViews?o.color.accent:o.color.knob})]}),t(i,{style:e.settingDescription,children:"Include anonymous View / RCTView / Text hosts. Off by default so the list is named composites (what actually re-rendered)."})]}),l(a,{style:[e.settingItem,e.settingItemSpaced],children:[l(a,{style:e.settingHeader,children:[t(i,{style:e.settingLabel,children:"Highlight Dev Tools"}),t(w,{testID:R("excludeDevTools"),value:!s.excludeDevTools,onValueChange:n=>h({excludeDevTools:!n}),trackColor:{false:o.color.surfaceElevated,true:o.color.accent+"80"},thumbColor:!s.excludeDevTools?o.color.accent:o.color.knob})]}),l(i,{style:e.settingDescription,children:["Show re-render highlights on Buoy dev tools (floating menu, modals, etc.). Useful for optimizing the dev tools themselves.",!s.excludeDevTools&&l(i,{style:e.settingWarning,children:["\n","The highlight overlay is always excluded to prevent infinite loops."]})]})]})]})]})})})})}const e=ie.create({container:{flex:1,backgroundColor:"transparent"},scrollView:{flex:1},scrollContent:{paddingHorizontal:16,paddingTop:12,paddingBottom:32},section:{backgroundColor:o.color.surface,borderRadius:8,borderWidth:1,borderColor:o.color.border,marginBottom:12,overflow:"hidden"},sectionDescription:{fontSize:11,color:o.color.textSecondary,paddingHorizontal:16,paddingTop:8,lineHeight:16},patternChips:{flexDirection:"row",flexWrap:"wrap",gap:8,paddingHorizontal:16,paddingTop:12},patternChip:{flexDirection:"row",alignItems:"center",backgroundColor:o.color.surfaceElevated,borderRadius:6,borderWidth:1,paddingVertical:4,paddingLeft:4,paddingRight:6,maxWidth:"100%",gap:4},patternChipBadge:{paddingVertical:2,paddingHorizontal:5,borderRadius:4},patternChipBadgeText:{fontSize:9,fontWeight:"700"},patternChipValue:{fontSize:11,color:o.color.text,fontFamily:v,flexShrink:1},patternChipX:{marginLeft:2},addPatternRow:{paddingHorizontal:16,paddingTop:12,paddingBottom:16},addButton:{flexDirection:"row",alignItems:"center",justifyContent:"center",paddingVertical:10,paddingHorizontal:16,borderRadius:8,borderWidth:1,borderStyle:"dashed",gap:6},addButtonText:{fontSize:12,fontWeight:"500"},typePicker:{flexDirection:"row",alignItems:"center",gap:8},typePickerRow:{flex:1,flexDirection:"row",flexWrap:"wrap",gap:8},typeOption:{flexDirection:"row",alignItems:"center",paddingVertical:8,paddingHorizontal:12,borderRadius:6,borderWidth:1,backgroundColor:o.color.surfaceElevated,gap:6},typeOptionText:{fontSize:11,fontWeight:"600"},typePickerCancel:{padding:8},patternInputContainer:{flexDirection:"row",alignItems:"center",backgroundColor:o.color.surfaceElevated,borderRadius:8,borderWidth:1,borderColor:o.color.border,paddingLeft:4,paddingRight:8,paddingVertical:4,gap:4},patternInput:{flex:1,fontSize:12,color:o.color.text,paddingVertical:6,paddingHorizontal:4},addPatternButton:{paddingVertical:6,paddingHorizontal:10,borderRadius:4},addPatternButtonText:{fontSize:11,fontWeight:"600"},cancelButton:{padding:4},categoryBadgeScroll:{marginTop:12},categoryBadgeScrollContent:{paddingHorizontal:16,gap:8},categoryBadge:{flexDirection:"row",alignItems:"center",paddingVertical:8,paddingLeft:10,paddingRight:6,borderRadius:8,borderWidth:1,gap:6},categoryBadgeText:{fontSize:11,fontWeight:"600"},categoryBadgeCountBubble:{paddingHorizontal:6,paddingVertical:2,borderRadius:10,minWidth:20,alignItems:"center"},categoryBadgeCount:{fontSize:10,fontWeight:"600"},detectedItemsContainer:{paddingHorizontal:16,paddingTop:12,paddingBottom:16},detectedItemsScroll:{maxHeight:200},detectedItems:{flexDirection:"row",flexWrap:"wrap",gap:8},detectedItem:{flexDirection:"row",alignItems:"center",backgroundColor:o.color.surfaceElevated,borderRadius:6,borderWidth:1,paddingVertical:6,paddingHorizontal:10,gap:6},detectedItemText:{fontSize:11,color:o.color.text,fontFamily:v},emptyText:{fontSize:11,color:o.color.textTertiary,fontStyle:"italic",textAlign:"center",paddingVertical:16,paddingHorizontal:16},howItWorks:{paddingHorizontal:16,paddingVertical:12},howItWorksText:{fontSize:11,color:o.color.textTertiary,lineHeight:18,fontFamily:v},howItWorksBold:{fontWeight:"700",color:o.color.textSecondary},modalOverlay:{flex:1,backgroundColor:"rgba(0, 0, 0, 0.5)",justifyContent:"center",alignItems:"center",padding:32},actionPopup:{backgroundColor:o.color.surface,borderRadius:12,borderWidth:1,borderColor:o.color.border,width:"100%",maxWidth:300,overflow:"hidden"},actionPopupHeader:{padding:16,borderBottomWidth:1,borderBottomColor:o.color.separator,alignItems:"center"},actionPopupButtons:{flexDirection:"row",padding:12,gap:8},actionPopupButton:{flex:1,flexDirection:"row",alignItems:"center",justifyContent:"center",paddingVertical:12,paddingHorizontal:12,borderRadius:8,gap:8},actionPopupInclude:{backgroundColor:o.color.accentSoft},actionPopupExclude:{backgroundColor:o.color.accentSoft},actionPopupButtonText:{fontSize:13,fontWeight:"600"},actionPopupCancel:{padding:12,borderTopWidth:1,borderTopColor:o.color.separator,alignItems:"center"},actionPopupCancelText:{fontSize:13,color:o.color.textTertiary,fontWeight:"500"},settingsSection:{paddingHorizontal:16,paddingTop:8,paddingBottom:16},settingItem:{gap:8},settingItemSpaced:{marginTop:16,paddingTop:16,borderTopWidth:1,borderTopColor:o.color.separator},settingHeader:{flexDirection:"row",alignItems:"center",justifyContent:"space-between"},settingLabel:{fontSize:13,fontWeight:"600",color:o.color.text},settingValue:{backgroundColor:o.color.fillSecondary,paddingHorizontal:10,paddingVertical:4,borderRadius:6},settingValueText:{fontSize:12,fontWeight:"700",color:o.color.textTertiary,fontFamily:v},settingDescription:{fontSize:11,color:o.color.textSecondary,lineHeight:16},settingDescriptionMuted:{fontSize:10,color:o.color.textTertiary,lineHeight:14,marginTop:4,fontStyle:"italic"},settingLabelDisabled:{color:o.color.textTertiary},settingWarning:{color:o.color.warning,fontWeight:"500"},batchSizePresets:{flexDirection:"row",flexWrap:"wrap",gap:8,marginTop:4},batchSizePreset:{paddingVertical:8,paddingHorizontal:14,borderRadius:6,backgroundColor:o.color.surfaceElevated,borderWidth:1,borderColor:o.color.border},batchSizePresetActive:{backgroundColor:o.color.fillSecondary,borderColor:o.color.fillTertiary},batchSizePresetText:{fontSize:12,fontWeight:"500",color:o.color.textSecondary,fontFamily:v},batchSizePresetTextActive:{color:o.color.textTertiary,fontWeight:"700"},renderCountRangeContainer:{paddingHorizontal:16,paddingTop:12,paddingBottom:16,gap:12},renderCountInputRow:{flexDirection:"row",alignItems:"center",gap:12},renderCountInputGroup:{flex:1,gap:4},renderCountLabel:{fontSize:10,fontWeight:"600",color:o.color.textTertiary,textTransform:"uppercase",letterSpacing:.5},renderCountInput:{backgroundColor:o.color.surfaceElevated,borderRadius:8,borderWidth:1,borderColor:o.color.border,paddingVertical:10,paddingHorizontal:12,fontSize:14,fontWeight:"600",color:o.color.text,fontFamily:v,textAlign:"center"},renderCountSeparator:{fontSize:12,color:o.color.textTertiary,marginTop:18},clearRangeButton:{flexDirection:"row",alignItems:"center",justifyContent:"center",paddingVertical:8,paddingHorizontal:12,borderRadius:6,backgroundColor:o.color.warningSoft,borderWidth:1,borderColor:o.color.warning+"40",gap:6,alignSelf:"center"},clearRangeButtonText:{fontSize:11,fontWeight:"600",color:o.color.warning}});export default HighlightFilterView;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";import q,{useState as
|
|
1
|
+
"use strict";import q,{useState as j,useEffect as k,useRef as C,useCallback as m,memo as v,useMemo as y}from"react";import{View as z,Text as b,FlatList as D,StyleSheet as P,Keyboard as N}from"react-native";import{RenderTracker as r}from"../utils/RenderTracker";import{RenderListItem as V}from"./RenderListItem";import{Lock as M,night as u,useLimit as U,ToolEmptyState as _,resolveListEmptyState as H}from"@buoy-gg/shared-ui";import{jsx as s,jsxs as I}from"react/jsx-runtime";function K({searchText:t,filters:R,onSelectRender:g,onStatsChange:p,onRendersChange:i,isTracking:S,isPro:x=false}){const[o,h]=j(()=>r.getFilteredRenders(t));const w=C(null);k(()=>{const e=r.subscribe(()=>{const n=r.getFilteredRenders(t);h(n);p(r.getStats());i?.(n)});return e},[t,p,i]);k(()=>{const e=r.getFilteredRenders(t);h(e);i?.(e)},[t,R,i]);const L=U("highlightUpdates.components");const l=x?Infinity:L;const d=y(()=>{return o.slice(0,l)},[o,l]);const c=y(()=>{return Math.max(0,o.length-l)},[o.length,l]);const B=m(e=>e.id,[]);const E=m(({item:e,index:n})=>s(V,{render:e,onPress:()=>{N.dismiss();g(e,n,d)}}),[g,d]);const F=m(()=>{if(c<=0)return null;return I(z,{testID:"buoy-highlight-locked",style:a.lockedBanner,children:[s(M,{size:14,color:u.color.warning}),I(b,{testID:"buoy-highlight-locked-text",style:a.lockedBannerText,children:[c," more ",c===1?"component":"components"," locked"]}),s(b,{style:a.lockedBannerSubtext,children:"Upgrade to Pro"})]})},[c]);if(o.length===0){const e=t.trim();const n=r.getStats().totalComponents;const f=e?r.getFilteredRenders("").length:0;const T=H({subject:"components",verb:"tracked",search:t,total:e?f:n,capturing:S,blocked:e&&f===0&&n>0?"The active filters hide everything tracked, so there is nothing to search.":void 0,waiting:{otto:"stare",title:"No renders tracked",message:"Component renders will appear here"},paused:{title:"No renders tracked",message:"Enable tracking to start capturing"}});return s(_,{...T,testID:"buoy-highlight-empty"})}return s(D,{testID:"buoy-highlight-list",ref:w,keyboardShouldPersistTaps:"handled",data:d,renderItem:E,keyExtractor:B,contentContainerStyle:a.listContent,showsVerticalScrollIndicator:true,initialNumToRender:10,maxToRenderPerBatch:10,windowSize:10,scrollEnabled:false,ListFooterComponent:F})}export const IsolatedRenderList=v(K);const a=P.create({listContent:{paddingTop:8},lockedBanner:{flexDirection:"row",alignItems:"center",justifyContent:"center",paddingVertical:12,paddingHorizontal:16,marginTop:8,gap:8},lockedBannerText:{color:u.color.warning,fontSize:13,fontWeight:"500"},lockedBannerSubtext:{color:u.color.textTertiary,fontSize:12}});export default IsolatedRenderList;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";import ie,{useMemo as D,useState as V,useCallback as C}from"react";import{View as l,Text as n,TouchableOpacity as T,ScrollView as F,StyleSheet as j}from"react-native";import{CopyButton as M,formatRelativeTime as P,PlusIcon as $,MinusIcon as q,EventStepperFooter as U,Lock as K,night as o,useLimit as _,monoFont as b}from"@buoy-gg/shared-ui";import{TreeDiffViewer as G}from"@buoy-gg/shared-ui/dataViewer";import{CAUSE_CONFIG as Q,COMPONENT_CAUSE_CONFIG as J}from"./RenderCauseBadge";import{generateSingleComponentExport as X}from"../utils/rendersExportFormatter";import{jsx as i,jsxs as r}from"react/jsx-runtime";export function RenderDetailView({render:t,disableInternalFooter:h=false,selectedEventIndex:c,onEventIndexChange:d,onAddFilter:y,isPro:s=false}){const[m,g]=V(0);const u=c??m;const a=d??g;const p=D(()=>{if(!t.renderHistory||t.renderHistory.length===0){return[]}return[...t.renderHistory].sort((S,N)=>S.timestamp-N.timestamp)},[t.renderHistory]);const f=p.length;const I=p[u];const z=_("highlightUpdates.detailEvents");const x=s?Infinity:z;const v=D(()=>Math.max(0,f-x),[x,f]);const k=I?.cause||t.lastRenderCause;const O=C(()=>{if(u>0){a(u-1)}},[u,a]);const R=C(()=>{const S=Math.min(x-1,f-1);if(u<S){a(u+1)}},[u,f,a,x]);const W=D(()=>X(t),[t]);const A=t.componentName||t.displayName;const E=t.viewType;const L=t.lastRenderTime-t.firstRenderTime;const H=L>0?(t.renderCount/(L/1e3)).toFixed(1):t.renderCount.toString();const B=!h&&f>1;return r(l,{style:e.container,children:[r(l,{style:e.header,children:[r(l,{style:e.headerLeft,children:[i(n,{testID:"buoy-highlight-detail-name",style:e.componentName,numberOfLines:1,children:A}),i(l,{style:e.nativeTypeBadge,children:i(n,{testID:"buoy-highlight-detail-type",style:e.nativeTypeText,children:E})})]}),i(M,{value:W,size:14,testID:"buoy-highlight-detail-copy"})]}),r(F,{testID:"buoy-highlight-detail-scroll",style:e.scrollView,contentContainerStyle:[e.scrollContent,B&&{paddingBottom:100}],showsVerticalScrollIndicator:false,children:[k&&i(Y,{cause:k,renderNumber:I?.renderNumber}),i(Z,{render:t,rendersPerSec:H}),v>0&&r(l,{testID:"buoy-highlight-detail-locked",style:e.lockedBanner,children:[i(K,{size:14,color:o.color.warning}),r(n,{testID:"buoy-highlight-detail-locked-text",style:e.lockedBannerText,children:[v," ",v===1?"event":"events"," hidden"]}),i(n,{style:e.lockedBannerSubtext,children:"Upgrade to Pro"})]}),y&&i(ee,{render:t,onAddFilter:y})]}),B&&i(U,{currentIndex:u,totalItems:f,onPrevious:O,onNext:R,itemLabel:"Render",subtitle:I?.timestamp?P(new Date(I.timestamp)):void 0,applySafeAreaInset:false,absolute:true})]})}function Y({cause:t,renderNumber:h}){const c=t.componentCause||t.type;const d=t.componentCause?J[t.componentCause]:Q[t.type];const y=t.hookChanges&&t.hookChanges.length>0;const s=t.changedKeys&&t.changedKeys.length>0;const m=()=>{if(t.type==="mount")return"First render";if(c==="parent")return"Triggered by";return"Changed:"};return r(l,{testID:"buoy-highlight-detail-cause",style:e.answerCard,children:[r(l,{style:e.causeBadgeRow,children:[i(n,{testID:"buoy-highlight-detail-cause-label",style:e.causeLabel,children:m()}),i(l,{style:[e.causeBadgeLarge,{backgroundColor:d.color+"20"}],children:i(n,{testID:"buoy-highlight-detail-cause-badge",style:[e.causeBadgeLargeText,{color:d.color}],children:d.label.toUpperCase()})})]}),y&&i(l,{style:e.hookChangesContainer,children:t.hookChanges.map((g,u)=>{const a=`${g.type}[${g.index}]`;const p={[a]:g.previousValue};const f={[a]:g.currentValue};return i(l,{style:e.hookDiffContainer,children:i(G,{oldValue:p,newValue:f,theme:"dark",showUnchanged:false})},u)})}),!y&&s&&i(l,{style:e.propsChangesContainer,children:t.changedKeys.filter(g=>!g.includes("(ref only)")).slice(0,5).map((g,u)=>i(l,{style:e.propChangeChip,children:i(n,{testID:`buoy-highlight-detail-changed-${u}`,style:e.propChangeText,children:g})},u))})]})}function Z({render:t,rendersPerSec:h}){const c=t.testID||t.nativeID||t.accessibilityLabel;const d=t.measurements;return r(l,{style:e.detailsSection,children:[c&&r(l,{testID:"buoy-highlight-detail-identifiers",style:e.detailsCard,children:[i(n,{style:e.detailsCardTitle,children:"Identifiers"}),t.testID&&i(w,{label:"testID",value:t.testID}),t.nativeID&&i(w,{label:"nativeID",value:t.nativeID}),t.accessibilityLabel&&i(w,{label:"a11y",value:t.accessibilityLabel})]}),r(l,{testID:"buoy-highlight-detail-stats",style:e.statsRow,children:[r(l,{testID:"buoy-highlight-detail-stat-renders",style:e.statItem,children:[i(n,{testID:"buoy-highlight-detail-stat-renders-value",style:[e.statValue,{color:t.color}],children:t.renderCount}),i(n,{style:e.statLabel,children:"renders"})]}),i(l,{style:e.statDivider}),r(l,{testID:"buoy-highlight-detail-stat-rate",style:e.statItem,children:[i(n,{testID:"buoy-highlight-detail-stat-rate-value",style:e.statValue,children:h}),i(n,{style:e.statLabel,children:"/sec"})]}),i(l,{style:e.statDivider}),r(l,{testID:"buoy-highlight-detail-stat-tag",style:e.statItem,children:[i(n,{testID:"buoy-highlight-detail-stat-tag-value",style:e.statValue,children:t.nativeTag}),i(n,{style:e.statLabel,children:"tag"})]})]}),d&&r(l,{testID:"buoy-highlight-detail-measure",style:e.measurementsRow,children:[r(l,{style:e.measurementItem,children:[i(n,{style:e.measurementLabel,children:"x"}),i(n,{testID:"buoy-highlight-detail-measure-x",style:e.measurementValue,children:Math.round(t.measurements.x)})]}),r(l,{style:e.measurementItem,children:[i(n,{style:e.measurementLabel,children:"y"}),i(n,{testID:"buoy-highlight-detail-measure-y",style:e.measurementValue,children:Math.round(t.measurements.y)})]}),r(l,{style:e.measurementItem,children:[i(n,{style:e.measurementLabel,children:"w"}),i(n,{testID:"buoy-highlight-detail-measure-w",style:e.measurementValue,children:Math.round(t.measurements.width)})]}),r(l,{style:e.measurementItem,children:[i(n,{style:e.measurementLabel,children:"h"}),i(n,{testID:"buoy-highlight-detail-measure-h",style:e.measurementValue,children:Math.round(t.measurements.height)})]})]})]})}function w({label:t,value:h}){const c=`buoy-highlight-detail-id-${t.toLowerCase()}`;return r(l,{testID:c,style:e.detailRow,children:[i(n,{style:e.detailLabel,children:t}),i(n,{testID:`${c}-value`,style:e.detailValue,numberOfLines:1,children:h})]})}function ee({render:t,onAddFilter:h}){const[c,d]=V(null);const y=D(()=>{const a=[];if(t.nativeID){a.push({type:"nativeID",value:t.nativeID,label:"nativeID"})}if(t.testID){a.push({type:"testID",value:t.testID,label:"testID"})}if(t.accessibilityLabel){a.push({type:"accessibilityLabel",value:t.accessibilityLabel,label:"a11y"})}if(t.componentName){a.push({type:"component",value:t.componentName,label:"component"})}a.push({type:"viewType",value:t.viewType,label:"viewType"});return a},[t]);const s=c!==null?y[c]:null;const m=C(a=>{d(p=>p===a?null:a)},[]);const g=C(()=>{if(s){h({type:s.type,value:s.value},"include");d(null)}},[s,h]);const u=C(()=>{if(s){h({type:s.type,value:s.value},"exclude");d(null)}},[s,h]);return r(l,{testID:"buoy-highlight-quick",style:e.quickActionsSection,children:[i(n,{style:e.quickActionsTitle,children:"Quick Filters"}),i(l,{style:e.filterOptionsList,children:y.map((a,p)=>i(te,{testID:`buoy-highlight-quick-${a.type.toLowerCase()}`,label:a.label,value:a.value,isSelected:c===p,onSelect:()=>m(p)},a.type))}),r(l,{style:e.filterActionButtons,children:[r(T,{testID:"buoy-highlight-quick-include",accessibilityRole:"button",accessibilityLabel:"Only show this",style:[e.filterActionButton,e.filterActionButtonInclude,!s&&e.filterActionButtonDisabled],onPress:g,disabled:!s,activeOpacity:.7,children:[i($,{size:14,color:s?o.color.accent:o.color.textTertiary}),i(n,{style:[e.filterActionButtonText,{color:s?o.color.accent:o.color.textTertiary}],children:"Only Show This"})]}),r(T,{testID:"buoy-highlight-quick-exclude",accessibilityRole:"button",accessibilityLabel:"Hide this",style:[e.filterActionButton,e.filterActionButtonExclude,!s&&e.filterActionButtonDisabled],onPress:u,disabled:!s,activeOpacity:.7,children:[i(q,{size:14,color:s?o.color.danger:o.color.textTertiary}),i(n,{style:[e.filterActionButtonText,{color:s?o.color.danger:o.color.textTertiary}],children:"Hide This"})]})]})]})}function te({testID:t,label:h,value:c,isSelected:d,onSelect:y}){return r(T,{testID:t,accessibilityRole:"button",accessibilityLabel:`${h}, ${c}`,style:[e.filterOptionCard,d&&e.filterOptionCardSelected],onPress:y,activeOpacity:.7,children:[i(n,{style:[e.filterOptionLabel,d&&e.filterOptionLabelSelected],children:h}),i(n,{testID:t?`${t}-value`:void 0,style:[e.filterOptionValue,d&&e.filterOptionValueSelected],numberOfLines:1,children:c})]})}const e=j.create({container:{flex:1,backgroundColor:"transparent"},header:{flexDirection:"row",alignItems:"center",justifyContent:"center",gap:12,padding:16,paddingBottom:0},scrollView:{flex:1},scrollContent:{padding:16,paddingTop:12,paddingBottom:80,gap:12},headerLeft:{flex:1,flexDirection:"row",alignItems:"center",justifyContent:"center",gap:10},componentName:{fontSize:18,fontWeight:"700",color:o.color.text,flexShrink:1},nativeTypeBadge:{backgroundColor:o.color.bg,paddingVertical:3,paddingHorizontal:8,borderRadius:4},nativeTypeText:{fontSize:11,fontWeight:"600",color:o.color.textTertiary,fontFamily:b},answerCard:{backgroundColor:o.color.surface,borderRadius:8,borderWidth:1,borderColor:o.color.border,padding:12,gap:6},causeBadgeRow:{flexDirection:"row",alignItems:"center",gap:8},causeBadgeLarge:{paddingVertical:4,paddingHorizontal:10,borderRadius:4},causeBadgeLargeText:{fontSize:11,fontWeight:"700",letterSpacing:.5},causeLabel:{fontSize:12,color:o.color.textSecondary,fontWeight:"500"},hookChangesContainer:{gap:6},hookDiffContainer:{backgroundColor:o.color.bg,borderRadius:6,overflow:"hidden"},propsChangesContainer:{flexDirection:"row",flexWrap:"wrap",gap:4},propChangeChip:{backgroundColor:o.color.bg,paddingVertical:2,paddingHorizontal:6,borderRadius:4},propChangeText:{fontSize:11,color:o.color.text,fontFamily:b},detailsSection:{gap:10},detailsCard:{backgroundColor:o.color.surface,borderRadius:8,borderWidth:1,borderColor:o.color.border,padding:12,gap:6},detailsCardTitle:{fontSize:10,fontWeight:"600",color:o.color.textTertiary,letterSpacing:.5,textTransform:"uppercase",marginBottom:4},detailRow:{flexDirection:"row",alignItems:"center",gap:8},detailLabel:{fontSize:11,fontWeight:"600",color:o.color.textSecondary,minWidth:55},detailValue:{fontSize:12,color:o.color.text,fontFamily:b,flex:1},statsRow:{flexDirection:"row",alignItems:"center",justifyContent:"center",backgroundColor:o.color.surface,borderRadius:8,borderWidth:1,borderColor:o.color.border,paddingVertical:10,paddingHorizontal:16},statItem:{flex:1,alignItems:"center"},statValue:{fontSize:16,fontWeight:"700",color:o.color.text,fontFamily:b},statLabel:{fontSize:10,color:o.color.textTertiary,marginTop:2},statDivider:{width:1,height:24,backgroundColor:o.color.border,marginHorizontal:12},measurementsRow:{flexDirection:"row",alignItems:"center",justifyContent:"space-around",backgroundColor:o.color.surface,borderRadius:8,borderWidth:1,borderColor:o.color.border,paddingVertical:8,paddingHorizontal:12},measurementItem:{flexDirection:"row",alignItems:"baseline",gap:4},measurementLabel:{fontSize:10,fontWeight:"600",color:o.color.textTertiary,textTransform:"uppercase"},measurementValue:{fontSize:12,fontWeight:"600",color:o.color.text,fontFamily:b},quickActionsSection:{backgroundColor:o.color.surface,borderRadius:8,borderWidth:1,borderColor:o.color.border,padding:12,gap:10},quickActionsTitle:{fontSize:10,fontWeight:"600",color:o.color.textTertiary,letterSpacing:.5,textTransform:"uppercase",marginBottom:2},filterOptionsList:{gap:6},filterOptionCard:{flexDirection:"row",alignItems:"center",backgroundColor:o.color.surfaceElevated,borderRadius:6,paddingVertical:10,paddingHorizontal:12,borderWidth:1,borderColor:"transparent",gap:10},filterOptionCardSelected:{borderColor:o.color.accentBorderStrong,backgroundColor:o.color.accentSoft},filterOptionLabel:{fontSize:10,fontWeight:"600",color:o.color.textTertiary,minWidth:70},filterOptionLabelSelected:{color:o.color.accent},filterOptionValue:{fontSize:12,color:o.color.text,fontFamily:b,flex:1},filterOptionValueSelected:{color:o.color.text},filterActionButtons:{flexDirection:"row",gap:8,marginTop:12},filterActionButton:{flexDirection:"row",alignItems:"center",justifyContent:"center",gap:4,paddingVertical:8,paddingHorizontal:10,borderRadius:6,borderWidth:1},filterActionButtonInclude:{backgroundColor:o.color.accentSoft,borderColor:o.color.accentBorderStrong},filterActionButtonExclude:{backgroundColor:o.color.dangerSoft,borderColor:o.color.danger+"40"},filterActionButtonDisabled:{backgroundColor:o.color.surfaceElevated,borderColor:o.color.border,opacity:.5},filterActionButtonText:{fontSize:11,fontWeight:"600"},lockedBanner:{flexDirection:"row",alignItems:"center",justifyContent:"center",backgroundColor:o.color.surface,borderRadius:8,borderWidth:1,borderColor:o.color.warning+"40",paddingVertical:12,paddingHorizontal:16,gap:8},lockedBannerText:{color:o.color.warning,fontSize:13,fontWeight:"600"},lockedBannerSubtext:{color:o.color.textTertiary,fontSize:12}});export default RenderDetailView;
|
|
1
|
+
"use strict";import ie,{useMemo as D,useState as V,useCallback as C}from"react";import{View as l,Text as r,TouchableOpacity as T,ScrollView as F,StyleSheet as P}from"react-native";import{CopyButton as j,formatRelativeTime as M,PlusIcon as $,MinusIcon as q,EventStepperFooter as U,Lock as K,night as o,useLimit as _,monoFont as b}from"@buoy-gg/shared-ui";import{TreeDiffViewer as G}from"@buoy-gg/shared-ui/dataViewer";import{CAUSE_CONFIG as Q,COMPONENT_CAUSE_CONFIG as J}from"./RenderCauseBadge";import{generateSingleComponentExport as X}from"../utils/rendersExportFormatter";import{jsx as i,jsxs as n}from"react/jsx-runtime";export function RenderDetailView({render:t,disableInternalFooter:h=false,selectedEventIndex:c,onEventIndexChange:d,onAddFilter:y,isPro:s=false}){const[m,g]=V(0);const u=c??m;const a=d??g;const p=D(()=>{if(!t.renderHistory||t.renderHistory.length===0){return[]}return[...t.renderHistory].sort((S,N)=>S.timestamp-N.timestamp)},[t.renderHistory]);const f=p.length;const I=p[u];const z=_("highlightUpdates.detailEvents");const x=s?Infinity:z;const v=D(()=>Math.max(0,f-x),[x,f]);const k=I?.cause||t.lastRenderCause;const O=C(()=>{if(u>0){a(u-1)}},[u,a]);const R=C(()=>{const S=Math.min(x-1,f-1);if(u<S){a(u+1)}},[u,f,a,x]);const W=D(()=>X(t),[t]);const A=t.componentName||t.displayName;const E=t.viewType;const L=t.lastRenderTime-t.firstRenderTime;const H=L>0?(t.renderCount/(L/1e3)).toFixed(1):t.renderCount.toString();const B=!h&&f>1;return n(l,{style:e.container,children:[n(l,{style:e.header,children:[n(l,{style:e.headerLeft,children:[i(r,{testID:"buoy-highlight-detail-name",style:e.componentName,numberOfLines:1,children:A}),i(l,{style:e.nativeTypeBadge,children:i(r,{testID:"buoy-highlight-detail-type",style:e.nativeTypeText,children:E})})]}),i(j,{value:W,size:14,testID:"buoy-highlight-detail-copy"})]}),n(F,{keyboardShouldPersistTaps:"handled",testID:"buoy-highlight-detail-scroll",style:e.scrollView,contentContainerStyle:[e.scrollContent,B&&{paddingBottom:100}],showsVerticalScrollIndicator:false,children:[k&&i(Y,{cause:k,renderNumber:I?.renderNumber}),i(Z,{render:t,rendersPerSec:H}),v>0&&n(l,{testID:"buoy-highlight-detail-locked",style:e.lockedBanner,children:[i(K,{size:14,color:o.color.warning}),n(r,{testID:"buoy-highlight-detail-locked-text",style:e.lockedBannerText,children:[v," ",v===1?"event":"events"," hidden"]}),i(r,{style:e.lockedBannerSubtext,children:"Upgrade to Pro"})]}),y&&i(ee,{render:t,onAddFilter:y})]}),B&&i(U,{currentIndex:u,totalItems:f,onPrevious:O,onNext:R,itemLabel:"Render",subtitle:I?.timestamp?M(new Date(I.timestamp)):void 0,applySafeAreaInset:false,absolute:true})]})}function Y({cause:t,renderNumber:h}){const c=t.componentCause||t.type;const d=t.componentCause?J[t.componentCause]:Q[t.type];const y=t.hookChanges&&t.hookChanges.length>0;const s=t.changedKeys&&t.changedKeys.length>0;const m=()=>{if(t.type==="mount")return"First render";if(c==="parent")return"Triggered by";return"Changed:"};return n(l,{testID:"buoy-highlight-detail-cause",style:e.answerCard,children:[n(l,{style:e.causeBadgeRow,children:[i(r,{testID:"buoy-highlight-detail-cause-label",style:e.causeLabel,children:m()}),i(l,{style:[e.causeBadgeLarge,{backgroundColor:d.color+"20"}],children:i(r,{testID:"buoy-highlight-detail-cause-badge",style:[e.causeBadgeLargeText,{color:d.color}],children:d.label.toUpperCase()})})]}),y&&i(l,{style:e.hookChangesContainer,children:t.hookChanges.map((g,u)=>{const a=`${g.type}[${g.index}]`;const p={[a]:g.previousValue};const f={[a]:g.currentValue};return i(l,{style:e.hookDiffContainer,children:i(G,{oldValue:p,newValue:f,theme:"dark",showUnchanged:false})},u)})}),!y&&s&&i(l,{style:e.propsChangesContainer,children:t.changedKeys.filter(g=>!g.includes("(ref only)")).slice(0,5).map((g,u)=>i(l,{style:e.propChangeChip,children:i(r,{testID:`buoy-highlight-detail-changed-${u}`,style:e.propChangeText,children:g})},u))})]})}function Z({render:t,rendersPerSec:h}){const c=t.testID||t.nativeID||t.accessibilityLabel;const d=t.measurements;return n(l,{style:e.detailsSection,children:[c&&n(l,{testID:"buoy-highlight-detail-identifiers",style:e.detailsCard,children:[i(r,{style:e.detailsCardTitle,children:"Identifiers"}),t.testID&&i(w,{label:"testID",value:t.testID}),t.nativeID&&i(w,{label:"nativeID",value:t.nativeID}),t.accessibilityLabel&&i(w,{label:"a11y",value:t.accessibilityLabel})]}),n(l,{testID:"buoy-highlight-detail-stats",style:e.statsRow,children:[n(l,{testID:"buoy-highlight-detail-stat-renders",style:e.statItem,children:[i(r,{testID:"buoy-highlight-detail-stat-renders-value",style:[e.statValue,{color:t.color}],children:t.renderCount}),i(r,{style:e.statLabel,children:"renders"})]}),i(l,{style:e.statDivider}),n(l,{testID:"buoy-highlight-detail-stat-rate",style:e.statItem,children:[i(r,{testID:"buoy-highlight-detail-stat-rate-value",style:e.statValue,children:h}),i(r,{style:e.statLabel,children:"/sec"})]}),i(l,{style:e.statDivider}),n(l,{testID:"buoy-highlight-detail-stat-tag",style:e.statItem,children:[i(r,{testID:"buoy-highlight-detail-stat-tag-value",style:e.statValue,children:t.nativeTag}),i(r,{style:e.statLabel,children:"tag"})]})]}),d&&n(l,{testID:"buoy-highlight-detail-measure",style:e.measurementsRow,children:[n(l,{style:e.measurementItem,children:[i(r,{style:e.measurementLabel,children:"x"}),i(r,{testID:"buoy-highlight-detail-measure-x",style:e.measurementValue,children:Math.round(t.measurements.x)})]}),n(l,{style:e.measurementItem,children:[i(r,{style:e.measurementLabel,children:"y"}),i(r,{testID:"buoy-highlight-detail-measure-y",style:e.measurementValue,children:Math.round(t.measurements.y)})]}),n(l,{style:e.measurementItem,children:[i(r,{style:e.measurementLabel,children:"w"}),i(r,{testID:"buoy-highlight-detail-measure-w",style:e.measurementValue,children:Math.round(t.measurements.width)})]}),n(l,{style:e.measurementItem,children:[i(r,{style:e.measurementLabel,children:"h"}),i(r,{testID:"buoy-highlight-detail-measure-h",style:e.measurementValue,children:Math.round(t.measurements.height)})]})]})]})}function w({label:t,value:h}){const c=`buoy-highlight-detail-id-${t.toLowerCase()}`;return n(l,{testID:c,style:e.detailRow,children:[i(r,{style:e.detailLabel,children:t}),i(r,{testID:`${c}-value`,style:e.detailValue,numberOfLines:1,children:h})]})}function ee({render:t,onAddFilter:h}){const[c,d]=V(null);const y=D(()=>{const a=[];if(t.nativeID){a.push({type:"nativeID",value:t.nativeID,label:"nativeID"})}if(t.testID){a.push({type:"testID",value:t.testID,label:"testID"})}if(t.accessibilityLabel){a.push({type:"accessibilityLabel",value:t.accessibilityLabel,label:"a11y"})}if(t.componentName){a.push({type:"component",value:t.componentName,label:"component"})}a.push({type:"viewType",value:t.viewType,label:"viewType"});return a},[t]);const s=c!==null?y[c]:null;const m=C(a=>{d(p=>p===a?null:a)},[]);const g=C(()=>{if(s){h({type:s.type,value:s.value},"include");d(null)}},[s,h]);const u=C(()=>{if(s){h({type:s.type,value:s.value},"exclude");d(null)}},[s,h]);return n(l,{testID:"buoy-highlight-quick",style:e.quickActionsSection,children:[i(r,{style:e.quickActionsTitle,children:"Quick Filters"}),i(l,{style:e.filterOptionsList,children:y.map((a,p)=>i(te,{testID:`buoy-highlight-quick-${a.type.toLowerCase()}`,label:a.label,value:a.value,isSelected:c===p,onSelect:()=>m(p)},a.type))}),n(l,{style:e.filterActionButtons,children:[n(T,{testID:"buoy-highlight-quick-include",accessibilityRole:"button",accessibilityLabel:"Only show this",style:[e.filterActionButton,e.filterActionButtonInclude,!s&&e.filterActionButtonDisabled],onPress:g,disabled:!s,activeOpacity:.7,children:[i($,{size:14,color:s?o.color.accent:o.color.textTertiary}),i(r,{style:[e.filterActionButtonText,{color:s?o.color.accent:o.color.textTertiary}],children:"Only Show This"})]}),n(T,{testID:"buoy-highlight-quick-exclude",accessibilityRole:"button",accessibilityLabel:"Hide this",style:[e.filterActionButton,e.filterActionButtonExclude,!s&&e.filterActionButtonDisabled],onPress:u,disabled:!s,activeOpacity:.7,children:[i(q,{size:14,color:s?o.color.danger:o.color.textTertiary}),i(r,{style:[e.filterActionButtonText,{color:s?o.color.danger:o.color.textTertiary}],children:"Hide This"})]})]})]})}function te({testID:t,label:h,value:c,isSelected:d,onSelect:y}){return n(T,{testID:t,accessibilityRole:"button",accessibilityLabel:`${h}, ${c}`,style:[e.filterOptionCard,d&&e.filterOptionCardSelected],onPress:y,activeOpacity:.7,children:[i(r,{style:[e.filterOptionLabel,d&&e.filterOptionLabelSelected],children:h}),i(r,{testID:t?`${t}-value`:void 0,style:[e.filterOptionValue,d&&e.filterOptionValueSelected],numberOfLines:1,children:c})]})}const e=P.create({container:{flex:1,backgroundColor:"transparent"},header:{flexDirection:"row",alignItems:"center",justifyContent:"center",gap:12,padding:16,paddingBottom:0},scrollView:{flex:1},scrollContent:{padding:16,paddingTop:12,paddingBottom:80,gap:12},headerLeft:{flex:1,flexDirection:"row",alignItems:"center",justifyContent:"center",gap:10},componentName:{fontSize:18,fontWeight:"700",color:o.color.text,flexShrink:1},nativeTypeBadge:{backgroundColor:o.color.bg,paddingVertical:3,paddingHorizontal:8,borderRadius:4},nativeTypeText:{fontSize:11,fontWeight:"600",color:o.color.textTertiary,fontFamily:b},answerCard:{backgroundColor:o.color.surface,borderRadius:8,borderWidth:1,borderColor:o.color.border,padding:12,gap:6},causeBadgeRow:{flexDirection:"row",alignItems:"center",gap:8},causeBadgeLarge:{paddingVertical:4,paddingHorizontal:10,borderRadius:4},causeBadgeLargeText:{fontSize:11,fontWeight:"700",letterSpacing:.5},causeLabel:{fontSize:12,color:o.color.textSecondary,fontWeight:"500"},hookChangesContainer:{gap:6},hookDiffContainer:{backgroundColor:o.color.bg,borderRadius:6,overflow:"hidden"},propsChangesContainer:{flexDirection:"row",flexWrap:"wrap",gap:4},propChangeChip:{backgroundColor:o.color.bg,paddingVertical:2,paddingHorizontal:6,borderRadius:4},propChangeText:{fontSize:11,color:o.color.text,fontFamily:b},detailsSection:{gap:10},detailsCard:{backgroundColor:o.color.surface,borderRadius:8,borderWidth:1,borderColor:o.color.border,padding:12,gap:6},detailsCardTitle:{fontSize:10,fontWeight:"600",color:o.color.textTertiary,letterSpacing:.5,textTransform:"uppercase",marginBottom:4},detailRow:{flexDirection:"row",alignItems:"center",gap:8},detailLabel:{fontSize:11,fontWeight:"600",color:o.color.textSecondary,minWidth:55},detailValue:{fontSize:12,color:o.color.text,fontFamily:b,flex:1},statsRow:{flexDirection:"row",alignItems:"center",justifyContent:"center",backgroundColor:o.color.surface,borderRadius:8,borderWidth:1,borderColor:o.color.border,paddingVertical:10,paddingHorizontal:16},statItem:{flex:1,alignItems:"center"},statValue:{fontSize:16,fontWeight:"700",color:o.color.text,fontFamily:b},statLabel:{fontSize:10,color:o.color.textTertiary,marginTop:2},statDivider:{width:1,height:24,backgroundColor:o.color.border,marginHorizontal:12},measurementsRow:{flexDirection:"row",alignItems:"center",justifyContent:"space-around",backgroundColor:o.color.surface,borderRadius:8,borderWidth:1,borderColor:o.color.border,paddingVertical:8,paddingHorizontal:12},measurementItem:{flexDirection:"row",alignItems:"baseline",gap:4},measurementLabel:{fontSize:10,fontWeight:"600",color:o.color.textTertiary,textTransform:"uppercase"},measurementValue:{fontSize:12,fontWeight:"600",color:o.color.text,fontFamily:b},quickActionsSection:{backgroundColor:o.color.surface,borderRadius:8,borderWidth:1,borderColor:o.color.border,padding:12,gap:10},quickActionsTitle:{fontSize:10,fontWeight:"600",color:o.color.textTertiary,letterSpacing:.5,textTransform:"uppercase",marginBottom:2},filterOptionsList:{gap:6},filterOptionCard:{flexDirection:"row",alignItems:"center",backgroundColor:o.color.surfaceElevated,borderRadius:6,paddingVertical:10,paddingHorizontal:12,borderWidth:1,borderColor:"transparent",gap:10},filterOptionCardSelected:{borderColor:o.color.accentBorderStrong,backgroundColor:o.color.accentSoft},filterOptionLabel:{fontSize:10,fontWeight:"600",color:o.color.textTertiary,minWidth:70},filterOptionLabelSelected:{color:o.color.accent},filterOptionValue:{fontSize:12,color:o.color.text,fontFamily:b,flex:1},filterOptionValueSelected:{color:o.color.text},filterActionButtons:{flexDirection:"row",gap:8,marginTop:12},filterActionButton:{flexDirection:"row",alignItems:"center",justifyContent:"center",gap:4,paddingVertical:8,paddingHorizontal:10,borderRadius:6,borderWidth:1},filterActionButtonInclude:{backgroundColor:o.color.accentSoft,borderColor:o.color.accentBorderStrong},filterActionButtonExclude:{backgroundColor:o.color.dangerSoft,borderColor:o.color.danger+"40"},filterActionButtonDisabled:{backgroundColor:o.color.surfaceElevated,borderColor:o.color.border,opacity:.5},filterActionButtonText:{fontSize:11,fontWeight:"600"},lockedBanner:{flexDirection:"row",alignItems:"center",justifyContent:"center",backgroundColor:o.color.surface,borderRadius:8,borderWidth:1,borderColor:o.color.warning+"40",paddingVertical:12,paddingHorizontal:16,gap:8},lockedBannerText:{color:o.color.warning,fontSize:13,fontWeight:"600"},lockedBannerSubtext:{color:o.color.textTertiary,fontSize:12}});export default RenderDetailView;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";import te,{useState as k,useCallback as w,useMemo as x}from"react";import{View as r,Text as l,TouchableOpacity as v,ScrollView as L,StyleSheet as _}from"react-native";import{Clock as J,GitBranch as G,Database as A,Lock as K,formatRelativeTime as W,SectionHeader as T,EventStepperFooter as P,buoyColors as V,night as t,useLimit as N,ToolEmptyState as Y,monoFont as y}from"@buoy-gg/shared-ui";import{TreeDiffViewer as F}from"@buoy-gg/shared-ui/dataViewer";import{RenderTracker as q}from"../utils/RenderTracker";import{EnhancedCauseDisplay as E,CAUSE_CONFIG as H}from"./RenderCauseBadge";import{jsx as o,jsxs as n,Fragment as Q}from"react/jsx-runtime";function B(i){const a=new Date(i);const g=a.getHours().toString().padStart(2,"0");const d=a.getMinutes().toString().padStart(2,"0");const f=a.getSeconds().toString().padStart(2,"0");const h=a.getMilliseconds().toString().padStart(3,"0");return`${g}:${d}:${f}.${h}`}export function RenderHistoryViewer({render:i,disableInternalFooter:a=false,selectedEventIndex:g,onEventIndexChange:d,isPro:f=false}){const[h,m]=k(0);const c=g??h;const s=d??m;const[p,I]=k("current");const u=x(()=>{if(!i.renderHistory||i.renderHistory.length===0){return[]}return[...i.renderHistory].sort((D,$)=>D.timestamp-$.timestamp)},[i.renderHistory]);const z=N("highlightUpdates.historyEvents");const b=f?Infinity:z;const R=x(()=>u.slice(-b),[u,b]);const M=x(()=>Math.max(0,u.length-b),[u.length,b]);const S=R.length;const C=R[c];const U=c>0?R[c-1]:null;const O=w(()=>{if(c>0){s(c-1)}},[c,s]);const j=w(()=>{if(c<S-1){s(c+1)}},[c,S,s]);if(S===0){const D=q.getSettings().enableRenderHistory;return o(Y,{testID:"buoy-highlight-history-empty",otto:D?"stare":"paused",title:"No Render History",message:D?"History is on and armed \u2014 this component has not re-rendered since. Interact with the app to record one.":"Enable render history tracking in settings to see render events here."})}return n(Q,{children:[n(r,{style:[e.container,{paddingBottom:!a&&S>1?80:0}],children:[M>0&&n(r,{testID:"buoy-highlight-history-locked",style:e.lockedBanner,children:[o(K,{size:14,color:t.color.warning}),n(l,{testID:"buoy-highlight-history-locked-text",style:e.lockedBannerText,children:[M," older ",M===1?"render":"renders"," locked"]}),o(l,{style:e.lockedBannerSubtext,children:"Upgrade to Pro"})]}),n(r,{style:e.viewToggleContainer,children:[n(v,{testID:"buoy-highlight-history-mode-current",accessibilityRole:"button",accessibilityLabel:"Current state",style:[e.viewToggleCard,p==="current"&&e.viewToggleCardActive],onPress:()=>I("current"),activeOpacity:.8,children:[n(r,{style:e.viewToggleContent,children:[o(A,{size:16,color:p==="current"?t.color.accent:t.color.textSecondary}),o(l,{style:[e.viewToggleLabel,p==="current"&&e.viewToggleLabelActive],children:"CURRENT STATE"})]}),n(l,{style:[e.viewToggleDescription,p==="current"&&{color:t.color.text}],children:["View render #",C?.renderNumber??0," details"]})]}),n(r,{testID:"buoy-highlight-history-mode-diff",accessibilityLabel:"Diff view, coming soon",style:[e.viewToggleCard,e.viewToggleCardDisabled],children:[n(r,{style:e.viewToggleContent,children:[o(G,{size:16,color:t.color.textTertiary}),o(l,{style:[e.viewToggleLabel,e.viewToggleLabelDisabled],children:"DIFF VIEW"}),o(r,{style:e.todoBadge,children:o(l,{style:e.todoBadgeText,children:"TODO"})})]}),o(l,{style:[e.viewToggleDescription,{color:t.color.textTertiary}],children:"Compare renders side by side (coming soon)"})]})]}),o(L,{testID:"buoy-highlight-history-scroll",style:e.contentScroll,contentContainerStyle:e.contentContainer,showsVerticalScrollIndicator:false,children:p==="current"?o(X,{event:C,render:i}):o(Z,{previousEvent:U,currentEvent:C,render:i})})]}),!a&&o(P,{currentIndex:c,totalItems:S,onPrevious:O,onNext:j,itemLabel:"Render",subtitle:W(new Date(C?.timestamp??Date.now()))})]})}function X({event:i,render:a}){if(!i){return o(r,{testID:"buoy-highlight-history-no-event",style:e.noEventContainer,children:o(l,{style:e.noEventText,children:"No event selected"})})}const g=H[i.cause.type];return n(r,{style:e.currentStateContainer,children:[n(r,{style:e.eventHeader,children:[n(r,{style:e.eventHeaderLeft,children:[n(l,{testID:"buoy-highlight-history-event-title",style:e.eventTitle,children:["Render #",i.renderNumber]}),o(l,{testID:"buoy-highlight-history-event-time",style:e.eventTime,children:B(i.timestamp)})]}),n(r,{style:[e.eventBadge,{backgroundColor:a.color+"30"}],children:[o(r,{style:[e.eventBadgeDot,{backgroundColor:a.color}]}),o(l,{testID:"buoy-highlight-history-event-cause",style:[e.eventBadgeText,{color:a.color}],children:i.cause.type.toUpperCase()})]})]}),n(r,{style:e.section,children:[n(T,{children:[o(T.Icon,{icon:J,color:g.color,size:12}),o(T.Title,{children:"WHY DID THIS RENDER?"})]}),o(r,{style:e.sectionContent,children:o(E,{cause:i.cause,nativeType:a.viewType})})]}),i.capturedProps&&Object.keys(i.capturedProps).length>0&&n(r,{style:e.section,children:[n(T,{children:[o(T.Icon,{icon:A,color:t.color.accent,size:12}),o(T.Title,{children:"CAPTURED PROPS"})]}),o(r,{style:e.sectionContent,children:o(L,{horizontal:true,showsHorizontalScrollIndicator:false,style:e.propsScrollView,children:o(l,{testID:"buoy-highlight-history-props",style:e.propsJson,children:JSON.stringify(i.capturedProps,null,2)})})})]})]})}function Z({previousEvent:i,currentEvent:a,render:g}){const[d,f]=k("props");if(!i||!a){return o(r,{style:e.noEventContainer,children:o(l,{style:e.noEventText,children:"Select an event with a previous event to compare"})})}const h=H[i.cause.type];const m=H[a.cause.type];const c=i.capturedProps&&a.capturedProps;const s=i.capturedState&&a.capturedState;return n(r,{style:e.diffContainer,children:[n(r,{style:e.compareBar,children:[n(r,{style:e.compareSide,children:[n(r,{style:e.compareLabelRow,children:[o(l,{style:[e.compareLabel,{color:V.warning}],children:"PREV"}),o(r,{style:[e.compareActionBadge,{backgroundColor:`${h.color}20`}],children:o(l,{style:[e.compareActionText,{color:h.color}],children:i.cause.type.toUpperCase()})})]}),n(r,{style:e.compareMeta,children:[n(l,{style:e.compareIndex,children:["#",i.renderNumber]}),o(l,{style:e.compareTime,children:B(i.timestamp)})]})]}),o(r,{style:e.compareDivider,children:o(l,{style:e.compareArrow,children:"\u2192"})}),n(r,{style:e.compareSide,children:[n(r,{style:e.compareLabelRow,children:[o(l,{style:[e.compareLabel,{color:V.success}],children:"CUR"}),o(r,{style:[e.compareActionBadge,{backgroundColor:`${m.color}20`}],children:o(l,{style:[e.compareActionText,{color:m.color}],children:a.cause.type.toUpperCase()})})]}),n(r,{style:e.compareMeta,children:[n(l,{style:e.compareIndex,children:["#",a.renderNumber]}),o(l,{style:e.compareTime,children:B(a.timestamp)})]})]})]}),n(r,{style:e.diffModeTabs,children:[o(v,{style:[e.diffModeTab,d==="cause"&&e.diffModeTabActive],onPress:()=>f("cause"),activeOpacity:.7,children:o(l,{style:[e.diffModeTabText,d==="cause"&&e.diffModeTabTextActive],children:"CAUSE"})}),o(v,{style:[e.diffModeTab,d==="props"&&e.diffModeTabActive,!c&&e.diffModeTabDisabled],onPress:()=>c&&f("props"),activeOpacity:c?.7:1,children:o(l,{style:[e.diffModeTabText,d==="props"&&e.diffModeTabTextActive,!c&&e.diffModeTabTextDisabled],children:"PROPS"})}),o(v,{style:[e.diffModeTab,d==="state"&&e.diffModeTabActive,!s&&e.diffModeTabDisabled],onPress:()=>s&&f("state"),activeOpacity:s?.7:1,children:o(l,{style:[e.diffModeTabText,d==="state"&&e.diffModeTabTextActive,!s&&e.diffModeTabTextDisabled],children:"STATE"})})]}),d==="cause"&&o(r,{style:e.diffSummary,children:o(E,{cause:a.cause,nativeType:g.viewType})}),d==="props"&&o(r,{style:e.treeDiffContainer,children:c?o(F,{oldValue:i.capturedProps,newValue:a.capturedProps,theme:"dark",showUnchanged:true}):n(r,{style:e.noDiffData,children:[o(l,{style:e.noDiffDataTitle,children:"Props Not Captured"}),o(l,{style:e.noDiffDataText,children:'Enable "Capture Props on Render" in settings to see props diff.'})]})}),d==="state"&&o(r,{style:e.treeDiffContainer,children:s?o(F,{oldValue:i.capturedState,newValue:a.capturedState,theme:"dark",showUnchanged:true}):n(r,{style:e.noDiffData,children:[o(l,{style:e.noDiffDataTitle,children:"State Not Captured"}),o(l,{style:e.noDiffDataText,children:'Enable "Capture State on Render" in settings to see state diff.'})]})})]})}export function RenderHistoryFooter({render:i,selectedEventIndex:a=0,onEventIndexChange:g=()=>{},isPro:d=false}){const f=x(()=>{if(!i.renderHistory||i.renderHistory.length===0){return[]}return[...i.renderHistory].sort((z,b)=>z.timestamp-b.timestamp)},[i.renderHistory]);const h=N("highlightUpdates.historyEvents");const m=d?Infinity:h;const c=x(()=>f.slice(-m),[f,m]);const s=c.length;const p=c[a];const I=w(()=>{g(Math.max(0,a-1))},[a,g]);const u=w(()=>{g(Math.min(s-1,a+1))},[a,s,g]);if(s<=1){return null}return o(P,{currentIndex:a,totalItems:s,onPrevious:I,onNext:u,itemLabel:"Render",subtitle:p?W(new Date(p.timestamp)):void 0})}const e=_.create({container:{flex:1,backgroundColor:"transparent"},emptyContainer:{flex:1,alignItems:"center",justifyContent:"center",padding:32,gap:12},emptyTitle:{fontSize:16,fontWeight:"600",color:t.color.text},emptyText:{fontSize:13,color:t.color.textSecondary,textAlign:"center",lineHeight:18},viewToggleContainer:{flexDirection:"row",padding:12,gap:8},viewToggleCard:{flex:1,backgroundColor:t.color.surface,borderRadius:8,borderWidth:1,borderColor:t.color.border,padding:10,gap:4},viewToggleCardActive:{borderColor:t.color.accentBorderStrong,backgroundColor:t.color.accentSoft},viewToggleCardDisabled:{opacity:.5},todoBadge:{backgroundColor:t.color.fillSecondary,paddingHorizontal:6,paddingVertical:2,borderRadius:4,marginLeft:4},todoBadgeText:{fontSize:9,fontWeight:"700",color:t.color.textTertiary,letterSpacing:.3},viewToggleContent:{flexDirection:"row",alignItems:"center",gap:6},viewToggleLabel:{fontSize:10,fontWeight:"700",color:t.color.textSecondary,letterSpacing:.5},viewToggleLabelActive:{color:t.color.accent},viewToggleLabelDisabled:{color:t.color.textTertiary},viewToggleDescription:{fontSize:11,color:t.color.textTertiary,marginTop:2},contentScroll:{flex:1},contentContainer:{padding:12,paddingTop:0},noEventContainer:{padding:24,alignItems:"center"},noEventText:{fontSize:13,color:t.color.textTertiary},currentStateContainer:{gap:12},eventHeader:{flexDirection:"row",alignItems:"center",justifyContent:"space-between",backgroundColor:t.color.surface,borderRadius:8,borderWidth:1,borderColor:t.color.border,padding:12},eventHeaderLeft:{gap:2},eventTitle:{fontSize:15,fontWeight:"700",color:t.color.text},eventTime:{fontSize:11,color:t.color.textTertiary,fontFamily:y},eventBadge:{flexDirection:"row",alignItems:"center",paddingHorizontal:10,paddingVertical:4,borderRadius:12,gap:6},eventBadgeDot:{width:6,height:6,borderRadius:3},eventBadgeText:{fontSize:10,fontWeight:"700",fontFamily:y},section:{backgroundColor:t.color.surface,borderRadius:8,borderWidth:1,borderColor:t.color.border,overflow:"hidden"},sectionContent:{padding:12,paddingTop:8},causeContainer:{marginBottom:12},changedList:{marginBottom:12,paddingLeft:4},changedListTitle:{fontSize:11,fontWeight:"600",color:t.color.textSecondary,marginBottom:6},changedItem:{fontSize:12,color:t.color.text,fontFamily:y,marginBottom:3,paddingLeft:8},propsScrollView:{maxHeight:150},propsJson:{fontSize:11,fontFamily:y,color:t.color.text,backgroundColor:t.color.bg,padding:10,borderRadius:6},diffContainer:{gap:12},compareBar:{flexDirection:"row",backgroundColor:t.color.surface,borderRadius:8,borderWidth:1,borderColor:t.color.border,padding:10},compareSide:{flex:1,gap:4},compareLabelRow:{flexDirection:"row",alignItems:"center",gap:8},compareLabel:{fontSize:10,fontWeight:"700",letterSpacing:.5},compareActionBadge:{paddingHorizontal:6,paddingVertical:2,borderRadius:4},compareActionText:{fontSize:9,fontWeight:"600"},compareMeta:{flexDirection:"row",alignItems:"center",gap:6},compareIndex:{fontSize:12,fontWeight:"600",color:t.color.text},compareTime:{fontSize:10,color:t.color.textTertiary,fontFamily:y},compareDivider:{width:30,alignItems:"center",justifyContent:"center"},compareArrow:{fontSize:16,color:t.color.textTertiary},diffSummary:{backgroundColor:t.color.surface,borderRadius:8,borderWidth:1,borderColor:t.color.border,padding:12},diffSummaryTitle:{fontSize:11,fontWeight:"600",color:t.color.textSecondary,marginBottom:8},diffChanges:{gap:4},diffChangeItem:{flexDirection:"row",alignItems:"center",gap:6},diffChangeIcon:{fontSize:12,fontWeight:"700",color:t.color.warning,fontFamily:y},diffChangeKey:{fontSize:12,color:t.color.text,fontFamily:y},diffNoChanges:{fontSize:12,color:t.color.textTertiary,fontStyle:"italic"},diffPlaceholder:{fontSize:12,color:t.color.textTertiary,fontStyle:"italic",textAlign:"center",padding:16},diffModeTabs:{flexDirection:"row",backgroundColor:t.color.surface,borderRadius:8,borderWidth:1,borderColor:t.color.border,padding:4,gap:4},diffModeTab:{flex:1,paddingVertical:8,paddingHorizontal:12,borderRadius:6,alignItems:"center"},diffModeTabActive:{backgroundColor:t.color.accentSoft},diffModeTabDisabled:{opacity:.4},diffModeTabText:{fontSize:10,fontWeight:"600",color:t.color.textSecondary,letterSpacing:.5},diffModeTabTextActive:{color:t.color.accent},diffModeTabTextDisabled:{color:t.color.textTertiary},causeDiffContainer:{gap:8,marginBottom:12},causeDiffRow:{flexDirection:"row",alignItems:"center",gap:8},causeDiffLabel:{fontSize:11,fontWeight:"600",color:t.color.textSecondary,minWidth:80},causeDiffValue:{fontSize:12,color:t.color.text,fontFamily:y,fontWeight:"500"},diffChangesTitle:{fontSize:11,fontWeight:"600",color:t.color.textSecondary,marginBottom:6},treeDiffContainer:{backgroundColor:t.color.surface,borderRadius:8,borderWidth:1,borderColor:t.color.border,overflow:"hidden",minHeight:150},noDiffData:{padding:24,alignItems:"center",gap:8},noDiffDataTitle:{fontSize:13,fontWeight:"600",color:t.color.text},noDiffDataText:{fontSize:12,color:t.color.textTertiary,textAlign:"center",lineHeight:18},lockedBanner:{flexDirection:"row",alignItems:"center",justifyContent:"center",paddingVertical:10,paddingHorizontal:16,marginHorizontal:12,marginTop:8,backgroundColor:t.color.warningSoft,borderRadius:8,borderWidth:1,borderColor:t.color.warning+"30",gap:8},lockedBannerText:{color:t.color.warning,fontSize:13,fontWeight:"500"},lockedBannerSubtext:{color:t.color.textTertiary,fontSize:12}});export default RenderHistoryViewer;
|
|
1
|
+
"use strict";import te,{useState as M,useCallback as w,useMemo as x}from"react";import{View as r,Text as l,TouchableOpacity as v,ScrollView as L,StyleSheet as _}from"react-native";import{Clock as J,GitBranch as G,Database as A,Lock as K,formatRelativeTime as W,SectionHeader as T,EventStepperFooter as P,buoyColors as V,night as t,useLimit as N,ToolEmptyState as Y,monoFont as y}from"@buoy-gg/shared-ui";import{TreeDiffViewer as F}from"@buoy-gg/shared-ui/dataViewer";import{RenderTracker as q}from"../utils/RenderTracker";import{EnhancedCauseDisplay as E,CAUSE_CONFIG as H}from"./RenderCauseBadge";import{jsx as o,jsxs as n,Fragment as Q}from"react/jsx-runtime";function B(i){const a=new Date(i);const g=a.getHours().toString().padStart(2,"0");const d=a.getMinutes().toString().padStart(2,"0");const f=a.getSeconds().toString().padStart(2,"0");const h=a.getMilliseconds().toString().padStart(3,"0");return`${g}:${d}:${f}.${h}`}export function RenderHistoryViewer({render:i,disableInternalFooter:a=false,selectedEventIndex:g,onEventIndexChange:d,isPro:f=false}){const[h,m]=M(0);const c=g??h;const s=d??m;const[p,I]=M("current");const u=x(()=>{if(!i.renderHistory||i.renderHistory.length===0){return[]}return[...i.renderHistory].sort((D,$)=>D.timestamp-$.timestamp)},[i.renderHistory]);const z=N("highlightUpdates.historyEvents");const b=f?Infinity:z;const R=x(()=>u.slice(-b),[u,b]);const k=x(()=>Math.max(0,u.length-b),[u.length,b]);const S=R.length;const C=R[c];const U=c>0?R[c-1]:null;const O=w(()=>{if(c>0){s(c-1)}},[c,s]);const j=w(()=>{if(c<S-1){s(c+1)}},[c,S,s]);if(S===0){const D=q.getSettings().enableRenderHistory;return o(Y,{testID:"buoy-highlight-history-empty",otto:D?"stare":"paused",title:"No Render History",message:D?"History is on and armed \u2014 this component has not re-rendered since. Interact with the app to record one.":"Enable render history tracking in settings to see render events here."})}return n(Q,{children:[n(r,{style:[e.container,{paddingBottom:!a&&S>1?80:0}],children:[k>0&&n(r,{testID:"buoy-highlight-history-locked",style:e.lockedBanner,children:[o(K,{size:14,color:t.color.warning}),n(l,{testID:"buoy-highlight-history-locked-text",style:e.lockedBannerText,children:[k," older ",k===1?"render":"renders"," locked"]}),o(l,{style:e.lockedBannerSubtext,children:"Upgrade to Pro"})]}),n(r,{style:e.viewToggleContainer,children:[n(v,{testID:"buoy-highlight-history-mode-current",accessibilityRole:"button",accessibilityLabel:"Current state",style:[e.viewToggleCard,p==="current"&&e.viewToggleCardActive],onPress:()=>I("current"),activeOpacity:.8,children:[n(r,{style:e.viewToggleContent,children:[o(A,{size:16,color:p==="current"?t.color.accent:t.color.textSecondary}),o(l,{style:[e.viewToggleLabel,p==="current"&&e.viewToggleLabelActive],children:"CURRENT STATE"})]}),n(l,{style:[e.viewToggleDescription,p==="current"&&{color:t.color.text}],children:["View render #",C?.renderNumber??0," details"]})]}),n(r,{testID:"buoy-highlight-history-mode-diff",accessibilityLabel:"Diff view, coming soon",style:[e.viewToggleCard,e.viewToggleCardDisabled],children:[n(r,{style:e.viewToggleContent,children:[o(G,{size:16,color:t.color.textTertiary}),o(l,{style:[e.viewToggleLabel,e.viewToggleLabelDisabled],children:"DIFF VIEW"}),o(r,{style:e.todoBadge,children:o(l,{style:e.todoBadgeText,children:"TODO"})})]}),o(l,{style:[e.viewToggleDescription,{color:t.color.textTertiary}],children:"Compare renders side by side (coming soon)"})]})]}),o(L,{keyboardShouldPersistTaps:"handled",testID:"buoy-highlight-history-scroll",style:e.contentScroll,contentContainerStyle:e.contentContainer,showsVerticalScrollIndicator:false,children:p==="current"?o(X,{event:C,render:i}):o(Z,{previousEvent:U,currentEvent:C,render:i})})]}),!a&&o(P,{currentIndex:c,totalItems:S,onPrevious:O,onNext:j,itemLabel:"Render",subtitle:W(new Date(C?.timestamp??Date.now()))})]})}function X({event:i,render:a}){if(!i){return o(r,{testID:"buoy-highlight-history-no-event",style:e.noEventContainer,children:o(l,{style:e.noEventText,children:"No event selected"})})}const g=H[i.cause.type];return n(r,{style:e.currentStateContainer,children:[n(r,{style:e.eventHeader,children:[n(r,{style:e.eventHeaderLeft,children:[n(l,{testID:"buoy-highlight-history-event-title",style:e.eventTitle,children:["Render #",i.renderNumber]}),o(l,{testID:"buoy-highlight-history-event-time",style:e.eventTime,children:B(i.timestamp)})]}),n(r,{style:[e.eventBadge,{backgroundColor:a.color+"30"}],children:[o(r,{style:[e.eventBadgeDot,{backgroundColor:a.color}]}),o(l,{testID:"buoy-highlight-history-event-cause",style:[e.eventBadgeText,{color:a.color}],children:i.cause.type.toUpperCase()})]})]}),n(r,{style:e.section,children:[n(T,{children:[o(T.Icon,{icon:J,color:g.color,size:12}),o(T.Title,{children:"WHY DID THIS RENDER?"})]}),o(r,{style:e.sectionContent,children:o(E,{cause:i.cause,nativeType:a.viewType})})]}),i.capturedProps&&Object.keys(i.capturedProps).length>0&&n(r,{style:e.section,children:[n(T,{children:[o(T.Icon,{icon:A,color:t.color.accent,size:12}),o(T.Title,{children:"CAPTURED PROPS"})]}),o(r,{style:e.sectionContent,children:o(L,{horizontal:true,showsHorizontalScrollIndicator:false,style:e.propsScrollView,children:o(l,{testID:"buoy-highlight-history-props",style:e.propsJson,children:JSON.stringify(i.capturedProps,null,2)})})})]})]})}function Z({previousEvent:i,currentEvent:a,render:g}){const[d,f]=M("props");if(!i||!a){return o(r,{style:e.noEventContainer,children:o(l,{style:e.noEventText,children:"Select an event with a previous event to compare"})})}const h=H[i.cause.type];const m=H[a.cause.type];const c=i.capturedProps&&a.capturedProps;const s=i.capturedState&&a.capturedState;return n(r,{style:e.diffContainer,children:[n(r,{style:e.compareBar,children:[n(r,{style:e.compareSide,children:[n(r,{style:e.compareLabelRow,children:[o(l,{style:[e.compareLabel,{color:V.warning}],children:"PREV"}),o(r,{style:[e.compareActionBadge,{backgroundColor:`${h.color}20`}],children:o(l,{style:[e.compareActionText,{color:h.color}],children:i.cause.type.toUpperCase()})})]}),n(r,{style:e.compareMeta,children:[n(l,{style:e.compareIndex,children:["#",i.renderNumber]}),o(l,{style:e.compareTime,children:B(i.timestamp)})]})]}),o(r,{style:e.compareDivider,children:o(l,{style:e.compareArrow,children:"\u2192"})}),n(r,{style:e.compareSide,children:[n(r,{style:e.compareLabelRow,children:[o(l,{style:[e.compareLabel,{color:V.success}],children:"CUR"}),o(r,{style:[e.compareActionBadge,{backgroundColor:`${m.color}20`}],children:o(l,{style:[e.compareActionText,{color:m.color}],children:a.cause.type.toUpperCase()})})]}),n(r,{style:e.compareMeta,children:[n(l,{style:e.compareIndex,children:["#",a.renderNumber]}),o(l,{style:e.compareTime,children:B(a.timestamp)})]})]})]}),n(r,{style:e.diffModeTabs,children:[o(v,{style:[e.diffModeTab,d==="cause"&&e.diffModeTabActive],onPress:()=>f("cause"),activeOpacity:.7,children:o(l,{style:[e.diffModeTabText,d==="cause"&&e.diffModeTabTextActive],children:"CAUSE"})}),o(v,{style:[e.diffModeTab,d==="props"&&e.diffModeTabActive,!c&&e.diffModeTabDisabled],onPress:()=>c&&f("props"),activeOpacity:c?.7:1,children:o(l,{style:[e.diffModeTabText,d==="props"&&e.diffModeTabTextActive,!c&&e.diffModeTabTextDisabled],children:"PROPS"})}),o(v,{style:[e.diffModeTab,d==="state"&&e.diffModeTabActive,!s&&e.diffModeTabDisabled],onPress:()=>s&&f("state"),activeOpacity:s?.7:1,children:o(l,{style:[e.diffModeTabText,d==="state"&&e.diffModeTabTextActive,!s&&e.diffModeTabTextDisabled],children:"STATE"})})]}),d==="cause"&&o(r,{style:e.diffSummary,children:o(E,{cause:a.cause,nativeType:g.viewType})}),d==="props"&&o(r,{style:e.treeDiffContainer,children:c?o(F,{oldValue:i.capturedProps,newValue:a.capturedProps,theme:"dark",showUnchanged:true}):n(r,{style:e.noDiffData,children:[o(l,{style:e.noDiffDataTitle,children:"Props Not Captured"}),o(l,{style:e.noDiffDataText,children:'Enable "Capture Props on Render" in settings to see props diff.'})]})}),d==="state"&&o(r,{style:e.treeDiffContainer,children:s?o(F,{oldValue:i.capturedState,newValue:a.capturedState,theme:"dark",showUnchanged:true}):n(r,{style:e.noDiffData,children:[o(l,{style:e.noDiffDataTitle,children:"State Not Captured"}),o(l,{style:e.noDiffDataText,children:'Enable "Capture State on Render" in settings to see state diff.'})]})})]})}export function RenderHistoryFooter({render:i,selectedEventIndex:a=0,onEventIndexChange:g=()=>{},isPro:d=false}){const f=x(()=>{if(!i.renderHistory||i.renderHistory.length===0){return[]}return[...i.renderHistory].sort((z,b)=>z.timestamp-b.timestamp)},[i.renderHistory]);const h=N("highlightUpdates.historyEvents");const m=d?Infinity:h;const c=x(()=>f.slice(-m),[f,m]);const s=c.length;const p=c[a];const I=w(()=>{g(Math.max(0,a-1))},[a,g]);const u=w(()=>{g(Math.min(s-1,a+1))},[a,s,g]);if(s<=1){return null}return o(P,{currentIndex:a,totalItems:s,onPrevious:I,onNext:u,itemLabel:"Render",subtitle:p?W(new Date(p.timestamp)):void 0})}const e=_.create({container:{flex:1,backgroundColor:"transparent"},emptyContainer:{flex:1,alignItems:"center",justifyContent:"center",padding:32,gap:12},emptyTitle:{fontSize:16,fontWeight:"600",color:t.color.text},emptyText:{fontSize:13,color:t.color.textSecondary,textAlign:"center",lineHeight:18},viewToggleContainer:{flexDirection:"row",padding:12,gap:8},viewToggleCard:{flex:1,backgroundColor:t.color.surface,borderRadius:8,borderWidth:1,borderColor:t.color.border,padding:10,gap:4},viewToggleCardActive:{borderColor:t.color.accentBorderStrong,backgroundColor:t.color.accentSoft},viewToggleCardDisabled:{opacity:.5},todoBadge:{backgroundColor:t.color.fillSecondary,paddingHorizontal:6,paddingVertical:2,borderRadius:4,marginLeft:4},todoBadgeText:{fontSize:9,fontWeight:"700",color:t.color.textTertiary,letterSpacing:.3},viewToggleContent:{flexDirection:"row",alignItems:"center",gap:6},viewToggleLabel:{fontSize:10,fontWeight:"700",color:t.color.textSecondary,letterSpacing:.5},viewToggleLabelActive:{color:t.color.accent},viewToggleLabelDisabled:{color:t.color.textTertiary},viewToggleDescription:{fontSize:11,color:t.color.textTertiary,marginTop:2},contentScroll:{flex:1},contentContainer:{padding:12,paddingTop:0},noEventContainer:{padding:24,alignItems:"center"},noEventText:{fontSize:13,color:t.color.textTertiary},currentStateContainer:{gap:12},eventHeader:{flexDirection:"row",alignItems:"center",justifyContent:"space-between",backgroundColor:t.color.surface,borderRadius:8,borderWidth:1,borderColor:t.color.border,padding:12},eventHeaderLeft:{gap:2},eventTitle:{fontSize:15,fontWeight:"700",color:t.color.text},eventTime:{fontSize:11,color:t.color.textTertiary,fontFamily:y},eventBadge:{flexDirection:"row",alignItems:"center",paddingHorizontal:10,paddingVertical:4,borderRadius:12,gap:6},eventBadgeDot:{width:6,height:6,borderRadius:3},eventBadgeText:{fontSize:10,fontWeight:"700",fontFamily:y},section:{backgroundColor:t.color.surface,borderRadius:8,borderWidth:1,borderColor:t.color.border,overflow:"hidden"},sectionContent:{padding:12,paddingTop:8},causeContainer:{marginBottom:12},changedList:{marginBottom:12,paddingLeft:4},changedListTitle:{fontSize:11,fontWeight:"600",color:t.color.textSecondary,marginBottom:6},changedItem:{fontSize:12,color:t.color.text,fontFamily:y,marginBottom:3,paddingLeft:8},propsScrollView:{maxHeight:150},propsJson:{fontSize:11,fontFamily:y,color:t.color.text,backgroundColor:t.color.bg,padding:10,borderRadius:6},diffContainer:{gap:12},compareBar:{flexDirection:"row",backgroundColor:t.color.surface,borderRadius:8,borderWidth:1,borderColor:t.color.border,padding:10},compareSide:{flex:1,gap:4},compareLabelRow:{flexDirection:"row",alignItems:"center",gap:8},compareLabel:{fontSize:10,fontWeight:"700",letterSpacing:.5},compareActionBadge:{paddingHorizontal:6,paddingVertical:2,borderRadius:4},compareActionText:{fontSize:9,fontWeight:"600"},compareMeta:{flexDirection:"row",alignItems:"center",gap:6},compareIndex:{fontSize:12,fontWeight:"600",color:t.color.text},compareTime:{fontSize:10,color:t.color.textTertiary,fontFamily:y},compareDivider:{width:30,alignItems:"center",justifyContent:"center"},compareArrow:{fontSize:16,color:t.color.textTertiary},diffSummary:{backgroundColor:t.color.surface,borderRadius:8,borderWidth:1,borderColor:t.color.border,padding:12},diffSummaryTitle:{fontSize:11,fontWeight:"600",color:t.color.textSecondary,marginBottom:8},diffChanges:{gap:4},diffChangeItem:{flexDirection:"row",alignItems:"center",gap:6},diffChangeIcon:{fontSize:12,fontWeight:"700",color:t.color.warning,fontFamily:y},diffChangeKey:{fontSize:12,color:t.color.text,fontFamily:y},diffNoChanges:{fontSize:12,color:t.color.textTertiary,fontStyle:"italic"},diffPlaceholder:{fontSize:12,color:t.color.textTertiary,fontStyle:"italic",textAlign:"center",padding:16},diffModeTabs:{flexDirection:"row",backgroundColor:t.color.surface,borderRadius:8,borderWidth:1,borderColor:t.color.border,padding:4,gap:4},diffModeTab:{flex:1,paddingVertical:8,paddingHorizontal:12,borderRadius:6,alignItems:"center"},diffModeTabActive:{backgroundColor:t.color.accentSoft},diffModeTabDisabled:{opacity:.4},diffModeTabText:{fontSize:10,fontWeight:"600",color:t.color.textSecondary,letterSpacing:.5},diffModeTabTextActive:{color:t.color.accent},diffModeTabTextDisabled:{color:t.color.textTertiary},causeDiffContainer:{gap:8,marginBottom:12},causeDiffRow:{flexDirection:"row",alignItems:"center",gap:8},causeDiffLabel:{fontSize:11,fontWeight:"600",color:t.color.textSecondary,minWidth:80},causeDiffValue:{fontSize:12,color:t.color.text,fontFamily:y,fontWeight:"500"},diffChangesTitle:{fontSize:11,fontWeight:"600",color:t.color.textSecondary,marginBottom:6},treeDiffContainer:{backgroundColor:t.color.surface,borderRadius:8,borderWidth:1,borderColor:t.color.border,overflow:"hidden",minHeight:150},noDiffData:{padding:24,alignItems:"center",gap:8},noDiffDataTitle:{fontSize:13,fontWeight:"600",color:t.color.text},noDiffDataText:{fontSize:12,color:t.color.textTertiary,textAlign:"center",lineHeight:18},lockedBanner:{flexDirection:"row",alignItems:"center",justifyContent:"center",paddingVertical:10,paddingHorizontal:16,marginHorizontal:12,marginTop:8,backgroundColor:t.color.warningSoft,borderRadius:8,borderWidth:1,borderColor:t.color.warning+"30",gap:8},lockedBannerText:{color:t.color.warning,fontSize:13,fontWeight:"500"},lockedBannerSubtext:{color:t.color.textTertiary,fontSize:12}});export default RenderHistoryViewer;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";import{useCallback as
|
|
1
|
+
"use strict";import{useCallback as d,useEffect as V,useMemo as y,useState as N}from"react";import{Text as E,StyleSheet as D,ScrollView as _}from"react-native";import{DynamicFilterView as O,macOSColors as g,night as f,FileText as k,FileCode as P,Zap as B,Settings as $,Eye as M,Layers as z,ToolbarCopyButton as G,ExportPreview as U,monoFont as W}from"@buoy-gg/shared-ui";import{DEFAULT_COPY_SETTINGS as Z,COPY_PRESETS as J,PRESET_METADATA as r,detectActivePreset as K}from"../types/copySettings";import{generateExport as Y,estimateExportSize as q,getExportSummary as F}from"../utils/rendersExportFormatter";import{loadCopySettings as Q,saveCopySettings as X}from"../utils/copySettingsStorage";import{jsx as u,Fragment as ee,jsxs as te}from"react/jsx-runtime";const ie=50*1024;const oe=200*1024;const re=[{value:"mount",label:"Mount"},{value:"props",label:"Props"},{value:"hooks",label:"Hooks"},{value:"state",label:"State"},{value:"parent",label:"Parent"},{value:"context",label:"Context"},{value:"unknown",label:"Unknown"}];function ae(i){if(i<1024)return`${i} B`;if(i<1024*1024)return`${(i/1024).toFixed(1)} KB`;return`${(i/(1024*1024)).toFixed(1)} MB`}function se(){const i=Date.now();return[{id:"1",nativeTag:1,viewType:"RCTView",displayName:"View",componentName:"PokemonListItem",renderCount:30,firstRenderTime:i-5e3,lastRenderTime:i,color:"#10B981",lastRenderCause:{type:"parent",timestamp:i,componentCause:"parent"}},{id:"2",nativeTag:2,viewType:"RCTView",displayName:"View",componentName:"CartHeader",renderCount:12,firstRenderTime:i-4e3,lastRenderTime:i,color:"#3B82F6",lastRenderCause:{type:"hooks",timestamp:i,componentCause:"state",hookChanges:[{type:"useState",index:2,previousValue:4,currentValue:5}]}},{id:"3",nativeTag:3,viewType:"RCTView",displayName:"View",componentName:"SearchBar",renderCount:8,firstRenderTime:i-3e3,lastRenderTime:i,color:"#F59E0B",lastRenderCause:{type:"props",timestamp:i,componentCause:"props",changedKeys:["query","onChange"]}}]}export function RendersCopySettingsView({renders:i}){const[e,h]=N(Z);const[C,L]=N(false);V(()=>{let t=true;Q().then(o=>{if(t&&o)h(o)});return()=>{t=false}},[]);const a=d(t=>{h(t);X(t)},[]);const p=i.length>0;const n=p?i:se();const l=y(()=>K(e),[e]);const m=y(()=>q(n,e),[n,e]);const w=y(()=>{if(m>=oe)return"danger";if(m>=ie)return"warning";return"none"},[m]);const v=d(()=>Y(n,e),[n,e]);const S=d(t=>{const o=J[t];if(!o)return;a({...o,filterCauses:[...o.filterCauses]})},[a]);const R=d((t,o)=>{const[s,x]=t.split("::");if(s==="preset"){S(x);return}if(s==="format"){a({...e,format:o});return}if(s==="sort"){a({...e,sortBy:o});return}if(s==="topN"){a({...e,topN:o});return}if(s==="minRenders"){a({...e,minRenders:o});return}if(s==="cause"){const c=o;const H=e.filterCauses.includes(c);a({...e,filterCauses:H?e.filterCauses.filter(I=>I!==c):[...e.filterCauses,c]});return}if(s==="signal"){const c=x;a({...e,[c]:!e[c]});return}},[e,a,S]);const A=d(()=>{const{totalComponents:t,totalRenders:o}=F(n);return u(U,{expanded:C,onExpandedChange:L,summary:`${t} component${t!==1?"s":""} \xB7 ${o} renders \xB7 ~${ae(m)}${!p?" (mock data)":""}`,warningLevel:w,warningText:{warning:"Large payload \u2014 preview may be slow",danger:"Very large payload \u2014 try a smaller topN or turn off history"},testIDs:{expand:"buoy-highlight-copy-preview-show",collapse:"buoy-highlight-copy-preview-hide",summary:"buoy-highlight-copy-preview-summary",warning:"buoy-highlight-copy-size-warning"},renderBody:()=>{const s=v();return u(_,{keyboardShouldPersistTaps:"handled",testID:"buoy-highlight-copy-preview-scroll",style:b.previewScroll,nestedScrollEnabled:true,children:u(E,{testID:"buoy-highlight-copy-preview-text",style:b.previewText,selectable:true,children:s})})}})},[C,n,m,w,p,v]);const T=d(()=>{const{totalComponents:t}=F(n);const o=p?`${t} components`:"Mock data (no renders captured)";return te(ee,{children:[u(E,{testID:"buoy-highlight-copy-status",style:b.statusLabel,children:o}),u(G,{value:v})]})},[p,n,v]);const j=y(()=>({sections:[{id:"presets",title:"Presets",type:"custom",data:[{id:"preset::llm",label:r.llm.label,icon:B,color:r.llm.color,value:"llm",isActive:l==="llm",description:r.llm.description},{id:"preset::table",label:r.table.label,icon:k,color:r.table.color,value:"table",isActive:l==="table",description:r.table.description},{id:"preset::json",label:r.json.label,icon:P,color:r.json.color,value:"json",isActive:l==="json",description:r.json.description},{id:"preset::full",label:r.full.label,icon:z,color:r.full.color,value:"full",isActive:l==="full",description:r.full.description},{id:"preset::custom",label:"Custom",icon:$,color:f.color.textSecondary,value:"custom",isActive:l===null,description:"User-configured"}]},{id:"format",title:"Format",type:"custom",data:[{id:"format::summary",label:"Summary",icon:B,color:g.semantic.success,value:"summary",isActive:e.format==="summary",description:"Compact, LLM-ready"},{id:"format::markdown-table",label:"Table",icon:k,color:g.semantic.info,value:"markdown-table",isActive:e.format==="markdown-table",description:"Markdown table"},{id:"format::json",label:"JSON",icon:P,color:g.semantic.warning,value:"json",isActive:e.format==="json",description:"Structured data"}]},{id:"sort",title:"Sort By",type:"custom",data:[{id:"sort::renderCount",label:"Count",value:"renderCount",isActive:e.sortBy==="renderCount",description:"Total renders"},{id:"sort::rate",label:"Rate",value:"rate",isActive:e.sortBy==="rate",description:"Renders / sec"},{id:"sort::name",label:"Name",value:"name",isActive:e.sortBy==="name",description:"Alphabetical"}]},{id:"topN",title:"Top N",type:"custom",data:[{id:"topN::10",label:"10",value:10,isActive:e.topN===10},{id:"topN::25",label:"25",value:25,isActive:e.topN===25},{id:"topN::50",label:"50",value:50,isActive:e.topN===50},{id:"topN::100",label:"100",value:100,isActive:e.topN===100},{id:"topN::-1",label:"All",value:-1,isActive:e.topN===-1}]},{id:"minRenders",title:"Min Renders",type:"custom",data:[{id:"minRenders::1",label:"1",value:1,isActive:e.minRenders===1},{id:"minRenders::2",label:"2",value:2,isActive:e.minRenders===2},{id:"minRenders::3",label:"3",value:3,isActive:e.minRenders===3},{id:"minRenders::5",label:"5",value:5,isActive:e.minRenders===5},{id:"minRenders::10",label:"10",value:10,isActive:e.minRenders===10}]},{id:"causes",title:"Filter Causes",type:"custom",description:e.filterCauses.length===0?"All causes shown":"Only the selected causes shown",data:re.map(t=>({id:`cause::${t.value}`,label:t.label,value:t.value,isActive:e.filterCauses.includes(t.value)}))},{id:"signal",title:"Signal Extraction",type:"custom",data:[{id:"signal::groupByName",label:"Group by name",value:"groupByName",isActive:e.groupByName,description:"Collapse list items"},{id:"signal::aggregateCauses",label:"Aggregate causes",value:"aggregateCauses",isActive:e.aggregateCauses,description:"Hook x N"},{id:"signal::includeHistory",label:"Include history",value:"includeHistory",isActive:e.includeHistory,description:"JSON only \u2014 large"}]}],previewSection:{enabled:true,title:"PREVIEW",icon:M,content:A,headerActions:T},onFilterChange:R}),[e,l,R,A,T]);return u(O,{...j})}const b=D.create({previewScroll:{maxHeight:360},previewText:{fontFamily:W,fontSize:11,color:f.color.text,lineHeight:18},statusLabel:{fontSize:11,fontWeight:"600",color:f.color.textTertiary,marginRight:8}});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";import{getDOMControlProps as
|
|
1
|
+
"use strict";import{getDOMControlProps as k}from"@buoy-gg/shared-ui/utils";const w=new Set(["button","link","menuitem","tab","switch","checkbox","radio","option","textbox","slider"]);const m=new Set(["SCRIPT","STYLE","NOSCRIPT","TEMPLATE","SVG","PATH","HEAD","META","LINK"]);const h=80;function B(t){for(const r in t){if(r.startsWith("__reactContainer$")||r==="_reactRootContainer")return true}return false}function g(t){if(t.getAttribute("aria-hidden")==="true")return true;const r=getComputedStyle(t);return r.display==="none"||r.visibility==="hidden"}function x(t){const r=t;return typeof r.$$click==="function"||typeof r.onclick==="function"||t.tabIndex>=0&&t.hasAttribute("tabindex")}const O=new Set(["B","STRONG","EM","I","U","S","SPAN","SMALL","MARK","CODE","SUB","SUP","ABBR","CITE","Q","TIME","BR"]);function E(t){return Array.from(t.childNodes).some(r=>r.nodeType===3&&(r.textContent??"").trim()!=="")}function S(t){return O.has(t.tagName.toUpperCase())&&!t.hasAttribute("data-testid")&&!t.hasAttribute("aria-label")&&!t.hasAttribute("role")&&!x(t)&&!t.querySelector(`${p}, [role], [data-testid], [aria-label]`)}function R(t){let r="";const n=E(t);const e=o=>{if(o.nodeType===3)r+=o.textContent??"";else if(n&&o.nodeType===1){const i=o;if(i.tagName==="BR")r+=" ";else if(S(i)&&!g(i))i.childNodes.forEach(e)}};t.childNodes.forEach(e);r=r.replace(/\s+/g," ").trim();return r||void 0}function C(t,r){if(!t)return void 0;return r||t.length<=h?t:`${t.slice(0,h)}\u2026`}function P(t,r){return C((t.innerText??t.textContent??"").replace(/\s+/g," ").trim(),r)}const c="input, textarea, select";const p=`${c}, button, a[href]`;function b(t){let r="";const n=e=>{if(e.nodeType===3)r+=e.textContent??"";else if(e.nodeType===1&&!e.matches(c))e.childNodes.forEach(n)};n(t);return r.replace(/\s+/g," ").trim()}function N(t){let r=t;for(let n=0;n<3;n++){const e=r.previousElementSibling;if(e){const i=b(e);return i&&i.length<=h&&!e.matches(p)&&!e.querySelector(p)?e:null}const o=r.parentElement;if(!o||o.querySelectorAll(c).length>1)return null;r=o}return null}function v(t){const r=(t.getAttribute("aria-labelledby")??"").split(/\s+/).map(o=>o&&document.getElementById(o)?b(document.getElementById(o)):"").filter(Boolean).join(" ");const n=Array.from(t.labels??[]).map(b).filter(Boolean).join(" ");const e=t.matches(c)?N(t):null;return r||t.getAttribute("aria-label")||n||t.getAttribute("title")||t.getAttribute("placeholder")||(e?b(e):"")}export function labeledField(t){const r=t.closest("label")?.control;if(r instanceof HTMLElement)return r;const n=t.closest("[id]")?.id;if(n){for(const e of Array.from(document.querySelectorAll("[aria-labelledby]"))){if(e.matches(`${c}, [role=textbox]`)&&e.getAttribute("aria-labelledby").split(/\s+/).includes(n))return e}}for(let e=t,o=0;e&&o<3;e=e.parentElement,o++){const i=e.nextElementSibling;const s=i?.matches(c)?i:i?.querySelector(c);if(s instanceof HTMLElement&&N(s)===e)return s}return null}export function collectDOMElements(t={}){if(typeof document==="undefined"||!document.body)return[];const r=[];const n=(e,o,i)=>{if(m.has(e.tagName.toUpperCase())||B(e)||g(e))return;const s=i||e.hasAttribute("data-buoy-root")||e.hasAttribute("data-buoy-portal-host");const a=e.tagName.toLowerCase();const d=e.getAttribute("role")??void 0;const u=a==="button"||a==="a"&&e.hasAttribute("href")||a==="input"||a==="textarea"||a==="select"||d!==void 0&&w.has(d)||x(e);const y=e.getAttribute("data-testid")??void 0;const A=u?C(v(e),!!t.fullText):e.getAttribute("aria-label")??void 0;const T=u?P(e,!!t.fullText):o?void 0:R(e);if(u||y||A||T){const l={"data-testid":y,"aria-label":A,role:d,id:e.id||void 0};if(u&&a!=="input"&&a!=="textarea"&&a!=="select")l.onClick=()=>e.click();const f=k(e,l);if(d==="switch"||d==="checkbox"){const L=e.getAttribute("aria-checked")==="true";f.value=L;f.onValueChange=M=>{if(Boolean(M)!==(e.getAttribute("aria-checked")==="true"))e.click()};delete f.onPress}if(e.disabled)delete f.onPress;r.push({element:e,props:f,text:T,buoy:s})}const I=!u&&!o&&E(e);for(const l of Array.from(e.children)){if(I&&S(l))continue;if(l instanceof HTMLElement)n(l,o||u,s)}};n(document.body,false,false);return r}export function domElementName(t){const r=globalThis[Symbol.for("buoy.dom.componentName")];try{const n=r?.(t);if(n)return n}catch{}return t.tagName.toLowerCase()}export function watchDOMChanges(){if(typeof MutationObserver==="undefined"||typeof document==="undefined")return()=>0;let t=0;const r=new MutationObserver(()=>{t+=1});r.observe(document.body,{subtree:true,childList:true,characterData:true,attributes:true});return()=>{r.disconnect();return t}}
|