tabshift/payload
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: pre-compile ui and richtext-lexical with react compiler (#7688)

Browse Source 
This noticeably improves performance in the admin panel, for example
when there are multiple richtext editors on one page (& likely
performance in other areas too, though I mainly tested rich text).

The babel plugin currently only optimizes files with a 'use client'
directive at the top - thus we have to make sure to add use client
wherever possible, even if it's imported by a parent client component.

There's one single component that broke when it was compiled using the
React compiler (it stopped being reactive and failed one of our admin
e2e tests):
150808f608
opting out of it completely fixed that issue

Fixes https://github.com/payloadcms/payload/issues/7366
This commit is contained in:
Alessio Gravili
2024-08-19 17:31:36 -04:00
committed by GitHub
parent adf2f31178
commit ebd43c7763
182 changed files with 897 additions and 587 deletions
Download Patch File Download Diff File Expand all files Collapse all files

91
test/setupProd.ts Normal file
View File

@@ -0,0 +1,91 @@
import fs from 'fs'
import path from 'node:path'
import { fileURLToPath } from 'node:url'
const filename = fileURLToPath(import.meta.url)
const dirname = path.dirname(filename)
export const tgzToPkgNameMap = {
payload: 'payload-*',
'@payloadcms/db-mongodb': 'payloadcms-db-mongodb-*',
'@payloadcms/db-postgres': 'payloadcms-db-postgres-*',
'@payloadcms/db-sqlite': 'payloadcms-db-sqlite-*',
'@payloadcms/drizzle': 'payloadcms-drizzle-*',
'@payloadcms/email-nodemailer': 'payloadcms-email-nodemailer-*',
'@payloadcms/email-resend': 'payloadcms-email-resend-*',
'@payloadcms/eslint-config': 'payloadcms-eslint-config-*',
'@payloadcms/eslint-plugin': 'payloadcms-eslint-plugin-*',
'@payloadcms/graphql': 'payloadcms-graphql-*',
'@payloadcms/live-preview': 'payloadcms-live-preview-*',
'@payloadcms/live-preview-react': 'payloadcms-live-preview-react-*',
'@payloadcms/next': 'payloadcms-next-*',
'@payloadcms/plugin-cloud': 'payloadcms-plugin-cloud-*',
'@payloadcms/plugin-cloud-storage': 'payloadcms-plugin-cloud-storage-*',
'@payloadcms/plugin-form-builder': 'payloadcms-plugin-form-builder-*',
'@payloadcms/plugin-nested-docs': 'payloadcms-plugin-nested-docs-*',
'@payloadcms/plugin-redirects': 'payloadcms-plugin-redirects-*',
'@payloadcms/plugin-relationship-object-ids': 'payloadcms-plugin-relationship-object-ids-*',
'@payloadcms/plugin-search': 'payloadcms-plugin-search-*',
'@payloadcms/plugin-sentry': 'payloadcms-plugin-sentry-*',
'@payloadcms/plugin-seo': 'payloadcms-plugin-seo-*',
'@payloadcms/plugin-stripe': 'payloadcms-plugin-stripe-*',
'@payloadcms/richtext-lexical': 'payloadcms-richtext-lexical-*',
'@payloadcms/richtext-slate': 'payloadcms-richtext-slate-*',
'@payloadcms/storage-azure': 'payloadcms-storage-azure-*',
'@payloadcms/storage-gcs': 'payloadcms-storage-gcs-*',
'@payloadcms/storage-s3': 'payloadcms-storage-s3-*',
'@payloadcms/storage-uploadthing': 'payloadcms-storage-uploadthing-*',
'@payloadcms/storage-vercel-blob': 'payloadcms-storage-vercel-blob-*',
'@payloadcms/translations': 'payloadcms-translations-*',
'@payloadcms/ui': 'payloadcms-ui-*',
'create-payload-app': 'create-payload-app-*',
}
function findActualTgzName(pattern: string) {
const packedDir = path.resolve(dirname, 'packed')
const files = fs.readdirSync(packedDir)
const matchingFile = files.find((file) => file.startsWith(pattern.replace('*', '')))
return matchingFile ? `file:packed/${matchingFile}` : null
}
/**
* This does the following:
* - installs all packages from test/packed to test/package.json
*/
export function setupProd() {
const packageJsonString = fs.readFileSync(path.resolve(dirname, 'package.json'), 'utf8')
const packageJson = JSON.parse(packageJsonString)
const allDependencies = {}
// Go through all the dependencies and devDependencies, replace the normal package entry with the tgz entry
for (const key of ['dependencies', 'devDependencies']) {
const dependencies = packageJson[key]
if (dependencies) {
for (const [packageName, _packageVersion] of Object.entries(dependencies)) {
if (tgzToPkgNameMap[packageName]) {
const actualTgzPath = findActualTgzName(tgzToPkgNameMap[packageName])
if (actualTgzPath) {
dependencies[packageName] = actualTgzPath
allDependencies[packageName] = actualTgzPath
} else {
console.warn(`Warning: No matching tgz found for ${packageName}`)
}
}
}
}
}
// now add them all to overrides and pnpm.overrides as well
packageJson.pnpm = packageJson.pnpm || {}
packageJson.pnpm.overrides = packageJson.pnpm.overrides || {}
packageJson.overrides = packageJson.overrides || {}
for (const [packageName, packageVersion] of Object.entries(allDependencies)) {
packageJson.pnpm.overrides[packageName] = packageVersion
packageJson.overrides[packageName] = packageVersion
}
// write it out
fs.writeFileSync(path.resolve(dirname, 'package.json'), JSON.stringify(packageJson, null, 2))
}
setupProd()