.codesandbox/ci.json

@@ -0,0 +1,13 @@
+{
+  "packages": ["packages/react", "packages/react-dom", "packages/react-server-dom-webpack", "packages/scheduler"],
+  "buildCommand": "download-build-in-codesandbox-ci",
+  "node": "20",
+  "publishDirectory": {
+    "react": "build/oss-experimental/react",
+    "react-dom": "build/oss-experimental/react-dom",
+    "react-server-dom-webpack": "build/oss-experimental/react-server-dom-webpack",
+    "scheduler": "build/oss-experimental/scheduler"
+  },
+  "sandboxes": ["new"],
+  "silent": true
+}

.editorconfig

@@ -1,12 +1,16 @@
-# http://editorconfig.org
+# https://editorconfig.org
 root = true
 
 [*]
-indent_style = space
-indent_size = 2
-end_of_line = lf
 charset = utf-8
-trim_trailing_whitespace = true
+end_of_line = lf
+indent_size = 2
+indent_style = space
+insert_final_newline = true
+max_line_length = 80
 
 [*.md]
-trim_trailing_whitespace = false
+max_line_length = 0
+
+[COMMIT_EDITMSG]
+max_line_length = 0

.eslintignore

@@ -0,0 +1,33 @@
+# Third party
+**/node_modules
+
+# Not written by hand
+packages/react-art/npm/lib
+
+# Build products
+build/
+coverage/
+fixtures/
+scripts/bench/benchmarks/**/*.js
+
+# React repository clone
+scripts/bench/remote-repo/
+
+# Compiler uses its own lint setup
+compiler/
+
+packages/react-devtools-core/dist
+packages/react-devtools-extensions/chrome/build
+packages/react-devtools-extensions/firefox/build
+packages/react-devtools-extensions/shared/build
+packages/react-devtools-extensions/src/ErrorTesterCompiled.js
+packages/react-devtools-fusebox/dist
+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-timeline/dist
+packages/react-devtools-timeline/static
+
+# Imported third-party Flow types
+flow-typed/

.eslintrc.js

@@ -0,0 +1,655 @@
+'use strict';
+
+const {
+  es5Paths,
+  esNextPaths,
+} = require('./scripts/shared/pathsByLanguageVersion');
+
+const restrictedGlobals = require('confusing-browser-globals');
+
+const OFF = 0;
+const WARNING = 1;
+const ERROR = 2;
+
+module.exports = {
+  extends: ['prettier', 'plugin:jest/recommended'],
+
+  // Stop ESLint from looking for a configuration file in parent folders
+  root: true,
+
+  reportUnusedDisableDirectives: true,
+
+  plugins: [
+    'babel',
+    'ft-flow',
+    'jest',
+    'es',
+    'no-for-of-loops',
+    'no-function-declare-after-return',
+    'react',
+    'react-internal',
+  ],
+
+  parser: 'hermes-eslint',
+  parserOptions: {
+    ecmaVersion: 9,
+    sourceType: 'script',
+  },
+
+  // We're stricter than the default config, mostly. We'll override a few rules
+  // and then enable some React specific ones.
+  rules: {
+    'ft-flow/array-style-complex-type': [OFF, 'verbose'],
+    'ft-flow/array-style-simple-type': [OFF, 'verbose'], // TODO should be WARNING
+    'ft-flow/boolean-style': ERROR,
+    'ft-flow/no-dupe-keys': ERROR,
+    'ft-flow/no-primitive-constructor-types': ERROR,
+    'ft-flow/no-types-missing-file-annotation': OFF, // TODO should be ERROR
+    'ft-flow/no-unused-expressions': ERROR,
+    // 'ft-flow/no-weak-types': WARNING,
+    // 'ft-flow/require-valid-file-annotation': ERROR,
+    'es/no-optional-chaining': ERROR,
+    'no-cond-assign': OFF,
+    'no-constant-condition': OFF,
+    'no-control-regex': OFF,
+    'no-debugger': ERROR,
+    'no-dupe-args': ERROR,
+    'no-dupe-keys': ERROR,
+    'no-duplicate-case': WARNING,
+    'no-empty-character-class': WARNING,
+    'no-empty': OFF,
+    'no-ex-assign': WARNING,
+    'no-extra-boolean-cast': WARNING,
+    'no-func-assign': ERROR,
+    'no-invalid-regexp': WARNING,
+    'no-irregular-whitespace': WARNING,
+    'no-negated-in-lhs': ERROR,
+    'no-obj-calls': ERROR,
+    'no-regex-spaces': WARNING,
+    'no-sparse-arrays': ERROR,
+    'no-unreachable': ERROR,
+    'use-isnan': ERROR,
+    'valid-jsdoc': OFF,
+    'block-scoped-var': OFF,
+    complexity: OFF,
+    'default-case': OFF,
+    'guard-for-in': OFF,
+    'no-alert': OFF,
+    'no-caller': ERROR,
+    'no-case-declarations': OFF,
+    'no-div-regex': OFF,
+    'no-else-return': OFF,
+    'no-empty-pattern': WARNING,
+    'no-eq-null': OFF,
+    'no-eval': ERROR,
+    'no-extend-native': WARNING,
+    'no-extra-bind': WARNING,
+    'no-fallthrough': WARNING,
+    'no-implicit-coercion': OFF,
+    'no-implied-eval': ERROR,
+    'no-invalid-this': OFF,
+    'no-iterator': OFF,
+    'no-labels': [ERROR, {allowLoop: true, allowSwitch: true}],
+    'no-lone-blocks': WARNING,
+    'no-loop-func': OFF,
+    'no-magic-numbers': OFF,
+    'no-multi-str': ERROR,
+    'no-native-reassign': [ERROR, {exceptions: ['Map', 'Set']}],
+    'no-new-func': ERROR,
+    'no-new': WARNING,
+    'no-new-wrappers': WARNING,
+    'no-octal-escape': WARNING,
+    'no-octal': WARNING,
+    'no-param-reassign': OFF,
+    'no-process-env': OFF,
+    'no-proto': ERROR,
+    'no-redeclare': OFF, // TODO should be WARNING?
+    'no-return-assign': OFF,
+    'no-script-url': ERROR,
+    'no-self-compare': WARNING,
+    'no-sequences': WARNING,
+    'no-throw-literal': ERROR,
+    'no-useless-call': WARNING,
+    'no-void': OFF,
+    'no-warning-comments': OFF,
+    'no-with': OFF,
+    radix: WARNING,
+    'vars-on-top': OFF,
+    yoda: OFF,
+    'init-declarations': OFF,
+    'no-catch-shadow': ERROR,
+    'no-delete-var': ERROR,
+    'no-label-var': WARNING,
+    'no-shadow-restricted-names': WARNING,
+    'no-undef-init': OFF,
+    'no-undef': ERROR,
+    'no-undefined': OFF,
+    'callback-return': OFF,
+    'global-require': OFF,
+    'handle-callback-err': OFF,
+    'no-mixed-requires': OFF,
+    'no-new-require': OFF,
+    'no-path-concat': OFF,
+    'no-process-exit': OFF,
+    'no-restricted-modules': OFF,
+    'no-sync': OFF,
+    camelcase: [OFF, {properties: 'always'}],
+    'consistent-this': [OFF, 'self'],
+    'func-names': OFF,
+    'func-style': [OFF, 'declaration'],
+    'id-length': OFF,
+    'id-match': OFF,
+    'max-depth': OFF,
+    'max-nested-callbacks': OFF,
+    'max-params': OFF,
+    'max-statements': OFF,
+    'new-cap': OFF,
+    'newline-after-var': OFF,
+    'no-array-constructor': ERROR,
+    'no-continue': OFF,
+    'no-inline-comments': OFF,
+    'no-lonely-if': OFF,
+    'no-negated-condition': OFF,
+    'no-nested-ternary': OFF,
+    'no-new-object': WARNING,
+    'no-plusplus': OFF,
+    'no-ternary': OFF,
+    'no-underscore-dangle': OFF,
+    'no-unneeded-ternary': WARNING,
+    'one-var': [WARNING, {initialized: 'never'}],
+    'operator-assignment': [WARNING, 'always'],
+    'require-jsdoc': OFF,
+    'sort-vars': OFF,
+    'spaced-comment': [
+      OFF,
+      'always',
+      {exceptions: ['jshint', 'jslint', 'eslint', 'global']},
+    ],
+    'constructor-super': ERROR,
+    'no-class-assign': WARNING,
+    'no-const-assign': ERROR,
+    'no-dupe-class-members': ERROR,
+    'no-this-before-super': ERROR,
+    'object-shorthand': OFF,
+    'prefer-const': OFF,
+    'prefer-spread': OFF,
+    'prefer-reflect': OFF,
+    'prefer-template': OFF,
+    'require-yield': OFF,
+    'babel/generator-star-spacing': OFF,
+    'babel/new-cap': OFF,
+    'babel/array-bracket-spacing': OFF,
+    'babel/object-curly-spacing': OFF,
+    'babel/object-shorthand': OFF,
+    'babel/arrow-parens': OFF,
+    'babel/no-await-in-loop': OFF,
+    'babel/flow-object-type': OFF,
+    'react/display-name': OFF,
+    'react/forbid-prop-types': OFF,
+    'react/jsx-closing-bracket-location': OFF,
+    'react/jsx-curly-spacing': OFF,
+    'react/jsx-equals-spacing': WARNING,
+    'react/jsx-filename-extension': OFF,
+    'react/jsx-first-prop-new-line': OFF,
+    'react/jsx-handler-names': OFF,
+    'react/jsx-indent': OFF,
+    'react/jsx-indent-props': OFF,
+    'react/jsx-key': OFF,
+    'react/jsx-max-props-per-line': OFF,
+    'react/jsx-no-bind': OFF,
+    'react/jsx-no-duplicate-props': ERROR,
+    'react/jsx-no-literals': OFF,
+    'react/jsx-no-target-blank': OFF,
+    'react/jsx-pascal-case': OFF,
+    'react/jsx-sort-props': OFF,
+    'react/jsx-uses-vars': ERROR,
+    'react/no-comment-textnodes': OFF,
+    'react/no-danger': OFF,
+    'react/no-deprecated': OFF,
+    'react/no-did-mount-set-state': OFF,
+    'react/no-did-update-set-state': OFF,
+    'react/no-direct-mutation-state': OFF,
+    'react/no-multi-comp': OFF,
+    'react/no-render-return-value': OFF,
+    'react/no-set-state': OFF,
+    'react/no-string-refs': OFF,
+    'react/no-unknown-property': OFF,
+    'react/prefer-es6-class': OFF,
+    'react/prefer-stateless-function': OFF,
+    'react/prop-types': OFF,
+    'react/require-extension': OFF,
+    'react/require-optimization': OFF,
+    'react/require-render-return': OFF,
+    'react/sort-comp': OFF,
+    'react/sort-prop-types': OFF,
+
+    'accessor-pairs': OFF,
+    'brace-style': [ERROR, '1tbs'],
+    'consistent-return': OFF,
+    'dot-location': [ERROR, 'property'],
+    // We use console['error']() as a signal to not transform it:
+    'dot-notation': [ERROR, {allowPattern: '^(error|warn)$'}],
+    'eol-last': ERROR,
+    eqeqeq: [ERROR, 'allow-null'],
+    indent: OFF,
+    'jsx-quotes': [ERROR, 'prefer-double'],
+    'keyword-spacing': [ERROR, {after: true, before: true}],
+    'no-bitwise': OFF,
+    'no-console': OFF,
+    'no-inner-declarations': [ERROR, 'functions'],
+    'no-multi-spaces': ERROR,
+    'no-restricted-globals': [ERROR].concat(restrictedGlobals),
+    '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', ignoreRestSiblings: true}],
+    'no-use-before-define': OFF,
+    'no-useless-concat': OFF,
+    quotes: [ERROR, 'single', {avoidEscape: true, allowTemplateLiterals: true}],
+    'space-before-blocks': ERROR,
+    'space-before-function-paren': OFF,
+    'valid-typeof': [ERROR, {requireStringLiterals: true}],
+    // Flow fails with non-string literal keys
+    'no-useless-computed-key': OFF,
+
+    // We apply these settings to files that should run on Node.
+    // They can't use JSX or ES6 modules, and must be in strict mode.
+    // They can, however, use other ES6 features.
+    // (Note these rules are overridden later for source files.)
+    'no-var': ERROR,
+    strict: ERROR,
+
+    // Enforced by Prettier
+    // TODO: Prettier doesn't handle long strings or long comments. Not a big
+    // deal. But I turned it off because loading the plugin causes some obscure
+    // syntax error and it didn't seem worth investigating.
+    'max-len': OFF,
+
+    // React & JSX
+    // Our transforms set this automatically
+    'react/jsx-boolean-value': [ERROR, 'always'],
+    'react/jsx-no-undef': ERROR,
+    // We don't care to do this
+    'react/jsx-sort-prop-types': OFF,
+    'react/jsx-space-before-closing': ERROR,
+    'react/jsx-uses-react': ERROR,
+    'react/no-is-mounted': OFF,
+    // This isn't useful in our test code
+    'react/react-in-jsx-scope': ERROR,
+    'react/self-closing-comp': ERROR,
+    // We don't care to do this
+    'react/jsx-wrap-multilines': [
+      ERROR,
+      {declaration: false, assignment: false},
+    ],
+
+    // Prevent for...of loops because they require a Symbol polyfill.
+    // You can disable this rule for code that isn't shipped (e.g. build scripts and tests).
+    'no-for-of-loops/no-for-of-loops': ERROR,
+
+    // Prevent function declarations after return statements
+    'no-function-declare-after-return/no-function-declare-after-return': ERROR,
+
+    // CUSTOM RULES
+    // the second argument of warning/invariant should be a literal string
+    'react-internal/no-primitive-constructors': ERROR,
+    'react-internal/safe-string-coercion': [
+      ERROR,
+      {isProductionUserAppCode: true},
+    ],
+    'react-internal/warning-args': ERROR,
+    'react-internal/no-production-logging': ERROR,
+  },
+
+  overrides: [
+    {
+      // By default, anything error message that appears the packages directory
+      // must have a corresponding error code. The exceptions are defined
+      // in the next override entry.
+      files: ['packages/**/*.js'],
+      rules: {
+        'react-internal/prod-error-codes': ERROR,
+      },
+    },
+    {
+      // These are files where it's OK to have unminified error messages. These
+      // are environments where bundle size isn't a concern, like tests
+      // or Node.
+      files: [
+        'packages/react-dom/src/test-utils/**/*.js',
+        'packages/react-devtools-shared/**/*.js',
+        'packages/react-noop-renderer/**/*.js',
+        'packages/react-refresh/**/*.js',
+        'packages/react-server-dom-esm/**/*.js',
+        'packages/react-server-dom-webpack/**/*.js',
+        'packages/react-server-dom-turbopack/**/*.js',
+        'packages/react-server-dom-parcel/**/*.js',
+        'packages/react-server-dom-fb/**/*.js',
+        'packages/react-test-renderer/**/*.js',
+        'packages/react-debug-tools/**/*.js',
+        'packages/react-devtools-extensions/**/*.js',
+        'packages/react-devtools-timeline/**/*.js',
+        'packages/react-native-renderer/**/*.js',
+        'packages/eslint-plugin-react-hooks/**/*.js',
+        'packages/jest-react/**/*.js',
+        'packages/internal-test-utils/**/*.js',
+        'packages/**/__tests__/*.js',
+        'packages/**/npm/*.js',
+      ],
+      rules: {
+        'react-internal/prod-error-codes': OFF,
+      },
+    },
+    {
+      // We apply these settings to files that we ship through npm.
+      // They must be ES5.
+      files: es5Paths,
+      parser: 'espree',
+      parserOptions: {
+        ecmaVersion: 5,
+        sourceType: 'script',
+      },
+      rules: {
+        'no-var': OFF,
+        strict: ERROR,
+      },
+    },
+    {
+      // We apply these settings to the source files that get compiled.
+      // They can use all features including JSX (but shouldn't use `var`).
+      files: esNextPaths,
+      parser: 'hermes-eslint',
+      parserOptions: {
+        ecmaVersion: 8,
+        sourceType: 'module',
+      },
+      rules: {
+        'no-var': ERROR,
+        'prefer-const': ERROR,
+        strict: OFF,
+      },
+    },
+    {
+      files: ['**/__tests__/*.js'],
+      rules: {
+        // https://github.com/jest-community/eslint-plugin-jest
+        // Meh, who cares.
+        'jest/consistent-test-it': OFF,
+        // Meh, we have a lot of these, who cares.
+        'jest/no-alias-methods': OFF,
+        // We do conditions based on feature flags.
+        'jest/no-conditional-expect': OFF,
+        // We have our own assertion helpers.
+        'jest/expect-expect': OFF,
+        // Lame rule that fires in itRender helpers or in render methods.
+        'jest/no-standalone-expect': OFF,
+      },
+    },
+    {
+      // Rules specific to test setup helper files.
+      files: [
+        '**/setupTests.js',
+        '**/setupEnv.js',
+        '**/jest/TestFlags.js',
+        '**/dom-event-testing-library/testHelpers.js',
+        '**/utils/ReactDOMServerIntegrationTestUtils.js',
+        '**/babel/transform-react-version-pragma.js',
+        '**/babel/transform-test-gate-pragma.js',
+      ],
+      rules: {
+        // Some helpers intentionally focus tests.
+        'jest/no-focused-tests': OFF,
+        // Test fn helpers don't use static text names.
+        'jest/valid-title': OFF,
+        // We have our own assertion helpers.
+        'jest/expect-expect': OFF,
+        // Some helpers intentionally disable tests.
+        'jest/no-disabled-tests': OFF,
+        // Helpers export text function helpers.
+        'jest/no-export': OFF,
+        // The examples in comments trigger false errors.
+        'jest/no-commented-out-tests': OFF,
+      },
+    },
+    {
+      files: ['**/jest/TestFlags.js'],
+      rules: {
+        // The examples in comments trigger false errors.
+        'jest/no-commented-out-tests': OFF,
+      },
+    },
+    {
+      files: [
+        '**/__tests__/**/*.js',
+        'scripts/**/*.js',
+        'packages/*/npm/**/*.js',
+        'packages/dom-event-testing-library/**/*.js',
+        'packages/react-devtools*/**/*.js',
+        'dangerfile.js',
+        'fixtures',
+        'packages/react-dom/src/test-utils/*.js',
+      ],
+      rules: {
+        'es/no-optional-chaining': OFF,
+        'react-internal/no-production-logging': OFF,
+        'react-internal/warning-args': OFF,
+        'react-internal/safe-string-coercion': [
+          ERROR,
+          {isProductionUserAppCode: false},
+        ],
+      },
+    },
+    {
+      files: ['scripts/eslint-rules/*.js'],
+      plugins: ['eslint-plugin'],
+      rules: {
+        'eslint-plugin/prefer-object-rule': ERROR,
+        'eslint-plugin/require-meta-fixable': [
+          ERROR,
+          {catchNoFixerButFixableProperty: true},
+        ],
+        'eslint-plugin/require-meta-has-suggestions': ERROR,
+      },
+    },
+    {
+      files: ['packages/react-native-renderer/**/*.js'],
+      globals: {
+        nativeFabricUIManager: 'readonly',
+        RN$enableMicrotasksInReact: 'readonly',
+      },
+    },
+    {
+      files: ['packages/react-server-dom-webpack/**/*.js'],
+      globals: {
+        __webpack_chunk_load__: 'readonly',
+        __webpack_get_script_filename__: 'readonly',
+        __webpack_require__: 'readonly',
+      },
+    },
+    {
+      files: ['packages/react-server-dom-turbopack/**/*.js'],
+      globals: {
+        __turbopack_load_by_url__: 'readonly',
+        __turbopack_require__: 'readonly',
+      },
+    },
+    {
+      files: ['packages/react-server-dom-parcel/**/*.js'],
+      globals: {
+        parcelRequire: 'readonly',
+      },
+    },
+    {
+      files: ['packages/scheduler/**/*.js'],
+      globals: {
+        TaskController: 'readonly',
+      },
+    },
+    {
+      files: [
+        'packages/react-devtools-extensions/**/*.js',
+        'packages/react-devtools-shared/src/devtools/views/**/*.js',
+        'packages/react-devtools-shared/src/hook.js',
+        'packages/react-devtools-shared/src/backend/console.js',
+        'packages/react-devtools-shared/src/backend/fiber/renderer.js',
+        'packages/react-devtools-shared/src/backend/shared/DevToolsComponentStackFrame.js',
+        'packages/react-devtools-shared/src/frontend/utils/withPermissionsCheck.js',
+      ],
+      globals: {
+        __IS_CHROME__: 'readonly',
+        __IS_FIREFOX__: 'readonly',
+        __IS_EDGE__: 'readonly',
+        __IS_NATIVE__: 'readonly',
+        __IS_INTERNAL_MCP_BUILD__: 'readonly',
+        __IS_INTERNAL_VERSION__: 'readonly',
+        chrome: 'readonly',
+      },
+    },
+    {
+      files: ['packages/react-devtools-shared/**/*.js'],
+      globals: {
+        __IS_INTERNAL_VERSION__: 'readonly',
+      },
+    },
+    {
+      files: ['packages/react-devtools-*/**/*.js'],
+      excludedFiles: '**/__tests__/**/*.js',
+      plugins: ['eslint-plugin-react-hooks-published'],
+      rules: {
+        'react-hooks-published/rules-of-hooks': ERROR,
+      },
+    },
+    {
+      files: ['packages/eslint-plugin-react-hooks/src/**/*'],
+      extends: ['plugin:@typescript-eslint/recommended'],
+      parser: '@typescript-eslint/parser',
+      plugins: ['@typescript-eslint', 'eslint-plugin'],
+      rules: {
+        '@typescript-eslint/no-explicit-any': OFF,
+        '@typescript-eslint/no-non-null-assertion': OFF,
+        '@typescript-eslint/array-type': [ERROR, {default: 'generic'}],
+
+        'es/no-optional-chaining': OFF,
+
+        'eslint-plugin/prefer-object-rule': ERROR,
+        'eslint-plugin/require-meta-fixable': [
+          ERROR,
+          {catchNoFixerButFixableProperty: true},
+        ],
+        'eslint-plugin/require-meta-has-suggestions': ERROR,
+      },
+    },
+  ],
+
+  env: {
+    browser: true,
+    es6: true,
+    node: true,
+    jest: true,
+  },
+
+  globals: {
+    $Flow$ModuleRef: 'readonly',
+    $FlowFixMe: 'readonly',
+    $Keys: 'readonly',
+    $NonMaybeType: 'readonly',
+    $ReadOnly: 'readonly',
+    $ReadOnlyArray: 'readonly',
+    $ArrayBufferView: 'readonly',
+    $Shape: 'readonly',
+    CallSite: 'readonly',
+    ConsoleTask: 'readonly', // TOOD: Figure out what the official name of this will be.
+    ReturnType: 'readonly',
+    AnimationFrameID: 'readonly',
+    WeakRef: 'readonly',
+    // For Flow type annotation. Only `BigInt` is valid at runtime.
+    bigint: 'readonly',
+    BigInt: 'readonly',
+    BigInt64Array: 'readonly',
+    BigUint64Array: 'readonly',
+    CacheType: 'readonly',
+    Class: 'readonly',
+    ClientRect: 'readonly',
+    CopyInspectedElementPath: 'readonly',
+    DOMHighResTimeStamp: 'readonly',
+    EventListener: 'readonly',
+    Iterable: 'readonly',
+    AsyncIterable: 'readonly',
+    $AsyncIterable: 'readonly',
+    $AsyncIterator: 'readonly',
+    Iterator: 'readonly',
+    AsyncIterator: 'readonly',
+    IntervalID: 'readonly',
+    IteratorResult: 'readonly',
+    JSONValue: 'readonly',
+    JSResourceReference: 'readonly',
+    mixin$Animatable: 'readonly',
+    MouseEventHandler: 'readonly',
+    NavigateEvent: 'readonly',
+    PerformanceMeasureOptions: 'readonly',
+    PropagationPhases: 'readonly',
+    PropertyDescriptor: 'readonly',
+    PropertyDescriptorMap: 'readonly',
+    Proxy$traps: 'readonly',
+    React$Component: 'readonly',
+    React$Config: 'readonly',
+    React$Context: 'readonly',
+    React$Element: 'readonly',
+    React$ElementConfig: 'readonly',
+    React$ElementProps: 'readonly',
+    React$ElementRef: 'readonly',
+    React$ElementType: 'readonly',
+    React$Key: 'readonly',
+    React$Node: 'readonly',
+    React$Portal: 'readonly',
+    React$Ref: 'readonly',
+    React$RefSetter: 'readonly',
+    ReadableStreamController: 'readonly',
+    ReadableStreamReader: 'readonly',
+    RequestInfo: 'readonly',
+    RequestOptions: 'readonly',
+    StoreAsGlobal: 'readonly',
+    symbol: 'readonly',
+    SyntheticEvent: 'readonly',
+    SyntheticMouseEvent: 'readonly',
+    SyntheticPointerEvent: 'readonly',
+    Thenable: 'readonly',
+    TimeoutID: 'readonly',
+    WheelEventHandler: 'readonly',
+    FinalizationRegistry: 'readonly',
+    Exclude: 'readonly',
+    Omit: 'readonly',
+    Keyframe: 'readonly',
+    PropertyIndexedKeyframes: 'readonly',
+    KeyframeAnimationOptions: 'readonly',
+    GetAnimationsOptions: 'readonly',
+    ScrollTimeline: 'readonly',
+    EventListenerOptionsOrUseCapture: 'readonly',
+    FocusOptions: 'readonly',
+    OptionalEffectTiming: 'readonly',
+
+    spyOnDev: 'readonly',
+    spyOnDevAndProd: 'readonly',
+    spyOnProd: 'readonly',
+    __DEV__: 'readonly',
+    __EXPERIMENTAL__: 'readonly',
+    __EXTENSION__: 'readonly',
+    __PROFILE__: 'readonly',
+    __TEST__: 'readonly',
+    __VARIANT__: 'readonly',
+    __unmockReact: 'readonly',
+    gate: 'readonly',
+    trustedTypes: 'readonly',
+    IS_REACT_ACT_ENVIRONMENT: 'readonly',
+    AsyncLocalStorage: 'readonly',
+    async_hooks: 'readonly',
+    globalThis: 'readonly',
+    navigation: 'readonly',
+  },
+};

.git-blame-ignore-revs

@@ -0,0 +1,2 @@
+c998bb1ed4b3285398c9c7797135d3f060243c6a
+fd2b3e13d330a4559f5aa21462e1cb2cbbcf144b

.gitattributes

@@ -0,0 +1 @@
+* text=auto

.github/ISSUE_TEMPLATE/bug_report.md

@@ -0,0 +1,41 @@
+---
+name: "🐛 Bug Report"
+about: Report a reproducible bug or regression.
+title: 'Bug: '
+labels: 'Status: Unconfirmed'
+
+---
+
+<!--
+  Please provide a clear and concise description of what the bug is. Include
+  screenshots if needed. Please test using the latest version of the relevant
+  React packages to make sure your issue has not already been fixed.
+-->
+
+React version:
+
+## Steps To Reproduce
+
+1.
+2.
+
+<!--
+  Your bug will get fixed much faster if we can run your code and it doesn't
+  have dependencies other than React. Issues without reproduction steps or
+  code examples may be immediately closed as not actionable.
+-->
+
+Link to code example:
+
+<!--
+  Please provide a CodeSandbox (https://codesandbox.io/s/new), a link to a
+  repository on GitHub, or provide a minimal code example that reproduces the
+  problem. You may provide a screenshot of the application if you think it is
+  relevant to your bug report. Here are some tips for providing a minimal
+  example: https://stackoverflow.com/help/mcve.
+-->
+
+## The current behavior
+
+
+## The expected behavior

.github/ISSUE_TEMPLATE/compiler_bug_report.yml

@@ -0,0 +1,64 @@
+name: "⚛️ ✨ Compiler bug report"
+description: "Report a problem with React Compiler. Please provide enough information that we can reproduce the problem."
+title: "[Compiler Bug]: "
+labels: ["Component: Optimizing Compiler", "Type: Bug", "Status: Unconfirmed"]
+body:
+- type: checkboxes
+  attributes:
+    label: What kind of issue is this?
+    description: |
+      Please indicate if this issue affects the following tools provided by React Compiler.
+    options:
+      - label: React Compiler core (the JS output is incorrect, or your app works incorrectly after optimization)
+      - label: babel-plugin-react-compiler (build issue installing or using the Babel plugin)
+      - label: eslint-plugin-react-compiler (build issue installing or using the eslint plugin)
+      - label: react-compiler-healthcheck (build issue installing or using the healthcheck script)
+- type: input
+  attributes:
+    label: Link to repro
+    description: |
+      Please provide a repro by either sharing a [Playground link](https://playground.react.dev), or a public GitHub repo so the React team can reproduce the error being reported. Please do not share localhost links!
+    placeholder: |
+      e.g. public GitHub repo, or Playground link
+  validations:
+    required: true
+- type: textarea
+  attributes:
+    label: Repro steps
+    description: |
+      What were you doing when the bug happened? Detailed information helps maintainers reproduce and fix bugs.
+
+      Issues filed without repro steps will be closed.
+    placeholder: |
+      Example bug report:
+      1. Log in with username/password
+      2. Click "Messages" on the left menu
+      3. Open any message in the list
+  validations:
+    required: true
+- type: dropdown
+  attributes:
+    label: How often does this bug happen?
+    description: |
+      Following the repro steps above, how easily are you able to reproduce this bug?
+    options:
+      - Every time
+      - Often
+      - Sometimes
+      - Only once
+  validations:
+    required: true
+- type: input
+  attributes:
+    label: What version of React are you using?
+    description: |
+      Please provide your React version in the app where this issue occurred.
+  validations:
+    required: true
+- type: input
+  attributes:
+    label: What version of React Compiler are you using?
+    description: |
+      Please provide the exact React Compiler version in the app where this issue occurred.
+  validations:
+    required: true

.github/ISSUE_TEMPLATE/config.yml

@@ -0,0 +1,8 @@
+blank_issues_enabled: false
+contact_links:
+    - name: 📃 Documentation Issue
+      url: https://github.com/reactjs/react.dev/issues/new/choose
+      about: This issue tracker is not for documentation issues. Please file documentation issues here.
+    - name: 🤔 Questions and Help
+      url: https://reactjs.org/community/support.html
+      about: This issue tracker is not for support questions. Please refer to the React community's help and discussion forums.

.github/ISSUE_TEMPLATE/devtools_bug_report.yml

@@ -0,0 +1,81 @@
+name: "⚛️ 🛠 DevTools bug report"
+description: "Report a problem with React DevTools. Please provide enough information that we can reproduce the problem."
+title: "[DevTools Bug]: "
+labels: ["Component: Developer Tools", "Type: Bug", "Status: Unconfirmed"]
+body:
+- type: input
+  attributes:
+    label: Website or app
+    description: |
+      Which website or app were you using when the bug happened?
+
+      This should be a public URL, GitHub repo, or Code Sandbox app so the React team can reproduce the error being reported. (Please no localhost URLs.)
+    placeholder: |
+      e.g. website URL, public GitHub repo, or Code Sandbox app
+  validations:
+    required: true
+- type: textarea
+  attributes:
+    label: Repro steps
+    description: |
+      What were you doing on the website or app when the bug happened? Detailed information helps maintainers reproduce and fix bugs.
+
+      Issues filed without repro steps will be closed.
+    placeholder: |
+      Example bug report:
+      1. Log in with username/password
+      2. Click "Messages" on the left menu
+      3. Open any message in the list
+  validations:
+    required: true
+- type: dropdown
+  attributes:
+    label: How often does this bug happen?
+    description: |
+      Following the repro steps above, how easily are you able to reproduce this bug?
+    options:
+      - Every time
+      - Often
+      - Sometimes
+      - Only once
+  validations:
+    required: true
+- type: input
+  id: automated_package
+  attributes:
+    label: DevTools package (automated)
+    description: |
+      Please do not edit this field.
+- type: input
+  id: automated_version
+  attributes:
+    label: DevTools version (automated)
+    description: |
+      Please do not edit this field.
+- type: input
+  id: automated_error_message
+  attributes:
+    label: Error message (automated)
+    description: |
+      Please do not edit this field.
+- type: textarea
+  id: automated_call_stack
+  attributes:
+    label: Error call stack (automated)
+    description: |
+      Please do not edit this field.
+    render: text
+- type: textarea
+  id: automated_component_stack
+  attributes:
+    label: Error component stack (automated)
+    description: |
+      Please do not edit this field.
+    render: text
+- type: textarea
+  id: automated_github_query_string
+  attributes:
+    label: GitHub query string (automated)
+    description: |
+      Please do not edit this field.
+    render: text

.github/PULL_REQUEST_TEMPLATE.md

@@ -0,0 +1,33 @@
+<!--
+  Thanks for submitting a pull request!
+  We appreciate you spending the time to work on these changes. Please provide enough information so that others can review your pull request. The three fields below are mandatory.
+
+  Before submitting a pull request, please make sure the following is done:
+
+  1. Fork [the repository](https://github.com/facebook/react) and create your branch from `main`.
+  2. Run `yarn` in the repository root.
+  3. If you've fixed a bug or added code that should be tested, add tests!
+  4. Ensure the test suite passes (`yarn test`). Tip: `yarn test --watch TestName` is helpful in development.
+  5. Run `yarn test --prod` to test in the production environment. It supports the same options as `yarn test`.
+  6. If you need a debugger, run `yarn test --debug --watch TestName`, open `chrome://inspect`, and press "Inspect".
+  7. Format your code with [prettier](https://github.com/prettier/prettier) (`yarn prettier`).
+  8. Make sure your code lints (`yarn lint`). Tip: `yarn linc` to only check changed files.
+  9. Run the [Flow](https://flowtype.org/) type checks (`yarn flow`).
+  10. If you haven't already, complete the CLA.
+
+  Learn more about contributing: https://reactjs.org/docs/how-to-contribute.html
+-->
+
+## Summary
+
+<!--
+ Explain the **motivation** for making this change. What existing problem does the pull request solve?
+-->
+
+## How did you test this change?
+
+<!--
+  Demonstrate the code is solid. Example: The exact commands you ran and their output, screenshots / videos if the pull request changes the user interface.
+  How exactly did you verify that your PR solves the issue you wanted to solve?
+  If you leave this empty, your PR will very likely be closed.
+-->

.github/dependabot.yml

@@ -0,0 +1,10 @@
+version: 2
+updates:
+  - package-ecosystem: "npm"
+    directories:
+      - "/fixtures/*"
+    schedule:
+      interval: "monthly"
+    open-pull-requests-limit: 0
+    ignore:
+      - dependency-name: "*"

.github/workflows/compiler_discord_notify.yml

@@ -0,0 +1,49 @@
+name: (Compiler) Discord Notify
+
+on:
+  pull_request_target:
+    types: [opened, ready_for_review]
+    paths:
+      - compiler/**
+      - .github/workflows/compiler_**.yml
+
+permissions: {}
+
+jobs:
+  check_access:
+    if: ${{ github.event.pull_request.draft == false }}
+    runs-on: ubuntu-latest
+    outputs:
+      is_member_or_collaborator: ${{ steps.check_is_member_or_collaborator.outputs.is_member_or_collaborator }}
+    steps:
+      - run: echo ${{ github.event.pull_request.author_association }}
+      - name: Check is member or collaborator
+        id: check_is_member_or_collaborator
+        if: ${{ github.event.pull_request.author_association == 'MEMBER' || github.event.pull_request.author_association == 'COLLABORATOR' }}
+        run: echo "is_member_or_collaborator=true" >> "$GITHUB_OUTPUT"
+
+  check_maintainer:
+    if: ${{ needs.check_access.outputs.is_member_or_collaborator == 'true' || needs.check_access.outputs.is_member_or_collaborator == true }}
+    needs: [check_access]
+    uses: facebook/react/.github/workflows/shared_check_maintainer.yml@main
+    permissions:
+      # Used by check_maintainer
+      contents: read
+    with:
+      actor: ${{ github.event.pull_request.user.login }}
+
+  notify:
+    if: ${{ needs.check_maintainer.outputs.is_core_team == 'true' }}
+    needs: check_maintainer
+    runs-on: ubuntu-latest
+    steps:
+      - name: Discord Webhook Action
+        uses: tsickert/discord-webhook@86dc739f3f165f16dadc5666051c367efa1692f4
+        with:
+          webhook-url: ${{ secrets.COMPILER_DISCORD_WEBHOOK_URL }}
+          embed-author-name: ${{ github.event.pull_request.user.login }}
+          embed-author-url: ${{ github.event.pull_request.user.html_url }}
+          embed-author-icon-url: ${{ github.event.pull_request.user.avatar_url }}
+          embed-title: '#${{ github.event.number }} (+${{github.event.pull_request.additions}} -${{github.event.pull_request.deletions}}): ${{ github.event.pull_request.title }}'
+          embed-description: ${{ github.event.pull_request.body }}
+          embed-url: ${{ github.event.pull_request.html_url }}

.github/workflows/compiler_playground.yml

@@ -0,0 +1,69 @@
+name: (Compiler) Playground
+
+on:
+  push:
+    branches: [main]
+  pull_request:
+    paths:
+      - compiler/**
+      - .github/workflows/compiler_playground.yml
+
+permissions: {}
+
+concurrency:
+  group: ${{ github.workflow }}-${{ github.ref_name }}-${{ github.event.pull_request.number || github.run_id }}
+  cancel-in-progress: true
+
+env:
+  TZ: /usr/share/zoneinfo/America/Los_Angeles
+  # https://github.com/actions/cache/blob/main/tips-and-workarounds.md#cache-segment-restore-timeout
+  SEGMENT_DOWNLOAD_TIMEOUT_MINS: 1
+
+defaults:
+  run:
+    working-directory: compiler/apps/playground
+
+jobs:
+  playground:
+    name: Test playground
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version-file: '.nvmrc'
+          cache: yarn
+          cache-dependency-path: compiler/**/yarn.lock
+      - name: Restore cached node_modules
+        uses: actions/cache@v4
+        id: node_modules
+        with:
+          path: |
+            **/node_modules
+          key: compiler-and-playground-node_modules-v6-${{ runner.arch }}-${{ runner.os }}-${{ hashFiles('compiler/**/yarn.lock') }}
+      - run: yarn install --frozen-lockfile
+        if: steps.node_modules.outputs.cache-hit != 'true'
+        working-directory: compiler
+      - run: yarn install --frozen-lockfile
+        if: steps.node_modules.outputs.cache-hit != 'true'
+      - name: Check Playwright version
+        id: playwright_version
+        run: echo "playwright_version=$(npm ls @playwright/test | grep @playwright | sed 's/.*@//' | head -1)" >> "$GITHUB_OUTPUT"
+      - name: Cache Playwright Browsers for version ${{ steps.playwright_version.outputs.playwright_version }}
+        id: cache_playwright_browsers
+        uses: actions/cache@v4
+        with:
+          path: ~/.cache/ms-playwright
+          key: playwright-browsers-v6-${{ runner.arch }}-${{ runner.os }}-${{ steps.playwright_version.outputs.playwright_version }}
+      - run: npx playwright install --with-deps chromium
+        if: steps.cache_playwright_browsers.outputs.cache-hit != 'true'
+      - run: CI=true yarn test
+      - run: ls -R test-results
+        if: '!cancelled()'
+      - name: Archive test results
+        if: '!cancelled()'
+        uses: actions/upload-artifact@v4
+        with:
+          name: test-results
+          path: compiler/apps/playground/test-results
+          if-no-files-found: ignore

.github/workflows/compiler_prereleases.yml

@@ -0,0 +1,70 @@
+name: (Compiler) Publish Prereleases
+
+on:
+  workflow_call:
+    inputs:
+      commit_sha:
+        required: true
+        default: ''
+        type: string
+      release_channel:
+        required: true
+        type: string
+      dist_tag:
+        required: true
+        type: string
+      version_name:
+        required: true
+        type: string
+      tag_version:
+        required: false
+        type: string
+      dry_run:
+        required: false
+        type: boolean
+    secrets:
+      NPM_TOKEN:
+        required: true
+
+permissions: {}
+
+env:
+  TZ: /usr/share/zoneinfo/America/Los_Angeles
+  # https://github.com/actions/cache/blob/main/tips-and-workarounds.md#cache-segment-restore-timeout
+  SEGMENT_DOWNLOAD_TIMEOUT_MINS: 1
+  NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
+
+defaults:
+  run:
+    working-directory: compiler
+
+jobs:
+  publish_prerelease:
+    name: Publish prelease (${{ inputs.release_channel }}) ${{ inputs.commit_sha }} @${{ inputs.dist_tag }}
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version-file: '.nvmrc'
+          cache: yarn
+          cache-dependency-path: compiler/yarn.lock
+      - name: Restore cached node_modules
+        uses: actions/cache@v4
+        id: node_modules
+        with:
+          path: |
+            **/node_modules
+          key: compiler-node_modules-v6-${{ runner.arch }}-${{ runner.os }}-${{ hashFiles('compiler/yarn.lock') }}
+      - run: yarn install --frozen-lockfile
+        if: steps.node_modules.outputs.cache-hit != 'true'
+      - if: inputs.dry_run == true
+        name: Publish packages to npm (dry run)
+        run: |
+          cp ./scripts/release/ci-npmrc ~/.npmrc
+          scripts/release/publish.js --frfr --debug --ci --versionName=${{ inputs.version_name }} --tag=${{ inputs.dist_tag }} ${{ inputs.tag_version && format('--tagVersion={0}', inputs.tag_version) || '' }}
+      - if: inputs.dry_run != true
+        name: Publish packages to npm
+        run: |
+          cp ./scripts/release/ci-npmrc ~/.npmrc
+          scripts/release/publish.js --frfr --ci --versionName=${{ inputs.version_name }} --tag=${{ inputs.dist_tag }} ${{ inputs.tag_version && format('--tagVersion={0}', inputs.tag_version) || '' }}

.github/workflows/compiler_prereleases_manual.yml

@@ -0,0 +1,41 @@
+name: (Compiler) Publish Prereleases Manual
+
+on:
+  workflow_dispatch:
+    inputs:
+      prerelease_commit_sha:
+        required: false
+      release_channel:
+        required: true
+        type: string
+      dist_tag:
+        required: true
+        type: string
+      version_name:
+        required: true
+        type: string
+      tag_version:
+        required: false
+        type: string
+      dry_run:
+        required: false
+        type: boolean
+
+permissions: {}
+
+env:
+  TZ: /usr/share/zoneinfo/America/Los_Angeles
+
+jobs:
+  publish_prerelease_experimental:
+    name: Publish to Experimental channel
+    uses: facebook/react/.github/workflows/compiler_prereleases.yml@main
+    with:
+      commit_sha: ${{ inputs.prerelease_commit_sha || github.sha }}
+      release_channel: ${{ inputs.release_channel }}
+      dist_tag: ${{ inputs.dist_tag }}
+      version_name: ${{ inputs.version_name }}
+      tag_version: ${{ inputs.tag_version }}
+      dry_run: ${{ inputs.dry_run }}
+    secrets:
+      NPM_TOKEN: ${{ secrets.NPM_TOKEN }}

.github/workflows/compiler_prereleases_nightly.yml

@@ -0,0 +1,24 @@
+name: (Compiler) Publish Prereleases Nightly
+
+on:
+  schedule:
+    # At 10 minutes past 16:00 on Mon, Tue, Wed, Thu, and Fri
+    - cron: 10 16 * * 1,2,3,4,5
+
+permissions: {}
+
+env:
+  TZ: /usr/share/zoneinfo/America/Los_Angeles
+
+jobs:
+  publish_prerelease_experimental:
+    name: Publish to Experimental channel
+    uses: facebook/react/.github/workflows/compiler_prereleases.yml@main
+    with:
+      commit_sha: ${{ github.sha }}
+      release_channel: experimental
+      dist_tag: experimental
+      version_name: '0.0.0'
+      dry_run: false
+    secrets:
+      NPM_TOKEN: ${{ secrets.NPM_TOKEN }}

.github/workflows/compiler_typescript.yml

@@ -0,0 +1,108 @@
+name: (Compiler) TypeScript
+
+on:
+  push:
+    branches: [main]
+  pull_request:
+    paths:
+      - compiler/**
+      - .github/workflows/compiler_typescript.yml
+
+permissions: {}
+
+concurrency:
+  group: ${{ github.workflow }}-${{ github.ref_name }}-${{ github.event.pull_request.number || github.run_id }}
+  cancel-in-progress: true
+
+env:
+  TZ: /usr/share/zoneinfo/America/Los_Angeles
+  # https://github.com/actions/cache/blob/main/tips-and-workarounds.md#cache-segment-restore-timeout
+  SEGMENT_DOWNLOAD_TIMEOUT_MINS: 1
+
+defaults:
+  run:
+    working-directory: compiler
+
+jobs:
+  discover_yarn_workspaces:
+    name: Discover yarn workspaces
+    runs-on: ubuntu-latest
+    outputs:
+      matrix: ${{ steps.set-matrix.outputs.matrix }}
+    steps:
+      - uses: actions/checkout@v4
+      - id: set-matrix
+        run: echo "matrix=$(find packages -mindepth 1 -maxdepth 1 -type d | sed 's!packages/!!g' | tr '\n' ',' | sed s/.$// | jq -Rsc '. / "," - [""]')" >> $GITHUB_OUTPUT
+
+  # Hardcoded to improve parallelism
+  lint:
+    name: Lint babel-plugin-react-compiler
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version-file: '.nvmrc'
+          cache: yarn
+          cache-dependency-path: compiler/yarn.lock
+      - name: Restore cached node_modules
+        uses: actions/cache@v4
+        id: node_modules
+        with:
+          path: |
+            **/node_modules
+          key: compiler-node_modules-v6-${{ runner.arch }}-${{ runner.os }}-${{ hashFiles('compiler/yarn.lock') }}
+      - run: yarn install --frozen-lockfile
+        if: steps.node_modules.outputs.cache-hit != 'true'
+      - run: yarn workspace babel-plugin-react-compiler lint
+
+  # Hardcoded to improve parallelism
+  jest:
+    name: Jest babel-plugin-react-compiler
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version-file: '.nvmrc'
+          cache: yarn
+          cache-dependency-path: compiler/yarn.lock
+      - name: Restore cached node_modules
+        uses: actions/cache@v4
+        id: node_modules
+        with:
+          path: |
+            **/node_modules
+          key: compiler-node_modules-v6-${{ runner.arch }}-${{ runner.os }}-${{ hashFiles('compiler/yarn.lock') }}
+      - run: yarn install --frozen-lockfile
+        if: steps.node_modules.outputs.cache-hit != 'true'
+      - run: yarn workspace babel-plugin-react-compiler jest
+
+  test:
+    name: Test ${{ matrix.workspace_name }}
+    needs: discover_yarn_workspaces
+    runs-on: ubuntu-latest
+    strategy:
+      fail-fast: false
+      matrix:
+        workspace_name: ${{ fromJSON(needs.discover_yarn_workspaces.outputs.matrix) }}
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version-file: '.nvmrc'
+          cache: yarn
+          cache-dependency-path: compiler/yarn.lock
+      - name: Restore cached node_modules
+        uses: actions/cache@v4
+        id: node_modules
+        with:
+          path: |
+            **/node_modules
+          key: compiler-node_modules-v6-${{ runner.arch }}-${{ runner.os }}-${{ hashFiles('compiler/yarn.lock') }}
+      - run: yarn install --frozen-lockfile
+        if: steps.node_modules.outputs.cache-hit != 'true'
+      - run: xvfb-run -a yarn workspace ${{ matrix.workspace_name }} test
+        if: runner.os == 'Linux' && matrix.workspace_name == 'react-forgive'
+      - run: yarn workspace ${{ matrix.workspace_name }} test
+        if: matrix.workspace_name != 'react-forgive'

.github/workflows/devtools_discord_notify.yml

@@ -0,0 +1,49 @@
+name: (DevTools) Discord Notify
+
+on:
+  pull_request_target:
+    types: [opened, ready_for_review]
+    paths:
+      - packages/react-devtools**
+      - .github/workflows/devtools_**.yml
+
+permissions: {}
+
+jobs:
+  check_access:
+    if: ${{ github.event.pull_request.draft == false }}
+    runs-on: ubuntu-latest
+    outputs:
+      is_member_or_collaborator: ${{ steps.check_is_member_or_collaborator.outputs.is_member_or_collaborator }}
+    steps:
+      - run: echo ${{ github.event.pull_request.author_association }}
+      - name: Check is member or collaborator
+        id: check_is_member_or_collaborator
+        if: ${{ github.event.pull_request.author_association == 'MEMBER' || github.event.pull_request.author_association == 'COLLABORATOR' }}
+        run: echo "is_member_or_collaborator=true" >> "$GITHUB_OUTPUT"
+
+  check_maintainer:
+    if: ${{ needs.check_access.outputs.is_member_or_collaborator == 'true' || needs.check_access.outputs.is_member_or_collaborator == true }}
+    needs: [check_access]
+    uses: facebook/react/.github/workflows/shared_check_maintainer.yml@main
+    permissions:
+      # Used by check_maintainer
+      contents: read
+    with:
+      actor: ${{ github.event.pull_request.user.login }}
+
+  notify:
+    if: ${{ needs.check_maintainer.outputs.is_core_team == 'true' }}
+    needs: check_maintainer
+    runs-on: ubuntu-latest
+    steps:
+      - name: Discord Webhook Action
+        uses: tsickert/discord-webhook@86dc739f3f165f16dadc5666051c367efa1692f4
+        with:
+          webhook-url: ${{ secrets.DEVTOOLS_DISCORD_WEBHOOK_URL }}
+          embed-author-name: ${{ github.event.pull_request.user.login }}
+          embed-author-url: ${{ github.event.pull_request.user.html_url }}
+          embed-author-icon-url: ${{ github.event.pull_request.user.avatar_url }}
+          embed-title: '#${{ github.event.number }} (+${{github.event.pull_request.additions}} -${{github.event.pull_request.deletions}}): ${{ github.event.pull_request.title }}'
+          embed-description: ${{ github.event.pull_request.body }}
+          embed-url: ${{ github.event.pull_request.html_url }}

.github/workflows/devtools_regression_tests.yml

@@ -0,0 +1,205 @@
+name: (DevTools) Regression Tests
+
+on:
+  schedule:
+    - cron: 0 0 * * *
+  workflow_dispatch:
+    inputs:
+      commit_sha:
+        required: false
+        type: string
+
+permissions: {}
+
+env:
+  TZ: /usr/share/zoneinfo/America/Los_Angeles
+  # https://github.com/actions/cache/blob/main/tips-and-workarounds.md#cache-segment-restore-timeout
+  SEGMENT_DOWNLOAD_TIMEOUT_MINS: 1
+
+jobs:
+  download_build:
+    name: Download base build
+    runs-on: ubuntu-latest
+    permissions:
+      # We use github.token to download the build artifact from a previous runtime_build_and_test.yml run
+      actions: read
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version-file: '.nvmrc'
+          cache: yarn
+          cache-dependency-path: yarn.lock
+      - name: Restore cached node_modules
+        uses: actions/cache@v4
+        id: node_modules
+        with:
+          path: |
+            **/node_modules
+          key: runtime-release-node_modules-v6-${{ runner.arch }}-${{ runner.os }}-${{ hashFiles('yarn.lock', 'scripts/release/yarn.lock') }}
+      - name: Ensure clean build directory
+        run: rm -rf build
+      - run: yarn install --frozen-lockfile
+        if: steps.node_modules.outputs.cache-hit != 'true'
+      - run: yarn --cwd scripts/release install --frozen-lockfile
+        if: steps.node_modules.outputs.cache-hit != 'true'
+      - name: Download react-devtools artifacts for base revision
+        run: |
+          git fetch origin main
+          GH_TOKEN=${{ github.token }} scripts/release/download-experimental-build.js --commit=${{ inputs.commit_sha || '$(git rev-parse origin/main)' }}
+      - name: Display structure of build
+        run: ls -R build
+      - name: Archive build
+        uses: actions/upload-artifact@v4
+        with:
+          name: build
+          path: build
+          if-no-files-found: error
+
+  build_devtools_and_process_artifacts:
+    name: Build DevTools and process artifacts
+    needs: download_build
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version-file: '.nvmrc'
+          cache: yarn
+          cache-dependency-path: yarn.lock
+      - name: Restore cached node_modules
+        uses: actions/cache@v4
+        id: node_modules
+        with:
+          path: |
+            **/node_modules
+          key: runtime-node_modules-v6-${{ runner.arch }}-${{ runner.os }}-${{ hashFiles('yarn.lock') }}
+      - name: Ensure clean build directory
+        run: rm -rf build
+      - run: yarn install --frozen-lockfile
+        if: steps.node_modules.outputs.cache-hit != 'true'
+      - name: Restore archived build
+        uses: actions/download-artifact@v4
+        with:
+          name: build
+          path: build
+      - run: ./scripts/ci/pack_and_store_devtools_artifacts.sh
+        env:
+          RELEASE_CHANNEL: experimental
+      - name: Display structure of build
+        run: ls -R build
+      - name: Archive devtools build
+        uses: actions/upload-artifact@v4
+        with:
+          name: react-devtools
+          path: build/devtools
+          if-no-files-found: error
+      # Simplifies getting the extension for local testing
+      - name: Archive chrome extension
+        uses: actions/upload-artifact@v4
+        with:
+          name: react-devtools-chrome-extension
+          path: build/devtools/chrome-extension.zip
+          if-no-files-found: error
+      - name: Archive firefox extension
+        uses: actions/upload-artifact@v4
+        with:
+          name: react-devtools-firefox-extension
+          path: build/devtools/firefox-extension.zip
+          if-no-files-found: error
+
+  run_devtools_tests_for_versions:
+    name: Run DevTools tests for versions
+    needs: build_devtools_and_process_artifacts
+    runs-on: ubuntu-latest
+    strategy:
+      fail-fast: false
+      matrix:
+        version:
+          - "16.0"
+          - "16.5" # schedule package
+          - "16.8" # hooks
+          - "17.0"
+          - "18.0"
+          - "18.2" # compiler polyfill
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version-file: '.nvmrc'
+          cache: yarn
+          cache-dependency-path: yarn.lock
+      - name: Restore cached node_modules
+        uses: actions/cache@v4
+        id: node_modules
+        with:
+          path: |
+            **/node_modules
+          key: runtime-node_modules-v6-${{ runner.arch }}-${{ runner.os }}-${{ hashFiles('yarn.lock') }}
+      - run: yarn install --frozen-lockfile
+        if: steps.node_modules.outputs.cache-hit != 'true'
+      - name: Restore all archived build artifacts
+        uses: actions/download-artifact@v4
+      - name: Display structure of build
+        run: ls -R build
+      - run: ./scripts/ci/download_devtools_regression_build.js ${{ matrix.version }} --replaceBuild
+      - run: node ./scripts/jest/jest-cli.js --build --project devtools --release-channel=experimental --reactVersion ${{ matrix.version }} --ci
+
+  run_devtools_e2e_tests_for_versions:
+    name: Run DevTools e2e tests for versions
+    needs: build_devtools_and_process_artifacts
+    runs-on: ubuntu-latest
+    strategy:
+      fail-fast: false
+      matrix:
+        version:
+          - "16.0"
+          - "16.5" # schedule package
+          - "16.8" # hooks
+          - "17.0"
+          - "18.0"
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version-file: '.nvmrc'
+          cache: yarn
+          cache-dependency-path: yarn.lock
+      - name: Restore cached node_modules
+        uses: actions/cache@v4
+        id: node_modules
+        with:
+          path: |
+            **/node_modules
+          key: runtime-node_modules-v6-${{ runner.arch }}-${{ runner.os }}-${{ hashFiles('yarn.lock') }}
+      - run: yarn install --frozen-lockfile
+        if: steps.node_modules.outputs.cache-hit != 'true'
+      - name: Restore all archived build artifacts
+        uses: actions/download-artifact@v4
+      - name: Display structure of build
+        run: ls -R build
+      - name: Check Playwright version
+        id: playwright_version
+        run: echo "playwright_version=$(npm ls @playwright/test | grep @playwright | sed 's/.*@//' | head -1)" >> "$GITHUB_OUTPUT"
+      - name: Cache Playwright Browsers for version ${{ steps.playwright_version.outputs.playwright_version }}
+        id: cache_playwright_browsers
+        uses: actions/cache@v4
+        with:
+          path: ~/.cache/ms-playwright
+          key: playwright-browsers-v6-${{ runner.arch }}-${{ runner.os }}-${{ steps.playwright_version.outputs.playwright_version }}
+      - run: npx playwright install --with-deps
+        if: steps.cache_playwright_browsers.outputs.cache-hit != 'true'
+      - run: npx playwright install-deps
+        if: steps.cache_playwright_browsers.outputs.cache-hit == 'true'
+      - run: ./scripts/ci/download_devtools_regression_build.js ${{ matrix.version }}
+      - run: ls -R build-regression
+      - run: ./scripts/ci/run_devtools_e2e_tests.js ${{ matrix.version }}
+        env:
+          RELEASE_CHANNEL: experimental
+      - name: Cleanup build regression folder
+        run: rm -r ./build-regression
+      - uses: actions/upload-artifact@v4
+        with:
+          name: screenshots
+          path: ./tmp/playwright-artifacts
+          if-no-files-found: warn

.github/workflows/runtime_build_and_test.yml

@@ -0,0 +1,909 @@
+name: (Runtime) Build and Test
+
+on:
+  push:
+    branches: [main]
+  pull_request:
+    paths-ignore:
+      - compiler/**
+  workflow_dispatch:
+    inputs:
+      commit_sha:
+        required: false
+        type: string
+        default: ''
+
+permissions: {}
+
+concurrency:
+  group: ${{ github.workflow }}-${{ github.ref_name }}-${{ github.event.pull_request.number || github.run_id }}
+  cancel-in-progress: true
+
+env:
+  TZ: /usr/share/zoneinfo/America/Los_Angeles
+  # https://github.com/actions/cache/blob/main/tips-and-workarounds.md#cache-segment-restore-timeout
+  SEGMENT_DOWNLOAD_TIMEOUT_MINS: 1
+
+jobs:
+  # ----- NODE_MODULES CACHE -----
+  # Centralize the node_modules cache so it is saved once and each subsequent job only needs to
+  # restore the cache. Prevents race conditions where multiple workflows try to write to the cache.
+  runtime_node_modules_cache:
+    name: Cache Runtime node_modules
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          ref: ${{ github.event.inputs.commit_sha != '' && github.event.inputs.commit_sha || github.event.pull_request.head.sha || github.sha }}
+      - name: Check cache hit
+        uses: actions/cache/restore@v4
+        id: node_modules
+        with:
+          path: |
+            **/node_modules
+          key: runtime-node_modules-v6-${{ runner.arch }}-${{ runner.os }}-${{ hashFiles('yarn.lock') }}
+          lookup-only: true
+      - uses: actions/setup-node@v4
+        if: steps.node_modules.outputs.cache-hit != 'true'
+        with:
+          node-version-file: '.nvmrc'
+          cache: yarn
+          cache-dependency-path: yarn.lock
+      - name: Warm with old cache
+        if: steps.node_modules.outputs.cache-hit != 'true'
+        uses: actions/cache/restore@v4
+        with:
+          path: |
+            **/node_modules
+          key: runtime-node_modules-v6-${{ runner.arch }}-${{ runner.os }}-${{ hashFiles('yarn.lock') }}
+          restore-keys: |
+            runtime-node_modules-v6-${{ runner.arch }}-${{ runner.os }}-
+            runtime-node_modules-v6-
+      - run: yarn install --frozen-lockfile
+        if: steps.node_modules.outputs.cache-hit != 'true'
+      - name: Save cache
+        if: steps.node_modules.outputs.cache-hit != 'true'
+        uses: actions/cache/save@v4
+        with:
+          path: |
+            **/node_modules
+          key: runtime-node_modules-v6-${{ runner.arch }}-${{ runner.os }}-${{ hashFiles('yarn.lock') }}
+
+  runtime_compiler_node_modules_cache:
+    name: Cache Runtime, Compiler node_modules
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          ref: ${{ github.event.inputs.commit_sha != '' && github.event.inputs.commit_sha || github.event.pull_request.head.sha || github.sha }}
+      - name: Check cache hit
+        uses: actions/cache/restore@v4
+        id: node_modules
+        with:
+          path: |
+            **/node_modules
+          key: runtime-and-compiler-node_modules-v6-${{ runner.arch }}-${{ runner.os }}-${{ hashFiles('yarn.lock', 'compiler/yarn.lock') }}
+          lookup-only: true
+      - uses: actions/setup-node@v4
+        if: steps.node_modules.outputs.cache-hit != 'true'
+        with:
+          node-version-file: '.nvmrc'
+          cache: yarn
+          cache-dependency-path: |
+            yarn.lock
+            compiler/yarn.lock
+      - name: Warm with old cache
+        if: steps.node_modules.outputs.cache-hit != 'true'
+        uses: actions/cache/restore@v4
+        with:
+          path: |
+            **/node_modules
+          key: runtime-and-compiler-node_modules-v6-${{ runner.arch }}-${{ runner.os }}-${{ hashFiles('yarn.lock', 'compiler/yarn.lock') }}
+          restore-keys: |
+            runtime-and-compiler-node_modules-v6-${{ runner.arch }}-${{ runner.os }}-
+            runtime-and-compiler-node_modules-v6-
+      - run: yarn install --frozen-lockfile
+        if: steps.node_modules.outputs.cache-hit != 'true'
+      - run: yarn --cwd compiler install --frozen-lockfile
+        if: steps.node_modules.outputs.cache-hit != 'true'
+      - name: Save cache
+        if: steps.node_modules.outputs.cache-hit != 'true'
+        uses: actions/cache/save@v4
+        with:
+          path: |
+            **/node_modules
+          key: runtime-and-compiler-node_modules-v6-${{ runner.arch }}-${{ runner.os }}-${{ hashFiles('yarn.lock', 'compiler/yarn.lock') }}
+
+  # ----- FLOW -----
+  discover_flow_inline_configs:
+    name: Discover flow inline configs
+    runs-on: ubuntu-latest
+    outputs:
+      matrix: ${{ steps.set-matrix.outputs.result }}
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          ref: ${{ github.event.inputs.commit_sha != '' && github.event.inputs.commit_sha || github.event.pull_request.head.sha || github.sha }}
+      - uses: actions/github-script@v7
+        id: set-matrix
+        with:
+          script: |
+            const inlinedHostConfigs = require('./scripts/shared/inlinedHostConfigs.js');
+            return inlinedHostConfigs.map(config => config.shortName);
+
+  flow:
+    name: Flow check ${{ matrix.flow_inline_config_shortname }}
+    needs: [discover_flow_inline_configs, runtime_node_modules_cache]
+    runs-on: ubuntu-latest
+    strategy:
+      fail-fast: false
+      matrix:
+        flow_inline_config_shortname: ${{ fromJSON(needs.discover_flow_inline_configs.outputs.matrix) }}
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          ref: ${{ github.event.inputs.commit_sha != '' && github.event.inputs.commit_sha || github.event.pull_request.head.sha || github.sha }}
+      - uses: actions/setup-node@v4
+        with:
+          node-version-file: '.nvmrc'
+          cache: yarn
+          cache-dependency-path: yarn.lock
+      - name: Restore cached node_modules
+        uses: actions/cache/restore@v4
+        id: node_modules
+        with:
+          path: |
+            **/node_modules
+          key: runtime-node_modules-v6-${{ runner.arch }}-${{ runner.os }}-${{ hashFiles('yarn.lock') }}
+          restore-keys: |
+            runtime-node_modules-v6-${{ runner.arch }}-${{ runner.os }}-
+            runtime-node_modules-v6-
+      - name: Ensure clean build directory
+        run: rm -rf build
+      - run: yarn install --frozen-lockfile
+        if: steps.node_modules.outputs.cache-hit != 'true'
+      - run: node ./scripts/tasks/flow-ci ${{ matrix.flow_inline_config_shortname }}
+
+  # ----- FIZZ -----
+  check_generated_fizz_runtime:
+    name: Confirm generated inline Fizz runtime is up to date
+    needs: [runtime_node_modules_cache]
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          ref: ${{ github.event.inputs.commit_sha != '' && github.event.inputs.commit_sha || github.event.pull_request.head.sha || github.sha }}
+      - uses: actions/setup-node@v4
+        with:
+          node-version-file: '.nvmrc'
+          cache: yarn
+          cache-dependency-path: yarn.lock
+      - name: Restore cached node_modules
+        uses: actions/cache/restore@v4
+        id: node_modules
+        with:
+          path: |
+            **/node_modules
+          key: runtime-node_modules-v6-${{ runner.arch }}-${{ runner.os }}-${{ hashFiles('yarn.lock') }}
+          restore-keys: |
+            runtime-node_modules-v6-${{ runner.arch }}-${{ runner.os }}-
+            runtime-node_modules-v6-
+      - name: Ensure clean build directory
+        run: rm -rf build
+      - run: yarn install --frozen-lockfile
+        if: steps.node_modules.outputs.cache-hit != 'true'
+      - run: |
+          yarn generate-inline-fizz-runtime
+          git diff --exit-code || (echo "There was a change to the Fizz runtime. Run \`yarn generate-inline-fizz-runtime\` and check in the result." && false)
+
+  # ----- FEATURE FLAGS -----
+  flags:
+    name: Check flags
+    needs: [runtime_node_modules_cache]
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          ref: ${{ github.event.inputs.commit_sha != '' && github.event.inputs.commit_sha || github.event.pull_request.head.sha || github.sha }}
+      - uses: actions/setup-node@v4
+        with:
+          node-version-file: '.nvmrc'
+          cache: yarn
+          cache-dependency-path: yarn.lock
+      - name: Restore cached node_modules
+        uses: actions/cache/restore@v4
+        id: node_modules
+        with:
+          path: |
+            **/node_modules
+          key: runtime-node_modules-v6-${{ runner.arch }}-${{ runner.os }}-${{ hashFiles('yarn.lock') }}
+      - name: Ensure clean build directory
+        run: rm -rf build
+      - run: yarn install --frozen-lockfile
+        if: steps.node_modules.outputs.cache-hit != 'true'
+      - run: yarn flags
+
+  # ----- TESTS -----
+  test:
+    name: yarn test ${{ matrix.params }} (Shard ${{ matrix.shard }})
+    needs: [runtime_compiler_node_modules_cache]
+    runs-on: ubuntu-latest
+    strategy:
+      fail-fast: false
+      matrix:
+        params:
+          - "-r=stable --env=development"
+          - "-r=stable --env=production"
+          - "-r=experimental --env=development"
+          - "-r=experimental --env=production"
+          - "-r=www-classic --env=development --variant=false"
+          - "-r=www-classic --env=production --variant=false"
+          - "-r=www-classic --env=development --variant=true"
+          - "-r=www-classic --env=production --variant=true"
+          - "-r=www-modern --env=development --variant=false"
+          - "-r=www-modern --env=production --variant=false"
+          - "-r=www-modern --env=development --variant=true"
+          - "-r=www-modern --env=production --variant=true"
+          - "-r=xplat --env=development --variant=false"
+          - "-r=xplat --env=development --variant=true"
+          - "-r=xplat --env=production --variant=false"
+          - "-r=xplat --env=production --variant=true"
+          # TODO: Test more persistent configurations?
+          - "-r=stable --env=development --persistent"
+          - "-r=experimental --env=development --persistent"
+        shard:
+          - 1/5
+          - 2/5
+          - 3/5
+          - 4/5
+          - 5/5
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          ref: ${{ github.event.inputs.commit_sha != '' && github.event.inputs.commit_sha || github.event.pull_request.head.sha || github.sha }}
+      - uses: actions/setup-node@v4
+        with:
+          node-version-file: '.nvmrc'
+          cache: yarn
+          cache-dependency-path: |
+            yarn.lock
+            compiler/yarn.lock
+      - name: Restore cached node_modules
+        uses: actions/cache/restore@v4
+        id: node_modules
+        with:
+          path: |
+            **/node_modules
+          key: runtime-and-compiler-node_modules-v6-${{ runner.arch }}-${{ runner.os }}-${{ hashFiles('yarn.lock', 'compiler/yarn.lock') }}
+          restore-keys: |
+            runtime-and-compiler-node_modules-v6-${{ runner.arch }}-${{ runner.os }}-
+            runtime-and-compiler-node_modules-v6-
+      - name: Ensure clean build directory
+        run: rm -rf build
+      - run: yarn install --frozen-lockfile
+        if: steps.node_modules.outputs.cache-hit != 'true'
+      - run: yarn --cwd compiler install --frozen-lockfile
+        if: steps.node_modules.outputs.cache-hit != 'true'
+      - run: yarn test ${{ matrix.params }} --ci --shard=${{ matrix.shard }}
+
+  # Hardcoded to improve parallelism
+  test-linter:
+    name: Test eslint-plugin-react-hooks
+    needs: [runtime_compiler_node_modules_cache]
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version-file: '.nvmrc'
+          cache: yarn
+          cache-dependency-path:  |
+            yarn.lock
+            compiler/yarn.lock
+      - name: Restore cached node_modules
+        uses: actions/cache@v4
+        id: node_modules
+        with:
+          path: |
+            **/node_modules
+          key: runtime-and-compiler-node_modules-v6-${{ runner.arch }}-${{ runner.os }}-${{ hashFiles('yarn.lock', 'compiler/yarn.lock') }}
+      - name: Install runtime dependencies
+        run: yarn install --frozen-lockfile
+        if: steps.node_modules.outputs.cache-hit != 'true'
+      - name: Install compiler dependencies
+        run: yarn install --frozen-lockfile
+        working-directory: compiler
+        if: steps.node_modules.outputs.cache-hit != 'true'
+      - run: ./scripts/react-compiler/build-compiler.sh && ./scripts/react-compiler/link-compiler.sh
+      - run: yarn workspace eslint-plugin-react-hooks test
+
+  # ----- BUILD -----
+  build_and_lint:
+    name: yarn build and lint
+    needs: [runtime_compiler_node_modules_cache]
+    runs-on: ubuntu-latest
+    strategy:
+      fail-fast: false
+      matrix:
+        # yml is dumb. update the --total arg to yarn build if you change the number of workers
+        worker_id: [0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24]
+        release_channel: [stable, experimental]
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          ref: ${{ github.event.inputs.commit_sha != '' && github.event.inputs.commit_sha || github.event.pull_request.head.sha || github.sha }}
+      - uses: actions/setup-node@v4
+        with:
+          node-version-file: '.nvmrc'
+          cache: yarn
+          cache-dependency-path: |
+            yarn.lock
+            compiler/yarn.lock
+      - uses: actions/setup-java@v4
+        with:
+          distribution: temurin
+          java-version: 11.0.22
+      - name: Restore cached node_modules
+        uses: actions/cache/restore@v4
+        id: node_modules
+        with:
+          path: |
+            **/node_modules
+          key: runtime-and-compiler-node_modules-v6-${{ runner.arch }}-${{ runner.os }}-${{ hashFiles('yarn.lock', 'compiler/yarn.lock') }}
+          restore-keys: |
+            runtime-and-compiler-node_modules-v6-${{ runner.arch }}-${{ runner.os }}-
+            runtime-and-compiler-node_modules-v6-
+      - name: Ensure clean build directory
+        run: rm -rf build
+      - run: yarn install --frozen-lockfile
+        if: steps.node_modules.outputs.cache-hit != 'true'
+      - run: yarn --cwd compiler install --frozen-lockfile
+        if: steps.node_modules.outputs.cache-hit != 'true'
+      - run: yarn build --index=${{ matrix.worker_id }} --total=25 --r=${{ matrix.release_channel }} --ci
+        env:
+          CI: github
+          RELEASE_CHANNEL: ${{ matrix.release_channel }}
+          NODE_INDEX: ${{ matrix.worker_id }}
+      - name: Lint build
+        run: yarn lint-build
+      - name: Display structure of build
+        run: ls -R build
+      - name: Archive build
+        uses: actions/upload-artifact@v4
+        with:
+          name: _build_${{ matrix.worker_id }}_${{ matrix.release_channel }}
+          path: build
+          if-no-files-found: error
+
+  test_build:
+    name: yarn test-build
+    needs: [build_and_lint, runtime_compiler_node_modules_cache]
+    strategy:
+      fail-fast: false
+      matrix:
+        test_params: [
+          # Intentionally passing these as strings instead of creating a
+          # separate parameter per CLI argument, since it's easier to
+          # control/see which combinations we want to run.
+          -r=stable --env=development,
+          -r=stable --env=production,
+          -r=experimental --env=development,
+          -r=experimental --env=production,
+
+          # Dev Tools
+          --project=devtools -r=experimental,
+
+          # TODO: Update test config to support www build tests
+          # - "-r=www-classic --env=development --variant=false"
+          # - "-r=www-classic --env=production --variant=false"
+          # - "-r=www-classic --env=development --variant=true"
+          # - "-r=www-classic --env=production --variant=true"
+          # - "-r=www-modern --env=development --variant=false"
+          # - "-r=www-modern --env=production --variant=false"
+          # - "-r=www-modern --env=development --variant=true"
+          # - "-r=www-modern --env=production --variant=true"
+
+          # TODO: Update test config to support xplat build tests
+          # - "-r=xplat --env=development --variant=false"
+          # - "-r=xplat --env=development --variant=true"
+          # - "-r=xplat --env=production --variant=false"
+          # - "-r=xplat --env=production --variant=true"
+
+          # TODO: Test more persistent configurations?
+        ]
+        shard:
+          - 1/10
+          - 2/10
+          - 3/10
+          - 4/10
+          - 5/10
+          - 6/10
+          - 7/10
+          - 8/10
+          - 9/10
+          - 10/10
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          ref: ${{ github.event.inputs.commit_sha != '' && github.event.inputs.commit_sha || github.event.pull_request.head.sha || github.sha }}
+      - uses: actions/setup-node@v4
+        with:
+          node-version-file: '.nvmrc'
+          cache: yarn
+          cache-dependency-path: |
+            yarn.lock
+            compiler/yarn.lock
+      - name: Restore cached node_modules
+        uses: actions/cache/restore@v4
+        id: node_modules
+        with:
+          path: |
+            **/node_modules
+          key: runtime-and-compiler-node_modules-v6-${{ runner.arch }}-${{ runner.os }}-${{ hashFiles('yarn.lock', 'compiler/yarn.lock') }}
+          restore-keys: |
+            runtime-and-compiler-node_modules-v6-${{ runner.arch }}-${{ runner.os }}-
+            runtime-and-compiler-node_modules-v6-
+      - name: Ensure clean build directory
+        run: rm -rf build
+      - run: yarn install --frozen-lockfile
+        if: steps.node_modules.outputs.cache-hit != 'true'
+      - run: yarn --cwd compiler install --frozen-lockfile
+        if: steps.node_modules.outputs.cache-hit != 'true'
+      - name: Restore archived build
+        uses: actions/download-artifact@v4
+        with:
+          pattern: _build_*
+          path: build
+          merge-multiple: true
+      - name: Display structure of build
+        run: ls -R build
+      - run: yarn test --build ${{ matrix.test_params }} --shard=${{ matrix.shard }} --ci
+
+  process_artifacts_combined:
+    name: Process artifacts combined
+    needs: [build_and_lint, runtime_node_modules_cache]
+    permissions:
+      # https://github.com/actions/attest-build-provenance
+      id-token: write
+      attestations: write
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          ref: ${{ github.event.inputs.commit_sha != '' && github.event.inputs.commit_sha || github.event.pull_request.head.sha || github.sha }}
+      - uses: actions/setup-node@v4
+        with:
+          node-version-file: '.nvmrc'
+          cache: yarn
+          cache-dependency-path: yarn.lock
+      - name: Restore cached node_modules
+        uses: actions/cache/restore@v4
+        id: node_modules
+        with:
+          path: |
+            **/node_modules
+          key: runtime-node_modules-v6-${{ runner.arch }}-${{ runner.os }}-${{ hashFiles('yarn.lock') }}
+          restore-keys: |
+            runtime-node_modules-v6-${{ runner.arch }}-${{ runner.os }}-
+            runtime-node_modules-v6-
+      - name: Ensure clean build directory
+        run: rm -rf build
+      - run: yarn install --frozen-lockfile
+        if: steps.node_modules.outputs.cache-hit != 'true'
+      - name: Restore archived build
+        uses: actions/download-artifact@v4
+        with:
+          pattern: _build_*
+          path: build
+          merge-multiple: true
+      - name: Display structure of build
+        run: ls -R build
+      - run: echo ${{ github.event.inputs.commit_sha != '' && github.event.inputs.commit_sha || github.event.pull_request.head.sha || github.sha }} >> build/COMMIT_SHA
+      - name: Scrape warning messages
+        run: |
+          mkdir -p ./build/__test_utils__
+          node ./scripts/print-warnings/print-warnings.js > build/__test_utils__/ReactAllWarnings.js
+        # Compress build directory into a single tarball for easy download
+      - run: tar -zcvf ./build.tgz ./build
+        # TODO: Migrate scripts to use `build` directory instead of `build2`
+      - run: cp ./build.tgz ./build2.tgz
+      - name: Archive build artifacts
+        id: upload_artifacts_combined
+        uses: actions/upload-artifact@v4
+        with:
+          name: artifacts_combined
+          path: |
+            ./build.tgz
+            ./build2.tgz
+          if-no-files-found: error
+      - uses: actions/attest-build-provenance@v2
+        # We don't verify builds generated from pull requests not originating from facebook/react.
+        # However, if the PR lands, the run on `main` will generate the attestation which can then
+        # be used to download a build via scripts/release/download-experimental-build.js.
+        #
+        # Note that this means that scripts/release/download-experimental-build.js must be run with
+        # --no-verify when downloading a build from a fork.
+        if: github.event_name == 'push' && github.ref_name == 'main' || github.event.pull_request.head.repo.full_name == github.repository
+        with:
+          subject-name: artifacts_combined.zip
+          subject-digest: sha256:${{ steps.upload_artifacts_combined.outputs.artifact-digest }}
+
+  check_error_codes:
+    name: Search build artifacts for unminified errors
+    needs: [build_and_lint, runtime_node_modules_cache]
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          ref: ${{ github.event.inputs.commit_sha != '' && github.event.inputs.commit_sha || github.event.pull_request.head.sha || github.sha }}
+      - uses: actions/setup-node@v4
+        with:
+          node-version-file: '.nvmrc'
+          cache: yarn
+          cache-dependency-path: yarn.lock
+      - name: Restore cached node_modules
+        uses: actions/cache/restore@v4
+        id: node_modules
+        with:
+          path: |
+            **/node_modules
+          key: runtime-node_modules-v6-${{ runner.arch }}-${{ runner.os }}-${{ hashFiles('yarn.lock') }}
+          restore-keys: |
+            runtime-node_modules-v6-${{ runner.arch }}-${{ runner.os }}-
+            runtime-node_modules-v6-
+      - name: Ensure clean build directory
+        run: rm -rf build
+      - run: yarn install --frozen-lockfile
+        if: steps.node_modules.outputs.cache-hit != 'true'
+      - name: Restore archived build
+        uses: actions/download-artifact@v4
+        with:
+          pattern: _build_*
+          path: build
+          merge-multiple: true
+      - name: Display structure of build
+        run: ls -R build
+      - name: Search build artifacts for unminified errors
+        run: |
+          yarn extract-errors
+          git diff --exit-code || (echo "Found unminified errors. Either update the error codes map or disable error minification for the affected build, if appropriate." && false)
+
+  check_release_dependencies:
+    name: Check release dependencies
+    needs: [build_and_lint, runtime_node_modules_cache]
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          ref: ${{ github.event.inputs.commit_sha != '' && github.event.inputs.commit_sha || github.event.pull_request.head.sha || github.sha }}
+      - uses: actions/setup-node@v4
+        with:
+          node-version-file: '.nvmrc'
+          cache: yarn
+          cache-dependency-path: yarn.lock
+      - name: Restore cached node_modules
+        uses: actions/cache/restore@v4
+        id: node_modules
+        with:
+          path: |
+            **/node_modules
+          key: runtime-node_modules-v6-${{ runner.arch }}-${{ runner.os }}-${{ hashFiles('yarn.lock') }}
+          restore-keys: |
+            runtime-node_modules-v6-${{ runner.arch }}-${{ runner.os }}-
+            runtime-node_modules-v6-
+      - name: Ensure clean build directory
+        run: rm -rf build
+      - run: yarn install --frozen-lockfile
+        if: steps.node_modules.outputs.cache-hit != 'true'
+      - name: Restore archived build
+        uses: actions/download-artifact@v4
+        with:
+          pattern: _build_*
+          path: build
+          merge-multiple: true
+      - name: Display structure of build
+        run: ls -R build
+      - run: yarn check-release-dependencies
+
+  RELEASE_CHANNEL_stable_yarn_test_dom_fixtures:
+    name: Check fixtures DOM (stable)
+    needs: build_and_lint
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          ref: ${{ github.event.inputs.commit_sha != '' && github.event.inputs.commit_sha || github.event.pull_request.head.sha || github.sha }}
+      - uses: actions/setup-node@v4
+        with:
+          node-version-file: '.nvmrc'
+          cache: yarn
+          cache-dependency-path: yarn.lock
+      - name: Restore cached node_modules
+        uses: actions/cache@v4 # note: this does not reuse centralized cache since it has unique cache key
+        id: node_modules
+        with:
+          path: |
+            **/node_modules
+          key: fixtures_dom-node_modules-v6-${{ runner.arch }}-${{ runner.os }}-${{ hashFiles('yarn.lock', 'fixtures/dom/yarn.lock') }}
+      - name: Ensure clean build directory
+        run: rm -rf build
+      - run: yarn --cwd fixtures/dom install --frozen-lockfile
+        if: steps.node_modules.outputs.cache-hit != 'true'
+      - name: Restore archived build
+        uses: actions/download-artifact@v4
+        with:
+          pattern: _build_*
+          path: build
+          merge-multiple: true
+      - name: Display structure of build
+        run: ls -R build
+      - name: Run DOM fixture tests
+        run: |
+          yarn predev
+          yarn test
+        working-directory: fixtures/dom
+        env:
+          RELEASE_CHANNEL: stable
+
+  # ----- FLIGHT -----
+  run_fixtures_flight_tests:
+    name: Run fixtures Flight tests
+    needs: build_and_lint
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          ref: ${{ github.event.inputs.commit_sha != '' && github.event.inputs.commit_sha || github.event.pull_request.head.sha || github.sha }}
+      - uses: actions/setup-node@v4
+        with:
+          node-version-file: '.nvmrc'
+          cache: yarn
+          cache-dependency-path: yarn.lock
+      # Fixture copies some built packages from the workroot after install.
+      # That means dependencies of the built packages are not installed.
+      # We need to install dependencies of the workroot to fulfill all dependency constraints
+      - name: Restore cached node_modules
+        uses: actions/cache@v4 # note: this does not reuse centralized cache since it has unique cache key
+        id: node_modules
+        with:
+          path: |
+            **/node_modules
+          key: fixtures_flight-node_modules-v6-${{ runner.arch }}-${{ runner.os }}-${{ hashFiles('yarn.lock', 'fixtures/flight/yarn.lock') }}
+      - name: Ensure clean build directory
+        run: rm -rf build
+      - run: yarn install --frozen-lockfile
+        if: steps.node_modules.outputs.cache-hit != 'true'
+      - run: yarn --cwd fixtures/flight install --frozen-lockfile
+        if: steps.node_modules.outputs.cache-hit != 'true'
+      - name: Check Playwright version
+        id: playwright_version
+        run: echo "playwright_version=$(npm ls @playwright/test | grep @playwright | sed 's/.*@//' | head -1)" >> "$GITHUB_OUTPUT"
+      - name: Cache Playwright Browsers for version ${{ steps.playwright_version.outputs.playwright_version }}
+        id: cache_playwright_browsers
+        uses: actions/cache@v4
+        with:
+          path: ~/.cache/ms-playwright
+          key: playwright-browsers-v6-${{ runner.arch }}-${{ runner.os }}-${{ steps.playwright_version.outputs.playwright_version }}
+      - name: Playwright install deps
+        if: steps.cache_playwright_browsers.outputs.cache-hit != 'true'
+        working-directory: fixtures/flight
+        run: npx playwright install --with-deps chromium
+      - name: Restore archived build
+        uses: actions/download-artifact@v4
+        with:
+          pattern: _build_*
+          path: build
+          merge-multiple: true
+      - name: Display structure of build
+        run: ls -R build
+      - name: Run tests
+        working-directory: fixtures/flight
+        run: yarn test
+        env:
+          # Otherwise the webserver is a blackbox
+          DEBUG: pw:webserver
+      - name: Archive Flight fixture artifacts
+        uses: actions/upload-artifact@v4
+        with:
+          name: flight-playwright-report
+          path: fixtures/flight/playwright-report
+          if-no-files-found: warn
+      - name: Archive Flight fixture artifacts
+        uses: actions/upload-artifact@v4
+        with:
+          name: flight-test-results
+          path: fixtures/flight/test-results
+          if-no-files-found: ignore
+
+  # ----- DEVTOOLS -----
+  build_devtools_and_process_artifacts:
+    name: Build DevTools and process artifacts
+    needs: [build_and_lint, runtime_node_modules_cache]
+    runs-on: ubuntu-latest
+    strategy:
+      fail-fast: false
+      matrix:
+        browser: [chrome, firefox, edge]
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          ref: ${{ github.event.inputs.commit_sha != '' && github.event.inputs.commit_sha || github.event.pull_request.head.sha || github.sha }}
+      - uses: actions/setup-node@v4
+        with:
+          node-version-file: '.nvmrc'
+          cache: yarn
+          cache-dependency-path: yarn.lock
+      - name: Restore cached node_modules
+        uses: actions/cache/restore@v4
+        id: node_modules
+        with:
+          path: |
+            **/node_modules
+          key: runtime-node_modules-v6-${{ runner.arch }}-${{ runner.os }}-${{ hashFiles('yarn.lock') }}
+          restore-keys: |
+            runtime-node_modules-v6-${{ runner.arch }}-${{ runner.os }}-
+            runtime-node_modules-v6-
+      - name: Ensure clean build directory
+        run: rm -rf build
+      - run: yarn install --frozen-lockfile
+        if: steps.node_modules.outputs.cache-hit != 'true'
+      - name: Restore archived build
+        uses: actions/download-artifact@v4
+        with:
+          pattern: _build_*
+          path: build
+          merge-multiple: true
+      - run: ./scripts/ci/pack_and_store_devtools_artifacts.sh ${{ matrix.browser }}
+        env:
+          RELEASE_CHANNEL: experimental
+      - name: Display structure of build
+        run: ls -R build
+      # Simplifies getting the extension for local testing
+      - name: Archive ${{ matrix.browser }} extension
+        uses: actions/upload-artifact@v4
+        with:
+          name: react-devtools-${{ matrix.browser }}-extension
+          path: build/devtools/${{ matrix.browser }}-extension.zip
+          if-no-files-found: error
+      - name: Archive ${{ matrix.browser }} metadata
+        uses: actions/upload-artifact@v4
+        with:
+          name: react-devtools-${{ matrix.browser }}-metadata
+          path: build/devtools/webpack-stats.*.json
+
+  merge_devtools_artifacts:
+    name: Merge DevTools artifacts
+    needs: build_devtools_and_process_artifacts
+    runs-on: ubuntu-latest
+    steps:
+      - name: Merge artifacts
+        uses: actions/upload-artifact/merge@v4
+        with:
+          name: react-devtools
+          pattern: react-devtools-*
+
+  run_devtools_e2e_tests:
+    name: Run DevTools e2e tests
+    needs: [build_and_lint, runtime_node_modules_cache]
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          ref: ${{ github.event.inputs.commit_sha != '' && github.event.inputs.commit_sha || github.event.pull_request.head.sha || github.sha }}
+      - uses: actions/setup-node@v4
+        with:
+          node-version-file: '.nvmrc'
+          cache: yarn
+          cache-dependency-path: yarn.lock
+      - name: Restore cached node_modules
+        uses: actions/cache/restore@v4
+        id: node_modules
+        with:
+          path: |
+            **/node_modules
+          key: runtime-node_modules-v6-${{ runner.arch }}-${{ runner.os }}-${{ hashFiles('yarn.lock') }}
+          restore-keys: |
+            runtime-node_modules-v6-${{ runner.arch }}-${{ runner.os }}-
+            runtime-node_modules-v6-
+      - name: Ensure clean build directory
+        run: rm -rf build
+      - run: yarn install --frozen-lockfile
+        if: steps.node_modules.outputs.cache-hit != 'true'
+      - name: Restore archived build
+        uses: actions/download-artifact@v4
+        with:
+          pattern: _build_*
+          path: build
+          merge-multiple: true
+      - name: Check Playwright version
+        id: playwright_version
+        run: echo "playwright_version=$(npm ls @playwright/test | grep @playwright | sed 's/.*@//' | head -1)" >> "$GITHUB_OUTPUT"
+      - name: Cache Playwright Browsers for version ${{ steps.playwright_version.outputs.playwright_version }}
+        id: cache_playwright_browsers
+        uses: actions/cache@v4
+        with:
+          path: ~/.cache/ms-playwright
+          key: playwright-browsers-v6-${{ runner.arch }}-${{ runner.os }}-${{ steps.playwright_version.outputs.playwright_version }}
+      - name: Playwright install deps
+        if: steps.cache_playwright_browsers.outputs.cache-hit != 'true'
+        run: npx playwright install --with-deps chromium
+      - run: ./scripts/ci/run_devtools_e2e_tests.js
+        env:
+          RELEASE_CHANNEL: experimental
+      - name: Archive Playwright report
+        uses: actions/upload-artifact@v4
+        with:
+          name: devtools-playwright-artifacts
+          path: tmp/playwright-artifacts
+          if-no-files-found: warn
+
+  # ----- SIZEBOT -----
+  sizebot:
+    if: ${{ github.event_name == 'pull_request' && github.ref_name != 'main' && github.event.pull_request.base.ref == 'main' }}
+    name: Run sizebot
+    needs: [build_and_lint]
+    permissions:
+      # We use github.token to download the build artifact from a previous runtime_build_and_test.yml run
+      actions: read
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          ref: ${{ github.event.inputs.commit_sha != '' && github.event.inputs.commit_sha || github.event.pull_request.head.sha || github.sha }}
+      - uses: actions/setup-node@v4
+        with:
+          node-version-file: '.nvmrc'
+          cache: yarn
+          cache-dependency-path: yarn.lock
+      - name: Restore cached node_modules
+        uses: actions/cache@v4 # note: this does not reuse centralized cache since it has unique cache key
+        id: node_modules
+        with:
+          path: |
+            **/node_modules
+          key: runtime-release-node_modules-v6-${{ runner.arch }}-${{ runner.os }}-${{ hashFiles('yarn.lock', 'scripts/release/yarn.lock') }}
+      - name: Ensure clean build directory
+        run: rm -rf build
+      - run: yarn install --frozen-lockfile
+        if: steps.node_modules.outputs.cache-hit != 'true'
+      - run: yarn --cwd scripts/release install --frozen-lockfile
+        if: steps.node_modules.outputs.cache-hit != 'true'
+      - name: Download artifacts for base revision
+        # The build could have been generated from a fork, so we must download the build without
+        # any verification. This is safe since we only use this for sizebot calculation and the
+        # unverified artifact is not used. Additionally this workflow runs in the pull_request
+        # trigger so only restricted permissions are available.
+        run: |
+          GH_TOKEN=${{ github.token }} scripts/release/download-experimental-build.js --commit=$(git rev-parse ${{ github.event.pull_request.base.sha }}) ${{ (github.event.pull_request.head.repo.full_name != github.repository && '--noVerify') || ''}}
+          mv ./build ./base-build
+      - name: Delete extraneous files
+        # TODO: The `download-experimental-build` script copies the npm
+        # packages into the `node_modules` directory. This is a historical
+        # quirk of how the release script works. Let's pretend they
+        # don't exist.
+        run: rm -rf ./base-build/node_modules
+      - name: Display structure of base-build from origin/main
+        run: ls -R base-build
+      - name: Ensure clean build directory
+        run: rm -rf build
+      - name: Restore archived build for PR
+        uses: actions/download-artifact@v4
+        with:
+          pattern: _build_*
+          path: build
+          merge-multiple: true
+      - name: Scrape warning messages
+        run: |
+          mkdir -p ./build/__test_utils__
+          node ./scripts/print-warnings/print-warnings.js > build/__test_utils__/ReactAllWarnings.js
+      - name: Display structure of build for PR
+        run: ls -R build
+      - run: echo ${{ github.event.inputs.commit_sha != '' && github.event.inputs.commit_sha || github.event.pull_request.head.sha || github.sha }} >> build/COMMIT_SHA
+      - run: node ./scripts/tasks/danger
+      - name: Archive sizebot results
+        uses: actions/upload-artifact@v4
+        with:
+          name: sizebot-message
+          path: sizebot-message.md
+          if-no-files-found: ignore

.github/workflows/runtime_commit_artifacts.yml

@@ -0,0 +1,474 @@
+name: (Runtime) Commit Artifacts for Meta WWW and fbsource V2
+
+on:
+  workflow_run:
+    workflows: ["(Runtime) Build and Test"]
+    types: [completed]
+    branches:
+      - main
+  workflow_dispatch:
+    inputs:
+      commit_sha:
+        required: false
+        type: string
+      force:
+        description: 'Force a commit to the builds/... branches'
+        required: true
+        default: false
+        type: boolean
+      dry_run:
+        description: Perform a dry run (run everything except push)
+        required: true
+        default: false
+        type: boolean
+
+permissions: {}
+
+env:
+  TZ: /usr/share/zoneinfo/America/Los_Angeles
+  # https://github.com/actions/cache/blob/main/tips-and-workarounds.md#cache-segment-restore-timeout
+  SEGMENT_DOWNLOAD_TIMEOUT_MINS: 1
+
+jobs:
+  download_artifacts:
+    runs-on: ubuntu-latest
+    permissions:
+      # We use github.token to download the build artifact from a previous runtime_build_and_test.yml run
+      actions: read
+    steps:
+      - uses: actions/checkout@v4
+      - name: Restore cached node_modules
+        uses: actions/cache@v4
+        id: node_modules
+        with:
+          path: |
+            **/node_modules
+          key: runtime-release-node_modules-v6-${{ runner.arch }}-${{ runner.os }}-${{ hashFiles('yarn.lock', 'scripts/release/yarn.lock') }}
+      - name: Ensure clean build directory
+        run: rm -rf build
+      - run: yarn install --frozen-lockfile
+        if: steps.node_modules.outputs.cache-hit != 'true'
+      - run: yarn --cwd scripts/release install --frozen-lockfile
+        if: steps.node_modules.outputs.cache-hit != 'true'
+      - name: Download artifacts for base revision
+        run: |
+          GH_TOKEN=${{ github.token }} scripts/release/download-experimental-build.js --commit=${{ inputs.commit_sha || github.event.workflow_run.head_sha || github.sha }}
+      - name: Display structure of build
+        run: ls -R build
+      - name: Archive build
+        uses: actions/upload-artifact@v4
+        with:
+          name: build
+          path: build/
+          if-no-files-found: error
+
+
+  process_artifacts:
+    runs-on: ubuntu-latest
+    needs: [download_artifacts]
+    outputs:
+      www_branch_count: ${{ steps.check_branches.outputs.www_branch_count }}
+      fbsource_branch_count: ${{ steps.check_branches.outputs.fbsource_branch_count }}
+      last_version_classic: ${{ steps.get_last_version_www.outputs.last_version_classic }}
+      last_version_modern: ${{ steps.get_last_version_www.outputs.last_version_modern }}
+      last_version_rn: ${{ steps.get_last_version_rn.outputs.last_version_rn }}
+      current_version_classic: ${{ steps.get_current_version.outputs.current_version_classic }}
+      current_version_modern: ${{ steps.get_current_version.outputs.current_version_modern }}
+      current_version_rn: ${{ steps.get_current_version.outputs.current_version_rn }}
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          ref: builds/facebook-www
+      - name: "Get last version string for www"
+        id: get_last_version_www
+        run: |
+          # Empty checks only needed for backwards compatibility,can remove later.
+          VERSION_CLASSIC=$( [ -f ./compiled/facebook-www/VERSION_CLASSIC ] && cat ./compiled/facebook-www/VERSION_CLASSIC || echo '' )
+          VERSION_MODERN=$( [ -f ./compiled/facebook-www/VERSION_MODERN ] && cat ./compiled/facebook-www/VERSION_MODERN || echo '' )
+          echo "Last classic version is $VERSION_CLASSIC"
+          echo "Last modern version is $VERSION_MODERN"
+          echo "last_version_classic=$VERSION_CLASSIC" >> "$GITHUB_OUTPUT"
+          echo "last_version_modern=$VERSION_MODERN" >> "$GITHUB_OUTPUT"
+      - uses: actions/checkout@v4
+        with:
+          ref: builds/facebook-fbsource
+      - name: "Get last version string for rn"
+        id: get_last_version_rn
+        run: |
+          # Empty checks only needed for backwards compatibility,can remove later.
+          VERSION_NATIVE_FB=$( [ -f ./compiled-rn/VERSION_NATIVE_FB ] && cat ./compiled-rn/VERSION_NATIVE_FB || echo '' )
+          echo "Last rn version is $VERSION_NATIVE_FB"
+          echo "last_version_rn=$VERSION_NATIVE_FB" >> "$GITHUB_OUTPUT"
+      - uses: actions/checkout@v4
+      - 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: Restore downloaded build
+        uses: actions/download-artifact@v4
+        with:
+          name: build
+          path: build
+      - name: Display structure of build
+        run: ls -R build
+      - name: Strip @license from eslint plugin and react-refresh
+        run: |
+          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: Insert @headers into eslint plugin and react-refresh
+        run: |
+          sed -i -e 's/ LICENSE file in the root directory of this source tree./ LICENSE file in the root directory of this source tree.\n *\n * @noformat\n * @nolint\n * @lightSyntaxTransform\n * @preventMunge\n * @oncall react_core/' \
+            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 for React in www into compiled
+        run: |
+          # Move the facebook-www folder into compiled
+          mkdir ./compiled
+          mv build/facebook-www ./compiled
+
+          # Move ReactAllWarnings.js to facebook-www
+          mkdir ./compiled/facebook-www/__test_utils__
+          mv build/__test_utils__/ReactAllWarnings.js ./compiled/facebook-www/__test_utils__/ReactAllWarnings.js
+
+          # Copy eslint-plugin-react-hooks
+          mkdir ./compiled/eslint-plugin-react-hooks
+          cp build/oss-experimental/eslint-plugin-react-hooks/cjs/eslint-plugin-react-hooks.development.js \
+            ./compiled/eslint-plugin-react-hooks/index.js
+
+          # Move unstable_server-external-runtime.js into facebook-www
+          mv build/oss-experimental/react-dom/unstable_server-external-runtime.js \
+            ./compiled/facebook-www/unstable_server-external-runtime.js
+
+          # Move react-refresh-babel.development.js into babel-plugin-react-refresh
+          mkdir ./compiled/babel-plugin-react-refresh
+          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/react/{scheduler,react,react-dom,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/react/scheduler/
+          mv build/facebook-react-native/react/cjs/ $BASE_FOLDER/RKJSModules/vendor/react/react/
+          mv build/facebook-react-native/react-dom/cjs/ $BASE_FOLDER/RKJSModules/vendor/react/react-dom/
+          mv build/facebook-react-native/react-is/cjs/ $BASE_FOLDER/RKJSModules/vendor/react/react-is/
+          mv build/facebook-react-native/react-test-renderer/cjs/ $BASE_FOLDER/RKJSModules/vendor/react/react-test-renderer/
+
+          # Delete the OSS renderers, these are sync'd to RN separately.
+          RENDERER_FOLDER=$BASE_FOLDER/react-native-github/Libraries/Renderer/implementations/
+          rm $RENDERER_FOLDER/ReactFabric-{dev,prod,profiling}.js
+          
+          # Delete the legacy renderer shim, this is not sync'd and will get deleted in the future.
+          SHIM_FOLDER=$BASE_FOLDER/react-native-github/Libraries/Renderer/shims/
+          rm $SHIM_FOLDER/ReactNative.js
+
+          # Copy eslint-plugin-react-hooks
+          # NOTE: This is different from www, here we include the full package
+          #       including package.json to include dependencies in fbsource.
+          mkdir "$BASE_FOLDER/tools"
+          cp -r build/oss-experimental/eslint-plugin-react-hooks "$BASE_FOLDER/tools"
+
+          # Move React Native version file
+          mv build/facebook-react-native/VERSION_NATIVE_FB ./compiled-rn/VERSION_NATIVE_FB
+
+          ls -R ./compiled-rn
+      - name: Add REVISION files
+        run: |
+          echo ${{ inputs.commit_sha || github.event.workflow_run.head_sha || github.sha }} >> ./compiled/facebook-www/REVISION
+          cp ./compiled/facebook-www/REVISION ./compiled/facebook-www/REVISION_TRANSFORMS
+          echo ${{ inputs.commit_sha || github.event.workflow_run.head_sha || github.sha }} >> ./compiled-rn/facebook-fbsource/xplat/js/react-native-github/Libraries/Renderer/REVISION
+      - name: "Get current version string"
+        id: get_current_version
+        run: |
+          VERSION_CLASSIC=$(cat ./compiled/facebook-www/VERSION_CLASSIC)
+          VERSION_MODERN=$(cat ./compiled/facebook-www/VERSION_MODERN)
+          VERSION_NATIVE_FB=$(cat ./compiled-rn/VERSION_NATIVE_FB)
+          echo "Current classic version is $VERSION_CLASSIC"
+          echo "Current modern version is $VERSION_MODERN"
+          echo "Current rn version is $VERSION_NATIVE_FB"
+          echo "current_version_classic=$VERSION_CLASSIC" >> "$GITHUB_OUTPUT"
+          echo "current_version_modern=$VERSION_MODERN" >> "$GITHUB_OUTPUT"
+          echo "current_version_rn=$VERSION_NATIVE_FB" >> "$GITHUB_OUTPUT"
+      - uses: actions/upload-artifact@v4
+        with:
+          name: compiled
+          path: compiled/
+          if-no-files-found: error
+      - uses: actions/upload-artifact@v4
+        with:
+          name: compiled-rn
+          path: compiled-rn/
+          if-no-files-found: error
+
+  commit_www_artifacts:
+    needs: [download_artifacts, process_artifacts]
+    if: inputs.force == true || (github.ref == 'refs/heads/main' && needs.process_artifacts.outputs.www_branch_count == '0')
+    runs-on: ubuntu-latest
+    permissions:
+      # Used to push a commit to builds/facebook-www
+      contents: write
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          ref: builds/facebook-www
+      - name: Ensure clean directory
+        run: rm -rf compiled
+      - uses: actions/download-artifact@v4
+        with:
+          name: compiled
+          path: compiled/
+      - name: Revert version changes
+        if: needs.process_artifacts.outputs.last_version_classic != '' && needs.process_artifacts.outputs.last_version_modern != ''
+        env:
+          CURRENT_VERSION_CLASSIC: ${{ needs.process_artifacts.outputs.current_version_classic }}
+          CURRENT_VERSION_MODERN: ${{ needs.process_artifacts.outputs.current_version_modern }}
+          LAST_VERSION_CLASSIC: ${{ needs.process_artifacts.outputs.last_version_classic }}
+          LAST_VERSION_MODERN: ${{ needs.process_artifacts.outputs.last_version_modern }}
+        run: |
+          echo "Reverting $CURRENT_VERSION_CLASSIC to $LAST_VERSION_CLASSIC"
+          grep -rl "$CURRENT_VERSION_CLASSIC" ./compiled || echo "No files found with $CURRENT_VERSION_CLASSIC"
+          grep -rl "$CURRENT_VERSION_CLASSIC" ./compiled | xargs -r sed -i -e "s/$CURRENT_VERSION_CLASSIC/$LAST_VERSION_CLASSIC/g"
+          grep -rl "$CURRENT_VERSION_CLASSIC" ./compiled || echo "Classic version reverted"
+          echo "===================="
+          echo "Reverting $CURRENT_VERSION_MODERN to $LAST_VERSION_MODERN"
+          grep -rl "$CURRENT_VERSION_MODERN" ./compiled || echo "No files found with $CURRENT_VERSION_MODERN"
+          grep -rl "$CURRENT_VERSION_MODERN" ./compiled | xargs -r sed -i -e "s/$CURRENT_VERSION_MODERN/$LAST_VERSION_MODERN/g"
+          grep -rl "$CURRENT_VERSION_MODERN" ./compiled || echo "Modern version reverted"
+      - name: Check for changes
+        if: inputs.force != true
+        id: check_should_commit
+        run: |
+          echo "Full git status"
+          git add .
+          git status
+          echo "===================="
+          if git status --porcelain | grep -qv '/REVISION'; then
+            echo "Changes detected"
+            echo "===== Changes ====="
+            git --no-pager diff -U0 | grep '^[+-]' | head -n 50
+            echo "==================="
+            echo "should_commit=true" >> "$GITHUB_OUTPUT"
+          else
+            echo "No Changes detected"
+            echo "should_commit=false" >> "$GITHUB_OUTPUT"
+          fi
+      - name: Re-apply version changes
+        if: inputs.force == true || (steps.check_should_commit.outputs.should_commit == 'true' && needs.process_artifacts.outputs.last_version_classic != '' && needs.process_artifacts.outputs.last_version_modern != '')
+        env:
+          CURRENT_VERSION_CLASSIC: ${{ needs.process_artifacts.outputs.current_version_classic }}
+          CURRENT_VERSION_MODERN: ${{ needs.process_artifacts.outputs.current_version_modern }}
+          LAST_VERSION_CLASSIC: ${{ needs.process_artifacts.outputs.last_version_classic }}
+          LAST_VERSION_MODERN: ${{ needs.process_artifacts.outputs.last_version_modern }}
+        run: |
+          echo "Re-applying $LAST_VERSION_CLASSIC to $CURRENT_VERSION_CLASSIC"
+          grep -rl "$LAST_VERSION_CLASSIC" ./compiled || echo "No files found with $LAST_VERSION_CLASSIC"
+          grep -rl "$LAST_VERSION_CLASSIC" ./compiled | xargs -r sed -i -e "s/$LAST_VERSION_CLASSIC/$CURRENT_VERSION_CLASSIC/g"
+          grep -rl "$LAST_VERSION_CLASSIC" ./compiled || echo "Classic version re-applied"
+          echo "===================="
+          echo "Re-applying $LAST_VERSION_MODERN to $CURRENT_VERSION_MODERN"
+          grep -rl "$LAST_VERSION_MODERN" ./compiled || echo "No files found with $LAST_VERSION_MODERN"
+          grep -rl "$LAST_VERSION_MODERN" ./compiled | xargs -r sed -i -e "s/$LAST_VERSION_MODERN/$CURRENT_VERSION_MODERN/g"
+          grep -rl "$LAST_VERSION_MODERN" ./compiled || echo "Classic version re-applied"
+      - name: Will commit these changes
+        if: inputs.force == true || steps.check_should_commit.outputs.should_commit == 'true'
+        run: |
+          git add .
+          git status
+      - name: Check commit message
+        if: inputs.dry_run
+        run: |
+          git fetch origin --quiet
+          git show ${{ inputs.commit_sha || github.event.workflow_run.head_sha || github.sha }} --no-patch --pretty=format:"%B"
+      - name: Commit changes to branch
+        if: inputs.force == true || steps.check_should_commit.outputs.should_commit == 'true'
+        run: |
+          git config --global user.email "${{ format('{0}@users.noreply.github.com', github.triggering_actor) }}"
+          git config --global user.name "${{ github.triggering_actor }}"
+
+          git fetch origin --quiet
+          git commit -m "$(git show ${{ inputs.commit_sha || github.event.workflow_run.head_sha || github.sha }} --no-patch --pretty=format:'%B%n%nDiffTrain build for [${{ inputs.commit_sha || github.event.workflow_run.head_sha || github.sha }}](https://github.com/facebook/react/commit/${{ inputs.commit_sha || github.event.workflow_run.head_sha || github.sha}})')" || echo "No changes to commit"
+      - name: Push changes to branch
+        if: inputs.dry_run == false && (inputs.force == true || steps.check_should_commit.outputs.should_commit == 'true')
+        run: git push
+
+  commit_fbsource_artifacts:
+    needs: [download_artifacts, process_artifacts]
+    permissions:
+      # Used to push a commit to builds/facebook-fbsource
+      contents: write
+    if: inputs.force == true || (github.ref == 'refs/heads/main' && needs.process_artifacts.outputs.fbsource_branch_count == '0')
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          ref: builds/facebook-fbsource
+      - name: Ensure clean directory
+        run: rm -rf compiled-rn
+      - uses: actions/download-artifact@v4
+        with:
+          name: compiled-rn
+          path: compiled-rn/
+      - name: Revert version changes
+        if: needs.process_artifacts.outputs.last_version_rn != ''
+        env:
+          CURRENT_VERSION: ${{ needs.process_artifacts.outputs.current_version_rn }}
+          LAST_VERSION: ${{ needs.process_artifacts.outputs.last_version_rn }}
+        run: |
+          echo "Reverting $CURRENT_VERSION to $LAST_VERSION"
+          grep -rl "$CURRENT_VERSION" ./compiled-rn || echo "No files found with $CURRENT_VERSION"
+          grep -rl "$CURRENT_VERSION" ./compiled-rn | xargs -r sed -i -e "s/$CURRENT_VERSION/$LAST_VERSION/g"
+          grep -rl "$CURRENT_VERSION" ./compiled-rn || echo "Version reverted"
+      - name: Check for changes
+        if: inputs.force != 'true'
+        id: check_should_commit
+        run: |
+          echo "Full git status"
+          git add .
+          git --no-pager diff -U0 --cached | grep '^[+-]' | head -n 100
+          echo "===================="
+          # Ignore REVISION or lines removing @generated headers.
+          if git diff --cached ':(exclude)*REVISION' ':(exclude)*/eslint-plugin-react-hooks/package.json' | grep -vE "^(@@|diff|index|\-\-\-|\+\+\+|\- \* @generated SignedSource)" | grep "^[+-]" > /dev/null; then
+            echo "Changes detected"
+            echo "===== Changes ====="
+            git --no-pager diff --cached ':(exclude)*REVISION' ':(exclude)*/eslint-plugin-react-hooks/package.json' | grep -vE "^(@@|diff|index|\-\-\-|\+\+\+|\- \* @generated SignedSource)" | grep "^[+-]" | head -n 50
+            echo "==================="
+            echo "should_commit=true" >> "$GITHUB_OUTPUT"
+          else
+            echo "No Changes detected"
+            echo "should_commit=false" >> "$GITHUB_OUTPUT"
+          fi
+      - name: Re-apply version changes
+        if: inputs.force == true || (steps.check_should_commit.outputs.should_commit == 'true' && needs.process_artifacts.outputs.last_version_rn != '')
+        env:
+          CURRENT_VERSION: ${{ needs.process_artifacts.outputs.current_version_rn }}
+          LAST_VERSION: ${{ needs.process_artifacts.outputs.last_version_rn }}
+        run: |
+          echo "Re-applying $LAST_VERSION to $CURRENT_VERSION"
+          grep -rl "$LAST_VERSION" ./compiled-rn || echo "No files found with $LAST_VERSION"
+          grep -rl "$LAST_VERSION" ./compiled-rn | xargs -r sed -i -e "s/$LAST_VERSION/$CURRENT_VERSION/g"
+          grep -rl "$LAST_VERSION" ./compiled-rn || echo "Version re-applied"
+      - name: Add files for signing
+        if: inputs.force == true || steps.check_should_commit.outputs.should_commit == 'true'
+        run: |
+          echo ":"
+          git add .
+      - name: Signing files
+        if: inputs.force == true || steps.check_should_commit.outputs.should_commit == 'true'
+        uses: actions/github-script@v7
+        with:
+          script: |
+            // TODO: Move this to a script file.
+            // We currently can't call scripts from the repo because
+            // at this point in the workflow, we're on the compiled
+            // artifact branch (so the scripts don't exist).
+            // We can fix this with a composite action in the main repo.
+            // This script is duplicated above.
+            const fs = require('fs');
+            const crypto = require('crypto');
+            const {execSync} = require('child_process');
+
+            // TODO: when we move this to a script, we can use this from npm.
+            // Copy of signedsource since we can't install deps on this branch.
+            const GENERATED = '@' + 'generated';
+            const NEWTOKEN = '<<SignedSource::*O*zOeWoEQle#+L!plEphiEmie@IsG>>';
+            const PATTERN = new RegExp(`${GENERATED} (?:SignedSource<<([a-f0-9]{32})>>)`);
+
+            const TokenNotFoundError = new Error(
+              `SignedSource.signFile(...): Cannot sign file without token: ${NEWTOKEN}`
+            );
+
+            function hash(data, encoding) {
+              const md5sum = crypto.createHash('md5');
+              md5sum.update(data, encoding);
+              return md5sum.digest('hex');
+            }
+
+            const SignedSource = {
+              getSigningToken() {
+                return `${GENERATED} ${NEWTOKEN}`;
+              },
+              isSigned(data) {
+                return PATTERN.exec(data) != null;
+              },
+              signFile(data) {
+                if (!data.includes(NEWTOKEN)) {
+                  if (SignedSource.isSigned(data)) {
+                    // Signing a file that was previously signed.
+                   data = data.replace(PATTERN, SignedSource.getSigningToken());
+                  } else {
+                    throw TokenNotFoundError;
+                  }
+                }
+                return data.replace(NEWTOKEN, `SignedSource<<${hash(data, 'utf8')}>>`);
+              },
+            };
+
+            const directory = './compiled-rn';
+            console.log('Signing files in directory:', directory);
+            try {
+              const result = execSync(`git status --porcelain ${directory}`, {encoding: 'utf8'});
+              console.log(result);
+
+              // Parse the git status output to get file paths!
+              const files = result.split('\n').filter(file => file.endsWith('.js'));
+
+              if (files.length === 0) {
+                throw new Error(
+                  'git status returned no files to sign. this job should not have run.'
+                );
+              } else {
+                files.forEach(line => {
+                  let file = null;
+                  if (line.startsWith('D ')) {
+                    return;
+                  } else if (line.startsWith('R ')) {
+                    file = line.slice(line.indexOf('->') + 3);
+                  } else {
+                    file = line.slice(3).trim();
+                  }
+                  if (file) {
+                    console.log('  Signing file:', file);
+                    const originalContents = fs.readFileSync(file, 'utf8');
+                    const signedContents = SignedSource.signFile(
+                      originalContents
+                        // Need to add the header in, since it's not inserted at build time.
+                        .replace(' */\n', ` * ${SignedSource.getSigningToken()}\n */\n`)
+                    );
+
+                    fs.writeFileSync(file, signedContents, 'utf8');
+                  }
+                });
+              }
+            } catch (e) {
+              process.exitCode = 1;
+              console.error('Error signing files:', e);
+            }
+      - name: Will commit these changes
+        if: inputs.force == true || steps.check_should_commit.outputs.should_commit == 'true'
+        run: |
+          git add .
+          git status
+      - name: Check commit message
+        if: inputs.dry_run
+        run: |
+          git fetch origin --quiet
+          git show ${{ inputs.commit_sha || github.event.workflow_run.head_sha || github.sha }} --no-patch --pretty=format:"%B"
+      - name: Commit changes to branch
+        if: inputs.force == true || steps.check_should_commit.outputs.should_commit == 'true'
+        run: |
+          git config --global user.email "${{ format('{0}@users.noreply.github.com', github.triggering_actor) }}"
+          git config --global user.name "${{ github.triggering_actor }}"
+
+          git fetch origin --quiet
+          git commit -m "$(git show ${{ inputs.commit_sha || github.event.workflow_run.head_sha || github.sha }} --no-patch --pretty=format:'%B%n%nDiffTrain build for [${{ inputs.commit_sha || github.event.workflow_run.head_sha || github.sha }}](https://github.com/facebook/react/commit/${{ inputs.commit_sha || github.event.workflow_run.head_sha || github.sha}})')" || echo "No changes to commit"
+      - name: Push changes to branch
+        if: inputs.dry_run == false && (inputs.force == true || steps.check_should_commit.outputs.should_commit == 'true')
+        run: git push

.github/workflows/runtime_discord_notify.yml

@@ -0,0 +1,51 @@
+name: (Runtime) Discord Notify
+
+on:
+  pull_request_target:
+    types: [opened, ready_for_review]
+    paths-ignore:
+      - packages/react-devtools**
+      - compiler/**
+      - .github/workflows/compiler_**.yml
+      - .github/workflows/devtools**.yml
+
+permissions: {}
+
+jobs:
+  check_access:
+    if: ${{ github.event.pull_request.draft == false }}
+    runs-on: ubuntu-latest
+    outputs:
+      is_member_or_collaborator: ${{ steps.check_is_member_or_collaborator.outputs.is_member_or_collaborator }}
+    steps:
+      - run: echo ${{ github.event.pull_request.author_association }}
+      - name: Check is member or collaborator
+        id: check_is_member_or_collaborator
+        if: ${{ github.event.pull_request.author_association == 'MEMBER' || github.event.pull_request.author_association == 'COLLABORATOR' }}
+        run: echo "is_member_or_collaborator=true" >> "$GITHUB_OUTPUT"
+
+  check_maintainer:
+    if: ${{ needs.check_access.outputs.is_member_or_collaborator == 'true' || needs.check_access.outputs.is_member_or_collaborator == true }}
+    needs: [check_access]
+    uses: facebook/react/.github/workflows/shared_check_maintainer.yml@main
+    permissions:
+      # Used by check_maintainer
+      contents: read
+    with:
+      actor: ${{ github.event.pull_request.user.login }}
+
+  notify:
+    if: ${{ needs.check_maintainer.outputs.is_core_team == 'true' }}
+    needs: check_maintainer
+    runs-on: ubuntu-latest
+    steps:
+      - name: Discord Webhook Action
+        uses: tsickert/discord-webhook@86dc739f3f165f16dadc5666051c367efa1692f4
+        with:
+          webhook-url: ${{ secrets.DISCORD_WEBHOOK_URL }}
+          embed-author-name: ${{ github.event.pull_request.user.login }}
+          embed-author-url: ${{ github.event.pull_request.user.html_url }}
+          embed-author-icon-url: ${{ github.event.pull_request.user.avatar_url }}
+          embed-title: '#${{ github.event.number }} (+${{github.event.pull_request.additions}} -${{github.event.pull_request.deletions}}): ${{ github.event.pull_request.title }}'
+          embed-description: ${{ github.event.pull_request.body }}
+          embed-url: ${{ github.event.pull_request.html_url }}

.github/workflows/runtime_eslint_plugin_e2e.yml

@@ -0,0 +1,65 @@
+name: (Runtime) ESLint Plugin E2E
+
+on:
+  push:
+    branches: [main]
+  pull_request:
+    paths-ignore:
+      - compiler/**
+
+permissions: {}
+
+concurrency:
+  group: ${{ github.workflow }}-${{ github.ref_name }}-${{ github.event.pull_request.number || github.run_id }}
+  cancel-in-progress: true
+
+env:
+  TZ: /usr/share/zoneinfo/America/Los_Angeles
+
+jobs:
+  # ----- TESTS -----
+  test:
+    name: ESLint v${{ matrix.eslint_major }}
+    runs-on: ubuntu-latest
+    strategy:
+      fail-fast: false
+      matrix:
+        eslint_major:
+          - "6"
+          - "7"
+          - "8"
+          - "9"
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          ref: ${{ github.event.pull_request.head.sha || github.sha }}
+      - uses: actions/setup-node@v4
+        with:
+          node-version-file: '.nvmrc'
+          cache: yarn
+          cache-dependency-path: |
+            yarn.lock
+            compiler/yarn.lock
+      - name: Restore cached node_modules
+        uses: actions/cache@v4
+        id: node_modules
+        with:
+          path: |
+            **/node_modules
+          key: runtime-and-compiler-eslint_e2e-node_modules-v6-${{ runner.arch }}-${{ runner.os }}-${{ hashFiles('yarn.lock', 'compiler/yarn.lock', 'fixtures/eslint-v*/yarn.lock') }}
+      - name: Ensure clean build directory
+        run: rm -rf build
+      - run: yarn install --frozen-lockfile
+        if: steps.node_modules.outputs.cache-hit != 'true'
+      - run: yarn --cwd compiler install --frozen-lockfile
+        if: steps.node_modules.outputs.cache-hit != 'true'
+      - name: Install fixture dependencies
+        working-directory: ./fixtures/eslint-v${{ matrix.eslint_major }}
+        run: yarn --frozen-lockfile
+        if: steps.node_modules.outputs.cache-hit != 'true'
+      - name: Build plugin
+        working-directory: fixtures/eslint-v${{ matrix.eslint_major }}
+        run: node build.mjs
+      - name: Run lint test
+        working-directory: ./fixtures/eslint-v${{ matrix.eslint_major }}
+        run: yarn lint

.github/workflows/runtime_fuzz_tests.yml

@@ -0,0 +1,33 @@
+name: (Runtime) Fuzz tests
+
+on:
+  schedule:
+    - cron: 0 * * * *
+  push:
+    branches:
+      - main
+  workflow_dispatch:
+
+permissions: {}
+
+env:
+  TZ: /usr/share/zoneinfo/America/Los_Angeles
+
+jobs:
+  test_fuzz:
+    runs-on: ubuntu-latest
+    steps:
+    - uses: actions/checkout@v4.1.0
+    - uses: actions/setup-node@v4
+      with:
+        node-version-file: '.nvmrc'
+        cache: 'yarn'
+    - name: Install dependencies
+      run: yarn install --frozen-lockfile
+      env:
+        ELECTRON_SKIP_BINARY_DOWNLOAD: "1"
+      shell: bash
+    - name: Run fuzz tests
+      run: |-
+        FUZZ_TEST_SEED=$RANDOM yarn test fuzz --ci
+        FUZZ_TEST_SEED=$RANDOM yarn test --prod fuzz --ci

.github/workflows/runtime_prereleases.yml

@@ -0,0 +1,110 @@
+name: (Runtime) Publish Prereleases
+
+on:
+  workflow_call:
+    inputs:
+      commit_sha:
+        required: true
+        default: ''
+        type: string
+      release_channel:
+        required: true
+        type: string
+      dist_tag:
+        required: true
+        type: string
+      enableFailureNotification:
+        description: 'Whether to notify the team on Discord when the release fails. Useful if this workflow is called from an automation.'
+        required: false
+        type: boolean
+      only_packages:
+        description: Packages to publish (space separated)
+        type: string
+      skip_packages:
+        description: Packages to NOT publish (space separated)
+        type: string
+      dry:
+        required: true
+        description: Dry run instead of publish?
+        type: boolean
+        default: true
+    secrets:
+      DISCORD_WEBHOOK_URL:
+        description: 'Discord webhook URL to notify on failure. Only required if enableFailureNotification is true.'
+        required: false
+      GH_TOKEN:
+        required: true
+      NPM_TOKEN:
+        required: true
+
+permissions: {}
+
+env:
+  TZ: /usr/share/zoneinfo/America/Los_Angeles
+  # https://github.com/actions/cache/blob/main/tips-and-workarounds.md#cache-segment-restore-timeout
+  SEGMENT_DOWNLOAD_TIMEOUT_MINS: 1
+  NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
+
+jobs:
+  publish_prerelease:
+    name: Publish prelease (${{ inputs.release_channel }}) ${{ inputs.commit_sha }} @${{ inputs.dist_tag }}
+    runs-on: ubuntu-latest
+    permissions:
+      # We use github.token to download the build artifact from a previous runtime_build_and_test.yml run
+      actions: read
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version-file: '.nvmrc'
+          cache: yarn
+          cache-dependency-path: yarn.lock
+      - name: Restore cached node_modules
+        uses: actions/cache@v4
+        id: node_modules
+        with:
+          path: |
+            **/node_modules
+          key: runtime-release-node_modules-v6-${{ runner.arch }}-${{ runner.os }}-${{ hashFiles('yarn.lock', 'scripts/release/yarn.lock') }}
+      - name: Ensure clean build directory
+        run: rm -rf build
+      - run: yarn install --frozen-lockfile
+        if: steps.node_modules.outputs.cache-hit != 'true'
+      - run: yarn --cwd scripts/release install --frozen-lockfile
+        if: steps.node_modules.outputs.cache-hit != 'true'
+      - run: cp ./scripts/release/ci-npmrc ~/.npmrc
+      - run: |
+          GH_TOKEN=${{ secrets.GH_TOKEN }} scripts/release/prepare-release-from-ci.js --skipTests -r ${{ inputs.release_channel }} --commit=${{ inputs.commit_sha }}
+      - name: Check prepared files
+        run: ls -R build/node_modules
+      - if: '${{ inputs.only_packages }}'
+        name: 'Publish ${{ inputs.only_packages }}'
+        run: |
+          scripts/release/publish.js \
+            --ci \
+            --tags=${{ inputs.dist_tag }} \
+            --onlyPackages=${{ inputs.only_packages }} ${{ (inputs.dry && '') || '\'}}
+            ${{ inputs.dry && '--dry' || '' }}
+      - if: '${{ inputs.skip_packages }}'
+        name: 'Publish all packages EXCEPT ${{ inputs.skip_packages }}'
+        run: |
+          scripts/release/publish.js \
+            --ci \
+            --tags=${{ inputs.dist_tag }} \
+            --skipPackages=${{ inputs.skip_packages }} ${{ (inputs.dry && '') || '\'}}
+            ${{ inputs.dry && '--dry' || '' }}
+      - if: '${{ !inputs.skip_packages && !inputs.only_packages }}'
+        name: 'Publish all packages'
+        run: |
+          scripts/release/publish.js \
+            --ci \
+            --tags=${{ inputs.dist_tag }} ${{ (inputs.dry && '') || '\'}}
+            ${{ inputs.dry && '--dry' || '' }}
+      - name: Notify Discord on failure
+        if: failure() && inputs.enableFailureNotification == true
+        uses: tsickert/discord-webhook@86dc739f3f165f16dadc5666051c367efa1692f4
+        with:
+          webhook-url: ${{ secrets.DISCORD_WEBHOOK_URL }}
+          embed-author-name: "GitHub Actions"
+          embed-title: '[Runtime] Publish of ${{ inputs.release_channel }}@${{ inputs.dist_tag}} release failed'
+          embed-url: ${{ github.server_url }}/${{ github.repository }}/actions/runs/${{ github.run_id }}/attempts/${{ github.run_attempt }}

.github/workflows/runtime_prereleases_manual.yml

@@ -0,0 +1,102 @@
+name: (Runtime) Publish Prereleases Manual
+
+on:
+  workflow_dispatch:
+    inputs:
+      prerelease_commit_sha:
+        required: true
+      only_packages:
+        description: Packages to publish (space separated)
+        type: string
+      skip_packages:
+        description: Packages to NOT publish (space separated)
+        type: string
+      dry:
+        required: true
+        description: Dry run instead of publish?
+        type: boolean
+        default: true
+      experimental_only:
+        type: boolean
+        description: Only publish to the experimental tag
+        default: false
+      force_notify:
+        description: Force a Discord notification?
+        type: boolean
+        default: false
+
+permissions: {}
+
+env:
+  TZ: /usr/share/zoneinfo/America/Los_Angeles
+
+jobs:
+  notify:
+    if: ${{ inputs.force_notify || inputs.dry == false || inputs.dry == 'false' }}
+    runs-on: ubuntu-latest
+    steps:
+      - name: Discord Webhook Action
+        uses: tsickert/discord-webhook@86dc739f3f165f16dadc5666051c367efa1692f4
+        with:
+          webhook-url: ${{ secrets.DISCORD_WEBHOOK_URL }}
+          embed-author-name: ${{ github.event.sender.login }}
+          embed-author-url: ${{ github.event.sender.html_url }}
+          embed-author-icon-url: ${{ github.event.sender.avatar_url }}
+          embed-title: "⚠️ Publishing ${{ inputs.experimental_only && 'EXPERIMENTAL' || 'CANARY & EXPERIMENTAL' }} release ${{ (inputs.dry && ' (dry run)') || '' }}"
+          embed-description: |
+            ```json
+            ${{ toJson(inputs) }}
+            ```
+          embed-url: https://github.com/facebook/react/actions/runs/${{ github.run_id }}
+
+  publish_prerelease_canary:
+    if: ${{ !inputs.experimental_only }}
+    name: Publish to Canary channel
+    uses: facebook/react/.github/workflows/runtime_prereleases.yml@main
+    permissions:
+      # We use github.token to download the build artifact from a previous runtime_build_and_test.yml run
+      actions: read
+    with:
+      commit_sha: ${{ inputs.prerelease_commit_sha }}
+      release_channel: stable
+      # The tags to use when publishing canaries. The main one we should
+      # always include is "canary" but we can use multiple (e.g. alpha,
+      # beta, rc). To declare multiple, use a comma-separated string, like
+      # this:
+      #   dist_tag: "canary,alpha,beta,rc"
+      #
+      # TODO: We currently tag canaries with "next" in addition to "canary"
+      # because this used to be called the "next" channel and some
+      # downstream consumers might still expect that tag. We can remove this
+      # after some time has elapsed and the change has been communicated.
+      dist_tag: canary,next
+      only_packages: ${{ inputs.only_packages }}
+      skip_packages: ${{ inputs.skip_packages }}
+      dry: ${{ inputs.dry }}
+    secrets:
+      NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
+      GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+
+  publish_prerelease_experimental:
+    name: Publish to Experimental channel
+    uses: facebook/react/.github/workflows/runtime_prereleases.yml@main
+    permissions:
+      # We use github.token to download the build artifact from a previous runtime_build_and_test.yml run
+      actions: read
+    # NOTE: Intentionally running these jobs sequentially because npm
+    # will sometimes fail if you try to concurrently publish two
+    # different versions of the same package, even if they use different
+    # dist tags.
+    needs: publish_prerelease_canary
+    # Ensures the job runs even if canary is skipped
+    if: always()
+    with:
+      commit_sha: ${{ inputs.prerelease_commit_sha }}
+      release_channel: experimental
+      dist_tag: experimental
+      only_packages: ${{ inputs.only_packages }}
+      skip_packages: ${{ inputs.skip_packages }}
+      dry: ${{ inputs.dry }}
+    secrets:
+      NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
+      GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}

.github/workflows/runtime_prereleases_nightly.yml

@@ -0,0 +1,51 @@
+name: (Runtime) Publish Prereleases Nightly
+
+on:
+  schedule:
+    # At 10 minutes past 16:00 on Mon, Tue, Wed, Thu, and Fri
+    - cron: 10 16 * * 1,2,3,4,5
+
+permissions: {}
+
+env:
+  TZ: /usr/share/zoneinfo/America/Los_Angeles
+
+jobs:
+  publish_prerelease_canary:
+    name: Publish to Canary channel
+    uses: facebook/react/.github/workflows/runtime_prereleases.yml@main
+    permissions:
+      # We use github.token to download the build artifact from a previous runtime_build_and_test.yml run
+      actions: read
+    with:
+      commit_sha: ${{ github.sha }}
+      release_channel: stable
+      dist_tag: canary,next
+      enableFailureNotification: true
+      dry: false
+    secrets:
+      DISCORD_WEBHOOK_URL: ${{ secrets.DISCORD_WEBHOOK_URL }}
+      NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
+      GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+
+  publish_prerelease_experimental:
+    name: Publish to Experimental channel
+    uses: facebook/react/.github/workflows/runtime_prereleases.yml@main
+    permissions:
+      # We use github.token to download the build artifact from a previous runtime_build_and_test.yml run
+      actions: read
+    # NOTE: Intentionally running these jobs sequentially because npm
+    # will sometimes fail if you try to concurrently publish two
+    # different versions of the same package, even if they use different
+    # dist tags.
+    needs: publish_prerelease_canary
+    with:
+      commit_sha: ${{ github.sha }}
+      release_channel: experimental
+      dist_tag: experimental
+      enableFailureNotification: true
+      dry: false
+    secrets:
+      DISCORD_WEBHOOK_URL: ${{ secrets.DISCORD_WEBHOOK_URL }}
+      NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
+      GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}

.github/workflows/runtime_releases_from_npm_manual.yml

@@ -0,0 +1,128 @@
+name: (Runtime) Publish Releases from NPM Manual
+
+on:
+  workflow_dispatch:
+    inputs:
+      version_to_promote:
+        required: true
+        description: Current npm version (non-experimental) to promote
+        type: string
+      version_to_publish:
+        required: true
+        description: Version to publish for the specified packages
+        type: string
+      only_packages:
+        description: Packages to publish (space separated)
+        type: string
+      skip_packages:
+        description: Packages to NOT publish (space separated)
+        type: string
+      tags:
+        description: NPM tags (space separated)
+        type: string
+        default: untagged
+      dry:
+        required: true
+        description: Dry run instead of publish?
+        type: boolean
+        default: true
+      force_notify:
+        description: Force a Discord notification?
+        type: boolean
+        default: false
+
+permissions: {}
+
+env:
+  TZ: /usr/share/zoneinfo/America/Los_Angeles
+  # https://github.com/actions/cache/blob/main/tips-and-workarounds.md#cache-segment-restore-timeout
+  SEGMENT_DOWNLOAD_TIMEOUT_MINS: 1
+  NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
+
+jobs:
+  notify:
+    if: ${{ inputs.force_notify || inputs.dry == false || inputs.dry == 'false' }}
+    runs-on: ubuntu-latest
+    steps:
+      - name: Discord Webhook Action
+        uses: tsickert/discord-webhook@86dc739f3f165f16dadc5666051c367efa1692f4
+        with:
+          webhook-url: ${{ secrets.DISCORD_WEBHOOK_URL }}
+          embed-author-name: ${{ github.event.sender.login }}
+          embed-author-url: ${{ github.event.sender.html_url }}
+          embed-author-icon-url: ${{ github.event.sender.avatar_url }}
+          embed-title: "⚠️ Publishing release from NPM${{ (inputs.dry && ' (dry run)') || '' }}"
+          embed-description: |
+            ```json
+            ${{ toJson(inputs) }}
+            ```
+          embed-url: https://github.com/facebook/react/actions/runs/${{ github.run_id }}
+
+  publish:
+    name: Publish releases
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version-file: '.nvmrc'
+          cache: yarn
+          cache-dependency-path: yarn.lock
+      - name: Restore cached node_modules
+        uses: actions/cache@v4
+        id: node_modules
+        with:
+          path: |
+            **/node_modules
+          key: runtime-release-node_modules-v6-${{ runner.arch }}-${{ runner.os }}-${{ hashFiles('yarn.lock', 'scripts/release/yarn.lock') }}
+      - name: Ensure clean build directory
+        run: rm -rf build
+      - run: yarn install --frozen-lockfile
+        if: steps.node_modules.outputs.cache-hit != 'true'
+      - run: yarn --cwd scripts/release install --frozen-lockfile
+        if: steps.node_modules.outputs.cache-hit != 'true'
+      - run: cp ./scripts/release/ci-npmrc ~/.npmrc
+      - if: '${{ inputs.only_packages }}'
+        name: 'Prepare ${{ inputs.only_packages }} from NPM'
+        run: |
+          scripts/release/prepare-release-from-npm.js \
+            --ci \
+            --skipTests \
+            --version=${{ inputs.version_to_promote }} \
+            --publishVersion=${{ inputs.version_to_publish }} \
+            --onlyPackages=${{ inputs.only_packages }}
+      - if: '${{ inputs.skip_packages }}'
+        name: 'Prepare all packages EXCEPT ${{ inputs.skip_packages }} from NPM'
+        run: |
+          scripts/release/prepare-release-from-npm.js \
+            --ci \
+            --skipTests \
+            --version=${{ inputs.version_to_promote }} \
+            --publishVersion=${{ inputs.version_to_publish }} \
+            --skipPackages=${{ inputs.skip_packages }}
+      - name: Check prepared files
+        run: ls -R build/node_modules
+      - if: '${{ inputs.only_packages }}'
+        name: 'Publish ${{ inputs.only_packages }}'
+        run: |
+          scripts/release/publish.js \
+            --ci \
+            --tags=${{ inputs.tags }} \
+            --publishVersion=${{ inputs.version_to_publish }} \
+            --onlyPackages=${{ inputs.only_packages }} ${{ (inputs.dry && '') || '\'}}
+            ${{ inputs.dry && '--dry' || '' }}
+      - if: '${{ inputs.skip_packages }}'
+        name: 'Publish all packages EXCEPT ${{ inputs.skip_packages }}'
+        run: |
+          scripts/release/publish.js \
+            --ci \
+            --tags=${{ inputs.tags }} \
+            --publishVersion=${{ inputs.version_to_publish }} \
+            --skipPackages=${{ inputs.skip_packages }} ${{ (inputs.dry && '') || '\'}}
+            ${{ inputs.dry && '--dry' || '' }}
+      - name: Archive released package for debugging
+        uses: actions/upload-artifact@v4
+        with:
+          name: build
+          path: |
+            ./build/node_modules

.github/workflows/shared_check_maintainer.yml

@@ -0,0 +1,58 @@
+name: (Shared) Check maintainer
+
+on:
+  workflow_call:
+    inputs:
+      actor:
+        required: true
+        type: string
+    outputs:
+      is_core_team:
+        value: ${{ jobs.check_maintainer.outputs.is_core_team }}
+
+permissions: {}
+
+env:
+  TZ: /usr/share/zoneinfo/America/Los_Angeles
+  # https://github.com/actions/cache/blob/main/tips-and-workarounds.md#cache-segment-restore-timeout
+  SEGMENT_DOWNLOAD_TIMEOUT_MINS: 1
+
+jobs:
+  check_maintainer:
+    runs-on: ubuntu-latest
+    permissions:
+      # We fetch the contents of the MAINTAINERS file
+      contents: read
+    outputs:
+      is_core_team: ${{ steps.check_if_actor_is_maintainer.outputs.result }}
+    steps:
+      - name: Check if actor is maintainer
+        id: check_if_actor_is_maintainer
+        uses: actions/github-script@v7
+        with:
+          script: |
+            const fs = require('fs');
+            const actor = '${{ inputs.actor }}';
+            const res = await github.rest.repos.getContent({
+              owner: 'facebook',
+              repo: 'react',
+              path: 'MAINTAINERS',
+              ref: 'main',
+              headers: { Accept: 'application/vnd.github+json' }
+            });
+            if (res.status !== 200) {
+              console.error(res);
+              throw new Error('Unable to fetch MAINTAINERS file');
+            }
+            content = Buffer.from(res.data.content, 'base64').toString();
+            if (content == null || typeof content !== 'string') {
+              throw new Error('Unable to retrieve MAINTAINERS file');
+            }
+
+            const maintainers = new Set(content.split('\n'));
+            if (maintainers.has(actor)) {
+              console.log(`🟢 ${actor} is a maintainer`);
+              return true;
+            }
+            console.log(`🔴 ${actor} is NOT a maintainer`);
+            return null;

.github/workflows/shared_cleanup_merged_branch_caches.yml

@@ -0,0 +1,41 @@
+# https://github.com/actions/cache/blob/main/tips-and-workarounds.md#force-deletion-of-caches-overriding-default-cache-eviction-policy
+
+name: (Shared) Cleanup Merged Branch Caches
+on:
+  pull_request:
+    types:
+      - closed
+  workflow_dispatch:
+    inputs:
+      pr_number:
+        required: true
+        type: string
+
+permissions: {}
+
+jobs:
+  cleanup:
+    runs-on: ubuntu-latest
+    permissions:
+      # `actions:write` permission is required to delete caches
+      #   See also: https://docs.github.com/en/rest/actions/cache?apiVersion=2022-11-28#delete-a-github-actions-cache-for-a-repository-using-a-cache-id
+      actions: write
+      contents: read
+    steps:
+      - name: Cleanup
+        run: |
+          echo "Fetching list of cache key"
+          cacheKeysForPR=$(gh cache list --ref $BRANCH --limit 100 --json id --jq '.[].id')
+
+          ## Setting this to not fail the workflow while deleting cache keys.
+          set +e
+          for cacheKey in $cacheKeysForPR
+          do
+              gh cache delete $cacheKey
+              echo "Deleting $cacheKey"
+          done
+          echo "Done"
+        env:
+          GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          GH_REPO: ${{ github.repository }}
+          BRANCH: refs/pull/${{ inputs.pr_number || github.event.pull_request.number }}/merge

.github/workflows/shared_cleanup_stale_branch_caches.yml

@@ -0,0 +1,36 @@
+# https://github.com/actions/cache/blob/main/tips-and-workarounds.md#force-deletion-of-caches-overriding-default-cache-eviction-policy
+
+name: (Shared) Cleanup Stale Branch Caches
+on:
+  schedule:
+    # Every 6 hours
+    - cron: 0 */6 * * *
+  workflow_dispatch:
+
+permissions: {}
+
+jobs:
+  cleanup:
+    runs-on: ubuntu-latest
+    permissions:
+      # `actions:write` permission is required to delete caches
+      #   See also: https://docs.github.com/en/rest/actions/cache?apiVersion=2022-11-28#delete-a-github-actions-cache-for-a-repository-using-a-cache-id
+      actions: write
+      contents: read
+    steps:
+      - name: Cleanup
+        run: |
+          echo "Fetching list of cache keys"
+          cacheKeysForPR=$(gh cache list --limit 100 --json id,ref --jq '.[] | select(.ref != "refs/heads/main") | .id')
+
+          ## Setting this to not fail the workflow while deleting cache keys.
+          set +e
+          for cacheKey in $cacheKeysForPR
+          do
+              gh cache delete $cacheKey
+              echo "Deleting $cacheKey"
+          done
+          echo "Done"
+        env:
+          GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          GH_REPO: ${{ github.repository }}

.github/workflows/shared_close_direct_sync_branch_prs.yml

@@ -0,0 +1,43 @@
+name: (Shared) Close Direct Sync Branch PRs
+
+on:
+  pull_request:
+    branches:
+      - 'builds/facebook-**'
+
+permissions: {}
+
+env:
+  TZ: /usr/share/zoneinfo/America/Los_Angeles
+  # https://github.com/actions/cache/blob/main/tips-and-workarounds.md#cache-segment-restore-timeout
+  SEGMENT_DOWNLOAD_TIMEOUT_MINS: 1
+
+jobs:
+  close_pr:
+    runs-on: ubuntu-latest
+    permissions:
+      # Used to create a review and close PRs
+      pull-requests: write
+      contents: write
+    steps:
+      - name: Close PR
+        uses: actions/github-script@v7
+        with:
+          script: |
+            const owner = context.repo.owner;
+            const repo = context.repo.repo;
+            const pullNumber = ${{ github.event.number }};
+
+            await github.rest.pulls.createReview({
+              owner,
+              repo,
+              pull_number: pullNumber,
+              body: 'Do not land changes to `${{ github.event.pull_request.base.ref }}`. Please re-open your PR targeting `main` instead.',
+              event: 'REQUEST_CHANGES'
+            });
+            await github.rest.pulls.update({
+              owner,
+              repo,
+              pull_number: pullNumber,
+              state: 'closed'
+            });

.github/workflows/shared_label_core_team_prs.yml

@@ -0,0 +1,55 @@
+name: (Shared) Label Core Team PRs
+
+on:
+  pull_request_target:
+    types: [opened]
+
+permissions: {}
+
+env:
+  TZ: /usr/share/zoneinfo/America/Los_Angeles
+  # https://github.com/actions/cache/blob/main/tips-and-workarounds.md#cache-segment-restore-timeout
+  SEGMENT_DOWNLOAD_TIMEOUT_MINS: 1
+
+jobs:
+  check_access:
+    runs-on: ubuntu-latest
+    outputs:
+      is_member_or_collaborator: ${{ steps.check_is_member_or_collaborator.outputs.is_member_or_collaborator }}
+    steps:
+      - run: echo ${{ github.event.pull_request.author_association }}
+      - name: Check is member or collaborator
+        id: check_is_member_or_collaborator
+        if: ${{ github.event.pull_request.author_association == 'MEMBER' || github.event.pull_request.author_association == 'COLLABORATOR' }}
+        run: echo "is_member_or_collaborator=true" >> "$GITHUB_OUTPUT"
+
+  check_maintainer:
+    if: ${{ needs.check_access.outputs.is_member_or_collaborator == 'true' || needs.check_access.outputs.is_member_or_collaborator == true }}
+    needs: [check_access]
+    uses: facebook/react/.github/workflows/shared_check_maintainer.yml@main
+    permissions:
+      # Used by check_maintainer
+      contents: read
+    with:
+      actor: ${{ github.event.pull_request.user.login }}
+
+  label:
+    if: ${{ needs.check_maintainer.outputs.is_core_team == 'true' }}
+    runs-on: ubuntu-latest
+    needs: check_maintainer
+    permissions:
+      # Used to add labels on issues
+      issues: write
+      # Used to add labels on PRs
+      pull-requests: write
+    steps:
+      - name: Label PR as React Core Team
+        uses: actions/github-script@v7
+        with:
+          script: |
+            github.rest.issues.addLabels({
+              owner: context.repo.owner,
+              repo: context.repo.repo,
+              issue_number: ${{ github.event.number }},
+              labels: ['React Core Team']
+            });

.github/workflows/shared_lint.yml

@@ -0,0 +1,110 @@
+name: (Shared) Lint
+
+on:
+  push:
+    branches: [main]
+  pull_request:
+
+permissions: {}
+
+concurrency:
+  group: ${{ github.workflow }}-${{ github.ref_name }}-${{ github.event.pull_request.number || github.run_id }}
+  cancel-in-progress: true
+
+env:
+  TZ: /usr/share/zoneinfo/America/Los_Angeles
+  # https://github.com/actions/cache/blob/main/tips-and-workarounds.md#cache-segment-restore-timeout
+  SEGMENT_DOWNLOAD_TIMEOUT_MINS: 1
+
+jobs:
+  prettier:
+    name: Run prettier
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version-file: '.nvmrc'
+          cache: yarn
+          cache-dependency-path: yarn.lock
+      - name: Restore cached node_modules
+        uses: actions/cache@v4
+        id: node_modules
+        with:
+          path: |
+            **/node_modules
+          key: shared-lint-node_modules-v6-${{ runner.arch }}-${{ runner.os }}-${{ hashFiles('**/yarn.lock') }}
+      - name: Ensure clean build directory
+        run: rm -rf build
+      - run: yarn install --frozen-lockfile
+        if: steps.node_modules.outputs.cache-hit != 'true'
+      - run: yarn prettier-check
+
+  eslint:
+    name: Run eslint
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version-file: '.nvmrc'
+          cache: yarn
+          cache-dependency-path: yarn.lock
+      - name: Restore cached node_modules
+        uses: actions/cache@v4
+        id: node_modules
+        with:
+          path: |
+            **/node_modules
+          key: shared-lint-node_modules-v6-${{ runner.arch }}-${{ runner.os }}-${{ hashFiles('**/yarn.lock') }}
+      - name: Ensure clean build directory
+        run: rm -rf build
+      - run: yarn install --frozen-lockfile
+        if: steps.node_modules.outputs.cache-hit != 'true'
+      - run: node ./scripts/tasks/eslint
+
+  check_license:
+    name: Check license
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version-file: '.nvmrc'
+          cache: yarn
+          cache-dependency-path: yarn.lock
+      - name: Restore cached node_modules
+        uses: actions/cache@v4
+        id: node_modules
+        with:
+          path: |
+            **/node_modules
+          key: shared-lint-node_modules-v6-${{ runner.arch }}-${{ runner.os }}-${{ hashFiles('**/yarn.lock') }}
+      - name: Ensure clean build directory
+        run: rm -rf build
+      - run: yarn install --frozen-lockfile
+        if: steps.node_modules.outputs.cache-hit != 'true'
+      - run: ./scripts/ci/check_license.sh
+
+  test_print_warnings:
+    name: Test print warnings
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version-file: '.nvmrc'
+          cache: yarn
+          cache-dependency-path: yarn.lock
+      - name: Restore cached node_modules
+        uses: actions/cache@v4
+        id: node_modules
+        with:
+          path: |
+            **/node_modules
+          key: shared-lint-node_modules-v6-${{ runner.arch }}-${{ runner.os }}-${{ hashFiles('**/yarn.lock') }}
+      - name: Ensure clean build directory
+        run: rm -rf build
+      - run: yarn install --frozen-lockfile
+        if: steps.node_modules.outputs.cache-hit != 'true'
+      - run: ./scripts/ci/test_print_warnings.sh

.github/workflows/shared_stale.yml

@@ -0,0 +1,55 @@
+# Configuration for stale action workflow - https://github.com/actions/stale
+name: (Shared) Manage stale issues and PRs
+on:
+  schedule:
+    # Run hourly
+    - cron: '0 * * * *'
+  workflow_dispatch:
+
+permissions:
+  # https://github.com/actions/stale/tree/v9/?tab=readme-ov-file#recommended-permissions
+  issues: write
+  pull-requests: write
+
+env:
+  TZ: /usr/share/zoneinfo/America/Los_Angeles
+
+jobs:
+  stale:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/stale@v9
+        with:
+          # --- Issues & PRs ---
+          # Number of days of inactivity before an issue or PR becomes stale
+          days-before-stale: 90
+          # Number of days of inactivity before a stale issue or PR is closed
+          days-before-close: 7
+          # API calls per run
+          operations-per-run: 100
+
+          # --- Issues ---
+          stale-issue-label: "Resolution: Stale"
+          # Comment to post when marking an issue as stale
+          stale-issue-message: >
+            This issue has been automatically marked as stale.
+            **If this issue is still affecting you, please leave any comment** (for example, "bump"), and we'll keep it open.
+            We are sorry that we haven't been able to prioritize it yet. If you have any new additional information, please include it with your comment!
+          # Comment to post when closing a stale issue
+          close-issue-message: >
+            Closing this issue after a prolonged period of inactivity. If this issue is still present in the latest release, please create a new issue with up-to-date information. Thank you!
+          # Issues with these labels will never be considered stale
+          exempt-issue-labels: "Partner,React Core Team,Resolution: Backlog,Type: Bug,Type: Discussion,Type: Needs Investigation,Type: Regression,Type: Feature Request,Type: Enhancement"
+
+          # --- PRs ---
+          stale-pr-label: "Resolution: Stale"
+          # Comment to post when marking a pull request as stale
+          stale-pr-message: >
+            This pull request has been automatically marked as stale.
+            **If this pull request is still relevant, please leave any comment** (for example, "bump"), and we'll keep it open.
+            We are sorry that we haven't been able to prioritize reviewing it yet. Your contribution is very much appreciated.
+          # Comment to post when closing a stale pull request
+          close-pr-message: >
+            Closing this pull request after a prolonged period of inactivity. If this issue is still present in the latest release, please ask for this pull request to be reopened. Thank you!
+          # PRs with these labels will never be considered stale
+          exempt-pr-labels: "Partner,React Core Team,Resolution: Backlog,Type: Bug,Type: Discussion,Type: Needs Investigation,Type: Regression,Type: Feature Request,Type: Enhancement"

.gitignore

@@ -1,21 +1,41 @@
 .DS_STORE
 node_modules
+scripts/flow/*/.flowconfig
+.flowconfig
 *~
 *.pyc
-static
 .grunt
 _SpecRunner.html
+__benchmarks__
 build/
-*.gem
-docs/code
-docs/_site
-docs/.sass-cache
-docs/css/react.css
-docs/js/JSXTransformer.js
-docs/js/react.min.js
-docs/js/docs.js
-docs/js/live_editor.js
-docs/js/examples
-docs/downloads
-examples/shared/*.js
+remote-repo/
+coverage/
+.module-cache
+fixtures/dom/public/react-dom.js
+fixtures/dom/public/react.js
+test/the-files-to-test.generated.js
+*.log*
+chrome-user-data
+*.sublime-project
+*.sublime-workspace
+.idea
+*.iml
+.vscode
+*.swp
+*.swo
+/tmp
+
+packages/react-devtools-core/dist
+packages/react-devtools-extensions/chrome/build
+packages/react-devtools-extensions/chrome/*.crx
+packages/react-devtools-extensions/chrome/*.pem
+packages/react-devtools-extensions/firefox/build
+packages/react-devtools-extensions/firefox/*.xpi
+packages/react-devtools-extensions/firefox/*.pem
+packages/react-devtools-extensions/shared/build
+packages/react-devtools-extensions/.tempUserDataDir
+packages/react-devtools-fusebox/dist
+packages/react-devtools-inline/dist
+packages/react-devtools-shell/dist
+packages/react-devtools-timeline/dist
 

.jshintrc

@@ -1,20 +0,0 @@
-{
-  "node": true,
-
-  "boss": true,
-  "curly": true,
-  "devel": true,
-  "eqnull": true,
-  "expr": true,
-  "funcscope": true,
-  "globalstrict": true,
-  "loopfunc": true,
-  "newcap": false,
-  "noempty": true,
-  "nonstandard": true,
-  "onecase": true,
-  "regexdash": true,
-  "trailing": true,
-  "undef": true,
-  "unused": "vars"
-}

.mailmap

@@ -0,0 +1,168 @@
+Adam Timberlake <adam.timberlake@gmail.com>
+Alex Mykyta <dancingwithcows@gmail.com>
+Alex Pien <alexpien@gmail.com>
+Alex Pien <alexpien@gmail.com> <pien@pien-mbp.dhcp.thefacebook.com>
+Alex Pien <alexpien@gmail.com> <pien@pien-mbp.local>
+Andreas Savvides <asavvides@twitter.com> <AnSavvides@users.noreply.github.com>
+Andreas Savvides <asavvides@twitter.com> <andreas@nibbli.com>
+Andreas Svensson <andreas@syranide.com>
+Andres Suarez <zertosh@gmail.com>
+Andrew Kulakov <avk@8xx8.ru>
+Andrew Sokolov <asokolov@atlassian.com>
+Anto Aravinth <anto.aravinth.cse@gmail.com>
+Baraa Hamodi <bhamodi@uwaterloo.ca> <baraa@optimizely.com>
+Ben Halpern <bendhalpern@gmail.com>
+Ben Newman <bn@cs.stanford.edu> <benjamn@fb.com>
+Benjamin Woodruff <github@benjam.info> <bgw@fb.com>
+Bill Fisher <fisherwebdev@gmail.com>
+Blaine Kasten <blainekasten@gmail.com>
+Brandon Tilley <brandon@brandontilley.com>
+Changsoon Bok <winmain@gmail.com>
+Cheng Lou <chenglou92@gmail.com> <chenglou@fb.com>
+Christian Oliff <christianoliff@yahoo.com>
+Christoph Pojer <christoph.pojer@gmail.com>
+Christoph Pojer <christoph.pojer@gmail.com> <cpojer@fb.com>
+Connor McSheffrey <c@conr.me> <connor.mcsheffrey@gmail.com>
+Conor Hastings <hastings.conorm@gmail.com> <conor@socialtables.com>
+Dan Schafer <dschafer@fb.com>
+Daniel Gasienica <daniel@gasienica.ch> <daniel@fiftythree.com>
+Daniel Gasienica <daniel@gasienica.ch> <dgasienica@zynga.com>
+Daniel Hejl <daniel.hejl@hotmail.com>
+Daniel Lo Nigro <daniel@dan.cx> <danlo@fb.com>
+Dave Galbraith <dave@jut.io>
+Dennis Johnson <songawee@gmail.com>
+Dmitry Blues <dmitri.blyus@gmail.com>
+Dongsheng Liu <bellanchor@gmail.com>
+Erik Harper <eharper@mixpo.com>
+Evan Coonrod <evan@paloalto.com>
+Fabio M. Costa <fabiomcosta@gmail.com> <fabs@fb.com>
+Felix Kling <felix.kling@gmx.net> <fkling@fb.com>
+François-Xavier Bois <fxbois@gmail.com>
+Fyodor Ivanishchev <cbrwizard@gmail.com>
+Gabe Levi <gabelevi@gmail.com> <glevi@fb.com>
+Geert Pasteels <geert.pasteels@gmail.com>
+George A Sisco III <george.sisco@gmail.com>
+Georgii Dolzhykov <thorn.mailbox@gmail.com>
+Harry Hull <harry.hull1@gmail.com>
+Hendrik Swanepoel <hendrik.swanepoel@gmail.com>
+Hyeock Kwon <doublus@gmail.com>
+Ian Obermiller <ian@obermillers.com> <iano@fb.com>
+Ilia Pavlenkov <dortonway@gmail.com>
+Ilyá Belsky <gelias.gbelsky@gmail.com>
+Ingvar Stepanyan <me@rreverser.com> <rreverser@ubuntu.rreverser.a4.internal.cloudapp.net>
+Irae Carvalho <irae@irae.pro.br>
+Ivan Vergiliev <ivan.vergiliev@gmail.com>
+JJ Weber <jj.weber@gmail.com>
+Jae Hun Ro <jhr24@duke.edu>
+Jaime Mingo <j.mingov@3boll.com>
+James Brantly <james@jbrantly.com>
+Jan Hancic <jan.hancic@gmail.com> <jan.hancic@caplin.com>
+Jan Kassens <jan@kassens.net> <jkassens@fb.com>
+Jason Bonta <jbonta@gmail.com> <jasonbonta@fb.com>
+Jason Quense <monastic.panic@gmail.com>
+Jason Trill <jason@jasontrill.com>
+Jeff Chan <jefftchan@gmail.com> <jeff@quizlet.com>
+Jeff Morrison <jeff@anafx.com> <Jeff@anafx.com>
+Jeff Morrison <jeff@anafx.com> <jeffmo@fb.com>
+Jeff Morrison <jeff@anafx.com> <lbljeffmo@gmail.com>
+Jeffrey Lin <lin.jeffrey@gmail.com> <jeffreylin@fb.com>
+Jim Sproch <jsproch@fb.com>
+Jim Sproch <jsproch@fb.com> <jsfb@github>
+Jim Sproch <jsproch@fb.com> <none@no-reply.com>
+Jinwoo Oh <arkist@gmail.com>
+Jinxiu Lee <lee.jinxiu@gmail.com>
+Jiyeon Seo <zzzeons@gmail.com>
+Jon Chester <jonchester@fb.com>
+Jon Madison <jon@tfftech.com>
+Jonathan Hsu <jhiswin@gmail.com>
+Jonathan Persson <persson.jonathan@gmail.com> <jonathan.persson@creuna.se>
+Jordan Walke <jordojw@gmail.com>
+Jordan Walke <jordojw@gmail.com> <jordanjcw@fb.com>
+Joseph Savona <joesavona@fb.com> <josephsavona@users.noreply.github.com>
+Josh Duck <josh@fb.com> <github@joshduck.com>
+Juan Serrano <germ13@users.noreply.github.com>
+Jun Wu <quark@lihdd.net>
+Justin Robison <jrobison151@gmail.com>
+Keito Uchiyama <projects@keito.me> <keito@fb.com>
+Kevin Coughlin <kevintcoughlin@gmail.com> <kevincoughlin@tumblr.com>
+Krystian Karczewski <karcz.k@gmail.com>
+Kunal Mehta <k.mehta@berkeley.edu> <kunalm@fb.com>
+Laurence Rowe <l@lrowe.co.uk> <laurence@lrowe.co.uk>
+Lea Rosema <terabaud@gmail.com>
+Marcin K. <katzoo@github.mail>
+Mark Anderson <undernewmanagement@users.noreply.github.com>
+Mark Funk <mfunk86@gmail.com> <mark@boomtownroi.com>
+Martin Andert <mandert@gmail.com>
+Mathieu M-Gosselin <mathieumg@gmail.com> <mathieumg@atx33.com>
+Matsunoki <himkt@klis.tsukuba.ac.jp>
+Matt Brookes <matt@brookes.net>
+Matt Dunn-Rankin <mdunnrankin@gmail.com> <matchu1993@gmail.com>
+Matt Zabriskie <mzabriskie@gmail.com>
+Matthew Johnston <matthewjohnston4@outlook.com> <matthewjohnston4@users.noreply.github.com>
+Matthew Looi <looi.matthew@gmail.com>
+Mattijs Kneppers <mattijs@arttech.nl>
+Max Heiber <max.heiber@gmail.com>
+Max Stoiber <contact@mstoiber.com>
+Michal Srb <xixixao@seznam.cz> xixixao <xixixao@seznam.cz>
+Michelle Todd <himichelletodd@gmail.com> <michelle@khanacademy.org>
+Mihai Parparita <mihai.parparita@gmail.com> <mihai@persistent.info>
+Minwe LUO <minwe@yunshipei.com>
+Murray M. Moss <murray@mmoss.name> <MMoss@cainc.com>
+Murray M. Moss <murray@mmoss.name> <mmoss@users.noreply.github.com>
+Neri Marschik <marschik_neri@cyberagent.co.jp>
+Nick Gavalas <njg57@cornell.edu>
+Nick Thompson <ncthom91@gmail.com> <nickt@instagram.com>
+Patrick Stapleton <github@gdi2290.com>
+Paul O’Shannessy <paul@oshannessy.com> <poshannessy@fb.com>
+Paul Shen <paul@mnml0.com> <paulshen@fb.com>
+Pete Hunt <floydophone@gmail.com>
+Pete Hunt <floydophone@gmail.com> <pete.hunt@fb.com>
+Pete Hunt <floydophone@gmail.com> <pete@instagram.com>
+Pete Hunt <floydophone@gmail.com> <phunt@instagram.com>
+Petri Lievonen <plievone@cc.hut.fi>
+Petri Lievonen <plievone@cc.hut.fi> <petri.lievonen@tkk.fi>
+Pieter Vanderwerff <me@pieter.io> <pieter@heyday.co.nz>
+Pouja Nikray <poujanik@gmail.com>
+Rainer Oviir <roviir@gmail.com> <raineroviir@rainers-MacBook-Pro.local>
+Ray <ray@tomo.im>
+Richard Feldman <richard.t.feldman@gmail.com> <richard@noredink.com>
+Richard Livesey <Livesey7@hotmail.co.uk>
+Rick Hanlon <rickhanlonii@gmail.com>
+Rick Hanlon <rickhanlonii@gmail.com> <rickhanlonii@fb.com>
+Rob Arnold <robarnold@cs.cmu.edu>
+Robert Binna <rbinna@gmail.com> <speedskater@users.noreply.github.com>
+Robin Frischmann <robin@rofrischmann.de>
+Sander Spies <sandermail@gmail.com>
+Scott Feeney <scott@oceanbase.org> <smf@fb.com>
+Sebastian Markbåge <sebastian@calyptus.eu> <sema@fb.com>
+Sergey Rubanov <chi187@gmail.com>
+Shogun Sea <shogunsea08@gmail.com> <xxin@groupon.com>
+Soichiro Kawamura <mail@w-st.com>
+Sophie Alpert <git@sophiebits.com> <balpert@fb.com>
+Sophie Alpert <git@sophiebits.com> <ben@benalpert.com>
+Sophie Alpert <git@sophiebits.com> <sophiebits@fb.com>
+Sophie Alpert <git@sophiebits.com> <spicyjalapeno@gmail.com>
+Sota Ohara <ohrst.18@gmail.com>
+Steven Luscher <react@steveluscher.com> <github@steveluscher.com>
+Steven Luscher <react@steveluscher.com> <steveluscher@fb.com>
+Steven Luscher <react@steveluscher.com> <steveluscher@instagram.com>
+Steven Luscher <react@steveluscher.com> <steveluscher@users.noreply.github.com>
+Seth Webster <sethwebster@gmail.com> <sethwebster@fb.com>
+Stoyan Stefanov <ssttoo@ymail.com>
+Tengfei Guo <terryr3rd@yeah.net> <tfguo369@gmail.com>
+Thomas Aylott <oblivious@subtlegradient.com> <aylott@fb.com>
+Timothy Yung <yungsters@gmail.com> <yungsters@fb.com>
+Tomoya Suzuki <tmysz.dev@gmail.com>
+Vasiliy Loginevskiy <Yeti.or@gmail.com>
+Vasiliy Loginevskiy <Yeti.or@gmail.com> <yeti-or@yandex-team.ru>
+Vjeux <vjeuxx@gmail.com>
+Vjeux <vjeuxx@gmail.com> <vjeux@fb.com>
+Volkan Unsal <spocksplanet@gmail.com>
+Wander Wang <wander.wang@ismole.com>
+Xavier Morel <xmo-odoo@users.noreply.github.com>
+YouBao Nong <noyobo@gmail.com> <nongyoubao@alibaba-inc.com>
+Yutaka Nakajima <nakazye@gmail.com>
+Zach Bruggeman <mail@bruggie.com> <zbruggeman@me.com>
+iawia002 <z2d@jifangcheng.com> <850127508@qq.com>
+元彦 <yuanyan@users.noreply.github.com>
+张敏 <cookfront@gmail.com>

.nvmrc

@@ -0,0 +1 @@
+v20.19.0

.prettierignore

@@ -0,0 +1,41 @@
+# react runtime
+build
+
+packages/react-devtools-core/dist
+packages/react-devtools-extensions/chrome/build
+packages/react-devtools-extensions/firefox/build
+packages/react-devtools-extensions/edge/build
+packages/react-devtools-extensions/shared/build
+packages/react-devtools-extensions/src/ErrorTesterCompiled.js
+packages/react-devtools-fusebox/dist
+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-timeline/dist
+packages/react-devtools-timeline/static
+
+# react compiler
+compiler/**/dist
+compiler/**/__tests__/fixtures/**/*.expect.md
+compiler/**/.next
+
+# contains invalid graphql`...` which results in a promise rejection error from `yarn prettier-all`.
+compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-kitchensink.js
+
+compiler/crates
+compiler/target
+compiler/apps/playground/public
+
+compiler/**/LICENSE
+compiler/*.md*
+compiler/*.json
+compiler/*.css
+compiler/*.webmanifest
+compiler/*.map
+compiler/*.sh
+compiler/*.txt
+compiler/*.ico
+compiler/*.svg
+compiler/*.lock
+compiler/*.toml

.prettierrc.js

@@ -0,0 +1,34 @@
+'use strict';
+
+const {esNextPaths} = require('./scripts/shared/pathsByLanguageVersion');
+
+module.exports = {
+  bracketSpacing: false,
+  singleQuote: true,
+  bracketSameLine: true,
+  trailingComma: 'es5',
+  printWidth: 80,
+  parser: 'flow',
+  arrowParens: 'avoid',
+  overrides: [
+    {
+      files: ['*.code-workspace'],
+      options: {
+        parser: 'json-stringify',
+      },
+    },
+    {
+      files: esNextPaths,
+      options: {
+        trailingComma: 'all',
+      },
+    },
+    {
+      files: ['*.ts', '*.tsx'],
+      options: {
+        trailingComma: 'all',
+        parser: 'typescript',
+      },
+    },
+  ],
+};

.watchmanconfig

@@ -0,0 +1 @@
+{}

CODE_OF_CONDUCT.md

@@ -0,0 +1,80 @@
+# Code of Conduct
+
+## Our Pledge
+
+In the interest of fostering an open and welcoming environment, we as
+contributors and maintainers pledge to make participation in our project and
+our community a harassment-free experience for everyone, regardless of age, body
+size, disability, ethnicity, sex characteristics, gender identity and expression,
+level of experience, education, socio-economic status, nationality, personal
+appearance, race, religion, or sexual identity and orientation.
+
+## Our Standards
+
+Examples of behavior that contributes to creating a positive environment
+include:
+
+* Using welcoming and inclusive language
+* Being respectful of differing viewpoints and experiences
+* Gracefully accepting constructive criticism
+* Focusing on what is best for the community
+* Showing empathy towards other community members
+
+Examples of unacceptable behavior by participants include:
+
+* The use of sexualized language or imagery and unwelcome sexual attention or
+  advances
+* Trolling, insulting/derogatory comments, and personal or political attacks
+* Public or private harassment
+* Publishing others' private information, such as a physical or electronic
+  address, without explicit permission
+* Other conduct which could reasonably be considered inappropriate in a
+  professional setting
+
+## Our Responsibilities
+
+Project maintainers are responsible for clarifying the standards of acceptable
+behavior and are expected to take appropriate and fair corrective action in
+response to any instances of unacceptable behavior.
+
+Project maintainers have the right and responsibility to remove, edit, or
+reject comments, commits, code, wiki edits, issues, and other contributions
+that are not aligned to this Code of Conduct, or to ban temporarily or
+permanently any contributor for other behaviors that they deem inappropriate,
+threatening, offensive, or harmful.
+
+## Scope
+
+This Code of Conduct applies within all project spaces, and it also applies when
+an individual is representing the project or its community in public spaces.
+Examples of representing a project or community include using an official
+project e-mail address, posting via an official social media account, or acting
+as an appointed representative at an online or offline event. Representation of
+a project may be further defined and clarified by project maintainers.
+
+This Code of Conduct also applies outside the project spaces when there is a
+reasonable belief that an individual's behavior may have a negative impact on
+the project or its community.
+
+## Enforcement
+
+Instances of abusive, harassing, or otherwise unacceptable behavior may be
+reported by contacting the project team at <opensource-conduct@fb.com>. All
+complaints will be reviewed and investigated and will result in a response that
+is deemed necessary and appropriate to the circumstances. The project team is
+obligated to maintain confidentiality with regard to the reporter of an incident.
+Further details of specific enforcement policies may be posted separately.
+
+Project maintainers who do not follow or enforce the Code of Conduct in good
+faith may face temporary or permanent repercussions as determined by other
+members of the project's leadership.
+
+## Attribution
+
+This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4,
+available at https://www.contributor-covenant.org/version/1/4/code-of-conduct.html
+
+[homepage]: https://www.contributor-covenant.org
+
+For answers to common questions about this code of conduct, see
+https://www.contributor-covenant.org/faq

CONTRIBUTING.md

@@ -1,63 +1,5 @@
 # Contributing to React
 
-React is one of Facebook's first open source projects that is both under very active development and is also being used to ship code to everybody on facebook.com. We're still working out the kinks to make contributing to this project as easy and transparent as possible, but we're not quite there yet. Hopefully this document makes the process for contributing clear and preempts some questions you may have.
+Want to contribute to React? There are a few things you need to know.  
 
-## Our Development Process
-
-Some of the core team will be working directly on GitHub. These changes will be public from the beginning. Other changesets will come via a bridge with Facebook's internal source control. This is a necessity as it allows engineers at Facebook outside of the core team to move fast and contribute from an environment they are comfortable in.
-
-### `master` is unsafe
-
-We will do our best to keep `master` in good shape, with tests passing at all times. But in order to move fast, we will make API changes that your application might not be compatible with. We will do our best to communicate these changes and always version appropriately so you can lock into a specific version if need be.
-
-### Pull Requests
-
-The core team will be monitoring for pull requests. When we get one, we will pull it in an apply it to Facebook's codebase and run our test suite to ensure nothing breaks. From here, we'll need to get another person to sign off on the changes. For API changes we may need to fix internal uses, which could cause some delay. We'll do our best to provide updates and feedback throughout the process.
-
-*Before* submitting a pull request, please make sure the following is done…
-
-1. Fork the repo and create your branch from `master`.
-2. If you've added code that should be tested, add tests!
-3. If you've changed APIs, update the documentation.
-4. Ensure the test suite passes (`grunt test`).
-5. Make sure your code lints (`grunt lint`) - we've done our best to make sure these rules match our internal linting guidelines.
-6. If you haven't already, complete the CLA.
-
-### Contributor License Agreement ("CLA")
-
-In order to accept your pull request, we need you to submit a CLA. You only need to do this once, so if you've done this for another Facebook open source project, you're good to go. If you are submitting a pull request for the first time, just let us know that you have completed the CLA and we can cross-check with your GitHub username.
-
-Complete your CLA here: <https://developers.facebook.com/opensource/cla>
-
-## Bugs
-
-### Where to Find Known Issues
-
-We will be using GitHub Issues for our public bugs. We will keep a close eye on this and try to make it clear when we have an internal fix in progress. Before filing a new task, try to make sure your problem doesn't already exist.
-
-### Reporting New Issues
-
-The best way to get your bug fixed is to provide a reduced test case. jsFiddle, jsBin, and other sites provide a way to give live examples. Those are especially helpful though may not work for `JSX`-based code.
-
-### Security Bugs
-
-Facebook has a [bounty program](https://www.facebook.com/whitehat/) for the safe disclosure of security bugs. With that in mind, please do not file public issues and go through the process outlined on that page.
-
-## How to Get in Touch
-
-* IRC - [#reactjs on freenode](http://webchat.freenode.net/?channels=reactjs)
-* Mailing list - [reactjs on Google Groups](http://groups.google.com/group/reactjs)
-
-## Coding Style
-
-* Use semicolons;
-* Commas last,
-* 2 spaces for indentation (no tabs)
-* Prefer `'` over `"`
-* `"use strict";`
-* 80 character line length
-* "Attractive"
-
-## License
-
-By contributing to React, you agree that your contributions will be licensed under the [Apache License Version 2.0 (APLv2)](LICENSE).
+We wrote a **[contribution guide](https://reactjs.org/docs/how-to-contribute.html)** to help you get started.

Gruntfile.js

@@ -1,99 +0,0 @@
-'use strict';
-
-var exec = require('child_process').exec;
-var jsxTask = require('./grunt/tasks/jsx');
-var browserifyTask = require('./grunt/tasks/browserify');
-var wrapupTask = require('./grunt/tasks/wrapup');
-var phantomTask = require('./grunt/tasks/phantom');
-var releaseTasks = require('./grunt/tasks/release');
-
-module.exports = function(grunt) {
-
-  grunt.initConfig({
-    pkg: grunt.file.readJSON('package.json'),
-    copy: require('./grunt/config/copy'),
-    jsx: require('./grunt/config/jsx/jsx'),
-    browserify: require('./grunt/config/browserify'),
-    wrapup: require('./grunt/config/wrapup'),
-    phantom: require('./grunt/config/phantom'),
-    clean: ['./build', './*.gem', './docs/_site', './examples/shared/*.js'],
-    jshint: require('./grunt/config/jshint'),
-    compare_size: require('./grunt/config/compare_size')
-  });
-
-  grunt.config.set('compress', require('./grunt/config/compress'));
-
-  grunt.loadNpmTasks('grunt-contrib-jshint');
-  grunt.loadNpmTasks('grunt-contrib-copy');
-  grunt.loadNpmTasks('grunt-contrib-clean');
-  grunt.loadNpmTasks('grunt-compare-size');
-  grunt.loadNpmTasks('grunt-contrib-compress');
-
-  // Alias 'jshint' to 'lint' to better match the workflow we know
-  grunt.registerTask('lint', ['jshint']);
-
-  // Register jsx:debug and :release tasks.
-  grunt.registerMultiTask('jsx', jsxTask);
-
-  // Our own browserify-based tasks to build a single JS file build
-  grunt.registerMultiTask('browserify', browserifyTask);
-
-  // Similar to Browserify, use WrapUp to generate single JS file that
-  // defines global variables instead of using require.
-  grunt.registerMultiTask('wrapup', wrapupTask);
-
-  grunt.registerMultiTask('phantom', phantomTask);
-
-  grunt.registerTask('build:basic', ['jsx:debug', 'browserify:basic']);
-  grunt.registerTask('build:transformer', ['jsx:debug', 'browserify:transformer']);
-  grunt.registerTask('build:min', ['jsx:release', 'browserify:min']);
-  grunt.registerTask('build:test', [
-    'jsx:debug',
-    'jsx:test',
-    'browserify:test'
-  ]);
-
-  grunt.registerTask('test', ['build:test', 'phantom:run']);
-
-  // Optimized build task that does all of our builds. The subtasks will be run
-  // in order so we can take advantage of that and only run jsx:debug once.
-  grunt.registerTask('build', [
-    'jsx:debug',
-    'browserify:basic',
-    'browserify:transformer',
-    'jsx:release',
-    'browserify:min',
-    'copy:react_docs',
-    'compare_size'
-  ]);
-
-  // Automate the release!
-  grunt.registerTask('release:setup', releaseTasks.setup);
-  grunt.registerTask('release:bower', releaseTasks.bower);
-  grunt.registerTask('release:docs', releaseTasks.docs);
-  grunt.registerTask('release:msg', releaseTasks.msg);
-  grunt.registerTask('release:starter', releaseTasks.starter);
-
-  grunt.registerTask('release', [
-    'release:setup',
-    'clean',
-    'build',
-    'gem:only',
-    'release:bower',
-    'release:starter',
-    'compress',
-    'release:docs',
-    'release:msg'
-  ]);
-
-  // `gem` task to build the react-source gem
-  grunt.registerTask('gem', ['build', 'gem:only']);
-
-  grunt.registerTask('gem:only', function() {
-    var done = this.async();
-    exec('gem build react-source.gemspec', done);
-  });
-
-  // The default task - build - to keep setup easy
-  grunt.registerTask('default', ['build']);
-};

LICENSE

@@ -1,201 +1,21 @@
-                                 Apache License
-                           Version 2.0, January 2004
-                        http://www.apache.org/licenses/
+MIT License
 
-   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
+Copyright (c) Meta Platforms, Inc. and affiliates.
 
-   1. Definitions.
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
 
-      "License" shall mean the terms and conditions for use, reproduction,
-      and distribution as defined by Sections 1 through 9 of this document.
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
 
-      "Licensor" shall mean the copyright owner or entity authorized by
-      the copyright owner that is granting the License.
-
-      "Legal Entity" shall mean the union of the acting entity and all
-      other entities that control, are controlled by, or are under common
-      control with that entity. For the purposes of this definition,
-      "control" means (i) the power, direct or indirect, to cause the
-      direction or management of such entity, whether by contract or
-      otherwise, or (ii) ownership of fifty percent (50%) or more of the
-      outstanding shares, or (iii) beneficial ownership of such entity.
-
-      "You" (or "Your") shall mean an individual or Legal Entity
-      exercising permissions granted by this License.
-
-      "Source" form shall mean the preferred form for making modifications,
-      including but not limited to software source code, documentation
-      source, and configuration files.
-
-      "Object" form shall mean any form resulting from mechanical
-      transformation or translation of a Source form, including but
-      not limited to compiled object code, generated documentation,
-      and conversions to other media types.
-
-      "Work" shall mean the work of authorship, whether in Source or
-      Object form, made available under the License, as indicated by a
-      copyright notice that is included in or attached to the work
-      (an example is provided in the Appendix below).
-
-      "Derivative Works" shall mean any work, whether in Source or Object
-      form, that is based on (or derived from) the Work and for which the
-      editorial revisions, annotations, elaborations, or other modifications
-      represent, as a whole, an original work of authorship. For the purposes
-      of this License, Derivative Works shall not include works that remain
-      separable from, or merely link (or bind by name) to the interfaces of,
-      the Work and Derivative Works thereof.
-
-      "Contribution" shall mean any work of authorship, including
-      the original version of the Work and any modifications or additions
-      to that Work or Derivative Works thereof, that is intentionally
-      submitted to Licensor for inclusion in the Work by the copyright owner
-      or by an individual or Legal Entity authorized to submit on behalf of
-      the copyright owner. For the purposes of this definition, "submitted"
-      means any form of electronic, verbal, or written communication sent
-      to the Licensor or its representatives, including but not limited to
-      communication on electronic mailing lists, source code control systems,
-      and issue tracking systems that are managed by, or on behalf of, the
-      Licensor for the purpose of discussing and improving the Work, but
-      excluding communication that is conspicuously marked or otherwise
-      designated in writing by the copyright owner as "Not a Contribution."
-
-      "Contributor" shall mean Licensor and any individual or Legal Entity
-      on behalf of whom a Contribution has been received by Licensor and
-      subsequently incorporated within the Work.
-
-   2. Grant of Copyright License. Subject to the terms and conditions of
-      this License, each Contributor hereby grants to You a perpetual,
-      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
-      copyright license to reproduce, prepare Derivative Works of,
-      publicly display, publicly perform, sublicense, and distribute the
-      Work and such Derivative Works in Source or Object form.
-
-   3. Grant of Patent License. Subject to the terms and conditions of
-      this License, each Contributor hereby grants to You a perpetual,
-      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
-      (except as stated in this section) patent license to make, have made,
-      use, offer to sell, sell, import, and otherwise transfer the Work,
-      where such license applies only to those patent claims licensable
-      by such Contributor that are necessarily infringed by their
-      Contribution(s) alone or by combination of their Contribution(s)
-      with the Work to which such Contribution(s) was submitted. If You
-      institute patent litigation against any entity (including a
-      cross-claim or counterclaim in a lawsuit) alleging that the Work
-      or a Contribution incorporated within the Work constitutes direct
-      or contributory patent infringement, then any patent licenses
-      granted to You under this License for that Work shall terminate
-      as of the date such litigation is filed.
-
-   4. Redistribution. You may reproduce and distribute copies of the
-      Work or Derivative Works thereof in any medium, with or without
-      modifications, and in Source or Object form, provided that You
-      meet the following conditions:
-
-      (a) You must give any other recipients of the Work or
-          Derivative Works a copy of this License; and
-
-      (b) You must cause any modified files to carry prominent notices
-          stating that You changed the files; and
-
-      (c) You must retain, in the Source form of any Derivative Works
-          that You distribute, all copyright, patent, trademark, and
-          attribution notices from the Source form of the Work,
-          excluding those notices that do not pertain to any part of
-          the Derivative Works; and
-
-      (d) If the Work includes a "NOTICE" text file as part of its
-          distribution, then any Derivative Works that You distribute must
-          include a readable copy of the attribution notices contained
-          within such NOTICE file, excluding those notices that do not
-          pertain to any part of the Derivative Works, in at least one
-          of the following places: within a NOTICE text file distributed
-          as part of the Derivative Works; within the Source form or
-          documentation, if provided along with the Derivative Works; or,
-          within a display generated by the Derivative Works, if and
-          wherever such third-party notices normally appear. The contents
-          of the NOTICE file are for informational purposes only and
-          do not modify the License. You may add Your own attribution
-          notices within Derivative Works that You distribute, alongside
-          or as an addendum to the NOTICE text from the Work, provided
-          that such additional attribution notices cannot be construed
-          as modifying the License.
-
-      You may add Your own copyright statement to Your modifications and
-      may provide additional or different license terms and conditions
-      for use, reproduction, or distribution of Your modifications, or
-      for any such Derivative Works as a whole, provided Your use,
-      reproduction, and distribution of the Work otherwise complies with
-      the conditions stated in this License.
-
-   5. Submission of Contributions. Unless You explicitly state otherwise,
-      any Contribution intentionally submitted for inclusion in the Work
-      by You to the Licensor shall be under the terms and conditions of
-      this License, without any additional terms or conditions.
-      Notwithstanding the above, nothing herein shall supersede or modify
-      the terms of any separate license agreement you may have executed
-      with Licensor regarding such Contributions.
-
-   6. Trademarks. This License does not grant permission to use the trade
-      names, trademarks, service marks, or product names of the Licensor,
-      except as required for reasonable and customary use in describing the
-      origin of the Work and reproducing the content of the NOTICE file.
-
-   7. Disclaimer of Warranty. Unless required by applicable law or
-      agreed to in writing, Licensor provides the Work (and each
-      Contributor provides its Contributions) on an "AS IS" BASIS,
-      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
-      implied, including, without limitation, any warranties or conditions
-      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
-      PARTICULAR PURPOSE. You are solely responsible for determining the
-      appropriateness of using or redistributing the Work and assume any
-      risks associated with Your exercise of permissions under this License.
-
-   8. Limitation of Liability. In no event and under no legal theory,
-      whether in tort (including negligence), contract, or otherwise,
-      unless required by applicable law (such as deliberate and grossly
-      negligent acts) or agreed to in writing, shall any Contributor be
-      liable to You for damages, including any direct, indirect, special,
-      incidental, or consequential damages of any character arising as a
-      result of this License or out of the use or inability to use the
-      Work (including but not limited to damages for loss of goodwill,
-      work stoppage, computer failure or malfunction, or any and all
-      other commercial damages or losses), even if such Contributor
-      has been advised of the possibility of such damages.
-
-   9. Accepting Warranty or Additional Liability. While redistributing
-      the Work or Derivative Works thereof, You may choose to offer,
-      and charge a fee for, acceptance of support, warranty, indemnity,
-      or other liability obligations and/or rights consistent with this
-      License. However, in accepting such obligations, You may act only
-      on Your own behalf and on Your sole responsibility, not on behalf
-      of any other Contributor, and only if You agree to indemnify,
-      defend, and hold each Contributor harmless for any liability
-      incurred by, or claims asserted against, such Contributor by reason
-      of your accepting any such warranty or additional liability.
-
-   END OF TERMS AND CONDITIONS
-
-   APPENDIX: How to apply the Apache License to your work.
-
-      To apply the Apache License to your work, attach the following
-      boilerplate notice, with the fields enclosed by brackets "[]"
-      replaced with your own identifying information. (Don't include
-      the brackets!)  The text should be enclosed in the appropriate
-      comment syntax for the file format. We also recommend that a
-      file or class name and description of purpose be included on the
-      same "printed page" as the copyright notice for easier
-      identification within third-party archives.
-
-   Copyright [yyyy] [name of copyright owner]
-
-   Licensed under the Apache License, Version 2.0 (the "License");
-   you may not use this file except in compliance with the License.
-   You may obtain a copy of the License at
-
-       http://www.apache.org/licenses/LICENSE-2.0
-
-   Unless required by applicable law or agreed to in writing, software
-   distributed under the License is distributed on an "AS IS" BASIS,
-   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-   See the License for the specific language governing permissions and
-   limitations under the License.
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

MAINTAINERS

@@ -0,0 +1,23 @@
+acdlite
+eps1lon
+EugeneChoi4
+gaearon
+gnoff
+unstubbable
+hoxyq
+jackpope
+jbonta
+jbrown215
+josephsavona
+kassens
+mattcarrollcode
+mofeiZ
+mvitousek
+pieterv
+poteto
+rickhanlonii
+sebmarkbage
+sethwebster
+sophiebits
+elicwhite
+yuzhi

README.md

@@ -1,96 +1,78 @@
-# [React](http://facebook.github.io/react)
+# [React](https://react.dev/) · [![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) [![(Runtime) Build and Test](https://github.com/facebook/react/actions/workflows/runtime_build_and_test.yml/badge.svg)](https://github.com/facebook/react/actions/workflows/runtime_build_and_test.yml) [![(Compiler) TypeScript](https://github.com/facebook/react/actions/workflows/compiler_typescript.yml/badge.svg?branch=main)](https://github.com/facebook/react/actions/workflows/compiler_typescript.yml) [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](https://legacy.reactjs.org/docs/how-to-contribute.html#your-first-pull-request)
 
 React is a JavaScript library for building user interfaces.
 
-* **Declarative:** React uses a declarative paradigm that makes it easier to reason about your application.
-* **Efficient:** React minimizes interactions with the DOM by using a mock representation of the DOM.
-* **Flexible:** React works with the libraries and frameworks that you already know.
+* **Declarative:** React makes it painless to create interactive UIs. Design simple views for each state in your application, and React will efficiently update and render just the right components when your data changes. Declarative views make your code more predictable, simpler to understand, and easier to debug.
+* **Component-Based:** Build encapsulated components that manage their own state, then compose them to make complex UIs. Since component logic is written in JavaScript instead of templates, you can easily pass rich data through your app and keep the state out of the DOM.
+* **Learn Once, Write Anywhere:** We don't make assumptions about the rest of your technology stack, so you can develop new features in React without rewriting existing code. React can also render on the server using [Node](https://nodejs.org/en) and power mobile apps using [React Native](https://reactnative.dev/).
 
-[Learn how to use React in your own project.](http://facebook.github.io/docs/getting-started.html)
-
-## Examples
-
-We have several examples [on the website](http://facebook.github.io/react). Here is the first one to get you started:
-
-```js
-/** @jsx React.DOM */
-var HelloMessage = React.createClass({
-  render: function() {
-    return <div>{'Hello ' + this.props.name}</div>;
-  }
-});
-
-React.renderComponent(
-  <HelloMessage name="John" />,
-  document.getElementById('container')
-);
-```
-
-This example will render "Hello John" into a container on the page.
-
-You'll notice that we used an XML-like syntax; [we call it JSX](http://facebook.github.io/docs/syntax.html). JSX is not required to use React, but it makes code more readable, and writing it feels like writing HTML. A simple transform is included with React that allows converting JSX into native JavaScript for browsers to digest.
+[Learn how to use React in your project](https://react.dev/learn).
 
 ## Installation
 
-The fastest way to get started is to serve JavaScript from the CDN:
+React has been designed for gradual adoption from the start, and **you can use as little or as much React as you need**:
 
-```html
-<!-- The core React library -->
-<script src="http://fbcdn.com/javascript/react/0.6.0/react.min.js"></script>
-<!-- In-browser JSX transformer, remove when pre-compiling JSX. -->
-<script src="http://fbcdn.com/javascript/react/0.6.0/JSXTransformer.js"></script>
+* Use [Quick Start](https://react.dev/learn) to get a taste of React.
+* [Add React to an Existing Project](https://react.dev/learn/add-react-to-an-existing-project) to use as little or as much React as you need.
+* [Create a New React App](https://react.dev/learn/start-a-new-react-project) if you're looking for a powerful JavaScript toolchain.
+
+## Documentation
+
+You can find the React documentation [on the website](https://react.dev/).
+
+Check out the [Getting Started](https://react.dev/learn) page for a quick overview.
+
+The documentation is divided into several sections:
+
+* [Quick Start](https://react.dev/learn)
+* [Tutorial](https://react.dev/learn/tutorial-tic-tac-toe)
+* [Thinking in React](https://react.dev/learn/thinking-in-react)
+* [Installation](https://react.dev/learn/installation)
+* [Describing the UI](https://react.dev/learn/describing-the-ui)
+* [Adding Interactivity](https://react.dev/learn/adding-interactivity)
+* [Managing State](https://react.dev/learn/managing-state)
+* [Advanced Guides](https://react.dev/learn/escape-hatches)
+* [API Reference](https://react.dev/reference/react)
+* [Where to Get Support](https://react.dev/community)
+* [Contributing Guide](https://legacy.reactjs.org/docs/how-to-contribute.html)
+
+You can improve it by sending pull requests to [this repository](https://github.com/reactjs/react.dev).
+
+## Examples
+
+We have several examples [on the website](https://react.dev/). Here is the first one to get you started:
+
+```jsx
+import { createRoot } from 'react-dom/client';
+
+function HelloMessage({ name }) {
+  return <div>Hello {name}</div>;
+}
+
+const root = createRoot(document.getElementById('container'));
+root.render(<HelloMessage name="Taylor" />);
 ```
 
-We've also built a [starter kit](#) which might be useful if this is your first time using React. It includes a webpage with an example of using React with live code.
+This example will render "Hello Taylor" into a container on the page.
 
-If you'd like to use [bower](http://bower.io), it's as easy as:
+You'll notice that we used an HTML-like syntax; [we call it JSX](https://react.dev/learn#writing-markup-with-jsx). JSX is not required to use React, but it makes code more readable, and writing it feels like writing HTML.
 
-```sh
-bower install react
-```
+## Contributing
 
-## Contribute
+The main purpose of this repository is to continue evolving React core, making it faster and easier to use. Development of React happens in the open on GitHub, and we are grateful to the community for contributing bugfixes and improvements. Read below to learn how you can take part in improving React.
 
-The main purpose of this repository is to continue to evolve React core, making it faster and easier to use. If you're interested in helping with that, then keep reading. If you're not interested in helping right now that's ok too :) Any feedback you have about using React would be greatly appreciated.
+### [Code of Conduct](https://code.fb.com/codeofconduct)
 
-### Building Your Copy of React
+Facebook has adopted a Code of Conduct that we expect project participants to adhere to. Please read [the full text](https://code.fb.com/codeofconduct) so that you can understand what actions will and will not be tolerated.
 
-The process to build `react.js` is built entirely on top of node.js, using many libraries you may already be familiar with.
+### [Contributing Guide](https://legacy.reactjs.org/docs/how-to-contribute.html)
 
-#### Prerequisites
+Read our [contributing guide](https://legacy.reactjs.org/docs/how-to-contribute.html) to learn about our development process, how to propose bugfixes and improvements, and how to build and test your changes to React.
 
-* You have `node` installed at v0.10.0+ (it might work at lower versions, we just haven't tested).
-* You are familiar with `npm` and know whether or not you need to use `sudo` when installing packages globally.
-* You are familiar with `git`.
+### [Good First Issues](https://github.com/facebook/react/labels/good%20first%20issue)
 
-#### Build
+To help you get your feet wet and get you familiar with our contribution process, we have a list of [good first issues](https://github.com/facebook/react/labels/good%20first%20issue) that contain bugs that have a relatively limited scope. This is a great place to get started.
 
-Once you have the repository cloned, building a copy of `react.js` is really easy.
+### License
 
-```sh
-# grunt-cli is needed by grunt; you might have this installed already
-npm install -g grunt-cli
-npm install
-grunt build
-```
-
-At this point, you should now have a `build/` directory populated with everything you need to use React. The examples should all work.
-
-### Grunt
-
-We use grunt to automate many tasks. Run `grunt -h` to see a mostly complete listing. The important ones to know:
-
-```sh
-# Create test build & run tests with PhantomJS
-grunt test
-# Lint the core library code with JSHint
-grunt lint
-# Lint package code
-grunt lint:package
-# Wipe out build directory
-grunt clean
-```
-
-### More…
-
-There's only so much we can cram in here. To read more about the community and guidelines for submitting pull requests, please read the [Contributing document](CONTRIBUTING.md).
+React is [MIT licensed](./LICENSE).

ReactVersions.js

@@ -0,0 +1,64 @@
+'use strict';
+
+// This module is the single source of truth for versioning packages that we
+// publish to npm.
+//
+// Packages will not be published unless they are added here.
+//
+// The @latest channel uses the version as-is, e.g.:
+//
+//   19.3.0
+//
+// The @canary channel appends additional information, with the scheme
+// <version>-<label>-<commit_sha>, e.g.:
+//
+//   19.3.0-canary-a1c2d3e4
+//
+// The @experimental channel doesn't include a version, only a date and a sha, e.g.:
+//
+//   0.0.0-experimental-241c4467e-20200129
+
+const ReactVersion = '19.3.0';
+
+// The label used by the @canary channel. Represents the upcoming release's
+// stability. Most of the time, this will be "canary", but we may temporarily
+// choose to change it to "alpha", "beta", "rc", etc.
+//
+// It only affects the label used in the version string. To customize the
+// npm dist tags used during publish, refer to .github/workflows/runtime_prereleases_*.yml.
+const canaryChannelLabel = 'canary';
+
+// If the canaryChannelLabel is "rc", the build pipeline will use this to build
+// an RC version of the packages.
+const rcNumber = 0;
+
+const stablePackages = {
+  'eslint-plugin-react-hooks': '7.1.0',
+  'jest-react': '0.18.0',
+  react: ReactVersion,
+  'react-art': ReactVersion,
+  'react-dom': ReactVersion,
+  'react-server-dom-webpack': ReactVersion,
+  'react-server-dom-turbopack': ReactVersion,
+  'react-server-dom-parcel': ReactVersion,
+  'react-is': ReactVersion,
+  'react-reconciler': '0.34.0',
+  'react-refresh': '0.19.0',
+  'react-test-renderer': ReactVersion,
+  'use-subscription': '1.13.0',
+  'use-sync-external-store': '1.7.0',
+  scheduler: '0.28.0',
+};
+
+// These packages do not exist in the @canary or @latest channel, only
+// @experimental. We don't use semver, just the commit sha, so this is just a
+// list of package names instead of a map.
+const experimentalPackages = ['react-markup'];
+
+module.exports = {
+  ReactVersion,
+  canaryChannelLabel,
+  rcNumber,
+  stablePackages,
+  experimentalPackages,
+};

SECURITY.md

@@ -0,0 +1,7 @@
+# Reporting Security Issues
+
+If you believe you have found a security vulnerability in React, we encourage you to let us know right away. We will investigate all legitimate reports and do our best to quickly fix the problem.
+
+Please refer to the following page for our responsible disclosure policy, reward guidelines, and those things that should not be reported:
+
+https://www.facebook.com/whitehat

babel.config-react-compiler.js

@@ -0,0 +1,19 @@
+'use strict';
+
+/**
+ * HACK: @poteto React Compiler inlines Zod in its build artifact. Zod spreads values passed to .map
+ * which causes issues in @babel/plugin-transform-spread in loose mode, as it will result in
+ * {undefined: undefined} which fails to parse.
+ *
+ * [@babel/plugin-transform-block-scoping', {throwIfClosureRequired: true}] also causes issues with
+ * the built version of the compiler. The minimal set of plugins needed for this file is reexported
+ * from babel.config-ts.
+ *
+ * I will remove this hack later when we move eslint-plugin-react-hooks into the compiler directory.
+ **/
+
+const baseConfig = require('./babel.config-ts');
+
+module.exports = {
+  plugins: baseConfig.plugins,
+};

babel.config-ts.js

@@ -0,0 +1,18 @@
+/**
+ * This file is purely being used for local jest runs, and doesn't participate in the build process.
+ */
+'use strict';
+
+module.exports = {
+  plugins: [
+    '@babel/plugin-syntax-jsx',
+    '@babel/plugin-transform-flow-strip-types',
+    ['@babel/plugin-transform-class-properties', {loose: true}],
+    ['@babel/plugin-transform-private-methods', {loose: true}],
+    '@babel/plugin-transform-classes',
+  ],
+  presets: [
+    ['@babel/preset-env', {targets: {node: 'current'}}],
+    '@babel/preset-typescript',
+  ],
+};

babel.config.js

@@ -0,0 +1,26 @@
+'use strict';
+
+module.exports = {
+  plugins: [
+    '@babel/plugin-syntax-jsx',
+    '@babel/plugin-transform-flow-strip-types',
+    ['@babel/plugin-proposal-class-properties', {loose: true}],
+    'syntax-trailing-function-commas',
+    [
+      '@babel/plugin-proposal-object-rest-spread',
+      {loose: true, useBuiltIns: true},
+    ],
+    ['@babel/plugin-transform-template-literals', {loose: true}],
+    '@babel/plugin-transform-literals',
+    '@babel/plugin-transform-arrow-functions',
+    '@babel/plugin-transform-block-scoped-functions',
+    '@babel/plugin-transform-object-super',
+    '@babel/plugin-transform-shorthand-properties',
+    '@babel/plugin-transform-computed-properties',
+    '@babel/plugin-transform-for-of',
+    ['@babel/plugin-transform-spread', {loose: true, useBuiltIns: true}],
+    '@babel/plugin-transform-parameters',
+    ['@babel/plugin-transform-destructuring', {loose: true, useBuiltIns: true}],
+    ['@babel/plugin-transform-block-scoping', {throwIfClosureRequired: true}],
+  ],
+};

bin/jsx

@@ -1,42 +0,0 @@
-#!/usr/bin/env node
-"use strict";
-
-var visitors = require('../vendor/fbtransform/visitors').transformVisitors;
-var transform = require('../vendor/fbtransform/lib/transform').transform;
-var debranch = require("../vendor/woodchipper").debranch;
-
-require("commoner").resolve(function(id) {
-  var context = this;
-
-  // Note that the result of context.getProvidedP() is cached for the
-  // duration of the build, so it is both consistent and cheap to
-  // evaluate multiple times.
-  return context.getProvidedP().then(function(idToPath) {
-    // If a module declares its own identifier using @providesModule
-    // then that identifier will be a key in the idToPath object.
-    if (idToPath.hasOwnProperty(id)) {
-      return context.readFileP(idToPath[id]);
-    }
-
-    // Otherwise assume the identifier maps directly to a path in the
-    // filesystem.
-    return context.readModuleP(id);
-  });
-
-}).process(function(id, source) {
-  var context = this;
-
-  // This is where JSX, ES6, etc. desugaring happens.
-  source = transform(visitors.react, source).code;
-
-  return context.makePromise(function(callback) {
-    var constants = context.config.constants || {};
-
-    // Debranching means removing any obviously dead code after
-    // replacing constant conditional expressions with literal
-    // (boolean) values.
-    debranch(constants, source, function(source) {
-      callback(null, source);
-    });
-  });
-});

compiler/.eslintrc.js

@@ -0,0 +1,106 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/**
+ * Our philosophy for linting is that lints should be very high-signal:
+ * - Error, don't warn. If it's worth mentioning it's worth fixing.
+ * - Enable rules that consistently identify real problems. If we frequently would have to
+ *   disable the rule due to false positives, it isn't high-signal.
+ * - Enable rules that help improve consistent style (to avoid code review about style rather
+ *   than substance).
+ */
+module.exports = {
+  extends: ["eslint:recommended", "plugin:@typescript-eslint/recommended"],
+  rules: {
+    /*
+     * We prefer using const where variables are not reassigned, but occassional mistakes
+     * aren't a major issue
+     */
+    "prefer-const": "off",
+
+    // Not valuable enough to enable
+    "no-useless-escape": "off",
+
+    /*
+     * There are valid use cases for loops with constant conditions where the body contains the
+     * break
+     */
+    "no-constant-condition": "off",
+
+    // eslint only knows about builtin control flow (eg throw, return, break) and not custom ones
+    // like invariant.
+    "no-fallthrough": "off",
+
+    /*
+     * Low-value: this fires even for declarations that capture references which wouldn't be as
+     * obvious if the declaration was lifted to the parent root
+     */
+    "no-inner-declarations": "off",
+
+    "multiline-comment-style": ["error", "starred-block"],
+
+    /**
+     * We sometimes need to check for control characters in regexes for things like preserving input
+     * strings
+     */
+    "no-control-regex": "off",
+
+    "@typescript-eslint/no-empty-function": "off",
+
+    /*
+     * Explicitly casting to/through any is sometimes required, often for error messages to
+     * assertExhaustive()
+     */
+    "@typescript-eslint/no-explicit-any": "off",
+
+    /*
+     * We use non-null assertions carefully. Ideally, there would be a TS option to codegen
+     * a non-null check at the assertion site.
+     */
+    "@typescript-eslint/no-non-null-assertion": "off",
+
+    // Being explicit provides value in cases where inference may later change
+    "@typescript-eslint/no-inferrable-types": "off",
+    "@typescript-eslint/explicit-function-return-type": "error",
+
+    /*
+     * Unused variables are frequently a bug. Prefix unused variables with an _ to fix, but note
+     * that eslint won't warn you that an underscore prefixed variable is used and that the prefix
+     * should be dropped.
+     */
+    "@typescript-eslint/no-unused-vars": [
+      "error",
+      {
+        argsIgnorePattern: "^_",
+        varsIgnorePattern: "^_",
+        caughtErrorsIgnorePattern: "^_",
+      },
+    ],
+
+    // Consider enabling for consistency. Ideally violations could be auto-fixed.
+    "@typescript-eslint/consistent-generic-constructors": [
+      "off",
+      "constructor",
+    ],
+    "@typescript-eslint/array-type": ["error", { default: "generic" }],
+    "@typescript-eslint/triple-slash-reference": "off",
+    "@typescript-eslint/no-var-requires": "off",
+  },
+  parser: "@typescript-eslint/parser",
+  plugins: ["@typescript-eslint"],
+  root: true,
+  ignorePatterns: ["**/__tests__/**/*", "**/*.d.ts", "**/dist/**/*"],
+  env: {
+    node: true,
+  },
+  /*
+   * If rules need to be disabled then the rule is insufficiently high signal
+   * and should be diasbled altogether or customized (in either case via a standalone PR)
+   */
+  noInlineConfig: true,
+  reportUnusedDisableDirectives: true,
+};

compiler/.gitignore

@@ -0,0 +1,14 @@
+.DS_Store
+.spr.yml
+
+node_modules
+.watchmanconfig
+.watchman-cookie-*
+dist
+.vscode
+!packages/playground/.vscode
+testfilter.txt
+
+# forgive
+*.vsix
+.vscode-test

compiler/CHANGELOG.md

@@ -0,0 +1,65 @@
+## 19.1.0-rc.2 (May 14, 2025)
+
+## babel-plugin-react-compiler
+
+* Fix for string attribute values with emoji [#33096](https://github.com/facebook/react/pull/33096) by [@josephsavona](https://github.com/josephsavona)
+
+## 19.1.0-rc.1 (April 21, 2025)
+
+## eslint-plugin-react-hooks
+* Temporarily disable ref access in render validation [#32839](https://github.com/facebook/react/pull/32839) by [@poteto](https://github.com/poteto)
+* Fix type error with recommended config [#32666](https://github.com/facebook/react/pull/32666) by [@niklasholm](https://github.com/niklasholm)
+* Merge rule from eslint-plugin-react-compiler into `react-hooks` plugin [#32416](https://github.com/facebook/react/pull/32416) by [@michaelfaith](https://github.com/michaelfaith)
+* Add dev dependencies for typescript migration [#32279](https://github.com/facebook/react/pull/32279) by [@michaelfaith](https://github.com/michaelfaith)
+* Support v9 context api [#32045](https://github.com/facebook/react/pull/32045) by [@michaelfaith](https://github.com/michaelfaith)
+* Support eslint 8+ flat plugin syntax out of the box for eslint-plugin-react-compiler [#32120](https://github.com/facebook/react/pull/32120) by [@orta](https://github.com/orta)
+
+## babel-plugin-react-compiler
+* Support satisfies operator [#32742](https://github.com/facebook/react/pull/32742) by [@rodrigofariow](https://github.com/rodrigofariow)
+* Fix inferEffectDependencies lint false positives [#32769](https://github.com/facebook/react/pull/32769) by [@mofeiZ](https://github.com/mofeiZ)
+* Fix hoisting of let declarations [#32724](https://github.com/facebook/react/pull/32724) by [@mofeiZ](https://github.com/mofeiZ)
+* Avoid failing builds when import specifiers conflict or shadow vars [#32663](https://github.com/facebook/react/pull/32663) by [@mofeiZ](https://github.com/mofeiZ)
+* Optimize components declared with arrow function and implicit return and `compilationMode: 'infer'` [#31792](https://github.com/facebook/react/pull/31792) by [@dimaMachina](https://github.com/dimaMachina)
+* Validate static components [#32683](https://github.com/facebook/react/pull/32683) by [@josephsavona](https://github.com/josephsavona)
+* Hoist dependencies from functions more conservatively [#32616](https://github.com/facebook/react/pull/32616) by [@mofeiZ](https://github.com/mofeiZ)
+* Implement NumericLiteral as ObjectPropertyKey [#31791](https://github.com/facebook/react/pull/31791) by [@dimaMachina](https://github.com/dimaMachina)
+* Avoid bailouts when inserting gating [#32598](https://github.com/facebook/react/pull/32598) by [@mofeiZ](https://github.com/mofeiZ)
+* Stop bailing out early for hoisted gated functions [#32597](https://github.com/facebook/react/pull/32597) by [@mofeiZ](https://github.com/mofeiZ)
+* Add shape for Array.from [#32522](https://github.com/facebook/react/pull/32522) by [@mofeiZ](https://github.com/mofeiZ)
+* Patch array and argument spread mutability [#32521](https://github.com/facebook/react/pull/32521) by [@mofeiZ](https://github.com/mofeiZ)
+* Make CompilerError compatible with reflection [#32539](https://github.com/facebook/react/pull/32539) by [@poteto](https://github.com/poteto)
+* Add simple walltime measurement [#32331](https://github.com/facebook/react/pull/32331) by [@poteto](https://github.com/poteto)
+* Improve error messages for unhandled terminal and instruction kinds [#32324](https://github.com/facebook/react/pull/32324) by [@inottn](https://github.com/inottn)
+* Handle TSInstantiationExpression in lowerExpression [#32302](https://github.com/facebook/react/pull/32302) by [@inottn](https://github.com/inottn)
+* Fix invalid Array.map type [#32095](https://github.com/facebook/react/pull/32095) by [@mofeiZ](https://github.com/mofeiZ)
+* Patch for JSX escape sequences in @babel/generator [#32131](https://github.com/facebook/react/pull/32131) by [@mofeiZ](https://github.com/mofeiZ)
+* `JSXText` emits incorrect with bracket [#32138](https://github.com/facebook/react/pull/32138) by [@himself65](https://github.com/himself65)
+* Validation against calling impure functions [#31960](https://github.com/facebook/react/pull/31960) by [@josephsavona](https://github.com/josephsavona)
+* Always target node [#32091](https://github.com/facebook/react/pull/32091) by [@poteto](https://github.com/poteto)
+* Patch compilationMode:infer object method edge case [#32055](https://github.com/facebook/react/pull/32055) by [@mofeiZ](https://github.com/mofeiZ)
+* Generate ts defs [#31994](https://github.com/facebook/react/pull/31994) by [@poteto](https://github.com/poteto)
+* Relax react peer dep requirement [#31915](https://github.com/facebook/react/pull/31915) by [@poteto](https://github.com/poteto)
+* Allow type cast expressions with refs [#31871](https://github.com/facebook/react/pull/31871) by [@josephsavona](https://github.com/josephsavona)
+* Add shape for global Object.keys [#31583](https://github.com/facebook/react/pull/31583) by [@mofeiZ](https://github.com/mofeiZ)
+* Optimize method calls w props receiver [#31775](https://github.com/facebook/react/pull/31775) by [@josephsavona](https://github.com/josephsavona)
+* Fix dropped ref with spread props in InlineJsxTransform [#31726](https://github.com/facebook/react/pull/31726) by [@jackpope](https://github.com/jackpope)
+* Support for non-declatation for in/of iterators [#31710](https://github.com/facebook/react/pull/31710) by [@mvitousek](https://github.com/mvitousek)
+* Support for context variable loop iterators [#31709](https://github.com/facebook/react/pull/31709) by [@mvitousek](https://github.com/mvitousek)
+* Replace deprecated dependency in `eslint-plugin-react-compiler` [#31629](https://github.com/facebook/react/pull/31629) by [@rakleed](https://github.com/rakleed)
+* Support enableRefAsProp in jsx transform [#31558](https://github.com/facebook/react/pull/31558) by [@jackpope](https://github.com/jackpope)
+* Fix: ref.current now correctly reactive [#31521](https://github.com/facebook/react/pull/31521) by [@mofeiZ](https://github.com/mofeiZ)
+* Outline JSX with non-jsx children [#31442](https://github.com/facebook/react/pull/31442) by [@gsathya](https://github.com/gsathya)
+* Outline jsx with duplicate attributes [#31441](https://github.com/facebook/react/pull/31441) by [@gsathya](https://github.com/gsathya)
+* Store original and new prop names [#31440](https://github.com/facebook/react/pull/31440) by [@gsathya](https://github.com/gsathya)
+* Stabilize compiler output: sort deps and decls by name [#31362](https://github.com/facebook/react/pull/31362) by [@mofeiZ](https://github.com/mofeiZ)
+* Bugfix for hoistable deps for nested functions [#31345](https://github.com/facebook/react/pull/31345) by [@mofeiZ](https://github.com/mofeiZ)
+* Remove compiler runtime-compat fixture library [#31430](https://github.com/facebook/react/pull/31430) by [@poteto](https://github.com/poteto)
+* Wrap inline jsx transform codegen in conditional [#31267](https://github.com/facebook/react/pull/31267) by [@jackpope](https://github.com/jackpope)
+* Check if local identifier is a hook when resolving globals [#31384](https://github.com/facebook/react/pull/31384) by [@poteto](https://github.com/poteto)
+* Handle member expr as computed property [#31344](https://github.com/facebook/react/pull/31344) by [@gsathya](https://github.com/gsathya)
+* Fix to ref access check to ban ref?.current [#31360](https://github.com/facebook/react/pull/31360) by [@mvitousek](https://github.com/mvitousek)
+* InlineJSXTransform transforms jsx inside function expressions [#31282](https://github.com/facebook/react/pull/31282) by [@josephsavona](https://github.com/josephsavona)
+
+## Other
+* Add shebang to banner [#32225](https://github.com/facebook/react/pull/32225) by [@Jeremy-Hibiki](https://github.com/Jeremy-Hibiki)
+* remove terser from react-compiler-runtime build [#31326](https://github.com/facebook/react/pull/31326) by [@henryqdineen](https://github.com/henryqdineen)

compiler/README.md

@@ -0,0 +1,7 @@
+# React Compiler
+
+React Compiler is a compiler that optimizes React applications, ensuring that only the minimal parts of components and hooks will re-render when state changes. The compiler also validates that components and hooks follow the Rules of React.
+
+More information about the design and architecture of the compiler are covered in the [Design Goals](./docs/DESIGN_GOALS.md).
+
+More information about developing the compiler itself is covered in the [Development Guide](./docs/DEVELOPMENT_GUIDE.md).

compiler/apps/playground/.eslintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": "next/core-web-vitals"
+}

compiler/apps/playground/.gitignore

@@ -0,0 +1,45 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+/test-results
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+
+# external fonts
+public/fonts/Optimistic_Display_W_Lt.woff2
+public/fonts/Optimistic_Display_W_Md.woff2
+public/fonts/Optimistic_Display_W_Bd.woff2
+
+# vscode
+.vscode/*
+!.vscode/extensions.json

compiler/apps/playground/.vscode/extensions.json

@@ -0,0 +1,3 @@
+{
+  "recommendations": ["bradlc.vscode-tailwindcss", "heybourn.headwind"]
+}

compiler/apps/playground/README.md

@@ -0,0 +1,42 @@
+# React Compiler Playground
+
+An interactive playground to demonstrate, test, and have fun with React Compiler.
+
+## Setup
+
+```sh
+# Build React Compiler from source and install Playground dependencies.
+$ yarn
+
+# Or similarly
+$ npm install
+```
+
+## Development
+
+```sh
+# Start the local development server with
+$ yarn dev
+
+# Or
+$ npm run dev
+
+# Rerun the following (in a separate terminal window) when React Compiler
+# is changed locally to keep Playground in sync.
+$ yarn
+```
+
+## Testing
+```sh
+# Install playwright browser binaries
+$ npx playwright install --with-deps
+# Run tests
+$ yarn test
+```
+## Deployment
+
+This project has been deployed using Vercel. Vercel does the exact same thing as we would
+locally, by running `yarn` at the install step in the Playground directory to build
+React Compiler from source and [symlink](https://classic.yarnpkg.com/en/docs/cli/link) it as its dependency.
+This means that Playground is automatically deployed on every push and pull requests will reflect
+the behaviors of React Compiler of that commit.

compiler/apps/playground/__tests__/e2e/__snapshots__/page.spec.ts/01-user-output.txt

@@ -0,0 +1,14 @@
+import { c as _c } from "react/compiler-runtime";
+export default function TestComponent(t0) {
+  const $ = _c(2);
+  const { x } = t0;
+  let t1;
+  if ($[0] !== x) {
+    t1 = <Button>{x}</Button>;
+    $[0] = x;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  return t1;
+}

compiler/apps/playground/__tests__/e2e/__snapshots__/page.spec.ts/02-default-output.txt

@@ -0,0 +1,12 @@
+import { c as _c } from "react/compiler-runtime";
+export default function MyApp() {
+  const $ = _c(1);
+  let t0;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t0 = <div>Hello World</div>;
+    $[0] = t0;
+  } else {
+    t0 = $[0];
+  }
+  return t0;
+}

compiler/apps/playground/__tests__/e2e/__snapshots__/page.spec.ts/compilationMode-all-output.txt

@@ -0,0 +1,12 @@
+import { c as _c } from "react/compiler-runtime"; // @compilationMode:"all"
+function nonReactFn() {
+  const $ = _c(1);
+  let t0;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t0 = {};
+    $[0] = t0;
+  } else {
+    t0 = $[0];
+  }
+  return t0;
+}

compiler/apps/playground/__tests__/e2e/__snapshots__/page.spec.ts/compilationMode-infer-output.txt

@@ -0,0 +1,4 @@
+// @compilationMode:"infer"
+function nonReactFn() {
+  return {};
+}

compiler/apps/playground/__tests__/e2e/__snapshots__/page.spec.ts/default-config.txt

@@ -0,0 +1,5 @@
+import type { PluginOptions } from 
+'babel-plugin-react-compiler/dist';
+({
+  //compilationMode: "all"
+} satisfies PluginOptions);

compiler/apps/playground/__tests__/e2e/__snapshots__/page.spec.ts/disableMemoizationForDebugging-output.txt

@@ -0,0 +1,14 @@
+import { c as _c } from "react/compiler-runtime";
+export default function TestComponent(t0) {
+  const $ = _c(2);
+  const { x } = t0;
+  let t1;
+  if ($[0] !== x || true) {
+    t1 = <Button>{x}</Button>;
+    $[0] = x;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  return t1;
+}

compiler/apps/playground/__tests__/e2e/__snapshots__/page.spec.ts/function-scope-beats-module-scope-output.txt

@@ -0,0 +1,14 @@
+function TestComponent(t0) {
+  "use memo";
+  const $ = _c(2);
+  const { x } = t0;
+  let t1;
+  if ($[0] !== x) {
+    t1 = <Button>{x}</Button>;
+    $[0] = x;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  return t1;
+}

compiler/apps/playground/__tests__/e2e/__snapshots__/page.spec.ts/module-scope-use-memo-output.txt

@@ -0,0 +1,15 @@
+"use memo";
+import { c as _c } from "react/compiler-runtime";
+export default function TestComponent(t0) {
+  const $ = _c(2);
+  const { x } = t0;
+  let t1;
+  if ($[0] !== x) {
+    t1 = <Button>{x}</Button>;
+    $[0] = x;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  return t1;
+}

compiler/apps/playground/__tests__/e2e/__snapshots__/page.spec.ts/module-scope-use-no-memo-output.txt

@@ -0,0 +1,4 @@
+"use no memo";
+export default function TestComponent({ x }) {
+  return <Button>{x}</Button>;
+}

compiler/apps/playground/__tests__/e2e/__snapshots__/page.spec.ts/parse-flow-output.txt

@@ -0,0 +1,14 @@
+import { c as _c } from "react/compiler-runtime";
+function useFoo(propVal) {
+  const $ = _c(2);
+  const t0 = (propVal.baz: number);
+  let t1;
+  if ($[0] !== t0) {
+    t1 = <div>{t0}</div>;
+    $[0] = t0;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  return t1;
+}

compiler/apps/playground/__tests__/e2e/__snapshots__/page.spec.ts/parse-typescript-output.txt

@@ -0,0 +1,20 @@
+import { c as _c } from "react/compiler-runtime";
+function Foo() {
+  const $ = _c(2);
+  let t0;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t0 = foo();
+    $[0] = t0;
+  } else {
+    t0 = $[0];
+  }
+  const x = t0 as number;
+  let t1;
+  if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
+    t1 = <div>{x}</div>;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  return t1;
+}

compiler/apps/playground/__tests__/e2e/__snapshots__/page.spec.ts/todo-function-scope-does-not-beat-module-scope-output.txt

@@ -0,0 +1,5 @@
+"use no memo";
+function TestComponent({ x }) {
+  "use memo";
+  return <Button>{x}</Button>;
+}

compiler/apps/playground/__tests__/e2e/__snapshots__/page.spec.ts/use-memo-output.txt

@@ -0,0 +1,29 @@
+import { c as _c } from "react/compiler-runtime";
+function TestComponent(t0) {
+  "use memo";
+  const $ = _c(2);
+  const { x } = t0;
+  let t1;
+  if ($[0] !== x) {
+    t1 = <Button>{x}</Button>;
+    $[0] = x;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  return t1;
+}
+const TestComponent2 = (t0) => {
+  "use memo";
+  const $ = _c(2);
+  const { x } = t0;
+  let t1;
+  if ($[0] !== x) {
+    t1 = <Button>{x}</Button>;
+    $[0] = x;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  return t1;
+};

compiler/apps/playground/__tests__/e2e/__snapshots__/page.spec.ts/use-no-memo-output.txt

@@ -0,0 +1,8 @@
+const TestComponent = function () {
+  "use no memo";
+  return <Button>{x}</Button>;
+};
+const TestComponent2 = ({ x }) => {
+  "use no memo";
+  return <Button>{x}</Button>;
+};

compiler/apps/playground/__tests__/e2e/page.spec.ts

@@ -0,0 +1,374 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import {expect, test, type Page} from '@playwright/test';
+import {encodeStore, type Store} from '../../lib/stores';
+import {defaultConfig} from '../../lib/defaultStore';
+import {format} from 'prettier';
+
+function isMonacoLoaded(): boolean {
+  return (
+    typeof window['MonacoEnvironment'] !== 'undefined' &&
+    window['__MONACO_LOADED__'] === true
+  );
+}
+
+function formatPrint(data: Array<string>): Promise<string> {
+  return format(data.join(''), {parser: 'babel'});
+}
+
+async function expandConfigs(page: Page): Promise<void> {
+  const expandButton = page.locator('[title="Expand config editor"]');
+  await expandButton.click();
+  await page.waitForSelector('.monaco-editor-config', {state: 'visible'});
+}
+
+const TEST_SOURCE = `export default function TestComponent({ x }) {
+  return <Button>{x}</Button>;
+}`;
+
+const TEST_CASE_INPUTS = [
+  {
+    name: 'module-scope-use-memo',
+    input: `
+'use memo';
+export default function TestComponent({ x }) {
+  return <Button>{x}</Button>;
+}`,
+  },
+  {
+    name: 'module-scope-use-no-memo',
+    input: `
+'use no memo';
+export default function TestComponent({ x }) {
+  return <Button>{x}</Button>;
+}`,
+  },
+  {
+    name: 'use-memo',
+    input: `
+function TestComponent({ x }) {
+  'use memo';
+  return <Button>{x}</Button>;
+}
+const TestComponent2 = ({ x }) => {
+  'use memo';
+  return <Button>{x}</Button>;
+};`,
+  },
+  {
+    name: 'use-no-memo',
+    input: `
+const TestComponent = function() {
+  'use no memo';
+  return <Button>{x}</Button>;
+};
+const TestComponent2 = ({ x }) => {
+  'use no memo';
+  return <Button>{x}</Button>;
+};`,
+  },
+  {
+    name: 'todo-function-scope-does-not-beat-module-scope',
+    input: `
+'use no memo';
+function TestComponent({ x }) {
+  'use memo';
+  return <Button>{x}</Button>;
+}`,
+  },
+  {
+    name: 'parse-typescript',
+    input: `
+function Foo() {
+  const x = foo() as number;
+  return <div>{x}</div>;
+}
+`,
+    noFormat: true,
+  },
+  {
+    name: 'parse-flow',
+    input: `
+// @flow
+function useFoo(propVal: {+baz: number}) {
+  return <div>{(propVal.baz as number)}</div>;
+}
+    `,
+    noFormat: true,
+  },
+  {
+    name: 'compilationMode-infer',
+    input: `// @compilationMode:"infer"
+function nonReactFn() {
+  return {};
+}
+    `,
+    noFormat: true,
+  },
+  {
+    name: 'compilationMode-all',
+    input: `// @compilationMode:"all"
+function nonReactFn() {
+  return {};
+}
+    `,
+    noFormat: true,
+  },
+];
+
+test('editor should open successfully', async ({page}) => {
+  await page.goto(`/`, {waitUntil: 'networkidle'});
+  await page.waitForFunction(isMonacoLoaded);
+  await page.screenshot({
+    fullPage: true,
+    path: 'test-results/00-fresh-page.png',
+  });
+});
+
+test('editor should compile from hash successfully', async ({page}) => {
+  const store: Store = {
+    source: TEST_SOURCE,
+    config: defaultConfig,
+    showInternals: false,
+  };
+  const hash = encodeStore(store);
+  await page.goto(`/#${hash}`, {waitUntil: 'networkidle'});
+  await page.waitForFunction(isMonacoLoaded);
+
+  // User input from hash compiles
+  await page.screenshot({
+    fullPage: true,
+    path: 'test-results/01-compiles-from-hash.png',
+  });
+  const text =
+    (await page.locator('.monaco-editor-output').allInnerTexts()) ?? [];
+  const output = await formatPrint(text);
+
+  expect(output).not.toEqual('');
+  expect(output).toMatchSnapshot('01-user-output.txt');
+});
+
+test('reset button works', async ({page}) => {
+  const store: Store = {
+    source: TEST_SOURCE,
+    config: defaultConfig,
+    showInternals: false,
+  };
+  const hash = encodeStore(store);
+  await page.goto(`/#${hash}`, {waitUntil: 'networkidle'});
+  await page.waitForFunction(isMonacoLoaded);
+
+  // Reset button works
+  page.on('dialog', dialog => dialog.accept());
+  await page.getByRole('button', {name: 'Reset'}).click();
+  await expandConfigs(page);
+
+  await page.screenshot({
+    fullPage: true,
+    path: 'test-results/02-reset-button-works.png',
+  });
+  const text =
+    (await page.locator('.monaco-editor-output').allInnerTexts()) ?? [];
+  const output = await formatPrint(text);
+
+  const configText =
+    (await page.locator('.monaco-editor-config').allInnerTexts()) ?? [];
+  const configOutput = configText.join('');
+
+  expect(output).not.toEqual('');
+  expect(output).toMatchSnapshot('02-default-output.txt');
+  expect(configOutput).not.toEqual('');
+  expect(configOutput).toMatchSnapshot('default-config.txt');
+});
+
+test('defaults load when only source is in Store', async ({page}) => {
+  // Test for backwards compatibility
+  const partial = {
+    source: TEST_SOURCE,
+  };
+  const hash = encodeStore(partial as Store);
+  await page.goto(`/#${hash}`, {waitUntil: 'networkidle'});
+  await page.waitForFunction(isMonacoLoaded);
+  await expandConfigs(page);
+
+  await page.screenshot({
+    fullPage: true,
+    path: 'test-results/03-missing-defaults.png',
+  });
+
+  // Config editor has default config
+  const configText =
+    (await page.locator('.monaco-editor-config').allInnerTexts()) ?? [];
+  const configOutput = configText.join('');
+
+  expect(configOutput).not.toEqual('');
+  expect(configOutput).toMatchSnapshot('default-config.txt');
+
+  const checkbox = page.locator('label.show-internals');
+  await expect(checkbox).not.toBeChecked();
+  const ssaTab = page.locator('text=SSA');
+  await expect(ssaTab).not.toBeVisible();
+});
+
+test('show internals button toggles correctly', async ({page}) => {
+  await page.goto(`/`, {waitUntil: 'networkidle'});
+  await page.waitForFunction(isMonacoLoaded);
+
+  // show internals should be off
+  const checkbox = page.locator('label.show-internals');
+  await checkbox.click();
+
+  await page.screenshot({
+    fullPage: true,
+    path: 'test-results/04-show-internals-on.png',
+  });
+
+  await expect(checkbox).toBeChecked();
+
+  const ssaTab = page.locator('text=SSA');
+  await expect(ssaTab).toBeVisible();
+});
+
+test('error is displayed when config has syntax error', async ({page}) => {
+  const store: Store = {
+    source: TEST_SOURCE,
+    config: `compilationMode: `,
+    showInternals: false,
+  };
+  const hash = encodeStore(store);
+  await page.goto(`/#${hash}`, {waitUntil: 'networkidle'});
+  await page.waitForFunction(isMonacoLoaded);
+  await expandConfigs(page);
+  await page.screenshot({
+    fullPage: true,
+    path: 'test-results/05-config-syntax-error.png',
+  });
+
+  const text =
+    (await page.locator('.monaco-editor-output').allInnerTexts()) ?? [];
+  const output = text.join('');
+
+  // Remove hidden chars
+  expect(output.replace(/\s+/g, ' ')).toContain('Invalid override format');
+});
+
+test('error is displayed when config has validation error', async ({page}) => {
+  const store: Store = {
+    source: TEST_SOURCE,
+    config: `import type { PluginOptions } from 'babel-plugin-react-compiler/dist';
+
+({
+  compilationMode: "123"
+} satisfies PluginOptions);`,
+    showInternals: false,
+  };
+  const hash = encodeStore(store);
+  await page.goto(`/#${hash}`, {waitUntil: 'networkidle'});
+  await page.waitForFunction(isMonacoLoaded);
+  await expandConfigs(page);
+  await page.screenshot({
+    fullPage: true,
+    path: 'test-results/06-config-validation-error.png',
+  });
+
+  const text =
+    (await page.locator('.monaco-editor-output').allInnerTexts()) ?? [];
+  const output = text.join('');
+
+  expect(output.replace(/\s+/g, ' ')).toContain('Unexpected compilationMode');
+});
+
+test('disableMemoizationForDebugging flag works as expected', async ({
+  page,
+}) => {
+  const store: Store = {
+    source: TEST_SOURCE,
+    config: `import type { PluginOptions } from 'babel-plugin-react-compiler/dist';
+
+({
+  environment: {
+    disableMemoizationForDebugging: true
+  }
+} satisfies PluginOptions);`,
+    showInternals: false,
+  };
+  const hash = encodeStore(store);
+  await page.goto(`/#${hash}`, {waitUntil: 'networkidle'});
+  await page.waitForFunction(isMonacoLoaded);
+  await expandConfigs(page);
+  await page.screenshot({
+    fullPage: true,
+    path: 'test-results/07-config-disableMemoizationForDebugging-flag.png',
+  });
+
+  const text =
+    (await page.locator('.monaco-editor-output').allInnerTexts()) ?? [];
+  const output = await formatPrint(text);
+
+  expect(output).not.toEqual('');
+  expect(output).toMatchSnapshot('disableMemoizationForDebugging-output.txt');
+});
+
+test('error is displayed when source has syntax error', async ({page}) => {
+  const syntaxErrorSource = `function TestComponent(props) {
+  const oops = props.
+  return (
+    <>{oops}</>
+  );
+}`;
+  const store: Store = {
+    source: syntaxErrorSource,
+    config: defaultConfig,
+    showInternals: false,
+  };
+  const hash = encodeStore(store);
+  await page.goto(`/#${hash}`);
+  await page.waitForFunction(isMonacoLoaded);
+  await expandConfigs(page);
+  await page.screenshot({
+    fullPage: true,
+    path: 'test-results/08-source-syntax-error.png',
+  });
+
+  const text =
+    (await page.locator('.monaco-editor-output').allInnerTexts()) ?? [];
+  const output = text.join('');
+
+  expect(output.replace(/\s+/g, ' ')).toContain(
+    'Expected identifier to be defined before being used',
+  );
+});
+
+TEST_CASE_INPUTS.forEach((t, idx) =>
+  test(`playground compiles: ${t.name}`, async ({page}) => {
+    const store: Store = {
+      source: t.input,
+      config: defaultConfig,
+      showInternals: false,
+    };
+    const hash = encodeStore(store);
+    await page.goto(`/#${hash}`, {waitUntil: 'networkidle'});
+    await page.waitForFunction(isMonacoLoaded);
+    await page.screenshot({
+      fullPage: true,
+      path: `test-results/08-0${idx}-${t.name}.png`,
+    });
+
+    const text =
+      (await page.locator('.monaco-editor-output').allInnerTexts()) ?? [];
+    let output: string;
+    if (t.noFormat) {
+      output = text.join('');
+    } else {
+      output = await formatPrint(text);
+    }
+
+    expect(output).not.toEqual('');
+    expect(output).toMatchSnapshot(`${t.name}-output.txt`);
+  }),
+);

compiler/apps/playground/app/layout.tsx

@@ -0,0 +1,47 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import '../styles/globals.css';
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}): JSX.Element {
+  'use no memo';
+  return (
+    <html lang="en">
+      <head>
+        <title>
+          {process.env.NODE_ENV === 'development'
+            ? '[DEV] React Compiler Playground'
+            : 'React Compiler Playground'}
+        </title>
+        <meta
+          name="viewport"
+          content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"></meta>
+        <link rel="icon" href="/favicon.ico" />
+        <link rel="manifest" href="/site.webmanifest" />
+        <link
+          rel="preload"
+          href="/fonts/Source-Code-Pro-Regular.woff2"
+          as="font"
+          type="font/woff2"
+          crossOrigin="anonymous"
+        />
+        <link
+          rel="preload"
+          href="/fonts/Optimistic_Display_W_Lt.woff2"
+          as="font"
+          type="font/woff2"
+          crossOrigin="anonymous"
+        />
+      </head>
+      <body className="font-sans h-screen overflow-y-hidden">{children}</body>
+    </html>
+  );
+}

compiler/apps/playground/app/page.tsx

@@ -0,0 +1,26 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+'use client';
+
+import {SnackbarProvider} from 'notistack';
+import {Editor, Header, StoreProvider} from '../components';
+import MessageSnackbar from '../components/Message';
+
+export default function Page(): JSX.Element {
+  return (
+    <StoreProvider>
+      <SnackbarProvider
+        preventDuplicate
+        maxSnack={10}
+        Components={{message: MessageSnackbar}}>
+        <Header />
+        <Editor />
+      </SnackbarProvider>
+    </StoreProvider>
+  );
+}

compiler/apps/playground/colors.js

@@ -0,0 +1,96 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/**
+ * Sync from <https://github.com/reactjs/reactjs.org/blob/main/beta/colors.js>.
+ */
+
+module.exports = {
+  // Text colors
+  primary: '#23272F', // gray-90
+  'primary-dark': '#F6F7F9', // gray-5
+  secondary: '#404756', // gray-70
+  'secondary-dark': '#EBECF0', // gray-10
+  link: '#087EA4', // blue-50
+  'link-dark': '#149ECA', // blue-40
+  syntax: '#EBECF0', // gray-10
+  wash: '#FFFFFF',
+  'wash-dark': '#23272F', // gray-90
+  card: '#F6F7F9', // gray-05
+  'card-dark': '#343A46', // gray-80
+  highlight: '#E6F7FF', // blue-10
+  'highlight-dark': 'rgba(88,175,223,.1)',
+  border: '#EBECF0', // gray-10
+  'border-dark': '#343A46', // gray-80
+  'secondary-button': '#EBECF0', // gray-10
+  'secondary-button-dark': '#404756', // gray-70
+
+  // Gray
+  'gray-95': '#16181D',
+  'gray-90': '#23272F',
+  'gray-80': '#343A46',
+  'gray-70': '#404756',
+  'gray-60': '#4E5769',
+  'gray-50': '#5E687E', // unused
+  'gray-40': '#78839B',
+  'gray-30': '#99A1B3',
+  'gray-20': '#BCC1CD',
+  'gray-10': '#EBECF0',
+  'gray-5': '#F6F7F9',
+
+  // Blue
+  'blue-60': '#045975',
+  'blue-50': '#087EA4',
+  'blue-40': '#149ECA', // Brand Blue
+  'blue-30': '#58C4DC', // unused
+  'blue-20': '#ABE2ED',
+  'blue-10': '#E6F7FF', // todo: doesn't match illustrations
+  'blue-5': '#E6F6FA',
+
+  // Yellow
+  'yellow-60': '#B65700',
+  'yellow-50': '#C76A15',
+  'yellow-40': '#DB7D27', // unused
+  'yellow-30': '#FABD62', // unused
+  'yellow-20': '#FCDEB0', // unused
+  'yellow-10': '#FDE7C7',
+  'yellow-5': '#FEF5E7',
+
+  // Purple
+  'purple-60': '#2B3491', // unused
+  'purple-50': '#575FB7',
+  'purple-40': '#6B75DB',
+  'purple-30': '#8891EC',
+  'purple-20': '#C3C8F5', // unused
+  'purple-10': '#E7E9FB',
+  'purple-5': '#F3F4FD',
+
+  // Green
+  'green-60': '#2B6E62',
+  'green-50': '#388F7F',
+  'green-40': '#44AC99',
+  'green-30': '#7FCCBF',
+  'green-20': '#ABDED5',
+  'green-10': '#E5F5F2',
+  'green-5': '#F4FBF9',
+
+  // RED
+  'red-60': '#712D28',
+  'red-50': '#A6423A', // unused
+  'red-40': '#C1554D',
+  'red-30': '#D07D77',
+  'red-20': '#E5B7B3', // unused
+  'red-10': '#F2DBD9', // unused
+  'red-5': '#FAF1F0',
+
+  // MISC
+  'code-block': '#99a1b30f', // gray-30 @ 6%
+  'gradient-blue': '#58C4DC', // Only used for the landing gradient for now.
+  github: {
+    highlight: '#fffbdd',
+  },
+};

compiler/apps/playground/components/AccordionWindow.tsx

@@ -0,0 +1,126 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import {Resizable} from 're-resizable';
+import React, {
+  useId,
+  unstable_ViewTransition as ViewTransition,
+  unstable_addTransitionType as addTransitionType,
+  startTransition,
+} from 'react';
+import {EXPAND_ACCORDION_TRANSITION} from '../lib/transitionTypes';
+
+type TabsRecord = Map<string, React.ReactNode>;
+
+export default function AccordionWindow(props: {
+  defaultTab: string | null;
+  tabs: TabsRecord;
+  tabsOpen: Set<string>;
+  setTabsOpen: (newTab: Set<string>) => void;
+  changedPasses: Set<string>;
+}): React.ReactElement {
+  return (
+    <div className="flex-1 min-w-[550px] sm:min-w-0">
+      <div className="flex flex-row h-full">
+        {Array.from(props.tabs.keys()).map(name => {
+          return (
+            <AccordionWindowItem
+              name={name}
+              key={name}
+              tabs={props.tabs}
+              tabsOpen={props.tabsOpen}
+              setTabsOpen={props.setTabsOpen}
+              hasChanged={props.changedPasses.has(name)}
+            />
+          );
+        })}
+      </div>
+    </div>
+  );
+}
+
+function AccordionWindowItem({
+  name,
+  tabs,
+  tabsOpen,
+  setTabsOpen,
+  hasChanged,
+}: {
+  name: string;
+  tabs: TabsRecord;
+  tabsOpen: Set<string>;
+  setTabsOpen: (newTab: Set<string>) => void;
+  hasChanged: boolean;
+  isFailure: boolean;
+}): React.ReactElement {
+  const id = useId();
+  const isShow = tabsOpen.has(name);
+
+  const transitionName = `accordion-window-item-${id}`;
+
+  const toggleTabs = (): void => {
+    startTransition(() => {
+      addTransitionType(EXPAND_ACCORDION_TRANSITION);
+      const nextState = new Set(tabsOpen);
+      if (nextState.has(name)) {
+        nextState.delete(name);
+      } else {
+        nextState.add(name);
+      }
+      setTabsOpen(nextState);
+    });
+  };
+
+  // Replace spaces with non-breaking spaces
+  const displayName = name.replace(/ /g, '\u00A0');
+
+  return (
+    <div key={name} className="flex flex-row">
+      {isShow ? (
+        <ViewTransition
+          name={transitionName}
+          update={{
+            [EXPAND_ACCORDION_TRANSITION]: 'expand-accordion',
+            default: 'none',
+          }}>
+          <Resizable className="border-r" minWidth={550} enable={{right: true}}>
+            <h2
+              title="Minimize tab"
+              aria-label="Minimize tab"
+              onClick={toggleTabs}
+              className={`p-4 duration-150 ease-in border-b cursor-pointer border-grey-200 ${
+                hasChanged ? 'font-bold' : 'font-light'
+              } text-secondary hover:text-link`}>
+              - {displayName}
+            </h2>
+            {tabs.get(name) ?? <div>No output for {name}</div>}
+          </Resizable>
+        </ViewTransition>
+      ) : (
+        <ViewTransition
+          name={transitionName}
+          update={{
+            [EXPAND_ACCORDION_TRANSITION]: 'expand-accordion',
+            default: 'none',
+          }}>
+          <div className="relative items-center h-full px-1 py-6 align-middle border-r border-grey-200">
+            <button
+              title={`Expand compiler tab: ${name}`}
+              aria-label={`Expand compiler tab: ${name}`}
+              style={{transform: 'rotate(90deg) translate(-50%)'}}
+              onClick={toggleTabs}
+              className={`flex-grow-0 w-5 transition-colors duration-150 ease-in ${
+                hasChanged ? 'font-bold' : 'font-light'
+              } text-secondary hover:text-link`}>
+              {displayName}
+            </button>
+          </div>
+        </ViewTransition>
+      )}
+    </div>
+  );
+}

compiler/apps/playground/components/Editor/ConfigEditor.tsx

@@ -0,0 +1,210 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import MonacoEditor, {loader, type Monaco} from '@monaco-editor/react';
+import type {editor} from 'monaco-editor';
+import * as monaco from 'monaco-editor';
+import React, {
+  useState,
+  useRef,
+  unstable_ViewTransition as ViewTransition,
+  unstable_addTransitionType as addTransitionType,
+  startTransition,
+  Activity,
+} from 'react';
+import {Resizable} from 're-resizable';
+import {useStore, useStoreDispatch} from '../StoreContext';
+import {monacoConfigOptions} from './monacoOptions';
+import {IconChevron} from '../Icons/IconChevron';
+import {CONFIG_PANEL_TRANSITION} from '../../lib/transitionTypes';
+
+// @ts-expect-error - webpack asset/source loader handles .d.ts files as strings
+import compilerTypeDefs from 'babel-plugin-react-compiler/dist/index.d.ts';
+
+loader.config({monaco});
+
+export default function ConfigEditor({
+  formattedAppliedConfig,
+}: {
+  formattedAppliedConfig: string;
+}): React.ReactElement {
+  const [isExpanded, setIsExpanded] = useState(false);
+
+  return (
+    <>
+      <Activity mode={isExpanded ? 'visible' : 'hidden'}>
+        <ExpandedEditor
+          onToggle={() => {
+            startTransition(() => {
+              addTransitionType(CONFIG_PANEL_TRANSITION);
+              setIsExpanded(false);
+            });
+          }}
+          formattedAppliedConfig={formattedAppliedConfig}
+        />
+      </Activity>
+      <Activity mode={isExpanded ? 'hidden' : 'visible'}>
+        <CollapsedEditor
+          onToggle={() => {
+            startTransition(() => {
+              addTransitionType(CONFIG_PANEL_TRANSITION);
+              setIsExpanded(true);
+            });
+          }}
+        />
+      </Activity>
+    </>
+  );
+}
+
+function ExpandedEditor({
+  onToggle,
+  formattedAppliedConfig,
+}: {
+  onToggle: (expanded: boolean) => void;
+  formattedAppliedConfig: string;
+}): React.ReactElement {
+  const store = useStore();
+  const dispatchStore = useStoreDispatch();
+  const debounceTimerRef = useRef<NodeJS.Timeout | null>(null);
+
+  const handleChange: (value: string | undefined) => void = (
+    value: string | undefined,
+  ) => {
+    if (value === undefined) return;
+
+    if (debounceTimerRef.current) {
+      clearTimeout(debounceTimerRef.current);
+    }
+
+    debounceTimerRef.current = setTimeout(() => {
+      dispatchStore({
+        type: 'updateConfig',
+        payload: {
+          config: value,
+        },
+      });
+    }, 500); // 500ms debounce delay
+  };
+
+  const handleMount: (
+    _: editor.IStandaloneCodeEditor,
+    monaco: Monaco,
+  ) => void = (_, monaco) => {
+    // Add the babel-plugin-react-compiler type definitions to Monaco
+    monaco.languages.typescript.typescriptDefaults.addExtraLib(
+      //@ts-expect-error - compilerTypeDefs is a string
+      compilerTypeDefs,
+      'file:///node_modules/babel-plugin-react-compiler/dist/index.d.ts',
+    );
+    monaco.languages.typescript.typescriptDefaults.setCompilerOptions({
+      target: monaco.languages.typescript.ScriptTarget.Latest,
+      allowNonTsExtensions: true,
+      moduleResolution: monaco.languages.typescript.ModuleResolutionKind.NodeJs,
+      module: monaco.languages.typescript.ModuleKind.ESNext,
+      noEmit: true,
+      strict: false,
+      esModuleInterop: true,
+      allowSyntheticDefaultImports: true,
+      jsx: monaco.languages.typescript.JsxEmit.React,
+    });
+  };
+
+  return (
+    <ViewTransition
+      enter={{[CONFIG_PANEL_TRANSITION]: 'slide-in', default: 'none'}}
+      exit={{[CONFIG_PANEL_TRANSITION]: 'slide-out', default: 'none'}}>
+      <Resizable
+        minWidth={300}
+        maxWidth={600}
+        defaultSize={{width: 350}}
+        enable={{right: true, bottom: false}}>
+        <div className="bg-blue-10 relative h-full flex flex-col !h-[calc(100vh_-_3.5rem)] border border-gray-300">
+          <div
+            className="absolute w-8 h-16 bg-blue-10 rounded-r-full flex items-center justify-center z-[2] cursor-pointer border border-l-0 border-gray-300"
+            title="Minimize config editor"
+            onClick={onToggle}
+            style={{
+              top: '50%',
+              marginTop: '-32px',
+              right: '-32px',
+              borderTopLeftRadius: 0,
+              borderBottomLeftRadius: 0,
+            }}>
+            <IconChevron displayDirection="left" className="text-blue-50" />
+          </div>
+
+          <div className="flex-1 flex flex-col m-2 mb-2">
+            <div className="pb-2">
+              <h2 className="inline-block text-blue-50 py-1.5 px-1.5 xs:px-3 sm:px-4 text-sm">
+                Config Overrides
+              </h2>
+            </div>
+            <div className="flex-1 border border-gray-300">
+              <MonacoEditor
+                path={'config.ts'}
+                language={'typescript'}
+                value={store.config}
+                onMount={handleMount}
+                onChange={handleChange}
+                loading={''}
+                className="monaco-editor-config"
+                options={monacoConfigOptions}
+              />
+            </div>
+          </div>
+          <div className="flex-1 flex flex-col m-2">
+            <div className="pb-2">
+              <h2 className="inline-block text-blue-50 py-1.5 px-1.5 xs:px-3 sm:px-4 text-sm">
+                Applied Configs
+              </h2>
+            </div>
+            <div className="flex-1 border border-gray-300">
+              <MonacoEditor
+                path={'applied-config.js'}
+                language={'javascript'}
+                value={formattedAppliedConfig}
+                loading={''}
+                className="monaco-editor-applied-config"
+                options={{
+                  ...monacoConfigOptions,
+                  readOnly: true,
+                }}
+              />
+            </div>
+          </div>
+        </div>
+      </Resizable>
+    </ViewTransition>
+  );
+}
+
+function CollapsedEditor({
+  onToggle,
+}: {
+  onToggle: () => void;
+}): React.ReactElement {
+  return (
+    <div
+      className="w-4 !h-[calc(100vh_-_3.5rem)]"
+      style={{position: 'relative'}}>
+      <div
+        className="absolute w-10 h-16 bg-blue-10 hover:translate-x-2 transition-transform rounded-r-full flex items-center justify-center z-[2] cursor-pointer border border-gray-300"
+        title="Expand config editor"
+        onClick={onToggle}
+        style={{
+          top: '50%',
+          marginTop: '-32px',
+          left: '-8px',
+          borderTopLeftRadius: 0,
+          borderBottomLeftRadius: 0,
+        }}>
+        <IconChevron displayDirection="right" className="text-blue-50" />
+      </div>
+    </div>
+  );
+}

compiler/apps/playground/components/Editor/EditorImpl.tsx

@@ -0,0 +1,69 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import {
+  CompilerErrorDetail,
+  CompilerDiagnostic,
+} from 'babel-plugin-react-compiler';
+import {useDeferredValue, useMemo, useState} from 'react';
+import {useStore} from '../StoreContext';
+import ConfigEditor from './ConfigEditor';
+import Input from './Input';
+import {CompilerOutput, default as Output} from './Output';
+import {compile} from '../../lib/compilation';
+import prettyFormat from 'pretty-format';
+
+export default function Editor(): JSX.Element {
+  const store = useStore();
+  const deferredStore = useDeferredValue(store);
+  const [compilerOutput, language, appliedOptions] = useMemo(
+    () => compile(deferredStore.source, 'compiler', deferredStore.config),
+    [deferredStore.source, deferredStore.config],
+  );
+  const [linterOutput] = useMemo(
+    () => compile(deferredStore.source, 'linter', deferredStore.config),
+    [deferredStore.source, deferredStore.config],
+  );
+  const [formattedAppliedConfig, setFormattedAppliedConfig] = useState('');
+
+  let mergedOutput: CompilerOutput;
+  let errors: Array<CompilerErrorDetail | CompilerDiagnostic>;
+  if (compilerOutput.kind === 'ok') {
+    errors = linterOutput.kind === 'ok' ? [] : linterOutput.error.details;
+    mergedOutput = {
+      ...compilerOutput,
+      errors,
+    };
+  } else {
+    mergedOutput = compilerOutput;
+    errors = compilerOutput.error.details;
+  }
+
+  if (appliedOptions) {
+    const formatted = prettyFormat(appliedOptions, {
+      printFunctionName: false,
+      printBasicPrototype: false,
+    });
+    if (formatted !== formattedAppliedConfig) {
+      setFormattedAppliedConfig(formatted);
+    }
+  }
+
+  return (
+    <>
+      <div className="relative flex top-14">
+        <div className="flex-shrink-0">
+          <ConfigEditor formattedAppliedConfig={formattedAppliedConfig} />
+        </div>
+        <div className="flex flex-1 min-w-0">
+          <Input language={language} errors={errors} />
+          <Output store={deferredStore} compilerOutput={mergedOutput} />
+        </div>
+      </div>
+    </>
+  );
+}

compiler/apps/playground/components/Editor/Input.tsx

@@ -0,0 +1,180 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import MonacoEditor, {loader, type Monaco} from '@monaco-editor/react';
+import {
+  CompilerErrorDetail,
+  CompilerDiagnostic,
+} from 'babel-plugin-react-compiler';
+import invariant from 'invariant';
+import type {editor} from 'monaco-editor';
+import * as monaco from 'monaco-editor';
+import {
+  useEffect,
+  useState,
+  unstable_ViewTransition as ViewTransition,
+} from 'react';
+import {renderReactCompilerMarkers} from '../../lib/reactCompilerMonacoDiagnostics';
+import {useStore, useStoreDispatch} from '../StoreContext';
+import TabbedWindow from '../TabbedWindow';
+import {monacoOptions} from './monacoOptions';
+import {CONFIG_PANEL_TRANSITION} from '../../lib/transitionTypes';
+
+// @ts-expect-error TODO: Make TS recognize .d.ts files, in addition to loading them with webpack.
+import React$Types from '../../node_modules/@types/react/index.d.ts';
+
+loader.config({monaco});
+
+type Props = {
+  errors: Array<CompilerErrorDetail | CompilerDiagnostic>;
+  language: 'flow' | 'typescript';
+};
+
+export default function Input({errors, language}: Props): JSX.Element {
+  const [monaco, setMonaco] = useState<Monaco | null>(null);
+  const store = useStore();
+  const dispatchStore = useStoreDispatch();
+
+  // Set tab width to 2 spaces for the selected input file.
+  useEffect(() => {
+    if (!monaco) return;
+    const uri = monaco.Uri.parse(`file:///index.js`);
+    const model = monaco.editor.getModel(uri);
+    invariant(model, 'Model must exist for the selected input file.');
+    renderReactCompilerMarkers({
+      monaco,
+      model,
+      details: errors,
+      source: store.source,
+    });
+  }, [monaco, errors, store.source]);
+
+  useEffect(() => {
+    /**
+     * Ignore "can only be used in TypeScript files." errors, since
+     * we want to support syntax highlighting for Flow (*.js) files
+     * and Flow is not a built-in language.
+     */
+    if (!monaco) return;
+    monaco.languages.typescript.javascriptDefaults.setDiagnosticsOptions({
+      diagnosticCodesToIgnore: [
+        8002,
+        8003,
+        8004,
+        8005,
+        8006,
+        8008,
+        8009,
+        8010,
+        8011,
+        8012,
+        8013,
+        ...(language === 'flow'
+          ? [7028 /* unused label */, 6133 /* var declared but not read */]
+          : []),
+      ],
+      noSemanticValidation: true,
+      // Monaco can't validate Flow component syntax
+      noSyntaxValidation: language === 'flow',
+    });
+  }, [monaco, language]);
+
+  const handleChange: (value: string | undefined) => void = async value => {
+    if (!value) return;
+
+    dispatchStore({
+      type: 'updateSource',
+      payload: {
+        source: value,
+      },
+    });
+  };
+
+  const handleMount: (
+    _: editor.IStandaloneCodeEditor,
+    monaco: Monaco,
+  ) => void = (_, monaco) => {
+    if (typeof window !== 'undefined') {
+      window['__MONACO_LOADED__'] = true;
+    }
+    setMonaco(monaco);
+
+    const tscOptions = {
+      allowNonTsExtensions: true,
+      target: monaco.languages.typescript.ScriptTarget.ES2015,
+      moduleResolution: monaco.languages.typescript.ModuleResolutionKind.NodeJs,
+      jsx: monaco.languages.typescript.JsxEmit.Preserve,
+      typeRoots: ['node_modules/@types'],
+      allowSyntheticDefaultImports: true,
+    };
+    monaco.languages.typescript.javascriptDefaults.setCompilerOptions(
+      tscOptions,
+    );
+    monaco.languages.typescript.typescriptDefaults.setCompilerOptions({
+      ...tscOptions,
+      checkJs: true,
+      allowJs: true,
+    });
+
+    // Add React type declarations to Monaco
+    const reactLib = [
+      React$Types,
+      'file:///node_modules/@types/react/index.d.ts',
+    ] as [any, string];
+    monaco.languages.typescript.javascriptDefaults.addExtraLib(...reactLib);
+    monaco.languages.typescript.typescriptDefaults.addExtraLib(...reactLib);
+
+    /**
+     * Remeasure the font in case the custom font is loaded only after
+     * Monaco Editor is mounted.
+     * N.B. that this applies also to the output editor as it seems
+     * Monaco Editor instances share the same font config.
+     */
+    document.fonts.ready.then(() => {
+      monaco.editor.remeasureFonts();
+    });
+  };
+
+  const editorContent = (
+    <MonacoEditor
+      path={'index.js'}
+      /**
+       * .js and .jsx files are specified to be TS so that Monaco can actually
+       * check their syntax using its TS language service. They are still JS files
+       * due to their extensions, so TS language features don't work.
+       */
+      language={'javascript'}
+      value={store.source}
+      onMount={handleMount}
+      onChange={handleChange}
+      className="monaco-editor-input"
+      options={monacoOptions}
+      loading={''}
+    />
+  );
+
+  const tabs = new Map([['Input', editorContent]]);
+  const [activeTab, setActiveTab] = useState('Input');
+
+  return (
+    <ViewTransition
+      update={{
+        [CONFIG_PANEL_TRANSITION]: 'container',
+        default: 'none',
+      }}>
+      <div className="flex-1 min-w-[550px] sm:min-w-0">
+        <div className="flex flex-col h-full !h-[calc(100vh_-_3.5rem)] border-r border-gray-200">
+          <TabbedWindow
+            tabs={tabs}
+            activeTab={activeTab}
+            onTabChange={setActiveTab}
+          />
+        </div>
+      </div>
+    </ViewTransition>
+  );
+}

compiler/apps/playground/components/Editor/Output.tsx

@@ -0,0 +1,422 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import {
+  CodeIcon,
+  DocumentAddIcon,
+  InformationCircleIcon,
+} from '@heroicons/react/outline';
+import MonacoEditor, {DiffEditor} from '@monaco-editor/react';
+import {
+  CompilerErrorDetail,
+  CompilerDiagnostic,
+  type CompilerError,
+} from 'babel-plugin-react-compiler';
+import parserBabel from 'prettier/plugins/babel';
+import * as prettierPluginEstree from 'prettier/plugins/estree';
+import * as prettier from 'prettier/standalone';
+import {type Store} from '../../lib/stores';
+import {
+  memo,
+  ReactNode,
+  use,
+  useState,
+  Suspense,
+  unstable_ViewTransition as ViewTransition,
+  unstable_addTransitionType as addTransitionType,
+  startTransition,
+} from 'react';
+import AccordionWindow from '../AccordionWindow';
+import TabbedWindow from '../TabbedWindow';
+import {monacoOptions} from './monacoOptions';
+import {BabelFileResult} from '@babel/core';
+import {
+  CONFIG_PANEL_TRANSITION,
+  TOGGLE_INTERNALS_TRANSITION,
+  EXPAND_ACCORDION_TRANSITION,
+} from '../../lib/transitionTypes';
+import {LRUCache} from 'lru-cache';
+
+const MemoizedOutput = memo(Output);
+
+export default MemoizedOutput;
+
+export const BASIC_OUTPUT_TAB_NAMES = ['Output', 'SourceMap'];
+
+const tabifyCache = new LRUCache<Store, Promise<Map<string, ReactNode>>>({
+  max: 5,
+});
+
+export type PrintedCompilerPipelineValue =
+  | {
+      kind: 'hir';
+      name: string;
+      fnName: string | null;
+      value: string;
+    }
+  | {kind: 'reactive'; name: string; fnName: string | null; value: string}
+  | {kind: 'debug'; name: string; fnName: string | null; value: string};
+
+export type CompilerTransformOutput = {
+  code: string;
+  sourceMaps: BabelFileResult['map'];
+  language: 'flow' | 'typescript';
+};
+export type CompilerOutput =
+  | {
+      kind: 'ok';
+      transformOutput: CompilerTransformOutput;
+      results: Map<string, Array<PrintedCompilerPipelineValue>>;
+      errors: Array<CompilerErrorDetail | CompilerDiagnostic>;
+    }
+  | {
+      kind: 'err';
+      results: Map<string, Array<PrintedCompilerPipelineValue>>;
+      error: CompilerError;
+    };
+
+type Props = {
+  store: Store;
+  compilerOutput: CompilerOutput;
+};
+
+async function tabify(
+  source: string,
+  compilerOutput: CompilerOutput,
+  showInternals: boolean,
+): Promise<Map<string, ReactNode>> {
+  const tabs = new Map<string, React.ReactNode>();
+  const reorderedTabs = new Map<string, React.ReactNode>();
+  const concattedResults = new Map<string, string>();
+  // Concat all top level function declaration results into a single tab for each pass
+  for (const [passName, results] of compilerOutput.results) {
+    if (!showInternals && !BASIC_OUTPUT_TAB_NAMES.includes(passName)) {
+      continue;
+    }
+    for (const result of results) {
+      switch (result.kind) {
+        case 'hir': {
+          const prev = concattedResults.get(result.name);
+          const next = result.value;
+          const identName = `function ${result.fnName}`;
+          if (prev != null) {
+            concattedResults.set(passName, `${prev}\n\n${identName}\n${next}`);
+          } else {
+            concattedResults.set(passName, `${identName}\n${next}`);
+          }
+          break;
+        }
+        case 'reactive': {
+          const prev = concattedResults.get(passName);
+          const next = result.value;
+          if (prev != null) {
+            concattedResults.set(passName, `${prev}\n\n${next}`);
+          } else {
+            concattedResults.set(passName, next);
+          }
+          break;
+        }
+        case 'debug': {
+          concattedResults.set(passName, result.value);
+          break;
+        }
+        default: {
+          const _: never = result;
+          throw new Error('Unexpected result kind');
+        }
+      }
+    }
+  }
+  let lastPassOutput: string | null = null;
+  let nonDiffPasses = ['HIR', 'BuildReactiveFunction', 'EnvironmentConfig'];
+  for (const [passName, text] of concattedResults) {
+    tabs.set(
+      passName,
+      <TextTabContent
+        output={text}
+        diff={lastPassOutput}
+        showInfoPanel={!nonDiffPasses.includes(passName)}></TextTabContent>,
+    );
+    lastPassOutput = text;
+  }
+  // Ensure that JS and the JS source map come first
+  if (compilerOutput.kind === 'ok') {
+    const {transformOutput} = compilerOutput;
+    const sourceMapUrl = getSourceMapUrl(
+      transformOutput.code,
+      JSON.stringify(transformOutput.sourceMaps),
+    );
+    const code = await prettier.format(transformOutput.code, {
+      semi: true,
+      parser: transformOutput.language === 'flow' ? 'babel-flow' : 'babel-ts',
+      plugins: [parserBabel, prettierPluginEstree],
+    });
+
+    let output: string;
+    let language: string;
+    if (compilerOutput.errors.length === 0) {
+      output = code;
+      language = 'javascript';
+    } else {
+      language = 'markdown';
+      output = `
+# Summary
+
+React Compiler compiled this function successfully, but there are lint errors that indicate potential issues with the original code.
+
+## ${compilerOutput.errors.length} Lint Errors
+
+${compilerOutput.errors.map(e => e.printErrorMessage(source, {eslint: false})).join('\n\n')}
+
+## Output
+
+\`\`\`js
+${code}
+\`\`\`
+`.trim();
+    }
+
+    reorderedTabs.set(
+      'Output',
+      <TextTabContent
+        output={output}
+        language={language}
+        diff={null}
+        showInfoPanel={false}></TextTabContent>,
+    );
+    if (sourceMapUrl) {
+      reorderedTabs.set(
+        'SourceMap',
+        <>
+          <iframe
+            src={sourceMapUrl}
+            className="w-full h-monaco_small sm:h-monaco"
+            title="Generated Code"
+          />
+        </>,
+      );
+    }
+  } else if (compilerOutput.kind === 'err') {
+    const errors = compilerOutput.error.printErrorMessage(source, {
+      eslint: false,
+    });
+    reorderedTabs.set(
+      'Output',
+      <TextTabContent
+        output={errors}
+        language="markdown"
+        diff={null}
+        showInfoPanel={false}></TextTabContent>,
+    );
+  }
+  tabs.forEach((tab, name) => {
+    reorderedTabs.set(name, tab);
+  });
+  return reorderedTabs;
+}
+
+function tabifyCached(
+  store: Store,
+  compilerOutput: CompilerOutput,
+): Promise<Map<string, ReactNode>> {
+  const cached = tabifyCache.get(store);
+  if (cached) return cached;
+  const result = tabify(store.source, compilerOutput, store.showInternals);
+  tabifyCache.set(store, result);
+  return result;
+}
+
+function Fallback(): JSX.Element {
+  return (
+    <div className="w-full h-monaco_small sm:h-monaco flex items-center justify-center">
+      Loading...
+    </div>
+  );
+}
+
+function utf16ToUTF8(s: string): string {
+  return unescape(encodeURIComponent(s));
+}
+
+function getSourceMapUrl(code: string, map: string): string | null {
+  code = utf16ToUTF8(code);
+  map = utf16ToUTF8(map);
+  return `https://evanw.github.io/source-map-visualization/#${btoa(
+    `${code.length}\0${code}${map.length}\0${map}`,
+  )}`;
+}
+
+function Output({store, compilerOutput}: Props): JSX.Element {
+  return (
+    <Suspense fallback={<Fallback />}>
+      <OutputContent store={store} compilerOutput={compilerOutput} />
+    </Suspense>
+  );
+}
+
+function OutputContent({store, compilerOutput}: Props): JSX.Element {
+  const [tabsOpen, setTabsOpen] = useState<Set<string>>(
+    () => new Set(['Output']),
+  );
+  const [activeTab, setActiveTab] = useState<string>('Output');
+
+  /*
+   * Update the active tab back to the output or errors tab when the compilation state
+   * changes between success/failure.
+   */
+  const [previousOutputKind, setPreviousOutputKind] = useState(
+    compilerOutput.kind,
+  );
+  const isFailure = compilerOutput.kind !== 'ok';
+
+  if (compilerOutput.kind !== previousOutputKind) {
+    setPreviousOutputKind(compilerOutput.kind);
+    if (isFailure) {
+      startTransition(() => {
+        addTransitionType(EXPAND_ACCORDION_TRANSITION);
+        setTabsOpen(prev => new Set(prev).add('Output'));
+        setActiveTab('Output');
+      });
+    }
+  }
+
+  const changedPasses: Set<string> = new Set(['Output', 'HIR']); // Initial and final passes should always be bold
+  let lastResult: string = '';
+  for (const [passName, results] of compilerOutput.results) {
+    for (const result of results) {
+      let currResult = '';
+      if (result.kind === 'hir' || result.kind === 'reactive') {
+        currResult += `function ${result.fnName}\n\n${result.value}`;
+      }
+      if (currResult !== lastResult) {
+        changedPasses.add(passName);
+      }
+      lastResult = currResult;
+    }
+  }
+  const tabs = use(tabifyCached(store, compilerOutput));
+
+  if (!store.showInternals) {
+    return (
+      <ViewTransition
+        update={{
+          [CONFIG_PANEL_TRANSITION]: 'container',
+          [TOGGLE_INTERNALS_TRANSITION]: '',
+          default: 'none',
+        }}>
+        <TabbedWindow
+          tabs={tabs}
+          activeTab={activeTab}
+          onTabChange={setActiveTab}
+        />
+      </ViewTransition>
+    );
+  }
+
+  return (
+    <ViewTransition
+      update={{
+        [CONFIG_PANEL_TRANSITION]: 'accordion-container',
+        [TOGGLE_INTERNALS_TRANSITION]: '',
+        default: 'none',
+      }}>
+      <AccordionWindow
+        defaultTab={store.showInternals ? 'HIR' : 'Output'}
+        setTabsOpen={setTabsOpen}
+        tabsOpen={tabsOpen}
+        tabs={tabs}
+        changedPasses={changedPasses}
+      />
+    </ViewTransition>
+  );
+}
+
+function TextTabContent({
+  output,
+  diff,
+  showInfoPanel,
+  language,
+}: {
+  output: string;
+  diff: string | null;
+  showInfoPanel: boolean;
+  language: string;
+}): JSX.Element {
+  const [diffMode, setDiffMode] = useState(false);
+  return (
+    /**
+     * Restrict MonacoEditor's height, since the config autoLayout:true
+     * will grow the editor to fit within parent element
+     */
+    <div className="w-full h-monaco_small sm:h-monaco">
+      {showInfoPanel ? (
+        <div className="flex items-center gap-1 bg-amber-50 p-2">
+          {diff != null && output !== diff ? (
+            <button
+              className="flex items-center gap-1 transition-colors duration-150 ease-in text-secondary hover:text-link"
+              onClick={() => setDiffMode(diffMode => !diffMode)}>
+              {!diffMode ? (
+                <>
+                  <DocumentAddIcon className="w-5 h-5" /> Show Diff
+                </>
+              ) : (
+                <>
+                  <CodeIcon className="w-5 h-5" /> Show Output
+                </>
+              )}
+            </button>
+          ) : (
+            <>
+              <span className="flex items-center gap-1">
+                <InformationCircleIcon className="w-5 h-5" /> No changes from
+                previous pass
+              </span>
+            </>
+          )}
+        </div>
+      ) : null}
+      {diff != null && diffMode ? (
+        <DiffEditor
+          original={diff}
+          modified={output}
+          loading={''}
+          options={{
+            ...monacoOptions,
+            scrollbar: {
+              vertical: 'hidden',
+            },
+            dimension: {
+              width: 0,
+              height: 0,
+            },
+            readOnly: true,
+            lineNumbers: 'off',
+            glyphMargin: false,
+            // Undocumented see https://github.com/Microsoft/vscode/issues/30795#issuecomment-410998882
+            overviewRulerLanes: 0,
+          }}
+        />
+      ) : (
+        <MonacoEditor
+          language={language ?? 'javascript'}
+          value={output}
+          loading={''}
+          className="monaco-editor-output"
+          options={{
+            ...monacoOptions,
+            readOnly: true,
+            lineNumbers: 'off',
+            glyphMargin: false,
+            // Undocumented see https://github.com/Microsoft/vscode/issues/30795#issuecomment-410998882
+            lineDecorationsWidth: 0,
+            lineNumbersMinChars: 0,
+          }}
+        />
+      )}
+    </div>
+  );
+}

compiler/apps/playground/components/Editor/index.tsx

@@ -0,0 +1,18 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import dynamic from 'next/dynamic';
+
+/**
+ * monaco-editor is currently not compatible with ssr
+ * https://github.com/vercel/next.js/issues/31692
+ */
+const Editor = dynamic(() => import('./EditorImpl'), {
+  ssr: false,
+});
+
+export default Editor;

compiler/apps/playground/components/Editor/monacoOptions.ts

@@ -0,0 +1,45 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import type {EditorProps} from '@monaco-editor/react';
+
+export const monacoOptions: Partial<EditorProps['options']> = {
+  fontSize: 14,
+  padding: {top: 8},
+  scrollbar: {
+    verticalScrollbarSize: 10,
+    alwaysConsumeMouseWheel: false,
+  },
+  minimap: {
+    enabled: false,
+  },
+  formatOnPaste: true,
+  formatOnType: true,
+  fontFamily: '"Source Code Pro", monospace',
+  glyphMargin: true,
+
+  autoClosingBrackets: 'languageDefined',
+  autoClosingDelete: 'always',
+  autoClosingOvertype: 'always',
+
+  automaticLayout: true,
+  wordWrap: 'on',
+  wrappingIndent: 'same',
+
+  tabSize: 2,
+};
+
+export const monacoConfigOptions: Partial<EditorProps['options']> = {
+  ...monacoOptions,
+  lineNumbers: 'off',
+  renderLineHighlight: 'none',
+  overviewRulerBorder: false,
+  overviewRulerLanes: 0,
+  fontSize: 12,
+  scrollBeyondLastLine: false,
+  glyphMargin: false,
+};

compiler/apps/playground/components/Header.tsx

@@ -0,0 +1,123 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import {RefreshIcon, ShareIcon} from '@heroicons/react/outline';
+import {CheckIcon} from '@heroicons/react/solid';
+import clsx from 'clsx';
+import Link from 'next/link';
+import {useSnackbar} from 'notistack';
+import {
+  useState,
+  startTransition,
+  unstable_addTransitionType as addTransitionType,
+} from 'react';
+import {defaultStore} from '../lib/defaultStore';
+import {IconGitHub} from './Icons/IconGitHub';
+import Logo from './Logo';
+import {useStore, useStoreDispatch} from './StoreContext';
+import {TOGGLE_INTERNALS_TRANSITION} from '../lib/transitionTypes';
+
+export default function Header(): JSX.Element {
+  const [showCheck, setShowCheck] = useState(false);
+  const store = useStore();
+  const dispatchStore = useStoreDispatch();
+  const {enqueueSnackbar, closeSnackbar} = useSnackbar();
+
+  const handleReset: () => void = () => {
+    if (confirm('Are you sure you want to reset the playground?')) {
+      /**
+       * Close open snackbars if any. This is necessary because when displaying
+       * outputs (Preview or not), we only close previous snackbars if we received
+       * new messages, which is needed in order to display "Bad URL" or success
+       * messages when loading Playground for the first time. Otherwise, messages
+       * such as "Bad URL" will be closed by the outputs calling `closeSnackbar`.
+       */
+      closeSnackbar();
+      dispatchStore({type: 'setStore', payload: {store: defaultStore}});
+    }
+  };
+
+  const handleShare: () => void = () => {
+    navigator.clipboard.writeText(location.href).then(() => {
+      enqueueSnackbar('URL copied to clipboard');
+      setShowCheck(true);
+      // Show the check mark icon briefly after URL is copied
+      setTimeout(() => setShowCheck(false), 1000);
+    });
+  };
+
+  return (
+    <div className="fixed z-10 flex items-center justify-between w-screen px-5 py-3 bg-white border-b border-gray-200 h-14">
+      <div className="flex items-center flex-none h-full gap-2 text-lg">
+        <Logo
+          className={clsx(
+            'w-8 h-8 text-link',
+            process.env.NODE_ENV === 'development' && 'text-yellow-600',
+          )}
+        />
+        <p className="hidden select-none sm:block">React Compiler Playground</p>
+      </div>
+      <div className="flex items-center text-[15px] gap-4">
+        <div className="flex items-center gap-2">
+          <label className="show-internals relative inline-block w-[34px] h-5">
+            <input
+              type="checkbox"
+              checked={store.showInternals}
+              onChange={() =>
+                startTransition(() => {
+                  addTransitionType(TOGGLE_INTERNALS_TRANSITION);
+                  dispatchStore({type: 'toggleInternals'});
+                })
+              }
+              className="absolute opacity-0 cursor-pointer h-full w-full m-0"
+            />
+            <span
+              className={clsx(
+                'absolute inset-0 rounded-full cursor-pointer transition-all duration-250',
+                "before:content-[''] before:absolute before:w-4 before:h-4 before:left-0.5 before:bottom-0.5",
+                'before:bg-white before:rounded-full before:transition-transform before:duration-250',
+                'focus-within:shadow-[0_0_1px_#2196F3]',
+                store.showInternals
+                  ? 'bg-link before:translate-x-3.5'
+                  : 'bg-gray-300',
+              )}></span>
+          </label>
+          <span className="text-secondary">Show Internals</span>
+        </div>
+        <button
+          title="Reset Playground"
+          aria-label="Reset Playground"
+          className="flex items-center gap-1 transition-colors duration-150 ease-in text-secondary hover:text-link"
+          onClick={handleReset}>
+          <RefreshIcon className="w-5 h-5" />
+          <p className="hidden sm:block">Reset</p>
+        </button>
+        <button
+          title="Copy sharable URL"
+          aria-label="Copy sharable URL"
+          className="flex items-center gap-1 transition-colors duration-150 ease-in text-secondary hover:text-link"
+          onClick={handleShare}
+          disabled={showCheck}>
+          {!showCheck ? (
+            <ShareIcon className="w-5 h-5" />
+          ) : (
+            <CheckIcon className="w-5 h-5 fill-blue-50" />
+          )}
+          <p className="hidden sm:block">Share</p>
+        </button>
+        <Link
+          href="https://github.com/facebook/react"
+          target="_blank"
+          rel="noreferrer noopener"
+          aria-label="Open on GitHub"
+          className="flex items-center gap-1 transition-colors duration-150 ease-in text-secondary hover:text-link">
+          <IconGitHub />
+        </Link>
+      </div>
+    </div>
+  );
+}

compiler/apps/playground/components/Icons/IconChevron.tsx

@@ -0,0 +1,41 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import {memo} from 'react';
+
+export const IconChevron = memo<
+  JSX.IntrinsicElements['svg'] & {
+    /**
+     * The direction the arrow should point.
+     */
+    displayDirection: 'right' | 'left';
+  }
+>(function IconChevron({className, displayDirection, ...props}) {
+  const rotationClass =
+    displayDirection === 'left' ? 'rotate-90' : '-rotate-90';
+  const classes = className ? `${rotationClass} ${className}` : rotationClass;
+
+  return (
+    <svg
+      className={classes}
+      xmlns="http://www.w3.org/2000/svg"
+      width="20"
+      height="20"
+      viewBox="0 0 20 20"
+      {...props}>
+      <g fill="none" fillRule="evenodd" transform="translate(-446 -398)">
+        <path
+          fill="currentColor"
+          fillRule="nonzero"
+          d="M95.8838835,240.366117 C95.3957281,239.877961 94.6042719,239.877961 94.1161165,240.366117 C93.6279612,240.854272 93.6279612,241.645728 94.1161165,242.133883 L98.6161165,246.633883 C99.1042719,247.122039 99.8957281,247.122039 100.383883,246.633883 L104.883883,242.133883 C105.372039,241.645728 105.372039,240.854272 104.883883,240.366117 C104.395728,239.877961 103.604272,239.877961 103.116117,240.366117 L99.5,243.982233 L95.8838835,240.366117 Z"
+          transform="translate(356.5 164.5)"
+        />
+        <polygon points="446 418 466 418 466 398 446 398" />
+      </g>
+    </svg>
+  );
+});

compiler/apps/playground/components/Icons/IconGitHub.tsx

@@ -0,0 +1,24 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import {memo} from 'react';
+
+export const IconGitHub = memo<JSX.IntrinsicElements['svg']>(
+  function IconGitHub(props) {
+    return (
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="1.5em"
+        height="1.5em"
+        viewBox="0 -2 24 24"
+        fill="currentColor"
+        {...props}>
+        <path d="M10 0a10 10 0 0 0-3.16 19.49c.5.1.68-.22.68-.48l-.01-1.7c-2.78.6-3.37-1.34-3.37-1.34-.46-1.16-1.11-1.47-1.11-1.47-.9-.62.07-.6.07-.6 1 .07 1.53 1.03 1.53 1.03.9 1.52 2.34 1.08 2.91.83.1-.65.35-1.09.63-1.34-2.22-.25-4.55-1.11-4.55-4.94 0-1.1.39-1.99 1.03-2.69a3.6 3.6 0 0 1 .1-2.64s.84-.27 2.75 1.02a9.58 9.58 0 0 1 5 0c1.91-1.3 2.75-1.02 2.75-1.02.55 1.37.2 2.4.1 2.64.64.7 1.03 1.6 1.03 2.69 0 3.84-2.34 4.68-4.57 4.93.36.31.68.92.68 1.85l-.01 2.75c0 .26.18.58.69.48A10 10 0 0 0 10 0"></path>
+      </svg>
+    );
+  },
+);

compiler/apps/playground/components/Logo.tsx

@@ -0,0 +1,27 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+// https://github.com/reactjs/reactjs.org/blob/main/beta/src/components/Logo.tsx
+
+export default function Logo(props: JSX.IntrinsicElements['svg']): JSX.Element {
+  return (
+    <svg
+      viewBox="0 0 410 369"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}>
+      <path
+        d="M204.995 224.552C226.56 224.552 244.042 207.07 244.042 185.506C244.042 163.941 226.56 146.459 204.995 146.459C183.43 146.459 165.948 163.941 165.948 185.506C165.948 207.07 183.43 224.552 204.995 224.552Z"
+        fill="currentColor"
+      />
+      <path
+        d="M409.99 184.505C409.99 153.707 381.437 126.667 335.996 108.925C343.342 60.6535 334.19 22.3878 307.492 6.98883C283.649 -6.77511 250.631 -0.0395641 214.512 25.9753C211.316 28.2692 208.143 30.7097 204.97 33.2477C201.822 30.7097 198.65 28.2692 195.477 25.9753C159.359 -0.0395641 126.34 -6.79951 102.497 6.98883C75.8237 22.3878 66.6721 60.6291 74.0422 108.852C28.5529 126.618 0 153.682 0 184.505C0 215.303 28.5528 242.342 73.9934 260.084C66.6477 308.356 75.7993 346.621 102.497 362.02C110.575 366.682 119.727 369 129.684 369C149.085 369 171.61 360.215 195.477 343.034C198.674 340.74 201.847 338.3 205.019 335.762C208.167 338.3 211.34 340.74 214.512 343.034C238.38 360.239 260.905 369 280.306 369C290.263 369 299.415 366.682 307.492 362.02C331.335 348.256 342 316.287 337.534 271.993C337.143 268.089 336.631 264.135 335.996 260.109C381.461 242.367 409.99 215.327 409.99 184.505ZM225.934 41.8136C246.238 27.1955 265.127 19.5814 280.306 19.5814C286.871 19.5814 292.728 20.9968 297.731 23.8765C315.204 33.9798 322.672 62.9475 317.327 102.433C299.756 97.0401 280.306 92.9158 259.392 90.2802C246.872 73.8074 233.597 58.9453 220.003 46.2551C221.98 44.7421 223.957 43.229 225.934 41.8136ZM112.259 23.8765C117.262 20.9968 123.119 19.5814 129.684 19.5814C144.863 19.5814 163.752 27.1711 184.056 41.8136C186.033 43.229 188.01 44.7176 189.986 46.2551C176.393 58.9453 163.142 73.783 150.622 90.2558C129.732 92.8914 110.258 97.0401 92.687 102.409C87.3424 62.9475 94.7857 33.9798 112.259 23.8765ZM19.5233 184.505C19.5233 164.322 40.9014 143.359 77.776 128.253C81.9003 146.141 88.0502 165.054 96.1768 184.456C88.0014 203.881 81.8515 222.819 77.7272 240.732C40.9014 225.626 19.5233 204.687 19.5233 184.505ZM184.056 327.196C154.966 348.134 128.805 354.675 112.259 345.133C94.7857 335.029 87.3181 306.062 92.6626 266.576C110.234 271.969 129.684 276.093 150.598 278.729C163.117 295.202 176.393 310.064 189.986 322.754C188.01 324.292 186.033 325.78 184.056 327.196ZM204.995 310.04C180.591 287.685 157.138 257.815 137.347 223.551C132.051 214.4 121.344 191.396 117 182.489C113.535 190.786 110.112 198.398 107.427 206.5C109.623 210.575 118.092 229.213 120.434 233.288C125.071 241.317 129.928 249.127 134.931 256.692C120.898 254.227 107.915 251.055 96.1035 247.321C102.815 217.011 116.213 182.064 137.347 145.458C142.545 136.453 153.838 116.346 159.5 108C150.568 109.147 143.395 108.767 135 110.5C132.56 114.453 122.777 131.645 120.434 135.721C115.749 143.823 111.454 151.925 107.427 159.978C102.546 146.581 98.8124 133.744 96.1524 121.64C125.755 112.293 162.727 106.411 204.995 106.411C215.562 106.411 237.63 106.197 247.49 106.905C242.048 99.7544 237.38 93.2819 231.694 86.888C227.082 86.7416 209.705 86.888 204.995 86.888C195.672 86.888 186.545 87.2053 177.589 87.7422C186.472 77.1752 195.672 67.5111 204.995 58.9697C229.375 81.3239 252.851 111.195 272.643 145.458C277.841 154.463 289.073 175.426 293.49 184.505C296.98 176.207 300.281 168.64 302.99 160.489C300.793 156.389 291.898 139.747 289.555 135.696C284.918 127.667 280.062 119.858 275.059 112.317C289.092 114.782 302.075 117.954 313.886 121.688C307.175 151.998 293.777 186.945 272.643 223.551C267.445 232.556 252.651 253.178 246.99 261.524C255.922 260.377 265.595 258.663 273.99 256.93C276.43 252.976 287.212 237.364 289.555 233.288C294.216 225.235 298.512 217.182 302.489 209.153C307.224 222.185 310.982 234.997 313.715 247.394C284.138 256.741 247.214 262.598 204.995 262.598C194.428 262.598 169.859 261.208 160 260.5C165.442 267.65 171.304 275.095 176.99 281.489C181.602 281.635 200.285 282.121 204.995 282.121C214.317 282.121 223.444 281.804 232.401 281.267C223.493 291.834 214.317 301.498 204.995 310.04ZM297.731 345.133C281.185 354.699 254.999 348.159 225.934 327.196C223.957 325.78 221.98 324.292 220.003 322.754C233.597 310.064 246.848 295.226 259.367 278.753C280.233 276.118 299.659 271.993 317.205 266.625C317.547 269.089 317.888 271.554 318.132 273.97C321.72 309.649 314.277 335.566 297.731 345.133ZM332.262 240.756C328.065 222.599 321.842 203.686 313.813 184.578C321.988 165.152 328.138 146.215 332.262 128.302C369.088 143.408 390.466 164.322 390.466 184.505C390.466 204.687 369.113 225.626 332.262 240.756Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+}

compiler/apps/playground/components/Message.tsx

@@ -0,0 +1,82 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import {
+  BanIcon,
+  ExclamationIcon,
+  InformationCircleIcon,
+  XIcon,
+} from '@heroicons/react/solid';
+import {CustomContentProps, SnackbarContent, useSnackbar} from 'notistack';
+import {forwardRef} from 'react';
+import {MessageLevel, MessageSource} from '../lib/stores';
+
+// https://notistack.com/examples/advanced/custom-component#custom-variant-(typescript)
+declare module 'notistack' {
+  interface VariantOverrides {
+    message: {
+      title: string;
+      level: MessageLevel;
+      codeframe: string | undefined;
+    };
+  }
+}
+
+interface MessageProps extends CustomContentProps {
+  title: string;
+  level: MessageLevel;
+  source: MessageSource;
+  codeframe: string | undefined;
+}
+
+const Message = forwardRef<HTMLDivElement, MessageProps>(
+  ({id, title, level, source, codeframe}, ref) => {
+    const {closeSnackbar} = useSnackbar();
+    const isDismissible = source !== MessageSource.Playground;
+
+    return (
+      <SnackbarContent
+        ref={ref}
+        className="flex items-start justify-between gap-3 px-4 py-3 text-sm bg-white border rounded-md shadow w-toast">
+        <div className="flex gap-3 w-toast-body">
+          {level === MessageLevel.Warning ? (
+            <div className="flex items-center justify-center flex-none rounded-md w-7 h-7 bg-amber-100">
+              <ExclamationIcon className="w-5 h-5 text-amber-600" />
+            </div>
+          ) : level === MessageLevel.Error ? (
+            <div className="flex items-center justify-center flex-none bg-red-100 rounded-md w-7 h-7">
+              <BanIcon className="w-5 h-5 text-red-600" />
+            </div>
+          ) : (
+            <div className="flex items-center justify-center flex-none rounded-md bg-sky-100 w-7 h-7">
+              <InformationCircleIcon className="w-5 h-5 text-sky-600" />
+            </div>
+          )}
+          <div className="flex flex-col justify-center gap-1 w-toast-title">
+            <p className="w-full">{title}</p>
+            {codeframe ? (
+              <pre className="overflow-x-auto break-words whitespace-pre-wrap">
+                <code className="text-xs">{codeframe}</code>
+              </pre>
+            ) : null}
+          </div>
+        </div>
+        {isDismissible ? (
+          <button
+            className="flex items-center justify-center flex-none transition-colors duration-150 ease-in rounded-md justify-self-end group w-7 h-7 hover:bg-gray-200"
+            onClick={() => closeSnackbar(id)}>
+            <XIcon className="w-5 h-5 fill-gray-500 group-hover:fill-gray-800" />
+          </button>
+        ) : null}
+      </SnackbarContent>
+    );
+  },
+);
+
+Message.displayName = 'MessageComponent';
+
+export default Message;

compiler/apps/playground/components/StoreContext.tsx

@@ -0,0 +1,119 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import type {Dispatch, ReactNode} from 'react';
+import {useState, useEffect, useReducer} from 'react';
+import createContext from '../lib/createContext';
+import {emptyStore, defaultStore} from '../lib/defaultStore';
+import {
+  saveStore,
+  initStoreFromUrlOrLocalStorage,
+  type Store,
+} from '../lib/stores';
+
+const StoreContext = createContext<Store>();
+
+/**
+ * Hook to access the store.
+ */
+export const useStore = StoreContext.useContext;
+
+const StoreDispatchContext = createContext<Dispatch<ReducerAction>>();
+
+/**
+ * Hook to access the store dispatch function.
+ */
+export const useStoreDispatch = StoreDispatchContext.useContext;
+
+/**
+ * Make Store and dispatch function available to all sub-components in children.
+ */
+export function StoreProvider({children}: {children: ReactNode}): JSX.Element {
+  const [store, dispatch] = useReducer(storeReducer, emptyStore);
+  const [isPageReady, setIsPageReady] = useState<boolean>(false);
+
+  useEffect(() => {
+    let mountStore: Store;
+    try {
+      mountStore = initStoreFromUrlOrLocalStorage();
+    } catch (e) {
+      console.error('Failed to initialize store from URL or local storage', e);
+      mountStore = defaultStore;
+    }
+    dispatch({type: 'setStore', payload: {store: mountStore}});
+    setIsPageReady(true);
+  }, []);
+
+  useEffect(() => {
+    if (store !== emptyStore) {
+      saveStore(store);
+    }
+  }, [store]);
+
+  return (
+    <StoreContext.Provider value={store}>
+      <StoreDispatchContext.Provider value={dispatch}>
+        {isPageReady ? children : null}
+      </StoreDispatchContext.Provider>
+    </StoreContext.Provider>
+  );
+}
+
+type ReducerAction =
+  | {
+      type: 'setStore';
+      payload: {
+        store: Store;
+      };
+    }
+  | {
+      type: 'updateSource';
+      payload: {
+        source: string;
+      };
+    }
+  | {
+      type: 'updateConfig';
+      payload: {
+        config: string;
+      };
+    }
+  | {
+      type: 'toggleInternals';
+    };
+
+function storeReducer(store: Store, action: ReducerAction): Store {
+  switch (action.type) {
+    case 'setStore': {
+      const newStore = action.payload.store;
+      return newStore;
+    }
+    case 'updateSource': {
+      const source = action.payload.source;
+      const newStore = {
+        ...store,
+        source,
+      };
+      return newStore;
+    }
+    case 'updateConfig': {
+      const config = action.payload.config;
+      const newStore = {
+        ...store,
+        config,
+      };
+      return newStore;
+    }
+    case 'toggleInternals': {
+      const newStore = {
+        ...store,
+        showInternals: !store.showInternals,
+      };
+      return newStore;
+    }
+  }
+}

compiler/apps/playground/components/TabbedWindow.tsx

@@ -0,0 +1,81 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import React, {
+  startTransition,
+  useId,
+  unstable_ViewTransition as ViewTransition,
+  unstable_addTransitionType as addTransitionType,
+} from 'react';
+import clsx from 'clsx';
+import {TOGGLE_TAB_TRANSITION} from '../lib/transitionTypes';
+
+export default function TabbedWindow({
+  tabs,
+  activeTab,
+  onTabChange,
+}: {
+  tabs: Map<string, React.ReactNode>;
+  activeTab: string;
+  onTabChange: (tab: string) => void;
+}): React.ReactElement {
+  const id = useId();
+  const transitionName = `tab-highlight-${id}`;
+
+  const handleTabChange = (tab: string): void => {
+    startTransition(() => {
+      addTransitionType(TOGGLE_TAB_TRANSITION);
+      onTabChange(tab);
+    });
+  };
+
+  return (
+    <div className="flex-1 min-w-[550px] sm:min-w-0">
+      <div className="flex flex-col h-full max-w-full">
+        <div className="flex p-2 flex-shrink-0">
+          {Array.from(tabs.keys()).map(tab => {
+            const isActive = activeTab === tab;
+            return (
+              <button
+                key={tab}
+                onClick={() => handleTabChange(tab)}
+                className={clsx(
+                  'transition-transform py-1.5 px-1.5 xs:px-3 sm:px-4 rounded-full text-sm relative',
+                  isActive ? 'text-link' : 'hover:bg-primary/5',
+                )}>
+                {isActive && (
+                  <ViewTransition
+                    name={transitionName}
+                    enter={{default: 'none'}}
+                    exit={{default: 'none'}}
+                    share={{
+                      [TOGGLE_TAB_TRANSITION]: 'tab-highlight',
+                      default: 'none',
+                    }}
+                    update={{default: 'none'}}>
+                    <div className="absolute inset-0 bg-highlight rounded-full" />
+                  </ViewTransition>
+                )}
+                <ViewTransition
+                  enter={{default: 'none'}}
+                  exit={{default: 'none'}}
+                  update={{
+                    [TOGGLE_TAB_TRANSITION]: 'tab-text',
+                    default: 'none',
+                  }}>
+                  <span className="relative z-1">{tab}</span>
+                </ViewTransition>
+              </button>
+            );
+          })}
+        </div>
+        <div className="flex-1 overflow-hidden w-full h-full">
+          {tabs.get(activeTab)}
+        </div>
+      </div>
+    </div>
+  );
+}

compiler/apps/playground/components/index.ts

@@ -0,0 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+export {default as Editor} from './Editor';
+export {default as Header} from './Header';
+export {StoreProvider} from './StoreContext';

compiler/apps/playground/hooks/index.ts

@@ -0,0 +1,8 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+export {default as useMountEffect} from './useMountEffect';

compiler/apps/playground/hooks/useMountEffect.ts

@@ -0,0 +1,13 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import type {EffectCallback} from 'react';
+import {useEffect} from 'react';
+
+export default function useMountEffect(effect: EffectCallback) {
+  return useEffect(effect, []);
+}

compiler/apps/playground/lib/compilation.ts

@@ -0,0 +1,308 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import {parse as babelParse, ParseResult} from '@babel/parser';
+import * as HermesParser from 'hermes-parser';
+import * as t from '@babel/types';
+import BabelPluginReactCompiler, {
+  CompilerError,
+  CompilerErrorDetail,
+  CompilerDiagnostic,
+  Effect,
+  ErrorCategory,
+  parseConfigPragmaForTests,
+  ValueKind,
+  type Hook,
+  PluginOptions,
+  CompilerPipelineValue,
+  parsePluginOptions,
+  printReactiveFunctionWithOutlined,
+  printFunctionWithOutlined,
+  type LoggerEvent,
+} from 'babel-plugin-react-compiler';
+import {transformFromAstSync} from '@babel/core';
+import type {
+  CompilerOutput,
+  CompilerTransformOutput,
+  PrintedCompilerPipelineValue,
+} from '../components/Editor/Output';
+
+function parseInput(
+  input: string,
+  language: 'flow' | 'typescript',
+): ParseResult<t.File> {
+  // Extract the first line to quickly check for custom test directives
+  if (language === 'flow') {
+    return HermesParser.parse(input, {
+      babel: true,
+      flow: 'all',
+      sourceType: 'module',
+      enableExperimentalComponentSyntax: true,
+    });
+  } else {
+    return babelParse(input, {
+      plugins: ['typescript', 'jsx'],
+      sourceType: 'module',
+    }) as ParseResult<t.File>;
+  }
+}
+
+function invokeCompiler(
+  source: string,
+  language: 'flow' | 'typescript',
+  options: PluginOptions,
+): CompilerTransformOutput {
+  const ast = parseInput(source, language);
+  let result = transformFromAstSync(ast, source, {
+    filename: '_playgroundFile.js',
+    highlightCode: false,
+    retainLines: true,
+    plugins: [[BabelPluginReactCompiler, options]],
+    ast: true,
+    sourceType: 'module',
+    configFile: false,
+    sourceMaps: true,
+    babelrc: false,
+  });
+  if (result?.ast == null || result?.code == null || result?.map == null) {
+    throw new Error('Expected successful compilation');
+  }
+  return {
+    code: result.code,
+    sourceMaps: result.map,
+    language,
+  };
+}
+
+const COMMON_HOOKS: Array<[string, Hook]> = [
+  [
+    'useFragment',
+    {
+      valueKind: ValueKind.Frozen,
+      effectKind: Effect.Freeze,
+      noAlias: true,
+      transitiveMixedData: true,
+    },
+  ],
+  [
+    'usePaginationFragment',
+    {
+      valueKind: ValueKind.Frozen,
+      effectKind: Effect.Freeze,
+      noAlias: true,
+      transitiveMixedData: true,
+    },
+  ],
+  [
+    'useRefetchableFragment',
+    {
+      valueKind: ValueKind.Frozen,
+      effectKind: Effect.Freeze,
+      noAlias: true,
+      transitiveMixedData: true,
+    },
+  ],
+  [
+    'useLazyLoadQuery',
+    {
+      valueKind: ValueKind.Frozen,
+      effectKind: Effect.Freeze,
+      noAlias: true,
+      transitiveMixedData: true,
+    },
+  ],
+  [
+    'usePreloadedQuery',
+    {
+      valueKind: ValueKind.Frozen,
+      effectKind: Effect.Freeze,
+      noAlias: true,
+      transitiveMixedData: true,
+    },
+  ],
+];
+
+function parseOptions(
+  source: string,
+  mode: 'compiler' | 'linter',
+  configOverrides: string,
+): PluginOptions {
+  // Extract the first line to quickly check for custom test directives
+  const pragma = source.substring(0, source.indexOf('\n'));
+
+  const parsedPragmaOptions = parseConfigPragmaForTests(pragma, {
+    compilationMode: 'infer',
+    environment:
+      mode === 'linter'
+        ? {
+            // enabled in compiler
+            validateRefAccessDuringRender: false,
+            // enabled in linter
+            validateNoSetStateInRender: true,
+            validateNoSetStateInEffects: true,
+            validateNoJSXInTryStatements: true,
+            validateNoImpureFunctionsInRender: true,
+            validateStaticComponents: true,
+            validateNoFreezingKnownMutableFunctions: true,
+            validateNoVoidUseMemo: true,
+          }
+        : {
+            /* use defaults for compiler mode */
+          },
+  });
+
+  // Parse config overrides from config editor
+  let configOverrideOptions: any = {};
+  const configMatch = configOverrides.match(/^\s*import.*?\n\n\((.*)\)/s);
+  if (configOverrides.trim()) {
+    if (configMatch && configMatch[1]) {
+      const configString = configMatch[1].replace(/satisfies.*$/, '').trim();
+      configOverrideOptions = new Function(`return (${configString})`)();
+    } else {
+      throw new Error('Invalid override format');
+    }
+  }
+
+  const opts: PluginOptions = parsePluginOptions({
+    ...parsedPragmaOptions,
+    ...configOverrideOptions,
+    environment: {
+      ...parsedPragmaOptions.environment,
+      ...configOverrideOptions.environment,
+      customHooks: new Map([...COMMON_HOOKS]),
+    },
+  });
+
+  return opts;
+}
+
+export function compile(
+  source: string,
+  mode: 'compiler' | 'linter',
+  configOverrides: string,
+): [CompilerOutput, 'flow' | 'typescript', PluginOptions | null] {
+  const results = new Map<string, Array<PrintedCompilerPipelineValue>>();
+  const error = new CompilerError();
+  const otherErrors: Array<CompilerErrorDetail | CompilerDiagnostic> = [];
+  const upsert: (result: PrintedCompilerPipelineValue) => void = result => {
+    const entry = results.get(result.name);
+    if (Array.isArray(entry)) {
+      entry.push(result);
+    } else {
+      results.set(result.name, [result]);
+    }
+  };
+  let language: 'flow' | 'typescript';
+  if (source.match(/\@flow/)) {
+    language = 'flow';
+  } else {
+    language = 'typescript';
+  }
+  let transformOutput;
+
+  let baseOpts: PluginOptions | null = null;
+  try {
+    baseOpts = parseOptions(source, mode, configOverrides);
+  } catch (err) {
+    error.details.push(
+      new CompilerErrorDetail({
+        category: ErrorCategory.Config,
+        reason: `Unexpected failure when transforming configs! \n${err}`,
+        loc: null,
+        suggestions: null,
+      }),
+    );
+  }
+  if (baseOpts) {
+    try {
+      const logIR = (result: CompilerPipelineValue): void => {
+        switch (result.kind) {
+          case 'ast': {
+            break;
+          }
+          case 'hir': {
+            upsert({
+              kind: 'hir',
+              fnName: result.value.id,
+              name: result.name,
+              value: printFunctionWithOutlined(result.value),
+            });
+            break;
+          }
+          case 'reactive': {
+            upsert({
+              kind: 'reactive',
+              fnName: result.value.id,
+              name: result.name,
+              value: printReactiveFunctionWithOutlined(result.value),
+            });
+            break;
+          }
+          case 'debug': {
+            upsert({
+              kind: 'debug',
+              fnName: null,
+              name: result.name,
+              value: result.value,
+            });
+            break;
+          }
+          default: {
+            const _: never = result;
+            throw new Error(`Unhandled result ${result}`);
+          }
+        }
+      };
+      // Add logger options to the parsed options
+      const opts = {
+        ...baseOpts,
+        logger: {
+          debugLogIRs: logIR,
+          logEvent: (_filename: string | null, event: LoggerEvent): void => {
+            if (event.kind === 'CompileError') {
+              otherErrors.push(event.detail);
+            }
+          },
+        },
+      };
+      transformOutput = invokeCompiler(source, language, opts);
+    } catch (err) {
+      /**
+       * error might be an invariant violation or other runtime error
+       * (i.e. object shape that is not CompilerError)
+       */
+      if (err instanceof CompilerError && err.details.length > 0) {
+        error.merge(err);
+      } else {
+        /**
+         * Handle unexpected failures by logging (to get a stack trace)
+         * and reporting
+         */
+        error.details.push(
+          new CompilerErrorDetail({
+            category: ErrorCategory.Invariant,
+            reason: `Unexpected failure when transforming input! \n${err}`,
+            loc: null,
+            suggestions: null,
+          }),
+        );
+      }
+    }
+  }
+  // Only include logger errors if there weren't other errors
+  if (!error.hasErrors() && otherErrors.length !== 0) {
+    otherErrors.forEach(e => error.details.push(e));
+  }
+  if (error.hasErrors() || !transformOutput) {
+    return [{kind: 'err', results, error}, language, baseOpts];
+  }
+  return [
+    {kind: 'ok', results, transformOutput, errors: error.details},
+    language,
+    baseOpts,
+  ];
+}