Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
frint-react
Advanced tools
frint-react - npm Package Compare versions
Comparing version 1.4.2 to 2.0.0
@@ -1,1 +0,1 @@ | ||
| this.FrintReact=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="",t(t.s=5)}([function(e,t){!function(){e.exports=this.React}()},function(e,t){!function(){e.exports=this.Rx}()},function(e,t,n){"use strict";function r(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function o(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)}Object.defineProperty(t,"__esModule",{value:!0});var u=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}}(),a=n(0),s=function(e){function t(e,n){r(this,t);var i=o(this,(t.__proto__||Object.getPrototypeOf(t)).call(this,e,n));return i.app=e.app,i}return i(t,e),u(t,[{key:"getChildContext",value:function(){return{app:this.app}}}]),u(t,[{key:"render",value:function(){return a.Children.only(this.props.children)}}]),t}(a.Component);s.propTypes={app:a.PropTypes.object.isRequired,children:a.PropTypes.element.isRequired},s.childContextTypes={app:a.PropTypes.object.isRequired},t.default=s,e.exports=t.default},function(e,t,n){"use strict";function r(e){return e&&e.__esModule?e:{default:e}}function o(e){var t=e.get("component"),n={app:e},r=function(e){return u.default.createElement(s.default,n,u.default.createElement(t,e))};return function(e){return u.default.createElement(r,e)}}Object.defineProperty(t,"__esModule",{value:!0}),t.default=o;var i=n(0),u=r(i),a=n(2),s=r(a);e.exports=t.default},function(e,t,n){"use strict";function r(e){return!(!e||"function"!=typeof e.subscribe||"function"!=typeof e.map||"function"!=typeof e.filter)}Object.defineProperty(t,"__esModule",{value:!0}),t.default=r,e.exports=t.default},function(e,t,n){"use strict";function r(e){return e&&e.__esModule?e:{default:e}}Object.defineProperty(t,"__esModule",{value:!0});var o=n(9),i=r(o),u=n(11),a=r(u),s=n(4),c=r(s),l=n(3),f=r(l),p=n(8),d=r(p),h=n(7),v=r(h),b=n(2),y=r(b),m=n(10),g=r(m);t.default={render:i.default,streamProps:a.default,isObservable:c.default,getMountableComponent:f.default,observe:d.default,Region:v.default,Provider:y.default,RegionService:g.default},e.exports=t.default},function(e,t){!function(){e.exports=this._}()},function(e,t,n){"use strict";function r(e){return e&&e.__esModule?e:{default:e}}Object.defineProperty(t,"__esModule",{value:!0});var o=n(6),i=r(o),u=n(0),a=r(u),s=n(3),c=r(s);t.default=a.default.createClass({displayName:"Region",propTypes:{name:u.PropTypes.string.isRequired,uniqueKey:u.PropTypes.string,data:u.PropTypes.any},getInitialState:function(){return{list:[],listForRendering:[]}},shouldComponentUpdate:function(e,t){var n=!i.default.isEqual(this.props,e);if(!n){var r=t.listForRendering;n=n||this.state.listForRendering.length!==r.length,n=n||i.default.zipWith(this.state.listForRendering,r,function(e,t){return e.name===t.name}).some(function(e){return!e})}return n},componentWillMount:function(){var e=this,t=this.context&&this.context.app?this.context.app.getRootApp():window.app;if(t){this.rootApp=t;var n=t.getApps$(this.props.name,this.props.uniqueKey);this.subscription=n.subscribe({next:function(n){e.setState({list:n},function(){e.state.list.forEach(function(n){var r=n.name,o=n.weight,i=n.multi;if(!e.state.listForRendering.some(function(e){return e.name===r})){var u=e.props.uniqueKey?[e.props.name,e.props.uniqueKey]:[e.props.name];e.props.uniqueKey&&!t.hasAppInstance.apply(t,[r].concat(u))&&t.instantiateApp.apply(t,[r].concat(u));var a=t.getAppInstance.apply(t,[r].concat(u));a&&e.sendProps(a,e.props),e.setState({listForRendering:e.state.listForRendering.concat({name:r,weight:o,instance:a,multi:i,Component:(0,c.default)(a)}).sort(function(e,t){return e.weight-t.weight})})}})})},error:function(t){console.warn('Subscription error for <Region name="'+e.props.name+'" />:',t)}})}},sendProps:function(e,t){var n=e.get(e.options.providerNames.region);n&&n.emit(t)},componentWillReceiveProps:function(e){var t=this;this.state.listForRendering.filter(function(e){return e.instance}).forEach(function(n){return t.sendProps(n.instance,e)})},componentWillUnmount:function(){var e=this;this.subscription&&this.subscription.unsubscribe(),this.rootApp&&this.state.listForRendering.filter(function(e){return e.multi}).forEach(function(t){e.rootApp.destroyApp(t.name,e.props.name,e.props.uniqueKey)})},render:function(){var e=this.state.listForRendering;return 0===e.length?null:a.default.createElement("div",null,e.map(function(e){var t=e.Component,n=e.name;return a.default.createElement(t,{key:"app-"+n})}))}}),e.exports=t.default},function(e,t,n){"use strict";function r(e){return function(t){var n=u.default.createClass({displayName:void 0!==t.displayName?"observe("+t.displayName+")":"observe",getInitialState:function(){return{computedProps:{}}},componentWillMount:function(){var t=this,n=void 0!==e?e:function(){return a.Observable.of({})};this.subscription=n(this.context.app).subscribe(function(e){t.setState({computedProps:e})})},componentWillUnmount:function(){this.subscription.unsubscribe()},render:function(){var e=this.state.computedProps;return u.default.createElement(t,o({},e,this.props))}});return n.contextTypes={app:i.PropTypes.object.isRequired},n}}Object.defineProperty(t,"__esModule",{value:!0});var o=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e};t.default=r;var i=n(0),u=function(e){return e&&e.__esModule?e:{default:e}}(i),a=n(1);e.exports=t.default},function(e,t,n){"use strict";function r(e){return e&&e.__esModule?e:{default:e}}function o(e,t){var n=l.default.getMountableComponent(e);return s.default.render(u.default.createElement(n,null),t)}Object.defineProperty(t,"__esModule",{value:!0}),t.default=o;var i=n(0),u=r(i),a=n(12),s=r(a),c=n(5),l=r(c);e.exports=t.default},function(e,t,n){"use strict";function r(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}Object.defineProperty(t,"__esModule",{value:!0});var o=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}}(),i=n(1),u=function(){function e(){r(this,e),this.props$=new i.BehaviorSubject({})}return o(e,[{key:"emit",value:function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};this.props$.next(e)}},{key:"getProps$",value:function(){return this.props$}},{key:"getData$",value:function(){return this.props$.map(function(e){return e.data})}}]),e}();t.default=u,e.exports=t.default},function(e,t,n){"use strict";function r(e){return e&&e.__esModule?e:{default:e}}function o(e){if(Array.isArray(e)){for(var t=0,n=Array(e.length);t<e.length;t++)n[t]=e[t];return n}return Array.from(e)}function i(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function u(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function a(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};return new v(e)}Object.defineProperty(t,"__esModule",{value:!0});var s=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e},c=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=a;var l=n(6),f=r(l),p=n(1),d=n(4),h=r(d),v=function(){function e(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};u(this,e),this._observables=[p.Observable.of(t)]}return c(e,[{key:"_push",value:function(e){this._observables.push(e)}},{key:"set",value:function(e){for(var t=arguments.length,n=Array(t>1?t-1:0),r=1;r<t;r++)n[r-1]=arguments[r];return"string"==typeof e?this.setKey(e,n[0]):f.default.isPlainObject(e)?this.setPlainObject(e):(0,h.default)(e)?this.setObservable.apply(this,[e].concat(n)):this}},{key:"setKey",value:function(e,t){return this._push(p.Observable.of(i({},e,t))),this}},{key:"setPlainObject",value:function(e){return this._push(p.Observable.of(e)),this}},{key:"setObservable",value:function(e){for(var t=e,n=arguments.length,r=Array(n>1?n-1:0),o=1;o<n;o++)r[o-1]=arguments[o];return r.forEach(function(e){t=t.concatMap(function(t){var n=e(t);return(0,h.default)(n)?n:p.Observable.of(n)})}),this._push(t),this}},{key:"setDispatch",value:function(e,t){var n={};return Object.keys(e).forEach(function(r){var o=e[r];n[r]=function(){return t.dispatch(o.apply(void 0,arguments))}}),this._push(p.Observable.of(n)),this}},{key:"get$",value:function(){return p.Observable.merge.apply(p.Observable,o(this._observables)).scan(function(e,t){return s({},e,t)})}}]),e}();e.exports=t.default},function(e,t){!function(){e.exports=this.ReactDOM}()}]); | ||
| this.FrintReact=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="",t(t.s=10)}([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(f===setTimeout)return setTimeout(e,0);if((f===n||!f)&&setTimeout)return f=setTimeout,setTimeout(e,0);try{return f(e,0)}catch(t){try{return f.call(null,e,0)}catch(t){return f.call(this,e,0)}}}function i(e){if(l===clearTimeout)return clearTimeout(e);if((l===r||!l)&&clearTimeout)return l=clearTimeout,clearTimeout(e);try{return l(e)}catch(t){try{return l.call(null,e)}catch(t){return l.call(this,e)}}}function u(){v&&d&&(v=!1,d.length?y=d.concat(y):h=-1,y.length&&a())}function a(){if(!v){var e=o(u);v=!0;for(var t=y.length;t;){for(d=y,y=[];++h<t;)d&&d[h].run();h=-1,t=y.length}d=null,v=!1,i(e)}}function c(e,t){this.fun=e,this.array=t}function s(){}var f,l,p=e.exports={};!function(){try{f="function"==typeof setTimeout?setTimeout:n}catch(e){f=n}try{l="function"==typeof clearTimeout?clearTimeout:r}catch(e){l=r}}();var d,y=[],v=!1,h=-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];y.push(new c(e,t)),1!==y.length||v||o(a)},c.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=s,p.addListener=s,p.once=s,p.off=s,p.removeListener=s,p.removeAllListeners=s,p.emit=s,p.prependListener=s,p.prependOnceListener=s,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){!function(){e.exports=this.React}()},function(e,t,n){(function(t){if("production"!==t.env.NODE_ENV){var r="function"==typeof Symbol&&Symbol.for&&Symbol.for("react.element")||60103,o=function(e){return"object"==typeof e&&null!==e&&e.$$typeof===r};e.exports=n(20)(o,!0)}else e.exports=n(19)()}).call(t,n(0))},function(e,t,n){"use strict";e.exports="SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED"},function(e,t,n){"use strict";function r(e){return function(){return e}}var o=function(){};o.thatReturns=r,o.thatReturnsFalse=r(!1),o.thatReturnsTrue=r(!0),o.thatReturnsNull=r(null),o.thatReturnsThis=function(){return this},o.thatReturnsArgument=function(e){return e},e.exports=o},function(e,t,n){"use strict";(function(t){function n(e,t,n,o,i,u,a,c){if(r(t),!e){var s;if(void 0===t)s=new Error("Minified exception occurred; use the non-minified dev environment for the full error message and additional helpful warnings.");else{var f=[n,o,i,u,a,c],l=0;s=new Error(t.replace(/%s/g,function(){return f[l++]})),s.name="Invariant Violation"}throw s.framesToPop=1,s}}var r=function(e){};"production"!==t.env.NODE_ENV&&(r=function(e){if(void 0===e)throw new Error("invariant requires an error message argument")}),e.exports=n}).call(t,n(0))},function(e,t){!function(){e.exports=this.Rx}()},function(e,t,n){"use strict";function r(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function o(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)}Object.defineProperty(t,"__esModule",{value:!0});var u=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}}(),a=n(1),c=n(2),s=function(e){return e&&e.__esModule?e:{default:e}}(c),f=function(e){function t(e,n){r(this,t);var i=o(this,(t.__proto__||Object.getPrototypeOf(t)).call(this,e,n));return i.app=e.app,i}return i(t,e),u(t,[{key:"getChildContext",value:function(){return{app:this.app}}}]),u(t,[{key:"render",value:function(){return a.Children.only(this.props.children)}}]),t}(a.Component);f.propTypes={app:s.default.object.isRequired,children:s.default.element.isRequired},f.childContextTypes={app:s.default.object.isRequired},t.default=f,e.exports=t.default},function(e,t,n){"use strict";function r(e){return e&&e.__esModule?e:{default:e}}function o(e){var t=e.get("component"),n={app:e},r=function(e){return u.default.createElement(c.default,n,u.default.createElement(t,e))};return function(e){return u.default.createElement(r,e)}}Object.defineProperty(t,"__esModule",{value:!0}),t.default=o;var i=n(1),u=r(i),a=n(7),c=r(a);e.exports=t.default},function(e,t,n){"use strict";function r(e){return!(!e||"function"!=typeof e.subscribe||"function"!=typeof e.map||"function"!=typeof e.filter)}Object.defineProperty(t,"__esModule",{value:!0}),t.default=r,e.exports=t.default},function(e,t,n){"use strict";function r(e){return e&&e.__esModule?e:{default:e}}Object.defineProperty(t,"__esModule",{value:!0});var o=n(15),i=r(o),u=n(17),a=r(u),c=n(9),s=r(c),f=n(8),l=r(f),p=n(14),d=r(p),y=n(13),v=r(y),h=n(7),b=r(h),m=n(16),g=r(m);t.default={render:i.default,streamProps:a.default,isObservable:s.default,getMountableComponent:l.default,observe:d.default,Region:v.default,Provider:b.default,RegionService:g.default},e.exports=t.default},function(e,t,n){"use strict";(function(t){var r=n(4),o=r;"production"!==t.env.NODE_ENV&&function(){var e=function(e){for(var t=arguments.length,n=Array(t>1?t-1:0),r=1;r<t;r++)n[r-1]=arguments[r];var o=0,i="Warning: "+e.replace(/%s/g,function(){return n[o++]});"undefined"!=typeof console&&console.error(i);try{throw new Error(i)}catch(e){}};o=function(t,n){if(void 0===n)throw new Error("`warning(condition, format, ...args)` requires a warning message argument");if(0!==n.indexOf("Failed Composite propType: ")&&!t){for(var r=arguments.length,o=Array(r>2?r-2:0),i=2;i<r;i++)o[i-2]=arguments[i];e.apply(void 0,[n].concat(o))}}}(),e.exports=o}).call(t,n(0))},function(e,t){!function(){e.exports=this._}()},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)}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}}(),c=n(12),s=r(c),f=n(1),l=r(f),p=n(2),d=r(p),y=n(8),v=r(y),h=function(e){function t(){var e;o(this,t);for(var n=arguments.length,r=Array(n),u=0;u<n;u++)r[u]=arguments[u];var a=i(this,(e=t.__proto__||Object.getPrototypeOf(t)).call.apply(e,[this].concat(r)));return a.state={list:[],listForRendering:[]},a}return u(t,e),a(t,[{key:"shouldComponentUpdate",value:function(e,t){var n=!s.default.isEqual(this.props,e);if(!n){var r=t.listForRendering;n=n||this.state.listForRendering.length!==r.length,n=n||s.default.zipWith(this.state.listForRendering,r,function(e,t){return e.name===t.name}).some(function(e){return!e})}return n}},{key:"componentWillMount",value:function(){var e=this,t=this.context&&this.context.app?this.context.app.getRootApp():window.app;if(t){this.rootApp=t;var n=t.getApps$(this.props.name,this.props.uniqueKey);this.subscription=n.subscribe({next:function(n){e.setState({list:n},function(){e.state.list.forEach(function(n){var r=n.name,o=n.weight,i=n.multi;if(!e.state.listForRendering.some(function(e){return e.name===r})){var u=e.props.uniqueKey?[e.props.name,e.props.uniqueKey]:[e.props.name];e.props.uniqueKey&&!t.hasAppInstance.apply(t,[r].concat(u))&&t.instantiateApp.apply(t,[r].concat(u));var a=t.getAppInstance.apply(t,[r].concat(u));a&&e.sendProps(a,e.props),e.setState({listForRendering:e.state.listForRendering.concat({name:r,weight:o,instance:a,multi:i,Component:(0,v.default)(a)}).sort(function(e,t){return e.weight-t.weight})})}})})},error:function(t){console.warn('Subscription error for <Region name="'+e.props.name+'" />:',t)}})}}},{key:"sendProps",value:function(e,t){var n=e.get(e.options.providerNames.region);n&&n.emit(t)}},{key:"componentWillReceiveProps",value:function(e){var t=this;this.state.listForRendering.filter(function(e){return e.instance}).forEach(function(n){return t.sendProps(n.instance,e)})}},{key:"componentWillUnmount",value:function(){var e=this;this.subscription&&this.subscription.unsubscribe(),this.rootApp&&this.state.listForRendering.filter(function(e){return e.multi}).forEach(function(t){e.rootApp.destroyApp(t.name,e.props.name,e.props.uniqueKey)})}},{key:"render",value:function(){var e=this.state.listForRendering;return 0===e.length?null:l.default.createElement("div",null,e.map(function(e){var t=e.Component,n=e.name;return l.default.createElement(t,{key:"app-"+n})}))}}]),t}(l.default.Component);h.propTypes={name:d.default.string.isRequired,uniqueKey:d.default.string,data:d.default.any},t.default=h,e.exports=t.default},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 a(e){return function(t){var n=function(n){function r(){var e;o(this,r);for(var t=arguments.length,n=Array(t),u=0;u<t;u++)n[u]=arguments[u];var a=i(this,(e=r.__proto__||Object.getPrototypeOf(r)).call.apply(e,[this].concat(n)));return a.state={computedProps:{}},a}return u(r,n),s(r,[{key:"componentWillMount",value:function(){var t=this,n=void 0!==e?e:function(){return y.Observable.of({})};this.subscription=n(this.context.app).subscribe(function(e){t.setState({computedProps:e})})}},{key:"componentWillUnmount",value:function(){this.subscription.unsubscribe()}},{key:"render",value:function(){var e=this.state.computedProps;return l.default.createElement(t,c({},e,this.props))}}]),r}(l.default.Component);return n.displayName=void 0!==t.displayName?"observe("+t.displayName+")":"observe",n.contextTypes={app:d.default.object.isRequired},n}}Object.defineProperty(t,"__esModule",{value:!0});var c=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e},s=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=a;var f=n(1),l=r(f),p=n(2),d=r(p),y=n(6);e.exports=t.default},function(e,t,n){"use strict";function r(e){return e&&e.__esModule?e:{default:e}}function o(e,t){var n=f.default.getMountableComponent(e);return c.default.render(u.default.createElement(n,null),t)}Object.defineProperty(t,"__esModule",{value:!0}),t.default=o;var i=n(1),u=r(i),a=n(21),c=r(a),s=n(10),f=r(s);e.exports=t.default},function(e,t,n){"use strict";function r(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}Object.defineProperty(t,"__esModule",{value:!0});var o=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}}(),i=n(6),u=function(){function e(){r(this,e),this.props$=new i.BehaviorSubject({})}return o(e,[{key:"emit",value:function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};this.props$.next(e)}},{key:"getProps$",value:function(){return this.props$}},{key:"getData$",value:function(){return this.props$.map(function(e){return e.data})}}]),e}();t.default=u,e.exports=t.default},function(e,t,n){"use strict";function r(e){return e&&e.__esModule?e:{default:e}}function o(e){if(Array.isArray(e)){for(var t=0,n=Array(e.length);t<e.length;t++)n[t]=e[t];return n}return Array.from(e)}function i(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function u(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function a(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};return new v(e)}Object.defineProperty(t,"__esModule",{value:!0});var c=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e},s=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=a;var f=n(12),l=r(f),p=n(6),d=n(9),y=r(d),v=function(){function e(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};u(this,e),this._observables=[p.Observable.of(t)]}return s(e,[{key:"_push",value:function(e){this._observables.push(e)}},{key:"set",value:function(e){for(var t=arguments.length,n=Array(t>1?t-1:0),r=1;r<t;r++)n[r-1]=arguments[r];return"string"==typeof e?this.setKey(e,n[0]):l.default.isPlainObject(e)?this.setPlainObject(e):(0,y.default)(e)?this.setObservable.apply(this,[e].concat(n)):this}},{key:"setKey",value:function(e,t){return this._push(p.Observable.of(i({},e,t))),this}},{key:"setPlainObject",value:function(e){return this._push(p.Observable.of(e)),this}},{key:"setObservable",value:function(e){for(var t=e,n=arguments.length,r=Array(n>1?n-1:0),o=1;o<n;o++)r[o-1]=arguments[o];return r.forEach(function(e){t=t.concatMap(function(t){var n=e(t);return(0,y.default)(n)?n:p.Observable.of(n)})}),this._push(t),this}},{key:"setDispatch",value:function(e,t){var n={};return Object.keys(e).forEach(function(r){var o=e[r];n[r]=function(){return t.dispatch(o.apply(void 0,arguments))}}),this._push(p.Observable.of(n)),this}},{key:"get$",value:function(){return p.Observable.merge.apply(p.Observable,o(this._observables)).scan(function(e,t){return c({},e,t)})}}]),e}();e.exports=t.default},function(e,t,n){"use strict";(function(t){function r(e,n,r,c,s){if("production"!==t.env.NODE_ENV)for(var f in e)if(e.hasOwnProperty(f)){var l;try{o("function"==typeof e[f],"%s: %s type `%s` is invalid; it must be a function, usually from React.PropTypes.",c||"React class",r,f),l=e[f](n,f,c,r,null,u)}catch(e){l=e}if(i(!l||l instanceof Error,"%s: type specification of %s `%s` is invalid; the type checker function must return `null` or an `Error` but returned a %s. You may have forgotten to pass an argument to the type checker creator (arrayOf, instanceOf, objectOf, oneOf, oneOfType, and shape all require an argument).",c||"React class",r,f,typeof l),l instanceof Error&&!(l.message in a)){a[l.message]=!0;var p=s?s():"";i(!1,"Failed %s type: %s%s",r,l.message,null!=p?p:"")}}}if("production"!==t.env.NODE_ENV)var o=n(5),i=n(11),u=n(3),a={};e.exports=r}).call(t,n(0))},function(e,t,n){"use strict";var r=n(4),o=n(5),i=n(3);e.exports=function(){function e(e,t,n,r,u,a){a!==i&&o(!1,"Calling PropTypes validators directly is not supported by the `prop-types` package. Use PropTypes.checkPropTypes() to call them. Read more at http://fb.me/use-check-prop-types")}function t(){return e}e.isRequired=e;var n={array:e,bool:e,func:e,number:e,object:e,string:e,symbol:e,any:e,arrayOf:t,element:e,instanceOf:t,node:e,objectOf:t,oneOf:t,oneOfType:t,shape:t};return n.checkPropTypes=r,n.PropTypes=n,n}},function(e,t,n){"use strict";(function(t){var r=n(4),o=n(5),i=n(11),u=n(3),a=n(18);e.exports=function(e,n){function c(e){var t=e&&(P&&e[P]||e[j]);if("function"==typeof t)return t}function s(e,t){return e===t?0!==e||1/e==1/t:e!==e&&t!==t}function f(e){this.message=e,this.stack=""}function l(e){function r(r,s,l,p,d,y,v){if(p=p||T,y=y||l,v!==u)if(n)o(!1,"Calling PropTypes validators directly is not supported by the `prop-types` package. Use `PropTypes.checkPropTypes()` to call them. Read more at http://fb.me/use-check-prop-types");else if("production"!==t.env.NODE_ENV&&"undefined"!=typeof console){var h=p+":"+l;!a[h]&&c<3&&(i(!1,"You are manually calling a React.PropTypes validation function for the `%s` prop on `%s`. This is deprecated and will throw in the standalone `prop-types` package. You may be seeing this warning due to a third-party PropTypes library. See https://fb.me/react-warning-dont-call-proptypes for details.",y,p),a[h]=!0,c++)}return null==s[l]?r?new f(null===s[l]?"The "+d+" `"+y+"` is marked as required in `"+p+"`, but its value is `null`.":"The "+d+" `"+y+"` is marked as required in `"+p+"`, but its value is `undefined`."):null:e(s,l,p,d,y)}if("production"!==t.env.NODE_ENV)var a={},c=0;var s=r.bind(null,!1);return s.isRequired=r.bind(null,!0),s}function p(e){function t(t,n,r,o,i,u){var a=t[n];if(w(a)!==e)return new f("Invalid "+o+" `"+i+"` of type `"+_(a)+"` supplied to `"+r+"`, expected `"+e+"`.");return null}return l(t)}function d(e){function t(t,n,r,o,i){if("function"!=typeof e)return new f("Property `"+i+"` of component `"+r+"` has invalid PropType notation inside arrayOf.");var a=t[n];if(!Array.isArray(a)){return new f("Invalid "+o+" `"+i+"` of type `"+w(a)+"` supplied to `"+r+"`, expected an array.")}for(var c=0;c<a.length;c++){var s=e(a,c,r,o,i+"["+c+"]",u);if(s instanceof Error)return s}return null}return l(t)}function y(e){function t(t,n,r,o,i){if(!(t[n]instanceof e)){var u=e.name||T;return new f("Invalid "+o+" `"+i+"` of type `"+x(t[n])+"` supplied to `"+r+"`, expected instance of `"+u+"`.")}return null}return l(t)}function v(e){function n(t,n,r,o,i){for(var u=t[n],a=0;a<e.length;a++)if(s(u,e[a]))return null;return new f("Invalid "+o+" `"+i+"` of value `"+u+"` supplied to `"+r+"`, expected one of "+JSON.stringify(e)+".")}return Array.isArray(e)?l(n):("production"!==t.env.NODE_ENV&&i(!1,"Invalid argument supplied to oneOf, expected an instance of array."),r.thatReturnsNull)}function h(e){function t(t,n,r,o,i){if("function"!=typeof e)return new f("Property `"+i+"` of component `"+r+"` has invalid PropType notation inside objectOf.");var a=t[n],c=w(a);if("object"!==c)return new f("Invalid "+o+" `"+i+"` of type `"+c+"` supplied to `"+r+"`, expected an object.");for(var s in a)if(a.hasOwnProperty(s)){var l=e(a,s,r,o,i+"."+s,u);if(l instanceof Error)return l}return null}return l(t)}function b(e){function n(t,n,r,o,i){for(var a=0;a<e.length;a++){if(null==(0,e[a])(t,n,r,o,i,u))return null}return new f("Invalid "+o+" `"+i+"` supplied to `"+r+"`.")}if(!Array.isArray(e))return"production"!==t.env.NODE_ENV&&i(!1,"Invalid argument supplied to oneOfType, expected an instance of array."),r.thatReturnsNull;for(var o=0;o<e.length;o++){var a=e[o];if("function"!=typeof a)return i(!1,"Invalid argument supplid to oneOfType. Expected an array of check functions, but received %s at index %s.",E(a),o),r.thatReturnsNull}return l(n)}function m(e){function t(t,n,r,o,i){var a=t[n],c=w(a);if("object"!==c)return new f("Invalid "+o+" `"+i+"` of type `"+c+"` supplied to `"+r+"`, expected `object`.");for(var s in e){var l=e[s];if(l){var p=l(a,s,r,o,i+"."+s,u);if(p)return p}}return null}return l(t)}function g(t){switch(typeof t){case"number":case"string":case"undefined":return!0;case"boolean":return!t;case"object":if(Array.isArray(t))return t.every(g);if(null===t||e(t))return!0;var n=c(t);if(!n)return!1;var r,o=n.call(t);if(n!==t.entries){for(;!(r=o.next()).done;)if(!g(r.value))return!1}else for(;!(r=o.next()).done;){var i=r.value;if(i&&!g(i[1]))return!1}return!0;default:return!1}}function O(e,t){return"symbol"===e||("Symbol"===t["@@toStringTag"]||"function"==typeof Symbol&&t instanceof Symbol)}function w(e){var t=typeof e;return Array.isArray(e)?"array":e instanceof RegExp?"object":O(t,e)?"symbol":t}function _(e){if(void 0===e||null===e)return""+e;var t=w(e);if("object"===t){if(e instanceof Date)return"date";if(e instanceof RegExp)return"regexp"}return t}function E(e){var t=_(e);switch(t){case"array":case"object":return"an "+t;case"boolean":case"date":case"regexp":return"a "+t;default:return t}}function x(e){return e.constructor&&e.constructor.name?e.constructor.name:T}var P="function"==typeof Symbol&&Symbol.iterator,j="@@iterator",T="<<anonymous>>",R={array:p("array"),bool:p("boolean"),func:p("function"),number:p("number"),object:p("object"),string:p("string"),symbol:p("symbol"),any:function(){return l(r.thatReturnsNull)}(),arrayOf:d,element:function(){function t(t,n,r,o,i){var u=t[n];if(!e(u)){return new f("Invalid "+o+" `"+i+"` of type `"+w(u)+"` supplied to `"+r+"`, expected a single ReactElement.")}return null}return l(t)}(),instanceOf:y,node:function(){function e(e,t,n,r,o){return g(e[t])?null:new f("Invalid "+r+" `"+o+"` supplied to `"+n+"`, expected a ReactNode.")}return l(e)}(),objectOf:h,oneOf:v,oneOfType:b,shape:m};return f.prototype=Error.prototype,R.checkPropTypes=a,R.PropTypes=R,R}}).call(t,n(0))},function(e,t){!function(){e.exports=this.ReactDOM}()}]); |
@@ -7,4 +7,5 @@ 'use strict'; | ||
| 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; }; /* eslint-disable import/no-extraneous-dependencies */ | ||
| 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 _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; }; }(); | ||
@@ -17,2 +18,6 @@ exports.default = observe; | ||
| var _propTypes = require('prop-types'); | ||
| var _propTypes2 = _interopRequireDefault(_propTypes); | ||
| var _rxjs = require('rxjs'); | ||
@@ -22,40 +27,70 @@ | ||
| 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; } /* eslint-disable import/no-extraneous-dependencies */ | ||
| function observe(fn) { | ||
| return function (Component) { | ||
| var WrappedComponent = _react2.default.createClass({ | ||
| displayName: typeof Component.displayName !== 'undefined' ? 'observe(' + Component.displayName + ')' : 'observe', | ||
| var WrappedComponent = function (_React$Component) { | ||
| _inherits(WrappedComponent, _React$Component); | ||
| getInitialState: function getInitialState() { | ||
| return { | ||
| function WrappedComponent() { | ||
| var _ref; | ||
| _classCallCheck(this, WrappedComponent); | ||
| for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) { | ||
| args[_key] = arguments[_key]; | ||
| } | ||
| var _this = _possibleConstructorReturn(this, (_ref = WrappedComponent.__proto__ || Object.getPrototypeOf(WrappedComponent)).call.apply(_ref, [this].concat(args))); | ||
| _this.state = { | ||
| computedProps: {} | ||
| }; | ||
| }, | ||
| componentWillMount: function componentWillMount() { | ||
| var _this = this; | ||
| return _this; | ||
| } | ||
| var observableFn = typeof fn !== 'undefined' ? fn : function () { | ||
| return _rxjs.Observable.of({}); | ||
| }; | ||
| _createClass(WrappedComponent, [{ | ||
| key: 'componentWillMount', | ||
| value: function componentWillMount() { | ||
| var _this2 = this; | ||
| this.subscription = observableFn(this.context.app).subscribe(function (computedProps) { | ||
| _this.setState({ | ||
| computedProps: computedProps | ||
| var observableFn = typeof fn !== 'undefined' ? fn : function () { | ||
| return _rxjs.Observable.of({}); | ||
| }; | ||
| this.subscription = observableFn(this.context.app).subscribe(function (computedProps) { | ||
| _this2.setState({ | ||
| computedProps: computedProps | ||
| }); | ||
| }); | ||
| }); | ||
| }, | ||
| componentWillUnmount: function componentWillUnmount() { | ||
| this.subscription.unsubscribe(); | ||
| }, | ||
| render: function render() { | ||
| var computedProps = this.state.computedProps; | ||
| } | ||
| }, { | ||
| key: 'componentWillUnmount', | ||
| value: function componentWillUnmount() { | ||
| this.subscription.unsubscribe(); | ||
| } | ||
| }, { | ||
| key: 'render', | ||
| value: function render() { | ||
| var computedProps = this.state.computedProps; | ||
| return _react2.default.createElement(Component, _extends({}, computedProps, this.props)); | ||
| } | ||
| }); | ||
| return _react2.default.createElement(Component, _extends({}, computedProps, this.props)); | ||
| } | ||
| }]); | ||
| return WrappedComponent; | ||
| }(_react2.default.Component); | ||
| WrappedComponent.displayName = typeof Component.displayName !== 'undefined' ? 'observe(' + Component.displayName + ')' : 'observe'; | ||
| WrappedComponent.contextTypes = { | ||
| app: _react.PropTypes.object.isRequired | ||
| app: _propTypes2.default.object.isRequired | ||
| }; | ||
| return WrappedComponent; | ||
@@ -62,0 +97,0 @@ }; |
@@ -43,13 +43,12 @@ 'use strict'; | ||
| it('generates Component bound to observable for props, without app in context', function () { | ||
| var Component = _react2.default.createClass({ | ||
| displayName: 'Component', | ||
| render: function render() { | ||
| return _react2.default.createElement( | ||
| 'p', | ||
| { id: 'counter' }, | ||
| this.props.counter | ||
| ); | ||
| } | ||
| }); | ||
| function Component(_ref) { | ||
| var counter = _ref.counter; | ||
| return _react2.default.createElement( | ||
| 'p', | ||
| { id: 'counter' }, | ||
| counter | ||
| ); | ||
| } | ||
| var ObservedComponent = (0, _observe2.default)(function () { | ||
@@ -67,12 +66,9 @@ return _rxjs.Observable.of(1).map(function (number) { | ||
| it('generates Component with no additional impact, if no function is given', function () { | ||
| var Component = _react2.default.createClass({ | ||
| displayName: 'Component', | ||
| render: function render() { | ||
| return _react2.default.createElement( | ||
| 'p', | ||
| { id: 'text' }, | ||
| 'Hello World' | ||
| ); | ||
| } | ||
| }); | ||
| function Component() { | ||
| return _react2.default.createElement( | ||
| 'p', | ||
| { id: 'text' }, | ||
| 'Hello World' | ||
| ); | ||
| } | ||
@@ -87,13 +83,12 @@ var ObservedComponent = (0, _observe2.default)()(Component); | ||
| it('generates Component bound to observable for props, with app in context', function () { | ||
| var Component = _react2.default.createClass({ | ||
| displayName: 'Component', | ||
| render: function render() { | ||
| return _react2.default.createElement( | ||
| 'p', | ||
| { id: 'name' }, | ||
| this.props.name | ||
| ); | ||
| } | ||
| }); | ||
| function Component(_ref2) { | ||
| var name = _ref2.name; | ||
| return _react2.default.createElement( | ||
| 'p', | ||
| { id: 'name' }, | ||
| name | ||
| ); | ||
| } | ||
| var ObservedComponent = (0, _observe2.default)(function (app) { | ||
@@ -138,29 +133,25 @@ return _rxjs.Observable.of(app.getOption('name')).map(function (name) { | ||
| it('can be tested with enzyme', function () { | ||
| var ChildComponent = _react2.default.createClass({ | ||
| displayName: 'ChildComponent', | ||
| render: function render() { | ||
| return _react2.default.createElement( | ||
| function ChildComponent() { | ||
| return _react2.default.createElement( | ||
| 'p', | ||
| null, | ||
| 'I am a child.' | ||
| ); | ||
| } | ||
| function Component(_ref3) { | ||
| var name = _ref3.name; | ||
| return _react2.default.createElement( | ||
| 'div', | ||
| null, | ||
| _react2.default.createElement( | ||
| 'p', | ||
| null, | ||
| 'I am a child.' | ||
| ); | ||
| } | ||
| }); | ||
| { id: 'name' }, | ||
| name | ||
| ), | ||
| _react2.default.createElement(ChildComponent, null) | ||
| ); | ||
| } | ||
| var Component = _react2.default.createClass({ | ||
| displayName: 'Component', | ||
| render: function render() { | ||
| return _react2.default.createElement( | ||
| 'div', | ||
| null, | ||
| _react2.default.createElement( | ||
| 'p', | ||
| { id: 'name' }, | ||
| this.props.name | ||
| ), | ||
| _react2.default.createElement(ChildComponent, null) | ||
| ); | ||
| } | ||
| }); | ||
| var ObservedComponent = (0, _observe2.default)(function (app) { | ||
@@ -178,12 +169,9 @@ return _rxjs.Observable.of(app.getOption('name')).map(function (name) { | ||
| var ComponentToRender = _react2.default.createClass({ | ||
| displayName: 'ComponentToRender', | ||
| render: function render() { | ||
| return _react2.default.createElement( | ||
| _Provider2.default, | ||
| { app: fakeApp }, | ||
| _react2.default.createElement(ObservedComponent, this.props) | ||
| ); | ||
| } | ||
| }); | ||
| function ComponentToRender(props) { | ||
| return _react2.default.createElement( | ||
| _Provider2.default, | ||
| { app: fakeApp }, | ||
| _react2.default.createElement(ObservedComponent, props) | ||
| ); | ||
| } | ||
@@ -190,0 +178,0 @@ var wrapper = (0, _enzyme.mount)(_react2.default.createElement(ComponentToRender, null)); |
@@ -11,2 +11,8 @@ 'use strict'; | ||
| var _propTypes = require('prop-types'); | ||
| var _propTypes2 = _interopRequireDefault(_propTypes); | ||
| 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"); } } | ||
@@ -51,9 +57,9 @@ | ||
| Provider.propTypes = { | ||
| app: _react.PropTypes.object.isRequired, | ||
| children: _react.PropTypes.element.isRequired | ||
| app: _propTypes2.default.object.isRequired, | ||
| children: _propTypes2.default.element.isRequired | ||
| }; | ||
| Provider.childContextTypes = { | ||
| app: _react.PropTypes.object.isRequired | ||
| app: _propTypes2.default.object.isRequired | ||
| }; | ||
| exports.default = Provider; | ||
| module.exports = exports['default']; |
@@ -11,2 +11,6 @@ 'use strict'; | ||
| var _propTypes = require('prop-types'); | ||
| var _propTypes2 = _interopRequireDefault(_propTypes); | ||
| var _sinon = require('sinon'); | ||
@@ -26,5 +30,5 @@ | ||
| var sandbox = _sinon2.default.sandbox.create(); /* eslint-disable import/no-extraneous-dependencies, func-names */ | ||
| /* eslint-disable import/no-extraneous-dependencies, func-names */ | ||
| /* global afterEach, beforeEach, describe, it */ | ||
| var sandbox = _sinon2.default.sandbox.create(); | ||
| _chai2.default.use(_sinonChai2.default); | ||
@@ -55,4 +59,4 @@ | ||
| (0, _chai.expect)(_Provider2.default.propTypes).to.be.deep.equal({ | ||
| app: _react.PropTypes.object.isRequired, | ||
| children: _react.PropTypes.element.isRequired | ||
| app: _propTypes2.default.object.isRequired, | ||
| children: _propTypes2.default.element.isRequired | ||
| }); | ||
@@ -63,3 +67,3 @@ }); | ||
| (0, _chai.expect)(_Provider2.default.childContextTypes).to.be.deep.equal({ | ||
| app: _react.PropTypes.object.isRequired | ||
| app: _propTypes2.default.object.isRequired | ||
| }); | ||
@@ -66,0 +70,0 @@ }); |
@@ -7,2 +7,4 @@ '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 _lodash = require('lodash'); | ||
@@ -16,2 +18,6 @@ | ||
| var _propTypes = require('prop-types'); | ||
| var _propTypes2 = _interopRequireDefault(_propTypes); | ||
| var _getMountableComponent = require('./getMountableComponent'); | ||
@@ -23,19 +29,31 @@ | ||
| exports.default = _react2.default.createClass({ | ||
| displayName: 'Region', | ||
| function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } | ||
| propTypes: { | ||
| name: _react.PropTypes.string.isRequired, | ||
| uniqueKey: _react.PropTypes.string, | ||
| data: _react.PropTypes.any | ||
| }, | ||
| 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; } | ||
| getInitialState: function getInitialState() { | ||
| return { | ||
| 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; } /* eslint-disable no-console, no-underscore-dangle, import/no-extraneous-dependencies */ | ||
| /* globals window */ | ||
| var Region = function (_React$Component) { | ||
| _inherits(Region, _React$Component); | ||
| function Region() { | ||
| var _ref; | ||
| _classCallCheck(this, Region); | ||
| for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) { | ||
| args[_key] = arguments[_key]; | ||
| } | ||
| var _this = _possibleConstructorReturn(this, (_ref = Region.__proto__ || Object.getPrototypeOf(Region)).call.apply(_ref, [this].concat(args))); | ||
| _this.state = { | ||
| list: [], // array of apps ==> { name, instance } | ||
| listForRendering: [] // array of {name, Component} objects | ||
| }; | ||
| }, | ||
| return _this; | ||
| } | ||
| /** | ||
@@ -50,135 +68,158 @@ * Determines if the the component should be updated or not. | ||
| */ | ||
| shouldComponentUpdate: function shouldComponentUpdate(nextProps, nextState) { | ||
| var shouldUpdate = !_lodash2.default.isEqual(this.props, nextProps); | ||
| if (!shouldUpdate) { | ||
| var listForRendering = nextState.listForRendering; | ||
| shouldUpdate = shouldUpdate || this.state.listForRendering.length !== listForRendering.length; | ||
| shouldUpdate = shouldUpdate || _lodash2.default.zipWith(this.state.listForRendering, listForRendering, function (prev, next) { | ||
| return prev.name === next.name; | ||
| }).some(function (value) { | ||
| return !value; | ||
| }); | ||
| } | ||
| return shouldUpdate; | ||
| }, | ||
| componentWillMount: function componentWillMount() { | ||
| var _this = this; | ||
| var rootApp = !this.context || !this.context.app ? window.app // @TODO: can we avoid globals? | ||
| : this.context.app.getRootApp(); | ||
| _createClass(Region, [{ | ||
| key: 'shouldComponentUpdate', | ||
| value: function shouldComponentUpdate(nextProps, nextState) { | ||
| var shouldUpdate = !_lodash2.default.isEqual(this.props, nextProps); | ||
| if (!shouldUpdate) { | ||
| var listForRendering = nextState.listForRendering; | ||
| if (!rootApp) { | ||
| return; | ||
| shouldUpdate = shouldUpdate || this.state.listForRendering.length !== listForRendering.length; | ||
| shouldUpdate = shouldUpdate || _lodash2.default.zipWith(this.state.listForRendering, listForRendering, function (prev, next) { | ||
| return prev.name === next.name; | ||
| }).some(function (value) { | ||
| return !value; | ||
| }); | ||
| } | ||
| return shouldUpdate; | ||
| } | ||
| }, { | ||
| key: 'componentWillMount', | ||
| value: function componentWillMount() { | ||
| var _this2 = this; | ||
| this.rootApp = rootApp; | ||
| var apps$ = rootApp.getApps$(this.props.name, this.props.uniqueKey); | ||
| var rootApp = !this.context || !this.context.app ? window.app // @TODO: can we avoid globals? | ||
| : this.context.app.getRootApp(); | ||
| this.subscription = apps$.subscribe({ | ||
| next: function next(list) { | ||
| _this.setState({ | ||
| list: list | ||
| }, function () { | ||
| _this.state.list.forEach(function (item) { | ||
| var appName = item.name, | ||
| appWeight = item.weight, | ||
| multi = item.multi; | ||
| if (!rootApp) { | ||
| return; | ||
| } | ||
| var existsInState = _this.state.listForRendering.some(function (w) { | ||
| return w.name === appName; | ||
| }); | ||
| this.rootApp = rootApp; | ||
| var apps$ = rootApp.getApps$(this.props.name, this.props.uniqueKey); | ||
| // @TODO: take care of removal in streamed list too? | ||
| this.subscription = apps$.subscribe({ | ||
| next: function next(list) { | ||
| _this2.setState({ | ||
| list: list | ||
| }, function () { | ||
| _this2.state.list.forEach(function (item) { | ||
| var appName = item.name, | ||
| appWeight = item.weight, | ||
| multi = item.multi; | ||
| if (existsInState) { | ||
| return; | ||
| } | ||
| var existsInState = _this2.state.listForRendering.some(function (w) { | ||
| return w.name === appName; | ||
| }); | ||
| var regionArgs = _this.props.uniqueKey ? [_this.props.name, _this.props.uniqueKey] : [_this.props.name]; | ||
| // @TODO: take care of removal in streamed list too? | ||
| if (_this.props.uniqueKey && !rootApp.hasAppInstance.apply(rootApp, [appName].concat(regionArgs))) { | ||
| rootApp.instantiateApp.apply(rootApp, [appName].concat(regionArgs)); | ||
| } | ||
| if (existsInState) { | ||
| return; | ||
| } | ||
| var appInstance = rootApp.getAppInstance.apply(rootApp, [appName].concat(regionArgs)); | ||
| if (appInstance) { | ||
| _this.sendProps(appInstance, _this.props); | ||
| } | ||
| var regionArgs = _this2.props.uniqueKey ? [_this2.props.name, _this2.props.uniqueKey] : [_this2.props.name]; | ||
| _this.setState({ | ||
| listForRendering: _this.state.listForRendering.concat({ | ||
| name: appName, | ||
| weight: appWeight, | ||
| instance: appInstance, | ||
| multi: multi, | ||
| Component: (0, _getMountableComponent2.default)(appInstance) | ||
| }).sort(function (a, b) { | ||
| return a.weight - b.weight; | ||
| }) | ||
| if (_this2.props.uniqueKey && !rootApp.hasAppInstance.apply(rootApp, [appName].concat(regionArgs))) { | ||
| rootApp.instantiateApp.apply(rootApp, [appName].concat(regionArgs)); | ||
| } | ||
| var appInstance = rootApp.getAppInstance.apply(rootApp, [appName].concat(regionArgs)); | ||
| if (appInstance) { | ||
| _this2.sendProps(appInstance, _this2.props); | ||
| } | ||
| _this2.setState({ | ||
| listForRendering: _this2.state.listForRendering.concat({ | ||
| name: appName, | ||
| weight: appWeight, | ||
| instance: appInstance, | ||
| multi: multi, | ||
| Component: (0, _getMountableComponent2.default)(appInstance) | ||
| }).sort(function (a, b) { | ||
| return a.weight - b.weight; | ||
| }) | ||
| }); | ||
| }); | ||
| }); | ||
| }); | ||
| }, | ||
| error: function error(err) { | ||
| console.warn('Subscription error for <Region name="' + _this.props.name + '" />:', err); | ||
| } | ||
| }); | ||
| }, | ||
| sendProps: function sendProps(appInstance, props) { | ||
| var regionService = appInstance.get(appInstance.options.providerNames.region); | ||
| if (!regionService) { | ||
| return; | ||
| }, | ||
| error: function error(err) { | ||
| console.warn('Subscription error for <Region name="' + _this2.props.name + '" />:', err); | ||
| } | ||
| }); | ||
| } | ||
| }, { | ||
| key: 'sendProps', | ||
| value: function sendProps(appInstance, props) { | ||
| // eslint-disable-line | ||
| var regionService = appInstance.get(appInstance.options.providerNames.region); | ||
| regionService.emit(props); | ||
| }, | ||
| componentWillReceiveProps: function componentWillReceiveProps(nextProps) { | ||
| var _this2 = this; | ||
| if (!regionService) { | ||
| return; | ||
| } | ||
| this.state.listForRendering.filter(function (item) { | ||
| return item.instance; | ||
| }).forEach(function (item) { | ||
| return _this2.sendProps(item.instance, nextProps); | ||
| }); | ||
| }, | ||
| componentWillUnmount: function componentWillUnmount() { | ||
| var _this3 = this; | ||
| if (this.subscription) { | ||
| this.subscription.unsubscribe(); | ||
| regionService.emit(props); | ||
| } | ||
| }, { | ||
| key: 'componentWillReceiveProps', | ||
| value: function componentWillReceiveProps(nextProps) { | ||
| var _this3 = this; | ||
| if (this.rootApp) { | ||
| this.state.listForRendering.filter(function (item) { | ||
| return item.multi; | ||
| return item.instance; | ||
| }).forEach(function (item) { | ||
| _this3.rootApp.destroyApp(item.name, _this3.props.name, _this3.props.uniqueKey); | ||
| return _this3.sendProps(item.instance, nextProps); | ||
| }); | ||
| } | ||
| }, | ||
| render: function render() { | ||
| var listForRendering = this.state.listForRendering; | ||
| }, { | ||
| key: 'componentWillUnmount', | ||
| value: function componentWillUnmount() { | ||
| var _this4 = this; | ||
| if (this.subscription) { | ||
| this.subscription.unsubscribe(); | ||
| } | ||
| if (listForRendering.length === 0) { | ||
| return null; | ||
| if (this.rootApp) { | ||
| this.state.listForRendering.filter(function (item) { | ||
| return item.multi; | ||
| }).forEach(function (item) { | ||
| _this4.rootApp.destroyApp(item.name, _this4.props.name, _this4.props.uniqueKey); | ||
| }); | ||
| } | ||
| } | ||
| }, { | ||
| key: 'render', | ||
| value: function render() { | ||
| var listForRendering = this.state.listForRendering; | ||
| return _react2.default.createElement( | ||
| 'div', | ||
| null, | ||
| listForRendering.map(function (item) { | ||
| var Component = item.Component, | ||
| name = item.name; | ||
| if (listForRendering.length === 0) { | ||
| return null; | ||
| } | ||
| return _react2.default.createElement(Component, { key: 'app-' + name }); | ||
| }) | ||
| ); | ||
| } | ||
| }); /* eslint-disable no-console, no-underscore-dangle, import/no-extraneous-dependencies */ | ||
| /* globals window */ | ||
| return _react2.default.createElement( | ||
| 'div', | ||
| null, | ||
| listForRendering.map(function (item) { | ||
| var Component = item.Component, | ||
| name = item.name; | ||
| return _react2.default.createElement(Component, { key: 'app-' + name }); | ||
| }) | ||
| ); | ||
| } | ||
| }]); | ||
| return Region; | ||
| }(_react2.default.Component); | ||
| Region.propTypes = { | ||
| name: _propTypes2.default.string.isRequired, | ||
| uniqueKey: _propTypes2.default.string, | ||
| data: _propTypes2.default.any | ||
| }; | ||
| exports.default = Region; | ||
| module.exports = exports['default']; |
| '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 _chai = require('chai'); | ||
@@ -47,4 +49,10 @@ | ||
| /* eslint-disable import/no-extraneous-dependencies, func-names, react/prop-types */ | ||
| 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; } /* eslint-disable import/no-extraneous-dependencies, func-names, react/prop-types */ | ||
| /* global describe, it, window, document, resetDOM */ | ||
| describe('frint-react › components › Region', function () { | ||
@@ -56,12 +64,9 @@ it('is a function', function () { | ||
| it('renders empty region when no root app available', function () { | ||
| var MyComponent = _react2.default.createClass({ | ||
| displayName: 'MyComponent', | ||
| render: function render() { | ||
| return _react2.default.createElement( | ||
| 'div', | ||
| { id: 'my-component' }, | ||
| _react2.default.createElement(_Region2.default, { name: 'left-sidebar' }) | ||
| ); | ||
| } | ||
| }); | ||
| function MyComponent() { | ||
| return _react2.default.createElement( | ||
| 'div', | ||
| { id: 'my-component' }, | ||
| _react2.default.createElement(_Region2.default, { name: 'left-sidebar' }) | ||
| ); | ||
| } | ||
@@ -71,4 +76,4 @@ _reactDom2.default.render(_react2.default.createElement(MyComponent, null), document.getElementById('root')); | ||
| var element = document.getElementById('my-component'); | ||
| (0, _chai.expect)(element.innerHTML.startsWith('<noscript ')).to.equal(true); | ||
| (0, _chai.expect)(element.innerHTML.endsWith('</noscript>')).to.equal(true); | ||
| (0, _chai.expect)(element.innerHTML.startsWith('<!-- react-empty: ')).to.equal(true); | ||
| (0, _chai.expect)(element.innerHTML.endsWith(' -->')).to.equal(true); | ||
| }); | ||
@@ -80,12 +85,9 @@ | ||
| // root | ||
| var RootComponent = _react2.default.createClass({ | ||
| displayName: 'RootComponent', | ||
| render: function render() { | ||
| return _react2.default.createElement( | ||
| 'div', | ||
| null, | ||
| _react2.default.createElement(_Region2.default, { name: 'sidebar' }) | ||
| ); | ||
| } | ||
| }); | ||
| function RootComponent() { | ||
| return _react2.default.createElement( | ||
| 'div', | ||
| null, | ||
| _react2.default.createElement(_Region2.default, { name: 'sidebar' }) | ||
| ); | ||
| } | ||
| var RootApp = (0, _frint.createApp)({ | ||
@@ -97,12 +99,9 @@ name: 'RootApp', | ||
| // apps | ||
| var App1Component = _react2.default.createClass({ | ||
| displayName: 'App1Component', | ||
| render: function render() { | ||
| return _react2.default.createElement( | ||
| 'p', | ||
| null, | ||
| 'App 1' | ||
| ); | ||
| } | ||
| }); | ||
| function App1Component() { | ||
| return _react2.default.createElement( | ||
| 'p', | ||
| null, | ||
| 'App 1' | ||
| ); | ||
| } | ||
| var App1 = (0, _frint.createApp)({ | ||
@@ -113,12 +112,9 @@ name: 'App1', | ||
| var App2Component = _react2.default.createClass({ | ||
| displayName: 'App2Component', | ||
| render: function render() { | ||
| return _react2.default.createElement( | ||
| 'p', | ||
| null, | ||
| 'App 2' | ||
| ); | ||
| } | ||
| }); | ||
| function App2Component() { | ||
| return _react2.default.createElement( | ||
| 'p', | ||
| null, | ||
| 'App 2' | ||
| ); | ||
| } | ||
| var App2 = (0, _frint.createApp)({ | ||
@@ -151,13 +147,10 @@ name: 'App2', | ||
| // root | ||
| var RootComponent = _react2.default.createClass({ | ||
| displayName: 'RootComponent', | ||
| render: function render() { | ||
| return _react2.default.createElement( | ||
| 'div', | ||
| null, | ||
| _react2.default.createElement(_Region2.default, { name: 'sidebar' }), | ||
| _react2.default.createElement(_Region2.default, { name: 'footer' }) | ||
| ); | ||
| } | ||
| }); | ||
| function RootComponent() { | ||
| return _react2.default.createElement( | ||
| 'div', | ||
| null, | ||
| _react2.default.createElement(_Region2.default, { name: 'sidebar' }), | ||
| _react2.default.createElement(_Region2.default, { name: 'footer' }) | ||
| ); | ||
| } | ||
| var RootApp = (0, _frint.createApp)({ | ||
@@ -189,35 +182,49 @@ name: 'RootApp', | ||
| var rootComponentInstance = void 0; // @TODO: hack | ||
| var RootComponent = _react2.default.createClass({ | ||
| displayName: 'RootComponent', | ||
| render: function render() { | ||
| rootComponentInstance = this; | ||
| return _react2.default.createElement( | ||
| 'div', | ||
| null, | ||
| _react2.default.createElement( | ||
| 'p', | ||
| { id: 'root-text' }, | ||
| 'Hello World from Root' | ||
| ), | ||
| _react2.default.createElement(_Region2.default, { name: 'sidebar' }), | ||
| _react2.default.createElement( | ||
| 'ul', | ||
| { classNames: 'todos' }, | ||
| todos.map(function (todo) { | ||
| return _react2.default.createElement( | ||
| 'li', | ||
| { key: 'todo-item-' + todo.id }, | ||
| todo.title, | ||
| _react2.default.createElement(_Region2.default, { | ||
| data: { todo: todo }, | ||
| name: 'todo-item', | ||
| uniqueKey: 'todo-item-' + todo.id | ||
| }) | ||
| ); | ||
| }) | ||
| ) | ||
| ); | ||
| var RootComponent = function (_React$Component) { | ||
| _inherits(RootComponent, _React$Component); | ||
| function RootComponent() { | ||
| _classCallCheck(this, RootComponent); | ||
| return _possibleConstructorReturn(this, (RootComponent.__proto__ || Object.getPrototypeOf(RootComponent)).apply(this, arguments)); | ||
| } | ||
| }); | ||
| _createClass(RootComponent, [{ | ||
| key: 'render', | ||
| value: function render() { | ||
| rootComponentInstance = this; | ||
| return _react2.default.createElement( | ||
| 'div', | ||
| null, | ||
| _react2.default.createElement( | ||
| 'p', | ||
| { id: 'root-text' }, | ||
| 'Hello World from Root' | ||
| ), | ||
| _react2.default.createElement(_Region2.default, { name: 'sidebar' }), | ||
| _react2.default.createElement( | ||
| 'ul', | ||
| { className: 'todos' }, | ||
| todos.map(function (todo) { | ||
| return _react2.default.createElement( | ||
| 'li', | ||
| { key: 'todo-item-' + todo.id }, | ||
| todo.title, | ||
| _react2.default.createElement(_Region2.default, { | ||
| data: { todo: todo }, | ||
| name: 'todo-item', | ||
| uniqueKey: 'todo-item-' + todo.id | ||
| }) | ||
| ); | ||
| }) | ||
| ) | ||
| ); | ||
| } | ||
| }]); | ||
| return RootComponent; | ||
| }(_react2.default.Component); | ||
| var RootApp = (0, _frint.createApp)({ | ||
@@ -229,12 +236,9 @@ name: 'RootApp', | ||
| // apps | ||
| var App1Component = _react2.default.createClass({ | ||
| displayName: 'App1Component', | ||
| render: function render() { | ||
| return _react2.default.createElement( | ||
| 'p', | ||
| { id: 'app1-text' }, | ||
| 'Hello World from App1' | ||
| ); | ||
| } | ||
| }); | ||
| function App1Component() { | ||
| return _react2.default.createElement( | ||
| 'p', | ||
| { id: 'app1-text' }, | ||
| 'Hello World from App1' | ||
| ); | ||
| } | ||
| var App1 = (0, _frint.createApp)({ | ||
@@ -248,13 +252,11 @@ name: 'App1', | ||
| }).get$(); | ||
| })(_react2.default.createClass({ | ||
| displayName: 'App2Component', | ||
| render: function render() { | ||
| return _react2.default.createElement( | ||
| 'p', | ||
| { className: 'app2-text' }, | ||
| 'Hello World from App2 - ', | ||
| this.props.todo.title | ||
| ); | ||
| } | ||
| })); | ||
| })(function (_ref) { | ||
| var todo = _ref.todo; | ||
| return _react2.default.createElement( | ||
| 'p', | ||
| { className: 'app2-text' }, | ||
| 'Hello World from App2 - ', | ||
| todo.title | ||
| ); | ||
| }); | ||
| var App2 = (0, _frint.createApp)({ | ||
@@ -307,35 +309,49 @@ name: 'App2', | ||
| var rootComponentInstance = void 0; // @TODO: hack | ||
| var RootComponent = _react2.default.createClass({ | ||
| displayName: 'RootComponent', | ||
| render: function render() { | ||
| rootComponentInstance = this; | ||
| return _react2.default.createElement( | ||
| 'div', | ||
| null, | ||
| _react2.default.createElement( | ||
| 'p', | ||
| { id: 'root-text' }, | ||
| 'Hello World from Root' | ||
| ), | ||
| _react2.default.createElement(_Region2.default, { name: 'sidebar' }), | ||
| _react2.default.createElement( | ||
| 'ul', | ||
| { classNames: 'todos' }, | ||
| todos.map(function (todo) { | ||
| return _react2.default.createElement( | ||
| 'li', | ||
| { key: 'todo-item-' + todo.id }, | ||
| todo.title, | ||
| _react2.default.createElement(_Region2.default, { | ||
| data: { todo: todo }, | ||
| name: 'todo-item', | ||
| uniqueKey: 'todo-item-' + todo.id | ||
| }) | ||
| ); | ||
| }) | ||
| ) | ||
| ); | ||
| var RootComponent = function (_React$Component2) { | ||
| _inherits(RootComponent, _React$Component2); | ||
| function RootComponent() { | ||
| _classCallCheck(this, RootComponent); | ||
| return _possibleConstructorReturn(this, (RootComponent.__proto__ || Object.getPrototypeOf(RootComponent)).apply(this, arguments)); | ||
| } | ||
| }); | ||
| _createClass(RootComponent, [{ | ||
| key: 'render', | ||
| value: function render() { | ||
| rootComponentInstance = this; | ||
| return _react2.default.createElement( | ||
| 'div', | ||
| null, | ||
| _react2.default.createElement( | ||
| 'p', | ||
| { id: 'root-text' }, | ||
| 'Hello World from Root' | ||
| ), | ||
| _react2.default.createElement(_Region2.default, { name: 'sidebar' }), | ||
| _react2.default.createElement( | ||
| 'ul', | ||
| { className: 'todos' }, | ||
| todos.map(function (todo) { | ||
| return _react2.default.createElement( | ||
| 'li', | ||
| { key: 'todo-item-' + todo.id }, | ||
| todo.title, | ||
| _react2.default.createElement(_Region2.default, { | ||
| data: { todo: todo }, | ||
| name: 'todo-item', | ||
| uniqueKey: 'todo-item-' + todo.id | ||
| }) | ||
| ); | ||
| }) | ||
| ) | ||
| ); | ||
| } | ||
| }]); | ||
| return RootComponent; | ||
| }(_react2.default.Component); | ||
| var RootApp = (0, _frint.createApp)({ | ||
@@ -351,13 +367,11 @@ name: 'RootApp', | ||
| }).get$(); | ||
| })(_react2.default.createClass({ | ||
| displayName: 'AppComponent', | ||
| render: function render() { | ||
| return _react2.default.createElement( | ||
| 'p', | ||
| { className: 'app-text' }, | ||
| 'Hello World from App - ', | ||
| this.props.todo.title | ||
| ); | ||
| } | ||
| })); | ||
| })(function (_ref2) { | ||
| var todo = _ref2.todo; | ||
| return _react2.default.createElement( | ||
| 'p', | ||
| { className: 'app-text' }, | ||
| 'Hello World from App - ', | ||
| todo.title | ||
| ); | ||
| }); | ||
| var beforeDestroyCalled = false; | ||
@@ -364,0 +378,0 @@ var App = (0, _frint.createApp)({ |
@@ -5,4 +5,2 @@ 'use strict'; | ||
| var _chai2 = _interopRequireDefault(_chai); | ||
| var _react = require('react'); | ||
@@ -12,14 +10,4 @@ | ||
| var _reactDom = require('react-dom'); | ||
| var _frint = require('frint'); | ||
| var _reactDom2 = _interopRequireDefault(_reactDom); | ||
| var _sinon = require('sinon'); | ||
| var _sinon2 = _interopRequireDefault(_sinon); | ||
| var _sinonChai = require('sinon-chai'); | ||
| var _sinonChai2 = _interopRequireDefault(_sinonChai); | ||
| var _render = require('./render'); | ||
@@ -32,37 +20,27 @@ | ||
| /* eslint-disable import/no-extraneous-dependencies, func-names */ | ||
| /* globals after, before, describe, document, it */ | ||
| _chai2.default.use(_sinonChai2.default); | ||
| var FakeComponent = _react2.default.createClass({ | ||
| displayName: 'FakeComponent', | ||
| render: function render() { | ||
| return null; | ||
| /* globals describe, document, it */ | ||
| describe('frint-react › render', function () { | ||
| function TestComponent() { | ||
| return _react2.default.createElement( | ||
| 'p', | ||
| null, | ||
| 'Hello World from TestApp!' | ||
| ); | ||
| } | ||
| }); | ||
| var sandbox = _sinon2.default.sandbox.create(); | ||
| describe('frint-react › render', function () { | ||
| var appStub = { | ||
| afterMount: sandbox.stub(), | ||
| beforeMount: sandbox.stub(), | ||
| beforeUnmount: sandbox.stub(), | ||
| get: sandbox.stub().returns(FakeComponent) | ||
| }; | ||
| var targetElement = void 0; | ||
| before(function () { | ||
| sandbox.spy(_react2.default, 'createClass'); | ||
| sandbox.spy(_reactDom2.default, 'render'); | ||
| targetElement = document.getElementById('root'); | ||
| (0, _render2.default)(appStub, targetElement); | ||
| var TestApp = (0, _frint.createApp)({ | ||
| name: 'TestApp', | ||
| providers: [{ | ||
| name: 'component', | ||
| useValue: TestComponent | ||
| }] | ||
| }); | ||
| after(function () { | ||
| sandbox.restore(); | ||
| }); | ||
| it('renders app to DOM', function () { | ||
| var app = new TestApp(); | ||
| var rootEl = document.getElementById('root'); | ||
| (0, _render2.default)(app, rootEl); | ||
| it('calls app\'s get method', function () { | ||
| (0, _chai.expect)(appStub.get).to.be.callCount(1); | ||
| (0, _chai.expect)(rootEl.innerHTML).to.contain('Hello World from TestApp!</p>'); | ||
| }); | ||
| }); |
| { | ||
| "name": "frint-react", | ||
| "version": "1.4.2", | ||
| "version": "2.0.0", | ||
| "description": "React package for Frint", | ||
@@ -38,5 +38,6 @@ "main": "lib/index.js", | ||
| "frint-test-utils": "^1.3.0", | ||
| "react": "^0.14.8", | ||
| "react-addons-test-utils": "^0.14.8", | ||
| "react-dom": "^0.14.8" | ||
| "prop-types": "^15.5.10", | ||
| "react": "^15.5.4", | ||
| "react-dom": "^15.5.4", | ||
| "react-test-renderer": "^15.5.4" | ||
| }, | ||
@@ -43,0 +44,0 @@ "bugs": { |
147
README.md
@@ -33,3 +33,3 @@ # frint-react | ||
| ``` | ||
| $ npm install --save frint-react | ||
| $ npm install --save react react-dom prop-types frint-react | ||
| ``` | ||
@@ -41,5 +41,6 @@ | ||
| <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.4/lodash.min.js"></script> | ||
| <script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/5.0.1/Rx.min.js"></script> | ||
| <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.8/react.min.js"></script> | ||
| <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.8/react-dom.min.js"></script> | ||
| <script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/5.4.0/Rx.min.js"></script> | ||
| <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.5.4/react.min.js"></script> | ||
| <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.5.4/react-dom.min.js"></script> | ||
| <script src="https://unpkg.com/prop-types@15.5.10/prop-types.js"></script> | ||
@@ -84,11 +85,9 @@ <script src="https://unpkg.com/frint@latest/dist/frint.min.js"></script> | ||
| ```js | ||
| const Root = React.createClass({ | ||
| render() { | ||
| return ( | ||
| <div> | ||
| Hello World | ||
| </div> | ||
| ); | ||
| } | ||
| }); | ||
| function Root() { | ||
| return ( | ||
| <div> | ||
| <p>Hello World</p> | ||
| </div> | ||
| ); | ||
| } | ||
| ``` | ||
@@ -140,13 +139,11 @@ | ||
| const Root = React.createClass({ | ||
| render() { | ||
| return ( | ||
| <div> | ||
| <p>Hello World from Root App!</p> | ||
| function Root() { | ||
| return ( | ||
| <div> | ||
| <p>Hello World from Root App!</p> | ||
| <Region name="sidebar" /> | ||
| </div> | ||
| ); | ||
| } | ||
| }); | ||
| <Region name="sidebar" /> | ||
| </div> | ||
| ); | ||
| } | ||
| ``` | ||
@@ -160,7 +157,7 @@ | ||
| const AppComponent = React.createClass({ | ||
| render() { | ||
| return <p>I am App</p>; | ||
| } | ||
| }); | ||
| function AppComponent() { | ||
| return ( | ||
| <p>I am App</p> | ||
| ); | ||
| } | ||
@@ -196,17 +193,15 @@ const App = createApp({ | ||
| ```js | ||
| const Root = React.createClass({ | ||
| render() { | ||
| const data = { | ||
| foo: 'bar' | ||
| }; | ||
| function Root() { | ||
| const data = { | ||
| foo: 'bar' | ||
| }; | ||
| return ( | ||
| <div> | ||
| <p>Hello World from Root App!</p> | ||
| return ( | ||
| <div> | ||
| <p>Hello World from Root App!</p> | ||
| <Region name="sidebar" data={data} /> | ||
| </div> | ||
| ); | ||
| } | ||
| }); | ||
| <Region name="sidebar" data={data} /> | ||
| </div> | ||
| ); | ||
| } | ||
| ``` | ||
@@ -263,7 +258,7 @@ | ||
| ```js | ||
| const MyComponent = React.createClass({ | ||
| render() { | ||
| return <p>Interval: {this.props.interval}</p>; | ||
| } | ||
| }); | ||
| function MyComponent(props) { | ||
| return ( | ||
| <p>Interval: {props.interval}</p> | ||
| ); | ||
| } | ||
| ``` | ||
@@ -382,29 +377,27 @@ | ||
| ```js | ||
| const MyComponent = React.createClass({ | ||
| render() { | ||
| const todos = [ | ||
| { id: '1', title: 'First todo' }, | ||
| { id: '2', title: 'Second todo' }, | ||
| { id: '3', title: 'Third todo' }, | ||
| ]; | ||
| function MyComponent() { | ||
| const todos = [ | ||
| { id: '1', title: 'First todo' }, | ||
| { id: '2', title: 'Second todo' }, | ||
| { id: '3', title: 'Third todo' }, | ||
| ]; | ||
| return ( | ||
| <ul> | ||
| {todos.map((todo) => { | ||
| return ( | ||
| <li> | ||
| <h3>{todo.title}</h3> | ||
| return ( | ||
| <ul> | ||
| {todos.map((todo) => { | ||
| return ( | ||
| <li> | ||
| <h3>{todo.title}</h3> | ||
| <Region | ||
| name="todo-item" | ||
| data={{ todo }} | ||
| uniqueKey={`todo-item-${todo.id}`} | ||
| /> | ||
| </li> | ||
| ); | ||
| })} | ||
| </ul> | ||
| ); | ||
| } | ||
| }); | ||
| <Region | ||
| name="todo-item" | ||
| data={{ todo }} | ||
| uniqueKey={`todo-item-${todo.id}`} | ||
| /> | ||
| </li> | ||
| ); | ||
| })} | ||
| </ul> | ||
| ); | ||
| } | ||
| ``` | ||
@@ -421,9 +414,9 @@ | ||
| const AppComponent = React.createClass({ | ||
| render () { | ||
| const { todo } = this.props; | ||
| function AppComponent(props) { | ||
| const { todo } = props; | ||
| return <p>Todo in upper case: {todo.title.toUpperCase()}</p> | ||
| } | ||
| }); | ||
| return ( | ||
| <p>Todo in upper case: {todo.title.toUpperCase()}</p> | ||
| ); | ||
| } | ||
@@ -430,0 +423,0 @@ const ObservedAppComponent = observe(function (app) { |
Sorry, the diff of this file is too big to display
New alerts
License Policy Violation
LicenseThis 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
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by58.26%
159084
- Lines of code
- increased by54.09%
2960
Worsened metrics
- Dev dependency count
- increased by16.67%
7
- Number of lines in readme file
- decreased by-1.18%
588
No dependency changes