@buoy-gg/highlight-updates 2.0.8 → 2.0.9
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.
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.HighlightUpdatesModal=HighlightUpdatesModal,exports.default=void 0;var _react=_interopRequireWildcard(require("react")),_reactNative=require("react-native"),_sharedUi=require("@buoy-gg/shared-ui"),_HighlightUpdatesController=_interopRequireDefault(require("../utils/HighlightUpdatesController")),_RenderTracker=require("../utils/RenderTracker"),_RenderCauseBadge=require("./RenderCauseBadge"),_RenderDetailView=require("./RenderDetailView"),_HighlightFilterView=require("./HighlightFilterView"),_IsolatedRenderList=require("./IsolatedRenderList"),_ModalHeaderContent=require("./ModalHeaderContent"),_RenderHistoryViewer=require("./RenderHistoryViewer"),_jsxRuntime=require("react/jsx-runtime");function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}function _interopRequireWildcard(e,t){if("function"==typeof WeakMap)var r=new WeakMap,a=new WeakMap;return(_interopRequireWildcard=function(e,t){if(!t&&e&&e.__esModule)return e;var n,s,i={__proto__:null,default:e};if(null===e||"object"!=typeof e&&"function"!=typeof e)return i;if(n=t?a:r){if(n.has(e))return n.get(e);n.set(e,i)}for(const t in e)"default"!==t&&{}.hasOwnProperty.call(e,t)&&((s=(n=Object.defineProperty)&&Object.getOwnPropertyDescriptor(e,t))&&(s.get||s.set)?n(i,t,s):i[t]=e[t]);return i})(e,t)}let _useIsPro=null,_licenseLoadAttempted=!1;function loadLicenseModule(){if(!_licenseLoadAttempted){_licenseLoadAttempted=!0;try{const e=require("@buoy-gg/license");e&&(_useIsPro=e.useIsPro??null)}catch{}}}function getUseIsPro(){return loadLicenseModule(),_useIsPro??(()=>!1)}const DisabledBanner=_react.default.memo(function(){return(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.disabledBanner,children:[(0,_jsxRuntime.jsx)(_sharedUi.Power,{size:14,color:_sharedUi.buoyColors.warning}),(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.disabledText,children:"Render tracking is disabled"})]})});function formatRenderDataForClipboard(){const e=_RenderTracker.RenderTracker.getRenders(),t=_RenderTracker.RenderTracker.getStats(),r=_RenderTracker.RenderTracker.getSettings(),a=(new Date).toISOString(),n=[];n.push("=".repeat(60)),n.push("RENDER TRACKING DATA EXPORT"),n.push("=".repeat(60)),n.push(`Timestamp: ${a}`),n.push(`Total Components: ${t.totalComponents}`),n.push(`Total Renders: ${t.totalRenders}`),n.push(""),n.push("Settings:"),n.push(` - Show Render Count: ${r.showRenderCount}`),n.push(` - Track Render Causes: ${r.trackRenderCauses}`),n.push(` - Batch Size: ${r.batchSize}`),n.push("");const s=[...e].sort((e,t)=>t.renderCount-e.renderCount);n.push("-".repeat(60)),n.push("COMPONENTS BY RENDER COUNT (descending)"),n.push("-".repeat(60)),n.push(""),s.forEach((e,t)=>{const r=e.lastRenderCause?.type,a=e.lastRenderCause?.componentCause,s=e.lastRenderCause&&r?`${_RenderCauseBadge.CAUSE_CONFIG[r].label}${e.lastRenderCause.changedKeys?` [${e.lastRenderCause.changedKeys.join(", ")}]`:""}${e.lastRenderCause.hookIndices?` [Hook ${e.lastRenderCause.hookIndices.join(", ")}]`:""}`:"N/A",i=a?_RenderCauseBadge.COMPONENT_CAUSE_CONFIG[a].label.toUpperCase():"N/A",o=e.lastRenderCause?.componentName||e.componentName;n.push(`${t+1}. ${e.displayName} (${e.viewType}) - ${e.renderCount} renders`),a&&r?n.push(` Why: ${o||"Component"} (${i}) → Native (${s})`):n.push(` Last Cause: ${s}`),e.testID&&n.push(` testID: ${e.testID}`),e.nativeID&&n.push(` nativeID: ${e.nativeID}`),o&&n.push(` component: ${o}`),e.accessibilityLabel&&n.push(` accessibilityLabel: ${e.accessibilityLabel}`),n.push(` nativeTag: ${e.nativeTag}`);const l=e.lastRenderTime-e.firstRenderTime,c=l>0?(e.renderCount/(l/1e3)).toFixed(2):e.renderCount;n.push(` Renders/sec: ${c}`),n.push("")}),n.push("-".repeat(60)),n.push("BY VIEW TYPE"),n.push("-".repeat(60));const i=new Map;e.forEach(e=>{const t=i.get(e.viewType)||{count:0,renders:0};t.count++,t.renders+=e.renderCount,i.set(e.viewType,t)}),[...i.entries()].sort((e,t)=>t[1].renders-e[1].renders).forEach(([e,t])=>{n.push(`${e}: ${t.count} components, ${t.renders} total renders`)}),n.push(""),n.push("-".repeat(60)),n.push("BY COMPONENT NAME"),n.push("-".repeat(60));const o=new Map;if(e.forEach(e=>{const t=e.componentName||"(unknown)",r=o.get(t)||{count:0,renders:0};r.count++,r.renders+=e.renderCount,o.set(t,r)}),[...o.entries()].sort((e,t)=>t[1].renders-e[1].renders).forEach(([e,t])=>{n.push(`${e}: ${t.count} instances, ${t.renders} total renders`)}),n.push(""),r.trackRenderCauses){n.push("-".repeat(60)),n.push("BY NATIVE CAUSE (what changed on the native view)"),n.push("-".repeat(60));const t=new Map;e.forEach(e=>{const r=e.lastRenderCause?.type||"unknown";t.set(r,(t.get(r)||0)+1)}),[...t.entries()].sort((e,t)=>t[1]-e[1]).forEach(([e,t])=>{const r=_RenderCauseBadge.CAUSE_CONFIG[e];n.push(`${r?.label||e}: ${t} components`)}),n.push(""),n.push("-".repeat(60)),n.push("BY COMPONENT CAUSE (why the React component re-rendered)"),n.push("-".repeat(60));const r=new Map;e.forEach(e=>{const t=e.lastRenderCause?.componentCause||"unknown";r.set(t,(r.get(t)||0)+1)}),[...r.entries()].sort((e,t)=>t[1]-e[1]).forEach(([e,t])=>{const r=_RenderCauseBadge.COMPONENT_CAUSE_CONFIG[e];n.push(`${r?.label?.toUpperCase()||e}: ${t} components`)}),n.push("");const a=e.filter(e=>"parent"===e.lastRenderCause?.componentCause);a.length>0&&(n.push("-".repeat(60)),n.push("💡 OPTIMIZATION OPPORTUNITIES"),n.push("-".repeat(60)),n.push(`${a.length} component(s) re-rendered due to parent:`),a.forEach(e=>{const t=e.lastRenderCause?.componentName||e.componentName||e.displayName;n.push(` - ${t}: Consider wrapping with React.memo()`)}),n.push(""))}return n.push("=".repeat(60)),n.push("END OF EXPORT"),n.push("=".repeat(60)),n.join("\n")}function HighlightUpdatesModal({visible:e,onClose:t,onBack:r,onMinimize:a,enableSharedModalDimensions:n=!1,initialNativeTag:s,onInitialNativeTagHandled:i}){const o=getUseIsPro()(),[l,c]=(0,_react.useState)(!1),[d,u]=(0,_react.useState)(()=>_HighlightUpdatesController.default.getFrozen()),[h,g]=(0,_react.useState)(()=>_RenderTracker.RenderTracker.getStats().totalComponents>0),[p,_]=(0,_react.useState)(null),[C,R]=(0,_react.useState)(0),[f,T]=(0,_react.useState)(!1),[m,y]=(0,_react.useState)("filters"),[k,S]=(0,_react.useState)("details"),[b,x]=(0,_react.useState)(0),[w,v]=(0,_react.useState)(""),[I,U]=(0,_react.useState)(!1),N=(0,_react.useRef)(null),E=(0,_react.useRef)([]),P=(0,_react.useRef)(_RenderTracker.RenderTracker.getFilters()),[H,j]=(0,_react.useState)(()=>{const e=_RenderTracker.RenderTracker.getFilters();return e.includePatterns.length+e.excludePatterns.length}),[D,F]=(0,_react.useState)(()=>_RenderTracker.RenderTracker.getFilters()),[$,M]=(0,_react.useState)(()=>_RenderTracker.RenderTracker.getSettings()),O=(0,_react.useRef)(!1),A=(0,_react.useRef)(!1),V=(0,_react.useRef)(!1);(0,_react.useEffect)(()=>{e&&!O.current&&(async()=>{try{const e=await(0,_sharedUi.safeGetItem)(_sharedUi.devToolsStorageKeys.highlightUpdates.isTracking());null!==e&&"true"===e&&!_HighlightUpdatesController.default.isEnabled()&&(_HighlightUpdatesController.default.isInitialized()||_HighlightUpdatesController.default.initialize(),_HighlightUpdatesController.default.enable()),O.current=!0}catch(e){}})()},[e]),(0,_react.useEffect)(()=>{O.current&&(async()=>{try{await(0,_sharedUi.safeSetItem)(_sharedUi.devToolsStorageKeys.highlightUpdates.isTracking(),l.toString())}catch(e){}})()},[l]),(0,_react.useEffect)(()=>{e&&!A.current&&(async()=>{try{const e=await(0,_sharedUi.safeGetItem)(_sharedUi.devToolsStorageKeys.highlightUpdates.filters());if(e){const t=JSON.parse(e),r={includeTestID:new Set(t.includeTestID||[]),includeNativeID:new Set(t.includeNativeID||[]),includeViewType:new Set(t.includeViewType||[]),includeComponent:new Set(t.includeComponent||[]),excludeTestID:new Set(t.excludeTestID||[]),excludeNativeID:new Set(t.excludeNativeID||[]),excludeViewType:new Set(t.excludeViewType||[]),excludeComponent:new Set(t.excludeComponent||[]),includePatterns:t.includePatterns||[],excludePatterns:t.excludePatterns||[]};_RenderTracker.RenderTracker.setFilters(r);const a=_RenderTracker.RenderTracker.getFilters();P.current=a,F(a),j(a.includePatterns.length+a.excludePatterns.length)}A.current=!0}catch(e){}})()},[e]),(0,_react.useEffect)(()=>{A.current&&(async()=>{try{const e={includeTestID:Array.from(D.includeTestID),includeNativeID:Array.from(D.includeNativeID),includeViewType:Array.from(D.includeViewType),includeComponent:Array.from(D.includeComponent),excludeTestID:Array.from(D.excludeTestID),excludeNativeID:Array.from(D.excludeNativeID),excludeViewType:Array.from(D.excludeViewType),excludeComponent:Array.from(D.excludeComponent),includePatterns:D.includePatterns,excludePatterns:D.excludePatterns};await(0,_sharedUi.safeSetItem)(_sharedUi.devToolsStorageKeys.highlightUpdates.filters(),JSON.stringify(e))}catch(e){}})()},[D]),(0,_react.useEffect)(()=>{e&&!V.current&&(async()=>{try{const e=await(0,_sharedUi.safeGetItem)(_sharedUi.devToolsStorageKeys.highlightUpdates.settings());if(e){const t=JSON.parse(e),{performanceLogging:r,...a}=t;_RenderTracker.RenderTracker.setSettings(a),M(_RenderTracker.RenderTracker.getSettings())}V.current=!0}catch(e){V.current=!0}})()},[e]),(0,_react.useEffect)(()=>{V.current&&(async()=>{try{const{performanceLogging:e,...t}=$;await(0,_sharedUi.safeSetItem)(_sharedUi.devToolsStorageKeys.highlightUpdates.settings(),JSON.stringify(t))}catch(e){}})()},[$]),(0,_react.useEffect)(()=>{const e=_RenderTracker.RenderTracker.subscribeToState(e=>{c(e.isTracking)});return()=>{e()}},[]),(0,_react.useEffect)(()=>{const e=_HighlightUpdatesController.default.subscribeToFreeze(e=>{u(e)});return()=>{e()}},[]),(0,_react.useEffect)(()=>{I&&requestAnimationFrame(()=>{N.current?.focus()})},[I]),(0,_react.useEffect)(()=>{e||_HighlightUpdatesController.default.setSpotlight(null)},[e]),(0,_react.useEffect)(()=>{if(e&&null!=s){const e=_RenderTracker.RenderTracker.getRender(String(s));e&&(_(e),R(0),T(!1),_HighlightUpdatesController.default.setSpotlight(e.nativeTag)),i?.()}},[e,s,i]);const B=(0,_react.useCallback)(()=>{_HighlightUpdatesController.default.isInitialized()||_HighlightUpdatesController.default.initialize(),_HighlightUpdatesController.default.toggle()},[]),q=(0,_react.useCallback)(()=>{_HighlightUpdatesController.default.toggleFreeze()},[]),L=(0,_react.useCallback)(()=>{_HighlightUpdatesController.default.clearRenderCounts(),g(!1)},[]),z=(0,_react.useMemo)(()=>h?formatRenderDataForClipboard():"",[h]),K=(0,_react.useCallback)(e=>{v(e)},[]),G=(0,_react.useCallback)((e,t,r)=>{_(e),R(t),S("details"),x(0),E.current=r,_HighlightUpdatesController.default.setSpotlight(e.nativeTag)},[]),W=(0,_react.useCallback)(e=>{E.current=e},[]),Y=(0,_react.useCallback)(()=>{_(null),R(0),_HighlightUpdatesController.default.setSpotlight(null)},[]),J=(0,_react.useCallback)(()=>{const e=E.current;if(C>0){const t=C-1,r=e[t];r&&(_(r),R(t),_HighlightUpdatesController.default.setSpotlight(r.nativeTag))}},[C]),X=(0,_react.useCallback)(()=>{const e=E.current;if(C<e.length-1){const t=C+1,r=e[t];r&&(_(r),R(t),_HighlightUpdatesController.default.setSpotlight(r.nativeTag))}},[C]),Z=(0,_react.useCallback)(()=>{T(!1)},[]),Q=(0,_react.useCallback)(()=>{T(!0)},[]),ee=(0,_react.useCallback)(()=>{U(!0)},[]),te=(0,_react.useCallback)(()=>{U(!1)},[]),re=(0,_react.useCallback)(e=>{_RenderTracker.RenderTracker.setFilters(e);const t=_RenderTracker.RenderTracker.getFilters();P.current=t,F(t),j(t.includePatterns.length+t.excludePatterns.length)},[]),ae=(0,_react.useCallback)((e,t)=>{const r=_RenderTracker.RenderTracker.getFilters(),a={};"include"===t?r.includePatterns.some(t=>t.type===e.type&&t.value===e.value)||(a.includePatterns=[...r.includePatterns,e]):r.excludePatterns.some(t=>t.type===e.type&&t.value===e.value)||(a.excludePatterns=[...r.excludePatterns,e]),Object.keys(a).length>0&&(re(a),_(null),R(0),_HighlightUpdatesController.default.setSpotlight(null))},[re]),ne=(0,_react.useCallback)(e=>{_RenderTracker.RenderTracker.setSettings(e),M(_RenderTracker.RenderTracker.getSettings())},[]),se=(0,_react.useCallback)(e=>{g(e.totalComponents>0)},[]),ie=(0,_react.useCallback)(()=>f?(0,_jsxRuntime.jsx)(_ModalHeaderContent.FilterViewHeader,{onBack:Z,activeTab:m,onTabChange:y,activeFilterCount:H}):p?(0,_jsxRuntime.jsx)(_ModalHeaderContent.DetailViewHeader,{onBack:Y,activeTab:k,onTabChange:S,hasHistory:(p.renderHistory?.length??0)>0}):(0,_jsxRuntime.jsx)(_ModalHeaderContent.MainListHeader,{onBack:r,isSearchActive:I,searchText:w,onSearchChange:K,onSearchToggle:ee,onSearchClose:te,onFilterToggle:Q,onToggleTracking:B,onToggleFreeze:q,onClear:L,copyData:z,isTracking:l,isFrozen:d,activeFilterCount:H,hasRenders:h,searchInputRef:N}),[f,p,r,I,w,l,d,H,h,m,k,Z,Y,K,ee,te,Q,B,q,L,z]),oe=n?_sharedUi.devToolsStorageKeys.modal.root():_sharedUi.devToolsStorageKeys.highlightUpdates.modal();if(!e)return null;const le=E.current.length,ce=p?"details"===k?(0,_jsxRuntime.jsx)(_sharedUi.EventStepperFooter,{currentIndex:C,totalItems:le,onPrevious:J,onNext:X,itemLabel:"Component",subtitle:p.componentName||p.displayName||p.viewType}):(0,_jsxRuntime.jsx)(_RenderHistoryViewer.RenderHistoryFooter,{render:p,selectedEventIndex:b,onEventIndexChange:x,isPro:o}):null;return(0,_jsxRuntime.jsx)(_sharedUi.JsModal,{visible:e,onClose:t,onMinimize:a,persistenceKey:oe,header:{showToggleButton:!0,customContent:ie()},enablePersistence:!0,initialMode:"bottomSheet",enableGlitchEffects:!0,styles:{},footer:ce,footerHeight:p&&("details"===k||(p.renderHistory?.length??0)>1)?68:0,children:(0,_jsxRuntime.jsx)(_reactNative.View,{nativeID:"__rn_buoy__highlight-modal",style:styles.container,children:p?"details"===k?(0,_jsxRuntime.jsx)(_RenderDetailView.RenderDetailView,{render:p,disableInternalFooter:!0,onAddFilter:ae,isPro:o}):(0,_jsxRuntime.jsx)(_RenderHistoryViewer.RenderHistoryViewer,{render:p,disableInternalFooter:!0,selectedEventIndex:b,onEventIndexChange:x,isPro:o}):f?(0,_jsxRuntime.jsx)(_HighlightFilterView.HighlightFilterView,{filters:D,onFilterChange:re,settings:$,onSettingsChange:ne,availableProps:_RenderTracker.RenderTracker.getAvailableProps(),activeTab:m}):(0,_jsxRuntime.jsxs)(_jsxRuntime.Fragment,{children:[!l&&(0,_jsxRuntime.jsx)(DisabledBanner,{}),(0,_jsxRuntime.jsx)(_IsolatedRenderList.IsolatedRenderList,{searchText:w,filters:D,onSelectRender:G,onStatsChange:se,onRendersChange:W,isTracking:l,isPro:o})]})})})}const styles=_reactNative.StyleSheet.create({container:{flex:1,backgroundColor:_sharedUi.buoyColors.base},disabledBanner:{flexDirection:"row",alignItems:"center",gap:8,padding:10,marginHorizontal:12,marginTop:8,backgroundColor:_sharedUi.buoyColors.warning+"15",borderRadius:8,borderWidth:1,borderColor:_sharedUi.buoyColors.warning+"20"},disabledText:{color:_sharedUi.buoyColors.warning,fontSize:11,flex:1}});var _default=exports.default=HighlightUpdatesModal;
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.HighlightUpdatesModal=HighlightUpdatesModal,exports.default=void 0;var _react=_interopRequireWildcard(require("react")),_reactNative=require("react-native"),_sharedUi=require("@buoy-gg/shared-ui"),_license=require("@buoy-gg/license"),_HighlightUpdatesController=_interopRequireDefault(require("../utils/HighlightUpdatesController")),_RenderTracker=require("../utils/RenderTracker"),_RenderCauseBadge=require("./RenderCauseBadge"),_RenderDetailView=require("./RenderDetailView"),_HighlightFilterView=require("./HighlightFilterView"),_IsolatedRenderList=require("./IsolatedRenderList"),_ModalHeaderContent=require("./ModalHeaderContent"),_RenderHistoryViewer=require("./RenderHistoryViewer"),_jsxRuntime=require("react/jsx-runtime");function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}function _interopRequireWildcard(e,t){if("function"==typeof WeakMap)var r=new WeakMap,a=new WeakMap;return(_interopRequireWildcard=function(e,t){if(!t&&e&&e.__esModule)return e;var n,s,i={__proto__:null,default:e};if(null===e||"object"!=typeof e&&"function"!=typeof e)return i;if(n=t?a:r){if(n.has(e))return n.get(e);n.set(e,i)}for(const t in e)"default"!==t&&{}.hasOwnProperty.call(e,t)&&((s=(n=Object.defineProperty)&&Object.getOwnPropertyDescriptor(e,t))&&(s.get||s.set)?n(i,t,s):i[t]=e[t]);return i})(e,t)}const DisabledBanner=_react.default.memo(function(){return(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.disabledBanner,children:[(0,_jsxRuntime.jsx)(_sharedUi.Power,{size:14,color:_sharedUi.buoyColors.warning}),(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.disabledText,children:"Render tracking is disabled"})]})});function formatRenderDataForClipboard(){const e=_RenderTracker.RenderTracker.getRenders(),t=_RenderTracker.RenderTracker.getStats(),r=_RenderTracker.RenderTracker.getSettings(),a=(new Date).toISOString(),n=[];n.push("=".repeat(60)),n.push("RENDER TRACKING DATA EXPORT"),n.push("=".repeat(60)),n.push(`Timestamp: ${a}`),n.push(`Total Components: ${t.totalComponents}`),n.push(`Total Renders: ${t.totalRenders}`),n.push(""),n.push("Settings:"),n.push(` - Show Render Count: ${r.showRenderCount}`),n.push(` - Track Render Causes: ${r.trackRenderCauses}`),n.push(` - Batch Size: ${r.batchSize}`),n.push("");const s=[...e].sort((e,t)=>t.renderCount-e.renderCount);n.push("-".repeat(60)),n.push("COMPONENTS BY RENDER COUNT (descending)"),n.push("-".repeat(60)),n.push(""),s.forEach((e,t)=>{const r=e.lastRenderCause?.type,a=e.lastRenderCause?.componentCause,s=e.lastRenderCause&&r?`${_RenderCauseBadge.CAUSE_CONFIG[r].label}${e.lastRenderCause.changedKeys?` [${e.lastRenderCause.changedKeys.join(", ")}]`:""}${e.lastRenderCause.hookIndices?` [Hook ${e.lastRenderCause.hookIndices.join(", ")}]`:""}`:"N/A",i=a?_RenderCauseBadge.COMPONENT_CAUSE_CONFIG[a].label.toUpperCase():"N/A",o=e.lastRenderCause?.componentName||e.componentName;n.push(`${t+1}. ${e.displayName} (${e.viewType}) - ${e.renderCount} renders`),a&&r?n.push(` Why: ${o||"Component"} (${i}) → Native (${s})`):n.push(` Last Cause: ${s}`),e.testID&&n.push(` testID: ${e.testID}`),e.nativeID&&n.push(` nativeID: ${e.nativeID}`),o&&n.push(` component: ${o}`),e.accessibilityLabel&&n.push(` accessibilityLabel: ${e.accessibilityLabel}`),n.push(` nativeTag: ${e.nativeTag}`);const l=e.lastRenderTime-e.firstRenderTime,c=l>0?(e.renderCount/(l/1e3)).toFixed(2):e.renderCount;n.push(` Renders/sec: ${c}`),n.push("")}),n.push("-".repeat(60)),n.push("BY VIEW TYPE"),n.push("-".repeat(60));const i=new Map;e.forEach(e=>{const t=i.get(e.viewType)||{count:0,renders:0};t.count++,t.renders+=e.renderCount,i.set(e.viewType,t)}),[...i.entries()].sort((e,t)=>t[1].renders-e[1].renders).forEach(([e,t])=>{n.push(`${e}: ${t.count} components, ${t.renders} total renders`)}),n.push(""),n.push("-".repeat(60)),n.push("BY COMPONENT NAME"),n.push("-".repeat(60));const o=new Map;if(e.forEach(e=>{const t=e.componentName||"(unknown)",r=o.get(t)||{count:0,renders:0};r.count++,r.renders+=e.renderCount,o.set(t,r)}),[...o.entries()].sort((e,t)=>t[1].renders-e[1].renders).forEach(([e,t])=>{n.push(`${e}: ${t.count} instances, ${t.renders} total renders`)}),n.push(""),r.trackRenderCauses){n.push("-".repeat(60)),n.push("BY NATIVE CAUSE (what changed on the native view)"),n.push("-".repeat(60));const t=new Map;e.forEach(e=>{const r=e.lastRenderCause?.type||"unknown";t.set(r,(t.get(r)||0)+1)}),[...t.entries()].sort((e,t)=>t[1]-e[1]).forEach(([e,t])=>{const r=_RenderCauseBadge.CAUSE_CONFIG[e];n.push(`${r?.label||e}: ${t} components`)}),n.push(""),n.push("-".repeat(60)),n.push("BY COMPONENT CAUSE (why the React component re-rendered)"),n.push("-".repeat(60));const r=new Map;e.forEach(e=>{const t=e.lastRenderCause?.componentCause||"unknown";r.set(t,(r.get(t)||0)+1)}),[...r.entries()].sort((e,t)=>t[1]-e[1]).forEach(([e,t])=>{const r=_RenderCauseBadge.COMPONENT_CAUSE_CONFIG[e];n.push(`${r?.label?.toUpperCase()||e}: ${t} components`)}),n.push("");const a=e.filter(e=>"parent"===e.lastRenderCause?.componentCause);a.length>0&&(n.push("-".repeat(60)),n.push("💡 OPTIMIZATION OPPORTUNITIES"),n.push("-".repeat(60)),n.push(`${a.length} component(s) re-rendered due to parent:`),a.forEach(e=>{const t=e.lastRenderCause?.componentName||e.componentName||e.displayName;n.push(` - ${t}: Consider wrapping with React.memo()`)}),n.push(""))}return n.push("=".repeat(60)),n.push("END OF EXPORT"),n.push("=".repeat(60)),n.join("\n")}function HighlightUpdatesModal({visible:e,onClose:t,onBack:r,onMinimize:a,enableSharedModalDimensions:n=!1,initialNativeTag:s,onInitialNativeTagHandled:i}){const o=(0,_license.useIsPro)(),[l,c]=(0,_react.useState)(!1),[d,u]=(0,_react.useState)(()=>_HighlightUpdatesController.default.getFrozen()),[h,g]=(0,_react.useState)(()=>_RenderTracker.RenderTracker.getStats().totalComponents>0),[p,_]=(0,_react.useState)(null),[C,R]=(0,_react.useState)(0),[f,T]=(0,_react.useState)(!1),[m,y]=(0,_react.useState)("filters"),[k,S]=(0,_react.useState)("details"),[b,x]=(0,_react.useState)(0),[w,v]=(0,_react.useState)(""),[U,I]=(0,_react.useState)(!1),N=(0,_react.useRef)(null),E=(0,_react.useRef)([]),H=(0,_react.useRef)(_RenderTracker.RenderTracker.getFilters()),[P,j]=(0,_react.useState)(()=>{const e=_RenderTracker.RenderTracker.getFilters();return e.includePatterns.length+e.excludePatterns.length}),[D,F]=(0,_react.useState)(()=>_RenderTracker.RenderTracker.getFilters()),[$,M]=(0,_react.useState)(()=>_RenderTracker.RenderTracker.getSettings()),O=(0,_react.useRef)(!1),V=(0,_react.useRef)(!1),A=(0,_react.useRef)(!1);(0,_react.useEffect)(()=>{e&&!O.current&&(async()=>{try{const e=await(0,_sharedUi.safeGetItem)(_sharedUi.devToolsStorageKeys.highlightUpdates.isTracking());null!==e&&"true"===e&&!_HighlightUpdatesController.default.isEnabled()&&(_HighlightUpdatesController.default.isInitialized()||_HighlightUpdatesController.default.initialize(),_HighlightUpdatesController.default.enable()),O.current=!0}catch(e){}})()},[e]),(0,_react.useEffect)(()=>{O.current&&(async()=>{try{await(0,_sharedUi.safeSetItem)(_sharedUi.devToolsStorageKeys.highlightUpdates.isTracking(),l.toString())}catch(e){}})()},[l]),(0,_react.useEffect)(()=>{e&&!V.current&&(async()=>{try{const e=await(0,_sharedUi.safeGetItem)(_sharedUi.devToolsStorageKeys.highlightUpdates.filters());if(e){const t=JSON.parse(e),r={includeTestID:new Set(t.includeTestID||[]),includeNativeID:new Set(t.includeNativeID||[]),includeViewType:new Set(t.includeViewType||[]),includeComponent:new Set(t.includeComponent||[]),excludeTestID:new Set(t.excludeTestID||[]),excludeNativeID:new Set(t.excludeNativeID||[]),excludeViewType:new Set(t.excludeViewType||[]),excludeComponent:new Set(t.excludeComponent||[]),includePatterns:t.includePatterns||[],excludePatterns:t.excludePatterns||[]};_RenderTracker.RenderTracker.setFilters(r);const a=_RenderTracker.RenderTracker.getFilters();H.current=a,F(a),j(a.includePatterns.length+a.excludePatterns.length)}V.current=!0}catch(e){}})()},[e]),(0,_react.useEffect)(()=>{V.current&&(async()=>{try{const e={includeTestID:Array.from(D.includeTestID),includeNativeID:Array.from(D.includeNativeID),includeViewType:Array.from(D.includeViewType),includeComponent:Array.from(D.includeComponent),excludeTestID:Array.from(D.excludeTestID),excludeNativeID:Array.from(D.excludeNativeID),excludeViewType:Array.from(D.excludeViewType),excludeComponent:Array.from(D.excludeComponent),includePatterns:D.includePatterns,excludePatterns:D.excludePatterns};await(0,_sharedUi.safeSetItem)(_sharedUi.devToolsStorageKeys.highlightUpdates.filters(),JSON.stringify(e))}catch(e){}})()},[D]),(0,_react.useEffect)(()=>{e&&!A.current&&(async()=>{try{const e=await(0,_sharedUi.safeGetItem)(_sharedUi.devToolsStorageKeys.highlightUpdates.settings());if(e){const t=JSON.parse(e),{performanceLogging:r,...a}=t;_RenderTracker.RenderTracker.setSettings(a),M(_RenderTracker.RenderTracker.getSettings())}A.current=!0}catch(e){A.current=!0}})()},[e]),(0,_react.useEffect)(()=>{A.current&&(async()=>{try{const{performanceLogging:e,...t}=$;await(0,_sharedUi.safeSetItem)(_sharedUi.devToolsStorageKeys.highlightUpdates.settings(),JSON.stringify(t))}catch(e){}})()},[$]),(0,_react.useEffect)(()=>{const e=_RenderTracker.RenderTracker.subscribeToState(e=>{c(e.isTracking)});return()=>{e()}},[]),(0,_react.useEffect)(()=>{const e=_HighlightUpdatesController.default.subscribeToFreeze(e=>{u(e)});return()=>{e()}},[]),(0,_react.useEffect)(()=>{U&&requestAnimationFrame(()=>{N.current?.focus()})},[U]),(0,_react.useEffect)(()=>{e||_HighlightUpdatesController.default.setSpotlight(null)},[e]),(0,_react.useEffect)(()=>{if(e&&null!=s){const e=_RenderTracker.RenderTracker.getRender(String(s));e&&(_(e),R(0),T(!1),_HighlightUpdatesController.default.setSpotlight(e.nativeTag)),i?.()}},[e,s,i]);const B=(0,_react.useCallback)(()=>{_HighlightUpdatesController.default.isInitialized()||_HighlightUpdatesController.default.initialize(),_HighlightUpdatesController.default.toggle()},[]),q=(0,_react.useCallback)(()=>{_HighlightUpdatesController.default.toggleFreeze()},[]),z=(0,_react.useCallback)(()=>{_HighlightUpdatesController.default.clearRenderCounts(),g(!1)},[]),K=(0,_react.useMemo)(()=>h?formatRenderDataForClipboard():"",[h]),L=(0,_react.useCallback)(e=>{v(e)},[]),G=(0,_react.useCallback)((e,t,r)=>{_(e),R(t),S("details"),x(0),E.current=r,_HighlightUpdatesController.default.setSpotlight(e.nativeTag)},[]),W=(0,_react.useCallback)(e=>{E.current=e},[]),Y=(0,_react.useCallback)(()=>{_(null),R(0),_HighlightUpdatesController.default.setSpotlight(null)},[]),J=(0,_react.useCallback)(()=>{const e=E.current;if(C>0){const t=C-1,r=e[t];r&&(_(r),R(t),_HighlightUpdatesController.default.setSpotlight(r.nativeTag))}},[C]),X=(0,_react.useCallback)(()=>{const e=E.current;if(C<e.length-1){const t=C+1,r=e[t];r&&(_(r),R(t),_HighlightUpdatesController.default.setSpotlight(r.nativeTag))}},[C]),Z=(0,_react.useCallback)(()=>{T(!1)},[]),Q=(0,_react.useCallback)(()=>{T(!0)},[]),ee=(0,_react.useCallback)(()=>{I(!0)},[]),te=(0,_react.useCallback)(()=>{I(!1)},[]),re=(0,_react.useCallback)(e=>{_RenderTracker.RenderTracker.setFilters(e);const t=_RenderTracker.RenderTracker.getFilters();H.current=t,F(t),j(t.includePatterns.length+t.excludePatterns.length)},[]),ae=(0,_react.useCallback)((e,t)=>{const r=_RenderTracker.RenderTracker.getFilters(),a={};"include"===t?r.includePatterns.some(t=>t.type===e.type&&t.value===e.value)||(a.includePatterns=[...r.includePatterns,e]):r.excludePatterns.some(t=>t.type===e.type&&t.value===e.value)||(a.excludePatterns=[...r.excludePatterns,e]),Object.keys(a).length>0&&(re(a),_(null),R(0),_HighlightUpdatesController.default.setSpotlight(null))},[re]),ne=(0,_react.useCallback)(e=>{_RenderTracker.RenderTracker.setSettings(e),M(_RenderTracker.RenderTracker.getSettings())},[]),se=(0,_react.useCallback)(e=>{g(e.totalComponents>0)},[]),ie=(0,_react.useCallback)(()=>f?(0,_jsxRuntime.jsx)(_ModalHeaderContent.FilterViewHeader,{onBack:Z,activeTab:m,onTabChange:y,activeFilterCount:P}):p?(0,_jsxRuntime.jsx)(_ModalHeaderContent.DetailViewHeader,{onBack:Y,activeTab:k,onTabChange:S,hasHistory:(p.renderHistory?.length??0)>0}):(0,_jsxRuntime.jsx)(_ModalHeaderContent.MainListHeader,{onBack:r,isSearchActive:U,searchText:w,onSearchChange:L,onSearchToggle:ee,onSearchClose:te,onFilterToggle:Q,onToggleTracking:B,onToggleFreeze:q,onClear:z,copyData:K,isTracking:l,isFrozen:d,activeFilterCount:P,hasRenders:h,searchInputRef:N}),[f,p,r,U,w,l,d,P,h,m,k,Z,Y,L,ee,te,Q,B,q,z,K]),oe=n?_sharedUi.devToolsStorageKeys.modal.root():_sharedUi.devToolsStorageKeys.highlightUpdates.modal();if(!e)return null;const le=E.current.length,ce=p?"details"===k?(0,_jsxRuntime.jsx)(_sharedUi.EventStepperFooter,{currentIndex:C,totalItems:le,onPrevious:J,onNext:X,itemLabel:"Component",subtitle:p.componentName||p.displayName||p.viewType}):(0,_jsxRuntime.jsx)(_RenderHistoryViewer.RenderHistoryFooter,{render:p,selectedEventIndex:b,onEventIndexChange:x,isPro:o}):null;return(0,_jsxRuntime.jsx)(_sharedUi.JsModal,{visible:e,onClose:t,onMinimize:a,persistenceKey:oe,header:{showToggleButton:!0,customContent:ie()},enablePersistence:!0,initialMode:"bottomSheet",enableGlitchEffects:!0,styles:{},footer:ce,footerHeight:p&&("details"===k||(p.renderHistory?.length??0)>1)?68:0,children:(0,_jsxRuntime.jsx)(_reactNative.View,{nativeID:"__rn_buoy__highlight-modal",style:styles.container,children:p?"details"===k?(0,_jsxRuntime.jsx)(_RenderDetailView.RenderDetailView,{render:p,disableInternalFooter:!0,onAddFilter:ae,isPro:o}):(0,_jsxRuntime.jsx)(_RenderHistoryViewer.RenderHistoryViewer,{render:p,disableInternalFooter:!0,selectedEventIndex:b,onEventIndexChange:x,isPro:o}):f?(0,_jsxRuntime.jsx)(_HighlightFilterView.HighlightFilterView,{filters:D,onFilterChange:re,settings:$,onSettingsChange:ne,availableProps:_RenderTracker.RenderTracker.getAvailableProps(),activeTab:m}):(0,_jsxRuntime.jsxs)(_jsxRuntime.Fragment,{children:[!l&&(0,_jsxRuntime.jsx)(DisabledBanner,{}),(0,_jsxRuntime.jsx)(_IsolatedRenderList.IsolatedRenderList,{searchText:w,filters:D,onSelectRender:G,onStatsChange:se,onRendersChange:W,isTracking:l,isPro:o})]})})})}const styles=_reactNative.StyleSheet.create({container:{flex:1,backgroundColor:_sharedUi.buoyColors.base},disabledBanner:{flexDirection:"row",alignItems:"center",gap:8,padding:10,marginHorizontal:12,marginTop:8,backgroundColor:_sharedUi.buoyColors.warning+"15",borderRadius:8,borderWidth:1,borderColor:_sharedUi.buoyColors.warning+"20"},disabledText:{color:_sharedUi.buoyColors.warning,fontSize:11,flex:1}});var _default=exports.default=HighlightUpdatesModal;
|
package/lib/commonjs/preset.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.createHighlightUpdatesModalTool=createHighlightUpdatesModalTool,exports.createHighlightUpdatesTool=createHighlightUpdatesTool,exports.highlightUpdatesPreset=exports.highlightUpdatesModalPreset=void 0;var _react=_interopRequireWildcard(require("react")),_floatingToolsCore=require("@buoy-gg/floating-tools-core"),_HighlightUpdatesController=_interopRequireDefault(require("./highlight-updates/utils/HighlightUpdatesController")),_HighlightUpdatesModal=require("./highlight-updates/components/HighlightUpdatesModal"),_jsxRuntime=require("react/jsx-runtime");function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}function _interopRequireWildcard(e,t){if("function"==typeof WeakMap)var i=new WeakMap,o=new WeakMap;return(_interopRequireWildcard=function(e,t){if(!t&&e&&e.__esModule)return e;var l,a,n={__proto__:null,default:e};if(null===e||"object"!=typeof e&&"function"!=typeof e)return n;if(l=t?o:i){if(l.has(e))return l.get(e);l.set(e,n)}for(const t in e)"default"!==t&&{}.hasOwnProperty.call(e,t)&&((a=(l=Object.defineProperty)&&Object.getOwnPropertyDescriptor(e,t))&&(a.get||a.set)?l(n,t,a):n[t]=e[t]);return n})(e,t)}function HighlightIcon({size:e}){const[t,i]=(0,_react.useState)(()=>_HighlightUpdatesController.default.isEnabled());return(0,_react.useEffect)(()=>_HighlightUpdatesController.default.subscribe(e=>{i(e)}),[]),(0,_jsxRuntime.jsx)(_floatingToolsCore.
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.createHighlightUpdatesModalTool=createHighlightUpdatesModalTool,exports.createHighlightUpdatesTool=createHighlightUpdatesTool,exports.highlightUpdatesPreset=exports.highlightUpdatesModalPreset=void 0;var _react=_interopRequireWildcard(require("react")),_floatingToolsCore=require("@buoy-gg/floating-tools-core"),_HighlightUpdatesController=_interopRequireDefault(require("./highlight-updates/utils/HighlightUpdatesController")),_HighlightUpdatesModal=require("./highlight-updates/components/HighlightUpdatesModal"),_jsxRuntime=require("react/jsx-runtime");function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}function _interopRequireWildcard(e,t){if("function"==typeof WeakMap)var i=new WeakMap,o=new WeakMap;return(_interopRequireWildcard=function(e,t){if(!t&&e&&e.__esModule)return e;var l,a,n={__proto__:null,default:e};if(null===e||"object"!=typeof e&&"function"!=typeof e)return n;if(l=t?o:i){if(l.has(e))return l.get(e);l.set(e,n)}for(const t in e)"default"!==t&&{}.hasOwnProperty.call(e,t)&&((a=(l=Object.defineProperty)&&Object.getOwnPropertyDescriptor(e,t))&&(a.get||a.set)?l(n,t,a):n[t]=e[t]);return n})(e,t)}function HighlightIcon({size:e}){const[t,i]=(0,_react.useState)(()=>_HighlightUpdatesController.default.isEnabled());return(0,_react.useEffect)(()=>_HighlightUpdatesController.default.subscribe(e=>{i(e)}),[]),(0,_jsxRuntime.jsx)(_floatingToolsCore.HighlightIcon,{size:e,color:t?"#10b981":"#6b7280"})}function EmptyComponent(){return null}function HighlightUpdatesModalWithBadgeNavigation(e){const[t,i]=(0,_react.useState)(null);(0,_react.useEffect)(()=>(e.visible&&_HighlightUpdatesController.default.setBadgePressCallback(e=>{i(e)}),()=>{e.visible||_HighlightUpdatesController.default.setBadgePressCallback(null)}),[e.visible]);const o=(0,_react.useCallback)(()=>{i(null)},[]);return(0,_jsxRuntime.jsx)(_HighlightUpdatesModal.HighlightUpdatesModal,{...e,initialNativeTag:t,onInitialNativeTagHandled:o})}const highlightUpdatesPreset=exports.highlightUpdatesPreset={id:"highlight-updates",name:"TOGGLE HIGHLIGHT",description:"Toggle component render highlights",slot:"row",icon:HighlightIcon,component:EmptyComponent,props:{},launchMode:"toggle-only",onPress:()=>{_HighlightUpdatesController.default.isInitialized()||_HighlightUpdatesController.default.initialize(),_HighlightUpdatesController.default.toggle()}};function createHighlightUpdatesTool(e){const t=e?.enabledColor||"#10b981",i=e?.disabledColor||"#6b7280";return e?.autoInitialize&&setTimeout(()=>{_HighlightUpdatesController.default.initialize()},1e3),{id:e?.id||"highlight-updates",name:e?.name||"TOGGLE HIGHLIGHT",description:e?.description||"Toggle component render highlights",slot:"row",icon:({size:e})=>{const[o,l]=(0,_react.useState)(()=>_HighlightUpdatesController.default.isEnabled());return(0,_react.useEffect)(()=>_HighlightUpdatesController.default.subscribe(e=>{l(e)}),[]),(0,_jsxRuntime.jsx)(_floatingToolsCore.HighlightIcon,{size:e,color:o?t:i})},component:EmptyComponent,props:{},launchMode:"toggle-only",onPress:()=>{_HighlightUpdatesController.default.isInitialized()||_HighlightUpdatesController.default.initialize(),_HighlightUpdatesController.default.toggle()}}}const highlightUpdatesModalPreset=exports.highlightUpdatesModalPreset={id:"highlight-updates-modal",name:"HIGHLIGHT",description:"View component render tracking modal",slot:"both",icon:({size:e})=>(0,_jsxRuntime.jsx)(_floatingToolsCore.HighlighterIcon,{size:e}),component:HighlightUpdatesModalWithBadgeNavigation,props:{enableSharedModalDimensions:!1}};function createHighlightUpdatesModalTool(e){const t=e?.enabledColor||"#10b981";return e?.autoInitialize&&setTimeout(()=>{_HighlightUpdatesController.default.initialize()},1e3),{id:e?.id||"highlight-updates-modal",name:e?.name||"HIGHLIGHT",description:e?.description||"View component render tracking modal",slot:"both",icon:({size:e})=>(0,_jsxRuntime.jsx)(_floatingToolsCore.HighlighterIcon,{size:e,color:t}),component:HighlightUpdatesModalWithBadgeNavigation,props:{enableSharedModalDimensions:!1}}}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";import React,{useState,useEffect,useRef,useCallback,useMemo}from"react";import{View,Text,StyleSheet}from"react-native";import{Power,JsModal,devToolsStorageKeys,safeGetItem,safeSetItem,buoyColors}from"@buoy-gg/shared-ui";let _useIsPro=null,_licenseLoadAttempted=!1;function loadLicenseModule(){if(!_licenseLoadAttempted){_licenseLoadAttempted=!0;try{const e=require("@buoy-gg/license");e&&(_useIsPro=e.useIsPro??null)}catch{}}}function getUseIsPro(){return loadLicenseModule(),_useIsPro??(()=>!1)}import HighlightUpdatesController from"../utils/HighlightUpdatesController";import{RenderTracker}from"../utils/RenderTracker";import{CAUSE_CONFIG,COMPONENT_CAUSE_CONFIG}from"./RenderCauseBadge";import{RenderDetailView}from"./RenderDetailView";import{EventStepperFooter}from"@buoy-gg/shared-ui";import{HighlightFilterView}from"./HighlightFilterView";import{IsolatedRenderList}from"./IsolatedRenderList";import{MainListHeader,FilterViewHeader,DetailViewHeader}from"./ModalHeaderContent";import{RenderHistoryViewer,RenderHistoryFooter}from"./RenderHistoryViewer";import{jsx as _jsx,jsxs as _jsxs,Fragment as _Fragment}from"react/jsx-runtime";const DisabledBanner=React.memo(function(){return _jsxs(View,{style:styles.disabledBanner,children:[_jsx(Power,{size:14,color:buoyColors.warning}),_jsx(Text,{style:styles.disabledText,children:"Render tracking is disabled"})]})});function formatRenderDataForClipboard(){const e=RenderTracker.getRenders(),t=RenderTracker.getStats(),r=RenderTracker.getSettings(),n=(new Date).toISOString(),s=[];s.push("=".repeat(60)),s.push("RENDER TRACKING DATA EXPORT"),s.push("=".repeat(60)),s.push(`Timestamp: ${n}`),s.push(`Total Components: ${t.totalComponents}`),s.push(`Total Renders: ${t.totalRenders}`),s.push(""),s.push("Settings:"),s.push(` - Show Render Count: ${r.showRenderCount}`),s.push(` - Track Render Causes: ${r.trackRenderCauses}`),s.push(` - Batch Size: ${r.batchSize}`),s.push("");const a=[...e].sort((e,t)=>t.renderCount-e.renderCount);s.push("-".repeat(60)),s.push("COMPONENTS BY RENDER COUNT (descending)"),s.push("-".repeat(60)),s.push(""),a.forEach((e,t)=>{const r=e.lastRenderCause?.type,n=e.lastRenderCause?.componentCause,a=e.lastRenderCause&&r?`${CAUSE_CONFIG[r].label}${e.lastRenderCause.changedKeys?` [${e.lastRenderCause.changedKeys.join(", ")}]`:""}${e.lastRenderCause.hookIndices?` [Hook ${e.lastRenderCause.hookIndices.join(", ")}]`:""}`:"N/A",o=n?COMPONENT_CAUSE_CONFIG[n].label.toUpperCase():"N/A",i=e.lastRenderCause?.componentName||e.componentName;s.push(`${t+1}. ${e.displayName} (${e.viewType}) - ${e.renderCount} renders`),n&&r?s.push(` Why: ${i||"Component"} (${o}) → Native (${a})`):s.push(` Last Cause: ${a}`),e.testID&&s.push(` testID: ${e.testID}`),e.nativeID&&s.push(` nativeID: ${e.nativeID}`),i&&s.push(` component: ${i}`),e.accessibilityLabel&&s.push(` accessibilityLabel: ${e.accessibilityLabel}`),s.push(` nativeTag: ${e.nativeTag}`);const l=e.lastRenderTime-e.firstRenderTime,c=l>0?(e.renderCount/(l/1e3)).toFixed(2):e.renderCount;s.push(` Renders/sec: ${c}`),s.push("")}),s.push("-".repeat(60)),s.push("BY VIEW TYPE"),s.push("-".repeat(60));const o=new Map;e.forEach(e=>{const t=o.get(e.viewType)||{count:0,renders:0};t.count++,t.renders+=e.renderCount,o.set(e.viewType,t)}),[...o.entries()].sort((e,t)=>t[1].renders-e[1].renders).forEach(([e,t])=>{s.push(`${e}: ${t.count} components, ${t.renders} total renders`)}),s.push(""),s.push("-".repeat(60)),s.push("BY COMPONENT NAME"),s.push("-".repeat(60));const i=new Map;if(e.forEach(e=>{const t=e.componentName||"(unknown)",r=i.get(t)||{count:0,renders:0};r.count++,r.renders+=e.renderCount,i.set(t,r)}),[...i.entries()].sort((e,t)=>t[1].renders-e[1].renders).forEach(([e,t])=>{s.push(`${e}: ${t.count} instances, ${t.renders} total renders`)}),s.push(""),r.trackRenderCauses){s.push("-".repeat(60)),s.push("BY NATIVE CAUSE (what changed on the native view)"),s.push("-".repeat(60));const t=new Map;e.forEach(e=>{const r=e.lastRenderCause?.type||"unknown";t.set(r,(t.get(r)||0)+1)}),[...t.entries()].sort((e,t)=>t[1]-e[1]).forEach(([e,t])=>{const r=CAUSE_CONFIG[e];s.push(`${r?.label||e}: ${t} components`)}),s.push(""),s.push("-".repeat(60)),s.push("BY COMPONENT CAUSE (why the React component re-rendered)"),s.push("-".repeat(60));const r=new Map;e.forEach(e=>{const t=e.lastRenderCause?.componentCause||"unknown";r.set(t,(r.get(t)||0)+1)}),[...r.entries()].sort((e,t)=>t[1]-e[1]).forEach(([e,t])=>{const r=COMPONENT_CAUSE_CONFIG[e];s.push(`${r?.label?.toUpperCase()||e}: ${t} components`)}),s.push("");const n=e.filter(e=>"parent"===e.lastRenderCause?.componentCause);n.length>0&&(s.push("-".repeat(60)),s.push("💡 OPTIMIZATION OPPORTUNITIES"),s.push("-".repeat(60)),s.push(`${n.length} component(s) re-rendered due to parent:`),n.forEach(e=>{const t=e.lastRenderCause?.componentName||e.componentName||e.displayName;s.push(` - ${t}: Consider wrapping with React.memo()`)}),s.push(""))}return s.push("=".repeat(60)),s.push("END OF EXPORT"),s.push("=".repeat(60)),s.join("\n")}export function HighlightUpdatesModal({visible:e,onClose:t,onBack:r,onMinimize:n,enableSharedModalDimensions:s=!1,initialNativeTag:a,onInitialNativeTagHandled:o}){const i=getUseIsPro()(),[l,c]=useState(!1),[u,d]=useState(()=>HighlightUpdatesController.getFrozen()),[h,p]=useState(()=>RenderTracker.getStats().totalComponents>0),[g,C]=useState(null),[m,f]=useState(0),[T,y]=useState(!1),[S,R]=useState("filters"),[b,I]=useState("details"),[w,x]=useState(0),[k,v]=useState(""),[E,N]=useState(!1),P=useRef(null),H=useRef([]),F=useRef(RenderTracker.getFilters()),[U,D]=useState(()=>{const e=RenderTracker.getFilters();return e.includePatterns.length+e.excludePatterns.length}),[_,$]=useState(()=>RenderTracker.getFilters()),[O,A]=useState(()=>RenderTracker.getSettings()),M=useRef(!1),V=useRef(!1),j=useRef(!1);useEffect(()=>{e&&!M.current&&(async()=>{try{const e=await safeGetItem(devToolsStorageKeys.highlightUpdates.isTracking());null!==e&&"true"===e&&!HighlightUpdatesController.isEnabled()&&(HighlightUpdatesController.isInitialized()||HighlightUpdatesController.initialize(),HighlightUpdatesController.enable()),M.current=!0}catch(e){}})()},[e]),useEffect(()=>{M.current&&(async()=>{try{await safeSetItem(devToolsStorageKeys.highlightUpdates.isTracking(),l.toString())}catch(e){}})()},[l]),useEffect(()=>{e&&!V.current&&(async()=>{try{const e=await safeGetItem(devToolsStorageKeys.highlightUpdates.filters());if(e){const t=JSON.parse(e),r={includeTestID:new Set(t.includeTestID||[]),includeNativeID:new Set(t.includeNativeID||[]),includeViewType:new Set(t.includeViewType||[]),includeComponent:new Set(t.includeComponent||[]),excludeTestID:new Set(t.excludeTestID||[]),excludeNativeID:new Set(t.excludeNativeID||[]),excludeViewType:new Set(t.excludeViewType||[]),excludeComponent:new Set(t.excludeComponent||[]),includePatterns:t.includePatterns||[],excludePatterns:t.excludePatterns||[]};RenderTracker.setFilters(r);const n=RenderTracker.getFilters();F.current=n,$(n),D(n.includePatterns.length+n.excludePatterns.length)}V.current=!0}catch(e){}})()},[e]),useEffect(()=>{V.current&&(async()=>{try{const e={includeTestID:Array.from(_.includeTestID),includeNativeID:Array.from(_.includeNativeID),includeViewType:Array.from(_.includeViewType),includeComponent:Array.from(_.includeComponent),excludeTestID:Array.from(_.excludeTestID),excludeNativeID:Array.from(_.excludeNativeID),excludeViewType:Array.from(_.excludeViewType),excludeComponent:Array.from(_.excludeComponent),includePatterns:_.includePatterns,excludePatterns:_.excludePatterns};await safeSetItem(devToolsStorageKeys.highlightUpdates.filters(),JSON.stringify(e))}catch(e){}})()},[_]),useEffect(()=>{e&&!j.current&&(async()=>{try{const e=await safeGetItem(devToolsStorageKeys.highlightUpdates.settings());if(e){const t=JSON.parse(e),{performanceLogging:r,...n}=t;RenderTracker.setSettings(n),A(RenderTracker.getSettings())}j.current=!0}catch(e){j.current=!0}})()},[e]),useEffect(()=>{j.current&&(async()=>{try{const{performanceLogging:e,...t}=O;await safeSetItem(devToolsStorageKeys.highlightUpdates.settings(),JSON.stringify(t))}catch(e){}})()},[O]),useEffect(()=>{const e=RenderTracker.subscribeToState(e=>{c(e.isTracking)});return()=>{e()}},[]),useEffect(()=>{const e=HighlightUpdatesController.subscribeToFreeze(e=>{d(e)});return()=>{e()}},[]),useEffect(()=>{E&&requestAnimationFrame(()=>{P.current?.focus()})},[E]),useEffect(()=>{e||HighlightUpdatesController.setSpotlight(null)},[e]),useEffect(()=>{if(e&&null!=a){const e=RenderTracker.getRender(String(a));e&&(C(e),f(0),y(!1),HighlightUpdatesController.setSpotlight(e.nativeTag)),o?.()}},[e,a,o]);const L=useCallback(()=>{HighlightUpdatesController.isInitialized()||HighlightUpdatesController.initialize(),HighlightUpdatesController.toggle()},[]),z=useCallback(()=>{HighlightUpdatesController.toggleFreeze()},[]),B=useCallback(()=>{HighlightUpdatesController.clearRenderCounts(),p(!1)},[]),K=useMemo(()=>h?formatRenderDataForClipboard():"",[h]),G=useCallback(e=>{v(e)},[]),J=useCallback((e,t,r)=>{C(e),f(t),I("details"),x(0),H.current=r,HighlightUpdatesController.setSpotlight(e.nativeTag)},[]),Y=useCallback(e=>{H.current=e},[]),W=useCallback(()=>{C(null),f(0),HighlightUpdatesController.setSpotlight(null)},[]),q=useCallback(()=>{const e=H.current;if(m>0){const t=m-1,r=e[t];r&&(C(r),f(t),HighlightUpdatesController.setSpotlight(r.nativeTag))}},[m]),X=useCallback(()=>{const e=H.current;if(m<e.length-1){const t=m+1,r=e[t];r&&(C(r),f(t),HighlightUpdatesController.setSpotlight(r.nativeTag))}},[m]),Z=useCallback(()=>{y(!1)},[]),Q=useCallback(()=>{y(!0)},[]),ee=useCallback(()=>{N(!0)},[]),te=useCallback(()=>{N(!1)},[]),re=useCallback(e=>{RenderTracker.setFilters(e);const t=RenderTracker.getFilters();F.current=t,$(t),D(t.includePatterns.length+t.excludePatterns.length)},[]),ne=useCallback((e,t)=>{const r=RenderTracker.getFilters(),n={};"include"===t?r.includePatterns.some(t=>t.type===e.type&&t.value===e.value)||(n.includePatterns=[...r.includePatterns,e]):r.excludePatterns.some(t=>t.type===e.type&&t.value===e.value)||(n.excludePatterns=[...r.excludePatterns,e]),Object.keys(n).length>0&&(re(n),C(null),f(0),HighlightUpdatesController.setSpotlight(null))},[re]),se=useCallback(e=>{RenderTracker.setSettings(e),A(RenderTracker.getSettings())},[]),ae=useCallback(e=>{p(e.totalComponents>0)},[]),oe=useCallback(()=>T?_jsx(FilterViewHeader,{onBack:Z,activeTab:S,onTabChange:R,activeFilterCount:U}):g?_jsx(DetailViewHeader,{onBack:W,activeTab:b,onTabChange:I,hasHistory:(g.renderHistory?.length??0)>0}):_jsx(MainListHeader,{onBack:r,isSearchActive:E,searchText:k,onSearchChange:G,onSearchToggle:ee,onSearchClose:te,onFilterToggle:Q,onToggleTracking:L,onToggleFreeze:z,onClear:B,copyData:K,isTracking:l,isFrozen:u,activeFilterCount:U,hasRenders:h,searchInputRef:P}),[T,g,r,E,k,l,u,U,h,S,b,Z,W,G,ee,te,Q,L,z,B,K]),ie=s?devToolsStorageKeys.modal.root():devToolsStorageKeys.highlightUpdates.modal();if(!e)return null;const le=H.current.length,ce=g?"details"===b?_jsx(EventStepperFooter,{currentIndex:m,totalItems:le,onPrevious:q,onNext:X,itemLabel:"Component",subtitle:g.componentName||g.displayName||g.viewType}):_jsx(RenderHistoryFooter,{render:g,selectedEventIndex:w,onEventIndexChange:x,isPro:i}):null;return _jsx(JsModal,{visible:e,onClose:t,onMinimize:n,persistenceKey:ie,header:{showToggleButton:!0,customContent:oe()},enablePersistence:!0,initialMode:"bottomSheet",enableGlitchEffects:!0,styles:{},footer:ce,footerHeight:g&&("details"===b||(g.renderHistory?.length??0)>1)?68:0,children:_jsx(View,{nativeID:"__rn_buoy__highlight-modal",style:styles.container,children:g?"details"===b?_jsx(RenderDetailView,{render:g,disableInternalFooter:!0,onAddFilter:ne,isPro:i}):_jsx(RenderHistoryViewer,{render:g,disableInternalFooter:!0,selectedEventIndex:w,onEventIndexChange:x,isPro:i}):T?_jsx(HighlightFilterView,{filters:_,onFilterChange:re,settings:O,onSettingsChange:se,availableProps:RenderTracker.getAvailableProps(),activeTab:S}):_jsxs(_Fragment,{children:[!l&&_jsx(DisabledBanner,{}),_jsx(IsolatedRenderList,{searchText:k,filters:_,onSelectRender:J,onStatsChange:ae,onRendersChange:Y,isTracking:l,isPro:i})]})})})}const styles=StyleSheet.create({container:{flex:1,backgroundColor:buoyColors.base},disabledBanner:{flexDirection:"row",alignItems:"center",gap:8,padding:10,marginHorizontal:12,marginTop:8,backgroundColor:buoyColors.warning+"15",borderRadius:8,borderWidth:1,borderColor:buoyColors.warning+"20"},disabledText:{color:buoyColors.warning,fontSize:11,flex:1}});export default HighlightUpdatesModal;
|
|
1
|
+
"use strict";import React,{useState,useEffect,useRef,useCallback,useMemo}from"react";import{View,Text,StyleSheet}from"react-native";import{Power,JsModal,devToolsStorageKeys,safeGetItem,safeSetItem,buoyColors}from"@buoy-gg/shared-ui";import{useIsPro}from"@buoy-gg/license";import HighlightUpdatesController from"../utils/HighlightUpdatesController";import{RenderTracker}from"../utils/RenderTracker";import{CAUSE_CONFIG,COMPONENT_CAUSE_CONFIG}from"./RenderCauseBadge";import{RenderDetailView}from"./RenderDetailView";import{EventStepperFooter}from"@buoy-gg/shared-ui";import{HighlightFilterView}from"./HighlightFilterView";import{IsolatedRenderList}from"./IsolatedRenderList";import{MainListHeader,FilterViewHeader,DetailViewHeader}from"./ModalHeaderContent";import{RenderHistoryViewer,RenderHistoryFooter}from"./RenderHistoryViewer";import{jsx as _jsx,jsxs as _jsxs,Fragment as _Fragment}from"react/jsx-runtime";const DisabledBanner=React.memo(function(){return _jsxs(View,{style:styles.disabledBanner,children:[_jsx(Power,{size:14,color:buoyColors.warning}),_jsx(Text,{style:styles.disabledText,children:"Render tracking is disabled"})]})});function formatRenderDataForClipboard(){const e=RenderTracker.getRenders(),t=RenderTracker.getStats(),r=RenderTracker.getSettings(),n=(new Date).toISOString(),s=[];s.push("=".repeat(60)),s.push("RENDER TRACKING DATA EXPORT"),s.push("=".repeat(60)),s.push(`Timestamp: ${n}`),s.push(`Total Components: ${t.totalComponents}`),s.push(`Total Renders: ${t.totalRenders}`),s.push(""),s.push("Settings:"),s.push(` - Show Render Count: ${r.showRenderCount}`),s.push(` - Track Render Causes: ${r.trackRenderCauses}`),s.push(` - Batch Size: ${r.batchSize}`),s.push("");const a=[...e].sort((e,t)=>t.renderCount-e.renderCount);s.push("-".repeat(60)),s.push("COMPONENTS BY RENDER COUNT (descending)"),s.push("-".repeat(60)),s.push(""),a.forEach((e,t)=>{const r=e.lastRenderCause?.type,n=e.lastRenderCause?.componentCause,a=e.lastRenderCause&&r?`${CAUSE_CONFIG[r].label}${e.lastRenderCause.changedKeys?` [${e.lastRenderCause.changedKeys.join(", ")}]`:""}${e.lastRenderCause.hookIndices?` [Hook ${e.lastRenderCause.hookIndices.join(", ")}]`:""}`:"N/A",o=n?COMPONENT_CAUSE_CONFIG[n].label.toUpperCase():"N/A",i=e.lastRenderCause?.componentName||e.componentName;s.push(`${t+1}. ${e.displayName} (${e.viewType}) - ${e.renderCount} renders`),n&&r?s.push(` Why: ${i||"Component"} (${o}) → Native (${a})`):s.push(` Last Cause: ${a}`),e.testID&&s.push(` testID: ${e.testID}`),e.nativeID&&s.push(` nativeID: ${e.nativeID}`),i&&s.push(` component: ${i}`),e.accessibilityLabel&&s.push(` accessibilityLabel: ${e.accessibilityLabel}`),s.push(` nativeTag: ${e.nativeTag}`);const l=e.lastRenderTime-e.firstRenderTime,c=l>0?(e.renderCount/(l/1e3)).toFixed(2):e.renderCount;s.push(` Renders/sec: ${c}`),s.push("")}),s.push("-".repeat(60)),s.push("BY VIEW TYPE"),s.push("-".repeat(60));const o=new Map;e.forEach(e=>{const t=o.get(e.viewType)||{count:0,renders:0};t.count++,t.renders+=e.renderCount,o.set(e.viewType,t)}),[...o.entries()].sort((e,t)=>t[1].renders-e[1].renders).forEach(([e,t])=>{s.push(`${e}: ${t.count} components, ${t.renders} total renders`)}),s.push(""),s.push("-".repeat(60)),s.push("BY COMPONENT NAME"),s.push("-".repeat(60));const i=new Map;if(e.forEach(e=>{const t=e.componentName||"(unknown)",r=i.get(t)||{count:0,renders:0};r.count++,r.renders+=e.renderCount,i.set(t,r)}),[...i.entries()].sort((e,t)=>t[1].renders-e[1].renders).forEach(([e,t])=>{s.push(`${e}: ${t.count} instances, ${t.renders} total renders`)}),s.push(""),r.trackRenderCauses){s.push("-".repeat(60)),s.push("BY NATIVE CAUSE (what changed on the native view)"),s.push("-".repeat(60));const t=new Map;e.forEach(e=>{const r=e.lastRenderCause?.type||"unknown";t.set(r,(t.get(r)||0)+1)}),[...t.entries()].sort((e,t)=>t[1]-e[1]).forEach(([e,t])=>{const r=CAUSE_CONFIG[e];s.push(`${r?.label||e}: ${t} components`)}),s.push(""),s.push("-".repeat(60)),s.push("BY COMPONENT CAUSE (why the React component re-rendered)"),s.push("-".repeat(60));const r=new Map;e.forEach(e=>{const t=e.lastRenderCause?.componentCause||"unknown";r.set(t,(r.get(t)||0)+1)}),[...r.entries()].sort((e,t)=>t[1]-e[1]).forEach(([e,t])=>{const r=COMPONENT_CAUSE_CONFIG[e];s.push(`${r?.label?.toUpperCase()||e}: ${t} components`)}),s.push("");const n=e.filter(e=>"parent"===e.lastRenderCause?.componentCause);n.length>0&&(s.push("-".repeat(60)),s.push("💡 OPTIMIZATION OPPORTUNITIES"),s.push("-".repeat(60)),s.push(`${n.length} component(s) re-rendered due to parent:`),n.forEach(e=>{const t=e.lastRenderCause?.componentName||e.componentName||e.displayName;s.push(` - ${t}: Consider wrapping with React.memo()`)}),s.push(""))}return s.push("=".repeat(60)),s.push("END OF EXPORT"),s.push("=".repeat(60)),s.join("\n")}export function HighlightUpdatesModal({visible:e,onClose:t,onBack:r,onMinimize:n,enableSharedModalDimensions:s=!1,initialNativeTag:a,onInitialNativeTagHandled:o}){const i=useIsPro(),[l,c]=useState(!1),[u,d]=useState(()=>HighlightUpdatesController.getFrozen()),[h,p]=useState(()=>RenderTracker.getStats().totalComponents>0),[g,C]=useState(null),[m,T]=useState(0),[f,y]=useState(!1),[S,R]=useState("filters"),[b,I]=useState("details"),[w,x]=useState(0),[k,v]=useState(""),[E,N]=useState(!1),H=useRef(null),P=useRef([]),F=useRef(RenderTracker.getFilters()),[U,D]=useState(()=>{const e=RenderTracker.getFilters();return e.includePatterns.length+e.excludePatterns.length}),[$,_]=useState(()=>RenderTracker.getFilters()),[O,A]=useState(()=>RenderTracker.getSettings()),V=useRef(!1),j=useRef(!1),M=useRef(!1);useEffect(()=>{e&&!V.current&&(async()=>{try{const e=await safeGetItem(devToolsStorageKeys.highlightUpdates.isTracking());null!==e&&"true"===e&&!HighlightUpdatesController.isEnabled()&&(HighlightUpdatesController.isInitialized()||HighlightUpdatesController.initialize(),HighlightUpdatesController.enable()),V.current=!0}catch(e){}})()},[e]),useEffect(()=>{V.current&&(async()=>{try{await safeSetItem(devToolsStorageKeys.highlightUpdates.isTracking(),l.toString())}catch(e){}})()},[l]),useEffect(()=>{e&&!j.current&&(async()=>{try{const e=await safeGetItem(devToolsStorageKeys.highlightUpdates.filters());if(e){const t=JSON.parse(e),r={includeTestID:new Set(t.includeTestID||[]),includeNativeID:new Set(t.includeNativeID||[]),includeViewType:new Set(t.includeViewType||[]),includeComponent:new Set(t.includeComponent||[]),excludeTestID:new Set(t.excludeTestID||[]),excludeNativeID:new Set(t.excludeNativeID||[]),excludeViewType:new Set(t.excludeViewType||[]),excludeComponent:new Set(t.excludeComponent||[]),includePatterns:t.includePatterns||[],excludePatterns:t.excludePatterns||[]};RenderTracker.setFilters(r);const n=RenderTracker.getFilters();F.current=n,_(n),D(n.includePatterns.length+n.excludePatterns.length)}j.current=!0}catch(e){}})()},[e]),useEffect(()=>{j.current&&(async()=>{try{const e={includeTestID:Array.from($.includeTestID),includeNativeID:Array.from($.includeNativeID),includeViewType:Array.from($.includeViewType),includeComponent:Array.from($.includeComponent),excludeTestID:Array.from($.excludeTestID),excludeNativeID:Array.from($.excludeNativeID),excludeViewType:Array.from($.excludeViewType),excludeComponent:Array.from($.excludeComponent),includePatterns:$.includePatterns,excludePatterns:$.excludePatterns};await safeSetItem(devToolsStorageKeys.highlightUpdates.filters(),JSON.stringify(e))}catch(e){}})()},[$]),useEffect(()=>{e&&!M.current&&(async()=>{try{const e=await safeGetItem(devToolsStorageKeys.highlightUpdates.settings());if(e){const t=JSON.parse(e),{performanceLogging:r,...n}=t;RenderTracker.setSettings(n),A(RenderTracker.getSettings())}M.current=!0}catch(e){M.current=!0}})()},[e]),useEffect(()=>{M.current&&(async()=>{try{const{performanceLogging:e,...t}=O;await safeSetItem(devToolsStorageKeys.highlightUpdates.settings(),JSON.stringify(t))}catch(e){}})()},[O]),useEffect(()=>{const e=RenderTracker.subscribeToState(e=>{c(e.isTracking)});return()=>{e()}},[]),useEffect(()=>{const e=HighlightUpdatesController.subscribeToFreeze(e=>{d(e)});return()=>{e()}},[]),useEffect(()=>{E&&requestAnimationFrame(()=>{H.current?.focus()})},[E]),useEffect(()=>{e||HighlightUpdatesController.setSpotlight(null)},[e]),useEffect(()=>{if(e&&null!=a){const e=RenderTracker.getRender(String(a));e&&(C(e),T(0),y(!1),HighlightUpdatesController.setSpotlight(e.nativeTag)),o?.()}},[e,a,o]);const z=useCallback(()=>{HighlightUpdatesController.isInitialized()||HighlightUpdatesController.initialize(),HighlightUpdatesController.toggle()},[]),B=useCallback(()=>{HighlightUpdatesController.toggleFreeze()},[]),K=useCallback(()=>{HighlightUpdatesController.clearRenderCounts(),p(!1)},[]),G=useMemo(()=>h?formatRenderDataForClipboard():"",[h]),L=useCallback(e=>{v(e)},[]),J=useCallback((e,t,r)=>{C(e),T(t),I("details"),x(0),P.current=r,HighlightUpdatesController.setSpotlight(e.nativeTag)},[]),Y=useCallback(e=>{P.current=e},[]),W=useCallback(()=>{C(null),T(0),HighlightUpdatesController.setSpotlight(null)},[]),X=useCallback(()=>{const e=P.current;if(m>0){const t=m-1,r=e[t];r&&(C(r),T(t),HighlightUpdatesController.setSpotlight(r.nativeTag))}},[m]),q=useCallback(()=>{const e=P.current;if(m<e.length-1){const t=m+1,r=e[t];r&&(C(r),T(t),HighlightUpdatesController.setSpotlight(r.nativeTag))}},[m]),Z=useCallback(()=>{y(!1)},[]),Q=useCallback(()=>{y(!0)},[]),ee=useCallback(()=>{N(!0)},[]),te=useCallback(()=>{N(!1)},[]),re=useCallback(e=>{RenderTracker.setFilters(e);const t=RenderTracker.getFilters();F.current=t,_(t),D(t.includePatterns.length+t.excludePatterns.length)},[]),ne=useCallback((e,t)=>{const r=RenderTracker.getFilters(),n={};"include"===t?r.includePatterns.some(t=>t.type===e.type&&t.value===e.value)||(n.includePatterns=[...r.includePatterns,e]):r.excludePatterns.some(t=>t.type===e.type&&t.value===e.value)||(n.excludePatterns=[...r.excludePatterns,e]),Object.keys(n).length>0&&(re(n),C(null),T(0),HighlightUpdatesController.setSpotlight(null))},[re]),se=useCallback(e=>{RenderTracker.setSettings(e),A(RenderTracker.getSettings())},[]),ae=useCallback(e=>{p(e.totalComponents>0)},[]),oe=useCallback(()=>f?_jsx(FilterViewHeader,{onBack:Z,activeTab:S,onTabChange:R,activeFilterCount:U}):g?_jsx(DetailViewHeader,{onBack:W,activeTab:b,onTabChange:I,hasHistory:(g.renderHistory?.length??0)>0}):_jsx(MainListHeader,{onBack:r,isSearchActive:E,searchText:k,onSearchChange:L,onSearchToggle:ee,onSearchClose:te,onFilterToggle:Q,onToggleTracking:z,onToggleFreeze:B,onClear:K,copyData:G,isTracking:l,isFrozen:u,activeFilterCount:U,hasRenders:h,searchInputRef:H}),[f,g,r,E,k,l,u,U,h,S,b,Z,W,L,ee,te,Q,z,B,K,G]),ie=s?devToolsStorageKeys.modal.root():devToolsStorageKeys.highlightUpdates.modal();if(!e)return null;const le=P.current.length,ce=g?"details"===b?_jsx(EventStepperFooter,{currentIndex:m,totalItems:le,onPrevious:X,onNext:q,itemLabel:"Component",subtitle:g.componentName||g.displayName||g.viewType}):_jsx(RenderHistoryFooter,{render:g,selectedEventIndex:w,onEventIndexChange:x,isPro:i}):null;return _jsx(JsModal,{visible:e,onClose:t,onMinimize:n,persistenceKey:ie,header:{showToggleButton:!0,customContent:oe()},enablePersistence:!0,initialMode:"bottomSheet",enableGlitchEffects:!0,styles:{},footer:ce,footerHeight:g&&("details"===b||(g.renderHistory?.length??0)>1)?68:0,children:_jsx(View,{nativeID:"__rn_buoy__highlight-modal",style:styles.container,children:g?"details"===b?_jsx(RenderDetailView,{render:g,disableInternalFooter:!0,onAddFilter:ne,isPro:i}):_jsx(RenderHistoryViewer,{render:g,disableInternalFooter:!0,selectedEventIndex:w,onEventIndexChange:x,isPro:i}):f?_jsx(HighlightFilterView,{filters:$,onFilterChange:re,settings:O,onSettingsChange:se,availableProps:RenderTracker.getAvailableProps(),activeTab:S}):_jsxs(_Fragment,{children:[!l&&_jsx(DisabledBanner,{}),_jsx(IsolatedRenderList,{searchText:k,filters:$,onSelectRender:J,onStatsChange:ae,onRendersChange:Y,isTracking:l,isPro:i})]})})})}const styles=StyleSheet.create({container:{flex:1,backgroundColor:buoyColors.base},disabledBanner:{flexDirection:"row",alignItems:"center",gap:8,padding:10,marginHorizontal:12,marginTop:8,backgroundColor:buoyColors.warning+"15",borderRadius:8,borderWidth:1,borderColor:buoyColors.warning+"20"},disabledText:{color:buoyColors.warning,fontSize:11,flex:1}});export default HighlightUpdatesModal;
|
package/lib/module/preset.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";import React,{useState,useEffect,useCallback}from"react";import{HighlighterIcon}from"@buoy-gg/floating-tools-core";import HighlightUpdatesController from"./highlight-updates/utils/HighlightUpdatesController";import{HighlightUpdatesModal}from"./highlight-updates/components/HighlightUpdatesModal";import{jsx as _jsx}from"react/jsx-runtime";function HighlightIcon({size:t}){const[e
|
|
1
|
+
"use strict";import React,{useState,useEffect,useCallback}from"react";import{HighlighterIcon,HighlightIcon as HighlightIconBase}from"@buoy-gg/floating-tools-core";import HighlightUpdatesController from"./highlight-updates/utils/HighlightUpdatesController";import{HighlightUpdatesModal}from"./highlight-updates/components/HighlightUpdatesModal";import{jsx as _jsx}from"react/jsx-runtime";function HighlightIcon({size:t}){const[i,e]=useState(()=>HighlightUpdatesController.isEnabled());return useEffect(()=>HighlightUpdatesController.subscribe(t=>{e(t)}),[]),_jsx(HighlightIconBase,{size:t,color:i?"#10b981":"#6b7280"})}function EmptyComponent(){return null}function HighlightUpdatesModalWithBadgeNavigation(t){const[i,e]=useState(null);useEffect(()=>(t.visible&&HighlightUpdatesController.setBadgePressCallback(t=>{e(t)}),()=>{t.visible||HighlightUpdatesController.setBadgePressCallback(null)}),[t.visible]);const o=useCallback(()=>{e(null)},[]);return _jsx(HighlightUpdatesModal,{...t,initialNativeTag:i,onInitialNativeTagHandled:o})}export const highlightUpdatesPreset={id:"highlight-updates",name:"TOGGLE HIGHLIGHT",description:"Toggle component render highlights",slot:"row",icon:HighlightIcon,component:EmptyComponent,props:{},launchMode:"toggle-only",onPress:()=>{HighlightUpdatesController.isInitialized()||HighlightUpdatesController.initialize(),HighlightUpdatesController.toggle()}};export function createHighlightUpdatesTool(t){const i=t?.enabledColor||"#10b981",e=t?.disabledColor||"#6b7280";return t?.autoInitialize&&setTimeout(()=>{HighlightUpdatesController.initialize()},1e3),{id:t?.id||"highlight-updates",name:t?.name||"TOGGLE HIGHLIGHT",description:t?.description||"Toggle component render highlights",slot:"row",icon:({size:t})=>{const[o,l]=useState(()=>HighlightUpdatesController.isEnabled());return useEffect(()=>HighlightUpdatesController.subscribe(t=>{l(t)}),[]),_jsx(HighlightIconBase,{size:t,color:o?i:e})},component:EmptyComponent,props:{},launchMode:"toggle-only",onPress:()=>{HighlightUpdatesController.isInitialized()||HighlightUpdatesController.initialize(),HighlightUpdatesController.toggle()}}}export const highlightUpdatesModalPreset={id:"highlight-updates-modal",name:"HIGHLIGHT",description:"View component render tracking modal",slot:"both",icon:({size:t})=>_jsx(HighlighterIcon,{size:t}),component:HighlightUpdatesModalWithBadgeNavigation,props:{enableSharedModalDimensions:!1}};export function createHighlightUpdatesModalTool(t){const i=t?.enabledColor||"#10b981";return t?.autoInitialize&&setTimeout(()=>{HighlightUpdatesController.initialize()},1e3),{id:t?.id||"highlight-updates-modal",name:t?.name||"HIGHLIGHT",description:t?.description||"View component render tracking modal",slot:"both",icon:({size:t})=>_jsx(HighlighterIcon,{size:t,color:i}),component:HighlightUpdatesModalWithBadgeNavigation,props:{enableSharedModalDimensions:!1}}}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@buoy-gg/highlight-updates",
|
|
3
|
-
"version": "2.0.
|
|
3
|
+
"version": "2.0.9",
|
|
4
4
|
"description": "Control React DevTools highlight updates feature from your app",
|
|
5
5
|
"main": "lib/commonjs/index",
|
|
6
6
|
"module": "lib/module/index",
|
|
@@ -12,13 +12,14 @@
|
|
|
12
12
|
],
|
|
13
13
|
"sideEffects": false,
|
|
14
14
|
"dependencies": {
|
|
15
|
-
"@buoy-gg/shared-ui": "1.7.
|
|
16
|
-
"@buoy-gg/floating-tools-core": "1.7.
|
|
15
|
+
"@buoy-gg/shared-ui": "1.7.8",
|
|
16
|
+
"@buoy-gg/floating-tools-core": "1.7.8"
|
|
17
17
|
},
|
|
18
18
|
"peerDependencies": {
|
|
19
|
+
"@buoy-gg/license": "*",
|
|
19
20
|
"react": "*",
|
|
20
21
|
"react-native": "*",
|
|
21
|
-
"@buoy-gg/core": "1.7.
|
|
22
|
+
"@buoy-gg/core": "1.7.8"
|
|
22
23
|
},
|
|
23
24
|
"peerDependenciesMeta": {
|
|
24
25
|
"@buoy-gg/core": {
|
|
@@ -29,7 +30,8 @@
|
|
|
29
30
|
"@types/react": "^19.1.0",
|
|
30
31
|
"@types/react-native": "^0.73.0",
|
|
31
32
|
"typescript": "~5.8.3",
|
|
32
|
-
"@buoy-gg/core": "1.7.
|
|
33
|
+
"@buoy-gg/core": "1.7.8",
|
|
34
|
+
"@buoy-gg/license": "1.7.8"
|
|
33
35
|
},
|
|
34
36
|
"react-native-builder-bob": {
|
|
35
37
|
"source": "src",
|