Merge branch 'main' into v5

.github/workflows/test-multiple-versions.yml

@@ -31,8 +31,8 @@ jobs:
           - 18.0.0
           - 18.1.0
           - 18.2.0
-          - 18.3.0-canary-a9cc32511-20240215
-          - 0.0.0-experimental-a9cc32511-20240215
+          - 18.3.0-canary-2f8f77602-20240229
+          - 0.0.0-experimental-2f8f77602-20240229
     steps:
       - uses: actions/checkout@v4
       - uses: actions/setup-node@v4

docs/getting-started/introduction.md

@@ -49,6 +49,7 @@ const useStore = create((set) => ({
   bears: 0,
   increasePopulation: () => set((state) => ({ bears: state.bears + 1 })),
   removeAllBears: () => set({ bears: 0 }),
+  updateBears: (newBears) => set({ bears: newBears }),
 }))
 ```
 

docs/guides/prevent-rerenders-with-use-shallow.md

@@ -39,7 +39,7 @@ useMeals.setState({
 })
 ```
 
-This change causes `BearNames` rerenders even tho the actual output of `names` has not changed according to shallow equal.
+This change causes `BearNames` rerenders even though the actual output of `names` has not changed according to shallow equal.
 
 We can fix that using `useShallow`!
 

docs/guides/slices-pattern.md

@@ -113,6 +113,8 @@ export const useBoundStore = create(
 )
 ```
 
+Please keep in mind you should only apply middlewares in the combined store. Applying them inside individual slices can lead to unexpected issues.
+
 ## Usage with TypeScript
 
 A detailed guide on how to use the slice pattern in Zustand with TypeScript can be found [here](./typescript.md#slices-pattern).

docs/guides/ssr-and-hydration.md

@@ -95,7 +95,7 @@ that runs in the browser. The right way to "hydrate" a component is by using `hy
 
 ### React
 
-Let's say we want to render an statefull app using react. In order to do that we need to
+Let's say we want to render a stateful app using React. In order to do that we need to
 use `express`, `react`, `react-dom/server` and `react-dom/client`.
 
 Let's dive into that:

package.json

@@ -108,30 +108,30 @@
   },
   "homepage": "https://github.com/pmndrs/zustand",
   "devDependencies": {
-    "@babel/core": "^7.23.9",
+    "@babel/core": "^7.24.0",
     "@babel/plugin-external-helpers": "^7.23.3",
     "@babel/plugin-transform-react-jsx": "^7.23.4",
-    "@babel/plugin-transform-runtime": "^7.23.9",
+    "@babel/plugin-transform-runtime": "^7.24.0",
     "@babel/plugin-transform-typescript": "^7.23.6",
-    "@babel/preset-env": "^7.23.9",
+    "@babel/preset-env": "^7.24.0",
     "@redux-devtools/extension": "^3.3.0",
     "@rollup/plugin-alias": "^5.1.0",
     "@rollup/plugin-babel": "^6.0.4",
     "@rollup/plugin-node-resolve": "^15.2.3",
     "@rollup/plugin-replace": "^5.0.5",
     "@rollup/plugin-typescript": "^11.1.6",
     "@testing-library/react": "^14.2.1",
-    "@types/node": "^20.11.19",
-    "@types/react": "^18.2.55",
+    "@types/node": "^20.11.24",
+    "@types/react": "^18.2.61",
     "@types/react-dom": "^18.2.19",
     "@types/use-sync-external-store": "^0.0.6",
-    "@typescript-eslint/eslint-plugin": "^7.0.1",
-    "@typescript-eslint/parser": "^7.0.1",
+    "@typescript-eslint/eslint-plugin": "^7.1.0",
+    "@typescript-eslint/parser": "^7.1.0",
     "@vitest/coverage-v8": "0.33.0",
     "@vitest/ui": "0.33.0",
     "concurrently": "^8.2.2",
-    "esbuild": "^0.20.0",
-    "eslint": "^8.56.0",
+    "esbuild": "^0.20.1",
+    "eslint": "^8.57.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-import-resolver-alias": "^1.1.2",
     "eslint-plugin-import": "^2.29.1",
@@ -172,5 +172,6 @@
     "use-sync-external-store": {
       "optional": true
     }
-  }
+  },
+  "packageManager": "yarn@1.22.21+sha256.dbed5b7e10c552ba0e1a545c948d5473bc6c5a28ce22a8fd27e493e3e5eb6370"
 }

rollup.config.js

@@ -34,10 +34,11 @@ function getBabelOptions(targets) {
   }
 }
 
-function getEsbuild(target, env = 'development') {
+function getEsbuild(env = 'development') {
   return esbuild({
     minify: env === 'production',
-    target,
+    target: 'es2018',
+    supported: { 'import-meta': true },
     tsconfig: path.resolve('./tsconfig.json'),
   })
 }
@@ -82,7 +83,7 @@ function createESMConfig(input, output) {
         delimiters: ['\\b', '\\b(?!(\\.|/))'],
         preventAssignment: true,
       }),
-      getEsbuild('node12'),
+      getEsbuild(),
     ],
   }
 }

src/middleware/persist.ts

@@ -98,7 +98,10 @@ export interface PersistOptions<S, PersistedState = S> {
    * A function to perform persisted state migration.
    * This function will be called when persisted state versions mismatch with the one specified here.
    */
-  migrate?: (persistedState: unknown, version: number) => S | Promise<S>
+  migrate?: (
+    persistedState: unknown,
+    version: number,
+  ) => PersistedState | Promise<PersistedState>
   /**
    * A function to perform custom hydration merges when combining the stored state with the current one.
    * By default, this function does a shallow merge.

src/vanilla/shallow.ts

@@ -37,10 +37,10 @@ export function shallow<T>(objA: T, objB: T) {
   if (keysA.length !== Object.keys(objB).length) {
     return false
   }
-  for (let i = 0; i < keysA.length; i++) {
+  for (const keyA of keysA) {
     if (
-      !Object.hasOwn(objB, keysA[i] as string) ||
-      !Object.is(objA[keysA[i] as keyof T], objB[keysA[i] as keyof T])
+      !Object.hasOwn(objB, keyA as string) ||
+      !Object.is(objA[keyA as keyof T], objB[keyA as keyof T])
     ) {
       return false
     }