Skip to content

Commit 758301f

Browse files
josephsavonajosephsavona
committed
[compiler][rfc] Switch eslint-plugin-react-compiler to single rule for Meta compat
Now that the official way to use React Compiler's linting is via `eslint-plugin-react-hooks` v7, eslint-plugin-react-compiler isn't strictly necessary anymore. However, at Meta our linting setup makes it a bit tedious to use the current eprh setup with lots of rules. Here I'm experimenting with making eslint-plugin-react-compiler just report all issues under one rule, to make it a bit easier to sync internally. Unclear if we even need to land this or just use it to help figure out the migration.
1 parent 48b52d8 commit 758301f

File tree

10 files changed

+140
-280
lines changed

10 files changed

+140
-280
lines changed

‎compiler/packages/eslint-plugin-react-compiler/__tests__/ImpureFunctionCallsRule-test.ts‎

Lines changed: 15 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -5,35 +5,27 @@
55
* LICENSE file in the root directory of this source tree.
66
*/
77

8-
import {
9-
ErrorCategory,
10-
getRuleForCategory,
11-
} from 'babel-plugin-react-compiler/src/CompilerError';
128
import {normalizeIndent, testRule, makeTestCaseError} from './shared-utils';
13-
import {allRules} from '../src/rules/ReactCompilerRule';
9+
import ReactCompilerRule from '../src/rules/ReactCompilerRule';
1410

15-
testRule(
16-
'no impure function calls rule',
17-
allRules[getRuleForCategory(ErrorCategory.Purity).name].rule,
18-
{
19-
valid: [],
20-
invalid: [
21-
{
22-
name: 'Known impure function calls are caught',
23-
code: normalizeIndent`
11+
testRule('no impure function calls rule', ReactCompilerRule, {
12+
valid: [],
13+
invalid: [
14+
{
15+
name: 'Known impure function calls are caught',
16+
code: normalizeIndent`
2417
function Component() {
2518
const date = Date.now();
2619
const now = performance.now();
2720
const rand = Math.random();
2821
return <Foo date={date} now={now} rand={rand} />;
2922
}
3023
`,
31-
errors: [
32-
makeTestCaseError('Cannot call impure function during render'),
33-
makeTestCaseError('Cannot call impure function during render'),
34-
makeTestCaseError('Cannot call impure function during render'),
35-
],
36-
},
37-
],
38-
},
39-
);
24+
errors: [
25+
makeTestCaseError('Cannot call impure function during render'),
26+
makeTestCaseError('Cannot call impure function during render'),
27+
makeTestCaseError('Cannot call impure function during render'),
28+
],
29+
},
30+
],
31+
});

‎compiler/packages/eslint-plugin-react-compiler/__tests__/InvalidHooksRule-test.ts‎

Lines changed: 39 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -5,30 +5,23 @@
55
* LICENSE file in the root directory of this source tree.
66
*/
77

8-
import {
9-
ErrorCategory,
10-
getRuleForCategory,
11-
} from 'babel-plugin-react-compiler/src/CompilerError';
128
import {normalizeIndent, makeTestCaseError, testRule} from './shared-utils';
13-
import {allRules} from '../src/rules/ReactCompilerRule';
9+
import {AllRules} from '../src/rules/ReactCompilerRule';
1410

15-
testRule(
16-
'rules-of-hooks',
17-
allRules[getRuleForCategory(ErrorCategory.Hooks).name].rule,
18-
{
19-
valid: [
20-
{
21-
name: 'Basic example',
22-
code: normalizeIndent`
11+
testRule('rules-of-hooks', AllRules, {
12+
valid: [
13+
{
14+
name: 'Basic example',
15+
code: normalizeIndent`
2316
function Component() {
2417
useHook();
2518
return <div>Hello world</div>;
2619
}
2720
`,
28-
},
29-
{
30-
name: 'Violation with Flow suppression',
31-
code: `
21+
},
22+
{
23+
name: 'Violation with Flow suppression',
24+
code: `
3225
// Valid since error already suppressed with flow.
3326
function useHook() {
3427
if (cond) {
@@ -37,11 +30,11 @@ testRule(
3730
}
3831
}
3932
`,
40-
},
41-
{
42-
// OK because invariants are only meant for the compiler team's consumption
43-
name: '[Invariant] Defined after use',
44-
code: normalizeIndent`
33+
},
34+
{
35+
// OK because invariants are only meant for the compiler team's consumption
36+
name: '[Invariant] Defined after use',
37+
code: normalizeIndent`
4538
function Component(props) {
4639
let y = function () {
4740
m(x);
@@ -52,49 +45,42 @@ testRule(
5245
return y;
5346
}
5447
`,
55-
},
56-
{
57-
name: "Classes don't throw",
58-
code: normalizeIndent`
48+
},
49+
{
50+
name: "Classes don't throw",
51+
code: normalizeIndent`
5952
class Foo {
6053
#bar() {}
6154
}
6255
`,
63-
},
64-
],
65-
invalid: [
66-
{
67-
name: 'Simple violation',
68-
code: normalizeIndent`
56+
},
57+
],
58+
invalid: [
59+
{
60+
name: 'Simple violation',
61+
code: normalizeIndent`
6962
function useConditional() {
7063
if (cond) {
7164
useConditionalHook();
7265
}
7366
}
7467
`,
75-
errors: [
76-
makeTestCaseError(
77-
'Hooks must always be called in a consistent order',
78-
),
79-
],
80-
},
81-
{
82-
name: 'Multiple diagnostics within the same function are surfaced',
83-
code: normalizeIndent`
68+
errors: [
69+
makeTestCaseError('Hooks must always be called in a consistent order'),
70+
],
71+
},
72+
{
73+
name: 'Multiple diagnostics within the same function are surfaced',
74+
code: normalizeIndent`
8475
function useConditional() {
8576
cond ?? useConditionalHook();
8677
props.cond && useConditionalHook();
8778
return <div>Hello world</div>;
8879
}`,
89-
errors: [
90-
makeTestCaseError(
91-
'Hooks must always be called in a consistent order',
92-
),
93-
makeTestCaseError(
94-
'Hooks must always be called in a consistent order',
95-
),
96-
],
97-
},
98-
],
99-
},
100-
);
80+
errors: [
81+
makeTestCaseError('Hooks must always be called in a consistent order'),
82+
makeTestCaseError('Hooks must always be called in a consistent order'),
83+
],
84+
},
85+
],
86+
});

‎compiler/packages/eslint-plugin-react-compiler/__tests__/NoAmbiguousJsxRule-test.ts‎

Lines changed: 11 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -5,22 +5,15 @@
55
* LICENSE file in the root directory of this source tree.
66
*/
77

8-
import {
9-
ErrorCategory,
10-
getRuleForCategory,
11-
} from 'babel-plugin-react-compiler/src/CompilerError';
128
import {normalizeIndent, testRule, makeTestCaseError} from './shared-utils';
13-
import {allRules} from '../src/rules/ReactCompilerRule';
9+
import ReactCompilerRule from '../src/rules/ReactCompilerRule';
1410

15-
testRule(
16-
'no ambiguous JSX rule',
17-
allRules[getRuleForCategory(ErrorCategory.ErrorBoundaries).name].rule,
18-
{
19-
valid: [],
20-
invalid: [
21-
{
22-
name: 'JSX in try blocks are warned against',
23-
code: normalizeIndent`
11+
testRule('no ambiguous JSX rule', ReactCompilerRule, {
12+
valid: [],
13+
invalid: [
14+
{
15+
name: 'JSX in try blocks are warned against',
16+
code: normalizeIndent`
2417
function Component(props) {
2518
let el;
2619
try {
@@ -31,8 +24,7 @@ testRule(
3124
return el;
3225
}
3326
`,
34-
errors: [makeTestCaseError('Avoid constructing JSX within try/catch')],
35-
},
36-
],
37-
},
38-
);
27+
errors: [makeTestCaseError('Avoid constructing JSX within try/catch')],
28+
},
29+
],
30+
});

‎compiler/packages/eslint-plugin-react-compiler/__tests__/NoCapitalizedCallsRule-test.ts‎

Lines changed: 27 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -4,54 +4,43 @@
44
* This source code is licensed under the MIT license found in the
55
* LICENSE file in the root directory of this source tree.
66
*/
7-
import {
8-
ErrorCategory,
9-
getRuleForCategory,
10-
} from 'babel-plugin-react-compiler/src/CompilerError';
117
import {normalizeIndent, makeTestCaseError, testRule} from './shared-utils';
12-
import {allRules} from '../src/rules/ReactCompilerRule';
8+
import ReactCompilerRule from '../src/rules/ReactCompilerRule';
139

14-
testRule(
15-
'no-capitalized-calls',
16-
allRules[getRuleForCategory(ErrorCategory.CapitalizedCalls).name].rule,
17-
{
18-
valid: [],
19-
invalid: [
20-
{
21-
name: 'Simple violation',
22-
code: normalizeIndent`
10+
testRule('no-capitalized-calls', ReactCompilerRule, {
11+
valid: [],
12+
invalid: [
13+
{
14+
name: 'Simple violation',
15+
code: normalizeIndent`
2316
import Child from './Child';
2417
function Component() {
2518
return <>
2619
{Child()}
2720
</>;
2821
}
2922
`,
30-
errors: [
31-
makeTestCaseError(
32-
'Capitalized functions are reserved for components',
33-
),
34-
],
35-
},
36-
{
37-
name: 'Method call violation',
38-
code: normalizeIndent`
23+
errors: [
24+
makeTestCaseError('Capitalized functions are reserved for components'),
25+
],
26+
},
27+
{
28+
name: 'Method call violation',
29+
code: normalizeIndent`
3930
import myModule from './MyModule';
4031
function Component() {
4132
return <>
4233
{myModule.Child()}
4334
</>;
4435
}
4536
`,
46-
errors: [
47-
makeTestCaseError(
48-
'Capitalized functions are reserved for components',
49-
),
50-
],
51-
},
52-
{
53-
name: 'Multiple diagnostics within the same function are surfaced',
54-
code: normalizeIndent`
37+
errors: [
38+
makeTestCaseError('Capitalized functions are reserved for components'),
39+
],
40+
},
41+
{
42+
name: 'Multiple diagnostics within the same function are surfaced',
43+
code: normalizeIndent`
5544
import Child1 from './Child1';
5645
import MyModule from './MyModule';
5746
function Component() {
@@ -60,12 +49,9 @@ testRule(
6049
{MyModule.Child2()}
6150
</>;
6251
}`,
63-
errors: [
64-
makeTestCaseError(
65-
'Capitalized functions are reserved for components',
66-
),
67-
],
68-
},
69-
],
70-
},
71-
);
52+
errors: [
53+
makeTestCaseError('Capitalized functions are reserved for components'),
54+
],
55+
},
56+
],
57+
});

‎compiler/packages/eslint-plugin-react-compiler/__tests__/NoRefAccessInRender-tests.ts‎

Lines changed: 11 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -5,30 +5,22 @@
55
* LICENSE file in the root directory of this source tree.
66
*/
77

8-
import {
9-
ErrorCategory,
10-
getRuleForCategory,
11-
} from 'babel-plugin-react-compiler/src/CompilerError';
128
import {normalizeIndent, testRule, makeTestCaseError} from './shared-utils';
13-
import {allRules} from '../src/rules/ReactCompilerRule';
9+
import ReactCompilerRule from '../src/rules/ReactCompilerRule';
1410

15-
testRule(
16-
'no ref access in render rule',
17-
allRules[getRuleForCategory(ErrorCategory.Refs).name].rule,
18-
{
19-
valid: [],
20-
invalid: [
21-
{
22-
name: 'validate against simple ref access in render',
23-
code: normalizeIndent`
11+
testRule('no ref access in render rule', ReactCompilerRule, {
12+
valid: [],
13+
invalid: [
14+
{
15+
name: 'validate against simple ref access in render',
16+
code: normalizeIndent`
2417
function Component(props) {
2518
const ref = useRef(null);
2619
const value = ref.current;
2720
return value;
2821
}
2922
`,
30-
errors: [makeTestCaseError('Cannot access refs during render')],
31-
},
32-
],
33-
},
34-
);
23+
errors: [makeTestCaseError('Cannot access refs during render')],
24+
},
25+
],
26+
});

‎compiler/packages/eslint-plugin-react-compiler/__tests__/PluginTest-test.ts‎

Lines changed: 3 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -5,19 +5,10 @@
55
* LICENSE file in the root directory of this source tree.
66
*/
77

8-
import {
9-
ErrorCategory,
10-
getRuleForCategory,
11-
} from 'babel-plugin-react-compiler/src/CompilerError';
12-
import {
13-
normalizeIndent,
14-
testRule,
15-
makeTestCaseError,
16-
TestRecommendedRules,
17-
} from './shared-utils';
18-
import {allRules} from '../src/rules/ReactCompilerRule';
8+
import {normalizeIndent, testRule, makeTestCaseError} from './shared-utils';
9+
import {AllRules} from '../src/rules/ReactCompilerRule';
1910

20-
testRule('plugin-recommended', TestRecommendedRules, {
11+
testRule('plugin-recommended', AllRules, {
2112
valid: [
2213
{
2314
name: 'Basic example with component syntax',

0 commit comments

Comments
 (0)