react-attach-handler - npm Package Compare versions

Comparing version 0.2.0 to 0.2.1

build/react-attach-handler.js

@@ -102,3 +102,3 @@ (function webpackUniversalModuleDefinition(root, factory) {
 
-eval("var _typeof2 = typeof Symbol === \"function\" && typeof Symbol.iterator === \"symbol\" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === \"function\" && obj.constructor === Symbol && obj !== Symbol.prototype ? \"symbol\" : typeof obj; };\n\nObject.defineProperty(exports, \"__esModule\", {\n    value: true\n});\n\nvar _typeof = typeof Symbol === \"function\" && _typeof2(Symbol.iterator) === \"symbol\" ? function (obj) {\n    return typeof obj === \"undefined\" ? \"undefined\" : _typeof2(obj);\n} : function (obj) {\n    return obj && typeof Symbol === \"function\" && obj.constructor === Symbol && obj !== Symbol.prototype ? \"symbol\" : typeof obj === \"undefined\" ? \"undefined\" : _typeof2(obj);\n};\n\nvar _propTypes = __webpack_require__(/*! prop-types */ \"./node_modules/prop-types/index.js\");\n\nvar _propTypes2 = _interopRequireDefault(_propTypes);\n\nvar _react = __webpack_require__(/*! react */ \"react\");\n\nvar _react2 = _interopRequireDefault(_react);\n\nvar _reactAddonsShallowCompare = __webpack_require__(/*! react-addons-shallow-compare */ \"./node_modules/react-addons-shallow-compare/index.js\");\n\nvar _reactAddonsShallowCompare2 = _interopRequireDefault(_reactAddonsShallowCompare);\n\nvar _helpers = __webpack_require__(/*! ./helpers */ \"./lib/helpers.js\");\n\nvar helpers = _interopRequireWildcard(_helpers);\n\nfunction _interopRequireWildcard(obj) {\n    if (obj && obj.__esModule) {\n        return obj;\n    } else {\n        var newObj = {};if (obj != null) {\n            for (var key in obj) {\n                if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key];\n            }\n        }newObj.default = obj;return newObj;\n    }\n}\n\nfunction _interopRequireDefault(obj) {\n    return obj && obj.__esModule ? obj : { default: obj };\n}\n\nfunction _classCallCheck(instance, Constructor) {\n    if (!(instance instanceof Constructor)) {\n        throw new TypeError(\"Cannot call a class as a function\");\n    }\n}\n\nfunction _possibleConstructorReturn(self, call) {\n    if (!self) {\n        throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\");\n    }return call && ((typeof call === \"undefined\" ? \"undefined\" : _typeof2(call)) === \"object\" || typeof call === \"function\") ? call : self;\n}\n\nfunction _inherits(subClass, superClass) {\n    if (typeof superClass !== \"function\" && superClass !== null) {\n        throw new TypeError(\"Super expression must either be null or a function, not \" + (typeof superClass === \"undefined\" ? \"undefined\" : _typeof2(superClass)));\n    }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;\n} //eslint-disable-line no-unused-vars\n\n\nvar defaultEventOptions = {\n    capture: false,\n    passive: false,\n    debounce: false,\n    throttle: false,\n    debounceDelay: 250,\n    throttleDelay: 250\n};\n\nvar addEventListener = helpers.addEventListener,\n    removeEventListener = helpers.removeEventListener,\n    passiveOptions = helpers.passiveOptions;\n\nvar mergeOptionsWithDefault = function mergeOptionsWithDefault(obj) {\n    return Object.assign({}, defaultEventOptions, obj);\n};\n\nvar getEventsArgs = function getEventsArgs(eventName, cb, opts) {\n    var args = [eventName, cb];\n    args.push(passiveOptions ? opts : opts.capture);\n    return args;\n};\n\n// Inspired from http://davidwalsh.name/javascript-debounce-function\nvar debounceFn = function debounceFn(cb, delay) {\n    var timeout = void 0;\n\n    return function () {\n        var context = this;\n        var args = arguments;\n\n        clearTimeout(timeout);\n        timeout = setTimeout(function () {\n            cb.apply(context, args);\n        }, delay);\n    };\n};\n// Inspired from underscore throttle https://github.com/jashkenas/underscore/blob/master/underscore.js\nvar throttleFn = function throttleFn(cb, delay) {\n    var options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};\n\n    var context = void 0;\n    var args = void 0;\n    var result = void 0;\n\n    var timeout = null;\n    var previous = 0;\n\n    var _options$leading = options.leading,\n        leading = _options$leading === undefined ? true : _options$leading,\n        _options$trailing = options.trailing,\n        trailing = _options$trailing === undefined ? false : _options$trailing;\n\n    var later = function later() {\n        previous = !leading ? 0 : Date.now();\n        timeout = null;\n        result = cb.apply(context, args);\n        if (!timeout) {\n            context = args = null;\n        }\n    };\n\n    return function () {\n        context = this;\n        args = arguments;\n\n        var now = Date.now();\n        if (!previous && !leading) {\n            previous = now;\n        }\n\n        var remaining = wait - (now - previous);\n\n        if (remaining <= 0 || remaining > wait) {\n            if (timeout) {\n                clearTimeout(timeout);\n                timeout = null;\n            }\n\n            previous = now;\n            result = cb.apply(context, args);\n\n            if (!timeout) {\n                context = args = null;\n            }\n        } else if (!timeout && trailing) {\n            timeout = setTimeout(later, remaining);\n        }\n        return result;\n    };\n};\n\nvar switchOn = function switchOn(target, eventName, cb) {\n    var opts = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : {};\n\n    // Only supports modern browsers Sorry IE10- users\n    if (addEventListener) {\n        var _opts$debounce = opts.debounce,\n            debounce = _opts$debounce === undefined ? false : _opts$debounce,\n            _opts$throttle = opts.throttle,\n            throttle = _opts$throttle === undefined ? false : _opts$throttle,\n            debounceDelay = opts.debounceDelay,\n            throttleDelay = opts.throttleDelay;\n\n        var handler = cb;\n        if (debounce) {\n            handler = debounceFn(cb, debounceDelay);\n        } else if (throttle) {\n            handler = throttleFn(cb, throttleDelay);\n        }\n\n        // http://stackoverflow.com/questions/2891096/addeventlistener-using-apply\n        target.addEventListener.apply(target, getEventsArgs(eventName, handler, opts));\n    }\n};\n\nvar switchOff = function switchOff(target, eventName, cb) {\n    var opts = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : {};\n\n    // Only supports modern browsers Sorry IE10- users\n    if (removeEventListener) {\n        // http://stackoverflow.com/questions/2891096/addeventlistener-using-apply\n        target.removeEventListener.apply(target, getEventsArgs(eventName, cb, opts));\n    }\n};\n\nvar AttachHandler = function (_Component) {\n    _inherits(AttachHandler, _Component);\n\n    function AttachHandler() {\n        var _ref;\n\n        var _temp, _this, _ret;\n\n        _classCallCheck(this, AttachHandler);\n\n        for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {\n            args[_key] = arguments[_key];\n        }\n\n        return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = AttachHandler.__proto__ || Object.getPrototypeOf(AttachHandler)).call.apply(_ref, [this].concat(args))), _this), _this.state = {}, _this.componentDidMount = function () {\n            _this.addEventListener();\n        }, _this.shouldComponentUpdate = function (nextProps) {\n            return (0, _reactAddonsShallowCompare2.default)({\n                props: _this.props,\n                state: _this.state\n            }, nextProps, _this.state);\n        }, _this.componentWillUpdate = function () {\n            _this.addEventListener();\n        }, _this.componentDidUpdate = function () {\n            _this.addEventListener();\n        }, _this.componentWillUnmount = function () {\n            _this.removeEventListener();\n        }, _this.addEventListener = function () {\n            _this.setListeners(switchOn);\n        }, _this.removeEventListener = function () {\n            _this.setListeners(switchOff);\n        }, _this.setListeners = function (switchOnOff) {\n            var _this$props = _this.props,\n                target = _this$props.target,\n                events = _this$props.events;\n\n            if (target) {\n                var element = void 0;\n\n                if (typeof target === 'string') {\n                    element = window[target];\n                }\n\n                Object.keys(events).forEach(function (event) {\n                    var value = events[event];\n                    var valueType = typeof value === 'undefined' ? 'undefined' : _typeof(value);\n                    var isObject = valueType === 'object';\n                    var isFunction = valueType === 'function';\n\n                    // This check is to make sure we have the right typeof value\n                    if (!isObject && !isFunction) {\n                        return;\n                    }\n                    var eventHandler = void 0,\n                        options = void 0;\n\n                    if (isObject) {\n                        var _value$handler = value.handler,\n                            handler = _value$handler === undefined ? null : _value$handler,\n                            _value$opts = value.opts,\n                            opts = _value$opts === undefined ? {} : _value$opts;\n\n                        if (handler) {\n                            eventHandler = handler;\n                        }\n                        if (opts) {\n                            options = mergeOptionsWithDefault(opts);\n                        }\n                    } else {\n                        eventHandler = value;\n                    }\n\n                    if (eventHandler) {\n                        switchOnOff(element, event, eventHandler, options);\n                    }\n                });\n            }\n        }, _this.render = function () {\n            return _this.props.children || null;\n        }, _temp), _possibleConstructorReturn(_this, _ret);\n    }\n\n    return AttachHandler;\n}(_react.Component);\n\nAttachHandler.propTypes = {\n    // The Component will take one child\n    children: _propTypes2.default.element,\n    // DOM target to listen to\n    target: _propTypes2.default.oneOfType([_propTypes2.default.object, _propTypes2.default.string]).isRequired,\n    events: _propTypes2.default.oneOfType([_propTypes2.default.object, _propTypes2.default.func]).isRequired\n};\nexports.default = AttachHandler;\n\n//# sourceURL=webpack://AttachHandler/./lib/AttachHandler.js?");
+eval("var _typeof2 = typeof Symbol === \"function\" && typeof Symbol.iterator === \"symbol\" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === \"function\" && obj.constructor === Symbol && obj !== Symbol.prototype ? \"symbol\" : typeof obj; };\n\nObject.defineProperty(exports, \"__esModule\", {\n    value: true\n});\n\nvar _typeof = typeof Symbol === \"function\" && _typeof2(Symbol.iterator) === \"symbol\" ? function (obj) {\n    return typeof obj === \"undefined\" ? \"undefined\" : _typeof2(obj);\n} : function (obj) {\n    return obj && typeof Symbol === \"function\" && obj.constructor === Symbol && obj !== Symbol.prototype ? \"symbol\" : typeof obj === \"undefined\" ? \"undefined\" : _typeof2(obj);\n};\n\nvar _propTypes = __webpack_require__(/*! prop-types */ \"./node_modules/prop-types/index.js\");\n\nvar _propTypes2 = _interopRequireDefault(_propTypes);\n\nvar _react = __webpack_require__(/*! react */ \"react\");\n\nvar _react2 = _interopRequireDefault(_react);\n\nvar _reactAddonsShallowCompare = __webpack_require__(/*! react-addons-shallow-compare */ \"./node_modules/react-addons-shallow-compare/index.js\");\n\nvar _reactAddonsShallowCompare2 = _interopRequireDefault(_reactAddonsShallowCompare);\n\nvar _helpers = __webpack_require__(/*! ./helpers */ \"./lib/helpers.js\");\n\nvar helpers = _interopRequireWildcard(_helpers);\n\nfunction _interopRequireWildcard(obj) {\n    if (obj && obj.__esModule) {\n        return obj;\n    } else {\n        var newObj = {};if (obj != null) {\n            for (var key in obj) {\n                if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key];\n            }\n        }newObj.default = obj;return newObj;\n    }\n}\n\nfunction _interopRequireDefault(obj) {\n    return obj && obj.__esModule ? obj : { default: obj };\n}\n\nfunction _classCallCheck(instance, Constructor) {\n    if (!(instance instanceof Constructor)) {\n        throw new TypeError(\"Cannot call a class as a function\");\n    }\n}\n\nfunction _possibleConstructorReturn(self, call) {\n    if (!self) {\n        throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\");\n    }return call && ((typeof call === \"undefined\" ? \"undefined\" : _typeof2(call)) === \"object\" || typeof call === \"function\") ? call : self;\n}\n\nfunction _inherits(subClass, superClass) {\n    if (typeof superClass !== \"function\" && superClass !== null) {\n        throw new TypeError(\"Super expression must either be null or a function, not \" + (typeof superClass === \"undefined\" ? \"undefined\" : _typeof2(superClass)));\n    }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;\n} //eslint-disable-line no-unused-vars\n\n\nvar defaultEventOptions = {\n    capture: false,\n    passive: false,\n    debounce: false,\n    throttle: false,\n    debounceDelay: 250,\n    throttleDelay: 250\n};\n\nvar addEventListener = helpers.addEventListener,\n    removeEventListener = helpers.removeEventListener,\n    passiveOptions = helpers.passiveOptions,\n    canUseDom = helpers.canUseDom;\n\nvar mergeOptionsWithDefault = function mergeOptionsWithDefault(obj) {\n    return Object.assign({}, defaultEventOptions, obj);\n};\n\nvar getEventsArgs = function getEventsArgs(eventName, cb, opts) {\n    var args = [eventName, cb];\n    args.push(passiveOptions ? opts : opts.capture);\n    return args;\n};\n\n// Inspired from http://davidwalsh.name/javascript-debounce-function\nvar debounceFn = function debounceFn(cb, delay) {\n    var timeout = void 0;\n\n    return function () {\n        var context = this;\n        var args = arguments;\n\n        clearTimeout(timeout);\n        timeout = setTimeout(function () {\n            cb.apply(context, args);\n        }, delay);\n    };\n};\n// Inspired from underscore throttle https://github.com/jashkenas/underscore/blob/master/underscore.js\nvar throttleFn = function throttleFn(cb, delay) {\n    var options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};\n\n    var context = void 0;\n    var args = void 0;\n    var result = void 0;\n\n    var timeout = null;\n    var previous = 0;\n\n    var _options$leading = options.leading,\n        leading = _options$leading === undefined ? true : _options$leading,\n        _options$trailing = options.trailing,\n        trailing = _options$trailing === undefined ? false : _options$trailing;\n\n    var later = function later() {\n        previous = !leading ? 0 : Date.now();\n        timeout = null;\n        result = cb.apply(context, args);\n        if (!timeout) {\n            context = args = null;\n        }\n    };\n\n    return function () {\n        context = this;\n        args = arguments;\n\n        var now = Date.now();\n        if (!previous && !leading) {\n            previous = now;\n        }\n\n        var remaining = wait - (now - previous);\n\n        if (remaining <= 0 || remaining > wait) {\n            if (timeout) {\n                clearTimeout(timeout);\n                timeout = null;\n            }\n\n            previous = now;\n            result = cb.apply(context, args);\n\n            if (!timeout) {\n                context = args = null;\n            }\n        } else if (!timeout && trailing) {\n            timeout = setTimeout(later, remaining);\n        }\n        return result;\n    };\n};\n\nvar switchOn = function switchOn(target, eventName, cb) {\n    var opts = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : {};\n\n    // Only supports modern browsers Sorry IE10- users\n    if (addEventListener) {\n        var _opts$debounce = opts.debounce,\n            debounce = _opts$debounce === undefined ? false : _opts$debounce,\n            _opts$throttle = opts.throttle,\n            throttle = _opts$throttle === undefined ? false : _opts$throttle,\n            debounceDelay = opts.debounceDelay,\n            throttleDelay = opts.throttleDelay;\n\n        var handler = cb;\n        if (debounce) {\n            handler = debounceFn(cb, debounceDelay);\n        } else if (throttle) {\n            handler = throttleFn(cb, throttleDelay);\n        }\n\n        // http://stackoverflow.com/questions/2891096/addeventlistener-using-apply\n        target.addEventListener.apply(target, getEventsArgs(eventName, handler, opts));\n    }\n};\n\nvar switchOff = function switchOff(target, eventName, cb) {\n    var opts = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : {};\n\n    // Only supports modern browsers Sorry IE10- users\n    if (removeEventListener) {\n        // http://stackoverflow.com/questions/2891096/addeventlistener-using-apply\n        target.removeEventListener.apply(target, getEventsArgs(eventName, cb, opts));\n    }\n};\n\nvar AttachHandler = function (_Component) {\n    _inherits(AttachHandler, _Component);\n\n    function AttachHandler() {\n        var _ref;\n\n        var _temp, _this, _ret;\n\n        _classCallCheck(this, AttachHandler);\n\n        for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {\n            args[_key] = arguments[_key];\n        }\n\n        return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = AttachHandler.__proto__ || Object.getPrototypeOf(AttachHandler)).call.apply(_ref, [this].concat(args))), _this), _this.state = {}, _this.componentDidMount = function () {\n            _this.addEventListener();\n        }, _this.shouldComponentUpdate = function (nextProps) {\n            return (0, _reactAddonsShallowCompare2.default)({\n                props: _this.props,\n                state: _this.state\n            }, nextProps, _this.state);\n        }, _this.componentWillUpdate = function () {\n            canUseDom && _this.addEventListener();\n        }, _this.componentDidUpdate = function () {\n            canUseDom && _this.addEventListener();\n        }, _this.componentWillUnmount = function () {\n            _this.removeEventListener();\n        }, _this.addEventListener = function () {\n            _this.setListeners(switchOn);\n        }, _this.removeEventListener = function () {\n            _this.setListeners(switchOff);\n        }, _this.setListeners = function (switchOnOff) {\n            var _this$props = _this.props,\n                target = _this$props.target,\n                events = _this$props.events;\n\n            if (target) {\n                var element = void 0;\n\n                if (typeof target === 'string') {\n                    element = window[target];\n                }\n\n                Object.keys(events).forEach(function (event) {\n                    var value = events[event];\n                    var valueType = typeof value === 'undefined' ? 'undefined' : _typeof(value);\n                    var isObject = valueType === 'object';\n                    var isFunction = valueType === 'function';\n\n                    // This check is to make sure we have the right typeof value\n                    if (!isObject && !isFunction) {\n                        return;\n                    }\n                    var eventHandler = void 0,\n                        options = void 0;\n\n                    if (isObject) {\n                        var _value$handler = value.handler,\n                            handler = _value$handler === undefined ? null : _value$handler,\n                            _value$opts = value.opts,\n                            opts = _value$opts === undefined ? {} : _value$opts;\n\n                        if (handler) {\n                            eventHandler = handler;\n                        }\n                        if (opts) {\n                            options = mergeOptionsWithDefault(opts);\n                        }\n                    } else {\n                        eventHandler = value;\n                    }\n\n                    if (eventHandler) {\n                        switchOnOff(element, event, eventHandler, options);\n                    }\n                });\n            }\n        }, _this.render = function () {\n            return _this.props.children || null;\n        }, _temp), _possibleConstructorReturn(_this, _ret);\n    }\n\n    return AttachHandler;\n}(_react.Component);\n\nAttachHandler.propTypes = {\n    // The Component will take one child\n    children: _propTypes2.default.element,\n    // DOM target to listen to\n    target: _propTypes2.default.oneOfType([_propTypes2.default.object, _propTypes2.default.string]).isRequired,\n    events: _propTypes2.default.oneOfType([_propTypes2.default.object, _propTypes2.default.func]).isRequired\n};\nexports.default = AttachHandler;\n\n//# sourceURL=webpack://AttachHandler/./lib/AttachHandler.js?");
 
@@ -105,0 +105,0 @@ /***/ }),

lib/AttachHandler.js

@@ -45,3 +45,4 @@ Object.defineProperty(exports, "__esModule", {
     removeEventListener = helpers.removeEventListener,
-    passiveOptions = helpers.passiveOptions;
+    passiveOptions = helpers.passiveOptions,
+    canUseDom = helpers.canUseDom;
 
@@ -186,5 +187,5 @@
         }, _this.componentWillUpdate = function () {
-            _this.addEventListener();
+            canUseDom && _this.addEventListener();
         }, _this.componentDidUpdate = function () {
-            _this.addEventListener();
+            canUseDom && _this.addEventListener();
         }, _this.componentWillUnmount = function () {
@@ -191,0 +192,0 @@ _this.removeEventListener();

package.json

 {
   "name": "react-attach-handler",
   "moduleName": "AttachHandler",
-  "version": "0.2.0",
+  "version": "0.2.1",
   "description": "React attach event handlers to targets.",
-  "main": "build/react-attach-handler",
-  "browser": "build/react-attach-handler",
+  "main": "lib/AttachHandler.js",
+  "browser": "lib/AttachHandler.js",
   "devServer": {
@@ -116,4 +116,5 @@ "host": "0.0.0.0",
     "prop-types": "^15.6.1",
-    "react-addons-shallow-compare": "^15.4.1"
+    "react-addons-shallow-compare": "^15.4.1",
+    "react-attach-handler": "0.2.0"
   }
 }

src/AttachHandler.jsx

@@ -15,3 +15,3 @@ import PropTypes from 'prop-types'; //eslint-disable-line no-unused-vars
 
-const {addEventListener, removeEventListener, passiveOptions} = helpers;
+const {addEventListener, removeEventListener, passiveOptions, canUseDom} = helpers;
 
@@ -158,7 +158,7 @@ const mergeOptionsWithDefault = (obj) => {
     componentWillUpdate = () => {
-        this.addEventListener();
+        canUseDom && this.addEventListener();
     };
 
     componentDidUpdate = () => {
-        this.addEventListener();
+        canUseDom && this.addEventListener();
     };
@@ -165,0 +165,0 @@

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

Environment variable access

Supply chain risk

Package accesses environment variables, which may be a sign of credential stuffing or data theft.

Found 2 instances in 1 package

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Fixed 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

Environment variable access

Supply chain risk

Package accesses environment variables, which may be a sign of credential stuffing or data theft.

Found 2 instances in 1 package

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

1994296

0.02%

Lines of code

22590

0.01%

Worsened metrics

Dependency count

4

33.33%

Dependency changes

• + Added

  react-attach-handler@0.2.0

• + Added

  react-attach-handler@0.2.0
  (transitive)