Payload CMS Release: 3.0.0-beta.87

TL;DR

PayloadCMS v3.0.0-beta.87: Enhanced Field Component Type System

This beta release significantly improves the type system for field components in PayloadCMS. It threads field configuration through to all field subcomponents (labels, descriptions, error messages) via props, making field configurations easily accessible and strongly typed in both server and client components. The update exports explicit types for every component of every field, enabling more precise TypeScript definitions for custom components.

Highlight of the Release

• Improved TypeScript support with explicit types for all field components
• Field configuration now accessible through props in all field subcomponents
• Better developer experience when creating custom field components
• Strongly typed props for both server and client components

Migration Guide

Type Definition Changes

If you're using custom components with the previous type definitions, you'll need to update your imports:

Old:

import type { ErrorComponent, LabelComponent, DescriptionComponent } from 'payload'

New:

import type {
  FieldErrorClientComponent,
  FieldErrorServerComponent,
  FieldLabelClientComponent,
  FieldLabelServerComponent,
  FieldDescriptionClientComponent,
  FieldDescriptionServerComponent
} from 'payload'

For better type safety, it's recommended to use the field-specific types instead of the generic ones:

// Prefer this:
import type { TextFieldLabelClientComponent } from 'payload'

// Instead of this:
import type { FieldLabelClientComponent } from 'payload'

Upgrade Recommendations

This is a beta release that introduces type improvements without changing runtime behavior. If you're developing with TypeScript and using custom field components, upgrading is recommended to take advantage of the improved type system.

If you have custom components that use the previous type definitions, you'll need to update your imports as outlined in the migration guide.

Since this is a beta release, it's recommended to test thoroughly in a non-production environment before deploying to production.

Bug Fixes

No specific bug fixes were mentioned in this release.

New Features

Enhanced Field Component Type System

The field configuration is now threaded through to all "field subcomponents" via props, making it easily accessible and strongly typed in both server and client components. This means you can directly access field properties like maxLength through props.field.maxLength.

Explicit Component Types

Every component of every field now has its own explicit type with client/server variations:

import type {
  TextFieldClientComponent,
  TextFieldServerComponent,
  TextFieldLabelClientComponent,
  TextFieldLabelServerComponent,
  TextFieldDescriptionClientComponent,
  TextFieldDescriptionServerComponent,
  TextFieldErrorClientComponent,
  TextFieldErrorServerComponent,
  // ...and so on for each field type
} from 'payload'

This enables more precise TypeScript definitions when creating custom components:

import type { TextFieldLabelServerComponent } from 'payload'

import React from 'react'

export const CustomLabel: TextFieldLabelServerComponent = (props) => {
  return (
    <div>{`The max length of this field is: ${props?.field?.maxLength}`}</div>
  )
}

Security Updates

No security fixes were mentioned in this release.

Performance Improvements

No specific performance improvements were mentioned in this release.

Impact Summary

This release significantly enhances the developer experience for PayloadCMS by improving the TypeScript type system for field components. The changes make field configurations more accessible and strongly typed throughout the component hierarchy, which leads to better code completion, type checking, and overall developer productivity.

The update is particularly valuable for developers creating custom field components, as they now have access to explicit types for every component of every field, with proper client/server variations. This enables more precise type definitions and better IDE support.

While there are breaking changes to type definitions, they only affect developers who are heavily using custom components with the previous type system. The runtime behavior of PayloadCMS remains unchanged, making this primarily a developer experience improvement.

Full Release Notes