reusable - npm Package Compare versions

Comparing version 1.0.0-alpha.1 to 1.0.0-alpha.2

dist/reuse.js

@@ -1,2 +0,2 @@
-var e,t,r=require("react"),n=(e=r)&&"object"==typeof e&&"default"in e?e.default:e,o=function(e,t){if(!e&&t||e&&!t)return!1;if(!e&&!t)return!0;for(var r=0,n=Object.keys(e).concat(Object.keys(t));r<n.length;r+=1){var o=n[r];if(e[o]!==t[o])return!1}return!0},s=function(e){if(!t)throw new Error("Must provide a store first");i&&t.getUnit(i).addDependency(e);var r=t.getUnit(e);if(!r.cachedValue){var n=i,o=c;i=e,c=0,r.cachedValue=e(),r.effects.forEach(function(e){e.cleanup&&("function"==typeof e.cleanup?e.cleanup():console.error("Cleanup function "+e.cleanup+" is not a function")),e.cleanup=e.effectFn()}),r.effects=[],i=n,c=o}return r.cachedValue},u=function(e,t){return"function"==typeof t?t(e):t},i=null,c=0,a=function(){var e={unitContexts:new Map,getUnit:function(t){if(!e.unitContexts.has(t)){var r={unit:t,hooks:[],effects:[],subscribers:[],dependencies:new Map,cachedValue:void 0,subscribe:function(e){return r.subscribers.push(e),function(){return r.unsubscribe(e)}},unsubscribe:function(e){r.subscribers=r.subscribers.filter(function(t){return t!==e})},addDependency:function(t){var n=e.getUnit(t);if(!r.dependencies.has(t)){var o=n.subscribe(r.update);r.dependencies.set(t,o)}},update:function(){var e=r.cachedValue;r.cachedValue=void 0;var t=s(r.unit);t!==e&&r.subscribers.forEach(function(e){e(t)})}};e.unitContexts.set(t,r)}return e.unitContexts.get(t)},subscribe:function(t,r){return e.getUnit(t).subscribe(r)}};return e},p=function(e){return t=e},f=function(e,r){if(!i)throw new Error("reuseMemo hook cannot be called outside of a reuse statement");if(!t)throw new Error("Must provide a store first");var n=t.getUnit(i);if(n.hooks.length<=c){var o=c;n.hooks[c]={state:e,setState:function(e){var t=r(n.hooks[o].state,e);n.hooks[o].state=t,n.update()},type:"state"}}var s=n.hooks[c];return c++,[s.state,s.setState]},d=r.createContext(),h=function(e){function t(){for(var t=[],r=arguments.length;r--;)t[r]=arguments[r];e.apply(this,t),this.state={result:void 0}}return e&&(t.__proto__=e),(t.prototype=Object.create(e&&e.prototype)).constructor=t,t.prototype.componentDidMount=function(){var e=this,t=this.context;p(t),this.unsubscribe=t.subscribe(this.props.unit,function(){e.updateState()}),this.updateState()},t.prototype.updateState=function(){this.setState({result:s(this.props.unit)})},t.prototype.componentWillUnmount=function(){this.unsubscribe()},t.prototype.render=function(){var e=this.state.result;return e?(0,this.props.children)(e):null},t}(n.Component);h.contextType=d,exports.reuse=s,exports.createStore=a,exports.setCurrentStore=p,exports.reuseState=function(e){return f(e,u)},exports.reuseReducer=f,exports.reuseMemo=function(e,r){if(!i)throw new Error("reuseMemo hook cannot be called outside of a reuse statement");if(!t)throw new Error("Must provide a store first");var n=t.getUnit(i);n.hooks.length<=c&&(n.hooks[c]={value:void 0,deps:void 0,type:"memo"});var s=n.hooks[c];return c++,o(s.deps,r)&&r||(s.value=e(),s.deps=r),s.value},exports.reuseEffect=function(e,r){if(!i)throw new Error("reuseMemo hook cannot be called outside of a reuse statement");if(!t)throw new Error("Must provide a store first");var n=t.getUnit(i);n.hooks.length<=c&&(n.hooks[c]={deps:void 0,effectFn:e,cleanup:void 0,type:"effect"});var s=n.hooks[c];c++,o(s.deps,r)&&r||(n.effects.push(s),s.deps=r,s.effectFn=e)},exports.ReuseProvider=function(e){var t=e.store;void 0===t&&(t=null);var o=e.children,s=r.useRef(t);return s.current||(s.current=a()),n.createElement(d.Provider,{value:s.current},o)},exports.useReuse=function(e){var t=r.useContext(d);p(t);var n=r.useState(function(){return s(e)}),o=n[0],u=n[1];return r.useEffect(function(){return t.subscribe(e,function(){var t=s(e);u(t)})},[]),o},exports.withReuse=function(e,t){return function(r){var u=function(u){function i(){for(var e=[],t=arguments.length;t--;)e[t]=arguments[t];u.apply(this,e),this.state={mappedProps:{}}}return u&&(i.__proto__=u),(i.prototype=Object.create(u&&u.prototype)).constructor=i,i.prototype.componentDidMount=function(){var e=this,r=this.context;p(r),this.unsubscribes=t.map(function(t){return r.subscribe(t,function(){e.updateStateToProps()})}),this.updateStateToProps()},i.prototype.componentWillUnmount=function(){this.unsubscribes.forEach(function(e){return e()})},i.prototype.updateStateToProps=function(){var r=t.map(function(e){return s(e)}),n=e(r);o(this.state.mappedProps,n)||this.setState({mappedProps:n})},i.prototype.render=function(){var e=this.props,t=e.forwardedRef,o=function(e,t){var r={};for(var n in e)Object.prototype.hasOwnProperty.call(e,n)&&-1===t.indexOf(n)&&(r[n]=e[n]);return r}(e,["forwardedRef"]);return n.createElement(r,Object.assign({},{ref:t},o,this.state.mappedProps))},i}(n.Component);function i(e,t){return n.createElement(u,Object.assign({},e,{forwardedRef:t}))}return u.contextType=d,i.displayName="withReuse("+(r.displayName||r.name)+")",n.forwardRef(i)}},exports.Reuse=h;
+var e,t,r=(e=require("react"))&&"object"==typeof e&&"default"in e?e.default:e,n=function(e,t){if(!e&&t||e&&!t)return!1;if(!e&&!t)return!0;for(var r=0,n=Object.keys(e).concat(Object.keys(t));r<n.length;r+=1){var o=n[r];if(e[o]!==t[o])return!1}return!0},o=function(e){if(!t)throw new Error("Must provide a store first");u&&t.getUnit(u).addDependency(e);var r=t.getUnit(e);if(!r.cachedValue){var n=u,o=i;u=e,i=0,r.cachedValue=e(),r.effects.forEach(function(e){e.cleanup&&("function"==typeof e.cleanup?e.cleanup():console.error("Cleanup function "+e.cleanup+" is not a function")),e.cleanup=e.effectFn()}),r.effects=[],u=n,i=o}return r.cachedValue},s=function(e,t){return"function"==typeof t?t(e):t},u=null,i=0,c=function(){var e={unitContexts:new Map,getUnit:function(t){if(!e.unitContexts.has(t)){var r={unit:t,hooks:[],effects:[],subscribers:[],dependencies:new Map,cachedValue:void 0,subscribe:function(e){return r.subscribers.push(e),function(){return r.unsubscribe(e)}},unsubscribe:function(e){r.subscribers=r.subscribers.filter(function(t){return t!==e})},addDependency:function(t){var n=e.getUnit(t);if(!r.dependencies.has(t)){var o=n.subscribe(r.update);r.dependencies.set(t,o)}},update:function(){var e=r.cachedValue;r.cachedValue=void 0;var t=o(r.unit);t!==e&&r.subscribers.forEach(function(e){e(t)})}};e.unitContexts.set(t,r)}return e.unitContexts.get(t)},subscribe:function(t,r){return e.getUnit(t).subscribe(r)}};return e},a=function(e){return t=e},p=function(e,r){if(!u)throw new Error("reuseMemo hook cannot be called outside of a reuse statement");if(!t)throw new Error("Must provide a store first");var n=t.getUnit(u);if(n.hooks.length<=i){var o=i;n.hooks[i]={state:e,setState:function(e){var t=r(n.hooks[o].state,e);n.hooks[o].state=t,n.update()},type:"state"}}var s=n.hooks[i];return i++,[s.state,s.setState]},f=function(e,r){if(!u)throw new Error("reuseMemo hook cannot be called outside of a reuse statement");if(!t)throw new Error("Must provide a store first");var o=t.getUnit(u);o.hooks.length<=i&&(o.hooks[i]={value:void 0,deps:void 0,type:"memo"});var s=o.hooks[i];return i++,n(s.deps,r)&&r||(s.value=e(),s.deps=r),s.value},d=r.useRef,h=r.useState,l=r.useContext,v=r.useEffect,b=r.createContext(),y=function(e){function t(){for(var t=[],r=arguments.length;r--;)t[r]=arguments[r];e.apply(this,t),this.state={result:void 0}}return e&&(t.__proto__=e),(t.prototype=Object.create(e&&e.prototype)).constructor=t,t.prototype.componentDidMount=function(){var e=this,t=this.context;a(t),this.unsubscribe=t.subscribe(this.props.unit,function(){e.updateState()}),this.updateState()},t.prototype.updateState=function(){this.setState({result:o(this.props.unit)})},t.prototype.componentWillUnmount=function(){this.unsubscribe()},t.prototype.render=function(){var e=this.state.result;return e?(0,this.props.children)(e):null},t}(r.Component);y.contextType=b,exports.reuse=o,exports.createStore=c,exports.setCurrentStore=a,exports.reuseState=function(e){return p(e,s)},exports.reuseReducer=p,exports.reuseMemo=f,exports.reuseCallback=function(e,t){return f(function(){return e},t)},exports.reuseEffect=function(e,r){if(!u)throw new Error("reuseMemo hook cannot be called outside of a reuse statement");if(!t)throw new Error("Must provide a store first");var o=t.getUnit(u);o.hooks.length<=i&&(o.hooks[i]={deps:void 0,effectFn:e,cleanup:void 0,type:"effect"});var s=o.hooks[i];i++,n(s.deps,r)&&r||(o.effects.push(s),s.deps=r,s.effectFn=e)},exports.ReuseContext=b,exports.ReuseProvider=function(e){var t=e.store;void 0===t&&(t=null);var n=e.children,o=d(t);return o.current||(o.current=c()),r.createElement(b.Provider,{value:o.current},n)},exports.useReuse=function(e){var t=l(b);a(t);var r=h(function(){return o(e)}),n=r[0],s=r[1];return v(function(){return t.subscribe(e,function(){var t=o(e);s(t)})},[]),n},exports.withReuse=function(e,t){return function(s){var u=function(u){function i(){for(var e=[],t=arguments.length;t--;)e[t]=arguments[t];u.apply(this,e),this.state={mappedProps:{}}}return u&&(i.__proto__=u),(i.prototype=Object.create(u&&u.prototype)).constructor=i,i.prototype.componentDidMount=function(){var e=this,r=this.context;a(r),this.unsubscribes=t.map(function(t){return r.subscribe(t,function(){e.updateStateToProps()})}),this.updateStateToProps()},i.prototype.componentWillUnmount=function(){this.unsubscribes.forEach(function(e){return e()})},i.prototype.updateStateToProps=function(){var r=t.map(function(e){return o(e)}),s=e(r);n(this.state.mappedProps,s)||this.setState({mappedProps:s})},i.prototype.render=function(){var e=this.props,t=e.forwardedRef,n=function(e,t){var r={};for(var n in e)Object.prototype.hasOwnProperty.call(e,n)&&-1===t.indexOf(n)&&(r[n]=e[n]);return r}(e,["forwardedRef"]);return r.createElement(s,Object.assign({},{ref:t},n,this.state.mappedProps))},i}(r.Component);function i(e,t){return r.createElement(u,Object.assign({},e,{forwardedRef:t}))}return u.contextType=b,i.displayName="withReuse("+(s.displayName||s.name)+")",r.forwardRef(i)}},exports.Reuse=y;
 //# sourceMappingURL=reuse.js.map

dist/reuse.umd.js

@@ -1,2 +0,2 @@
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("react")):"function"==typeof define&&define.amd?define(["exports","react"],t):t(e.reusable={},e.react)}(this,function(e,t){var r,n="default"in t?t.default:t,o=function(e,t){if(!e&&t||e&&!t)return!1;if(!e&&!t)return!0;for(var r=0,n=Object.keys(e).concat(Object.keys(t));r<n.length;r+=1){var o=n[r];if(e[o]!==t[o])return!1}return!0},u=function(e){if(!r)throw new Error("Must provide a store first");i&&r.getUnit(i).addDependency(e);var t=r.getUnit(e);if(!t.cachedValue){var n=i,o=c;i=e,c=0,t.cachedValue=e(),t.effects.forEach(function(e){e.cleanup&&("function"==typeof e.cleanup?e.cleanup():console.error("Cleanup function "+e.cleanup+" is not a function")),e.cleanup=e.effectFn()}),t.effects=[],i=n,c=o}return t.cachedValue},s=function(e,t){return"function"==typeof t?t(e):t},i=null,c=0,a=function(){var e={unitContexts:new Map,getUnit:function(t){if(!e.unitContexts.has(t)){var r={unit:t,hooks:[],effects:[],subscribers:[],dependencies:new Map,cachedValue:void 0,subscribe:function(e){return r.subscribers.push(e),function(){return r.unsubscribe(e)}},unsubscribe:function(e){r.subscribers=r.subscribers.filter(function(t){return t!==e})},addDependency:function(t){var n=e.getUnit(t);if(!r.dependencies.has(t)){var o=n.subscribe(r.update);r.dependencies.set(t,o)}},update:function(){var e=r.cachedValue;r.cachedValue=void 0;var t=u(r.unit);t!==e&&r.subscribers.forEach(function(e){e(t)})}};e.unitContexts.set(t,r)}return e.unitContexts.get(t)},subscribe:function(t,r){return e.getUnit(t).subscribe(r)}};return e},f=function(e){return r=e},p=function(e,t){if(!i)throw new Error("reuseMemo hook cannot be called outside of a reuse statement");if(!r)throw new Error("Must provide a store first");var n=r.getUnit(i);if(n.hooks.length<=c){var o=c;n.hooks[c]={state:e,setState:function(e){var r=t(n.hooks[o].state,e);n.hooks[o].state=r,n.update()},type:"state"}}var u=n.hooks[c];return c++,[u.state,u.setState]},d=t.createContext(),h=function(e){function t(){for(var t=[],r=arguments.length;r--;)t[r]=arguments[r];e.apply(this,t),this.state={result:void 0}}return e&&(t.__proto__=e),(t.prototype=Object.create(e&&e.prototype)).constructor=t,t.prototype.componentDidMount=function(){var e=this,t=this.context;f(t),this.unsubscribe=t.subscribe(this.props.unit,function(){e.updateState()}),this.updateState()},t.prototype.updateState=function(){this.setState({result:u(this.props.unit)})},t.prototype.componentWillUnmount=function(){this.unsubscribe()},t.prototype.render=function(){var e=this.state.result;return e?(0,this.props.children)(e):null},t}(n.Component);h.contextType=d,e.reuse=u,e.createStore=a,e.setCurrentStore=f,e.reuseState=function(e){return p(e,s)},e.reuseReducer=p,e.reuseMemo=function(e,t){if(!i)throw new Error("reuseMemo hook cannot be called outside of a reuse statement");if(!r)throw new Error("Must provide a store first");var n=r.getUnit(i);n.hooks.length<=c&&(n.hooks[c]={value:void 0,deps:void 0,type:"memo"});var u=n.hooks[c];return c++,o(u.deps,t)&&t||(u.value=e(),u.deps=t),u.value},e.reuseEffect=function(e,t){if(!i)throw new Error("reuseMemo hook cannot be called outside of a reuse statement");if(!r)throw new Error("Must provide a store first");var n=r.getUnit(i);n.hooks.length<=c&&(n.hooks[c]={deps:void 0,effectFn:e,cleanup:void 0,type:"effect"});var u=n.hooks[c];c++,o(u.deps,t)&&t||(n.effects.push(u),u.deps=t,u.effectFn=e)},e.ReuseProvider=function(e){var r=e.store;void 0===r&&(r=null);var o=e.children,u=t.useRef(r);return u.current||(u.current=a()),n.createElement(d.Provider,{value:u.current},o)},e.useReuse=function(e){var r=t.useContext(d);f(r);var n=t.useState(function(){return u(e)}),o=n[0],s=n[1];return t.useEffect(function(){return r.subscribe(e,function(){var t=u(e);s(t)})},[]),o},e.withReuse=function(e,t){return function(r){var s=function(s){function i(){for(var e=[],t=arguments.length;t--;)e[t]=arguments[t];s.apply(this,e),this.state={mappedProps:{}}}return s&&(i.__proto__=s),(i.prototype=Object.create(s&&s.prototype)).constructor=i,i.prototype.componentDidMount=function(){var e=this,r=this.context;f(r),this.unsubscribes=t.map(function(t){return r.subscribe(t,function(){e.updateStateToProps()})}),this.updateStateToProps()},i.prototype.componentWillUnmount=function(){this.unsubscribes.forEach(function(e){return e()})},i.prototype.updateStateToProps=function(){var r=t.map(function(e){return u(e)}),n=e(r);o(this.state.mappedProps,n)||this.setState({mappedProps:n})},i.prototype.render=function(){var e=this.props,t=e.forwardedRef,o=function(e,t){var r={};for(var n in e)Object.prototype.hasOwnProperty.call(e,n)&&-1===t.indexOf(n)&&(r[n]=e[n]);return r}(e,["forwardedRef"]);return n.createElement(r,Object.assign({},{ref:t},o,this.state.mappedProps))},i}(n.Component);function i(e,t){return n.createElement(s,Object.assign({},e,{forwardedRef:t}))}return s.contextType=d,i.displayName="withReuse("+(r.displayName||r.name)+")",n.forwardRef(i)}},e.Reuse=h});
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("react")):"function"==typeof define&&define.amd?define(["exports","react"],t):t(e.reusable={},e.react)}(this,function(e,t){t=t&&t.hasOwnProperty("default")?t.default:t;var r,n=function(e,t){if(!e&&t||e&&!t)return!1;if(!e&&!t)return!0;for(var r=0,n=Object.keys(e).concat(Object.keys(t));r<n.length;r+=1){var o=n[r];if(e[o]!==t[o])return!1}return!0},o=function(e){if(!r)throw new Error("Must provide a store first");s&&r.getUnit(s).addDependency(e);var t=r.getUnit(e);if(!t.cachedValue){var n=s,o=i;s=e,i=0,t.cachedValue=e(),t.effects.forEach(function(e){e.cleanup&&("function"==typeof e.cleanup?e.cleanup():console.error("Cleanup function "+e.cleanup+" is not a function")),e.cleanup=e.effectFn()}),t.effects=[],s=n,i=o}return t.cachedValue},u=function(e,t){return"function"==typeof t?t(e):t},s=null,i=0,c=function(){var e={unitContexts:new Map,getUnit:function(t){if(!e.unitContexts.has(t)){var r={unit:t,hooks:[],effects:[],subscribers:[],dependencies:new Map,cachedValue:void 0,subscribe:function(e){return r.subscribers.push(e),function(){return r.unsubscribe(e)}},unsubscribe:function(e){r.subscribers=r.subscribers.filter(function(t){return t!==e})},addDependency:function(t){var n=e.getUnit(t);if(!r.dependencies.has(t)){var o=n.subscribe(r.update);r.dependencies.set(t,o)}},update:function(){var e=r.cachedValue;r.cachedValue=void 0;var t=o(r.unit);t!==e&&r.subscribers.forEach(function(e){e(t)})}};e.unitContexts.set(t,r)}return e.unitContexts.get(t)},subscribe:function(t,r){return e.getUnit(t).subscribe(r)}};return e},a=function(e){return r=e},f=function(e,t){if(!s)throw new Error("reuseMemo hook cannot be called outside of a reuse statement");if(!r)throw new Error("Must provide a store first");var n=r.getUnit(s);if(n.hooks.length<=i){var o=i;n.hooks[i]={state:e,setState:function(e){var r=t(n.hooks[o].state,e);n.hooks[o].state=r,n.update()},type:"state"}}var u=n.hooks[i];return i++,[u.state,u.setState]},p=function(e,t){if(!s)throw new Error("reuseMemo hook cannot be called outside of a reuse statement");if(!r)throw new Error("Must provide a store first");var o=r.getUnit(s);o.hooks.length<=i&&(o.hooks[i]={value:void 0,deps:void 0,type:"memo"});var u=o.hooks[i];return i++,n(u.deps,t)&&t||(u.value=e(),u.deps=t),u.value},d=t.useRef,h=t.useState,l=t.useContext,v=t.useEffect,b=t.createContext(),y=function(e){function t(){for(var t=[],r=arguments.length;r--;)t[r]=arguments[r];e.apply(this,t),this.state={result:void 0}}return e&&(t.__proto__=e),(t.prototype=Object.create(e&&e.prototype)).constructor=t,t.prototype.componentDidMount=function(){var e=this,t=this.context;a(t),this.unsubscribe=t.subscribe(this.props.unit,function(){e.updateState()}),this.updateState()},t.prototype.updateState=function(){this.setState({result:o(this.props.unit)})},t.prototype.componentWillUnmount=function(){this.unsubscribe()},t.prototype.render=function(){var e=this.state.result;return e?(0,this.props.children)(e):null},t}(t.Component);y.contextType=b,e.reuse=o,e.createStore=c,e.setCurrentStore=a,e.reuseState=function(e){return f(e,u)},e.reuseReducer=f,e.reuseMemo=p,e.reuseCallback=function(e,t){return p(function(){return e},t)},e.reuseEffect=function(e,t){if(!s)throw new Error("reuseMemo hook cannot be called outside of a reuse statement");if(!r)throw new Error("Must provide a store first");var o=r.getUnit(s);o.hooks.length<=i&&(o.hooks[i]={deps:void 0,effectFn:e,cleanup:void 0,type:"effect"});var u=o.hooks[i];i++,n(u.deps,t)&&t||(o.effects.push(u),u.deps=t,u.effectFn=e)},e.ReuseContext=b,e.ReuseProvider=function(e){var r=e.store;void 0===r&&(r=null);var n=e.children,o=d(r);return o.current||(o.current=c()),t.createElement(b.Provider,{value:o.current},n)},e.useReuse=function(e){var t=l(b);a(t);var r=h(function(){return o(e)}),n=r[0],u=r[1];return v(function(){return t.subscribe(e,function(){var t=o(e);u(t)})},[]),n},e.withReuse=function(e,r){return function(u){var s=function(s){function i(){for(var e=[],t=arguments.length;t--;)e[t]=arguments[t];s.apply(this,e),this.state={mappedProps:{}}}return s&&(i.__proto__=s),(i.prototype=Object.create(s&&s.prototype)).constructor=i,i.prototype.componentDidMount=function(){var e=this,t=this.context;a(t),this.unsubscribes=r.map(function(r){return t.subscribe(r,function(){e.updateStateToProps()})}),this.updateStateToProps()},i.prototype.componentWillUnmount=function(){this.unsubscribes.forEach(function(e){return e()})},i.prototype.updateStateToProps=function(){var t=r.map(function(e){return o(e)}),u=e(t);n(this.state.mappedProps,u)||this.setState({mappedProps:u})},i.prototype.render=function(){var e=this.props,r=e.forwardedRef,n=function(e,t){var r={};for(var n in e)Object.prototype.hasOwnProperty.call(e,n)&&-1===t.indexOf(n)&&(r[n]=e[n]);return r}(e,["forwardedRef"]);return t.createElement(u,Object.assign({},{ref:r},n,this.state.mappedProps))},i}(t.Component);function i(e,r){return t.createElement(s,Object.assign({},e,{forwardedRef:r}))}return s.contextType=b,i.displayName="withReuse("+(u.displayName||u.name)+")",t.forwardRef(i)}},e.Reuse=y});
 //# sourceMappingURL=reuse.umd.js.map

package.json

 {
   "name": "reusable",
-  "version": "1.0.0-alpha.1",
+  "version": "1.0.0-alpha.2",
   "description": "",
@@ -8,3 +8,2 @@ "keywords": [],
   "source": "src/index.js",
-  "module": "dist/reuse.mjs",
   "unpkg": "dist/reuse.umd.js",
@@ -30,4 +29,4 @@ "dependencies": {},
     "example": "parcel ./example/index.html --out-dir exampleDist",
-    "build": "microbundle --jsx React.createElement",
-    "build:dev": "microbundle watch --jsx React.createElement",
+    "build": "microbundle --external all --jsx React.createElement",
+    "build:dev": "microbundle watch --external all --jsx React.createElement",
     "dev": "concurrently \"npm run build:dev\" \"npm run example\"",
@@ -34,0 +33,0 @@ "test": "jest"

README.md

 ## What?!
 
-Reuse is a library for reusing state between React components.
+Reusable is a library for reusing state and business logic between components.
 
+## Should I use this now?
+
+This is a very early stage alpha
+If you want to start experimenting with it and share feedback - yes
+If you need it for a production app - no
+
 ## Why?
 
-Reuse solves the problems that state management is meant for, without unnecessary boilerplate or magic.
+Reusable solves the problems that state management is meant for, with a simple and clean API, inspired and based on React hooks API.
 
@@ -14,2 +20,3 @@ React hooks introduced new ways of thinking about state and side-effects.
 - Reusability
+- Composability
 - Simplicity
@@ -21,57 +28,43 @@
 
-- single-store
-- immutable
-- reactive
-- simple
-- predictable
-- performant
-- allow for reuse, encapsulation and modularity
+- managing shareable state
+- handling side effects
+- memoization
+- reactive (subscription)
+
+## Design guidelines
+- immutability
+- reusability (duh)
+- performance
+- predictability
+- encapsulation (for shared libraries / lazy loading)
 - gradually adoptable
-- SSR
-- Time travelling
-- extendable
 
-## What about Context API?
+# Usage Guide
 
-The answer is pretty much the same for people asking about "Redux vs. Context API?"
-Using Context API directly gives a simple API to share state between components, but it doesn't provide other benefits that reuse provides, such as:
+## Basic Usage
+```javascript
+// reusables/counter.js
+import { reuseState } from "reusable";
 
-- Time Travelling
-- Single Store
-- Compound Selectors
-- Structure
-- Easily reuse code that needs state management using custom hooks
-- Easily provide open source components that allow control of state
+export const counter = () => reuseState(0);
+```
 
-## Is Reuse designed for large apps?
-
-Reuse is built with large-scale apps in mind.
-This is what affected most of the considerations when designing the solution:
-
-- The benefits of a single store and immutable data:
-  - Allow a maintainable architecture and prevent tangled cross-stores access
-  - Easier to reach deep UI states during development by overriding initial state
-  - Easier to achieve undo/redo, state persistence
-- The ability to do code reuse using custom hooks to prevent code duplication
-- Supporting Redux DevTools for better debugging & QA
-- Support lazy-loaded modules
-
-## Basic Usage
-
+## React Integration
 ```javascript
 // App.js:
-import { ReuseProvider, createStore } from "reuse";
-const initialState = {
-  counter: 1
-};
-const store = createStore(initialState); // no reducer?!
+import { ReuseProvider } from "reusable/react";
+
 const App = () => (
-  <ReuseProvider store={store}>
+  <ReuseProvider>
+    ...
+  </ReuseProvider>
 );
 
 // component #1:
-import { reuseState } from "reuse";
+import { useReusable } from "reusable/react";
+import { counter } from "./reusables/counter";
 
 const CompOne = () => {
-  const [counter, setCounter] = reuseState('counter');
+  const [counter, setCounter] = useReusable(counter);
+
   return ...
@@ -81,24 +74,27 @@ }
 // component #2:
-import { reuseState } from "reuse";
+import { useReusable } from "reusable/react";
+import { counter } from "./reusables/counter";
 
-const CompOne = () => {
-  const [counter, setCounter] = reuseState('counter'); // Yup, same counter as above
+const CompTwo = () => {
+  const [counter, setCounter] = useReusable(counter); // Yup, same counter
+
   return ...
 }
 ```
+## Compound State
 
-## Custom Hooks
-
 ```javascript
-// counter.state.js:
-import { reuseState } from "reuse";
+// reusables/counterState.js:
+import { reuseState } from "reusable";
 
-const useCounterState = () => {
-  const [counter, setCounter] = reuseState('counter');
+export const counterState = () => {
+  const [counter, setCounter] = reuseState(0);
+  const [step, setStep] = reuseState(0);
 
   return {
-    value: counter,
-    increment: () => setCounter(val => val + 1),
-    decrement: () => setCounter(val => val - 1),
-    reset: () => setCounter(1)
+    counter,
+    step,
+    setStep,
+    increment: () => setCounter(val => val + step),
+    decrement: () => setCounter(val => val - step)
   }
@@ -108,6 +104,8 @@ }
 // component:
-import {useCounterState} from '../states/counter.state';
+import { useReusable } from "reusable/react";
+import { counterState } from './reusables/counterState';
 
 const Comp = () => {
-  const counterState = useCounterState();
+  const counterState = useReusable(counterState);
+
   return ... // Just use it!
@@ -117,153 +115,56 @@ }
 
+## Using a Reducer
+// TBD
+
 ## Compound selectors, memoizing:
+// TBD
 
-```javascript
-// No special tricks - just use hooks
-export const useCurrentUserBalance = () => {
-  const [transactions] = reuseState("transactions");
-  const [currentUser] = reuseState("currentUser");
-
-  return useMemo(
-    () =>
-      transactions
-        .filter(({ userId }) => userId === currentUser.id)
-        .reduce((sum, { amount }) => amount + sum, 0),
-    [transactions, currentUser.id]
-  );
-};
-```
-
 ## Reusable components / NPM libraries:
+// TBD
 
-library
-
-```javascript
-import React, { useCallback } from "react";
-import { reuseState } from "reuse";
-
-// ControlledComponent
-export const Input = ({ value = "", setValue, placeholder = "" }) => {
-  const onChange = useCallback(e => setValue(e.target.value), []);
-  return <input value={value} onChange={onChange} placeholder={placeholder} />;
-};
-
-// Reusable State Controller:
-export const reuseInputState = (path = "_my_lib_input_path") => {
-  const state = reuseState(path);
-
-  return controller(state);
-};
-
-// Local State Controller:
-export const useInputState = () => {
-  const state = useState('');
-
-  return controller(state);
-}
-
-const controller = [value, setValue] => (
-{
-    value,
-    setValue,
-    clear: () => setValue("")
-});
-```
-
-Consumer:
-
-```javascript
-// Using the lib with re-used state:
-import { Input, reuseInputState } from "my-form-lib";
-
-const Comp = () => {
-  const inputState = reuseInputState("forms.user.0");
-
-  return <Input {...inputState} />;
-};
-
-// Using the lib with local state:
-import { Input, useInputState } from "my-form-lib";
-
-const Comp = () => {
-  const inputState = useInputState();
-
-  return <Input {...inputState} />;
-};
-```
-
 ## Time Travelling, Undo/Redo
+// TBD
 
-```javascript
-// App.js:
-import { ReuseProvider, createStore } from "reuse";
-import { withHistory } from "reuse-history";
+## Using without a SPA (vanilla)
+// TBD
 
-const initialState = {
-  counter: 1
-};
-const store = withHistory(createStore)(initialState);  // Oooh, cool
+# Commonly asked questions
 
-const App = () => (
-  <ReuseProvider store={store}>
-);
+## What about Context API?
 
-// component:
-import React from "react";
-import { useHistory } from "reuse-history";
+The answer is pretty much the same for people asking about "Redux vs. Context API?"
+Using Context API directly gives a simple API to share state between components, but it doesn't provide other benefits that reuse provides, such as:
 
-export const TimeTravel = () => {
-  const { undo, redo, canUndo, canRedo } = useHistory(); // Oh! Even Cooler!!
-  return (
-    <div>
-      <button disabled={!canUndo()} onClick={undo}>
-        Undo
-      </button>
-      <button disabled={!canRedo()} onClick={redo}>
-        Redo
-      </button>
-    </div>
-  );
-};
-```
+- Time Travelling
+- Single Store
+- Compound Selectors
+- Structure
+- Easily reuse code that needs state management using custom hooks
+- Easily provide open source components that allow control of state
 
-## Using a reducer (because why not)
+## Is Reusable designed for large apps?
 
-```javascript
-// counter.state.js:
-export const useCounterState = () => {
-  const [counter, dispatch] = reuseState("ui.counter", (state, action) => {
-    switch (action.type) {
-      case "DECREMENT":
-        return state - 1;
-      case "INCREMENT":
-        return state + 1;
-      default:
-        return state;
-    }
-  });
+Reuse is built with large-scale apps in mind.
+This is what affected most of the considerations when designing the solution:
 
-  return {
-    counter,
-    decrement: () => dispatch({ type: "DECREMENT" }),
-    increment: () => dispatch({ type: "INCREMENT" })
-  };
-};
-```
+- The benefits of a single store and immutable data:
+  - Allow a maintainable architecture and prevent tangled cross-stores access
+  - Easier to reach deep UI states during development by overriding initial state
+  - Easier to achieve undo/redo, state persistence
+- The ability to do code reuse using custom hooks to prevent code duplication
+- Supporting Redux DevTools for better debugging & QA
+- Support lazy-loaded modules
 
-## Feedback:
+# Feedback:
 
 https://goo.gl/forms/Jza0XsM7F3shvWhD2
 
-## What's missing:
+# What's missing:
 
-- Release to NPM
 - Support lazy-loaded modules
-- Async actions example
 - Tests
-- Redux DevTools integrations
+- DevTools integrations
 - Docs
-- Examples
-
-## Problems:
-
-- Save/Load state without keys
+- More Examples
+- Time Travelling
+- TypeScript Support

src/react-reuse.js

@@ -1,13 +0,12 @@
-import React, {
-  createContext,
-  useRef,
-  useState,
-  useContext,
-  useEffect
-} from "react";
+import React from "react";
 import {shallowCompare} from './shallow-compare';
 import {reuse, createStore, setCurrentStore} from './reuse';
 
+const useRef = React.useRef;
+const useState = React.useState;
+const useContext = React.useContext;
+const useEffect = React.useEffect;
+
 // react-reuse
-const ReuseContext = createContext();
+export const ReuseContext = React.createContext();
 
@@ -14,0 +13,0 @@ export const ReuseProvider = ({ store = null, children }) => {

src/reuse.js

@@ -173,2 +173,6 @@ import {shallowCompare} from './shallow-compare';
 
+export const reuseCallback = (fn, deps) => {
+  return reuseMemo(() => fn, deps);
+}
+
 export const reuseEffect = (effectFn, deps) => {
@@ -175,0 +179,0 @@ if (!currentUnitKey) {

Fixed alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

New author

Supply chain risk

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

Found 1 instance in 1 package

Improved metrics

Lines of code

604

increased by0.5%

Number of medium supply chain risk alerts

1

decreased by-66.67%

Worsened metrics

Total package byte prevSize

81356

decreased by-0.93%

Number of lines in readme file

166

decreased by-37.36%

No dependency changes