@udecode/zustood - npm Package Compare versions

Comparing version 1.0.0 to 1.1.0

CHANGELOG.md

 # @udecode/zustood
 
+## 1.1.0
+
+### Minor Changes
+
+- [#36](https://github.com/udecode/zustood/pull/36) [`c66963c`](https://github.com/udecode/zustood/commit/c66963c6fd56ec91d2d658421499a701742bfb69) Thanks [@ShinyLeee](https://github.com/ShinyLeee)! - `react-tracked` support
+
+  Use the tracked hooks in React components, no providers needed. Select your
+  state and the component will trigger re-renders only if the **accessed property** is changed. Use the `useTracked` method:
+
+  ```tsx
+  // Global tracked hook selectors
+  export const useTrackedStore = () => mapValuesKey('useTracked', rootStore);
+
+  // with useTrackStore UserEmail Component will only re-render when accessed property owner.email changed
+  const UserEmail = () => {
+    const owner = useTrackedStore().repo.owner();
+    return (
+      <div>
+        <span>User Email: {owner.email}</span>
+      </div>
+    );
+  };
+  // with useStore UserEmail Component re-render when owner changed, but you can pass equalityFn to avoid it.
+  const UserEmail = () => {
+    const owner = useStore().repo.owner();
+    // const owner = useStore().repo.owner((prev, next) => prev.owner.email === next.owner.email)
+    return (
+      <div>
+        <span>User Email: {owner.email}</span>
+      </div>
+    );
+  };
+  ```
+
 ## 1.0.0
@@ -4,0 +38,0 @@

dist/types.d.ts

@@ -7,2 +7,3 @@ import { Draft } from 'immer';
 export declare type StoreApiUse<T extends State = {}, TSelectors = {}> = GetRecord<T> & TSelectors;
+export declare type StoreApiUseTracked<T extends State = {}, TSelectors = {}> = GetRecord<T> & TSelectors;
 export declare type StoreApiSet<TActions = {}> = TActions;
@@ -15,3 +16,5 @@ export declare type StoreApi<TName extends string, T extends State = {}, TActions = {}, TSelectors = {}> = {
     use: StoreApiUse<T, TSelectors>;
+    useTracked: StoreApiUseTracked<T, TSelectors>;
     useStore: UseImmerStore<T>;
+    useTrackedStore: () => T;
     extendSelectors<SB extends SelectorBuilder<TName, T, TActions, TSelectors>>(builder: SB): StoreApi<TName, T, StateActions<T> & TActions, TSelectors & ReturnType<SB>>;
@@ -18,0 +21,0 @@ extendActions<AB extends ActionBuilder<TName, T, StateActions<T> & TActions, TSelectors>>(builder: AB): StoreApi<TName, T, StateActions<T> & TActions & ReturnType<AB>, TSelectors>;

dist/utils/storeFactory.d.ts

@@ -19,3 +19,5 @@ import { ActionBuilder, SelectorBuilder, StateActions, StoreApi } from '../types';
             use: import("../types").StoreApiUse<T, TSelectors & Record<string, (...args: any[]) => any>>;
+            useTracked: import("../types").StoreApiUseTracked<T, TSelectors & Record<string, (...args: any[]) => any>>;
             useStore: import("../types").UseImmerStore<T>;
+            useTrackedStore: () => T;
         };
@@ -30,3 +32,5 @@ get: import("../types").StoreApiGet<T, TSelectors & Record<string, (...args: any[]) => any>>;
         use: import("../types").StoreApiUse<T, TSelectors & Record<string, (...args: any[]) => any>>;
+        useTracked: import("../types").StoreApiUseTracked<T, TSelectors & Record<string, (...args: any[]) => any>>;
         useStore: import("../types").UseImmerStore<T>;
+        useTrackedStore: () => T;
     };
@@ -45,3 +49,5 @@ extendActions: (builder: ActionBuilder<TName, T, import("../types").SetRecord<T> & {
             use: import("../types").StoreApiUse<T, TSelectors & Record<string, (...args: any[]) => any>>;
+            useTracked: import("../types").StoreApiUseTracked<T, TSelectors & Record<string, (...args: any[]) => any>>;
             useStore: import("../types").UseImmerStore<T>;
+            useTrackedStore: () => T;
         };
@@ -54,3 +60,5 @@ extendActions: (builder: ActionBuilder<TName, T, any, TSelectors>) => any;
         use: import("../types").StoreApiUse<T, TSelectors>;
+        useTracked: import("../types").StoreApiUseTracked<T, TSelectors>;
         useStore: import("../types").UseImmerStore<T>;
+        useTrackedStore: () => T;
     };
@@ -65,4 +73,6 @@ get: import("../types").StoreApiGet<T, TSelectors>;
     use: import("../types").StoreApiUse<T, TSelectors>;
+    useTracked: import("../types").StoreApiUseTracked<T, TSelectors>;
     useStore: import("../types").UseImmerStore<T>;
+    useTrackedStore: () => T;
 };
 //# sourceMappingURL=storeFactory.d.ts.map

package.json

 {
   "name": "@udecode/zustood",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "description": "A modular store factory using zustand",
@@ -33,3 +33,4 @@ "keywords": [
   "dependencies": {
-    "immer": "^9.0.6"
+    "immer": "^9.0.6",
+    "react-tracked": "^1.7.9"
   },
@@ -36,0 +37,0 @@ "peerDependencies": {

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

867330

increased by0.96%

Number of package files

47

increased by4.44%

Lines of code

6029

increased by0.82%

Worsened metrics

Dependency count

3

increased by50%

Dependency changes

• + Addedreact-tracked@^1.7.9

• + Addedjs-tokens@4.0.0(transitive)

• + Addedloose-envify@1.4.0(transitive)

• + Addedproxy-compare@2.6.0(transitive)

• + Addedreact@18.3.1(transitive)

• + Addedreact-tracked@1.7.14(transitive)

• + Addedscheduler@0.23.2(transitive)

• + Addeduse-context-selector@1.4.4(transitive)