react-inspector - npm Package Compare versions

Comparing version 1.0.0-alpha.5 to 1.0.0-alpha.6

lib/index.js

@@ -22,4 +22,2 @@ 'use strict';
 
-var _pathUtils = require('./object-inspector/pathUtils');
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -46,24 +44,6 @@
   if (table) {
-    return _react2.default.createElement(_TableInspector3.default, { data: data });
+    return _react2.default.createElement(_TableInspector3.default, _extends({ data: data }, rest));
   }
 
   return _react2.default.createElement(_ObjectInspector3.default, _extends({ data: data }, rest));
-
-  // // TODO: refactor out root path
-  // let wildcardPaths = []
-  // if(level !== undefined){
-  //   wildcardPaths = wildcardPaths.concat(wildcardPathsFromLevel(level, name))
-  // }
-  // const appendRootPathToPath = (path) => `${getRootPath(name)}.${path}`
-  // if(typeof path === 'string'){
-  //   wildcardPaths.push(appendRootPathToPath(path))
-  // }
-  // if(typeof path === 'array'){
-  //   // paths
-  //   wildcardPaths = wildcardPaths.concat(path.map(p => appendRootPathToPath(p)))
-  // }
-
-  // console.log(wildcardPaths)
-
-  // return <ObjectInspector data={data} name={name} initialExpandedPaths={wildcardPaths}/>
 };
@@ -70,0 +50,0 @@

lib/object-inspector/ObjectInspector.js

@@ -13,6 +13,2 @@ 'use strict';
 
-var _ObjectDescription = require('../object/ObjectDescription');
-
-var _ObjectDescription2 = _interopRequireDefault(_ObjectDescription);
-
 var _ObjectPreview = require('../object/ObjectPreview');
@@ -38,2 +34,5 @@
 
+// import { DEFAULT_ROOT_PATH, isExpandable, getPathsState } from './pathUtils'
+
+
 // Styles
@@ -57,2 +56,3 @@
 
+// Wrapper around inspector
 var InspectorBox = function InspectorBox(_ref) {
@@ -67,20 +67,6 @@ var children = _ref.children;
 
-// The view with or without expansion
-var PreviewBox = function PreviewBox(_ref2) {
-  var data = _ref2.data;
-  var name = _ref2.name;
+// a box with left padding containing the property nodes
+var PropertyNodesBox = function PropertyNodesBox(_ref2) {
   var children = _ref2.children;
-  var onClick = _ref2.onClick;
   return _react2.default.createElement(
-    'span',
-    { style: styles.property, onClick: onClick },
-    children,
-    _react2.default.createElement(_ObjectPreview2.default, { object: data, name: name })
-  );
-};
-
-// a box with left padding containing the property nodes
-var PropertyNodesBox = function PropertyNodesBox(_ref3) {
-  var children = _ref3.children;
-  return _react2.default.createElement(
     'div',
@@ -145,3 +131,4 @@ { style: styles.propertyNodesBox },
       // console.log(this.props.data);
-      if ((0, _pathUtils.isExpandable)(this.props.data)) {
+      var isExpandable = (0, _pathUtils.getIsExpandable)(this.props.showNonenumerable);
+      if (isExpandable(this.props.data)) {
         if (this.props.depth > 0) {
@@ -160,42 +147,90 @@ this.props.setExpanded(this.props.path, !this.props.getExpanded(this.props.path));
       var name = _props.name;
-      var path = this.props.path;
+      var _props2 = this.props;
+      var showNonenumerable = _props2.showNonenumerable;
+      var isNonenumerable = _props2.isNonenumerable;
 
+      var isExpandable = (0, _pathUtils.getIsExpandable)(this.props.showNonenumerable);
 
-      var setExpanded = this.props.depth === 0 ? this.setExpanded.bind(this) : this.props.setExpanded;
-      var getExpanded = this.props.depth === 0 ? this.getExpanded.bind(this) : this.props.getExpanded;
+      var _props3 = this.props;
+      var depth = _props3.depth;
+      var path = _props3.path;
 
+
+      var setExpanded = depth === 0 ? this.setExpanded.bind(this) : this.props.setExpanded;
+      var getExpanded = depth === 0 ? this.getExpanded.bind(this) : this.props.getExpanded;
+
       var expanded = getExpanded(path);
-      var expandGlyph = undefined;
-      if ((0, _pathUtils.isExpandable)(data)) {
+      var expandGlyph = void 0;
+      if (isExpandable(data)) {
         expandGlyph = _react2.default.createElement(_glyphs.ExpandGlyph, { expanded: expanded });
       } else {
         // root node doesn't need placeholder
-        if (this.props.depth === 0) {
+        if (depth === 0) {
           expandGlyph = _react2.default.createElement('span', null);
-        } else {
-          expandGlyph = _react2.default.createElement(_glyphs.ExpandGlyph, { empty: true });
         }
+        // placeholder so preview is properly aligned
+        else {
+            expandGlyph = _react2.default.createElement(_glyphs.ExpandGlyph, { empty: true });
+          }
       }
 
       // if current node is expanded render the property nodes
-      var propertyNodesBox = undefined;
+      var propertyNodesBox = void 0;
       if (expanded) {
-        var propertyNodes = [];
-        for (var propertyName in data) {
-          var propertyValue = data[propertyName];
-          if (data.hasOwnProperty(propertyName)) {
-            propertyNodes.push(_react2.default.createElement(ObjectInspector, { getExpanded: getExpanded,
-              setExpanded: setExpanded,
-              path: path + '.' + propertyName // TODO: escape '.' in propertyName
-              , depth: this.props.depth + 1,
-              key: propertyName,
-              name: propertyName,
-              data: propertyValue }));
-          }
-        }
-        propertyNodesBox = _react2.default.createElement(
-          PropertyNodesBox,
-          null,
-          propertyNodes
-        );
+        (function () {
+          var propertyNodes = [];
+
+          Object.getOwnPropertyNames(data).forEach(function (propertyName) {
+            // enumerables
+            if (data.propertyIsEnumerable(propertyName)) {
+              var propertyValue = data[propertyName];
+              propertyNodes.push(_react2.default.createElement(ObjectInspector, { getExpanded: getExpanded,
+                setExpanded: setExpanded,
+                path: path + '.' + propertyName // TODO: escape '.' in propertyName
+                , depth: depth + 1,
+                key: propertyName,
+                name: propertyName,
+                data: propertyValue,
+                showNonenumerable: showNonenumerable }));
+            }
+            // non enumerables, only show if showNonenumerable is enabled
+            else if (showNonenumerable) {
+                var _propertyValue = void 0;
+                // To work around the error (happens some time when propertyName === 'caller' || propertyName === 'arguments')
+                // 'caller' and 'arguments' are restricted function properties and cannot be accessed in this context
+                try {
+                  _propertyValue = data[propertyName];
+                } catch (e) {}
+
+                if (_propertyValue !== undefined) propertyNodes.push(_react2.default.createElement(ObjectInspector, { getExpanded: getExpanded,
+                  setExpanded: setExpanded,
+                  path: path + '.' + propertyName // TODO: escape '.' in propertyName
+                  , depth: depth + 1,
+                  key: propertyName,
+                  name: propertyName,
+                  data: _propertyValue,
+                  showNonenumerable: showNonenumerable,
+                  isNonenumerable: true }));
+              }
+          });
+
+          // Object.getPrototypeOf (__proto__)
+          if (showNonenumerable && data !== Object.prototype /* already added */) {
+              propertyNodes.push(_react2.default.createElement(ObjectInspector, { getExpanded: getExpanded,
+                setExpanded: setExpanded,
+                path: path + '.__proto__' // TODO: escape '.' in propertyName
+                , depth: depth + 1,
+                key: '__proto__',
+                name: '__proto__',
+                data: Object.getPrototypeOf(data),
+                showNonenumerable: showNonenumerable,
+                isNonenumerable: true }));
+            }
+
+          propertyNodesBox = _react2.default.createElement(
+            PropertyNodesBox,
+            null,
+            propertyNodes
+          );
+        })();
       }
@@ -207,5 +242,6 @@
         _react2.default.createElement(
-          PreviewBox,
-          { data: data, name: name, onClick: this.handleClick.bind(this) },
-          expandGlyph
+          'span',
+          { style: styles.property, onClick: this.handleClick.bind(this) },
+          expandGlyph,
+          _react2.default.createElement(_ObjectPreview2.default, { object: data, name: name, isNonenumerable: isNonenumerable })
         ),
@@ -227,2 +263,5 @@ propertyNodesBox
 
+  showNonenumerable: _react.PropTypes.bool, // switch to show non-enumerable properties
+  isNonenumerable: _react.PropTypes.bool, // am myself a non-enumerable property? for styling purposes
+
   expandLevel: _react.PropTypes.number,
@@ -239,2 +278,5 @@ expandPaths: _react.PropTypes.oneOfType([_react.PropTypes.string, _react.PropTypes.array]),
 
+  showNonenumerable: false,
+  isNonenumerable: false,
+
   expandLevel: undefined,
@@ -241,0 +283,0 @@ expandPaths: undefined,

lib/object-inspector/pathUtils.js

@@ -11,12 +11,23 @@ 'use strict';
 
-/* should be modified to support __proto__ */
-var isExpandable = exports.isExpandable = function isExpandable(data) {
+// this works for showNonenumerable === false
+var isExpandableNoShowNonenumerable = function isExpandableNoShowNonenumerable(data) {
   return (typeof data === 'undefined' ? 'undefined' : _typeof(data)) === 'object' && data !== null && Object.keys(data).length > 0;
 };
 
-var getPathsState = exports.getPathsState = function getPathsState(expandLevel, expandPaths, data, rootName) {
-  var initialState = arguments.length <= 4 || arguments[4] === undefined ? {} : arguments[4];
+// this works for showNonenumerable === true
+var isExpandableShowNonenumerable = function isExpandableShowNonenumerable(data) {
+  return (typeof data === 'undefined' ? 'undefined' : _typeof(data)) === 'object' && data !== null || typeof data === 'function';
+};
 
+// generate isExpandable function
+var getIsExpandable = exports.getIsExpandable = function getIsExpandable(showNonenumerable) {
+  if (!showNonenumerable) return isExpandableNoShowNonenumerable;
+  return isExpandableShowNonenumerable;
+};
+
+var getPathsState = exports.getPathsState = function getPathsState(showNonenumerable, expandLevel, expandPaths, data, rootName) {
+  var initialState = arguments.length <= 5 || arguments[5] === undefined ? {} : arguments[5];
+
+  var isExpandable = getIsExpandable(showNonenumerable);
   var wildcardPaths = [];
-  var rootPath = DEFAULT_ROOT_PATH;
   if (expandLevel !== undefined) {
@@ -28,3 +39,3 @@ wildcardPaths = wildcardPaths.concat(wildcardPathsFromLevel(expandLevel));
 
-  var paths = pathsFromWildcardPaths(wildcardPaths, data, rootPath);
+  var paths = pathsFromWildcardPaths(isExpandable, wildcardPaths, data, DEFAULT_ROOT_PATH);
   var pathsState = paths.reduce(function (obj, path) {
@@ -38,11 +49,6 @@ obj[path] = true;return obj;
 /**
- * Convert wild card paths to concrete paths
- * @param  {array} initialExpandedPaths  wild card paths
- * @param  {object} data                 data object
- * @param  {string} rootName             optional root name (if not specified will use DEFAULT_ROOT_PATH)
- * @return {array}                       concrete paths
+ * Convert wild card paths to concrete paths by recursive traversal
  */
-var pathsFromWildcardPaths = exports.pathsFromWildcardPaths = function pathsFromWildcardPaths(wildcardPaths, data) {
+var pathsFromWildcardPaths = exports.pathsFromWildcardPaths = function pathsFromWildcardPaths(isExpandable, wildcardPaths, data) {
   var paths = [];
-  var rootPath = DEFAULT_ROOT_PATH;
   if (wildcardPaths === undefined) {
@@ -65,4 +71,4 @@ return paths;
           if (i === 0) {
-            if (isExpandable(curObject) && (name === rootPath || name === WILDCARD)) {
-              populatePaths(curObject, rootPath, i + 1);
+            if (isExpandable(curObject) && (name === DEFAULT_ROOT_PATH || name === WILDCARD)) {
+              populatePaths(curObject, DEFAULT_ROOT_PATH, i + 1);
             }
@@ -83,5 +89,5 @@ } else {
             } else {
-              var propertyValue = curObject[name];
-              if (isExpandable(propertyValue)) {
-                populatePaths(propertyValue, curPath + '.' + name, i + 1);
+              var _propertyValue = curObject[name];
+              if (isExpandable(_propertyValue)) {
+                populatePaths(_propertyValue, curPath + '.' + name, i + 1);
               }
@@ -107,4 +113,3 @@ }
   }
-  var rootPath = DEFAULT_ROOT_PATH;
-  var path = rootPath;
+  var path = DEFAULT_ROOT_PATH;
   var wildcardPaths = [path];
@@ -118,5 +123,7 @@ for (var i = 1; i < level; i++) {
 
-var pathsFromDataAndLevel = exports.pathsFromDataAndLevel = function pathsFromDataAndLevel(data, level) {
-  var wildcardPaths = wildcardPathsFromLevel(level);
-  return pathsFromWildcardPaths(wildcardPaths, data);
-};
+/*
+export const pathsFromDataAndLevel = (data, level) => {
+  const wildcardPaths = wildcardPathsFromLevel(level)
+  return pathsFromWildcardPaths(wildcardPaths, data)
+}
+*/

lib/object-inspector/pathUtils.spec.js

@@ -17,11 +17,15 @@ 'use strict';
   it('isExpandable', function () {
-    (0, _expect2.default)((0, _pathUtils.isExpandable)(undefined)).toBe(false);
-    (0, _expect2.default)((0, _pathUtils.isExpandable)(null)).toBe(false);
-    (0, _expect2.default)((0, _pathUtils.isExpandable)('hello')).toBe(false);
+    // when showNonenumerable === false
+    var isExpandable = (0, _pathUtils.getIsExpandable)(false);
+    (0, _expect2.default)(isExpandable(undefined)).toBe(false);
+    (0, _expect2.default)(isExpandable(null)).toBe(false);
+    (0, _expect2.default)(isExpandable('hello')).toBe(false);
 
-    (0, _expect2.default)((0, _pathUtils.isExpandable)([])).toBe(false);
-    (0, _expect2.default)((0, _pathUtils.isExpandable)([0])).toBe(true);
+    // expect(isExpandable(Object.getPrototypeOf({}))).toBe(true)
 
-    (0, _expect2.default)((0, _pathUtils.isExpandable)({})).toBe(false);
-    (0, _expect2.default)((0, _pathUtils.isExpandable)({ k: 'v' })).toBe(true);
+    (0, _expect2.default)(isExpandable([])).toBe(false);
+    (0, _expect2.default)(isExpandable([0])).toBe(true);
+
+    (0, _expect2.default)(isExpandable({})).toBe(false);
+    (0, _expect2.default)(isExpandable({ k: 'v' })).toBe(true);
   });
@@ -38,98 +42,88 @@
 
-  it('pathsFromDataAndLevel: data: [null, undefined, []] ', function () {
-    (0, _expect2.default)((0, _pathUtils.pathsFromDataAndLevel)(null, 0)).toEqual([]);
+  /*
+  it('pathsFromDataAndLevel: data: [null, undefined, []] ', () => {
+    expect(pathsFromDataAndLevel(null, 0)).toEqual([ ])
     // TODO:
-    (0, _expect2.default)((0, _pathUtils.pathsFromDataAndLevel)(null, 1)).toEqual([]);
-    (0, _expect2.default)((0, _pathUtils.pathsFromDataAndLevel)(undefined, 0)).toEqual([]);
-    (0, _expect2.default)((0, _pathUtils.pathsFromDataAndLevel)([], 0)).toEqual([]);
+    expect(pathsFromDataAndLevel(null, 1)).toEqual([ ])
+    expect(pathsFromDataAndLevel(undefined, 0)).toEqual([ ])
+    expect(pathsFromDataAndLevel([], 0)).toEqual([ ])
     // TODO:
-    (0, _expect2.default)((0, _pathUtils.pathsFromDataAndLevel)([], 2)).toEqual([]);
-  });
+    expect(pathsFromDataAndLevel([], 2)).toEqual([ ])
+  })
+   it('pathsFromDataAndLevel: object', () => {
+    const data = {
+        "id": 2,
+        "name": "An ice sculpture",
+        // "price": 12.50,
+        "tags": ["cold", "ice"],
+        "dimensions": {
+            "length": 7.0,
+            "width": 12.0,
+            "height": 9.5
+        },
+        "warehouseLocation": {
+            "latitude": -78.75,
+            "longitude": 20.4
+        }
+    }
+     expect(pathsFromDataAndLevel(data, 0)).toEqual([ ])
+    expect(pathsFromDataAndLevel(data, 1)).toEqual([ root ])
+    expect(pathsFromDataAndLevel(data, 2)).toEqual([ root, `${root}.tags`, `${root}.dimensions`, `${root}.warehouseLocation` ])
+    expect(pathsFromDataAndLevel(data, 3)).toEqual([ root, `${root}.tags`, `${root}.dimensions`, `${root}.warehouseLocation` ])
+    expect(pathsFromDataAndLevel(data, 4)).toEqual([ root, `${root}.tags`, `${root}.dimensions`, `${root}.warehouseLocation` ])
+  })
+   it('pathsFromDataAndLevel: array', () => {
+    const data = [0, 1, 2, 3, 4]
+     expect(pathsFromDataAndLevel(data, 0)).toEqual([ ])
+    expect(pathsFromDataAndLevel(data, 1)).toEqual([ root ])
+    expect(pathsFromDataAndLevel(data, 2)).toEqual([ root ])
+    expect(pathsFromDataAndLevel(data, 3)).toEqual([ root ])
+    expect(pathsFromDataAndLevel(data, 4)).toEqual([ root ])
+  })
+   it('pathsFromDataAndLevel: null, undefined, empty object, empty array, boolean, number, function', () => {
+    let data = null
+     expect(pathsFromDataAndLevel(data, 0)).toEqual([ ])
+    expect(pathsFromDataAndLevel(data, 1)).toEqual([ ])
+    expect(pathsFromDataAndLevel(data, 2)).toEqual([ ])
+    expect(pathsFromDataAndLevel(data, 3)).toEqual([ ])
+    expect(pathsFromDataAndLevel(data, 4)).toEqual([ ])
+     data = undefined
+    expect(pathsFromDataAndLevel(data, 0)).toEqual([ ])
+    expect(pathsFromDataAndLevel(data, 1)).toEqual([ ])
+    expect(pathsFromDataAndLevel(data, 2)).toEqual([ ])
+    expect(pathsFromDataAndLevel(data, 3)).toEqual([ ])
+    expect(pathsFromDataAndLevel(data, 4)).toEqual([ ])
+     data = {} // not showing __proto__
+    expect(pathsFromDataAndLevel(data, 0)).toEqual([ ])
+    expect(pathsFromDataAndLevel(data, 1)).toEqual([ ])
+    expect(pathsFromDataAndLevel(data, 2)).toEqual([ ])
+    expect(pathsFromDataAndLevel(data, 3)).toEqual([ ])
+    expect(pathsFromDataAndLevel(data, 4)).toEqual([ ])
+     data = [] // length, __proto__
+    expect(pathsFromDataAndLevel(data, 0)).toEqual([ ])
+    expect(pathsFromDataAndLevel(data, 1)).toEqual([ ])
+    expect(pathsFromDataAndLevel(data, 2)).toEqual([ ])
+    expect(pathsFromDataAndLevel(data, 3)).toEqual([ ])
+    expect(pathsFromDataAndLevel(data, 4)).toEqual([ ])
+     data = true
+    expect(pathsFromDataAndLevel(data, 0)).toEqual([ ])
+    expect(pathsFromDataAndLevel(data, 1)).toEqual([ ])
+    expect(pathsFromDataAndLevel(data, 2)).toEqual([ ])
+    expect(pathsFromDataAndLevel(data, 3)).toEqual([ ])
+    expect(pathsFromDataAndLevel(data, 4)).toEqual([ ])
+     data = 1
+    expect(pathsFromDataAndLevel(data, 0)).toEqual([ ])
+    expect(pathsFromDataAndLevel(data, 1)).toEqual([ ])
+    expect(pathsFromDataAndLevel(data, 2)).toEqual([ ])
+    expect(pathsFromDataAndLevel(data, 3)).toEqual([ ])
+    expect(pathsFromDataAndLevel(data, 4)).toEqual([ ])
+     data = function(){}
+    expect(pathsFromDataAndLevel(data, 0)).toEqual([ ])
+    expect(pathsFromDataAndLevel(data, 1)).toEqual([ ])
+    expect(pathsFromDataAndLevel(data, 2)).toEqual([ ])
+    expect(pathsFromDataAndLevel(data, 3)).toEqual([ ])
+    expect(pathsFromDataAndLevel(data, 4)).toEqual([ ])
+  })
+  */
 
-  it('pathsFromDataAndLevel: object', function () {
-    var data = {
-      "id": 2,
-      "name": "An ice sculpture",
-      // "price": 12.50,
-      "tags": ["cold", "ice"],
-      "dimensions": {
-        "length": 7.0,
-        "width": 12.0,
-        "height": 9.5
-      },
-      "warehouseLocation": {
-        "latitude": -78.75,
-        "longitude": 20.4
-      }
-    };
-
-    (0, _expect2.default)((0, _pathUtils.pathsFromDataAndLevel)(data, 0)).toEqual([]);
-    (0, _expect2.default)((0, _pathUtils.pathsFromDataAndLevel)(data, 1)).toEqual([root]);
-    (0, _expect2.default)((0, _pathUtils.pathsFromDataAndLevel)(data, 2)).toEqual([root, root + '.tags', root + '.dimensions', root + '.warehouseLocation']);
-    (0, _expect2.default)((0, _pathUtils.pathsFromDataAndLevel)(data, 3)).toEqual([root, root + '.tags', root + '.dimensions', root + '.warehouseLocation']);
-    (0, _expect2.default)((0, _pathUtils.pathsFromDataAndLevel)(data, 4)).toEqual([root, root + '.tags', root + '.dimensions', root + '.warehouseLocation']);
-  });
-
-  it('pathsFromDataAndLevel: array', function () {
-    var data = [0, 1, 2, 3, 4];
-
-    (0, _expect2.default)((0, _pathUtils.pathsFromDataAndLevel)(data, 0)).toEqual([]);
-    (0, _expect2.default)((0, _pathUtils.pathsFromDataAndLevel)(data, 1)).toEqual([root]);
-    (0, _expect2.default)((0, _pathUtils.pathsFromDataAndLevel)(data, 2)).toEqual([root]);
-    (0, _expect2.default)((0, _pathUtils.pathsFromDataAndLevel)(data, 3)).toEqual([root]);
-    (0, _expect2.default)((0, _pathUtils.pathsFromDataAndLevel)(data, 4)).toEqual([root]);
-  });
-
-  it('pathsFromDataAndLevel: null, undefined, empty object, empty array, boolean, number, function', function () {
-    var data = null;
-
-    (0, _expect2.default)((0, _pathUtils.pathsFromDataAndLevel)(data, 0)).toEqual([]);
-    (0, _expect2.default)((0, _pathUtils.pathsFromDataAndLevel)(data, 1)).toEqual([]);
-    (0, _expect2.default)((0, _pathUtils.pathsFromDataAndLevel)(data, 2)).toEqual([]);
-    (0, _expect2.default)((0, _pathUtils.pathsFromDataAndLevel)(data, 3)).toEqual([]);
-    (0, _expect2.default)((0, _pathUtils.pathsFromDataAndLevel)(data, 4)).toEqual([]);
-
-    data = undefined;
-    (0, _expect2.default)((0, _pathUtils.pathsFromDataAndLevel)(data, 0)).toEqual([]);
-    (0, _expect2.default)((0, _pathUtils.pathsFromDataAndLevel)(data, 1)).toEqual([]);
-    (0, _expect2.default)((0, _pathUtils.pathsFromDataAndLevel)(data, 2)).toEqual([]);
-    (0, _expect2.default)((0, _pathUtils.pathsFromDataAndLevel)(data, 3)).toEqual([]);
-    (0, _expect2.default)((0, _pathUtils.pathsFromDataAndLevel)(data, 4)).toEqual([]);
-
-    data = {}; // not showing __proto__
-    (0, _expect2.default)((0, _pathUtils.pathsFromDataAndLevel)(data, 0)).toEqual([]);
-    (0, _expect2.default)((0, _pathUtils.pathsFromDataAndLevel)(data, 1)).toEqual([]);
-    (0, _expect2.default)((0, _pathUtils.pathsFromDataAndLevel)(data, 2)).toEqual([]);
-    (0, _expect2.default)((0, _pathUtils.pathsFromDataAndLevel)(data, 3)).toEqual([]);
-    (0, _expect2.default)((0, _pathUtils.pathsFromDataAndLevel)(data, 4)).toEqual([]);
-
-    data = []; // length, __proto__
-    (0, _expect2.default)((0, _pathUtils.pathsFromDataAndLevel)(data, 0)).toEqual([]);
-    (0, _expect2.default)((0, _pathUtils.pathsFromDataAndLevel)(data, 1)).toEqual([]);
-    (0, _expect2.default)((0, _pathUtils.pathsFromDataAndLevel)(data, 2)).toEqual([]);
-    (0, _expect2.default)((0, _pathUtils.pathsFromDataAndLevel)(data, 3)).toEqual([]);
-    (0, _expect2.default)((0, _pathUtils.pathsFromDataAndLevel)(data, 4)).toEqual([]);
-
-    data = true;
-    (0, _expect2.default)((0, _pathUtils.pathsFromDataAndLevel)(data, 0)).toEqual([]);
-    (0, _expect2.default)((0, _pathUtils.pathsFromDataAndLevel)(data, 1)).toEqual([]);
-    (0, _expect2.default)((0, _pathUtils.pathsFromDataAndLevel)(data, 2)).toEqual([]);
-    (0, _expect2.default)((0, _pathUtils.pathsFromDataAndLevel)(data, 3)).toEqual([]);
-    (0, _expect2.default)((0, _pathUtils.pathsFromDataAndLevel)(data, 4)).toEqual([]);
-
-    data = 1;
-    (0, _expect2.default)((0, _pathUtils.pathsFromDataAndLevel)(data, 0)).toEqual([]);
-    (0, _expect2.default)((0, _pathUtils.pathsFromDataAndLevel)(data, 1)).toEqual([]);
-    (0, _expect2.default)((0, _pathUtils.pathsFromDataAndLevel)(data, 2)).toEqual([]);
-    (0, _expect2.default)((0, _pathUtils.pathsFromDataAndLevel)(data, 3)).toEqual([]);
-    (0, _expect2.default)((0, _pathUtils.pathsFromDataAndLevel)(data, 4)).toEqual([]);
-
-    data = function data() {};
-    (0, _expect2.default)((0, _pathUtils.pathsFromDataAndLevel)(data, 0)).toEqual([]);
-    (0, _expect2.default)((0, _pathUtils.pathsFromDataAndLevel)(data, 1)).toEqual([]);
-    (0, _expect2.default)((0, _pathUtils.pathsFromDataAndLevel)(data, 2)).toEqual([]);
-    (0, _expect2.default)((0, _pathUtils.pathsFromDataAndLevel)(data, 3)).toEqual([]);
-    (0, _expect2.default)((0, _pathUtils.pathsFromDataAndLevel)(data, 4)).toEqual([]);
-  });
-
   // it('pathsFromDataAndLevel: object, with custome names', () => {
@@ -136,0 +130,0 @@ //   const data = {

lib/object/ObjectDescription.js

@@ -70,2 +70,9 @@ 'use strict';
       }
+      if (object instanceof RegExp) {
+        return _react2.default.createElement(
+          'span',
+          { style: _objectStyles2.default.value.regexp },
+          object.toString()
+        );
+      }
       if (Array.isArray(object)) {
@@ -81,3 +88,3 @@ return _react2.default.createElement(
         null,
-        'Object'
+        object.constructor.name
       );
@@ -84,0 +91,0 @@ case 'function':

lib/object/ObjectName.js

@@ -19,5 +19,6 @@ 'use strict';
   var name = _ref.name;
+  var dimmed = _ref.dimmed;
   return _react2.default.createElement(
     'span',
-    { style: _objectStyles2.default.name },
+    { style: dimmed ? _objectStyles2.default.nameDimmed : _objectStyles2.default.name },
     name
@@ -24,0 +25,0 @@ );

lib/object/ObjectPreview.js

@@ -23,2 +23,3 @@ 'use strict';
 
+/* NOTE: Chrome console.log is italic */
 var styles = {
@@ -30,2 +31,3 @@ preview: {
 
+/* intersperse arr with sep */
 function intersperse(arr, sep) {
@@ -36,3 +38,3 @@ if (arr.length === 0) {
 
-  return arr.slice(1).reduce(function (xs, x, i) {
+  return arr.slice(1).reduce(function (xs, x) {
     return xs.concat([sep, x]);
@@ -44,2 +46,3 @@ }, [arr[0]]);
  * A preview of the object
+ * if isNonenumerable is specified, render the name dimmed
  * if a name is specified, it will render a simplified preview with a short description
@@ -51,5 +54,5 @@ */
   var name = _ref.name;
+  var isNonenumerable = _ref.isNonenumerable;
 
   if (typeof name !== 'undefined') {
-
     var Colon = function Colon() {
@@ -65,3 +68,3 @@ return _react2.default.createElement(
       null,
-      _react2.default.createElement(_ObjectName2.default, { name: name }),
+      _react2.default.createElement(_ObjectName2.default, { name: name, dimmed: isNonenumerable }),
       _react2.default.createElement(Colon, null),
@@ -72,3 +75,3 @@ _react2.default.createElement(_ObjectDescription2.default, { object: object })
 
-  if ((typeof object === 'undefined' ? 'undefined' : _typeof(object)) !== 'object' || object === null) {
+  if ((typeof object === 'undefined' ? 'undefined' : _typeof(object)) !== 'object' || object === null || object instanceof Date || object instanceof RegExp) {
     return _react2.default.createElement(_ObjectDescription2.default, { object: object });
@@ -87,8 +90,2 @@ }
     );
-  } else if (object instanceof Date) {
-    return _react2.default.createElement(
-      'span',
-      null,
-      object.toString()
-    );
   } else {
@@ -99,3 +96,3 @@ var propertyNodes = [];
       if (object.hasOwnProperty(propertyName)) {
-        var ellipsis = undefined;
+        var ellipsis = void 0;
         if (propertyNodes.length === maxProperties - 1 && Object.keys(object).length > maxProperties) {
@@ -131,8 +128,10 @@ ellipsis = _react2.default.createElement(
 ObjectPreview.propTypes = {
-  maxProperties: _react2.default.PropTypes.number
-};
+  maxProperties: _react.PropTypes.number,
+  isNonenumerable: _react.PropTypes.bool };
+// non enumerable object will be dimmed
 ObjectPreview.defaultProps = {
-  maxProperties: 5 /* max number of properties shown in the property view */
+  maxProperties: 5, // max number of properties shown in the property view
+  isNonenumerable: false
 };
 
 exports.default = ObjectPreview;

lib/object/objectStyles.js

@@ -10,2 +10,6 @@ 'use strict';
   },
+  nameDimmed: {
+    color: 'rgb(136, 19, 145)',
+    opacity: 0.6
+  },
   value: {
@@ -18,2 +22,5 @@ null: {
     },
+    regexp: {
+      color: 'rgb(196, 26, 22)'
+    },
     string: {
@@ -20,0 +27,0 @@ color: 'rgb(196, 26, 22)'

lib/table-inspector/getHeaders.js

@@ -51,3 +51,3 @@ 'use strict';
   if ((typeof data === 'undefined' ? 'undefined' : _typeof(data)) === 'object') {
-    var rowHeaders = undefined;
+    var rowHeaders = void 0;
     // is an array
@@ -54,0 +54,0 @@ if (Array.isArray(data)) {

lib/table-inspector/TableInspector.js

@@ -227,7 +227,7 @@ 'use strict';
           tableLayout: 'fixed',
-          borderSpacing: '0',
+          borderSpacing: 0,
           borderCollapse: 'separate',
           height: '100%',
           width: '100%',
-          margin: '0' } },
+          margin: 0 } },
       _react2.default.createElement(
@@ -301,3 +301,3 @@ 'tbody',
           // table
-          borderSpacing: '0',
+          borderSpacing: 0,
           borderCollapse: 'separate',
@@ -422,3 +422,3 @@ // height: '100%',
 
-      var columnDataWithRowIndexes = undefined; /* row indexes are [0..nRows-1] */
+      var columnDataWithRowIndexes = void 0; /* row indexes are [0..nRows-1] */
       // TODO: refactor
@@ -461,3 +461,3 @@ if (sortColumn !== undefined) {
             };
-            var result = undefined;
+            var result = void 0;
             if (type1 === type2) {
@@ -464,0 +464,0 @@ result = lt(v1, v2);

package.json

 {
   "name": "react-inspector",
-  "version": "1.0.0-alpha.5",
+  "version": "1.0.0-alpha.6",
   "description": "Power of Browser DevTools inspectors right inside your React app",
@@ -5,0 +5,0 @@ "main": "lib/index.js",

README.md

@@ -7,3 +7,3 @@ react-inspector
 
-Power of [Browser DevTools](https://developers.google.com/web/tools/chrome-devtools/) inspectors right inside your React app. Check out the interactive playground [here](http://xyc.github.io/react-inspector/).
+Power of [Browser DevTools](https://developers.google.com/web/tools/chrome-devtools/) inspectors right inside your React app. Check out the [interactive playground](http://xyc.github.io/react-inspector/).
 
@@ -48,2 +48,4 @@ ![](http://xyc.github.io/react-inspector/objectinspector.png)
 
+#### `showNonenumerable: PropTypes.bool`: show non-enumerable properties
+
 ### <TableInspector />
@@ -50,0 +52,0 @@ Like `console.table`.

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

74578

increased by1.33%

Lines of code

1639

increased by2.76%

Number of lines in readme file

104

increased by1.96%

No dependency changes