.codesandbox/ci.json

@@ -9,5 +9,5 @@
     "next-js-uo1h0",
     "pavlobu-zustand-demo-frutec"
   ],
-  "node": "14"
+  "node": "18"
 }

.eslintrc.json

@@ -20,7 +20,7 @@
     "prettier",
     "react-hooks",
     "import",
-    "jest"
+    "vitest"
   ],
   "parser": "@typescript-eslint/parser",
   "parserOptions": {
@@ -36,6 +36,7 @@
     "prefer-const": "error",
     "curly": ["warn", "multi-line", "consistent"],
     "no-console": "off",
+    "import/extensions": ["error", "always"],
     "import/no-unresolved": ["error", { "commonjs": true, "amd": true }],
     "import/export": "error",
     "@typescript-eslint/no-duplicate-imports": ["error"],
@@ -47,10 +48,12 @@
     "@typescript-eslint/no-use-before-define": "off",
     "@typescript-eslint/no-empty-function": "off",
     "@typescript-eslint/no-explicit-any": "off",
-    "jest/consistent-test-it": [
+    "vitest/consistent-test-it": [
       "error",
       { "fn": "it", "withinDescribe": "it" }
     ],
+    "import/namespace": "off",
+    "import/named": "off",
     "import/order": [
       "error",
       {
@@ -93,12 +96,8 @@
       "@typescript-eslint/parser": [".js", ".jsx", ".ts", ".tsx"]
     },
     "import/resolver": {
-      "node": {
-        "extensions": [".js", ".jsx", ".ts", ".tsx", ".json"],
-        "paths": ["src"]
-      },
       "alias": {
-        "extensions": [".js", ".jsx", ".ts", ".tsx", ".json"],
+        "extensions": [".js", ".jsx", ".ts", ".tsx"],
         "map": [
           ["^zustand$", "./src/index.ts"],
           ["zustand", "./src"]
@@ -108,9 +107,9 @@
   },
   "overrides": [
     {
-      "files": ["src"],
-      "parserOptions": {
-        "project": "./tsconfig.json"
+      "files": ["tests/**/*.ts", "tests/**/*.tsx"],
+      "rules": {
+        "import/extensions": ["error", "never"]
       }
     },
     {

.github/workflows/lint-and-type.yml

@@ -13,7 +13,7 @@ jobs:
       - uses: actions/checkout@v2
       - uses: actions/setup-node@v2
         with:
-          node-version: '14'
+          node-version: '18'
           cache: yarn
       - run: git fetch --depth=1 origin +refs/tags/*:refs/tags/*
       - run: yarn install --frozen-lockfile --check-files

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

@@ -14,11 +14,27 @@ jobs:
       matrix:
         build: [cjs, umd] # [cjs, esm, umd, system]
         env: [development, production]
+        devtools-skip:
+          - CI-MATRIX-NOSKIP
+        include:
+          - devtools-skip: CI-MATRIX-[2345]
+            build: umd
+          - devtools-skip: CI-MATRIX-[1345]
+            build: umd
+          - devtools-skip: CI-MATRIX-[1245]
+            build: umd
+          - devtools-skip: CI-MATRIX-[1235]
+            build: umd
+          - devtools-skip: CI-MATRIX-[1234]
+            build: umd
+        exclude:
+          - devtools-skip: CI-MATRIX-NOSKIP
+            build: umd
     steps:
       - uses: actions/checkout@v2
       - uses: actions/setup-node@v2
         with:
-          node-version: '14'
+          node-version: '18'
           cache: yarn
       - run: git fetch --depth=1 origin +refs/tags/*:refs/tags/*
       - run: yarn install --frozen-lockfile --check-files
@@ -48,13 +64,25 @@ jobs:
           sed -i~ "1s/^/import.meta.env=import.meta.env||{};import.meta.env.MODE='${NODE_ENV}';/" tests/*.tsx
         env:
           NODE_ENV: ${{ matrix.env }}
-      - name: Patch for UMD/SystemJS
-        if: ${{ matrix.build == 'umd' || matrix.build == 'system' }}
+      - name: Patch for UMD (DEV)
+        if: ${{ matrix.build == 'umd' && matrix.env == 'development' }}
         run: |
-          sed -i~ "s/<rootDir>\/src\(.*\)\.ts/<rootDir>\/dist\/${BUILD}\1.${NODE_ENV}.js/" package.json
-          sed -i~ 's/"test:ci":.*,$/"test:ci": "jest",/' package.json
+          sed -i~ "s/<rootDir>\/src\(.*\)\.ts/<rootDir>\/dist\/umd\1.development.js/" package.json
+          sed -i~ "s/it('\[${DEVTOOLS_SKIP}\]/it.skip('/" tests/devtools.test.tsx
+        env:
+          DEVTOOLS_SKIP: ${{ matrix.devtools-skip }}
+      - name: Patch for UMD (PRD)
+        if: ${{ matrix.build == 'umd' && matrix.env == 'production' }}
+        run: |
+          sed -i~ "s/<rootDir>\/src\(.*\)\.ts/<rootDir>\/dist\/umd\1.production.js/" package.json
+          sed -i~ "s/it('\[${DEVTOOLS_SKIP}\]/it.skip('/" tests/devtools.test.tsx
+        env:
+          DEVTOOLS_SKIP: ${{ matrix.devtools-skip }}
+      - name: Patch for SystemJS
+        if: ${{ matrix.build == 'system' }}
+        run: |
+          sed -i~ "s/<rootDir>\/src\(.*\)\.ts/<rootDir>\/dist\/system\1.${NODE_ENV}.js/" package.json
         env:
-          BUILD: ${{ matrix.build }}
           NODE_ENV: ${{ matrix.env }}
       - name: Test ${{ matrix.build }} ${{ matrix.env }}
         run: |

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

@@ -13,7 +13,7 @@ jobs:
       - uses: actions/checkout@v2
       - uses: actions/setup-node@v2
         with:
-          node-version: '14'
+          node-version: '18'
           cache: yarn
       - run: git fetch --depth=1 origin +refs/tags/*:refs/tags/*
       - run: yarn install --frozen-lockfile --check-files
@@ -33,13 +33,29 @@ jobs:
           - 18.0.0
           - 18.1.0
           - 18.2.0
-          - 18.3.0-next-1308e49a6-20230330
-          - 0.0.0-experimental-1308e49a6-20230330
+          - 18.3.0-canary-aef7ce554-20230503
+          - 0.0.0-experimental-aef7ce554-20230503
+        devtools-skip:
+          - CI-MATRIX-NOSKIP
+        include:
+          - devtools-skip: CI-MATRIX-[2345]
+            react: 16.8.0
+          - devtools-skip: CI-MATRIX-[1345]
+            react: 16.8.0
+          - devtools-skip: CI-MATRIX-[1245]
+            react: 16.8.0
+          - devtools-skip: CI-MATRIX-[1235]
+            react: 16.8.0
+          - devtools-skip: CI-MATRIX-[1234]
+            react: 16.8.0
+        exclude:
+          - devtools-skip: CI-MATRIX-NOSKIP
+            react: 16.8.0
     steps:
       - uses: actions/checkout@v2
       - uses: actions/setup-node@v2
         with:
-          node-version: '14'
+          node-version: '18'
           cache: yarn
       - run: git fetch --depth=1 origin +refs/tags/*:refs/tags/*
       - run: yarn install --frozen-lockfile --check-files
@@ -52,8 +68,10 @@ jobs:
           sed -i~ '1s/^/import React from "react";/' tests/*.tsx
           sed -i~ 's/"jsx": "react-jsx"/"jsx": "react"/' tsconfig.json
           sed -i~ 's/import\.meta\.env[?]\.MODE/"DEVELOPMENT".toLowerCase()/' src/*.ts src/*/*.ts
-          sed -i~ 's/"test:ci":.*,$/"test:ci": "jest",/' package.json
-      - name: Test ${{ matrix.react }}
+          sed -i~ "s/it('\[${DEVTOOLS_SKIP}\]/it.skip('/" tests/devtools.test.tsx
+        env:
+          DEVTOOLS_SKIP: ${{ matrix.devtools-skip }}
+      - name: Test ${{ matrix.react }} ${{ matrix.devtools-skip }}
         run: |
           yarn add -D react@${{ matrix.react }} react-dom@${{ matrix.react }}
           yarn test:ci

.github/workflows/test-old-typescript.yml

@@ -13,6 +13,7 @@ jobs:
       fail-fast: false
       matrix:
         typescript:
+          - 4.9.5
           - 4.8.4
           - 4.7.4
           - 4.6.4
@@ -25,7 +26,7 @@ jobs:
       - uses: actions/checkout@v2
       - uses: actions/setup-node@v2
         with:
-          node-version: '14'
+          node-version: '18'
           cache: yarn
       - run: git fetch --depth=1 origin +refs/tags/*:refs/tags/*
       - run: yarn install --frozen-lockfile --check-files
@@ -35,6 +36,8 @@ jobs:
           sed -i~ 's/\/\/ @ts-expect-error.*\[LATEST-TS-ONLY\]//' tests/*.tsx
           sed -i~ 's/"target":/"skipLibCheck":true,"target":/' tsconfig.json
           sed -i~ 's/"exactOptionalPropertyTypes": true,//' tsconfig.json
+          sed -i~ 's/"moduleResolution": "nodenext",/"moduleResolution": "node",/' tsconfig.json
+          sed -i~ 's/"allowImportingTsExtensions": true,//' tsconfig.json
           sed -i~ 's/"zustand": \["\.\/src\/index\.ts"\],/"zustand": [".\/dist\/index.d.ts"],/' tsconfig.json
           sed -i~ 's/"zustand\/\*": \["\.\/src\/\*\.ts"\]/"zustand\/*": [".\/dist\/*.d.ts"]/' tsconfig.json
           sed -i~ 's/"include": .*/"include": ["src\/types.d.ts", "dist\/**\/*", "tests\/**\/*"],/' tsconfig.json
@@ -43,5 +46,4 @@ jobs:
       - name: Test ${{ matrix.typescript }}
         run: |
           yarn add -D typescript@${{ matrix.typescript }}
-          rm -r node_modules/parse5
           yarn tsc --noEmit

docs/getting-started/comparison.md

@@ -21,6 +21,8 @@ both are based on an immutable state model.
 However, Redux requires your app to be wrapped
 in context providers; Zustand does not.
 
+**Zustand**
+
 ```ts
 import { create } from 'zustand'
 
@@ -74,6 +76,8 @@ const useCountStore = create<State & Actions>((set) => ({
 }))
 ```
 
+**Redux**
+
 ```ts
 import { createStore } from 'redux'
 import { useSelector, useDispatch } from 'react-redux'

docs/getting-started/introduction.md

@@ -23,7 +23,7 @@ It may be the one state manager in the React space that gets all of these right.
 You can try a live demo [here](https://codesandbox.io/s/dazzling-moon-itop4).
 
 [zombie child problem]: https://react-redux.js.org/api/hooks#stale-props-and-zombie-children
-[React concurrency]: https://github.com/bvaughn/rfcs/blob/useMutableSource/text/0000-use-mutable-source.md
+[react concurrency]: https://github.com/bvaughn/rfcs/blob/useMutableSource/text/0000-use-mutable-source.md
 [context loss]: https://github.com/facebook/react/issues/13332
 
 ## Installation

docs/guides/practice-with-no-store-actions.md

@@ -13,7 +13,7 @@ export const useBoundStore = create((set) => ({
   text: 'hello',
   inc: () => set((state) => ({ count: state.count + 1 })),
   setText: (text) => set({ text }),
-})
+}))
 ```
 
 This creates a self-contained store with data and actions together.

docs/guides/testing.mdx → docs/guides/testing.md

@@ -8,9 +8,11 @@ nav: 9
 
 When running tests, the stores are not automatically reset before each test run.
 
-Thus, there can be cases where the state of one test can affect another. To make sure all tests run with a pristine store state, you can mock `zustand` during testing and use the following code to create your store:
+Thus, there can be cases where the state of one test can affect another. To make sure all tests run
+with a pristine store state, you can mock `zustand` during testing and use the following code to
+create your store:
 
-```jsx
+```js
 import { create as actualCreate } from 'zustand'
 // const { create: actualCreate } = jest.requireActual('zustand') // if using jest
 import { act } from 'react-dom/test-utils'
@@ -34,13 +36,16 @@ beforeEach(() => {
 
 The way you mock a dependency depends on your test runner/library.
 
-In [jest](https://jestjs.io/), you can create a `__mocks__/zustand.js` and place the code in that file. If your app is using `zustand/vanilla` instead of `zustand`, then you'll have to place the above code in `__mocks__/zustand/vanilla.js`.
+In [jest](https://jestjs.io/), you can create a `__mocks__/zustand.js` and place the code in that
+file. If your app is using `zustand/vanilla` instead of `zustand`, then you'll have to place the
+above code in `__mocks__/zustand/vanilla.js`.
 
 ### TypeScript usage
 
-If you are using zustand, as documented in [TypeScript Guide](./typescript.md), use the following code:
+If you are using zustand, as documented in [TypeScript Guide](./typescript.md), use the following
+code:
 
-```typescript
+```ts
 import { create as actualCreate, StateCreator } from 'zustand'
 // if using Jest:
 // import { StateCreator } from 'zustand';
@@ -51,12 +56,14 @@ import { act } from 'react-dom/test-utils'
 const storeResetFns = new Set<() => void>()
 
 // when creating a store, we get its initial state, create a reset function and add it in the set
-export const create = <S>(createState: StateCreator<S>) => {
-  const store = actualCreate(createState)
-  const initialState = store.getState()
-  storeResetFns.add(() => store.setState(initialState, true))
-  return store
-}
+const create =
+  () =>
+  <S>(createState: StateCreator<S>) => {
+    const store = actualCreate(createState)
+    const initialState = store.getState()
+    storeResetFns.add(() => store.setState(initialState, true))
+    return store
+  }
 
 // Reset all stores after each test run
 beforeEach(() => {
@@ -66,7 +73,9 @@ beforeEach(() => {
 
 ## Resetting state between tests in **react-native** and **jest**
 
-You should use the following code in the `__mocks__/zustand.js` file (the `__mocks__` directory should be adjacent to node_modules, placed in the same folder as node_modules, unless you configured roots to point to a folder other than the project root [jest docs: mocking node modules](https://jestjs.io/docs/manual-mocks#mocking-node-modules)):
+You should use the following code in the `__mocks__/zustand.js` file (the `__mocks__` directory
+should be adjacent to node_modules, placed in the same folder as node_modules, unless you
+configured roots to point to a folder other than the project root [jest docs: mocking node modules](https://jestjs.io/docs/manual-mocks#mocking-node-modules)):
 
 ```js
 import { act } from '@testing-library/react-native'
@@ -79,19 +88,13 @@ const storeResetFns = new Set()
 export const create = (createState) => {
   const store = actualCreate(createState)
   const initialState = store.getState()
-  storeResetFns.add(() => {
-    store.setState(initialState, true)
-  })
+  storeResetFns.add(() => store.setState(initialState, true))
   return store
 }
 
 // Reset all stores after each test run
-beforeEach(async () => {
-  await act(() =>
-    storeResetFns.forEach((resetFn) => {
-      resetFn()
-    })
-  )
+beforeEach(() => {
+  act(() => storeResetFns.forEach((resetFn) => resetFn()))
 })
 ```
 

docs/guides/typescript.md

@@ -428,7 +428,7 @@ function useBearStore<T>(
 }
 ```
 
-You can also make an abstract `createBoundedUseStore` if you create bounded `useStore`s often and want to DRY things up...
+You can also make an abstract `createBoundedUseStore` function if you need to create bounded `useStore` hooks often and want to DRY things up...
 
 ```ts
 import { useStore, StoreApi } from 'zustand'
@@ -445,17 +445,17 @@ const bearStore = createStore<BearState>()((set) => ({
 }))
 
 const createBoundedUseStore = ((store) => (selector, equals) =>
-  useStore(store, selector as any, equals)) as <S extends StoreApi<unknown>>(
+  useStore(store, selector as never, equals)) as <S extends StoreApi<unknown>>(
   store: S
 ) => {
   (): ExtractState<S>
   <T>(
-    selector?: (state: ExtractState<S>) => T,
+    selector: (state: ExtractState<S>) => T,
     equals?: (a: T, b: T) => boolean
   ): T
 }
 
-type ExtractState<S> = S extends { get: () => infer X } ? X : never
+type ExtractState<S> = S extends { getState: () => infer X } ? X : never
 
 const useBearStore = createBoundedUseStore(bearStore)
 ```