@0x1f320.sh/why-did-you-render-mcp 1.0.0-dev.8 → 1.0.0-dev.9

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.
Files changed (4) hide show
  1. package/README.md +77 -7
  2. package/dist/client/index.cjs +7 -0
  3. package/dist/client/index.js +7 -0
  4. package/package.json +3 -1
package/README.md CHANGED
@@ -1,5 +1,9 @@
1
1
  # why-did-you-render-mcp
2
2
 
3
+ [![npm version](https://img.shields.io/npm/v/@0x1f320.sh/why-did-you-render-mcp.svg?style=flat&colorA=000000&colorB=000000)](https://www.npmjs.com/package/@0x1f320.sh/why-did-you-render-mcp)
4
+ [![CI](https://img.shields.io/github/actions/workflow/status/0x1f320/why-did-you-render-mcp/ci.yml?style=flat&colorA=000000&colorB=000000)](https://github.com/0x1f320/why-did-you-render-mcp/actions/workflows/ci.yml)
5
+ [![license](https://img.shields.io/npm/l/@0x1f320.sh/why-did-you-render-mcp?style=flat&colorA=000000&colorB=000000)](https://www.npmjs.com/package/@0x1f320.sh/why-did-you-render-mcp)
6
+
3
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.
4
8
 
5
9
  ## How It Works
@@ -39,10 +43,8 @@ import whyDidYouRender from "@welldone-software/why-did-you-render";
39
43
  import { buildOptions } from "@0x1f320.sh/why-did-you-render-mcp/client";
40
44
 
41
45
  if (process.env.NODE_ENV === "development") {
42
- const { notifier } = buildOptions();
43
-
44
46
  whyDidYouRender(React, {
45
- notifier,
47
+ ...buildOptions(),
46
48
  trackAllPureComponents: true,
47
49
  });
48
50
  }
@@ -59,31 +61,99 @@ const { notifier } = buildOptions({
59
61
 
60
62
  ### 2. Add the MCP server to your agent
61
63
 
62
- Add the server to your MCP client configuration. For example, in Claude Desktop's `claude_desktop_config.json`:
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
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"]}' -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"]
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"]}'
100
+ ```
101
+
102
+ Or add to `.cursor/mcp.json` in your project:
63
103
 
64
104
  ```json
65
105
  {
66
106
  "mcpServers": {
67
107
  "why-did-you-render": {
68
108
  "command": "npx",
69
- "args": ["@0x1f320.sh/why-did-you-render-mcp"]
109
+ "args": ["-y", "@0x1f320.sh/why-did-you-render-mcp"]
70
110
  }
71
111
  }
72
112
  }
73
113
  ```
74
114
 
75
- Or if you installed it globally:
115
+ </details>
116
+
117
+ <details>
118
+ <summary>Windsurf</summary>
119
+
120
+ Add to `~/.codeium/windsurf/mcp_config.json`:
76
121
 
77
122
  ```json
78
123
  {
79
124
  "mcpServers": {
80
125
  "why-did-you-render": {
81
- "command": "why-did-you-render-mcp"
126
+ "command": "npx",
127
+ "args": ["-y", "@0x1f320.sh/why-did-you-render-mcp"]
82
128
  }
83
129
  }
84
130
  }
85
131
  ```
86
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"]}'
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"]
150
+ }
151
+ }
152
+ }
153
+ ```
154
+
155
+ </details>
156
+
87
157
  ### 3. Start your dev server and interact with the app
88
158
 
89
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.
package/dist/client/index.cjs CHANGED
@@ -135,6 +135,11 @@ function sanitizeReason(reason) {
135
135
  //#endregion
136
136
  //#region src/client/index.ts
137
137
  const DEFAULT_WS_URL = "ws://localhost:4649";
138
+ const PREFIX_STYLE = "color: #38bdf8; font-weight: bold";
139
+ const RESET_STYLE = "color: inherit; font-weight: normal";
140
+ function log(message) {
141
+ console.log(`%c[WDYR MCP]%c ${message}`, PREFIX_STYLE, RESET_STYLE);
142
+ }
138
143
  function patchDevToolsHook(onCommit) {
139
144
  if (!globalThis.__REACT_DEVTOOLS_GLOBAL_HOOK__) globalThis.__REACT_DEVTOOLS_GLOBAL_HOOK__ = {
140
145
  supportsFiber: true,
@@ -165,6 +170,7 @@ function buildOptions(opts) {
165
170
  function connect() {
166
171
  ws = new WebSocket(wsUrl);
167
172
  ws.addEventListener("open", () => {
173
+ log(`Connected to ${wsUrl}`);
168
174
  retryDelay = BASE_DELAY;
169
175
  for (const msg of queue) ws?.send(JSON.stringify(msg));
170
176
  queue = [];
@@ -175,6 +181,7 @@ function buildOptions(opts) {
175
181
  retryDelay = Math.min(retryDelay * 2, MAX_DELAY);
176
182
  });
177
183
  ws.addEventListener("error", () => {
184
+ log(`Connection failed (${wsUrl}). Retrying in ${retryDelay / 1e3}s...`);
178
185
  ws?.close();
179
186
  });
180
187
  }
package/dist/client/index.js CHANGED
@@ -134,6 +134,11 @@ function sanitizeReason(reason) {
134
134
  //#endregion
135
135
  //#region src/client/index.ts
136
136
  const DEFAULT_WS_URL = "ws://localhost:4649";
137
+ const PREFIX_STYLE = "color: #38bdf8; font-weight: bold";
138
+ const RESET_STYLE = "color: inherit; font-weight: normal";
139
+ function log(message) {
140
+ console.log(`%c[WDYR MCP]%c ${message}`, PREFIX_STYLE, RESET_STYLE);
141
+ }
137
142
  function patchDevToolsHook(onCommit) {
138
143
  if (!globalThis.__REACT_DEVTOOLS_GLOBAL_HOOK__) globalThis.__REACT_DEVTOOLS_GLOBAL_HOOK__ = {
139
144
  supportsFiber: true,
@@ -164,6 +169,7 @@ function buildOptions(opts) {
164
169
  function connect() {
165
170
  ws = new WebSocket(wsUrl);
166
171
  ws.addEventListener("open", () => {
172
+ log(`Connected to ${wsUrl}`);
167
173
  retryDelay = BASE_DELAY;
168
174
  for (const msg of queue) ws?.send(JSON.stringify(msg));
169
175
  queue = [];
@@ -174,6 +180,7 @@ function buildOptions(opts) {
174
180
  retryDelay = Math.min(retryDelay * 2, MAX_DELAY);
175
181
  });
176
182
  ws.addEventListener("error", () => {
183
+ log(`Connection failed (${wsUrl}). Retrying in ${retryDelay / 1e3}s...`);
177
184
  ws?.close();
178
185
  });
179
186
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@0x1f320.sh/why-did-you-render-mcp",
3
- "version": "1.0.0-dev.8",
3
+ "version": "1.0.0-dev.9",
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",
@@ -55,6 +55,8 @@
55
55
  },
56
56
  "devDependencies": {
57
57
  "@biomejs/biome": "^1.9.4",
58
+ "@semantic-release/changelog": "^6.0.3",
59
+ "@semantic-release/git": "^10.0.1",
58
60
  "@types/node": "^22.14.1",
59
61
  "@types/ws": "^8.18.0",
60
62
  "@vitest/coverage-v8": "^4.1.2",