Merge branch 'main' into cleanup

.prettierrc.js

@@ -8,8 +8,8 @@ module.exports = {
   jsxBracketSameLine: true,
   trailingComma: 'es5',
   printWidth: 80,
-  parser: 'babel',
-
+  parser: 'flow',
+  arrowParens: 'avoid',
   overrides: [
     {
       files: esNextPaths,

CHANGELOG.md

@@ -102,6 +102,10 @@ The existing `renderToString` method keeps working but is discouraged.
 * **Layout Effects with Suspense**: When a tree re-suspends and reverts to a fallback, React will now clean up layout effects, and then re-create them when the content inside the boundary is shown again. This fixes an issue which prevented component libraries from correctly measuring layout when used with Suspense.
 * **New JS Environment Requirements**: React now depends on modern browsers features including `Promise`, `Symbol`, and `Object.assign`. If you support older browsers and devices such as Internet Explorer which do not provide modern browser features natively or have non-compliant implementations, consider including a global polyfill in your bundled application.
 
+### Scheduler (Experimental)
+
+* Remove unstable `scheduler/tracing` API
+
 ## Notable Changes
 
 ### React
@@ -193,6 +197,10 @@ The existing `renderToString` method keeps working but is discouraged.
 * Fix a mistake in the Node loader. ([#22537](https://github.com/facebook/react/pull/22537) by [@btea](https://github.com/btea))
 * Use `globalThis` instead of `window` for edge environments. ([#22777](https://github.com/facebook/react/pull/22777) by [@huozhi](https://github.com/huozhi))
 
+### Scheduler (Experimental)
+
+* Remove unstable `scheduler/tracing` API ([#20037](https://github.com/facebook/react/pull/20037) by [@bvaughn](https://github.com/bvaughn))
+
 ## 17.0.2 (March 22, 2021)
 
 ### React DOM

dangerfile.js

@@ -97,7 +97,7 @@ function row(result, baseSha, headSha) {
   return rowArr.join(' | ');
 }
 
-(async function() {
+(async function () {
   // Use git locally to grab the commit which represents the place
   // where the branches differ
 
@@ -241,8 +241,9 @@ Comparing: ${baseSha}...${headSha}
 
 ## Critical size changes
 
-Includes critical production bundles, as well as any change greater than ${CRITICAL_THRESHOLD *
-    100}%:
+Includes critical production bundles, as well as any change greater than ${
+    CRITICAL_THRESHOLD * 100
+  }%:
 
 ${header}
 ${criticalResults.join('\n')}

fixtures/attribute-behavior/src/App.js

@@ -902,8 +902,9 @@ class App extends React.Component {
 
     let log = '';
     for (let attribute of attributes) {
-      log += `## \`${attribute.name}\` (on \`<${attribute.tagName ||
-        'div'}>\` inside \`<${attribute.containerTagName || 'div'}>\`)\n`;
+      log += `## \`${attribute.name}\` (on \`<${
+        attribute.tagName || 'div'
+      }>\` inside \`<${attribute.containerTagName || 'div'}>\`)\n`;
       log += '| Test Case | Flags | Result |\n';
       log += '| --- | --- | --- |\n';
 

fixtures/devtools/scheduling-profiler/run.js

@@ -39,7 +39,7 @@ function initServer() {
   const host = 'localhost';
   const port = 8000;
 
-  const requestListener = function(request, response) {
+  const requestListener = function (request, response) {
     let contents;
     switch (request.url) {
       case '/react.js':

fixtures/dom/public/renderer.js

@@ -4,7 +4,7 @@
 
 'use strict';
 
-(function() {
+(function () {
   var Fixture = null;
   var output = document.getElementById('output');
   var status = document.getElementById('status');
@@ -60,7 +60,7 @@
     setStatus('Generating markup');
 
     return Promise.resolve()
-      .then(function() {
+      .then(function () {
         const element = createElement(Fixture);
 
         // Server rendering moved to a separate package along with ReactDOM
@@ -80,11 +80,11 @@
         }
 
         // Finally, React 0.4 and lower emits markup in a callback
-        return new Promise(function(resolve) {
+        return new Promise(function (resolve) {
           React.renderComponentToString(element, resolve);
         });
       })
-      .then(function(string) {
+      .then(function (string) {
         output.innerHTML = string;
         setStatus('Markup only (No React)');
       })
@@ -124,13 +124,13 @@
   }
 
   function loadScript(src) {
-    return new Promise(function(resolve, reject) {
+    return new Promise(function (resolve, reject) {
       var script = document.createElement('script');
       script.async = true;
       script.src = src;
 
       script.onload = resolve;
-      script.onerror = function(error) {
+      script.onerror = function (error) {
         reject(new Error('Unable to load ' + src));
       };
 
@@ -145,7 +145,7 @@
       setStatus('Failed');
       output.innerHTML = 'Please name your root component "Fixture"';
     } else {
-      prerender().then(function() {
+      prerender().then(function () {
         if (getBooleanQueryParam('hydrate')) {
           render();
         }
@@ -161,27 +161,27 @@
 
   window.onerror = handleError;
 
-  reload.onclick = function() {
+  reload.onclick = function () {
     window.location.reload();
   };
 
   hydrate.onclick = render;
 
   loadScript(getQueryParam('reactPath'))
-    .then(function() {
+    .then(function () {
       if (needsReactDOM) {
         return Promise.all([
           loadScript(getQueryParam('reactDOMPath')),
           loadScript(getQueryParam('reactDOMServerPath')),
         ]);
       }
     })
-    .then(function() {
+    .then(function () {
       if (failed) {
         return;
       }
 
-      window.addEventListener('message', function(event) {
+      window.addEventListener('message', function (event) {
         var data = JSON.parse(event.data);
 
         switch (data.type) {

fixtures/dom/src/components/fixtures/error-handling/index.js

@@ -243,15 +243,15 @@ class TrySilenceFatalError extends React.Component {
 
 function naiveMemoize(fn) {
   let memoizedEntry;
-  return function() {
+  return function () {
     if (!memoizedEntry) {
       memoizedEntry = {result: null};
       memoizedEntry.result = fn();
     }
     return memoizedEntry.result;
   };
 }
-let memoizedFunction = naiveMemoize(function() {
+let memoizedFunction = naiveMemoize(function () {
   throw new Error('Passed');
 });
 

fixtures/dom/src/components/fixtures/hydration/Code.js

@@ -34,7 +34,7 @@ export class CodeEditor extends React.Component {
       lineNumbers: true,
     });
 
-    this.editor.on('change', function(doc) {
+    this.editor.on('change', function (doc) {
       onChange(doc.getValue());
     });
   }

fixtures/dom/src/components/fixtures/mouse-events/mouse-enter.js

@@ -6,7 +6,7 @@ const ReactDOM = window.ReactDOM;
 const MouseEnter = () => {
   const containerRef = React.useRef();
 
-  React.useEffect(function() {
+  React.useEffect(function () {
     const hostEl = containerRef.current;
     ReactDOM.render(<MouseEnterDetect />, hostEl, () => {
       ReactDOM.render(<MouseEnterDetect />, hostEl.childNodes[1]);

fixtures/dom/src/polyfills.js

@@ -8,7 +8,7 @@ import 'core-js/es6/map';
 
 // requestAnimationFrame polyfill by Erik Möller. fixes from Paul Irish and Tino Zijdel
 // MIT license
-(function() {
+(function () {
   var lastTime = 0;
   var vendors = ['ms', 'moz', 'webkit', 'o'];
   for (var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
@@ -19,18 +19,18 @@ import 'core-js/es6/map';
   }
 
   if (!window.requestAnimationFrame)
-    window.requestAnimationFrame = function(callback, element) {
+    window.requestAnimationFrame = function (callback, element) {
       var currTime = new Date().getTime();
       var timeToCall = Math.max(0, 16 - (currTime - lastTime));
-      var id = window.setTimeout(function() {
+      var id = window.setTimeout(function () {
         callback(currTime + timeToCall);
       }, timeToCall);
       lastTime = currTime + timeToCall;
       return id;
     };
 
   if (!window.cancelAnimationFrame)
-    window.cancelAnimationFrame = function(id) {
+    window.cancelAnimationFrame = function (id) {
       clearTimeout(id);
     };
 })();

fixtures/fiber-debugger/src/Fibers.js

@@ -29,7 +29,7 @@ function Graph(props) {
   });
 
   var edgeLabels = {};
-  React.Children.forEach(props.children, function(child) {
+  React.Children.forEach(props.children, function (child) {
     if (!child) {
       return;
     }

fixtures/fizz/server/server.js

@@ -30,28 +30,28 @@ const app = express();
 app.use(compress());
 app.get(
   '/',
-  handleErrors(async function(req, res) {
+  handleErrors(async function (req, res) {
     await waitForWebpack();
     renderToStream(req.url, res);
   })
 );
 app.get(
   '/string',
-  handleErrors(async function(req, res) {
+  handleErrors(async function (req, res) {
     await waitForWebpack();
     renderToString(req.url, res);
   })
 );
 app.get(
   '/stream',
-  handleErrors(async function(req, res) {
+  handleErrors(async function (req, res) {
     await waitForWebpack();
     renderToStream(req.url, res);
   })
 );
 app.get(
   '/buffer',
-  handleErrors(async function(req, res) {
+  handleErrors(async function (req, res) {
     await waitForWebpack();
     renderToBuffer(req.url, res);
   })
@@ -63,7 +63,7 @@ app
   .listen(PORT, () => {
     console.log(`Listening at ${PORT}...`);
   })
-  .on('error', function(error) {
+  .on('error', function (error) {
     if (error.syscall !== 'listen') {
       throw error;
     }
@@ -84,7 +84,7 @@ app
   });
 
 function handleErrors(fn) {
-  return async function(req, res, next) {
+  return async function (req, res, next) {
     try {
       return await fn(req, res);
     } catch (x) {

fixtures/flight/config/webpack.config.js

@@ -91,7 +91,7 @@ const hasJsxRuntime = (() => {
 
 // This is the production and development configuration.
 // It is focused on developer experience, fast rebuilds, and a minimal bundle.
-module.exports = function(webpackEnv) {
+module.exports = function (webpackEnv) {
   const isEnvDevelopment = webpackEnv === 'development';
   const isEnvProduction = webpackEnv === 'production';
 

fixtures/flight/config/webpackDevServer.config.js

@@ -13,7 +13,7 @@ const sockHost = process.env.WDS_SOCKET_HOST;
 const sockPath = process.env.WDS_SOCKET_PATH; // default: '/ws'
 const sockPort = process.env.WDS_SOCKET_PORT;
 
-module.exports = function(proxy, allowedHost) {
+module.exports = function (proxy, allowedHost) {
   const disableFirewall =
     !proxy || process.env.DANGEROUSLY_DISABLE_HOST_CHECK === 'true';
   return {

fixtures/flight/scripts/start.js

@@ -131,16 +131,16 @@ checkBrowsers(paths.appPath, isInteractive)
       openBrowser(urls.localUrlForBrowser);
     });
 
-    ['SIGINT', 'SIGTERM'].forEach(function(sig) {
-      process.on(sig, function() {
+    ['SIGINT', 'SIGTERM'].forEach(function (sig) {
+      process.on(sig, function () {
         devServer.close();
         process.exit();
       });
     });
 
     if (process.env.CI !== 'true') {
       // Gracefully exit when stdin ends
-      process.stdin.on('end', function() {
+      process.stdin.on('end', function () {
         devServer.close();
         process.exit();
       });

fixtures/flight/server/cli.server.js

@@ -10,7 +10,7 @@ babelRegister({
   babelrc: false,
   ignore: [
     /\/(build|node_modules)\//,
-    function(file) {
+    function (file) {
       if ((path.dirname(file) + '/').startsWith(__dirname + '/')) {
         // Ignore everything in this folder
         // because it's a mix of CJS and ESM
@@ -28,11 +28,11 @@ const express = require('express');
 const app = express();
 
 // Application
-app.get('/', function(req, res) {
+app.get('/', function (req, res) {
   require('./handler.server.js')(req, res);
 });
 
-app.get('/todos', function(req, res) {
+app.get('/todos', function (req, res) {
   res.setHeader('Access-Control-Allow-Origin', '*');
   res.json([
     {
@@ -50,7 +50,7 @@ app.listen(3001, () => {
   console.log('Flight Server listening on port 3001...');
 });
 
-app.on('error', function(error) {
+app.on('error', function (error) {
   if (error.syscall !== 'listen') {
     throw error;
   }

fixtures/flight/server/handler.server.js

@@ -5,7 +5,7 @@ const {readFile} = require('fs');
 const {resolve} = require('path');
 const React = require('react');
 
-module.exports = function(req, res) {
+module.exports = function (req, res) {
   // const m = require('../src/App.server.js');
   import('../src/App.server.js').then(m => {
     const dist = process.env.NODE_ENV === 'development' ? 'dist' : 'build';