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
32 lines
665 B
JavaScript
32 lines
665 B
JavaScript
import { rootEslintConfig, rootParserOptions } from '../../eslint.config.js'
|
|
import reactCompiler from 'eslint-plugin-react-compiler'
|
|
const { rules } = reactCompiler
|
|
/** @typedef {import('eslint').Linter.FlatConfig} */
|
|
let FlatConfig
|
|
|
|
/** @type {FlatConfig[]} */
|
|
export const index = [
|
|
...rootEslintConfig,
|
|
{
|
|
languageOptions: {
|
|
parserOptions: {
|
|
project: './tsconfig.json',
|
|
tsconfigDirName: import.meta.dirname,
|
|
...rootParserOptions,
|
|
},
|
|
},
|
|
},
|
|
{
|
|
plugins: {
|
|
'react-compiler': {
|
|
rules,
|
|
},
|
|
},
|
|
rules: {
|
|
'react-compiler/react-compiler': 'error',
|
|
},
|
|
},
|
|
]
|
|
|
|
export default index
|