Skip to content

Commit 5bbfcf9

Browse files
pionxzhpionxzh
committed
fix: migrate zustand to v4
1 parent 6e39bcb commit 5bbfcf9

File tree

5 files changed

+82
-98
lines changed

5 files changed

+82
-98
lines changed

‎package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -63,7 +63,7 @@
6363
"@emotion/styled": "^11.10.6",
6464
"@mui/material": "^5.11.12",
6565
"copy-to-clipboard": "^3.3.3",
66-
"zustand": "^4.1.5"
66+
"zustand": "^4.3.6"
6767
},
6868
"lint-staged": {
6969
"!*.{ts,tsx,js,jsx}": "prettier --write --ignore-unknown",

‎rollup.config.ts

-1
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,6 @@ const external = [
3131
'copy-to-clipboard',
3232
'zustand',
3333
'zustand/context',
34-
'zustand/middleware',
3534
'react',
3635
'react/jsx-runtime',
3736
'react-dom',

‎src/stores/JsonViewerStore.ts

+58-68
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import type { SetStateAction } from 'react'
2-
import create from 'zustand'
2+
import type { StoreApi } from 'zustand'
3+
import { create } from 'zustand'
34
import createContext from 'zustand/context'
4-
import { combine } from 'zustand/middleware'
55

66
import type {
77
JsonViewerOnChange,
@@ -38,85 +38,75 @@ export type JsonViewerState<T = unknown> = {
3838
onSelect: JsonViewerOnSelect | undefined
3939
keyRenderer: JsonViewerKeyRenderer
4040
displayObjectSize: boolean
41-
}
4241

43-
export type JsonViewerActions = {
4442
getInspectCache: (path: Path, nestedIndex?: number) => boolean
4543
setInspectCache: (
4644
path: Path, action: SetStateAction<boolean>, nestedIndex?: number) => void
4745
setHover: (path: Path | null, nestedIndex?: number) => void
4846
}
4947

50-
export const createJsonViewerStore = <T = unknown> (props: JsonViewerProps<T>) =>
51-
create(
52-
combine<JsonViewerState<T>, JsonViewerActions>(
53-
{
54-
// provided by user
55-
enableClipboard: props.enableClipboard ?? true,
56-
indentWidth: props.indentWidth ?? 3,
57-
groupArraysAfterLength: props.groupArraysAfterLength ?? 100,
58-
collapseStringsAfterLength:
59-
(props.collapseStringsAfterLength === false)
60-
? Number.MAX_VALUE
61-
: props.collapseStringsAfterLength ?? 50,
62-
maxDisplayLength: props.maxDisplayLength ?? 30,
63-
rootName: props.rootName ?? 'root',
64-
onChange: props.onChange ?? (() => {}),
65-
onCopy: props.onCopy ?? undefined,
66-
onSelect: props.onSelect ?? undefined,
67-
keyRenderer: props.keyRenderer ?? DefaultKeyRenderer,
68-
editable: props.editable ?? false,
69-
defaultInspectDepth: props.defaultInspectDepth ?? 5,
70-
objectSortKeys: props.objectSortKeys ?? false,
71-
quotesOnKeys: props.quotesOnKeys ?? true,
72-
displayDataTypes: props.displayDataTypes ?? true,
73-
// internal state
74-
inspectCache: {},
75-
hoverPath: null,
76-
colorspace: lightColorspace,
77-
value: props.value,
78-
displayObjectSize: props.displayObjectSize ?? true
79-
},
80-
(set, get) => ({
81-
getInspectCache: (path, nestedIndex) => {
82-
const target = nestedIndex !== undefined
83-
? path.join('.') +
48+
export const createJsonViewerStore = <T = unknown> (props: JsonViewerProps<T>) => {
49+
return create<JsonViewerState>()((set, get) => ({
50+
// provided by user
51+
enableClipboard: props.enableClipboard ?? true,
52+
indentWidth: props.indentWidth ?? 3,
53+
groupArraysAfterLength: props.groupArraysAfterLength ?? 100,
54+
collapseStringsAfterLength:
55+
(props.collapseStringsAfterLength === false)
56+
? Number.MAX_VALUE
57+
: props.collapseStringsAfterLength ?? 50,
58+
maxDisplayLength: props.maxDisplayLength ?? 30,
59+
rootName: props.rootName ?? 'root',
60+
onChange: props.onChange ?? (() => {}),
61+
onCopy: props.onCopy ?? undefined,
62+
onSelect: props.onSelect ?? undefined,
63+
keyRenderer: props.keyRenderer ?? DefaultKeyRenderer,
64+
editable: props.editable ?? false,
65+
defaultInspectDepth: props.defaultInspectDepth ?? 5,
66+
objectSortKeys: props.objectSortKeys ?? false,
67+
quotesOnKeys: props.quotesOnKeys ?? true,
68+
displayDataTypes: props.displayDataTypes ?? true,
69+
// internal state
70+
inspectCache: {},
71+
hoverPath: null,
72+
colorspace: lightColorspace,
73+
value: props.value,
74+
displayObjectSize: props.displayObjectSize ?? true,
75+
76+
getInspectCache: (path, nestedIndex) => {
77+
const target = nestedIndex !== undefined
78+
? path.join('.') +
8479
`[${nestedIndex}]nt`
85-
: path.join('.')
86-
return get().inspectCache[target]
87-
},
88-
setInspectCache: (path, action, nestedIndex) => {
89-
const target = nestedIndex !== undefined
90-
? path.join('.') +
80+
: path.join('.')
81+
return get().inspectCache[target]
82+
},
83+
setInspectCache: (path, action, nestedIndex) => {
84+
const target = nestedIndex !== undefined
85+
? path.join('.') +
9186
`[${nestedIndex}]nt`
92-
: path.join('.')
93-
set(state => ({
94-
inspectCache: {
95-
...state.inspectCache,
96-
[target]: typeof action === 'function'
97-
? action(
98-
state.inspectCache[target])
99-
: action
100-
}
101-
}))
102-
},
103-
setHover: (path, nestedIndex) => {
104-
set({
105-
hoverPath: path
106-
? ({
107-
path,
108-
nestedIndex
109-
})
110-
: null
111-
})
87+
: path.join('.')
88+
set(state => ({
89+
inspectCache: {
90+
...state.inspectCache,
91+
[target]: typeof action === 'function'
92+
? action(
93+
state.inspectCache[target])
94+
: action
11295
}
96+
}))
97+
},
98+
setHover: (path, nestedIndex) => {
99+
set({
100+
hoverPath: path
101+
? ({ path, nestedIndex })
102+
: null
113103
})
114-
)
115-
)
116-
export type JsonViewerStore = ReturnType<typeof createJsonViewerStore>
104+
}
105+
}))
106+
}
117107

118108
export const {
119109
useStore: useJsonViewerStore,
120110
useStoreApi: useJsonViewerStoreApi,
121111
Provider: JsonViewerProvider
122-
} = createContext<JsonViewerStore>()
112+
} = createContext<StoreApi<JsonViewerState>>()

‎src/stores/typeRegistry.tsx

+18-23
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
import { Box } from '@mui/material'
22
import type { SetStateAction } from 'react'
33
import { memo, useMemo, useState } from 'react'
4-
import create from 'zustand'
5-
import createStore from 'zustand/context'
6-
import { combine } from 'zustand/middleware'
4+
import type { StoreApi } from 'zustand'
5+
import { create } from 'zustand'
6+
import createContext from 'zustand/context'
77

88
import { createEasyType } from '../components/DataTypes/createEasyType'
99
import {
@@ -21,35 +21,30 @@ import { useJsonViewerStore } from './JsonViewerStore'
2121

2222
type TypeRegistryState = {
2323
registry: DataType<any>[]
24-
}
2524

26-
type TypeRegistryActions = {
2725
registerTypes: (setState: SetStateAction<DataType<any>[]>) => void
2826
}
2927

30-
export const createTypeRegistryStore = () => create(
31-
combine<TypeRegistryState, TypeRegistryActions>(
32-
{
33-
registry: []
34-
},
35-
(set) => ({
36-
registerTypes: (setState) => {
37-
set(state => ({
38-
registry:
39-
typeof setState === 'function'
40-
? setState(state.registry)
41-
: setState
42-
}))
43-
}
44-
})
45-
)
46-
)
28+
export const createTypeRegistryStore = () => {
29+
return create<TypeRegistryState>()((set) => ({
30+
registry: [],
31+
32+
registerTypes: (setState) => {
33+
set(state => ({
34+
registry:
35+
typeof setState === 'function'
36+
? setState(state.registry)
37+
: setState
38+
}))
39+
}
40+
}))
41+
}
4742

4843
export const {
4944
Provider: TypeRegistryProvider,
5045
useStore: useTypeRegistryStore,
5146
useStoreApi: useTypeRegistryStoreApi
52-
} = createStore<ReturnType<typeof createTypeRegistryStore>>()
47+
} = createContext<StoreApi<TypeRegistryState>>()
5348

5449
const objectType: DataType<object> = {
5550
is: (value) => typeof value === 'object',

‎yarn.lock

+5-5
Original file line numberDiff line numberDiff line change
@@ -1961,7 +1961,7 @@ __metadata:
19611961
typescript: ^4.9.5
19621962
vite: ^4.1.4
19631963
vitest: ^0.29.2
1964-
zustand: ^4.1.5
1964+
zustand: ^4.3.6
19651965
peerDependencies:
19661966
react: ^17 || ^18
19671967
react-dom: ^17 || ^18
@@ -10449,9 +10449,9 @@ __metadata:
1044910449
languageName: node
1045010450
linkType: hard
1045110451

10452-
"zustand@npm:^4.1.5":
10453-
version: 4.1.5
10454-
resolution: "zustand@npm:4.1.5"
10452+
"zustand@npm:^4.3.6":
10453+
version: 4.3.6
10454+
resolution: "zustand@npm:4.3.6"
1045510455
dependencies:
1045610456
use-sync-external-store: 1.2.0
1045710457
peerDependencies:
@@ -10462,7 +10462,7 @@ __metadata:
1046210462
optional: true
1046310463
react:
1046410464
optional: true
10465-
checksum: 13190ee8e8a797c5347b525a7c392be62b2addacdd9645dd20d37ea053f96c7c7067c099c6201e98ebb8d54991f2e04e241cc323f9a25b841d44f0ae048e3afc
10465+
checksum: 4d3cec03526f04ff3de6dc45b6f038c47f091836af9660fbf5f682cae1628221102882df20e4048dfe699a43f67424e5d6afc1116f3838a80eea5dd4f95ddaed
1046610466
languageName: node
1046710467
linkType: hard
1046810468

0 commit comments

Comments
 (0)