Merge branch 'main' into main

Author: eps1lon

.circleci/config.yml

@@ -151,11 +151,33 @@ jobs:
       - setup_node_modules
       - run:
           name: Download artifacts for base revision
+          # TODO: The download-experimental-build.js script works by fetching
+          # artifacts from CI. CircleCI recently updated this endpoint to
+          # require an auth token. This is a problem for PR branches, where
+          # sizebot needs to run, because we don't want to leak the token to
+          # arbitrary code written by an outside contributor.
+          #
+          # This only affects PR branches. CI workflows that run on the main
+          # branch are allowed to access environment variables, because only those
+          # with push access can land code in main.
+          #
+          # As a temporary workaround, we'll fetch the assets from a mirror.
+          # Need to figure out a longer term solution for this.
+          #
+          # Original code
+          #
+          # command: |
+          #     git fetch origin main
+          #     cd ./scripts/release && yarn && cd ../../
+          #     scripts/release/download-experimental-build.js --commit=$(git merge-base HEAD origin/main) --allowBrokenCI
+          #     mv ./build ./base-build
+          #
+          # Workaround. Fetch the artifacts from react-builds.vercel.app. This
+          # is the same app that hosts the sizebot diff previews.
           command: |
-              git fetch origin main
-              cd ./scripts/release && yarn && cd ../../
-              scripts/release/download-experimental-build.js --commit=$(git merge-base HEAD origin/main) --allowBrokenCI
+            curl -L --retry 60 --retry-delay 10 --retry-max-time 600 https://react-builds.vercel.app/api/commits/$(git merge-base HEAD origin/main)/artifacts/build.tgz | tar -xz
               mv ./build ./base-build
+
       - run:
           # TODO: The `download-experimental-build` script copies the npm
           # packages into the `node_modules` directory. This is a historical

.github/workflows/commit_artifacts.yml

@@ -1,4 +1,4 @@
-name: Commit Artifacts for Facebook WWW
+name: Commit Artifacts for Facebook WWW and fbsource
 
 on:
   push:
@@ -10,6 +10,8 @@ jobs:
     steps:
       - name: Download and unzip artifacts
         uses: actions/github-script@v6
+        env:
+          CIRCLECI_TOKEN: ${{secrets.CIRCLECI_TOKEN_DIFFTRAIN}}
         with:
           script: |
             const cp = require('child_process');
@@ -58,10 +60,10 @@ jobs:
                       const ciBuildId = /\/facebook\/react\/([0-9]+)/.exec(
                         status.target_url,
                       )[1];
-                      console.log(`CircleCI build id found: ${ciBuildId}`);
                       if (Number.parseInt(ciBuildId, 10) + '' === ciBuildId) {
                         artifactsUrl =
                           `https://circleci.com/api/v1.1/project/github/facebook/react/${ciBuildId}/artifacts`;
+                        console.log(`Found artifactsUrl: ${artifactsUrl}`);
                         break spinloop;
                       } else {
                         throw new Error(`${ciBuildId} isn't a number`);
@@ -80,13 +82,21 @@ jobs:
               await sleep(60_000);
             }
             if (artifactsUrl != null) {
-              const res = await fetch(artifactsUrl);
+              const {CIRCLECI_TOKEN} = process.env;
+              const res = await fetch(artifactsUrl, {
+                headers: {
+                  'Circle-Token': CIRCLECI_TOKEN
+                }
+              });
               const data = await res.json();
+              if (!Array.isArray(data) && data.message != null) {
+                throw `CircleCI returned: ${data.message}`;
+              }
               for (const artifact of data) {
                 if (artifact.path === 'build.tgz') {
                   console.log(`Downloading and unzipping ${artifact.url}`);
                   await execHelper(
-                    `curl -L ${artifact.url} | tar -xvz`
+                    `curl -L ${artifact.url} -H "Circle-Token: ${CIRCLECI_TOKEN}" | tar -xvz`
                   );
                 }
               }
@@ -98,7 +108,7 @@ jobs:
           sed -i -e 's/ @license React*//' \
             build/oss-experimental/eslint-plugin-react-hooks/cjs/eslint-plugin-react-hooks.development.js \
             build/oss-experimental/react-refresh/cjs/react-refresh-babel.development.js
-      - name: Move relevant files into compiled
+      - name: Move relevant files for React in www into compiled
         run: |
           mkdir -p ./compiled
           mkdir -p ./compiled/facebook-www
@@ -122,16 +132,41 @@ jobs:
           mv build/oss-experimental/react-refresh/cjs/react-refresh-babel.development.js \
             ./compiled/babel-plugin-react-refresh/index.js
 
+          ls -R ./compiled
+      - name: Move relevant files for React in fbsource into compiled-rn
+        run: |
+          BASE_FOLDER='compiled-rn/facebook-fbsource/xplat/js'
+          mkdir -p ${BASE_FOLDER}/react-native-github/Libraries/Renderer/
+          mkdir -p ${BASE_FOLDER}/RKJSModules/vendor/{scheduler,react,react-is,react-test-renderer}/
+
+          # Move React Native renderer 
+          mv build/react-native/implementations/ $BASE_FOLDER/react-native-github/Libraries/Renderer/
+          mv build/react-native/shims/ $BASE_FOLDER/react-native-github/Libraries/Renderer/
+          mv build/facebook-react-native/scheduler/cjs/ $BASE_FOLDER/RKJSModules/vendor/scheduler/
+          mv build/facebook-react-native/react/cjs/ $BASE_FOLDER/RKJSModules/vendor/react/
+          mv build/facebook-react-native/react-is/cjs/ $BASE_FOLDER/RKJSModules/vendor/react-is/
+          mv build/facebook-react-native/react-test-renderer/cjs/ $BASE_FOLDER/RKJSModules/vendor/react-test-renderer/
+
+          # Delete OSS renderer. OSS renderer is synced through internal script.
+          RENDERER_FOLDER=$BASE_FOLDER/react-native-github/Libraries/Renderer/implementations/
+          rm $RENDERER_FOLDER/ReactFabric-{dev,prod,profiling}.js
+          rm $RENDERER_FOLDER/ReactNativeRenderer-{dev,prod,profiling}.js
+
           ls -R ./compiled
       - name: Add REVISION file
         run: |
           echo ${{ github.sha }} >> ./compiled/facebook-www/REVISION
+          echo ${{ github.sha }} >> ./compiled-rn/facebook-fbsource/xplat/js/react-native-github/Libraries/Renderer/REVISION
       - uses: actions/upload-artifact@v3
         with:
           name: compiled
           path: compiled/
+      - uses: actions/upload-artifact@v3
+        with:
+          name: compiled-rn
+          path: compiled-rn/
 
-  commit_artifacts:
+  commit_www_artifacts:
     needs: download_artifacts
     runs-on: ubuntu-latest
     steps:
@@ -165,3 +200,29 @@ jobs:
           commit_user_name: ${{ github.actor }}
           commit_user_email: ${{ github.actor }}@users.noreply.github.com
           create_branch: true
+
+  commit_fbsource_artifacts:
+    needs: download_artifacts
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+        with:
+          ref: main
+          repository: facebook/react-fbsource-import
+          token: ${{secrets.FBSOURCE_SYNC_PUSH_TOKEN}}
+      - name: Ensure clean directory
+        run: rm -rf compiled-rn
+      - uses: actions/download-artifact@v3
+        with:
+          name: compiled-rn
+          path: compiled-rn/
+      - run: git status -u
+      - name: Commit changes to branch
+        uses: stefanzweifel/git-auto-commit-action@v4
+        with:
+          commit_message: |
+            ${{ github.event.head_commit.message }}
+
+            DiffTrain build for commit https://github.com/facebook/react/commit/${{ github.sha }}.
+          commit_user_name: ${{ github.actor }}
+          commit_user_email: ${{ github.actor }}@users.noreply.github.com

package.json

@@ -36,10 +36,10 @@
     "@babel/preset-flow": "^7.10.4",
     "@babel/preset-react": "^7.10.4",
     "@babel/traverse": "^7.11.0",
-    "@rollup/plugin-babel": "^5.3.1",
-    "@rollup/plugin-commonjs": "^22.0.1",
-    "@rollup/plugin-node-resolve": "^13.3.0",
-    "@rollup/plugin-replace": "^4.0.0",
+    "@rollup/plugin-babel": "^6.0.3",
+    "@rollup/plugin-commonjs": "^24.0.1",
+    "@rollup/plugin-node-resolve": "^15.0.1",
+    "@rollup/plugin-replace": "^5.0.2",
     "abortcontroller-polyfill": "^1.7.5",
     "art": "0.10.1",
     "babel-plugin-syntax-trailing-function-commas": "^6.5.0",
@@ -65,8 +65,8 @@
     "eslint-plugin-react-internal": "link:./scripts/eslint-rules",
     "fbjs-scripts": "^3.0.1",
     "filesize": "^6.0.1",
-    "flow-bin": "^0.201.0",
-    "flow-remove-types": "^2.201.0",
+    "flow-bin": "^0.202.0",
+    "flow-remove-types": "^2.202.0",
     "glob": "^7.1.6",
     "glob-stream": "^6.1.0",
     "google-closure-compiler": "^20230206.0.0",
@@ -89,9 +89,9 @@
     "random-seed": "^0.3.0",
     "react-lifecycles-compat": "^3.0.4",
     "rimraf": "^3.0.0",
-    "rollup": "^2.76.0",
+    "rollup": "^3.17.1",
     "rollup-plugin-prettier": "^3.0.0",
-    "rollup-plugin-strip-banner": "^2.0.0",
+    "rollup-plugin-strip-banner": "^3.0.0",
     "semver": "^7.1.1",
     "targz": "^1.0.1",
     "through2": "^3.0.1",

packages/internal-test-utils/ReactInternalTestUtils.js

@@ -29,24 +29,23 @@ async function waitForMicrotasks() {
   });
 }
 
-export async function waitFor(expectedLog) {
+export async function waitFor(expectedLog, options) {
   assertYieldsWereCleared(SchedulerMock);
 
   // Create the error object before doing any async work, to get a better
   // stack trace.
   const error = new Error();
   Error.captureStackTrace(error, waitFor);
 
+  const stopAfter = expectedLog.length;
   const actualLog = [];
   do {
     // Wait until end of current task/microtask.
     await waitForMicrotasks();
     if (SchedulerMock.unstable_hasPendingWork()) {
-      SchedulerMock.unstable_flushNumberOfYields(
-        expectedLog.length - actualLog.length,
-      );
+      SchedulerMock.unstable_flushNumberOfYields(stopAfter - actualLog.length);
       actualLog.push(...SchedulerMock.unstable_clearLog());
-      if (expectedLog.length > actualLog.length) {
+      if (stopAfter > actualLog.length) {
         // Continue flushing until we've logged the expected number of items.
       } else {
         // Once we've reached the expected sequence, wait one more microtask to
@@ -61,6 +60,12 @@ export async function waitFor(expectedLog) {
     }
   } while (true);
 
+  if (options && options.additionalLogsAfterAttemptingToYield) {
+    expectedLog = expectedLog.concat(
+      options.additionalLogsAfterAttemptingToYield,
+    );
+  }
+
   if (equals(actualLog, expectedLog)) {
     return;
   }
@@ -151,6 +156,34 @@ ${diff(expectedError, x)}
   } while (true);
 }
 
+// This is prefixed with `unstable_` because you should almost always try to
+// avoid using it in tests. It's really only for testing a particular
+// implementation detail (update starvation prevention).
+export async function unstable_waitForExpired(expectedLog): mixed {
+  assertYieldsWereCleared(SchedulerMock);
+
+  // Create the error object before doing any async work, to get a better
+  // stack trace.
+  const error = new Error();
+  Error.captureStackTrace(error, unstable_waitForExpired);
+
+  // Wait until end of current task/microtask.
+  await waitForMicrotasks();
+  SchedulerMock.unstable_flushExpired();
+
+  const actualLog = SchedulerMock.unstable_clearLog();
+  if (equals(actualLog, expectedLog)) {
+    return;
+  }
+
+  error.message = `
+Expected sequence of events did not occur.
+
+${diff(expectedLog, actualLog)}
+`;
+  throw error;
+}
+
 // TODO: This name is a bit misleading currently because it will stop as soon as
 // React yields for any reason, not just for a paint. I've left it this way for
 // now because that's how untable_flushUntilNextPaint already worked, but maybe
@@ -185,6 +218,30 @@ ${diff(expectedLog, actualLog)}
   throw error;
 }
 
+export async function waitForDiscrete(expectedLog) {
+  assertYieldsWereCleared(SchedulerMock);
+
+  // Create the error object before doing any async work, to get a better
+  // stack trace.
+  const error = new Error();
+  Error.captureStackTrace(error, waitForDiscrete);
+
+  // Wait until end of current task/microtask.
+  await waitForMicrotasks();
+
+  const actualLog = SchedulerMock.unstable_clearLog();
+  if (equals(actualLog, expectedLog)) {
+    return;
+  }
+
+  error.message = `
+Expected sequence of events did not occur.
+
+${diff(expectedLog, actualLog)}
+`;
+  throw error;
+}
+
 export function assertLog(expectedLog) {
   const actualLog = SchedulerMock.unstable_clearLog();
   if (equals(actualLog, expectedLog)) {

packages/internal-test-utils/__tests__/ReactInternalTestUtils-test.js

@@ -99,13 +99,9 @@ describe('ReactInternalTestUtils', () => {
     assertLog([
       'A',
       'B',
-      'C',
-      'D',
       // React will try one more time before giving up.
       'A',
       'B',
-      'C',
-      'D',
     ]);
   });
 

packages/internal-test-utils/internalAct.js

@@ -35,7 +35,7 @@ export async function act<T>(scope: () => Thenable<T>): Thenable<T> {
     );
   }
 
-  // $FlowFixMe: Flow doesn't know about global Jest object
+  // $FlowFixMe[cannot-resolve-name]: Flow doesn't know about global Jest object
   if (!jest.isMockFunction(setTimeout)) {
     throw Error(
       "This version of `act` requires Jest's timer mocks " +
@@ -70,7 +70,7 @@ export async function act<T>(scope: () => Thenable<T>): Thenable<T> {
       // Wait until end of current task/microtask.
       await waitForMicrotasks();
 
-      // $FlowFixMe: Flow doesn't know about global Jest object
+      // $FlowFixMe[cannot-resolve-name]: Flow doesn't know about global Jest object
       if (jest.isEnvironmentTornDown()) {
         error.message =
           'The Jest environment was torn down before `act` completed. This ' +
@@ -79,8 +79,20 @@ export async function act<T>(scope: () => Thenable<T>): Thenable<T> {
       }
 
       if (!Scheduler.unstable_hasPendingWork()) {
-        // $FlowFixMe: Flow doesn't know about global Jest object
-        jest.runOnlyPendingTimers();
+        // $FlowFixMe[cannot-resolve-name]: Flow doesn't know about global Jest object
+        const j = jest;
+        if (j.getTimerCount() > 0) {
+          // There's a pending timer. Flush it now. We only do this in order to
+          // force Suspense fallbacks to display; the fact that it's a timer
+          // is an implementation detail. If there are other timers scheduled,
+          // those will also fire now, too, which is not ideal. (The public
+          // version of `act` doesn't do this.) For this reason, we should try
+          // to avoid using timers in our internal tests.
+          j.runOnlyPendingTimers();
+          // If a committing a fallback triggers another update, it might not
+          // get scheduled until a microtask. So wait one more time.
+          await waitForMicrotasks();
+        }
         if (Scheduler.unstable_hasPendingWork()) {
           // Committing a fallback scheduled additional work. Continue flushing.
         } else {

packages/react-art/src/ReactARTHostConfig.js

@@ -459,6 +459,22 @@ export function requestPostPaintCallback(callback: (time: number) => void) {
   // noop
 }
 
+export function maySuspendCommit(type, props) {
+  return false;
+}
+
+export function preloadInstance(type, props) {
+  // Return true to indicate it's already loaded
+  return true;
+}
+
+export function startSuspendingCommit() {}
+
+export function suspendInstance(type, props) {}
+
+export function waitForCommitToBeReady() {
+  return null;
+}
 // eslint-disable-next-line no-undef
 export function prepareRendererToRender(container: Container): void {
   // noop