[compiler] Surface unused opt out directives in eslint
This PR updates the eslint plugin to report unused opt out directives. One of the downsides of the opt out directive is that it opts the component/hook out of compilation forever, even if the underlying issue was fixed in product code or fixed in the compiler. ghstack-source-id: 81deb5c11b7c57f07f6ab13266066cd73b2f3729 Pull Request resolved: https://github.com/facebook/react/pull/30721
Lauren Tan committed
Aug 16, 2024 at 17:39 UTC
34edf3b68471e87d4a92f98a10f7c6c727c948f8
2 files changed
+109
-1
compiler/packages/eslint-plugin-react-compiler/__tests__/ReactCompilerRule-test.ts
+59
@@ -215,6 +215,65 @@ const tests: CompilerTestCases = {
215
},
216
],
217
},
218
+ {
219
+ name: "'use no forget' does not disable eslint rule",
220
+ code: normalizeIndent`
221
+ let count = 0;
222
+ function Component() {
223
+ 'use no forget';
224
+ count = count + 1;
225
+ return <div>Hello world {count}</div>
226
+ }
227
+ `,
228
+ errors: [
229
+ {
230
+ message:
231
+ 'Unexpected reassignment of a variable which was defined outside of the component. Components and hooks should be pure and side-effect free, but variable reassignment is a form of side-effect. If this variable is used in rendering, use useState instead. (https://react.dev/reference/rules/components-and-hooks-must-be-pure#side-effects-must-run-outside-of-render)',
232
+ },
233
+ ],
234
+ },
235
+ {
236
+ name: "Unused 'use no forget' directive is reported when no errors are present on components",
237
+ code: normalizeIndent`
238
+ function Component() {
239
+ 'use no forget';
240
+ return <div>Hello world</div>
241
+ }
242
+ `,
243
+ errors: [
244
+ {
245
+ message: "Unused 'use no forget' directive",
246
+ suggestions: [
247
+ {
248
+ output:
249
+ // yuck
250
+ '\nfunction Component() {\n \n return <div>Hello world</div>\n}\n',
251
+ },
252
+ ],
253
+ },
254
+ ],
255
+ },
256
+ {
257
+ name: "Unused 'use no forget' directive is reported when no errors are present on non-components or hooks",
258
+ code: normalizeIndent`
259
+ function notacomponent() {
260
+ 'use no forget';
261
+ return 1 + 1;
262
+ }
263
+ `,
264
+ errors: [
265
+ {
266
+ message: "Unused 'use no forget' directive",
267
+ suggestions: [
268
+ {
269
+ output:
270
+ // yuck
271
+ '\nfunction notacomponent() {\n \n return 1 + 1;\n}\n',
272
+ },
273
+ ],
274
+ },
275
+ ],
276
+ },
277
],
278
};
279
compiler/packages/eslint-plugin-react-compiler/src/rules/ReactCompilerRule.ts
+50
-1
@@ -15,10 +15,12 @@ import BabelPluginReactCompiler, {
15
ErrorSeverity,
16
parsePluginOptions,
17
validateEnvironmentConfig,
18
+ OPT_OUT_DIRECTIVES,
19
type PluginOptions,
20
} from 'babel-plugin-react-compiler/src';
21
import {Logger} from 'babel-plugin-react-compiler/src/Entrypoint';
22
import type {Rule} from 'eslint';
23
+import {Statement} from 'estree';
24
import * as HermesParser from 'hermes-parser';
25
26
type CompilerErrorDetailWithLoc = Omit<CompilerErrorDetailOptions, 'loc'> & {
@@ -146,6 +148,7 @@ const rule: Rule.RuleModule = {
148
userOpts['__unstable_donotuse_reportAllBailouts'];
149
}
150
151
+ let shouldReportUnusedOptOutDirective = true;
152
const options: PluginOptions = {
153
...parsePluginOptions(userOpts),
154
...COMPILER_OPTIONS,
@@ -155,6 +158,7 @@ const rule: Rule.RuleModule = {
158
logEvent: (filename, event): void => {
159
userLogger?.logEvent(filename, event);
160
if (event.kind === 'CompileError') {
161
+ shouldReportUnusedOptOutDirective = false;
162
const detail = event.detail;
163
const suggest = makeSuggestions(detail);
164
if (__unstable_donotuse_reportAllBailouts && event.fnLoc != null) {
@@ -272,7 +276,52 @@ const rule: Rule.RuleModule = {
276
/* errors handled by injected logger */
277
}
278
}
275
- return {};
279
+
280
+ function reportUnusedOptOutDirective(stmt: Statement) {
281
+ if (
282
+ stmt.type === 'ExpressionStatement' &&
283
+ stmt.expression.type === 'Literal' &&
284
+ typeof stmt.expression.value === 'string' &&
285
+ OPT_OUT_DIRECTIVES.has(stmt.expression.value) &&
286
+ stmt.loc != null
287
+ ) {
288
+ context.report({
289
+ message: `Unused '${stmt.expression.value}' directive`,
290
+ loc: stmt.loc,
291
+ suggest: [
292
+ {
293
+ desc: 'Remove the directive',
294
+ fix(fixer) {
295
+ return fixer.remove(stmt);
296
+ },
297
+ },
298
+ ],
299
+ });
300
+ }
301
+ }
302
+ if (shouldReportUnusedOptOutDirective) {
303
+ return {
304
+ FunctionDeclaration(fnDecl) {
305
+ for (const stmt of fnDecl.body.body) {
306
+ reportUnusedOptOutDirective(stmt);
307
+ }
308
+ },
309
+ ArrowFunctionExpression(fnExpr) {
310
+ if (fnExpr.body.type === 'BlockStatement') {
311
+ for (const stmt of fnExpr.body.body) {
312
+ reportUnusedOptOutDirective(stmt);
313
+ }
314
+ }
315
+ },
316
+ FunctionExpression(fnExpr) {
317
+ for (const stmt of fnExpr.body.body) {
318
+ reportUnusedOptOutDirective(stmt);
319
+ }
320
+ },
321
+ };
322
+ } else {
323
+ return {};
324
+ }
325
},
326
};
327