Merge branch 'main' into eslint-config-update

.circleci/config.yml

@@ -464,7 +464,7 @@ workflows:
             - setup
           commit_sha: << pipeline.parameters.prerelease_commit_sha >>
           release_channel: stable
-          dist_tag: "next,alpha"
+          dist_tag: "next,beta"
       - publish_prerelease:
           name: Publish to Experimental channel
           requires:
@@ -496,7 +496,7 @@ workflows:
             - setup
           commit_sha: << pipeline.git.revision >>
           release_channel: stable
-          dist_tag: "next,alpha"
+          dist_tag: "next,beta"
       - publish_prerelease:
           name: Publish to Experimental channel
           requires:

.eslintrc.js

@@ -110,7 +110,6 @@ module.exports = {
       {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,

ReactVersions.js

@@ -22,7 +22,7 @@ const ReactVersion = '18.0.0';
 
 // The label used by the @next channel. Represents the upcoming release's
 // stability. Could be "alpha", "beta", "rc", etc.
-const nextChannelLabel = 'alpha';
+const nextChannelLabel = 'beta';
 
 const stablePackages = {
   'create-subscription': ReactVersion,

package.json

@@ -109,7 +109,7 @@
   "scripts": {
     "build": "node ./scripts/rollup/build.js",
     "build-combined": "node ./scripts/rollup/build-all-release-channels.js",
-    "build-for-devtools": "cross-env RELEASE_CHANNEL=experimental yarn build react/index,react/jsx,react-dom,react-is,react-debug-tools,scheduler,react-test-renderer,react-refresh --type=NODE && cp -r ./build/node_modules build/oss-experimental/",
+    "build-for-devtools": "cross-env RELEASE_CHANNEL=experimental yarn build react/index,react/jsx,react-dom/index,react-dom/test,react-is,react-debug-tools,scheduler,react-test-renderer,react-refresh --type=NODE && cp -r ./build/node_modules build/oss-experimental/",
     "build-for-devtools-dev": "yarn build-for-devtools --type=NODE_DEV",
     "build-for-devtools-prod": "yarn build-for-devtools --type=NODE_PROD",
     "linc": "node ./scripts/tasks/linc.js",

packages/react-devtools-inline/__tests__/__e2e__/inspecting-props.test.js

@@ -0,0 +1,50 @@
+'use strict';
+
+const {test, expect} = require('@playwright/test');
+const config = require('../../playwright.config');
+test.use(config);
+
+test.describe('Testing Todo-List App', () => {
+  let page, frameElementHandle, frame;
+  test.beforeAll(async ({browser}) => {
+    page = await browser.newPage();
+    await page.goto('http://localhost:8080/', {waitUntil: 'domcontentloaded'});
+    await page.waitForSelector('iframe#target');
+    frameElementHandle = await page.$('#target');
+    frame = await frameElementHandle.contentFrame();
+  });
+
+  test('The Todo List should contain 3 items by default', async () => {
+    const list = frame.locator('.listitem');
+    await expect(list).toHaveCount(3);
+  });
+
+  test('Add another item Fourth to list', async () => {
+    await frame.type('.input', 'Fourth');
+    await frame.click('button.iconbutton');
+    const listItems = await frame.locator('.label');
+    await expect(listItems).toHaveText(['First', 'Second', 'Third', 'Fourth']);
+  });
+
+  test('Inspecting list elements with devtools', async () => {
+    // Component props are used as string in devtools.
+    const listItemsProps = [
+      '',
+      '{id: 1, isComplete: true, text: "First"}',
+      '{id: 2, isComplete: true, text: "Second"}',
+      '{id: 3, isComplete: false, text: "Third"}',
+      '{id: 4, isComplete: false, text: "Fourth"}',
+    ];
+    const countOfItems = await frame.$$eval('.listitem', el => el.length);
+    // For every item in list click on devtools inspect icon
+    // click on the list item to quickly navigate to the list item component in devtools
+    // comparing displayed props with the array of props.
+    for (let i = 1; i <= countOfItems; ++i) {
+      await page.click('[class^=ToggleContent]', {delay: 100});
+      await frame.click(`.listitem:nth-child(${i})`, {delay: 50});
+      await page.waitForSelector('span.Value___tNzum');
+      const text = await page.innerText('span[class^=Value]');
+      await expect(text).toEqual(listItemsProps[i]);
+    }
+  });
+});

packages/react-devtools-inline/package.json

@@ -19,7 +19,8 @@
   "scripts": {
     "build": "cross-env NODE_ENV=production webpack --config webpack.config.js",
     "prepublish": "yarn run build",
-    "start": "cross-env NODE_ENV=development webpack --config webpack.config.js --watch"
+    "start": "cross-env NODE_ENV=development webpack --config webpack.config.js --watch",
+    "test:e2e": "playwright test --config=playwright.config.js"
   },
   "dependencies": {
     "source-map-js": "^0.6.2",
@@ -33,6 +34,7 @@
     "@babel/preset-env": "^7.11.0",
     "@babel/preset-flow": "^7.10.4",
     "@babel/preset-react": "^7.10.4",
+    "@playwright/test": "^1.16.3",
     "babel-core": "^7.0.0-bridge",
     "babel-eslint": "^9.0.0",
     "babel-loader": "^8.0.4",

packages/react-devtools-inline/playwright.config.js

@@ -0,0 +1,11 @@
+const config = {
+  use: {
+    headless: false,
+    browserName: 'chromium',
+    launchOptions: {
+      slowMo: 100,
+    },
+  },
+};
+
+module.exports = config;

packages/react-devtools-inline/webpack.config.js

@@ -33,6 +33,14 @@ const babelOptions = {
   ),
 };
 
+const builtModulesDir = resolve(
+  __dirname,
+  '..',
+  '..',
+  'build',
+  'oss-experimental',
+);
+
 module.exports = {
   mode: __DEV__ ? 'development' : 'production',
   devtool: __DEV__ ? 'eval-cheap-source-map' : 'source-map',
@@ -49,12 +57,10 @@ module.exports = {
     libraryTarget: 'commonjs2',
   },
   externals: {
-    react: 'react',
-    // TODO: Once this package is published, remove the external
-    // 'react-debug-tools': 'react-debug-tools',
-    'react-dom': 'react-dom',
-    'react-is': 'react-is',
-    scheduler: 'scheduler',
+    react: resolve(builtModulesDir, 'react'),
+    'react-dom': resolve(builtModulesDir, 'react-dom/unstable_testing'),
+    'react-is': resolve(builtModulesDir, 'react-is'),
+    scheduler: resolve(builtModulesDir, 'scheduler'),
   },
   node: {
     // source-maps package has a dependency on 'fs'

packages/react-devtools-shell/webpack.config.js

@@ -55,7 +55,7 @@ const config = {
       react: resolve(builtModulesDir, 'react'),
       'react-debug-tools': resolve(builtModulesDir, 'react-debug-tools'),
       'react-devtools-feature-flags': resolveFeatureFlags('shell'),
-      'react-dom': resolve(builtModulesDir, 'react-dom'),
+      'react-dom': resolve(builtModulesDir, 'react-dom/unstable_testing'),
       'react-is': resolve(builtModulesDir, 'react-is'),
       scheduler: resolve(builtModulesDir, 'scheduler'),
     },
@@ -107,7 +107,7 @@ const config = {
             options: {
               sourceMap: true,
               modules: true,
-              localIdentName: '[local]___[hash:base64:5]',
+              localIdentName: '[local]',
             },
           },
         ],

packages/react-dom/index.classic.fb.js

@@ -34,6 +34,5 @@ export {
   unstable_isNewReconciler,
   unstable_renderSubtreeIntoContainer,
   unstable_runWithPriority, // DO NOT USE: Temporarily exposed to migrate off of Scheduler.runWithPriority.
-  unstable_scheduleHydration,
   version,
 } from './src/client/ReactDOM';

packages/react-dom/index.experimental.js

@@ -21,6 +21,5 @@ export {
   unstable_flushControlled,
   unstable_renderSubtreeIntoContainer,
   unstable_runWithPriority, // DO NOT USE: Temporarily exposed to migrate off of Scheduler.runWithPriority.
-  unstable_scheduleHydration,
   version,
 } from './src/client/ReactDOM';

packages/react-dom/index.js

@@ -25,6 +25,5 @@ export {
   unstable_isNewReconciler,
   unstable_renderSubtreeIntoContainer,
   unstable_runWithPriority, // DO NOT USE: Temporarily exposed to migrate off of Scheduler.runWithPriority.
-  unstable_scheduleHydration,
   version,
 } from './src/client/ReactDOM';

packages/react-dom/index.modern.fb.js

@@ -18,6 +18,5 @@ export {
   unstable_flushControlled,
   unstable_isNewReconciler,
   unstable_runWithPriority, // DO NOT USE: Temporarily exposed to migrate off of Scheduler.runWithPriority.
-  unstable_scheduleHydration,
   version,
 } from './src/client/ReactDOM';

packages/react-dom/package.json

@@ -34,6 +34,7 @@
     "server.browser.js",
     "server.node.js",
     "test-utils.js",
+    "unstable_testing.js",
     "cjs/",
     "umd/"
   ],

packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js

@@ -42,7 +42,9 @@ describe('ReactDOMFizzServer', () => {
     }
     Stream = require('stream');
     Suspense = React.Suspense;
-    SuspenseList = React.SuspenseList;
+    if (gate(flags => flags.enableSuspenseList)) {
+      SuspenseList = React.SuspenseList;
+    }
 
     PropTypes = require('prop-types');
 
@@ -656,6 +658,7 @@ describe('ReactDOMFizzServer', () => {
     expect(ref.current).toBe(b);
   });
 
+  // @gate enableSuspenseList
   // @gate experimental
   it('shows inserted items before pending in a SuspenseList as fallbacks while hydrating', async () => {
     const ref = React.createRef();

packages/react-dom/src/__tests__/ReactDOMServerPartialHydration-test.internal.js

@@ -84,7 +84,9 @@ describe('ReactDOMServerPartialHydration', () => {
     ReactDOMServer = require('react-dom/server');
     Scheduler = require('scheduler');
     Suspense = React.Suspense;
-    SuspenseList = React.SuspenseList;
+    if (gate(flags => flags.enableSuspenseList)) {
+      SuspenseList = React.SuspenseList;
+    }
 
     IdleEventPriority = require('react-reconciler/constants').IdleEventPriority;
   });
@@ -1545,6 +1547,7 @@ describe('ReactDOMServerPartialHydration', () => {
     expect(ref.current).toBe(span);
   });
 
+  // @gate enableSuspenseList
   it('shows inserted items in a SuspenseList before content is hydrated', async () => {
     let suspend = false;
     let resolve;
@@ -1630,6 +1633,7 @@ describe('ReactDOMServerPartialHydration', () => {
     expect(ref.current).toBe(spanB);
   });
 
+  // @gate enableSuspenseList
   it('shows is able to hydrate boundaries even if others in a list are pending', async () => {
     let suspend = false;
     let resolve;
@@ -1704,7 +1708,7 @@ describe('ReactDOMServerPartialHydration', () => {
     expect(container.textContent).toBe('ALoading B');
   });
 
-  // @gate experimental || www
+  // @gate enableSuspenseList
   it('clears server boundaries when SuspenseList runs out of time hydrating', async () => {
     let suspend = false;
     let resolve;
@@ -1767,10 +1771,9 @@ describe('ReactDOMServerPartialHydration', () => {
     const b = container.getElementsByTagName('span')[1];
     expect(b.textContent).toBe('B');
 
-    const root = ReactDOM.createRoot(container, {hydrate: true});
-
+    const root = ReactDOM.hydrateRoot(container, <App />);
     // Increase hydration priority to higher than "offscreen".
-    ReactDOM.unstable_scheduleHydration(b);
+    root.unstable_scheduleHydration(b);
 
     suspend = true;
 
@@ -1807,6 +1810,7 @@ describe('ReactDOMServerPartialHydration', () => {
     expect(ref.current).toBe(b);
   });
 
+  // @gate enableSuspenseList
   it('clears server boundaries when SuspenseList suspends last row hydrating', async () => {
     let suspend = false;
     let resolve;

packages/react-dom/src/__tests__/ReactDOMServerSelectiveHydration-test.internal.js

@@ -886,7 +886,6 @@ describe('ReactDOMServerSelectiveHydration', () => {
     document.body.removeChild(container);
   });
 
-  // @gate experimental || www
   it('hydrates the last explicitly hydrated target at higher priority', async () => {
     function Child({text}) {
       Scheduler.unstable_yieldValue(text);
@@ -920,15 +919,14 @@ describe('ReactDOMServerSelectiveHydration', () => {
     const spanB = container.getElementsByTagName('span')[1];
     const spanC = container.getElementsByTagName('span')[2];
 
-    const root = ReactDOM.createRoot(container, {hydrate: true});
-    root.render(<App />);
+    const root = ReactDOM.hydrateRoot(container, <App />);
 
     // Nothing has been hydrated so far.
     expect(Scheduler).toHaveYielded([]);
 
     // Increase priority of B and then C.
-    ReactDOM.unstable_scheduleHydration(spanB);
-    ReactDOM.unstable_scheduleHydration(spanC);
+    root.unstable_scheduleHydration(spanB);
+    root.unstable_scheduleHydration(spanC);
 
     // We should prioritize hydrating C first because the last added
     // gets highest priority followed by the next added.

packages/react-dom/src/__tests__/ReactDOMServerSuspense-test.internal.js

@@ -16,6 +16,7 @@ let ReactDOM;
 let ReactDOMServer;
 let ReactTestUtils;
 let act;
+let SuspenseList;
 
 function initModules() {
   // Reset warning cache.
@@ -26,6 +27,9 @@ function initModules() {
   ReactDOMServer = require('react-dom/server');
   ReactTestUtils = require('react-dom/test-utils');
   act = require('jest-react').act;
+  if (gate(flags => flags.enableSuspenseList)) {
+    SuspenseList = React.SuspenseList;
+  }
 
   // Make them available to the helpers.
   return {
@@ -137,16 +141,17 @@ describe('ReactDOMServerSuspense', () => {
     );
   });
 
+  // @gate enableSuspenseList
   it('server renders a SuspenseList component and its children', async () => {
     const example = (
-      <React.SuspenseList>
+      <SuspenseList>
         <React.Suspense fallback="Loading A">
           <div>A</div>
         </React.Suspense>
         <React.Suspense fallback="Loading B">
           <div>B</div>
         </React.Suspense>
-      </React.SuspenseList>
+      </SuspenseList>
     );
     const element = await serverRender(example);
     const parent = element.parentNode;