react-inspector - npm Package Compare versions

Comparing version 1.0.0-beta.2 to 1.0.0

lib/index.js

@@ -6,6 +6,12 @@ 'use strict';
 });
-exports.TableInspector = exports.ObjectInspector = undefined;
+exports.DOMInspector = exports.TableInspector = exports.ObjectInspector = undefined;
 
-var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+var _extends2 = require('babel-runtime/helpers/extends');
 
+var _extends3 = _interopRequireDefault(_extends2);
+
+var _objectWithoutProperties2 = require('babel-runtime/helpers/objectWithoutProperties');
+
+var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2);
+
 var _react = require('react');
@@ -23,8 +29,15 @@
 
+var _DOMInspector2 = require('./dom-inspector/DOMInspector');
+
+var _DOMInspector3 = _interopRequireDefault(_DOMInspector2);
+
+var _isDom = require('is-dom');
+
+var _isDom2 = _interopRequireDefault(_isDom);
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
-
 exports.ObjectInspector = _ObjectInspector3.default;
 exports.TableInspector = _TableInspector3.default;
+exports.DOMInspector = _DOMInspector3.default;
 
@@ -41,10 +54,11 @@ // NOTE: ObjectDecription and ObjectPreview can be used as building blocks, but currently their styles are not complete
   var data = _ref.data;
+  var rest = (0, _objectWithoutProperties3.default)(_ref, ['table', 'data']);
 
-  var rest = _objectWithoutProperties(_ref, ['table', 'data']);
-
   if (table) {
-    return _react2.default.createElement(_TableInspector3.default, _extends({ data: data }, rest));
+    return _react2.default.createElement(_TableInspector3.default, (0, _extends3.default)({ data: data }, rest));
   }
 
-  return _react2.default.createElement(_ObjectInspector3.default, _extends({ data: data }, rest));
+  if ((0, _isDom2.default)(data)) return _react2.default.createElement(_DOMInspector3.default, (0, _extends3.default)({ data: data }, rest));
+
+  return _react2.default.createElement(_ObjectInspector3.default, (0, _extends3.default)({ data: data }, rest));
 };
@@ -51,0 +65,0 @@

lib/object-inspector/ObjectInspector.js

@@ -7,4 +7,34 @@ 'use strict';
 
-var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+var _extends2 = require('babel-runtime/helpers/extends');
 
+var _extends3 = _interopRequireDefault(_extends2);
+
+var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');
+
+var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);
+
+var _createClass2 = require('babel-runtime/helpers/createClass');
+
+var _createClass3 = _interopRequireDefault(_createClass2);
+
+var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');
+
+var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);
+
+var _inherits2 = require('babel-runtime/helpers/inherits');
+
+var _inherits3 = _interopRequireDefault(_inherits2);
+
+var _regenerator = require('babel-runtime/regenerator');
+
+var _regenerator2 = _interopRequireDefault(_regenerator);
+
+var _slicedToArray2 = require('babel-runtime/helpers/slicedToArray');
+
+var _slicedToArray3 = _interopRequireDefault(_slicedToArray2);
+
+var _typeof2 = require('babel-runtime/helpers/typeof');
+
+var _typeof3 = _interopRequireDefault(_typeof2);
+
 var _react = require('react');
@@ -14,267 +44,298 @@
 
-var _ObjectPreview = require('../object/ObjectPreview');
+var _TreeView = require('../tree-view/TreeView');
 
-var _ObjectPreview2 = _interopRequireDefault(_ObjectPreview);
+var _TreeView2 = _interopRequireDefault(_TreeView);
 
-var _glyphs = require('../styles/glyphs');
+var _ObjectPreview = require('./ObjectPreview');
 
-var _pathUtils = require('./pathUtils');
+var _ObjectPreview2 = _interopRequireDefault(_ObjectPreview);
 
-var _objectStyles = require('../object/objectStyles');
+var _ObjectLabel = require('./ObjectLabel');
 
-var _objectStyles2 = _interopRequireDefault(_objectStyles);
+var _ObjectLabel2 = _interopRequireDefault(_ObjectLabel);
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+var createIterator = function createIterator(showNonenumerable) {
+  var objectIterator = _regenerator2.default.mark(function objectIterator(data) {
+    var shouldIterate, i, _iteratorNormalCompletion, _didIteratorError, _iteratorError, _iterator, _step, entry, _entry, k, v, _iteratorNormalCompletion2, _didIteratorError2, _iteratorError2, _iterator2, _step2, propertyName, propertyValue, _propertyValue;
 
-function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+    return _regenerator2.default.wrap(function objectIterator$(_context) {
+      while (1) {
+        switch (_context.prev = _context.next) {
+          case 0:
+            shouldIterate = (typeof data === 'undefined' ? 'undefined' : (0, _typeof3.default)(data)) === 'object' && data !== null || typeof data === 'function';
 
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
+            if (shouldIterate) {
+              _context.next = 3;
+              break;
+            }
 
-// import { DEFAULT_ROOT_PATH, isExpandable, getPathsState } from './pathUtils'
+            return _context.abrupt('return');
 
+          case 3:
+            if (!(!Array.isArray(data) && data[Symbol.iterator])) {
+              _context.next = 42;
+              break;
+            }
 
-// Styles
+            i = 0;
+            _iteratorNormalCompletion = true;
+            _didIteratorError = false;
+            _iteratorError = undefined;
+            _context.prev = 8;
+            _iterator = data[Symbol.iterator]();
 
+          case 10:
+            if (_iteratorNormalCompletion = (_step = _iterator.next()).done) {
+              _context.next = 26;
+              break;
+            }
 
-var styles = {
-  base: {
-    fontFamily: 'Menlo, monospace',
-    fontSize: '11px',
-    lineHeight: '14px',
-    cursor: 'default'
-  },
-  propertyNodesBox: {
-    paddingLeft: '12px'
-  },
-  property: {
-    paddingTop: '2px'
-  }
-};
+            entry = _step.value;
 
-// Wrapper around inspector
-var InspectorBox = function InspectorBox(_ref) {
-  var children = _ref.children;
-  return _react2.default.createElement(
-    'div',
-    { style: styles.base },
-    children
-  );
-};
+            if (!(Array.isArray(entry) && entry.length === 2)) {
+              _context.next = 20;
+              break;
+            }
 
-// a box with left padding containing the property nodes
-var PropertyNodesBox = function PropertyNodesBox(_ref2) {
-  var children = _ref2.children;
-  return _react2.default.createElement(
-    'div',
-    { style: styles.propertyNodesBox },
-    children
-  );
-};
+            _entry = (0, _slicedToArray3.default)(entry, 2);
+            k = _entry[0];
+            v = _entry[1];
+            _context.next = 18;
+            return {
+              name: k,
+              data: v
+            };
 
-var ObjectInspector = function (_Component) {
-  _inherits(ObjectInspector, _Component);
+          case 18:
+            _context.next = 22;
+            break;
 
-  function ObjectInspector(props) {
-    _classCallCheck(this, ObjectInspector);
+          case 20:
+            _context.next = 22;
+            return {
+              name: i.toString(),
+              data: entry
+            };
 
-    var _this = _possibleConstructorReturn(this, Object.getPrototypeOf(ObjectInspector).call(this, props));
+          case 22:
+            i++;
 
-    if (props.depth === 0) {
-      // root node
-      _this.state = {
-        expandedPaths: (0, _pathUtils.getPathsState)(props.showNonenumerable, props.expandLevel, props.expandPaths, props.data, props.name)
-      };
-    }
-    return _this;
-  }
+          case 23:
+            _iteratorNormalCompletion = true;
+            _context.next = 10;
+            break;
 
-  _createClass(ObjectInspector, [{
-    key: 'componentWillReceiveProps',
-    value: function componentWillReceiveProps(nextProps) {
-      if (this.props.depth === 0) {
-        this.setState({
-          expandedPaths: (0, _pathUtils.getPathsState)(nextProps.showNonenumerable, nextProps.expandLevel, nextProps.expandPaths, nextProps.data, nextProps.name, this.state.expandedPaths)
-        });
-      }
-    }
-  }, {
-    key: 'componentWillMount',
-    value: function componentWillMount() {
-      if (typeof _react2.default.initializeTouchEvents === 'function') {
-        _react2.default.initializeTouchEvents(true);
-      }
-    }
-  }, {
-    key: 'getExpanded',
-    value: function getExpanded(path) {
-      var expandedPaths = this.state.expandedPaths;
-      if (expandedPaths !== undefined && typeof expandedPaths[path] !== 'undefined') {
-        return expandedPaths[path];
-      }
-      return false;
-    }
-  }, {
-    key: 'setExpanded',
-    value: function setExpanded(path, expanded) {
-      var expandedPaths = this.state.expandedPaths;
-      expandedPaths[path] = expanded;
-      this.setState({ expandedPaths: expandedPaths });
-    }
-  }, {
-    key: 'handleClick',
-    value: function handleClick() {
-      // console.log(this.props.data);
-      var isExpandable = (0, _pathUtils.getIsExpandable)(this.props.showNonenumerable);
-      if (isExpandable(this.props.data)) {
-        if (this.props.depth > 0) {
-          this.props.setExpanded(this.props.path, !this.props.getExpanded(this.props.path));
-        } else {
-          this.setExpanded(this.props.path, !this.getExpanded(this.props.path));
-        }
-      }
-    }
-  }, {
-    key: 'render',
-    value: function render() {
-      var _props = this.props;
-      var data = _props.data;
-      var name = _props.name;
-      var _props2 = this.props;
-      var showNonenumerable = _props2.showNonenumerable;
-      var isNonenumerable = _props2.isNonenumerable;
+          case 26:
+            _context.next = 32;
+            break;
 
-      var isExpandable = (0, _pathUtils.getIsExpandable)(this.props.showNonenumerable);
+          case 28:
+            _context.prev = 28;
+            _context.t0 = _context['catch'](8);
+            _didIteratorError = true;
+            _iteratorError = _context.t0;
 
-      var _props3 = this.props;
-      var depth = _props3.depth;
-      var path = _props3.path;
+          case 32:
+            _context.prev = 32;
+            _context.prev = 33;
 
+            if (!_iteratorNormalCompletion && _iterator.return) {
+              _iterator.return();
+            }
 
-      var setExpanded = depth === 0 ? this.setExpanded.bind(this) : this.props.setExpanded;
-      var getExpanded = depth === 0 ? this.getExpanded.bind(this) : this.props.getExpanded;
+          case 35:
+            _context.prev = 35;
 
-      var expanded = getExpanded(path);
-      var expandGlyph = void 0;
-      if (isExpandable(data)) {
-        expandGlyph = _react2.default.createElement(_glyphs.ExpandGlyph, { expanded: expanded });
-      } else {
-        // root node doesn't need placeholder
-        if (depth === 0) {
-          expandGlyph = _react2.default.createElement('span', null);
-        }
-        // placeholder so preview is properly aligned
-        else {
-            expandGlyph = _react2.default.createElement(_glyphs.ExpandGlyph, { empty: true });
-          }
-      }
+            if (!_didIteratorError) {
+              _context.next = 38;
+              break;
+            }
 
-      // if current node is expanded render the property nodes
-      var propertyNodesBox = void 0;
-      if (expanded) {
-        (function () {
-          var propertyNodes = [];
+            throw _iteratorError;
 
-          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 }));
+          case 38:
+            return _context.finish(35);
+
+          case 39:
+            return _context.finish(32);
+
+          case 40:
+            _context.next = 81;
+            break;
+
+          case 42:
+            _iteratorNormalCompletion2 = true;
+            _didIteratorError2 = false;
+            _iteratorError2 = undefined;
+            _context.prev = 45;
+            _iterator2 = Object.getOwnPropertyNames(data)[Symbol.iterator]();
+
+          case 47:
+            if (_iteratorNormalCompletion2 = (_step2 = _iterator2.next()).done) {
+              _context.next = 64;
+              break;
             }
-            // 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 }));
-              }
-          });
+            propertyName = _step2.value;
 
-          // 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 }));
+            if (!data.propertyIsEnumerable(propertyName)) {
+              _context.next = 55;
+              break;
             }
 
-          propertyNodesBox = _react2.default.createElement(
-            PropertyNodesBox,
-            null,
-            propertyNodes
-          );
-        })();
-      }
+            propertyValue = data[propertyName];
+            _context.next = 53;
+            return {
+              name: propertyName,
+              data: propertyValue
+            };
 
-      return _react2.default.createElement(
-        InspectorBox,
-        null,
-        _react2.default.createElement(
-          'span',
-          { style: styles.property, onClick: this.handleClick.bind(this) },
-          expandGlyph,
-          _react2.default.createElement(_ObjectPreview2.default, { object: data, name: name, isNonenumerable: isNonenumerable })
-        ),
-        propertyNodesBox
-      );
-    }
-  }]);
+          case 53:
+            _context.next = 61;
+            break;
 
-  return ObjectInspector;
-}(_react.Component);
+          case 55:
+            if (!showNonenumerable) {
+              _context.next = 61;
+              break;
+            }
 
-exports.default = ObjectInspector;
+            // 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
+            // http://stackoverflow.com/questions/31921189/caller-and-arguments-are-restricted-function-properties-and-cannot-be-access
+            _propertyValue = void 0;
 
+            try {
+              _propertyValue = data[propertyName];
+            } catch (e) {}
 
-ObjectInspector.propTypes = {
-  name: _react.PropTypes.string,
-  data: _react.PropTypes.any,
+            if (!(_propertyValue !== undefined)) {
+              _context.next = 61;
+              break;
+            }
 
-  showNonenumerable: _react.PropTypes.bool, // switch to show non-enumerable properties
-  isNonenumerable: _react.PropTypes.bool, // am myself a non-enumerable property? for styling purposes
+            _context.next = 61;
+            return {
+              name: propertyName,
+              data: _propertyValue,
+              isNonenumerable: true
+            };
 
-  expandLevel: _react.PropTypes.number,
-  expandPaths: _react.PropTypes.oneOfType([_react.PropTypes.string, _react.PropTypes.array]),
+          case 61:
+            _iteratorNormalCompletion2 = true;
+            _context.next = 47;
+            break;
 
-  depth: _react.PropTypes.number.isRequired,
-  path: _react.PropTypes.string // path is dot separated property names to reach the current node
+          case 64:
+            _context.next = 70;
+            break;
+
+          case 66:
+            _context.prev = 66;
+            _context.t1 = _context['catch'](45);
+            _didIteratorError2 = true;
+            _iteratorError2 = _context.t1;
+
+          case 70:
+            _context.prev = 70;
+            _context.prev = 71;
+
+            if (!_iteratorNormalCompletion2 && _iterator2.return) {
+              _iterator2.return();
+            }
+
+          case 73:
+            _context.prev = 73;
+
+            if (!_didIteratorError2) {
+              _context.next = 76;
+              break;
+            }
+
+            throw _iteratorError2;
+
+          case 76:
+            return _context.finish(73);
+
+          case 77:
+            return _context.finish(70);
+
+          case 78:
+            if (!(showNonenumerable && data !== Object.prototype /* already added */)) {
+              _context.next = 81;
+              break;
+            }
+
+            _context.next = 81;
+            return {
+              name: '__proto__',
+              data: Object.getPrototypeOf(data),
+              isNonenumerable: true
+            };
+
+          case 81:
+          case 'end':
+            return _context.stop();
+        }
+      }
+    }, objectIterator, this, [[8, 28, 32, 40], [33,, 35, 39], [45, 66, 70, 78], [71,, 73, 77]]);
+  });
+
+  return objectIterator;
 };
 
+var nodeRenderer = function nodeRenderer(_ref) {
+  var depth = _ref.depth;
+  var name = _ref.name;
+  var data = _ref.data;
+  var isNonenumerable = _ref.isNonenumerable;
+  return depth === 0 ? _react2.default.createElement(_ObjectPreview2.default, { name: name, data: data }) : _react2.default.createElement(_ObjectLabel2.default, { name: name, data: data, isNonenumerable: isNonenumerable });
+};
+
+/**
+ * Tree-view for objects
+ */
+
+var ObjectInspector = function (_Component) {
+  (0, _inherits3.default)(ObjectInspector, _Component);
+
+  function ObjectInspector() {
+    (0, _classCallCheck3.default)(this, ObjectInspector);
+    return (0, _possibleConstructorReturn3.default)(this, Object.getPrototypeOf(ObjectInspector).apply(this, arguments));
+  }
+
+  (0, _createClass3.default)(ObjectInspector, [{
+    key: 'render',
+    value: function render() {
+      var showNonenumerable = this.props.showNonenumerable;
+
+
+      var dataIterator = createIterator(showNonenumerable);
+      return _react2.default.createElement(_TreeView2.default, (0, _extends3.default)({
+        nodeRenderer: nodeRenderer,
+        dataIterator: dataIterator
+      }, this.props));
+    }
+  }]);
+  return ObjectInspector;
+}(_react.Component);
+
 ObjectInspector.defaultProps = {
-  name: void 0,
-  data: undefined,
+  showNonenumerable: false
+};
+ObjectInspector.propTypes = {
+  /** An integer specifying to which level the tree should be initially expanded. */
+  expandLevel: _react.PropTypes.number,
+  /** An array containing all the paths that should be expanded when the component is initialized, or a string of just one path */
+  expandPaths: _react.PropTypes.oneOfType([_react.PropTypes.string, _react.PropTypes.array]),
 
-  showNonenumerable: false,
-  isNonenumerable: false,
+  name: _react.PropTypes.string,
+  /** Not isRequired because we also allow undefined value */
+  data: _react.PropTypes.any,
 
-  expandLevel: undefined,
-  expandPaths: undefined,
-
-  depth: 0,
-  path: _pathUtils.DEFAULT_ROOT_PATH
-};
+  /** Show non-enumerable properties */
+  showNonenumerable: _react.PropTypes.bool
+};
+exports.default = ObjectInspector;

lib/object/ObjectDescription.js

@@ -7,7 +7,6 @@ 'use strict';
 
-var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol ? "symbol" : typeof obj; };
+var _typeof2 = require('babel-runtime/helpers/typeof');
 
-// Styles
+var _typeof3 = _interopRequireDefault(_typeof2);
 
-
 var _react = require('react');
@@ -24,3 +23,5 @@
 /**
- * A short description of the object
+ * A short description of the object values.
+ * Can be used to render tree node in ObjectInspector
+ * or render objects in TableInspector.
  */
@@ -30,3 +31,3 @@ var ObjectDescription = function ObjectDescription(_ref) {
 
-  switch (typeof object === 'undefined' ? 'undefined' : _typeof(object)) {
+  switch (typeof object === 'undefined' ? 'undefined' : (0, _typeof3.default)(object)) {
     case 'number':
@@ -113,3 +114,3 @@ return _react2.default.createElement(
         { style: _objectStyles2.default.value.symbol },
-        'Symbol()'
+        object.toString()
       );
@@ -122,2 +123,3 @@ default:
 ObjectDescription.propTypes = {
+  /** the object to describe */
   object: _react2.default.PropTypes.any
@@ -124,0 +126,0 @@ };

lib/object/ObjectDescription.spec.js

@@ -134,3 +134,3 @@ 'use strict';
   it('should render a symbol', function () {
-    renderer.render(_react2.default.createElement(_ObjectDescription2.default, { object: Symbol("foo") }));
+    renderer.render(_react2.default.createElement(_ObjectDescription2.default, { object: Symbol() }));
     var tree = renderer.getRenderOutput();
@@ -140,2 +140,9 @@ (0, _expect2.default)(tree.type).toBe('span');
   });
+
+  it('should render a symbol', function () {
+    renderer.render(_react2.default.createElement(_ObjectDescription2.default, { object: Symbol("foo") }));
+    var tree = renderer.getRenderOutput();
+    (0, _expect2.default)(tree.type).toBe('span');
+    (0, _expect2.default)(tree.props.children).toEqual('Symbol(foo)');
+  });
 });

lib/object/ObjectName.js

@@ -17,2 +17,11 @@ 'use strict';
 
+/**
+ * A view for object property names.
+ *
+ * If the property name is enumerable (in Object.keys(object)),
+ * the property name will be rendered normally.
+ *
+ * If the property name is not enumerable (`Object.prototype.propertyIsEnumerable()`),
+ * the property name will be dimmed to show the difference.
+ */
 var ObjectName = function ObjectName(_ref) {
@@ -28,5 +37,9 @@ var name = _ref.name;
 
-// Styles
+ObjectName.propTypes = {
+  /** Property name */
+  name: _react.PropTypes.string,
+  /** Should property name be dimmed */
+  dimmed: _react.PropTypes.bool
+};
 
-
 exports.default = ObjectName;

lib/table-inspector/getHeaders.js

@@ -7,7 +7,13 @@ 'use strict';
 
-var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol ? "symbol" : typeof obj; };
+var _toConsumableArray2 = require('babel-runtime/helpers/toConsumableArray');
 
+var _toConsumableArray3 = _interopRequireDefault(_toConsumableArray2);
+
+var _typeof2 = require('babel-runtime/helpers/typeof');
+
+var _typeof3 = _interopRequireDefault(_typeof2);
+
 exports.default = getHeaders;
 
-function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } }
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -51,3 +57,3 @@ /*
 function getHeaders(data) {
-  if ((typeof data === 'undefined' ? 'undefined' : _typeof(data)) === 'object') {
+  if ((typeof data === 'undefined' ? 'undefined' : (0, _typeof3.default)(data)) === 'object') {
     var rowHeaders = void 0;
@@ -57,3 +63,3 @@ // is an array
       var nRows = data.length;
-      rowHeaders = [].concat(_toConsumableArray(Array(nRows).keys()));
+      rowHeaders = [].concat((0, _toConsumableArray3.default)(Array(nRows).keys()));
     }
@@ -69,3 +75,3 @@ // is an object
       var row = data[rowHeader];
-      if ((typeof row === 'undefined' ? 'undefined' : _typeof(row)) === 'object' && row !== null) {
+      if ((typeof row === 'undefined' ? 'undefined' : (0, _typeof3.default)(row)) === 'object' && row !== null) {
         /* O(nCols) Could optimize `includes` here */
@@ -72,0 +78,0 @@ var cols = Object.keys(row);

lib/table-inspector/TableInspector.js

@@ -7,8 +7,26 @@ 'use strict';
 
-var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol ? "symbol" : typeof obj; };
+var _typeof2 = require('babel-runtime/helpers/typeof');
 
-var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+var _typeof3 = _interopRequireDefault(_typeof2);
 
-var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+var _extends2 = require('babel-runtime/helpers/extends');
 
+var _extends3 = _interopRequireDefault(_extends2);
+
+var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');
+
+var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);
+
+var _createClass2 = require('babel-runtime/helpers/createClass');
+
+var _createClass3 = _interopRequireDefault(_createClass2);
+
+var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');
+
+var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);
+
+var _inherits2 = require('babel-runtime/helpers/inherits');
+
+var _inherits3 = _interopRequireDefault(_inherits2);
+
 var _react = require('react');
@@ -26,4 +44,2 @@
 
-var _glyphs = require('../styles/glyphs');
-
 var _unselectable = require('../styles/unselectable');
@@ -35,12 +51,2 @@
 
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-
-function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
-
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } /**
-                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                * Specs:
-                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                * https://developer.chrome.com/devtools/docs/commandline-api#tabledata-columns
-                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                * https://developer.mozilla.org/en-US/docs/Web/API/Console/table
-                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                */
-
 var styles = {
@@ -110,3 +116,7 @@ base: {
   }
-};
+}; /**
+    * Specs:
+    * https://developer.chrome.com/devtools/docs/commandline-api#tabledata-columns
+    * https://developer.mozilla.org/en-US/docs/Web/API/Console/table
+    */
 
@@ -131,3 +141,3 @@ var SortIconContainer = function SortIconContainer(props) {
 
-  var glyph = sortAscending ? _glyphs.upArrow : _glyphs.downArrow;
+  var glyph = sortAscending ? '▲' : '▼';
   return _react2.default.createElement(
@@ -151,8 +161,8 @@ 'div',
 var TH = function (_Component) {
-  _inherits(TH, _Component);
+  (0, _inherits3.default)(TH, _Component);
 
   function TH(props) {
-    _classCallCheck(this, TH);
+    (0, _classCallCheck3.default)(this, TH);
 
-    var _this = _possibleConstructorReturn(this, Object.getPrototypeOf(TH).call(this, props));
+    var _this = (0, _possibleConstructorReturn3.default)(this, Object.getPrototypeOf(TH).call(this, props));
 
@@ -163,3 +173,3 @@ _this.state = { hovered: false };
 
-  _createClass(TH, [{
+  (0, _createClass3.default)(TH, [{
     key: 'toggleHovered',
@@ -178,4 +188,4 @@ value: function toggleHovered(e) {
         'th',
-        _extends({}, this.props, {
-          style: _extends({}, styles.th, this.props.borderStyle, this.state.hovered ? this.props.hoveredStyle : {}),
+        (0, _extends3.default)({}, this.props, {
+          style: (0, _extends3.default)({}, styles.th, this.props.borderStyle, this.state.hovered ? this.props.hoveredStyle : {}),
           onMouseEnter: this.toggleHovered.bind(this),
@@ -201,3 +211,2 @@ onMouseLeave: this.toggleHovered.bind(this),
   }]);
-
   return TH;
@@ -327,3 +336,3 @@ }(_react.Component);
               'td',
-              { style: _extends({}, styles.td, styles.leftBorder.none) },
+              { style: (0, _extends3.default)({}, styles.td, styles.leftBorder.none) },
               row
@@ -343,10 +352,10 @@ ),
               //  undefined -> pass
-              if ((typeof rowData === 'undefined' ? 'undefined' : _typeof(rowData)) === 'object' && rowData !== null && rowData.hasOwnProperty(column)) {
+              if ((typeof rowData === 'undefined' ? 'undefined' : (0, _typeof3.default)(rowData)) === 'object' && rowData !== null && rowData.hasOwnProperty(column)) {
                 return _react2.default.createElement(
                   'td',
-                  { key: column, style: _extends({}, styles.td, styles.leftBorder.solid) },
+                  { key: column, style: (0, _extends3.default)({}, styles.td, styles.leftBorder.solid) },
                   _react2.default.createElement(_ObjectDescription2.default, { object: rowData[column] })
                 );
               } else {
-                return _react2.default.createElement('td', { key: column, style: _extends({}, styles.td, styles.leftBorder.solid) });
+                return _react2.default.createElement('td', { key: column, style: (0, _extends3.default)({}, styles.td, styles.leftBorder.solid) });
               }
@@ -361,11 +370,9 @@ })
 
-// import ObjectInspector from '../object-inspector/ObjectInspector'
-
 var TableInspector = function (_Component2) {
-  _inherits(TableInspector, _Component2);
+  (0, _inherits3.default)(TableInspector, _Component2);
 
   function TableInspector(props) {
-    _classCallCheck(this, TableInspector);
+    (0, _classCallCheck3.default)(this, TableInspector);
 
-    var _this2 = _possibleConstructorReturn(this, Object.getPrototypeOf(TableInspector).call(this, props));
+    var _this2 = (0, _possibleConstructorReturn3.default)(this, Object.getPrototypeOf(TableInspector).call(this, props));
 
@@ -381,3 +388,3 @@ _this2.state = {
 
-  _createClass(TableInspector, [{
+  (0, _createClass3.default)(TableInspector, [{
     key: 'handleIndexTHClick',
@@ -408,3 +415,3 @@ value: function handleIndexTHClick() {
       var columns = this.props.columns;
-      if ((typeof data === 'undefined' ? 'undefined' : _typeof(data)) !== 'object' || data === null) {
+      if ((typeof data === 'undefined' ? 'undefined' : (0, _typeof3.default)(data)) !== 'object' || data === null) {
         return _react2.default.createElement('div', null);
@@ -440,3 +447,3 @@ }
           // normalize rowData
-          if ((typeof rowData === 'undefined' ? 'undefined' : _typeof(rowData)) === 'object' && rowData !== null /*&& rowData.hasOwnProperty(sortColumn)*/) {
+          if ((typeof rowData === 'undefined' ? 'undefined' : (0, _typeof3.default)(rowData)) === 'object' && rowData !== null /*&& rowData.hasOwnProperty(sortColumn)*/) {
               var columnData = rowData[sortColumn];
@@ -461,4 +468,4 @@ return [columnData, index];
             var v2 = mapper(b);
-            var type1 = typeof v1 === 'undefined' ? 'undefined' : _typeof(v1);
-            var type2 = typeof v2 === 'undefined' ? 'undefined' : _typeof(v2);
+            var type1 = typeof v1 === 'undefined' ? 'undefined' : (0, _typeof3.default)(v1);
+            var type2 = typeof v2 === 'undefined' ? 'undefined' : (0, _typeof3.default)(v2);
             // use '<' operator to compare same type of values or compare type precedence order #
@@ -517,3 +524,2 @@ var lt = function lt(v1, v2) {
   }]);
-
   return TableInspector;
@@ -526,3 +532,9 @@ }(_react.Component);
 TableInspector.propTypes = {
+  /**
+   * the Javascript object you would like to inspect, either an array or an object
+   */
   data: _react2.default.PropTypes.oneOfType([_react2.default.PropTypes.array, _react2.default.PropTypes.object]),
+  /**
+   * An array of the names of the columns you'd like to display in the table
+   */
   columns: _react2.default.PropTypes.array
@@ -529,0 +541,0 @@ };

package.json

 {
   "name": "react-inspector",
-  "version": "1.0.0-beta.2",
+  "version": "1.0.0",
   "description": "Power of Browser DevTools inspectors right inside your React app",
@@ -52,2 +52,3 @@ "main": "lib/index.js",
     "babel-loader": "^6.0.0",
+    "babel-plugin-transform-runtime": "^6.9.0",
     "babel-preset-es2015": "^6.0.0",
@@ -69,2 +70,3 @@ "babel-preset-react": "^6.0.0",
     "react-hot-loader": "^1.2.7",
+    "rebug": "0.0.3",
     "rimraf": "^2.4.4",
@@ -77,3 +79,6 @@ "style-loader": "^0.13.0",
     "react": "^0.14.0 || ^15.0.0-0"
+  },
+  "dependencies": {
+    "is-dom": "^1.0.5"
   }
 }

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

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

82212

increased by16.57%

Number of package files

28

increased by21.74%

Lines of code

2184

increased by33.25%

Number of low quality alerts

0

decreased by-100%

Worsened metrics

Dependency count

2

increased by100%

Dev dependency count

26

increased by8.33%

Dependency changes

• + Addedis-dom@^1.0.5

• + Addedis-dom@1.1.0(transitive)

• + Addedis-object@1.0.2(transitive)

• + Addedis-window@1.0.2(transitive)