v3.0.0-beta.128

v3.0.0-beta.128 (2024-11-12)

This is a significant release which overhauls the way that we render, and provide, custom React components to the Payload Admin UI. Now, custom server components receive contextual props, like data and value, so you can do considerably more with them on the server. It also ships with a variety of performance improvements to the server-side rendering done for the admin panel. There are a few relatively simple breaking changes outlined below.

🚀 Features

• adds option to mongoose to ensure indexes (#9155) (6bb4067)
• on demand rsc (#8364) (c96fa61)
• db-postgres: deep querying on json and rich text fields (#9102) (b878daf)
• docs: add example for customising the filename of an upload via hooks (#9124) (d839138)
• richtext-lexical: add useAsTitle to the popup links label (#8718) (23907e4)
• richtext-lexical: backport relevant from lexical playground between 0.18.0 and 0.20.0 (#9129) (a30eeaf)
• richtext-lexical: upgrade lexical from 0.18.0 to 0.20.0 (#9126) (7767c94)
• templates: add with-vercel-website (#9144) (def595e)

⚡ Performance

• upgrade pino-pretty. This reduces bundle size and total amount of dependencies from 94 => 85 (#9127) (7261faa)

🐛 Bug Fixes

• allow specifying queue (#9151) (e0309a1)
• incorrectly looking for schema paths when upload is not enabled (#9146) (a3ebf51)
• empty publish dropdown when localization is false (#9106) (3e954f4)
• custom id field not shown depending on field and db types (#9091) (9a970d2)
• update README with new asset, image URL (#9099) (d7fc944)
• cpa: use proper branch tag (#9141) (7cd805a)
• db-mongodb: use dbName for mongodb model (#9107) (09c41d5)
• db-mongodb: destructuring error when trying to filter date fields by string query (#9116) (6899a3c)
• next: disable turbopack serverExternalPackages warnings (#9147) (64967e4)
• next, ui: respect access of user for document locking (#9139) (48d0fae)
• ui: pass correct relationTo to locked documents creation (#9137) (3298113)
• ui: error in filtered relationship field component while scrolling, if the select option label is a number (#9117) (2ad9917)

⚠️ BREAKING CHANGES

• on-demand rsc (#8364) (c96fa61)

1. Add the following to your root layout file, typically located at (app)/(payload)/layout.tsx:
   ```diff
   /* THIS FILE WAS GENERATED AUTOMATICALLY BY PAYLOAD. */
   /* DO NOT MODIFY IT BECAUSE IT COULD BE REWRITTEN AT ANY TIME. */

• • import type { ServerFunctionClient } from 'payload'
    
    import config from '@payload-config'
  • import { RootLayout } from '@payloadcms/next/layouts'
  • import { handleServerFunctions, RootLayout } from '@payloadcms/next/layouts'
    import React from 'react'
    
    import { importMap } from './admin/importMap.js'
    import './custom.scss'
    
    type Args = {
    children: React.ReactNode
    }
    
  • const serverFunction: ServerFunctionClient = async function (args) {
  • 'use server'
  • return handleServerFunctions({
  • ...args,
  • config,
  • importMap,
  • })
  • }
    
    const Layout = ({ children }: Args) => (
    <RootLayout
    config={config}
    importMap={importMap}
  • serverFunction={serverFunction}
    >
    {children}
    </RootLayout>
    )
    
    export default Layout
    ```
    

2. If you were previously posting to the /api/form-state endpoint, it
   no longer exists. Instead, you'll need to invoke the form-state Server
   Function, which can be done through the new getFormState utility:
   
   ```diff

• • import { getFormState } from '@payloadcms/ui'
  • const { state } = await getFormState({
  • apiRoute: '',
  • body: {
  • // ...
  • },
  • serverURL: ''
  • })
    
  • const { getFormState } = useServerFunctions()
  • const { state } = await getFormState({
  • // ...
  • })
    ```
    

3. Multiple layer of React Context were removed in favor of direct props. As a result, the following React hooks were removed:
   ```diff

• • useFieldProps()
  • useTableCell()
    ```
    If you were previously using any of these hooks, for example to access field path or cellData, you can now access that directly from the props object.
    
    ```diff
  • const { path } = useFieldProps();
  • const { path } = props;
    
  • const { cellData } = useTableCell();
  • const { cellData } = props;
    ```
    
    The field prop also no longer contains a _schemaPath property. Instead, this is now also accessed directly through props:
    
    ```diff
  • const { _schemaPath } = props.field
  • const { schemaPath } = props
    ```
    
• db-mongodb: use dbName for mongodb model (#9107) (09c41d5)
  
  If a dbName was previously provided, it will now be used as the
  MongoDB collection name instead of the collection slug.
  autoPluralization will not be applied to dbName.
  
  
• richtext-lexical: upgrade lexical from 0.18.0 to 0.20.0 (#9126) (7767c94)
  
  This upgrades our lexical dependencies from 0.18.0 to 0.20.0. If you
  have lexical dependencies installed in your project, you will have to
  upgrade those.
  
  Additionally, the lexical team may introduce breaking changes in this
  upgrade. If you use lexical APIs directly, please consult their
  changelog for more information:
  https://github.com/facebook/lexical/releases
  
  
  

🤝 Contributors

• Sasha (@r1tsuu)
• James Mikrut (@jmikrut)
• Jarrod Flesch (@JarrodMFlesch)
• Elliot DeNolf (@denolfe)
• Tobias Odendahl (@tak-amboss)
• Nate (@ncaminata)
• Patrik (@PatrikKozak)
• Alessio Gravili (@AlessioGr)
• Germán Jabloñski (@GermanJablo)
• Jacob Fletcher (@jacobsfletch)
• Paul (@paulpopus)
• Jessica Chowdhury (@JessChowdhury)