bippy 0.3.13 → 0.3.15
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/LICENSE +1 -1
- package/dist/chunk-DWy1uDak.cjs +47 -0
- package/dist/core-BHLOH6E0.js +744 -0
- package/dist/core-BOYfIZ0s.d.cts +293 -0
- package/dist/core-C9jPbnEc.cjs +1164 -0
- package/dist/core-CmL25iLV.d.ts +293 -0
- package/dist/core.cjs +79 -286
- package/dist/core.d.cts +2 -221
- package/dist/core.d.ts +2 -221
- package/dist/core.js +11 -2
- package/dist/experiments/inspect.cjs +1109 -1400
- package/dist/experiments/inspect.d.cts +12 -10
- package/dist/experiments/inspect.d.ts +12 -10
- package/dist/experiments/inspect.js +1101 -1385
- package/dist/index-BtBZHVmz.d.cts +1 -0
- package/dist/index-D0E78WnU.d.ts +1 -0
- package/dist/index.cjs +80 -287
- package/dist/index.d.cts +3 -5
- package/dist/index.d.ts +3 -5
- package/dist/index.iife.js +9 -0
- package/dist/index.js +12 -3
- package/dist/jsx-dev-runtime.cjs +18 -33
- package/dist/jsx-dev-runtime.d.cts +7 -6
- package/dist/jsx-dev-runtime.d.ts +7 -6
- package/dist/jsx-dev-runtime.js +17 -28
- package/dist/jsx-runtime.cjs +16 -12
- package/dist/jsx-runtime.d.cts +3 -3
- package/dist/jsx-runtime.d.ts +3 -3
- package/dist/jsx-runtime.js +12 -4
- package/dist/source-C6Kcs2bv.cjs +2438 -0
- package/dist/source-CAKKlkON.js +2446 -0
- package/dist/source.cjs +84 -300
- package/dist/source.d.cts +8 -10
- package/dist/source.d.ts +8 -10
- package/dist/source.iife.js +14 -0
- package/dist/source.js +13 -4
- package/dist/src-BMy3jWE4.cjs +14 -0
- package/dist/{chunk-H6ZLR634.js → src-CAEV45VU.js} +5 -4
- package/package.json +6 -7
- package/dist/chunk-3DXHQSXK.js +0 -788
- package/dist/chunk-4N6XEHJD.cjs +0 -859
- package/dist/chunk-AQ674A4M.cjs +0 -38
- package/dist/chunk-EPG3GO3H.js +0 -35
- package/dist/chunk-FUZZZTS6.js +0 -2255
- package/dist/chunk-NKMRHYKS.cjs +0 -2259
- package/dist/chunk-TGUPYBYL.cjs +0 -15
- package/dist/index.global.js +0 -9
- package/dist/jsx-runtime-KafG0Y8O.d.cts +0 -72
- package/dist/jsx-runtime-KafG0Y8O.d.ts +0 -72
- package/dist/source.global.js +0 -9
|
@@ -1,27 +1,21 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
-
|
|
5
|
-
var chunkNKMRHYKS_cjs = require('../chunk-NKMRHYKS.cjs');
|
|
6
|
-
require('../chunk-TGUPYBYL.cjs');
|
|
7
|
-
var chunk4N6XEHJD_cjs = require('../chunk-4N6XEHJD.cjs');
|
|
8
|
-
require('../chunk-AQ674A4M.cjs');
|
|
9
|
-
var React14 = require('react');
|
|
10
|
-
var ReactDOM = require('react-dom');
|
|
11
|
-
|
|
12
|
-
function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
|
|
13
|
-
|
|
14
|
-
var React14__default = /*#__PURE__*/_interopDefault(React14);
|
|
15
|
-
var ReactDOM__default = /*#__PURE__*/_interopDefault(ReactDOM);
|
|
16
|
-
|
|
17
1
|
/**
|
|
18
2
|
* @license bippy
|
|
19
3
|
*
|
|
20
|
-
* Copyright (c) Aiden Bai
|
|
4
|
+
* Copyright (c) Aiden Bai
|
|
21
5
|
*
|
|
22
6
|
* This source code is licensed under the MIT license found in the
|
|
23
7
|
* LICENSE file in the root directory of this source tree.
|
|
24
8
|
*/
|
|
9
|
+
Object.defineProperty(exports, '__esModule', { value: true });
|
|
10
|
+
const require_chunk = require('../chunk-DWy1uDak.cjs');
|
|
11
|
+
const require_core = require('../core-C9jPbnEc.cjs');
|
|
12
|
+
require('../src-BMy3jWE4.cjs');
|
|
13
|
+
const require_source = require('../source-C6Kcs2bv.cjs');
|
|
14
|
+
const react_jsx_runtime = require_chunk.__toESM(require("react/jsx-runtime"));
|
|
15
|
+
const react = require_chunk.__toESM(require("react"));
|
|
16
|
+
const react_dom = require_chunk.__toESM(require("react-dom"));
|
|
17
|
+
|
|
18
|
+
//#region ../../node_modules/.pnpm/react-inspector@6.0.2_react@19.0.0/node_modules/react-inspector/dist/index.mjs
|
|
25
19
|
var __create = Object.create;
|
|
26
20
|
var __defProp = Object.defineProperty;
|
|
27
21
|
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
@@ -29,1430 +23,1147 @@ var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
|
29
23
|
var __getProtoOf = Object.getPrototypeOf;
|
|
30
24
|
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
31
25
|
var __commonJS = (cb, mod) => function __require() {
|
|
32
|
-
|
|
26
|
+
return mod || (0, cb[__getOwnPropNames(cb)[0]])((mod = { exports: {} }).exports, mod), mod.exports;
|
|
33
27
|
};
|
|
34
28
|
var __export = (target, all) => {
|
|
35
|
-
|
|
36
|
-
|
|
29
|
+
for (var name in all) __defProp(target, name, {
|
|
30
|
+
get: all[name],
|
|
31
|
+
enumerable: true
|
|
32
|
+
});
|
|
37
33
|
};
|
|
38
34
|
var __copyProps = (to, from, except, desc) => {
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
35
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
36
|
+
for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
|
|
37
|
+
get: () => from[key],
|
|
38
|
+
enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
|
|
39
|
+
});
|
|
40
|
+
}
|
|
41
|
+
return to;
|
|
45
42
|
};
|
|
46
|
-
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(!mod || !mod.__esModule ? __defProp(target, "default", {
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
var
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
return typeof val.nodeType === "number" && typeof val.nodeName === "string";
|
|
74
|
-
}
|
|
75
|
-
module.exports = isNode;
|
|
76
|
-
}
|
|
77
|
-
});
|
|
43
|
+
var __toESM$1 = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
|
|
44
|
+
value: mod,
|
|
45
|
+
enumerable: true
|
|
46
|
+
}) : target, mod));
|
|
47
|
+
var require_is_object = __commonJS({ "node_modules/is-object/index.js"(exports$1, module$1) {
|
|
48
|
+
"use strict";
|
|
49
|
+
module$1.exports = function isObject(x) {
|
|
50
|
+
return typeof x === "object" && x !== null;
|
|
51
|
+
};
|
|
52
|
+
} });
|
|
53
|
+
var require_is_window = __commonJS({ "node_modules/is-window/index.js"(exports$1, module$1) {
|
|
54
|
+
"use strict";
|
|
55
|
+
module$1.exports = function(obj) {
|
|
56
|
+
if (obj == null) return false;
|
|
57
|
+
var o = Object(obj);
|
|
58
|
+
return o === o.window;
|
|
59
|
+
};
|
|
60
|
+
} });
|
|
61
|
+
var require_is_dom = __commonJS({ "node_modules/is-dom/index.js"(exports$1, module$1) {
|
|
62
|
+
var isObject = require_is_object();
|
|
63
|
+
var isWindow = require_is_window();
|
|
64
|
+
function isNode(val) {
|
|
65
|
+
if (!isObject(val) || !isWindow(window) || typeof window.Node !== "function") return false;
|
|
66
|
+
return typeof val.nodeType === "number" && typeof val.nodeName === "string";
|
|
67
|
+
}
|
|
68
|
+
module$1.exports = isNode;
|
|
69
|
+
} });
|
|
78
70
|
var themes_exports = {};
|
|
79
71
|
__export(themes_exports, {
|
|
80
|
-
|
|
81
|
-
|
|
72
|
+
chromeDark: () => theme$1,
|
|
73
|
+
chromeLight: () => theme2
|
|
82
74
|
});
|
|
83
|
-
var theme = {
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
75
|
+
var theme$1 = {
|
|
76
|
+
BASE_FONT_FAMILY: "Menlo, monospace",
|
|
77
|
+
BASE_FONT_SIZE: "11px",
|
|
78
|
+
BASE_LINE_HEIGHT: 1.2,
|
|
79
|
+
BASE_BACKGROUND_COLOR: "rgb(36, 36, 36)",
|
|
80
|
+
BASE_COLOR: "rgb(213, 213, 213)",
|
|
81
|
+
OBJECT_PREVIEW_ARRAY_MAX_PROPERTIES: 10,
|
|
82
|
+
OBJECT_PREVIEW_OBJECT_MAX_PROPERTIES: 5,
|
|
83
|
+
OBJECT_NAME_COLOR: "rgb(227, 110, 236)",
|
|
84
|
+
OBJECT_VALUE_NULL_COLOR: "rgb(127, 127, 127)",
|
|
85
|
+
OBJECT_VALUE_UNDEFINED_COLOR: "rgb(127, 127, 127)",
|
|
86
|
+
OBJECT_VALUE_REGEXP_COLOR: "rgb(233, 63, 59)",
|
|
87
|
+
OBJECT_VALUE_STRING_COLOR: "rgb(233, 63, 59)",
|
|
88
|
+
OBJECT_VALUE_SYMBOL_COLOR: "rgb(233, 63, 59)",
|
|
89
|
+
OBJECT_VALUE_NUMBER_COLOR: "hsl(252, 100%, 75%)",
|
|
90
|
+
OBJECT_VALUE_BOOLEAN_COLOR: "hsl(252, 100%, 75%)",
|
|
91
|
+
OBJECT_VALUE_FUNCTION_PREFIX_COLOR: "rgb(85, 106, 242)",
|
|
92
|
+
HTML_TAG_COLOR: "rgb(93, 176, 215)",
|
|
93
|
+
HTML_TAGNAME_COLOR: "rgb(93, 176, 215)",
|
|
94
|
+
HTML_TAGNAME_TEXT_TRANSFORM: "lowercase",
|
|
95
|
+
HTML_ATTRIBUTE_NAME_COLOR: "rgb(155, 187, 220)",
|
|
96
|
+
HTML_ATTRIBUTE_VALUE_COLOR: "rgb(242, 151, 102)",
|
|
97
|
+
HTML_COMMENT_COLOR: "rgb(137, 137, 137)",
|
|
98
|
+
HTML_DOCTYPE_COLOR: "rgb(192, 192, 192)",
|
|
99
|
+
ARROW_COLOR: "rgb(145, 145, 145)",
|
|
100
|
+
ARROW_MARGIN_RIGHT: 3,
|
|
101
|
+
ARROW_FONT_SIZE: 12,
|
|
102
|
+
ARROW_ANIMATION_DURATION: "0",
|
|
103
|
+
TREENODE_FONT_FAMILY: "Menlo, monospace",
|
|
104
|
+
TREENODE_FONT_SIZE: "11px",
|
|
105
|
+
TREENODE_LINE_HEIGHT: 1.2,
|
|
106
|
+
TREENODE_PADDING_LEFT: 12,
|
|
107
|
+
TABLE_BORDER_COLOR: "rgb(85, 85, 85)",
|
|
108
|
+
TABLE_TH_BACKGROUND_COLOR: "rgb(44, 44, 44)",
|
|
109
|
+
TABLE_TH_HOVER_COLOR: "rgb(48, 48, 48)",
|
|
110
|
+
TABLE_SORT_ICON_COLOR: "black",
|
|
111
|
+
TABLE_DATA_BACKGROUND_IMAGE: "linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0) 50%, rgba(51, 139, 255, 0.0980392) 50%, rgba(51, 139, 255, 0.0980392))",
|
|
112
|
+
TABLE_DATA_BACKGROUND_SIZE: "128px 32px"
|
|
121
113
|
};
|
|
122
114
|
var theme2 = {
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
115
|
+
BASE_FONT_FAMILY: "Menlo, monospace",
|
|
116
|
+
BASE_FONT_SIZE: "11px",
|
|
117
|
+
BASE_LINE_HEIGHT: 1.2,
|
|
118
|
+
BASE_BACKGROUND_COLOR: "white",
|
|
119
|
+
BASE_COLOR: "black",
|
|
120
|
+
OBJECT_PREVIEW_ARRAY_MAX_PROPERTIES: 10,
|
|
121
|
+
OBJECT_PREVIEW_OBJECT_MAX_PROPERTIES: 5,
|
|
122
|
+
OBJECT_NAME_COLOR: "rgb(136, 19, 145)",
|
|
123
|
+
OBJECT_VALUE_NULL_COLOR: "rgb(128, 128, 128)",
|
|
124
|
+
OBJECT_VALUE_UNDEFINED_COLOR: "rgb(128, 128, 128)",
|
|
125
|
+
OBJECT_VALUE_REGEXP_COLOR: "rgb(196, 26, 22)",
|
|
126
|
+
OBJECT_VALUE_STRING_COLOR: "rgb(196, 26, 22)",
|
|
127
|
+
OBJECT_VALUE_SYMBOL_COLOR: "rgb(196, 26, 22)",
|
|
128
|
+
OBJECT_VALUE_NUMBER_COLOR: "rgb(28, 0, 207)",
|
|
129
|
+
OBJECT_VALUE_BOOLEAN_COLOR: "rgb(28, 0, 207)",
|
|
130
|
+
OBJECT_VALUE_FUNCTION_PREFIX_COLOR: "rgb(13, 34, 170)",
|
|
131
|
+
HTML_TAG_COLOR: "rgb(168, 148, 166)",
|
|
132
|
+
HTML_TAGNAME_COLOR: "rgb(136, 18, 128)",
|
|
133
|
+
HTML_TAGNAME_TEXT_TRANSFORM: "lowercase",
|
|
134
|
+
HTML_ATTRIBUTE_NAME_COLOR: "rgb(153, 69, 0)",
|
|
135
|
+
HTML_ATTRIBUTE_VALUE_COLOR: "rgb(26, 26, 166)",
|
|
136
|
+
HTML_COMMENT_COLOR: "rgb(35, 110, 37)",
|
|
137
|
+
HTML_DOCTYPE_COLOR: "rgb(192, 192, 192)",
|
|
138
|
+
ARROW_COLOR: "#6e6e6e",
|
|
139
|
+
ARROW_MARGIN_RIGHT: 3,
|
|
140
|
+
ARROW_FONT_SIZE: 12,
|
|
141
|
+
ARROW_ANIMATION_DURATION: "0",
|
|
142
|
+
TREENODE_FONT_FAMILY: "Menlo, monospace",
|
|
143
|
+
TREENODE_FONT_SIZE: "11px",
|
|
144
|
+
TREENODE_LINE_HEIGHT: 1.2,
|
|
145
|
+
TREENODE_PADDING_LEFT: 12,
|
|
146
|
+
TABLE_BORDER_COLOR: "#aaa",
|
|
147
|
+
TABLE_TH_BACKGROUND_COLOR: "#eee",
|
|
148
|
+
TABLE_TH_HOVER_COLOR: "hsla(0, 0%, 90%, 1)",
|
|
149
|
+
TABLE_SORT_ICON_COLOR: "#6e6e6e",
|
|
150
|
+
TABLE_DATA_BACKGROUND_IMAGE: "linear-gradient(to bottom, white, white 50%, rgb(234, 243, 255) 50%, rgb(234, 243, 255))",
|
|
151
|
+
TABLE_DATA_BACKGROUND_SIZE: "128px 32px"
|
|
160
152
|
};
|
|
161
|
-
var ExpandedPathsContext =
|
|
162
|
-
}]);
|
|
153
|
+
var ExpandedPathsContext = (0, react.createContext)([{}, () => {}]);
|
|
163
154
|
var unselectable = {
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
155
|
+
WebkitTouchCallout: "none",
|
|
156
|
+
WebkitUserSelect: "none",
|
|
157
|
+
KhtmlUserSelect: "none",
|
|
158
|
+
MozUserSelect: "none",
|
|
159
|
+
msUserSelect: "none",
|
|
160
|
+
OUserSelect: "none",
|
|
161
|
+
userSelect: "none"
|
|
171
162
|
};
|
|
172
|
-
var createTheme = (
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
|
|
264
|
-
|
|
265
|
-
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
|
|
273
|
-
|
|
274
|
-
|
|
275
|
-
|
|
276
|
-
|
|
277
|
-
|
|
278
|
-
|
|
279
|
-
|
|
280
|
-
|
|
281
|
-
|
|
282
|
-
|
|
283
|
-
|
|
284
|
-
|
|
285
|
-
|
|
286
|
-
|
|
287
|
-
|
|
288
|
-
|
|
289
|
-
|
|
290
|
-
|
|
291
|
-
|
|
292
|
-
|
|
293
|
-
|
|
294
|
-
|
|
295
|
-
|
|
296
|
-
|
|
297
|
-
|
|
298
|
-
|
|
299
|
-
|
|
300
|
-
|
|
301
|
-
|
|
302
|
-
|
|
303
|
-
|
|
304
|
-
|
|
305
|
-
|
|
306
|
-
|
|
307
|
-
|
|
308
|
-
|
|
309
|
-
|
|
310
|
-
|
|
311
|
-
|
|
312
|
-
|
|
313
|
-
|
|
314
|
-
|
|
315
|
-
|
|
316
|
-
|
|
317
|
-
|
|
318
|
-
|
|
319
|
-
|
|
320
|
-
|
|
321
|
-
|
|
322
|
-
|
|
323
|
-
|
|
324
|
-
|
|
325
|
-
|
|
326
|
-
|
|
327
|
-
|
|
328
|
-
|
|
329
|
-
|
|
330
|
-
|
|
331
|
-
|
|
332
|
-
|
|
333
|
-
|
|
334
|
-
|
|
335
|
-
|
|
336
|
-
|
|
337
|
-
|
|
338
|
-
|
|
339
|
-
|
|
340
|
-
|
|
341
|
-
|
|
342
|
-
|
|
343
|
-
|
|
344
|
-
|
|
345
|
-
|
|
346
|
-
|
|
347
|
-
|
|
348
|
-
|
|
349
|
-
|
|
350
|
-
|
|
351
|
-
|
|
352
|
-
|
|
353
|
-
|
|
354
|
-
|
|
355
|
-
|
|
356
|
-
|
|
357
|
-
|
|
358
|
-
|
|
359
|
-
|
|
360
|
-
|
|
361
|
-
|
|
362
|
-
|
|
363
|
-
|
|
364
|
-
|
|
365
|
-
|
|
366
|
-
|
|
367
|
-
|
|
368
|
-
|
|
369
|
-
|
|
370
|
-
|
|
371
|
-
|
|
372
|
-
|
|
373
|
-
tableLayout: "fixed",
|
|
374
|
-
borderSpacing: 0,
|
|
375
|
-
borderCollapse: "separate",
|
|
376
|
-
width: "100%",
|
|
377
|
-
fontSize: theme32.BASE_FONT_SIZE,
|
|
378
|
-
lineHeight: "120%"
|
|
379
|
-
}
|
|
380
|
-
},
|
|
381
|
-
TableInspectorTH: {
|
|
382
|
-
base: {
|
|
383
|
-
position: "relative",
|
|
384
|
-
height: "auto",
|
|
385
|
-
textAlign: "left",
|
|
386
|
-
backgroundColor: theme32.TABLE_TH_BACKGROUND_COLOR,
|
|
387
|
-
borderBottom: `1px solid ${theme32.TABLE_BORDER_COLOR}`,
|
|
388
|
-
fontWeight: "normal",
|
|
389
|
-
verticalAlign: "middle",
|
|
390
|
-
padding: "0 4px",
|
|
391
|
-
whiteSpace: "nowrap",
|
|
392
|
-
textOverflow: "ellipsis",
|
|
393
|
-
overflow: "hidden",
|
|
394
|
-
lineHeight: "14px",
|
|
395
|
-
":hover": {
|
|
396
|
-
backgroundColor: theme32.TABLE_TH_HOVER_COLOR
|
|
397
|
-
}
|
|
398
|
-
},
|
|
399
|
-
div: {
|
|
400
|
-
whiteSpace: "nowrap",
|
|
401
|
-
textOverflow: "ellipsis",
|
|
402
|
-
overflow: "hidden",
|
|
403
|
-
fontSize: theme32.BASE_FONT_SIZE,
|
|
404
|
-
lineHeight: "120%"
|
|
405
|
-
}
|
|
406
|
-
},
|
|
407
|
-
TableInspectorLeftBorder: {
|
|
408
|
-
none: {
|
|
409
|
-
borderLeft: "none"
|
|
410
|
-
},
|
|
411
|
-
solid: {
|
|
412
|
-
borderLeft: `1px solid ${theme32.TABLE_BORDER_COLOR}`
|
|
413
|
-
}
|
|
414
|
-
},
|
|
415
|
-
TableInspectorSortIcon: {
|
|
416
|
-
display: "block",
|
|
417
|
-
marginRight: 3,
|
|
418
|
-
width: 8,
|
|
419
|
-
height: 7,
|
|
420
|
-
marginTop: -7,
|
|
421
|
-
color: theme32.TABLE_SORT_ICON_COLOR,
|
|
422
|
-
fontSize: 12,
|
|
423
|
-
...unselectable
|
|
424
|
-
}
|
|
163
|
+
var createTheme = (theme3) => ({
|
|
164
|
+
DOMNodePreview: {
|
|
165
|
+
htmlOpenTag: {
|
|
166
|
+
base: { color: theme3.HTML_TAG_COLOR },
|
|
167
|
+
tagName: {
|
|
168
|
+
color: theme3.HTML_TAGNAME_COLOR,
|
|
169
|
+
textTransform: theme3.HTML_TAGNAME_TEXT_TRANSFORM
|
|
170
|
+
},
|
|
171
|
+
htmlAttributeName: { color: theme3.HTML_ATTRIBUTE_NAME_COLOR },
|
|
172
|
+
htmlAttributeValue: { color: theme3.HTML_ATTRIBUTE_VALUE_COLOR }
|
|
173
|
+
},
|
|
174
|
+
htmlCloseTag: {
|
|
175
|
+
base: { color: theme3.HTML_TAG_COLOR },
|
|
176
|
+
offsetLeft: { marginLeft: -theme3.TREENODE_PADDING_LEFT },
|
|
177
|
+
tagName: {
|
|
178
|
+
color: theme3.HTML_TAGNAME_COLOR,
|
|
179
|
+
textTransform: theme3.HTML_TAGNAME_TEXT_TRANSFORM
|
|
180
|
+
}
|
|
181
|
+
},
|
|
182
|
+
htmlComment: { color: theme3.HTML_COMMENT_COLOR },
|
|
183
|
+
htmlDoctype: { color: theme3.HTML_DOCTYPE_COLOR }
|
|
184
|
+
},
|
|
185
|
+
ObjectPreview: {
|
|
186
|
+
objectDescription: { fontStyle: "italic" },
|
|
187
|
+
preview: { fontStyle: "italic" },
|
|
188
|
+
arrayMaxProperties: theme3.OBJECT_PREVIEW_ARRAY_MAX_PROPERTIES,
|
|
189
|
+
objectMaxProperties: theme3.OBJECT_PREVIEW_OBJECT_MAX_PROPERTIES
|
|
190
|
+
},
|
|
191
|
+
ObjectName: {
|
|
192
|
+
base: { color: theme3.OBJECT_NAME_COLOR },
|
|
193
|
+
dimmed: { opacity: .6 }
|
|
194
|
+
},
|
|
195
|
+
ObjectValue: {
|
|
196
|
+
objectValueNull: { color: theme3.OBJECT_VALUE_NULL_COLOR },
|
|
197
|
+
objectValueUndefined: { color: theme3.OBJECT_VALUE_UNDEFINED_COLOR },
|
|
198
|
+
objectValueRegExp: { color: theme3.OBJECT_VALUE_REGEXP_COLOR },
|
|
199
|
+
objectValueString: { color: theme3.OBJECT_VALUE_STRING_COLOR },
|
|
200
|
+
objectValueSymbol: { color: theme3.OBJECT_VALUE_SYMBOL_COLOR },
|
|
201
|
+
objectValueNumber: { color: theme3.OBJECT_VALUE_NUMBER_COLOR },
|
|
202
|
+
objectValueBoolean: { color: theme3.OBJECT_VALUE_BOOLEAN_COLOR },
|
|
203
|
+
objectValueFunctionPrefix: {
|
|
204
|
+
color: theme3.OBJECT_VALUE_FUNCTION_PREFIX_COLOR,
|
|
205
|
+
fontStyle: "italic"
|
|
206
|
+
},
|
|
207
|
+
objectValueFunctionName: { fontStyle: "italic" }
|
|
208
|
+
},
|
|
209
|
+
TreeView: { treeViewOutline: {
|
|
210
|
+
padding: 0,
|
|
211
|
+
margin: 0,
|
|
212
|
+
listStyleType: "none"
|
|
213
|
+
} },
|
|
214
|
+
TreeNode: {
|
|
215
|
+
treeNodeBase: {
|
|
216
|
+
color: theme3.BASE_COLOR,
|
|
217
|
+
backgroundColor: theme3.BASE_BACKGROUND_COLOR,
|
|
218
|
+
lineHeight: theme3.TREENODE_LINE_HEIGHT,
|
|
219
|
+
cursor: "default",
|
|
220
|
+
boxSizing: "border-box",
|
|
221
|
+
listStyle: "none",
|
|
222
|
+
fontFamily: theme3.TREENODE_FONT_FAMILY,
|
|
223
|
+
fontSize: theme3.TREENODE_FONT_SIZE
|
|
224
|
+
},
|
|
225
|
+
treeNodePreviewContainer: {},
|
|
226
|
+
treeNodePlaceholder: {
|
|
227
|
+
whiteSpace: "pre",
|
|
228
|
+
fontSize: theme3.ARROW_FONT_SIZE,
|
|
229
|
+
marginRight: theme3.ARROW_MARGIN_RIGHT,
|
|
230
|
+
...unselectable
|
|
231
|
+
},
|
|
232
|
+
treeNodeArrow: {
|
|
233
|
+
base: {
|
|
234
|
+
color: theme3.ARROW_COLOR,
|
|
235
|
+
display: "inline-block",
|
|
236
|
+
fontSize: theme3.ARROW_FONT_SIZE,
|
|
237
|
+
marginRight: theme3.ARROW_MARGIN_RIGHT,
|
|
238
|
+
...parseFloat(theme3.ARROW_ANIMATION_DURATION) > 0 ? { transition: `transform ${theme3.ARROW_ANIMATION_DURATION} ease 0s` } : {},
|
|
239
|
+
...unselectable
|
|
240
|
+
},
|
|
241
|
+
expanded: {
|
|
242
|
+
WebkitTransform: "rotateZ(90deg)",
|
|
243
|
+
MozTransform: "rotateZ(90deg)",
|
|
244
|
+
transform: "rotateZ(90deg)"
|
|
245
|
+
},
|
|
246
|
+
collapsed: {
|
|
247
|
+
WebkitTransform: "rotateZ(0deg)",
|
|
248
|
+
MozTransform: "rotateZ(0deg)",
|
|
249
|
+
transform: "rotateZ(0deg)"
|
|
250
|
+
}
|
|
251
|
+
},
|
|
252
|
+
treeNodeChildNodesContainer: {
|
|
253
|
+
margin: 0,
|
|
254
|
+
paddingLeft: theme3.TREENODE_PADDING_LEFT
|
|
255
|
+
}
|
|
256
|
+
},
|
|
257
|
+
TableInspector: { base: {
|
|
258
|
+
color: theme3.BASE_COLOR,
|
|
259
|
+
position: "relative",
|
|
260
|
+
border: `1px solid ${theme3.TABLE_BORDER_COLOR}`,
|
|
261
|
+
fontFamily: theme3.BASE_FONT_FAMILY,
|
|
262
|
+
fontSize: theme3.BASE_FONT_SIZE,
|
|
263
|
+
lineHeight: "120%",
|
|
264
|
+
boxSizing: "border-box",
|
|
265
|
+
cursor: "default"
|
|
266
|
+
} },
|
|
267
|
+
TableInspectorHeaderContainer: {
|
|
268
|
+
base: {
|
|
269
|
+
top: 0,
|
|
270
|
+
height: "17px",
|
|
271
|
+
left: 0,
|
|
272
|
+
right: 0,
|
|
273
|
+
overflowX: "hidden"
|
|
274
|
+
},
|
|
275
|
+
table: {
|
|
276
|
+
tableLayout: "fixed",
|
|
277
|
+
borderSpacing: 0,
|
|
278
|
+
borderCollapse: "separate",
|
|
279
|
+
height: "100%",
|
|
280
|
+
width: "100%",
|
|
281
|
+
margin: 0
|
|
282
|
+
}
|
|
283
|
+
},
|
|
284
|
+
TableInspectorDataContainer: {
|
|
285
|
+
tr: { display: "table-row" },
|
|
286
|
+
td: {
|
|
287
|
+
boxSizing: "border-box",
|
|
288
|
+
border: "none",
|
|
289
|
+
height: "16px",
|
|
290
|
+
verticalAlign: "top",
|
|
291
|
+
padding: "1px 4px",
|
|
292
|
+
WebkitUserSelect: "text",
|
|
293
|
+
whiteSpace: "nowrap",
|
|
294
|
+
textOverflow: "ellipsis",
|
|
295
|
+
overflow: "hidden",
|
|
296
|
+
lineHeight: "14px"
|
|
297
|
+
},
|
|
298
|
+
div: {
|
|
299
|
+
position: "static",
|
|
300
|
+
top: "17px",
|
|
301
|
+
bottom: 0,
|
|
302
|
+
overflowY: "overlay",
|
|
303
|
+
transform: "translateZ(0)",
|
|
304
|
+
left: 0,
|
|
305
|
+
right: 0,
|
|
306
|
+
overflowX: "hidden"
|
|
307
|
+
},
|
|
308
|
+
table: {
|
|
309
|
+
positon: "static",
|
|
310
|
+
left: 0,
|
|
311
|
+
top: 0,
|
|
312
|
+
right: 0,
|
|
313
|
+
bottom: 0,
|
|
314
|
+
borderTop: "0 none transparent",
|
|
315
|
+
margin: 0,
|
|
316
|
+
backgroundImage: theme3.TABLE_DATA_BACKGROUND_IMAGE,
|
|
317
|
+
backgroundSize: theme3.TABLE_DATA_BACKGROUND_SIZE,
|
|
318
|
+
tableLayout: "fixed",
|
|
319
|
+
borderSpacing: 0,
|
|
320
|
+
borderCollapse: "separate",
|
|
321
|
+
width: "100%",
|
|
322
|
+
fontSize: theme3.BASE_FONT_SIZE,
|
|
323
|
+
lineHeight: "120%"
|
|
324
|
+
}
|
|
325
|
+
},
|
|
326
|
+
TableInspectorTH: {
|
|
327
|
+
base: {
|
|
328
|
+
position: "relative",
|
|
329
|
+
height: "auto",
|
|
330
|
+
textAlign: "left",
|
|
331
|
+
backgroundColor: theme3.TABLE_TH_BACKGROUND_COLOR,
|
|
332
|
+
borderBottom: `1px solid ${theme3.TABLE_BORDER_COLOR}`,
|
|
333
|
+
fontWeight: "normal",
|
|
334
|
+
verticalAlign: "middle",
|
|
335
|
+
padding: "0 4px",
|
|
336
|
+
whiteSpace: "nowrap",
|
|
337
|
+
textOverflow: "ellipsis",
|
|
338
|
+
overflow: "hidden",
|
|
339
|
+
lineHeight: "14px",
|
|
340
|
+
":hover": { backgroundColor: theme3.TABLE_TH_HOVER_COLOR }
|
|
341
|
+
},
|
|
342
|
+
div: {
|
|
343
|
+
whiteSpace: "nowrap",
|
|
344
|
+
textOverflow: "ellipsis",
|
|
345
|
+
overflow: "hidden",
|
|
346
|
+
fontSize: theme3.BASE_FONT_SIZE,
|
|
347
|
+
lineHeight: "120%"
|
|
348
|
+
}
|
|
349
|
+
},
|
|
350
|
+
TableInspectorLeftBorder: {
|
|
351
|
+
none: { borderLeft: "none" },
|
|
352
|
+
solid: { borderLeft: `1px solid ${theme3.TABLE_BORDER_COLOR}` }
|
|
353
|
+
},
|
|
354
|
+
TableInspectorSortIcon: {
|
|
355
|
+
display: "block",
|
|
356
|
+
marginRight: 3,
|
|
357
|
+
width: 8,
|
|
358
|
+
height: 7,
|
|
359
|
+
marginTop: -7,
|
|
360
|
+
color: theme3.TABLE_SORT_ICON_COLOR,
|
|
361
|
+
fontSize: 12,
|
|
362
|
+
...unselectable
|
|
363
|
+
}
|
|
425
364
|
});
|
|
426
365
|
var DEFAULT_THEME_NAME = "chromeLight";
|
|
427
|
-
var ThemeContext =
|
|
366
|
+
var ThemeContext = (0, react.createContext)(createTheme(themes_exports[DEFAULT_THEME_NAME]));
|
|
428
367
|
var useStyles = (baseStylesKey) => {
|
|
429
|
-
|
|
430
|
-
|
|
368
|
+
const themeStyles = (0, react.useContext)(ThemeContext);
|
|
369
|
+
return themeStyles[baseStylesKey];
|
|
431
370
|
};
|
|
432
371
|
var themeAcceptor = (WrappedComponent) => {
|
|
433
|
-
|
|
434
|
-
|
|
435
|
-
|
|
436
|
-
|
|
437
|
-
|
|
438
|
-
|
|
439
|
-
|
|
440
|
-
|
|
441
|
-
|
|
442
|
-
|
|
443
|
-
|
|
444
|
-
return /* @__PURE__ */ React14__default.default.createElement(ThemeContext.Provider, {
|
|
445
|
-
value: themeStyles
|
|
446
|
-
}, /* @__PURE__ */ React14__default.default.createElement(WrappedComponent, {
|
|
447
|
-
...restProps
|
|
448
|
-
}));
|
|
449
|
-
};
|
|
450
|
-
return ThemeAcceptor;
|
|
372
|
+
const ThemeAcceptor = ({ theme: theme3 = DEFAULT_THEME_NAME,...restProps }) => {
|
|
373
|
+
const themeStyles = (0, react.useMemo)(() => {
|
|
374
|
+
switch (Object.prototype.toString.call(theme3)) {
|
|
375
|
+
case "[object String]": return createTheme(themes_exports[theme3]);
|
|
376
|
+
case "[object Object]": return createTheme(theme3);
|
|
377
|
+
default: return createTheme(themes_exports[DEFAULT_THEME_NAME]);
|
|
378
|
+
}
|
|
379
|
+
}, [theme3]);
|
|
380
|
+
return /* @__PURE__ */ react.default.createElement(ThemeContext.Provider, { value: themeStyles }, /* @__PURE__ */ react.default.createElement(WrappedComponent, { ...restProps }));
|
|
381
|
+
};
|
|
382
|
+
return ThemeAcceptor;
|
|
451
383
|
};
|
|
452
|
-
var Arrow = ({ expanded, styles }) => /* @__PURE__ */
|
|
453
|
-
|
|
454
|
-
|
|
455
|
-
|
|
456
|
-
|
|
457
|
-
|
|
458
|
-
|
|
459
|
-
|
|
460
|
-
|
|
461
|
-
|
|
462
|
-
|
|
463
|
-
|
|
464
|
-
|
|
465
|
-
|
|
466
|
-
|
|
467
|
-
|
|
468
|
-
|
|
469
|
-
|
|
470
|
-
|
|
471
|
-
|
|
472
|
-
|
|
473
|
-
|
|
474
|
-
|
|
475
|
-
|
|
476
|
-
|
|
477
|
-
|
|
478
|
-
|
|
479
|
-
|
|
480
|
-
|
|
481
|
-
|
|
482
|
-
|
|
483
|
-
style: styles.treeNodePlaceholder
|
|
484
|
-
}, "\xA0"), /* @__PURE__ */ React14__default.default.createElement(NodeRenderer, {
|
|
485
|
-
...props
|
|
486
|
-
})), /* @__PURE__ */ React14__default.default.createElement("ol", {
|
|
487
|
-
role: "group",
|
|
488
|
-
style: styles.treeNodeChildNodesContainer
|
|
489
|
-
}, expanded ? children : void 0));
|
|
384
|
+
var Arrow = ({ expanded, styles }) => /* @__PURE__ */ react.default.createElement("span", { style: {
|
|
385
|
+
...styles.base,
|
|
386
|
+
...expanded ? styles.expanded : styles.collapsed
|
|
387
|
+
} }, "▶");
|
|
388
|
+
var TreeNode = (0, react.memo)((props) => {
|
|
389
|
+
props = {
|
|
390
|
+
expanded: true,
|
|
391
|
+
nodeRenderer: ({ name }) => /* @__PURE__ */ react.default.createElement("span", null, name),
|
|
392
|
+
onClick: () => {},
|
|
393
|
+
shouldShowArrow: false,
|
|
394
|
+
shouldShowPlaceholder: true,
|
|
395
|
+
...props
|
|
396
|
+
};
|
|
397
|
+
const { expanded, onClick, children, nodeRenderer, title, shouldShowArrow, shouldShowPlaceholder } = props;
|
|
398
|
+
const styles = useStyles("TreeNode");
|
|
399
|
+
const NodeRenderer = nodeRenderer;
|
|
400
|
+
return /* @__PURE__ */ react.default.createElement("li", {
|
|
401
|
+
"aria-expanded": expanded,
|
|
402
|
+
role: "treeitem",
|
|
403
|
+
style: styles.treeNodeBase,
|
|
404
|
+
title
|
|
405
|
+
}, /* @__PURE__ */ react.default.createElement("div", {
|
|
406
|
+
style: styles.treeNodePreviewContainer,
|
|
407
|
+
onClick
|
|
408
|
+
}, shouldShowArrow || react.Children.count(children) > 0 ? /* @__PURE__ */ react.default.createElement(Arrow, {
|
|
409
|
+
expanded,
|
|
410
|
+
styles: styles.treeNodeArrow
|
|
411
|
+
}) : shouldShowPlaceholder && /* @__PURE__ */ react.default.createElement("span", { style: styles.treeNodePlaceholder }, "\xA0"), /* @__PURE__ */ react.default.createElement(NodeRenderer, { ...props })), /* @__PURE__ */ react.default.createElement("ol", {
|
|
412
|
+
role: "group",
|
|
413
|
+
style: styles.treeNodeChildNodesContainer
|
|
414
|
+
}, expanded ? children : void 0));
|
|
490
415
|
});
|
|
491
416
|
var DEFAULT_ROOT_PATH = "$";
|
|
492
417
|
var WILDCARD = "*";
|
|
493
418
|
function hasChildNodes(data, dataIterator) {
|
|
494
|
-
|
|
419
|
+
return !dataIterator(data).next().done;
|
|
495
420
|
}
|
|
496
421
|
var wildcardPathsFromLevel = (level) => {
|
|
497
|
-
|
|
422
|
+
return Array.from({ length: level }, (_, i) => [DEFAULT_ROOT_PATH].concat(Array.from({ length: i }, () => "*")).join("."));
|
|
498
423
|
};
|
|
499
424
|
var getExpandedPaths = (data, dataIterator, expandPaths, expandLevel, prevExpandedPaths) => {
|
|
500
|
-
|
|
501
|
-
|
|
502
|
-
|
|
503
|
-
|
|
504
|
-
|
|
505
|
-
|
|
506
|
-
|
|
507
|
-
|
|
508
|
-
|
|
509
|
-
|
|
510
|
-
|
|
511
|
-
|
|
512
|
-
|
|
513
|
-
|
|
514
|
-
|
|
515
|
-
|
|
516
|
-
|
|
517
|
-
|
|
518
|
-
|
|
519
|
-
|
|
520
|
-
|
|
521
|
-
|
|
522
|
-
|
|
523
|
-
|
|
524
|
-
|
|
525
|
-
}
|
|
526
|
-
}
|
|
527
|
-
}
|
|
528
|
-
};
|
|
529
|
-
populatePaths(data, "", 0);
|
|
530
|
-
});
|
|
531
|
-
return expandedPaths.reduce((obj, path) => {
|
|
532
|
-
obj[path] = true;
|
|
533
|
-
return obj;
|
|
534
|
-
}, { ...prevExpandedPaths });
|
|
425
|
+
const wildcardPaths = [].concat(wildcardPathsFromLevel(expandLevel)).concat(expandPaths).filter((path) => typeof path === "string");
|
|
426
|
+
const expandedPaths = [];
|
|
427
|
+
wildcardPaths.forEach((wildcardPath) => {
|
|
428
|
+
const keyPaths = wildcardPath.split(".");
|
|
429
|
+
const populatePaths = (curData, curPath, depth) => {
|
|
430
|
+
if (depth === keyPaths.length) {
|
|
431
|
+
expandedPaths.push(curPath);
|
|
432
|
+
return;
|
|
433
|
+
}
|
|
434
|
+
const key = keyPaths[depth];
|
|
435
|
+
if (depth === 0) {
|
|
436
|
+
if (hasChildNodes(curData, dataIterator) && (key === DEFAULT_ROOT_PATH || key === WILDCARD)) populatePaths(curData, DEFAULT_ROOT_PATH, depth + 1);
|
|
437
|
+
} else if (key === WILDCARD) {
|
|
438
|
+
for (const { name, data: data2 } of dataIterator(curData)) if (hasChildNodes(data2, dataIterator)) populatePaths(data2, `${curPath}.${name}`, depth + 1);
|
|
439
|
+
} else {
|
|
440
|
+
const value = curData[key];
|
|
441
|
+
if (hasChildNodes(value, dataIterator)) populatePaths(value, `${curPath}.${key}`, depth + 1);
|
|
442
|
+
}
|
|
443
|
+
};
|
|
444
|
+
populatePaths(data, "", 0);
|
|
445
|
+
});
|
|
446
|
+
return expandedPaths.reduce((obj, path) => {
|
|
447
|
+
obj[path] = true;
|
|
448
|
+
return obj;
|
|
449
|
+
}, { ...prevExpandedPaths });
|
|
535
450
|
};
|
|
536
|
-
var ConnectedTreeNode =
|
|
537
|
-
|
|
538
|
-
|
|
539
|
-
|
|
540
|
-
|
|
541
|
-
|
|
542
|
-
|
|
543
|
-
|
|
544
|
-
|
|
545
|
-
|
|
546
|
-
|
|
547
|
-
|
|
548
|
-
|
|
549
|
-
|
|
550
|
-
|
|
551
|
-
|
|
552
|
-
|
|
553
|
-
|
|
554
|
-
|
|
555
|
-
|
|
556
|
-
|
|
557
|
-
|
|
558
|
-
|
|
559
|
-
|
|
560
|
-
|
|
561
|
-
|
|
562
|
-
|
|
563
|
-
|
|
451
|
+
var ConnectedTreeNode = (0, react.memo)((props) => {
|
|
452
|
+
const { data, dataIterator, path, depth, nodeRenderer } = props;
|
|
453
|
+
const [expandedPaths, setExpandedPaths] = (0, react.useContext)(ExpandedPathsContext);
|
|
454
|
+
const nodeHasChildNodes = hasChildNodes(data, dataIterator);
|
|
455
|
+
const expanded = !!expandedPaths[path];
|
|
456
|
+
const handleClick = (0, react.useCallback)(() => nodeHasChildNodes && setExpandedPaths((prevExpandedPaths) => ({
|
|
457
|
+
...prevExpandedPaths,
|
|
458
|
+
[path]: !expanded
|
|
459
|
+
})), [
|
|
460
|
+
nodeHasChildNodes,
|
|
461
|
+
setExpandedPaths,
|
|
462
|
+
path,
|
|
463
|
+
expanded
|
|
464
|
+
]);
|
|
465
|
+
return /* @__PURE__ */ react.default.createElement(TreeNode, {
|
|
466
|
+
expanded,
|
|
467
|
+
onClick: handleClick,
|
|
468
|
+
shouldShowArrow: nodeHasChildNodes,
|
|
469
|
+
shouldShowPlaceholder: depth > 0,
|
|
470
|
+
nodeRenderer,
|
|
471
|
+
...props
|
|
472
|
+
}, expanded ? [...dataIterator(data)].map(({ name, data: data2,...renderNodeProps }) => {
|
|
473
|
+
return /* @__PURE__ */ react.default.createElement(ConnectedTreeNode, {
|
|
474
|
+
name,
|
|
475
|
+
data: data2,
|
|
476
|
+
depth: depth + 1,
|
|
477
|
+
path: `${path}.${name}`,
|
|
478
|
+
key: name,
|
|
479
|
+
dataIterator,
|
|
480
|
+
nodeRenderer,
|
|
481
|
+
...renderNodeProps
|
|
482
|
+
});
|
|
483
|
+
}) : null);
|
|
564
484
|
});
|
|
565
|
-
var TreeView =
|
|
566
|
-
|
|
567
|
-
|
|
568
|
-
|
|
569
|
-
|
|
570
|
-
|
|
571
|
-
|
|
572
|
-
|
|
573
|
-
|
|
574
|
-
|
|
575
|
-
|
|
576
|
-
|
|
577
|
-
|
|
578
|
-
|
|
579
|
-
|
|
580
|
-
|
|
581
|
-
|
|
582
|
-
|
|
485
|
+
var TreeView = (0, react.memo)(({ name, data, dataIterator, nodeRenderer, expandPaths, expandLevel }) => {
|
|
486
|
+
const styles = useStyles("TreeView");
|
|
487
|
+
const stateAndSetter = (0, react.useState)({});
|
|
488
|
+
const [, setExpandedPaths] = stateAndSetter;
|
|
489
|
+
(0, react.useLayoutEffect)(() => setExpandedPaths((prevExpandedPaths) => getExpandedPaths(data, dataIterator, expandPaths, expandLevel, prevExpandedPaths)), [
|
|
490
|
+
data,
|
|
491
|
+
dataIterator,
|
|
492
|
+
expandPaths,
|
|
493
|
+
expandLevel
|
|
494
|
+
]);
|
|
495
|
+
return /* @__PURE__ */ react.default.createElement(ExpandedPathsContext.Provider, { value: stateAndSetter }, /* @__PURE__ */ react.default.createElement("ol", {
|
|
496
|
+
role: "tree",
|
|
497
|
+
style: styles.treeViewOutline
|
|
498
|
+
}, /* @__PURE__ */ react.default.createElement(ConnectedTreeNode, {
|
|
499
|
+
name,
|
|
500
|
+
data,
|
|
501
|
+
dataIterator,
|
|
502
|
+
depth: 0,
|
|
503
|
+
path: DEFAULT_ROOT_PATH,
|
|
504
|
+
nodeRenderer
|
|
505
|
+
})));
|
|
583
506
|
});
|
|
584
507
|
var ObjectName = ({ name, dimmed = false, styles = {} }) => {
|
|
585
|
-
|
|
586
|
-
|
|
587
|
-
|
|
588
|
-
|
|
589
|
-
|
|
590
|
-
|
|
591
|
-
|
|
592
|
-
style: appliedStyles
|
|
593
|
-
}, name);
|
|
508
|
+
const themeStyles = useStyles("ObjectName");
|
|
509
|
+
const appliedStyles = {
|
|
510
|
+
...themeStyles.base,
|
|
511
|
+
...dimmed ? themeStyles["dimmed"] : {},
|
|
512
|
+
...styles
|
|
513
|
+
};
|
|
514
|
+
return /* @__PURE__ */ react.default.createElement("span", { style: appliedStyles }, name);
|
|
594
515
|
};
|
|
595
516
|
var ObjectValue = ({ object, styles }) => {
|
|
596
|
-
|
|
597
|
-
|
|
598
|
-
|
|
599
|
-
|
|
600
|
-
|
|
601
|
-
|
|
602
|
-
|
|
603
|
-
|
|
604
|
-
|
|
605
|
-
|
|
606
|
-
|
|
607
|
-
|
|
608
|
-
|
|
609
|
-
|
|
610
|
-
|
|
611
|
-
|
|
612
|
-
|
|
613
|
-
|
|
614
|
-
|
|
615
|
-
|
|
616
|
-
|
|
617
|
-
|
|
618
|
-
|
|
619
|
-
case "object":
|
|
620
|
-
if (object === null) {
|
|
621
|
-
return /* @__PURE__ */ React14__default.default.createElement("span", {
|
|
622
|
-
style: mkStyle("objectValueNull")
|
|
623
|
-
}, "null");
|
|
624
|
-
}
|
|
625
|
-
if (object instanceof Date) {
|
|
626
|
-
return /* @__PURE__ */ React14__default.default.createElement("span", null, object.toString());
|
|
627
|
-
}
|
|
628
|
-
if (object instanceof RegExp) {
|
|
629
|
-
return /* @__PURE__ */ React14__default.default.createElement("span", {
|
|
630
|
-
style: mkStyle("objectValueRegExp")
|
|
631
|
-
}, object.toString());
|
|
632
|
-
}
|
|
633
|
-
if (Array.isArray(object)) {
|
|
634
|
-
return /* @__PURE__ */ React14__default.default.createElement("span", null, `Array(${object.length})`);
|
|
635
|
-
}
|
|
636
|
-
if (!object.constructor) {
|
|
637
|
-
return /* @__PURE__ */ React14__default.default.createElement("span", null, "Object");
|
|
638
|
-
}
|
|
639
|
-
if (typeof object.constructor.isBuffer === "function" && object.constructor.isBuffer(object)) {
|
|
640
|
-
return /* @__PURE__ */ React14__default.default.createElement("span", null, `Buffer[${object.length}]`);
|
|
641
|
-
}
|
|
642
|
-
return /* @__PURE__ */ React14__default.default.createElement("span", null, object.constructor.name);
|
|
643
|
-
case "function":
|
|
644
|
-
return /* @__PURE__ */ React14__default.default.createElement("span", null, /* @__PURE__ */ React14__default.default.createElement("span", {
|
|
645
|
-
style: mkStyle("objectValueFunctionPrefix")
|
|
646
|
-
}, "\u0192\xA0"), /* @__PURE__ */ React14__default.default.createElement("span", {
|
|
647
|
-
style: mkStyle("objectValueFunctionName")
|
|
648
|
-
}, object.name, "()"));
|
|
649
|
-
case "symbol":
|
|
650
|
-
return /* @__PURE__ */ React14__default.default.createElement("span", {
|
|
651
|
-
style: mkStyle("objectValueSymbol")
|
|
652
|
-
}, object.toString());
|
|
653
|
-
default:
|
|
654
|
-
return /* @__PURE__ */ React14__default.default.createElement("span", null);
|
|
655
|
-
}
|
|
517
|
+
const themeStyles = useStyles("ObjectValue");
|
|
518
|
+
const mkStyle = (key) => ({
|
|
519
|
+
...themeStyles[key],
|
|
520
|
+
...styles
|
|
521
|
+
});
|
|
522
|
+
switch (typeof object) {
|
|
523
|
+
case "bigint": return /* @__PURE__ */ react.default.createElement("span", { style: mkStyle("objectValueNumber") }, String(object), "n");
|
|
524
|
+
case "number": return /* @__PURE__ */ react.default.createElement("span", { style: mkStyle("objectValueNumber") }, String(object));
|
|
525
|
+
case "string": return /* @__PURE__ */ react.default.createElement("span", { style: mkStyle("objectValueString") }, "\"", object, "\"");
|
|
526
|
+
case "boolean": return /* @__PURE__ */ react.default.createElement("span", { style: mkStyle("objectValueBoolean") }, String(object));
|
|
527
|
+
case "undefined": return /* @__PURE__ */ react.default.createElement("span", { style: mkStyle("objectValueUndefined") }, "undefined");
|
|
528
|
+
case "object":
|
|
529
|
+
if (object === null) return /* @__PURE__ */ react.default.createElement("span", { style: mkStyle("objectValueNull") }, "null");
|
|
530
|
+
if (object instanceof Date) return /* @__PURE__ */ react.default.createElement("span", null, object.toString());
|
|
531
|
+
if (object instanceof RegExp) return /* @__PURE__ */ react.default.createElement("span", { style: mkStyle("objectValueRegExp") }, object.toString());
|
|
532
|
+
if (Array.isArray(object)) return /* @__PURE__ */ react.default.createElement("span", null, `Array(${object.length})`);
|
|
533
|
+
if (!object.constructor) return /* @__PURE__ */ react.default.createElement("span", null, "Object");
|
|
534
|
+
if (typeof object.constructor.isBuffer === "function" && object.constructor.isBuffer(object)) return /* @__PURE__ */ react.default.createElement("span", null, `Buffer[${object.length}]`);
|
|
535
|
+
return /* @__PURE__ */ react.default.createElement("span", null, object.constructor.name);
|
|
536
|
+
case "function": return /* @__PURE__ */ react.default.createElement("span", null, /* @__PURE__ */ react.default.createElement("span", { style: mkStyle("objectValueFunctionPrefix") }, "ƒ\xA0"), /* @__PURE__ */ react.default.createElement("span", { style: mkStyle("objectValueFunctionName") }, object.name, "()"));
|
|
537
|
+
case "symbol": return /* @__PURE__ */ react.default.createElement("span", { style: mkStyle("objectValueSymbol") }, object.toString());
|
|
538
|
+
default: return /* @__PURE__ */ react.default.createElement("span", null);
|
|
539
|
+
}
|
|
656
540
|
};
|
|
657
541
|
var hasOwnProperty = Object.prototype.hasOwnProperty;
|
|
658
542
|
var propertyIsEnumerable = Object.prototype.propertyIsEnumerable;
|
|
659
543
|
function getPropertyValue(object, propertyName) {
|
|
660
|
-
|
|
661
|
-
|
|
662
|
-
|
|
663
|
-
|
|
664
|
-
|
|
665
|
-
|
|
666
|
-
|
|
667
|
-
}
|
|
668
|
-
return object[propertyName];
|
|
544
|
+
const propertyDescriptor = Object.getOwnPropertyDescriptor(object, propertyName);
|
|
545
|
+
if (propertyDescriptor.get) try {
|
|
546
|
+
return propertyDescriptor.get();
|
|
547
|
+
} catch {
|
|
548
|
+
return propertyDescriptor.get;
|
|
549
|
+
}
|
|
550
|
+
return object[propertyName];
|
|
669
551
|
}
|
|
670
552
|
function intersperse(arr, sep) {
|
|
671
|
-
|
|
672
|
-
|
|
673
|
-
}
|
|
674
|
-
return arr.slice(1).reduce((xs, x) => xs.concat([sep, x]), [arr[0]]);
|
|
553
|
+
if (arr.length === 0) return [];
|
|
554
|
+
return arr.slice(1).reduce((xs, x) => xs.concat([sep, x]), [arr[0]]);
|
|
675
555
|
}
|
|
676
556
|
var ObjectPreview = ({ data }) => {
|
|
677
|
-
|
|
678
|
-
|
|
679
|
-
|
|
680
|
-
|
|
681
|
-
|
|
682
|
-
|
|
683
|
-
|
|
684
|
-
|
|
685
|
-
|
|
686
|
-
|
|
687
|
-
|
|
688
|
-
|
|
689
|
-
|
|
690
|
-
|
|
691
|
-
|
|
692
|
-
|
|
693
|
-
|
|
694
|
-
|
|
695
|
-
|
|
696
|
-
|
|
697
|
-
|
|
698
|
-
|
|
699
|
-
|
|
700
|
-
|
|
701
|
-
|
|
702
|
-
const maxProperties = styles.objectMaxProperties;
|
|
703
|
-
const propertyNodes = [];
|
|
704
|
-
for (const propertyName in object) {
|
|
705
|
-
if (hasOwnProperty.call(object, propertyName)) {
|
|
706
|
-
let ellipsis;
|
|
707
|
-
if (propertyNodes.length === maxProperties - 1 && Object.keys(object).length > maxProperties) {
|
|
708
|
-
ellipsis = /* @__PURE__ */ React14__default.default.createElement("span", {
|
|
709
|
-
key: "ellipsis"
|
|
710
|
-
}, "\u2026");
|
|
711
|
-
}
|
|
712
|
-
const propertyValue = getPropertyValue(object, propertyName);
|
|
713
|
-
propertyNodes.push(/* @__PURE__ */ React14__default.default.createElement("span", {
|
|
714
|
-
key: propertyName
|
|
715
|
-
}, /* @__PURE__ */ React14__default.default.createElement(ObjectName, {
|
|
716
|
-
name: propertyName || `""`
|
|
717
|
-
}), ":\xA0", /* @__PURE__ */ React14__default.default.createElement(ObjectValue, {
|
|
718
|
-
object: propertyValue
|
|
719
|
-
}), ellipsis));
|
|
720
|
-
if (ellipsis)
|
|
721
|
-
break;
|
|
722
|
-
}
|
|
723
|
-
}
|
|
724
|
-
const objectConstructorName = object.constructor ? object.constructor.name : "Object";
|
|
725
|
-
return /* @__PURE__ */ React14__default.default.createElement(React14__default.default.Fragment, null, /* @__PURE__ */ React14__default.default.createElement("span", {
|
|
726
|
-
style: styles.objectDescription
|
|
727
|
-
}, objectConstructorName === "Object" ? "" : `${objectConstructorName} `), /* @__PURE__ */ React14__default.default.createElement("span", {
|
|
728
|
-
style: styles.preview
|
|
729
|
-
}, "{", intersperse(propertyNodes, ", "), "}"));
|
|
730
|
-
}
|
|
557
|
+
const styles = useStyles("ObjectPreview");
|
|
558
|
+
const object = data;
|
|
559
|
+
if (typeof object !== "object" || object === null || object instanceof Date || object instanceof RegExp) return /* @__PURE__ */ react.default.createElement(ObjectValue, { object });
|
|
560
|
+
if (Array.isArray(object)) {
|
|
561
|
+
const maxProperties = styles.arrayMaxProperties;
|
|
562
|
+
const previewArray = object.slice(0, maxProperties).map((element, index) => /* @__PURE__ */ react.default.createElement(ObjectValue, {
|
|
563
|
+
key: index,
|
|
564
|
+
object: element
|
|
565
|
+
}));
|
|
566
|
+
if (object.length > maxProperties) previewArray.push(/* @__PURE__ */ react.default.createElement("span", { key: "ellipsis" }, "…"));
|
|
567
|
+
const arrayLength = object.length;
|
|
568
|
+
return /* @__PURE__ */ react.default.createElement(react.default.Fragment, null, /* @__PURE__ */ react.default.createElement("span", { style: styles.objectDescription }, arrayLength === 0 ? `` : `(${arrayLength})\xA0`), /* @__PURE__ */ react.default.createElement("span", { style: styles.preview }, "[", intersperse(previewArray, ", "), "]"));
|
|
569
|
+
} else {
|
|
570
|
+
const maxProperties = styles.objectMaxProperties;
|
|
571
|
+
const propertyNodes = [];
|
|
572
|
+
for (const propertyName in object) if (hasOwnProperty.call(object, propertyName)) {
|
|
573
|
+
let ellipsis;
|
|
574
|
+
if (propertyNodes.length === maxProperties - 1 && Object.keys(object).length > maxProperties) ellipsis = /* @__PURE__ */ react.default.createElement("span", { key: "ellipsis" }, "…");
|
|
575
|
+
const propertyValue = getPropertyValue(object, propertyName);
|
|
576
|
+
propertyNodes.push(/* @__PURE__ */ react.default.createElement("span", { key: propertyName }, /* @__PURE__ */ react.default.createElement(ObjectName, { name: propertyName || `""` }), ":\xA0", /* @__PURE__ */ react.default.createElement(ObjectValue, { object: propertyValue }), ellipsis));
|
|
577
|
+
if (ellipsis) break;
|
|
578
|
+
}
|
|
579
|
+
const objectConstructorName = object.constructor ? object.constructor.name : "Object";
|
|
580
|
+
return /* @__PURE__ */ react.default.createElement(react.default.Fragment, null, /* @__PURE__ */ react.default.createElement("span", { style: styles.objectDescription }, objectConstructorName === "Object" ? "" : `${objectConstructorName} `), /* @__PURE__ */ react.default.createElement("span", { style: styles.preview }, "{", intersperse(propertyNodes, ", "), "}"));
|
|
581
|
+
}
|
|
731
582
|
};
|
|
732
583
|
var ObjectRootLabel = ({ name, data }) => {
|
|
733
|
-
|
|
734
|
-
|
|
735
|
-
name
|
|
736
|
-
}), /* @__PURE__ */ React14__default.default.createElement("span", null, ": "), /* @__PURE__ */ React14__default.default.createElement(ObjectPreview, {
|
|
737
|
-
data
|
|
738
|
-
}));
|
|
739
|
-
} else {
|
|
740
|
-
return /* @__PURE__ */ React14__default.default.createElement(ObjectPreview, {
|
|
741
|
-
data
|
|
742
|
-
});
|
|
743
|
-
}
|
|
584
|
+
if (typeof name === "string") return /* @__PURE__ */ react.default.createElement("span", null, /* @__PURE__ */ react.default.createElement(ObjectName, { name }), /* @__PURE__ */ react.default.createElement("span", null, ": "), /* @__PURE__ */ react.default.createElement(ObjectPreview, { data }));
|
|
585
|
+
else return /* @__PURE__ */ react.default.createElement(ObjectPreview, { data });
|
|
744
586
|
};
|
|
745
587
|
var ObjectLabel = ({ name, data, isNonenumerable = false }) => {
|
|
746
|
-
|
|
747
|
-
|
|
748
|
-
|
|
749
|
-
|
|
750
|
-
|
|
751
|
-
data: name
|
|
752
|
-
}), /* @__PURE__ */ React14__default.default.createElement("span", null, ": "), /* @__PURE__ */ React14__default.default.createElement(ObjectValue, {
|
|
753
|
-
object
|
|
754
|
-
}));
|
|
588
|
+
const object = data;
|
|
589
|
+
return /* @__PURE__ */ react.default.createElement("span", null, typeof name === "string" ? /* @__PURE__ */ react.default.createElement(ObjectName, {
|
|
590
|
+
name,
|
|
591
|
+
dimmed: isNonenumerable
|
|
592
|
+
}) : /* @__PURE__ */ react.default.createElement(ObjectPreview, { data: name }), /* @__PURE__ */ react.default.createElement("span", null, ": "), /* @__PURE__ */ react.default.createElement(ObjectValue, { object }));
|
|
755
593
|
};
|
|
756
594
|
var createIterator = (showNonenumerable, sortObjectKeys) => {
|
|
757
|
-
|
|
758
|
-
|
|
759
|
-
|
|
760
|
-
|
|
761
|
-
|
|
762
|
-
|
|
763
|
-
|
|
764
|
-
|
|
765
|
-
|
|
766
|
-
|
|
767
|
-
|
|
768
|
-
|
|
769
|
-
|
|
770
|
-
|
|
771
|
-
|
|
772
|
-
|
|
773
|
-
|
|
774
|
-
|
|
775
|
-
|
|
776
|
-
|
|
777
|
-
|
|
778
|
-
|
|
779
|
-
|
|
780
|
-
|
|
781
|
-
|
|
782
|
-
|
|
783
|
-
|
|
784
|
-
|
|
785
|
-
|
|
786
|
-
|
|
787
|
-
|
|
788
|
-
|
|
789
|
-
|
|
790
|
-
|
|
791
|
-
|
|
792
|
-
|
|
793
|
-
|
|
794
|
-
|
|
795
|
-
|
|
796
|
-
|
|
797
|
-
|
|
798
|
-
|
|
799
|
-
|
|
800
|
-
|
|
801
|
-
|
|
802
|
-
|
|
803
|
-
|
|
804
|
-
|
|
805
|
-
}
|
|
806
|
-
}
|
|
807
|
-
}
|
|
808
|
-
if (showNonenumerable && data !== Object.prototype) {
|
|
809
|
-
yield {
|
|
810
|
-
name: "__proto__",
|
|
811
|
-
data: Object.getPrototypeOf(data),
|
|
812
|
-
isNonenumerable: true
|
|
813
|
-
};
|
|
814
|
-
}
|
|
815
|
-
}
|
|
816
|
-
};
|
|
817
|
-
return objectIterator;
|
|
595
|
+
const objectIterator = function* (data) {
|
|
596
|
+
const shouldIterate = typeof data === "object" && data !== null || typeof data === "function";
|
|
597
|
+
if (!shouldIterate) return;
|
|
598
|
+
const dataIsArray = Array.isArray(data);
|
|
599
|
+
if (!dataIsArray && data[Symbol.iterator]) {
|
|
600
|
+
let i = 0;
|
|
601
|
+
for (const entry of data) {
|
|
602
|
+
if (Array.isArray(entry) && entry.length === 2) {
|
|
603
|
+
const [k, v] = entry;
|
|
604
|
+
yield {
|
|
605
|
+
name: k,
|
|
606
|
+
data: v
|
|
607
|
+
};
|
|
608
|
+
} else yield {
|
|
609
|
+
name: i.toString(),
|
|
610
|
+
data: entry
|
|
611
|
+
};
|
|
612
|
+
i++;
|
|
613
|
+
}
|
|
614
|
+
} else {
|
|
615
|
+
const keys = Object.getOwnPropertyNames(data);
|
|
616
|
+
if (sortObjectKeys === true && !dataIsArray) keys.sort();
|
|
617
|
+
else if (typeof sortObjectKeys === "function") keys.sort(sortObjectKeys);
|
|
618
|
+
for (const propertyName of keys) if (propertyIsEnumerable.call(data, propertyName)) {
|
|
619
|
+
const propertyValue = getPropertyValue(data, propertyName);
|
|
620
|
+
yield {
|
|
621
|
+
name: propertyName || `""`,
|
|
622
|
+
data: propertyValue
|
|
623
|
+
};
|
|
624
|
+
} else if (showNonenumerable) {
|
|
625
|
+
let propertyValue;
|
|
626
|
+
try {
|
|
627
|
+
propertyValue = getPropertyValue(data, propertyName);
|
|
628
|
+
} catch (e) {}
|
|
629
|
+
if (propertyValue !== void 0) yield {
|
|
630
|
+
name: propertyName,
|
|
631
|
+
data: propertyValue,
|
|
632
|
+
isNonenumerable: true
|
|
633
|
+
};
|
|
634
|
+
}
|
|
635
|
+
if (showNonenumerable && data !== Object.prototype) yield {
|
|
636
|
+
name: "__proto__",
|
|
637
|
+
data: Object.getPrototypeOf(data),
|
|
638
|
+
isNonenumerable: true
|
|
639
|
+
};
|
|
640
|
+
}
|
|
641
|
+
};
|
|
642
|
+
return objectIterator;
|
|
818
643
|
};
|
|
819
|
-
var defaultNodeRenderer = ({ depth, name, data, isNonenumerable }) => depth === 0 ? /* @__PURE__ */
|
|
820
|
-
|
|
821
|
-
|
|
822
|
-
}) : /* @__PURE__ */
|
|
823
|
-
|
|
824
|
-
|
|
825
|
-
|
|
644
|
+
var defaultNodeRenderer = ({ depth, name, data, isNonenumerable }) => depth === 0 ? /* @__PURE__ */ react.default.createElement(ObjectRootLabel, {
|
|
645
|
+
name,
|
|
646
|
+
data
|
|
647
|
+
}) : /* @__PURE__ */ react.default.createElement(ObjectLabel, {
|
|
648
|
+
name,
|
|
649
|
+
data,
|
|
650
|
+
isNonenumerable
|
|
826
651
|
});
|
|
827
|
-
var ObjectInspector = ({ showNonenumerable = false, sortObjectKeys, nodeRenderer
|
|
828
|
-
|
|
829
|
-
|
|
830
|
-
|
|
831
|
-
|
|
832
|
-
|
|
833
|
-
|
|
834
|
-
|
|
652
|
+
var ObjectInspector = ({ showNonenumerable = false, sortObjectKeys, nodeRenderer,...treeViewProps }) => {
|
|
653
|
+
const dataIterator = createIterator(showNonenumerable, sortObjectKeys);
|
|
654
|
+
const renderer = nodeRenderer ? nodeRenderer : defaultNodeRenderer;
|
|
655
|
+
return /* @__PURE__ */ react.default.createElement(TreeView, {
|
|
656
|
+
nodeRenderer: renderer,
|
|
657
|
+
dataIterator,
|
|
658
|
+
...treeViewProps
|
|
659
|
+
});
|
|
835
660
|
};
|
|
836
661
|
var themedObjectInspector = themeAcceptor(ObjectInspector);
|
|
837
662
|
function getHeaders(data) {
|
|
838
|
-
|
|
839
|
-
|
|
840
|
-
|
|
841
|
-
|
|
842
|
-
|
|
843
|
-
|
|
844
|
-
|
|
845
|
-
|
|
846
|
-
|
|
847
|
-
|
|
848
|
-
|
|
849
|
-
|
|
850
|
-
|
|
851
|
-
|
|
852
|
-
|
|
853
|
-
|
|
854
|
-
|
|
855
|
-
|
|
856
|
-
|
|
857
|
-
|
|
858
|
-
|
|
859
|
-
|
|
860
|
-
|
|
861
|
-
colHeaders
|
|
862
|
-
};
|
|
863
|
-
}
|
|
864
|
-
return void 0;
|
|
663
|
+
if (typeof data === "object") {
|
|
664
|
+
let rowHeaders = [];
|
|
665
|
+
if (Array.isArray(data)) {
|
|
666
|
+
const nRows = data.length;
|
|
667
|
+
rowHeaders = [...Array(nRows).keys()];
|
|
668
|
+
} else if (data !== null) rowHeaders = Object.keys(data);
|
|
669
|
+
const colHeaders = rowHeaders.reduce((colHeaders2, rowHeader) => {
|
|
670
|
+
const row = data[rowHeader];
|
|
671
|
+
if (typeof row === "object" && row !== null) {
|
|
672
|
+
const cols = Object.keys(row);
|
|
673
|
+
cols.reduce((xs, x) => {
|
|
674
|
+
if (!xs.includes(x)) xs.push(x);
|
|
675
|
+
return xs;
|
|
676
|
+
}, colHeaders2);
|
|
677
|
+
}
|
|
678
|
+
return colHeaders2;
|
|
679
|
+
}, []);
|
|
680
|
+
return {
|
|
681
|
+
rowHeaders,
|
|
682
|
+
colHeaders
|
|
683
|
+
};
|
|
684
|
+
}
|
|
685
|
+
return void 0;
|
|
865
686
|
}
|
|
866
687
|
var DataContainer = ({ rows, columns, rowsData }) => {
|
|
867
|
-
|
|
868
|
-
|
|
869
|
-
|
|
870
|
-
|
|
871
|
-
|
|
872
|
-
|
|
873
|
-
|
|
874
|
-
|
|
875
|
-
|
|
876
|
-
|
|
877
|
-
|
|
878
|
-
|
|
879
|
-
|
|
880
|
-
|
|
881
|
-
|
|
882
|
-
|
|
883
|
-
|
|
884
|
-
|
|
885
|
-
|
|
886
|
-
|
|
887
|
-
|
|
888
|
-
|
|
889
|
-
|
|
890
|
-
|
|
891
|
-
|
|
892
|
-
}
|
|
893
|
-
}))))));
|
|
688
|
+
const styles = useStyles("TableInspectorDataContainer");
|
|
689
|
+
const borderStyles = useStyles("TableInspectorLeftBorder");
|
|
690
|
+
return /* @__PURE__ */ react.default.createElement("div", { style: styles.div }, /* @__PURE__ */ react.default.createElement("table", { style: styles.table }, /* @__PURE__ */ react.default.createElement("colgroup", null), /* @__PURE__ */ react.default.createElement("tbody", null, rows.map((row, i) => /* @__PURE__ */ react.default.createElement("tr", {
|
|
691
|
+
key: row,
|
|
692
|
+
style: styles.tr
|
|
693
|
+
}, /* @__PURE__ */ react.default.createElement("td", { style: {
|
|
694
|
+
...styles.td,
|
|
695
|
+
...borderStyles.none
|
|
696
|
+
} }, row), columns.map((column) => {
|
|
697
|
+
const rowData = rowsData[i];
|
|
698
|
+
if (typeof rowData === "object" && rowData !== null && hasOwnProperty.call(rowData, column)) return /* @__PURE__ */ react.default.createElement("td", {
|
|
699
|
+
key: column,
|
|
700
|
+
style: {
|
|
701
|
+
...styles.td,
|
|
702
|
+
...borderStyles.solid
|
|
703
|
+
}
|
|
704
|
+
}, /* @__PURE__ */ react.default.createElement(ObjectValue, { object: rowData[column] }));
|
|
705
|
+
else return /* @__PURE__ */ react.default.createElement("td", {
|
|
706
|
+
key: column,
|
|
707
|
+
style: {
|
|
708
|
+
...styles.td,
|
|
709
|
+
...borderStyles.solid
|
|
710
|
+
}
|
|
711
|
+
});
|
|
712
|
+
}))))));
|
|
894
713
|
};
|
|
895
|
-
var SortIconContainer = (props) => /* @__PURE__ */
|
|
896
|
-
|
|
897
|
-
|
|
898
|
-
|
|
899
|
-
|
|
900
|
-
|
|
901
|
-
|
|
902
|
-
|
|
903
|
-
}
|
|
904
|
-
}, props.children);
|
|
714
|
+
var SortIconContainer = (props) => /* @__PURE__ */ react.default.createElement("div", { style: {
|
|
715
|
+
position: "absolute",
|
|
716
|
+
top: 1,
|
|
717
|
+
right: 0,
|
|
718
|
+
bottom: 1,
|
|
719
|
+
display: "flex",
|
|
720
|
+
alignItems: "center"
|
|
721
|
+
} }, props.children);
|
|
905
722
|
var SortIcon = ({ sortAscending }) => {
|
|
906
|
-
|
|
907
|
-
|
|
908
|
-
|
|
909
|
-
style: styles
|
|
910
|
-
}, glyph);
|
|
723
|
+
const styles = useStyles("TableInspectorSortIcon");
|
|
724
|
+
const glyph = sortAscending ? "▲" : "▼";
|
|
725
|
+
return /* @__PURE__ */ react.default.createElement("div", { style: styles }, glyph);
|
|
911
726
|
};
|
|
912
|
-
var TH = ({
|
|
913
|
-
|
|
914
|
-
|
|
915
|
-
|
|
916
|
-
|
|
917
|
-
|
|
918
|
-
|
|
919
|
-
|
|
920
|
-
|
|
921
|
-
|
|
922
|
-
|
|
923
|
-
|
|
924
|
-
|
|
925
|
-
|
|
926
|
-
|
|
927
|
-
|
|
928
|
-
...borderStyle,
|
|
929
|
-
...hovered ? styles.base[":hover"] : {}
|
|
930
|
-
},
|
|
931
|
-
onMouseEnter: handleMouseEnter,
|
|
932
|
-
onMouseLeave: handleMouseLeave,
|
|
933
|
-
onClick
|
|
934
|
-
}, /* @__PURE__ */ React14__default.default.createElement("div", {
|
|
935
|
-
style: styles.div
|
|
936
|
-
}, children), sorted && /* @__PURE__ */ React14__default.default.createElement(SortIconContainer, null, /* @__PURE__ */ React14__default.default.createElement(SortIcon, {
|
|
937
|
-
sortAscending
|
|
938
|
-
})));
|
|
727
|
+
var TH = ({ sortAscending = false, sorted = false, onClick = void 0, borderStyle = {}, children,...thProps }) => {
|
|
728
|
+
const styles = useStyles("TableInspectorTH");
|
|
729
|
+
const [hovered, setHovered] = (0, react.useState)(false);
|
|
730
|
+
const handleMouseEnter = (0, react.useCallback)(() => setHovered(true), []);
|
|
731
|
+
const handleMouseLeave = (0, react.useCallback)(() => setHovered(false), []);
|
|
732
|
+
return /* @__PURE__ */ react.default.createElement("th", {
|
|
733
|
+
...thProps,
|
|
734
|
+
style: {
|
|
735
|
+
...styles.base,
|
|
736
|
+
...borderStyle,
|
|
737
|
+
...hovered ? styles.base[":hover"] : {}
|
|
738
|
+
},
|
|
739
|
+
onMouseEnter: handleMouseEnter,
|
|
740
|
+
onMouseLeave: handleMouseLeave,
|
|
741
|
+
onClick
|
|
742
|
+
}, /* @__PURE__ */ react.default.createElement("div", { style: styles.div }, children), sorted && /* @__PURE__ */ react.default.createElement(SortIconContainer, null, /* @__PURE__ */ react.default.createElement(SortIcon, { sortAscending })));
|
|
939
743
|
};
|
|
940
|
-
var HeaderContainer = ({
|
|
941
|
-
|
|
942
|
-
|
|
943
|
-
|
|
944
|
-
|
|
945
|
-
|
|
946
|
-
|
|
947
|
-
|
|
948
|
-
|
|
949
|
-
|
|
950
|
-
|
|
951
|
-
|
|
952
|
-
|
|
953
|
-
|
|
954
|
-
|
|
955
|
-
style: styles.table
|
|
956
|
-
}, /* @__PURE__ */ React14__default.default.createElement("tbody", null, /* @__PURE__ */ React14__default.default.createElement("tr", null, /* @__PURE__ */ React14__default.default.createElement(TH, {
|
|
957
|
-
borderStyle: borderStyles.none,
|
|
958
|
-
sorted: sorted && sortIndexColumn,
|
|
959
|
-
sortAscending,
|
|
960
|
-
onClick: onIndexTHClick
|
|
961
|
-
}, indexColumnText), columns.map((column) => /* @__PURE__ */ React14__default.default.createElement(TH, {
|
|
962
|
-
borderStyle: borderStyles.solid,
|
|
963
|
-
key: column,
|
|
964
|
-
sorted: sorted && sortColumn === column,
|
|
965
|
-
sortAscending,
|
|
966
|
-
onClick: onTHClick.bind(null, column)
|
|
967
|
-
}, column))))));
|
|
744
|
+
var HeaderContainer = ({ indexColumnText = "(index)", columns = [], sorted, sortIndexColumn, sortColumn, sortAscending, onTHClick, onIndexTHClick }) => {
|
|
745
|
+
const styles = useStyles("TableInspectorHeaderContainer");
|
|
746
|
+
const borderStyles = useStyles("TableInspectorLeftBorder");
|
|
747
|
+
return /* @__PURE__ */ react.default.createElement("div", { style: styles.base }, /* @__PURE__ */ react.default.createElement("table", { style: styles.table }, /* @__PURE__ */ react.default.createElement("tbody", null, /* @__PURE__ */ react.default.createElement("tr", null, /* @__PURE__ */ react.default.createElement(TH, {
|
|
748
|
+
borderStyle: borderStyles.none,
|
|
749
|
+
sorted: sorted && sortIndexColumn,
|
|
750
|
+
sortAscending,
|
|
751
|
+
onClick: onIndexTHClick
|
|
752
|
+
}, indexColumnText), columns.map((column) => /* @__PURE__ */ react.default.createElement(TH, {
|
|
753
|
+
borderStyle: borderStyles.solid,
|
|
754
|
+
key: column,
|
|
755
|
+
sorted: sorted && sortColumn === column,
|
|
756
|
+
sortAscending,
|
|
757
|
+
onClick: onTHClick.bind(null, column)
|
|
758
|
+
}, column))))));
|
|
968
759
|
};
|
|
969
|
-
var TableInspector = ({
|
|
970
|
-
|
|
971
|
-
|
|
972
|
-
|
|
973
|
-
|
|
974
|
-
|
|
975
|
-
|
|
976
|
-
|
|
977
|
-
|
|
978
|
-
|
|
979
|
-
|
|
980
|
-
|
|
981
|
-
|
|
982
|
-
|
|
983
|
-
|
|
984
|
-
|
|
985
|
-
|
|
986
|
-
|
|
987
|
-
|
|
988
|
-
|
|
989
|
-
|
|
990
|
-
|
|
991
|
-
|
|
992
|
-
|
|
993
|
-
|
|
994
|
-
|
|
995
|
-
|
|
996
|
-
|
|
997
|
-
|
|
998
|
-
|
|
999
|
-
|
|
1000
|
-
|
|
1001
|
-
|
|
1002
|
-
|
|
1003
|
-
|
|
1004
|
-
|
|
1005
|
-
|
|
1006
|
-
|
|
1007
|
-
|
|
1008
|
-
|
|
1009
|
-
|
|
1010
|
-
|
|
1011
|
-
|
|
1012
|
-
|
|
1013
|
-
|
|
1014
|
-
|
|
1015
|
-
|
|
1016
|
-
|
|
1017
|
-
|
|
1018
|
-
|
|
1019
|
-
|
|
1020
|
-
|
|
1021
|
-
|
|
1022
|
-
|
|
1023
|
-
|
|
1024
|
-
|
|
1025
|
-
|
|
1026
|
-
|
|
1027
|
-
|
|
1028
|
-
|
|
1029
|
-
|
|
1030
|
-
|
|
1031
|
-
|
|
1032
|
-
|
|
1033
|
-
|
|
1034
|
-
|
|
1035
|
-
|
|
1036
|
-
|
|
1037
|
-
|
|
1038
|
-
|
|
1039
|
-
|
|
1040
|
-
|
|
1041
|
-
|
|
1042
|
-
|
|
1043
|
-
|
|
1044
|
-
|
|
1045
|
-
|
|
1046
|
-
|
|
1047
|
-
|
|
1048
|
-
|
|
1049
|
-
|
|
1050
|
-
|
|
1051
|
-
|
|
1052
|
-
|
|
1053
|
-
|
|
1054
|
-
|
|
1055
|
-
|
|
1056
|
-
};
|
|
1057
|
-
const sortedRowIndexes = columnDataWithRowIndexes.sort(comparator((item) => item[0], sortAscending)).map((item) => item[1]);
|
|
1058
|
-
rowHeaders = sortedRowIndexes.map((i) => rowHeaders[i]);
|
|
1059
|
-
rowsData = sortedRowIndexes.map((i) => rowsData[i]);
|
|
1060
|
-
}
|
|
1061
|
-
return /* @__PURE__ */ React14__default.default.createElement("div", {
|
|
1062
|
-
style: styles.base
|
|
1063
|
-
}, /* @__PURE__ */ React14__default.default.createElement(HeaderContainer, {
|
|
1064
|
-
columns: colHeaders,
|
|
1065
|
-
sorted,
|
|
1066
|
-
sortIndexColumn,
|
|
1067
|
-
sortColumn,
|
|
1068
|
-
sortAscending,
|
|
1069
|
-
onTHClick: handleTHClick,
|
|
1070
|
-
onIndexTHClick: handleIndexTHClick
|
|
1071
|
-
}), /* @__PURE__ */ React14__default.default.createElement(DataContainer, {
|
|
1072
|
-
rows: rowHeaders,
|
|
1073
|
-
columns: colHeaders,
|
|
1074
|
-
rowsData
|
|
1075
|
-
}));
|
|
760
|
+
var TableInspector = ({ data, columns }) => {
|
|
761
|
+
const styles = useStyles("TableInspector");
|
|
762
|
+
const [{ sorted, sortIndexColumn, sortColumn, sortAscending }, setState] = (0, react.useState)({
|
|
763
|
+
sorted: false,
|
|
764
|
+
sortIndexColumn: false,
|
|
765
|
+
sortColumn: void 0,
|
|
766
|
+
sortAscending: false
|
|
767
|
+
});
|
|
768
|
+
const handleIndexTHClick = (0, react.useCallback)(() => {
|
|
769
|
+
setState(({ sortIndexColumn: sortIndexColumn2, sortAscending: sortAscending2 }) => ({
|
|
770
|
+
sorted: true,
|
|
771
|
+
sortIndexColumn: true,
|
|
772
|
+
sortColumn: void 0,
|
|
773
|
+
sortAscending: sortIndexColumn2 ? !sortAscending2 : true
|
|
774
|
+
}));
|
|
775
|
+
}, []);
|
|
776
|
+
const handleTHClick = (0, react.useCallback)((col) => {
|
|
777
|
+
setState(({ sortColumn: sortColumn2, sortAscending: sortAscending2 }) => ({
|
|
778
|
+
sorted: true,
|
|
779
|
+
sortIndexColumn: false,
|
|
780
|
+
sortColumn: col,
|
|
781
|
+
sortAscending: col === sortColumn2 ? !sortAscending2 : true
|
|
782
|
+
}));
|
|
783
|
+
}, []);
|
|
784
|
+
if (typeof data !== "object" || data === null) return /* @__PURE__ */ react.default.createElement("div", null);
|
|
785
|
+
let { rowHeaders, colHeaders } = getHeaders(data);
|
|
786
|
+
if (columns !== void 0) colHeaders = columns;
|
|
787
|
+
let rowsData = rowHeaders.map((rowHeader) => data[rowHeader]);
|
|
788
|
+
let columnDataWithRowIndexes;
|
|
789
|
+
if (sortColumn !== void 0) columnDataWithRowIndexes = rowsData.map((rowData, index) => {
|
|
790
|
+
if (typeof rowData === "object" && rowData !== null) {
|
|
791
|
+
const columnData = rowData[sortColumn];
|
|
792
|
+
return [columnData, index];
|
|
793
|
+
}
|
|
794
|
+
return [void 0, index];
|
|
795
|
+
});
|
|
796
|
+
else if (sortIndexColumn) columnDataWithRowIndexes = rowHeaders.map((rowData, index) => {
|
|
797
|
+
const columnData = rowHeaders[index];
|
|
798
|
+
return [columnData, index];
|
|
799
|
+
});
|
|
800
|
+
if (columnDataWithRowIndexes !== void 0) {
|
|
801
|
+
const comparator = (mapper, ascending) => {
|
|
802
|
+
return (a, b) => {
|
|
803
|
+
const v1 = mapper(a);
|
|
804
|
+
const v2 = mapper(b);
|
|
805
|
+
const type1 = typeof v1;
|
|
806
|
+
const type2 = typeof v2;
|
|
807
|
+
const lt = (v12, v22) => {
|
|
808
|
+
if (v12 < v22) return -1;
|
|
809
|
+
else if (v12 > v22) return 1;
|
|
810
|
+
else return 0;
|
|
811
|
+
};
|
|
812
|
+
let result;
|
|
813
|
+
if (type1 === type2) result = lt(v1, v2);
|
|
814
|
+
else {
|
|
815
|
+
const order = {
|
|
816
|
+
string: 0,
|
|
817
|
+
number: 1,
|
|
818
|
+
object: 2,
|
|
819
|
+
symbol: 3,
|
|
820
|
+
boolean: 4,
|
|
821
|
+
undefined: 5,
|
|
822
|
+
function: 6
|
|
823
|
+
};
|
|
824
|
+
result = lt(order[type1], order[type2]);
|
|
825
|
+
}
|
|
826
|
+
if (!ascending) result = -result;
|
|
827
|
+
return result;
|
|
828
|
+
};
|
|
829
|
+
};
|
|
830
|
+
const sortedRowIndexes = columnDataWithRowIndexes.sort(comparator((item) => item[0], sortAscending)).map((item) => item[1]);
|
|
831
|
+
rowHeaders = sortedRowIndexes.map((i) => rowHeaders[i]);
|
|
832
|
+
rowsData = sortedRowIndexes.map((i) => rowsData[i]);
|
|
833
|
+
}
|
|
834
|
+
return /* @__PURE__ */ react.default.createElement("div", { style: styles.base }, /* @__PURE__ */ react.default.createElement(HeaderContainer, {
|
|
835
|
+
columns: colHeaders,
|
|
836
|
+
sorted,
|
|
837
|
+
sortIndexColumn,
|
|
838
|
+
sortColumn,
|
|
839
|
+
sortAscending,
|
|
840
|
+
onTHClick: handleTHClick,
|
|
841
|
+
onIndexTHClick: handleIndexTHClick
|
|
842
|
+
}), /* @__PURE__ */ react.default.createElement(DataContainer, {
|
|
843
|
+
rows: rowHeaders,
|
|
844
|
+
columns: colHeaders,
|
|
845
|
+
rowsData
|
|
846
|
+
}));
|
|
1076
847
|
};
|
|
1077
848
|
var themedTableInspector = themeAcceptor(TableInspector);
|
|
1078
849
|
var TEXT_NODE_MAX_INLINE_CHARS = 80;
|
|
1079
850
|
var shouldInline = (data) => data.childNodes.length === 0 || data.childNodes.length === 1 && data.childNodes[0].nodeType === Node.TEXT_NODE && data.textContent.length < TEXT_NODE_MAX_INLINE_CHARS;
|
|
1080
851
|
var OpenTag = ({ tagName, attributes, styles }) => {
|
|
1081
|
-
|
|
1082
|
-
|
|
1083
|
-
|
|
1084
|
-
|
|
1085
|
-
|
|
1086
|
-
|
|
1087
|
-
|
|
1088
|
-
|
|
1089
|
-
|
|
1090
|
-
|
|
1091
|
-
key: i
|
|
1092
|
-
}, " ", /* @__PURE__ */ React14__default.default.createElement("span", {
|
|
1093
|
-
style: styles.htmlAttributeName
|
|
1094
|
-
}, attribute.name), '="', /* @__PURE__ */ React14__default.default.createElement("span", {
|
|
1095
|
-
style: styles.htmlAttributeValue
|
|
1096
|
-
}, attribute.value), '"'));
|
|
1097
|
-
}
|
|
1098
|
-
return attributeNodes;
|
|
1099
|
-
}
|
|
1100
|
-
})(), ">");
|
|
852
|
+
return /* @__PURE__ */ react.default.createElement("span", { style: styles.base }, "<", /* @__PURE__ */ react.default.createElement("span", { style: styles.tagName }, tagName), (() => {
|
|
853
|
+
if (attributes) {
|
|
854
|
+
const attributeNodes = [];
|
|
855
|
+
for (let i = 0; i < attributes.length; i++) {
|
|
856
|
+
const attribute = attributes[i];
|
|
857
|
+
attributeNodes.push(/* @__PURE__ */ react.default.createElement("span", { key: i }, " ", /* @__PURE__ */ react.default.createElement("span", { style: styles.htmlAttributeName }, attribute.name), "=\"", /* @__PURE__ */ react.default.createElement("span", { style: styles.htmlAttributeValue }, attribute.value), "\""));
|
|
858
|
+
}
|
|
859
|
+
return attributeNodes;
|
|
860
|
+
}
|
|
861
|
+
})(), ">");
|
|
1101
862
|
};
|
|
1102
|
-
var CloseTag = ({ tagName, isChildNode = false, styles }) => /* @__PURE__ */
|
|
1103
|
-
style: Object.assign({}, styles.base, isChildNode && styles.offsetLeft)
|
|
1104
|
-
}, "</", /* @__PURE__ */ React14__default.default.createElement("span", {
|
|
1105
|
-
style: styles.tagName
|
|
1106
|
-
}, tagName), ">");
|
|
863
|
+
var CloseTag = ({ tagName, isChildNode = false, styles }) => /* @__PURE__ */ react.default.createElement("span", { style: Object.assign({}, styles.base, isChildNode && styles.offsetLeft) }, "</", /* @__PURE__ */ react.default.createElement("span", { style: styles.tagName }, tagName), ">");
|
|
1107
864
|
var nameByNodeType = {
|
|
1108
|
-
|
|
1109
|
-
|
|
1110
|
-
|
|
1111
|
-
|
|
1112
|
-
|
|
1113
|
-
|
|
1114
|
-
|
|
865
|
+
1: "ELEMENT_NODE",
|
|
866
|
+
3: "TEXT_NODE",
|
|
867
|
+
7: "PROCESSING_INSTRUCTION_NODE",
|
|
868
|
+
8: "COMMENT_NODE",
|
|
869
|
+
9: "DOCUMENT_NODE",
|
|
870
|
+
10: "DOCUMENT_TYPE_NODE",
|
|
871
|
+
11: "DOCUMENT_FRAGMENT_NODE"
|
|
1115
872
|
};
|
|
1116
873
|
var DOMNodePreview = ({ isCloseTag, data, expanded }) => {
|
|
1117
|
-
|
|
1118
|
-
|
|
1119
|
-
|
|
1120
|
-
|
|
1121
|
-
|
|
1122
|
-
|
|
1123
|
-
|
|
1124
|
-
|
|
1125
|
-
|
|
1126
|
-
|
|
1127
|
-
|
|
1128
|
-
|
|
1129
|
-
|
|
1130
|
-
|
|
1131
|
-
|
|
1132
|
-
|
|
1133
|
-
|
|
1134
|
-
|
|
1135
|
-
|
|
1136
|
-
|
|
1137
|
-
|
|
1138
|
-
|
|
1139
|
-
|
|
1140
|
-
|
|
1141
|
-
style: styles.htmlComment
|
|
1142
|
-
}, "<!--", data.textContent, "-->");
|
|
1143
|
-
case Node.PROCESSING_INSTRUCTION_NODE:
|
|
1144
|
-
return /* @__PURE__ */ React14__default.default.createElement("span", null, data.nodeName);
|
|
1145
|
-
case Node.DOCUMENT_TYPE_NODE:
|
|
1146
|
-
return /* @__PURE__ */ React14__default.default.createElement("span", {
|
|
1147
|
-
style: styles.htmlDoctype
|
|
1148
|
-
}, "<!DOCTYPE ", data.name, data.publicId ? ` PUBLIC "${data.publicId}"` : "", !data.publicId && data.systemId ? " SYSTEM" : "", data.systemId ? ` "${data.systemId}"` : "", ">");
|
|
1149
|
-
case Node.DOCUMENT_NODE:
|
|
1150
|
-
return /* @__PURE__ */ React14__default.default.createElement("span", null, data.nodeName);
|
|
1151
|
-
case Node.DOCUMENT_FRAGMENT_NODE:
|
|
1152
|
-
return /* @__PURE__ */ React14__default.default.createElement("span", null, data.nodeName);
|
|
1153
|
-
default:
|
|
1154
|
-
return /* @__PURE__ */ React14__default.default.createElement("span", null, nameByNodeType[data.nodeType]);
|
|
1155
|
-
}
|
|
874
|
+
const styles = useStyles("DOMNodePreview");
|
|
875
|
+
if (isCloseTag) return /* @__PURE__ */ react.default.createElement(CloseTag, {
|
|
876
|
+
styles: styles.htmlCloseTag,
|
|
877
|
+
isChildNode: true,
|
|
878
|
+
tagName: data.tagName
|
|
879
|
+
});
|
|
880
|
+
switch (data.nodeType) {
|
|
881
|
+
case Node.ELEMENT_NODE: return /* @__PURE__ */ react.default.createElement("span", null, /* @__PURE__ */ react.default.createElement(OpenTag, {
|
|
882
|
+
tagName: data.tagName,
|
|
883
|
+
attributes: data.attributes,
|
|
884
|
+
styles: styles.htmlOpenTag
|
|
885
|
+
}), shouldInline(data) ? data.textContent : !expanded && "…", !expanded && /* @__PURE__ */ react.default.createElement(CloseTag, {
|
|
886
|
+
tagName: data.tagName,
|
|
887
|
+
styles: styles.htmlCloseTag
|
|
888
|
+
}));
|
|
889
|
+
case Node.TEXT_NODE: return /* @__PURE__ */ react.default.createElement("span", null, data.textContent);
|
|
890
|
+
case Node.CDATA_SECTION_NODE: return /* @__PURE__ */ react.default.createElement("span", null, "<![CDATA[" + data.textContent + "]]>");
|
|
891
|
+
case Node.COMMENT_NODE: return /* @__PURE__ */ react.default.createElement("span", { style: styles.htmlComment }, "<!--", data.textContent, "-->");
|
|
892
|
+
case Node.PROCESSING_INSTRUCTION_NODE: return /* @__PURE__ */ react.default.createElement("span", null, data.nodeName);
|
|
893
|
+
case Node.DOCUMENT_TYPE_NODE: return /* @__PURE__ */ react.default.createElement("span", { style: styles.htmlDoctype }, "<!DOCTYPE ", data.name, data.publicId ? ` PUBLIC "${data.publicId}"` : "", !data.publicId && data.systemId ? " SYSTEM" : "", data.systemId ? ` "${data.systemId}"` : "", ">");
|
|
894
|
+
case Node.DOCUMENT_NODE: return /* @__PURE__ */ react.default.createElement("span", null, data.nodeName);
|
|
895
|
+
case Node.DOCUMENT_FRAGMENT_NODE: return /* @__PURE__ */ react.default.createElement("span", null, data.nodeName);
|
|
896
|
+
default: return /* @__PURE__ */ react.default.createElement("span", null, nameByNodeType[data.nodeType]);
|
|
897
|
+
}
|
|
1156
898
|
};
|
|
1157
899
|
var domIterator = function* (data) {
|
|
1158
|
-
|
|
1159
|
-
|
|
1160
|
-
|
|
1161
|
-
|
|
1162
|
-
|
|
1163
|
-
|
|
1164
|
-
|
|
1165
|
-
|
|
1166
|
-
|
|
1167
|
-
|
|
1168
|
-
|
|
1169
|
-
|
|
1170
|
-
|
|
1171
|
-
|
|
1172
|
-
|
|
1173
|
-
|
|
1174
|
-
|
|
1175
|
-
data: {
|
|
1176
|
-
tagName: data.tagName
|
|
1177
|
-
},
|
|
1178
|
-
isCloseTag: true
|
|
1179
|
-
};
|
|
1180
|
-
}
|
|
1181
|
-
}
|
|
900
|
+
if (data && data.childNodes) {
|
|
901
|
+
const textInlined = shouldInline(data);
|
|
902
|
+
if (textInlined) return;
|
|
903
|
+
for (let i = 0; i < data.childNodes.length; i++) {
|
|
904
|
+
const node = data.childNodes[i];
|
|
905
|
+
if (node.nodeType === Node.TEXT_NODE && node.textContent.trim().length === 0) continue;
|
|
906
|
+
yield {
|
|
907
|
+
name: `${node.tagName}[${i}]`,
|
|
908
|
+
data: node
|
|
909
|
+
};
|
|
910
|
+
}
|
|
911
|
+
if (data.tagName) yield {
|
|
912
|
+
name: "CLOSE_TAG",
|
|
913
|
+
data: { tagName: data.tagName },
|
|
914
|
+
isCloseTag: true
|
|
915
|
+
};
|
|
916
|
+
}
|
|
1182
917
|
};
|
|
1183
918
|
var DOMInspector = (props) => {
|
|
1184
|
-
|
|
1185
|
-
|
|
1186
|
-
|
|
1187
|
-
|
|
1188
|
-
|
|
919
|
+
return /* @__PURE__ */ react.default.createElement(TreeView, {
|
|
920
|
+
nodeRenderer: DOMNodePreview,
|
|
921
|
+
dataIterator: domIterator,
|
|
922
|
+
...props
|
|
923
|
+
});
|
|
1189
924
|
};
|
|
1190
925
|
var themedDOMInspector = themeAcceptor(DOMInspector);
|
|
1191
|
-
var import_is_dom = __toESM(require_is_dom());
|
|
1192
|
-
var Inspector = ({ table = false, data
|
|
1193
|
-
|
|
1194
|
-
|
|
1195
|
-
|
|
1196
|
-
|
|
1197
|
-
|
|
1198
|
-
|
|
1199
|
-
|
|
1200
|
-
|
|
1201
|
-
|
|
1202
|
-
|
|
1203
|
-
|
|
1204
|
-
|
|
1205
|
-
data,
|
|
1206
|
-
...rest
|
|
1207
|
-
});
|
|
926
|
+
var import_is_dom = __toESM$1(require_is_dom());
|
|
927
|
+
var Inspector$1 = ({ table = false, data,...rest }) => {
|
|
928
|
+
if (table) return /* @__PURE__ */ react.default.createElement(themedTableInspector, {
|
|
929
|
+
data,
|
|
930
|
+
...rest
|
|
931
|
+
});
|
|
932
|
+
if ((0, import_is_dom.default)(data)) return /* @__PURE__ */ react.default.createElement(themedDOMInspector, {
|
|
933
|
+
data,
|
|
934
|
+
...rest
|
|
935
|
+
});
|
|
936
|
+
return /* @__PURE__ */ react.default.createElement(themedObjectInspector, {
|
|
937
|
+
data,
|
|
938
|
+
...rest
|
|
939
|
+
});
|
|
1208
940
|
};
|
|
1209
941
|
|
|
1210
|
-
|
|
1211
|
-
|
|
1212
|
-
|
|
1213
|
-
|
|
1214
|
-
|
|
1215
|
-
|
|
1216
|
-
|
|
1217
|
-
|
|
1218
|
-
|
|
1219
|
-
}
|
|
1220
|
-
}, deps);
|
|
942
|
+
//#endregion
|
|
943
|
+
//#region src/experiments/inspect.tsx
|
|
944
|
+
const useImperativeHandlePolyfill = (ref, init, deps) => {
|
|
945
|
+
(0, react.useEffect)(() => {
|
|
946
|
+
if (ref) {
|
|
947
|
+
if (typeof ref === "function") ref(init());
|
|
948
|
+
else if (typeof ref === "object" && "current" in ref) ref.current = init();
|
|
949
|
+
}
|
|
950
|
+
}, deps);
|
|
1221
951
|
};
|
|
1222
|
-
|
|
1223
|
-
|
|
1224
|
-
|
|
1225
|
-
|
|
1226
|
-
|
|
1227
|
-
|
|
1228
|
-
|
|
1229
|
-
|
|
1230
|
-
|
|
1231
|
-
}
|
|
1232
|
-
};
|
|
952
|
+
const useImperativeHandle = react.useImperativeHandle || useImperativeHandlePolyfill;
|
|
953
|
+
const throttle = (fn, wait) => {
|
|
954
|
+
let timeout = null;
|
|
955
|
+
return function() {
|
|
956
|
+
if (!timeout) timeout = setTimeout(() => {
|
|
957
|
+
fn.apply(this, arguments);
|
|
958
|
+
timeout = null;
|
|
959
|
+
}, wait);
|
|
960
|
+
};
|
|
1233
961
|
};
|
|
1234
|
-
|
|
1235
|
-
|
|
1236
|
-
|
|
1237
|
-
|
|
1238
|
-
|
|
1239
|
-
|
|
1240
|
-
|
|
1241
|
-
|
|
1242
|
-
|
|
1243
|
-
|
|
1244
|
-
|
|
1245
|
-
|
|
1246
|
-
|
|
1247
|
-
|
|
1248
|
-
|
|
1249
|
-
|
|
1250
|
-
|
|
1251
|
-
|
|
1252
|
-
|
|
1253
|
-
|
|
1254
|
-
|
|
1255
|
-
|
|
1256
|
-
|
|
1257
|
-
|
|
1258
|
-
|
|
1259
|
-
|
|
1260
|
-
|
|
1261
|
-
|
|
1262
|
-
|
|
1263
|
-
|
|
1264
|
-
|
|
1265
|
-
|
|
1266
|
-
|
|
1267
|
-
|
|
1268
|
-
|
|
1269
|
-
|
|
1270
|
-
|
|
1271
|
-
|
|
962
|
+
const theme = {
|
|
963
|
+
BASE_FONT_FAMILY: "Menlo, monospace",
|
|
964
|
+
BASE_FONT_SIZE: "12px",
|
|
965
|
+
BASE_LINE_HEIGHT: 1.2,
|
|
966
|
+
BASE_BACKGROUND_COLOR: "none",
|
|
967
|
+
BASE_COLOR: "#FFF",
|
|
968
|
+
OBJECT_PREVIEW_ARRAY_MAX_PROPERTIES: 10,
|
|
969
|
+
OBJECT_PREVIEW_OBJECT_MAX_PROPERTIES: 5,
|
|
970
|
+
OBJECT_NAME_COLOR: "#FFC799",
|
|
971
|
+
OBJECT_VALUE_NULL_COLOR: "#A0A0A0",
|
|
972
|
+
OBJECT_VALUE_UNDEFINED_COLOR: "#A0A0A0",
|
|
973
|
+
OBJECT_VALUE_REGEXP_COLOR: "#FF8080",
|
|
974
|
+
OBJECT_VALUE_STRING_COLOR: "#99FFE4",
|
|
975
|
+
OBJECT_VALUE_SYMBOL_COLOR: "#FFC799",
|
|
976
|
+
OBJECT_VALUE_NUMBER_COLOR: "#FFC799",
|
|
977
|
+
OBJECT_VALUE_BOOLEAN_COLOR: "#FFC799",
|
|
978
|
+
OBJECT_VALUE_FUNCTION_PREFIX_COLOR: "#FFC799",
|
|
979
|
+
HTML_TAG_COLOR: "#FFC799",
|
|
980
|
+
HTML_TAGNAME_COLOR: "#FFC799",
|
|
981
|
+
HTML_TAGNAME_TEXT_TRANSFORM: "lowercase",
|
|
982
|
+
HTML_ATTRIBUTE_NAME_COLOR: "#A0A0A0",
|
|
983
|
+
HTML_ATTRIBUTE_VALUE_COLOR: "#99FFE4",
|
|
984
|
+
HTML_COMMENT_COLOR: "#8b8b8b94",
|
|
985
|
+
HTML_DOCTYPE_COLOR: "#A0A0A0",
|
|
986
|
+
ARROW_COLOR: "#A0A0A0",
|
|
987
|
+
ARROW_MARGIN_RIGHT: 3,
|
|
988
|
+
ARROW_FONT_SIZE: 12,
|
|
989
|
+
ARROW_ANIMATION_DURATION: "0",
|
|
990
|
+
TREENODE_FONT_FAMILY: "Menlo, monospace",
|
|
991
|
+
TREENODE_FONT_SIZE: "11px",
|
|
992
|
+
TREENODE_LINE_HEIGHT: 1.2,
|
|
993
|
+
TREENODE_PADDING_LEFT: 12,
|
|
994
|
+
TABLE_BORDER_COLOR: "#282828",
|
|
995
|
+
TABLE_TH_BACKGROUND_COLOR: "#161616",
|
|
996
|
+
TABLE_TH_HOVER_COLOR: "#232323",
|
|
997
|
+
TABLE_SORT_ICON_COLOR: "#A0A0A0",
|
|
998
|
+
TABLE_DATA_BACKGROUND_IMAGE: "none",
|
|
999
|
+
TABLE_DATA_BACKGROUND_SIZE: "0"
|
|
1272
1000
|
};
|
|
1273
|
-
|
|
1274
|
-
|
|
1275
|
-
|
|
1276
|
-
|
|
1277
|
-
|
|
1278
|
-
|
|
1279
|
-
|
|
1280
|
-
|
|
1281
|
-
|
|
1282
|
-
|
|
1283
|
-
|
|
1284
|
-
|
|
1285
|
-
|
|
1286
|
-
|
|
1287
|
-
|
|
1288
|
-
|
|
1289
|
-
|
|
1290
|
-
|
|
1291
|
-
|
|
1292
|
-
|
|
1293
|
-
|
|
1294
|
-
|
|
1295
|
-
|
|
1296
|
-
|
|
1297
|
-
|
|
1298
|
-
|
|
1299
|
-
|
|
1300
|
-
|
|
1301
|
-
|
|
1302
|
-
|
|
1303
|
-
|
|
1304
|
-
|
|
1305
|
-
|
|
1306
|
-
|
|
1307
|
-
|
|
1308
|
-
|
|
1309
|
-
|
|
1310
|
-
|
|
1311
|
-
|
|
1312
|
-
|
|
1313
|
-
|
|
1314
|
-
|
|
1315
|
-
|
|
1316
|
-
|
|
1317
|
-
|
|
1318
|
-
|
|
1319
|
-
|
|
1320
|
-
|
|
1321
|
-
|
|
1322
|
-
|
|
1323
|
-
|
|
1324
|
-
|
|
1325
|
-
|
|
1326
|
-
|
|
1327
|
-
|
|
1328
|
-
|
|
1329
|
-
|
|
1330
|
-
|
|
1331
|
-
|
|
1332
|
-
|
|
1333
|
-
|
|
1334
|
-
|
|
1335
|
-
|
|
1336
|
-
|
|
1337
|
-
|
|
1338
|
-
|
|
1339
|
-
|
|
1340
|
-
|
|
1341
|
-
|
|
1342
|
-
|
|
1343
|
-
|
|
1344
|
-
|
|
1345
|
-
|
|
1346
|
-
|
|
1347
|
-
|
|
1348
|
-
|
|
1349
|
-
|
|
1350
|
-
|
|
1351
|
-
|
|
1352
|
-
|
|
1353
|
-
|
|
1354
|
-
|
|
1355
|
-
|
|
1356
|
-
|
|
1357
|
-
|
|
1358
|
-
|
|
1359
|
-
|
|
1360
|
-
|
|
1361
|
-
|
|
1362
|
-
|
|
1363
|
-
|
|
1364
|
-
|
|
1365
|
-
|
|
1366
|
-
|
|
1367
|
-
|
|
1368
|
-
|
|
1369
|
-
|
|
1370
|
-
|
|
1371
|
-
|
|
1372
|
-
|
|
1373
|
-
|
|
1374
|
-
|
|
1375
|
-
|
|
1376
|
-
|
|
1377
|
-
|
|
1378
|
-
|
|
1379
|
-
|
|
1380
|
-
|
|
1381
|
-
|
|
1382
|
-
|
|
1383
|
-
|
|
1384
|
-
|
|
1385
|
-
|
|
1386
|
-
|
|
1387
|
-
|
|
1388
|
-
|
|
1389
|
-
|
|
1390
|
-
|
|
1391
|
-
|
|
1392
|
-
|
|
1393
|
-
|
|
1394
|
-
|
|
1395
|
-
|
|
1396
|
-
|
|
1397
|
-
|
|
1398
|
-
|
|
1399
|
-
|
|
1400
|
-
|
|
1401
|
-
|
|
1402
|
-
|
|
1403
|
-
|
|
1404
|
-
|
|
1405
|
-
|
|
1406
|
-
|
|
1407
|
-
|
|
1408
|
-
|
|
1409
|
-
|
|
1410
|
-
|
|
1411
|
-
|
|
1412
|
-
|
|
1413
|
-
|
|
1414
|
-
|
|
1415
|
-
|
|
1416
|
-
|
|
1417
|
-
|
|
1418
|
-
|
|
1419
|
-
|
|
1420
|
-
|
|
1421
|
-
|
|
1422
|
-
|
|
1423
|
-
|
|
1424
|
-
|
|
1425
|
-
|
|
1426
|
-
|
|
1427
|
-
|
|
1428
|
-
|
|
1429
|
-
|
|
1430
|
-
|
|
1431
|
-
|
|
1432
|
-
|
|
1433
|
-
|
|
1434
|
-
|
|
1435
|
-
|
|
1436
|
-
|
|
1437
|
-
|
|
1438
|
-
|
|
1439
|
-
backgroundColor: "#3a3a3a"
|
|
1440
|
-
}
|
|
1441
|
-
},
|
|
1442
|
-
`<${chunk4N6XEHJD_cjs.getDisplayName(currentFiber.type) || "unknown"}>`
|
|
1443
|
-
),
|
|
1444
|
-
/* @__PURE__ */ React14__default.default.createElement(
|
|
1445
|
-
"div",
|
|
1446
|
-
{
|
|
1447
|
-
style: {
|
|
1448
|
-
fontSize: "0.75rem",
|
|
1449
|
-
color: "#CCC"
|
|
1450
|
-
}
|
|
1451
|
-
},
|
|
1452
|
-
currentFiberSource ? /* @__PURE__ */ React14__default.default.createElement(React14__default.default.Fragment, null, currentFiberSource.fileName.split("/").slice(-2).join("/"), " ", /* @__PURE__ */ React14__default.default.createElement("br", null), "@ line ", currentFiberSource.lineNumber, ", column", " ", currentFiberSource.columnNumber) : null
|
|
1453
|
-
)
|
|
1454
|
-
)
|
|
1455
|
-
), /* @__PURE__ */ React14__default.default.createElement("style", null, `
|
|
1001
|
+
const RawInspector = (0, react.forwardRef)(({ enabled = true, dangerouslyRunInProduction = false }, ref) => {
|
|
1002
|
+
const [element, setElement] = (0, react.useState)(null);
|
|
1003
|
+
const [currentFiber, setCurrentFiber] = (0, react.useState)(null);
|
|
1004
|
+
const [currentFiberSource, setCurrentFiberSource] = (0, react.useState)(null);
|
|
1005
|
+
const [rect, setRect] = (0, react.useState)(null);
|
|
1006
|
+
const [isActive, setIsActive] = (0, react.useState)(true);
|
|
1007
|
+
const [isEnabled, setIsEnabled] = (0, react.useState)(enabled);
|
|
1008
|
+
const [position, setPosition] = (0, react.useState)({
|
|
1009
|
+
top: 0,
|
|
1010
|
+
left: 0
|
|
1011
|
+
});
|
|
1012
|
+
const currentCleanedFiber = (0, react.useMemo)(() => {
|
|
1013
|
+
if (!currentFiber) return null;
|
|
1014
|
+
const clonedFiber = { ...currentFiber };
|
|
1015
|
+
for (const key in clonedFiber) {
|
|
1016
|
+
const value = clonedFiber[key];
|
|
1017
|
+
if (!value) delete clonedFiber[key];
|
|
1018
|
+
}
|
|
1019
|
+
return clonedFiber;
|
|
1020
|
+
}, [currentFiber]);
|
|
1021
|
+
useImperativeHandle(ref, () => ({
|
|
1022
|
+
enable: () => setIsEnabled(true),
|
|
1023
|
+
disable: () => {
|
|
1024
|
+
setIsEnabled(false);
|
|
1025
|
+
setElement(null);
|
|
1026
|
+
setRect(null);
|
|
1027
|
+
},
|
|
1028
|
+
inspectElement: (element$1) => {
|
|
1029
|
+
if (!isEnabled) return;
|
|
1030
|
+
setElement(element$1);
|
|
1031
|
+
setRect(element$1.getBoundingClientRect());
|
|
1032
|
+
}
|
|
1033
|
+
}));
|
|
1034
|
+
(0, react.useEffect)(() => {
|
|
1035
|
+
(async () => {
|
|
1036
|
+
if (!element) return;
|
|
1037
|
+
const fiber = require_core.getFiberFromHostInstance(element);
|
|
1038
|
+
if (!fiber) return;
|
|
1039
|
+
const latestFiber = require_core.getLatestFiber(fiber);
|
|
1040
|
+
const source = await require_source.getFiberSource(latestFiber);
|
|
1041
|
+
setCurrentFiber(latestFiber);
|
|
1042
|
+
if (source) setCurrentFiberSource(source);
|
|
1043
|
+
})();
|
|
1044
|
+
}, [element]);
|
|
1045
|
+
(0, react.useEffect)(() => {
|
|
1046
|
+
const handleMouseMove = (event) => {
|
|
1047
|
+
const isActive$1 = require_core.isInstrumentationActive() || require_core.hasRDTHook();
|
|
1048
|
+
if (!isActive$1) {
|
|
1049
|
+
setIsActive(false);
|
|
1050
|
+
return;
|
|
1051
|
+
}
|
|
1052
|
+
if (!dangerouslyRunInProduction) {
|
|
1053
|
+
const rdtHook = require_core.getRDTHook();
|
|
1054
|
+
for (const renderer of rdtHook.renderers.values()) {
|
|
1055
|
+
const buildType = require_core.detectReactBuildType(renderer);
|
|
1056
|
+
if (buildType === "production") {
|
|
1057
|
+
setIsActive(false);
|
|
1058
|
+
return;
|
|
1059
|
+
}
|
|
1060
|
+
}
|
|
1061
|
+
}
|
|
1062
|
+
if (!isEnabled) {
|
|
1063
|
+
setElement(null);
|
|
1064
|
+
setRect(null);
|
|
1065
|
+
return;
|
|
1066
|
+
}
|
|
1067
|
+
const element$1 = document.elementFromPoint(event.clientX, event.clientY);
|
|
1068
|
+
if (!element$1) return;
|
|
1069
|
+
setElement(element$1);
|
|
1070
|
+
setRect(element$1.getBoundingClientRect());
|
|
1071
|
+
};
|
|
1072
|
+
const throttledMouseMove = throttle(handleMouseMove, 16);
|
|
1073
|
+
document.addEventListener("mousemove", throttledMouseMove);
|
|
1074
|
+
return () => document.removeEventListener("mousemove", throttledMouseMove);
|
|
1075
|
+
}, [isEnabled, dangerouslyRunInProduction]);
|
|
1076
|
+
(0, react.useEffect)(() => {
|
|
1077
|
+
if (!rect) return;
|
|
1078
|
+
const padding = 10;
|
|
1079
|
+
const inspectorWidth = 400;
|
|
1080
|
+
const inspectorHeight = 320;
|
|
1081
|
+
let left = rect.left + rect.width + padding;
|
|
1082
|
+
let top = rect.top;
|
|
1083
|
+
if (left + inspectorWidth > window.innerWidth) left = Math.max(padding, rect.left - inspectorWidth - padding);
|
|
1084
|
+
if (top >= rect.top && top <= rect.bottom) if (rect.bottom + inspectorHeight + padding <= window.innerHeight) top = rect.bottom + padding;
|
|
1085
|
+
else if (rect.top - inspectorHeight - padding >= 0) top = rect.top - inspectorHeight - padding;
|
|
1086
|
+
else top = window.innerHeight - inspectorHeight - padding;
|
|
1087
|
+
top = Math.max(padding, Math.min(top, window.innerHeight - inspectorHeight - padding));
|
|
1088
|
+
left = Math.max(padding, Math.min(left, window.innerWidth - inspectorWidth - padding));
|
|
1089
|
+
setPosition({
|
|
1090
|
+
top,
|
|
1091
|
+
left
|
|
1092
|
+
});
|
|
1093
|
+
}, [rect]);
|
|
1094
|
+
if (!rect || !isActive || !isEnabled) return null;
|
|
1095
|
+
if (!currentFiber) return null;
|
|
1096
|
+
return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
|
|
1097
|
+
/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
|
|
1098
|
+
className: "inspector-container",
|
|
1099
|
+
style: {
|
|
1100
|
+
position: "fixed",
|
|
1101
|
+
backgroundColor: "#101010",
|
|
1102
|
+
color: "#FFF",
|
|
1103
|
+
zIndex: 50,
|
|
1104
|
+
padding: "1rem",
|
|
1105
|
+
width: "30ch",
|
|
1106
|
+
height: "25ch",
|
|
1107
|
+
transition: "all 150ms ease-in-out",
|
|
1108
|
+
overflow: "auto",
|
|
1109
|
+
boxShadow: "0 4px 8px rgba(0, 0, 0, 0.5)",
|
|
1110
|
+
border: "1px solid #444",
|
|
1111
|
+
borderRadius: "8px",
|
|
1112
|
+
opacity: rect ? 1 : 0,
|
|
1113
|
+
transform: rect ? "translateY(0)" : "translateY(10px)",
|
|
1114
|
+
pointerEvents: rect ? "auto" : "none",
|
|
1115
|
+
top: position.top,
|
|
1116
|
+
left: position.left
|
|
1117
|
+
},
|
|
1118
|
+
children: [currentFiber && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Inspector$1, {
|
|
1119
|
+
theme,
|
|
1120
|
+
data: currentCleanedFiber,
|
|
1121
|
+
expandLevel: 1,
|
|
1122
|
+
table: false
|
|
1123
|
+
}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
|
|
1124
|
+
style: {
|
|
1125
|
+
position: "absolute",
|
|
1126
|
+
bottom: "0",
|
|
1127
|
+
left: "0",
|
|
1128
|
+
right: "0",
|
|
1129
|
+
display: "flex",
|
|
1130
|
+
alignItems: "center",
|
|
1131
|
+
gap: "1rem",
|
|
1132
|
+
backgroundColor: "#101010",
|
|
1133
|
+
padding: "0.75rem 1rem",
|
|
1134
|
+
borderTop: "1px solid #555",
|
|
1135
|
+
borderBottomLeftRadius: "8px",
|
|
1136
|
+
borderBottomRightRadius: "8px",
|
|
1137
|
+
zIndex: 1e3
|
|
1138
|
+
},
|
|
1139
|
+
children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
|
|
1140
|
+
style: {
|
|
1141
|
+
fontSize: "0.875rem",
|
|
1142
|
+
color: "#FFF",
|
|
1143
|
+
padding: "0.25rem 0.5rem",
|
|
1144
|
+
borderRadius: "4px",
|
|
1145
|
+
backgroundColor: "#3a3a3a"
|
|
1146
|
+
},
|
|
1147
|
+
children: `<${require_core.getDisplayName(currentFiber.type) || "unknown"}>`
|
|
1148
|
+
}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
|
|
1149
|
+
style: {
|
|
1150
|
+
fontSize: "0.75rem",
|
|
1151
|
+
color: "#CCC"
|
|
1152
|
+
},
|
|
1153
|
+
children: currentFiberSource ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
|
|
1154
|
+
currentFiberSource.fileName.split("/").slice(-2).join("/"),
|
|
1155
|
+
" ",
|
|
1156
|
+
/* @__PURE__ */ (0, react_jsx_runtime.jsx)("br", {}),
|
|
1157
|
+
"@ line ",
|
|
1158
|
+
currentFiberSource.lineNumber,
|
|
1159
|
+
", column",
|
|
1160
|
+
" ",
|
|
1161
|
+
currentFiberSource.columnNumber
|
|
1162
|
+
] }) : null
|
|
1163
|
+
})]
|
|
1164
|
+
})]
|
|
1165
|
+
}),
|
|
1166
|
+
/* @__PURE__ */ (0, react_jsx_runtime.jsx)("style", { children: `
|
|
1456
1167
|
.inspector-container::-webkit-scrollbar {
|
|
1457
1168
|
width: 8px;
|
|
1458
1169
|
}
|
|
@@ -1467,43 +1178,41 @@ var RawInspector = React14.forwardRef(
|
|
|
1467
1178
|
.inspector-container::-webkit-scrollbar-thumb:hover {
|
|
1468
1179
|
background: #555;
|
|
1469
1180
|
}
|
|
1470
|
-
`),
|
|
1471
|
-
|
|
1472
|
-
|
|
1473
|
-
|
|
1474
|
-
|
|
1475
|
-
|
|
1476
|
-
|
|
1477
|
-
|
|
1478
|
-
|
|
1479
|
-
|
|
1480
|
-
|
|
1481
|
-
|
|
1482
|
-
|
|
1483
|
-
|
|
1484
|
-
|
|
1485
|
-
|
|
1486
|
-
|
|
1487
|
-
|
|
1488
|
-
);
|
|
1489
|
-
|
|
1490
|
-
|
|
1491
|
-
|
|
1492
|
-
|
|
1493
|
-
|
|
1494
|
-
|
|
1495
|
-
|
|
1496
|
-
|
|
1497
|
-
|
|
1498
|
-
|
|
1499
|
-
|
|
1500
|
-
|
|
1501
|
-
|
|
1502
|
-
|
|
1503
|
-
}
|
|
1504
|
-
);
|
|
1505
|
-
var inspect_default = Inspector2;
|
|
1181
|
+
` }),
|
|
1182
|
+
/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { style: {
|
|
1183
|
+
position: "fixed",
|
|
1184
|
+
zIndex: 40,
|
|
1185
|
+
pointerEvents: "none",
|
|
1186
|
+
transition: "all 150ms",
|
|
1187
|
+
border: "1px dashed #505050",
|
|
1188
|
+
left: rect.left,
|
|
1189
|
+
top: rect.top,
|
|
1190
|
+
width: rect.width,
|
|
1191
|
+
height: rect.height,
|
|
1192
|
+
opacity: rect ? 1 : 0
|
|
1193
|
+
} })
|
|
1194
|
+
] });
|
|
1195
|
+
});
|
|
1196
|
+
const Inspector = (0, react.forwardRef)((props, ref) => {
|
|
1197
|
+
const [root, setRoot] = (0, react.useState)(null);
|
|
1198
|
+
(0, react.useEffect)(() => {
|
|
1199
|
+
const div = document.createElement("div");
|
|
1200
|
+
document.documentElement.appendChild(div);
|
|
1201
|
+
const shadowRoot = div.attachShadow({ mode: "open" });
|
|
1202
|
+
setRoot(shadowRoot);
|
|
1203
|
+
return () => {
|
|
1204
|
+
document.documentElement.removeChild(div);
|
|
1205
|
+
};
|
|
1206
|
+
}, []);
|
|
1207
|
+
if (!root) return null;
|
|
1208
|
+
return react_dom.default.createPortal(/* @__PURE__ */ (0, react_jsx_runtime.jsx)(RawInspector, {
|
|
1209
|
+
ref,
|
|
1210
|
+
...props
|
|
1211
|
+
}), root);
|
|
1212
|
+
});
|
|
1213
|
+
var inspect_default = Inspector;
|
|
1506
1214
|
|
|
1507
|
-
|
|
1215
|
+
//#endregion
|
|
1216
|
+
exports.Inspector = Inspector;
|
|
1508
1217
|
exports.RawInspector = RawInspector;
|
|
1509
|
-
exports.default = inspect_default;
|
|
1218
|
+
exports.default = inspect_default;
|