@devtools-ds/object-inspector - npm Package Compare versions

Comparing version 1.2.0 to 1.2.1

dist/cjs/index.js

@@ -1,2 +0,13 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:true});Object.defineProperty(exports,"ObjectInspector",{enumerable:true,get:function get(){return _ObjectInspector.ObjectInspector}});var _ObjectInspector=require("./ObjectInspector");
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "ObjectInspector", {
+  enumerable: true,
+  get: function get() {
+    return _ObjectInspector.ObjectInspector;
+  }
+});
+var _ObjectInspector = require("./ObjectInspector");
 //# sourceMappingURL=index.js.map

dist/cjs/ObjectInspector.css.js

@@ -1,1 +0,1 @@
-module.exports = {"object-inspector":"ObjectInspector-object-inspector-1712cb3","objectInspector":"ObjectInspector-object-inspector-1712cb3","object-label":"ObjectInspector-object-label-1fe41a1","objectLabel":"ObjectInspector-object-label-1fe41a1","text":"ObjectInspector-text-3cabc73","key":"ObjectInspector-key-ea9c97a","value":"ObjectInspector-value-cb224fc","string":"ObjectInspector-string-34a5aea","regex":"ObjectInspector-regex-dfd0188","error":"ObjectInspector-error-455933d","boolean":"ObjectInspector-boolean-fc65145","number":"ObjectInspector-number-1e07ddc","undefined":"ObjectInspector-undefined-cacaf4c","null":"ObjectInspector-null-5e478fb","function":"ObjectInspector-function-6ceb32b","function-decorator":"ObjectInspector-function-decorator-9ae56ed","functionDecorator":"ObjectInspector-function-decorator-9ae56ed","prototype":"ObjectInspector-prototype-7f234e6","dark":"ObjectInspector-dark-5256293","chrome":"ObjectInspector-chrome-6fb346b","light":"ObjectInspector-light-9e4a42d"};
+module.exports = {"object-inspector":"ObjectInspector-object-inspector-0c33e82","objectInspector":"ObjectInspector-object-inspector-0c33e82","object-label":"ObjectInspector-object-label-b81482b","objectLabel":"ObjectInspector-object-label-b81482b","text":"ObjectInspector-text-25f57f3","key":"ObjectInspector-key-4f712bb","value":"ObjectInspector-value-f7ec2e5","string":"ObjectInspector-string-c496000","regex":"ObjectInspector-regex-59d45a3","error":"ObjectInspector-error-b818698","boolean":"ObjectInspector-boolean-2dd1642","number":"ObjectInspector-number-a6daabb","undefined":"ObjectInspector-undefined-3a68263","null":"ObjectInspector-null-74acb50","function":"ObjectInspector-function-07bbdcd","function-decorator":"ObjectInspector-function-decorator-3d22c24","functionDecorator":"ObjectInspector-function-decorator-3d22c24","prototype":"ObjectInspector-prototype-f2449ee","dark":"ObjectInspector-dark-0c96c97","chrome":"ObjectInspector-chrome-2f3ca98","light":"ObjectInspector-light-78bef54"};

dist/cjs/ObjectInspector.js

@@ -1,2 +0,69 @@
-"use strict";var _interopRequireWildcard=require("@babel/runtime/helpers/interopRequireWildcard");var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.default=exports.ObjectInspector=void 0;var _extends2=_interopRequireDefault(require("@babel/runtime/helpers/extends"));var _objectWithoutProperties2=_interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));var _react=_interopRequireWildcard(require("react"));var _clsx=_interopRequireDefault(require("clsx"));var _objectParser=require("@devtools-ds/object-parser");var _themes=require("@devtools-ds/themes");var _ObjectInspectorItem=_interopRequireDefault(require("./ObjectInspectorItem"));var _ObjectInspector=_interopRequireDefault(require("./ObjectInspector.css"));const ObjectInspector=props=>{const{data,expandLevel,sortKeys,includePrototypes,className,theme,colorScheme,onSelect}=props,html=(0,_objectWithoutProperties2.default)(props,["data","expandLevel","sortKeys","includePrototypes","className","theme","colorScheme","onSelect"]);const[ast,setAST]=(0,_react.useState)(undefined);const{themeClass,currentTheme,currentColorScheme}=(0,_themes.useTheme)({theme,colorScheme},_ObjectInspector.default);(0,_react.useEffect)(()=>{const runParser=async()=>{setAST(await(0,_objectParser.parse)(data,sortKeys,includePrototypes))};runParser()},[data,sortKeys,includePrototypes]);return _react.default.createElement("div",(0,_extends2.default)({className:(0,_clsx.default)(_ObjectInspector.default.objectInspector,className,themeClass)},html),ast&&_react.default.createElement(_themes.ThemeProvider,{theme:currentTheme,colorScheme:currentColorScheme},_react.default.createElement(_ObjectInspectorItem.default,{ast:ast,expandLevel:expandLevel,onSelect:onSelect})))};exports.ObjectInspector=ObjectInspector;ObjectInspector.defaultProps={expandLevel:0,sortKeys:true,includePrototypes:true};var _default=ObjectInspector;exports.default=_default;
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.ObjectInspector = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _react = _interopRequireWildcard(require("react"));
+var _clsx = _interopRequireDefault(require("clsx"));
+var _objectParser = require("@devtools-ds/object-parser");
+var _themes = require("@devtools-ds/themes");
+var _ObjectInspectorItem = _interopRequireDefault(require("./ObjectInspectorItem"));
+var _ObjectInspector = _interopRequireDefault(require("./ObjectInspector.css"));
+const _excluded = ["data", "expandLevel", "sortKeys", "includePrototypes", "className", "theme", "colorScheme", "onSelect"];
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+/** An emulation of browsers JSON object inspector. */
+const ObjectInspector = props => {
+  const {
+      data,
+      expandLevel,
+      sortKeys,
+      includePrototypes,
+      className,
+      theme,
+      colorScheme,
+      onSelect
+    } = props,
+    html = (0, _objectWithoutProperties2.default)(props, _excluded);
+  const [ast, setAST] = (0, _react.useState)(undefined);
+  const {
+    themeClass,
+    currentTheme,
+    currentColorScheme
+  } = (0, _themes.useTheme)({
+    theme,
+    colorScheme
+  }, _ObjectInspector.default);
+
+  /** Handle async types */
+  (0, _react.useEffect)(() => {
+    /** Async function run the parser */
+    const runParser = async () => {
+      setAST(await (0, _objectParser.parse)(data, sortKeys, includePrototypes));
+    };
+    runParser();
+  }, [data, sortKeys, includePrototypes]);
+  return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({
+    className: (0, _clsx.default)(_ObjectInspector.default.objectInspector, className, themeClass)
+  }, html), ast && /*#__PURE__*/_react.default.createElement(_themes.ThemeProvider, {
+    theme: currentTheme,
+    colorScheme: currentColorScheme
+  }, /*#__PURE__*/_react.default.createElement(_ObjectInspectorItem.default, {
+    ast: ast,
+    expandLevel: expandLevel,
+    onSelect: onSelect
+  })));
+};
+exports.ObjectInspector = ObjectInspector;
+ObjectInspector.defaultProps = {
+  expandLevel: 0,
+  sortKeys: true,
+  includePrototypes: true
+};
+var _default = ObjectInspector;
+exports.default = _default;
 //# sourceMappingURL=ObjectInspector.js.map

dist/cjs/ObjectInspectorItem.js

@@ -1,2 +0,83 @@
-"use strict";var _interopRequireWildcard=require("@babel/runtime/helpers/interopRequireWildcard");var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.default=exports.ObjectInspectorItem=void 0;var _defineProperty2=_interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));var _react=_interopRequireWildcard(require("react"));var _tree=require("@devtools-ds/tree");var _ObjectValue=_interopRequireDefault(require("./ObjectValue"));var _ObjectLabel=_interopRequireDefault(require("./ObjectLabel"));function ownKeys(object,enumerableOnly){var keys=Object.keys(object);if(Object.getOwnPropertySymbols){var symbols=Object.getOwnPropertySymbols(object);if(enumerableOnly)symbols=symbols.filter(function(sym){return Object.getOwnPropertyDescriptor(object,sym).enumerable});keys.push.apply(keys,symbols)}return keys}function _objectSpread(target){for(var i=1;i<arguments.length;i++){var source=arguments[i]!=null?arguments[i]:{};if(i%2){ownKeys(Object(source),true).forEach(function(key){(0,_defineProperty2.default)(target,key,source[key])})}else if(Object.getOwnPropertyDescriptors){Object.defineProperties(target,Object.getOwnPropertyDescriptors(source))}else{ownKeys(Object(source)).forEach(function(key){Object.defineProperty(target,key,Object.getOwnPropertyDescriptor(source,key))})}}return target}const ObjectInspectorItem=props=>{const{ast,expandLevel,depth}=props;const[resolved,setResolved]=(0,_react.useState)();const[open,setOpen]=(0,_react.useState)(Boolean(depth<expandLevel));(0,_react.useEffect)(()=>{const resolve=async()=>{if(ast.type!=="value"){const promises=ast.children.map(f=>f());const children=await Promise.all(promises);const r=_objectSpread(_objectSpread({},ast),{},{children});setResolved(r)}};resolve()},[ast]);if(resolved){return _react.default.createElement(_tree.Tree,{hover:false,open:open,label:_react.default.createElement(_ObjectLabel.default,{open:open,ast:resolved}),onSelect:()=>{var _props$onSelect;(_props$onSelect=props.onSelect)===null||_props$onSelect===void 0?void 0:_props$onSelect.call(props,ast)},onUpdate:value=>{setOpen(value)}},resolved.children.map(child=>{return _react.default.createElement(ObjectInspectorItem,{key:child.key,ast:child,depth:depth+1,expandLevel:expandLevel,onSelect:props.onSelect})}))}return _react.default.createElement(_tree.Tree,{hover:false,label:_react.default.createElement(_ObjectValue.default,{ast:ast}),onSelect:()=>{var _props$onSelect2;(_props$onSelect2=props.onSelect)===null||_props$onSelect2===void 0?void 0:_props$onSelect2.call(props,ast)}})};exports.ObjectInspectorItem=ObjectInspectorItem;ObjectInspectorItem.defaultProps={expandLevel:0,depth:0};var _default=ObjectInspectorItem;exports.default=_default;
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.ObjectInspectorItem = void 0;
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+var _react = _interopRequireWildcard(require("react"));
+var _tree = require("@devtools-ds/tree");
+var _ObjectValue = _interopRequireDefault(require("./ObjectValue"));
+var _ObjectLabel = _interopRequireDefault(require("./ObjectLabel"));
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+/** A simple component. */
+const ObjectInspectorItem = props => {
+  const {
+    ast,
+    expandLevel,
+    depth
+  } = props;
+  const [resolved, setResolved] = (0, _react.useState)();
+  const [open, setOpen] = (0, _react.useState)(Boolean(depth < expandLevel));
+
+  /** Handle async children */
+  (0, _react.useEffect)(() => {
+    /** Async function to resolve children */
+    const resolve = async () => {
+      if (ast.type !== "value") {
+        const promises = ast.children.map(f => f());
+        const children = await Promise.all(promises);
+        const r = (0, _objectSpread2.default)((0, _objectSpread2.default)({}, ast), {}, {
+          children
+        });
+        setResolved(r);
+      }
+    };
+    resolve();
+  }, [ast]);
+  if (resolved) {
+    return /*#__PURE__*/_react.default.createElement(_tree.Tree, {
+      hover: false,
+      open: open,
+      label: /*#__PURE__*/_react.default.createElement(_ObjectLabel.default, {
+        open: open,
+        ast: resolved
+      }),
+      onSelect: () => {
+        var _props$onSelect;
+        (_props$onSelect = props.onSelect) === null || _props$onSelect === void 0 ? void 0 : _props$onSelect.call(props, ast);
+      },
+      onUpdate: value => {
+        setOpen(value);
+      }
+    }, resolved.children.map(child => {
+      return /*#__PURE__*/_react.default.createElement(ObjectInspectorItem, {
+        key: child.key,
+        ast: child,
+        depth: depth + 1,
+        expandLevel: expandLevel,
+        onSelect: props.onSelect
+      });
+    }));
+  }
+  return /*#__PURE__*/_react.default.createElement(_tree.Tree, {
+    hover: false,
+    label: /*#__PURE__*/_react.default.createElement(_ObjectValue.default, {
+      ast: ast
+    }),
+    onSelect: () => {
+      var _props$onSelect2;
+      (_props$onSelect2 = props.onSelect) === null || _props$onSelect2 === void 0 ? void 0 : _props$onSelect2.call(props, ast);
+    }
+  });
+};
+exports.ObjectInspectorItem = ObjectInspectorItem;
+ObjectInspectorItem.defaultProps = {
+  expandLevel: 0,
+  depth: 0
+};
+var _default = ObjectInspectorItem;
+exports.default = _default;
 //# sourceMappingURL=ObjectInspectorItem.js.map

dist/cjs/ObjectLabel.js

@@ -1,2 +0,169 @@
-"use strict";var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.default=exports.ObjectLabel=void 0;var _extends2=_interopRequireDefault(require("@babel/runtime/helpers/extends"));var _objectWithoutProperties2=_interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));var _react=_interopRequireDefault(require("react"));var _clsx=_interopRequireDefault(require("clsx"));var _themes=require("@devtools-ds/themes");var _ObjectValue=_interopRequireDefault(require("./ObjectValue"));var _ObjectInspector=_interopRequireDefault(require("./ObjectInspector.css"));const buildPreview=(children,previewMax,showKey)=>{const previews=[];for(let i=0;i<children.length;i++){const child=children[i];if(!child.isPrototype){previews.push(_react.default.createElement(_ObjectValue.default,{key:child.key,ast:child,showKey:showKey}));if(i<children.length-1){previews.push(", ")}else{previews.push(" ")}}if(child.isPrototype&&i===children.length-1){previews.pop();previews.push(" ")}if(i===previewMax-1&&children.length>previewMax){previews.push("\u2026 ");break}}return previews};const getArrayLabel=(ast,open,previewMax,theme)=>{const l=ast.value.length;if(open){return _react.default.createElement("span",null,"Array(",l,")")}return _react.default.createElement(_react.default.Fragment,null,_react.default.createElement("span",null,`${theme==="firefox"?"Array":""}(${l}) [ `),buildPreview(ast.children,previewMax,false),_react.default.createElement("span",null,"]"))};const getObjectLabel=(ast,open,previewMax,theme)=>{if(ast.isPrototype){return _react.default.createElement("span",null,`Object ${theme==="firefox"?"{ \u2026 }":""}`)}if(open){return _react.default.createElement("span",null,"{\u2026}")}return _react.default.createElement(_react.default.Fragment,null,_react.default.createElement("span",null,`${theme==="firefox"?"Object ":""}{ `),buildPreview(ast.children,previewMax,true),_react.default.createElement("span",null,"}"))};const getPromiseLabel=(ast,open,previewMax)=>{if(open){return _react.default.createElement("span",null,`Promise { "${String(ast.children[0].value)}" }`)}return _react.default.createElement(_react.default.Fragment,null,_react.default.createElement("span",null,`Promise { `),buildPreview(ast.children,previewMax,true),_react.default.createElement("span",null,"}"))};const getMapLabel=(ast,open,previewMax,theme)=>{const{size}=ast.value;if(open){return _react.default.createElement("span",null,`Map(${size})`)}return _react.default.createElement(_react.default.Fragment,null,_react.default.createElement("span",null,`Map${theme==="chrome"?`(${size})`:""} { `),buildPreview(ast.children,previewMax,true),_react.default.createElement("span",null,"}"))};const getSetLabel=(ast,open,previewMax)=>{const{size}=ast.value;if(open){return _react.default.createElement("span",null,"Set(",size,")")}return _react.default.createElement(_react.default.Fragment,null,_react.default.createElement("span",null,`Set(${ast.value.size}) {`),buildPreview(ast.children,previewMax,true),_react.default.createElement("span",null,"}"))};const ObjectLabel=props=>{const{ast,theme,previewMax,open,colorScheme,className}=props,html=(0,_objectWithoutProperties2.default)(props,["ast","theme","previewMax","open","colorScheme","className"]);const{themeClass,currentTheme}=(0,_themes.useTheme)({theme,colorScheme},_ObjectInspector.default);const isPrototype=ast.isPrototype||false;const classes=(0,_clsx.default)(_ObjectInspector.default.objectLabel,themeClass,className,{[_ObjectInspector.default.prototype]:isPrototype});const isRoot=ast.depth<=0;const Key=()=>{return _react.default.createElement("span",{className:isPrototype?_ObjectInspector.default.prototype:_ObjectInspector.default.key},isRoot?"":`${ast.key}: `)};if(ast.type==="array"){return _react.default.createElement("span",(0,_extends2.default)({className:classes},html),_react.default.createElement(Key,null),getArrayLabel(ast,open,previewMax,currentTheme))}if(ast.type==="function"){return _react.default.createElement("span",(0,_extends2.default)({className:classes},html),_react.default.createElement(Key,null),currentTheme==="chrome"&&_react.default.createElement("span",{className:_ObjectInspector.default.functionDecorator},"\u0192 "),_react.default.createElement("span",{className:(0,_clsx.default)({[_ObjectInspector.default.function]:!isPrototype})},`${ast.value.name}()`))}if(ast.type==="promise"){return _react.default.createElement("span",(0,_extends2.default)({className:classes},html),_react.default.createElement(Key,null),getPromiseLabel(ast,open,previewMax))}if(ast.type==="map"){return _react.default.createElement("span",(0,_extends2.default)({className:classes},html),_react.default.createElement(Key,null),getMapLabel(ast,open,previewMax,currentTheme))}if(ast.type==="set"){return _react.default.createElement("span",(0,_extends2.default)({className:classes},html),_react.default.createElement(Key,null),getSetLabel(ast,open,previewMax))}return _react.default.createElement("span",(0,_extends2.default)({className:classes},html),_react.default.createElement(Key,null),getObjectLabel(ast,open,previewMax,currentTheme))};exports.ObjectLabel=ObjectLabel;ObjectLabel.defaultProps={previewMax:8,open:false};var _default=ObjectLabel;exports.default=_default;
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.ObjectLabel = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _react = _interopRequireDefault(require("react"));
+var _clsx = _interopRequireDefault(require("clsx"));
+var _themes = require("@devtools-ds/themes");
+var _ObjectValue = _interopRequireDefault(require("./ObjectValue"));
+var _ObjectInspector = _interopRequireDefault(require("./ObjectInspector.css"));
+const _excluded = ["ast", "theme", "previewMax", "open", "colorScheme", "className"];
+/** Build a list of previews */
+const buildPreview = (children, previewMax, showKey) => {
+  const previews = [];
+  for (let i = 0; i < children.length; i++) {
+    const child = children[i];
+    if (!child.isPrototype) {
+      previews.push( /*#__PURE__*/_react.default.createElement(_ObjectValue.default, {
+        key: child.key,
+        ast: child,
+        showKey: showKey
+      }));
+      if (i < children.length - 1) {
+        previews.push(", ");
+      } else {
+        previews.push(" ");
+      }
+    }
+    if (child.isPrototype && i === children.length - 1) {
+      previews.pop();
+      previews.push(" ");
+    }
+
+    // Add ellipsis if needed
+    if (i === previewMax - 1 && children.length > previewMax) {
+      previews.push("… ");
+      break;
+    }
+  }
+  return previews;
+};
+
+/** Get the label for an array */
+const getArrayLabel = (ast, open, previewMax, theme) => {
+  const l = ast.value.length;
+  if (open) {
+    return /*#__PURE__*/_react.default.createElement("span", null, "Array(", l, ")");
+  }
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("span", null, `${theme === "firefox" ? "Array" : ""}(${l}) [ `), buildPreview(ast.children, previewMax, false), /*#__PURE__*/_react.default.createElement("span", null, "]"));
+};
+
+/** Get the label for an object */
+const getObjectLabel = (ast, open, previewMax, theme) => {
+  if (ast.isPrototype) {
+    return /*#__PURE__*/_react.default.createElement("span", null, `Object ${theme === "firefox" ? "{ … }" : ""}`);
+  }
+  if (open) {
+    return /*#__PURE__*/_react.default.createElement("span", null, "{…}");
+  }
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("span", null, `${theme === "firefox" ? "Object " : ""}{ `), buildPreview(ast.children, previewMax, true), /*#__PURE__*/_react.default.createElement("span", null, "}"));
+};
+
+/** Get the label for a Promise */
+const getPromiseLabel = (ast, open, previewMax) => {
+  if (open) {
+    return /*#__PURE__*/_react.default.createElement("span", null, `Promise { "${String(ast.children[0].value)}" }`);
+  }
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("span", null, `Promise { `), buildPreview(ast.children, previewMax, true), /*#__PURE__*/_react.default.createElement("span", null, "}"));
+};
+
+/** Get the label for a Map */
+const getMapLabel = (ast, open, previewMax, theme) => {
+  const {
+    size
+  } = ast.value;
+  if (open) {
+    return /*#__PURE__*/_react.default.createElement("span", null, `Map(${size})`);
+  }
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("span", null, `Map${theme === "chrome" ? `(${size})` : ""} { `), buildPreview(ast.children, previewMax, true), /*#__PURE__*/_react.default.createElement("span", null, "}"));
+};
+
+/** Get the label for a Set */
+const getSetLabel = (ast, open, previewMax) => {
+  const {
+    size
+  } = ast.value;
+  if (open) {
+    return /*#__PURE__*/_react.default.createElement("span", null, "Set(", size, ")");
+  }
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("span", null, `Set(${ast.value.size}) {`), buildPreview(ast.children, previewMax, true), /*#__PURE__*/_react.default.createElement("span", null, "}"));
+};
+
+/** Create a styled label for an object, with previews of the object contents. */
+const ObjectLabel = props => {
+  const {
+      ast,
+      theme,
+      previewMax,
+      open,
+      colorScheme,
+      className
+    } = props,
+    html = (0, _objectWithoutProperties2.default)(props, _excluded);
+  const {
+    themeClass,
+    currentTheme
+  } = (0, _themes.useTheme)({
+    theme,
+    colorScheme
+  }, _ObjectInspector.default);
+  const isPrototype = ast.isPrototype || false;
+  const classes = (0, _clsx.default)(_ObjectInspector.default.objectLabel, themeClass, className, {
+    [_ObjectInspector.default.prototype]: isPrototype
+  });
+  const isRoot = ast.depth <= 0;
+
+  /** The key for the node */
+  const Key = () => {
+    return /*#__PURE__*/_react.default.createElement("span", {
+      className: isPrototype ? _ObjectInspector.default.prototype : _ObjectInspector.default.key
+    }, isRoot ? "" : `${ast.key}: `);
+  };
+  if (ast.type === "array") {
+    return /*#__PURE__*/_react.default.createElement("span", (0, _extends2.default)({
+      className: classes
+    }, html), /*#__PURE__*/_react.default.createElement(Key, null), getArrayLabel(ast, open, previewMax, currentTheme));
+  }
+  if (ast.type === "function") {
+    return /*#__PURE__*/_react.default.createElement("span", (0, _extends2.default)({
+      className: classes
+    }, html), /*#__PURE__*/_react.default.createElement(Key, null), currentTheme === "chrome" && /*#__PURE__*/_react.default.createElement("span", {
+      className: _ObjectInspector.default.functionDecorator
+    }, "ƒ "), /*#__PURE__*/_react.default.createElement("span", {
+      className: (0, _clsx.default)({
+        [_ObjectInspector.default.function]: !isPrototype
+      })
+    }, `${ast.value.name}()`));
+  }
+  if (ast.type === "promise") {
+    return /*#__PURE__*/_react.default.createElement("span", (0, _extends2.default)({
+      className: classes
+    }, html), /*#__PURE__*/_react.default.createElement(Key, null), getPromiseLabel(ast, open, previewMax));
+  }
+  if (ast.type === "map") {
+    return /*#__PURE__*/_react.default.createElement("span", (0, _extends2.default)({
+      className: classes
+    }, html), /*#__PURE__*/_react.default.createElement(Key, null), getMapLabel(ast, open, previewMax, currentTheme));
+  }
+  if (ast.type === "set") {
+    return /*#__PURE__*/_react.default.createElement("span", (0, _extends2.default)({
+      className: classes
+    }, html), /*#__PURE__*/_react.default.createElement(Key, null), getSetLabel(ast, open, previewMax));
+  }
+  return /*#__PURE__*/_react.default.createElement("span", (0, _extends2.default)({
+    className: classes
+  }, html), /*#__PURE__*/_react.default.createElement(Key, null), getObjectLabel(ast, open, previewMax, currentTheme));
+};
+exports.ObjectLabel = ObjectLabel;
+ObjectLabel.defaultProps = {
+  previewMax: 8,
+  open: false
+};
+var _default = ObjectLabel;
+exports.default = _default;
 //# sourceMappingURL=ObjectLabel.js.map

dist/cjs/ObjectValue.js

@@ -1,2 +0,120 @@
-"use strict";var _interopRequireWildcard=require("@babel/runtime/helpers/interopRequireWildcard");var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.default=exports.ObjectValue=void 0;var _extends2=_interopRequireDefault(require("@babel/runtime/helpers/extends"));var _objectWithoutProperties2=_interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));var _react=_interopRequireWildcard(require("react"));var _clsx=_interopRequireDefault(require("clsx"));var _themes=require("@devtools-ds/themes");var _objectParser=require("@devtools-ds/object-parser");var _ObjectInspector=_interopRequireDefault(require("./ObjectInspector.css"));const buildValue=(key,value,valueClass,showKey,depth)=>{const computedKey=key.includes("-")?`"${key}"`:key;const isRoot=depth<=0;return _react.default.createElement("span",{className:_ObjectInspector.default.text},!isRoot&&showKey&&_react.default.createElement(_react.default.Fragment,null,_react.default.createElement("span",{className:_ObjectInspector.default.key},computedKey),_react.default.createElement("span",null,":\xA0")),_react.default.createElement("span",{className:valueClass},value))};const ObjectValue=props=>{const{ast,theme,showKey,colorScheme,className}=props,html=(0,_objectWithoutProperties2.default)(props,["ast","theme","showKey","colorScheme","className"]);const{themeClass}=(0,_themes.useTheme)({theme,colorScheme},_ObjectInspector.default);const[asyncValue,setAsyncValue]=(0,_react.useState)(_react.default.createElement("span",null));let value=_react.default.createElement("span",null);(0,_react.useEffect)(()=>{if(ast.value instanceof Promise){const waitForPromiseResult=async promise=>{setAsyncValue(buildValue(ast.key,`Promise { "${await(0,_objectParser.getPromiseState)(promise)}" }`,_ObjectInspector.default.key,showKey,ast.depth))};waitForPromiseResult(ast.value)}},[ast,showKey]);if(typeof ast.value==="number"||typeof ast.value==="bigint"){value=buildValue(ast.key,String(ast.value),_ObjectInspector.default.number,showKey,ast.depth)}else if(typeof ast.value==="boolean"){value=buildValue(ast.key,String(ast.value),_ObjectInspector.default.boolean,showKey,ast.depth)}else if(typeof ast.value==="string"){value=buildValue(ast.key,`"${ast.value}"`,_ObjectInspector.default.string,showKey,ast.depth)}else if(typeof ast.value==="undefined"){value=buildValue(ast.key,"undefined",_ObjectInspector.default.undefined,showKey,ast.depth)}else if(typeof ast.value==="symbol"){value=buildValue(ast.key,ast.value.toString(),_ObjectInspector.default.string,showKey,ast.depth)}else if(typeof ast.value==="function"){value=buildValue(ast.key,`${ast.value.name}()`,_ObjectInspector.default.key,showKey,ast.depth)}else if(typeof ast.value==="object"){if(ast.value===null){value=buildValue(ast.key,"null",_ObjectInspector.default.null,showKey,ast.depth)}else if(Array.isArray(ast.value)){value=buildValue(ast.key,`Array(${ast.value.length})`,_ObjectInspector.default.key,showKey,ast.depth)}else if(ast.value instanceof Date){value=buildValue(ast.key,`Date ${ast.value.toString()}`,_ObjectInspector.default.value,showKey,ast.depth)}else if(ast.value instanceof RegExp){value=buildValue(ast.key,ast.value.toString(),_ObjectInspector.default.regex,showKey,ast.depth)}else if(ast.value instanceof Error){value=buildValue(ast.key,ast.value.toString(),_ObjectInspector.default.error,showKey,ast.depth)}else if((0,_objectParser.isObject)(ast.value)){value=buildValue(ast.key,"{\u2026}",_ObjectInspector.default.key,showKey,ast.depth)}else{value=buildValue(ast.key,ast.value.constructor.name,_ObjectInspector.default.key,showKey,ast.depth)}}return _react.default.createElement("span",(0,_extends2.default)({className:(0,_clsx.default)(themeClass,className)},html),asyncValue,value)};exports.ObjectValue=ObjectValue;ObjectValue.defaultProps={showKey:true};var _default=ObjectValue;exports.default=_default;
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.ObjectValue = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _react = _interopRequireWildcard(require("react"));
+var _clsx = _interopRequireDefault(require("clsx"));
+var _themes = require("@devtools-ds/themes");
+var _objectParser = require("@devtools-ds/object-parser");
+var _ObjectInspector = _interopRequireDefault(require("./ObjectInspector.css"));
+const _excluded = ["ast", "theme", "showKey", "colorScheme", "className"];
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+/**
+ * Build the key and value spans
+ *
+ * @param key - The key string
+ * @param value - The value string
+ * @param valueClass - The class to apply to the value
+ * @param showKey - Whether or not to show the key with the value
+ * @param depth - Current depth (so we don't put a key on root)
+ */
+const buildValue = (key, value, valueClass, showKey, depth) => {
+  const computedKey = key.includes("-") ? `"${key}"` : key;
+  const isRoot = depth <= 0;
+  return /*#__PURE__*/_react.default.createElement("span", {
+    className: _ObjectInspector.default.text
+  }, !isRoot && showKey && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("span", {
+    className: _ObjectInspector.default.key
+  }, computedKey), /*#__PURE__*/_react.default.createElement("span", null, ":\xA0")), /*#__PURE__*/_react.default.createElement("span", {
+    className: valueClass
+  }, value));
+};
+
+/** Display a leaf key-value pair with appropriate styles. */
+const ObjectValue = props => {
+  const {
+      ast,
+      theme,
+      showKey,
+      colorScheme,
+      className
+    } = props,
+    html = (0, _objectWithoutProperties2.default)(props, _excluded);
+  const {
+    themeClass
+  } = (0, _themes.useTheme)({
+    theme,
+    colorScheme
+  }, _ObjectInspector.default);
+  const [asyncValue, setAsyncValue] = (0, _react.useState)( /*#__PURE__*/_react.default.createElement("span", null));
+  let value = /*#__PURE__*/_react.default.createElement("span", null);
+
+  /** Handle async types once */
+  (0, _react.useEffect)(() => {
+    if (ast.value instanceof Promise) {
+      /** Async function to wait for Promise.race */
+      const waitForPromiseResult = async promise => {
+        setAsyncValue(buildValue(ast.key, `Promise { "${await (0, _objectParser.getPromiseState)(promise)}" }`, _ObjectInspector.default.key, showKey, ast.depth));
+      };
+      waitForPromiseResult(ast.value);
+    }
+  }, [ast, showKey]);
+  if (typeof ast.value === "number" || typeof ast.value === "bigint") {
+    // Number
+    value = buildValue(ast.key, String(ast.value), _ObjectInspector.default.number, showKey, ast.depth);
+  } else if (typeof ast.value === "boolean") {
+    // Boolean
+    value = buildValue(ast.key, String(ast.value), _ObjectInspector.default.boolean, showKey, ast.depth);
+  } else if (typeof ast.value === "string") {
+    // String
+    value = buildValue(ast.key, `"${ast.value}"`, _ObjectInspector.default.string, showKey, ast.depth);
+  } else if (typeof ast.value === "undefined") {
+    // Undefined
+    value = buildValue(ast.key, "undefined", _ObjectInspector.default.undefined, showKey, ast.depth);
+  } else if (typeof ast.value === "symbol") {
+    // Symbol
+    value = buildValue(ast.key, ast.value.toString(), _ObjectInspector.default.string, showKey, ast.depth);
+  } else if (typeof ast.value === "function") {
+    // Function
+    value = buildValue(ast.key, `${ast.value.name}()`, _ObjectInspector.default.key, showKey, ast.depth);
+  } else if (typeof ast.value === "object") {
+    if (ast.value === null) {
+      // Null
+      value = buildValue(ast.key, "null", _ObjectInspector.default.null, showKey, ast.depth);
+    } else if (Array.isArray(ast.value)) {
+      // Array
+      value = buildValue(ast.key, `Array(${ast.value.length})`, _ObjectInspector.default.key, showKey, ast.depth);
+    } else if (ast.value instanceof Date) {
+      // Date
+      value = buildValue(ast.key, `Date ${ast.value.toString()}`, _ObjectInspector.default.value, showKey, ast.depth);
+    } else if (ast.value instanceof RegExp) {
+      // RegExp
+      value = buildValue(ast.key, ast.value.toString(), _ObjectInspector.default.regex, showKey, ast.depth);
+    } else if (ast.value instanceof Error) {
+      // Error
+      value = buildValue(ast.key, ast.value.toString(), _ObjectInspector.default.error, showKey, ast.depth);
+    } else if ((0, _objectParser.isObject)(ast.value)) {
+      // Object
+      value = buildValue(ast.key, "{…}", _ObjectInspector.default.key, showKey, ast.depth);
+    } else {
+      // WeakMap, WeakSet, Custom Classes, etc
+      value = buildValue(ast.key, ast.value.constructor.name, _ObjectInspector.default.key, showKey, ast.depth);
+    }
+  }
+  return /*#__PURE__*/_react.default.createElement("span", (0, _extends2.default)({
+    className: (0, _clsx.default)(themeClass, className)
+  }, html), asyncValue, value);
+};
+exports.ObjectValue = ObjectValue;
+ObjectValue.defaultProps = {
+  showKey: true
+};
+var _default = ObjectValue;
+exports.default = _default;
 //# sourceMappingURL=ObjectValue.js.map

dist/esm/index.js

@@ -1,3 +0,3 @@
-export{ObjectInspector}from"./ObjectInspector";
+export { ObjectInspector } from "./ObjectInspector";
 //# sourceMappingURL=index.js.map
 import "../main.css";

dist/esm/ObjectInspector.css.js

@@ -1,1 +0,1 @@
-module.exports = {"object-inspector":"ObjectInspector-object-inspector-1712cb3","objectInspector":"ObjectInspector-object-inspector-1712cb3","object-label":"ObjectInspector-object-label-1fe41a1","objectLabel":"ObjectInspector-object-label-1fe41a1","text":"ObjectInspector-text-3cabc73","key":"ObjectInspector-key-ea9c97a","value":"ObjectInspector-value-cb224fc","string":"ObjectInspector-string-34a5aea","regex":"ObjectInspector-regex-dfd0188","error":"ObjectInspector-error-455933d","boolean":"ObjectInspector-boolean-fc65145","number":"ObjectInspector-number-1e07ddc","undefined":"ObjectInspector-undefined-cacaf4c","null":"ObjectInspector-null-5e478fb","function":"ObjectInspector-function-6ceb32b","function-decorator":"ObjectInspector-function-decorator-9ae56ed","functionDecorator":"ObjectInspector-function-decorator-9ae56ed","prototype":"ObjectInspector-prototype-7f234e6","dark":"ObjectInspector-dark-5256293","chrome":"ObjectInspector-chrome-6fb346b","light":"ObjectInspector-light-9e4a42d"};
+export default {"object-inspector":"ObjectInspector-object-inspector-0c33e82","objectInspector":"ObjectInspector-object-inspector-0c33e82","object-label":"ObjectInspector-object-label-b81482b","objectLabel":"ObjectInspector-object-label-b81482b","text":"ObjectInspector-text-25f57f3","key":"ObjectInspector-key-4f712bb","value":"ObjectInspector-value-f7ec2e5","string":"ObjectInspector-string-c496000","regex":"ObjectInspector-regex-59d45a3","error":"ObjectInspector-error-b818698","boolean":"ObjectInspector-boolean-2dd1642","number":"ObjectInspector-number-a6daabb","undefined":"ObjectInspector-undefined-3a68263","null":"ObjectInspector-null-74acb50","function":"ObjectInspector-function-07bbdcd","function-decorator":"ObjectInspector-function-decorator-3d22c24","functionDecorator":"ObjectInspector-function-decorator-3d22c24","prototype":"ObjectInspector-prototype-f2449ee","dark":"ObjectInspector-dark-0c96c97","chrome":"ObjectInspector-chrome-2f3ca98","light":"ObjectInspector-light-78bef54"};

dist/esm/ObjectInspector.js

@@ -1,2 +0,58 @@
-import _extends from"@babel/runtime/helpers/extends";import _objectWithoutProperties from"@babel/runtime/helpers/objectWithoutProperties";import React,{useEffect,useState}from"react";import makeClass from"clsx";import{parse}from"@devtools-ds/object-parser";import{useTheme,ThemeProvider}from"@devtools-ds/themes";import ObjectInspectorItem from"./ObjectInspectorItem";import styles from"./ObjectInspector.css";export const ObjectInspector=props=>{const{data,expandLevel,sortKeys,includePrototypes,className,theme,colorScheme,onSelect}=props,html=_objectWithoutProperties(props,["data","expandLevel","sortKeys","includePrototypes","className","theme","colorScheme","onSelect"]);const[ast,setAST]=useState(undefined);const{themeClass,currentTheme,currentColorScheme}=useTheme({theme,colorScheme},styles);useEffect(()=>{const runParser=async()=>{setAST(await parse(data,sortKeys,includePrototypes))};runParser()},[data,sortKeys,includePrototypes]);return React.createElement("div",_extends({className:makeClass(styles.objectInspector,className,themeClass)},html),ast&&React.createElement(ThemeProvider,{theme:currentTheme,colorScheme:currentColorScheme},React.createElement(ObjectInspectorItem,{ast:ast,expandLevel:expandLevel,onSelect:onSelect})))};ObjectInspector.defaultProps={expandLevel:0,sortKeys:true,includePrototypes:true};export default ObjectInspector;
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+const _excluded = ["data", "expandLevel", "sortKeys", "includePrototypes", "className", "theme", "colorScheme", "onSelect"];
+import React, { useEffect, useState } from "react";
+import makeClass from "clsx";
+import { parse } from "@devtools-ds/object-parser";
+import { useTheme, ThemeProvider } from "@devtools-ds/themes";
+import ObjectInspectorItem from "./ObjectInspectorItem";
+import styles from "./ObjectInspector.css";
+/** An emulation of browsers JSON object inspector. */
+export const ObjectInspector = props => {
+  const {
+      data,
+      expandLevel,
+      sortKeys,
+      includePrototypes,
+      className,
+      theme,
+      colorScheme,
+      onSelect
+    } = props,
+    html = _objectWithoutProperties(props, _excluded);
+  const [ast, setAST] = useState(undefined);
+  const {
+    themeClass,
+    currentTheme,
+    currentColorScheme
+  } = useTheme({
+    theme,
+    colorScheme
+  }, styles);
+
+  /** Handle async types */
+  useEffect(() => {
+    /** Async function run the parser */
+    const runParser = async () => {
+      setAST(await parse(data, sortKeys, includePrototypes));
+    };
+    runParser();
+  }, [data, sortKeys, includePrototypes]);
+  return /*#__PURE__*/React.createElement("div", _extends({
+    className: makeClass(styles.objectInspector, className, themeClass)
+  }, html), ast && /*#__PURE__*/React.createElement(ThemeProvider, {
+    theme: currentTheme,
+    colorScheme: currentColorScheme
+  }, /*#__PURE__*/React.createElement(ObjectInspectorItem, {
+    ast: ast,
+    expandLevel: expandLevel,
+    onSelect: onSelect
+  })));
+};
+ObjectInspector.defaultProps = {
+  expandLevel: 0,
+  sortKeys: true,
+  includePrototypes: true
+};
+export default ObjectInspector;
 //# sourceMappingURL=ObjectInspector.js.map

dist/esm/ObjectInspectorItem.js

@@ -1,2 +0,72 @@
-import _defineProperty from"@babel/runtime/helpers/defineProperty";function ownKeys(object,enumerableOnly){var keys=Object.keys(object);if(Object.getOwnPropertySymbols){var symbols=Object.getOwnPropertySymbols(object);if(enumerableOnly)symbols=symbols.filter(function(sym){return Object.getOwnPropertyDescriptor(object,sym).enumerable});keys.push.apply(keys,symbols)}return keys}function _objectSpread(target){for(var i=1;i<arguments.length;i++){var source=arguments[i]!=null?arguments[i]:{};if(i%2){ownKeys(Object(source),true).forEach(function(key){_defineProperty(target,key,source[key])})}else if(Object.getOwnPropertyDescriptors){Object.defineProperties(target,Object.getOwnPropertyDescriptors(source))}else{ownKeys(Object(source)).forEach(function(key){Object.defineProperty(target,key,Object.getOwnPropertyDescriptor(source,key))})}}return target}import React,{useEffect,useState}from"react";import{Tree}from"@devtools-ds/tree";import ObjectValue from"./ObjectValue";import ObjectLabel from"./ObjectLabel";export const ObjectInspectorItem=props=>{const{ast,expandLevel,depth}=props;const[resolved,setResolved]=useState();const[open,setOpen]=useState(Boolean(depth<expandLevel));useEffect(()=>{const resolve=async()=>{if(ast.type!=="value"){const promises=ast.children.map(f=>f());const children=await Promise.all(promises);const r=_objectSpread(_objectSpread({},ast),{},{children});setResolved(r)}};resolve()},[ast]);if(resolved){return React.createElement(Tree,{hover:false,open:open,label:React.createElement(ObjectLabel,{open:open,ast:resolved}),onSelect:()=>{var _props$onSelect;(_props$onSelect=props.onSelect)===null||_props$onSelect===void 0?void 0:_props$onSelect.call(props,ast)},onUpdate:value=>{setOpen(value)}},resolved.children.map(child=>{return React.createElement(ObjectInspectorItem,{key:child.key,ast:child,depth:depth+1,expandLevel:expandLevel,onSelect:props.onSelect})}))}return React.createElement(Tree,{hover:false,label:React.createElement(ObjectValue,{ast:ast}),onSelect:()=>{var _props$onSelect2;(_props$onSelect2=props.onSelect)===null||_props$onSelect2===void 0?void 0:_props$onSelect2.call(props,ast)}})};ObjectInspectorItem.defaultProps={expandLevel:0,depth:0};export default ObjectInspectorItem;
+import _objectSpread from "@babel/runtime/helpers/objectSpread2";
+import React, { useEffect, useState } from "react";
+import { Tree } from "@devtools-ds/tree";
+import ObjectValue from "./ObjectValue";
+import ObjectLabel from "./ObjectLabel";
+/** A simple component. */
+export const ObjectInspectorItem = props => {
+  const {
+    ast,
+    expandLevel,
+    depth
+  } = props;
+  const [resolved, setResolved] = useState();
+  const [open, setOpen] = useState(Boolean(depth < expandLevel));
+
+  /** Handle async children */
+  useEffect(() => {
+    /** Async function to resolve children */
+    const resolve = async () => {
+      if (ast.type !== "value") {
+        const promises = ast.children.map(f => f());
+        const children = await Promise.all(promises);
+        const r = _objectSpread(_objectSpread({}, ast), {}, {
+          children
+        });
+        setResolved(r);
+      }
+    };
+    resolve();
+  }, [ast]);
+  if (resolved) {
+    return /*#__PURE__*/React.createElement(Tree, {
+      hover: false,
+      open: open,
+      label: /*#__PURE__*/React.createElement(ObjectLabel, {
+        open: open,
+        ast: resolved
+      }),
+      onSelect: () => {
+        var _props$onSelect;
+        (_props$onSelect = props.onSelect) === null || _props$onSelect === void 0 ? void 0 : _props$onSelect.call(props, ast);
+      },
+      onUpdate: value => {
+        setOpen(value);
+      }
+    }, resolved.children.map(child => {
+      return /*#__PURE__*/React.createElement(ObjectInspectorItem, {
+        key: child.key,
+        ast: child,
+        depth: depth + 1,
+        expandLevel: expandLevel,
+        onSelect: props.onSelect
+      });
+    }));
+  }
+  return /*#__PURE__*/React.createElement(Tree, {
+    hover: false,
+    label: /*#__PURE__*/React.createElement(ObjectValue, {
+      ast: ast
+    }),
+    onSelect: () => {
+      var _props$onSelect2;
+      (_props$onSelect2 = props.onSelect) === null || _props$onSelect2 === void 0 ? void 0 : _props$onSelect2.call(props, ast);
+    }
+  });
+};
+ObjectInspectorItem.defaultProps = {
+  expandLevel: 0,
+  depth: 0
+};
+export default ObjectInspectorItem;
 //# sourceMappingURL=ObjectInspectorItem.js.map

dist/esm/ObjectLabel.js

@@ -1,2 +0,160 @@
-import _extends from"@babel/runtime/helpers/extends";import _objectWithoutProperties from"@babel/runtime/helpers/objectWithoutProperties";import React from"react";import makeClass from"clsx";import{useTheme}from"@devtools-ds/themes";import ObjectValue from"./ObjectValue";import styles from"./ObjectInspector.css";const buildPreview=(children,previewMax,showKey)=>{const previews=[];for(let i=0;i<children.length;i++){const child=children[i];if(!child.isPrototype){previews.push(React.createElement(ObjectValue,{key:child.key,ast:child,showKey:showKey}));if(i<children.length-1){previews.push(", ")}else{previews.push(" ")}}if(child.isPrototype&&i===children.length-1){previews.pop();previews.push(" ")}if(i===previewMax-1&&children.length>previewMax){previews.push("\u2026 ");break}}return previews};const getArrayLabel=(ast,open,previewMax,theme)=>{const l=ast.value.length;if(open){return React.createElement("span",null,"Array(",l,")")}return React.createElement(React.Fragment,null,React.createElement("span",null,`${theme==="firefox"?"Array":""}(${l}) [ `),buildPreview(ast.children,previewMax,false),React.createElement("span",null,"]"))};const getObjectLabel=(ast,open,previewMax,theme)=>{if(ast.isPrototype){return React.createElement("span",null,`Object ${theme==="firefox"?"{ \u2026 }":""}`)}if(open){return React.createElement("span",null,"{\u2026}")}return React.createElement(React.Fragment,null,React.createElement("span",null,`${theme==="firefox"?"Object ":""}{ `),buildPreview(ast.children,previewMax,true),React.createElement("span",null,"}"))};const getPromiseLabel=(ast,open,previewMax)=>{if(open){return React.createElement("span",null,`Promise { "${String(ast.children[0].value)}" }`)}return React.createElement(React.Fragment,null,React.createElement("span",null,`Promise { `),buildPreview(ast.children,previewMax,true),React.createElement("span",null,"}"))};const getMapLabel=(ast,open,previewMax,theme)=>{const{size}=ast.value;if(open){return React.createElement("span",null,`Map(${size})`)}return React.createElement(React.Fragment,null,React.createElement("span",null,`Map${theme==="chrome"?`(${size})`:""} { `),buildPreview(ast.children,previewMax,true),React.createElement("span",null,"}"))};const getSetLabel=(ast,open,previewMax)=>{const{size}=ast.value;if(open){return React.createElement("span",null,"Set(",size,")")}return React.createElement(React.Fragment,null,React.createElement("span",null,`Set(${ast.value.size}) {`),buildPreview(ast.children,previewMax,true),React.createElement("span",null,"}"))};export const ObjectLabel=props=>{const{ast,theme,previewMax,open,colorScheme,className}=props,html=_objectWithoutProperties(props,["ast","theme","previewMax","open","colorScheme","className"]);const{themeClass,currentTheme}=useTheme({theme,colorScheme},styles);const isPrototype=ast.isPrototype||false;const classes=makeClass(styles.objectLabel,themeClass,className,{[styles.prototype]:isPrototype});const isRoot=ast.depth<=0;const Key=()=>{return React.createElement("span",{className:isPrototype?styles.prototype:styles.key},isRoot?"":`${ast.key}: `)};if(ast.type==="array"){return React.createElement("span",_extends({className:classes},html),React.createElement(Key,null),getArrayLabel(ast,open,previewMax,currentTheme))}if(ast.type==="function"){return React.createElement("span",_extends({className:classes},html),React.createElement(Key,null),currentTheme==="chrome"&&React.createElement("span",{className:styles.functionDecorator},"\u0192 "),React.createElement("span",{className:makeClass({[styles.function]:!isPrototype})},`${ast.value.name}()`))}if(ast.type==="promise"){return React.createElement("span",_extends({className:classes},html),React.createElement(Key,null),getPromiseLabel(ast,open,previewMax))}if(ast.type==="map"){return React.createElement("span",_extends({className:classes},html),React.createElement(Key,null),getMapLabel(ast,open,previewMax,currentTheme))}if(ast.type==="set"){return React.createElement("span",_extends({className:classes},html),React.createElement(Key,null),getSetLabel(ast,open,previewMax))}return React.createElement("span",_extends({className:classes},html),React.createElement(Key,null),getObjectLabel(ast,open,previewMax,currentTheme))};ObjectLabel.defaultProps={previewMax:8,open:false};export default ObjectLabel;
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+const _excluded = ["ast", "theme", "previewMax", "open", "colorScheme", "className"];
+import React from "react";
+import makeClass from "clsx";
+import { useTheme } from "@devtools-ds/themes";
+import ObjectValue from "./ObjectValue";
+import styles from "./ObjectInspector.css";
+/** Build a list of previews */
+const buildPreview = (children, previewMax, showKey) => {
+  const previews = [];
+  for (let i = 0; i < children.length; i++) {
+    const child = children[i];
+    if (!child.isPrototype) {
+      previews.push( /*#__PURE__*/React.createElement(ObjectValue, {
+        key: child.key,
+        ast: child,
+        showKey: showKey
+      }));
+      if (i < children.length - 1) {
+        previews.push(", ");
+      } else {
+        previews.push(" ");
+      }
+    }
+    if (child.isPrototype && i === children.length - 1) {
+      previews.pop();
+      previews.push(" ");
+    }
+
+    // Add ellipsis if needed
+    if (i === previewMax - 1 && children.length > previewMax) {
+      previews.push("… ");
+      break;
+    }
+  }
+  return previews;
+};
+
+/** Get the label for an array */
+const getArrayLabel = (ast, open, previewMax, theme) => {
+  const l = ast.value.length;
+  if (open) {
+    return /*#__PURE__*/React.createElement("span", null, "Array(", l, ")");
+  }
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", null, `${theme === "firefox" ? "Array" : ""}(${l}) [ `), buildPreview(ast.children, previewMax, false), /*#__PURE__*/React.createElement("span", null, "]"));
+};
+
+/** Get the label for an object */
+const getObjectLabel = (ast, open, previewMax, theme) => {
+  if (ast.isPrototype) {
+    return /*#__PURE__*/React.createElement("span", null, `Object ${theme === "firefox" ? "{ … }" : ""}`);
+  }
+  if (open) {
+    return /*#__PURE__*/React.createElement("span", null, "{…}");
+  }
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", null, `${theme === "firefox" ? "Object " : ""}{ `), buildPreview(ast.children, previewMax, true), /*#__PURE__*/React.createElement("span", null, "}"));
+};
+
+/** Get the label for a Promise */
+const getPromiseLabel = (ast, open, previewMax) => {
+  if (open) {
+    return /*#__PURE__*/React.createElement("span", null, `Promise { "${String(ast.children[0].value)}" }`);
+  }
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", null, `Promise { `), buildPreview(ast.children, previewMax, true), /*#__PURE__*/React.createElement("span", null, "}"));
+};
+
+/** Get the label for a Map */
+const getMapLabel = (ast, open, previewMax, theme) => {
+  const {
+    size
+  } = ast.value;
+  if (open) {
+    return /*#__PURE__*/React.createElement("span", null, `Map(${size})`);
+  }
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", null, `Map${theme === "chrome" ? `(${size})` : ""} { `), buildPreview(ast.children, previewMax, true), /*#__PURE__*/React.createElement("span", null, "}"));
+};
+
+/** Get the label for a Set */
+const getSetLabel = (ast, open, previewMax) => {
+  const {
+    size
+  } = ast.value;
+  if (open) {
+    return /*#__PURE__*/React.createElement("span", null, "Set(", size, ")");
+  }
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", null, `Set(${ast.value.size}) {`), buildPreview(ast.children, previewMax, true), /*#__PURE__*/React.createElement("span", null, "}"));
+};
+
+/** Create a styled label for an object, with previews of the object contents. */
+export const ObjectLabel = props => {
+  const {
+      ast,
+      theme,
+      previewMax,
+      open,
+      colorScheme,
+      className
+    } = props,
+    html = _objectWithoutProperties(props, _excluded);
+  const {
+    themeClass,
+    currentTheme
+  } = useTheme({
+    theme,
+    colorScheme
+  }, styles);
+  const isPrototype = ast.isPrototype || false;
+  const classes = makeClass(styles.objectLabel, themeClass, className, {
+    [styles.prototype]: isPrototype
+  });
+  const isRoot = ast.depth <= 0;
+
+  /** The key for the node */
+  const Key = () => {
+    return /*#__PURE__*/React.createElement("span", {
+      className: isPrototype ? styles.prototype : styles.key
+    }, isRoot ? "" : `${ast.key}: `);
+  };
+  if (ast.type === "array") {
+    return /*#__PURE__*/React.createElement("span", _extends({
+      className: classes
+    }, html), /*#__PURE__*/React.createElement(Key, null), getArrayLabel(ast, open, previewMax, currentTheme));
+  }
+  if (ast.type === "function") {
+    return /*#__PURE__*/React.createElement("span", _extends({
+      className: classes
+    }, html), /*#__PURE__*/React.createElement(Key, null), currentTheme === "chrome" && /*#__PURE__*/React.createElement("span", {
+      className: styles.functionDecorator
+    }, "ƒ "), /*#__PURE__*/React.createElement("span", {
+      className: makeClass({
+        [styles.function]: !isPrototype
+      })
+    }, `${ast.value.name}()`));
+  }
+  if (ast.type === "promise") {
+    return /*#__PURE__*/React.createElement("span", _extends({
+      className: classes
+    }, html), /*#__PURE__*/React.createElement(Key, null), getPromiseLabel(ast, open, previewMax));
+  }
+  if (ast.type === "map") {
+    return /*#__PURE__*/React.createElement("span", _extends({
+      className: classes
+    }, html), /*#__PURE__*/React.createElement(Key, null), getMapLabel(ast, open, previewMax, currentTheme));
+  }
+  if (ast.type === "set") {
+    return /*#__PURE__*/React.createElement("span", _extends({
+      className: classes
+    }, html), /*#__PURE__*/React.createElement(Key, null), getSetLabel(ast, open, previewMax));
+  }
+  return /*#__PURE__*/React.createElement("span", _extends({
+    className: classes
+  }, html), /*#__PURE__*/React.createElement(Key, null), getObjectLabel(ast, open, previewMax, currentTheme));
+};
+ObjectLabel.defaultProps = {
+  previewMax: 8,
+  open: false
+};
+export default ObjectLabel;
 //# sourceMappingURL=ObjectLabel.js.map

dist/esm/ObjectValue.js

@@ -1,2 +0,109 @@
-import _extends from"@babel/runtime/helpers/extends";import _objectWithoutProperties from"@babel/runtime/helpers/objectWithoutProperties";import React,{useState,useEffect}from"react";import makeClass from"clsx";import{useTheme}from"@devtools-ds/themes";import{isObject,getPromiseState}from"@devtools-ds/object-parser";import styles from"./ObjectInspector.css";const buildValue=(key,value,valueClass,showKey,depth)=>{const computedKey=key.includes("-")?`"${key}"`:key;const isRoot=depth<=0;return React.createElement("span",{className:styles.text},!isRoot&&showKey&&React.createElement(React.Fragment,null,React.createElement("span",{className:styles.key},computedKey),React.createElement("span",null,":\xA0")),React.createElement("span",{className:valueClass},value))};export const ObjectValue=props=>{const{ast,theme,showKey,colorScheme,className}=props,html=_objectWithoutProperties(props,["ast","theme","showKey","colorScheme","className"]);const{themeClass}=useTheme({theme,colorScheme},styles);const[asyncValue,setAsyncValue]=useState(React.createElement("span",null));let value=React.createElement("span",null);useEffect(()=>{if(ast.value instanceof Promise){const waitForPromiseResult=async promise=>{setAsyncValue(buildValue(ast.key,`Promise { "${await getPromiseState(promise)}" }`,styles.key,showKey,ast.depth))};waitForPromiseResult(ast.value)}},[ast,showKey]);if(typeof ast.value==="number"||typeof ast.value==="bigint"){value=buildValue(ast.key,String(ast.value),styles.number,showKey,ast.depth)}else if(typeof ast.value==="boolean"){value=buildValue(ast.key,String(ast.value),styles.boolean,showKey,ast.depth)}else if(typeof ast.value==="string"){value=buildValue(ast.key,`"${ast.value}"`,styles.string,showKey,ast.depth)}else if(typeof ast.value==="undefined"){value=buildValue(ast.key,"undefined",styles.undefined,showKey,ast.depth)}else if(typeof ast.value==="symbol"){value=buildValue(ast.key,ast.value.toString(),styles.string,showKey,ast.depth)}else if(typeof ast.value==="function"){value=buildValue(ast.key,`${ast.value.name}()`,styles.key,showKey,ast.depth)}else if(typeof ast.value==="object"){if(ast.value===null){value=buildValue(ast.key,"null",styles.null,showKey,ast.depth)}else if(Array.isArray(ast.value)){value=buildValue(ast.key,`Array(${ast.value.length})`,styles.key,showKey,ast.depth)}else if(ast.value instanceof Date){value=buildValue(ast.key,`Date ${ast.value.toString()}`,styles.value,showKey,ast.depth)}else if(ast.value instanceof RegExp){value=buildValue(ast.key,ast.value.toString(),styles.regex,showKey,ast.depth)}else if(ast.value instanceof Error){value=buildValue(ast.key,ast.value.toString(),styles.error,showKey,ast.depth)}else if(isObject(ast.value)){value=buildValue(ast.key,"{\u2026}",styles.key,showKey,ast.depth)}else{value=buildValue(ast.key,ast.value.constructor.name,styles.key,showKey,ast.depth)}}return React.createElement("span",_extends({className:makeClass(themeClass,className)},html),asyncValue,value)};ObjectValue.defaultProps={showKey:true};export default ObjectValue;
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+const _excluded = ["ast", "theme", "showKey", "colorScheme", "className"];
+import React, { useState, useEffect } from "react";
+import makeClass from "clsx";
+import { useTheme } from "@devtools-ds/themes";
+import { isObject, getPromiseState } from "@devtools-ds/object-parser";
+import styles from "./ObjectInspector.css";
+/**
+ * Build the key and value spans
+ *
+ * @param key - The key string
+ * @param value - The value string
+ * @param valueClass - The class to apply to the value
+ * @param showKey - Whether or not to show the key with the value
+ * @param depth - Current depth (so we don't put a key on root)
+ */
+const buildValue = (key, value, valueClass, showKey, depth) => {
+  const computedKey = key.includes("-") ? `"${key}"` : key;
+  const isRoot = depth <= 0;
+  return /*#__PURE__*/React.createElement("span", {
+    className: styles.text
+  }, !isRoot && showKey && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
+    className: styles.key
+  }, computedKey), /*#__PURE__*/React.createElement("span", null, ":\xA0")), /*#__PURE__*/React.createElement("span", {
+    className: valueClass
+  }, value));
+};
+
+/** Display a leaf key-value pair with appropriate styles. */
+export const ObjectValue = props => {
+  const {
+      ast,
+      theme,
+      showKey,
+      colorScheme,
+      className
+    } = props,
+    html = _objectWithoutProperties(props, _excluded);
+  const {
+    themeClass
+  } = useTheme({
+    theme,
+    colorScheme
+  }, styles);
+  const [asyncValue, setAsyncValue] = useState( /*#__PURE__*/React.createElement("span", null));
+  let value = /*#__PURE__*/React.createElement("span", null);
+
+  /** Handle async types once */
+  useEffect(() => {
+    if (ast.value instanceof Promise) {
+      /** Async function to wait for Promise.race */
+      const waitForPromiseResult = async promise => {
+        setAsyncValue(buildValue(ast.key, `Promise { "${await getPromiseState(promise)}" }`, styles.key, showKey, ast.depth));
+      };
+      waitForPromiseResult(ast.value);
+    }
+  }, [ast, showKey]);
+  if (typeof ast.value === "number" || typeof ast.value === "bigint") {
+    // Number
+    value = buildValue(ast.key, String(ast.value), styles.number, showKey, ast.depth);
+  } else if (typeof ast.value === "boolean") {
+    // Boolean
+    value = buildValue(ast.key, String(ast.value), styles.boolean, showKey, ast.depth);
+  } else if (typeof ast.value === "string") {
+    // String
+    value = buildValue(ast.key, `"${ast.value}"`, styles.string, showKey, ast.depth);
+  } else if (typeof ast.value === "undefined") {
+    // Undefined
+    value = buildValue(ast.key, "undefined", styles.undefined, showKey, ast.depth);
+  } else if (typeof ast.value === "symbol") {
+    // Symbol
+    value = buildValue(ast.key, ast.value.toString(), styles.string, showKey, ast.depth);
+  } else if (typeof ast.value === "function") {
+    // Function
+    value = buildValue(ast.key, `${ast.value.name}()`, styles.key, showKey, ast.depth);
+  } else if (typeof ast.value === "object") {
+    if (ast.value === null) {
+      // Null
+      value = buildValue(ast.key, "null", styles.null, showKey, ast.depth);
+    } else if (Array.isArray(ast.value)) {
+      // Array
+      value = buildValue(ast.key, `Array(${ast.value.length})`, styles.key, showKey, ast.depth);
+    } else if (ast.value instanceof Date) {
+      // Date
+      value = buildValue(ast.key, `Date ${ast.value.toString()}`, styles.value, showKey, ast.depth);
+    } else if (ast.value instanceof RegExp) {
+      // RegExp
+      value = buildValue(ast.key, ast.value.toString(), styles.regex, showKey, ast.depth);
+    } else if (ast.value instanceof Error) {
+      // Error
+      value = buildValue(ast.key, ast.value.toString(), styles.error, showKey, ast.depth);
+    } else if (isObject(ast.value)) {
+      // Object
+      value = buildValue(ast.key, "{…}", styles.key, showKey, ast.depth);
+    } else {
+      // WeakMap, WeakSet, Custom Classes, etc
+      value = buildValue(ast.key, ast.value.constructor.name, styles.key, showKey, ast.depth);
+    }
+  }
+  return /*#__PURE__*/React.createElement("span", _extends({
+    className: makeClass(themeClass, className)
+  }, html), asyncValue, value);
+};
+ObjectValue.defaultProps = {
+  showKey: true
+};
+export default ObjectValue;
 //# sourceMappingURL=ObjectValue.js.map

package.json

 {
   "name": "@devtools-ds/object-inspector",
-  "version": "1.2.0",
+  "version": "1.2.1",
   "main": "./dist/cjs/index.js",
@@ -33,5 +33,5 @@ "module": "./dist/esm/index.js",
     "@babel/runtime": "7.7.2",
-    "@devtools-ds/object-parser": "^1.2.0",
-    "@devtools-ds/themes": "^1.2.0",
-    "@devtools-ds/tree": "^1.2.0",
+    "@devtools-ds/object-parser": "^1.2.1",
+    "@devtools-ds/themes": "^1.2.1",
+    "@devtools-ds/tree": "^1.2.1",
     "clsx": "1.1.0"
@@ -51,3 +51,3 @@ },
   ],
-  "gitHead": "66f7d45baeabc9552acb25e3b3ebe28c8bb20d4f"
+  "gitHead": "53e5c67af2fa62f8044be93fb6e2af8573988aa4"
 }

Fixed alerts

Minified code

Quality

This package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.

Found 2 instances in 1 package

Improved metrics

Total package byte prevSize

145065

increased by8.26%

Lines of code

1839

increased by65.38%

Number of low quality alerts

1

decreased by-80%

Dependency changes

• Updated@devtools-ds/object-parser@^1.2.1

• Updated@devtools-ds/themes@^1.2.1

• Updated@devtools-ds/tree@^1.2.1