@sanity/personalization-plugin 2.1.0-growthbook.1 → 2.2.0-growthbook.1

package/README.md

@@ -85,8 +85,8 @@ export default defineConfig({
 
 This will register two new fields to the schema., based on the setting passed intto `fields:`
 
-- `experimentString` an Object field with `string` field called `default`, a `string` field called `experimentId` and an array field of type:
-- `varirantsString` an object field with a `string` field called `value`, a string field called `variantId`, a `string` field called `experimentId`.
+- `experimentString` an Object field with `string` field called `default`, a `string` field called `experimentId` and an array field called `variants` of type:
+- `variantString` an object field with a `string` field called `value`, a string field called `variantId`, a `string` field called `experimentId`.
 
 Use the experiment field in your schema like this:
 
@@ -202,7 +202,7 @@ export default defineConfig({
 
 This would also create two new fields in your schema.
 
-- `experimentFeaturedProduct` an Object field with `reference` field called `default`, a `string` field called `experimentId` and an array field of type:
+- `experimentFeaturedProduct` an Object field with `reference` field called `default`, a `string` field called `experimentId` and an array field called `variants` of type:
 - `variantFeaturedProduct` an object field with a `reference` field called `value`, a string field called `variandId`, a `string` field called `experimentId`.
 
 Note that the name key in the field gets rewritten to value and is instead used to name the object field.
@@ -242,7 +242,7 @@ The custom input contains buttons which will add new array items with the experi
 ```json
 "title": {
   "default": "asdf",
-  "experimentValue": "test-1",
+  "experimentId": "test-1",
   "variants": [
     {
       "experimentId": "test-1",
@@ -267,6 +267,62 @@ Using GROQ filters you can query for a specific experitment, with a fallback to
 }
 ```
 
+## Overwriting the experiment and variant field names
+
+If your use case does not match exactly with experiments you can overwrite the name field names for experiment and variant in the config.
+
+```ts
+import {defineConfig} from 'sanity'
+import {fieldLevelExperiments} from '@sanity/personalization-plugin'
+
+export default defineConfig({
+  //...
+  plugins: [
+    //...
+    fieldLevelExperiments({
+      fields: ['string'],
+      experiments: [experiment1, experiment2],
+      experimentNameOverride: 'audience',
+      variantNameOverride: 'segment',
+    }),
+  ],
+})
+```
+
+This would also create two new fields in your schema.
+
+- `audienceString` an Object field with `string` field called `default`, a `string` field called `audienceId` and an array field called `segments` of type:
+- `segmentString` an object field with a `string` field called `value`, a string field called `segmentId`, a `string` field called `audienceId`.
+
+the data will be stored as
+
+```json
+"title": {
+  "default": "asdf",
+  "audienceId": "test-1",
+  "segments": [
+    {
+      "audienceId": "test-1",
+      "value": "asdf",
+      "segmentId": "test-1-a"
+    },
+    {
+      "audienceId": "test-1",
+      "segmentId": "test-1-b",
+      "value": "qwer"
+    }
+  ]
+}
+```
+
+This will also affect the query you write to fetch data to be:
+
+```ts
+*[_type == "post"] {
+"title":coalesce(title.segments[audienceId == $audience && segmentId == $segment][0].value, title.default),
+}
+```
+
 ## License
 
 [MIT](LICENSE) © Jon Burbridge

package/dist/index.d.mts

@@ -10,7 +10,9 @@ import {SchemaType} from 'sanity'
 import {SetStateAction} from 'react'
 
 export declare type ArrayInputProps = ArrayOfObjectsInputProps & {
-  objectName: string
+  variantName: string
+  variantId: string
+  experimentId: string
 }
 
 export declare type ExperimentContextProps = Required<FieldPluginConfig> & {
@@ -23,11 +25,15 @@ export declare type ExperimentGeneric<T> = {
   _type: string
   default?: T
   experimentValue?: string
-  variants?: Array<
-    {
-      _key: string
-    } & VariantGeneric<T>
-  >
+  [key: string]:
+    | Array<
+        {
+          _key: string
+        } & VariantGeneric<T>
+      >
+    | string
+    | T
+    | undefined
 }
 
 export declare type ExperimentType = {
@@ -44,6 +50,11 @@ export declare type FieldPluginConfig = {
     | ExperimentType[]
     | ((client: SanityClient, secret?: string) => Promise<ExperimentType[]>)
   apiVersion?: string
+  experimentNameOverride?: string
+  variantNameOverride?: string
+  variantId?: string
+  variantArrayName?: string
+  experimentId?: string
 }
 
 /**
@@ -254,15 +265,13 @@ export declare type ObjectFieldWithPath = ObjectField<SchemaType> & {
 }
 
 export declare type VariantGeneric<T> = {
+  [key: string]: string | T | undefined
   _type: string
-  variantId?: string
-  experimentId?: string
   value?: T
 }
 
 export declare type VariantPreviewProps = Omit<PreviewProps, 'SchemaType'> & {
-  experiment: string
-  variant: string
+  [key: string]: string
   value: any
 }
 

package/dist/index.d.ts

@@ -10,7 +10,9 @@ import {SchemaType} from 'sanity'
 import {SetStateAction} from 'react'
 
 export declare type ArrayInputProps = ArrayOfObjectsInputProps & {
-  objectName: string
+  variantName: string
+  variantId: string
+  experimentId: string
 }
 
 export declare type ExperimentContextProps = Required<FieldPluginConfig> & {
@@ -23,11 +25,15 @@ export declare type ExperimentGeneric<T> = {
   _type: string
   default?: T
   experimentValue?: string
-  variants?: Array<
-    {
-      _key: string
-    } & VariantGeneric<T>
-  >
+  [key: string]:
+    | Array<
+        {
+          _key: string
+        } & VariantGeneric<T>
+      >
+    | string
+    | T
+    | undefined
 }
 
 export declare type ExperimentType = {
@@ -44,6 +50,11 @@ export declare type FieldPluginConfig = {
     | ExperimentType[]
     | ((client: SanityClient, secret?: string) => Promise<ExperimentType[]>)
   apiVersion?: string
+  experimentNameOverride?: string
+  variantNameOverride?: string
+  variantId?: string
+  variantArrayName?: string
+  experimentId?: string
 }
 
 /**
@@ -254,15 +265,13 @@ export declare type ObjectFieldWithPath = ObjectField<SchemaType> & {
 }
 
 export declare type VariantGeneric<T> = {
+  [key: string]: string | T | undefined
   _type: string
-  variantId?: string
-  experimentId?: string
   value?: T
 }
 
 export declare type VariantPreviewProps = Omit<PreviewProps, 'SchemaType'> & {
-  experiment: string
-  variant: string
+  [key: string]: string
   value: any
 }
 

package/dist/index.js

@@ -7,7 +7,12 @@ function _interopDefaultCompat(e) {
 var equal__default = /* @__PURE__ */ _interopDefaultCompat(equal);
 const CONFIG_DEFAULT = {
   fields: [],
-  apiVersion: "2024-11-07"
+  apiVersion: "2024-11-07",
+  experimentNameOverride: "experiment",
+  variantNameOverride: "variant",
+  variantId: "variantId",
+  variantArrayName: "variants",
+  experimentId: "experimentId"
 }, ExperimentContext = react.createContext({
   ...CONFIG_DEFAULT,
   experiments: [],
@@ -31,18 +36,18 @@ function ExperimentProvider(props) {
   return /* @__PURE__ */ jsxRuntime.jsx(ExperimentContext.Provider, { value: context, children: props.renderDefault(props) });
 }
 const ArrayInput = (props) => {
-  const fieldPath = props.path.slice(0, -1), experimentId = sanity.useFormValue([...fieldPath, "experimentId"]), { experiments } = useExperimentContext(), { onItemAppend, objectName } = props, handleClick = react.useCallback(
+  const fieldPath = props.path.slice(0, -1), { onItemAppend, variantName, variantId, experimentId } = props, experimentValue = sanity.useFormValue([...fieldPath, experimentId]), { experiments } = useExperimentContext(), handleClick = react.useCallback(
     async (variant) => {
       const item = {
         _key: uuid.uuid(),
-        variantId: variant.id,
-        experimentId,
-        _type: objectName
+        [variantId]: variant.id,
+        [experimentId]: experimentValue,
+        _type: variantName
       };
       onItemAppend(item);
     },
-    [experimentId, objectName, onItemAppend]
-  ), filteredVariants = experiments.find((option) => option.id === experimentId)?.variants || [], usedVariants = props.value?.map((variant) => variant.variantId);
+    [variantId, experimentId, experimentValue, variantName, onItemAppend]
+  ), filteredVariants = experiments.find((option) => option.id === experimentValue)?.variants || [], usedVariants = (props.value || [])?.map((variant) => variant[variantId]);
   return /* @__PURE__ */ jsxRuntime.jsxs(ui.Stack, { space: 3, children: [
     props.renderDefault({ ...props, arrayFunctions: () => null }),
     /* @__PURE__ */ jsxRuntime.jsx(ui.Inline, { space: 1, children: filteredVariants.map((variant) => /* @__PURE__ */ jsxRuntime.jsx(
@@ -53,7 +58,7 @@ const ArrayInput = (props) => {
         disabled: usedVariants?.includes(variant.id),
         onClick: () => handleClick(variant)
       },
-      `${experimentId}-${variant.id}`
+      `${experimentValue}-${variant.id}`
     )) })
   ] });
 }, AccessDeniedIcon = react.forwardRef(function(props, ref) {
@@ -6403,41 +6408,75 @@ const icons = {
 });
 Icon.displayName = "ForwardRef(Icon)";
 const useAddExperimentAction = (props) => {
-  const patchActiveEvent = react.useMemo(() => sanity.set(!0, ["active"]), []), handleAction = react.useCallback(() => {
-    props.onChange([patchActiveEvent]);
-  }, [patchActiveEvent, props]);
+  const { onChange, active, experimentNameOverride } = props, handleAddAction = react.useCallback(() => {
+    onChange([sanity.set(!active, ["active"])]);
+  }, [onChange, active]);
   return {
-    title: "Add experiment",
+    title: `Add ${experimentNameOverride}`,
     type: "action",
     icon: gi.GiSoapExperiment,
-    onAction: handleAction,
+    onAction: handleAddAction,
     renderAsButton: !0
   };
 }, useRemoveExperimentAction = (props) => {
-  const patchActiveEvent = react.useMemo(() => sanity.set(!1, ["active"]), []), patchClearEvent = react.useMemo(() => {
-    const experimentId = ["experimentId"], variants = ["variants"];
-    return [sanity.unset(experimentId), sanity.unset(variants)];
-  }, []), handleAction = react.useCallback(() => {
-    props.onChange([patchActiveEvent, ...patchClearEvent]);
-  }, [patchActiveEvent, patchClearEvent, props]);
+  const { onChange, active, experimentId, experimentNameOverride, variantNameOverride } = props, handleClearAction = react.useCallback(() => {
+    const activeId = ["active"], experiment = [experimentId], variants = [`${variantNameOverride}s`];
+    onChange([sanity.set(!active, activeId), sanity.unset(experiment), sanity.unset(variants)]);
+  }, [onChange, active, experimentId, variantNameOverride]);
   return {
-    title: "Remove experiment",
+    title: `Remove ${experimentNameOverride}`,
     type: "action",
     icon: CloseIcon,
-    onAction: handleAction,
+    onAction: handleClearAction,
     renderAsButton: !0
   };
-}, newActions = ({ onChange, inputId, active }) => active ? sanity.defineDocumentFieldAction({
-  name: "Experiment",
-  useAction: (props) => useRemoveExperimentAction({ ...props, onChange, inputId })
-}) : sanity.defineDocumentFieldAction({
-  name: "Experiment",
-  useAction: (props) => useAddExperimentAction({ ...props, onChange, inputId })
-}), ExperimentField = (props) => {
-  const { onChange } = props.inputProps, { inputId } = props, active = props.value?.active, oldActions = props.actions || [], withActionProps = {
-    ...props,
-    actions: [newActions({ onChange, inputId, active }), ...oldActions]
-  };
+}, createActions = ({
+  onChange,
+  inputId,
+  active,
+  experimentNameOverride,
+  experimentId,
+  variantNameOverride
+}) => {
+  const removeAction = sanity.defineDocumentFieldAction({
+    name: `Remove ${experimentNameOverride}`,
+    useAction: (props) => useRemoveExperimentAction({
+      active: !0,
+      onChange,
+      experimentNameOverride,
+      experimentId,
+      variantNameOverride
+    })
+  }), addAction = sanity.defineDocumentFieldAction({
+    name: `Add ${experimentNameOverride}`,
+    useAction: (props) => useAddExperimentAction({
+      active: !1,
+      onChange,
+      experimentNameOverride
+    })
+  });
+  return active ? removeAction : addAction;
+}, ExperimentField = (props) => {
+  const { onChange } = props.inputProps, { inputId, experimentNameOverride, experimentId, variantNameOverride } = props, active = props.value?.active, actionProps = react.useMemo(
+    () => ({
+      onChange,
+      inputId,
+      active,
+      experimentNameOverride,
+      experimentId,
+      variantNameOverride
+    }),
+    [onChange, inputId, active, experimentNameOverride, experimentId, variantNameOverride]
+  ), memoizedActions = react.useMemo(() => {
+    const oldActions = props.actions || [];
+    return [createActions(actionProps), ...oldActions];
+  }, [actionProps, props.actions]), withActionProps = react.useMemo(
+    () => ({
+      ...props,
+      actions: memoizedActions
+    }),
+    [props, memoizedActions]
+  );
   return props.renderDefault(withActionProps);
 }, Select = (props) => {
   const {
@@ -6468,7 +6507,10 @@ const useAddExperimentAction = (props) => {
   title: experiment.label,
   value: experiment.id
 })), ExperimentInput = (props) => {
-  const { experiments } = useExperimentContext(), id = sanity.useFormValue(["_id"]), aditionalChangePath = react.useMemo(() => [...props.path.slice(0, -1), "variants"], [props.path]), subValues = sanity.useFormValue(aditionalChangePath), { patch } = sanity.useDocumentOperation(id.replace("drafts.", ""), props.schemaType.name), handleChange = react.useCallback(
+  const { experiments } = useExperimentContext(), id = sanity.useFormValue(["_id"]), aditionalChangePath = react.useMemo(
+    () => [...props.path.slice(0, -1), `${props.variantNameOverride}s`],
+    [props.variantNameOverride, props.path]
+  ), subValues = sanity.useFormValue(aditionalChangePath), { patch } = sanity.useDocumentOperation(id.replace("drafts.", ""), props.schemaType.name), handleChange = react.useCallback(
     (event, onChange) => {
       const inputValue = event.currentTarget.value;
       if (onChange(inputValue ? sanity.set(inputValue) : sanity.unset()), subValues) {
@@ -6481,6 +6523,14 @@ const useAddExperimentAction = (props) => {
     [patch, subValues, aditionalChangePath]
   );
   return experiments.length ? /* @__PURE__ */ jsxRuntime.jsx(Select, { ...props, listOptions: formatlistOptions(experiments), handleChange }) : /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, {});
+}, VariantInput = (props) => {
+  const defaultValue = sanity.useFormValue([props.path[0], "default"]), handleClick = () => {
+    props.onChange(sanity.set(defaultValue, ["value"]));
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(ui.Stack, { space: 3, children: [
+    props.renderDefault(props),
+    /* @__PURE__ */ jsxRuntime.jsx(ui.Inline, { space: 1, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { text: "Copy default", mode: "ghost", onClick: () => handleClick() }) })
+  ] });
 }, VariantPreview = (props) => {
   const [subtitle, setSubtitle] = react.useState(void 0), [title, setTitle] = react.useState(void 0), [media, setMedia] = react.useState(void 0), client = sanity.useClient({ apiVersion: "2025-01-01" }), { experiments } = useExperimentContext(), { experiment, variant, value } = props, selectedExperiment = experiments.find((experimentItem) => experimentItem.id === experiment), selectedVariant = selectedExperiment?.variants.find((variantItem) => variantItem.id === variant);
   react.useEffect(() => {
@@ -6528,15 +6578,28 @@ function extractInnerFields(fields, path, maxDepth) {
     return [...acc, thisFieldWithPath];
   }, []);
 }
-const createFieldType = ({
-  field
+const createExperimentType = ({
+  field,
+  experimentNameOverride,
+  variantNameOverride,
+  variantId,
+  variantArrayName,
+  experimentId
 }) => {
-  const typeName = typeof field == "string" ? field : field.name, usedName = String(typeName[0]).toUpperCase() + String(typeName).slice(1), objectName = `variant${usedName}`;
+  const typeName = typeof field == "string" ? field : field.name, usedName = String(typeName[0]).toUpperCase() + String(typeName).slice(1), variantName = `${variantNameOverride}${usedName}`;
   return sanity.defineType({
-    name: `experiment${usedName}`,
+    name: `${experimentNameOverride}${usedName}`,
     type: "object",
     components: {
-      field: ExperimentField
+      field: (props) => /* @__PURE__ */ jsxRuntime.jsx(
+        ExperimentField,
+        {
+          ...props,
+          experimentId,
+          experimentNameOverride,
+          variantNameOverride
+        }
+      )
     },
     fields: [
       typeof field == "string" ? (
@@ -6558,94 +6621,140 @@ const createFieldType = ({
         hidden: !0
       }),
       sanity.defineField({
-        title: "Experiment",
-        name: "experimentId",
+        name: experimentId,
         type: "string",
         components: {
-          input: ExperimentInput
+          input: (props) => /* @__PURE__ */ jsxRuntime.jsx(ExperimentInput, { ...props, variantNameOverride })
         },
         hidden: ({ parent }) => !parent?.active
       }),
       sanity.defineField({
-        name: "variants",
+        name: variantArrayName,
         type: "array",
-        hidden: ({ parent }) => !parent?.experimentId,
+        hidden: ({ parent }) => !parent?.[experimentId],
         components: {
-          input: (props) => /* @__PURE__ */ jsxRuntime.jsx(ArrayInput, { ...props, objectName })
+          input: (props) => /* @__PURE__ */ jsxRuntime.jsx(
+            ArrayInput,
+            {
+              ...props,
+              variantName,
+              variantId,
+              experimentId
+            }
+          )
         },
         of: [
           sanity.defineField({
-            name: objectName,
-            type: objectName
+            name: variantName,
+            type: variantName
           })
         ]
       })
     ]
   });
-}, createFieldObjectType = ({
-  field
+}, createVariantType = ({
+  field,
+  variantNameOverride,
+  variantId,
+  experimentId
 }) => {
   const typeName = typeof field == "string" ? field : field.name, usedName = String(typeName[0]).toUpperCase() + String(typeName).slice(1);
   return sanity.defineType({
-    name: `variant${usedName}`,
-    title: `Experiment array ${usedName}`,
+    name: `${variantNameOverride}${usedName}`,
+    title: `${variantNameOverride} array ${usedName}`,
     type: "object",
     components: {
-      preview: VariantPreview
+      preview: VariantPreview,
+      input: VariantInput
     },
     fields: [
       {
         type: "string",
-        name: "variantId",
+        name: variantId,
         readOnly: !0
       },
       {
         type: "string",
-        name: "experimentId",
+        name: experimentId,
         hidden: !0
       },
       typeof field == "string" ? (
         // Define a simple field if all we have is the name as a string
         sanity.defineField({
           name: "value",
-          type: field,
-          hidden: ({ parent }) => !parent?.variantId
+          type: field
+          // hidden: ({parent}) => !parent?.[`${objectNameOverride}Id`],
         })
       ) : (
         // Pass in the configured options, but overwrite the name
         {
           ...field,
-          name: "value",
-          hidden: ({ parent }) => !parent?.variantId
+          name: "value"
+          // hidden: ({parent}) => !parent?.[`${objectNameOverride}Id`],
         }
       )
     ],
     preview: {
       select: {
-        variant: "variantId",
-        experiment: "experimentId",
+        variant: variantId,
+        experiment: experimentId,
         value: "value"
       }
     }
   });
-}, fieldSchema = ({ fields, experiments }) => [
-  ...fields.map((field) => createFieldObjectType({ field })),
-  ...fields.map((field) => createFieldType({ field }))
+}, fieldSchema = ({
+  fields,
+  experimentNameOverride,
+  variantNameOverride,
+  variantId,
+  variantArrayName,
+  experimentId
+}) => [
+  ...fields.map(
+    (field) => createVariantType({ field, variantNameOverride, variantId, experimentId })
+  ),
+  ...fields.map(
+    (field) => createExperimentType({
+      field,
+      experimentNameOverride,
+      variantNameOverride,
+      variantId,
+      variantArrayName,
+      experimentId
+    })
+  )
 ], fieldLevelExperiments = sanity.definePlugin((config) => {
-  const pluginConfig = { ...CONFIG_DEFAULT, ...config }, { fields, experiments } = pluginConfig;
+  const pluginConfig = { ...CONFIG_DEFAULT, ...config }, { fields, experimentNameOverride, variantNameOverride } = pluginConfig, experimentId = `${experimentNameOverride}Id`, variantArrayName = `${variantNameOverride}s`, variantId = `${variantNameOverride}Id`;
   return {
     name: "sanity-personalistaion-plugin-field-level-experiments",
     schema: {
-      types: fieldSchema({ fields, experiments })
+      types: fieldSchema({
+        fields,
+        experimentNameOverride,
+        variantNameOverride,
+        variantId,
+        variantArrayName,
+        experimentId
+      })
     },
     form: {
       components: {
         input: (props) => {
           if (!(props.id === "root" && sanity.isObjectInputProps(props)) || !flattenSchemaType(props.schemaType).map(
             (field) => field.type.name
-          ).some((name) => name.startsWith("experiment")))
+          ).some(
+            (name) => name.startsWith(experimentNameOverride)
+          ))
             return props.renderDefault(props);
-          const providerProps = { ...props, experimentFieldPluginConfig: pluginConfig };
+          const providerProps = {
+            ...props,
+            experimentFieldPluginConfig: {
+              ...pluginConfig,
+              variantId,
+              variantArrayName,
+              experimentId
+            }
+          };
           return ExperimentProvider(providerProps);
         }
       }