mirror of
https://github.com/reactjs/react.dev.git
synced 2026-02-21 19:31:57 +00:00
b6a32d1e0e
In https://github.com/facebook/react/pull/34462 for example, we found an issue where the compiler was incorrectly validating an example straight from the docs. In order to find more issues like this + also provide more feedback to doc authors on valid/invalid patterns, this PR adds a new local eslint rule which validates all markdown codeblocks containing components/hooks with React Compiler. An autofixer is also provided. To express that a codeblock has an expected error, we can use the following metadata: ```ts // pseudo type def type MarkdownCodeBlockMetadata = { expectedErrors?: { 'react-compiler'?: number[]; }; }; ``` and can be used like so: ```` ```js {expectedErrors: {'react-compiler': [4]}} // ❌ setState directly in render function Component({value}) { const [count, setCount] = useState(0); setCount(value); // error on L4 return <div>{count}</div>; } ``` ```` Because this is defined as a local rule, we don't have the same granular reporting that `eslint-plugin-react-hooks` yet. I can look into that later but for now this first PR just sets us up with something basic.
123 lines
3.0 KiB
JavaScript
123 lines
3.0 KiB
JavaScript
/**
|
|
* Copyright (c) Meta Platforms, Inc. and affiliates.
|
|
*
|
|
* This source code is licensed under the MIT license found in the
|
|
* LICENSE file in the root directory of this source tree.
|
|
*/
|
|
|
|
const {transformFromAstSync} = require('@babel/core');
|
|
const {parse: babelParse} = require('@babel/parser');
|
|
const BabelPluginReactCompiler = require('babel-plugin-react-compiler').default;
|
|
const {
|
|
parsePluginOptions,
|
|
validateEnvironmentConfig,
|
|
} = require('babel-plugin-react-compiler');
|
|
|
|
const COMPILER_OPTIONS = {
|
|
noEmit: true,
|
|
panicThreshold: 'none',
|
|
environment: validateEnvironmentConfig({
|
|
validateRefAccessDuringRender: true,
|
|
validateNoSetStateInRender: true,
|
|
validateNoSetStateInEffects: true,
|
|
validateNoJSXInTryStatements: true,
|
|
validateNoImpureFunctionsInRender: true,
|
|
validateStaticComponents: true,
|
|
validateNoFreezingKnownMutableFunctions: true,
|
|
validateNoVoidUseMemo: true,
|
|
validateNoCapitalizedCalls: [],
|
|
validateHooksUsage: true,
|
|
validateNoDerivedComputationsInEffects: true,
|
|
}),
|
|
};
|
|
|
|
function hasRelevantCode(code) {
|
|
const functionPattern = /^(export\s+)?(default\s+)?function\s+\w+/m;
|
|
const arrowPattern =
|
|
/^(export\s+)?(const|let|var)\s+\w+\s*=\s*(\([^)]*\)|\w+)\s*=>/m;
|
|
const hasImports = /^import\s+/m.test(code);
|
|
|
|
return functionPattern.test(code) || arrowPattern.test(code) || hasImports;
|
|
}
|
|
|
|
function runReactCompiler(code, filename) {
|
|
const result = {
|
|
sourceCode: code,
|
|
events: [],
|
|
};
|
|
|
|
if (!hasRelevantCode(code)) {
|
|
return {...result, diagnostics: []};
|
|
}
|
|
|
|
const options = parsePluginOptions({
|
|
...COMPILER_OPTIONS,
|
|
});
|
|
|
|
options.logger = {
|
|
logEvent: (_, event) => {
|
|
if (event.kind === 'CompileError') {
|
|
const category = event.detail?.category;
|
|
if (category === 'Todo' || category === 'Invariant') {
|
|
return;
|
|
}
|
|
result.events.push(event);
|
|
}
|
|
},
|
|
};
|
|
|
|
try {
|
|
const ast = babelParse(code, {
|
|
sourceFilename: filename,
|
|
sourceType: 'module',
|
|
plugins: ['jsx', 'typescript'],
|
|
});
|
|
|
|
transformFromAstSync(ast, code, {
|
|
filename,
|
|
highlightCode: false,
|
|
retainLines: true,
|
|
plugins: [[BabelPluginReactCompiler, options]],
|
|
sourceType: 'module',
|
|
configFile: false,
|
|
babelrc: false,
|
|
});
|
|
} catch (error) {
|
|
return {...result, diagnostics: []};
|
|
}
|
|
|
|
const diagnostics = [];
|
|
|
|
for (const event of result.events) {
|
|
if (event.kind !== 'CompileError') {
|
|
continue;
|
|
}
|
|
|
|
const detail = event.detail;
|
|
if (!detail) {
|
|
continue;
|
|
}
|
|
|
|
const loc = typeof detail.primaryLocation === 'function'
|
|
? detail.primaryLocation()
|
|
: null;
|
|
|
|
if (loc == null || typeof loc === 'symbol') {
|
|
continue;
|
|
}
|
|
|
|
const message = typeof detail.printErrorMessage === 'function'
|
|
? detail.printErrorMessage(result.sourceCode, {eslint: true})
|
|
: detail.description || 'Unknown React Compiler error';
|
|
|
|
diagnostics.push({detail, loc, message});
|
|
}
|
|
|
|
return {...result, diagnostics};
|
|
}
|
|
|
|
module.exports = {
|
|
hasRelevantCode,
|
|
runReactCompiler,
|
|
};
|