@0x1f320.sh/why-did-you-render-mcp 1.0.0-dev.4 → 1.0.0-dev.6
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/dist/client/index.cjs +110 -8
- package/dist/client/index.js +110 -8
- package/package.json +1 -1
package/dist/client/index.cjs
CHANGED
|
@@ -1,14 +1,116 @@
|
|
|
1
1
|
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
2
2
|
//#region src/client/utils/describe-value.ts
|
|
3
|
+
const MAX_DEPTH = 8;
|
|
4
|
+
const REACT_ELEMENT_SYMBOL = Symbol.for("react.element");
|
|
5
|
+
const REACT_TRANSITIONAL_ELEMENT_SYMBOL = Symbol.for("react.transitional.element");
|
|
6
|
+
const REACT_MEMO_TYPE = Symbol.for("react.memo");
|
|
7
|
+
const REACT_FORWARD_REF_TYPE = Symbol.for("react.forward_ref");
|
|
8
|
+
function isReactElement(value) {
|
|
9
|
+
if (typeof value !== "object" || value === null) return false;
|
|
10
|
+
const v = value;
|
|
11
|
+
return v.$$typeof === REACT_ELEMENT_SYMBOL || v.$$typeof === REACT_TRANSITIONAL_ELEMENT_SYMBOL || v.$$typeof === 60103;
|
|
12
|
+
}
|
|
13
|
+
function resolveComponentInfo(type) {
|
|
14
|
+
let memo = false;
|
|
15
|
+
let forwardRef = false;
|
|
16
|
+
let current = type;
|
|
17
|
+
for (let i = 0; i < 5; i++) {
|
|
18
|
+
if (typeof current !== "object" || current === null) break;
|
|
19
|
+
const wrapper = current;
|
|
20
|
+
if (wrapper.$$typeof === REACT_MEMO_TYPE) {
|
|
21
|
+
memo = true;
|
|
22
|
+
current = wrapper.type;
|
|
23
|
+
} else if (wrapper.$$typeof === REACT_FORWARD_REF_TYPE) {
|
|
24
|
+
forwardRef = true;
|
|
25
|
+
current = wrapper.render;
|
|
26
|
+
} else break;
|
|
27
|
+
}
|
|
28
|
+
let name = "Unknown";
|
|
29
|
+
if (typeof current === "string") name = current;
|
|
30
|
+
else if (typeof current === "function") name = current.displayName || current.name || "Anonymous";
|
|
31
|
+
return {
|
|
32
|
+
name,
|
|
33
|
+
memo,
|
|
34
|
+
forwardRef
|
|
35
|
+
};
|
|
36
|
+
}
|
|
37
|
+
function serializeReactElement(el, seen, depth) {
|
|
38
|
+
const component = resolveComponentInfo(el.type);
|
|
39
|
+
const props = {};
|
|
40
|
+
if (el.props && typeof el.props === "object") for (const key of Object.keys(el.props)) {
|
|
41
|
+
if (key === "children") continue;
|
|
42
|
+
props[key] = serialize(el.props[key], seen, depth + 1);
|
|
43
|
+
}
|
|
44
|
+
return {
|
|
45
|
+
type: "react-node",
|
|
46
|
+
component,
|
|
47
|
+
props
|
|
48
|
+
};
|
|
49
|
+
}
|
|
50
|
+
function serialize(value, seen, depth) {
|
|
51
|
+
if (value === null) return null;
|
|
52
|
+
if (value === void 0) return null;
|
|
53
|
+
if (typeof value === "function") return {
|
|
54
|
+
type: "function",
|
|
55
|
+
name: value.name || "anonymous"
|
|
56
|
+
};
|
|
57
|
+
if (typeof value === "boolean") return value;
|
|
58
|
+
if (typeof value === "number") {
|
|
59
|
+
if (Number.isNaN(value)) return "NaN";
|
|
60
|
+
if (!Number.isFinite(value)) return value > 0 ? "Infinity" : "-Infinity";
|
|
61
|
+
if (Object.is(value, -0)) return "-0";
|
|
62
|
+
return value;
|
|
63
|
+
}
|
|
64
|
+
if (typeof value === "string") return value;
|
|
65
|
+
if (typeof value === "bigint") return value.toString();
|
|
66
|
+
if (typeof value === "symbol") return value.toString();
|
|
67
|
+
if (seen.has(value)) return "[Circular]";
|
|
68
|
+
if (depth >= MAX_DEPTH) return "[MaxDepth]";
|
|
69
|
+
seen.add(value);
|
|
70
|
+
if (isReactElement(value)) return serializeReactElement(value, seen, depth);
|
|
71
|
+
if (Array.isArray(value)) return value.map((item) => serialize(item, seen, depth + 1));
|
|
72
|
+
const ctorName = Object.getPrototypeOf(value)?.constructor?.name;
|
|
73
|
+
if (ctorName && ctorName !== "Object") {
|
|
74
|
+
if (value instanceof Date) return value.toISOString();
|
|
75
|
+
if (value instanceof RegExp) return String(value);
|
|
76
|
+
if (value instanceof Map) {
|
|
77
|
+
const entries = {};
|
|
78
|
+
for (const [k, v] of value.entries()) entries[String(k)] = serialize(v, seen, depth + 1);
|
|
79
|
+
return {
|
|
80
|
+
type: "Map",
|
|
81
|
+
entries
|
|
82
|
+
};
|
|
83
|
+
}
|
|
84
|
+
if (value instanceof Set) return {
|
|
85
|
+
type: "Set",
|
|
86
|
+
values: [...value].map((v) => serialize(v, seen, depth + 1))
|
|
87
|
+
};
|
|
88
|
+
if (value instanceof Promise) return "Promise";
|
|
89
|
+
if (value instanceof Error) return {
|
|
90
|
+
type: "Error",
|
|
91
|
+
name: value.name,
|
|
92
|
+
message: value.message
|
|
93
|
+
};
|
|
94
|
+
if (typeof Node !== "undefined" && value instanceof Node && value instanceof Element) {
|
|
95
|
+
const attrs = {};
|
|
96
|
+
for (const attr of value.attributes) attrs[attr.name] = attr.value;
|
|
97
|
+
return {
|
|
98
|
+
type: "dom",
|
|
99
|
+
tagName: value.tagName.toLowerCase(),
|
|
100
|
+
attrs
|
|
101
|
+
};
|
|
102
|
+
}
|
|
103
|
+
return {
|
|
104
|
+
type: "class",
|
|
105
|
+
name: ctorName
|
|
106
|
+
};
|
|
107
|
+
}
|
|
108
|
+
const result = {};
|
|
109
|
+
for (const key of Object.keys(value)) result[key] = serialize(value[key], seen, depth + 1);
|
|
110
|
+
return result;
|
|
111
|
+
}
|
|
3
112
|
function describeValue(value) {
|
|
4
|
-
|
|
5
|
-
if (value === void 0) return "undefined";
|
|
6
|
-
if (typeof value === "function") return `function ${value.name || "anonymous"}`;
|
|
7
|
-
if (typeof value !== "object") return String(value);
|
|
8
|
-
if (Array.isArray(value)) return `Array(${value.length})`;
|
|
9
|
-
const name = Object.getPrototypeOf(value)?.constructor?.name;
|
|
10
|
-
if (name && name !== "Object") return name;
|
|
11
|
-
return "Object";
|
|
113
|
+
return serialize(value, /* @__PURE__ */ new WeakSet(), 0);
|
|
12
114
|
}
|
|
13
115
|
//#endregion
|
|
14
116
|
//#region src/client/utils/sanitize-differences.ts
|
package/dist/client/index.js
CHANGED
|
@@ -1,13 +1,115 @@
|
|
|
1
1
|
//#region src/client/utils/describe-value.ts
|
|
2
|
+
const MAX_DEPTH = 8;
|
|
3
|
+
const REACT_ELEMENT_SYMBOL = Symbol.for("react.element");
|
|
4
|
+
const REACT_TRANSITIONAL_ELEMENT_SYMBOL = Symbol.for("react.transitional.element");
|
|
5
|
+
const REACT_MEMO_TYPE = Symbol.for("react.memo");
|
|
6
|
+
const REACT_FORWARD_REF_TYPE = Symbol.for("react.forward_ref");
|
|
7
|
+
function isReactElement(value) {
|
|
8
|
+
if (typeof value !== "object" || value === null) return false;
|
|
9
|
+
const v = value;
|
|
10
|
+
return v.$$typeof === REACT_ELEMENT_SYMBOL || v.$$typeof === REACT_TRANSITIONAL_ELEMENT_SYMBOL || v.$$typeof === 60103;
|
|
11
|
+
}
|
|
12
|
+
function resolveComponentInfo(type) {
|
|
13
|
+
let memo = false;
|
|
14
|
+
let forwardRef = false;
|
|
15
|
+
let current = type;
|
|
16
|
+
for (let i = 0; i < 5; i++) {
|
|
17
|
+
if (typeof current !== "object" || current === null) break;
|
|
18
|
+
const wrapper = current;
|
|
19
|
+
if (wrapper.$$typeof === REACT_MEMO_TYPE) {
|
|
20
|
+
memo = true;
|
|
21
|
+
current = wrapper.type;
|
|
22
|
+
} else if (wrapper.$$typeof === REACT_FORWARD_REF_TYPE) {
|
|
23
|
+
forwardRef = true;
|
|
24
|
+
current = wrapper.render;
|
|
25
|
+
} else break;
|
|
26
|
+
}
|
|
27
|
+
let name = "Unknown";
|
|
28
|
+
if (typeof current === "string") name = current;
|
|
29
|
+
else if (typeof current === "function") name = current.displayName || current.name || "Anonymous";
|
|
30
|
+
return {
|
|
31
|
+
name,
|
|
32
|
+
memo,
|
|
33
|
+
forwardRef
|
|
34
|
+
};
|
|
35
|
+
}
|
|
36
|
+
function serializeReactElement(el, seen, depth) {
|
|
37
|
+
const component = resolveComponentInfo(el.type);
|
|
38
|
+
const props = {};
|
|
39
|
+
if (el.props && typeof el.props === "object") for (const key of Object.keys(el.props)) {
|
|
40
|
+
if (key === "children") continue;
|
|
41
|
+
props[key] = serialize(el.props[key], seen, depth + 1);
|
|
42
|
+
}
|
|
43
|
+
return {
|
|
44
|
+
type: "react-node",
|
|
45
|
+
component,
|
|
46
|
+
props
|
|
47
|
+
};
|
|
48
|
+
}
|
|
49
|
+
function serialize(value, seen, depth) {
|
|
50
|
+
if (value === null) return null;
|
|
51
|
+
if (value === void 0) return null;
|
|
52
|
+
if (typeof value === "function") return {
|
|
53
|
+
type: "function",
|
|
54
|
+
name: value.name || "anonymous"
|
|
55
|
+
};
|
|
56
|
+
if (typeof value === "boolean") return value;
|
|
57
|
+
if (typeof value === "number") {
|
|
58
|
+
if (Number.isNaN(value)) return "NaN";
|
|
59
|
+
if (!Number.isFinite(value)) return value > 0 ? "Infinity" : "-Infinity";
|
|
60
|
+
if (Object.is(value, -0)) return "-0";
|
|
61
|
+
return value;
|
|
62
|
+
}
|
|
63
|
+
if (typeof value === "string") return value;
|
|
64
|
+
if (typeof value === "bigint") return value.toString();
|
|
65
|
+
if (typeof value === "symbol") return value.toString();
|
|
66
|
+
if (seen.has(value)) return "[Circular]";
|
|
67
|
+
if (depth >= MAX_DEPTH) return "[MaxDepth]";
|
|
68
|
+
seen.add(value);
|
|
69
|
+
if (isReactElement(value)) return serializeReactElement(value, seen, depth);
|
|
70
|
+
if (Array.isArray(value)) return value.map((item) => serialize(item, seen, depth + 1));
|
|
71
|
+
const ctorName = Object.getPrototypeOf(value)?.constructor?.name;
|
|
72
|
+
if (ctorName && ctorName !== "Object") {
|
|
73
|
+
if (value instanceof Date) return value.toISOString();
|
|
74
|
+
if (value instanceof RegExp) return String(value);
|
|
75
|
+
if (value instanceof Map) {
|
|
76
|
+
const entries = {};
|
|
77
|
+
for (const [k, v] of value.entries()) entries[String(k)] = serialize(v, seen, depth + 1);
|
|
78
|
+
return {
|
|
79
|
+
type: "Map",
|
|
80
|
+
entries
|
|
81
|
+
};
|
|
82
|
+
}
|
|
83
|
+
if (value instanceof Set) return {
|
|
84
|
+
type: "Set",
|
|
85
|
+
values: [...value].map((v) => serialize(v, seen, depth + 1))
|
|
86
|
+
};
|
|
87
|
+
if (value instanceof Promise) return "Promise";
|
|
88
|
+
if (value instanceof Error) return {
|
|
89
|
+
type: "Error",
|
|
90
|
+
name: value.name,
|
|
91
|
+
message: value.message
|
|
92
|
+
};
|
|
93
|
+
if (typeof Node !== "undefined" && value instanceof Node && value instanceof Element) {
|
|
94
|
+
const attrs = {};
|
|
95
|
+
for (const attr of value.attributes) attrs[attr.name] = attr.value;
|
|
96
|
+
return {
|
|
97
|
+
type: "dom",
|
|
98
|
+
tagName: value.tagName.toLowerCase(),
|
|
99
|
+
attrs
|
|
100
|
+
};
|
|
101
|
+
}
|
|
102
|
+
return {
|
|
103
|
+
type: "class",
|
|
104
|
+
name: ctorName
|
|
105
|
+
};
|
|
106
|
+
}
|
|
107
|
+
const result = {};
|
|
108
|
+
for (const key of Object.keys(value)) result[key] = serialize(value[key], seen, depth + 1);
|
|
109
|
+
return result;
|
|
110
|
+
}
|
|
2
111
|
function describeValue(value) {
|
|
3
|
-
|
|
4
|
-
if (value === void 0) return "undefined";
|
|
5
|
-
if (typeof value === "function") return `function ${value.name || "anonymous"}`;
|
|
6
|
-
if (typeof value !== "object") return String(value);
|
|
7
|
-
if (Array.isArray(value)) return `Array(${value.length})`;
|
|
8
|
-
const name = Object.getPrototypeOf(value)?.constructor?.name;
|
|
9
|
-
if (name && name !== "Object") return name;
|
|
10
|
-
return "Object";
|
|
112
|
+
return serialize(value, /* @__PURE__ */ new WeakSet(), 0);
|
|
11
113
|
}
|
|
12
114
|
//#endregion
|
|
13
115
|
//#region src/client/utils/sanitize-differences.ts
|
package/package.json
CHANGED