observable-slice - npm Package Compare versions

Comparing version 0.0.16 to 0.0.17

dist/create.d.ts

@@ -25,2 +25,3 @@ /**
      *
+     * By default, all selectors will be memoized. If you would like to use a selector that is not memoized, try slice.useSub.
      */
@@ -52,4 +53,5 @@ useSubs?: UseSubs | undefined;
      * Subscribe to the selected state of the slice using a react hook.
+     * Selectors are memoized with selectorKey.
      */
-    useSub: <T_1>(select: (state: State) => T_1, willNotify?: ((prev: T_1, next: T_1) => boolean) | undefined) => T_1;
+    useSub: <T_1>(select: (state: State) => T_1, willNotify?: ((prev: T_1, next: T_1) => boolean) | undefined, selectorKey?: string) => T_1;
 } & { [K in keyof Pubs]: (arg: Parameters<Pubs[K]>[1] extends undefined ? void : Parameters<Pubs[K]>[1]) => void; } & { [K_1 in keyof UseSubs]: (...arg: Parameters<UseSubs[K_1]>) => ReturnType<ReturnType<UseSubs[K_1]>["select"]>; };

dist/index.js

@@ -1,1 +0,1 @@
-function t(t){if(t&&t.__esModule)return t;var n=Object.create(null);return t&&Object.keys(t).forEach(function(e){if("default"!==e){var u=Object.getOwnPropertyDescriptor(t,e);Object.defineProperty(n,e,u.get?u:{enumerable:!0,get:function(){return t[e]}})}}),n.default=t,n}var n=/*#__PURE__*/t(require("react"));exports.create=function(t){var e=t.pubs,u=t.useSubs,r=t.notifyMiddleware,c=t.logger,f=t.initState,o=new Set,i=function(){return o.forEach(function(t){return t()})},a=r?r(i):i,s=c||function(){},b={get:function(){return s("get",f),f},pub:function(t){f=t(f),s("notify-subs",f),a()},sub:function(t,n,e){var u=t(f),r=function(){var r=t(f);(e?e(u,r):u!==r)&&(s("notify-sub",f),n(r),u=r)};return s("add-sub",f),o.add(r),function(){s("rm-sub",f),o.delete(r)}},useSub:function(t,e){var u=n.useState(function(){return t(f)}),r=u[0],c=u[1];return n.useEffect(function(){var n=function(){return c(function(n){var u=t(f);return(e?e(n,u):n!==u)?(s("notify-sub",f),u):n})};return s("add-sub",f),o.add(n),function(){s("rm-sub",f),o.delete(n)}},[]),r}};return e&&Object.keys(e).forEach(function(t){b[t]=function(n){return b.pub(function(u){return e[t](u,n)})}}),u&&Object.keys(u).forEach(function(t){b[t]=function(n){var e=u[t](n);return b.useSub(e.select,e.willNotify)}}),b};
+function t(t){if(t&&t.__esModule)return t;var e=Object.create(null);return t&&Object.keys(t).forEach(function(n){if("default"!==n){var r=Object.getOwnPropertyDescriptor(t,n);Object.defineProperty(e,n,r.get?r:{enumerable:!0,get:function(){return t[n]}})}}),e.default=t,e}var e=/*#__PURE__*/t(require("react"));exports.create=function(t){var n=t.pubs,r=t.useSubs,u=t.notifyMiddleware,c=t.logger,f=t.initState,o=new Set,i=function(){return o.forEach(function(t){return t()})},a=u?u(i):i,s=c||function(){},b={get:function(){return s("get",f),f},pub:function(t){f=t(f),s("notify-subs",f),a()},sub:function(t,e,n){var r=t(f),u=function(){var u=t(f);(n?n(r,u):r!==u)&&(s("notify-sub",f),e(u),r=u)};return s("add-sub",f),o.add(u),function(){s("rm-sub",f),o.delete(u)}},useSub:function(t,n,r){var u=e.useState(function(){return t(f)}),c=u[0],i=u[1],a=e.useRef();return e.useEffect(function(){var e=function(){return i(function(e){var r=t(f);return(n?n(e,r):e!==r)?(s("notify-sub",f),r):e})};return s("add-sub",f),o.add(e),a.current&&(a.current(),e()),a.current=function(){s("rm-sub",f),o.delete(e)},a.current},[r]),c}};return n&&Object.keys(n).forEach(function(t){b[t]=function(e){return b.pub(function(r){return n[t](r,e)})}}),r&&Object.keys(r).forEach(function(t){b[t]=function(e){var n=r[t](e);return b.useSub(n.select,n.willNotify)}}),b};

dist/index.module.js

@@ -1,1 +0,1 @@
-import*as n from"react";var t=function(t){var u=t.pubs,r=t.useSubs,e=t.notifyMiddleware,o=t.logger,f=t.initState,i=new Set,c=function(){return i.forEach(function(n){return n()})},a=e?e(c):c,s=o||function(){},b={get:function(){return s("get",f),f},pub:function(n){f=n(f),s("notify-subs",f),a()},sub:function(n,t,u){var r=n(f),e=function(){var e=n(f);(u?u(r,e):r!==e)&&(s("notify-sub",f),t(e),r=e)};return s("add-sub",f),i.add(e),function(){s("rm-sub",f),i.delete(e)}},useSub:function(t,u){var r=n.useState(function(){return t(f)}),e=r[0],o=r[1];return n.useEffect(function(){var n=function(){return o(function(n){var r=t(f);return(u?u(n,r):n!==r)?(s("notify-sub",f),r):n})};return s("add-sub",f),i.add(n),function(){s("rm-sub",f),i.delete(n)}},[]),e}};return u&&Object.keys(u).forEach(function(n){b[n]=function(t){return b.pub(function(r){return u[n](r,t)})}}),r&&Object.keys(r).forEach(function(n){b[n]=function(t){var u=r[n](t);return b.useSub(u.select,u.willNotify)}}),b};export{t as create};
+import*as n from"react";var t=function(t){var u=t.pubs,r=t.useSubs,e=t.notifyMiddleware,c=t.logger,f=t.initState,o=new Set,i=function(){return o.forEach(function(n){return n()})},s=e?e(i):i,a=c||function(){},b={get:function(){return a("get",f),f},pub:function(n){f=n(f),a("notify-subs",f),s()},sub:function(n,t,u){var r=n(f),e=function(){var e=n(f);(u?u(r,e):r!==e)&&(a("notify-sub",f),t(e),r=e)};return a("add-sub",f),o.add(e),function(){a("rm-sub",f),o.delete(e)}},useSub:function(t,u,r){var e=n.useState(function(){return t(f)}),c=e[0],i=e[1],s=n.useRef();return n.useEffect(function(){var n=function(){return i(function(n){var r=t(f);return(u?u(n,r):n!==r)?(a("notify-sub",f),r):n})};return a("add-sub",f),o.add(n),s.current&&(s.current(),n()),s.current=function(){a("rm-sub",f),o.delete(n)},s.current},[r]),c}};return u&&Object.keys(u).forEach(function(n){b[n]=function(t){return b.pub(function(r){return u[n](r,t)})}}),r&&Object.keys(r).forEach(function(n){b[n]=function(t){var u=r[n](t);return b.useSub(u.select,u.willNotify)}}),b};export{t as create};

dist/index.umd.js

@@ -1,1 +0,1 @@
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("react")):"function"==typeof define&&define.amd?define(["exports","react"],t):t((e||self).observableSlice={},e.react)}(this,function(e,t){function n(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach(function(n){if("default"!==n){var u=Object.getOwnPropertyDescriptor(e,n);Object.defineProperty(t,n,u.get?u:{enumerable:!0,get:function(){return e[n]}})}}),t.default=e,t}var u=/*#__PURE__*/n(t);e.create=function(e){var t=e.pubs,n=e.useSubs,r=e.notifyMiddleware,f=e.logger,o=e.initState,i=new Set,c=function(){return i.forEach(function(e){return e()})},a=r?r(c):c,s=f||function(){},b={get:function(){return s("get",o),o},pub:function(e){o=e(o),s("notify-subs",o),a()},sub:function(e,t,n){var u=e(o),r=function(){var r=e(o);(n?n(u,r):u!==r)&&(s("notify-sub",o),t(r),u=r)};return s("add-sub",o),i.add(r),function(){s("rm-sub",o),i.delete(r)}},useSub:function(e,t){var n=u.useState(function(){return e(o)}),r=n[0],f=n[1];return u.useEffect(function(){var n=function(){return f(function(n){var u=e(o);return(t?t(n,u):n!==u)?(s("notify-sub",o),u):n})};return s("add-sub",o),i.add(n),function(){s("rm-sub",o),i.delete(n)}},[]),r}};return t&&Object.keys(t).forEach(function(e){b[e]=function(n){return b.pub(function(u){return t[e](u,n)})}}),n&&Object.keys(n).forEach(function(e){b[e]=function(t){var u=n[e](t);return b.useSub(u.select,u.willNotify)}}),b}});
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("react")):"function"==typeof define&&define.amd?define(["exports","react"],t):t((e||self).observableSlice={},e.react)}(this,function(e,t){function n(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach(function(n){if("default"!==n){var r=Object.getOwnPropertyDescriptor(e,n);Object.defineProperty(t,n,r.get?r:{enumerable:!0,get:function(){return e[n]}})}}),t.default=e,t}var r=/*#__PURE__*/n(t);e.create=function(e){var t=e.pubs,n=e.useSubs,u=e.notifyMiddleware,f=e.logger,o=e.initState,c=new Set,i=function(){return c.forEach(function(e){return e()})},a=u?u(i):i,s=f||function(){},b={get:function(){return s("get",o),o},pub:function(e){o=e(o),s("notify-subs",o),a()},sub:function(e,t,n){var r=e(o),u=function(){var u=e(o);(n?n(r,u):r!==u)&&(s("notify-sub",o),t(u),r=u)};return s("add-sub",o),c.add(u),function(){s("rm-sub",o),c.delete(u)}},useSub:function(e,t,n){var u=r.useState(function(){return e(o)}),f=u[0],i=u[1],a=r.useRef();return r.useEffect(function(){var n=function(){return i(function(n){var r=e(o);return(t?t(n,r):n!==r)?(s("notify-sub",o),r):n})};return s("add-sub",o),c.add(n),a.current&&(a.current(),n()),a.current=function(){s("rm-sub",o),c.delete(n)},a.current},[n]),f}};return t&&Object.keys(t).forEach(function(e){b[e]=function(n){return b.pub(function(r){return t[e](r,n)})}}),n&&Object.keys(n).forEach(function(e){b[e]=function(t){var r=n[e](t);return b.useSub(r.select,r.willNotify)}}),b}});

package.json

 {
   "name": "observable-slice",
-  "version": "0.0.16",
+  "version": "0.0.17",
   "description": "An observable for global state that can be subscribed to with react hooks, or callbacks",
@@ -5,0 +5,0 @@ "license": "MIT",

readme.md

@@ -97,3 +97,3 @@ [![license-shield]][license-url] [![linkedin-shield]][linkedin-url] ![size-url] ![size-url2] [![npm-v]][npm-url] [![gh-shield]][gh-url]
 |     pubs     |   {} \| undefined   |         | The publishers will replace the slice then notify the subscribers. It is recommended to wrap these reducers with immer's produce: https://immerjs.github.io/immer/update-patterns. If a publisher needs more than one parameter, it may be passed as an object. |
-|     useSubs  |   {} \| undefined   |         |                                                                   The subscribers will be available as react hooks and must be used inside of a react functional component.                                                                    |
+|     useSubs  |   {} \| undefined   |         | The subscribers will be available as react hooks and must be used inside of a react functional component. By default, all selectors will be memoized. If you would like to use a selector that is not memoized, try slice.useSub.               |
 | notifyMiddleware | (notify: () => void) => () => void  |      |                                                                                  You may add a debounce function here.                                                                                  |
@@ -109,3 +109,3 @@
 | $pub         |        fn           |         | Each entry defined in create.pubs will be available on the returned slice. If you would like to pass more than one arg to the reducer, you may put them into an object                                                                         |
-| $useSub      |        fn           |         | Each entry defined in create.subs will create a react hook that may be consumed to subscribe to the slice. These hooks may also accept one parameter. For example, the useTodo subscription may accept the id of the todo to subscribe to.     |
+| $useSub      |        fn           |         | Each entry defined in create.subs will create a react hook that may be consumed to subscribe to the slice. These hooks may also accept one parameter. For example, the useTodo subscription may accept the id of the todo to subscribe to. Selectors are memoized with selectorKey.  |
 | logger      |        fn           |         |  Add additionally functionality to the slice before it handles each eventFor example a logger, or a persister.    |
@@ -112,0 +112,0 @@ ## Roadmap

src/create.ts

@@ -42,2 +42,3 @@ import * as React from 'react';
    *
+   * By default, all selectors will be memoized. If you would like to use a selector that is not memoized, try slice.useSub.
    */
@@ -99,5 +100,7 @@ useSubs?: UseSubs;
       select: (state: State) => T,
-      willNotify?: (prev: T, next: T) => boolean
+      willNotify?: (prev: T, next: T) => boolean,
+      selectorKey?: string
     ) => {
       const [selected, setSelected] = React.useState(() => select(state));
+      const unSubLast = React.useRef<() => void>();
       React.useEffect(() => {
@@ -118,9 +121,15 @@ const sub = () =>
 
-        return () => {
+        if (unSubLast.current) {
+          unSubLast.current();
+          sub();
+        }
+
+        unSubLast.current = () => {
           log('rm-sub', state);
           subscribers.delete(sub);
-        };
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-      }, []);
+        }
 
+        return unSubLast.current
+      }, [selectorKey]);
+
       return selected;
@@ -175,6 +184,8 @@ },
      * Subscribe to the selected state of the slice using a react hook.
+     * Selectors are memoized with selectorKey.
      */
     useSub: <T>(
       select: (state: State) => T,
-      willNotify?: (prev: T, next: T) => boolean
+      willNotify?: (prev: T, next: T) => boolean,
+      selectorKey?: string
     ) => T;
@@ -181,0 +192,0 @@ } & {

No alert changes

Improved metrics

Total package byte prevSize

30242

increased by2.94%

Lines of code

577

increased by2.3%

No dependency changes