@sanity/personalization-plugin 2.0.0

package/src/fieldExperiments.tsx

@@ -0,0 +1,174 @@
+import {
+  ArrayOfObjectsInputProps,
+  defineField,
+  definePlugin,
+  defineType,
+  FieldDefinition,
+  isObjectInputProps,
+  SanityClient,
+} from 'sanity'
+
+import {ArrayInput} from './components/Array'
+import {CONFIG_DEFAULT, ExperimentProvider} from './components/ExperimentContext'
+import {ExperimentField} from './components/ExperimentField'
+import {ExperimentInput} from './components/ExperimentInput'
+import {VariantPreview} from './components/VariantPreview'
+import {ExperimentType, FieldPluginConfig} from './types'
+import {flattenSchemaType} from './utils/flattenSchemaType'
+
+const createFieldType = ({
+  field,
+}: {
+  field: string | FieldDefinition
+  experiments: ExperimentType[] | ((client: SanityClient) => Promise<ExperimentType[]>)
+}) => {
+  const typeName = typeof field === `string` ? field : field.name
+  const usedName = String(typeName[0]).toUpperCase() + String(typeName).slice(1)
+  const objectName = `variant${usedName}`
+
+  return defineType({
+    name: `experiment${usedName}`,
+    type: 'object',
+    components: {
+      field: ExperimentField,
+    },
+    fields: [
+      typeof field === `string`
+        ? // Define a simple field if all we have is the name as a string
+          defineField({
+            name: 'default',
+            type: field,
+          })
+        : // Pass in the configured options, but overwrite the name
+          {
+            ...field,
+            name: 'default',
+          },
+      defineField({
+        name: 'active',
+        type: 'boolean',
+        hidden: true,
+      }),
+      defineField({
+        title: 'Experiment',
+        name: 'experimentId',
+        type: 'string',
+        components: {
+          input: ExperimentInput,
+        },
+        hidden: ({parent}) => {
+          return !parent?.active
+        },
+      }),
+      defineField({
+        name: 'variants',
+        type: 'array',
+        hidden: ({parent}) => {
+          return !parent?.experimentId
+        },
+        components: {
+          input: (props: ArrayOfObjectsInputProps) => (
+            <ArrayInput {...props} objectName={objectName} />
+          ),
+        },
+        of: [
+          defineField({
+            name: objectName,
+            type: objectName,
+          }),
+        ],
+      }),
+    ],
+  })
+}
+
+const createFieldObjectType = ({
+  field,
+}: {
+  field: string | FieldDefinition
+  experiments: ExperimentType[] | ((client: SanityClient) => Promise<ExperimentType[]>)
+}) => {
+  const typeName = typeof field === `string` ? field : field.name
+  const usedName = String(typeName[0]).toUpperCase() + String(typeName).slice(1)
+  return defineType({
+    name: `variant${usedName}`,
+    title: `Experiment array ${usedName}`,
+    type: 'object',
+    components: {
+      preview: VariantPreview,
+    },
+    fields: [
+      {
+        type: 'string',
+        name: 'variantId',
+        readOnly: true,
+      },
+      {
+        type: 'string',
+        name: 'experimentId',
+        hidden: true,
+      },
+      typeof field === `string`
+        ? // Define a simple field if all we have is the name as a string
+          defineField({
+            name: 'value',
+            type: field,
+            hidden: ({parent}) => !parent?.variantId,
+          })
+        : // Pass in the configured options, but overwrite the name
+          {
+            ...field,
+            name: 'value',
+            hidden: ({parent}) => !parent?.variantId,
+          },
+    ],
+    preview: {
+      select: {
+        variant: 'variantId',
+        experiment: 'experimentId',
+        value: 'value',
+      },
+    },
+  })
+}
+
+const fieldSchema = ({fields, experiments}: FieldPluginConfig) => {
+  return [
+    ...fields.map((field) => createFieldObjectType({field, experiments})),
+    ...fields.map((field) => createFieldType({field, experiments})),
+  ]
+}
+
+export const fieldLevelExperiments = definePlugin<FieldPluginConfig>((config) => {
+  const pluginConfig = {...CONFIG_DEFAULT, ...config}
+  const {fields, experiments} = pluginConfig
+  const fieldSchemaConfig = fieldSchema({fields, experiments})
+  return {
+    name: 'sanity-personalistaion-plugin-field-level-experiments',
+    schema: {
+      types: fieldSchemaConfig,
+    },
+    form: {
+      components: {
+        input: (props) => {
+          const isRootInput = props.id === 'root' && isObjectInputProps(props)
+
+          if (!isRootInput) {
+            return props.renderDefault(props)
+          }
+
+          const flatFieldTypeNames = flattenSchemaType(props.schemaType).map(
+            (field) => field.type.name,
+          )
+          const hasExperiment = flatFieldTypeNames.some((name) => name.startsWith('experiment'))
+
+          if (!hasExperiment) {
+            return props.renderDefault(props)
+          }
+          const providerProps = {...props, experimentFieldPluginConfig: pluginConfig}
+          return ExperimentProvider(providerProps)
+        },
+      },
+    },
+  }
+})

package/src/index.ts

@@ -0,0 +1,3 @@
+export * from './fieldExperiments'
+export * from './types'
+export * from './utils/flattenSchemaType'

package/src/types.ts

@@ -0,0 +1,60 @@
+import {
+  ArrayOfObjectsInputProps,
+  FieldDefinition,
+  ObjectField,
+  Path,
+  PreviewProps,
+  SanityClient,
+  SchemaType,
+} from 'sanity'
+
+export type VariantType = {
+  id: string
+  label: string
+}
+export type ExperimentType = {
+  id: string
+  label: string
+  variants: VariantType[]
+}
+
+export type FieldPluginConfig = {
+  fields: (string | FieldDefinition)[]
+  experiments: ExperimentType[] | ((client: SanityClient) => Promise<ExperimentType[]>)
+  apiVersion?: string
+}
+
+export type VariantPreviewProps = Omit<PreviewProps, 'SchemaType'> & {
+  experiment: string
+  variant: string
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  value: any
+}
+
+export type ExperimentContextProps = Required<FieldPluginConfig> & {
+  experiments: ExperimentType[]
+}
+
+export type ArrayInputProps = ArrayOfObjectsInputProps & {
+  objectName: string
+}
+
+export type ObjectFieldWithPath = ObjectField<SchemaType> & {path: Path}
+
+export type VariantGeneric<T> = {
+  _type: string
+  variantId?: string
+  experimentId?: string
+  value?: T
+}
+
+export type ExperimentGeneric<T> = {
+  _type: string
+  default?: T
+  experimentValue?: string
+  variants?: Array<
+    {
+      _key: string
+    } & VariantGeneric<T>
+  >
+}

package/src/utils/flattenSchemaType.ts

@@ -0,0 +1,50 @@
+import {isDocumentSchemaType, type ObjectField, type Path, type SchemaType} from 'sanity'
+
+import {ObjectFieldWithPath} from '../types'
+
+/**
+ * Flattens a document's schema type into a flat array of fields and includes their path
+ */
+export function flattenSchemaType(schemaType: SchemaType): ObjectFieldWithPath[] {
+  if (!isDocumentSchemaType(schemaType)) {
+    console.error(`Schema type is not a document`)
+    return []
+  }
+
+  return extractInnerFields(schemaType.fields, [], 3)
+}
+
+function extractInnerFields(
+  fields: ObjectField<SchemaType>[],
+  path: Path,
+  maxDepth: number,
+): ObjectFieldWithPath[] {
+  if (path.length >= maxDepth) {
+    return []
+  }
+
+  return fields.reduce<ObjectFieldWithPath[]>((acc, field) => {
+    const thisFieldWithPath = {path: [...path, field.name], ...field}
+
+    if (field.type.jsonType === 'object') {
+      const innerFields = extractInnerFields(field.type.fields, [...path, field.name], maxDepth)
+
+      return [...acc, thisFieldWithPath, ...innerFields]
+    } else if (
+      field.type.jsonType === 'array' &&
+      field.type.of.length &&
+      field.type.of.some((item) => 'fields' in item)
+    ) {
+      const innerFields = extractInnerFields(
+        // @ts-expect-error - Fix TS assertion for array fields
+        field.type.of[0].fields,
+        [...path, field.name],
+        maxDepth,
+      )
+
+      return [...acc, thisFieldWithPath, ...innerFields]
+    }
+
+    return [...acc, thisFieldWithPath]
+  }, [])
+}

package/v2-incompatible.js

@@ -0,0 +1,11 @@
+const {showIncompatiblePluginDialog} = require('@sanity/incompatible-plugin')
+const {name, version, sanityExchangeUrl} = require('./package.json')
+
+export default showIncompatiblePluginDialog({
+  name: name,
+  versions: {
+    v3: version,
+    v2: undefined,
+  },
+  sanityExchangeUrl,
+})