Merge main branch from upstream facebook/react (particularly for compatibility with ESLint 8.x)

.codesandbox/ci.json

@@ -1,10 +1,12 @@
 {
   "packages": ["packages/react", "packages/react-dom", "packages/scheduler"],
-  "buildCommand": "build --type=NODE react/index,react-dom/index,react-dom/server,react-dom/test-utils,scheduler/index,scheduler/tracing",
+  "buildCommand": "download-build-in-codesandbox-ci",
+  "node": "14",
   "publishDirectory": {
-    "react": "build/node_modules/react",
-    "react-dom": "build/node_modules/react-dom",
-    "scheduler": "build/node_modules/scheduler"
+    "react": "build/oss-experimental/react",
+    "react-dom": "build/oss-experimental/react-dom",
+    "scheduler": "build/oss-experimental/scheduler"
   },
-  "sandboxes": ["new"]
+  "sandboxes": ["new"],
+  "silent": true
 }

.eslintignore

@@ -17,7 +17,10 @@ packages/react-devtools-core/dist
 packages/react-devtools-extensions/chrome/build
 packages/react-devtools-extensions/firefox/build
 packages/react-devtools-extensions/shared/build
+packages/react-devtools-extensions/src/ErrorTesterCompiled.js
 packages/react-devtools-inline/dist
+packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/
+packages/react-devtools-shared/src/hooks/__tests__/__source__/__untransformed__/
 packages/react-devtools-shell/dist
-packages/react-devtools-scheduling-profiler/dist
-packages/react-devtools-scheduling-profiler/static
+packages/react-devtools-timeline/dist
+packages/react-devtools-timeline/static

.eslintrc.js

@@ -26,11 +26,8 @@ module.exports = {
 
   parser: 'babel-eslint',
   parserOptions: {
-    ecmaVersion: 8,
+    ecmaVersion: 9,
     sourceType: 'script',
-    ecmaFeatures: {
-      experimentalObjectRestSpread: true,
-    },
   },
 
   // We're stricter than the default config, mostly. We'll override a few rules
@@ -48,6 +45,7 @@ module.exports = {
     'jsx-quotes': [ERROR, 'prefer-double'],
     'keyword-spacing': [ERROR, {after: true, before: true}],
     'no-bitwise': OFF,
+    'no-console': OFF,
     'no-inner-declarations': [ERROR, 'functions'],
     'no-multi-spaces': ERROR,
     'no-restricted-globals': [ERROR].concat(restrictedGlobals),
@@ -61,6 +59,8 @@ module.exports = {
     'space-before-blocks': ERROR,
     'space-before-function-paren': OFF,
     'valid-typeof': [ERROR, {requireStringLiterals: true}],
+    // Flow fails with with non-string literal keys
+    'no-useless-computed-key': OFF,
 
     // We apply these settings to files that should run on Node.
     // They can't use JSX or ES6 modules, and must be in strict mode.
@@ -74,6 +74,8 @@ module.exports = {
     // deal. But I turned it off because loading the plugin causes some obscure
     // syntax error and it didn't seem worth investigating.
     'max-len': OFF,
+    // Prettier forces semicolons in a few places
+    'flowtype/object-type-delimiter': OFF,
 
     // React & JSX
     // Our transforms set this automatically
@@ -103,26 +105,59 @@ module.exports = {
     // CUSTOM RULES
     // the second argument of warning/invariant should be a literal string
     'react-internal/no-primitive-constructors': ERROR,
+    'react-internal/safe-string-coercion': [
+      ERROR,
+      {isProductionUserAppCode: true},
+    ],
     'react-internal/no-to-warn-dev-within-to-throw': ERROR,
-    'react-internal/invariant-args': ERROR,
     '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: ['subtreeFlags'],
+        old: [],
+        new: [],
       },
     ],
   },
 
   overrides: [
+    {
+      // By default, anything error message that appears the packages directory
+      // must have a corresponding error code. The exceptions are defined
+      // in the next override entry.
+      files: ['packages/**/*.js'],
+      rules: {
+        'react-internal/prod-error-codes': ERROR,
+      },
+    },
+    {
+      // These are files where it's OK to have unminified error messages. These
+      // are environments where bundle size isn't a concern, like tests
+      // or Node.
+      files: [
+        'packages/react-dom/src/test-utils/**/*.js',
+        'packages/react-devtools-shared/**/*.js',
+        'packages/react-noop-renderer/**/*.js',
+        'packages/react-pg/**/*.js',
+        'packages/react-fs/**/*.js',
+        'packages/react-refresh/**/*.js',
+        'packages/react-server-dom-webpack/**/*.js',
+        'packages/react-test-renderer/**/*.js',
+        'packages/react-debug-tools/**/*.js',
+        'packages/react-devtools-extensions/**/*.js',
+        'packages/react-devtools-timeline/**/*.js',
+        'packages/react-native-renderer/**/*.js',
+        'packages/eslint-plugin-react-hooks/**/*.js',
+        'packages/jest-react/**/*.js',
+        'packages/**/__tests__/*.js',
+        'packages/**/npm/*.js',
+      ],
+      rules: {
+        'react-internal/prod-error-codes': OFF,
+      },
+    },
     {
       // We apply these settings to files that we ship through npm.
       // They must be ES5.
@@ -168,44 +203,78 @@ module.exports = {
         'packages/*/npm/**/*.js',
         'packages/dom-event-testing-library/**/*.js',
         'packages/react-devtools*/**/*.js',
+        'dangerfile.js',
+        'fixtures',
+        'packages/react-dom/src/test-utils/*.js',
       ],
       rules: {
         'react-internal/no-production-logging': OFF,
         'react-internal/warning-args': OFF,
+        'react-internal/safe-string-coercion': [
+          ERROR,
+          {isProductionUserAppCode: false},
+        ],
+
+        // Disable accessibility checks
+        'jsx-a11y/aria-role': OFF,
+        'jsx-a11y/no-noninteractive-element-interactions': OFF,
+        'jsx-a11y/no-static-element-interactions': OFF,
+        'jsx-a11y/role-has-required-aria-props': OFF,
+        'jsx-a11y/no-noninteractive-tabindex': OFF,
+        'jsx-a11y/tabindex-no-positive': OFF,
+      },
+    },
+    {
+      files: [
+        'scripts/eslint-rules/*.js',
+        'packages/eslint-plugin-react-hooks/src/*.js',
+      ],
+      plugins: ['eslint-plugin'],
+      rules: {
+        'eslint-plugin/prefer-object-rule': ERROR,
+        'eslint-plugin/require-meta-fixable': [
+          ERROR,
+          {catchNoFixerButFixableProperty: true},
+        ],
+        'eslint-plugin/require-meta-has-suggestions': ERROR,
       },
     },
     {
-      files: ['packages/react-native-renderer/**/*.js'],
+      files: [
+        'packages/react-native-renderer/**/*.js',
+        'packages/react-server-native-relay/**/*.js',
+      ],
       globals: {
-        nativeFabricUIManager: true,
+        nativeFabricUIManager: 'readonly',
       },
     },
     {
-      files: ['packages/react-transport-dom-webpack/**/*.js'],
+      files: ['packages/react-server-dom-webpack/**/*.js'],
       globals: {
-        __webpack_chunk_load__: true,
-        __webpack_require__: true,
+        __webpack_chunk_load__: 'readonly',
+        __webpack_require__: 'readonly',
       },
     },
     {
       files: ['packages/scheduler/**/*.js'],
       globals: {
-        TaskController: true,
+        TaskController: 'readonly',
       },
     },
   ],
 
   globals: {
-    SharedArrayBuffer: true,
-
-    spyOnDev: true,
-    spyOnDevAndProd: true,
-    spyOnProd: true,
-    __PROFILE__: true,
-    __UMD__: true,
-    __EXPERIMENTAL__: true,
-    __VARIANT__: true,
-    gate: true,
-    trustedTypes: true,
+    spyOnDev: 'readonly',
+    spyOnDevAndProd: 'readonly',
+    spyOnProd: 'readonly',
+    __EXPERIMENTAL__: 'readonly',
+    __EXTENSION__: 'readonly',
+    __PROFILE__: 'readonly',
+    __TEST__: 'readonly',
+    __UMD__: 'readonly',
+    __VARIANT__: 'readonly',
+    gate: 'readonly',
+    trustedTypes: 'readonly',
+    IS_REACT_ACT_ENVIRONMENT: 'readonly',
   },
 };

.github/ISSUE_TEMPLATE/devtools_bug_report.yml

@@ -0,0 +1,81 @@
+name: "⚛️ 🛠 DevTools bug report"
+description: "Report a problem with React DevTools. Please provide enough information that we can reproduce the problem."
+title: "[DevTools Bug]: "
+labels: ["Component: Developer Tools", "Type: Bug", "Status: Unconfirmed"]
+body:
+- type: input
+  attributes:
+    label: Website or app
+    description: |
+      Which website or app were you using when the bug happened?
+
+      This should be a public URL, GitHub repo, or Code Sandbox app so the React team can reproduce the error being reported. (Please no localhost URLs.)
+    placeholder: |
+      e.g. website URL, public GitHub repo, or Code Sandbox app
+  validations:
+    required: true
+- type: textarea
+  attributes:
+    label: Repro steps
+    description: |
+      What were you doing on the website or app when the bug happened? Detailed information helps maintainers reproduce and fix bugs.
+
+      Issues filed without repro steps will be closed.
+    placeholder: |
+      Example bug report:
+      1. Log in with username/password
+      2. Click "Messages" on the left menu
+      3. Open any message in the list
+  validations:
+    required: true
+- type: dropdown
+  attributes:
+    label: How often does this bug happen?
+    description: |
+      Following the repro steps above, how easily are you able to reproduce this bug?
+    options:
+      - Every time
+      - Often
+      - Sometimes
+      - Only once
+  validations:
+    required: true
+- type: input
+  id: automated_package
+  attributes:
+    label: DevTools package (automated)
+    description: |
+      Please do not edit this field.
+- type: input
+  id: automated_version
+  attributes:
+    label: DevTools version (automated)
+    description: |
+      Please do not edit this field.
+- type: input
+  id: automated_error_message
+  attributes:
+    label: Error message (automated)
+    description: |
+      Please do not edit this field.
+- type: textarea
+  id: automated_call_stack
+  attributes:
+    label: Error call stack (automated)
+    description: |
+      Please do not edit this field.
+    render: text
+- type: textarea
+  id: automated_component_stack
+  attributes:
+    label: Error component stack (automated)
+    description: |
+      Please do not edit this field.
+    render: text
+- type: textarea
+  id: automated_github_query_string
+  attributes:
+    label: GitHub query string (automated)
+    description: |
+      Please do not edit this field.
+    render: text

.github/PULL_REQUEST_TEMPLATE.md

@@ -4,11 +4,11 @@
 
   Before submitting a pull request, please make sure the following is done:
 
-  1. Fork [the repository](https://github.com/facebook/react) and create your branch from `master`.
+  1. Fork [the repository](https://github.com/facebook/react) and create your branch from `main`.
   2. Run `yarn` in the repository root.
   3. If you've fixed a bug or added code that should be tested, add tests!
   4. Ensure the test suite passes (`yarn test`). Tip: `yarn test --watch TestName` is helpful in development.
-  5. Run `yarn test-prod` to test in the production environment. It supports the same options as `yarn test`.
+  5. Run `yarn test --prod` to test in the production environment. It supports the same options as `yarn test`.
   6. If you need a debugger, run `yarn debug-test --watch TestName`, open `chrome://inspect`, and press "Inspect".
   7. Format your code with [prettier](https://github.com/prettier/prettier) (`yarn prettier`).
   8. Make sure your code lints (`yarn lint`). Tip: `yarn linc` to only check changed files.
@@ -20,8 +20,14 @@
 
 ## Summary
 
-<!-- Explain the **motivation** for making this change. What existing problem does the pull request solve? -->
+<!--
+ Explain the **motivation** for making this change. What existing problem does the pull request solve?
+-->
 
-## Test Plan
+## How did you test this change?
 
-<!-- Demonstrate the code is solid. Example: The exact commands you ran and their output, screenshots / videos if the pull request changes the user interface. -->
+<!--
+  Demonstrate the code is solid. Example: The exact commands you ran and their output, screenshots / videos if the pull request changes the user interface.
+  How exactly did you verify that your PR solves the issue you wanted to solve?
+  If you leave this empty, your PR will very likely be closed.
+-->