@0x1f320.sh/why-did-you-render-mcp 1.0.0-dev.5 → 1.0.0-dev.7

package/README.md

@@ -126,6 +126,7 @@ Browser (project-b) ──┤
 - **Multiple MCP instances** can run simultaneously. Only the first instance starts the WebSocket server; others gracefully skip. All instances share the same JSONL data directory.
 - **Multi-project support** — Each project is identified by `location.origin`. Render data is stored in per-project JSONL files.
 - **No daemon required** — Each MCP instance is independent. The WebSocket server is opportunistically claimed by whichever instance starts first.
+- **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.
 
 ## Configuration
 

package/dist/client/index.cjs

@@ -1,6 +1,52 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 //#region src/client/utils/describe-value.ts
 const MAX_DEPTH = 8;
+const REACT_ELEMENT_SYMBOL = Symbol.for("react.element");
+const REACT_TRANSITIONAL_ELEMENT_SYMBOL = Symbol.for("react.transitional.element");
+const REACT_MEMO_TYPE = Symbol.for("react.memo");
+const REACT_FORWARD_REF_TYPE = Symbol.for("react.forward_ref");
+function isReactElement(value) {
+	if (typeof value !== "object" || value === null) return false;
+	const v = value;
+	return v.$$typeof === REACT_ELEMENT_SYMBOL || v.$$typeof === REACT_TRANSITIONAL_ELEMENT_SYMBOL || v.$$typeof === 60103;
+}
+function resolveComponentInfo(type) {
+	let memo = false;
+	let forwardRef = false;
+	let current = type;
+	for (let i = 0; i < 5; i++) {
+		if (typeof current !== "object" || current === null) break;
+		const wrapper = current;
+		if (wrapper.$$typeof === REACT_MEMO_TYPE) {
+			memo = true;
+			current = wrapper.type;
+		} else if (wrapper.$$typeof === REACT_FORWARD_REF_TYPE) {
+			forwardRef = true;
+			current = wrapper.render;
+		} else break;
+	}
+	let name = "Unknown";
+	if (typeof current === "string") name = current;
+	else if (typeof current === "function") name = current.displayName || current.name || "Anonymous";
+	return {
+		name,
+		memo,
+		forwardRef
+	};
+}
+function serializeReactElement(el, seen, depth) {
+	const component = resolveComponentInfo(el.type);
+	const props = {};
+	if (el.props && typeof el.props === "object") for (const key of Object.keys(el.props)) {
+		if (key === "children") continue;
+		props[key] = serialize(el.props[key], seen, depth + 1);
+	}
+	return {
+		type: "react-node",
+		component,
+		props
+	};
+}
 function serialize(value, seen, depth) {
 	if (value === null) return null;
 	if (value === void 0) return null;
@@ -21,6 +67,7 @@ function serialize(value, seen, depth) {
 	if (seen.has(value)) return "[Circular]";
 	if (depth >= MAX_DEPTH) return "[MaxDepth]";
 	seen.add(value);
+	if (isReactElement(value)) return serializeReactElement(value, seen, depth);
 	if (Array.isArray(value)) return value.map((item) => serialize(item, seen, depth + 1));
 	const ctorName = Object.getPrototypeOf(value)?.constructor?.name;
 	if (ctorName && ctorName !== "Object") {

package/dist/client/index.js

@@ -1,5 +1,51 @@
 //#region src/client/utils/describe-value.ts
 const MAX_DEPTH = 8;
+const REACT_ELEMENT_SYMBOL = Symbol.for("react.element");
+const REACT_TRANSITIONAL_ELEMENT_SYMBOL = Symbol.for("react.transitional.element");
+const REACT_MEMO_TYPE = Symbol.for("react.memo");
+const REACT_FORWARD_REF_TYPE = Symbol.for("react.forward_ref");
+function isReactElement(value) {
+	if (typeof value !== "object" || value === null) return false;
+	const v = value;
+	return v.$$typeof === REACT_ELEMENT_SYMBOL || v.$$typeof === REACT_TRANSITIONAL_ELEMENT_SYMBOL || v.$$typeof === 60103;
+}
+function resolveComponentInfo(type) {
+	let memo = false;
+	let forwardRef = false;
+	let current = type;
+	for (let i = 0; i < 5; i++) {
+		if (typeof current !== "object" || current === null) break;
+		const wrapper = current;
+		if (wrapper.$$typeof === REACT_MEMO_TYPE) {
+			memo = true;
+			current = wrapper.type;
+		} else if (wrapper.$$typeof === REACT_FORWARD_REF_TYPE) {
+			forwardRef = true;
+			current = wrapper.render;
+		} else break;
+	}
+	let name = "Unknown";
+	if (typeof current === "string") name = current;
+	else if (typeof current === "function") name = current.displayName || current.name || "Anonymous";
+	return {
+		name,
+		memo,
+		forwardRef
+	};
+}
+function serializeReactElement(el, seen, depth) {
+	const component = resolveComponentInfo(el.type);
+	const props = {};
+	if (el.props && typeof el.props === "object") for (const key of Object.keys(el.props)) {
+		if (key === "children") continue;
+		props[key] = serialize(el.props[key], seen, depth + 1);
+	}
+	return {
+		type: "react-node",
+		component,
+		props
+	};
+}
 function serialize(value, seen, depth) {
 	if (value === null) return null;
 	if (value === void 0) return null;
@@ -20,6 +66,7 @@ function serialize(value, seen, depth) {
 	if (seen.has(value)) return "[Circular]";
 	if (depth >= MAX_DEPTH) return "[MaxDepth]";
 	seen.add(value);
+	if (isReactElement(value)) return serializeReactElement(value, seen, depth);
 	if (Array.isArray(value)) return value.map((item) => serialize(item, seen, depth + 1));
 	const ctorName = Object.getPrototypeOf(value)?.constructor?.name;
 	if (ctorName && ctorName !== "Object") {

package/dist/server/index.js

@@ -2,14 +2,107 @@
 import { McpServer } from "@modelcontextprotocol/sdk/server/mcp.js";
 import { StdioServerTransport } from "@modelcontextprotocol/sdk/server/stdio.js";
 import { z } from "zod";
-import { appendFileSync, existsSync, mkdirSync, readFileSync, readdirSync, unlinkSync } from "node:fs";
+import { existsSync, mkdirSync, readFileSync, readdirSync, unlinkSync, writeFileSync } from "node:fs";
 import { homedir } from "node:os";
 import { join } from "node:path";
+import xxhash from "xxhash-wasm";
 import { WebSocketServer } from "ws";
+//#region src/server/store/utils/value-dict.ts
+const DICT_KEY = "@@dict";
+const REF_PREFIX = "@@ref:";
+let h64ToString;
+const ready = xxhash().then((api) => {
+	h64ToString = api.h64ToString;
+});
+function ensureReady() {
+	return ready;
+}
+function hashValue(value) {
+	return h64ToString(JSON.stringify(value));
+}
+function shouldDehydrate(value) {
+	return typeof value === "object" && value !== null;
+}
+function dehydrateDiffs(diffs, dict) {
+	if (!diffs) return false;
+	return diffs.map((d) => {
+		let { prevValue, nextValue } = d;
+		if (shouldDehydrate(prevValue)) {
+			const hash = hashValue(prevValue);
+			dict[hash] ??= prevValue;
+			prevValue = `${REF_PREFIX}${hash}`;
+		}
+		if (shouldDehydrate(nextValue)) {
+			const hash = hashValue(nextValue);
+			dict[hash] ??= nextValue;
+			nextValue = `${REF_PREFIX}${hash}`;
+		}
+		return prevValue === d.prevValue && nextValue === d.nextValue ? d : {
+			...d,
+			prevValue,
+			nextValue
+		};
+	});
+}
+function dehydrate(render, dict) {
+	const { propsDifferences, stateDifferences, hookDifferences } = render.reason;
+	const newProps = dehydrateDiffs(propsDifferences, dict);
+	const newState = dehydrateDiffs(stateDifferences, dict);
+	const newHooks = dehydrateDiffs(hookDifferences, dict);
+	if (newProps === propsDifferences && newState === stateDifferences && newHooks === hookDifferences) return render;
+	return {
+		...render,
+		reason: {
+			propsDifferences: newProps,
+			stateDifferences: newState,
+			hookDifferences: newHooks
+		}
+	};
+}
+function hydrateDiffs(diffs, dict) {
+	if (!diffs) return false;
+	return diffs.map((d) => {
+		let { prevValue, nextValue } = d;
+		if (typeof prevValue === "string" && prevValue.startsWith(REF_PREFIX)) prevValue = dict[prevValue.slice(6)] ?? prevValue;
+		if (typeof nextValue === "string" && nextValue.startsWith(REF_PREFIX)) nextValue = dict[nextValue.slice(6)] ?? nextValue;
+		return prevValue === d.prevValue && nextValue === d.nextValue ? d : {
+			...d,
+			prevValue,
+			nextValue
+		};
+	});
+}
+function hydrate(render, dict) {
+	const { propsDifferences, stateDifferences, hookDifferences } = render.reason;
+	const newProps = hydrateDiffs(propsDifferences, dict);
+	const newState = hydrateDiffs(stateDifferences, dict);
+	const newHooks = hydrateDiffs(hookDifferences, dict);
+	if (newProps === propsDifferences && newState === stateDifferences && newHooks === hookDifferences) return render;
+	return {
+		...render,
+		reason: {
+			propsDifferences: newProps,
+			stateDifferences: newState,
+			hookDifferences: newHooks
+		}
+	};
+}
+//#endregion
 //#region src/server/store/utils/read-jsonl.ts
 function readJsonl(file) {
 	if (!existsSync(file)) return [];
-	return readFileSync(file, "utf-8").split("\n").filter(Boolean).map((line) => JSON.parse(line));
+	const lines = readFileSync(file, "utf-8").split("\n").filter(Boolean);
+	if (lines.length === 0) return [];
+	let dict;
+	let startIdx = 0;
+	const first = JSON.parse(lines[0]);
+	if ("@@dict" in first) {
+		dict = first[DICT_KEY];
+		startIdx = 1;
+	}
+	const renders = lines.slice(startIdx).map((l) => JSON.parse(l));
+	if (!dict) return renders;
+	return renders.map((r) => hydrate(r, dict));
 }
 //#endregion
 //#region src/server/store/utils/sanitize-project-id.ts
@@ -34,6 +127,7 @@ var RenderStore = class {
 	dir;
 	buffers = /* @__PURE__ */ new Map();
 	timers = /* @__PURE__ */ new Map();
+	dicts = /* @__PURE__ */ new Map();
 	constructor(dir) {
 		this.dir = dir ?? join(homedir(), ".wdyr-mcp", "renders");
 		mkdirSync(this.dir, { recursive: true });
@@ -52,7 +146,14 @@ var RenderStore = class {
 		buf.push(stored);
 		const existing = this.timers.get(projectId);
 		if (existing) clearTimeout(existing);
-		this.timers.set(projectId, setTimeout(() => this.flush(projectId), FLUSH_DELAY_MS));
+		this.timers.set(projectId, setTimeout(() => {
+			this.flushAsync(projectId).catch((err) => console.error(`[wdyr-mcp] flush error for ${projectId}:`, err));
+		}, FLUSH_DELAY_MS));
+	}
+	async flushAsync(projectId) {
+		await ensureReady();
+		if (projectId) this.flushProject(projectId);
+		else for (const id of this.buffers.keys()) this.flushProject(id);
 	}
 	flush(projectId) {
 		if (projectId) this.flushProject(projectId);
@@ -61,8 +162,17 @@ var RenderStore = class {
 	flushProject(projectId) {
 		const buf = this.buffers.get(projectId);
 		if (!buf || buf.length === 0) return;
-		const lines = buf.map((s) => JSON.stringify(s)).join("\n");
-		appendFileSync(this.projectFile(projectId), `${lines}\n`);
+		let dict = this.dicts.get(projectId);
+		if (!dict) {
+			dict = {};
+			this.dicts.set(projectId, dict);
+		}
+		const dehydrated = buf.map((r) => dehydrate(r, dict));
+		const file = this.projectFile(projectId);
+		const existingLines = this.readDataLines(file);
+		const newLines = dehydrated.map((r) => JSON.stringify(r));
+		const allDataLines = [...existingLines, ...newLines];
+		writeFileSync(file, `${(Object.keys(dict).length > 0 ? [JSON.stringify({ [DICT_KEY]: dict }), ...allDataLines] : allDataLines).join("\n")}\n`);
 		buf.length = 0;
 		const timer = this.timers.get(projectId);
 		if (timer) {
@@ -70,6 +180,14 @@ var RenderStore = class {
 			this.timers.delete(projectId);
 		}
 	}
+	readDataLines(file) {
+		if (!existsSync(file)) return [];
+		return readFileSync(file, "utf-8").split("\n").filter((line) => {
+			if (!line) return false;
+			if (line.startsWith(`{"@@dict"`)) return false;
+			return true;
+		});
+	}
 	getAllRenders(projectId) {
 		this.flush(projectId);
 		if (projectId) return readJsonl(this.projectFile(projectId)).map(toResult);
@@ -81,6 +199,7 @@ var RenderStore = class {
 	clearRenders(projectId) {
 		if (projectId) {
 			this.buffers.delete(projectId);
+			this.dicts.delete(projectId);
 			const timer = this.timers.get(projectId);
 			if (timer) {
 				clearTimeout(timer);
@@ -92,6 +211,7 @@ var RenderStore = class {
 			for (const [id, timer] of this.timers) clearTimeout(timer);
 			this.buffers.clear();
 			this.timers.clear();
+			this.dicts.clear();
 			for (const f of this.jsonlFiles()) unlinkSync(join(this.dir, f));
 		}
 	}
@@ -99,10 +219,14 @@ var RenderStore = class {
 		this.flush();
 		const projects = /* @__PURE__ */ new Set();
 		for (const f of this.jsonlFiles()) {
-			const firstLine = readFileSync(join(this.dir, f), "utf-8").split("\n")[0];
-			if (!firstLine) continue;
-			const stored = JSON.parse(firstLine);
-			projects.add(stored.projectId);
+			const lines = readFileSync(join(this.dir, f), "utf-8").split("\n");
+			for (const line of lines) {
+				if (!line) continue;
+				const parsed = JSON.parse(line);
+				if ("@@dict" in parsed) continue;
+				projects.add(parsed.projectId);
+				break;
+			}
 		}
 		return [...projects];
 	}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@0x1f320.sh/why-did-you-render-mcp",
-  "version": "1.0.0-dev.5",
+  "version": "1.0.0-dev.7",
   "type": "module",
   "description": "MCP server that collects why-did-you-render data from browser and exposes it to coding agents",
   "license": "MIT",
@@ -50,6 +50,7 @@
   "dependencies": {
     "@modelcontextprotocol/sdk": "^1.12.1",
     "ws": "^8.18.0",
+    "xxhash-wasm": "^1.1.0",
     "zod": "^3.24.4"
   },
   "devDependencies": {