95bdffd11f7ba050feeeeb482dd01e22c4d13b47
3 Commits
| Author | SHA1 | Message | Date | |
|---|---|---|---|---|
Jacob Fletcher
|
c96fa613bc |
feat!: on demand rsc (#8364)
Currently, Payload renders all custom components on initial compile of the admin panel. This is problematic for two key reasons: 1. Custom components do not receive contextual data, i.e. fields do not receive their field data, edit views do not receive their document data, etc. 2. Components are unnecessarily rendered before they are used This was initially required to support React Server Components within the Payload Admin Panel for two key reasons: 1. Fields can be dynamically rendered within arrays, blocks, etc. 2. Documents can be recursively rendered within a "drawer" UI, i.e. relationship fields 3. Payload supports server/client component composition In order to achieve this, components need to be rendered on the server and passed as "slots" to the client. Currently, the pattern for this is to render custom server components in the "client config". Then when a view or field is needed to be rendered, we first check the client config for a "pre-rendered" component, otherwise render our client-side fallback component. But for the reasons listed above, this pattern doesn't exactly make custom server components very useful within the Payload Admin Panel, which is where this PR comes in. Now, instead of pre-rendering all components on initial compile, we're able to render custom components _on demand_, only as they are needed. To achieve this, we've established [this pattern](https://github.com/payloadcms/payload/pull/8481) of React Server Functions in the Payload Admin Panel. With Server Functions, we can iterate the Payload Config and return JSX through React's `text/x-component` content-type. This means we're able to pass contextual props to custom components, such as data for fields and views. ## Breaking Changes 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 } from '@payloadcms/next/utilities' import React from 'react' import { importMap } from './admin/importMap.js' import './custom.scss' type Args = { children: React.ReactNode } + const serverFunctions: ServerFunctionClient = async function (args) { + 'use server' + return handleServerFunctions({ + ...args, + config, + importMap, + }) + } const Layout = ({ children }: Args) => ( <RootLayout config={config} importMap={importMap} + serverFunctions={serverFunctions} > {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({ + // ... + }) ``` ## Breaking Changes ```diff - useFieldProps() - useCellProps() ``` More details coming soon. --------- Co-authored-by: Alessio Gravili <alessio@gravili.de> Co-authored-by: Jarrod Flesch <jarrodmflesch@gmail.com> Co-authored-by: James <james@trbl.design> |
||
|
Sasha
|
9f66114577 |
chore: jest reporter log failed tests count (#8810)
for example 3 tests passed but 1 failed, shows: > 1 FAILED instead of > 4 FAILED example of the previous behaviour   |
||
|
Alessio Gravili
|
c731940239 |
chore: use custom jest reporter to achieve sane jest logs (#8607)
The default jest log reporter is garbage. Webstorm replaces it with
their own (which is pretty good), but vscode unfortunately uses the
default one.
This PR does the following to the jest reporter
**1. Replace the default reporter with the jest-ci-spec-reporter
reporter.**
The default reporter is hiding console logs and incorrectly rewriting
console history. Now, logs like these:
```
[20:56:16] INFO: ---- DROPPING DATABASE ----
[20:56:17] INFO: ---- DROPPED DATABASE ----
```
will be visible again. The default reporter was showing them for half a
second, then rewrites log history and hides them.
**2. add custom logger to showcase hidden error messages**
Some error messages are hidden and are only displayed at the end of the
test, in a very ugly way. If the test hangs, you might have to wait a
long time to see those errors. This PR makes sure that errors are logged
when they were intended to be logged.
They will not be printed in a pretty way (Webstorm for example prints
them in red and clickable, like a proper error message) - but at least
they will be printed instead of leaving you in the dark
**Override console global in jest setup to hide console log spam**
This turns logs like
```
console.log
initPayloadInt done
at log (helpers/initPayloadInt.ts:27:11)
```
into
`initPayloadInt done`
## CI
Yes, CI logs are actually usable now. We no longer have random console
logs floating around! It was horrible!
Finally, you can actually see which console logs belong to which test.
Before:
https://github.com/payloadcms/payload/actions/runs/11241674859/job/31253918825
After:
https://github.com/payloadcms/payload/actions/runs/11242035327/job/31255031760?pr=8607
**BEFORE**
What test triggered this "ValidationError: The following field is
invalid: filteredRelation" error? Who knows!! Could have been any test.
We will never know...
**AFTER:**
Finally, clarity
## Screenshots - Passing database test suite
## Passing database test suite
### Before
### After
## Screenshots - Failing test
### Before - that's where it hangs
### After - that's where it hangs
Actually shows me the error without having to wait 3 minutes for test to
timeout:
### Before - after waiting for 3 minutes for test to timeout:
(1000 lines of same error spam...)
### After - after waiting for 3 minutes for test to timeout:
(Error spam)
|