Upgrade Zustand

.changeset/funny-trains-matter.md

@@ -0,0 +1,9 @@
+---
+"@udecode/zustood": major
+---
+
+Upgraded `zustand` to version 4, bringing in several new features and improvements.
+- Deprecated types in `zustand` v4+ were addressed by including them in the package itself.
+- Upgraded `immer` to the latest version.
+- The upgrade to `zustand` v4 and `immer` introduces enhancements, bug fixes, and performance optimizations to your application.
+- Please make sure to review the official documentation of `zustand` v4 and `immer` for any additional changes and updates.

.github/workflows/ci.yml

@@ -25,14 +25,14 @@ jobs:
           - 'test'
     steps:
       - name: Checkout repo
-        uses: actions/checkout@v2
+        uses: actions/checkout@v3
 
       - name: Setup node
-        uses: actions/setup-node@v2
+        uses: actions/setup-node@v3
         with:
-          node-version: 12
+          node-version: 16
 
-      - name: Run lint
+      - name: Run ${{ matrix.command }}
         run: yarn && yarn build && yarn ${{ matrix.command }}
         env:
           CI: true

.github/workflows/comment.yml

@@ -15,7 +15,7 @@ jobs:
       startsWith(github.event.comment.body, '/rebase')
     steps:
       - name: Checkout repo
-        uses: actions/checkout@v2
+        uses: actions/checkout@v3
         with:
           fetch-depth: 0
 
@@ -33,7 +33,7 @@ jobs:
       startsWith(github.event.comment.body, '/release:next')
     steps:
       - name: Checkout repo
-        uses: actions/checkout@v2
+        uses: actions/checkout@v3
         with:
           fetch-depth: 0
 
@@ -43,9 +43,9 @@ jobs:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
 
       - name: Setup node
-        uses: actions/setup-node@v2
+        uses: actions/setup-node@v3
         with:
-          node-version: 12.x
+          node-version: 16
           registry-url: https://registry.npmjs.org
 
       - name: Install dependencies

.github/workflows/release.yml

@@ -15,14 +15,14 @@ jobs:
           - latest
     steps:
       - name: Checkout repo
-        uses: actions/checkout@v2
+        uses: actions/checkout@v3
         with:
           fetch-depth: 0
 
       - name: Setup node
-        uses: actions/setup-node@v2
+        uses: actions/setup-node@v3
         with:
-          node-version: 12.x
+          node-version: 16
           registry-url: https://registry.npmjs.org
 
       - name: Install dependencies

package.json

@@ -95,6 +95,6 @@
     "ts-jest": "^26.5.2",
     "typedoc": "^0.22.5",
     "typescript": "^4.4.3",
-    "zustand": "^3.6.4"
+    "zustand": "^4.3.9"
   }
 }

packages/zustood/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@udecode/zustood",
-  "version": "1.1.3",
+  "version": "1.1.4",
   "description": "A modular store factory using zustand",
   "keywords": [
     "zustand"
@@ -30,11 +30,11 @@
     "test": "jest"
   },
   "dependencies": {
-    "immer": "^9.0.6",
-    "react-tracked": "^1.7.9"
+    "immer": "^10.0.2",
+    "react-tracked": "^1.7.11"
   },
   "peerDependencies": {
-    "zustand": ">=3.5.10"
+    "zustand": ">=4.3.9"
   },
   "publishConfig": {
     "access": "public"

packages/zustood/src/createStore.ts

@@ -1,11 +1,12 @@
 import { setAutoFreeze, enableMapSet } from 'immer';
 import { createTrackedSelector } from 'react-tracked';
-import create, { State, StateCreator } from 'zustand';
+import { create } from 'zustand';
+import type { StateCreator } from 'zustand';
 import {
   devtools as devtoolsMiddleware,
   persist as persistMiddleware,
 } from 'zustand/middleware';
-import createVanillaStore from 'zustand/vanilla';
+import { createStore as createVanillaStore } from 'zustand/vanilla';
 import {
   ImmerStoreApi,
   MergeState,
@@ -14,6 +15,7 @@ import {
   StateGetters,
   StoreApi,
   UseImmerStore,
+  State,
 } from './types';
 import { generateStateActions } from './utils/generateStateActions';
 import { storeFactory } from './utils/storeFactory';
@@ -63,6 +65,7 @@ export const createStore =
 
     middlewares.push(createVanillaStore);
 
+    // @ts-ignore
     const createStore = (createState: StateCreator<T, SetImmerState<T>>) =>
       pipe(createState as any, ...middlewares) as ImmerStoreApi<T>;
 

packages/zustood/src/middlewares/immer.middleware.ts

@@ -1,10 +1,14 @@
-import produce from 'immer';
-import { GetState, State } from 'zustand';
-import { SetImmerState, StateCreatorWithDevtools } from '../types';
+import { produce } from 'immer';
+import { StoreApi } from 'zustand';
+import { SetImmerState, StateCreatorWithDevtools, State } from '../types';
 
 export const immerMiddleware =
   <T extends State>(
-    config: StateCreatorWithDevtools<T, SetImmerState<T>, GetState<T>>
+    config: StateCreatorWithDevtools<
+      T,
+      SetImmerState<T>,
+      StoreApi<T>['getState']
+    >
   ): StateCreatorWithDevtools<T> =>
   (set, get, api) => {
     const setState: SetImmerState<T> = (fn, actionName) =>

packages/zustood/src/types.ts

@@ -1,6 +1,6 @@
 import { Draft } from 'immer';
-import { State, StoreApi as RawStoreApi, UseStore } from 'zustand';
-import { EqualityChecker, GetState, StateSelector } from 'zustand/vanilla';
+import { StoreApi as RawStoreApi, UseBoundStore } from 'zustand';
+import { GetState, StateSelector } from 'zustand/vanilla';
 import { NamedSet } from 'zustand/middleware';
 
 export type StoreApiGet<
@@ -60,6 +60,9 @@ export type StoreApi<
   //   >;
 };
 
+export type State = unknown;
+export type EqualityChecker<T> = (state: T, newState: T) => boolean;
+
 export type MergeState<T extends State> = (
   state: Partial<T>,
   actionName?: string
@@ -115,7 +118,7 @@ export interface ImmerStoreApi<T extends State>
 }
 
 export interface UseImmerStore<T extends State>
-  extends Omit<UseStore<T>, 'setState'> {
+  extends Omit<UseBoundStore<RawStoreApi<T>>, 'setState'> {
   (): T;
 
   <U>(selector: StateSelector<T, U>, equalityFn?: EqualityChecker<U>): U;

packages/zustood/src/types/CreateStoreOptions.ts

@@ -1,7 +1,7 @@
-import { State } from 'zustand';
 import { PersistOptions } from './PersistOptions';
-import { DevtoolsOptions } from './DevtoolsOptions';
 import { ImmerOptions } from './ImmerOptions';
+import { State } from '../types';
+import { DevtoolsOptions } from 'zustand/middleware';
 
 export interface CreateStoreOptions<T extends State> {
   /**

packages/zustood/src/types/index.ts

@@ -3,6 +3,5 @@
  */
 
 export * from './CreateStoreOptions';
-export * from './DevtoolsOptions';
 export * from './ImmerOptions';
 export * from './PersistOptions';

packages/zustood/src/utils/extendActions.ts

@@ -1,5 +1,4 @@
-import { State } from 'zustand';
-import { ActionBuilder, StateActions, StoreApi } from '../types';
+import { ActionBuilder, State, StateActions, StoreApi } from '../types';
 
 export const extendActions = <
   AB extends ActionBuilder<TName, T, StateActions<T> & TActions, TSelectors>,

packages/zustood/src/utils/extendSelectors.ts

@@ -1,6 +1,6 @@
-import { State } from 'zustand';
 import {
   SelectorBuilder,
+  State,
   StateActions,
   StoreApi,
   StoreApiGet,

packages/zustood/src/utils/generateStateActions.ts

@@ -1,13 +1,12 @@
-import { State } from 'zustand';
-import { SetRecord, UseImmerStore } from '../types';
+import { SetRecord, State, UseImmerStore } from '../types';
 
 export const generateStateActions = <T extends State>(
   store: UseImmerStore<T>,
   storeName: string
 ) => {
   const actions: SetRecord<T> = {} as any;
 
-  Object.keys(store.getState()).forEach((key) => {
+  Object.keys((store as any).getState()).forEach((key) => {
     actions[key] = (value: keyof T) => {
       const prevValue = store.getState()[key];
       if (prevValue === value) return;

packages/zustood/src/utils/generateStateGetSelectors.ts

@@ -1,12 +1,11 @@
-import { State } from 'zustand';
-import { GetRecord, UseImmerStore } from '../types';
+import { GetRecord, State, UseImmerStore } from '../types';
 
 export const generateStateGetSelectors = <T extends State>(
   store: UseImmerStore<T>
 ) => {
   const selectors: GetRecord<T> = {} as any;
 
-  Object.keys(store.getState()).forEach((key) => {
+  Object.keys((store as any).getState()).forEach((key) => {
     // selectors[`get${capitalize(key)}`] = () => store.getState()[key as keyof T];
     selectors[key] = () => store.getState()[key as keyof T];
   });

packages/zustood/src/utils/generateStateHookSelectors.ts

@@ -1,12 +1,11 @@
-import { EqualityChecker, State } from 'zustand';
-import { GetRecord, UseImmerStore } from '../types';
+import { GetRecord, UseImmerStore, EqualityChecker, State } from '../types';
 
 export const generateStateHookSelectors = <T extends State>(
   store: UseImmerStore<T>
 ) => {
   const selectors: GetRecord<T> = {} as any;
 
-  Object.keys(store.getState()).forEach((key) => {
+  Object.keys((store as any).getState()).forEach((key) => {
     // selectors[`use${capitalize(key)}`] = () =>
     selectors[key] = (equalityFn?: EqualityChecker<T[keyof T]>) => {
       return store((state: T) => state[key as keyof T], equalityFn);

packages/zustood/src/utils/generateStateTrackedHooksSelectors.ts

@@ -1,13 +1,12 @@
-import { State } from 'zustand';
-import { GetRecord, UseImmerStore } from '../types';
+import { GetRecord, UseImmerStore, State } from '../types';
 
 export const generateStateTrackedHooksSelectors = <T extends State>(
   store: UseImmerStore<T>,
   trackedStore: () => T
 ) => {
   const selectors: GetRecord<T> = {} as any;
 
-  Object.keys(store.getState()).forEach((key) => {
+  Object.keys((store as any).getState()).forEach((key) => {
     selectors[key] = () => {
       return trackedStore()[key as keyof T];
     };

packages/zustood/src/utils/index.ts

@@ -7,6 +7,7 @@ export * from './extendSelectors';
 export * from './generateStateActions';
 export * from './generateStateGetSelectors';
 export * from './generateStateHookSelectors';
+export * from './generateStateTrackedHooksSelectors';
 export * from './mapValuesKey';
 export * from './pipe';
 export * from './storeFactory';

packages/zustood/src/utils/storeFactory.ts

@@ -1,9 +1,9 @@
-import { State } from 'zustand';
 import {
   ActionBuilder,
   SelectorBuilder,
   StateActions,
   StoreApi,
+  State,
 } from '../types';
 import { extendActions } from './extendActions';
 import { extendSelectors } from './extendSelectors';