syncing with main

.eslintrc.js

@@ -236,7 +236,14 @@ module.exports = {
     'no-inner-declarations': [ERROR, 'functions'],
     'no-multi-spaces': ERROR,
     'no-restricted-globals': [ERROR].concat(restrictedGlobals),
-    'no-restricted-syntax': [ERROR, 'WithStatement'],
+    'no-restricted-syntax': [
+      ERROR,
+      'WithStatement',
+      {
+        selector: 'MemberExpression[property.name=/^(?:substring|substr)$/]',
+        message: 'Prefer string.slice() over .substring() and .substr().',
+      },
+    ],
     'no-shadow': ERROR,
     'no-unused-vars': [ERROR, {args: 'none'}],
     'no-use-before-define': OFF,

.github/workflows/commit_artifacts.yml

@@ -1,13 +1,22 @@
-name: Commit Artifacts for Facebook WWW and fbsource
+name: Commit Artifacts for Meta WWW and fbsource
 
 on:
   push:
-    branches: [main]
+    branches: [main, meta-www, meta-fbsource]
 
 jobs:
   download_artifacts:
     runs-on: ubuntu-latest
+    outputs:
+      www_branch_count: ${{ steps.check_branches.outputs.www_branch_count }}
+      fbsource_branch_count: ${{ steps.check_branches.outputs.fbsource_branch_count }}
     steps:
+      - uses: actions/checkout@v3
+      - name: "Check branches"
+        id: check_branches
+        run: |
+          echo "www_branch_count=$(git ls-remote --heads origin "refs/heads/meta-www" | wc -l)" >> "$GITHUB_OUTPUT"
+          echo "fbsource_branch_count=$(git ls-remote --heads origin "refs/heads/meta-fbsource" | wc -l)" >> "$GITHUB_OUTPUT"
       - name: Download and unzip artifacts
         uses: actions/github-script@v6
         env:
@@ -168,6 +177,7 @@ jobs:
 
   commit_www_artifacts:
     needs: download_artifacts
+    if: ${{ (github.ref == 'refs/heads/main' && needs.download_artifacts.outputs.www_branch_count == '0') || github.ref == 'refs/heads/meta-www' }}
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v3
@@ -204,6 +214,7 @@ jobs:
   commit_fbsource_artifacts:
     needs: download_artifacts
     runs-on: ubuntu-latest
+    if: ${{ (github.ref == 'refs/heads/main' && needs.download_artifacts.outputs.fbsource_branch_count == '0') || github.ref == 'refs/heads/meta-fbsource' }}
     steps:
       - uses: actions/checkout@v3
         with:

README.md

@@ -1,4 +1,4 @@
-# [React](https://reactjs.org/) · [![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/facebook/react/blob/main/LICENSE) [![npm version](https://img.shields.io/npm/v/react.svg?style=flat)](https://www.npmjs.com/package/react) [![CircleCI Status](https://circleci.com/gh/facebook/react.svg?style=shield&circle-token=:circle-token)](https://circleci.com/gh/facebook/react) [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](https://reactjs.org/docs/how-to-contribute.html#your-first-pull-request)
+# [React](https://reactjs.org/) · [![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/facebook/react/blob/main/LICENSE) [![npm version](https://img.shields.io/npm/v/react.svg?style=flat)](https://www.npmjs.com/package/react) [![CircleCI Status](https://circleci.com/gh/facebook/react.svg?style=shield)](https://circleci.com/gh/facebook/react) [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](https://reactjs.org/docs/how-to-contribute.html#your-first-pull-request)
 
 React is a JavaScript library for building user interfaces.
 

fixtures/concurrent/time-slicing/src/index.js

@@ -22,7 +22,7 @@ class App extends PureComponent {
     }
     const multiplier = input.length !== 0 ? input.length : 1;
     const complexity =
-      (parseInt(window.location.search.substring(1), 10) / 100) * 25 || 25;
+      (parseInt(window.location.search.slice(1), 10) / 100) * 25 || 25;
     const data = _.range(5).map(t =>
       _.range(complexity * multiplier).map((j, i) => {
         return {

fixtures/dom/src/react-loader.js

@@ -11,7 +11,7 @@ import semver from 'semver';
 
 function parseQuery(qstr) {
   var query = {};
-  var a = qstr.substr(1).split('&');
+  var a = qstr.slice(1).split('&');
 
   for (var i = 0; i < a.length; i++) {
     var b = a[i].split('=');

fixtures/flight/src/App.js

@@ -7,8 +7,9 @@ import {Counter as Counter2} from './Counter2.js';
 
 import ShowMore from './ShowMore.js';
 import Button from './Button.js';
+import Form from './Form.js';
 
-import {like} from './actions.js';
+import {like, greet} from './actions.js';
 
 export default async function App() {
   const res = await fetch('http://localhost:3001/todos');
@@ -33,6 +34,7 @@ export default async function App() {
           <ShowMore>
             <p>Lorem ipsum</p>
           </ShowMore>
+          <Form action={greet} />
           <div>
             <Button action={like}>Like</Button>
           </div>

fixtures/flight/src/Button.js

@@ -1,25 +1,30 @@
 'use client';
 
 import * as React from 'react';
+import {flushSync} from 'react-dom';
+import ErrorBoundary from './ErrorBoundary.js';
 
 export default function Button({action, children}) {
   const [isPending, setIsPending] = React.useState(false);
 
   return (
-    <button
-      disabled={isPending}
-      onClick={async () => {
-        setIsPending(true);
-        try {
-          const result = await action();
-          console.log(result);
-        } catch (error) {
-          console.error(error);
-        } finally {
-          setIsPending(false);
-        }
-      }}>
-      {children}
-    </button>
+    <ErrorBoundary>
+      <form>
+        <button
+          disabled={isPending}
+          formAction={async () => {
+            // TODO: Migrate to useFormPending once that exists
+            flushSync(() => setIsPending(true));
+            try {
+              const result = await action();
+              console.log(result);
+            } finally {
+              React.startTransition(() => setIsPending(false));
+            }
+          }}>
+          {children}
+        </button>
+      </form>
+    </ErrorBoundary>
   );
 }

fixtures/flight/src/ErrorBoundary.js

@@ -0,0 +1,16 @@
+'use client';
+
+import * as React from 'react';
+
+export default class ErrorBoundary extends React.Component {
+  state = {error: null};
+  static getDerivedStateFromError(error) {
+    return {error};
+  }
+  render() {
+    if (this.state.error) {
+      return <div>Caught an error: {this.state.error.message}</div>;
+    }
+    return this.props.children;
+  }
+}

fixtures/flight/src/Form.js

@@ -0,0 +1,34 @@
+'use client';
+
+import * as React from 'react';
+import {flushSync} from 'react-dom';
+import ErrorBoundary from './ErrorBoundary.js';
+
+export default function Form({action, children}) {
+  const [isPending, setIsPending] = React.useState(false);
+
+  return (
+    <ErrorBoundary>
+      <form
+        action={async formData => {
+          // TODO: Migrate to useFormPending once that exists
+          flushSync(() => setIsPending(true));
+          try {
+            const result = await action(formData);
+            alert(result);
+          } finally {
+            React.startTransition(() => setIsPending(false));
+          }
+        }}>
+        <label>
+          Name: <input name="name" />
+        </label>
+        <label>
+          File: <input type="file" name="file" />
+        </label>
+        <button>Say Hi</button>
+        {isPending ? 'Saving...' : null}
+      </form>
+    </ErrorBoundary>
+  );
+}

fixtures/flight/src/actions.js

@@ -3,3 +3,14 @@
 export async function like() {
   return new Promise((resolve, reject) => resolve('Liked'));
 }
+
+export async function greet(formData) {
+  const name = formData.get('name') || 'you';
+  const file = formData.get('file');
+  if (file) {
+    return `Ok, ${name}, here is ${file.name}:
+      ${(await file.text()).toUpperCase()}
+    `;
+  }
+  return 'Hi ' + name + '!';
+}

fixtures/flight/src/index.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import {Suspense} from 'react';
+import {use, Suspense} from 'react';
 import ReactDOM from 'react-dom/client';
 import {createFromFetch, encodeReply} from 'react-server-dom-webpack/client';
 
@@ -27,7 +27,8 @@ let data = createFromFetch(
   }
 );
 
-// TODO: This transition shouldn't really be necessary but it is for now.
-React.startTransition(() => {
-  ReactDOM.hydrateRoot(document, data);
-});
+function Shell({data}) {
+  return use(data);
+}
+
+ReactDOM.hydrateRoot(document, <Shell data={data} />);

package.json

@@ -82,7 +82,6 @@
     "minimist": "^1.2.3",
     "mkdirp": "^0.5.1",
     "ncp": "^2.0.0",
-    "pacote": "^10.3.0",
     "prettier": "2.8.3",
     "pretty-format": "^29.4.1",
     "prop-types": "^15.6.2",
@@ -103,7 +102,7 @@
     "yargs": "^15.3.1"
   },
   "devEngines": {
-    "node": "16.x || 18.x || 19.x"
+    "node": "16.x || 18.x || 19.x || 20.x"
   },
   "jest": {
     "testRegex": "/scripts/jest/dont-run-jest-directly\\.js$"
@@ -118,7 +117,7 @@
     "lint": "node ./scripts/tasks/eslint.js",
     "lint-build": "node ./scripts/rollup/validate/index.js",
     "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",
+    "postinstall": "node node_modules/fbjs-scripts/node/check-dev-engines.js package.json && node ./scripts/flow/createFlowConfigs.js",
     "debug-test": "yarn test --deprecated 'yarn test --debug'",
     "test": "node ./scripts/jest/jest-cli.js",
     "test-stable": "node ./scripts/jest/jest-cli.js --release-channel=stable",

packages/eslint-plugin-react-hooks/__tests__/ESLintRuleExhaustiveDeps-test.js

@@ -18,7 +18,7 @@ const ReactHooksESLintRule = ReactHooksESLintPlugin.rules['exhaustive-deps'];
 function normalizeIndent(strings) {
   const codeLines = strings[0].split('\n');
   const leftPadding = codeLines[1].match(/\s+/)[0];
-  return codeLines.map(line => line.substr(leftPadding.length)).join('\n');
+  return codeLines.map(line => line.slice(leftPadding.length)).join('\n');
 }
 
 // ***************************************************

packages/eslint-plugin-react-hooks/__tests__/ESLintRulesOfHooks-test.js

@@ -26,7 +26,7 @@ ESLintTester.setDefaultConfig({
 function normalizeIndent(strings) {
   const codeLines = strings[0].split('\n');
   const leftPadding = codeLines[1].match(/\s+/)[0];
-  return codeLines.map(line => line.substr(leftPadding.length)).join('\n');
+  return codeLines.map(line => line.slice(leftPadding.length)).join('\n');
 }
 
 // ***************************************************

packages/eslint-plugin-react-hooks/src/ExhaustiveDeps.js

@@ -1103,7 +1103,7 @@ export default {
               extraWarning =
                 ` You can also do a functional update '${
                   setStateRecommendation.setter
-                }(${setStateRecommendation.missingDep.substring(
+                }(${setStateRecommendation.missingDep.slice(
                   0,
                   1,
                 )} => ...)' if you only need '${

packages/react-art/src/ReactFiberConfigART.js

@@ -479,11 +479,3 @@ export function suspendInstance(type, props) {}
 export function waitForCommitToBeReady() {
   return null;
 }
-// eslint-disable-next-line no-undef
-export function prepareRendererToRender(container: Container): void {
-  // noop
-}
-
-export function resetRendererAfterRender(): void {
-  // noop
-}

packages/react-client/src/ReactFlightClient.js

@@ -18,11 +18,14 @@ import type {
   SSRManifest,
 } from './ReactFlightClientConfig';
 
+import type {HintModel} from 'react-server/src/ReactFlightServerConfig';
+
 import {
   resolveClientReference,
   preloadModule,
   requireModule,
   parseModel,
+  dispatchHint,
 } from './ReactFlightClientConfig';
 
 import {knownServerReferences} from './ReactFlightServerReferenceRegistry';
@@ -515,33 +518,33 @@ export function parseModelString(
     switch (value[1]) {
       case '$': {
         // This was an escaped string value.
-        return value.substring(1);
+        return value.slice(1);
       }
       case 'L': {
         // Lazy node
-        const id = parseInt(value.substring(2), 16);
+        const id = parseInt(value.slice(2), 16);
         const chunk = getChunk(response, id);
         // We create a React.lazy wrapper around any lazy values.
         // When passed into React, we'll know how to suspend on this.
         return createLazyChunkWrapper(chunk);
       }
       case '@': {
         // Promise
-        const id = parseInt(value.substring(2), 16);
+        const id = parseInt(value.slice(2), 16);
         const chunk = getChunk(response, id);
         return chunk;
       }
       case 'S': {
         // Symbol
-        return Symbol.for(value.substring(2));
+        return Symbol.for(value.slice(2));
       }
       case 'P': {
         // Server Context Provider
-        return getOrCreateServerContext(value.substring(2)).Provider;
+        return getOrCreateServerContext(value.slice(2)).Provider;
       }
       case 'F': {
         // Server Reference
-        const id = parseInt(value.substring(2), 16);
+        const id = parseInt(value.slice(2), 16);
         const chunk = getChunk(response, id);
         switch (chunk.status) {
           case RESOLVED_MODEL:
@@ -580,13 +583,17 @@ export function parseModelString(
         // Special encoding for `undefined` which can't be serialized as JSON otherwise.
         return undefined;
       }
+      case 'D': {
+        // Date
+        return new Date(Date.parse(value.slice(2)));
+      }
       case 'n': {
         // BigInt
-        return BigInt(value.substring(2));
+        return BigInt(value.slice(2));
       }
       default: {
         // We assume that anything else is a reference ID.
-        const id = parseInt(value.substring(1), 16);
+        const id = parseInt(value.slice(1), 16);
         const chunk = getChunk(response, id);
         switch (chunk.status) {
           case RESOLVED_MODEL:
@@ -774,6 +781,15 @@ export function resolveErrorDev(
   }
 }
 
+export function resolveHint(
+  response: Response,
+  code: string,
+  model: UninitializedModel,
+): void {
+  const hintModel = parseModel<HintModel>(response, model);
+  dispatchHint(code, hintModel);
+}
+
 export function close(response: Response): void {
   // In case there are any remaining unresolved chunks, they won't
   // be resolved now. So we need to issue an error to those.