@0x1f320.sh/why-did-you-render-mcp 1.1.1 → 2.0.0-dev.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 +9 -37
- package/LICENSE +0 -21
- package/README.md +0 -259
- package/dist/client/index.cjs +0 -1
- package/dist/client/index.d.cts +0 -11
- package/dist/client/index.d.ts +0 -11
- package/dist/client/index.js +0 -1
- /package/dist/{server/index.d.ts → index.d.ts} +0 -0
- /package/dist/{server/index.js → index.js} +0 -0
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@0x1f320.sh/why-did-you-render-mcp",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "2.0.0-dev.1",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"description": "MCP server that collects why-did-you-render data from browser and exposes it to coding agents",
|
|
6
6
|
"license": "MIT",
|
|
@@ -11,7 +11,8 @@
|
|
|
11
11
|
},
|
|
12
12
|
"repository": {
|
|
13
13
|
"type": "git",
|
|
14
|
-
"url": "https://github.com/0x1f320/why-did-you-render-mcp.git"
|
|
14
|
+
"url": "https://github.com/0x1f320/why-did-you-render-mcp.git",
|
|
15
|
+
"directory": "packages/server"
|
|
15
16
|
},
|
|
16
17
|
"homepage": "https://github.com/0x1f320/why-did-you-render-mcp#readme",
|
|
17
18
|
"bugs": {
|
|
@@ -25,60 +26,31 @@
|
|
|
25
26
|
"re-render"
|
|
26
27
|
],
|
|
27
28
|
"bin": {
|
|
28
|
-
"why-did-you-render-mcp": "./dist/
|
|
29
|
+
"why-did-you-render-mcp": "./dist/index.js"
|
|
29
30
|
},
|
|
30
31
|
"exports": {
|
|
31
|
-
".": "./dist/
|
|
32
|
-
"./client": {
|
|
33
|
-
"import": "./dist/client/index.js",
|
|
34
|
-
"require": "./dist/client/index.cjs"
|
|
35
|
-
}
|
|
32
|
+
".": "./dist/index.js"
|
|
36
33
|
},
|
|
37
|
-
"
|
|
38
|
-
"
|
|
39
|
-
|
|
40
|
-
}
|
|
41
|
-
},
|
|
42
|
-
"files": ["dist"],
|
|
34
|
+
"files": [
|
|
35
|
+
"dist"
|
|
36
|
+
],
|
|
43
37
|
"scripts": {
|
|
44
38
|
"build": "tsdown",
|
|
45
39
|
"dev": "tsdown --watch",
|
|
46
|
-
"check": "biome check .",
|
|
47
|
-
"check:fix": "biome check --fix .",
|
|
48
40
|
"typecheck": "tsc --noEmit",
|
|
49
41
|
"test": "vitest run",
|
|
50
42
|
"test:watch": "vitest",
|
|
51
43
|
"test:coverage": "vitest run --coverage"
|
|
52
44
|
},
|
|
53
45
|
"dependencies": {
|
|
54
|
-
"@jridgewell/trace-mapping": "^0.3.31",
|
|
55
46
|
"@modelcontextprotocol/sdk": "^1.12.1",
|
|
56
|
-
"
|
|
47
|
+
"@why-did-you-render-mcp/types": "workspace:*",
|
|
57
48
|
"socket.io": "^4.8.3",
|
|
58
49
|
"socket.io-client": "^4.8.3",
|
|
59
50
|
"xxhash-wasm": "^1.1.0",
|
|
60
51
|
"zod": "^3.24.4"
|
|
61
52
|
},
|
|
62
|
-
"devDependencies": {
|
|
63
|
-
"@biomejs/biome": "^1.9.4",
|
|
64
|
-
"@semantic-release/changelog": "^6.0.3",
|
|
65
|
-
"@semantic-release/exec": "^7.1.0",
|
|
66
|
-
"@semantic-release/git": "^10.0.1",
|
|
67
|
-
"@types/node": "^22.14.1",
|
|
68
|
-
"@vitest/coverage-v8": "^4.1.2",
|
|
69
|
-
"semantic-release": "^25.0.3",
|
|
70
|
-
"tsdown": "^0.12.4",
|
|
71
|
-
"typescript": "^5.8.3",
|
|
72
|
-
"vitest": "^4.1.2"
|
|
73
|
-
},
|
|
74
|
-
"peerDependencies": {
|
|
75
|
-
"@welldone-software/why-did-you-render": "^10.0.1"
|
|
76
|
-
},
|
|
77
|
-
"packageManager": "pnpm@10.33.0+sha512.10568bb4a6afb58c9eb3630da90cc9516417abebd3fabbe6739f0ae795728da1491e9db5a544c76ad8eb7570f5c4bb3d6c637b2cb41bfdcdb47fa823c8649319",
|
|
78
53
|
"publishConfig": {
|
|
79
54
|
"access": "public"
|
|
80
|
-
},
|
|
81
|
-
"pnpm": {
|
|
82
|
-
"ignoredBuiltDependencies": ["@biomejs/biome"]
|
|
83
55
|
}
|
|
84
56
|
}
|
package/LICENSE
DELETED
|
@@ -1,21 +0,0 @@
|
|
|
1
|
-
MIT License
|
|
2
|
-
|
|
3
|
-
Copyright (c) 2026 0x1F320 <me@0x1f320.sh>
|
|
4
|
-
|
|
5
|
-
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
-
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
-
in the Software without restriction, including without limitation the rights
|
|
8
|
-
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
-
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
-
furnished to do so, subject to the following conditions:
|
|
11
|
-
|
|
12
|
-
The above copyright notice and this permission notice shall be included in all
|
|
13
|
-
copies or substantial portions of the Software.
|
|
14
|
-
|
|
15
|
-
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
-
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
-
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
-
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
-
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
-
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
-
SOFTWARE.
|
package/README.md
DELETED
|
@@ -1,259 +0,0 @@
|
|
|
1
|
-
# why-did-you-render-mcp
|
|
2
|
-
|
|
3
|
-
[](https://www.npmjs.com/package/@0x1f320.sh/why-did-you-render-mcp)
|
|
4
|
-
[](https://github.com/0x1f320/why-did-you-render-mcp/actions/workflows/ci.yml)
|
|
5
|
-
[](https://www.npmjs.com/package/@0x1f320.sh/why-did-you-render-mcp)
|
|
6
|
-
|
|
7
|
-
An [MCP](https://modelcontextprotocol.io/) server that bridges [why-did-you-render](https://github.com/welldone-software/why-did-you-render) data from the browser to coding agents. It captures unnecessary React re-render reports in real time and exposes them as MCP tools, so agents can diagnose and fix performance issues without manual browser inspection.
|
|
8
|
-
|
|
9
|
-
## How It Works
|
|
10
|
-
|
|
11
|
-
```
|
|
12
|
-
Browser (React app)
|
|
13
|
-
│
|
|
14
|
-
│ why-did-you-render detects unnecessary re-render
|
|
15
|
-
│
|
|
16
|
-
▼
|
|
17
|
-
Client (runs in browser) ── WebSocket ──▶ MCP Server (Node.js)
|
|
18
|
-
│
|
|
19
|
-
├─ Persists to ~/.wdyr-mcp/renders/
|
|
20
|
-
│
|
|
21
|
-
▼
|
|
22
|
-
Coding Agent (Claude, etc.)
|
|
23
|
-
queries via MCP tools
|
|
24
|
-
```
|
|
25
|
-
|
|
26
|
-
The **client** runs inside your React app alongside `why-did-you-render`. Whenever an unnecessary re-render is detected, it sanitizes the render data and sends it over WebSocket to the **MCP server**. The server stores reports as JSONL files and exposes them through MCP tools that coding agents can query.
|
|
27
|
-
|
|
28
|
-
## Installation
|
|
29
|
-
|
|
30
|
-
```sh
|
|
31
|
-
npm install @0x1f320.sh/why-did-you-render-mcp@latest @welldone-software/why-did-you-render
|
|
32
|
-
```
|
|
33
|
-
|
|
34
|
-
## Setup
|
|
35
|
-
|
|
36
|
-
### 1. Configure why-did-you-render with the client
|
|
37
|
-
|
|
38
|
-
In your app's entry point (e.g. `src/main.tsx` or `src/index.tsx`), set up `why-did-you-render` with the MCP client as its notifier:
|
|
39
|
-
|
|
40
|
-
```tsx
|
|
41
|
-
import React from "react";
|
|
42
|
-
import whyDidYouRender from "@welldone-software/why-did-you-render";
|
|
43
|
-
import { buildOptions } from "@0x1f320.sh/why-did-you-render-mcp/client";
|
|
44
|
-
|
|
45
|
-
if (process.env.NODE_ENV === "development") {
|
|
46
|
-
whyDidYouRender(React, {
|
|
47
|
-
...buildOptions(),
|
|
48
|
-
trackAllPureComponents: true,
|
|
49
|
-
});
|
|
50
|
-
}
|
|
51
|
-
```
|
|
52
|
-
|
|
53
|
-
The client automatically uses `location.origin` as the project identifier and connects to `ws://localhost:4649` by default. You can customize both:
|
|
54
|
-
|
|
55
|
-
```ts
|
|
56
|
-
const { notifier } = buildOptions({
|
|
57
|
-
wsUrl: "ws://localhost:5555",
|
|
58
|
-
projectId: "my-app",
|
|
59
|
-
});
|
|
60
|
-
```
|
|
61
|
-
|
|
62
|
-
### 2. Add the MCP server to your agent
|
|
63
|
-
|
|
64
|
-
<details>
|
|
65
|
-
<summary>Claude Code</summary>
|
|
66
|
-
|
|
67
|
-
```sh
|
|
68
|
-
claude mcp add why-did-you-render -- npx -y @0x1f320.sh/why-did-you-render-mcp@latest
|
|
69
|
-
```
|
|
70
|
-
|
|
71
|
-
</details>
|
|
72
|
-
|
|
73
|
-
<details>
|
|
74
|
-
<summary>Claude Desktop</summary>
|
|
75
|
-
|
|
76
|
-
```sh
|
|
77
|
-
claude mcp add-json why-did-you-render '{"command":"npx","args":["-y","@0x1f320.sh/why-did-you-render-mcp@latest"]}' -s user
|
|
78
|
-
```
|
|
79
|
-
|
|
80
|
-
Or manually edit `~/Library/Application Support/Claude/claude_desktop_config.json` (macOS) / `%APPDATA%\Claude\claude_desktop_config.json` (Windows):
|
|
81
|
-
|
|
82
|
-
```json
|
|
83
|
-
{
|
|
84
|
-
"mcpServers": {
|
|
85
|
-
"why-did-you-render": {
|
|
86
|
-
"command": "npx",
|
|
87
|
-
"args": ["-y", "@0x1f320.sh/why-did-you-render-mcp@latest"]
|
|
88
|
-
}
|
|
89
|
-
}
|
|
90
|
-
}
|
|
91
|
-
```
|
|
92
|
-
|
|
93
|
-
</details>
|
|
94
|
-
|
|
95
|
-
<details>
|
|
96
|
-
<summary>Cursor</summary>
|
|
97
|
-
|
|
98
|
-
```sh
|
|
99
|
-
cursor --add-mcp '{"name":"why-did-you-render","command":"npx","args":["-y","@0x1f320.sh/why-did-you-render-mcp@latest"]}'
|
|
100
|
-
```
|
|
101
|
-
|
|
102
|
-
Or add to `.cursor/mcp.json` in your project:
|
|
103
|
-
|
|
104
|
-
```json
|
|
105
|
-
{
|
|
106
|
-
"mcpServers": {
|
|
107
|
-
"why-did-you-render": {
|
|
108
|
-
"command": "npx",
|
|
109
|
-
"args": ["-y", "@0x1f320.sh/why-did-you-render-mcp@latest"]
|
|
110
|
-
}
|
|
111
|
-
}
|
|
112
|
-
}
|
|
113
|
-
```
|
|
114
|
-
|
|
115
|
-
</details>
|
|
116
|
-
|
|
117
|
-
<details>
|
|
118
|
-
<summary>Windsurf</summary>
|
|
119
|
-
|
|
120
|
-
Add to `~/.codeium/windsurf/mcp_config.json`:
|
|
121
|
-
|
|
122
|
-
```json
|
|
123
|
-
{
|
|
124
|
-
"mcpServers": {
|
|
125
|
-
"why-did-you-render": {
|
|
126
|
-
"command": "npx",
|
|
127
|
-
"args": ["-y", "@0x1f320.sh/why-did-you-render-mcp@latest"]
|
|
128
|
-
}
|
|
129
|
-
}
|
|
130
|
-
}
|
|
131
|
-
```
|
|
132
|
-
|
|
133
|
-
</details>
|
|
134
|
-
|
|
135
|
-
<details>
|
|
136
|
-
<summary>VS Code (GitHub Copilot)</summary>
|
|
137
|
-
|
|
138
|
-
```sh
|
|
139
|
-
code --add-mcp '{"name":"why-did-you-render","command":"npx","args":["-y","@0x1f320.sh/why-did-you-render-mcp@latest"]}'
|
|
140
|
-
```
|
|
141
|
-
|
|
142
|
-
Or add to `.vscode/mcp.json` in your project:
|
|
143
|
-
|
|
144
|
-
```json
|
|
145
|
-
{
|
|
146
|
-
"servers": {
|
|
147
|
-
"why-did-you-render": {
|
|
148
|
-
"command": "npx",
|
|
149
|
-
"args": ["-y", "@0x1f320.sh/why-did-you-render-mcp@latest"]
|
|
150
|
-
}
|
|
151
|
-
}
|
|
152
|
-
}
|
|
153
|
-
```
|
|
154
|
-
|
|
155
|
-
</details>
|
|
156
|
-
|
|
157
|
-
### 3. Start your dev server and interact with the app
|
|
158
|
-
|
|
159
|
-
Once both the MCP server and your React dev server are running, interact with your app in the browser. The agent can now query re-render data using the MCP tools below.
|
|
160
|
-
|
|
161
|
-
## MCP Tools
|
|
162
|
-
|
|
163
|
-
| Tool | Description |
|
|
164
|
-
| --- | --- |
|
|
165
|
-
| `get_renders` | Returns all captured unnecessary re-renders, including stack traces. Optionally filter by `component` name. |
|
|
166
|
-
| `get_render_summary` | Returns a summary of re-renders grouped by component with counts and durations. |
|
|
167
|
-
| `get_commits` | Lists React commit IDs that have recorded render data. Use these IDs with `get_renders_by_commit`. |
|
|
168
|
-
| `get_renders_by_commit` | Returns all unnecessary re-renders for a specific React commit ID, including stack traces. |
|
|
169
|
-
| `get_tracked_components` | Lists components currently tracked by why-did-you-render. |
|
|
170
|
-
| `get_projects` | Lists all active projects (identified by their origin URL). |
|
|
171
|
-
| `save_snapshot` | Saves the current render summary as a named snapshot for later comparison. |
|
|
172
|
-
| `list_snapshots` | Lists all saved render snapshots with their timestamps. |
|
|
173
|
-
| `compare_snapshots` | Compares two saved render snapshots and shows per-component render count changes. |
|
|
174
|
-
| `delete_snapshot` | Deletes a saved render snapshot by name. |
|
|
175
|
-
| `wait_for_renders` | Waits for new renders after code changes (e.g. HMR), with configurable timeout. |
|
|
176
|
-
| `clear_renders` | Clears all stored render data. Optionally scope to a specific project. |
|
|
177
|
-
| `pause_renders` | Pauses render data collection in the browser. Clients stop reporting until resumed. |
|
|
178
|
-
| `resume_renders` | Resumes render data collection previously paused with `pause_renders`. |
|
|
179
|
-
|
|
180
|
-
When multiple projects are active, tools accept an optional `project` parameter (the browser's origin URL, e.g. `http://localhost:3000`). If omitted and only one project exists, it is auto-selected.
|
|
181
|
-
|
|
182
|
-
### Stack traces
|
|
183
|
-
|
|
184
|
-
Each render report includes a `stackFrames` array that traces the hook chain and component tree that triggered the re-render. The client captures a stack trace on every render update, parses it with `error-stack-parser`, filters out React/WDYR internals, and resolves bundled locations back to original source files via source maps.
|
|
185
|
-
|
|
186
|
-
Each frame has the following structure:
|
|
187
|
-
|
|
188
|
-
```ts
|
|
189
|
-
{
|
|
190
|
-
type: "hook" | "component", // "hook" for names starting with `use`, otherwise "component"
|
|
191
|
-
name: string, // e.g. "useFilter", "Dashboard"
|
|
192
|
-
location: {
|
|
193
|
-
path: string, // source file path (source-mapped when available)
|
|
194
|
-
line: number, // line number in the source file
|
|
195
|
-
},
|
|
196
|
-
}
|
|
197
|
-
```
|
|
198
|
-
|
|
199
|
-
Agents can use `stackFrames` to pinpoint the exact source location of each unnecessary re-render — navigating directly to the file and line that caused it, without requiring manual browser inspection.
|
|
200
|
-
|
|
201
|
-
### Snapshots
|
|
202
|
-
|
|
203
|
-
Snapshots let agents capture the current render summary at a point in time and compare it against a later state. This is useful for measuring whether a code change actually reduced unnecessary re-renders:
|
|
204
|
-
|
|
205
|
-
1. Call `save_snapshot` with a name (e.g. `"before-fix"`)
|
|
206
|
-
2. Make code changes and interact with the app
|
|
207
|
-
3. Call `save_snapshot` with another name (e.g. `"after-fix"`)
|
|
208
|
-
4. Call `compare_snapshots` to see per-component render count changes
|
|
209
|
-
|
|
210
|
-
Snapshots are stored as JSON files in `~/.wdyr-mcp/snapshots/`.
|
|
211
|
-
|
|
212
|
-
### HMR-aware waiting
|
|
213
|
-
|
|
214
|
-
`wait_for_renders` lets agents wait for new renders after a code change. It detects HMR (Hot Module Replacement) events from both Vite and webpack, so it knows when the browser has applied the update. This enables a workflow like:
|
|
215
|
-
|
|
216
|
-
1. Agent edits code
|
|
217
|
-
2. Agent calls `wait_for_renders` (with optional timeout)
|
|
218
|
-
3. Tool waits for HMR to complete and new renders to arrive
|
|
219
|
-
4. Returns the new render data for analysis
|
|
220
|
-
|
|
221
|
-
### Commit-level grouping
|
|
222
|
-
|
|
223
|
-
Each render report is tagged with a React **commit ID**, allowing agents to inspect which components re-rendered together in the same commit. The client tracks commits by hooking into `__REACT_DEVTOOLS_GLOBAL_HOOK__.onCommitFiberRoot`, which React calls synchronously once per commit. A typical workflow:
|
|
224
|
-
|
|
225
|
-
1. Call `get_commits` to list available commit IDs
|
|
226
|
-
2. Call `get_renders_by_commit` with a specific ID to see all renders in that commit
|
|
227
|
-
|
|
228
|
-
## Architecture
|
|
229
|
-
|
|
230
|
-
```
|
|
231
|
-
Browser (project-a) ──┐
|
|
232
|
-
Browser (project-b) ──┤
|
|
233
|
-
▼
|
|
234
|
-
MCP #1 → WS(:4649) (first instance binds, "owner")
|
|
235
|
-
MCP #2 → WS(:4649) → relay client ──▶ MCP #1
|
|
236
|
-
│
|
|
237
|
-
▼
|
|
238
|
-
~/.wdyr-mcp/
|
|
239
|
-
├─ renders/ (JSONL files, shared across instances)
|
|
240
|
-
│ ├─ http___localhost_3000.jsonl
|
|
241
|
-
│ └─ http___localhost_5173.jsonl
|
|
242
|
-
└─ snapshots/ (JSON files, named snapshots)
|
|
243
|
-
└─ before-fix.json
|
|
244
|
-
```
|
|
245
|
-
|
|
246
|
-
- **Multiple MCP instances** can run simultaneously. Only the first instance (the "owner") starts the WebSocket server; others connect as socket.io clients to relay commands (e.g. pause/resume) to the owner. All instances share the same data directories.
|
|
247
|
-
- **Multi-project support** — Each project is identified by `location.origin`. Render data is stored in per-project JSONL files.
|
|
248
|
-
- **No daemon required** — Each MCP instance is independent. The WebSocket server is opportunistically claimed by whichever instance starts first. Commands requiring WS access are relayed to the owner.
|
|
249
|
-
- **Value dictionary deduplication** — Render reports often repeat the same `prevValue`/`nextValue` objects across thousands of entries. Each JSONL file stores a content-addressed dictionary on its first line, mapping xxhash-wasm hashes to unique values. Render lines reference them via `@@ref:<hash>` sentinels instead of inlining the full object, dramatically reducing file size. Reads hydrate refs transparently.
|
|
250
|
-
|
|
251
|
-
## Configuration
|
|
252
|
-
|
|
253
|
-
| Environment Variable | Default | Description |
|
|
254
|
-
| --- | --- | --- |
|
|
255
|
-
| `WDYR_WS_PORT` | `4649` | WebSocket server port |
|
|
256
|
-
|
|
257
|
-
## License
|
|
258
|
-
|
|
259
|
-
MIT
|
package/dist/client/index.cjs
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e=Object.create,t=Object.defineProperty,n=Object.getOwnPropertyDescriptor,r=Object.getOwnPropertyNames,i=Object.getPrototypeOf,a=Object.prototype.hasOwnProperty,o=(e,i,o,s)=>{if(i&&typeof i==`object`||typeof i==`function`)for(var c=r(i),l=0,u=c.length,d;l<u;l++)d=c[l],!a.call(e,d)&&d!==o&&t(e,d,{get:(e=>i[e]).bind(null,d),enumerable:!(s=n(i,d))||s.enumerable});return e},s=(n,r,a)=>(a=n==null?{}:e(i(n)),o(r||!n||!n.__esModule?t(a,`default`,{value:n,enumerable:!0}):a,n));let c=require(`socket.io-client`),l=require(`error-stack-parser`);l=s(l);let u=require(`@jridgewell/trace-mapping`);const d=new Map;function f(e){let t=d.get(e);if(t)return t;let n=(async()=>{try{let t=await fetch(`${e}.map`);return t.ok?new u.TraceMap(await t.json()):null}catch{return null}})();return d.set(e,n),n}async function p(e,t,n){let r=await f(e);if(!r)return{path:e,line:t};let i=(0,u.originalPositionFor)(r,{line:t,column:n});return i.source?{path:i.source,line:i.line??t}:{path:e,line:t}}const m=[`whyDidYouRender`,`react-dom`,`react.development`,`react.production`,`scheduler.`,`installHook`,`console.`],h=[`trackHookChanges`,`WDYRFunctionalComponent`,`Object.notifier`,`notifier`,`console.trace`],g=new Set(`renderWithHooks.mountIndeterminateComponent.updateFunctionComponent.updateForwardRef.updateMemoComponent.updateSimpleMemoComponent.beginWork.beginWork$1.completeWork.completeUnitOfWork.performUnitOfWork.runWithFiberInDEV.callComponentInDEV.workLoopSync.workLoopConcurrent.renderRootSync.renderRootConcurrent.performWorkOnRoot.performSyncWorkOnRoot.performConcurrentWorkOnRoot.commitRoot.commitRootImpl.commitMutationEffects.commitMutationEffectsOnFiber.commitLayoutEffects.commitLayoutEffectOnFiber.flushPassiveEffects.flushPassiveEffectsImpl.flushSyncWorkAcrossRoots_impl.processRootScheduleInMicrotask.scheduleUpdateOnFiber.ensureRootIsScheduled.react_stack_bottom_frame.dispatchSetState.dispatchReducerAction.dispatchAction.mountState.updateState.mountReducer.updateReducer.mountMemo.updateMemo.mountEffect.updateEffect.mountLayoutEffect.updateLayoutEffect.mountRef.updateRef.flushWork.performWorkUntilDeadline`.split(`.`));function _(e){return m.some(t=>e.includes(t))}function v(e){return h.some(t=>e===t)}function y(e){return e.replace(/WDYR$/,``)}function b(e){let t=e.startsWith(`new `)?e.slice(4):e,n=t.lastIndexOf(`.`);return y(n>=0?t.slice(n+1):t)}function x(e){return/^use[A-Z]/.test(e)}function S(e){let t;try{t=l.default.parse(e)}catch{return[]}let n=[];for(let e of t){let t=e.fileName??``;if(!t||_(t))continue;let r=e.functionName;if(!r||v(r))continue;let i=b(r);i&&(g.has(i)||n.push({type:x(i)?`hook`:`component`,name:i,file:t,line:e.lineNumber??0,column:e.columnNumber??0}))}return n}async function C(e){let t=S(e);return t.length===0?[]:Promise.all(t.map(async e=>({type:e.type,name:e.name,location:await p(e.file,e.line,e.column)})))}const w=Symbol.for(`react.element`),T=Symbol.for(`react.transitional.element`),E=Symbol.for(`react.memo`),D=Symbol.for(`react.forward_ref`);function O(e){if(typeof e!=`object`||!e)return!1;let t=e;return t.$$typeof===w||t.$$typeof===T||t.$$typeof===60103}function k(e){let t=!1,n=!1,r=e;for(let e=0;e<5&&!(typeof r!=`object`||!r);e++){let e=r;if(e.$$typeof===E)t=!0,r=e.type;else if(e.$$typeof===D)n=!0,r=e.render;else break}let i=`Unknown`;return typeof r==`string`?i=r:typeof r==`function`&&(i=r.displayName||r.name||`Anonymous`),{name:i,memo:t,forwardRef:n}}function A(e,t,n){let r=k(e.type),i={};if(e.props&&typeof e.props==`object`)for(let r of Object.keys(e.props))r!==`children`&&(i[r]=j(e.props[r],t,n+1));return{type:`react-node`,component:r,props:i}}function j(e,t,n){if(e==null)return null;if(typeof e==`function`)return{type:`function`,name:e.name||`anonymous`};if(typeof e==`boolean`)return e;if(typeof e==`number`)return Number.isNaN(e)?`NaN`:Number.isFinite(e)?Object.is(e,-0)?`-0`:e:e>0?`Infinity`:`-Infinity`;if(typeof e==`string`)return e;if(typeof e==`bigint`||typeof e==`symbol`)return e.toString();if(t.has(e))return`[Circular]`;if(n>=8)return`[MaxDepth]`;if(t.add(e),O(e))return A(e,t,n);if(Array.isArray(e))return e.map(e=>j(e,t,n+1));let r=Object.getPrototypeOf(e)?.constructor?.name;if(r&&r!==`Object`){if(e instanceof Date)return e.toISOString();if(e instanceof RegExp)return String(e);if(e instanceof Map){let r={};for(let[i,a]of e.entries())r[String(i)]=j(a,t,n+1);return{type:`Map`,entries:r}}if(e instanceof Set)return{type:`Set`,values:[...e].map(e=>j(e,t,n+1))};if(e instanceof Promise)return`Promise`;if(e instanceof Error)return{type:`Error`,name:e.name,message:e.message};if(typeof Node<`u`&&e instanceof Node&&e instanceof Element){let t={};for(let n of e.attributes)t[n.name]=n.value;return{type:`dom`,tagName:e.tagName.toLowerCase(),attrs:t}}return{type:`class`,name:r}}let i={};for(let r of Object.keys(e))i[r]=j(e[r],t,n+1);return i}function M(e){return j(e,new WeakSet,0)}function N(e){return Array.isArray(e)?e.map(e=>({pathString:e.pathString,diffType:e.diffType,prevValue:M(e.prevValue),nextValue:M(e.nextValue)})):!1}function P(e){return{propsDifferences:N(e.propsDifferences),stateDifferences:N(e.stateDifferences),hookDifferences:N(e.hookDifferences)}}function F(e){console.log(`%c[WDYR MCP]%c ${e}`,`color: #38bdf8; font-weight: bold`,`color: inherit; font-weight: normal`)}function I(e,t){if(e==null)return;let n=e.actualDuration;if(typeof n==`number`&&n>0){let r=e.type?.displayName??e.type?.name;r&&(t[r]||(t[r]=[]),t[r].push(n))}I(e.child,t),I(e.sibling,t)}function L(e){globalThis.__REACT_DEVTOOLS_GLOBAL_HOOK__||(globalThis.__REACT_DEVTOOLS_GLOBAL_HOOK__={supportsFiber:!0,inject(){},onCommitFiberRoot(){},onCommitFiberUnmount(){}});let t=globalThis.__REACT_DEVTOOLS_GLOBAL_HOOK__,n=t.onCommitFiberRoot.bind(t);t.onCommitFiberRoot=(...t)=>{let r={},i=t[1];return i?.current&&I(i.current,r),e(r),n(...t)}}function R(e){let t={};return e.include&&(t.include=e.include.map(e=>e.source)),e.exclude&&(t.exclude=e.exclude.map(e=>e.source)),e.trackAllPureComponents!=null&&(t.trackAllPureComponents=e.trackAllPureComponents),e.trackHooks!=null&&(t.trackHooks=e.trackHooks),e.trackExtraHooks&&(t.trackExtraHooks=e.trackExtraHooks.map(([,e])=>e)),e.logOnDifferentValues!=null&&(t.logOnDifferentValues=e.logOnDifferentValues),e.logOwnerReasons!=null&&(t.logOwnerReasons=e.logOwnerReasons),t}function z(e){let{wsUrl:t,projectId:n,notifier:r,...i}=e??{},a=t??`http://localhost:4649`,o=n??globalThis.location?.origin??`default`,s=0,l={};L(e=>{s++,l=e});let u=(0,c.io)(a,{reconnection:!0,reconnectionDelay:1e3,reconnectionDelayMax:3e4,transports:[`websocket`]}),d=!1;u.on(`connect`,()=>{F(`Connected to ${a}`),e&&u.emit(`config`,R(e),o)}),u.on(`disconnect`,()=>{F(`Disconnected, reconnecting...`)}),u.on(`pause`,()=>{d=!0,F(`Render collection paused`)}),u.on(`resume`,()=>{d=!1,F(`Render collection resumed`)});try{({}).hot&&{}.hot.on(`vite:afterUpdate`,()=>{u.emit(`hmr`,o)})}catch{}try{let e=typeof module<`u`?module:void 0;e?.hot&&(e.hot.accept(),e.hot.status(e=>{e===`idle`&&u.emit(`hmr`,o)}))}catch{}let f=null,p=!1;async function m(){if(p=!1,!f||f.items.length===0)return;let e=f;f=null;let t={},n=await Promise.all(e.items.map(async({info:n,error:r})=>{let i=await C(r),a=e.durations[n.displayName],o=t[n.displayName]??0;t[n.displayName]=o+1;let s=a?.[o];return{displayName:n.displayName,reason:P(n.reason),hookName:n.hookName,...i.length>0&&{stackFrames:i},...typeof s==`number`&&{actualDuration:s}}}));u.emit(`render-batch`,n,o,e.commitId)}return{...i,notifier(e){if(d){r&&r(e);return}let t=Error();f&&f.commitId===s?f.items.push({info:e,error:t}):(f&&m(),f={commitId:s,items:[{info:e,error:t}],durations:l}),p||(p=!0,queueMicrotask(m)),r&&r(e)}}}exports.buildOptions=z;
|
package/dist/client/index.d.cts
DELETED
|
@@ -1,11 +0,0 @@
|
|
|
1
|
-
import { WhyDidYouRenderOptions } from "@welldone-software/why-did-you-render";
|
|
2
|
-
|
|
3
|
-
//#region src/client/index.d.ts
|
|
4
|
-
sideEffect();
|
|
5
|
-
interface ClientOptions extends WhyDidYouRenderOptions {
|
|
6
|
-
wsUrl?: string;
|
|
7
|
-
projectId?: string;
|
|
8
|
-
}
|
|
9
|
-
declare function buildOptions(opts?: ClientOptions): WhyDidYouRenderOptions;
|
|
10
|
-
//#endregion
|
|
11
|
-
export { ClientOptions, buildOptions };
|
package/dist/client/index.d.ts
DELETED
|
@@ -1,11 +0,0 @@
|
|
|
1
|
-
import { WhyDidYouRenderOptions } from "@welldone-software/why-did-you-render";
|
|
2
|
-
|
|
3
|
-
//#region src/client/index.d.ts
|
|
4
|
-
sideEffect();
|
|
5
|
-
interface ClientOptions extends WhyDidYouRenderOptions {
|
|
6
|
-
wsUrl?: string;
|
|
7
|
-
projectId?: string;
|
|
8
|
-
}
|
|
9
|
-
declare function buildOptions(opts?: ClientOptions): WhyDidYouRenderOptions;
|
|
10
|
-
//#endregion
|
|
11
|
-
export { ClientOptions, buildOptions };
|
package/dist/client/index.js
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
import{io as e}from"socket.io-client";import t from"error-stack-parser";import{TraceMap as n,originalPositionFor as r}from"@jridgewell/trace-mapping";const i=new Map;function a(e){let t=i.get(e);if(t)return t;let r=(async()=>{try{let t=await fetch(`${e}.map`);return t.ok?new n(await t.json()):null}catch{return null}})();return i.set(e,r),r}async function o(e,t,n){let i=await a(e);if(!i)return{path:e,line:t};let o=r(i,{line:t,column:n});return o.source?{path:o.source,line:o.line??t}:{path:e,line:t}}const s=[`whyDidYouRender`,`react-dom`,`react.development`,`react.production`,`scheduler.`,`installHook`,`console.`],c=[`trackHookChanges`,`WDYRFunctionalComponent`,`Object.notifier`,`notifier`,`console.trace`],l=new Set(`renderWithHooks.mountIndeterminateComponent.updateFunctionComponent.updateForwardRef.updateMemoComponent.updateSimpleMemoComponent.beginWork.beginWork$1.completeWork.completeUnitOfWork.performUnitOfWork.runWithFiberInDEV.callComponentInDEV.workLoopSync.workLoopConcurrent.renderRootSync.renderRootConcurrent.performWorkOnRoot.performSyncWorkOnRoot.performConcurrentWorkOnRoot.commitRoot.commitRootImpl.commitMutationEffects.commitMutationEffectsOnFiber.commitLayoutEffects.commitLayoutEffectOnFiber.flushPassiveEffects.flushPassiveEffectsImpl.flushSyncWorkAcrossRoots_impl.processRootScheduleInMicrotask.scheduleUpdateOnFiber.ensureRootIsScheduled.react_stack_bottom_frame.dispatchSetState.dispatchReducerAction.dispatchAction.mountState.updateState.mountReducer.updateReducer.mountMemo.updateMemo.mountEffect.updateEffect.mountLayoutEffect.updateLayoutEffect.mountRef.updateRef.flushWork.performWorkUntilDeadline`.split(`.`));function u(e){return s.some(t=>e.includes(t))}function d(e){return c.some(t=>e===t)}function f(e){return e.replace(/WDYR$/,``)}function p(e){let t=e.startsWith(`new `)?e.slice(4):e,n=t.lastIndexOf(`.`);return f(n>=0?t.slice(n+1):t)}function m(e){return/^use[A-Z]/.test(e)}function h(e){let n;try{n=t.parse(e)}catch{return[]}let r=[];for(let e of n){let t=e.fileName??``;if(!t||u(t))continue;let n=e.functionName;if(!n||d(n))continue;let i=p(n);i&&(l.has(i)||r.push({type:m(i)?`hook`:`component`,name:i,file:t,line:e.lineNumber??0,column:e.columnNumber??0}))}return r}async function g(e){let t=h(e);return t.length===0?[]:Promise.all(t.map(async e=>({type:e.type,name:e.name,location:await o(e.file,e.line,e.column)})))}const _=Symbol.for(`react.element`),v=Symbol.for(`react.transitional.element`),y=Symbol.for(`react.memo`),b=Symbol.for(`react.forward_ref`);function x(e){if(typeof e!=`object`||!e)return!1;let t=e;return t.$$typeof===_||t.$$typeof===v||t.$$typeof===60103}function S(e){let t=!1,n=!1,r=e;for(let e=0;e<5&&!(typeof r!=`object`||!r);e++){let e=r;if(e.$$typeof===y)t=!0,r=e.type;else if(e.$$typeof===b)n=!0,r=e.render;else break}let i=`Unknown`;return typeof r==`string`?i=r:typeof r==`function`&&(i=r.displayName||r.name||`Anonymous`),{name:i,memo:t,forwardRef:n}}function C(e,t,n){let r=S(e.type),i={};if(e.props&&typeof e.props==`object`)for(let r of Object.keys(e.props))r!==`children`&&(i[r]=w(e.props[r],t,n+1));return{type:`react-node`,component:r,props:i}}function w(e,t,n){if(e==null)return null;if(typeof e==`function`)return{type:`function`,name:e.name||`anonymous`};if(typeof e==`boolean`)return e;if(typeof e==`number`)return Number.isNaN(e)?`NaN`:Number.isFinite(e)?Object.is(e,-0)?`-0`:e:e>0?`Infinity`:`-Infinity`;if(typeof e==`string`)return e;if(typeof e==`bigint`||typeof e==`symbol`)return e.toString();if(t.has(e))return`[Circular]`;if(n>=8)return`[MaxDepth]`;if(t.add(e),x(e))return C(e,t,n);if(Array.isArray(e))return e.map(e=>w(e,t,n+1));let r=Object.getPrototypeOf(e)?.constructor?.name;if(r&&r!==`Object`){if(e instanceof Date)return e.toISOString();if(e instanceof RegExp)return String(e);if(e instanceof Map){let r={};for(let[i,a]of e.entries())r[String(i)]=w(a,t,n+1);return{type:`Map`,entries:r}}if(e instanceof Set)return{type:`Set`,values:[...e].map(e=>w(e,t,n+1))};if(e instanceof Promise)return`Promise`;if(e instanceof Error)return{type:`Error`,name:e.name,message:e.message};if(typeof Node<`u`&&e instanceof Node&&e instanceof Element){let t={};for(let n of e.attributes)t[n.name]=n.value;return{type:`dom`,tagName:e.tagName.toLowerCase(),attrs:t}}return{type:`class`,name:r}}let i={};for(let r of Object.keys(e))i[r]=w(e[r],t,n+1);return i}function T(e){return w(e,new WeakSet,0)}function E(e){return Array.isArray(e)?e.map(e=>({pathString:e.pathString,diffType:e.diffType,prevValue:T(e.prevValue),nextValue:T(e.nextValue)})):!1}function D(e){return{propsDifferences:E(e.propsDifferences),stateDifferences:E(e.stateDifferences),hookDifferences:E(e.hookDifferences)}}function O(e){console.log(`%c[WDYR MCP]%c ${e}`,`color: #38bdf8; font-weight: bold`,`color: inherit; font-weight: normal`)}function k(e,t){if(e==null)return;let n=e.actualDuration;if(typeof n==`number`&&n>0){let r=e.type?.displayName??e.type?.name;r&&(t[r]||(t[r]=[]),t[r].push(n))}k(e.child,t),k(e.sibling,t)}function A(e){globalThis.__REACT_DEVTOOLS_GLOBAL_HOOK__||(globalThis.__REACT_DEVTOOLS_GLOBAL_HOOK__={supportsFiber:!0,inject(){},onCommitFiberRoot(){},onCommitFiberUnmount(){}});let t=globalThis.__REACT_DEVTOOLS_GLOBAL_HOOK__,n=t.onCommitFiberRoot.bind(t);t.onCommitFiberRoot=(...t)=>{let r={},i=t[1];return i?.current&&k(i.current,r),e(r),n(...t)}}function j(e){let t={};return e.include&&(t.include=e.include.map(e=>e.source)),e.exclude&&(t.exclude=e.exclude.map(e=>e.source)),e.trackAllPureComponents!=null&&(t.trackAllPureComponents=e.trackAllPureComponents),e.trackHooks!=null&&(t.trackHooks=e.trackHooks),e.trackExtraHooks&&(t.trackExtraHooks=e.trackExtraHooks.map(([,e])=>e)),e.logOnDifferentValues!=null&&(t.logOnDifferentValues=e.logOnDifferentValues),e.logOwnerReasons!=null&&(t.logOwnerReasons=e.logOwnerReasons),t}function M(t){let{wsUrl:n,projectId:r,notifier:i,...a}=t??{},o=n??`http://localhost:4649`,s=r??globalThis.location?.origin??`default`,c=0,l={};A(e=>{c++,l=e});let u=e(o,{reconnection:!0,reconnectionDelay:1e3,reconnectionDelayMax:3e4,transports:[`websocket`]}),d=!1;u.on(`connect`,()=>{O(`Connected to ${o}`),t&&u.emit(`config`,j(t),s)}),u.on(`disconnect`,()=>{O(`Disconnected, reconnecting...`)}),u.on(`pause`,()=>{d=!0,O(`Render collection paused`)}),u.on(`resume`,()=>{d=!1,O(`Render collection resumed`)});try{import.meta.hot&&import.meta.hot.on(`vite:afterUpdate`,()=>{u.emit(`hmr`,s)})}catch{}try{let e=typeof module<`u`?module:void 0;e?.hot&&(e.hot.accept(),e.hot.status(e=>{e===`idle`&&u.emit(`hmr`,s)}))}catch{}let f=null,p=!1;async function m(){if(p=!1,!f||f.items.length===0)return;let e=f;f=null;let t={},n=await Promise.all(e.items.map(async({info:n,error:r})=>{let i=await g(r),a=e.durations[n.displayName],o=t[n.displayName]??0;t[n.displayName]=o+1;let s=a?.[o];return{displayName:n.displayName,reason:D(n.reason),hookName:n.hookName,...i.length>0&&{stackFrames:i},...typeof s==`number`&&{actualDuration:s}}}));u.emit(`render-batch`,n,s,e.commitId)}return{...a,notifier(e){if(d){i&&i(e);return}let t=Error();f&&f.commitId===c?f.items.push({info:e,error:t}):(f&&m(),f={commitId:c,items:[{info:e,error:t}],durations:l}),p||(p=!0,queueMicrotask(m)),i&&i(e)}}}export{M as buildOptions};
|
|
File without changes
|
|
File without changes
|