react-inspector - npm Package Compare versions

Comparing version 2.0.0 to 2.1.0

HISTORY.md

@@ -0,1 +1,4 @@
+## 2.1.0 (06/28/2017)
+- [#33](https://github.com/xyc/react-inspector/issues/33) Add support for CDATA nodes ( thanks @iloahz )
+
 ## 2.0.0 (05/12/2017)
@@ -2,0 +5,0 @@ - [#25](https://github.com/xyc/react-inspector/issues/25)

lib/dom-inspector/DOMNodePreview.js

@@ -130,2 +130,8 @@ 'use strict';
       );
+    case Node.CDATA_SECTION_NODE:
+      return _react2.default.createElement(
+        'span',
+        null,
+        '<![CDATA[' + data.textContent + ']]>'
+      );
     case Node.COMMENT_NODE:
@@ -132,0 +138,0 @@ return _react2.default.createElement(

lib/index.js

@@ -6,3 +6,3 @@ 'use strict';
 });
-exports.Inspector = exports.DOMInspector = exports.TableInspector = exports.ObjectInspector = exports.chromeDark = exports.chromeLight = undefined;
+exports.Inspector = exports.ObjectName = exports.ObjectValue = exports.ObjectRootLabel = exports.ObjectLabel = exports.DOMInspector = exports.TableInspector = exports.ObjectInspector = exports.chromeDark = exports.chromeLight = undefined;
 
@@ -44,2 +44,18 @@ var _extends2 = require('babel-runtime/helpers/extends');
 
+var _ObjectLabel2 = require('./object-inspector/ObjectLabel');
+
+var _ObjectLabel3 = _interopRequireDefault(_ObjectLabel2);
+
+var _ObjectRootLabel2 = require('./object-inspector/ObjectRootLabel');
+
+var _ObjectRootLabel3 = _interopRequireDefault(_ObjectRootLabel2);
+
+var _ObjectValue2 = require('./object/ObjectValue');
+
+var _ObjectValue3 = _interopRequireDefault(_ObjectValue2);
+
+var _ObjectName2 = require('./object/ObjectName');
+
+var _ObjectName3 = _interopRequireDefault(_ObjectName2);
+
 var _react = require('react');
@@ -62,7 +78,7 @@
 exports.DOMInspector = _DOMInspector3.default;
+exports.ObjectLabel = _ObjectLabel3.default;
+exports.ObjectRootLabel = _ObjectRootLabel3.default;
+exports.ObjectValue = _ObjectValue3.default;
+exports.ObjectName = _ObjectName3.default;
 
-// NOTE: ObjectValue and ObjectPreview can be used as building blocks, but currently their styles are not complete
-// export ObjectValue from './object/ObjectValue'
-// export ObjectPreview from './object/ObjectPreview'
-
 // Wrapping the inspectors
@@ -69,0 +85,0 @@

lib/object-inspector/ObjectInspector.js

@@ -179,3 +179,5 @@ 'use strict';
 
-            if (typeof sortObjectKeys !== 'undefined') {
+            if (sortObjectKeys === true) {
+              keys.sort();
+            } else if (typeof sortObjectKeys === 'function') {
               keys.sort(sortObjectKeys);
@@ -306,3 +308,3 @@ }
 
-var nodeRenderer = function nodeRenderer(_ref) {
+var defaultNodeRenderer = function defaultNodeRenderer(_ref) {
   var depth = _ref.depth,
@@ -333,10 +335,13 @@ name = _ref.name,
           sortObjectKeys = _props.sortObjectKeys,
-          rest = (0, _objectWithoutProperties3.default)(_props, ['showNonenumerable', 'sortObjectKeys']);
+          nodeRenderer = _props.nodeRenderer,
+          rest = (0, _objectWithoutProperties3.default)(_props, ['showNonenumerable', 'sortObjectKeys', 'nodeRenderer']);
 
       var dataIterator = createIterator(showNonenumerable, sortObjectKeys);
 
+      var renderer = nodeRenderer ? nodeRenderer : defaultNodeRenderer;
+
       return _react2.default.createElement(
         _ThemeProvider2.default,
         { theme: this.props.theme },
-        _react2.default.createElement(_TreeView2.default, (0, _extends3.default)({ nodeRenderer: nodeRenderer, dataIterator: dataIterator }, rest))
+        _react2.default.createElement(_TreeView2.default, (0, _extends3.default)({ nodeRenderer: renderer, dataIterator: dataIterator }, rest))
       );
@@ -369,4 +374,7 @@ }
   /** Sort object keys with optional compare function. */
-  sortObjectKeys: _propTypes2.default.oneOfType([_propTypes2.default.bool, _propTypes2.default.func])
+  sortObjectKeys: _propTypes2.default.oneOfType([_propTypes2.default.bool, _propTypes2.default.func]),
+
+  /** Provide a custom nodeRenderer */
+  nodeRenderer: _propTypes2.default.func
 };
 exports.default = ObjectInspector;

lib/object/ObjectName.js

@@ -36,9 +36,10 @@ 'use strict';
   var name = _ref.name,
-      dimmed = _ref.dimmed;
+      dimmed = _ref.dimmed,
+      styles = _ref.styles;
   var theme = _ref2.theme;
 
-  var styles = (0, _createStyles2.default)('ObjectName', theme);
+  var themeStyles = (0, _createStyles2.default)('ObjectName', theme);
   return _react2.default.createElement(
     'span',
-    { style: (0, _extends3.default)({}, styles.base, dimmed && styles.dimmed) },
+    { style: (0, _extends3.default)({}, themeStyles.base, dimmed && styles.dimmed, styles) },
     name
@@ -45,0 +46,0 @@ );

lib/object/ObjectValue.js

@@ -11,2 +11,6 @@ 'use strict';
 
+var _extends2 = require('babel-runtime/helpers/extends');
+
+var _extends3 = _interopRequireDefault(_extends2);
+
 var _react = require('react');
@@ -32,7 +36,12 @@
 var ObjectValue = function ObjectValue(_ref, _ref2) {
-  var object = _ref.object;
+  var object = _ref.object,
+      styles = _ref.styles;
   var theme = _ref2.theme;
 
-  var styles = (0, _createStyles2.default)('ObjectValue', theme);
+  var themeStyles = (0, _createStyles2.default)('ObjectValue', theme);
 
+  var mkStyle = function mkStyle(key) {
+    return (0, _extends3.default)({}, themeStyles[key], styles);
+  };
+
   switch (typeof object === 'undefined' ? 'undefined' : (0, _typeof3.default)(object)) {
@@ -42,3 +51,3 @@ case 'number':
         'span',
-        { style: styles.objectValueNumber },
+        { style: mkStyle('objectValueNumber') },
         object
@@ -49,3 +58,3 @@ );
         'span',
-        { style: styles.objectValueString },
+        { style: mkStyle('objectValueString') },
         '"',
@@ -58,3 +67,3 @@ object,
         'span',
-        { style: styles.objectValueBoolean },
+        { style: mkStyle('objectValueBoolean') },
         String(object)
@@ -65,3 +74,3 @@ );
         'span',
-        { style: styles.objectValueUndefined },
+        { style: mkStyle('objectValueUndefined') },
         'undefined'
@@ -73,3 +82,3 @@ );
           'span',
-          { style: styles.objectValueNull },
+          { style: mkStyle('objectValueNull') },
           'null'
@@ -88,3 +97,3 @@ );
           'span',
-          { style: styles.objectValueRegExp },
+          { style: mkStyle('objectValueRegExp') },
           object.toString()
@@ -111,3 +120,3 @@ );
           'span',
-          { style: styles.objectValueFunctionKeyword },
+          { style: mkStyle('objectValueFunctionKeyword') },
           'function'
@@ -117,3 +126,3 @@ ),
           'span',
-          { style: styles.objectValueFunctionName },
+          { style: mkStyle('objectValueFunctionName') },
           '\xA0',
@@ -127,3 +136,3 @@ object.name,
         'span',
-        { style: styles.objectValueSymbol },
+        { style: mkStyle('objectValueSymbol') },
         object.toString()
@@ -130,0 +139,0 @@ );

lib/object/ObjectValue.spec.js

@@ -143,2 +143,10 @@ 'use strict';
   });
+
+  it('accepts and applies style from `styles` prop', function () {
+    // Custom `styles` prop gets applied to the element
+    var style = { color: 'blue' };
+    renderer.render(_react2.default.createElement(_ObjectValue2.default, { styles: style, object: '' }));
+    var tree = renderer.getRenderOutput();
+    (0, _expect2.default)(tree.props.style.color).toEqual('blue');
+  });
 });

package.json

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

README.md

@@ -55,2 +55,16 @@ # react-inspector
 
+#### `nodeRenderer: PropTypes.func`: Use a custom `nodeRenderer` to render the object properties (optional)
+- Instead of using the default `nodeRenderer`, you can provide a
+  custom function for rendering object properties. The _default_
+  nodeRender looks like this:
+  ```
+  import { ObjectRootLabel } from 'react-inspector'
+  import { ObjectLabel } from 'react-inspector'
+
+  const defaultNodeRenderer = ({ depth, name, data, isNonenumerable }) =>
+    depth === 0
+      ? <ObjectRootLabel name={name} data={data} />
+      : <ObjectLabel name={name} data={data} isNonenumerable={isNonenumerable} />;
+  ```
+
 ### &lt;TableInspector />
@@ -57,0 +71,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

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

113075

increased by5.11%

Number of package files

39

increased by2.63%

Lines of code

2738

increased by3.59%

Number of lines in readme file

148

increased by10.45%

Number of medium supply chain risk alerts

0

decreased by-100%

No dependency changes