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

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