Payload CMS Release: 3.0.0-beta.66

TL;DR

PayloadCMS v3.0.0-beta.66 brings significant improvements with new features like inline blocks for rich text, login flexibility with email/username options, and strongly typed database ID types. This release fixes several UI issues including localized fields in version comparison, search query persistence, and date field styling. It also addresses critical bugs in webpack configuration and reduces MaxListenersExceeded warnings. Note that there's a breaking change in hook type naming conventions.

Highlight of the Release

• New inline blocks feature for Lexical rich text editor
• Flexible authentication with options to login using email, username, or both
• Strongly typed database ID types in generated TypeScript types
• Fixed version comparison view for localized fields
• Improved developer experience with fewer warnings and errors

Migration Guide

Breaking Change: Hook Type Naming Convention

If you were using the AfterMeHook, AfterLogoutHook, or AfterRefreshHook types, these have been renamed to follow the consistent naming convention used throughout Payload. Update your imports as follows:

Old:

import type { AfterMeHook, AfterLogoutHook, AfterRefreshHook } from 'payload'

New:

import type { CollectionAfterMeHook, CollectionAfterLogoutHook, CollectionAfterRefreshHook } from 'payload'

This change aligns with the documentation and makes the type naming more consistent with other hook types in the system.

Upgrade Recommendations

For Beta Users

If you're already using Payload v3.0.0-beta.65, upgrading to beta.66 is recommended as it includes several important bug fixes and new features that improve the developer and user experience.

Breaking Change Consideration

Before upgrading, be aware of the breaking change in hook type naming. If your code uses AfterMeHook, AfterLogoutHook, or AfterRefreshHook types, you'll need to update these imports to use the new prefixed names.

Upgrade Steps

1. Update your Payload dependency to v3.0.0-beta.66
2. Check for any usage of the renamed hook types and update them
3. Test your application thoroughly, especially if you're using localized fields, relationship fields, or custom authentication logic

Bug Fixes

UI and Display Fixes

• Version Comparison View: Fixed issue where localized fields showed no data for the base comparison data
• Date Field Background: Corrected background color specificity for date fields in dark mode
• Search Query Persistence: Fixed issue where search queries remained between navigation
• Slash Menu Navigation: Corrected keyboard navigation in the slash menu to properly trigger auto-scroll

Data and Functionality Fixes

• Localized Relationship Fields: Fixed issue where locale was not passed into relationship fields, resulting in documents without titles in some situations
• Webpack Configuration: Resolved error that occurred when dbName or enumName was set as a function
• MaxListenersExceeded Warning: Fixed warnings caused by the atomically dependency (a peer dependency of conf)
• LockUntil Functionality: Cherry-picked fix for the lockUntil feature from PR #6052
• Template Seed Script: Fixed bad import in website seed script

Type System Improvements

• Hook Type Naming: Aliased AfterMe, AfterLogout, and AfterRefresh hook types to follow consistent naming conventions (breaking change)

New Features

Inline Blocks for Rich Text Editor

The Lexical rich text editor now supports inline blocks, allowing for more sophisticated content layouts and embedded components within text content.

Flexible Authentication Options

New authentication configuration options provide greater flexibility:

auth: {
  loginWithUsername: {
    allowEmailLogin: true, // default: false
    requireEmail: false, // default: false
  }
}

• allowEmailLogin: Determines if users can login with either email or username
• requireEmail: Specifies if emails are required when using usernames

Strongly Typed Database ID Types

Generated TypeScript types now include database ID type information:

db: {
  defaultIDType: number; // or string depending on your database
};

This makes it easier to work with IDs in a type-safe manner across your application.

Strongly Typed Next.js i18n Request Helper

The getNextRequestI18n function is now strongly typed, improving type safety when working with internationalization in Next.js applications.

Security Updates

No specific security fixes were mentioned in this release.

Performance Improvements

Reduced Development Warnings

The fix for MaxListenersExceeded warnings significantly improves the development experience by eliminating console noise during hot module reloading. This was achieved by:

• Removing the conf dependency which came with unnecessary dependencies
• Creating a dependency-free implementation of the required functionality
• Ensuring Next.js HMR websocket listeners are only registered once by adding them to the cache

Build Process Improvements

The esbuild scripts now run synchronously, which helps fix publishing issues where the next package was being published without any built .js files. This ensures more reliable builds and deployments.

Impact Summary

This beta release brings significant improvements to PayloadCMS with a focus on developer experience and content editor usability. The addition of inline blocks to the rich text editor expands content creation capabilities, while the new authentication options provide more flexibility in how users can log in.

Several critical bugs have been fixed, particularly around localization and UI rendering, which will improve the day-to-day experience for content editors. Developers will appreciate the strongly typed database ID types and Next.js i18n helpers, as well as the resolution of webpack errors and MaxListenersExceeded warnings.

The breaking change to hook type naming is relatively minor but requires attention during upgrade. Overall, this release represents a solid step forward in the beta phase, addressing both feature requests and quality-of-life improvements.

Full Release Notes

import type { AfterMeHook, AfterLogoutHook, AfterRefreshHook } from 'payload'

import type { CollectionAfterMeHook, CollectionAfterLogoutHook, CollectionAfterRefreshHook } from 'payload'