react-use-sub - npm Package Compare versions

Comparing version 0.3.2 to 0.4.0

dist/cjs/index.js

@@ -12,2 +12,4 @@ 'use strict';
 
+const _diffArr = (a, b) => a.length !== b.length || a.some((v, i) => b[i] !== v);
+
 const _diff = (a, b) => {
@@ -19,3 +21,3 @@ if (a === b) return false;
   if (aType !== _type(b)) return true;
-  if (aType === '[object Array]') return a.length !== b.length || Object.keys(a).some(i => b[i] !== a[i]);
+  if (aType === '[object Array]') return _diffArr(a, b);
   if (aType === '[object Object]') return Object.keys(a).concat(Object.keys(b)).some(i => b[i] !== a[i]);
@@ -60,2 +62,3 @@ return true;
 
+const _emptyDeps = [];
 const createStore = data => {
@@ -71,3 +74,4 @@ const keys = Object.keys(data);
 
-  const useSub = mapper => {
+  const useSub = (mapper, deps = _emptyDeps) => {
+    const lastDeps = react.useRef(deps);
     const [mapped, update] = react.useState(() => mapper(D.data));
@@ -80,2 +84,9 @@ const sub = react.useRef({
     sub.current.last = mapped;
+
+    if (_diffArr(lastDeps.current, deps)) {
+      sub.current.mapper = mapper;
+      sub.current.last = mapper(D.data);
+    }
+
+    lastDeps.current = deps;
     react.useEffect(() => {
@@ -87,3 +98,3 @@ D.subs.add(sub.current);
     }, []);
-    return mapped;
+    return sub.current.last;
   };
@@ -90,0 +101,0 @@

dist/esm/index.js

@@ -1,2 +0,2 @@
-import { useState, useRef, useEffect } from 'react';
+import { useRef, useState, useEffect } from 'react';
 import { unstable_batchedUpdates } from 'react-dom';
@@ -8,2 +8,4 @@
 
+const _diffArr = (a, b) => a.length !== b.length || a.some((v, i) => b[i] !== v);
+
 const _diff = (a, b) => {
@@ -15,3 +17,3 @@ if (a === b) return false;
   if (aType !== _type(b)) return true;
-  if (aType === '[object Array]') return a.length !== b.length || Object.keys(a).some(i => b[i] !== a[i]);
+  if (aType === '[object Array]') return _diffArr(a, b);
   if (aType === '[object Object]') return Object.keys(a).concat(Object.keys(b)).some(i => b[i] !== a[i]);
@@ -56,2 +58,3 @@ return true;
 
+const _emptyDeps = [];
 const createStore = data => {
@@ -67,3 +70,4 @@ const keys = Object.keys(data);
 
-  const useSub = mapper => {
+  const useSub = (mapper, deps = _emptyDeps) => {
+    const lastDeps = useRef(deps);
     const [mapped, update] = useState(() => mapper(D.data));
@@ -76,2 +80,9 @@ const sub = useRef({
     sub.current.last = mapped;
+
+    if (_diffArr(lastDeps.current, deps)) {
+      sub.current.mapper = mapper;
+      sub.current.last = mapper(D.data);
+    }
+
+    lastDeps.current = deps;
     useEffect(() => {
@@ -83,3 +94,3 @@ D.subs.add(sub.current);
     }, []);
-    return mapped;
+    return sub.current.last;
   };
@@ -86,0 +97,0 @@

package.json

 {
   "name": "react-use-sub",
-  "version": "0.3.2",
+  "version": "0.4.0",
   "description": "Subscription based lightweight React store",
@@ -5,0 +5,0 @@ "main": "dist/cjs/index.js",

README.md

@@ -8,3 +8,12 @@ [![GitHub license][license-image]][license-url]
 
-How it looks:
+### Benefits
+- easy to use
+- easy testing
+- no dependencies
+- no react context
+- TypeScript and Flow support
+- Very small package size (< 1kB gzipped)
+- Much better performance than react-redux
+
+### Examples
 ```js
@@ -38,16 +47,2 @@ // >>> in your store.js
 
-My Goals:
-- No context
-- TypeScript support
-- Flow support
-- Very small package size (< 1kB gzipped)
-- No dependencies
-- Very easy to use
-- Much better performance than React-Redux
-- Scalability
-
-Treat-offs:
-- You need React v16.8 or greater (hook support)
-- It does not work for class components
-
 [license-image]: https://img.shields.io/badge/license-MIT-blue.svg
@@ -54,0 +49,0 @@ [license-url]: https://github.com/fdc-viktor-luft/form4react/blob/master/LICENSE

src/index.d.ts

 type Mapper<DATA, OP> = (state: DATA) => OP;
-type UseSubType<DATA> = <OP>(mapper: Mapper<DATA, OP>) => OP;
+type UseSubType<DATA> = <OP>(mapper: Mapper<DATA, OP>, deps?: any[]) => OP;
 type StoreSetArg<DATA, PD> = PD | ((prev: DATA) => PD);
@@ -4,0 +4,0 @@ type StoreSet<DATA> = (update: StoreSetArg<DATA, Partial<DATA>>) => void;

src/index.js

@@ -14,3 +14,3 @@ // @flow
 };
-type UseSubType<DATA> = <OP>(mapper: Mapper<DATA, OP>) => OP;
+type UseSubType<DATA> = <OP>(mapper: Mapper<DATA, OP>, deps?: $ReadOnlyArray<mixed>) => OP;
 type StoreSetArg<DATA> = $Shape<DATA> | ((prev: DATA) => $Shape<DATA>);
@@ -23,2 +23,4 @@ type StoreSet<DATA> = (update: StoreSetArg<DATA>) => void;
 const _type = (a: any): string => Object.prototype.toString.call(a);
+const _diffArr = (a: $ReadOnlyArray<any>, b: $ReadOnlyArray<any>): boolean =>
+    a.length !== b.length || a.some((v, i) => b[i] !== v);
 const _diff = (a: any, b: any): boolean => {
@@ -28,3 +30,3 @@ if (a === b) return false;
     if (aType !== _type(b)) return true;
-    if (aType === '[object Array]') return a.length !== b.length || Object.keys(a).some((i: string) => b[i] !== a[i]);
+    if (aType === '[object Array]') return _diffArr(a, b);
     if (aType === '[object Object]')
@@ -66,2 +68,4 @@ return Object.keys(a)
 
+const _emptyDeps = [];
+
 export const createStore = <DATA: {}>(data: DATA): CreateStoreReturn<DATA> => {
@@ -75,3 +79,4 @@ const keys: any[] = Object.keys(data);
     const Store = _center(D);
-    const useSub = <OP>(mapper: Mapper<DATA, OP>): OP => {
+    const useSub = <OP>(mapper: Mapper<DATA, OP>, deps: $ReadOnlyArray<mixed> = _emptyDeps): OP => {
+        const lastDeps = useRef(deps);
         const [mapped, update] = useState<OP>(() => mapper(D.data));
@@ -81,2 +86,8 @@ const sub = useRef<Sub<DATA, OP>>({ mapper, update, last: mapped });
 
+        if (_diffArr(lastDeps.current, deps)) {
+            sub.current.mapper = mapper;
+            sub.current.last = mapper(D.data);
+        }
+        lastDeps.current = deps;
+
         useEffect(() => {
@@ -89,3 +100,3 @@ D.subs.add(sub.current);
 
-        return mapped;
+        return sub.current.last;
     };
@@ -92,0 +103,0 @@

New alerts

License Policy Violation

License

This 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

License

This 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

12609

increased by7.47%

Lines of code

248

increased by11.21%

Worsened metrics

Number of lines in readme file

50

decreased by-9.09%

No dependency changes