add new dev tool render highlights #73
Merged
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
… React DevTools highlight updates - Added a new package `@react-buoy/highlight-updates` that allows programmatic control over the "Highlight updates when components render" feature in React Native DevTools. - Implemented `HighlightUpdatesController` for managing highlight states and interactions. - Created `HighlightUpdatesOverlay` component to visually indicate component updates. - Integrated with FloatingDevTools for seamless user experience. - Added comprehensive documentation and changelog for the new feature.
- Introduced `HighlightUpdatesModal` for a comprehensive interface to track component renders. - Added `HighlightFilterView` for filtering tracked renders by various criteria. - Implemented `RenderListItem` and `RenderDetailView` for displaying render details in the modal. - Updated `HighlightUpdatesController` to manage render tracking and state. - Enhanced `RenderTracker` to support filtering and tracking of component renders. - Added `StackPulseIcon` for visual representation in the UI. - Updated documentation to reflect new components and functionalities.
…d optimizations - Added `ViewTypeMapper` utility to map native view class names to developer-friendly component names, improving render tracking UI clarity. - Updated `RenderTracker` to include display names for tracked renders, enhancing the information available in the UI. - Optimized `HighlightUpdatesController` for faster detection of dev tools components with caching and improved lookup methods. - Enhanced `HighlightUpdatesModal` and `RenderListItem` components for better display of render details and improved performance. - Introduced new props for modal presets to support shared dimensions, enhancing the user experience.
…ponents - Added `IdentifierBadge` and `CategoryBadge` components for consistent display of component identifiers across the highlight updates package. - Updated `HighlightFilterView` to support dynamic filtering of tracked renders with improved UI for adding include and exclude patterns. - Enhanced `HighlightUpdatesModal` to load and save filter states, ensuring persistence across sessions. - Refactored `RenderTracker` to unify filter patterns, improving the filtering logic and performance. - Updated documentation to reflect new components and functionalities, including common pitfalls for icon usage in modal presets.
…g and settings - Introduced `RenderCountIcon` for visual representation of render counts in the highlight updates modal. - Updated `HighlightUpdatesModal` to manage and persist render tracking settings, including options for showing render counts. - Enhanced `HighlightFilterView` to include settings for render count display and batch size adjustments. - Refactored `RenderTracker` to support new settings and improve performance logging capabilities. - Updated documentation to reflect new features and settings for better user experience.
…rking in React Native - Added the `@react-buoy/benchmark` package to provide a comprehensive performance benchmarking system for React Native applications. - Implemented core components including `BenchmarkRecorder`, `BenchmarkStorage`, and `BenchmarkComparator` for recording and comparing performance metrics. - Introduced UI components such as `BenchmarkModal`, `BenchmarkDetailView`, and `BenchmarkCompareView` for displaying benchmark results and comparisons. - Enhanced the `HighlightUpdates` package to integrate with the new benchmarking system, allowing for performance measurement during highlight updates. - Updated documentation and added a detailed guide for implementing the benchmarking system in applications.
- Changed the `enableSharedModalDimensions` property from `true` to `false` in the presets of the benchmark, highlight updates, network, react query, route events, and storage packages. - This adjustment ensures consistent behavior across modal components regarding shared dimensions.
- Introduced `GlobalDevToolsSettings` interface to manage global settings across dev tools. - Updated `DevToolsSettingsModal` to include a toggle for `enableSharedModalDimensions`, allowing users to sync dimensions across all tool modals. - Enhanced `AppRenderer` to utilize global settings for modal dimensions, ensuring consistent behavior. - Added new UI components for managing global settings in the settings tab of the DevTools. - Updated storage keys to accommodate global settings persistence.
…rove UI - Added a category parameter to the renderGlobalSettingCard function for better categorization of settings. - Replaced the status dot and label with a category badge in the settings modal for enhanced clarity. - Updated styles for the new category badge to improve visual presentation and user experience.
…ance tracking - Introduced BenchmarkIcon in the DevToolsSettingsModal to represent the benchmark category. - Updated the rendering logic to include the new icon for better visual categorization of settings.
LovesWorking
changed the title
…ture - Added comprehensive documentation for the "Why Did You Render" feature in the Highlight Updates tool. - Implemented render cause detection to identify why components re-rendered, including props, state, hooks, and parent re-renders. - Introduced new components such as RenderCauseBadge and RenderHistoryViewer for improved visualization of render causes and history. - Enhanced HighlightUpdatesModal and RenderDetailView to display detailed render information and navigation through render history. - Updated HighlightFilterView to include settings for render cause tracking and debug logging levels. - Refactored RenderTracker to support new render cause detection logic and improved performance logging capabilities. - Updated documentation and roadmap to reflect new features and enhancements for better user experience.
…der count range filtering - Introduced HighlightUpdatesModalWithBadgeNavigation to handle badge press navigation and deep linking to component details. - Updated HighlightUpdatesOverlay to support badge press handling and display render counts with interactive badges. - Added render count range filtering options in HighlightFilterView, allowing users to filter components based on their render counts. - Enhanced RenderTracker to support new filtering capabilities, including min and max render count settings. - Updated documentation to reflect new features and improve user experience.
- Introduced a new `persistentStorage` module that provides a unified storage solution, persisting settings independently of AsyncStorage. - Implemented fallback mechanisms to use AsyncStorage when the file system is unavailable, ensuring seamless integration. - Updated `DevToolsSettingsModal` to display current storage backend type and allow users to clear settings. - Enhanced existing storage utilities to leverage the new persistent storage system, maintaining backward compatibility. - Added comprehensive documentation for the new storage features and migration paths.
- Removed `expo-clipboard` dependency and added `expo-file-system` for persistent storage in React Buoy DevTools. - Updated README to reflect new storage backend options and their implications for user settings persistence. - Introduced comprehensive API documentation for Expo Router, including components, hooks, and navigation options. - Added a master guide for Expo Router to assist developers in building mobile navigation. - Enhanced the DevToolsSettingsModal to utilize the new default configuration context for tool settings. - Improved the FloatingDevTools component to support default tool configurations, ensuring a better user experience.
- Introduced dynamic import for RouteTracker from the @react-buoy/route-events package. - Enabled automatic route tracking without requiring manual addition of <RouteTracker /> by users. - Updated FloatingDevTools component to conditionally render RouteTracker if available.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
No description provided.