defer-render-hoc - npm Package Compare versions

Comparing version 0.1.0 to 0.2.0

dist/defer-render-hoc.min.js

@@ -1,1 +0,1 @@
-!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("react")):"function"==typeof define&&define.amd?define(["react"],t):"object"==typeof exports?exports.DeferRenderHoc=t(require("react")):e.DeferRenderHoc=t(e.React)}(this,function(e){return function(e){function t(r){if(n[r])return n[r].exports;var o=n[r]={i:r,l:!1,exports:{}};return e[r].call(o.exports,o,o.exports,t),o.l=!0,o.exports}var n={};return t.m=e,t.c=n,t.i=function(e){return e},t.d=function(e,n,r){t.o(e,n)||Object.defineProperty(e,n,{configurable:!1,enumerable:!0,get:r})},t.n=function(e){var n=e&&e.__esModule?function(){return e.default}:function(){return e};return t.d(n,"a",n),n},t.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},t.p="dist/",t(t.s=2)}([function(e,t,n){(function(t){for(var r=n(3),o="undefined"==typeof window?t:window,u=["moz","webkit"],i="AnimationFrame",c=o["request"+i],a=o["cancel"+i]||o["cancelRequest"+i],f=0;!c&&f<u.length;f++)c=o[u[f]+"Request"+i],a=o[u[f]+"Cancel"+i]||o[u[f]+"CancelRequest"+i];if(!c||!a){var l=0,s=0,p=[];c=function(e){if(0===p.length){var t=r(),n=Math.max(0,1e3/60-(t-l));l=n+t,setTimeout(function(){var e=p.slice(0);p.length=0;for(var t=0;t<e.length;t++)if(!e[t].cancelled)try{e[t].callback(l)}catch(e){setTimeout(function(){throw e},0)}},Math.round(n))}return p.push({handle:++s,callback:e,cancelled:!1}),s},a=function(e){for(var t=0;t<p.length;t++)p[t].handle===e&&(p[t].cancelled=!0)}}e.exports=function(e){return c.call(o,e)},e.exports.cancel=function(){a.apply(o,arguments)},e.exports.polyfill=function(e){e||(e=o),e.requestAnimationFrame=c,e.cancelAnimationFrame=a}}).call(t,n(5))},function(t,n){t.exports=e},function(e,t,n){"use strict";function r(e){return e&&e.__esModule?e:{default:e}}function o(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function u(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}function i(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}function c(e){return function(t){function n(e,t){o(this,n);var r=u(this,(n.__proto__||Object.getPrototypeOf(n)).call(this,e,t));return r.state={shouldRender:!1},r}return i(n,t),a(n,[{key:"componentDidMount",value:function(){var e=this;(0,p.default)(function(){(0,p.default)(function(){return e.setState({shouldRender:!0})})})}},{key:"render",value:function(){return this.state.shouldRender?l.default.createElement(e,this.props):null}}]),n}(f.PureComponent)}Object.defineProperty(t,"__esModule",{value:!0});var a=function(){function e(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}return function(t,n,r){return n&&e(t.prototype,n),r&&e(t,r),t}}();t.default=c;var f=n(1),l=r(f),s=n(0),p=r(s)},function(e,t,n){(function(t){(function(){var n,r,o,u,i,c;"undefined"!=typeof performance&&null!==performance&&performance.now?e.exports=function(){return performance.now()}:void 0!==t&&null!==t&&t.hrtime?(e.exports=function(){return(n()-i)/1e6},r=t.hrtime,n=function(){var e;return e=r(),1e9*e[0]+e[1]},u=n(),c=1e9*t.uptime(),i=u-c):Date.now?(e.exports=function(){return Date.now()-o},o=Date.now()):(e.exports=function(){return(new Date).getTime()-o},o=(new Date).getTime())}).call(this)}).call(t,n(4))},function(e,t){function n(){throw new Error("setTimeout has not been defined")}function r(){throw new Error("clearTimeout has not been defined")}function o(e){if(l===setTimeout)return setTimeout(e,0);if((l===n||!l)&&setTimeout)return l=setTimeout,setTimeout(e,0);try{return l(e,0)}catch(t){try{return l.call(null,e,0)}catch(t){return l.call(this,e,0)}}}function u(e){if(s===clearTimeout)return clearTimeout(e);if((s===r||!s)&&clearTimeout)return s=clearTimeout,clearTimeout(e);try{return s(e)}catch(t){try{return s.call(null,e)}catch(t){return s.call(this,e)}}}function i(){m&&h&&(m=!1,h.length?d=h.concat(d):y=-1,d.length&&c())}function c(){if(!m){var e=o(i);m=!0;for(var t=d.length;t;){for(h=d,d=[];++y<t;)h&&h[y].run();y=-1,t=d.length}h=null,m=!1,u(e)}}function a(e,t){this.fun=e,this.array=t}function f(){}var l,s,p=e.exports={};!function(){try{l="function"==typeof setTimeout?setTimeout:n}catch(e){l=n}try{s="function"==typeof clearTimeout?clearTimeout:r}catch(e){s=r}}();var h,d=[],m=!1,y=-1;p.nextTick=function(e){var t=new Array(arguments.length-1);if(arguments.length>1)for(var n=1;n<arguments.length;n++)t[n-1]=arguments[n];d.push(new a(e,t)),1!==d.length||m||o(c)},a.prototype.run=function(){this.fun.apply(null,this.array)},p.title="browser",p.browser=!0,p.env={},p.argv=[],p.version="",p.versions={},p.on=f,p.addListener=f,p.once=f,p.off=f,p.removeListener=f,p.removeAllListeners=f,p.emit=f,p.prependListener=f,p.prependOnceListener=f,p.listeners=function(e){return[]},p.binding=function(e){throw new Error("process.binding is not supported")},p.cwd=function(){return"/"},p.chdir=function(e){throw new Error("process.chdir is not supported")},p.umask=function(){return 0}},function(e,t){var n;n=function(){return this}();try{n=n||Function("return this")()||(0,eval)("this")}catch(e){"object"==typeof window&&(n=window)}e.exports=n}])});
+!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("react")):"function"==typeof define&&define.amd?define(["react"],t):"object"==typeof exports?exports.DeferRenderHoc=t(require("react")):e.DeferRenderHoc=t(e.React)}(this,function(e){return function(e){function t(r){if(n[r])return n[r].exports;var o=n[r]={i:r,l:!1,exports:{}};return e[r].call(o.exports,o,o.exports,t),o.l=!0,o.exports}var n={};return t.m=e,t.c=n,t.i=function(e){return e},t.d=function(e,n,r){t.o(e,n)||Object.defineProperty(e,n,{configurable:!1,enumerable:!0,get:r})},t.n=function(e){var n=e&&e.__esModule?function(){return e.default}:function(){return e};return t.d(n,"a",n),n},t.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},t.p="dist/",t(t.s=3)}([function(e,t,n){"use strict";var r={childContextTypes:!0,contextTypes:!0,defaultProps:!0,displayName:!0,getDefaultProps:!0,mixins:!0,propTypes:!0,type:!0},o={name:!0,length:!0,prototype:!0,caller:!0,callee:!0,arguments:!0,arity:!0},i=Object.defineProperty,u=Object.getOwnPropertyNames,c=Object.getOwnPropertySymbols,a=Object.getOwnPropertyDescriptor,f=Object.getPrototypeOf,l=f&&f(Object);e.exports=function e(t,n,s){if("string"!=typeof n){if(l){var p=f(n);p&&p!==l&&e(t,p,s)}var h=u(n);c&&(h=h.concat(c(n)));for(var d=0;d<h.length;++d){var y=h[d];if(!(r[y]||o[y]||s&&s[y])){var m=a(n,y);try{i(t,y,m)}catch(e){}}}return t}return t}},function(e,t,n){(function(t){for(var r=n(4),o="undefined"==typeof window?t:window,i=["moz","webkit"],u="AnimationFrame",c=o["request"+u],a=o["cancel"+u]||o["cancelRequest"+u],f=0;!c&&f<i.length;f++)c=o[i[f]+"Request"+u],a=o[i[f]+"Cancel"+u]||o[i[f]+"CancelRequest"+u];if(!c||!a){var l=0,s=0,p=[];c=function(e){if(0===p.length){var t=r(),n=Math.max(0,1e3/60-(t-l));l=n+t,setTimeout(function(){var e=p.slice(0);p.length=0;for(var t=0;t<e.length;t++)if(!e[t].cancelled)try{e[t].callback(l)}catch(e){setTimeout(function(){throw e},0)}},Math.round(n))}return p.push({handle:++s,callback:e,cancelled:!1}),s},a=function(e){for(var t=0;t<p.length;t++)p[t].handle===e&&(p[t].cancelled=!0)}}e.exports=function(e){return c.call(o,e)},e.exports.cancel=function(){a.apply(o,arguments)},e.exports.polyfill=function(e){e||(e=o),e.requestAnimationFrame=c,e.cancelAnimationFrame=a}}).call(t,n(6))},function(t,n){t.exports=e},function(e,t,n){"use strict";function r(e){return e&&e.__esModule?e:{default:e}}function o(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function i(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}function u(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}function c(e){var t=function(t){function n(){var e,t,r,u;o(this,n);for(var c=arguments.length,a=Array(c),f=0;f<c;f++)a[f]=arguments[f];return t=r=i(this,(e=n.__proto__||Object.getPrototypeOf(n)).call.apply(e,[this].concat(a))),r.state={shouldRender:!1},u=t,i(r,u)}return u(n,t),a(n,[{key:"componentDidMount",value:function(){var e=this;(0,p.default)(function(){return(0,p.default)(function(){return e.setState({shouldRender:!0})})})}},{key:"render",value:function(){return this.state.shouldRender?l.default.createElement(e,this.props):null}}]),n}(f.PureComponent);return(0,d.default)(t,e)}Object.defineProperty(t,"__esModule",{value:!0});var a=function(){function e(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}return function(t,n,r){return n&&e(t.prototype,n),r&&e(t,r),t}}();t.default=c;var f=n(2),l=r(f),s=n(1),p=r(s),h=n(0),d=r(h)},function(e,t,n){(function(t){(function(){var n,r,o,i,u,c;"undefined"!=typeof performance&&null!==performance&&performance.now?e.exports=function(){return performance.now()}:void 0!==t&&null!==t&&t.hrtime?(e.exports=function(){return(n()-u)/1e6},r=t.hrtime,n=function(){var e;return e=r(),1e9*e[0]+e[1]},i=n(),c=1e9*t.uptime(),u=i-c):Date.now?(e.exports=function(){return Date.now()-o},o=Date.now()):(e.exports=function(){return(new Date).getTime()-o},o=(new Date).getTime())}).call(this)}).call(t,n(5))},function(e,t){function n(){throw new Error("setTimeout has not been defined")}function r(){throw new Error("clearTimeout has not been defined")}function o(e){if(l===setTimeout)return setTimeout(e,0);if((l===n||!l)&&setTimeout)return l=setTimeout,setTimeout(e,0);try{return l(e,0)}catch(t){try{return l.call(null,e,0)}catch(t){return l.call(this,e,0)}}}function i(e){if(s===clearTimeout)return clearTimeout(e);if((s===r||!s)&&clearTimeout)return s=clearTimeout,clearTimeout(e);try{return s(e)}catch(t){try{return s.call(null,e)}catch(t){return s.call(this,e)}}}function u(){y&&h&&(y=!1,h.length?d=h.concat(d):m=-1,d.length&&c())}function c(){if(!y){var e=o(u);y=!0;for(var t=d.length;t;){for(h=d,d=[];++m<t;)h&&h[m].run();m=-1,t=d.length}h=null,y=!1,i(e)}}function a(e,t){this.fun=e,this.array=t}function f(){}var l,s,p=e.exports={};!function(){try{l="function"==typeof setTimeout?setTimeout:n}catch(e){l=n}try{s="function"==typeof clearTimeout?clearTimeout:r}catch(e){s=r}}();var h,d=[],y=!1,m=-1;p.nextTick=function(e){var t=new Array(arguments.length-1);if(arguments.length>1)for(var n=1;n<arguments.length;n++)t[n-1]=arguments[n];d.push(new a(e,t)),1!==d.length||y||o(c)},a.prototype.run=function(){this.fun.apply(null,this.array)},p.title="browser",p.browser=!0,p.env={},p.argv=[],p.version="",p.versions={},p.on=f,p.addListener=f,p.once=f,p.off=f,p.removeListener=f,p.removeAllListeners=f,p.emit=f,p.prependListener=f,p.prependOnceListener=f,p.listeners=function(e){return[]},p.binding=function(e){throw new Error("process.binding is not supported")},p.cwd=function(){return"/"},p.chdir=function(e){throw new Error("process.chdir is not supported")},p.umask=function(){return 0}},function(e,t){var n;n=function(){return this}();try{n=n||Function("return this")()||(0,eval)("this")}catch(e){"object"==typeof window&&(n=window)}e.exports=n}])});

package.json

 {
   "name": "defer-render-hoc",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "React defer render HOC",
@@ -31,2 +31,3 @@ "main": "./dist/defer-render-hoc.min.js",
   "dependencies": {
+    "hoist-non-react-statics": "~2.3.1",
     "raf": "~3.4.0"
@@ -33,0 +34,0 @@ },

README.md

 ## defer-render-hoc
 
-<p>Defer expensive react rendering with rAF</p>
+Defer expensive react rendering with [rAF](https://www.npmjs.com/package/raf)
 
@@ -17,3 +17,3 @@ <br />
 import React, { Component } from 'react'
-import Scroll from 'defer-render-hoc'
+import DeferRender from 'defer-render-hoc'
 
@@ -20,0 +20,0 @@ class RandomComp extends Component {

src/index.js

 import React, { PureComponent } from 'react'
 import raf from 'raf'
+import hoistNonReactStatic from 'hoist-non-react-statics'
 
@@ -9,18 +10,15 @@ /**
 export default function deferComponentRender (WrappedComponent) {
-  return class DeferredRenderWrapper extends PureComponent {
-    constructor(props, context) {
-      super(props, context)
-      this.state = { shouldRender: false }
-    }
+  class DeferredRenderWrapper extends PureComponent {
+    state = { shouldRender: false }
 
-    componentDidMount() {
-      raf(() => {
-        raf(() => this.setState({ shouldRender: true }))
-      })
+    componentDidMount () {
+      raf(() => raf(() => this.setState({ shouldRender: true })))
     }
 
-    render() {
+    render () {
       return this.state.shouldRender ? <WrappedComponent {...this.props} /> : null
     }
   }
+
+  return hoistNonReactStatic(DeferredRenderWrapper, WrappedComponent)
 }

No alert changes

Improved metrics

Total package byte prevSize

9209

increased by10.65%

Worsened metrics

Dependency count

4

increased by33.33%

Lines of code

47

decreased by-6%

Dependency changes

• + Addedhoist-non-react-statics@~2.3.1

• + Addedhoist-non-react-statics@2.3.1(transitive)