ebd43c7763
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
37 lines
1.1 KiB
JavaScript
37 lines
1.1 KiB
JavaScript
const fs = require('fs')
|
|
|
|
// Plugin options can be found here: https://github.com/facebook/react/blob/main/compiler/packages/babel-plugin-react-compiler/src/Entrypoint/Options.ts#L38
|
|
const ReactCompilerConfig = {
|
|
sources: (filename) => {
|
|
const isInNodeModules = filename.includes('node_modules')
|
|
if (isInNodeModules || ( !filename.endsWith('.tsx') && !filename.endsWith('.jsx') && !filename.endsWith('.js'))) {
|
|
return false
|
|
}
|
|
|
|
// Only compile files with 'use client' directives. We do not want to
|
|
// accidentally compile React Server Components
|
|
const file = fs.readFileSync(filename, 'utf8')
|
|
if (file.includes("'use client'")) {
|
|
return true
|
|
}
|
|
console.log('React compiler - skipping file: ' + filename)
|
|
return false
|
|
},
|
|
}
|
|
|
|
module.exports = function (api) {
|
|
api.cache(false)
|
|
|
|
return {
|
|
plugins: [
|
|
['babel-plugin-react-compiler', ReactCompilerConfig], // must run first!
|
|
/* [
|
|
'babel-plugin-transform-remove-imports',
|
|
{
|
|
test: '\\.(scss|css)$',
|
|
},
|
|
],*/
|
|
],
|
|
}
|
|
}
|