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
87 lines
2.2 KiB
TypeScript
87 lines
2.2 KiB
TypeScript
import type { ExecSyncOptions } from 'child_process'
|
|
import type execa from 'execa'
|
|
|
|
import chalk from 'chalk'
|
|
import { exec as execOrig, execSync } from 'child_process'
|
|
import fse from 'fs-extra'
|
|
import minimist from 'minimist'
|
|
import { fileURLToPath } from 'node:url'
|
|
import path from 'path'
|
|
import util from 'util'
|
|
|
|
import { getPackageDetails } from './lib/getPackageDetails.js'
|
|
|
|
const execOpts: ExecSyncOptions = { stdio: 'inherit' }
|
|
const execaOpts: execa.Options = { stdio: 'inherit' }
|
|
|
|
const __filename = fileURLToPath(import.meta.url)
|
|
const __dirname = path.dirname(__filename)
|
|
|
|
const exec = util.promisify(execOrig)
|
|
|
|
main().catch((error) => {
|
|
console.error(error)
|
|
process.exit(1)
|
|
})
|
|
|
|
async function main() {
|
|
const all = process.argv.includes('--all')
|
|
process.argv = process.argv.filter((arg) => arg !== '--all')
|
|
|
|
const noBuild = process.argv.includes('--no-build')
|
|
process.argv = process.argv.filter((arg) => arg !== '--no-build')
|
|
|
|
const args = minimist(process.argv.slice(2))
|
|
const { dest } = args
|
|
if (!dest) throw new Error('--dest is required')
|
|
|
|
const resolvedDest = path.resolve(dest)
|
|
|
|
const packageWhitelist = all
|
|
? null
|
|
: [
|
|
'payload',
|
|
'ui',
|
|
'next',
|
|
'db-mongodb',
|
|
'drizzle',
|
|
'db-sqlite',
|
|
'db-postgres',
|
|
'richtext-lexical',
|
|
'translations',
|
|
'plugin-cloud',
|
|
'graphql',
|
|
]
|
|
|
|
const packageDetails = await getPackageDetails(packageWhitelist)
|
|
|
|
// Prebuild all packages
|
|
header(`\n🔨 Prebuilding all packages...`)
|
|
|
|
//await execa('pnpm', ['install'], execaOpts)
|
|
|
|
const filtered = packageDetails.filter((p): p is Exclude<typeof p, null> => p !== null)
|
|
|
|
header(`\nOutputting ${filtered.length} packages...
|
|
|
|
${chalk.white.bold(filtered.map((p) => p.name).join('\n'))}
|
|
`)
|
|
if (!noBuild) {
|
|
execSync('pnpm build:all --output-logs=errors-only', { stdio: 'inherit' })
|
|
}
|
|
|
|
header(`\n 📦 Packing all packages to ${dest}...`)
|
|
|
|
await Promise.all(
|
|
filtered.map(async (p) => {
|
|
await exec(`pnpm pack -C ${p.packagePath} --pack-destination ${resolvedDest}`)
|
|
}),
|
|
)
|
|
|
|
header(`\n🎉 Done!`)
|
|
}
|
|
|
|
function header(message: string, opts?: { enable?: boolean }) {
|
|
console.log(chalk.bold.green(`${message}\n`))
|
|
}
|