react-performance-advisor 1.0.0 → 1.0.1
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/package.json +10 -1
- package/readme.md +68 -12
package/package.json
CHANGED
|
@@ -1,10 +1,19 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "react-performance-advisor",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.1",
|
|
4
4
|
"main": "./dist/index.js",
|
|
5
5
|
"module": "./dist/index.mjs",
|
|
6
6
|
"types": "./dist/index.d.ts",
|
|
7
7
|
"description": "An AI-powered React performance monitoring tool.",
|
|
8
|
+
"keywords": [
|
|
9
|
+
"react",
|
|
10
|
+
"performance",
|
|
11
|
+
"profiler",
|
|
12
|
+
"ai",
|
|
13
|
+
"gemini",
|
|
14
|
+
"render-tracker",
|
|
15
|
+
"optimization"
|
|
16
|
+
],
|
|
8
17
|
"scripts": {
|
|
9
18
|
"build": "tsup src/index.ts --format cjs,esm --dts",
|
|
10
19
|
"dev": "tsup src/index.ts --format cjs,esm --dts --watch"
|
package/readme.md
CHANGED
|
@@ -1,18 +1,74 @@
|
|
|
1
|
-
# 🚀 React Performance Advisor
|
|
1
|
+
# 🚀 React Performance Advisor
|
|
2
2
|
|
|
3
|
-
An enterprise-grade React performance monitoring tool powered by AI.
|
|
3
|
+
An enterprise-grade React performance monitoring tool powered by AI.
|
|
4
4
|
|
|
5
|
-
React Performance Advisor acts as an "X-ray machine" for your React applications. It hooks directly into React's native rendering engine to catch unnecessary re-renders, prop instability, and main-thread blocking, and then uses Gemini AI to instantly write the code to fix them.
|
|
5
|
+
React Performance Advisor acts as an "X-ray machine" for your React applications. It hooks directly into React's native rendering engine to catch unnecessary re-renders, prop instability, and main-thread blocking, and then uses Gemini AI to instantly write the code to fix them.
|
|
6
6
|
|
|
7
|
-
## ✨ Features
|
|
7
|
+
## ✨ Features
|
|
8
8
|
|
|
9
|
-
* **🧠 AI-Powered Diagnosis:** Automatically streams context (render counts, lag time, changed props) to Gemini AI to generate exact `useMemo`, `useCallback`, or `React.memo` code fixes.
|
|
10
|
-
* **⏱️ Millisecond Lag Tracking:** Utilizes React's native `<Profiler>` to catch components taking >16ms to render, identifying main-thread blocking.
|
|
11
|
-
* **🔍 Deep Prop Tracking:** Performs strict equality checks to catch "Object/Function Reference Traps" causing silent cascading re-renders.
|
|
12
|
-
* **📦 Smart Aggregation:** Groups identical bugs across massive lists/grids into a single, clean UI warning to prevent log spam.
|
|
13
|
-
* **🔒 Secure & Local:** Your Gemini API key is stored securely in your browser's Local Storage. It never touches your source code.
|
|
9
|
+
* **🧠 AI-Powered Diagnosis:** Automatically streams context (render counts, lag time, changed props) to Gemini AI to generate exact `useMemo`, `useCallback`, or `React.memo` code fixes.
|
|
10
|
+
* **⏱️ Millisecond Lag Tracking:** Utilizes React's native `<Profiler>` to catch components taking >16ms to render, identifying main-thread blocking.
|
|
11
|
+
* **🔍 Deep Prop Tracking:** Performs strict equality checks to catch "Object/Function Reference Traps" causing silent cascading re-renders.
|
|
12
|
+
* **📦 Smart Aggregation:** Groups identical bugs across massive lists/grids into a single, clean UI warning to prevent log spam.
|
|
13
|
+
* **🔒 Secure & Local:** Your Gemini API key is stored securely in your browser's Local Storage. It never touches your source code.
|
|
14
14
|
|
|
15
|
-
## 📦 Installation
|
|
15
|
+
## 📦 Installation
|
|
16
16
|
|
|
17
|
-
```bash
|
|
18
|
-
npm install react-performance-advisor
|
|
17
|
+
```bash
|
|
18
|
+
npm install react-performance-advisor
|
|
19
|
+
|
|
20
|
+
## 🛠️ Quick Start
|
|
21
|
+
|
|
22
|
+
### 1\. Wrap your suspect components
|
|
23
|
+
|
|
24
|
+
Import `PerformanceAdvisor` and wrap it around any component you want to monitor. Give it a unique `id`.
|
|
25
|
+
|
|
26
|
+
TypeScript
|
|
27
|
+
|
|
28
|
+
import { PerformanceAdvisor } from 'react-performance-advisor';
|
|
29
|
+
import { MyHeavyComponent } from './MyHeavyComponent';
|
|
30
|
+
|
|
31
|
+
function App() {
|
|
32
|
+
return (
|
|
33
|
+
<div>
|
|
34
|
+
<h1>My Dashboard</h1>
|
|
35
|
+
|
|
36
|
+
{/* 1. Wrap the component you want to monitor */}
|
|
37
|
+
<PerformanceAdvisor id="HeavyDashboard">
|
|
38
|
+
<MyHeavyComponent data={someData} />
|
|
39
|
+
</PerformanceAdvisor>
|
|
40
|
+
|
|
41
|
+
</div>
|
|
42
|
+
);
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
### 2\. Add the AI Panel
|
|
46
|
+
|
|
47
|
+
Drop the `PerformanceAdvisorPanel` anywhere in your top-level `App.tsx` file.
|
|
48
|
+
|
|
49
|
+
TypeScript
|
|
50
|
+
|
|
51
|
+
import { PerformanceAdvisorPanel } from 'react-performance-advisor';
|
|
52
|
+
|
|
53
|
+
function App() {
|
|
54
|
+
return (
|
|
55
|
+
<div>
|
|
56
|
+
{/* ... your app code ... */}
|
|
57
|
+
|
|
58
|
+
{/* 2. Drop the panel at the bottom of your app */}
|
|
59
|
+
<PerformanceAdvisorPanel />
|
|
60
|
+
</div>
|
|
61
|
+
);
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
### 3\. Diagnose!
|
|
65
|
+
|
|
66
|
+
1. Run your app in development mode.
|
|
67
|
+
2. Interact with your app. If a monitored component re-renders unnecessarily or lags, a warning will pop up in the floating panel.
|
|
68
|
+
3. Click **"✨ Ask AI How to Fix This"**.
|
|
69
|
+
4. Enter your Gemini API Key when prompted (it will be saved locally).
|
|
70
|
+
5. Copy and paste the AI's optimized code directly into your editor!
|
|
71
|
+
|
|
72
|
+
## ⚠️ Note on React Strict Mode
|
|
73
|
+
|
|
74
|
+
If you are running React 18+ in Development Mode with `<React.StrictMode>`, React intentionally double-renders components to catch side effects. This tool will accurately report both renders. To see true single-render metrics, temporarily disable Strict Mode in your `main.tsx` or `index.tsx`.
|