reusable - npm Package Compare versions

Comparing version 1.0.0-alpha.11 to 1.0.0-alpha.12

dist/index.js

@@ -1,2 +0,2 @@
-var t=require("react"),e=function(t){this.fn=t,this.subscribers=[],this.cachedValue=null};e.prototype.getValue=function(){return this.cachedValue},e.prototype.run=function(){return this.cachedValue=this.fn(),this.cachedValue},e.prototype.subscribe=function(t){var e=this;return this.subscribers=this.subscribers.concat([t]),function(){e.subscribers=e.subscribers.filter(function(e){return e!==t})}},e.prototype.notify=function(){var t=this;this.subscribers.forEach(function(e){return e(t.cachedValue)})};var r=function(){this.units=new Map,this.subscribers=[]};r.prototype.onUnitsChanged=function(t){var e=this;return this.subscribers=this.subscribers.concat([t]),function(){e.subscribers=e.subscribers.filter(function(e){return e!==t})}},r.prototype.createUnit=function(t){if(this.units.has(t))throw new Error("Unit already exist");var r=new e(t);this.units.set(t,r),this.notifyUnitsChanged()},r.prototype.getUnit=function(t){if(!this.units.has(t))throw new Error("Unit doesn't exist");return this.units.get(t)},r.prototype.notifyUnitsChanged=function(){this.subscribers.forEach(function(t){return t()})},r.prototype.getUnitsArray=function(){var t=[];return this.units.forEach(function(e){t.push(e)}),t};var n=new r,u=function(){return n},i=Object.prototype.hasOwnProperty;function o(t,e){return t===e?0!==t||0!==e||1/t==1/e:t!=t&&e!=e}function s(t,e){if(o(t,e))return!0;if("object"!=typeof t||null===t||"object"!=typeof e||null===e)return!1;var r=Object.keys(t),n=Object.keys(e);if(r.length!==n.length)return!1;for(var u=0;u<r.length;u++)if(!i.call(e,r[u])||!o(t[r[u]],e[r[u]]))return!1;return!0}var c=t.createContext(null),a=function(e){var r=e.unit;return r.run(),t.useEffect(function(){return r.notify()},[r.cachedValue]),null},f=function(){var e=t.useContext(c);if(null===e)throw new Error("Are you trying to use Reusable without a ReusableProvider?");return e},h=function(){var e=f(),r=t.useState(function(){return e.getUnitsArray()}),n=r[0],u=r[1];return t.useEffect(function(){return e.onUnitsChanged(function(){u(e.getUnitsArray())})},[]),t.createElement(t.Fragment,null,n.map(function(e,r){return t.createElement(a,{key:r,unit:e})}))},l=function(t){return t};exports.Unit=e,exports.Store=r,exports.createStore=function(){return new r},exports.getStore=u,exports.replaceStore=function(t){return n=t},exports.ReusableProvider=function(e){var r=e.children;return t.createElement(c.Provider,{value:u()},t.createElement(t.Fragment,null,t.createElement(h,null),r))},exports.reusable=function(e){return u().createUnit(e),function(r,n){return function(e,r,n){void 0===r&&(r=l),void 0===n&&(n=s);var u=f().getUnit(e),i=t.useState(function(){return r(u.getValue())}),o=i[0],c=i[1];return t.useEffect(function(){return u.subscribe(function(t){var e=r(t);n(e,o)||c(function(){return e})})},[u,o,r,n]),o}(e,r,n)}};
+var t=require("react"),e=function(t){this.fn=t,this.subscribers=[],this.cachedValue=null};e.prototype.getValue=function(){return this.cachedValue},e.prototype.run=function(){return this.cachedValue=this.fn(),this.cachedValue},e.prototype.subscribe=function(t){var e=this;return this.subscribers=this.subscribers.concat([t]),function(){e.subscribers=e.subscribers.filter(function(e){return e!==t})}},e.prototype.notify=function(){var t=this;this.subscribers.forEach(function(e){return e(t.cachedValue)})};var r=function(){this.stores=new Map,this.subscribers=[]};r.prototype.onStoresChanged=function(t){var e=this;return this.subscribers=this.subscribers.concat([t]),function(){e.subscribers=e.subscribers.filter(function(e){return e!==t})}},r.prototype.createStore=function(t){if(this.stores.has(t))throw new Error("Store already exist");var r=new e(t);this.stores.set(t,r),this.notifyStoresChanged()},r.prototype.getStore=function(t){if(!this.stores.has(t))throw new Error("Store doesn't exist");return this.stores.get(t)},r.prototype.notifyStoresChanged=function(){this.subscribers.forEach(function(t){return t()})},r.prototype.getStoresArray=function(){var t=[];return this.stores.forEach(function(e){t.push(e)}),t};var n=new r,o=function(){return n},u=Object.prototype.hasOwnProperty;function s(t,e){return t===e?0!==t||0!==e||1/t==1/e:t!=t&&e!=e}function i(t,e){if(s(t,e))return!0;if("object"!=typeof t||null===t||"object"!=typeof e||null===e)return!1;var r=Object.keys(t),n=Object.keys(e);if(r.length!==n.length)return!1;for(var o=0;o<r.length;o++)if(!u.call(e,r[o])||!s(t[r[o]],e[r[o]]))return!1;return!0}var c=t.createContext(null),a=function(e){var r=e.store;return r.run(),t.useEffect(function(){return r.notify()},[r.cachedValue]),null},f=function(){var e=t.useContext(c);if(null===e)throw new Error("Are you trying to use Reusable without a ReusableProvider?");return e},h=function(){var e=f(),r=t.useState(function(){return e.getStoresArray()}),n=r[0],o=r[1];return t.useEffect(function(){return e.onStoresChanged(function(){o(e.getStoresArray())})},[]),t.createElement(t.Fragment,null,n.map(function(e,r){return t.createElement(a,{key:r,store:e})}))},l=function(t){return t};exports.Store=e,exports.Container=r,exports.createContainer=function(){return new r},exports.getContainer=o,exports.replaceContainer=function(t){return n=t},exports.ReusableProvider=function(e){var r=e.children;return t.createElement(c.Provider,{value:o()},t.createElement(t.Fragment,null,t.createElement(h,null),r))},exports.createStore=function(e){return o().createStore(e),function(r,n){return function(e,r,n){void 0===r&&(r=l),void 0===n&&(n=i);var o=f().getStore(e),u=t.useState(function(){return r(o.getValue())}),s=u[0],c=u[1];return t.useEffect(function(){return o.subscribe(function(t){var e=r(t);n(e,s)||c(function(){return e})})},[o,s,r,n]),s}(e,r,n)}};
 //# sourceMappingURL=index.js.map

dist/index.umd.js

@@ -1,2 +0,2 @@
-!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports,require("react")):"function"==typeof define&&define.amd?define(["exports","react"],e):e(t.reusable={},t.react)}(this,function(t,e){var n=function(t){this.fn=t,this.subscribers=[],this.cachedValue=null};n.prototype.getValue=function(){return this.cachedValue},n.prototype.run=function(){return this.cachedValue=this.fn(),this.cachedValue},n.prototype.subscribe=function(t){var e=this;return this.subscribers=this.subscribers.concat([t]),function(){e.subscribers=e.subscribers.filter(function(e){return e!==t})}},n.prototype.notify=function(){var t=this;this.subscribers.forEach(function(e){return e(t.cachedValue)})};var r=function(){this.units=new Map,this.subscribers=[]};r.prototype.onUnitsChanged=function(t){var e=this;return this.subscribers=this.subscribers.concat([t]),function(){e.subscribers=e.subscribers.filter(function(e){return e!==t})}},r.prototype.createUnit=function(t){if(this.units.has(t))throw new Error("Unit already exist");var e=new n(t);this.units.set(t,e),this.notifyUnitsChanged()},r.prototype.getUnit=function(t){if(!this.units.has(t))throw new Error("Unit doesn't exist");return this.units.get(t)},r.prototype.notifyUnitsChanged=function(){this.subscribers.forEach(function(t){return t()})},r.prototype.getUnitsArray=function(){var t=[];return this.units.forEach(function(e){t.push(e)}),t};var u=new r,i=function(){return u},o=Object.prototype.hasOwnProperty;function s(t,e){return t===e?0!==t||0!==e||1/t==1/e:t!=t&&e!=e}function c(t,e){if(s(t,e))return!0;if("object"!=typeof t||null===t||"object"!=typeof e||null===e)return!1;var n=Object.keys(t),r=Object.keys(e);if(n.length!==r.length)return!1;for(var u=0;u<n.length;u++)if(!o.call(e,n[u])||!s(t[n[u]],e[n[u]]))return!1;return!0}var f=e.createContext(null),a=function(t){var n=t.unit;return n.run(),e.useEffect(function(){return n.notify()},[n.cachedValue]),null},h=function(){var t=e.useContext(f);if(null===t)throw new Error("Are you trying to use Reusable without a ReusableProvider?");return t},l=function(){var t=h(),n=e.useState(function(){return t.getUnitsArray()}),r=n[0],u=n[1];return e.useEffect(function(){return t.onUnitsChanged(function(){u(t.getUnitsArray())})},[]),e.createElement(e.Fragment,null,r.map(function(t,n){return e.createElement(a,{key:n,unit:t})}))},b=function(t){return t};t.Unit=n,t.Store=r,t.createStore=function(){return new r},t.getStore=i,t.replaceStore=function(t){return u=t},t.ReusableProvider=function(t){var n=t.children;return e.createElement(f.Provider,{value:i()},e.createElement(e.Fragment,null,e.createElement(l,null),n))},t.reusable=function(t){return i().createUnit(t),function(n,r){return function(t,n,r){void 0===n&&(n=b),void 0===r&&(r=c);var u=h().getUnit(t),i=e.useState(function(){return n(u.getValue())}),o=i[0],s=i[1];return e.useEffect(function(){return u.subscribe(function(t){var e=n(t);r(e,o)||s(function(){return e})})},[u,o,n,r]),o}(t,n,r)}}});
+!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports,require("react")):"function"==typeof define&&define.amd?define(["exports","react"],e):e(t.reusable={},t.react)}(this,function(t,e){var r=function(t){this.fn=t,this.subscribers=[],this.cachedValue=null};r.prototype.getValue=function(){return this.cachedValue},r.prototype.run=function(){return this.cachedValue=this.fn(),this.cachedValue},r.prototype.subscribe=function(t){var e=this;return this.subscribers=this.subscribers.concat([t]),function(){e.subscribers=e.subscribers.filter(function(e){return e!==t})}},r.prototype.notify=function(){var t=this;this.subscribers.forEach(function(e){return e(t.cachedValue)})};var n=function(){this.stores=new Map,this.subscribers=[]};n.prototype.onStoresChanged=function(t){var e=this;return this.subscribers=this.subscribers.concat([t]),function(){e.subscribers=e.subscribers.filter(function(e){return e!==t})}},n.prototype.createStore=function(t){if(this.stores.has(t))throw new Error("Store already exist");var e=new r(t);this.stores.set(t,e),this.notifyStoresChanged()},n.prototype.getStore=function(t){if(!this.stores.has(t))throw new Error("Store doesn't exist");return this.stores.get(t)},n.prototype.notifyStoresChanged=function(){this.subscribers.forEach(function(t){return t()})},n.prototype.getStoresArray=function(){var t=[];return this.stores.forEach(function(e){t.push(e)}),t};var o=new n,u=function(){return o},i=Object.prototype.hasOwnProperty;function s(t,e){return t===e?0!==t||0!==e||1/t==1/e:t!=t&&e!=e}function c(t,e){if(s(t,e))return!0;if("object"!=typeof t||null===t||"object"!=typeof e||null===e)return!1;var r=Object.keys(t),n=Object.keys(e);if(r.length!==n.length)return!1;for(var o=0;o<r.length;o++)if(!i.call(e,r[o])||!s(t[r[o]],e[r[o]]))return!1;return!0}var a=e.createContext(null),f=function(t){var r=t.store;return r.run(),e.useEffect(function(){return r.notify()},[r.cachedValue]),null},h=function(){var t=e.useContext(a);if(null===t)throw new Error("Are you trying to use Reusable without a ReusableProvider?");return t},l=function(){var t=h(),r=e.useState(function(){return t.getStoresArray()}),n=r[0],o=r[1];return e.useEffect(function(){return t.onStoresChanged(function(){o(t.getStoresArray())})},[]),e.createElement(e.Fragment,null,n.map(function(t,r){return e.createElement(f,{key:r,store:t})}))},b=function(t){return t};t.Store=r,t.Container=n,t.createContainer=function(){return new n},t.getContainer=u,t.replaceContainer=function(t){return o=t},t.ReusableProvider=function(t){var r=t.children;return e.createElement(a.Provider,{value:u()},e.createElement(e.Fragment,null,e.createElement(l,null),r))},t.createStore=function(t){return u().createStore(t),function(r,n){return function(t,r,n){void 0===r&&(r=b),void 0===n&&(n=c);var o=h().getStore(t),u=e.useState(function(){return r(o.getValue())}),i=u[0],s=u[1];return e.useEffect(function(){return o.subscribe(function(t){var e=r(t);n(e,i)||s(function(){return e})})},[o,i,r,n]),i}(t,r,n)}}});
 //# sourceMappingURL=index.umd.js.map

dist/react-reusable.d.ts

@@ -6,3 +6,3 @@ import { FunctionComponent } from 'react';
 declare type SelectorFn<HookValue> = (val: HookValue) => any;
-export declare function reusable<HookValue>(fn: HookFn<HookValue>): (selector?: SelectorFn<HookValue> | undefined, areEqual?: AreEqual<HookValue> | undefined) => any;
+export declare function createStore<HookValue>(fn: HookFn<HookValue>): (selector?: SelectorFn<HookValue> | undefined, areEqual?: AreEqual<HookValue> | undefined) => any;
 export {};

dist/reusable.d.ts

 export declare type HookFn<HookValue> = () => HookValue;
-export declare type UnitValueChangeCallback<HookValue> = (value: HookValue | null) => void;
-export declare type UnitsChangeCallback = () => void;
-export declare class Unit<HookValue> {
+export declare type StoreValueChangeCallback<HookValue> = (value: HookValue | null) => void;
+export declare type StoresChangeCallback = () => void;
+export declare class Store<HookValue> {
     private fn;
-    subscribers: UnitValueChangeCallback<HookValue>[];
+    subscribers: StoreValueChangeCallback<HookValue>[];
     cachedValue: HookValue | null;
@@ -11,16 +11,16 @@ constructor(fn: HookFn<HookValue>);
     run(): HookValue;
-    subscribe(callback: UnitValueChangeCallback<HookValue>): () => void;
+    subscribe(callback: StoreValueChangeCallback<HookValue>): () => void;
     notify(): void;
 }
-export declare class Store {
-    units: Map<HookFn<any>, Unit<any>>;
-    subscribers: UnitsChangeCallback[];
-    onUnitsChanged(callback: UnitsChangeCallback): () => void;
-    createUnit(fn: HookFn<any>): void;
-    getUnit(fn: HookFn<any>): Unit<any>;
-    notifyUnitsChanged(): void;
-    getUnitsArray(): Unit<any>[];
+export declare class Container {
+    stores: Map<HookFn<any>, Store<any>>;
+    subscribers: StoresChangeCallback[];
+    onStoresChanged(callback: StoresChangeCallback): () => void;
+    createStore(fn: HookFn<any>): void;
+    getStore(fn: HookFn<any>): Store<any>;
+    notifyStoresChanged(): void;
+    getStoresArray(): Store<any>[];
 }
-export declare const createStore: () => Store;
-export declare const getStore: () => Store;
-export declare const replaceStore: (mockedStore: Store) => Store;
+export declare const createContainer: () => Container;
+export declare const getContainer: () => Container;
+export declare const replaceContainer: (mockedContainer: Container) => Container;

package.json

 {
   "name": "reusable",
-  "version": "1.0.0-alpha.11",
+  "version": "1.0.0-alpha.12",
   "description": "",
@@ -5,0 +5,0 @@ "keywords": [],

README.md

 [![Build Status](https://circleci.com/gh/reusablejs/reusable.svg?style=svg)](https://circleci.com/gh/reusablejs/reusable)
 [![npm version](https://badge.fury.io/js/reusable.svg)](https://badge.fury.io/js/reusable)
 
-Go here:  
+# Docs
 [https://reusablejs.github.io/reusable](https://reusablejs.github.io/reusable)
 
 # tl;dr
-Reusable is a library for sharing state and side-effects between components using hooks.
-Just wrap your custom hooks with `reusable` and you're good to go.
+Reusable is a state management library that uses hooks.
+It allows to transform your custom hooks to stores, that have a shared state and behavior.  
+Just wrap your custom hooks with `createStore` and you're good to go.
 
 ```javascript
-const useSomething = reusable(() => {
+const useSomething = createStore(() => {
   //custom hook
@@ -32,5 +33,10 @@ });
 # What about hooks+Context
-Using plain context has some drawbacks, that led us to write this library:
+Using plain context is not a best solution for state management, that led us to write this library:
 - When managing global state using Context in a large app, you will probably have many small, single-purpose providers. Soon enough you'll find a Provider wrapper hell.
 - When you order the providers vertically, you can’t dynamically choose to depend on each other without changing the order, which might break things.
 - Context doesn't support selectors, render bailout, or debouncing
+
+## Feedback / Contributing:
+We would love your feedback / suggestions
+Please open an issue for discussion before submitting a PR
+Thanks

No alert changes

Improved metrics

Total package byte prevSize

72781

increased by1.47%

Number of lines in readme file

42

increased by16.67%

No dependency changes