Import React Concurrent Mode Profiler

[taneliang]

Summary

This PR imports the concurrent mode profiler project into packages/react-devtools-scheduling-profiler, with history 🎉

Broadly follows the approach of facebook#16381.

Resolves MLH-Fellowship/scheduling-profiler-prototype#134.

Import Details

Notes

• Our new build and start scripts were failing with this error: No "exports" main resolved in @babel/helper-compilation-targets/package.json babel/babel#11216 (comment). I've followed the maintainer's recommendation and updated all @babel/* packages across the repository, excluding fixtures. We can easily revert this if there's a better solution.
• Webpack config is based on react-devtools-shell's.
• Dependencies used have been upgraded to the latest versions. css-loader config differences can be backported into the other devtools packages later.
• Unlike the other devtools packages, we generate our index.html file into the dist folder using HtmlWebpackPlugin. This means that the dist folder can be served directly, and can likely be deployed to Vercel without a need for a now.json file.

Major differences with the version in the original repo:

• Parcel has been replaced with Webpack for better integration with the rest of the React repo.
• The sample profile auto-loaded in DEV for convenience is now dynamically imported. It's now trivial to add a demo profile feature for end users (Craft a custom performance profile to "demo" scheduling-profiler-prototype#82).
• index.html is now automatically generated by html-webpack-plugin instead of being based on a template file.
• Page title has been renamed to "React Concurrent Mode Profiler".

Process

Similar to facebook#16381, the goal of this import is to preserve history from https://github.com/MLH-Fellowship/scheduling-profiler-prototype. Verified that git log --follow worked as expected on imported files.

Prepare fork for merge

mkdir profiler-merge
cd profiler-merge

git init .
git commit -m "Initializing empty merge repo" --allow-empty  

git remote add -f profiler-merge git@github.com:MLH-Fellowship/scheduling-profiler-prototype.git
git merge profiler-merge/master --allow-unrelated-histories

mkdir -p packages/react-scheduling-profiler
mv * packages/react-devtools-scheduling-profiler
mv .* packages/react-devtools-scheduling-profiler
mv packages/react-devtools-scheduling-profiler/.git .
# Commit

Import into React

cd ../react

git remote add profiler-importable ../profiler-merge
git fetch --all

git checkout -b scheduling-profiler-import
git merge --allow-unrelated-histories profiler-importable/importable
git remote rm profiler-importable

Checklist

• Remove extraneous project-specific files (.github, .vscode, etc)
• Integrate package.json with monorepo and remove yarn.lock
• Fix build/start
• Integrate with linter
• Fix lint
• Integrate with Flow
• Fix Flow types, if required
• Integrate with tests
• Fix tests
• Silence console.warn in tests with React repo's toWarnDev utility
• Add FB copyright header
• Fix CI (we'll only be able test this in the PR to upstream)

Test Plan

• yarn lint
• yarn test
• yarn flow dom
• In react-scheduling-profiler package:
  • Test prod build
    1. yarn build
       
    2. cd dist
    3. serve (using https://www.npmjs.com/package/serve)
       
  • Test development:
    1. yarn start works
       
    2. Test hot reloading works

[kartikcho]

Should we keep the sample profile in? It makes sense for dev purposes but they're pretty big in size, almost around the size of the whole package. Not sure how the React team would feel about it.

[taneliang]

Good question, let's ask the React team on the final PR. I think we'll want to keep it around as the demo profile for MLH-Fellowship/scheduling-profiler-prototype#82. It's lazily loaded anyway so at least it won't bloat the main bundle

[taneliang]

Merged upstream: facebook#19634