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

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

scripts/lib/getPackageDetails.ts

@@ -35,7 +35,9 @@ export const getPackageDetails = async (packages: string[]): Promise<PackageDeta
       const isPublic = packageJson.private !== true
       if (!isPublic) return null
 
-      const isInWhitelist = packages.includes(path.basename(path.dirname(packageJsonPath)))
+      const isInWhitelist = packages
+        ? packages.includes(path.basename(path.dirname(packageJsonPath)))
+        : true
       if (!isInWhitelist) return null
 
       return {

scripts/pack-all-to-dest.ts

@@ -25,25 +25,33 @@ main().catch((error) => {
 })
 
 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 = [
-    'payload',
-    'ui',
-    'next',
-    'db-mongodb',
-    'drizzle',
-    'db-sqlite',
-    'db-postgres',
-    'richtext-lexical',
-    'translations',
-    'plugin-cloud',
-    'graphql',
-  ]
+  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)
 
@@ -58,8 +66,9 @@ async function main() {
 
 ${chalk.white.bold(filtered.map((p) => p.name).join('\n'))}
 `)
-
-  execSync('pnpm build:all --output-logs=errors-only', { stdio: 'inherit' })
+  if (!noBuild) {
+    execSync('pnpm build:all --output-logs=errors-only', { stdio: 'inherit' })
+  }
 
   header(`\n 📦 Packing all packages to ${dest}...`)