fix(ui): significantly more predictable autosave form state (#13460)

docs/performance/overview.mdx

@@ -207,7 +207,7 @@ Everything mentioned above applies to local development as well, but there are a
 ### Enable Turbopack
 
 <Banner type="warning">
-  **Note:** In the future this will be the default. Use as your own risk.
+  **Note:** In the future this will be the default. Use at your own risk.
 </Banner>
 
 Add `--turbo` to your dev script to significantly speed up your local development server start time.

packages/payload/src/admin/forms/Form.ts

@@ -56,6 +56,12 @@ export type FieldState = {
   fieldSchema?: Field
   filterOptions?: FilterOptionsResult
   initialValue?: unknown
+  /**
+   * @experimental - Note: this property is experimental and may change in the future. Use at your own discretion.
+   * Every time a field is changed locally, this flag is set to true. Prevents form state from server from overwriting local changes.
+   * After merging server form state, this flag is reset.
+   */
+  isModified?: boolean
   /**
    * The path of the field when its custom components were last rendered.
    * This is used to denote if a field has been rendered, and if so,
@@ -114,8 +120,10 @@ export type BuildFormStateArgs = {
   mockRSCs?: boolean
   operation?: 'create' | 'update'
   readOnly?: boolean
-  /*
+  /**
-    If true, will render field components within their state object
+   * If true, will render field components within their state object.
+   * Performance optimization: Setting to `false` ensures that only fields that have changed paths will re-render, e.g. new array rows, etc.
+   * For example, you only need to render ALL fields on initial render, not on every onChange.
    */
   renderAllFields?: boolean
   req: PayloadRequest

packages/ui/src/elements/Autosave/index.tsx

@@ -149,7 +149,9 @@ export const Autosave: React.FC<Props> = ({ id, collection, global: globalDoc })
             submitted && !valid && versionsConfig?.drafts && versionsConfig?.drafts?.validate
 
           if (!skipSubmission && modifiedRef.current && url) {
-            const result = await submit({
+            const result = await submit<{
+              incrementVersionCount: boolean
+            }>({
               acceptValues: {
                 overrideLocalChanges: false,
               },

packages/ui/src/elements/DocumentDrawer/Provider.tsx

@@ -21,7 +21,7 @@ export type DocumentDrawerContextProps = {
   readonly onSave?: (args: {
     collectionConfig?: ClientCollectionConfig
     /**
-     * @experimental - Note: this property is experimental and may change in the future. Use as your own discretion.
+     * @experimental - Note: this property is experimental and may change in the future. Use at your own discretion.
      * If you want to pass additional data to the onSuccess callback, you can use this context object.
      */
     context?: Record<string, unknown>

packages/ui/src/forms/Form/fieldReducer.ts

@@ -189,12 +189,11 @@ export function fieldReducer(state: FormState, action: FieldAction): FormState {
     }
 
     case 'MERGE_SERVER_STATE': {
-      const { acceptValues, formStateAtTimeOfRequest, prevStateRef, serverState } = action
+      const { acceptValues, prevStateRef, serverState } = action
 
       const newState = mergeServerFormState({
         acceptValues,
         currentState: state || {},
-        formStateAtTimeOfRequest,
         incomingState: serverState,
       })
 
@@ -385,6 +384,7 @@ export function fieldReducer(state: FormState, action: FieldAction): FormState {
             return {
               ...field,
               [key]: value,
+              ...(key === 'value' ? { isModified: true } : {}),
             }
           }
 
@@ -398,6 +398,15 @@ export function fieldReducer(state: FormState, action: FieldAction): FormState {
         [action.path]: newField,
       }
 
+      // reset `isModified` in all other fields
+      if ('value' in action) {
+        for (const [path, field] of Object.entries(newState)) {
+          if (path !== action.path && 'isModified' in field) {
+            delete newState[path].isModified
+          }
+        }
+      }
+
       return newState
     }
 

packages/ui/src/forms/Form/index.tsx

@@ -264,23 +264,21 @@ export const Form: React.FC<FormProps> = (props) => {
         await wait(100)
       }
 
-      /**
-       * Take copies of the current form state and data here. This will ensure it is consistent.
-       * For example, it is possible for the form state ref to change in the background while this submit function is running.
-       * TODO: can we send the `formStateCopy` through `reduceFieldsToValues` to even greater consistency? Doing this currently breaks uploads.
-       */
-      const formStateCopy = deepCopyObjectSimpleWithoutReactComponents(contextRef.current.fields)
       const data = reduceFieldsToValues(contextRef.current.fields, true)
 
       // Execute server side validations
       if (Array.isArray(beforeSubmit)) {
+        const serializableFormState = deepCopyObjectSimpleWithoutReactComponents(
+          contextRef.current.fields,
+        )
+
         let revalidatedFormState: FormState
 
         await beforeSubmit.reduce(async (priorOnChange, beforeSubmitFn) => {
           await priorOnChange
 
           const result = await beforeSubmitFn({
-            formState: formStateCopy,
+            formState: serializableFormState,
           })
 
           revalidatedFormState = result
@@ -328,7 +326,7 @@ export const Form: React.FC<FormProps> = (props) => {
           data[key] = value
         }
 
-        onSubmit(formStateCopy, data)
+        onSubmit(contextRef.current.fields, data)
       }
 
       if (!hasFormSubmitAction) {
@@ -379,13 +377,14 @@ export const Form: React.FC<FormProps> = (props) => {
 
         if (res.status < 400) {
           if (typeof onSuccess === 'function') {
-            const newFormState = await onSuccess(json, context)
+            const newFormState = await onSuccess(json, {
+              context,
+            })
 
             if (newFormState) {
               dispatchFields({
                 type: 'MERGE_SERVER_STATE',
                 acceptValues,
-                formStateAtTimeOfRequest: formStateCopy,
                 prevStateRef: prevFormState,
                 serverState: newFormState,
               })

packages/ui/src/forms/Form/mergeServerFormState.ts

@@ -21,7 +21,6 @@ export type AcceptValues =
 type Args = {
   acceptValues?: AcceptValues
   currentState?: FormState
-  formStateAtTimeOfRequest?: FormState
   incomingState: FormState
 }
 
@@ -37,7 +36,6 @@ type Args = {
 export const mergeServerFormState = ({
   acceptValues,
   currentState = {},
-  formStateAtTimeOfRequest,
   incomingState,
 }: Args): FormState => {
   const newState = { ...currentState }
@@ -49,8 +47,9 @@ export const mergeServerFormState = ({
 
     /**
      * If it's a new field added by the server, always accept the value.
-     * Otherwise, only accept the values if explicitly requested, e.g. on submit.
+     * Otherwise:
-     * Can also control this granularly by only accepting unmodified values, e.g. for autosave.
+     *   a. accept all values when explicitly requested, e.g. on submit
+     *   b. only accept values for unmodified fields, e.g. on autosave
      */
     if (
       !incomingField.addedByServer &&
@@ -59,7 +58,7 @@ export const mergeServerFormState = ({
         (typeof acceptValues === 'object' &&
           acceptValues !== null &&
           acceptValues?.overrideLocalChanges === false &&
-          currentState[path]?.value !== formStateAtTimeOfRequest?.[path]?.value))
+          currentState[path].isModified))
     ) {
       delete incomingField.value
       delete incomingField.initialValue

packages/ui/src/forms/Form/types.ts

@@ -54,7 +54,15 @@ export type FormProps = {
   log?: boolean
   onChange?: ((args: { formState: FormState; submitted?: boolean }) => Promise<FormState>)[]
   onSubmit?: (fields: FormState, data: Data) => void
-  onSuccess?: (json: unknown, context?: Record<string, unknown>) => Promise<FormState | void> | void
+  onSuccess?: (
+    json: unknown,
+    options?: {
+      /**
+       * Arbitrary context passed to the onSuccess callback.
+       */
+      context?: Record<string, unknown>
+    },
+  ) => Promise<FormState | void> | void
   redirect?: string
   submitted?: boolean
   uuid?: string
@@ -70,14 +78,14 @@ export type FormProps = {
     }
 )
 
-export type SubmitOptions = {
+export type SubmitOptions<T = Record<string, unknown>> = {
   acceptValues?: AcceptValues
   action?: string
   /**
-   * @experimental - Note: this property is experimental and may change in the future. Use as your own discretion.
+   * @experimental - Note: this property is experimental and may change in the future. Use at your own discretion.
    * If you want to pass additional data to the onSuccess callback, you can use this context object.
    */
-  context?: Record<string, unknown>
+  context?: T
   /**
    * When true, will disable the form while it is processing.
    * @default true
@@ -99,11 +107,11 @@ export type SubmitOptions = {
 
 export type DispatchFields = React.Dispatch<any>
 
-export type Submit = (
+export type Submit = <T extends Record<string, unknown>>(
-  options?: SubmitOptions,
+  options?: SubmitOptions<T>,
   e?: React.FormEvent<HTMLFormElement>,
 ) => Promise</**
- * @experimental - Note: the `{ res: ... }` return type is experimental and may change in the future. Use as your own discretion.
+ * @experimental - Note: the `{ res: ... }` return type is experimental and may change in the future. Use at your own discretion.
  * Returns the form state and the response from the server.
  */
 { formState?: FormState; res: Response } | void>
@@ -185,7 +193,6 @@ export type ADD_ROW = {
 
 export type MERGE_SERVER_STATE = {
   acceptValues?: AcceptValues
-  formStateAtTimeOfRequest?: FormState
   prevStateRef: React.RefObject<FormState>
   serverState: FormState
   type: 'MERGE_SERVER_STATE'

packages/ui/src/forms/fieldSchemasToFormState/index.tsx

@@ -5,7 +5,6 @@ import type {
   DocumentPreferences,
   Field,
   FieldSchemaMap,
-  FieldState,
   FormState,
   FormStateWithoutComponents,
   PayloadRequest,
@@ -105,6 +104,7 @@ export const fieldSchemasToFormState = async ({
   skipValidation,
 }: Args): Promise<FormState> => {
   if (!clientFieldSchemaMap && renderFieldFn) {
+    // eslint-disable-next-line no-console
     console.warn(
       'clientFieldSchemaMap is not passed to fieldSchemasToFormState - this will reduce performance',
     )

packages/ui/src/forms/fieldSchemasToFormState/iterateFields.ts

@@ -5,7 +5,6 @@ import type {
   DocumentPreferences,
   Field as FieldSchema,
   FieldSchemaMap,
-  FieldState,
   FormState,
   FormStateWithoutComponents,
   PayloadRequest,

packages/ui/src/utilities/buildFormState.ts

@@ -182,11 +182,13 @@ export const buildFormState = async (
   }
 
   let documentData = undefined
+
   if (documentFormState) {
     documentData = reduceFieldsToValues(documentFormState, true)
   }
 
   let blockData = initialBlockData
+
   if (initialBlockFormState) {
     blockData = reduceFieldsToValues(initialBlockFormState, true)
   }

packages/ui/src/views/Edit/index.tsx

@@ -1,7 +1,7 @@
 /* eslint-disable react-compiler/react-compiler -- TODO: fix */
 'use client'
 
-import type { ClientUser, DocumentViewClientProps, FormState } from 'payload'
+import type { ClientUser, DocumentViewClientProps } from 'payload'
 
 import { useRouter, useSearchParams } from 'next/navigation.js'
 import { formatAdminURL } from 'payload/shared'
@@ -256,10 +256,13 @@ export function DefaultEditView({
     user?.id,
   ])
 
-  const onSave = useCallback(
+  const onSave = useCallback<FormProps['onSuccess']>(
-    async (json, context?: Record<string, unknown>): Promise<FormState> => {
+    async (json, options) => {
+      const { context } = options || {}
+
       const controller = handleAbortRef(abortOnSaveRef)
 
+      // @ts-expect-error can ignore
       const document = json?.doc || json?.result
 
       const updatedAt = document?.updatedAt || new Date().toISOString()
@@ -290,9 +293,10 @@ export function DefaultEditView({
         const operation = id ? 'update' : 'create'
 
         void onSaveFromContext({
-          ...json,
+          ...(json as Record<string, unknown>),
           context,
           operation,
+          // @ts-expect-error todo: this is not right, should be under `doc`?
           updatedAt:
             operation === 'update'
               ? new Date().toISOString()
@@ -397,13 +401,11 @@ export function DefaultEditView({
         formState: prevFormState,
         globalSlug,
         operation,
-        skipValidation: !submitted,
-        // Performance optimization: Setting it to false ensure that only fields that have explicit requireRender set in the form state will be rendered (e.g. new array rows).
-        // We only want to render ALL fields on initial render, not in onChange.
         renderAllFields: false,
         returnLockStatus: isLockingEnabled,
         schemaPath: schemaPathSegments.join('.'),
         signal: controller.signal,
+        skipValidation: !submitted,
         updateLastEdited,
       })
 

test/form-state/collections/Autosave/index.tsx

@@ -0,0 +1,31 @@
+import type { CollectionConfig } from 'payload'
+
+export const autosavePostsSlug = 'autosave-posts'
+
+export const AutosavePostsCollection: CollectionConfig = {
+  slug: autosavePostsSlug,
+  admin: {
+    useAsTitle: 'title',
+  },
+  fields: [
+    {
+      name: 'title',
+      type: 'text',
+    },
+    {
+      name: 'computedTitle',
+      type: 'text',
+      hooks: {
+        beforeChange: [({ data }) => data?.title],
+      },
+      label: 'Computed Title',
+    },
+  ],
+  versions: {
+    drafts: {
+      autosave: {
+        interval: 100,
+      },
+    },
+  },
+}

test/form-state/collections/Posts/index.ts

@@ -12,6 +12,14 @@ export const PostsCollection: CollectionConfig = {
       name: 'title',
       type: 'text',
     },
+    {
+      name: 'computedTitle',
+      type: 'text',
+      hooks: {
+        beforeChange: [({ data }) => data?.title],
+      },
+      label: 'Computed Title',
+    },
     {
       name: 'renderTracker',
       type: 'text',

test/form-state/config.ts

@@ -3,13 +3,14 @@ import path from 'path'
 
 import { buildConfigWithDefaults } from '../buildConfigWithDefaults.js'
 import { devUser } from '../credentials.js'
+import { AutosavePostsCollection } from './collections/Autosave/index.js'
 import { PostsCollection, postsSlug } from './collections/Posts/index.js'
 
 const filename = fileURLToPath(import.meta.url)
 const dirname = path.dirname(filename)
 
 export default buildConfigWithDefaults({
-  collections: [PostsCollection],
+  collections: [PostsCollection, AutosavePostsCollection],
   admin: {
     importMap: {
       baseDir: path.resolve(dirname),

test/form-state/e2e.spec.ts

@@ -7,6 +7,7 @@ import { addBlock } from 'helpers/e2e/addBlock.js'
 import { assertElementStaysVisible } from 'helpers/e2e/assertElementStaysVisible.js'
 import { assertNetworkRequests } from 'helpers/e2e/assertNetworkRequests.js'
 import { assertRequestBody } from 'helpers/e2e/assertRequestBody.js'
+import { waitForAutoSaveToRunAndComplete } from 'helpers/e2e/waitForAutoSaveToRunAndComplete.js'
 import * as path from 'path'
 import { fileURLToPath } from 'url'
 
@@ -21,6 +22,7 @@ import {
 import { AdminUrlUtil } from '../helpers/adminUrlUtil.js'
 import { initPayloadE2ENoConfig } from '../helpers/initPayloadE2ENoConfig.js'
 import { TEST_TIMEOUT, TEST_TIMEOUT_LONG } from '../playwright.config.js'
+import { autosavePostsSlug } from './collections/Autosave/index.js'
 import { postsSlug } from './collections/Posts/index.js'
 
 const { describe, beforeEach, afterEach } = test
@@ -36,11 +38,13 @@ let serverURL: string
 test.describe('Form State', () => {
   let page: Page
   let postsUrl: AdminUrlUtil
+  let autosavePostsUrl: AdminUrlUtil
 
   test.beforeAll(async ({ browser }, testInfo) => {
     testInfo.setTimeout(TEST_TIMEOUT_LONG)
     ;({ payload, serverURL } = await initPayloadE2ENoConfig({ dirname }))
     postsUrl = new AdminUrlUtil(serverURL, postsSlug)
+    autosavePostsUrl = new AdminUrlUtil(serverURL, autosavePostsSlug)
 
     context = await browser.newContext()
     page = await context.newPage()
@@ -296,6 +300,59 @@ test.describe('Form State', () => {
     await cdpSession.detach()
   })
 
+  test('should render computed values after save', async () => {
+    await page.goto(postsUrl.create)
+    const titleField = page.locator('#field-title')
+    const computedTitleField = page.locator('#field-computedTitle')
+
+    await titleField.fill('Test Title')
+
+    await expect(computedTitleField).toHaveValue('')
+
+    await saveDocAndAssert(page)
+
+    await expect(computedTitleField).toHaveValue('Test Title')
+  })
+
+  test('autosave - should render computed values after autosave', async () => {
+    await page.goto(autosavePostsUrl.create)
+    const titleField = page.locator('#field-title')
+    const computedTitleField = page.locator('#field-computedTitle')
+
+    await titleField.fill('Test Title')
+
+    await waitForAutoSaveToRunAndComplete(page)
+
+    await expect(computedTitleField).toHaveValue('Test Title')
+  })
+
+  test('autosave - should not overwrite computed values that are being actively edited', async () => {
+    await page.goto(autosavePostsUrl.create)
+    const titleField = page.locator('#field-title')
+    const computedTitleField = page.locator('#field-computedTitle')
+
+    await titleField.fill('Test Title')
+
+    await expect(computedTitleField).toHaveValue('Test Title')
+
+    // Put cursor at end of text
+    await computedTitleField.evaluate((el: HTMLInputElement) => {
+      el.focus()
+      el.setSelectionRange(el.value.length, el.value.length)
+    })
+
+    await computedTitleField.pressSequentially(' - Edited', { delay: 100 })
+
+    await waitForAutoSaveToRunAndComplete(page)
+
+    await expect(computedTitleField).toHaveValue('Test Title - Edited')
+
+    // but then when editing another field, the computed field should update
+    await titleField.fill('Test Title 2')
+    await waitForAutoSaveToRunAndComplete(page)
+    await expect(computedTitleField).toHaveValue('Test Title 2')
+  })
+
   describe('Throttled tests', () => {
     let cdpSession: CDPSession
 

test/form-state/int.spec.ts

@@ -1,4 +1,4 @@
-import type { FormState, Payload, User } from 'payload'
+import type { FieldState, FormState, Payload, User } from 'payload'
 
 import { buildFormState } from '@payloadcms/ui/utilities/buildFormState'
 import path from 'path'
@@ -567,12 +567,17 @@ describe('Form State', () => {
   })
 
   it('should accept all values from the server regardless of local modifications, e.g. on submit', () => {
-    const currentState = {
+    const title: FieldState = {
-      title: {
       value: 'Test Post (modified on the client)',
       initialValue: 'Test Post',
       valid: true,
       passesCondition: true,
+    }
+
+    const currentState: Record<string, FieldState> = {
+      title: {
+        ...title,
+        isModified: true,
       },
       computedTitle: {
         value: 'Test Post (computed on the client)',
@@ -582,17 +587,7 @@ describe('Form State', () => {
       },
     }
 
-    const formStateAtTimeOfRequest = {
+    const incomingStateFromServer: Record<string, FieldState> = {
-      ...currentState,
-      title: {
-        value: 'Test Post (modified on the client 2)',
-        initialValue: 'Test Post',
-        valid: true,
-        passesCondition: true,
-      },
-    }
-
-    const incomingStateFromServer = {
       title: {
         value: 'Test Post (modified on the server)',
         initialValue: 'Test Post',
@@ -610,20 +605,30 @@ describe('Form State', () => {
     const newState = mergeServerFormState({
       acceptValues: true,
       currentState,
-      formStateAtTimeOfRequest,
       incomingState: incomingStateFromServer,
     })
 
-    expect(newState).toStrictEqual(incomingStateFromServer)
+    expect(newState).toStrictEqual({
+      ...incomingStateFromServer,
+      title: {
+        ...incomingStateFromServer.title,
+        isModified: true,
+      },
+    })
   })
 
   it('should not accept values from the server if they have been modified locally since the request was made, e.g. on autosave', () => {
-    const currentState = {
+    const title: FieldState = {
-      title: {
       value: 'Test Post (modified on the client 1)',
       initialValue: 'Test Post',
       valid: true,
       passesCondition: true,
+    }
+
+    const currentState: Record<string, FieldState> = {
+      title: {
+        ...title,
+        isModified: true,
       },
       computedTitle: {
         value: 'Test Post',
@@ -633,17 +638,7 @@ describe('Form State', () => {
       },
     }
 
-    const formStateAtTimeOfRequest = {
+    const incomingStateFromServer: Record<string, FieldState> = {
-      ...currentState,
-      title: {
-        value: 'Test Post (modified on the client 2)',
-        initialValue: 'Test Post',
-        valid: true,
-        passesCondition: true,
-      },
-    }
-
-    const incomingStateFromServer = {
       title: {
         value: 'Test Post (modified on the server)',
         initialValue: 'Test Post',
@@ -661,12 +656,15 @@ describe('Form State', () => {
     const newState = mergeServerFormState({
       acceptValues: { overrideLocalChanges: false },
       currentState,
-      formStateAtTimeOfRequest,
       incomingState: incomingStateFromServer,
     })
 
     expect(newState).toStrictEqual({
       ...currentState,
+      title: {
+        ...currentState.title,
+        isModified: true,
+      },
       computedTitle: incomingStateFromServer.computedTitle, // This field was not modified locally, so should be updated from the server
     })
   })

test/form-state/payload-types.ts

@@ -68,6 +68,7 @@ export interface Config {
   blocks: {};
   collections: {
     posts: Post;
+    'autosave-posts': AutosavePost;
     users: User;
     'payload-locked-documents': PayloadLockedDocument;
     'payload-preferences': PayloadPreference;
@@ -76,6 +77,7 @@ export interface Config {
   collectionsJoins: {};
   collectionsSelect: {
     posts: PostsSelect<false> | PostsSelect<true>;
+    'autosave-posts': AutosavePostsSelect<false> | AutosavePostsSelect<true>;
     users: UsersSelect<false> | UsersSelect<true>;
     'payload-locked-documents': PayloadLockedDocumentsSelect<false> | PayloadLockedDocumentsSelect<true>;
     'payload-preferences': PayloadPreferencesSelect<false> | PayloadPreferencesSelect<true>;
@@ -120,6 +122,7 @@ export interface UserAuthOperations {
 export interface Post {
   id: string;
   title?: string | null;
+  computedTitle?: string | null;
   renderTracker?: string | null;
   /**
    * This field should only validate on submit. Try typing "Not allowed" and submitting the form.
@@ -151,6 +154,18 @@ export interface Post {
   updatedAt: string;
   createdAt: string;
 }
+/**
+ * This interface was referenced by `Config`'s JSON-Schema
+ * via the `definition` "autosave-posts".
+ */
+export interface AutosavePost {
+  id: string;
+  title?: string | null;
+  computedTitle?: string | null;
+  updatedAt: string;
+  createdAt: string;
+  _status?: ('draft' | 'published') | null;
+}
 /**
  * This interface was referenced by `Config`'s JSON-Schema
  * via the `definition` "users".
@@ -166,6 +181,13 @@ export interface User {
   hash?: string | null;
   loginAttempts?: number | null;
   lockUntil?: string | null;
+  sessions?:
+    | {
+        id: string;
+        createdAt?: string | null;
+        expiresAt: string;
+      }[]
+    | null;
   password?: string | null;
 }
 /**
@@ -179,6 +201,10 @@ export interface PayloadLockedDocument {
         relationTo: 'posts';
         value: string | Post;
       } | null)
+    | ({
+        relationTo: 'autosave-posts';
+        value: string | AutosavePost;
+      } | null)
     | ({
         relationTo: 'users';
         value: string | User;
@@ -231,6 +257,7 @@ export interface PayloadMigration {
  */
 export interface PostsSelect<T extends boolean = true> {
   title?: T;
+  computedTitle?: T;
   renderTracker?: T;
   validateUsingEvent?: T;
   blocks?:
@@ -261,6 +288,17 @@ export interface PostsSelect<T extends boolean = true> {
   updatedAt?: T;
   createdAt?: T;
 }
+/**
+ * This interface was referenced by `Config`'s JSON-Schema
+ * via the `definition` "autosave-posts_select".
+ */
+export interface AutosavePostsSelect<T extends boolean = true> {
+  title?: T;
+  computedTitle?: T;
+  updatedAt?: T;
+  createdAt?: T;
+  _status?: T;
+}
 /**
  * This interface was referenced by `Config`'s JSON-Schema
  * via the `definition` "users_select".
@@ -275,6 +313,13 @@ export interface UsersSelect<T extends boolean = true> {
   hash?: T;
   loginAttempts?: T;
   lockUntil?: T;
+  sessions?:
+    | T
+    | {
+        id?: T;
+        createdAt?: T;
+        expiresAt?: T;
+      };
 }
 /**
  * This interface was referenced by `Config`'s JSON-Schema

test/versions/collections/Autosave.ts

@@ -61,6 +61,14 @@ const AutosavePosts: CollectionConfig = {
         beforeChange: [({ data }) => data?.title],
       },
     },
+    {
+      name: 'richText',
+      type: 'richText',
+    },
+    {
+      name: 'json',
+      type: 'json',
+    },
     {
       name: 'description',
       label: 'Description',

test/versions/payload-types.ts

@@ -198,6 +198,30 @@ export interface AutosavePost {
   id: string;
   title: string;
   computedTitle?: string | null;
+  richText?: {
+    root: {
+      type: string;
+      children: {
+        type: string;
+        version: number;
+        [k: string]: unknown;
+      }[];
+      direction: ('ltr' | 'rtl') | null;
+      format: 'left' | 'start' | 'center' | 'right' | 'end' | 'justify' | '';
+      indent: number;
+      version: number;
+    };
+    [k: string]: unknown;
+  } | null;
+  json?:
+    | {
+        [k: string]: unknown;
+      }
+    | unknown[]
+    | string
+    | number
+    | boolean
+    | null;
   description: string;
   array?:
     | {
@@ -793,6 +817,8 @@ export interface PostsSelect<T extends boolean = true> {
 export interface AutosavePostsSelect<T extends boolean = true> {
   title?: T;
   computedTitle?: T;
+  richText?: T;
+  json?: T;
   description?: T;
   array?:
     | T