mirror of
https://github.com/zebrajr/react.git
synced 2025-12-06 00:20:04 +01:00
7d29ecbeb2
NOTE: this is a merged version of @mofeiZ's original PR along with my edits per offline discussion. The description is updated to reflect the latest approach. The key problem we're trying to solve with this PR is to allow developers more control over the compiler's various validations. The idea is to have a number of rules targeting a specific category of issues, such as enforcing immutability of props/state/etc or disallowing access to refs during render. We don't want to have to run the compiler again for every single rule, though, so @mofeiZ added an LRU cache that caches the full compilation output of N most recent files. The first rule to run on a given file will cause it to get cached, and then subsequent rules can pull from the cache, with each rule filtering down to its specific category of errors. For the categories, I went through and assigned a category roughly 1:1 to existing validations, and then used my judgement on some places that felt distinct enough to warrant a separate error. Every error in the compiler now has to supply both a severity (for legacy reasons) and a category (for ESLint). Each category corresponds 1:1 to a ESLint rule definition, so that the set of rules is automatically populated based on the defined categories. Categories include a flag for whether they should be in the recommended set or not. Note that as with the original version of this PR, only eslint-plugin-react-compiler is changed. We still have to update the main lint rule. ## Test Plan * Created a sample project using ESLint v9 and verified that the plugin can be configured correctly and detects errors * Edited `fixtures/eslint-v9` and introduced errors, verified that the w latest config changes in that fixture it correctly detects the errors * In the sample project, confirmed that the LRU caching is correctly caching compiler output, ie compiling files just once. Co-authored-by: Mofei Zhang <feifei0@meta.com>
101 lines
2.4 KiB
TypeScript
101 lines
2.4 KiB
TypeScript
/**
|
|
* 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.
|
|
*/
|
|
|
|
import {
|
|
ErrorCategory,
|
|
getRuleForCategory,
|
|
} from 'babel-plugin-react-compiler/src/CompilerError';
|
|
import {normalizeIndent, makeTestCaseError, testRule} from './shared-utils';
|
|
import {allRules} from '../src/rules/ReactCompilerRule';
|
|
|
|
testRule(
|
|
'rules-of-hooks',
|
|
allRules[getRuleForCategory(ErrorCategory.Hooks).name],
|
|
{
|
|
valid: [
|
|
{
|
|
name: 'Basic example',
|
|
code: normalizeIndent`
|
|
function Component() {
|
|
useHook();
|
|
return <div>Hello world</div>;
|
|
}
|
|
`,
|
|
},
|
|
{
|
|
name: 'Violation with Flow suppression',
|
|
code: `
|
|
// Valid since error already suppressed with flow.
|
|
function useHook() {
|
|
if (cond) {
|
|
// $FlowFixMe[react-rule-hook]
|
|
useConditionalHook();
|
|
}
|
|
}
|
|
`,
|
|
},
|
|
{
|
|
// OK because invariants are only meant for the compiler team's consumption
|
|
name: '[Invariant] Defined after use',
|
|
code: normalizeIndent`
|
|
function Component(props) {
|
|
let y = function () {
|
|
m(x);
|
|
};
|
|
|
|
let x = { a };
|
|
m(x);
|
|
return y;
|
|
}
|
|
`,
|
|
},
|
|
{
|
|
name: "Classes don't throw",
|
|
code: normalizeIndent`
|
|
class Foo {
|
|
#bar() {}
|
|
}
|
|
`,
|
|
},
|
|
],
|
|
invalid: [
|
|
{
|
|
name: 'Simple violation',
|
|
code: normalizeIndent`
|
|
function useConditional() {
|
|
if (cond) {
|
|
useConditionalHook();
|
|
}
|
|
}
|
|
`,
|
|
errors: [
|
|
makeTestCaseError(
|
|
'Hooks must always be called in a consistent order',
|
|
),
|
|
],
|
|
},
|
|
{
|
|
name: 'Multiple diagnostics within the same function are surfaced',
|
|
code: normalizeIndent`
|
|
function useConditional() {
|
|
cond ?? useConditionalHook();
|
|
props.cond && useConditionalHook();
|
|
return <div>Hello world</div>;
|
|
}`,
|
|
errors: [
|
|
makeTestCaseError(
|
|
'Hooks must always be called in a consistent order',
|
|
),
|
|
makeTestCaseError(
|
|
'Hooks must always be called in a consistent order',
|
|
),
|
|
],
|
|
},
|
|
],
|
|
},
|
|
);
|