sanity-plugin-internationalized-array 3.1.3 → 3.1.5

package/src/cache.ts

@@ -2,19 +2,147 @@
 
 import * as suspend from 'suspend-react'
 
-import type {Language} from './types'
+import type {Language, LanguageCallback} from './types'
 
 export const namespace = 'sanity-plugin-internationalized-array'
 
 export const version = 'v1'
 
+// Simple in-memory cache for validation functions that run outside React context
+const validationCache = new Map<string, Language[]>()
+
+// Cache for function references to enable sharing between same functions
+const functionCache = new Map<string, Language[]>()
+
+// Cache for function keys to avoid recalculating them
+const functionKeyCache = new WeakMap<LanguageCallback, string>()
+
 // https://github.com/pmndrs/suspend-react#preloading
 export const preload = (fn: () => Promise<Language[]>) =>
   suspend.preload(() => fn(), [version, namespace])
 
+// Enhanced preload function that can use custom cache keys
+export const preloadWithKey = (
+  fn: () => Promise<Language[]>,
+  key: (string | number)[]
+) => suspend.preload(() => fn(), key)
+
 // https://github.com/pmndrs/suspend-react#cache-busting
 export const clear = () => suspend.clear([version, namespace])
 
 // https://github.com/pmndrs/suspend-react#peeking-into-entries-outside-of-suspense
 export const peek = (selectedValue: Record<string, unknown>) =>
   suspend.peek([version, namespace, selectedValue]) as Language[] | undefined
+
+// Helper function to create a stable cache key that matches the component's key structure
+export const createCacheKey = (
+  selectedValue: Record<string, unknown>,
+  workspaceId?: string
+) => {
+  const selectedValueHash = JSON.stringify(selectedValue)
+  return workspaceId
+    ? [version, namespace, selectedValueHash, workspaceId]
+    : [version, namespace, selectedValueHash]
+}
+
+// Enhanced peek function that can work with workspace context
+export const peekWithWorkspace = (
+  selectedValue: Record<string, unknown>,
+  workspaceId?: string
+) =>
+  suspend.peek(createCacheKey(selectedValue, workspaceId)) as
+    | Language[]
+    | undefined
+
+// Generate a unique key for a function reference (cached for performance)
+export const getFunctionKey = (fn: LanguageCallback): string => {
+  // Check if we already have a cached key for this function
+  const cachedKey = functionKeyCache.get(fn)
+  if (cachedKey) {
+    return cachedKey
+  }
+
+  // Create a hash for functions (only when needed)
+  const fnStr = fn.toString()
+  let hash = 0
+  // Only hash the first 100 characters for performance
+  const maxLength = Math.min(fnStr.length, 100)
+  for (let i = 0; i < maxLength; i++) {
+    const char = fnStr.charCodeAt(i)
+    // eslint-disable-next-line no-bitwise
+    hash = (hash << 5) - hash + char
+    // eslint-disable-next-line no-bitwise
+    hash &= hash // Convert to 32-bit integer
+  }
+  const key = `anonymous_${Math.abs(hash)}`
+  functionKeyCache.set(fn, key)
+  return key
+}
+
+// Create a cache key that includes function identity
+export const createFunctionCacheKey = (
+  fn: LanguageCallback,
+  selectedValue: Record<string, unknown>,
+  workspaceId?: string
+): string => {
+  const functionKey = getFunctionKey(fn)
+  const selectedValueHash = JSON.stringify(selectedValue)
+  return workspaceId
+    ? `${functionKey}:${selectedValueHash}:${workspaceId}`
+    : `${functionKey}:${selectedValueHash}`
+}
+
+// Cache for validation functions with function awareness
+export const getValidationCache = (key: string): Language[] | undefined => {
+  return validationCache.get(key)
+}
+
+export const setValidationCache = (
+  key: string,
+  languages: Language[]
+): void => {
+  validationCache.set(key, languages)
+}
+
+export const clearValidationCache = (): void => {
+  validationCache.clear()
+}
+
+// Function-aware cache operations
+export const getFunctionCache = (
+  fn: LanguageCallback,
+  selectedValue: Record<string, unknown>,
+  workspaceId?: string
+): Language[] | undefined => {
+  const key = createFunctionCacheKey(fn, selectedValue, workspaceId)
+  return functionCache.get(key)
+}
+
+export const setFunctionCache = (
+  fn: LanguageCallback,
+  selectedValue: Record<string, unknown>,
+  languages: Language[],
+  workspaceId?: string
+): void => {
+  const key = createFunctionCacheKey(fn, selectedValue, workspaceId)
+  functionCache.set(key, languages)
+}
+
+export const clearFunctionCache = (): void => {
+  functionCache.clear()
+}
+
+// Clear function key cache as well
+export const clearAllCaches = (): void => {
+  functionCache.clear()
+  // Note: WeakMap doesn't have a clear method, but it will be garbage collected
+  // when the function references are no longer held
+}
+
+// Check if two functions are the same reference
+export const isSameFunction = (
+  fn1: LanguageCallback,
+  fn2: LanguageCallback
+): boolean => {
+  return fn1 === fn2 || getFunctionKey(fn1) === getFunctionKey(fn2)
+}

package/src/components/InternationalizedArrayContext.tsx

@@ -6,7 +6,7 @@ import {type ObjectInputProps, useClient, useWorkspace} from 'sanity'
 import {useDocumentPane} from 'sanity/structure'
 import {suspend} from 'suspend-react'
 
-import {namespace, version} from '../cache'
+import {createCacheKey, setFunctionCache} from '../cache'
 import {CONFIG_DEFAULT} from '../constants'
 import type {Language, PluginConfig} from '../types'
 import DocumentAddButtons from './DocumentAddButtons'
@@ -49,6 +49,27 @@ export function InternationalizedArrayProvider(
     [internationalizedArray.select, deferredDocument]
   )
 
+  // Use a stable workspace identifier to prevent unnecessary re-renders
+  const workspaceId = useMemo(() => {
+    // Use workspace name if available, otherwise create a stable hash
+    if (workspace?.name) {
+      return workspace.name
+    }
+    // Create a stable hash from workspace properties that matter for caching
+    const workspaceKey = {
+      name: workspace?.name,
+      title: workspace?.title,
+      // Add other stable properties as needed
+    }
+    return JSON.stringify(workspaceKey)
+  }, [workspace])
+
+  // Memoize the cache key to prevent expensive JSON.stringify calls
+  const cacheKey = useMemo(
+    () => createCacheKey(selectedValue, workspaceId),
+    [selectedValue, workspaceId]
+  )
+
   // Fetch or return languages
   const languages = Array.isArray(internationalizedArray.languages)
     ? internationalizedArray.languages
@@ -56,11 +77,22 @@ export function InternationalizedArrayProvider(
         // eslint-disable-next-line require-await
         async () => {
           if (typeof internationalizedArray.languages === 'function') {
-            return internationalizedArray.languages(client, selectedValue)
+            const result = await internationalizedArray.languages(
+              client,
+              selectedValue
+            )
+            // Populate function cache for use outside React context
+            setFunctionCache(
+              internationalizedArray.languages,
+              selectedValue,
+              result,
+              workspaceId
+            )
+            return result
           }
           return internationalizedArray.languages
         },
-        [version, namespace, selectedValue, workspace],
+        cacheKey,
         {equal}
       )
 

package/src/components/Preload.tsx

@@ -1,20 +1,30 @@
 import {memo} from 'react'
 import {useClient} from 'sanity'
 
-import {peek, preload} from '../cache'
+import {createCacheKey, peek, preloadWithKey, setFunctionCache} from '../cache'
 import type {PluginConfig} from '../types'
 
 export default memo(function Preload(
   props: Required<Pick<PluginConfig, 'apiVersion' | 'languages'>>
 ) {
   const client = useClient({apiVersion: props.apiVersion})
+
+  // Use the same cache key structure as the main component
+  // This should match the main component when selectedValue is empty
+  const cacheKey = createCacheKey({})
+
   if (!Array.isArray(peek({}))) {
     // eslint-disable-next-line require-await
-    preload(async () =>
-      Array.isArray(props.languages)
-        ? props.languages
-        : props.languages(client, {})
-    )
+    preloadWithKey(async () => {
+      if (Array.isArray(props.languages)) {
+        return props.languages
+      }
+      const result = await props.languages(client, {})
+      // Populate function cache for sharing with other components
+      // Use the same key structure as the main component
+      setFunctionCache(props.languages, {}, result)
+      return result
+    }, cacheKey)
   }
 
   return null

package/src/schema/array.ts

@@ -1,7 +1,7 @@
 /* eslint-disable no-nested-ternary */
 import {defineField, type FieldDefinition, type Rule} from 'sanity'
 
-import {peek} from '../cache'
+import {getFunctionCache, peek, setFunctionCache} from '../cache'
 import {createFieldName} from '../components/createFieldName'
 import {getSelectedValue} from '../components/getSelectedValue'
 import InternationalizedArray from '../components/InternationalizedArray'
@@ -50,7 +50,12 @@ export default (config: ArrayFactoryConfig): FieldDefinition<'array'> => {
     // @ts-expect-error - fix typings
     validation: (rule: Rule) =>
       rule.custom<Value[]>(async (value, context) => {
-        if (!value) {
+        if (!value || value.length === 0) {
+          return true
+        }
+
+        // Early return for simple cases to avoid expensive operations
+        if (value.length === 1 && !value[0]?._key) {
           return true
         }
 
@@ -65,7 +70,33 @@ export default (config: ArrayFactoryConfig): FieldDefinition<'array'> => {
         } else if (Array.isArray(peek(selectedValue))) {
           contextLanguages = peek(selectedValue) || []
         } else if (typeof languagesFieldOption === 'function') {
-          contextLanguages = await languagesFieldOption(client, selectedValue)
+          // Try to get from function cache first (if it's the same function as the component)
+          const cachedLanguages = getFunctionCache(
+            languagesFieldOption,
+            selectedValue
+          )
+
+          if (Array.isArray(cachedLanguages)) {
+            contextLanguages = cachedLanguages
+          } else {
+            // Try suspend cache as fallback
+            const suspendCachedLanguages = peek(selectedValue)
+            if (Array.isArray(suspendCachedLanguages)) {
+              contextLanguages = suspendCachedLanguages
+            } else {
+              // Only make the async call if we don't have cached data
+              contextLanguages = await languagesFieldOption(
+                client,
+                selectedValue
+              )
+              // Cache the result for future validation calls
+              setFunctionCache(
+                languagesFieldOption,
+                selectedValue,
+                contextLanguages
+              )
+            }
+          }
         }
 
         if (value && value.length > contextLanguages.length) {
@@ -76,12 +107,13 @@ export default (config: ArrayFactoryConfig): FieldDefinition<'array'> => {
           }`
         }
 
-        const nonLanguageKeys = value?.length
-          ? value.filter(
-              (item) =>
-                !contextLanguages.find((language) => item._key === language.id)
-            )
-          : []
+        // Create a Set for faster language ID lookups
+        const languageIds = new Set(contextLanguages.map((lang) => lang.id))
+
+        // Check for invalid language keys
+        const nonLanguageKeys = value.filter(
+          (item) => item?._key && !languageIds.has(item._key)
+        )
         if (nonLanguageKeys.length) {
           return {
             message: `Array item keys must be valid languages registered to the field type`,
@@ -89,27 +121,20 @@ export default (config: ArrayFactoryConfig): FieldDefinition<'array'> => {
           }
         }
 
-        // Ensure there's no duplicate `language` fields
-        type KeyedValues = {
-          [key: string]: Value[]
+        // Check for duplicate language keys (more efficient)
+        const seenKeys = new Set<string>()
+        const duplicateValues: Value[] = []
+
+        for (const item of value) {
+          if (item?._key) {
+            if (seenKeys.has(item._key)) {
+              duplicateValues.push(item)
+            } else {
+              seenKeys.add(item._key)
+            }
+          }
         }
 
-        const valuesByLanguage = value?.length
-          ? value
-              .filter((item) => Boolean(item?._key))
-              .reduce((acc, cur) => {
-                if (acc[cur._key]) {
-                  return {...acc, [cur._key]: [...acc[cur._key], cur]}
-                }
-                return {
-                  ...acc,
-                  [cur._key]: [cur],
-                }
-              }, {} as KeyedValues)
-          : {}
-        const duplicateValues = Object.values(valuesByLanguage)
-          .filter((item) => item?.length > 1)
-          .flat()
         if (duplicateValues.length) {
           return {
             message: 'There can only be one field per language',