Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
19 commits
Select commit Hold shift + click to select a range
55138a9
feat: introduce @react-buoy/highlight-updates package for controlling…
LovesWorking Nov 29, 2025
3c669f5
feat: enhance highlight updates package with modal and filter components
LovesWorking Nov 29, 2025
96f458d
feat: enhance highlight updates package with new view type mapping an…
LovesWorking Nov 29, 2025
53fba88
feat: enhance highlight updates package with new filtering and UI com…
LovesWorking Nov 29, 2025
3ebe720
feat: enhance highlight updates package with new render count trackin…
LovesWorking Nov 30, 2025
00f89e9
feat: introduce @react-buoy/benchmark package for performance benchma…
LovesWorking Nov 30, 2025
eaea939
fix: update enableSharedModalDimensions to false across multiple presets
LovesWorking Nov 30, 2025
b2aa538
feat: add global settings for shared modal dimensions in DevTools
LovesWorking Nov 30, 2025
fd4888e
feat: update DevToolsSettingsModal to include category badges and imp…
LovesWorking Nov 30, 2025
eb0378a
fix bench icon
LovesWorking Nov 30, 2025
2b25044
feat: add BenchmarkIcon to DevToolsSettingsModal for enhanced perform…
LovesWorking Nov 30, 2025
09e6a33
feat: enhance highlight updates package with "Why Did You Render" fea…
LovesWorking Dec 1, 2025
7b4eff0
feat: enhance highlight updates package with badge navigation and ren…
LovesWorking Dec 2, 2025
35884e6
feat: add persistent storage abstraction for React Buoy DevTools
LovesWorking Dec 2, 2025
e865f17
feat: update storage backend options and enhance DevTools settings
LovesWorking Dec 2, 2025
1bae5bd
fix router
LovesWorking Dec 2, 2025
3ade925
cleanup
LovesWorking Dec 2, 2025
cfccc2f
feat: add automatic route tracking support in FloatingDevTools
LovesWorking Dec 2, 2025
36313e9
cleanup
LovesWorking Dec 3, 2025
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
746 changes: 746 additions & 0 deletions HIGHLIGHT_UPDATES_CONTROL.md

Large diffs are not rendered by default.

92 changes: 81 additions & 11 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -53,7 +53,7 @@ All installed tools automatically appear in your floating menu. No config needed
> 💡 **Pro Tip**: Install all tools at once:
>
> ```bash
> npm i @react-buoy/{core,env,network,storage,react-query,route-events,debug-borders}
> npm i @react-buoy/{core,env,network,storage,react-query,route-events,debug-borders,highlight-updates}
> ```

---
Expand All @@ -80,14 +80,15 @@ All installed tools automatically appear in your floating menu. No config needed

Install any combination to customize your dev menu:

| Tool | Package | What It Does | Key Features |
| ------------------ | --------------------------- | ------------------------------ | --------------------------------------------- |
| 🌍 **ENV** | `@react-buoy/env` | Environment variable inspector | Validation, search, type checking, warnings |
| 📡 **Network** | `@react-buoy/network` | API request monitor | Timeline view, filtering, performance metrics |
| 💾 **Storage** | `@react-buoy/storage` | AsyncStorage/MMKV browser | View/edit/delete, bulk ops, validation |
| ⚡ **React Query** | `@react-buoy/react-query` | TanStack Query devtools | Cache inspector, offline toggle, refetch |
| 🧭 **Routes** | `@react-buoy/route-events` | Route & navigation tracker | Sitemap, stack view, event timeline |
| 🎨 **Borders** | `@react-buoy/debug-borders` | Visual layout debugger | Colored component boundaries |
| Tool | Package | What It Does | Key Features |
| ------------------ | ------------------------------- | ------------------------------ | -------------------------------------------------- |
| 🌍 **ENV** | `@react-buoy/env` | Environment variable inspector | Validation, search, type checking, warnings |
| 📡 **Network** | `@react-buoy/network` | API request monitor | Timeline view, filtering, performance metrics |
| 💾 **Storage** | `@react-buoy/storage` | AsyncStorage/MMKV browser | View/edit/delete, bulk ops, validation |
| ⚡ **React Query** | `@react-buoy/react-query` | TanStack Query devtools | Cache inspector, offline toggle, refetch |
| 🧭 **Routes** | `@react-buoy/route-events` | Route & navigation tracker | Sitemap, stack view, event timeline |
| 🎨 **Borders** | `@react-buoy/debug-borders` | Visual layout debugger | Colored component boundaries |
| 🔄 **Highlights** | `@react-buoy/highlight-updates` | Render highlight tracker | Visual re-render detection, render counts, history |

**Installation Pattern**: All packages follow the same simple pattern:

Expand Down Expand Up @@ -155,6 +156,17 @@ npm install @react-buoy/{tool-name}

</details>

### Highlight Updates

<details>
<summary>Show preview</summary>

<!-- TODO: Add screenshot -->

_Screenshot coming soon_

</details>

</details>

---
Expand Down Expand Up @@ -606,6 +618,37 @@ function App() {

</details>

<details>
<summary><strong>🔄 Highlight Updates (@react-buoy/highlight-updates)</strong></summary>

### What It Does

Visual component re-render tracker that highlights components when they render. Helps identify unnecessary re-renders and performance bottlenecks.

### Install

```bash
npm install @react-buoy/highlight-updates
```

### Features

- 🔄 **Visual Render Detection** - See components flash when they re-render
- 🔢 **Render Counts** - See exact render counts on each component to identify problematic re-renders
- 📊 **Render History** - Track which components render and how often
- 🎛️ **Filter Controls** - Filter by component type or render frequency
- 🎭 **Toggle Mode** - Quick tap to enable/disable highlights
- 📋 **Modal View** - Detailed render list with timing information
- ⚡ Zero performance impact when disabled

### Usage

**Zero Config (Recommended)**: Just install and it auto-appears as an "UPDATES" button in the floating menu.

````

</details>

---

## 🏗️ Advanced Configuration
Expand Down Expand Up @@ -638,7 +681,7 @@ const customTools = [
apps={customTools} // Overrides auto-discovery for these IDs
environment="production"
/>
```
````

### Complete Manual Setup (No Auto-Discovery)

Expand Down Expand Up @@ -738,15 +781,41 @@ React Buoy remembers:
- Which tools are open
- Tool positions (if dragged)
- Minimized vs expanded state
- Modal sizes and positions
- User preferences

**Storage Key**: `@apphost_open_apps`
### Storage Backends

React Buoy uses a **smart storage system** that automatically picks the best available option:

| Backend | Persists Through Logout? | Requires | When Used |
|---------|-------------------------|----------|-----------|
| 📁 **File System** | ✅ Yes | `expo-file-system` | Dev builds, RN CLI |
| 💾 **AsyncStorage** | ❌ No (cleared on logout) | `@react-native-async-storage/async-storage` | Expo Go fallback |
| 🧠 **Memory** | ❌ No (lost on restart) | Nothing | Last resort |

**Why does this matter?**

If your app clears `AsyncStorage` during logout (common pattern), your devtools settings would normally be wiped too. With `expo-file-system` installed, settings persist independently—surviving logout flows, `AsyncStorage.clear()` calls, and more.

**To enable persistent storage:**

```bash
# Expo projects
npx expo install expo-file-system

# RN CLI projects
npm install expo expo-file-system
```

You can check which storage backend is active in **Settings → Storage Type** in the devtools menu.

This means your debugging session survives:

- ✅ Hot reloads
- ✅ App restarts
- ✅ Crash recovery
- ✅ Logout flows (with file system storage)

### Minimize Feature

Expand All @@ -758,6 +827,7 @@ Keep tools running in the background without cluttering your screen:
4. **Dismiss** - Swipe down on the minimized indicator to close the tool completely

**Why minimize?**

- 👁️ Reduces visual clutter while debugging
- ⚡ Keeps tools running (e.g., network monitor keeps capturing)
- 🔄 Quick restore without reloading tool state
Expand Down
Loading