hoc-react-datgui - npm Package Compare versions

Comparing version 0.0.2 to 0.0.3

build/index.js

@@ -6,3 +6,3 @@ 'use strict';
 });
-exports.withDatGuiFromProps = exports.withDatGui = undefined;
+exports.withDatGuiFromDocgen = exports.withDatGuiFromProps = exports.withDatGui = undefined;
 
@@ -17,5 +17,10 @@ var _withDatGui = require('./withDatGui');
 
+var _withDatGuiFromDocgen = require('./withDatGuiFromDocgen');
+
+var _withDatGuiFromDocgen2 = _interopRequireDefault(_withDatGuiFromDocgen);
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 exports.withDatGui = _withDatGui2.default;
-exports.withDatGuiFromProps = _withDatGuiFromProps2.default;
+exports.withDatGuiFromProps = _withDatGuiFromProps2.default;
+exports.withDatGuiFromDocgen = _withDatGuiFromDocgen2.default;

build/withDatGui.js

@@ -17,2 +17,6 @@ 'use strict';
 
+var _isEmpty = require('lodash/isEmpty');
+
+var _isEmpty2 = _interopRequireDefault(_isEmpty);
+
 var _dat = require('dat.gui/build/dat.gui');
@@ -22,3 +26,3 @@
 
-var _utils = require('./utils');
+var _model = require('./mappers/model');
 
@@ -47,2 +51,6 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+      _this.hasData = function () {
+        return !(0, _isEmpty2.default)(_this.data);
+      };
+
       _this.addGuiData = function (prop) {
@@ -85,3 +93,3 @@ var _model$prop = model[prop],
             _this.data[prop] = value;
-            _this.setState(_defineProperty({}, prop, (0, _utils.mapDataToState)(value, prop, type)));
+            _this.setState(_defineProperty({}, prop, (0, _model.mapDataToState)(value, prop, type)));
           }
@@ -97,3 +105,3 @@ };
       _this.componentDidMount = function () {
-        if (_this.container) {
+        if (_this.container && _this.hasData()) {
           // create dat.gui and add it to the dom
@@ -110,2 +118,5 @@ _this.gui = new _dat2.default.GUI({ autoPlace: false });
       _this.render = function () {
+        if (!_this.hasData()) {
+          return _react2.default.createElement(WrappedComponent, _this.props);
+        }
         return _react2.default.createElement(
@@ -124,4 +135,4 @@ 'div',
 
-      _this.data = (0, _utils.mapModelToData)(model, props);
-      _this.state = (0, _utils.mapAllDataToState)(model, _this.data);
+      _this.data = (0, _model.mapModelToData)(model, _extends({}, WrappedComponent.defaultProps, props));
+      _this.state = (0, _model.mapAllDataToState)(model, _this.data);
       return _this;
@@ -131,3 +142,3 @@ }
     return _class;
-  }(_react.Component), _class.displayName = 'DatGui(' + (0, _utils.getDisplayName)(WrappedComponent) + ')', _temp;
+  }(_react.Component), _class.displayName = 'DatGui(' + (0, _model.getDisplayName)(WrappedComponent) + ')', _temp;
 };

build/withDatGuiFromProps.js

@@ -17,34 +17,14 @@ 'use strict';
 
-var _utils = require('./utils');
+var _props = require('./mappers/props');
 
+var _props2 = _interopRequireDefault(_props);
+
 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"); } }
-
-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; }
-
 exports.default = function (WrappedComponent) {
-  var _class, _temp;
-
-  return _temp = _class = function (_Component) {
-    _inherits(_class, _Component);
-
-    function _class(props) {
-      _classCallCheck(this, _class);
-
-      var _this = _possibleConstructorReturn(this, (_class.__proto__ || Object.getPrototypeOf(_class)).call(this, props));
-
-      _this.render = function () {
-        var ComponentWithDatGui = (0, _withDatGui2.default)(WrappedComponent, _this.model);
-        return _react2.default.createElement(ComponentWithDatGui, _this.props);
-      };
-
-      _this.model = (0, _utils.mapPropsToModel)(_extends({}, WrappedComponent.defaultProps, props));
-      return _this;
-    }
-
-    return _class;
-  }(_react.Component), _class.displayName = 'DatGuiFromProps(' + (0, _utils.getDisplayName)(WrappedComponent) + ')', _temp;
+  return function (props) {
+    var model = (0, _props2.default)(_extends({}, WrappedComponent.defaultProps, props));
+    var ComponentWithDatGui = (0, _withDatGui2.default)(WrappedComponent, model);
+    return _react2.default.createElement(ComponentWithDatGui, props);
+  };
 };

examples/package.json

@@ -37,3 +37,5 @@ {
   "dependencies": {
+    "babel-plugin-react-docgen": "^1.4.2",
     "hoc-react-datgui": "^0.0.1",
+    "prop-types": "^15.5.8",
     "react": "15.3.0",
@@ -48,2 +50,5 @@ "react-dom": "15.3.0"
       "stage-0"
+    ],
+    "plugins": [
+      "react-docgen"
     ]
@@ -68,2 +73,2 @@ },
   }
-}
+}

examples/src/components/App.jsx

 import React, { Component } from 'react'
-import { withDatGui, withDatGuiFromProps } from 'hoc-react-datgui'
+import { withDatGuiFromDocgen } from 'hoc-react-datgui'
 
@@ -9,3 +9,3 @@ import MyComponent from './MyComponent'
     super(props)
-    this.state = { name: 'Benjamin' }
+    this.state = { name: 'From model' }
   }
@@ -18,21 +18,20 @@
   render() {
-    const NewComp = withDatGui(MyComponent, {
-      name: { type: 'string', defaultValue: 'Benjamin' },
-      age: { type: 'slider', min: 1, max: 50, defaultValue: 30 },
-      gender: { type: 'enum', values: ['Male', 'Female'], defaultValue: 'Male' },
-      happy: { type: 'boolean' },
-      address: { type: 'object', defaultValue: { numero: 0, rue: 'rue du cours' } },
-      books: { type: 'array' },
-      onBoom: { type: 'function', defaultValue: () => alert('yes'), params: ['one', 2] },
-      color: { type: 'color' },
-    })
+    // const NewComp = withDatGui(MyComponent, {
+    //   name: { type: 'string', defaultValue: 'Benjamin' },
+    //   age: { type: 'slider', min: 1, max: 50, defaultValue: 30 },
+    //   gender: { type: 'enum', values: ['Male', 'Female'], defaultValue: 'Male' },
+    //   happy: { type: 'boolean' },
+    //   address: { type: 'object', defaultValue: { numero: 0, rue: 'rue du cours' } },
+    //   books: { type: 'array' },
+    //   onBoom: { type: 'function', defaultValue: () => alert('yes'), params: ['one', 2] },
+    //   color: { type: 'color' },
+    // })
 
-    const NewComp2 = withDatGuiFromProps(MyComponent)
+    const NewComp = withDatGuiFromDocgen(MyComponent)
 
+    console.log(MyComponent.__docgenInfo)
+
     return (
       <div>
-        <input type="text" onChange={this.handleChange} />
-        <NewComp {...this.state} />
-        <br /><br /><br /><br /><br /><br /><br /><br /><br />
-        <NewComp2 name="Benjamin" />
+        <NewComp />
       </div>
@@ -39,0 +38,0 @@ )

examples/src/components/MyComponent.jsx

@@ -24,3 +24,5 @@ import React, { PropTypes } from 'react'
   onBoom: () => alert('test'),
+  symbol: Symbol('testSymb'),
   color: '#FFAE23',
+  custom: 'matchme',
 }
@@ -37,4 +39,24 @@
   color: PropTypes.string,
+  symbol: PropTypes.symbol,
+  node: PropTypes.node,
+  element: PropTypes.element,
+  instanceOf: PropTypes.instanceOf(Object),
+  arrayOf: PropTypes.arrayOf(PropTypes.number),
+  objectOf: PropTypes.objectOf(PropTypes.number),
+  shape: PropTypes.shape({
+    color: PropTypes.string,
+    fontSize: PropTypes.number,
+  }),
+  any: PropTypes.any,
+  oneOfType: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.number,
+  ]),
+  custom: (props, propName) => {
+    if (!/matchme/.test(props[propName])) {
+      return new Error('error')
+    }
+  },
 }
 
 export default MyComponent

package.json

 {
   "name": "hoc-react-datgui",
-  "version": "0.0.2",
+  "version": "0.0.3",
   "description": "HOC adding a dat.GUI plugged to React.Component props",
@@ -66,2 +66,3 @@ "main": "build/index.js",
       "arrow-body-style": 0,
+      "no-underscore-dangle": 0,
       "import/no-named-as-default": 0,
@@ -68,0 +69,0 @@ "import/prefer-default-export": 0,

src/index.js

 import withDatGui from './withDatGui'
 import withDatGuiFromProps from './withDatGuiFromProps'
+import withDatGuiFromDocgen from './withDatGuiFromDocgen'
 
-export { withDatGui, withDatGuiFromProps }
+export { withDatGui, withDatGuiFromProps, withDatGuiFromDocgen }

src/withDatGui.jsx

 import React, { Component } from 'react'
 import forOwn from 'lodash/forOwn'
+import isEmpty from 'lodash/isEmpty'
 import dat from 'dat.gui/build/dat.gui'
 
-import { getDisplayName, mapModelToData, mapAllDataToState, mapDataToState } from './utils'
+import { getDisplayName, mapModelToData, mapAllDataToState, mapDataToState } from './mappers/model'
 
@@ -13,6 +14,8 @@ export default (WrappedComponent, model = {}) =>
       super(props)
-      this.data = mapModelToData(model, props)
+      this.data = mapModelToData(model, { ...WrappedComponent.defaultProps, ...props })
       this.state = mapAllDataToState(model, this.data)
     }
 
+    hasData = () => !isEmpty(this.data)
+
     addGuiData = (prop) => {
@@ -60,3 +63,3 @@ const { type, values, min, max, step } = model[prop]
     componentDidMount = () => {
-      if (this.container) {
+      if (this.container && this.hasData()) {
         // create dat.gui and add it to the dom
@@ -71,2 +74,5 @@ this.gui = new dat.GUI({ autoPlace: false })
     render = () => {
+      if (!this.hasData()) {
+        return <WrappedComponent {...this.props} />
+      }
       return (
@@ -73,0 +79,0 @@ <div>

src/withDatGuiFromProps.jsx

@@ -1,19 +0,11 @@
-import React, { Component } from 'react'
+import React from 'react'
 import withDatGui from './withDatGui'
-import { getDisplayName, mapPropsToModel } from './utils'
+import map from './mappers/props'
 
 export default (WrappedComponent) => {
-  return class extends Component {
-    static displayName = `DatGuiFromProps(${getDisplayName(WrappedComponent)})`;
-
-    constructor(props) {
-      super(props)
-      this.model = mapPropsToModel({ ...WrappedComponent.defaultProps, ...props })
-    }
-
-    render = () => {
-      const ComponentWithDatGui = withDatGui(WrappedComponent, this.model)
-      return <ComponentWithDatGui {...this.props} />
-    };
+  return (props) => {
+    const model = map({ ...WrappedComponent.defaultProps, ...props })
+    const ComponentWithDatGui = withDatGui(WrappedComponent, model)
+    return <ComponentWithDatGui {...props} />
   }
 }

New alerts

Uses eval

Supply chain risk

Package uses dynamic code execution (e.g., eval()), which is a dangerous practice. This can prevent the code from running in certain environments and increases the risk that the code may contain exploits or malicious behavior.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

527670

increased by1.79%

Number of package files

28

increased by40%

Lines of code

1580

increased by24.12%

Worsened metrics

Number of medium supply chain risk alerts

9

increased by800%

No dependency changes