Replace zustand with jotai

Author: rtritto

package.json

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

rollup.config.ts

@@ -29,7 +29,8 @@ const external = [
   '@mui/material',
   '@mui/material/styles',
   'copy-to-clipboard',
-  'zustand',
+  'jotai',
+  'jotai/utils',
   'react',
   'react/jsx-runtime',
   'react-dom',

src/components/DataKeyPair.tsx

@@ -1,11 +1,23 @@
 import { Box } from '@mui/material'
+import { useAtomValue, useSetAtom } from 'jotai'
+import { useAtomCallback } from 'jotai/utils'
 import type { ComponentProps, FC, MouseEvent } from 'react'
 import { useCallback, useMemo, useState } from 'react'
 
-import { useTextColor } from '../hooks/useColor'
 import { useClipboard } from '../hooks/useCopyToClipboard'
 import { useInspect } from '../hooks/useInspect'
-import { useJsonViewerStore } from '../stores/JsonViewerStore'
+import {
+  colorspaceAtom,
+  editableAtom,
+  enableClipboardAtom,
+  hoverPathAtom,
+  keyRendererAtom,
+  onChangeAtom,
+  quotesOnKeysAtom,
+  rootNameAtom,
+  setHoverAtomFamily,
+  valueAtom
+} from '../state'
 import { useTypeComponents } from '../stores/typeRegistry'
 import type { DataItemProps } from '../type'
 import { getValueSize } from '../utils'
@@ -43,7 +55,7 @@ const IconBox: FC<IconBoxProps> = (props) => (
 export const DataKeyPair: FC<DataKeyPairProps> = (props) => {
   const { value, path, nestedIndex } = props
   const propsEditable = props.editable ?? undefined
-  const storeEditable = useJsonViewerStore(store => store.editable)
+  const storeEditable = useAtomValue(editableAtom)
   const editable = useMemo(() => {
     if (storeEditable === false) {
       return false
@@ -60,26 +72,33 @@ export const DataKeyPair: FC<DataKeyPairProps> = (props) => {
   const [tempValue, setTempValue] = useState(typeof value === 'function' ? () => value : value)
   const depth = path.length
   const key = path[depth - 1]
-  const hoverPath = useJsonViewerStore(store => store.hoverPath)
+  const hoverPath = useAtomValue(hoverPathAtom)
   const isHover = useMemo(() => {
     return hoverPath && path.every(
       (value, index) => value === hoverPath.path[index] && nestedIndex ===
         hoverPath.nestedIndex)
   }, [hoverPath, path, nestedIndex])
-  const setHover = useJsonViewerStore(store => store.setHover)
-  const root = useJsonViewerStore(store => store.value)
+  const setHover = useAtomCallback(
+    useCallback((get, set, arg) => {
+      // eslint-disable-next-line react-hooks/rules-of-hooks
+      useSetAtom(setHoverAtomFamily(arg))
+    }, [])
+  )
+  const root = useAtomValue(valueAtom)
   const [inspect, setInspect] = useInspect(path, value, nestedIndex)
   const [editing, setEditing] = useState(false)
-  const onChange = useJsonViewerStore(store => store.onChange)
-  const keyColor = useTextColor()
-  const numberKeyColor = useJsonViewerStore(store => store.colorspace.base0C)
+  const onChange = useAtomValue(onChangeAtom)
+  const {
+    base07: keyColor,
+    base0C: numberKeyColor
+  } = useAtomValue(colorspaceAtom)
   const { Component, PreComponent, PostComponent, Editor } = useTypeComponents(value, path)
-  const quotesOnKeys = useJsonViewerStore(store => store.quotesOnKeys)
-  const rootName = useJsonViewerStore(store => store.rootName)
+  const quotesOnKeys = useAtomValue(quotesOnKeysAtom)
+  const rootName = useAtomValue(rootNameAtom)
   const isRoot = root === value
   const isNumberKey = Number.isInteger(Number(key))
 
-  const enableClipboard = useJsonViewerStore(store => store.enableClipboard)
+  const enableClipboard = useAtomValue(enableClipboardAtom)
   const { copy, copied } = useClipboard()
 
   const actionIcons = useMemo(() => {
@@ -161,7 +180,7 @@ export const DataKeyPair: FC<DataKeyPairProps> = (props) => {
 
   const isEmptyValue = useMemo(() => getValueSize(value) === 0, [value])
   const expandable = !isEmptyValue && !!(PreComponent && PostComponent)
-  const KeyRenderer = useJsonViewerStore(store => store.keyRenderer)
+  const KeyRenderer = useAtomValue(keyRendererAtom)
   const downstreamProps: DataItemProps = useMemo(() => ({
     path,
     inspect,
@@ -173,10 +192,7 @@ export const DataKeyPair: FC<DataKeyPairProps> = (props) => {
       className='data-key-pair'
       data-testid={'data-key-pair' + path.join('.')}
       sx={{ userSelect: 'text' }}
-      onMouseEnter={
-        useCallback(() => setHover(path, nestedIndex),
-          [setHover, path, nestedIndex])
-      }
+      onMouseEnter={() => setHover({ path, nestedIndex })}
     >
       <DataBox
         component='span'

src/components/DataTypes/Function.tsx

@@ -3,9 +3,10 @@
  *  Because in Next.js SSR, the function will be translated to other type
  */
 import { Box, NoSsr } from '@mui/material'
+import { useAtomValue } from 'jotai'
 import type { FC } from 'react'
 
-import { useJsonViewerStore } from '../../stores/JsonViewerStore'
+import { colorspaceAtom } from '../../state'
 import type { DataItemProps } from '../../type'
 import { DataTypeLabel } from '../DataTypeLabel'
 
@@ -70,7 +71,7 @@ export const PostFunctionType: FC<DataItemProps<Function>> = () => {
 }
 
 export const FunctionType: FC<DataItemProps<Function>> = (props) => {
-  const functionColor = useJsonViewerStore(store => store.colorspace.base05)
+  const { base05: functionColor } = useAtomValue(colorspaceAtom)
   return (
     <NoSsr>
       <Box

src/components/DataTypes/Object.tsx

@@ -1,10 +1,17 @@
 import { Box } from '@mui/material'
+import { useAtomValue } from 'jotai'
 import type { FC } from 'react'
 import { useMemo, useState } from 'react'
 
-import { useTextColor } from '../../hooks/useColor'
 import { useIsCycleReference } from '../../hooks/useIsCycleReference'
-import { useJsonViewerStore } from '../../stores/JsonViewerStore'
+import {
+  colorspaceAtom,
+  displayObjectSizeAtom,
+  groupArraysAfterLengthAtom,
+  indentWidthAtom,
+  maxDisplayLengthAtom,
+  objectSortKeysAtom
+} from '../../state'
 import type { DataItemProps } from '../../type'
 import { getValueSize, segmentArray } from '../../utils'
 import { DataKeyPair } from '../DataKeyPair'
@@ -30,13 +37,14 @@ function inspectMetadata (value: object) {
 }
 
 export const PreObjectType: FC<DataItemProps<object>> = (props) => {
-  const metadataColor = useJsonViewerStore(store => store.colorspace.base04)
-  const textColor = useTextColor()
+  const {
+    base04: metadataColor,
+    base07: textColor
+  } = useAtomValue(colorspaceAtom)
   const isArray = useMemo(() => Array.isArray(props.value), [props.value])
   const isEmptyValue = useMemo(() => getValueSize(props.value) === 0, [props.value])
-  const sizeOfValue = useMemo(() => inspectMetadata(props.value), [props.value]
-  )
-  const displayObjectSize = useJsonViewerStore(store => store.displayObjectSize)
+  const sizeOfValue = useMemo(() => inspectMetadata(props.value), [props.inspect, props.value])
+  const displayObjectSize = useAtomValue(displayObjectSizeAtom)
   const isTrap = useIsCycleReference(props.path, props.value)
   return (
     <Box
@@ -78,9 +86,9 @@ export const PreObjectType: FC<DataItemProps<object>> = (props) => {
 }
 
 export const PostObjectType: FC<DataItemProps<object>> = (props) => {
-  const metadataColor = useJsonViewerStore(store => store.colorspace.base04)
+  const { base04: metadataColor } = useAtomValue(colorspaceAtom)
   const isArray = useMemo(() => Array.isArray(props.value), [props.value])
-  const displayObjectSize = useJsonViewerStore(store => store.displayObjectSize)
+  const displayObjectSize = useAtomValue(displayObjectSizeAtom)
   const isEmptyValue = useMemo(() => getValueSize(props.value) === 0, [props.value])
   const sizeOfValue = useMemo(() => inspectMetadata(props.value), [props.value])
 
@@ -111,12 +119,14 @@ function getIterator (value: any): value is Iterable<unknown> {
 }
 
 export const ObjectType: FC<DataItemProps<object>> = (props) => {
-  const keyColor = useTextColor()
-  const borderColor = useJsonViewerStore(store => store.colorspace.base02)
-  const groupArraysAfterLength = useJsonViewerStore(store => store.groupArraysAfterLength)
+  const {
+    base02: borderColor,
+    base07: keyColor
+  } = useAtomValue(colorspaceAtom)
+  const groupArraysAfterLength = useAtomValue(groupArraysAfterLengthAtom)
   const isTrap = useIsCycleReference(props.path, props.value)
-  const [displayLength, setDisplayLength] = useState(useJsonViewerStore(store => store.maxDisplayLength))
-  const objectSortKeys = useJsonViewerStore(store => store.objectSortKeys)
+  const [displayLength, setDisplayLength] = useState(useAtomValue(maxDisplayLengthAtom))
+  const objectSortKeys = useAtomValue(objectSortKeysAtom)
   const elements = useMemo(() => {
     if (!props.inspect) {
       return null
@@ -245,7 +255,7 @@ export const ObjectType: FC<DataItemProps<object>> = (props) => {
     objectSortKeys
   ])
   const marginLeft = props.inspect ? 0.6 : 0
-  const width = useJsonViewerStore(store => store.indentWidth)
+  const width = useAtomValue(indentWidthAtom)
   const indentWidth = props.inspect ? width - marginLeft : width
   const isEmptyValue = useMemo(() => getValueSize(props.value) === 0, [props.value])
   if (isEmptyValue) {

src/components/DataTypes/createEasyType.tsx

@@ -1,8 +1,9 @@
 import { InputBase } from '@mui/material'
+import { useAtomValue } from 'jotai'
 import type { ChangeEventHandler, ComponentType, FC } from 'react'
 import { memo, useCallback } from 'react'
 
-import { useJsonViewerStore } from '../../stores/JsonViewerStore'
+import { colorspaceAtom, displayDataTypesAtom, onSelectAtom } from '../../state'
 import type { Colorspace } from '../../theme/base16'
 import type { DataItemProps, DataType, EditorProps } from '../../type'
 import { DataTypeLabel } from '../DataTypeLabel'
@@ -18,13 +19,11 @@ export function createEasyType<Value> (
   }
 ): Omit<DataType<Value>, 'is'> {
   const { fromString, colorKey, displayTypeLabel = true } = config
-
   const Render = memo(renderValue)
   const EasyType: FC<DataItemProps<Value>> = (props) => {
-    const storeDisplayDataTypes = useJsonViewerStore(store => store.displayDataTypes)
-    const color = useJsonViewerStore(store => store.colorspace[colorKey])
-    const onSelect = useJsonViewerStore(store => store.onSelect)
-
+    const storeDisplayDataTypes = useAtomValue(displayDataTypesAtom)
+    const color = useAtomValue(colorspaceAtom)[colorKey]
+    const onSelect = useAtomValue(onSelectAtom)
     return (
       <DataBox onClick={() => onSelect?.(props.path, props.value)} sx={{ color }}>
         {(displayTypeLabel && storeDisplayDataTypes) && <DataTypeLabel dataType={type} />}
@@ -41,9 +40,8 @@ export function createEasyType<Value> (
       Component: EasyType
     }
   }
-
   const EasyTypeEditor: FC<EditorProps<Value>> = ({ value, setValue }) => {
-    const color = useJsonViewerStore(store => store.colorspace[colorKey])
+    const color = useAtomValue(colorspaceAtom)[colorKey]
     return (
       <InputBase
         value={value}

src/hooks/useColor.ts

@@ -1,7 +1,8 @@
 import copyToClipboard from 'copy-to-clipboard'
+import { useAtomValue } from 'jotai'
 import { useCallback, useRef, useState } from 'react'
 
-import { useJsonViewerStore } from '../stores/JsonViewerStore'
+import { onCopyAtom } from '../state'
 import type { JsonViewerOnCopy } from '../type'
 import { safeStringify } from '../utils'
 
@@ -23,7 +24,7 @@ export function useClipboard ({ timeout = 2000 } = {}) {
     copyTimeout.current = window.setTimeout(() => setCopied(false), timeout)
     setCopied(value)
   }, [timeout])
-  const onCopy = useJsonViewerStore(store => store.onCopy)
+  const onCopy = useAtomValue(onCopyAtom)
 
   const copy = useCallback<JsonViewerOnCopy>((path, value: unknown) => {
     if (typeof onCopy === 'function') {

src/hooks/useCopyToClipboard.ts

@@ -1,41 +1,52 @@
-import type {
-  Dispatch,
-  SetStateAction
-} from 'react'
+import { useAtomValue, useSetAtom } from 'jotai'
+import { useAtomCallback } from 'jotai/utils'
 import {
   useCallback,
   useEffect,
   useState
 } from 'react'
 
 import {
-  useJsonViewerStore
-} from '../stores/JsonViewerStore'
+  defaultInspectDepthAtom,
+  getInspectCacheAtomFamily,
+  setInspectCacheAtomFamily
+} from '../state'
 import { useIsCycleReference } from './useIsCycleReference'
 
 export function useInspect (path: (string | number)[], value: any, nestedIndex?: number) {
   const depth = path.length
   const isTrap = useIsCycleReference(path, value)
-  const getInspectCache = useJsonViewerStore(store => store.getInspectCache)
-  const setInspectCache = useJsonViewerStore(store => store.setInspectCache)
-  const defaultInspectDepth = useJsonViewerStore(store => store.defaultInspectDepth)
+  const defaultInspectDepth = useAtomValue(defaultInspectDepthAtom)
+
+  const getInspectCache = useAtomCallback(
+    useCallback((get, set, arg) => {
+      // eslint-disable-next-line react-hooks/rules-of-hooks
+      useAtomValue(getInspectCacheAtomFamily(arg))
+    }, [])
+  )
+  const setInspectCache = useAtomCallback(
+    useCallback((get, set, arg) => {
+      // eslint-disable-next-line react-hooks/rules-of-hooks
+      useSetAtom(setInspectCacheAtomFamily(arg))
+    }, [])
+  )
   useEffect(() => {
-    const inspect = getInspectCache(path, nestedIndex)
+    const inspect = getInspectCache({ path, nestedIndex })
     if (inspect !== undefined) {
       return
     }
     if (nestedIndex !== undefined) {
-      setInspectCache(path, false, nestedIndex)
+      setInspectCache({ path, action: false, nestedIndex })
     } else {
       // do not inspect when it is a cycle reference, otherwise there will have a loop
       const inspect = isTrap
         ? false
         : depth < defaultInspectDepth
-      setInspectCache(path, inspect)
+      setInspectCache({ path, inspect })
     }
-  }, [defaultInspectDepth, depth, getInspectCache, isTrap, nestedIndex, path, setInspectCache])
-  const [inspect, set] = useState<boolean>(() => {
-    const shouldInspect = getInspectCache(path, nestedIndex)
+  }, [defaultInspectDepth, depth, isTrap, nestedIndex, path, getInspectCache, setInspectCache])
+  const shouldInspect = useAtomValue(getInspectCacheAtomFamily({ path, nestedIndex }))
+  const [inspect, setOriginal] = useState<boolean>(() => {
     if (shouldInspect !== undefined) {
       return shouldInspect
     }
@@ -46,12 +57,15 @@ export function useInspect (path: (string | number)[], value: any, nestedIndex?:
       ? false
       : depth < defaultInspectDepth
   })
-  const setInspect = useCallback<Dispatch<SetStateAction<boolean>>>((apply) => {
-    set((oldState) => {
-      const newState = typeof apply === 'boolean' ? apply : apply(oldState)
-      setInspectCache(path, newState, nestedIndex)
-      return newState
-    })
-  }, [nestedIndex, path, setInspectCache])
+  const setInspect = useAtomCallback(
+    useCallback((get, set, apply) => {
+      setOriginal((oldState) => {
+        const newState = typeof apply === 'boolean' ? apply : apply(oldState)
+        // eslint-disable-next-line react-hooks/rules-of-hooks
+        useSetAtom(setInspectCacheAtomFamily(apply))
+        return newState
+      })
+    }, [])
+  )
   return [inspect, setInspect] as const
 }

src/hooks/useInspect.ts

@@ -1,11 +1,13 @@
+import { useAtomValue } from 'jotai'
 import { useMemo } from 'react'
 
-import { useJsonViewerStore } from '../stores/JsonViewerStore'
+import { valueAtom } from '../state'
 import { isCycleReference } from '../utils'
 
 export function useIsCycleReference (path: (string | number)[], value: any) {
-  const rootValue = useJsonViewerStore(store => store.value)
+  const rootValue = useAtomValue(valueAtom)
   return useMemo(
     () => isCycleReference(rootValue, path, value),
-    [path, value, rootValue])
+    [path, value, rootValue]
+  )
 }