react-performance-advisor 1.0.7 → 1.0.9

package/README.md

@@ -0,0 +1,113 @@
+# ⚡ React Performance Advisor
+
+> An enterprise-grade React performance monitoring tool powered by AI.
+
+**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 — then uses AI to instantly write the code to fix them.
+
+---
+
+## ✨ Features
+
+- 🧠 **AI-Powered Diagnosis** — Automatically streams context (render counts, lag time, changed props) to AI to generate exact `useMemo`, `useCallback`, or `React.memo` code fixes.
+- ⏱️ **Millisecond Lag Tracking** — Utilizes React's native `<Profiler>` to catch components taking >16ms to render, identifying main-thread blocking.
+- 🔍 **Deep Prop Tracking** — Performs strict equality checks to catch "Object/Function Reference Traps" causing silent cascading re-renders.
+- 📦 **Smart Aggregation** — Groups identical bugs across massive lists/grids into a single, clean UI warning to prevent log spam.
+- 🔒 **Secure & Local** — Your API key is stored securely in your browser's Local Storage. It never touches your source code.
+
+---
+
+## 📦 Installation
+
+```bash
+npm install react-performance-advisor
+```
+
+---
+
+## 🚀 Quick Start
+
+### 1. Wrap your suspect components
+
+Import `PerformanceAdvisor` and wrap it around any component you want to monitor. Give it a unique `id`.
+
+```tsx
+import { PerformanceAdvisor } from 'react-performance-advisor';
+import { MyHeavyComponent } from './MyHeavyComponent';
+
+function App() {
+  return (
+    <div>
+      <h1>My Dashboard</h1>
+
+      {/* Wrap the component you want to monitor */}
+      <PerformanceAdvisor id="HeavyDashboard">
+        <MyHeavyComponent data={someData} />
+      </PerformanceAdvisor>
+    </div>
+  );
+}
+```
+
+### 2. Add the AI Panel
+
+Drop the `PerformanceAdvisorPanel` anywhere in your top-level `App.tsx` file.
+
+```tsx
+import { PerformanceAdvisorPanel } from 'react-performance-advisor';
+
+function App() {
+  return (
+    <div>
+      {/* ... your app code ... */}
+
+      {/* Drop the panel at the bottom of your app */}
+      <PerformanceAdvisorPanel />
+    </div>
+  );
+}
+```
+
+### 3. Diagnose!
+
+1. Run your app in **development mode**.
+2. Interact with your app — if a monitored component re-renders unnecessarily or lags, a warning will appear in the floating panel.
+3. Click **"✨ Ask AI How to Fix This"**.
+4. Enter your API key when prompted (it will be saved locally).
+5. Copy and paste the AI's optimized code directly into your editor!
+
+---
+
+## ⚠️ Note on React Strict Mode
+
+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`:
+
+```tsx
+// Before
+root.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+);
+
+// After (for profiling)
+root.render(<App />);
+```
+
+---
+
+## 🛠️ How It Works
+
+| Step | What Happens |
+|------|-------------|
+| **Wrap** | `<PerformanceAdvisor>` attaches React's native `<Profiler>` API to your component |
+| **Detect** | On every re-render, it checks render duration and performs deep prop diffing |
+| **Report** | Issues are aggregated and surfaced in the floating `<PerformanceAdvisorPanel>` |
+| **Fix** | One click sends the context to AI, which streams back ready-to-paste code |
+
+---
+
+## 📄 License
+
+MIT © React Performance Advisor Contributors

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-performance-advisor",
-  "version": "1.0.7",
+  "version": "1.0.9",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",

package/publish.yml

@@ -0,0 +1,36 @@
+name: Publish to npm
+
+# This tells GitHub to run this script whenever you publish a new Release on GitHub
+on:
+  release:
+    types: [published]
+
+jobs:
+  build-and-publish:
+    runs-on: ubuntu-latest
+    
+    # These permissions are REQUIRED for npm's Trusted Publishers (OIDC) to work securely
+    permissions:
+      contents: read
+      id-token: write 
+
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: '20.x'
+          registry-url: 'https://registry.npmjs.org'
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Build the package
+        run: npm run build
+
+      - name: Publish to npm
+        run: npm publish --provenance --access public
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}