sanity-plugin-internationalized-array 1.4.1 → 1.6.0

package/lib/src/index.d.ts

@@ -1,16 +1,127 @@
+import type {ArraySchemaType} from 'sanity'
+import type {FieldDefinition} from 'sanity'
 import {Plugin as Plugin_2} from 'sanity'
-import {RuleTypeConstraint} from 'sanity'
+import type {Rule} from 'sanity'
+import type {RuleTypeConstraint} from 'sanity'
+import type {SanityClient} from 'sanity'
+
+export declare type AllowedType = 'string' | 'number' | 'boolean' | 'text' | 'reference'
+
+export declare type ArrayConfig = {
+  name: string
+  type: AllowedType
+  languages: Language[]
+  title?: string
+  group?: string
+  hidden?: boolean | (() => boolean)
+  readOnly?: boolean | (() => boolean)
+  validation?: Rule | Rule[]
+  field?: {
+    [key: string]: any
+    options: {
+      [key: string]: any
+    }
+  }
+}
+
+export declare type ArraySchemaWithLanguageOptions = ArraySchemaType & {
+  options: {
+    select?: Record<string, string>
+    languages: Language[] | LanguageCallback
+    apiVersion: string
+  }
+}
+
+export declare const clear: () => void
 
 export declare const internationalizedArray: Plugin_2<PluginConfig>
 
-declare type Language = {
-  id: string
+export declare type Language = {
+  id: Intl.UnicodeBCP47LocaleIdentifier
   title: string
 }
 
-declare type PluginConfig = {
-  languages: Language[] | (() => Promise<Language[]>)
-  fieldTypes: (string | RuleTypeConstraint)[]
+export declare type LanguageCallback = (
+  client: SanityClient,
+  selectedValue: Record<string, unknown>
+) => Promise<Language[]>
+
+export declare type PluginConfig = {
+  /**
+   * https://www.sanity.io/docs/api-versioning
+   * @defaultValue '2022-11-27'
+   */
+  apiVersion?: string
+  /**
+   * Specify fields that should be available in the language callback:
+   * ```tsx
+   * {
+   *   select: {
+   *     markets: 'markets'
+   *   },
+   *   languages: (client, {markets}) =>
+   *     query.fetch(groq`*[_type == "language" && market in $markets]{id,title}`, {markets})
+   * }
+   * ```
+   */
+  select?: Record<string, string>
+  /**
+   * You can give it an array of language definitions:
+   * ```tsx
+   * {
+   *   languages: [
+   *     {id: 'en', title: 'English'},
+   *     {id: 'fr', title: 'French'}
+   *   ]
+   * }
+   * ```
+   * You can load them async by passing a function that returns a promise:
+   * ```tsx
+   * {
+   *   languages: async () => {
+   *     const response = await fetch('https://example.com/languages')
+   *     return response.json()
+   *   }
+   * }
+   * ```
+   * You can query your dataset for languages::
+   * ```tsx
+   * {
+   *   languages: (client) =>
+   *     query.fetch(groq`*[_type == "language"]{id,title}`)
+   * }
+   * ```
+   */
+  languages: Language[] | LanguageCallback
+  /**
+   * Can be a string matching core field types, as well as custom ones:
+   * ```tsx
+   * {
+   *   fieldTypes: [
+   *     "date", "datetime", "file", "image", "number", "string", "text", "url"
+   *   ]
+   * }
+   * ```
+   * You can also define a type directly:
+   * ```tsx
+   * {
+   *   fieldTypes: [
+   *     defineField({
+   *       name: 'featuredProduct',
+   *       type: 'reference',
+   *       to: [{type: 'product'}]
+   *       hidden: (({document}) => !document?.title)
+   *     })
+   *   ]
+   * }
+   * ```
+   */
+  fieldTypes: (string | RuleTypeConstraint | FieldDefinition)[]
+}
+
+export declare type Value = {
+  _key: string
+  value?: string
 }
 
 export {}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sanity-plugin-internationalized-array",
-  "version": "1.4.1",
+  "version": "1.6.0",
   "description": "Store localized fields in an array to save on attributes",
   "keywords": [
     "sanity",
@@ -47,39 +47,43 @@
     "watch": "pkg-utils watch"
   },
   "dependencies": {
-    "@sanity/icons": "^1.3.1",
+    "@sanity/icons": "^2.0.0",
     "@sanity/incompatible-plugin": "^1.0.4",
-    "styled-components": "^5.3.5"
+    "@sanity/ui": "^1.0.0",
+    "fast-deep-equal": "^3.1.3",
+    "lodash.get": "^4.4.2",
+    "suspend-react": "^0.0.8"
   },
   "devDependencies": {
-    "@commitlint/cli": "^17.2.0",
-    "@commitlint/config-conventional": "^17.2.0",
+    "@commitlint/cli": "^17.3.0",
+    "@commitlint/config-conventional": "^17.3.0",
     "@sanity/pkg-utils": "^1.18.0",
-    "@sanity/plugin-kit": "^2.1.16",
+    "@sanity/plugin-kit": "^2.1.17",
     "@sanity/semantic-release-preset": "^2.0.2",
-    "@sanity/ui": "1.0.0-beta.32",
+    "@types/lodash.get": "^4.4.7",
     "@types/styled-components": "^5.1.26",
-    "@typescript-eslint/eslint-plugin": "^5.43.0",
-    "@typescript-eslint/parser": "^5.43.0",
-    "eslint": "^8.27.0",
+    "@typescript-eslint/eslint-plugin": "^5.44.0",
+    "@typescript-eslint/parser": "^5.44.0",
+    "eslint": "^8.28.0",
     "eslint-config-prettier": "^8.5.0",
     "eslint-config-sanity": "^6.0.0",
     "eslint-plugin-prettier": "^4.2.1",
-    "eslint-plugin-react": "^7.31.10",
+    "eslint-plugin-react": "^7.31.11",
     "eslint-plugin-react-hooks": "^4.6.0",
     "husky": "^8.0.2",
-    "lint-staged": "^13.0.3",
-    "prettier": "^2.7.1",
+    "lint-staged": "^13.0.4",
+    "prettier": "^2.8.0",
     "prettier-plugin-packagejson": "^2.3.0",
     "react": "^18",
     "rimraf": "^3.0.2",
-    "sanity": "3.0.0-rc.2",
+    "sanity": "3.0.0-rc.3",
+    "styled-components": "^5.3.6",
     "typescript": "^4.9.3"
   },
   "peerDependencies": {
-    "@sanity/ui": "1.0.0-beta.32",
     "react": "^18",
-    "sanity": "dev-preview || 3.0.0-rc.2"
+    "sanity": "dev-preview || 3.0.0-rc.3 || ^3.0.0",
+    "styled-components": "^5.2"
   },
   "engines": {
     "node": ">=14"

package/src/cache.ts

@@ -0,0 +1,19 @@
+/* eslint-disable @typescript-eslint/explicit-module-boundary-types */
+
+import * as suspend from 'suspend-react'
+import type {Language} from './types'
+
+export const namespace = 'sanity-plugin-internationalized-array'
+
+export const version = 'v0'
+
+// https://github.com/pmndrs/suspend-react#preloading
+export const preload = (fn: () => Promise<Language[]>) =>
+  suspend.preload(() => fn(), [version, namespace])
+
+// 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

package/src/components/InternationalizedArray.tsx

@@ -1,4 +1,4 @@
-import React, {useCallback, useEffect, useMemo} from 'react'
+import React, {useCallback, useDeferredValue, useEffect, useMemo} from 'react'
 import {
   insert,
   set,
@@ -6,14 +6,20 @@ import {
   ArrayOfObjectsItemMember,
   ArrayOfObjectsItem,
   ArrayOfObjectsInputProps,
+  useClient,
+  useFormBuilder,
 } from 'sanity'
-import {Button, Grid, Spinner, Stack, useToast} from '@sanity/ui'
+import {Button, Grid, Stack, useToast} from '@sanity/ui'
 import {AddIcon} from '@sanity/icons'
+import {suspend} from 'suspend-react'
+import equal from 'fast-deep-equal'
 
-import {Language, Value, ArraySchemaWithLanguageOptions} from '../types'
+import type {Value, ArraySchemaWithLanguageOptions} from '../types'
 import Feedback from './Feedback'
 // TODO: Move this provider to the root component
 import {LanguageProvider} from './languageContext'
+import {namespace, version} from '../cache'
+import {getSelectedValue} from './getSelectedValue'
 
 export type InternationalizedArrayProps = ArrayOfObjectsInputProps<
   Value,
@@ -25,22 +31,28 @@ export default function InternationalizedArray(props: InternationalizedArrayProp
   const readOnly = typeof schemaType.readOnly === 'boolean' ? schemaType.readOnly : false
   const {options} = schemaType
   const toast = useToast()
-
-  const [languages, setLanguages] = React.useState<Language[] | null>(
-    Array.isArray(options.languages) ? options.languages : null
+  const {value: document} = useFormBuilder()
+  const deferredDocument = useDeferredValue(document)
+  const selectedValue = useMemo(
+    () => getSelectedValue(options.select, deferredDocument),
+    [options.select, deferredDocument]
   )
-  // Resolve async languages
-  useEffect(() => {
-    async function resolveLanguages() {
-      const resolvedLanguages = Array.isArray(options.languages)
-        ? options.languages
-        : await options.languages()
-      setLanguages(resolvedLanguages)
-    }
-    if (!languages && !Array.isArray(options?.languages)) {
-      resolveLanguages()
-    }
-  }, [languages, options])
+
+  const {apiVersion} = options
+  const client = useClient({apiVersion})
+  const languages = Array.isArray(options.languages)
+    ? options.languages
+    : suspend(
+        // eslint-disable-next-line require-await
+        async () => {
+          if (typeof options.languages === 'function') {
+            return options.languages(client, selectedValue)
+          }
+          return options.languages
+        },
+        [version, namespace, selectedValue],
+        {equal}
+      )
 
   const handleAddLanguage = useCallback(
     (languageId?: string) => {
@@ -169,10 +181,6 @@ export default function InternationalizedArray(props: InternationalizedArrayProp
     return <Feedback />
   }
 
-  if (!languages) {
-    return <Spinner />
-  }
-
   return (
     <LanguageProvider value={{languages}}>
       <Stack space={2}>

package/src/components/Preload.tsx

@@ -0,0 +1,18 @@
+import {peek, preload} from '../cache'
+import {memo} from 'react'
+import type {PluginConfig} from '../types'
+import {useClient} from 'sanity'
+
+export default memo(function Preload(
+  props: Required<Pick<PluginConfig, 'apiVersion' | 'languages'>>
+) {
+  const client = useClient({apiVersion: props.apiVersion})
+  if (!Array.isArray(peek({}))) {
+    // eslint-disable-next-line require-await
+    preload(async () =>
+      Array.isArray(props.languages) ? props.languages : props.languages(client, {})
+    )
+  }
+
+  return null
+})

package/src/components/getSelectedValue.ts

@@ -0,0 +1,29 @@
+import {get} from 'lodash'
+
+export const getSelectedValue = (
+  select: Record<string, string> | undefined,
+  document:
+    | {
+        [x: string]: unknown
+      }
+    | undefined
+): Record<string, unknown> => {
+  if (!select || !document) {
+    return {}
+  }
+
+  const selection: Record<string, string> = select || {}
+  const selectedValue: Record<string, unknown> = {}
+  for (const [key, path] of Object.entries(selection)) {
+    let value = get(document, path)
+    if (Array.isArray(value)) {
+      // If there are references in the array, ensure they have `_ref` set, otherwise they are considered empty and can safely be ignored
+      value = value.filter((item) =>
+        typeof item === 'object' ? item?._type === 'reference' && '_ref' in item : true
+      )
+    }
+    selectedValue[key] = value
+  }
+
+  return selectedValue
+}

package/src/index.ts

@@ -1 +1,3 @@
+export {clear} from './cache'
 export {internationalizedArray} from './plugin'
+export * from './types'

package/src/plugin.tsx

@@ -1,21 +1,36 @@
+import React from 'react'
 import {definePlugin} from 'sanity'
-import {PluginConfig} from './types'
+import Preload from './components/Preload'
 import array from './schema/array'
 import object from './schema/object'
+import {PluginConfig} from './types'
 
-const CONFIG_DEFAULT = {
+const CONFIG_DEFAULT: PluginConfig = {
   languages: [],
   fieldTypes: [],
 }
 
 export const internationalizedArray = definePlugin<PluginConfig>((config = CONFIG_DEFAULT) => {
-  const {languages, fieldTypes} = {...CONFIG_DEFAULT, ...config}
+  const {apiVersion = '2022-11-27', select, languages, fieldTypes} = {...CONFIG_DEFAULT, ...config}
 
   return {
     name: 'sanity-plugin-internationalized-array',
+    // If `languages` is a callback then let's preload it
+    studio: Array.isArray(languages)
+      ? undefined
+      : {
+          components: {
+            layout: (props) => (
+              <>
+                <Preload apiVersion={apiVersion} languages={languages} />
+                {props.renderDefault(props)}
+              </>
+            ),
+          },
+        },
     schema: {
       types: [
-        ...fieldTypes.map((type) => array({type, languages})),
+        ...fieldTypes.map((type) => array({type, apiVersion, select, languages})),
         ...fieldTypes.map((type) => object({type})),
       ],
     },

package/src/schema/array.ts

@@ -1,16 +1,21 @@
-import {defineField, FieldDefinition, Rule} from 'sanity'
+/* eslint-disable no-nested-ternary */
+import {defineField, type FieldDefinition, type Rule} from 'sanity'
+import {peek} from '../cache'
 
 import {createFieldName} from '../components/createFieldName'
+import {getSelectedValue} from '../components/getSelectedValue'
 import InternationalizedArray from '../components/InternationalizedArray'
-import {Language, Value} from '../types'
+import {Language, LanguageCallback, Value} from '../types'
 
 type ArrayFactoryConfig = {
-  languages: Language[] | (() => Promise<Language[]>)
+  apiVersion: string
+  select?: Record<string, string>
+  languages: Language[] | LanguageCallback
   type: string | FieldDefinition
 }
 
 export default (config: ArrayFactoryConfig): FieldDefinition<'array'> => {
-  const {languages, type} = config
+  const {apiVersion, select, languages, type} = config
   const typeName = typeof type === `string` ? type : type.name
   const arrayName = createFieldName(typeName)
   const objectName = createFieldName(typeName, true)
@@ -24,11 +29,12 @@ export default (config: ArrayFactoryConfig): FieldDefinition<'array'> => {
     components: {
       input: InternationalizedArray,
     },
-    options: {languages},
+    options: {apiVersion, select, languages},
     // TODO: Resolve this typing issue with the inner object
     // @ts-ignore
     of: [
       defineField({
+        ...(typeof type === 'string' ? {} : type),
         name: objectName,
         type: objectName,
       }),
@@ -39,9 +45,13 @@ export default (config: ArrayFactoryConfig): FieldDefinition<'array'> => {
           return true
         }
 
+        const selectedValue = getSelectedValue(select, context.document)
+        const client = context.getClient({apiVersion})
         const contextLanguages: Language[] = Array.isArray(context?.type?.options?.languages)
-          ? context?.type?.options.languages
-          : await context?.type?.options.languages()
+          ? context!.type!.options.languages
+          : Array.isArray(peek(selectedValue))
+          ? peek(selectedValue)
+          : await context?.type?.options.languages(client, selectedValue)
 
         if (value && value.length > contextLanguages.length) {
           return `Cannot be more than ${

package/src/types.ts

@@ -1,7 +1,7 @@
-import {Rule, ArraySchemaType, RuleTypeConstraint} from 'sanity'
+import type {Rule, ArraySchemaType, RuleTypeConstraint, SanityClient, FieldDefinition} from 'sanity'
 
 export type Language = {
-  id: string
+  id: Intl.UnicodeBCP47LocaleIdentifier
   title: string
 }
 
@@ -24,14 +24,88 @@ export type Value = {
   value?: string
 }
 
+export type LanguageCallback = (
+  client: SanityClient,
+  selectedValue: Record<string, unknown>
+) => Promise<Language[]>
+
 export type PluginConfig = {
-  // array of languages or async function that returns array of languages
-  languages: Language[] | (() => Promise<Language[]>)
-  fieldTypes: (string | RuleTypeConstraint)[]
+  /**
+   * https://www.sanity.io/docs/api-versioning
+   * @defaultValue '2022-11-27'
+   */
+  apiVersion?: string
+  /**
+   * Specify fields that should be available in the language callback:
+   * ```tsx
+   * {
+   *   select: {
+   *     markets: 'markets'
+   *   },
+   *   languages: (client, {markets}) =>
+   *     query.fetch(groq`*[_type == "language" && market in $markets]{id,title}`, {markets})
+   * }
+   * ```
+   */
+  select?: Record<string, string>
+  /**
+   * You can give it an array of language definitions:
+   * ```tsx
+   * {
+   *   languages: [
+   *     {id: 'en', title: 'English'},
+   *     {id: 'fr', title: 'French'}
+   *   ]
+   * }
+   * ```
+   * You can load them async by passing a function that returns a promise:
+   * ```tsx
+   * {
+   *   languages: async () => {
+   *     const response = await fetch('https://example.com/languages')
+   *     return response.json()
+   *   }
+   * }
+   * ```
+   * You can query your dataset for languages::
+   * ```tsx
+   * {
+   *   languages: (client) =>
+   *     query.fetch(groq`*[_type == "language"]{id,title}`)
+   * }
+   * ```
+   */
+  languages: Language[] | LanguageCallback
+  /**
+   * Can be a string matching core field types, as well as custom ones:
+   * ```tsx
+   * {
+   *   fieldTypes: [
+   *     "date", "datetime", "file", "image", "number", "string", "text", "url"
+   *   ]
+   * }
+   * ```
+   * You can also define a type directly:
+   * ```tsx
+   * {
+   *   fieldTypes: [
+   *     defineField({
+   *       name: 'featuredProduct',
+   *       type: 'reference',
+   *       to: [{type: 'product'}]
+   *       hidden: (({document}) => !document?.title)
+   *     })
+   *   ]
+   * }
+   * ```
+   */
+  fieldTypes: (string | RuleTypeConstraint | FieldDefinition)[]
 }
 
 export type ArraySchemaWithLanguageOptions = ArraySchemaType & {
   options: {
-    languages: Language[] | (() => Promise<Language[]>)
+    select?: Record<string, string>
+    languages: Language[] | LanguageCallback
+    apiVersion: string
   }
 }