source: node_modules/react-inspector/dist/index.js

main
Last change on this file was d24f17c, checked in by Aleksandar Panovski <apano77@…>, 15 months ago

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