[compiler] Name anonymous functions from inlined useCallbacks

@eps1lon flagged this case. Inlined useCallback has an extra LoadLocal indirection which caused us not to add a name. While I was there I added some extra checks to make sure we don't generate names for a given node twice (just in case).

.eslintrc.js

@@ -517,14 +517,6 @@ module.exports = {
         __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'],

.github/workflows/compiler_prereleases.yml

@@ -19,9 +19,6 @@ on:
       tag_version:
         required: false
         type: string
-      dry_run:
-        required: false
-        type: boolean
     secrets:
       NPM_TOKEN:
         required: true
@@ -58,13 +55,7 @@ jobs:
           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
+      - 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

@@ -17,9 +17,6 @@ on:
       tag_version:
         required: false
         type: string
-      dry_run:
-        required: false
-        type: boolean
 
 permissions: {}
 
@@ -36,6 +33,5 @@ jobs:
       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

@@ -19,6 +19,5 @@ jobs:
       release_channel: experimental
       dist_tag: experimental
       version_name: '0.0.0'
-      dry_run: false
     secrets:
       NPM_TOKEN: ${{ secrets.NPM_TOKEN }}

.github/workflows/runtime_build_and_test.yml

@@ -194,7 +194,7 @@ jobs:
         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)
+          git diff --quiet || (echo "There was a change to the Fizz runtime. Run `yarn generate-inline-fizz-runtime` and check in the result." && false)
 
   # ----- FEATURE FLAGS -----
   flags:
@@ -567,7 +567,7 @@ jobs:
       - 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)
+          git diff --quiet || (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

.github/workflows/runtime_prereleases.yml

@@ -82,6 +82,7 @@ jobs:
         run: |
           scripts/release/publish.js \
             --ci \
+            --skipTests \
             --tags=${{ inputs.dist_tag }} \
             --onlyPackages=${{ inputs.only_packages }} ${{ (inputs.dry && '') || '\'}}
             ${{ inputs.dry && '--dry' || '' }}
@@ -90,10 +91,11 @@ jobs:
         run: |
           scripts/release/publish.js \
             --ci \
+            --skipTests \
             --tags=${{ inputs.dist_tag }} \
             --skipPackages=${{ inputs.skip_packages }} ${{ (inputs.dry && '') || '\'}}
             ${{ inputs.dry && '--dry' || '' }}
-      - if: '${{ !inputs.skip_packages && !inputs.only_packages }}'
+      - if: '${{ !(inputs.skip_packages && inputs.only_packages) }}'
         name: 'Publish all packages'
         run: |
           scripts/release/publish.js \

CHANGELOG.md

@@ -1,76 +1,3 @@
-## 19.2.0 (October 1st, 2025)
-
-Below is a list of all new features, APIs, and bug fixes.
-
-Read the [React 19.2 release post](https://react.dev/blog/2025/10/01/react-19-2) for more information.
-
-### New React Features
-
-- [`<Activity>`](https://react.dev/reference/react/Activity): A new API to hide and restore the UI and internal state of its children.
-- [`useEffectEvent`](https://react.dev/reference/react/useEffectEvent) is a React Hook that lets you extract non-reactive logic into an [Effect Event](https://react.dev/learn/separating-events-from-effects#declaring-an-effect-event).
-- [`cacheSignal`](https://react.dev/reference/react/cacheSignal) (for RSCs) lets your know when the `cache()` lifetime is over.
-- [React Performance tracks](https://react.dev/reference/developer-tooling/react-performance-tracks) appear on the Performance panel’s timeline in your browser developer tools
-
-### New React DOM Features
-
-- Added resume APIs for partial pre-rendering with Web Streams:
-  - [`resume`](https://react.dev/reference/react-dom/server/resume): to resume a prerender to a stream.
-  - [`resumeAndPrerender`](https://react.dev/reference/react-dom/static/resumeAndPrerender): to resume a prerender to HTML.
-- Added resume APIs for partial pre-rendering with Node Streams:
-  - [`resumeToPipeableStream`](https://react.dev/reference/react-dom/server/resumeToPipeableStream): to resume a prerender to a stream.
-  - [`resumeAndPrerenderToNodeStream`](https://react.dev/reference/react-dom/static/resumeAndPrerenderToNodeStream): to resume a prerender to HTML.
-- Updated [`prerender`](https://react.dev/reference/react-dom/static/prerender) APIs to return a `postponed` state that can be passed to the `resume` APIs.
-
-### Notable changes
-
-- React DOM now batches suspense boundary reveals, matching the behavior of client side rendering. This change is especially noticeable when animating the reveal of Suspense boundaries e.g. with the upcoming `<ViewTransition>` Component. React will batch as much reveals as possible before the first paint while trying to hit popular first-contentful paint metrics.
-- Add Node Web Streams (`prerender`, `renderToReadableStream`) to server-side-rendering APIs for Node.js
-- Use underscore instead of `:` IDs generated by useId
-
-### All Changes
-
-#### React
-
-- `<Activity />` was developed over many years, starting before `ClassComponent.setState` (@acdlite @sebmarkbage and many others)
-- Stringify context as "SomeContext" instead of "SomeContext.Provider" (@kassens [#33507](https://github.com/facebook/react/pull/33507))
-- Include stack of cause of React instrumentation errors with `%o` placeholder (@eps1lon [#34198](https://github.com/facebook/react/pull/34198))
-- Fix infinite `useDeferredValue` loop in popstate event (@acdlite [#32821](https://github.com/facebook/react/pull/32821))
-- Fix a bug when an initial value was passed to `useDeferredValue` (@acdlite [#34376](https://github.com/facebook/react/pull/34376))
-- Fix a crash when submitting forms with Client Actions (@sebmarkbage [#33055](https://github.com/facebook/react/pull/33055))
-- Hide/unhide the content of dehydrated suspense boundaries if they resuspend (@sebmarkbage [#32900](https://github.com/facebook/react/pull/32900))
-- Avoid stack overflow on wide trees during Hot Reload (@sophiebits [#34145](https://github.com/facebook/react/pull/34145))
-- Improve Owner and Component stacks in various places (@sebmarkbage, @eps1lon: [#33629](https://github.com/facebook/react/pull/33629), [#33724](https://github.com/facebook/react/pull/33724), [#32735](https://github.com/facebook/react/pull/32735), [#33723](https://github.com/facebook/react/pull/33723))
-- Add `cacheSignal` (@sebmarkbage [#33557](https://github.com/facebook/react/pull/33557))
-
-#### React DOM
-
-- Block on Suspensey Fonts during reveal of server-side-rendered content (@sebmarkbage [#33342](https://github.com/facebook/react/pull/33342))
-- Use underscore instead of `:` for IDs generated by `useId` (@sebmarkbage, @eps1lon: [#32001](https://github.com/facebook/react/pull/32001), [https://github.com/facebook/react/pull/33342](https://github.com/facebook/react/pull/33342)[#33099](https://github.com/facebook/react/pull/33099), [#33422](https://github.com/facebook/react/pull/33422))
-- Stop warning when ARIA 1.3 attributes are used (@Abdul-Omira [#34264](https://github.com/facebook/react/pull/34264))
-- Allow `nonce` to be used on hoistable styles (@Andarist [#32461](https://github.com/facebook/react/pull/32461))
-- Warn for using a React owned node as a Container if it also has text content (@sebmarkbage [#32774](https://github.com/facebook/react/pull/32774))
-- s/HTML/text for for error messages if text hydration mismatches (@rickhanlonii [#32763](https://github.com/facebook/react/pull/32763))
-- Fix a bug with `React.use` inside `React.lazy`\-ed Component (@hi-ogawa [#33941](https://github.com/facebook/react/pull/33941))
-- Enable the `progressiveChunkSize` option for server-side-rendering APIs (@sebmarkbage [#33027](https://github.com/facebook/react/pull/33027))
-- Fix a bug with deeply nested Suspense inside Suspense fallback when server-side-rendering (@gnoff [#33467](https://github.com/facebook/react/pull/33467))
-- Avoid hanging when suspending after aborting while rendering (@gnoff [#34192](https://github.com/facebook/react/pull/34192))
-- Add Node Web Streams to server-side-rendering APIs for Node.js (@sebmarkbage [#33475](https://github.com/facebook/react/pull/33475))
-
-#### React Server Components
-
-- Preload `<img>` and `<link>` using hints before they're rendered (@sebmarkbage [#34604](https://github.com/facebook/react/pull/34604))
-- Log error if production elements are rendered during development (@eps1lon [#34189](https://github.com/facebook/react/pull/34189))
-- Fix a bug when returning a Temporary reference (e.g. a Client Reference) from Server Functions (@sebmarkbage [#34084](https://github.com/facebook/react/pull/34084), @denk0403 [#33761](https://github.com/facebook/react/pull/33761))
-- Pass line/column to `filterStackFrame` (@eps1lon [#33707](https://github.com/facebook/react/pull/33707))
-- Support Async Modules in Turbopack Server References (@lubieowoce [#34531](https://github.com/facebook/react/pull/34531))
-- Add support for .mjs file extension in Webpack (@jennyscript [#33028](https://github.com/facebook/react/pull/33028))
-- Fix a wrong missing key warning (@unstubbable [#34350](https://github.com/facebook/react/pull/34350))
-- Make console log resolve in predictable order (@sebmarkbage [#33665](https://github.com/facebook/react/pull/33665))
-
-#### React Reconciler
-
-- [createContainer](https://github.com/facebook/react/blob/v19.2.0/packages/react-reconciler/src/ReactFiberReconciler.js#L255-L261) and [createHydrationContainer](https://github.com/facebook/react/blob/v19.2.0/packages/react-reconciler/src/ReactFiberReconciler.js#L305-L312) had their parameter order adjusted after `on*` handlers to account for upcoming experimental APIs
-
 ## 19.1.1 (July 28, 2025)
 
 ### React

MAINTAINERS

@@ -1,6 +1,5 @@
 acdlite
 eps1lon
-EugeneChoi4
 gaearon
 gnoff
 unstubbable

ReactVersions.js

@@ -7,18 +7,18 @@
 //
 // The @latest channel uses the version as-is, e.g.:
 //
-//   19.3.0
+//   19.1.0
 //
 // The @canary channel appends additional information, with the scheme
 // <version>-<label>-<commit_sha>, e.g.:
 //
-//   19.3.0-canary-a1c2d3e4
+//   19.1.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';
+const ReactVersion = '19.2.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
@@ -33,8 +33,8 @@ const canaryChannelLabel = 'canary';
 const rcNumber = 0;
 
 const stablePackages = {
-  'eslint-plugin-react-hooks': '7.0.0',
-  'jest-react': '0.18.0',
+  'eslint-plugin-react-hooks': '6.1.0',
+  'jest-react': '0.17.0',
   react: ReactVersion,
   'react-art': ReactVersion,
   'react-dom': ReactVersion,
@@ -42,12 +42,12 @@ const stablePackages = {
   'react-server-dom-turbopack': ReactVersion,
   'react-server-dom-parcel': ReactVersion,
   'react-is': ReactVersion,
-  'react-reconciler': '0.34.0',
-  'react-refresh': '0.19.0',
+  'react-reconciler': '0.33.0',
+  'react-refresh': '0.18.0',
   'react-test-renderer': ReactVersion,
-  'use-subscription': '1.13.0',
-  'use-sync-external-store': '1.7.0',
-  scheduler: '0.28.0',
+  'use-subscription': '1.12.0',
+  'use-sync-external-store': '1.6.0',
+  scheduler: '0.27.0',
 };
 
 // These packages do not exist in the @canary or @latest channel, only

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

@@ -1,5 +0,0 @@
-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

@@ -1,14 +0,0 @@
-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/page.spec.ts

@@ -5,9 +5,8 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import {expect, test, type Page} from '@playwright/test';
+import {expect, test} from '@playwright/test';
 import {encodeStore, type Store} from '../../lib/stores';
-import {defaultConfig} from '../../lib/defaultStore';
 import {format} from 'prettier';
 
 function isMonacoLoaded(): boolean {
@@ -21,16 +20,6 @@ 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',
@@ -132,9 +121,10 @@ test('editor should open successfully', async ({page}) => {
 
 test('editor should compile from hash successfully', async ({page}) => {
   const store: Store = {
-    source: TEST_SOURCE,
-    config: defaultConfig,
-    showInternals: false,
+    source: `export default function TestComponent({ x }) {
+      return <Button>{x}</Button>;
+    }
+    `,
   };
   const hash = encodeStore(store);
   await page.goto(`/#${hash}`, {waitUntil: 'networkidle'});
@@ -146,7 +136,7 @@ test('editor should compile from hash successfully', async ({page}) => {
     path: 'test-results/01-compiles-from-hash.png',
   });
   const text =
-    (await page.locator('.monaco-editor-output').allInnerTexts()) ?? [];
+    (await page.locator('.monaco-editor').nth(3).allInnerTexts()) ?? [];
   const output = await formatPrint(text);
 
   expect(output).not.toEqual('');
@@ -155,9 +145,10 @@ test('editor should compile from hash successfully', async ({page}) => {
 
 test('reset button works', async ({page}) => {
   const store: Store = {
-    source: TEST_SOURCE,
-    config: defaultConfig,
-    showInternals: false,
+    source: `export default function TestComponent({ x }) {
+      return <Button>{x}</Button>;
+    }
+    `,
   };
   const hash = encodeStore(store);
   await page.goto(`/#${hash}`, {waitUntil: 'networkidle'});
@@ -166,201 +157,33 @@ test('reset button works', async ({page}) => {
   // 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()) ?? [];
+    (await page.locator('.monaco-editor').nth(3).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`,
+      path: `test-results/03-0${idx}-${t.name}.png`,
     });
 
     const text =
-      (await page.locator('.monaco-editor-output').allInnerTexts()) ?? [];
+      (await page.locator('.monaco-editor').nth(3).allInnerTexts()) ?? [];
     let output: string;
     if (t.noFormat) {
       output = text.join('');

compiler/apps/playground/components/AccordionWindow.tsx

@@ -6,13 +6,7 @@
  */
 
 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';
+import React, {useCallback} from 'react';
 
 type TabsRecord = Map<string, React.ReactNode>;
 
@@ -24,21 +18,19 @@ export default function AccordionWindow(props: {
   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 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>
   );
 }
@@ -55,25 +47,18 @@ function AccordionWindowItem({
   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);
-    });
-  };
+  const toggleTabs = useCallback(() => {
+    const nextState = new Set(tabsOpen);
+    if (nextState.has(name)) {
+      nextState.delete(name);
+    } else {
+      nextState.add(name);
+    }
+    setTabsOpen(nextState);
+  }, [tabsOpen, name, setTabsOpen]);
 
   // Replace spaces with non-breaking spaces
   const displayName = name.replace(/ /g, '\u00A0');
@@ -81,45 +66,31 @@ function AccordionWindowItem({
   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>
+        <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
-          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 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>
       )}
     </div>
   );

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

@@ -6,20 +6,15 @@
  */
 
 import MonacoEditor, {loader, type Monaco} from '@monaco-editor/react';
+import {PluginOptions} from 'babel-plugin-react-compiler';
 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,
-} from 'react';
+import React, {useState, useRef, useEffect} from 'react';
 import {Resizable} from 're-resizable';
 import {useStore, useStoreDispatch} from '../StoreContext';
-import {monacoConfigOptions} from './monacoOptions';
+import {monacoOptions} from './monacoOptions';
 import {IconChevron} from '../Icons/IconChevron';
-import {CONFIG_PANEL_TRANSITION} from '../../lib/transitionTypes';
+import prettyFormat from 'pretty-format';
 
 // @ts-expect-error - webpack asset/source loader handles .d.ts files as strings
 import compilerTypeDefs from 'babel-plugin-react-compiler/dist/index.d.ts';
@@ -27,9 +22,9 @@ import compilerTypeDefs from 'babel-plugin-react-compiler/dist/index.d.ts';
 loader.config({monaco});
 
 export default function ConfigEditor({
-  formattedAppliedConfig,
+  appliedOptions,
 }: {
-  formattedAppliedConfig: string;
+  appliedOptions: PluginOptions | null;
 }): React.ReactElement {
   const [isExpanded, setIsExpanded] = useState(false);
 
@@ -41,27 +36,15 @@ export default function ConfigEditor({
           display: isExpanded ? 'block' : 'none',
         }}>
         <ExpandedEditor
-          onToggle={() => {
-            startTransition(() => {
-              addTransitionType(CONFIG_PANEL_TRANSITION);
-              setIsExpanded(false);
-            });
-          }}
-          formattedAppliedConfig={formattedAppliedConfig}
+          onToggle={setIsExpanded}
+          appliedOptions={appliedOptions}
         />
       </div>
       <div
         style={{
           display: !isExpanded ? 'block' : 'none',
         }}>
-        <CollapsedEditor
-          onToggle={() => {
-            startTransition(() => {
-              addTransitionType(CONFIG_PANEL_TRANSITION);
-              setIsExpanded(true);
-            });
-          }}
-        />
+        <CollapsedEditor onToggle={setIsExpanded} />
       </div>
     </>
   );
@@ -69,10 +52,10 @@ export default function ConfigEditor({
 
 function ExpandedEditor({
   onToggle,
-  formattedAppliedConfig,
+  appliedOptions,
 }: {
   onToggle: (expanded: boolean) => void;
-  formattedAppliedConfig: string;
+  appliedOptions: PluginOptions | null;
 }): React.ReactElement {
   const store = useStore();
   const dispatchStore = useStoreDispatch();
@@ -120,78 +103,96 @@ function ExpandedEditor({
     });
   };
 
-  return (
-    <ViewTransition
-      update={{[CONFIG_PANEL_TRANSITION]: 'slide-in', 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>
+  const formattedAppliedOptions = appliedOptions
+    ? prettyFormat(appliedOptions, {
+        printFunctionName: false,
+        printBasicPrototype: false,
+      })
+    : 'Invalid configs';
 
-          <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>
+  return (
+    <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(false)}
+          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 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 className="flex-1 rounded-lg overflow-hidden border border-gray-300">
+            <MonacoEditor
+              path={'config.ts'}
+              language={'typescript'}
+              value={store.config}
+              onMount={handleMount}
+              onChange={handleChange}
+              loading={''}
+              options={{
+                ...monacoOptions,
+                lineNumbers: 'off',
+                renderLineHighlight: 'none',
+                overviewRulerBorder: false,
+                overviewRulerLanes: 0,
+                fontSize: 12,
+                scrollBeyondLastLine: false,
+                glyphMargin: false,
+              }}
+            />
           </div>
         </div>
-      </Resizable>
-    </ViewTransition>
+        <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 rounded-lg overflow-hidden border border-gray-300">
+            <MonacoEditor
+              path={'applied-config.js'}
+              language={'javascript'}
+              value={formattedAppliedOptions}
+              loading={''}
+              options={{
+                ...monacoOptions,
+                lineNumbers: 'off',
+                renderLineHighlight: 'none',
+                overviewRulerBorder: false,
+                overviewRulerLanes: 0,
+                fontSize: 12,
+                scrollBeyondLastLine: false,
+                readOnly: true,
+                glyphMargin: false,
+              }}
+            />
+          </div>
+        </div>
+      </div>
+    </Resizable>
   );
 }
 
 function CollapsedEditor({
   onToggle,
 }: {
-  onToggle: () => void;
+  onToggle: (expanded: boolean) => void;
 }): React.ReactElement {
   return (
     <div
@@ -200,7 +201,7 @@ function CollapsedEditor({
       <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}
+        onClick={() => onToggle(true)}
         style={{
           top: '50%',
           marginTop: '-32px',

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

@@ -5,17 +5,312 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import {
+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 {useDeferredValue, useMemo, useState} from 'react';
+import {useDeferredValue, useMemo} 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';
+import {
+  CompilerOutput,
+  CompilerTransformOutput,
+  default as Output,
+  PrintedCompilerPipelineValue,
+} from './Output';
+import {transformFromAstSync} from '@babel/core';
+
+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;
+}
+
+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()) {
+    return [{kind: 'err', results, error}, language, baseOpts];
+  }
+  return [
+    {kind: 'ok', results, transformOutput, errors: error.details},
+    language,
+    baseOpts,
+  ];
+}
 
 export default function Editor(): JSX.Element {
   const store = useStore();
@@ -28,7 +323,6 @@ export default function Editor(): JSX.Element {
     () => compile(deferredStore.source, 'linter', deferredStore.config),
     [deferredStore.source, deferredStore.config],
   );
-  const [formattedAppliedConfig, setFormattedAppliedConfig] = useState('');
 
   let mergedOutput: CompilerOutput;
   let errors: Array<CompilerErrorDetail | CompilerDiagnostic>;
@@ -42,26 +336,19 @@ export default function Editor(): JSX.Element {
     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} />
+          <ConfigEditor appliedOptions={appliedOptions} />
         </div>
         <div className="flex flex-1 min-w-0">
-          <Input language={language} errors={errors} />
-          <Output store={deferredStore} compilerOutput={mergedOutput} />
+          <div className="flex-1 min-w-[550px] sm:min-w-0">
+            <Input language={language} errors={errors} />
+          </div>
+          <div className="flex-1 min-w-[550px] sm:min-w-0">
+            <Output store={deferredStore} compilerOutput={mergedOutput} />
+          </div>
         </div>
       </div>
     </>

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

@@ -13,17 +13,11 @@ import {
 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 {useEffect, useState} 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';
 
@@ -151,7 +145,6 @@ export default function Input({errors, language}: Props): JSX.Element {
       value={store.source}
       onMount={handleMount}
       onChange={handleChange}
-      className="monaco-editor-input"
       options={monacoOptions}
       loading={''}
     />
@@ -161,13 +154,9 @@ export default function Input({errors, language}: Props): JSX.Element {
   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">
+    <div className="relative flex flex-col flex-none border-r border-gray-200">
+      <div className="!h-[calc(100vh_-_3.5rem)]">
+        <div className="flex flex-col h-full">
           <TabbedWindow
             tabs={tabs}
             activeTab={activeTab}
@@ -175,6 +164,6 @@ export default function Input({errors, language}: Props): JSX.Element {
           />
         </div>
       </div>
-    </ViewTransition>
+    </div>
   );
 }

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

@@ -19,27 +19,12 @@ import {
 import parserBabel from 'prettier/plugins/babel';
 import * as prettierPluginEstree from 'prettier/plugins/estree';
 import * as prettier from 'prettier/standalone';
+import {memo, ReactNode, useEffect, useState} from 'react';
 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);
 
@@ -47,10 +32,6 @@ 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';
@@ -219,25 +200,6 @@ ${code}
   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));
 }
@@ -251,17 +213,12 @@ function getSourceMapUrl(code: string, map: string): string | null {
 }
 
 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 [tabs, setTabs] = useState<Map<string, React.ReactNode>>(
+    () => new Map(),
+  );
   const [activeTab, setActiveTab] = useState<string>('Output');
 
   /*
@@ -271,19 +228,18 @@ function OutputContent({store, compilerOutput}: Props): JSX.Element {
   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');
-      });
-    }
+    setTabsOpen(new Set(['Output']));
+    setActiveTab('Output');
   }
 
+  useEffect(() => {
+    tabify(store.source, compilerOutput, store.showInternals).then(tabs => {
+      setTabs(tabs);
+    });
+  }, [store.source, compilerOutput, store.showInternals]);
+
   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) {
@@ -298,40 +254,25 @@ function OutputContent({store, compilerOutput}: Props): JSX.Element {
       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>
+      <TabbedWindow
+        tabs={tabs}
+        activeTab={activeTab}
+        onTabChange={setActiveTab}
+      />
     );
   }
 
   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>
+    <AccordionWindow
+      defaultTab={store.showInternals ? 'HIR' : 'Output'}
+      setTabsOpen={setTabsOpen}
+      tabsOpen={tabsOpen}
+      tabs={tabs}
+      changedPasses={changedPasses}
+    />
   );
 }
 
@@ -386,18 +327,12 @@ function TextTabContent({
           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,
+            lineDecorationsWidth: 0,
+            lineNumbersMinChars: 0,
           }}
         />
       ) : (
@@ -405,7 +340,6 @@ function TextTabContent({
           language={language ?? 'javascript'}
           value={output}
           loading={''}
-          className="monaco-editor-output"
           options={{
             ...monacoOptions,
             readOnly: true,

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

@@ -32,14 +32,3 @@ export const monacoOptions: Partial<EditorProps['options']> = {
 
   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

@@ -10,16 +10,11 @@ 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 {useState} 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);
@@ -63,16 +58,11 @@ export default function Header(): JSX.Element {
       </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">
+          <label className="relative inline-block w-[34px] h-5">
             <input
               type="checkbox"
               checked={store.showInternals}
-              onChange={() =>
-                startTransition(() => {
-                  addTransitionType(TOGGLE_INTERNALS_TRANSITION);
-                  dispatchStore({type: 'toggleInternals'});
-                })
-              }
+              onChange={() => dispatchStore({type: 'toggleInternals'})}
               className="absolute opacity-0 cursor-pointer h-full w-full m-0"
             />
             <span

compiler/apps/playground/components/TabbedWindow.tsx

@@ -4,14 +4,8 @@
  * 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 React from 'react';
 import clsx from 'clsx';
-import {TOGGLE_TAB_TRANSITION} from '../lib/transitionTypes';
 
 export default function TabbedWindow({
   tabs,
@@ -22,59 +16,27 @@ export default function TabbedWindow({
   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 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={() => onTabChange(tab)}
+              className={clsx(
+                'active:scale-95 transition-transform py-1.5 px-1.5 xs:px-3 sm:px-4 rounded-full text-sm',
+                !isActive && 'hover:bg-primary/5',
+                isActive && 'bg-highlight text-link',
+              )}>
+              {tab}
+            </button>
+          );
+        })}
+      </div>
+      <div className="flex-1 overflow-hidden w-full h-full">
+        {tabs.get(activeTab)}
       </div>
     </div>
   );

compiler/apps/playground/lib/compilation.ts

@@ -1,308 +0,0 @@
-/**
- * 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,
-  ];
-}

compiler/apps/playground/lib/defaultStore.ts

@@ -18,7 +18,7 @@ import type { PluginOptions } from 'babel-plugin-react-compiler/dist';
 
 ({
   //compilationMode: "all"
-} satisfies PluginOptions);`;
+} satisfies Partial<PluginOptions>);`;
 
 export const defaultStore: Store = {
   source: index,

compiler/apps/playground/lib/transitionTypes.ts

@@ -1,11 +0,0 @@
-/**
- * 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 const CONFIG_PANEL_TRANSITION = 'config-panel';
-export const TOGGLE_TAB_TRANSITION = 'toggle-tab';
-export const TOGGLE_INTERNALS_TRANSITION = 'toggle-internals';
-export const EXPAND_ACCORDION_TRANSITION = 'open-accordion';

compiler/apps/playground/next.config.js

@@ -11,7 +11,6 @@ const path = require('path');
 const nextConfig = {
   experimental: {
     reactCompiler: true,
-    viewTransition: true,
   },
   reactStrictMode: true,
   webpack: (config, options) => {

compiler/apps/playground/package.json

@@ -32,7 +32,6 @@
     "hermes-eslint": "^0.25.0",
     "hermes-parser": "^0.25.0",
     "invariant": "^2.2.4",
-    "lru-cache": "^11.2.2",
     "lz-string": "^1.5.0",
     "monaco-editor": "^0.52.0",
     "next": "15.6.0-canary.7",

compiler/apps/playground/styles/globals.css

@@ -69,66 +69,3 @@
     scrollbar-width: none; /* Firefox */
   }
 }
-
-::view-transition-old(.slide-in) {
-  animation-name: slideOutLeft;
-}
-::view-transition-new(.slide-in) {
-  animation-name: slideInLeft;
-}
-::view-transition-group(.slide-in) {
-  z-index: 1;
-}
-
-@keyframes slideOutLeft {
-  from {
-    transform: translateX(0);
-  }
-  to {
-    transform: translateX(-100%);
-  }
-}
-@keyframes slideInLeft {
-  from {
-    transform: translateX(-100%);
-  }
-  to {
-    transform: translateX(0);
-  }
-}
-
-::view-transition-old(.container),
-::view-transition-new(.container) {
-  height: 100%;
-}
-
-::view-transition-old(.accordion-container),
-::view-transition-new(.accordion-container) {
-  height: 100%;
-  object-fit: none;
-  object-position: left;
-}
-
-::view-transition-old(.tab-highlight),
-::view-transition-new(.tab-highlight) {
-  height: 100%;
-}
-::view-transition-group(.tab-text) {
-	z-index: 1;
-}
-
-::view-transition-old(.expand-accordion),
-::view-transition-new(.expand-accordion) {
-  width: auto;
-}
-::view-transition-group(.expand-accordion) {
-  overflow: clip;
-}
-
-/**
- * For some reason, the original Monaco editor is still visible to the
- * left of the DiffEditor. This is a workaround for better visual clarity.
- */
-.monaco-diff-editor .editor.original{
-  visibility: hidden !important;
-}

compiler/apps/playground/yarn.lock

@@ -3104,11 +3104,6 @@ lru-cache@^10.2.0:
   resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-10.4.3.tgz#410fc8a17b70e598013df257c2446b7f3383f119"
   integrity sha512-JNAzZcXrCt42VGLuYz0zfAzDfAvJWW6AfYlDBQyDV5DClI2m5sAmK+OIO7s59XfsRsWHp02jAJrRadPRGTt6SQ==
 
-lru-cache@^11.2.2:
-  version "11.2.2"
-  resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-11.2.2.tgz#40fd37edffcfae4b2940379c0722dc6eeaa75f24"
-  integrity sha512-F9ODfyqML2coTIsQpSkRHnLSZMtkU8Q+mSfcaIyKwy58u+8k5nvAYeiNhsyMARvzNcXJ9QfWVrcPsC9e9rAxtg==
-
 lru-cache@^5.1.1:
   version "5.1.1"
   resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-5.1.1.tgz#1da27e6710271947695daf6848e847f01d84b920"

compiler/packages/babel-plugin-react-compiler/package.json

@@ -52,8 +52,8 @@
     "react-dom": "0.0.0-experimental-4beb1fd8-20241118",
     "ts-jest": "^29.1.1",
     "ts-node": "^10.9.2",
-    "zod": "^3.25.0 || ^4.0.0",
-    "zod-validation-error": "^3.5.0 || ^4.0.0"
+    "zod": "^3.22.4",
+    "zod-validation-error": "^2.1.0"
   },
   "resolutions": {
     "./**/@babel/parser": "7.7.4",

compiler/packages/babel-plugin-react-compiler/src/Babel/RunReactCompilerBabelPlugin.ts

@@ -17,7 +17,7 @@ export function runBabelPluginReactCompiler(
   text: string,
   file: string,
   language: 'flow' | 'typescript',
-  options: PluginOptions | null,
+  options: Partial<PluginOptions> | null,
   includeAst: boolean = false,
 ): BabelCore.BabelFileResult {
   const ast = BabelParser.parse(text, {

compiler/packages/babel-plugin-react-compiler/src/CompilerError.ts

@@ -536,8 +536,7 @@ function printErrorSummary(category: ErrorCategory, message: string): string {
     case ErrorCategory.StaticComponents:
     case ErrorCategory.Suppression:
     case ErrorCategory.Syntax:
-    case ErrorCategory.UseMemo:
-    case ErrorCategory.VoidUseMemo: {
+    case ErrorCategory.UseMemo: {
       heading = 'Error';
       break;
     }
@@ -583,10 +582,6 @@ export enum ErrorCategory {
    * Checking for valid usage of manual memoization
    */
   UseMemo = 'UseMemo',
-  /**
-   * Checking that useMemos always return a value
-   */
-  VoidUseMemo = 'VoidUseMemo',
   /**
    * Checking for higher order functions acting as factories for components/hooks
    */
@@ -674,21 +669,6 @@ export enum ErrorCategory {
   FBT = 'FBT',
 }
 
-export enum LintRulePreset {
-  /**
-   * Rules that are stable and included in the `recommended` preset.
-   */
-  Recommended = 'recommended',
-  /**
-   * Rules that are more experimental and only included in the `recommended-latest` preset.
-   */
-  RecommendedLatest = 'recommended-latest',
-  /**
-   * Rules that are disabled.
-   */
-  Off = 'off',
-}
-
 export type LintRule = {
   // Stores the category the rule corresponds to, used to filter errors when reporting
   category: ErrorCategory;
@@ -709,14 +689,15 @@ export type LintRule = {
   description: string;
 
   /**
-   * Configures the preset in which the rule is enabled. If 'off', the rule will not be included in
-   * any preset.
+   * If true, this rule will automatically appear in the default, "recommended" ESLint
+   * rule set. Otherwise it will be part of an `allRules` export that developers can
+   * use to opt-in to showing output of all possible rules.
    *
    * NOTE: not all validations are enabled by default! Setting this flag only affects
    * whether a given rule is part of the recommended set. The corresponding validation
    * also should be enabled by default if you want the error to actually show up!
    */
-  preset: LintRulePreset;
+  recommended: boolean;
 };
 
 const RULE_NAME_PATTERN = /^[a-z]+(-[a-z]+)*$/;
@@ -739,7 +720,7 @@ function getRuleForCategoryImpl(category: ErrorCategory): LintRule {
         name: 'automatic-effect-dependencies',
         description:
           'Verifies that automatic effect dependencies are compiled if opted-in',
-        preset: LintRulePreset.Off,
+        recommended: false,
       };
     }
     case ErrorCategory.CapitalizedCalls: {
@@ -749,7 +730,7 @@ function getRuleForCategoryImpl(category: ErrorCategory): LintRule {
         name: 'capitalized-calls',
         description:
           'Validates against calling capitalized functions/methods instead of using JSX',
-        preset: LintRulePreset.Off,
+        recommended: false,
       };
     }
     case ErrorCategory.Config: {
@@ -758,7 +739,7 @@ function getRuleForCategoryImpl(category: ErrorCategory): LintRule {
         severity: ErrorSeverity.Error,
         name: 'config',
         description: 'Validates the compiler configuration options',
-        preset: LintRulePreset.Recommended,
+        recommended: true,
       };
     }
     case ErrorCategory.EffectDependencies: {
@@ -767,7 +748,7 @@ function getRuleForCategoryImpl(category: ErrorCategory): LintRule {
         severity: ErrorSeverity.Error,
         name: 'memoized-effect-dependencies',
         description: 'Validates that effect dependencies are memoized',
-        preset: LintRulePreset.Off,
+        recommended: false,
       };
     }
     case ErrorCategory.EffectDerivationsOfState: {
@@ -777,7 +758,7 @@ function getRuleForCategoryImpl(category: ErrorCategory): LintRule {
         name: 'no-deriving-state-in-effects',
         description:
           'Validates against deriving values from state in an effect',
-        preset: LintRulePreset.Off,
+        recommended: false,
       };
     }
     case ErrorCategory.EffectSetState: {
@@ -787,7 +768,7 @@ function getRuleForCategoryImpl(category: ErrorCategory): LintRule {
         name: 'set-state-in-effect',
         description:
           'Validates against calling setState synchronously in an effect, which can lead to re-renders that degrade performance',
-        preset: LintRulePreset.Recommended,
+        recommended: true,
       };
     }
     case ErrorCategory.ErrorBoundaries: {
@@ -797,7 +778,7 @@ function getRuleForCategoryImpl(category: ErrorCategory): LintRule {
         name: 'error-boundaries',
         description:
           'Validates usage of error boundaries instead of try/catch for errors in child components',
-        preset: LintRulePreset.Recommended,
+        recommended: true,
       };
     }
     case ErrorCategory.Factories: {
@@ -808,7 +789,7 @@ function getRuleForCategoryImpl(category: ErrorCategory): LintRule {
         description:
           'Validates against higher order functions defining nested components or hooks. ' +
           'Components and hooks should be defined at the module level',
-        preset: LintRulePreset.Recommended,
+        recommended: true,
       };
     }
     case ErrorCategory.FBT: {
@@ -817,7 +798,7 @@ function getRuleForCategoryImpl(category: ErrorCategory): LintRule {
         severity: ErrorSeverity.Error,
         name: 'fbt',
         description: 'Validates usage of fbt',
-        preset: LintRulePreset.Off,
+        recommended: false,
       };
     }
     case ErrorCategory.Fire: {
@@ -826,7 +807,7 @@ function getRuleForCategoryImpl(category: ErrorCategory): LintRule {
         severity: ErrorSeverity.Error,
         name: 'fire',
         description: 'Validates usage of `fire`',
-        preset: LintRulePreset.Off,
+        recommended: false,
       };
     }
     case ErrorCategory.Gating: {
@@ -836,7 +817,7 @@ function getRuleForCategoryImpl(category: ErrorCategory): LintRule {
         name: 'gating',
         description:
           'Validates configuration of [gating mode](https://react.dev/reference/react-compiler/gating)',
-        preset: LintRulePreset.Recommended,
+        recommended: true,
       };
     }
     case ErrorCategory.Globals: {
@@ -847,7 +828,7 @@ function getRuleForCategoryImpl(category: ErrorCategory): LintRule {
         description:
           'Validates against assignment/mutation of globals during render, part of ensuring that ' +
           '[side effects must render outside of render](https://react.dev/reference/rules/components-and-hooks-must-be-pure#side-effects-must-run-outside-of-render)',
-        preset: LintRulePreset.Recommended,
+        recommended: true,
       };
     }
     case ErrorCategory.Hooks: {
@@ -861,7 +842,7 @@ function getRuleForCategoryImpl(category: ErrorCategory): LintRule {
          * We need to dedeupe these (moving the remaining bits into the compiler) and then enable
          * this rule.
          */
-        preset: LintRulePreset.Off,
+        recommended: false,
       };
     }
     case ErrorCategory.Immutability: {
@@ -871,7 +852,7 @@ function getRuleForCategoryImpl(category: ErrorCategory): LintRule {
         name: 'immutability',
         description:
           'Validates against mutating props, state, and other values that [are immutable](https://react.dev/reference/rules/components-and-hooks-must-be-pure#props-and-state-are-immutable)',
-        preset: LintRulePreset.Recommended,
+        recommended: true,
       };
     }
     case ErrorCategory.Invariant: {
@@ -880,7 +861,7 @@ function getRuleForCategoryImpl(category: ErrorCategory): LintRule {
         severity: ErrorSeverity.Error,
         name: 'invariant',
         description: 'Internal invariants',
-        preset: LintRulePreset.Off,
+        recommended: false,
       };
     }
     case ErrorCategory.PreserveManualMemo: {
@@ -892,7 +873,7 @@ function getRuleForCategoryImpl(category: ErrorCategory): LintRule {
           'Validates that existing manual memoized is preserved by the compiler. ' +
           'React Compiler will only compile components and hooks if its inference ' +
           '[matches or exceeds the existing manual memoization](https://react.dev/learn/react-compiler/introduction#what-should-i-do-about-usememo-usecallback-and-reactmemo)',
-        preset: LintRulePreset.Recommended,
+        recommended: true,
       };
     }
     case ErrorCategory.Purity: {
@@ -902,7 +883,7 @@ function getRuleForCategoryImpl(category: ErrorCategory): LintRule {
         name: 'purity',
         description:
           'Validates that [components/hooks are pure](https://react.dev/reference/rules/components-and-hooks-must-be-pure) by checking that they do not call known-impure functions',
-        preset: LintRulePreset.Recommended,
+        recommended: true,
       };
     }
     case ErrorCategory.Refs: {
@@ -912,7 +893,7 @@ function getRuleForCategoryImpl(category: ErrorCategory): LintRule {
         name: 'refs',
         description:
           'Validates correct usage of refs, not reading/writing during render. See the "pitfalls" section in [`useRef()` usage](https://react.dev/reference/react/useRef#usage)',
-        preset: LintRulePreset.Recommended,
+        recommended: true,
       };
     }
     case ErrorCategory.RenderSetState: {
@@ -922,7 +903,7 @@ function getRuleForCategoryImpl(category: ErrorCategory): LintRule {
         name: 'set-state-in-render',
         description:
           'Validates against setting state during render, which can trigger additional renders and potential infinite render loops',
-        preset: LintRulePreset.Recommended,
+        recommended: true,
       };
     }
     case ErrorCategory.StaticComponents: {
@@ -932,7 +913,7 @@ function getRuleForCategoryImpl(category: ErrorCategory): LintRule {
         name: 'static-components',
         description:
           'Validates that components are static, not recreated every render. Components that are recreated dynamically can reset state and trigger excessive re-rendering',
-        preset: LintRulePreset.Recommended,
+        recommended: true,
       };
     }
     case ErrorCategory.Suppression: {
@@ -941,7 +922,7 @@ function getRuleForCategoryImpl(category: ErrorCategory): LintRule {
         severity: ErrorSeverity.Error,
         name: 'rule-suppression',
         description: 'Validates against suppression of other rules',
-        preset: LintRulePreset.Off,
+        recommended: false,
       };
     }
     case ErrorCategory.Syntax: {
@@ -950,7 +931,7 @@ function getRuleForCategoryImpl(category: ErrorCategory): LintRule {
         severity: ErrorSeverity.Error,
         name: 'syntax',
         description: 'Validates against invalid syntax',
-        preset: LintRulePreset.Off,
+        recommended: false,
       };
     }
     case ErrorCategory.Todo: {
@@ -959,7 +940,7 @@ function getRuleForCategoryImpl(category: ErrorCategory): LintRule {
         severity: ErrorSeverity.Hint,
         name: 'todo',
         description: 'Unimplemented features',
-        preset: LintRulePreset.Off,
+        recommended: false,
       };
     }
     case ErrorCategory.UnsupportedSyntax: {
@@ -969,7 +950,7 @@ function getRuleForCategoryImpl(category: ErrorCategory): LintRule {
         name: 'unsupported-syntax',
         description:
           'Validates against syntax that we do not plan to support in React Compiler',
-        preset: LintRulePreset.Recommended,
+        recommended: true,
       };
     }
     case ErrorCategory.UseMemo: {
@@ -979,17 +960,7 @@ function getRuleForCategoryImpl(category: ErrorCategory): LintRule {
         name: 'use-memo',
         description:
           'Validates usage of the useMemo() hook against common mistakes. See [`useMemo()` docs](https://react.dev/reference/react/useMemo) for more information.',
-        preset: LintRulePreset.Recommended,
-      };
-    }
-    case ErrorCategory.VoidUseMemo: {
-      return {
-        category,
-        severity: ErrorSeverity.Error,
-        name: 'void-use-memo',
-        description:
-          'Validates that useMemos always return a value. See [`useMemo()` docs](https://react.dev/reference/react/useMemo) for more information.',
-        preset: LintRulePreset.RecommendedLatest,
+        recommended: true,
       };
     }
     case ErrorCategory.IncompatibleLibrary: {
@@ -999,7 +970,7 @@ function getRuleForCategoryImpl(category: ErrorCategory): LintRule {
         name: 'incompatible-library',
         description:
           'Validates against usage of libraries which are incompatible with memoization (manual or automatic)',
-        preset: LintRulePreset.Recommended,
+        recommended: true,
       };
     }
     default: {

compiler/packages/babel-plugin-react-compiler/src/Entrypoint/Imports.ts

@@ -18,7 +18,7 @@ import {
 import {getOrInsertWith} from '../Utils/utils';
 import {ExternalFunction, isHookName} from '../HIR/Environment';
 import {Err, Ok, Result} from '../Utils/Result';
-import {LoggerEvent, ParsedPluginOptions} from './Options';
+import {LoggerEvent, PluginOptions} from './Options';
 import {BabelFn, getReactCompilerRuntimeModule} from './Program';
 import {SuppressionRange} from './Suppression';
 
@@ -56,7 +56,7 @@ export function validateRestrictedImports(
 type ProgramContextOptions = {
   program: NodePath<t.Program>;
   suppressions: Array<SuppressionRange>;
-  opts: ParsedPluginOptions;
+  opts: PluginOptions;
   filename: string | null;
   code: string | null;
   hasModuleScopeOptOut: boolean;
@@ -66,7 +66,7 @@ export class ProgramContext {
    * Program and environment context
    */
   scope: BabelScope;
-  opts: ParsedPluginOptions;
+  opts: PluginOptions;
   filename: string | null;
   code: string | null;
   reactRuntimeModule: string;
@@ -240,7 +240,7 @@ export function addImportsToProgram(
   programContext: ProgramContext,
 ): void {
   const existingImports = getExistingImports(path);
-  const stmts: Array<t.ImportDeclaration | t.VariableDeclaration> = [];
+  const stmts: Array<t.ImportDeclaration> = [];
   const sortedModules = [...programContext.imports.entries()].sort(([a], [b]) =>
     a.localeCompare(b),
   );
@@ -303,29 +303,9 @@ export function addImportsToProgram(
     if (maybeExistingImports != null) {
       maybeExistingImports.pushContainer('specifiers', importSpecifiers);
     } else {
-      if (path.node.sourceType === 'module') {
-        stmts.push(
-          t.importDeclaration(importSpecifiers, t.stringLiteral(moduleName)),
-        );
-      } else {
-        stmts.push(
-          t.variableDeclaration('const', [
-            t.variableDeclarator(
-              t.objectPattern(
-                sortedImport.map(specifier => {
-                  return t.objectProperty(
-                    t.identifier(specifier.imported),
-                    t.identifier(specifier.name),
-                  );
-                }),
-              ),
-              t.callExpression(t.identifier('require'), [
-                t.stringLiteral(moduleName),
-              ]),
-            ),
-          ]),
-        );
-      }
+      stmts.push(
+        t.importDeclaration(importSpecifiers, t.stringLiteral(moduleName)),
+      );
     }
   }
   path.unshiftContainer('body', stmts);

compiler/packages/babel-plugin-react-compiler/src/Entrypoint/Options.ts

@@ -6,7 +6,7 @@
  */
 
 import * as t from '@babel/types';
-import {z} from 'zod/v4';
+import {z} from 'zod';
 import {
   CompilerDiagnostic,
   CompilerError,
@@ -20,7 +20,7 @@ import {
   tryParseExternalFunction,
 } from '../HIR/Environment';
 import {hasOwnProperty} from '../Utils/utils';
-import {fromZodError} from 'zod-validation-error/v4';
+import {fromZodError} from 'zod-validation-error';
 import {CompilerPipelineValue} from './Pipeline';
 
 const PanicThresholdOptionsSchema = z.enum([
@@ -51,8 +51,8 @@ const CustomOptOutDirectiveSchema = z
   .default(null);
 type CustomOptOutDirective = z.infer<typeof CustomOptOutDirectiveSchema>;
 
-export type PluginOptions = Partial<{
-  environment: Partial<EnvironmentConfig>;
+export type PluginOptions = {
+  environment: EnvironmentConfig;
 
   logger: Logger | null;
 
@@ -166,11 +166,7 @@ export type PluginOptions = Partial<{
    * a userspace approximation of runtime APIs.
    */
   target: CompilerReactTarget;
-}>;
-
-export type ParsedPluginOptions = Required<
-  Omit<PluginOptions, 'environment'>
-> & {environment: EnvironmentConfig};
+};
 
 const CompilerReactTargetSchema = z.union([
   z.literal('17'),
@@ -286,7 +282,7 @@ export type Logger = {
   debugLogIRs?: (value: CompilerPipelineValue) => void;
 };
 
-export const defaultOptions: ParsedPluginOptions = {
+export const defaultOptions: PluginOptions = {
   compilationMode: 'infer',
   panicThreshold: 'none',
   environment: parseEnvironmentConfig({}).unwrap(),
@@ -303,9 +299,9 @@ export const defaultOptions: ParsedPluginOptions = {
   enableReanimatedCheck: true,
   customOptOutDirectives: null,
   target: '19',
-};
+} as const;
 
-export function parsePluginOptions(obj: unknown): ParsedPluginOptions {
+export function parsePluginOptions(obj: unknown): PluginOptions {
   if (obj == null || typeof obj !== 'object') {
     return defaultOptions;
   }

compiler/packages/babel-plugin-react-compiler/src/Entrypoint/Program.ts

@@ -23,11 +23,7 @@ import {
   ProgramContext,
   validateRestrictedImports,
 } from './Imports';
-import {
-  CompilerReactTarget,
-  ParsedPluginOptions,
-  PluginOptions,
-} from './Options';
+import {CompilerReactTarget, PluginOptions} from './Options';
 import {compileFn} from './Pipeline';
 import {
   filterSuppressionsThatAffectFunction,
@@ -38,7 +34,7 @@ import {GeneratedSource} from '../HIR';
 import {Err, Ok, Result} from '../Utils/Result';
 
 export type CompilerPass = {
-  opts: ParsedPluginOptions;
+  opts: PluginOptions;
   filename: string | null;
   comments: Array<t.CommentBlock | t.CommentLine>;
   code: string | null;
@@ -49,7 +45,7 @@ const DYNAMIC_GATING_DIRECTIVE = new RegExp('^use memo if\\(([^\\)]*)\\)$');
 
 export function tryFindDirectiveEnablingMemoization(
   directives: Array<t.Directive>,
-  opts: ParsedPluginOptions,
+  opts: PluginOptions,
 ): Result<t.Directive | null, CompilerError> {
   const optIn = directives.find(directive =>
     OPT_IN_DIRECTIVES.has(directive.value.value),
@@ -85,7 +81,7 @@ export function findDirectiveDisablingMemoization(
 }
 function findDirectivesDynamicGating(
   directives: Array<t.Directive>,
-  opts: ParsedPluginOptions,
+  opts: PluginOptions,
 ): Result<
   {
     gating: ExternalFunction;

compiler/packages/babel-plugin-react-compiler/src/Entrypoint/Reanimated.ts

@@ -7,7 +7,7 @@
 
 import type * as BabelCore from '@babel/core';
 import {hasOwnProperty} from '../Utils/utils';
-import {ParsedPluginOptions} from './Options';
+import {PluginOptions} from './Options';
 
 function hasModule(name: string): boolean {
   if (typeof require === 'undefined') {
@@ -52,9 +52,7 @@ export function pipelineUsesReanimatedPlugin(
   return hasModule('react-native-reanimated');
 }
 
-export function injectReanimatedFlag(
-  options: ParsedPluginOptions,
-): ParsedPluginOptions {
+export function injectReanimatedFlag(options: PluginOptions): PluginOptions {
   return {
     ...options,
     environment: {

compiler/packages/babel-plugin-react-compiler/src/HIR/CollectHoistablePropertyLoads.ts

@@ -454,32 +454,6 @@ function collectNonNullsInBlocks(
             assumedNonNullObjects.add(entry);
           }
         }
-      } else if (
-        fn.env.config.enablePreserveExistingMemoizationGuarantees &&
-        instr.value.kind === 'StartMemoize' &&
-        instr.value.deps != null
-      ) {
-        for (const dep of instr.value.deps) {
-          if (dep.root.kind === 'NamedLocal') {
-            if (
-              !isImmutableAtInstr(dep.root.value.identifier, instr.id, context)
-            ) {
-              continue;
-            }
-            for (let i = 0; i < dep.path.length; i++) {
-              const pathEntry = dep.path[i]!;
-              if (pathEntry.optional) {
-                break;
-              }
-              const depNode = context.registry.getOrCreateProperty({
-                identifier: dep.root.value.identifier,
-                path: dep.path.slice(0, i),
-                reactive: dep.root.value.reactive,
-              });
-              assumedNonNullObjects.add(depNode);
-            }
-          }
-        }
       }
     }
 

compiler/packages/babel-plugin-react-compiler/src/HIR/Environment.ts

@@ -6,8 +6,8 @@
  */
 
 import * as t from '@babel/types';
-import {ZodError, z} from 'zod/v4';
-import {fromZodError} from 'zod-validation-error/v4';
+import {ZodError, z} from 'zod';
+import {fromZodError} from 'zod-validation-error';
 import {CompilerError} from '../CompilerError';
 import {Logger, ProgramContext} from '../Entrypoint';
 import {Err, Ok, Result} from '../Utils/Result';
@@ -159,7 +159,7 @@ export const EnvironmentConfigSchema = z.object({
    * A function that, given the name of a module, can optionally return a description
    * of that module's type signature.
    */
-  moduleTypeProvider: z.nullable(z.any()).default(null),
+  moduleTypeProvider: z.nullable(z.function().args(z.string())).default(null),
 
   /**
    * A list of functions which the application compiles as macros, where
@@ -210,7 +210,7 @@ export const EnvironmentConfigSchema = z.object({
    * that if a useEffect or useCallback references a function value, that function value will be
    * considered frozen, and in turn all of its referenced variables will be considered frozen as well.
    */
-  enablePreserveExistingMemoizationGuarantees: z.boolean().default(true),
+  enablePreserveExistingMemoizationGuarantees: z.boolean().default(false),
 
   /**
    * Validates that all useMemo/useCallback values are also memoized by Forget. This mode can be
@@ -249,7 +249,7 @@ export const EnvironmentConfigSchema = z.object({
    * Allows specifying a function that can populate HIR with type information from
    * Flow
    */
-  flowTypeProvider: z.nullable(z.any()).default(null),
+  flowTypeProvider: z.nullable(z.function().args(z.string())).default(null),
 
   /**
    * Enables inference of optional dependency chains. Without this flag
@@ -906,12 +906,6 @@ export class Environment {
       if (moduleTypeProvider == null) {
         return null;
       }
-      if (typeof moduleTypeProvider !== 'function') {
-        CompilerError.throwInvalidConfig({
-          reason: `Expected a function for \`moduleTypeProvider\``,
-          loc,
-        });
-      }
       const unparsedModuleConfig = moduleTypeProvider(moduleName);
       if (unparsedModuleConfig != null) {
         const parsedModuleConfig = TypeSchema.safeParse(unparsedModuleConfig);

compiler/packages/babel-plugin-react-compiler/src/HIR/HIR.ts

@@ -16,7 +16,7 @@ import {assertExhaustive} from '../Utils/utils';
 import {Environment, ReactFunctionType} from './Environment';
 import type {HookKind} from './ObjectShape';
 import {Type, makeType} from './Types';
-import {z} from 'zod/v4';
+import {z} from 'zod';
 import type {AliasingEffect} from '../Inference/AliasingEffects';
 import {isReservedWord} from '../Utils/Keyword';
 import {Err, Ok, Result} from '../Utils/Result';

compiler/packages/babel-plugin-react-compiler/src/HIR/TypeSchema.ts

@@ -6,7 +6,7 @@
  */
 
 import {isValidIdentifier} from '@babel/types';
-import {z} from 'zod/v4';
+import {z} from 'zod';
 import {Effect, ValueKind} from '..';
 import {
   EffectSchema,

compiler/packages/babel-plugin-react-compiler/src/Inference/DropManualMemoization.ts

@@ -454,13 +454,13 @@ export function dropManualMemoization(
               if (!hasNonVoidReturn(funcToCheck.loweredFunc.func)) {
                 errors.pushDiagnostic(
                   CompilerDiagnostic.create({
-                    category: ErrorCategory.VoidUseMemo,
+                    category: ErrorCategory.UseMemo,
                     reason: 'useMemo() callbacks must return a value',
                     description: `This ${
                       manualMemo.loadInstr.value.kind === 'PropertyLoad'
-                        ? 'React.useMemo()'
-                        : 'useMemo()'
-                    } callback doesn't return a value. useMemo() is for computing and caching values, not for arbitrary side effects`,
+                        ? 'React.useMemo'
+                        : 'useMemo'
+                    } callback doesn't return a value. useMemo is for computing and caching values, not for arbitrary side effects`,
                     suggestions: null,
                   }).withDetails({
                     kind: 'error',

compiler/packages/babel-plugin-react-compiler/src/ReactiveScopes/MemoizeFbtAndMacroOperandsInSameScope.ts

@@ -7,17 +7,14 @@
 
 import {
   HIRFunction,
-  Identifier,
   IdentifierId,
-  InstructionValue,
   makeInstructionId,
   MutableRange,
   Place,
-  ReactiveScope,
+  ReactiveValue,
 } from '../HIR';
 import {Macro, MacroMethod} from '../HIR/Environment';
-import {eachInstructionValueOperand} from '../HIR/visitors';
-import {Iterable_some} from '../Utils/utils';
+import {eachReactiveValueOperand} from './visitors';
 
 /**
  * This pass supports the `fbt` translation system (https://facebook.github.io/fbt/)
@@ -51,49 +48,24 @@ export function memoizeFbtAndMacroOperandsInSameScope(
     ...Array.from(FBT_TAGS).map((tag): Macro => [tag, []]),
     ...(fn.env.config.customMacros ?? []),
   ]);
-  /**
-   * Set of all identifiers that load fbt or other macro functions or their nested
-   * properties, as well as values known to be the results of invoking macros
-   */
-  const macroTagsCalls: Set<IdentifierId> = new Set();
-  /**
-   * Mapping of lvalue => list of operands for all expressions where either
-   * the lvalue is a known fbt/macro call and/or the operands transitively
-   * contain fbt/macro calls.
-   *
-   * This is the key data structure that powers the scope merging: we start
-   * at the lvalues and merge operands into the lvalue's scope.
-   */
-  const macroValues: Map<Identifier, Array<Identifier>> = new Map();
-  // Tracks methods loaded from macros, like fbt.param or idx.foo
+  const fbtValues: Set<IdentifierId> = new Set();
   const macroMethods = new Map<IdentifierId, Array<Array<MacroMethod>>>();
-
-  visit(fn, fbtMacroTags, macroTagsCalls, macroMethods, macroValues);
-
-  for (const root of macroValues.keys()) {
-    const scope = root.scope;
-    if (scope == null) {
-      continue;
+  while (true) {
+    let vsize = fbtValues.size;
+    let msize = macroMethods.size;
+    visit(fn, fbtMacroTags, fbtValues, macroMethods);
+    if (vsize === fbtValues.size && msize === macroMethods.size) {
+      break;
     }
-    // Merge the operands into the same scope if this is a known macro invocation
-    if (!macroTagsCalls.has(root.id)) {
-      continue;
-    }
-    mergeScopes(root, scope, macroValues, macroTagsCalls);
   }
-
-  return macroTagsCalls;
+  return fbtValues;
 }
 
 export const FBT_TAGS: Set<string> = new Set([
   'fbt',
   'fbt:param',
-  'fbt:enum',
-  'fbt:plural',
   'fbs',
   'fbs:param',
-  'fbs:enum',
-  'fbs:plural',
 ]);
 export const SINGLE_CHILD_FBT_TAGS: Set<string> = new Set([
   'fbt:param',
@@ -103,22 +75,10 @@ export const SINGLE_CHILD_FBT_TAGS: Set<string> = new Set([
 function visit(
   fn: HIRFunction,
   fbtMacroTags: Set<Macro>,
-  macroTagsCalls: Set<IdentifierId>,
+  fbtValues: Set<IdentifierId>,
   macroMethods: Map<IdentifierId, Array<Array<MacroMethod>>>,
-  macroValues: Map<Identifier, Array<Identifier>>,
 ): void {
   for (const [, block] of fn.body.blocks) {
-    for (const phi of block.phis) {
-      const macroOperands: Array<Identifier> = [];
-      for (const operand of phi.operands.values()) {
-        if (macroValues.has(operand.identifier)) {
-          macroOperands.push(operand.identifier);
-        }
-      }
-      if (macroOperands.length !== 0) {
-        macroValues.set(phi.place.identifier, macroOperands);
-      }
-    }
     for (const instruction of block.instructions) {
       const {lvalue, value} = instruction;
       if (lvalue === null) {
@@ -133,13 +93,13 @@ function visit(
          * We don't distinguish between tag names and strings, so record
          * all `fbt` string literals in case they are used as a jsx tag.
          */
-        macroTagsCalls.add(lvalue.identifier.id);
+        fbtValues.add(lvalue.identifier.id);
       } else if (
         value.kind === 'LoadGlobal' &&
         matchesExactTag(value.binding.name, fbtMacroTags)
       ) {
         // Record references to `fbt` as a global
-        macroTagsCalls.add(lvalue.identifier.id);
+        fbtValues.add(lvalue.identifier.id);
       } else if (
         value.kind === 'LoadGlobal' &&
         matchTagRoot(value.binding.name, fbtMacroTags) !== null
@@ -161,66 +121,84 @@ function visit(
             if (method.length > 1) {
               newMethods.push(method.slice(1));
             } else {
-              macroTagsCalls.add(lvalue.identifier.id);
+              fbtValues.add(lvalue.identifier.id);
             }
           }
         }
         if (newMethods.length > 0) {
           macroMethods.set(lvalue.identifier.id, newMethods);
         }
-      } else if (
-        value.kind === 'PropertyLoad' &&
-        macroTagsCalls.has(value.object.identifier.id)
-      ) {
-        macroTagsCalls.add(lvalue.identifier.id);
-      } else if (
-        isFbtJsxExpression(fbtMacroTags, macroTagsCalls, value) ||
-        isFbtJsxChild(macroTagsCalls, lvalue, value) ||
-        isFbtCallExpression(macroTagsCalls, value)
-      ) {
-        macroTagsCalls.add(lvalue.identifier.id);
-        macroValues.set(
-          lvalue.identifier,
-          Array.from(
-            eachInstructionValueOperand(value),
-            operand => operand.identifier,
-          ),
-        );
-      } else if (
-        Iterable_some(eachInstructionValueOperand(value), operand =>
-          macroValues.has(operand.identifier),
-        )
-      ) {
-        const macroOperands: Array<Identifier> = [];
-        for (const operand of eachInstructionValueOperand(value)) {
-          if (macroValues.has(operand.identifier)) {
-            macroOperands.push(operand.identifier);
-          }
+      } else if (isFbtCallExpression(fbtValues, value)) {
+        const fbtScope = lvalue.identifier.scope;
+        if (fbtScope === null) {
+          continue;
+        }
+
+        /*
+         * if the JSX element's tag was `fbt`, mark all its operands
+         * to ensure that they end up in the same scope as the jsx element
+         * itself.
+         */
+        for (const operand of eachReactiveValueOperand(value)) {
+          operand.identifier.scope = fbtScope;
+
+          // Expand the jsx element's range to account for its operands
+          expandFbtScopeRange(fbtScope.range, operand.identifier.mutableRange);
+          fbtValues.add(operand.identifier.id);
+        }
+      } else if (
+        isFbtJsxExpression(fbtMacroTags, fbtValues, value) ||
+        isFbtJsxChild(fbtValues, lvalue, value)
+      ) {
+        const fbtScope = lvalue.identifier.scope;
+        if (fbtScope === null) {
+          continue;
+        }
+
+        /*
+         * if the JSX element's tag was `fbt`, mark all its operands
+         * to ensure that they end up in the same scope as the jsx element
+         * itself.
+         */
+        for (const operand of eachReactiveValueOperand(value)) {
+          operand.identifier.scope = fbtScope;
+
+          // Expand the jsx element's range to account for its operands
+          expandFbtScopeRange(fbtScope.range, operand.identifier.mutableRange);
+
+          /*
+           * NOTE: we add the operands as fbt values so that they are also
+           * grouped with this expression
+           */
+          fbtValues.add(operand.identifier.id);
+        }
+      } else if (fbtValues.has(lvalue.identifier.id)) {
+        const fbtScope = lvalue.identifier.scope;
+        if (fbtScope === null) {
+          return;
+        }
+
+        for (const operand of eachReactiveValueOperand(value)) {
+          if (
+            operand.identifier.name !== null &&
+            operand.identifier.name.kind === 'named'
+          ) {
+            /*
+             * named identifiers were already locals, we only have to force temporaries
+             * into the same scope
+             */
+            continue;
+          }
+          operand.identifier.scope = fbtScope;
+
+          // Expand the jsx element's range to account for its operands
+          expandFbtScopeRange(fbtScope.range, operand.identifier.mutableRange);
         }
-        macroValues.set(lvalue.identifier, macroOperands);
       }
     }
   }
 }
 
-function mergeScopes(
-  root: Identifier,
-  scope: ReactiveScope,
-  macroValues: Map<Identifier, Array<Identifier>>,
-  macroTagsCalls: Set<IdentifierId>,
-): void {
-  const operands = macroValues.get(root);
-  if (operands == null) {
-    return;
-  }
-  for (const operand of operands) {
-    operand.scope = scope;
-    expandFbtScopeRange(scope.range, operand.mutableRange);
-    macroTagsCalls.add(operand.id);
-    mergeScopes(operand, scope, macroValues, macroTagsCalls);
-  }
-}
-
 function matchesExactTag(s: string, tags: Set<Macro>): boolean {
   return Array.from(tags).some(macro =>
     typeof macro === 'string'
@@ -251,40 +229,39 @@ function matchTagRoot(
 }
 
 function isFbtCallExpression(
-  macroTagsCalls: Set<IdentifierId>,
-  value: InstructionValue,
+  fbtValues: Set<IdentifierId>,
+  value: ReactiveValue,
 ): boolean {
   return (
     (value.kind === 'CallExpression' &&
-      macroTagsCalls.has(value.callee.identifier.id)) ||
-    (value.kind === 'MethodCall' &&
-      macroTagsCalls.has(value.property.identifier.id))
+      fbtValues.has(value.callee.identifier.id)) ||
+    (value.kind === 'MethodCall' && fbtValues.has(value.property.identifier.id))
   );
 }
 
 function isFbtJsxExpression(
   fbtMacroTags: Set<Macro>,
-  macroTagsCalls: Set<IdentifierId>,
-  value: InstructionValue,
+  fbtValues: Set<IdentifierId>,
+  value: ReactiveValue,
 ): boolean {
   return (
     value.kind === 'JsxExpression' &&
     ((value.tag.kind === 'Identifier' &&
-      macroTagsCalls.has(value.tag.identifier.id)) ||
+      fbtValues.has(value.tag.identifier.id)) ||
       (value.tag.kind === 'BuiltinTag' &&
         matchesExactTag(value.tag.name, fbtMacroTags)))
   );
 }
 
 function isFbtJsxChild(
-  macroTagsCalls: Set<IdentifierId>,
+  fbtValues: Set<IdentifierId>,
   lvalue: Place | null,
-  value: InstructionValue,
+  value: ReactiveValue,
 ): boolean {
   return (
     (value.kind === 'JsxExpression' || value.kind === 'JsxFragment') &&
     lvalue !== null &&
-    macroTagsCalls.has(lvalue.identifier.id)
+    fbtValues.has(lvalue.identifier.id)
   );
 }
 

compiler/packages/babel-plugin-react-compiler/src/TypeInference/InferTypes.ts

@@ -393,7 +393,7 @@ function* generateInstructionTypes(
               shapeId: BuiltInArrayId,
             });
           } else {
-            continue;
+            break;
           }
         }
       } else {

compiler/packages/babel-plugin-react-compiler/src/Utils/TestUtils.ts

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import {fromZodError} from 'zod-validation-error/v4';
+import {fromZodError} from 'zod-validation-error';
 import {CompilerError} from '../CompilerError';
 import {
   CompilationMode,
@@ -175,7 +175,7 @@ function parseConfigPragmaEnvironmentForTest(
   });
 }
 
-const testComplexPluginOptionDefaults: PluginOptions = {
+const testComplexPluginOptionDefaults: Partial<PluginOptions> = {
   gating: {
     source: 'ReactForgetFeatureFlag',
     importSpecifierName: 'isForgetEnabled_Fixtures',

compiler/packages/babel-plugin-react-compiler/src/Validation/ValidateUseMemo.ts

@@ -10,16 +10,7 @@ import {
   CompilerError,
   ErrorCategory,
 } from '../CompilerError';
-import {
-  FunctionExpression,
-  HIRFunction,
-  IdentifierId,
-  SourceLocation,
-} from '../HIR';
-import {
-  eachInstructionValueOperand,
-  eachTerminalOperand,
-} from '../HIR/visitors';
+import {FunctionExpression, HIRFunction, IdentifierId} from '../HIR';
 import {Result} from '../Utils/Result';
 
 export function validateUseMemo(fn: HIRFunction): Result<void, CompilerError> {
@@ -27,19 +18,8 @@ export function validateUseMemo(fn: HIRFunction): Result<void, CompilerError> {
   const useMemos = new Set<IdentifierId>();
   const react = new Set<IdentifierId>();
   const functions = new Map<IdentifierId, FunctionExpression>();
-  const unusedUseMemos = new Map<IdentifierId, SourceLocation>();
   for (const [, block] of fn.body.blocks) {
     for (const {lvalue, value} of block.instructions) {
-      if (unusedUseMemos.size !== 0) {
-        /**
-         * Most of the time useMemo results are referenced immediately. Don't bother
-         * scanning instruction operands for useMemos unless there is an as-yet-unused
-         * useMemo.
-         */
-        for (const operand of eachInstructionValueOperand(value)) {
-          unusedUseMemos.delete(operand.identifier.id);
-        }
-      }
       switch (value.kind) {
         case 'LoadGlobal': {
           if (value.binding.name === 'useMemo') {
@@ -65,8 +45,10 @@ export function validateUseMemo(fn: HIRFunction): Result<void, CompilerError> {
         case 'CallExpression': {
           // Is the function being called useMemo, with at least 1 argument?
           const callee =
-            value.kind === 'CallExpression' ? value.callee : value.property;
-          const isUseMemo = useMemos.has(callee.identifier.id);
+            value.kind === 'CallExpression'
+              ? value.callee.identifier.id
+              : value.property.identifier.id;
+          const isUseMemo = useMemos.has(callee);
           if (!isUseMemo || value.args.length === 0) {
             continue;
           }
@@ -122,73 +104,10 @@ export function validateUseMemo(fn: HIRFunction): Result<void, CompilerError> {
             );
           }
 
-          validateNoContextVariableAssignment(body.loweredFunc.func, errors);
-
-          if (fn.env.config.validateNoVoidUseMemo) {
-            unusedUseMemos.set(lvalue.identifier.id, callee.loc);
-          }
           break;
         }
       }
     }
-    if (unusedUseMemos.size !== 0) {
-      for (const operand of eachTerminalOperand(block.terminal)) {
-        unusedUseMemos.delete(operand.identifier.id);
-      }
-    }
-  }
-  if (unusedUseMemos.size !== 0) {
-    /**
-     * Basic check for unused memos, where the result of the call is never referenced. This runs
-     * before DCE so it's more of an AST-level check that something, _anything_, cares about the value.
-     *
-     * This is easy to defeat with e.g. `const _ = useMemo(...)` but it at least gives us something to teach.
-     * Even a DCE-based version could be bypassed with `noop(useMemo(...))`.
-     */
-    for (const loc of unusedUseMemos.values()) {
-      errors.pushDiagnostic(
-        CompilerDiagnostic.create({
-          category: ErrorCategory.VoidUseMemo,
-          reason: 'Unused useMemo()',
-          description: `This useMemo() value is unused. useMemo() is for computing and caching values, not for arbitrary side effects`,
-          suggestions: null,
-        }).withDetails({
-          kind: 'error',
-          loc,
-          message: 'useMemo() result is unused',
-        }),
-      );
-    }
   }
   return errors.asResult();
 }
-
-function validateNoContextVariableAssignment(
-  fn: HIRFunction,
-  errors: CompilerError,
-): void {
-  for (const block of fn.body.blocks.values()) {
-    for (const instr of block.instructions) {
-      const value = instr.value;
-      switch (value.kind) {
-        case 'StoreContext': {
-          errors.pushDiagnostic(
-            CompilerDiagnostic.create({
-              category: ErrorCategory.UseMemo,
-              reason:
-                'useMemo() callbacks may not reassign variables declared outside of the callback',
-              description:
-                'useMemo() callbacks must be pure functions and cannot reassign variables defined outside of the callback function',
-              suggestions: null,
-            }).withDetails({
-              kind: 'error',
-              loc: value.lvalue.place.loc,
-              message: 'Cannot reassign variable',
-            }),
-          );
-          break;
-        }
-      }
-    }
-  }
-}

compiler/packages/babel-plugin-react-compiler/src/__tests__/envConfig-test.ts

@@ -20,7 +20,7 @@ describe('parseConfigPragma()', () => {
         validateHooksUsage: 1,
       } as any);
     }).toThrowErrorMatchingInlineSnapshot(
-      `"Error: Could not validate environment config. Update React Compiler config to fix the error. Validation error: Invalid input: expected boolean, received number at "validateHooksUsage"."`,
+      `"Error: Could not validate environment config. Update React Compiler config to fix the error. Validation error: Expected boolean, received number at "validateHooksUsage"."`,
     );
   });
 
@@ -38,7 +38,7 @@ describe('parseConfigPragma()', () => {
         ],
       } as any);
     }).toThrowErrorMatchingInlineSnapshot(
-      `"Error: Could not validate environment config. Update React Compiler config to fix the error. Validation error: AutodepsIndex must be > 0 at "inferEffectDependencies[0].autodepsIndex"."`,
+      `"Error: Could not validate environment config. Update React Compiler config to fix the error. Validation error: autodepsIndex must be > 0 at "inferEffectDependencies[0].autodepsIndex"."`,
     );
   });
 

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allocating-primitive-as-dep.expect.md

@@ -2,7 +2,6 @@
 ## Input
 
 ```javascript
-// @enablePreserveExistingMemoizationGuarantees:false
 // bar(props.b) is an allocating expression that produces a primitive, which means
 // that Forget should memoize it.
 // Correctness:
@@ -17,8 +16,7 @@ function AllocatingPrimitiveAsDep(props) {
 ## Code
 
 ```javascript
-import { c as _c } from "react/compiler-runtime"; // @enablePreserveExistingMemoizationGuarantees:false
-// bar(props.b) is an allocating expression that produces a primitive, which means
+import { c as _c } from "react/compiler-runtime"; // bar(props.b) is an allocating expression that produces a primitive, which means
 // that Forget should memoize it.
 // Correctness:
 //   - y depends on either bar(props.b) or bar(props.b) + 1

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allocating-primitive-as-dep.js

@@ -1,4 +1,3 @@
-// @enablePreserveExistingMemoizationGuarantees:false
 // bar(props.b) is an allocating expression that produces a primitive, which means
 // that Forget should memoize it.
 // Correctness:

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-modify-global-in-callback-jsx.expect.md

@@ -2,7 +2,6 @@
 ## Input
 
 ```javascript
-// @enablePreserveExistingMemoizationGuarantees:false
 import {useMemo} from 'react';
 
 const someGlobal = {value: 0};
@@ -33,7 +32,7 @@ export const FIXTURE_ENTRYPOINT = {
 ## Code
 
 ```javascript
-import { c as _c } from "react/compiler-runtime"; // @enablePreserveExistingMemoizationGuarantees:false
+import { c as _c } from "react/compiler-runtime";
 import { useMemo } from "react";
 
 const someGlobal = { value: 0 };

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-modify-global-in-callback-jsx.js

@@ -1,4 +1,3 @@
-// @enablePreserveExistingMemoizationGuarantees:false
 import {useMemo} from 'react';
 
 const someGlobal = {value: 0};

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/computed-load-primitive-as-dependency.expect.md

@@ -2,7 +2,6 @@
 ## Input
 
 ```javascript
-// @enablePreserveExistingMemoizationGuarantees:false
 function Component(props) {
   let a = foo();
   // freeze `a` so we know the next line cannot mutate it
@@ -18,7 +17,7 @@ function Component(props) {
 ## Code
 
 ```javascript
-import { c as _c } from "react/compiler-runtime"; // @enablePreserveExistingMemoizationGuarantees:false
+import { c as _c } from "react/compiler-runtime";
 function Component(props) {
   const $ = _c(2);
   const a = foo();

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/computed-load-primitive-as-dependency.js

@@ -1,4 +1,3 @@
-// @enablePreserveExistingMemoizationGuarantees:false
 function Component(props) {
   let a = foo();
   // freeze `a` so we know the next line cannot mutate it

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/constant-propagation-template-literal.expect.md

@@ -2,7 +2,6 @@
 ## Input
 
 ```javascript
-// @enablePreserveExistingMemoizationGuarantees:false
 import {Stringify, identity} from 'shared-runtime';
 
 function foo() {
@@ -65,7 +64,7 @@ export const FIXTURE_ENTRYPOINT = {
 ## Code
 
 ```javascript
-import { c as _c } from "react/compiler-runtime"; // @enablePreserveExistingMemoizationGuarantees:false
+import { c as _c } from "react/compiler-runtime";
 import { Stringify, identity } from "shared-runtime";
 
 function foo() {

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/constant-propagation-template-literal.js

@@ -1,4 +1,3 @@
-// @enablePreserveExistingMemoizationGuarantees:false
 import {Stringify, identity} from 'shared-runtime';
 
 function foo() {

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/context-variable-as-jsx-element-tag.expect.md

@@ -2,7 +2,6 @@
 ## Input
 
 ```javascript
-// @enablePreserveExistingMemoizationGuarantees:false
 import {useMemo} from 'react';
 import {Stringify} from 'shared-runtime';
 
@@ -26,7 +25,7 @@ export const FIXTURE_ENTRYPOINT = {
 ## Code
 
 ```javascript
-import { c as _c } from "react/compiler-runtime"; // @enablePreserveExistingMemoizationGuarantees:false
+import { c as _c } from "react/compiler-runtime";
 import { useMemo } from "react";
 import { Stringify } from "shared-runtime";
 

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/context-variable-as-jsx-element-tag.js

@@ -1,4 +1,3 @@
-// @enablePreserveExistingMemoizationGuarantees:false
 import {useMemo} from 'react';
 import {Stringify} from 'shared-runtime';
 

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/destructure-direct-reassignment.expect.md

@@ -2,7 +2,6 @@
 ## Input
 
 ```javascript
-// @enablePreserveExistingMemoizationGuarantees:false
 function foo(props) {
   let x, y;
   ({x, y} = {x: props.a, y: props.b});
@@ -22,7 +21,6 @@ export const FIXTURE_ENTRYPOINT = {
 ## Code
 
 ```javascript
-// @enablePreserveExistingMemoizationGuarantees:false
 function foo(props) {
   let x;
   let y;

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/destructure-direct-reassignment.js

@@ -1,4 +1,3 @@
-// @enablePreserveExistingMemoizationGuarantees:false
 function foo(props) {
   let x, y;
   ({x, y} = {x: props.a, y: props.b});

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-reassign-variable-in-usememo.expect.md

@@ -1,38 +0,0 @@
-
-## Input
-
-```javascript
-function Component() {
-  let x;
-  const y = useMemo(() => {
-    let z;
-    x = [];
-    z = true;
-    return z;
-  }, []);
-  return [x, y];
-}
-
-```
-
-
-## Error
-
-```
-Found 1 error:
-
-Error: useMemo() callbacks may not reassign variables declared outside of the callback
-
-useMemo() callbacks must be pure functions and cannot reassign variables defined outside of the callback function.
-
-error.invalid-reassign-variable-in-usememo.ts:5:4
-  3 |   const y = useMemo(() => {
-  4 |     let z;
-> 5 |     x = [];
-    |     ^ Cannot reassign variable
-  6 |     z = true;
-  7 |     return z;
-  8 |   }, []);
-```
-          
-      

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-reassign-variable-in-usememo.js

@@ -1,10 +0,0 @@
-function Component() {
-  let x;
-  const y = useMemo(() => {
-    let z;
-    x = [];
-    z = true;
-    return z;
-  }, []);
-  return [x, y];
-}

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-setState-in-render-unbound-state.expect.md

@@ -1,41 +0,0 @@
-
-## Input
-
-```javascript
-function Component(props) {
-  // Intentionally don't bind state, this repros a bug where we didn't
-  // infer the type of destructured properties after a hole in the array
-  let [, setState] = useState();
-  setState(1);
-  return props.foo;
-}
-
-export const FIXTURE_ENTRYPOINT = {
-  fn: Component,
-  params: ['TodoAdd'],
-  isComponent: 'TodoAdd',
-};
-
-```
-
-
-## Error
-
-```
-Found 1 error:
-
-Error: Calling setState during render may trigger an infinite loop
-
-Calling setState during render will trigger another render, and can lead to infinite loops. (https://react.dev/reference/react/useState).
-
-error.invalid-setState-in-render-unbound-state.ts:5:2
-  3 |   // infer the type of destructured properties after a hole in the array
-  4 |   let [, setState] = useState();
-> 5 |   setState(1);
-    |   ^^^^^^^^ Found setState() in render
-  6 |   return props.foo;
-  7 | }
-  8 |
-```
-          
-      

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-setState-in-render-unbound-state.js

@@ -1,13 +0,0 @@
-function Component(props) {
-  // Intentionally don't bind state, this repros a bug where we didn't
-  // infer the type of destructured properties after a hole in the array
-  let [, setState] = useState();
-  setState(1);
-  return props.foo;
-}
-
-export const FIXTURE_ENTRYPOINT = {
-  fn: Component,
-  params: ['TodoAdd'],
-  isComponent: 'TodoAdd',
-};

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-uncalled-function-capturing-mutable-values-memoizes-with-captures-values.expect.md

@@ -2,7 +2,7 @@
 ## Input
 
 ```javascript
-// @flow @enableNewMutationAliasingModel @enablePreserveExistingMemoizationGuarantees:false
+// @flow @enableNewMutationAliasingModel
 /**
  * This hook returns a function that when called with an input object,
  * will return the result of mapping that input with the supplied map

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-uncalled-function-capturing-mutable-values-memoizes-with-captures-values.js

@@ -1,4 +1,4 @@
-// @flow @enableNewMutationAliasingModel @enablePreserveExistingMemoizationGuarantees:false
+// @flow @enableNewMutationAliasingModel
 /**
  * This hook returns a function that when called with an input object,
  * will return the result of mapping that input with the supplied map

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-unused-usememo.expect.md

@@ -1,35 +0,0 @@
-
-## Input
-
-```javascript
-// @validateNoVoidUseMemo
-function Component() {
-  useMemo(() => {
-    return [];
-  }, []);
-  return <div />;
-}
-
-```
-
-
-## Error
-
-```
-Found 1 error:
-
-Error: Unused useMemo()
-
-This useMemo() value is unused. useMemo() is for computing and caching values, not for arbitrary side effects.
-
-error.invalid-unused-usememo.ts:3:2
-  1 | // @validateNoVoidUseMemo
-  2 | function Component() {
-> 3 |   useMemo(() => {
-    |   ^^^^^^^ useMemo() result is unused
-  4 |     return [];
-  5 |   }, []);
-  6 |   return <div />;
-```
-          
-      

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-unused-usememo.js

@@ -1,7 +0,0 @@
-// @validateNoVoidUseMemo
-function Component() {
-  useMemo(() => {
-    return [];
-  }, []);
-  return <div />;
-}

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.repro-preserve-memoization-inner-destructured-value-mistaken-as-dependency-later-mutation.expect.md

@@ -2,7 +2,7 @@
 ## Input
 
 ```javascript
-// @validatePreserveExistingMemoizationGuarantees @enablePreserveExistingMemoizationGuarantees:false
+// @validatePreserveExistingMemoizationGuarantees
 
 /**
  * Repro from https://github.com/facebook/react/issues/34262

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.repro-preserve-memoization-inner-destructured-value-mistaken-as-dependency-later-mutation.js

@@ -1,4 +1,4 @@
-// @validatePreserveExistingMemoizationGuarantees @enablePreserveExistingMemoizationGuarantees:false
+// @validatePreserveExistingMemoizationGuarantees
 
 /**
  * Repro from https://github.com/facebook/react/issues/34262

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.repro-preserve-memoization-inner-destructured-value-mistaken-as-dependency-mutated-dep.expect.md

@@ -2,7 +2,7 @@
 ## Input
 
 ```javascript
-// @validatePreserveExistingMemoizationGuarantees @enablePreserveExistingMemoizationGuarantees:false
+// @validatePreserveExistingMemoizationGuarantees
 
 import {identity, Stringify, useHook} from 'shared-runtime';
 

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.repro-preserve-memoization-inner-destructured-value-mistaken-as-dependency-mutated-dep.js

@@ -1,4 +1,4 @@
-// @validatePreserveExistingMemoizationGuarantees @enablePreserveExistingMemoizationGuarantees:false
+// @validatePreserveExistingMemoizationGuarantees
 
 import {identity, Stringify, useHook} from 'shared-runtime';
 

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-preserve-memo-deps-mixed-optional-nonoptional-property-chain.expect.md

@@ -1,91 +0,0 @@
-
-## Input
-
-```javascript
-// @enablePreserveExistingMemoizationGuarantees @validatePreserveExistingMemoizationGuarantees @enableOptionalDependencies @enableTreatFunctionDepsAsConditional:false
-
-import {useMemo} from 'react';
-import {identity, ValidateMemoization} from 'shared-runtime';
-
-function Component({x}) {
-  const object = useMemo(() => {
-    return identity({
-      callback: () => {
-        // This is a bug in our dependency inference: we stop capturing dependencies
-        // after x.a.b?.c. But what this dependency is telling us is that if `x.a.b`
-        // was non-nullish, then we can access `.c.d?.e`. Thus we should take the
-        // full property chain, exactly as-is with optionals/non-optionals, as a
-        // dependency
-        return identity(x.a.b?.c.d?.e);
-      },
-    });
-  }, [x.a.b?.c.d?.e]);
-  const result = useMemo(() => {
-    return [object.callback()];
-  }, [object]);
-  return <Inner x={x} result={result} />;
-}
-
-function Inner({x, result}) {
-  'use no memo';
-  return <ValidateMemoization inputs={[x.y.z]} output={result} />;
-}
-
-export const FIXTURE_ENTRYPOINT = {
-  fn: Component,
-  params: [{x: {y: {z: 42}}}],
-  sequentialRenders: [
-    {x: {y: {z: 42}}},
-    {x: {y: {z: 42}}},
-    {x: {y: {z: 3.14}}},
-    {x: {y: {z: 42}}},
-    {x: {y: {z: 3.14}}},
-    {x: {y: {z: 42}}},
-  ],
-};
-
-```
-
-
-## Error
-
-```
-Found 1 error:
-
-Compilation Skipped: Existing memoization could not be preserved
-
-React Compiler has skipped optimizing this component because the existing manual memoization could not be preserved. The inferred dependencies did not match the manually specified dependencies, which could cause the value to change more or less frequently than expected. The inferred dependency was `x.a.b?.c`, but the source dependencies were [x.a.b?.c.d?.e]. Inferred less specific property than source.
-
-error.todo-preserve-memo-deps-mixed-optional-nonoptional-property-chain.ts:7:25
-   5 |
-   6 | function Component({x}) {
->  7 |   const object = useMemo(() => {
-     |                          ^^^^^^^
->  8 |     return identity({
-     | ^^^^^^^^^^^^^^^^^^^^^
->  9 |       callback: () => {
-     | ^^^^^^^^^^^^^^^^^^^^^
-> 10 |         // This is a bug in our dependency inference: we stop capturing dependencies
-     | ^^^^^^^^^^^^^^^^^^^^^
-> 11 |         // after x.a.b?.c. But what this dependency is telling us is that if `x.a.b`
-     | ^^^^^^^^^^^^^^^^^^^^^
-> 12 |         // was non-nullish, then we can access `.c.d?.e`. Thus we should take the
-     | ^^^^^^^^^^^^^^^^^^^^^
-> 13 |         // full property chain, exactly as-is with optionals/non-optionals, as a
-     | ^^^^^^^^^^^^^^^^^^^^^
-> 14 |         // dependency
-     | ^^^^^^^^^^^^^^^^^^^^^
-> 15 |         return identity(x.a.b?.c.d?.e);
-     | ^^^^^^^^^^^^^^^^^^^^^
-> 16 |       },
-     | ^^^^^^^^^^^^^^^^^^^^^
-> 17 |     });
-     | ^^^^^^^^^^^^^^^^^^^^^
-> 18 |   }, [x.a.b?.c.d?.e]);
-     | ^^^^ Could not preserve existing manual memoization
-  19 |   const result = useMemo(() => {
-  20 |     return [object.callback()];
-  21 |   }, [object]);
-```
-          
-      

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-preserve-memo-deps-mixed-optional-nonoptional-property-chain.js

@@ -1,41 +0,0 @@
-// @enablePreserveExistingMemoizationGuarantees @validatePreserveExistingMemoizationGuarantees @enableOptionalDependencies @enableTreatFunctionDepsAsConditional:false
-
-import {useMemo} from 'react';
-import {identity, ValidateMemoization} from 'shared-runtime';
-
-function Component({x}) {
-  const object = useMemo(() => {
-    return identity({
-      callback: () => {
-        // This is a bug in our dependency inference: we stop capturing dependencies
-        // after x.a.b?.c. But what this dependency is telling us is that if `x.a.b`
-        // was non-nullish, then we can access `.c.d?.e`. Thus we should take the
-        // full property chain, exactly as-is with optionals/non-optionals, as a
-        // dependency
-        return identity(x.a.b?.c.d?.e);
-      },
-    });
-  }, [x.a.b?.c.d?.e]);
-  const result = useMemo(() => {
-    return [object.callback()];
-  }, [object]);
-  return <Inner x={x} result={result} />;
-}
-
-function Inner({x, result}) {
-  'use no memo';
-  return <ValidateMemoization inputs={[x.y.z]} output={result} />;
-}
-
-export const FIXTURE_ENTRYPOINT = {
-  fn: Component,
-  params: [{x: {y: {z: 42}}}],
-  sequentialRenders: [
-    {x: {y: {z: 42}}},
-    {x: {y: {z: 42}}},
-    {x: {y: {z: 3.14}}},
-    {x: {y: {z: 42}}},
-    {x: {y: {z: 3.14}}},
-    {x: {y: {z: 42}}},
-  ],
-};

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-repro-missed-memoization-from-capture-in-invoked-function-inferred-as-mutation.expect.md

@@ -2,7 +2,7 @@
 ## Input
 
 ```javascript
-// @flow @validatePreserveExistingMemoizationGuarantees @enablePreserveExistingMemoizationGuarantees:false
+// @flow @validatePreserveExistingMemoizationGuarantees
 import {useMemo} from 'react';
 import {logValue, useFragment, useHook, typedLog} from 'shared-runtime';
 

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-repro-missed-memoization-from-capture-in-invoked-function-inferred-as-mutation.js

@@ -1,4 +1,4 @@
-// @flow @validatePreserveExistingMemoizationGuarantees @enablePreserveExistingMemoizationGuarantees:false
+// @flow @validatePreserveExistingMemoizationGuarantees
 import {useMemo} from 'react';
 import {logValue, useFragment, useHook, typedLog} from 'shared-runtime';
 

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-repro-missed-memoization-from-inferred-mutation-in-logger.expect.md

@@ -2,7 +2,7 @@
 ## Input
 
 ```javascript
-// @flow @validatePreserveExistingMemoizationGuarantees @enablePreserveExistingMemoizationGuarantees:false
+// @flow @validatePreserveExistingMemoizationGuarantees
 import {useFragment} from 'react-relay';
 import LogEvent from 'LogEvent';
 import {useCallback, useMemo} from 'react';

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-repro-missed-memoization-from-inferred-mutation-in-logger.js

@@ -1,4 +1,4 @@
-// @flow @validatePreserveExistingMemoizationGuarantees @enablePreserveExistingMemoizationGuarantees:false
+// @flow @validatePreserveExistingMemoizationGuarantees
 import {useFragment} from 'react-relay';
 import LogEvent from 'LogEvent';
 import {useCallback, useMemo} from 'react';

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-repro-unmemoized-callback-captured-in-context-variable.expect.md

@@ -2,7 +2,7 @@
 ## Input
 
 ```javascript
-// @validatePreserveExistingMemoizationGuarantees @enablePreserveExistingMemoizationGuarantees:false
+// @validatePreserveExistingMemoizationGuarantees
 import {useMemo} from 'react';
 import {ValidateMemoization, useHook} from 'shared-runtime';
 

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-repro-unmemoized-callback-captured-in-context-variable.tsx

@@ -1,4 +1,4 @@
-// @validatePreserveExistingMemoizationGuarantees @enablePreserveExistingMemoizationGuarantees:false
+// @validatePreserveExistingMemoizationGuarantees
 import {useMemo} from 'react';
 import {ValidateMemoization, useHook} from 'shared-runtime';
 

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.useMemo-no-return-value.expect.md

@@ -28,7 +28,7 @@ Found 2 errors:
 
 Error: useMemo() callbacks must return a value
 
-This useMemo() callback doesn't return a value. useMemo() is for computing and caching values, not for arbitrary side effects.
+This useMemo callback doesn't return a value. useMemo is for computing and caching values, not for arbitrary side effects.
 
 error.useMemo-no-return-value.ts:3:16
   1 | // @validateNoVoidUseMemo
@@ -45,7 +45,7 @@ error.useMemo-no-return-value.ts:3:16
 
 Error: useMemo() callbacks must return a value
 
-This React.useMemo() callback doesn't return a value. useMemo() is for computing and caching values, not for arbitrary side effects.
+This React.useMemo callback doesn't return a value. useMemo is for computing and caching values, not for arbitrary side effects.
 
 error.useMemo-no-return-value.ts:6:17
    4 |     console.log('computing');

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.validate-object-entries-mutation.expect.md

@@ -2,7 +2,7 @@
 ## Input
 
 ```javascript
-// @validatePreserveExistingMemoizationGuarantees @enablePreserveExistingMemoizationGuarantees:false
+// @validatePreserveExistingMemoizationGuarantees
 import {makeObject_Primitives, Stringify} from 'shared-runtime';
 
 function Component(props) {

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.validate-object-entries-mutation.js

@@ -1,4 +1,4 @@
-// @validatePreserveExistingMemoizationGuarantees @enablePreserveExistingMemoizationGuarantees:false
+// @validatePreserveExistingMemoizationGuarantees
 import {makeObject_Primitives, Stringify} from 'shared-runtime';
 
 function Component(props) {

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.validate-object-values-mutation.expect.md

@@ -2,7 +2,7 @@
 ## Input
 
 ```javascript
-// @validatePreserveExistingMemoizationGuarantees @enablePreserveExistingMemoizationGuarantees:false
+// @validatePreserveExistingMemoizationGuarantees
 import {makeObject_Primitives, Stringify} from 'shared-runtime';
 
 function Component(props) {

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.validate-object-values-mutation.js

@@ -1,4 +1,4 @@
-// @validatePreserveExistingMemoizationGuarantees @enablePreserveExistingMemoizationGuarantees:false
+// @validatePreserveExistingMemoizationGuarantees
 import {makeObject_Primitives, Stringify} from 'shared-runtime';
 
 function Component(props) {

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/existing-variables-with-c-name.expect.md

@@ -2,7 +2,6 @@
 ## Input
 
 ```javascript
-// @enablePreserveExistingMemoizationGuarantees:false
 import {useMemo, useState} from 'react';
 import {ValidateMemoization} from 'shared-runtime';
 
@@ -29,7 +28,7 @@ export const FIXTURE_ENTRYPOINT = {
 ## Code
 
 ```javascript
-import { c as _c2 } from "react/compiler-runtime"; // @enablePreserveExistingMemoizationGuarantees:false
+import { c as _c2 } from "react/compiler-runtime";
 import { useMemo, useState } from "react";
 import { ValidateMemoization } from "shared-runtime";
 

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/existing-variables-with-c-name.js

@@ -1,4 +1,3 @@
-// @enablePreserveExistingMemoizationGuarantees:false
 import {useMemo, useState} from 'react';
 import {ValidateMemoization} from 'shared-runtime';
 

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/bug-fbt-plural-multiple-function-calls.expect.md

@@ -2,7 +2,6 @@
 ## Input
 
 ```javascript
-// @enablePreserveExistingMemoizationGuarantees:false
 import fbt from 'fbt';
 
 /**
@@ -36,7 +35,7 @@ export const FIXTURE_ENTRYPOINT = {
 ## Code
 
 ```javascript
-import { c as _c } from "react/compiler-runtime"; // @enablePreserveExistingMemoizationGuarantees:false
+import { c as _c } from "react/compiler-runtime";
 import fbt from "fbt";
 
 /**

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/bug-fbt-plural-multiple-function-calls.ts

@@ -1,4 +1,3 @@
-// @enablePreserveExistingMemoizationGuarantees:false
 import fbt from 'fbt';
 
 /**

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/error.todo-fbt-param-nested-fbt.expect.md

@@ -0,0 +1,56 @@
+
+## Input
+
+```javascript
+import fbt from 'fbt';
+import {Stringify} from 'shared-runtime';
+
+/**
+ * MemoizeFbtAndMacroOperands needs to account for nested fbt calls.
+ * Expected fixture `fbt-param-call-arguments` to succeed but it failed with error:
+ *   /fbt-param-call-arguments.ts: Line 19 Column 11: fbt: unsupported babel node: Identifier
+ *   ---
+ *   t3
+ *   ---
+ */
+function Component({firstname, lastname}) {
+  'use memo';
+  return (
+    <Stringify>
+      {fbt(
+        [
+          'Name: ',
+          fbt.param('firstname', <Stringify key={0} name={firstname} />),
+          ', ',
+          fbt.param(
+            'lastname',
+            <Stringify key={0} name={lastname}>
+              {fbt('(inner fbt)', 'Inner fbt value')}
+            </Stringify>
+          ),
+        ],
+        'Name'
+      )}
+    </Stringify>
+  );
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{firstname: 'first', lastname: 'last'}],
+  sequentialRenders: [{firstname: 'first', lastname: 'last'}],
+};
+
+```
+
+
+## Error
+
+```
+Line 19 Column 11: fbt: unsupported babel node: Identifier
+---
+t3
+---
+```
+          
+      

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/fbt-preserve-whitespace-two-subtrees.expect.md

@@ -37,31 +37,27 @@ import { c as _c } from "react/compiler-runtime";
 import fbt from "fbt";
 
 function Foo(t0) {
-  const $ = _c(7);
+  const $ = _c(3);
   const { name1, name2 } = t0;
   let t1;
   if ($[0] !== name1 || $[1] !== name2) {
-    let t2;
-    if ($[3] !== name1) {
-      t2 = <b>{name1}</b>;
-      $[3] = name1;
-      $[4] = t2;
-    } else {
-      t2 = $[4];
-    }
-    let t3;
-    if ($[5] !== name2) {
-      t3 = <b>{name2}</b>;
-      $[5] = name2;
-      $[6] = t3;
-    } else {
-      t3 = $[6];
-    }
     t1 = fbt._(
       "{user1} and {user2} accepted your PR!",
       [
-        fbt._param("user1", <span key={name1}>{t2}</span>),
-        fbt._param("user2", <span key={name2}>{t3}</span>),
+        fbt._param(
+          "user1",
+
+          <span key={name1}>
+            <b>{name1}</b>
+          </span>,
+        ),
+        fbt._param(
+          "user2",
+
+          <span key={name2}>
+            <b>{name2}</b>
+          </span>,
+        ),
       ],
       { hk: "2PxMie" },
     );

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/repro-fbt-param-nested-fbt.expect.md

@@ -1,111 +0,0 @@
-
-## Input
-
-```javascript
-import fbt from 'fbt';
-import {Stringify} from 'shared-runtime';
-
-/**
- * MemoizeFbtAndMacroOperands needs to account for nested fbt calls.
- * Expected fixture `fbt-param-call-arguments` to succeed but it failed with error:
- *   /fbt-param-call-arguments.ts: Line 19 Column 11: fbt: unsupported babel node: Identifier
- *   ---
- *   t3
- *   ---
- */
-function Component({firstname, lastname}) {
-  'use memo';
-  return (
-    <Stringify>
-      {fbt(
-        [
-          'Name: ',
-          fbt.param('firstname', <Stringify key={0} name={firstname} />),
-          ', ',
-          fbt.param(
-            'lastname',
-            <Stringify key={0} name={lastname}>
-              {fbt('(inner fbt)', 'Inner fbt value')}
-            </Stringify>
-          ),
-        ],
-        'Name'
-      )}
-    </Stringify>
-  );
-}
-
-export const FIXTURE_ENTRYPOINT = {
-  fn: Component,
-  params: [{firstname: 'first', lastname: 'last'}],
-  sequentialRenders: [{firstname: 'first', lastname: 'last'}],
-};
-
-```
-
-## Code
-
-```javascript
-import { c as _c } from "react/compiler-runtime";
-import fbt from "fbt";
-import { Stringify } from "shared-runtime";
-
-/**
- * MemoizeFbtAndMacroOperands needs to account for nested fbt calls.
- * Expected fixture `fbt-param-call-arguments` to succeed but it failed with error:
- *   /fbt-param-call-arguments.ts: Line 19 Column 11: fbt: unsupported babel node: Identifier
- *   ---
- *   t3
- *   ---
- */
-function Component(t0) {
-  "use memo";
-  const $ = _c(5);
-  const { firstname, lastname } = t0;
-  let t1;
-  if ($[0] !== firstname || $[1] !== lastname) {
-    t1 = fbt._(
-      "Name: {firstname}, {lastname}",
-      [
-        fbt._param(
-          "firstname",
-
-          <Stringify key={0} name={firstname} />,
-        ),
-        fbt._param(
-          "lastname",
-
-          <Stringify key={0} name={lastname}>
-            {fbt._("(inner fbt)", null, { hk: "36qNwF" })}
-          </Stringify>,
-        ),
-      ],
-      { hk: "3AiIf8" },
-    );
-    $[0] = firstname;
-    $[1] = lastname;
-    $[2] = t1;
-  } else {
-    t1 = $[2];
-  }
-  let t2;
-  if ($[3] !== t1) {
-    t2 = <Stringify>{t1}</Stringify>;
-    $[3] = t1;
-    $[4] = t2;
-  } else {
-    t2 = $[4];
-  }
-  return t2;
-}
-
-export const FIXTURE_ENTRYPOINT = {
-  fn: Component,
-  params: [{ firstname: "first", lastname: "last" }],
-  sequentialRenders: [{ firstname: "first", lastname: "last" }],
-};
-
-```
-      
-### Eval output
-(kind: ok) <div>{"children":"Name: , "}</div>

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/repro-separately-memoized-fbt-param.expect.md

@@ -1,78 +0,0 @@
-
-## Input
-
-```javascript
-import {fbt} from 'fbt';
-import {useState} from 'react';
-
-const MIN = 10;
-
-function Component() {
-  const [count, setCount] = useState(0);
-
-  return fbt(
-    'Expected at least ' +
-      fbt.param('min', MIN, {number: true}) +
-      ' items, but got ' +
-      fbt.param('count', count, {number: true}) +
-      ' items.',
-    'Error description'
-  );
-}
-
-export const FIXTURE_ENTRYPOINT = {
-  fn: Component,
-  params: [{}],
-};
-
-```
-
-## Code
-
-```javascript
-import { c as _c } from "react/compiler-runtime";
-import { fbt } from "fbt";
-import { useState } from "react";
-
-const MIN = 10;
-
-function Component() {
-  const $ = _c(2);
-  const [count] = useState(0);
-  let t0;
-  if ($[0] !== count) {
-    t0 = fbt._(
-      { "*": { "*": "Expected at least {min} items, but got {count} items." } },
-      [
-        fbt._param(
-          "min",
-
-          MIN,
-          [0],
-        ),
-        fbt._param(
-          "count",
-
-          count,
-          [0],
-        ),
-      ],
-      { hk: "36gbz8" },
-    );
-    $[0] = count;
-    $[1] = t0;
-  } else {
-    t0 = $[1];
-  }
-  return t0;
-}
-
-export const FIXTURE_ENTRYPOINT = {
-  fn: Component,
-  params: [{}],
-};
-
-```
-      
-### Eval output
-(kind: ok) Expected at least 10 items, but got 0 items.

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/repro-separately-memoized-fbt-param.js

@@ -1,22 +0,0 @@
-import {fbt} from 'fbt';
-import {useState} from 'react';
-
-const MIN = 10;
-
-function Component() {
-  const [count, setCount] = useState(0);
-
-  return fbt(
-    'Expected at least ' +
-      fbt.param('min', MIN, {number: true}) +
-      ' items, but got ' +
-      fbt.param('count', count, {number: true}) +
-      ' items.',
-    'Error description'
-  );
-}
-
-export const FIXTURE_ENTRYPOINT = {
-  fn: Component,
-  params: [{}],
-};

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/for-in-statement-type-inference.expect.md

@@ -2,7 +2,6 @@
 ## Input
 
 ```javascript
-// @enablePreserveExistingMemoizationGuarantees:false
 const {identity, mutate} = require('shared-runtime');
 
 function Component(props) {
@@ -25,7 +24,6 @@ export const FIXTURE_ENTRYPOINT = {
 ## Code
 
 ```javascript
-// @enablePreserveExistingMemoizationGuarantees:false
 const { identity, mutate } = require("shared-runtime");
 
 function Component(props) {

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/for-in-statement-type-inference.js

@@ -1,4 +1,3 @@
-// @enablePreserveExistingMemoizationGuarantees:false
 const {identity, mutate} = require('shared-runtime');
 
 function Component(props) {

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/holey-array.expect.md

@@ -0,0 +1,35 @@
+
+## Input
+
+```javascript
+function t(props) {
+  let [, setstate] = useState();
+  setstate(1);
+  return props.foo;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: t,
+  params: ['TodoAdd'],
+  isComponent: 'TodoAdd',
+};
+
+```
+
+## Code
+
+```javascript
+function t(props) {
+  const [, setstate] = useState();
+  setstate(1);
+  return props.foo;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: t,
+  params: ["TodoAdd"],
+  isComponent: "TodoAdd",
+};
+
+```
+      

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/holey-array.js

@@ -0,0 +1,11 @@
+function t(props) {
+  let [, setstate] = useState();
+  setstate(1);
+  return props.foo;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: t,
+  params: ['TodoAdd'],
+  isComponent: 'TodoAdd',
+};

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/hooks-with-prefix.expect.md

@@ -2,7 +2,7 @@
 ## Input
 
 ```javascript
-// @hookPattern:".*\b(use[^$]+)$" @enablePreserveExistingMemoizationGuarantees:false
+// @hookPattern:".*\b(use[^$]+)$"
 
 import * as React from 'react';
 import {makeArray, useHook} from 'shared-runtime';
@@ -36,7 +36,7 @@ export const FIXTURE_ENTRYPOINT = {
 ## Code
 
 ```javascript
-import { c as _c } from "react/compiler-runtime"; // @hookPattern:".*\b(use[^$]+)$" @enablePreserveExistingMemoizationGuarantees:false
+import { c as _c } from "react/compiler-runtime"; // @hookPattern:".*\b(use[^$]+)$"
 
 import * as React from "react";
 import { makeArray, useHook } from "shared-runtime";

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/hooks-with-prefix.js

@@ -1,4 +1,4 @@
-// @hookPattern:".*\b(use[^$]+)$" @enablePreserveExistingMemoizationGuarantees:false
+// @hookPattern:".*\b(use[^$]+)$"
 
 import * as React from 'react';
 import {makeArray, useHook} from 'shared-runtime';

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/idx-method-no-outlining-wildcard.expect.md

@@ -73,7 +73,7 @@ function Component(props) {
   const groupName4 = t3;
   let t4;
   if ($[8] !== props) {
-    t4 = idx.hello_world.b.c(props, (__3) => __3.group.label);
+    t4 = idx.hello_world.b.c(props, _temp3);
     $[8] = props;
     $[9] = t4;
   } else {
@@ -108,6 +108,9 @@ function Component(props) {
   }
   return t5;
 }
+function _temp3(__3) {
+  return __3.group.label;
+}
 function _temp2(__0) {
   return __0.group.label;
 }

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/idx-method-no-outlining.expect.md

@@ -49,7 +49,7 @@ function Component(props) {
   const groupName2 = t1;
   let t2;
   if ($[4] !== props) {
-    t2 = idx.a.b(props, (__1) => __1.group.label);
+    t2 = idx.a.b(props, _temp2);
     $[4] = props;
     $[5] = t2;
   } else {
@@ -74,6 +74,9 @@ function Component(props) {
   }
   return t3;
 }
+function _temp2(__1) {
+  return __1.group.label;
+}
 function _temp(_) {
   return _.group.label;
 }

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-computed-delete.expect.md

@@ -2,7 +2,7 @@
 ## Input
 
 ```javascript
-// @debug @enablePreserveExistingMemoizationGuarantees:false
+// @debug
 function Component(props) {
   const x = makeObject();
   const y = delete x[props.value];
@@ -14,7 +14,7 @@ function Component(props) {
 ## Code
 
 ```javascript
-// @debug @enablePreserveExistingMemoizationGuarantees:false
+// @debug
 function Component(props) {
   const x = makeObject();
   const y = delete x[props.value];