Merge branch 'main' into v5

2025-12-08 19:45:52 +00:00 · 2024-06-26 13:00:00 +09:00 · 2024-06-26 13:00:00 +09:00 · a379a958b6
commit a379a958b6
parent 2726e1e758 b3684b31d3
19 changed files with 708 additions and 273 deletions
--- a/.eslintrc.json
+++ b/.eslintrc.json
@ -20,7 +20,8 @@
    "prettier",
    "react-hooks",
    "import",
-    "vitest"
+    "vitest",
+    "eslint-plugin-react-compiler"
  ],
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
@ -31,6 +32,7 @@
    }
  },
  "rules": {
+    "react-compiler/react-compiler": "warn",
    "eqeqeq": "error",
    "no-var": "error",
    "prefer-const": "error",
--- a/.github/DISCUSSION_TEMPLATE/bug-report.yml
+++ b/.github/DISCUSSION_TEMPLATE/bug-report.yml
@ -0,0 +1,17 @@
+labels: ["bug"]
+body:
+  - type: markdown
+    attributes:
+      value: If you don't have a reproduction link, please choose a different category.
+  - type: textarea
+    attributes:
+      label: Bug Description
+      description: Describe the bug you encountered
+    validations:
+      required: true
+  - type: input
+    attributes:
+      label: Reproduction Link
+      description: A link to a [TypeScript Playground](https://www.typescriptlang.org/play), a [StackBlitz Project](https://stackblitz.com/) or something else with a minimal reproduction.
+    validations:
+      required: true
--- a/.github/ISSUE_TEMPLATE/bug_report.md
+++ b/.github/ISSUE_TEMPLATE/bug_report.md
@ -1,30 +1,9 @@
 ---
-name: Confirmed bug report
-about: Create a confirmed bug report. Please open a discussion otherwise.
+name: Assigned issue
+about: This is to create a new issue that already has an assignee. Please open a new discussion otherwise.
 title: ''
 labels: ''
 assignees: ''

 ---

-## Summary
-
-
-
-## Link to reproduction
-
-
-
-## Check List
-
-Please do not ask questions in issues.
-
- [ ] I've already opened a [discussion](https://github.com/pmndrs/zustand/discussions) before opening this issue, or already discussed in other media.
-
-Please include a minimal reproduction.
-
- [ ] I've added a link to a [typescript playground](https://www.typescriptlang.org/play) or [codesandbox](https://codesandbox.io) with a minimal reproduction.
-
-Please check this if you're filing an issue regarding TypeScript.
-
- [ ] I've read the [typescript guide](https://github.com/pmndrs/zustand/blob/main/docs/guides/typescript.md), in particular that `create` is to be used as `create<T>()(...)` and not `create<T>(...)`.
--- a/.github/ISSUE_TEMPLATE/config.yml
+++ b/.github/ISSUE_TEMPLATE/config.yml
@ -1,4 +1,10 @@
 contact_links:
-  - name: Questions, unconfirmed bugs and ideas
-    url: https://github.com/pmndrs/zustand/discussions/new
-    about: Please post questions, unconfirmed bugs and ideas in discussions.
+  - name: Bug Reports
+    url: https://github.com/pmndrs/zustand/discussions/new?category=bug-report
+    about: Please post bug reports here.
+  - name: Questions
+    url: https://github.com/pmndrs/zustand/discussions/new?category=q-a
+    about: Please post questions here.
+  - name: Other Discussions
+    url: https://github.com/pmndrs/zustand/discussions/new/choose
+    about: Please post ideas and general discussions here.
--- a/.github/pull_request_template.md
+++ b/.github/pull_request_template.md
@ -1,4 +1,4 @@
-## Related Issues or Discussions
+## Related Bug Reports or Discussions

 Fixes #

--- a/.github/workflows/test-multiple-versions.yml
+++ b/.github/workflows/test-multiple-versions.yml
@ -36,6 +36,23 @@ jobs:
          - 19.0.0-rc.0
          - 19.0.0-rc-bf3a29d097-20240603
          - 0.0.0-experimental-bf3a29d097-20240603
+        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
+>>>>>>> main
    steps:
      - uses: actions/checkout@v3
      - uses: pnpm/action-setup@v2
--- a/.github/workflows/test-old-typescript.yml
+++ b/.github/workflows/test-old-typescript.yml
@ -13,7 +13,7 @@ jobs:
      fail-fast: false
      matrix:
        typescript:
-          - 5.4.4
+          - 5.4.5
          - 5.3.3
          - 5.2.2
          - 5.1.6
--- a/docs/integrations/third-party-libraries.md
+++ b/docs/integrations/third-party-libraries.md
@ -30,6 +30,7 @@ This can be done using third-party libraries created by the community.
 - [shared-zustand](https://github.com/Tom-Julux/shared-zustand) — Cross-tab state sharing for Zustand.
 - [simple-zustand-devtools](https://github.com/beerose/simple-zustand-devtools) — 🐻⚛️ Inspect your Zustand store in React DevTools.
 - [solid-zustand](https://github.com/wobsoriano/solid-zustand) — State management in Solid using Zustand.
+- [treeshakable](https://github.com/react18-tools/treeshakable) — A wrapper for library creators to avoid redundant store creation.
 - [use-broadcast-ts](https://github.com/Romainlg29/use-broadcast) — Zustand middleware to share state between tabs.
 - [use-zustand](https://github.com/zustandjs/use-zustand) — Another custom hook to use Zustand vanilla store.
 - [vue-zustand](https://github.com/wobsoriano/vue-zustand) — State management solution for Vue based on Zustand.
@ -38,6 +39,7 @@ This can be done using third-party libraries created by the community.
 - [zukeeper](https://github.com/oslabs-beta/Zukeeper) - Native devtools with state and action tracking, diffing, tree display, and time travel
 - [zustand-ards](https://github.com/ivoilic/zustand-ards) - 💁 Simple opinionated utilities for example alternative selector formats and default shallow hooks
 - [zustand-computed](https://github.com/chrisvander/zustand-computed) — A Zustand middleware to create computed states.
+- [zustand-computed-state](https://github.com/yasintz/zustand-computed-state) — Simple middleware to add computed states.
 - [zustand-constate](https://github.com/ntvinhit/zustand-constate) — Context-based state management based on Zustand and taking ideas from Constate.
 - [zustand-context](https://github.com/fredericoo/zustand-context) — Create a zustand store in React Context, containing an initial value, or use it in your components with isolated, mockable instances.
 - [zustand-di](https://github.com/charkour/zustand-di) - use react props to init zustand stores
--- a/examples/demo/.eslintrc.cjs
+++ b/examples/demo/.eslintrc.cjs
@ -1,20 +1,16 @@
 /* eslint-env node */

 module.exports = {
+  root: true,
  env: { browser: true, es2020: true },
-  extends: [
-    'eslint:recommended',
-    'plugin:react/recommended',
-    'plugin:react/jsx-runtime',
-    'plugin:react-hooks/recommended',
-  ],
+  extends: ['eslint:recommended', 'plugin:react/recommended', 'plugin:react/jsx-runtime', 'plugin:react-hooks/recommended'],
  parserOptions: { ecmaVersion: 'latest', sourceType: 'module' },
  settings: { react: { version: '18.2' } },
  plugins: ['react-refresh'],
  rules: {
-    'react-refresh/only-export-components': [
-      'warn',
-      { allowConstantExport: true },
-    ],
+    'react-refresh/only-export-components': ['warn', { allowConstantExport: true }],
+    'react/prop-types': 0,
+    'import/extensions': ['off'],
+    'react/no-unknown-property': ['off'],
  },
 }
--- a/examples/demo/.prettierrc
+++ b/examples/demo/.prettierrc
@ -1,8 +1,8 @@
 {
-    "semi": false,
-    "trailingComma": "all",
-    "singleQuote": true,
-    "tabWidth": 2,
-    "printWidth": 140,
-    "jsxBracketSameLine": true
-  }
+  "semi": false,
+  "trailingComma": "all",
+  "singleQuote": true,
+  "tabWidth": 2,
+  "printWidth": 140,
+  "jsxBracketSameLine": true
+}
--- a/examples/demo/src/components/CodePreview.jsx
+++ b/examples/demo/src/components/CodePreview.jsx
@ -22,9 +22,9 @@ export default function CodePreview() {
        // position is set to relative so the copy button can align to bottom right
        <pre className={className} style={{ ...style, position: 'relative' }}>
          {tokens.map((line, i) => (
-            <div {...getLineProps({ line, key: i })}>
+            <div {...getLineProps({ line })} key={i}>
              {line.map((token, key) => (
-                <span {...getTokenProps({ token, key })} />
+                <span {...getTokenProps({ token })} key={key} />
              ))}
            </div>
          ))}
--- a/examples/demo/src/components/Details.jsx
+++ b/examples/demo/src/components/Details.jsx
@ -2,12 +2,16 @@ export default function Details() {
  return (
    <>
      <nav className="nav">
-        <a href="https://docs.pmnd.rs/zustand" children="Documentation" />
-        <a href="https://github.com/pmndrs/zustand" children="Github" />
+        <a href="https://docs.pmnd.rs/zustand">Documentation</a>
+        <a href="https://github.com/pmndrs/zustand">Github</a>
      </nav>
      <div className="bottom">
-        <a href="https://github.com/pmndrs/zustand/tree/main/examples/demo" className="bottom-right" children="<Source />" />
-        <a href="https://www.instagram.com/tina.henschel/" className="bottom-left" children="Illustrations @ Tina Henschel" />
+        <a href="https://github.com/pmndrs/zustand/tree/main/examples/demo" className="bottom-right">
+          {'<Source />'}
+        </a>
+        <a href="https://www.instagram.com/tina.henschel/" className="bottom-left">
+          Illustrations @ Tina Henschel
+        </a>
      </div>
      <span className="header-left">Zustand</span>
    </>
--- a/examples/demo/src/components/Fireflies.jsx
+++ b/examples/demo/src/components/Fireflies.jsx
@ -1,5 +1,5 @@
 import { Vector3, CatmullRomCurve3 } from 'three'
-import React, { useRef, useMemo } from 'react'
+import { useRef, useMemo } from 'react'
 import { extend, useFrame } from '@react-three/fiber'
 import * as meshline from 'meshline'

@ -7,7 +7,7 @@ extend(meshline)

 const r = () => Math.max(0.2, Math.random())

-function Fatline({ curve, width, color }) {
+function Fatline({ curve, color }) {
  const material = useRef()
  useFrame((state, delta) => (material.current.uniforms.dashOffset.value -= delta / 100))
  return (
@ -21,7 +21,7 @@ function Fatline({ curve, width, color }) {
 export default function Fireflies({ count, colors, radius = 10 }) {
  const lines = useMemo(
    () =>
-      new Array(count).fill().map((_, index) => {
+      new Array(count).fill().map(() => {
        const pos = new Vector3(Math.sin(0) * radius * r(), Math.cos(0) * radius * r(), 0)
        const points = new Array(30).fill().map((_, index) => {
          const angle = (index / 20) * Math.PI * 2
--- a/examples/demo/src/components/Scene.jsx
+++ b/examples/demo/src/components/Scene.jsx
@ -1,5 +1,5 @@
 import { Mesh, PlaneGeometry, Group, Vector3, MathUtils } from 'three'
-import React, { useRef, useState, useLayoutEffect } from 'react'
+import { memo, useRef, useState, useLayoutEffect } from 'react'
 import { createRoot, events, extend, useFrame } from '@react-three/fiber'
 import { Plane, useAspect, useTexture } from '@react-three/drei'
 import { EffectComposer, DepthOfField, Vignette } from '@react-three/postprocessing'
@ -106,7 +106,7 @@ function Canvas({ children }) {
    window.addEventListener('resize', resize)
    root.current.render(children)
    return () => window.removeEventListener('resize', resize)
-  }, [])
+  }, [children])

  return <canvas ref={canvas} style={{ position: 'relative', width: '100%', height: '100%', overflow: 'hidden', display: 'block' }} />
 }
--- a/examples/demo/src/materials/layerMaterial.js
+++ b/examples/demo/src/materials/layerMaterial.js
@ -22,7 +22,7 @@ const LayerMaterial = shaderMaterial(
        mat3 m = mat3(c, 0, s, 0, 1, 0, -s, 0, c);
        transformed = transformed * m;
        vNormal = vNormal * m;
-      }      
+      }
      gl_Position = projectionMatrix * modelViewMatrix * vec4(transformed, 1.);
    }`,
  ` uniform float time;
@ -38,7 +38,7 @@ const LayerMaterial = shaderMaterial(
      if (color.a < 0.1) discard;
      gl_FragColor = vec4(color.rgb, .1);
      #include <tonemapping_fragment>
-      #include <encodings_fragment>
+      #include <colorspace_fragment>
    }`,
 )

--- a/package.json
+++ b/package.json
@ -116,35 +116,36 @@
    "@rollup/plugin-replace": "^5.0.6",
    "@rollup/plugin-typescript": "^11.1.6",
    "@testing-library/react": "^16.0.0",
-    "@types/node": "^20.14.1",
+    "@types/node": "^20.14.9",
    "@types/react": "^18.3.3",
    "@types/react-dom": "^18.3.0",
    "@types/use-sync-external-store": "^0.0.6",
-    "@typescript-eslint/eslint-plugin": "^7.12.0",
-    "@typescript-eslint/parser": "^7.12.0",
+    "@typescript-eslint/eslint-plugin": "^7.14.1",
+    "@typescript-eslint/parser": "^7.14.1",
    "@vitest/coverage-v8": "^1.6.0",
    "@vitest/ui": "^1.6.0",
-    "esbuild": "^0.21.4",
+    "esbuild": "^0.21.5",
    "eslint": "8.57.0",
    "eslint-config-prettier": "^9.1.0",
    "eslint-import-resolver-alias": "^1.1.2",
    "eslint-plugin-import": "^2.29.1",
    "eslint-plugin-prettier": "^5.1.3",
-    "eslint-plugin-react": "^7.34.2",
+    "eslint-plugin-react": "^7.34.3",
+    "eslint-plugin-react-compiler": "0.0.0-experimental-0998c1e-20240625",
    "eslint-plugin-react-hooks": "^4.6.2",
    "eslint-plugin-vitest": "^0.5.4",
    "immer": "^10.1.1",
    "jsdom": "^24.1.0",
    "json": "^11.0.0",
-    "prettier": "^3.3.0",
-    "react": "^19.0.0-rc.0",
-    "react-dom": "^19.0.0-rc.0",
+    "prettier": "^3.3.2",
+    "react": "19.0.0-rc.0",
+    "react-dom": "19.0.0-rc.0",
    "redux": "^5.0.1",
    "rollup": "^4.18.0",
    "rollup-plugin-esbuild": "^6.1.1",
    "shelljs": "^0.8.5",
    "shx": "^0.3.4",
-    "typescript": "^5.4.5",
+    "typescript": "^5.5.2",
    "use-sync-external-store": "^1.2.2",
    "vitest": "^1.6.0"
  },
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
--- a/src/react.ts
+++ b/src/react.ts
@ -16,18 +16,21 @@ const { useDebugValue, useSyncExternalStore } = ReactExports

 type ExtractState<S> = S extends { getState: () => infer T } ? T : never

-type ReadonlyStoreApi<T> = Pick<StoreApi<T>, 'getState' | 'subscribe'>
+type ReadonlyStoreApi<T> = Pick<
+  StoreApi<T>,
+  'getState' | 'getInitialState' | 'subscribe'
+>

 const identity = <T>(arg: T): T => arg
-export function useStore<S extends StoreApi<unknown>>(api: S): ExtractState<S>
+export function useStore<S extends ReadonlyStoreApi<unknown>>(api: S): ExtractState<S>

-export function useStore<S extends StoreApi<unknown>, U>(
+export function useStore<S extends ReadonlyStoreApi<unknown>, U>(
  api: S,
  selector: (state: ExtractState<S>) => U,
 ): U

 export function useStore<TState, StateSlice>(
-  api: StoreApi<TState>,
+  api: ReadonlyStoreApi<TState>,
  selector: (state: TState) => StateSlice = identity as any,
 ) {
  const slice = useSyncExternalStore(
--- a/src/traditional.ts
+++ b/src/traditional.ts
@ -20,22 +20,25 @@ const { useSyncExternalStoreWithSelector } = useSyncExternalStoreExports

 type ExtractState<S> = S extends { getState: () => infer T } ? T : never

-type ReadonlyStoreApi<T> = Pick<StoreApi<T>, 'getState' | 'subscribe'>
+type ReadonlyStoreApi<T> = Pick<
+  StoreApi<T>,
+  'getState' | 'getInitialState' | 'subscribe'
+>

 const identity = <T>(arg: T): T => arg

-export function useStoreWithEqualityFn<S extends StoreApi<unknown>>(
+export function useStoreWithEqualityFn<S extends ReadonlyStoreApi<unknown>>(
  api: S,
 ): ExtractState<S>

-export function useStoreWithEqualityFn<S extends StoreApi<unknown>, U>(
+export function useStoreWithEqualityFn<S extends ReadonlyStoreApi<unknown>, U>(
  api: S,
  selector: (state: ExtractState<S>) => U,
  equalityFn?: (a: U, b: U) => boolean,
 ): U

 export function useStoreWithEqualityFn<TState, StateSlice>(
-  api: StoreApi<TState>,
+  api: ReadonlyStoreApi<TState>,
  selector: (state: TState) => StateSlice = identity as any,
  equalityFn?: (a: StateSlice, b: StateSlice) => boolean,
 ) {