fix: migrate zustand to v4

Author: pionxzh

package.json

@@ -63,7 +63,7 @@
     "@emotion/styled": "^11.10.6",
     "@mui/material": "^5.11.12",
     "copy-to-clipboard": "^3.3.3",
-    "zustand": "^4.1.5"
+    "zustand": "^4.3.6"
   },
   "lint-staged": {
     "!*.{ts,tsx,js,jsx}": "prettier --write --ignore-unknown",

rollup.config.ts

@@ -31,7 +31,6 @@ const external = [
   'copy-to-clipboard',
   'zustand',
   'zustand/context',
-  'zustand/middleware',
   'react',
   'react/jsx-runtime',
   'react-dom',

src/stores/JsonViewerStore.ts

@@ -1,7 +1,7 @@
 import type { SetStateAction } from 'react'
-import create from 'zustand'
+import type { StoreApi } from 'zustand'
+import { create } from 'zustand'
 import createContext from 'zustand/context'
-import { combine } from 'zustand/middleware'
 
 import type {
   JsonViewerOnChange,
@@ -38,85 +38,75 @@ export type JsonViewerState<T = unknown> = {
   onSelect: JsonViewerOnSelect | undefined
   keyRenderer: JsonViewerKeyRenderer
   displayObjectSize: boolean
-}
 
-export type JsonViewerActions = {
   getInspectCache: (path: Path, nestedIndex?: number) => boolean
   setInspectCache: (
     path: Path, action: SetStateAction<boolean>, nestedIndex?: number) => void
   setHover: (path: Path | null, nestedIndex?: number) => void
 }
 
-export const createJsonViewerStore = <T = unknown> (props: JsonViewerProps<T>) =>
-  create(
-    combine<JsonViewerState<T>, JsonViewerActions>(
-      {
-        // provided by user
-        enableClipboard: props.enableClipboard ?? true,
-        indentWidth: props.indentWidth ?? 3,
-        groupArraysAfterLength: props.groupArraysAfterLength ?? 100,
-        collapseStringsAfterLength:
-          (props.collapseStringsAfterLength === false)
-            ? Number.MAX_VALUE
-            : props.collapseStringsAfterLength ?? 50,
-        maxDisplayLength: props.maxDisplayLength ?? 30,
-        rootName: props.rootName ?? 'root',
-        onChange: props.onChange ?? (() => {}),
-        onCopy: props.onCopy ?? undefined,
-        onSelect: props.onSelect ?? undefined,
-        keyRenderer: props.keyRenderer ?? DefaultKeyRenderer,
-        editable: props.editable ?? false,
-        defaultInspectDepth: props.defaultInspectDepth ?? 5,
-        objectSortKeys: props.objectSortKeys ?? false,
-        quotesOnKeys: props.quotesOnKeys ?? true,
-        displayDataTypes: props.displayDataTypes ?? true,
-        // internal state
-        inspectCache: {},
-        hoverPath: null,
-        colorspace: lightColorspace,
-        value: props.value,
-        displayObjectSize: props.displayObjectSize ?? true
-      },
-      (set, get) => ({
-        getInspectCache: (path, nestedIndex) => {
-          const target = nestedIndex !== undefined
-            ? path.join('.') +
+export const createJsonViewerStore = <T = unknown> (props: JsonViewerProps<T>) => {
+  return create<JsonViewerState>()((set, get) => ({
+    // provided by user
+    enableClipboard: props.enableClipboard ?? true,
+    indentWidth: props.indentWidth ?? 3,
+    groupArraysAfterLength: props.groupArraysAfterLength ?? 100,
+    collapseStringsAfterLength:
+      (props.collapseStringsAfterLength === false)
+        ? Number.MAX_VALUE
+        : props.collapseStringsAfterLength ?? 50,
+    maxDisplayLength: props.maxDisplayLength ?? 30,
+    rootName: props.rootName ?? 'root',
+    onChange: props.onChange ?? (() => {}),
+    onCopy: props.onCopy ?? undefined,
+    onSelect: props.onSelect ?? undefined,
+    keyRenderer: props.keyRenderer ?? DefaultKeyRenderer,
+    editable: props.editable ?? false,
+    defaultInspectDepth: props.defaultInspectDepth ?? 5,
+    objectSortKeys: props.objectSortKeys ?? false,
+    quotesOnKeys: props.quotesOnKeys ?? true,
+    displayDataTypes: props.displayDataTypes ?? true,
+    // internal state
+    inspectCache: {},
+    hoverPath: null,
+    colorspace: lightColorspace,
+    value: props.value,
+    displayObjectSize: props.displayObjectSize ?? true,
+
+    getInspectCache: (path, nestedIndex) => {
+      const target = nestedIndex !== undefined
+        ? path.join('.') +
             `[${nestedIndex}]nt`
-            : path.join('.')
-          return get().inspectCache[target]
-        },
-        setInspectCache: (path, action, nestedIndex) => {
-          const target = nestedIndex !== undefined
-            ? path.join('.') +
+        : path.join('.')
+      return get().inspectCache[target]
+    },
+    setInspectCache: (path, action, nestedIndex) => {
+      const target = nestedIndex !== undefined
+        ? path.join('.') +
             `[${nestedIndex}]nt`
-            : path.join('.')
-          set(state => ({
-            inspectCache: {
-              ...state.inspectCache,
-              [target]: typeof action === 'function'
-                ? action(
-                  state.inspectCache[target])
-                : action
-            }
-          }))
-        },
-        setHover: (path, nestedIndex) => {
-          set({
-            hoverPath: path
-              ? ({
-                  path,
-                  nestedIndex
-                })
-              : null
-          })
+        : path.join('.')
+      set(state => ({
+        inspectCache: {
+          ...state.inspectCache,
+          [target]: typeof action === 'function'
+            ? action(
+              state.inspectCache[target])
+            : action
         }
+      }))
+    },
+    setHover: (path, nestedIndex) => {
+      set({
+        hoverPath: path
+          ? ({ path, nestedIndex })
+          : null
       })
-    )
-  )
-export type JsonViewerStore = ReturnType<typeof createJsonViewerStore>
+    }
+  }))
+}
 
 export const {
   useStore: useJsonViewerStore,
   useStoreApi: useJsonViewerStoreApi,
   Provider: JsonViewerProvider
-} = createContext<JsonViewerStore>()
+} = createContext<StoreApi<JsonViewerState>>()

src/stores/typeRegistry.tsx

@@ -1,9 +1,9 @@
 import { Box } from '@mui/material'
 import type { SetStateAction } from 'react'
 import { memo, useMemo, useState } from 'react'
-import create from 'zustand'
-import createStore from 'zustand/context'
-import { combine } from 'zustand/middleware'
+import type { StoreApi } from 'zustand'
+import { create } from 'zustand'
+import createContext from 'zustand/context'
 
 import { createEasyType } from '../components/DataTypes/createEasyType'
 import {
@@ -21,35 +21,30 @@ import { useJsonViewerStore } from './JsonViewerStore'
 
 type TypeRegistryState = {
   registry: DataType<any>[]
-}
 
-type TypeRegistryActions = {
   registerTypes: (setState: SetStateAction<DataType<any>[]>) => void
 }
 
-export const createTypeRegistryStore = () => create(
-  combine<TypeRegistryState, TypeRegistryActions>(
-    {
-      registry: []
-    },
-    (set) => ({
-      registerTypes: (setState) => {
-        set(state => ({
-          registry:
-            typeof setState === 'function'
-              ? setState(state.registry)
-              : setState
-        }))
-      }
-    })
-  )
-)
+export const createTypeRegistryStore = () => {
+  return create<TypeRegistryState>()((set) => ({
+    registry: [],
+
+    registerTypes: (setState) => {
+      set(state => ({
+        registry:
+          typeof setState === 'function'
+            ? setState(state.registry)
+            : setState
+      }))
+    }
+  }))
+}
 
 export const {
   Provider: TypeRegistryProvider,
   useStore: useTypeRegistryStore,
   useStoreApi: useTypeRegistryStoreApi
-} = createStore<ReturnType<typeof createTypeRegistryStore>>()
+} = createContext<StoreApi<TypeRegistryState>>()
 
 const objectType: DataType<object> = {
   is: (value) => typeof value === 'object',

yarn.lock

@@ -1961,7 +1961,7 @@ __metadata:
     typescript: ^4.9.5
     vite: ^4.1.4
     vitest: ^0.29.2
-    zustand: ^4.1.5
+    zustand: ^4.3.6
   peerDependencies:
     react: ^17 || ^18
     react-dom: ^17 || ^18
@@ -10449,9 +10449,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"zustand@npm:^4.1.5":
-  version: 4.1.5
-  resolution: "zustand@npm:4.1.5"
+"zustand@npm:^4.3.6":
+  version: 4.3.6
+  resolution: "zustand@npm:4.3.6"
   dependencies:
     use-sync-external-store: 1.2.0
   peerDependencies:
@@ -10462,7 +10462,7 @@ __metadata:
       optional: true
     react:
       optional: true
-  checksum: 13190ee8e8a797c5347b525a7c392be62b2addacdd9645dd20d37ea053f96c7c7067c099c6201e98ebb8d54991f2e04e241cc323f9a25b841d44f0ae048e3afc
+  checksum: 4d3cec03526f04ff3de6dc45b6f038c47f091836af9660fbf5f682cae1628221102882df20e4048dfe699a43f67424e5d6afc1116f3838a80eea5dd4f95ddaed
   languageName: node
   linkType: hard