4c8cafd6a6
If you have multiple blocks that are used in multiple places, this can quickly blow up the size of your Payload Config. This will incur a performance hit, as more data is
1. sent to the client (=> bloated `ClientConfig` and large initial html) and
2. processed on the server (permissions are calculated every single time you navigate to a page - this iterates through all blocks you have defined, even if they're duplicative)
This can be optimized by defining your block **once** in your Payload Config, and just referencing the block slug whenever it's used, instead of passing the entire block config. To do this, the block can be defined in the `blocks` array of the Payload Config. The slug can then be passed to the `blockReferences` array in the Blocks Field - the `blocks` array has to be empty for compatibility reasons.
```ts
import { buildConfig } from 'payload'
import { lexicalEditor, BlocksFeature } from '@payloadcms/richtext-lexical'
// Payload Config
const config = buildConfig({
// Define the block once
blocks: [
{
slug: 'TextBlock',
fields: [
{
name: 'text',
type: 'text',
},
],
},
],
collections: [
{
slug: 'collection1',
fields: [
{
name: 'content',
type: 'blocks',
// Reference the block by slug
blockReferences: ['TextBlock'],
blocks: [], // Required to be empty, for compatibility reasons
},
],
},
{
slug: 'collection2',
fields: [
{
name: 'editor',
type: 'richText',
editor: lexicalEditor({
BlocksFeature({
// Same reference can be reused anywhere, even in the lexical editor, without incurred performance hit
blocks: ['TextBlock'],
})
})
},
],
},
],
})
```
## v4.0 Plans
In 4.0, we will remove the `blockReferences` property, and allow string block references to be passed directly to the blocks `property`. Essentially, we'd remove the `blocks` property and rename `blockReferences` to `blocks`.
The reason we opted to a new property in this PR is to avoid breaking changes. Allowing strings to be passed to the `blocks` property will prevent plugins that iterate through fields / blocks from compiling.
## PR Changes
- Testing: This PR introduces a plugin that automatically converts blocks to block references. This is done in the fields__blocks test suite, to run our existing test suite using block references.
- Block References support: Most changes are similar. Everywhere we iterate through blocks, we have to now do the following:
1. Check if `field.blockReferences` is provided. If so, only iterate through that.
2. Check if the block is an object (= actual block), or string
3. If it's a string, pull the actual block from the Payload Config or from `payload.blocks`.
The exception is config sanitization and block type generations. This PR optimizes them so that each block is only handled once, instead of every time the block is referenced.
## Benchmarks
60 Block fields, each block field having the same 600 Blocks.
### Before:
**Initial HTML:** 195 kB
**Generated types:** takes 11 minutes, 461,209 lines
https://github.com/user-attachments/assets/11d49a4e-5414-4579-8050-e6346e552f56
### After:
**Initial HTML:** 73.6 kB
**Generated types:** takes 2 seconds, 35,810 lines
https://github.com/user-attachments/assets/3eab1a99-6c29-489d-add5-698df67780a3
### After Permissions Optimization (follow-up PR)
Initial HTML: 73.6 kB
https://github.com/user-attachments/assets/a909202e-45a8-4bf6-9a38-8c85813f1312
## Future Plans
1. This PR does not yet deduplicate block references during permissions calculation. We'll optimize that in a separate PR, as this one is already large enough
2. The same optimization can be done to deduplicate fields. One common use-case would be link field groups that may be referenced in multiple entities, outside of blocks. We might explore adding a new `fieldReferences` property, that allows you to reference those same `config.blocks`.
234 lines
6.7 KiB
TypeScript
234 lines
6.7 KiB
TypeScript
import type { Field, FlattenedBlock, PayloadRequest, PopulateType } from 'payload'
|
|
|
|
import { fieldAffectsData, fieldHasSubFields, fieldIsArrayType, tabHasName } from 'payload/shared'
|
|
|
|
import { populate } from './populate.js'
|
|
import { recurseRichText } from './richTextRelationshipPromise.js'
|
|
|
|
type NestedRichTextFieldsArgs = {
|
|
currentDepth?: number
|
|
data: unknown
|
|
depth: number
|
|
draft: boolean
|
|
fields: Field[]
|
|
overrideAccess: boolean
|
|
populateArg?: PopulateType
|
|
populationPromises: Promise<void>[]
|
|
req: PayloadRequest
|
|
showHiddenFields: boolean
|
|
}
|
|
|
|
export const recurseNestedFields = ({
|
|
currentDepth = 0,
|
|
data,
|
|
depth,
|
|
draft,
|
|
fields,
|
|
overrideAccess = false,
|
|
populateArg,
|
|
populationPromises,
|
|
req,
|
|
showHiddenFields,
|
|
}: NestedRichTextFieldsArgs): void => {
|
|
fields.forEach((field) => {
|
|
if (field.type === 'relationship' || field.type === 'upload') {
|
|
if (field.type === 'relationship') {
|
|
if (field.hasMany && Array.isArray(data[field.name])) {
|
|
if (Array.isArray(field.relationTo)) {
|
|
data[field.name].forEach(({ relationTo, value }, i) => {
|
|
const collection = req.payload.collections[relationTo]
|
|
if (collection) {
|
|
populationPromises.push(
|
|
populate({
|
|
id: value,
|
|
collection,
|
|
currentDepth,
|
|
data: data[field.name],
|
|
depth,
|
|
draft,
|
|
field,
|
|
key: i,
|
|
overrideAccess,
|
|
req,
|
|
select:
|
|
populateArg?.[collection.config.slug] ?? collection.config.defaultPopulate,
|
|
showHiddenFields,
|
|
}),
|
|
)
|
|
}
|
|
})
|
|
} else {
|
|
data[field.name].forEach((id, i) => {
|
|
const collection = req.payload.collections[field.relationTo as string]
|
|
if (collection) {
|
|
populationPromises.push(
|
|
populate({
|
|
id,
|
|
collection,
|
|
currentDepth,
|
|
data: data[field.name],
|
|
depth,
|
|
draft,
|
|
field,
|
|
key: i,
|
|
overrideAccess,
|
|
req,
|
|
select:
|
|
populateArg?.[collection.config.slug] ?? collection.config.defaultPopulate,
|
|
showHiddenFields,
|
|
}),
|
|
)
|
|
}
|
|
})
|
|
}
|
|
} else if (
|
|
Array.isArray(field.relationTo) &&
|
|
data[field.name]?.value &&
|
|
data[field.name]?.relationTo
|
|
) {
|
|
if (!('hasMany' in field) || !field.hasMany) {
|
|
const collection = req.payload.collections[data[field.name].relationTo]
|
|
populationPromises.push(
|
|
populate({
|
|
id: data[field.name].value,
|
|
collection,
|
|
currentDepth,
|
|
data: data[field.name],
|
|
depth,
|
|
draft,
|
|
field,
|
|
key: 'value',
|
|
overrideAccess,
|
|
req,
|
|
select: populateArg?.[collection.config.slug] ?? collection.config.defaultPopulate,
|
|
showHiddenFields,
|
|
}),
|
|
)
|
|
}
|
|
}
|
|
}
|
|
if (typeof data[field.name] !== 'undefined' && typeof field.relationTo === 'string') {
|
|
const collection = req.payload.collections[field.relationTo]
|
|
populationPromises.push(
|
|
populate({
|
|
id: data[field.name],
|
|
collection,
|
|
currentDepth,
|
|
data,
|
|
depth,
|
|
draft,
|
|
field,
|
|
key: field.name,
|
|
overrideAccess,
|
|
req,
|
|
select: populateArg?.[collection.config.slug] ?? collection.config.defaultPopulate,
|
|
showHiddenFields,
|
|
}),
|
|
)
|
|
}
|
|
} else if (fieldHasSubFields(field) && !fieldIsArrayType(field)) {
|
|
if (fieldAffectsData(field) && typeof data[field.name] === 'object') {
|
|
recurseNestedFields({
|
|
currentDepth,
|
|
data: data[field.name],
|
|
depth,
|
|
draft,
|
|
fields: field.fields,
|
|
overrideAccess,
|
|
populateArg,
|
|
populationPromises,
|
|
req,
|
|
showHiddenFields,
|
|
})
|
|
} else {
|
|
recurseNestedFields({
|
|
currentDepth,
|
|
data,
|
|
depth,
|
|
draft,
|
|
fields: field.fields,
|
|
overrideAccess,
|
|
populateArg,
|
|
populationPromises,
|
|
req,
|
|
showHiddenFields,
|
|
})
|
|
}
|
|
} else if (field.type === 'tabs') {
|
|
field.tabs.forEach((tab) => {
|
|
recurseNestedFields({
|
|
currentDepth,
|
|
data: tabHasName(tab) ? data[tab.name] : data,
|
|
depth,
|
|
draft,
|
|
fields: tab.fields,
|
|
overrideAccess,
|
|
populateArg,
|
|
populationPromises,
|
|
req,
|
|
showHiddenFields,
|
|
})
|
|
})
|
|
} else if (Array.isArray(data[field.name])) {
|
|
if (field.type === 'blocks') {
|
|
data[field.name].forEach((row, i) => {
|
|
const block =
|
|
req.payload.blocks[row?.blockType] ??
|
|
((field.blockReferences ?? field.blocks).find(
|
|
(block) => typeof block !== 'string' && block.slug === row?.blockType,
|
|
) as FlattenedBlock | undefined)
|
|
if (block) {
|
|
recurseNestedFields({
|
|
currentDepth,
|
|
data: data[field.name][i],
|
|
depth,
|
|
draft,
|
|
fields: block.fields,
|
|
overrideAccess,
|
|
populateArg,
|
|
populationPromises,
|
|
req,
|
|
showHiddenFields,
|
|
})
|
|
}
|
|
})
|
|
}
|
|
|
|
if (field.type === 'array') {
|
|
data[field.name].forEach((_, i) => {
|
|
recurseNestedFields({
|
|
currentDepth,
|
|
data: data[field.name][i],
|
|
depth,
|
|
draft,
|
|
fields: field.fields,
|
|
overrideAccess,
|
|
populateArg,
|
|
populationPromises,
|
|
req,
|
|
showHiddenFields,
|
|
})
|
|
})
|
|
}
|
|
}
|
|
|
|
if (field.type === 'richText' && Array.isArray(data[field.name])) {
|
|
data[field.name].forEach((node) => {
|
|
if (Array.isArray(node.children)) {
|
|
recurseRichText({
|
|
children: node.children,
|
|
currentDepth,
|
|
depth,
|
|
draft,
|
|
field,
|
|
overrideAccess,
|
|
populationPromises,
|
|
req,
|
|
showHiddenFields,
|
|
})
|
|
}
|
|
})
|
|
}
|
|
})
|
|
}
|