merge?

.circleci/config.yml

@@ -2,7 +2,7 @@ version: 2.1
 
 aliases:
   - &docker
-    - image: circleci/openjdk:8-jdk-node-browsers
+    - image: cimg/openjdk:17.0.0-node
 
   - &environment
     TZ: /usr/share/zoneinfo/America/Los_Angeles
@@ -209,7 +209,20 @@ jobs:
       - run: yarn workspaces info | head -n -1 > workspace_info.txt
       - *restore_node_modules
       - run: yarn lint-build
-      - run: scripts/circleci/check_minified_errors.sh
+
+  check_error_codes:
+    docker: *docker
+    environment: *environment
+    steps:
+      - checkout
+      - attach_workspace: *attach_workspace
+      - run: yarn workspaces info | head -n -1 > workspace_info.txt
+      - *restore_node_modules
+      - run:
+          name: Search build artifacts for unminified errors
+          command: |
+            yarn extract-errors
+            git diff || (echo "Found unminified errors. Either update the error codes map or disable error minification for the affected build, if appropriate." && false)
 
   yarn_test:
     docker: *docker
@@ -414,6 +427,9 @@ workflows:
       - yarn_lint_build:
           requires:
             - yarn_build_combined
+      - check_error_codes:
+          requires:
+            - yarn_build_combined
       - RELEASE_CHANNEL_stable_yarn_test_dom_fixtures:
           requires:
             - yarn_build_combined

.eslintignore

@@ -22,5 +22,5 @@ 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

@@ -151,7 +151,7 @@ module.exports = {
         'packages/react-test-renderer/**/*.js',
         'packages/react-debug-tools/**/*.js',
         'packages/react-devtools-extensions/**/*.js',
-        'packages/react-devtools-scheduling-profiler/**/*.js',
+        'packages/react-devtools-timeline/**/*.js',
         'packages/react-native-renderer/**/*.js',
         'packages/eslint-plugin-react-hooks/**/*.js',
         'packages/jest-react/**/*.js',

.gitignore

@@ -35,4 +35,4 @@ packages/react-devtools-extensions/shared/build
 packages/react-devtools-extensions/.tempUserDataDir
 packages/react-devtools-inline/dist
 packages/react-devtools-shell/dist
-packages/react-devtools-scheduling-profiler/dist
+packages/react-devtools-timeline/dist

.prettierignore

@@ -7,5 +7,5 @@ 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

ReactVersions.js

@@ -36,6 +36,7 @@ const stablePackages = {
   'react-refresh': '0.11.0',
   'react-test-renderer': ReactVersion,
   'use-subscription': '1.6.0',
+  'use-sync-external-store': '1.0.0',
   scheduler: '0.21.0',
 };
 
@@ -47,7 +48,6 @@ const experimentalPackages = [
   'react-fs',
   'react-pg',
   'react-server-dom-webpack',
-  'use-sync-external-store',
 ];
 
 module.exports = {

package.json

@@ -114,7 +114,7 @@
     "linc": "node ./scripts/tasks/linc.js",
     "lint": "node ./scripts/tasks/eslint.js",
     "lint-build": "node ./scripts/rollup/validate/index.js",
-    "extract-errors": "yarn build --type=dev --extract-errors",
+    "extract-errors": "node scripts/error-codes/extract-errors.js",
     "postinstall": "node node_modules/fbjs-scripts/node/check-dev-engines.js package.json && node ./scripts/flow/createFlowConfigs.js && node ./scripts/yarn/downloadReactIsForPrettyFormat.js",
     "debug-test": "yarn test --deprecated 'yarn test --debug'",
     "test": "node ./scripts/jest/jest-cli.js",

packages/react-art/src/ReactARTHostConfig.js

@@ -436,24 +436,6 @@ export function getInstanceFromNode(node) {
   throw new Error('Not implemented.');
 }
 
-export function isOpaqueHydratingObject(value: mixed): boolean {
-  throw new Error('Not implemented.');
-}
-
-export function makeOpaqueHydratingObject(
-  attemptToReadValue: () => void,
-): OpaqueIDType {
-  throw new Error('Not implemented.');
-}
-
-export function makeClientId(): OpaqueIDType {
-  throw new Error('Not implemented.');
-}
-
-export function makeClientIdInDEV(warnOnAccessInDEV: () => void): OpaqueIDType {
-  throw new Error('Not implemented.');
-}
-
 export function beforeActiveInstanceBlur(internalInstanceHandle: Object) {
   // noop
 }

packages/react-debug-tools/src/ReactDebugHooks.js

@@ -18,13 +18,9 @@ import type {
   Fiber,
   Dispatcher as DispatcherType,
 } from 'react-reconciler/src/ReactInternalTypes';
-import type {OpaqueIDType} from 'react-reconciler/src/ReactFiberHostConfig';
-
-import {NoMode} from 'react-reconciler/src/ReactTypeOfMode';
 
 import ErrorStackParser from 'error-stack-parser';
 import ReactSharedInternals from 'shared/ReactSharedInternals';
-import {REACT_OPAQUE_ID_TYPE} from 'shared/ReactSymbols';
 import {
   FunctionComponent,
   SimpleMemoComponent,
@@ -53,8 +49,6 @@ type Dispatch<A> = A => void;
 
 let primitiveStackCache: null | Map<string, Array<any>> = null;
 
-let currentFiber: Fiber | null = null;
-
 type Hook = {
   memoizedState: any,
   next: Hook | null,
@@ -324,21 +318,15 @@ function useDeferredValue<T>(value: T): T {
   return value;
 }
 
-function useOpaqueIdentifier(): OpaqueIDType | void {
-  const hook = nextHook(); // State
-  if (currentFiber && currentFiber.mode === NoMode) {
-    nextHook(); // Effect
-  }
-  let value = hook === null ? undefined : hook.memoizedState;
-  if (value && value.$$typeof === REACT_OPAQUE_ID_TYPE) {
-    value = undefined;
-  }
+function useId(): string {
+  const hook = nextHook();
+  const id = hook !== null ? hook.memoizedState : '';
   hookLog.push({
-    primitive: 'OpaqueIdentifier',
+    primitive: 'Id',
     stackError: new Error(),
-    value,
+    value: id,
   });
-  return value;
+  return id;
 }
 
 const Dispatcher: DispatcherType = {
@@ -360,7 +348,7 @@ const Dispatcher: DispatcherType = {
   useMutableSource,
   useSyncExternalStore,
   useDeferredValue,
-  useOpaqueIdentifier,
+  useId,
 };
 
 // Inspect
@@ -755,8 +743,6 @@ export function inspectHooksOfFiber(
     currentDispatcher = ReactSharedInternals.ReactCurrentDispatcher;
   }
 
-  currentFiber = fiber;
-
   if (
     fiber.tag !== FunctionComponent &&
     fiber.tag !== SimpleMemoComponent &&

packages/react-debug-tools/src/__tests__/ReactHooksInspectionIntegration-test.js

@@ -598,10 +598,10 @@ describe('ReactHooksInspectionIntegration', () => {
     ]);
   });
 
-  it('should support composite useOpaqueIdentifier hook', () => {
+  it('should support useId hook', () => {
     function Foo(props) {
-      const id = React.unstable_useOpaqueIdentifier();
-      const [state] = React.useState(() => 'hello', []);
+      const id = React.useId();
+      const [state] = React.useState('hello');
       return <div id={id}>{state}</div>;
     }
 
@@ -613,39 +613,8 @@ describe('ReactHooksInspectionIntegration', () => {
 
     expect(tree[0].id).toEqual(0);
     expect(tree[0].isStateEditable).toEqual(false);
-    expect(tree[0].name).toEqual('OpaqueIdentifier');
-    expect(String(tree[0].value).startsWith('c_')).toBe(true);
-
-    expect(tree[1]).toEqual({
-      id: 1,
-      isStateEditable: true,
-      name: 'State',
-      value: 'hello',
-      subHooks: [],
-    });
-  });
-
-  it('should support composite useOpaqueIdentifier hook in concurrent mode', () => {
-    function Foo(props) {
-      const id = React.unstable_useOpaqueIdentifier();
-      const [state] = React.useState(() => 'hello', []);
-      return <div id={id}>{state}</div>;
-    }
-
-    const renderer = ReactTestRenderer.create(<Foo />, {
-      unstable_isConcurrent: true,
-    });
-    expect(Scheduler).toFlushWithoutYielding();
-
-    const childFiber = renderer.root.findByType(Foo)._currentFiber();
-    const tree = ReactDebugTools.inspectHooksOfFiber(childFiber);
-
-    expect(tree.length).toEqual(2);
-
-    expect(tree[0].id).toEqual(0);
-    expect(tree[0].isStateEditable).toEqual(false);
-    expect(tree[0].name).toEqual('OpaqueIdentifier');
-    expect(String(tree[0].value).startsWith('c_')).toBe(true);
+    expect(tree[0].name).toEqual('Id');
+    expect(String(tree[0].value).startsWith('r:')).toBe(true);
 
     expect(tree[1]).toEqual({
       id: 1,
@@ -1018,6 +987,7 @@ describe('ReactHooksInspectionIntegration', () => {
     ]);
   });
 
+  // @gate enableUseMutableSource
   it('should support composite useMutableSource hook', () => {
     const createMutableSource =
       React.createMutableSource || React.unstable_createMutableSource;
@@ -1055,9 +1025,8 @@ describe('ReactHooksInspectionIntegration', () => {
     ]);
   });
 
-  // @gate experimental || www
   it('should support composite useSyncExternalStore hook', () => {
-    const useSyncExternalStore = React.unstable_useSyncExternalStore;
+    const useSyncExternalStore = React.useSyncExternalStore;
     function Foo() {
       const value = useSyncExternalStore(
         () => () => {},

packages/react-devtools-core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-devtools-core",
-  "version": "4.20.2",
+  "version": "4.21.0",
   "description": "Use react-devtools outside of the browser",
   "license": "MIT",
   "main": "./dist/backend.js",

packages/react-devtools-core/webpack.standalone.js

@@ -30,6 +30,7 @@ const __DEV__ = NODE_ENV === 'development';
 
 const DEVTOOLS_VERSION = getVersionString();
 
+const EDITOR_URL = process.env.EDITOR_URL || null;
 const LOGGING_URL = process.env.LOGGING_URL || null;
 
 const featureFlagTarget =
@@ -83,6 +84,7 @@ module.exports = {
       __TEST__: NODE_ENV === 'test',
       'process.env.DEVTOOLS_PACKAGE': `"react-devtools-core"`,
       'process.env.DEVTOOLS_VERSION': `"${DEVTOOLS_VERSION}"`,
+      'process.env.EDITOR_URL': EDITOR_URL != null ? `"${EDITOR_URL}"` : null,
       'process.env.GITHUB_URL': `"${GITHUB_URL}"`,
       'process.env.LOGGING_URL': `"${LOGGING_URL}"`,
       'process.env.NODE_ENV': `"${NODE_ENV}"`,

packages/react-devtools-extensions/chrome/manifest.json

@@ -2,8 +2,8 @@
   "manifest_version": 2,
   "name": "React Developer Tools",
   "description": "Adds React debugging tools to the Chrome Developer Tools.",
-  "version": "4.20.2",
-  "version_name": "4.20.2",
+  "version": "4.21.0",
+  "version_name": "4.21.0",
   "minimum_chrome_version": "60",
   "icons": {
     "16": "icons/16-production.png",

packages/react-devtools-extensions/edge/manifest.json

@@ -2,8 +2,8 @@
   "manifest_version": 2,
   "name": "React Developer Tools",
   "description": "Adds React debugging tools to the Microsoft Edge Developer Tools.",
-  "version": "4.20.2",
-  "version_name": "4.20.2",
+  "version": "4.21.0",
+  "version_name": "4.21.0",
   "minimum_chrome_version": "60",
   "icons": {
     "16": "icons/16-production.png",

packages/react-devtools-extensions/firefox/manifest.json

@@ -2,7 +2,7 @@
   "manifest_version": 2,
   "name": "React Developer Tools",
   "description": "Adds React debugging tools to the Firefox Developer Tools.",
-  "version": "4.20.2",
+  "version": "4.21.0",
   "applications": {
     "gecko": {
       "id": "@react-devtools",

packages/react-devtools-extensions/src/backend.js

@@ -13,16 +13,15 @@ function welcome(event) {
   ) {
     return;
   }
-  const extensionId = event.data.extensionId;
 
   window.removeEventListener('message', welcome);
 
-  setup(window.__REACT_DEVTOOLS_GLOBAL_HOOK__, extensionId);
+  setup(window.__REACT_DEVTOOLS_GLOBAL_HOOK__);
 }
 
 window.addEventListener('message', welcome);
 
-function setup(hook, extensionId) {
+function setup(hook) {
   if (hook == null) {
     // DevTools didn't get injected into this page (maybe b'c of the contentType).
     return;
@@ -56,7 +55,6 @@ function setup(hook, extensionId) {
         {
           source: 'react-devtools-bridge',
           payload: {event, payload},
-          extensionId,
         },
         '*',
         transferable,

packages/react-devtools-extensions/src/background.js

@@ -1,20 +1,11 @@
-// @flow strict-local
+/* global chrome */
 
 'use strict';
 
-declare var chrome: any;
-
-const ports: {
-  [tab: string]: {|devtools: any, 'content-script': any|},
-} = {};
+const ports = {};
 
 const IS_FIREFOX = navigator.userAgent.indexOf('Firefox') >= 0;
 
-import {
-  EXTENSION_INSTALL_CHECK,
-  SHOW_DUPLICATE_EXTENSION_WARNING,
-} from './constants';
-
 chrome.runtime.onConnect.addListener(function(port) {
   let tab = null;
   let name = null;
@@ -125,15 +116,6 @@ chrome.tabs.onUpdated.addListener((tabId, changeInfo, tab) => {
   }
 });
 
-chrome.runtime.onMessageExternal.addListener(
-  (request, sender, sendResponse) => {
-    if (request === EXTENSION_INSTALL_CHECK) {
-      sendResponse(true);
-      chrome.runtime.sendMessage(SHOW_DUPLICATE_EXTENSION_WARNING);
-    }
-  },
-);
-
 chrome.runtime.onMessage.addListener((request, sender) => {
   const tab = sender.tab;
   if (tab) {