refactor(core): refactor SettingsStore and useStructureToolSetting (#…

…5784)

packages/sanity/src/core/store/_legacy/datastores.ts

@@ -6,6 +6,7 @@ import {useClient, useSchema, useTemplates} from '../../hooks'
 import {createDocumentPreviewStore, type DocumentPreviewStore} from '../../preview'
 import {useSource, useWorkspace} from '../../studio'
 import {DEFAULT_STUDIO_CLIENT_OPTIONS} from '../../studioClient'
+import {createKeyValueStore, type KeyValueStore} from '../key-value'
 import {useCurrentUser} from '../user'
 import {
   type ConnectionStatusStore,
@@ -17,7 +18,6 @@ import {createHistoryStore, type HistoryStore} from './history'
 import {__tmp_wrap_presenceStore, type PresenceStore} from './presence/presence-store'
 import {createProjectStore, type ProjectStore} from './project'
 import {useResourceCache} from './ResourceCacheProvider'
-import {createSettingsStore, type SettingsStore} from './settings'
 import {createUserStore, type UserStore} from './user'
 
 /**
@@ -230,23 +230,23 @@ export function useProjectStore(): ProjectStore {
 }
 
 /** @internal */
-export function useSettingsStore(): SettingsStore {
+export function useKeyValueStore(): KeyValueStore {
   const resourceCache = useResourceCache()
   const workspace = useWorkspace()
 
   return useMemo(() => {
-    const settingsStore =
-      resourceCache.get<SettingsStore>({
+    const keyValueStore =
+      resourceCache.get<KeyValueStore>({
         dependencies: [workspace],
-        namespace: 'settingsStore',
-      }) || createSettingsStore()
+        namespace: 'KeyValueStore',
+      }) || createKeyValueStore()
 
     resourceCache.set({
       dependencies: [workspace],
-      namespace: 'settingsStore',
-      value: settingsStore,
+      namespace: 'KeyValueStore',
+      value: keyValueStore,
     })
 
-    return settingsStore
+    return keyValueStore
   }, [resourceCache, workspace])
 }

packages/sanity/src/core/store/_legacy/index.ts

@@ -1,3 +1,4 @@
+export * from '../key-value'
 export * from './authStore'
 export * from './connection-status'
 export * from './cors'
@@ -8,5 +9,4 @@ export * from './history'
 export * from './presence'
 export * from './project'
 export * from './ResourceCacheProvider'
-export * from './settings'
 export * from './user'

packages/sanity/src/core/store/_legacy/types.ts

@@ -1,11 +1,11 @@
 import {type Config, type Source as SanitySource} from '../../config'
 import {type DocumentPreviewStore} from '../../preview'
+import {type KeyValueStore} from '../key-value/types'
 import {type DocumentStore} from './document'
 import {type GrantsStore} from './grants/types'
 import {type HistoryStore} from './history'
 import {type PresenceStore} from './presence'
 import {type ProjectStore} from './project'
-import {type SettingsStore} from './settings/types'
 
 export interface DatastoresContext {
   config: Config
@@ -19,5 +19,5 @@ export interface Datastores {
   historyStore: HistoryStore
   presenceStore: PresenceStore
   projectStore: ProjectStore
-  settingsStore: SettingsStore
+  keyValueStore: KeyValueStore
 }

packages/sanity/src/core/store/key-value/KeyValueStore.ts

@@ -0,0 +1,42 @@
+import {merge, type Observable, Subject} from 'rxjs'
+import {filter, map, switchMap} from 'rxjs/operators'
+
+import {resolveBackend} from './backends/resolve'
+import {type KeyValueStore, type KeyValueStoreValue} from './types'
+
+/** @internal */
+export function createKeyValueStore(): KeyValueStore {
+  const storageBackend = resolveBackend()
+
+  const setKey$ = new Subject<{key: string; value: KeyValueStoreValue}>()
+
+  const updates$ = setKey$.pipe(
+    switchMap((event) =>
+      storageBackend.set(event.key, event.value).pipe(
+        map((nextValue) => ({
+          key: event.key,
+          value: nextValue,
+        })),
+      ),
+    ),
+  )
+
+  const getKey = (
+    key: string,
+    defaultValue: KeyValueStoreValue,
+  ): Observable<KeyValueStoreValue> => {
+    return merge(
+      storageBackend.get(key, defaultValue),
+      updates$.pipe(
+        filter((update) => update.key === key),
+        map((update) => update.value),
+      ),
+    ) as Observable<KeyValueStoreValue>
+  }
+
+  const setKey = (key: string, value: KeyValueStoreValue) => {
+    setKey$.next({key, value})
+  }
+
+  return {getKey, setKey}
+}

packages/sanity/src/core/store/_legacy/settings/backends/resolve.ts → packages/sanity/src/core/store/key-value/backends/resolve.ts

@@ -1,4 +1,4 @@
-import {supportsLocalStorage} from '../../../../util/supportsLocalStorage'
+import {supportsLocalStorage} from '../../../util/supportsLocalStorage'
 import {localStorageBackend} from './localStorage'
 import {memoryBackend} from './memory'
 import {type Backend} from './types'

packages/sanity/src/core/store/key-value/index.ts

@@ -0,0 +1,2 @@
+export * from './KeyValueStore'
+export * from './types'

packages/sanity/src/core/store/key-value/types.ts

@@ -0,0 +1,16 @@
+import {type Observable} from 'rxjs'
+
+type JsonObject = {[Key in string]: KeyValueStoreValue} & {
+  [Key in string]?: KeyValueStoreValue | undefined
+}
+type JsonArray = KeyValueStoreValue[] | readonly KeyValueStoreValue[]
+type JsonPrimitive = string | number | boolean | null
+
+/** @internal */
+export type KeyValueStoreValue = JsonPrimitive | JsonObject | JsonArray
+
+/** @internal */
+export interface KeyValueStore {
+  getKey(key: string, defaultValue?: KeyValueStoreValue): Observable<KeyValueStoreValue | undefined>
+  setKey(key: string, value: KeyValueStoreValue): void
+}

packages/sanity/src/structure/useStructureToolSetting.ts

@@ -1,5 +1,6 @@
 import {useCallback, useEffect, useMemo, useState} from 'react'
-import {useSettingsStore} from 'sanity'
+import {startWith} from 'rxjs/operators'
+import {useKeyValueStore} from 'sanity'
 
 /**
  * @internal
@@ -9,36 +10,31 @@ export function useStructureToolSetting<ValueType>(
   key: string,
   defaultValue?: ValueType,
 ): [ValueType | undefined, (_value: ValueType) => void] {
-  const settingsStore = useSettingsStore()
+  const keyValueStore = useKeyValueStore()
   const [value, setValue] = useState<ValueType | undefined>(defaultValue)
 
-  const structureToolSettings = useMemo(
-    () => settingsStore.forNamespace('structure-tool'),
-    [settingsStore],
-  )
+  const keyValueStoreKey = namespace
+    ? `structure-tool::${namespace}::${key}`
+    : `structure-tool::${key}`
 
   const settings = useMemo(() => {
-    if (namespace) {
-      return structureToolSettings.forNamespace(namespace).forKey(key)
-    }
-
-    return structureToolSettings.forKey(key)
-  }, [structureToolSettings, namespace, key])
+    return keyValueStore.getKey(keyValueStoreKey)
+  }, [keyValueStore, keyValueStoreKey])
 
   useEffect(() => {
-    const sub = settings.listen(defaultValue).subscribe({
+    const sub = settings.pipe(startWith(defaultValue)).subscribe({
       next: setValue as any,
     })
 
     return () => sub?.unsubscribe()
-  }, [defaultValue, key, namespace, settings])
+  }, [defaultValue, keyValueStoreKey, settings])
 
   const set = useCallback(
     (newValue: ValueType) => {
       setValue(newValue)
-      settings.set(newValue as any)
+      keyValueStore.setKey(keyValueStoreKey, newValue as string)
     },
-    [settings],
+    [keyValueStore, keyValueStoreKey],
   )
 
   return useMemo(() => [value, set], [set, value])