From af219cc6e6c514099a667ffab4e2d80c5c0c1bcc Mon Sep 17 00:00:00 2001 From: Andrew Clark Date: Mon, 24 Aug 2020 12:07:11 -0500 Subject: [PATCH] Lint rule to forbid access of cross-fork fields (#19679) * Lint rule to forbid access of cross-fork fields We use a shared Fiber type for both reconciler forks (old and new). It is a superset of all the fields used by both forks. However, there are some fields that should only be used in the new fork, and others that should only be used in the old fork. Ideally we would enforce this with separate Flow types for each fork. The problem is that the Fiber type is accessed by some packages outside the reconciler (like React DOM), and get passed into the reconciler as arguments. So there's no way to fork the Fiber type without also forking the packages where they are used. FiberRoot has the same issue. Instead, I've added a lint rule that forbids cross-fork access of fork-specific fields. Fields that end in `_old` or `_new` are forbidden from being used inside the new or old fork respectively. Or you can specific custom fields using the ESLint plugin options. I used this plugin to find and remove references to the effect list in d2e914a. * Mark effect list fields as old And `subtreeTag` as new. I didn't mark `lastEffect` because that name is also used by the Hook type. Not super important; could rename to `lastEffect_old` but idk if it's worth the effort. --- .eslintrc.js | 12 ++ .../no-cross-fork-types-test.internal.js | 89 +++++++++++++ scripts/eslint-rules/index.js | 1 + scripts/eslint-rules/no-cross-fork-types.js | 126 ++++++++++++++++++ 4 files changed, 228 insertions(+) create mode 100644 scripts/eslint-rules/__tests__/no-cross-fork-types-test.internal.js create mode 100644 scripts/eslint-rules/no-cross-fork-types.js diff --git a/.eslintrc.js b/.eslintrc.js index 6998bca453..b6d07a79e6 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -99,6 +99,18 @@ module.exports = { 'react-internal/warning-args': ERROR, 'react-internal/no-production-logging': ERROR, 'react-internal/no-cross-fork-imports': ERROR, + 'react-internal/no-cross-fork-types': [ + ERROR, + { + old: [ + 'firstEffect', + 'nextEffect', + // Disabled because it's also used by the Hook type. + // 'lastEffect', + ], + new: ['subtreeTag'], + }, + ], }, overrides: [ diff --git a/scripts/eslint-rules/__tests__/no-cross-fork-types-test.internal.js b/scripts/eslint-rules/__tests__/no-cross-fork-types-test.internal.js new file mode 100644 index 0000000000..57c50a55b3 --- /dev/null +++ b/scripts/eslint-rules/__tests__/no-cross-fork-types-test.internal.js @@ -0,0 +1,89 @@ +/** + * Copyright (c) Facebook, Inc. and its affiliates. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + * + * @emails react-core + */ + +'use strict'; + +const rule = require('../no-cross-fork-types'); +const RuleTester = require('eslint').RuleTester; +const ruleTester = new RuleTester({ + parserOptions: { + ecmaVersion: 8, + sourceType: 'module', + }, +}); + +const newAccessWarning = + 'Field cannot be accessed inside the old reconciler fork, only the ' + + 'new fork.'; + +const oldAccessWarning = + 'Field cannot be accessed inside the new reconciler fork, only the ' + + 'old fork.'; + +ruleTester.run('eslint-rules/no-cross-fork-types', rule, { + valid: [ + { + code: ` +const a = obj.key_old; +const b = obj.key_new; +const {key_old, key_new} = obj; +`, + filename: 'ReactFiberWorkLoop.js', + }, + { + code: ` +const a = obj.key_old; +const {key_old} = obj; +`, + filename: 'ReactFiberWorkLoop.old.js', + }, + { + code: ` +const a = obj.key_new; +const {key_new} = obj; +`, + filename: 'ReactFiberWorkLoop.new.js', + }, + ], + invalid: [ + { + code: 'const a = obj.key_new;', + filename: 'ReactFiberWorkLoop.old.js', + errors: [{message: newAccessWarning}], + }, + { + code: 'const a = obj.key_old;', + filename: 'ReactFiberWorkLoop.new.js', + errors: [{message: oldAccessWarning}], + }, + + { + code: 'const {key_new} = obj;', + filename: 'ReactFiberWorkLoop.old.js', + errors: [{message: newAccessWarning}], + }, + { + code: 'const {key_old} = obj;', + filename: 'ReactFiberWorkLoop.new.js', + errors: [{message: oldAccessWarning}], + }, + { + code: 'const subtreeTag = obj.subtreeTag;', + filename: 'ReactFiberWorkLoop.old.js', + options: [{new: ['subtreeTag']}], + errors: [{message: newAccessWarning}], + }, + { + code: 'const firstEffect = obj.firstEffect;', + filename: 'ReactFiberWorkLoop.new.js', + options: [{old: ['firstEffect']}], + errors: [{message: oldAccessWarning}], + }, + ], +}); diff --git a/scripts/eslint-rules/index.js b/scripts/eslint-rules/index.js index 1451eb906d..0a08b0d4cf 100644 --- a/scripts/eslint-rules/index.js +++ b/scripts/eslint-rules/index.js @@ -8,5 +8,6 @@ module.exports = { 'invariant-args': require('./invariant-args'), 'no-production-logging': require('./no-production-logging'), 'no-cross-fork-imports': require('./no-cross-fork-imports'), + 'no-cross-fork-types': require('./no-cross-fork-types'), }, }; diff --git a/scripts/eslint-rules/no-cross-fork-types.js b/scripts/eslint-rules/no-cross-fork-types.js new file mode 100644 index 0000000000..eaa9f07d74 --- /dev/null +++ b/scripts/eslint-rules/no-cross-fork-types.js @@ -0,0 +1,126 @@ +/** + * Copyright (c) Facebook, Inc. and its affiliates. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + * + * @emails react-core + */ + +/* eslint-disable no-for-of-loops/no-for-of-loops */ + +'use strict'; + +function isOldFork(filename) { + return filename.endsWith('.old.js') || filename.endsWith('.old'); +} + +function isNewFork(filename) { + return filename.endsWith('.new.js') || filename.endsWith('.new'); +} + +function warnIfNewField(context, newFields, identifier) { + const name = identifier.name; + if (name.endsWith('_new') || (newFields !== null && newFields.has(name))) { + context.report({ + node: identifier, + message: + 'Field cannot be accessed inside the old reconciler fork, only the ' + + 'new fork.', + }); + } +} + +function warnIfOldField(context, oldFields, identifier) { + const name = identifier.name; + if (name.endsWith('_old') || (oldFields !== null && oldFields.has(name))) { + context.report({ + node: identifier, + message: + 'Field cannot be accessed inside the new reconciler fork, only the ' + + 'old fork.', + }); + } +} + +module.exports = { + meta: { + type: 'problem', + fixable: 'code', + }, + create(context) { + const sourceFilename = context.getFilename(); + + if (isOldFork(sourceFilename)) { + const options = context.options; + let newFields = null; + if (options !== null) { + for (const option of options) { + if (option.new !== undefined) { + if (newFields === null) { + newFields = new Set(option.new); + } else { + for (const field of option.new) { + newFields.add(field); + } + } + } + } + } + return { + MemberExpression(node) { + const property = node.property; + if (property.type === 'Identifier') { + warnIfNewField(context, newFields, property); + } + }, + + ObjectPattern(node) { + for (const property of node.properties) { + const key = property.key; + if (key.type === 'Identifier') { + warnIfNewField(context, newFields, key); + } + } + }, + }; + } + + if (isNewFork(sourceFilename)) { + const options = context.options; + let oldFields = null; + if (options !== null) { + for (const option of options) { + if (option.old !== undefined) { + if (oldFields === null) { + oldFields = new Set(option.old); + } else { + for (const field of option.new) { + oldFields.add(field); + } + } + } + } + } + return { + MemberExpression(node) { + const property = node.property; + if (property.type === 'Identifier') { + warnIfOldField(context, oldFields, property); + } + }, + + ObjectPattern(node) { + for (const property of node.properties) { + const key = property.key; + if (key.type === 'Identifier') { + warnIfOldField(context, oldFields, key); + } + } + }, + }; + } + + return {}; + }, +};