Merged main and resolved conflicts

dangerfile.js

@@ -113,6 +113,17 @@ function row(result) {
     return;
   }
 
+  // Disable sizeBot in a Devtools Pull Request. Because that doesn't affect production bundle size.
+  const commitFiles = [
+    ...danger.git.created_files,
+    ...danger.git.deleted_files,
+    ...danger.git.modified_files,
+  ];
+  if (
+    commitFiles.every(filename => filename.includes('packages/react-devtools'))
+  )
+    return;
+
   const resultsMap = new Map();
 
   // Find all the head (current) artifacts paths.

fixtures/attribute-behavior/README.md

@@ -28,4 +28,4 @@ Right now, we use a purple outline to call out cases where the assigned property
 
 This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
 
-You can find the guide for how to do things in a CRA [here](https://github.com/facebook/create-react-app/blob/master/packages/cra-template/template/README.md).
+You can find the guide for how to do things in a CRA [here](https://github.com/facebook/create-react-app/blob/main/packages/cra-template/template/README.md).

fixtures/concurrent/time-slicing/README.md

@@ -10,7 +10,7 @@ It depends on a local build of React and enables us to easily test async "time s
 
 No. The APIs being tested here are unstable and some of them have still not been released to NPM. For now, this fixture is only a test harness.
 
-There are also known bugs and inefficiencies in master so **don't use this fixture for demonstration purposes either yet**. Until they are fixed, this fixture is **not** indicative of React async rendering performance.
+There are also known bugs and inefficiencies in main so **don't use this fixture for demonstration purposes either yet**. Until they are fixed, this fixture is **not** indicative of React async rendering performance.
 
 ## How do I run this fixture?
 

fixtures/devtools/regression/shared.js

@@ -32,7 +32,7 @@ if (typeof SchedulerTracing !== 'undefined') {
   trace = (_, __, callback) => callback();
 }
 
-// https://github.com/facebook/react/blob/master/CHANGELOG.md
+// https://github.com/facebook/react/blob/main/CHANGELOG.md
 switch (major) {
   case 16:
     switch (minor) {

packages/react-devtools-extensions/flow-typed/npm/react-test-renderer_v16.x.x.js

@@ -2,7 +2,7 @@
 // flow-typed version: 9c71eca8ef/react-test-renderer_v16.x.x/flow_>=v0.47.x
 
 // Type definitions for react-test-renderer 16.x.x
-// Ported from: https://github.com/DefinitelyTyped/DefinitelyTyped/blob/main/types/react-test-renderer
+// Ported from: https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/react-test-renderer
 
 'use strict';
 

packages/react-devtools-extensions/improveImages.mjs

@@ -0,0 +1,90 @@
+import fs from 'fs'
+import find from 'find'
+import filesize from 'filesize'
+import imagemin from 'imagemin'
+import imageminGifsicle from 'imagemin-gifsicle'
+import imageminJpegtran from 'imagemin-jpegtran'
+import imageminOptipng from 'imagemin-optipng'
+import imageminSvgo from 'imagemin-svgo'
+import parseFilepath from 'parse-filepath'
+import chalk from 'chalk'
+
+const plugins = [
+  imageminGifsicle({}),
+  imageminJpegtran({}),
+  imageminOptipng({}),
+  imageminSvgo({})
+]
+
+let savedSize = 0
+
+const run = async () => {
+  const regex = new RegExp(/\.gif|\.jpeg|\.jpg|\.png$/)
+
+  const files = find.fileSync(regex, 'icons/');
+
+  for (const file of files) {
+    await optimized(file)
+  }
+
+  if (savedSize > 0) {
+    console.info(`\n🎉 You saved ${readableSize(savedSize)}.`)
+  } else {
+    console.info(`\n🎉 Nothing to optimize.`)
+  }
+}
+
+const size = (filename) => {
+  return fs.statSync(filename).size
+}
+
+const readableSize = (size) => {
+  return filesize(size, { round: 5 })
+}
+
+const optimized = async (filename) => {
+  let output = parseFilepath(filename).dir || './'
+
+  const fileSizeBefore = size(filename)
+
+  if (fileSizeBefore === 0){
+    console.info(chalk.blue(`Skipping ${filename}, it has ${readableSize(fileSizeBefore)}`))
+    return
+  }
+
+  const pluginsOptions = {
+    destination: output,
+    plugins
+  }
+
+  const filenameBackup = `${filename}.bak`
+  fs.copyFileSync(filename, filenameBackup)
+
+  try {
+    await imagemin([filename], pluginsOptions)
+
+    const fileSizeAfter = size(filename)
+    const fileSizeDiff = fileSizeBefore - fileSizeAfter
+    if (fileSizeDiff > 0){
+      savedSize += fileSizeDiff
+      console.info(chalk.green(`Optimized ${filename}: ${chalk.yellow(readableSize(fileSizeAfter))}`))
+    } else { // file after same or bigger
+      // restore previous file
+      fs.renameSync(filenameBackup, filename)
+
+      console.info(`${filename} ${chalk.red(`already optimized`)}`)
+    }
+
+  } catch (err) {
+    console.info(chalk.red(`Skip ${filename} due to error when optimizing`));
+  }
+
+  // delete backup file
+  if (fs.existsSync(filenameBackup)) {
+    fs.unlinkSync(filenameBackup)
+  }
+}
+
+(async () => {
+  await run();
+})();

packages/react-devtools-extensions/package.json

@@ -16,6 +16,7 @@
     "test:chrome": "node ./chrome/test",
     "test:firefox": "node ./firefox/test",
     "test:edge": "node ./edge/test",
+    "improve-images": "node ./improveImages.mjs",
     "update-mock-source-maps": "node ./src/__tests__/updateMockSourceMaps.js"
   },
   "devDependencies": {
@@ -33,18 +34,27 @@
     "babel-eslint": "^9.0.0",
     "babel-loader": "^8.0.4",
     "babel-preset-minify": "^0.5.1",
+    "chalk": "^4.1.1",
     "child-process-promise": "^2.2.1",
     "chrome-launch": "^1.1.4",
     "crx": "^5.0.0",
     "css-loader": "^1.0.1",
     "file-loader": "^6.1.0",
+    "filesize": "^6.0.1",
+    "find": "^0.3.0",
     "firefox-profile": "^1.0.2",
     "fs-extra": "^4.0.2",
+    "imagemin": "^8.0.0",
+    "imagemin-gifsicle": "^7.0.0",
+    "imagemin-jpegtran": "^6.0.0",
+    "imagemin-optipng": "^7.0.0",
+    "imagemin-svgo": "^7.0.0",
     "jest-fetch-mock": "^3.0.3",
     "node-libs-browser": "0.5.3",
     "nullthrows": "^1.0.0",
     "open": "^7.0.2",
     "os-name": "^3.1.0",
+    "parse-filepath": "^1.0.2",
     "raw-loader": "^3.1.0",
     "rollup": "^1.19.4",
     "rollup-plugin-babel": "^4.0.1",

packages/react-devtools-extensions/src/__tests__/__source__/ComponentUsingHooksIndirectly.js

@@ -0,0 +1,44 @@
+/**
+ * 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.
+ *
+ * @flow
+ */
+
+import React, {useEffect, useState} from 'react';
+
+export function Component() {
+  const countState = useState(0);
+  const count = countState[0];
+  const setCount = countState[1];
+
+  const darkMode = useIsDarkMode();
+  const [isDarkMode] = darkMode;
+
+  useEffect(() => {
+    // ...
+  }, []);
+
+  const handleClick = () => setCount(count + 1);
+
+  return (
+    <>
+      <div>Dark mode? {isDarkMode}</div>
+      <div>Count: {count}</div>
+      <button onClick={handleClick}>Update count</button>
+    </>
+  );
+}
+
+function useIsDarkMode() {
+  const darkModeState = useState(false);
+  const [isDarkMode] = darkModeState;
+
+  useEffect(function useEffectCreate() {
+    // Here is where we may listen to a "theme" event...
+  }, []);
+
+  return [isDarkMode, () => {}];
+}