[compiler] new tests for props derived

Adds some new test cases for ValidateNoDerivedComputationsInEffects.

.github/workflows/devtools_discord_notify.yml

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

.github/workflows/devtools_regression_tests.yml

@@ -92,7 +92,7 @@ jobs:
         uses: actions/upload-artifact@v4
         with:
           name: react-devtools
-          path: build/devtools
+          path: build/devtools.tgz
           if-no-files-found: error
       # Simplifies getting the extension for local testing
       - name: Archive chrome extension
@@ -201,5 +201,5 @@ jobs:
       - uses: actions/upload-artifact@v4
         with:
           name: screenshots
-          path: ./tmp/playwright-artifacts
+          path: ./tmp/screenshots
           if-no-files-found: warn

.github/workflows/runtime_build_and_test.yml

@@ -766,11 +766,6 @@ jobs:
           name: react-devtools-${{ matrix.browser }}-extension
           path: build/devtools/${{ matrix.browser }}-extension.zip
           if-no-files-found: error
-      - name: Archive ${{ matrix.browser }} metadata
-        uses: actions/upload-artifact@v4
-        with:
-          name: react-devtools-${{ matrix.browser }}-metadata
-          path: build/devtools/webpack-stats.*.json
 
   merge_devtools_artifacts:
     name: Merge DevTools artifacts
@@ -781,7 +776,7 @@ jobs:
         uses: actions/upload-artifact/merge@v4
         with:
           name: react-devtools
-          pattern: react-devtools-*
+          pattern: react-devtools-*-extension
 
   run_devtools_e2e_tests:
     name: Run DevTools e2e tests
@@ -831,12 +826,6 @@ jobs:
       - run: ./scripts/ci/run_devtools_e2e_tests.js
         env:
           RELEASE_CHANNEL: experimental
-      - name: Archive Playwright report
-        uses: actions/upload-artifact@v4
-        with:
-          name: devtools-playwright-artifacts
-          path: tmp/playwright-artifacts
-          if-no-files-found: warn
 
   # ----- SIZEBOT -----
   sizebot:

.github/workflows/runtime_discord_notify.yml

@@ -4,10 +4,8 @@ on:
   pull_request_target:
     types: [opened, ready_for_review]
     paths-ignore:
-      - packages/react-devtools**
       - compiler/**
       - .github/workflows/compiler_**.yml
-      - .github/workflows/devtools**.yml
 
 permissions: {}
 

.gitignore

@@ -23,7 +23,6 @@ chrome-user-data
 .vscode
 *.swp
 *.swo
-/tmp
 
 packages/react-devtools-core/dist
 packages/react-devtools-extensions/chrome/build

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

@@ -1,4 +1,5 @@
-import { c as _c } from "react/compiler-runtime"; // @compilationMode:"all"
+import { c as _c } from "react/compiler-runtime"; // 
+@compilationMode:"all"
 function nonReactFn() {
   const $ = _c(1);
   let t0;

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

@@ -136,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').nth(3).allInnerTexts()) ?? [];
+    (await page.locator('.monaco-editor').nth(1).allInnerTexts()) ?? [];
   const output = await formatPrint(text);
 
   expect(output).not.toEqual('');
@@ -162,7 +162,7 @@ test('reset button works', async ({page}) => {
     path: 'test-results/02-reset-button-works.png',
   });
   const text =
-    (await page.locator('.monaco-editor').nth(3).allInnerTexts()) ?? [];
+    (await page.locator('.monaco-editor').nth(1).allInnerTexts()) ?? [];
   const output = await formatPrint(text);
 
   expect(output).not.toEqual('');
@@ -183,7 +183,7 @@ TEST_CASE_INPUTS.forEach((t, idx) =>
     });
 
     const text =
-      (await page.locator('.monaco-editor').nth(3).allInnerTexts()) ?? [];
+      (await page.locator('.monaco-editor').nth(1).allInnerTexts()) ?? [];
     let output: string;
     if (t.noFormat) {
       output = text.join('');

compiler/apps/playground/app/index.tsx

@@ -0,0 +1,56 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import type {NextPage} from 'next';
+import Head from 'next/head';
+import {SnackbarProvider} from 'notistack';
+import {Editor, Header, StoreProvider} from '../components';
+import MessageSnackbar from '../components/Message';
+
+const Home: NextPage = () => {
+  return (
+    <div className="flex flex-col w-screen h-screen font-light">
+      <Head>
+        <title>
+          {process.env.NODE_ENV === 'development'
+            ? '[DEV] React Compiler Playground'
+            : 'React Compiler Playground'}
+        </title>
+        <meta
+          name="viewport"
+          content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"></meta>
+        <link rel="icon" href="/favicon.ico" />
+        <link rel="manifest" href="/site.webmanifest" />
+        <link
+          rel="preload"
+          href="/fonts/Source-Code-Pro-Regular.woff2"
+          as="font"
+          type="font/woff2"
+          crossOrigin="anonymous"
+        />
+        <link
+          rel="preload"
+          href="/fonts/Optimistic_Display_W_Lt.woff2"
+          as="font"
+          type="font/woff2"
+          crossOrigin="anonymous"
+        />
+      </Head>
+      <StoreProvider>
+        <SnackbarProvider
+          preventDuplicate
+          maxSnack={10}
+          Components={{message: MessageSnackbar}}>
+          <Header />
+          <Editor />
+        </SnackbarProvider>
+      </StoreProvider>
+    </div>
+  );
+};
+
+export default Home;

compiler/apps/playground/components/AccordionWindow.tsx

@@ -1,97 +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 {Resizable} from 're-resizable';
-import React, {useCallback} from 'react';
-
-type TabsRecord = Map<string, React.ReactNode>;
-
-export default function AccordionWindow(props: {
-  defaultTab: string | null;
-  tabs: TabsRecord;
-  tabsOpen: Set<string>;
-  setTabsOpen: (newTab: Set<string>) => void;
-  changedPasses: Set<string>;
-}): React.ReactElement {
-  return (
-    <div className="flex 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>
-  );
-}
-
-function AccordionWindowItem({
-  name,
-  tabs,
-  tabsOpen,
-  setTabsOpen,
-  hasChanged,
-}: {
-  name: string;
-  tabs: TabsRecord;
-  tabsOpen: Set<string>;
-  setTabsOpen: (newTab: Set<string>) => void;
-  hasChanged: boolean;
-}): React.ReactElement {
-  const isShow = tabsOpen.has(name);
-
-  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');
-
-  return (
-    <div key={name} className="flex flex-row">
-      {isShow ? (
-        <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>
-      ) : (
-        <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,78 +6,86 @@
  */
 
 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, useEffect} from 'react';
+import React, {useState, useCallback} from 'react';
 import {Resizable} from 're-resizable';
+import {useSnackbar} from 'notistack';
 import {useStore, useStoreDispatch} from '../StoreContext';
 import {monacoOptions} from './monacoOptions';
-import {IconChevron} from '../Icons/IconChevron';
-import prettyFormat from 'pretty-format';
+import {
+  ConfigError,
+  generateOverridePragmaFromConfig,
+  updateSourceWithOverridePragma,
+} from '../../lib/configUtils';
 
 // @ts-expect-error - webpack asset/source loader handles .d.ts files as strings
 import compilerTypeDefs from 'babel-plugin-react-compiler/dist/index.d.ts';
 
 loader.config({monaco});
 
-export default function ConfigEditor({
-  appliedOptions,
-}: {
-  appliedOptions: PluginOptions | null;
-}): React.ReactElement {
+export default function ConfigEditor(): React.ReactElement {
   const [isExpanded, setIsExpanded] = useState(false);
-
-  return (
-    // TODO: Use <Activity> when it is compatible with Monaco: https://github.com/suren-atoyan/monaco-react/issues/753
-    <>
-      <div
-        style={{
-          display: isExpanded ? 'block' : 'none',
-        }}>
-        <ExpandedEditor
-          onToggle={setIsExpanded}
-          appliedOptions={appliedOptions}
-        />
-      </div>
-      <div
-        style={{
-          display: !isExpanded ? 'block' : 'none',
-        }}>
-        <CollapsedEditor onToggle={setIsExpanded} />
-      </div>
-    </>
-  );
-}
-
-function ExpandedEditor({
-  onToggle,
-  appliedOptions,
-}: {
-  onToggle: (expanded: boolean) => void;
-  appliedOptions: PluginOptions | null;
-}): React.ReactElement {
   const store = useStore();
   const dispatchStore = useStoreDispatch();
-  const debounceTimerRef = useRef<NodeJS.Timeout | null>(null);
+  const {enqueueSnackbar} = useSnackbar();
 
-  const handleChange: (value: string | undefined) => void = (
-    value: string | undefined,
-  ) => {
-    if (value === undefined) return;
+  const toggleExpanded = useCallback(() => {
+    setIsExpanded(prev => !prev);
+  }, []);
 
-    if (debounceTimerRef.current) {
-      clearTimeout(debounceTimerRef.current);
-    }
+  const handleApplyConfig: () => Promise<void> = async () => {
+    try {
+      const config = store.config || '';
+
+      if (!config.trim()) {
+        enqueueSnackbar(
+          'Config is empty. Please add configuration options first.',
+          {
+            variant: 'warning',
+          },
+        );
+        return;
+      }
+      const newPragma = await generateOverridePragmaFromConfig(config);
+      const updatedSource = updateSourceWithOverridePragma(
+        store.source,
+        newPragma,
+      );
 
-    debounceTimerRef.current = setTimeout(() => {
       dispatchStore({
-        type: 'updateConfig',
+        type: 'updateFile',
         payload: {
-          config: value,
+          source: updatedSource,
+          config: config,
         },
       });
-    }, 500); // 500ms debounce delay
+    } catch (error) {
+      console.error('Failed to apply config:', error);
+
+      if (error instanceof ConfigError && error.message.trim()) {
+        enqueueSnackbar(error.message, {
+          variant: 'error',
+        });
+      } else {
+        enqueueSnackbar('Unexpected error: failed to apply config.', {
+          variant: 'error',
+        });
+      }
+    }
+  };
+
+  const handleChange: (value: string | undefined) => void = value => {
+    if (value === undefined) return;
+
+    // Only update the config
+    dispatchStore({
+      type: 'updateFile',
+      payload: {
+        source: store.source,
+        config: value,
+      },
+    });
   };
 
   const handleMount: (
@@ -101,116 +109,75 @@ function ExpandedEditor({
       allowSyntheticDefaultImports: true,
       jsx: monaco.languages.typescript.JsxEmit.React,
     });
+
+    const uri = monaco.Uri.parse(`file:///config.ts`);
+    const model = monaco.editor.getModel(uri);
+    if (model) {
+      model.updateOptions({tabSize: 2});
+    }
   };
 
-  const formattedAppliedOptions = appliedOptions
-    ? prettyFormat(appliedOptions, {
-        printFunctionName: false,
-        printBasicPrototype: false,
-      })
-    : 'Invalid configs';
-
   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
+    <div className="flex flex-row relative">
+      {isExpanded ? (
+        <>
+          <Resizable
+            className="border-r"
+            minWidth={300}
+            maxWidth={600}
+            defaultSize={{width: 350, height: 'auto'}}
+            enable={{right: true}}>
+            <h2
+              title="Minimize config editor"
+              aria-label="Minimize config editor"
+              onClick={toggleExpanded}
+              className="p-4 duration-150 ease-in border-b cursor-pointer border-grey-200 font-light text-secondary hover:text-link">
+              - Config Overrides
             </h2>
-          </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 className="h-[calc(100vh_-_3.5rem_-_4rem)]">
+              <MonacoEditor
+                path={'config.ts'}
+                language={'typescript'}
+                value={store.config}
+                onMount={handleMount}
+                onChange={handleChange}
+                options={{
+                  ...monacoOptions,
+                  lineNumbers: 'off',
+                  folding: false,
+                  renderLineHighlight: 'none',
+                  scrollBeyondLastLine: false,
+                  hideCursorInOverviewRuler: true,
+                  overviewRulerBorder: false,
+                  overviewRulerLanes: 0,
+                  fontSize: 12,
+                }}
+              />
+            </div>
+          </Resizable>
+          <button
+            onClick={handleApplyConfig}
+            title="Apply config overrides to input"
+            aria-label="Apply config overrides to input"
+            className="absolute right-0 top-1/2 transform -translate-y-1/2 translate-x-1/2 z-10 w-8 h-8 bg-blue-500 hover:bg-blue-600 text-white rounded-full border-2 border-white shadow-lg flex items-center justify-center text-sm font-medium transition-colors duration-150">
+            →
+          </button>
+        </>
+      ) : (
+        <div className="relative items-center h-full px-1 py-6 align-middle border-r border-grey-200">
+          <button
+            title="Expand config editor"
+            aria-label="Expand config editor"
+            style={{
+              transform: 'rotate(90deg) translate(-50%)',
+              whiteSpace: 'nowrap',
+            }}
+            onClick={toggleExpanded}
+            className="flex-grow-0 w-5 transition-colors duration-150 ease-in font-light text-secondary hover:text-link">
+            Config Overrides
+          </button>
         </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 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: (expanded: boolean) => void;
-}): React.ReactElement {
-  return (
-    <div
-      className="w-4 !h-[calc(100vh_-_3.5rem)]"
-      style={{position: 'relative'}}>
-      <div
-        className="absolute w-10 h-16 bg-blue-10 hover:translate-x-2 transition-transform rounded-r-full flex items-center justify-center z-[2] cursor-pointer border border-gray-300"
-        title="Expand config editor"
-        onClick={() => onToggle(true)}
-        style={{
-          top: '50%',
-          marginTop: '-32px',
-          left: '-8px',
-          borderTopLeftRadius: 0,
-          borderBottomLeftRadius: 0,
-        }}>
-        <IconChevron displayDirection="right" className="text-blue-50" />
-      </div>
+      )}
     </div>
   );
 }

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

@@ -22,10 +22,21 @@ import BabelPluginReactCompiler, {
   parsePluginOptions,
   printReactiveFunctionWithOutlined,
   printFunctionWithOutlined,
-  type LoggerEvent,
 } from 'babel-plugin-react-compiler';
+import clsx from 'clsx';
+import invariant from 'invariant';
+import {useSnackbar} from 'notistack';
 import {useDeferredValue, useMemo} from 'react';
-import {useStore} from '../StoreContext';
+import {useMountEffect} from '../../hooks';
+import {defaultStore} from '../../lib/defaultStore';
+import {
+  createMessage,
+  initStoreFromUrlOrLocalStorage,
+  MessageLevel,
+  MessageSource,
+  type Store,
+} from '../../lib/stores';
+import {useStore, useStoreDispatch} from '../StoreContext';
 import ConfigEditor from './ConfigEditor';
 import Input from './Input';
 import {
@@ -35,6 +46,8 @@ import {
   PrintedCompilerPipelineValue,
 } from './Output';
 import {transformFromAstSync} from '@babel/core';
+import {LoggerEvent} from 'babel-plugin-react-compiler/dist/Entrypoint';
+import {useSearchParams} from 'next/navigation';
 
 function parseInput(
   input: string,
@@ -131,65 +144,10 @@ const COMMON_HOOKS: Array<[string, Hook]> = [
   ],
 ];
 
-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] {
+): [CompilerOutput, 'flow' | 'typescript'] {
   const results = new Map<string, Array<PrintedCompilerPipelineValue>>();
   const error = new CompilerError();
   const otherErrors: Array<CompilerErrorDetail | CompilerDiagnostic> = [];
@@ -208,94 +166,104 @@ function compile(
     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}`);
-          }
+    // Extract the first line to quickly check for custom test directives
+    const pragma = source.substring(0, source.indexOf('\n'));
+    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,
-          }),
-        );
       }
+    };
+    const parsedOptions = 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 */
+            },
+    });
+    const opts: PluginOptions = parsePluginOptions({
+      ...parsedOptions,
+      environment: {
+        ...parsedOptions.environment,
+        customHooks: new Map([...COMMON_HOOKS]),
+      },
+      logger: {
+        debugLogIRs: logIR,
+        logEvent: (_filename: string | null, event: LoggerEvent) => {
+          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
+       */
+      console.error(err);
+      error.details.push(
+        new CompilerErrorDetail({
+          category: ErrorCategory.Invariant,
+          reason: `Unexpected failure when transforming input! ${err}`,
+          loc: null,
+          suggestions: null,
+        }),
+      );
     }
   }
   // Only include logger errors if there weren't other errors
@@ -303,27 +271,59 @@ function compile(
     otherErrors.forEach(e => error.details.push(e));
   }
   if (error.hasErrors()) {
-    return [{kind: 'err', results, error}, language, baseOpts];
+    return [{kind: 'err', results, error}, language];
   }
   return [
     {kind: 'ok', results, transformOutput, errors: error.details},
     language,
-    baseOpts,
   ];
 }
 
 export default function Editor(): JSX.Element {
   const store = useStore();
   const deferredStore = useDeferredValue(store);
-  const [compilerOutput, language, appliedOptions] = useMemo(
-    () => compile(deferredStore.source, 'compiler', deferredStore.config),
-    [deferredStore.source, deferredStore.config],
+  const dispatchStore = useStoreDispatch();
+  const {enqueueSnackbar} = useSnackbar();
+  const [compilerOutput, language] = useMemo(
+    () => compile(deferredStore.source, 'compiler'),
+    [deferredStore.source],
   );
   const [linterOutput] = useMemo(
-    () => compile(deferredStore.source, 'linter', deferredStore.config),
-    [deferredStore.source, deferredStore.config],
+    () => compile(deferredStore.source, 'linter'),
+    [deferredStore.source],
   );
 
+  // TODO: Remove this once the config editor is more stable
+  const searchParams = useSearchParams();
+  const search = searchParams.get('showConfig');
+  const shouldShowConfig = search === 'true';
+
+  useMountEffect(() => {
+    // Initialize store
+    let mountStore: Store;
+    try {
+      mountStore = initStoreFromUrlOrLocalStorage();
+    } catch (e) {
+      invariant(e instanceof Error, 'Only Error may be caught.');
+      enqueueSnackbar(e.message, {
+        variant: 'warning',
+        ...createMessage(
+          'Bad URL - fell back to the default Playground.',
+          MessageLevel.Info,
+          MessageSource.Playground,
+        ),
+      });
+      mountStore = defaultStore;
+    }
+
+    dispatchStore({
+      type: 'setStore',
+      payload: {
+        store: mountStore,
+      },
+    });
+  });
+
   let mergedOutput: CompilerOutput;
   let errors: Array<CompilerErrorDetail | CompilerDiagnostic>;
   if (compilerOutput.kind === 'ok') {
@@ -338,17 +338,13 @@ export default function Editor(): JSX.Element {
   }
   return (
     <>
-      <div className="relative flex top-14">
-        <div className="flex-shrink-0">
-          <ConfigEditor appliedOptions={appliedOptions} />
+      <div className="relative flex basis top-14">
+        {shouldShowConfig && <ConfigEditor />}
+        <div className={clsx('relative sm:basis-1/4')}>
+          <Input language={language} errors={errors} />
         </div>
-        <div className="flex flex-1 min-w-0">
-          <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 className={clsx('flex sm:flex flex-wrap')}>
+          <Output store={deferredStore} compilerOutput={mergedOutput} />
         </div>
       </div>
     </>

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

@@ -6,25 +6,23 @@
  */
 
 import MonacoEditor, {loader, type Monaco} from '@monaco-editor/react';
-import {
-  CompilerErrorDetail,
-  CompilerDiagnostic,
-} from 'babel-plugin-react-compiler';
+import {CompilerErrorDetail} from 'babel-plugin-react-compiler';
 import invariant from 'invariant';
 import type {editor} from 'monaco-editor';
 import * as monaco from 'monaco-editor';
+import {Resizable} from 're-resizable';
 import {useEffect, useState} from 'react';
 import {renderReactCompilerMarkers} from '../../lib/reactCompilerMonacoDiagnostics';
 import {useStore, useStoreDispatch} from '../StoreContext';
-import TabbedWindow from '../TabbedWindow';
 import {monacoOptions} from './monacoOptions';
 // @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';
+import {parseAndFormatConfig} from '../../lib/configUtils.ts';
 
 loader.config({monaco});
 
 type Props = {
-  errors: Array<CompilerErrorDetail | CompilerDiagnostic>;
+  errors: Array<CompilerErrorDetail>;
   language: 'flow' | 'typescript';
 };
 
@@ -45,6 +43,11 @@ export default function Input({errors, language}: Props): JSX.Element {
       details: errors,
       source: store.source,
     });
+    /**
+     * N.B. that `tabSize` is a model property, not an editor property.
+     * So, the tab size has to be set per model.
+     */
+    model.updateOptions({tabSize: 2});
   }, [monaco, errors, store.source]);
 
   useEffect(() => {
@@ -80,10 +83,14 @@ export default function Input({errors, language}: Props): JSX.Element {
   const handleChange: (value: string | undefined) => void = async value => {
     if (!value) return;
 
+    // Parse and format the config
+    const config = await parseAndFormatConfig(value);
+
     dispatchStore({
-      type: 'updateSource',
+      type: 'updateFile',
       payload: {
         source: value,
+        config,
       },
     });
   };
@@ -133,37 +140,30 @@ export default function Input({errors, language}: Props): JSX.Element {
     });
   };
 
-  const editorContent = (
-    <MonacoEditor
-      path={'index.js'}
-      /**
-       * .js and .jsx files are specified to be TS so that Monaco can actually
-       * check their syntax using its TS language service. They are still JS files
-       * due to their extensions, so TS language features don't work.
-       */
-      language={'javascript'}
-      value={store.source}
-      onMount={handleMount}
-      onChange={handleChange}
-      options={monacoOptions}
-      loading={''}
-    />
-  );
-
-  const tabs = new Map([['Input', editorContent]]);
-  const [activeTab, setActiveTab] = useState('Input');
-
   return (
     <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}
-            onTabChange={setActiveTab}
-          />
-        </div>
-      </div>
+      <Resizable
+        minWidth={650}
+        enable={{right: true}}
+        /**
+         * Restrict MonacoEditor's height, since the config autoLayout:true
+         * will grow the editor to fit within parent element
+         */
+        className="!h-[calc(100vh_-_3.5rem)]">
+        <MonacoEditor
+          path={'index.js'}
+          /**
+           * .js and .jsx files are specified to be TS so that Monaco can actually
+           * check their syntax using its TS language service. They are still JS files
+           * due to their extensions, so TS language features don't work.
+           */
+          language={'javascript'}
+          value={store.source}
+          onMount={handleMount}
+          onChange={handleChange}
+          options={monacoOptions}
+        />
+      </Resizable>
     </div>
   );
 }

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

@@ -21,17 +21,13 @@ 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 AccordionWindow from '../AccordionWindow';
 import TabbedWindow from '../TabbedWindow';
 import {monacoOptions} from './monacoOptions';
 import {BabelFileResult} from '@babel/core';
-
 const MemoizedOutput = memo(Output);
 
 export default MemoizedOutput;
 
-export const BASIC_OUTPUT_TAB_NAMES = ['Output', 'SourceMap'];
-
 export type PrintedCompilerPipelineValue =
   | {
       kind: 'hir';
@@ -75,7 +71,7 @@ async function tabify(
   const concattedResults = new Map<string, string>();
   // Concat all top level function declaration results into a single tab for each pass
   for (const [passName, results] of compilerOutput.results) {
-    if (!showInternals && !BASIC_OUTPUT_TAB_NAMES.includes(passName)) {
+    if (!showInternals && passName !== 'Output' && passName !== 'SourceMap') {
       continue;
     }
     for (const result of results) {
@@ -219,7 +215,6 @@ function Output({store, compilerOutput}: Props): JSX.Element {
   const [tabs, setTabs] = useState<Map<string, React.ReactNode>>(
     () => new Map(),
   );
-  const [activeTab, setActiveTab] = useState<string>('Output');
 
   /*
    * Update the active tab back to the output or errors tab when the compilation state
@@ -231,7 +226,6 @@ function Output({store, compilerOutput}: Props): JSX.Element {
   if (compilerOutput.kind !== previousOutputKind) {
     setPreviousOutputKind(compilerOutput.kind);
     setTabsOpen(new Set(['Output']));
-    setActiveTab('Output');
   }
 
   useEffect(() => {
@@ -255,24 +249,16 @@ function Output({store, compilerOutput}: Props): JSX.Element {
     }
   }
 
-  if (!store.showInternals) {
-    return (
-      <TabbedWindow
-        tabs={tabs}
-        activeTab={activeTab}
-        onTabChange={setActiveTab}
-      />
-    );
-  }
-
   return (
-    <AccordionWindow
-      defaultTab={store.showInternals ? 'HIR' : 'Output'}
-      setTabsOpen={setTabsOpen}
-      tabsOpen={tabsOpen}
-      tabs={tabs}
-      changedPasses={changedPasses}
-    />
+    <>
+      <TabbedWindow
+        defaultTab={store.showInternals ? 'HIR' : 'Output'}
+        setTabsOpen={setTabsOpen}
+        tabsOpen={tabsOpen}
+        tabs={tabs}
+        changedPasses={changedPasses}
+      />
+    </>
   );
 }
 
@@ -324,7 +310,6 @@ function TextTabContent({
         <DiffEditor
           original={diff}
           modified={output}
-          loading={''}
           options={{
             ...monacoOptions,
             readOnly: true,
@@ -339,7 +324,6 @@ function TextTabContent({
         <MonacoEditor
           language={language ?? 'javascript'}
           value={output}
-          loading={''}
           options={{
             ...monacoOptions,
             readOnly: true,

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

@@ -29,6 +29,4 @@ export const monacoOptions: Partial<EditorProps['options']> = {
   automaticLayout: true,
   wordWrap: 'on',
   wrappingIndent: 'same',
-
-  tabSize: 2,
 };

compiler/apps/playground/components/Header.tsx

@@ -72,7 +72,7 @@ export default function Header(): JSX.Element {
                 'before:bg-white before:rounded-full before:transition-transform before:duration-250',
                 'focus-within:shadow-[0_0_1px_#2196F3]',
                 store.showInternals
-                  ? 'bg-link before:translate-x-3.5'
+                  ? 'bg-blue-500 before:translate-x-3.5'
                   : 'bg-gray-300',
               )}></span>
           </label>

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

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

compiler/apps/playground/components/StoreContext.tsx

@@ -6,14 +6,10 @@
  */
 
 import type {Dispatch, ReactNode} from 'react';
-import {useState, useEffect, useReducer} from 'react';
+import {useEffect, useReducer} from 'react';
 import createContext from '../lib/createContext';
-import {emptyStore, defaultStore} from '../lib/defaultStore';
-import {
-  saveStore,
-  initStoreFromUrlOrLocalStorage,
-  type Store,
-} from '../lib/stores';
+import {emptyStore} from '../lib/defaultStore';
+import {saveStore, type Store} from '../lib/stores';
 
 const StoreContext = createContext<Store>();
 
@@ -34,20 +30,6 @@ export const useStoreDispatch = StoreDispatchContext.useContext;
  */
 export function StoreProvider({children}: {children: ReactNode}): JSX.Element {
   const [store, dispatch] = useReducer(storeReducer, emptyStore);
-  const [isPageReady, setIsPageReady] = useState<boolean>(false);
-
-  useEffect(() => {
-    let mountStore: Store;
-    try {
-      mountStore = initStoreFromUrlOrLocalStorage();
-    } catch (e) {
-      console.error('Failed to initialize store from URL or local storage', e);
-      mountStore = defaultStore;
-    }
-    dispatch({type: 'setStore', payload: {store: mountStore}});
-    setIsPageReady(true);
-  }, []);
-
   useEffect(() => {
     if (store !== emptyStore) {
       saveStore(store);
@@ -57,7 +39,7 @@ export function StoreProvider({children}: {children: ReactNode}): JSX.Element {
   return (
     <StoreContext.Provider value={store}>
       <StoreDispatchContext.Provider value={dispatch}>
-        {isPageReady ? children : null}
+        {children}
       </StoreDispatchContext.Provider>
     </StoreContext.Provider>
   );
@@ -71,14 +53,9 @@ type ReducerAction =
       };
     }
   | {
-      type: 'updateSource';
+      type: 'updateFile';
       payload: {
         source: string;
-      };
-    }
-  | {
-      type: 'updateConfig';
-      payload: {
         config: string;
       };
     }
@@ -92,18 +69,11 @@ function storeReducer(store: Store, action: ReducerAction): Store {
       const newStore = action.payload.store;
       return newStore;
     }
-    case 'updateSource': {
-      const source = action.payload.source;
+    case 'updateFile': {
+      const {source, config} = action.payload;
       const newStore = {
         ...store,
         source,
-      };
-      return newStore;
-    }
-    case 'updateConfig': {
-      const config = action.payload.config;
-      const newStore = {
-        ...store,
         config,
       };
       return newStore;

compiler/apps/playground/components/TabbedWindow.tsx

@@ -4,40 +4,103 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-import React from 'react';
-import clsx from 'clsx';
 
-export default function TabbedWindow({
-  tabs,
-  activeTab,
-  onTabChange,
-}: {
-  tabs: Map<string, React.ReactNode>;
-  activeTab: string;
-  onTabChange: (tab: string) => void;
+import {Resizable} from 're-resizable';
+import React, {useCallback} from 'react';
+
+type TabsRecord = Map<string, React.ReactNode>;
+
+export default function TabbedWindow(props: {
+  defaultTab: string | null;
+  tabs: TabsRecord;
+  tabsOpen: Set<string>;
+  setTabsOpen: (newTab: Set<string>) => void;
+  changedPasses: Set<string>;
 }): React.ReactElement {
+  if (props.tabs.size === 0) {
+    return (
+      <div
+        className="flex items-center justify-center"
+        style={{width: 'calc(100vw - 650px)'}}>
+        No compiler output detected, see errors below
+      </div>
+    );
+  }
   return (
-    <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 className="flex flex-row">
+      {Array.from(props.tabs.keys()).map(name => {
+        return (
+          <TabbedWindowItem
+            name={name}
+            key={name}
+            tabs={props.tabs}
+            tabsOpen={props.tabsOpen}
+            setTabsOpen={props.setTabsOpen}
+            hasChanged={props.changedPasses.has(name)}
+          />
+        );
+      })}
+    </div>
+  );
+}
+
+function TabbedWindowItem({
+  name,
+  tabs,
+  tabsOpen,
+  setTabsOpen,
+  hasChanged,
+}: {
+  name: string;
+  tabs: TabsRecord;
+  tabsOpen: Set<string>;
+  setTabsOpen: (newTab: Set<string>) => void;
+  hasChanged: boolean;
+}): React.ReactElement {
+  const isShow = tabsOpen.has(name);
+
+  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');
+
+  return (
+    <div key={name} className="flex flex-row">
+      {isShow ? (
+        <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>
+      ) : (
+        <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/lib/configUtils.ts

@@ -0,0 +1,120 @@
+/**
+ * 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 parserBabel from 'prettier/plugins/babel';
+import prettierPluginEstree from 'prettier/plugins/estree';
+import * as prettier from 'prettier/standalone';
+import {parsePluginOptions} from 'babel-plugin-react-compiler';
+import {parseConfigPragmaAsString} from '../../../packages/babel-plugin-react-compiler/src/Utils/TestUtils';
+
+export class ConfigError extends Error {
+  constructor(message: string) {
+    super(message);
+    this.name = 'ConfigError';
+  }
+}
+/**
+ * Parse config from pragma and format it with prettier
+ */
+export async function parseAndFormatConfig(source: string): Promise<string> {
+  const pragma = source.substring(0, source.indexOf('\n'));
+  let configString = parseConfigPragmaAsString(pragma);
+  if (configString !== '') {
+    configString = `\
+    import type { PluginOptions } from 'babel-plugin-react-compiler/dist';
+
+    (${configString} satisfies Partial<PluginOptions>)`;
+  }
+
+  try {
+    const formatted = await prettier.format(configString, {
+      semi: true,
+      parser: 'babel-ts',
+      plugins: [parserBabel, prettierPluginEstree],
+    });
+    return formatted;
+  } catch (error) {
+    console.error('Error formatting config:', error);
+    return ''; // Return empty string if not valid for now
+  }
+}
+
+function extractCurlyBracesContent(input: string): string {
+  const startIndex = input.indexOf('({') + 1;
+  const endIndex = input.lastIndexOf('}');
+  if (startIndex === -1 || endIndex === -1 || endIndex <= startIndex) {
+    throw new Error('No outer curly braces found in input.');
+  }
+  return input.slice(startIndex, endIndex + 1);
+}
+
+function cleanContent(content: string): string {
+  return content
+    .replace(/[\r\n]+/g, ' ')
+    .replace(/\s+/g, ' ')
+    .trim();
+}
+
+/**
+ * Validate that a config string can be parsed as a valid PluginOptions object
+ * Throws an error if validation fails.
+ */
+function validateConfigAsPluginOptions(configString: string): void {
+  // Validate that config can be parse as JS obj
+  let parsedConfig: unknown;
+  try {
+    parsedConfig = new Function(`return (${configString})`)();
+  } catch (_) {
+    throw new ConfigError('Config has invalid syntax.');
+  }
+
+  // Validate against PluginOptions schema
+  try {
+    parsePluginOptions(parsedConfig);
+  } catch (_) {
+    throw new ConfigError('Config does not match the expected schema.');
+  }
+}
+
+/**
+ * Generate a the override pragma comment from a formatted config object string
+ */
+export async function generateOverridePragmaFromConfig(
+  formattedConfigString: string,
+): Promise<string> {
+  const content = extractCurlyBracesContent(formattedConfigString);
+  const cleanConfig = cleanContent(content);
+
+  validateConfigAsPluginOptions(cleanConfig);
+
+  // Format the config to ensure it's valid
+  await prettier.format(`(${cleanConfig})`, {
+    semi: false,
+    parser: 'babel-ts',
+    plugins: [parserBabel, prettierPluginEstree],
+  });
+
+  return `// @OVERRIDE:${cleanConfig}`;
+}
+
+/**
+ * Update the override pragma comment in source code.
+ */
+export function updateSourceWithOverridePragma(
+  source: string,
+  newPragma: string,
+): string {
+  const firstLineEnd = source.indexOf('\n');
+  const firstLine = source.substring(0, firstLineEnd);
+
+  const pragmaRegex = /^\/\/\s*@/;
+  if (firstLineEnd !== -1 && pragmaRegex.test(firstLine.trim())) {
+    return newPragma + source.substring(firstLineEnd);
+  } else {
+    return newPragma + '\n' + source;
+  }
+}

compiler/apps/playground/lib/defaultStore.ts

@@ -17,7 +17,22 @@ export const defaultConfig = `\
 import type { PluginOptions } from 'babel-plugin-react-compiler/dist';
 
 ({
-  //compilationMode: "all"
+  compilationMode: 'infer',
+  panicThreshold: 'none',
+  environment: {},
+  logger: null,
+  gating: null,
+  noEmit: false,
+  dynamicGating: null,
+  eslintSuppressionRules: null,
+  flowSuppressions: true,
+  ignoreUseNoForget: false,
+  sources: filename => {
+    return filename.indexOf('node_modules') === -1;
+  },
+  enableReanimatedCheck: true,
+  customOptOutDirectives: null,
+  target: '19',
 } satisfies Partial<PluginOptions>);`;
 
 export const defaultStore: Store = {

compiler/apps/playground/lib/stores/store.ts

@@ -71,7 +71,7 @@ export function initStoreFromUrlOrLocalStorage(): Store {
   // Make sure all properties are populated
   return {
     source: raw.source,
-    config: 'config' in raw && raw['config'] ? raw.config : defaultConfig,
+    config: 'config' in raw ? raw.config : defaultConfig,
     showInternals: 'showInternals' in raw ? raw.showInternals : false,
   };
 }

compiler/apps/playground/next-env.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
-import "./.next/types/routes.d.ts";
+/// <reference path="./.next/types/routes.d.ts" />
 
 // NOTE: This file should not be edited
 // see https://nextjs.org/docs/app/api-reference/config/typescript for more information.

compiler/apps/playground/package.json

@@ -34,7 +34,7 @@
     "invariant": "^2.2.4",
     "lz-string": "^1.5.0",
     "monaco-editor": "^0.52.0",
-    "next": "15.6.0-canary.7",
+    "next": "15.5.2",
     "notistack": "^3.0.0-alpha.7",
     "prettier": "^3.3.3",
     "pretty-format": "^29.3.1",
@@ -44,7 +44,7 @@
   },
   "devDependencies": {
     "@types/node": "18.11.9",
-    "@types/react": "19.1.13",
+    "@types/react": "19.1.12",
     "@types/react-dom": "19.1.9",
     "autoprefixer": "^10.4.13",
     "clsx": "^1.2.1",

compiler/apps/playground/playwright.config.js

@@ -55,16 +55,12 @@ export default defineConfig({
     // contextOptions: {
     //   ignoreHTTPSErrors: true,
     // },
-    viewport: {width: 1920, height: 1080},
   },
 
   projects: [
     {
       name: 'chromium',
-      use: {
-        ...devices['Desktop Chrome'],
-        viewport: {width: 1920, height: 1080},
-      },
+      use: {...devices['Desktop Chrome']},
     },
     // {
     //   name: 'Desktop Firefox',

compiler/apps/playground/tsconfig.json

@@ -6,9 +6,6 @@
       "dom.iterable",
       "esnext"
     ],
-    "types": [
-      "react/experimental"
-    ],
     "allowJs": true,
     "skipLibCheck": true,
     "strict": true,
@@ -19,7 +16,7 @@
     "moduleResolution": "node",
     "resolveJsonModule": true,
     "isolatedModules": true,
-    "jsx": "react-jsx",
+    "jsx": "preserve",
     "incremental": true,
     "plugins": [
       {

compiler/apps/playground/yarn.lock

@@ -715,10 +715,10 @@
   dependencies:
     "@monaco-editor/loader" "^1.4.0"
 
-"@next/env@15.6.0-canary.7":
-  version "15.6.0-canary.7"
-  resolved "https://registry.yarnpkg.com/@next/env/-/env-15.6.0-canary.7.tgz#cdbf2967a9437ef09eef755e203f315acc4d8d8f"
-  integrity sha512-LNZ7Yd3Cl9rKvjYdeJmszf2HmSDP76SQmfafKep2Ux16ZXKoN5OjwVHFTltKNdsB3vt2t+XJzLP2rhw5lBoFBA==
+"@next/env@15.5.2":
+  version "15.5.2"
+  resolved "https://registry.yarnpkg.com/@next/env/-/env-15.5.2.tgz#0c6b959313cd6e71afb69bf0deb417237f1d2f8a"
+  integrity sha512-Qe06ew4zt12LeO6N7j8/nULSOe3fMXE4dM6xgpBQNvdzyK1sv5y4oAP3bq4LamrvGCZtmRYnW8URFCeX5nFgGg==
 
 "@next/eslint-plugin-next@15.5.2":
   version "15.5.2"
@@ -727,45 +727,45 @@
   dependencies:
     fast-glob "3.3.1"
 
-"@next/swc-darwin-arm64@15.6.0-canary.7":
-  version "15.6.0-canary.7"
-  resolved "https://registry.yarnpkg.com/@next/swc-darwin-arm64/-/swc-darwin-arm64-15.6.0-canary.7.tgz#628cd34ce9120000f1cb5b08963426431174fc57"
-  integrity sha512-POsBrxhrR3qvqXV+JZ6ZoBc8gJf8rhYe+OedceI1piPVqtJYOJa3EB4eaqcc+kMsllKRrH/goNlhLwtyhE+0Qg==
+"@next/swc-darwin-arm64@15.5.2":
+  version "15.5.2"
+  resolved "https://registry.yarnpkg.com/@next/swc-darwin-arm64/-/swc-darwin-arm64-15.5.2.tgz#f69713326fc08f2eff3726fe19165cdb429d67c7"
+  integrity sha512-8bGt577BXGSd4iqFygmzIfTYizHb0LGWqH+qgIF/2EDxS5JsSdERJKA8WgwDyNBZgTIIA4D8qUtoQHmxIIquoQ==
 
-"@next/swc-darwin-x64@15.6.0-canary.7":
-  version "15.6.0-canary.7"
-  resolved "https://registry.yarnpkg.com/@next/swc-darwin-x64/-/swc-darwin-x64-15.6.0-canary.7.tgz#37d4ebab14da74a2f8028daf6d76aab410153e06"
-  integrity sha512-lmk9ysBuSiPlAJZTCo/3O4mXNFosg6EDIf4GrmynIwCG2as6/KxzyD1WqFp56Exp8eFDjP7SFapD10sV43vCsA==
+"@next/swc-darwin-x64@15.5.2":
+  version "15.5.2"
+  resolved "https://registry.yarnpkg.com/@next/swc-darwin-x64/-/swc-darwin-x64-15.5.2.tgz#560a9da4126bae75cbbd6899646ad7a2e4fdcc9b"
+  integrity sha512-2DjnmR6JHK4X+dgTXt5/sOCu/7yPtqpYt8s8hLkHFK3MGkka2snTv3yRMdHvuRtJVkPwCGsvBSwmoQCHatauFQ==
 
-"@next/swc-linux-arm64-gnu@15.6.0-canary.7":
-  version "15.6.0-canary.7"
-  resolved "https://registry.yarnpkg.com/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-15.6.0-canary.7.tgz#ce700cc0e0d24763136838223105a524b36694fa"
-  integrity sha512-why8k6d0SBm3AKoOD5S7ir3g+BF34l9oFKIoZrLaZaKBvNGpFcjc7Ovc2TunNMeaMJzv9k1dHYSap0EI5oSuzg==
+"@next/swc-linux-arm64-gnu@15.5.2":
+  version "15.5.2"
+  resolved "https://registry.yarnpkg.com/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-15.5.2.tgz#80b2be276e775e5a9286369ae54e536b0cdf8c3a"
+  integrity sha512-3j7SWDBS2Wov/L9q0mFJtEvQ5miIqfO4l7d2m9Mo06ddsgUK8gWfHGgbjdFlCp2Ek7MmMQZSxpGFqcC8zGh2AA==
 
-"@next/swc-linux-arm64-musl@15.6.0-canary.7":
-  version "15.6.0-canary.7"
-  resolved "https://registry.yarnpkg.com/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-15.6.0-canary.7.tgz#c791b8e15bf2c338b4cc0387fe7afb3ef83ecfcf"
-  integrity sha512-HzvTRsKvYj32Va4YuJN3n3xOxvk+6QwB63d/EsgmdkeA/vrqciUAmJDYpuzZEvRc3Yp2nyPq8KZxtHAr6ISZ2Q==
+"@next/swc-linux-arm64-musl@15.5.2":
+  version "15.5.2"
+  resolved "https://registry.yarnpkg.com/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-15.5.2.tgz#68cf676301755fd99aca11a7ebdb5eae88d7c2e4"
+  integrity sha512-s6N8k8dF9YGc5T01UPQ08yxsK6fUow5gG1/axWc1HVVBYQBgOjca4oUZF7s4p+kwhkB1bDSGR8QznWrFZ/Rt5g==
 
-"@next/swc-linux-x64-gnu@15.6.0-canary.7":
-  version "15.6.0-canary.7"
-  resolved "https://registry.yarnpkg.com/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-15.6.0-canary.7.tgz#c01c3a3d8e71660c49298dd053d078379b6b5919"
-  integrity sha512-6yRFrg2qWXOqa+1BI53J9EmHWFzKg9U2r+5R7n7BFUp8PH5SC92WBsmYTnh/RkvAYvdupiVzMervwwswCs6kFg==
+"@next/swc-linux-x64-gnu@15.5.2":
+  version "15.5.2"
+  resolved "https://registry.yarnpkg.com/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-15.5.2.tgz#209d9a79d0f2333544f863b0daca3f7e29f2eaff"
+  integrity sha512-o1RV/KOODQh6dM6ZRJGZbc+MOAHww33Vbs5JC9Mp1gDk8cpEO+cYC/l7rweiEalkSm5/1WGa4zY7xrNwObN4+Q==
 
-"@next/swc-linux-x64-musl@15.6.0-canary.7":
-  version "15.6.0-canary.7"
-  resolved "https://registry.yarnpkg.com/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-15.6.0-canary.7.tgz#3f4b39faef4a5f88b13e4c726b008ddc9717f819"
-  integrity sha512-O/JjvOvNK/Wao/OIQaA6evDkxkmFFQgJ1/hI1dVk6/PAeKmW2/Q+6Dodh97eAkOwedS1ZdQl2mojf87TzLvzdQ==
+"@next/swc-linux-x64-musl@15.5.2":
+  version "15.5.2"
+  resolved "https://registry.yarnpkg.com/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-15.5.2.tgz#d4ad1cfb5e99e51db669fe2145710c1abeadbd7f"
+  integrity sha512-/VUnh7w8RElYZ0IV83nUcP/J4KJ6LLYliiBIri3p3aW2giF+PAVgZb6mk8jbQSB3WlTai8gEmCAr7kptFa1H6g==
 
-"@next/swc-win32-arm64-msvc@15.6.0-canary.7":
-  version "15.6.0-canary.7"
-  resolved "https://registry.yarnpkg.com/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-15.6.0-canary.7.tgz#9bc5da0907b7ce67eedda02a6d56a09d9a539ccf"
-  integrity sha512-p9DvrDgnePofZCtiWVY7qZtwXxiOGJlAyy2LoGPYSGOUDhjbTG8j6XMUFXpV9UwpH+l7st522psO1BVzbpT8IQ==
+"@next/swc-win32-arm64-msvc@15.5.2":
+  version "15.5.2"
+  resolved "https://registry.yarnpkg.com/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-15.5.2.tgz#070e10e370a5447a198c2db100389646aca2c496"
+  integrity sha512-sMPyTvRcNKXseNQ/7qRfVRLa0VhR0esmQ29DD6pqvG71+JdVnESJaHPA8t7bc67KD5spP3+DOCNLhqlEI2ZgQg==
 
-"@next/swc-win32-x64-msvc@15.6.0-canary.7":
-  version "15.6.0-canary.7"
-  resolved "https://registry.yarnpkg.com/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-15.6.0-canary.7.tgz#5b271c591ccbe67d5fa966dd22db86c547414fd1"
-  integrity sha512-f1ywT3xWu4StWKA1mZRyGfelu/h+W0OEEyBxQNXzXyYa0VGZb9LyCNb5cYoNKBm0Bw18Hp1PVe0bHuusemGCcw==
+"@next/swc-win32-x64-msvc@15.5.2":
+  version "15.5.2"
+  resolved "https://registry.yarnpkg.com/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-15.5.2.tgz#9237d40b82eaf2efc88baeba15b784d4126caf4a"
+  integrity sha512-W5VvyZHnxG/2ukhZF/9Ikdra5fdNftxI6ybeVKYvBPDtyx7x4jPPSNduUkfH5fo3zG0JQ0bPxgy41af2JX5D4Q==
 
 "@nodelib/fs.scandir@2.1.5":
   version "2.1.5"
@@ -866,13 +866,6 @@
   dependencies:
     csstype "^3.0.2"
 
-"@types/react@19.1.13":
-  version "19.1.13"
-  resolved "https://registry.yarnpkg.com/@types/react/-/react-19.1.13.tgz#fc650ffa680d739a25a530f5d7ebe00cdd771883"
-  integrity sha512-hHkbU/eoO3EG5/MZkuFSKmYqPbSVk5byPFa3e7y/8TybHiLMACgI8seVYlicwk7H5K/rI2px9xrQp/C+AUDTiQ==
-  dependencies:
-    csstype "^3.0.2"
-
 "@typescript-eslint/eslint-plugin@^5.4.2 || ^6.0.0 || ^7.0.0 || ^8.0.0":
   version "8.10.0"
   resolved "https://registry.yarnpkg.com/@typescript-eslint/eslint-plugin/-/eslint-plugin-8.10.0.tgz#9c8218ed62f9a322df10ded7c34990f014df44f2"
@@ -3206,25 +3199,25 @@ natural-compare@^1.4.0:
   resolved "https://registry.yarnpkg.com/natural-compare/-/natural-compare-1.4.0.tgz#4abebfeed7541f2c27acfb29bdbbd15c8d5ba4f7"
   integrity sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==
 
-next@15.6.0-canary.7:
-  version "15.6.0-canary.7"
-  resolved "https://registry.yarnpkg.com/next/-/next-15.6.0-canary.7.tgz#bfc2ac3c9a78e23d550c303d18247a263e6b5bc1"
-  integrity sha512-4ukX2mxat9wWT6E0Gw/3TOR9ULV1q399E42F86cwsPSFgTWa04ABhcTqO0r9J/QR1YWPR8WEgh9qUzmWA/1yEw==
+next@15.5.2:
+  version "15.5.2"
+  resolved "https://registry.yarnpkg.com/next/-/next-15.5.2.tgz#5e50102443fb0328a9dfcac2d82465c7bac93693"
+  integrity sha512-H8Otr7abj1glFhbGnvUt3gz++0AF1+QoCXEBmd/6aKbfdFwrn0LpA836Ed5+00va/7HQSDD+mOoVhn3tNy3e/Q==
   dependencies:
-    "@next/env" "15.6.0-canary.7"
+    "@next/env" "15.5.2"
     "@swc/helpers" "0.5.15"
     caniuse-lite "^1.0.30001579"
     postcss "8.4.31"
     styled-jsx "5.1.6"
   optionalDependencies:
-    "@next/swc-darwin-arm64" "15.6.0-canary.7"
-    "@next/swc-darwin-x64" "15.6.0-canary.7"
-    "@next/swc-linux-arm64-gnu" "15.6.0-canary.7"
-    "@next/swc-linux-arm64-musl" "15.6.0-canary.7"
-    "@next/swc-linux-x64-gnu" "15.6.0-canary.7"
-    "@next/swc-linux-x64-musl" "15.6.0-canary.7"
-    "@next/swc-win32-arm64-msvc" "15.6.0-canary.7"
-    "@next/swc-win32-x64-msvc" "15.6.0-canary.7"
+    "@next/swc-darwin-arm64" "15.5.2"
+    "@next/swc-darwin-x64" "15.5.2"
+    "@next/swc-linux-arm64-gnu" "15.5.2"
+    "@next/swc-linux-arm64-musl" "15.5.2"
+    "@next/swc-linux-x64-gnu" "15.5.2"
+    "@next/swc-linux-x64-musl" "15.5.2"
+    "@next/swc-win32-arm64-msvc" "15.5.2"
+    "@next/swc-win32-x64-msvc" "15.5.2"
     sharp "^0.34.3"
 
 node-releases@^2.0.18:

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

@@ -276,7 +276,7 @@ function runWithEnvironment(
     }
 
     if (env.config.validateNoSetStateInEffects) {
-      env.logErrors(validateNoSetStateInEffects(hir, env));
+      env.logErrors(validateNoSetStateInEffects(hir));
     }
 
     if (env.config.validateNoJSXInTryStatements) {

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

@@ -3081,12 +3081,6 @@ function isReorderableExpression(
         return true;
       }
     }
-    case 'TSInstantiationExpression': {
-      const innerExpr = (expr as NodePath<t.TSInstantiationExpression>).get(
-        'expression',
-      ) as NodePath<t.Expression>;
-      return isReorderableExpression(builder, innerExpr, allowLocalIdentifiers);
-    }
     case 'RegExpLiteral':
     case 'StringLiteral':
     case 'NumericLiteral':

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

@@ -86,24 +86,6 @@ export function defaultModuleTypeProvider(
         },
       };
     }
-    case '@tanstack/react-virtual': {
-      return {
-        kind: 'object',
-        properties: {
-          /*
-           * Many of the properties of `useVirtualizer()`'s return value are incompatible, so we mark the entire hook
-           * as incompatible
-           */
-          useVirtualizer: {
-            kind: 'hook',
-            positionalParams: [],
-            restParam: Effect.Read,
-            returnType: {kind: 'type', name: 'Any'},
-            knownIncompatible: `TanStack Virtual's \`useVirtualizer()\` API returns functions that cannot be memoized safely`,
-          },
-        },
-      };
-    }
   }
   return null;
 }

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

@@ -621,13 +621,6 @@ export const EnvironmentConfigSchema = z.object({
    */
   enableTreatRefLikeIdentifiersAsRefs: z.boolean().default(true),
 
-  /**
-   * Treat identifiers as SetState type if both
-   * - they are named with a "set-" prefix
-   * - they are called somewhere
-   */
-  enableTreatSetIdentifiersAsStateSetters: z.boolean().default(false),
-
   /*
    * If specified a value, the compiler lowers any calls to `useContext` to use
    * this value as the callee.
@@ -667,13 +660,6 @@ export const EnvironmentConfigSchema = z.object({
    * while its parent function remains uncompiled.
    */
   validateNoDynamicallyCreatedComponentsOrHooks: z.boolean().default(false),
-
-  /**
-   * When enabled, allows setState calls in effects when the value being set is
-   * derived from a ref. This is useful for patterns where initial layout measurements
-   * from refs need to be stored in state during mount.
-   */
-  enableAllowSetStateFromRefsInEffects: z.boolean().default(true),
 });
 
 export type EnvironmentConfig = z.infer<typeof EnvironmentConfigSchema>;

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

@@ -748,14 +748,10 @@ function applyEffect(
     case 'Alias':
     case 'Capture': {
       CompilerError.invariant(
-        effect.kind === 'Capture' ||
-          effect.kind === 'MaybeAlias' ||
-          initialized.has(effect.into.identifier.id),
+        effect.kind === 'Capture' || initialized.has(effect.into.identifier.id),
         {
-          reason: `Expected destination to already be initialized within this instruction`,
-          description:
-            `Destination ${printPlace(effect.into)} is not initialized in this ` +
-            `instruction for effect ${printAliasingEffect(effect)}`,
+          reason: `Expected destination value to already be initialized within this instruction for Alias effect`,
+          description: `Destination ${printPlace(effect.into)} is not initialized in this instruction`,
           details: [
             {
               kind: 'error',
@@ -771,67 +767,49 @@ function applyEffect(
        * copy-on-write semantics, then we can prune the effect
        */
       const intoKind = state.kind(effect.into).kind;
-      let destinationType: 'context' | 'mutable' | null = null;
+      let isMutableDesination: boolean;
       switch (intoKind) {
-        case ValueKind.Context: {
-          destinationType = 'context';
-          break;
-        }
+        case ValueKind.Context:
         case ValueKind.Mutable:
         case ValueKind.MaybeFrozen: {
-          destinationType = 'mutable';
+          isMutableDesination = true;
+          break;
+        }
+        default: {
+          isMutableDesination = false;
           break;
         }
       }
       const fromKind = state.kind(effect.from).kind;
-      let sourceType: 'context' | 'mutable' | 'frozen' | null = null;
+      let isMutableReferenceType: boolean;
       switch (fromKind) {
-        case ValueKind.Context: {
-          sourceType = 'context';
-          break;
-        }
         case ValueKind.Global:
         case ValueKind.Primitive: {
+          isMutableReferenceType = false;
           break;
         }
         case ValueKind.Frozen: {
-          sourceType = 'frozen';
+          isMutableReferenceType = false;
+          applyEffect(
+            context,
+            state,
+            {
+              kind: 'ImmutableCapture',
+              from: effect.from,
+              into: effect.into,
+            },
+            initialized,
+            effects,
+          );
           break;
         }
         default: {
-          sourceType = 'mutable';
+          isMutableReferenceType = true;
           break;
         }
       }
-
-      if (sourceType === 'frozen') {
-        applyEffect(
-          context,
-          state,
-          {
-            kind: 'ImmutableCapture',
-            from: effect.from,
-            into: effect.into,
-          },
-          initialized,
-          effects,
-        );
-      } else if (
-        (sourceType === 'mutable' && destinationType === 'mutable') ||
-        effect.kind === 'MaybeAlias'
-      ) {
+      if (isMutableDesination && isMutableReferenceType) {
         effects.push(effect);
-      } else if (
-        (sourceType === 'context' && destinationType != null) ||
-        (sourceType === 'mutable' && destinationType === 'context')
-      ) {
-        applyEffect(
-          context,
-          state,
-          {kind: 'MaybeAlias', from: effect.from, into: effect.into},
-          initialized,
-          effects,
-        );
       }
       break;
     }
@@ -1816,16 +1794,8 @@ function computeSignatureForInstruction(
     }
     case 'PropertyStore':
     case 'ComputedStore': {
-      /**
-       * Add a hint about naming as "ref"/"-Ref", but only if we weren't able to infer any
-       * type for the object. In some cases the variable may be named like a ref, but is
-       * also used as a ref callback such that we infer the type as a function rather than
-       * a ref.
-       */
       const mutationReason: MutationReason | null =
-        value.kind === 'PropertyStore' &&
-        value.property === 'current' &&
-        value.object.identifier.type.kind === 'Type'
+        value.kind === 'PropertyStore' && value.property === 'current'
           ? {kind: 'AssignCurrentProperty'}
           : null;
       effects.push({

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

@@ -779,13 +779,7 @@ class AliasingState {
         if (edge.index >= index) {
           break;
         }
-        queue.push({
-          place: edge.node,
-          transitive,
-          direction: 'forwards',
-          // Traversing a maybeAlias edge always downgrades to conditional mutation
-          kind: edge.kind === 'maybeAlias' ? MutationKind.Conditional : kind,
-        });
+        queue.push({place: edge.node, transitive, direction: 'forwards', kind});
       }
       for (const [alias, when] of node.createdFrom) {
         if (when >= index) {
@@ -813,12 +807,7 @@ class AliasingState {
           if (when >= index) {
             continue;
           }
-          queue.push({
-            place: alias,
-            transitive,
-            direction: 'backwards',
-            kind,
-          });
+          queue.push({place: alias, transitive, direction: 'backwards', kind});
         }
         /**
          * MaybeAlias indicates potential data flow from unknown function calls,

compiler/packages/babel-plugin-react-compiler/src/Transform/NameAnonymousFunctions.ts

@@ -19,7 +19,7 @@ export function nameAnonymousFunctions(fn: HIRFunction): void {
   const parentName = fn.id;
   const functions = nameAnonymousFunctionsImpl(fn);
   function visit(node: Node, prefix: string): void {
-    if (node.generatedName != null && node.fn.nameHint == null) {
+    if (node.generatedName != null) {
       /**
        * Note that we don't generate a name for functions that already had one,
        * so we'll only add the prefix to anonymous functions regardless of
@@ -70,10 +70,6 @@ function nameAnonymousFunctionsImpl(fn: HIRFunction): Array<Node> {
           if (name != null && name.kind === 'named') {
             names.set(lvalue.identifier.id, name.value);
           }
-          const func = functions.get(value.place.identifier.id);
-          if (func != null) {
-            functions.set(lvalue.identifier.id, func);
-          }
           break;
         }
         case 'PropertyLoad': {
@@ -110,7 +106,6 @@ function nameAnonymousFunctionsImpl(fn: HIRFunction): Array<Node> {
           const variableName = value.lvalue.place.identifier.name;
           if (
             node != null &&
-            node.generatedName == null &&
             variableName != null &&
             variableName.kind === 'named'
           ) {
@@ -142,7 +137,7 @@ function nameAnonymousFunctionsImpl(fn: HIRFunction): Array<Node> {
               continue;
             }
             const node = functions.get(arg.identifier.id);
-            if (node != null && node.generatedName == null) {
+            if (node != null) {
               const generatedName =
                 fnArgCount > 1 ? `${calleeName}(arg${i})` : `${calleeName}()`;
               node.generatedName = generatedName;
@@ -157,7 +152,7 @@ function nameAnonymousFunctionsImpl(fn: HIRFunction): Array<Node> {
               continue;
             }
             const node = functions.get(attr.place.identifier.id);
-            if (node != null && node.generatedName == null) {
+            if (node != null) {
               const elementName =
                 value.tag.kind === 'BuiltinTag'
                   ? value.tag.name

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

@@ -31,7 +31,6 @@ import {
   BuiltInObjectId,
   BuiltInPropsId,
   BuiltInRefValueId,
-  BuiltInSetStateId,
   BuiltInUseRefId,
 } from '../HIR/ObjectShape';
 import {eachInstructionLValue, eachInstructionOperand} from '../HIR/visitors';
@@ -277,16 +276,9 @@ function* generateInstructionTypes(
        * We should change Hook to a subtype of Function or change unifier logic.
        * (see https://github.com/facebook/react-forget/pull/1427)
        */
-      let shapeId: string | null = null;
-      if (env.config.enableTreatSetIdentifiersAsStateSetters) {
-        const name = getName(names, value.callee.identifier.id);
-        if (name.startsWith('set')) {
-          shapeId = BuiltInSetStateId;
-        }
-      }
       yield equation(value.callee.identifier.type, {
         kind: 'Function',
-        shapeId,
+        shapeId: null,
         return: returnType,
         isConstructor: false,
       });

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

@@ -188,6 +188,11 @@ export function parseConfigPragmaForTests(
     environment?: PartialEnvironmentConfig;
   },
 ): PluginOptions {
+  const overridePragma = parseConfigPragmaAsString(pragma);
+  if (overridePragma !== '') {
+    return parseConfigStringAsJS(overridePragma, defaults);
+  }
+
   const environment = parseConfigPragmaEnvironmentForTest(
     pragma,
     defaults.environment ?? {},
@@ -223,3 +228,100 @@ export function parseConfigPragmaForTests(
   }
   return parsePluginOptions(options);
 }
+
+export function parseConfigPragmaAsString(pragma: string): string {
+  // Check if it's in JS override format
+  for (const {key, value: val} of splitPragma(pragma)) {
+    if (key === 'OVERRIDE' && val != null) {
+      return val;
+    }
+  }
+  return '';
+}
+
+function parseConfigStringAsJS(
+  configString: string,
+  defaults: {
+    compilationMode: CompilationMode;
+    environment?: PartialEnvironmentConfig;
+  },
+): PluginOptions {
+  let parsedConfig: any;
+  try {
+    // Parse the JavaScript object literal
+    parsedConfig = new Function(`return ${configString}`)();
+  } catch (error) {
+    CompilerError.invariant(false, {
+      reason: 'Failed to parse config pragma as JavaScript object',
+      description: `Could not parse: ${configString}. Error: ${error}`,
+      details: [
+        {
+          kind: 'error',
+          loc: null,
+          message: null,
+        },
+      ],
+      suggestions: null,
+    });
+  }
+
+  const environment = parseConfigPragmaEnvironmentForTest(
+    '',
+    defaults.environment ?? {},
+  );
+
+  const options: Record<keyof PluginOptions, unknown> = {
+    ...defaultOptions,
+    panicThreshold: 'all_errors',
+    compilationMode: defaults.compilationMode,
+    environment,
+  };
+
+  // Apply parsed config, merging environment if it exists
+  if (parsedConfig.environment) {
+    const mergedEnvironment = {
+      ...(options.environment as Record<string, unknown>),
+      ...parsedConfig.environment,
+    };
+
+    // Validate environment config
+    const validatedEnvironment =
+      EnvironmentConfigSchema.safeParse(mergedEnvironment);
+    if (!validatedEnvironment.success) {
+      CompilerError.invariant(false, {
+        reason: 'Invalid environment configuration in config pragma',
+        description: `${fromZodError(validatedEnvironment.error)}`,
+        details: [
+          {
+            kind: 'error',
+            loc: null,
+            message: null,
+          },
+        ],
+        suggestions: null,
+      });
+    }
+
+    options.environment = validatedEnvironment.data;
+  }
+
+  // Apply other config options
+  for (const [key, value] of Object.entries(parsedConfig)) {
+    if (key === 'environment') {
+      continue;
+    }
+
+    if (hasOwnProperty(defaultOptions, key)) {
+      if (key === 'target' && value === 'donotuse_meta_internal') {
+        options[key] = {
+          kind: value,
+          runtimeModule: 'react',
+        };
+      } else {
+        options[key] = value;
+      }
+    }
+  }
+
+  return parsePluginOptions(options);
+}

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

@@ -639,55 +639,12 @@ function validateNoRefAccessInRenderImpl(
           case 'StartMemoize':
           case 'FinishMemoize':
             break;
-          case 'LoadGlobal': {
-            if (instr.value.binding.name === 'undefined') {
-              env.set(instr.lvalue.identifier.id, {kind: 'Nullable'});
-            }
-            break;
-          }
           case 'Primitive': {
             if (instr.value.value == null) {
               env.set(instr.lvalue.identifier.id, {kind: 'Nullable'});
             }
             break;
           }
-          case 'UnaryExpression': {
-            if (instr.value.operator === '!') {
-              const value = env.get(instr.value.value.identifier.id);
-              const refId =
-                value?.kind === 'RefValue' && value.refId != null
-                  ? value.refId
-                  : null;
-              if (refId !== null) {
-                /*
-                 * Record an error suggesting the `if (ref.current == null)` pattern,
-                 * but also record the lvalue as a guard so that we don't emit a second
-                 * error for the write to the ref
-                 */
-                env.set(instr.lvalue.identifier.id, {kind: 'Guard', refId});
-                errors.pushDiagnostic(
-                  CompilerDiagnostic.create({
-                    category: ErrorCategory.Refs,
-                    reason: 'Cannot access refs during render',
-                    description: ERROR_DESCRIPTION,
-                  })
-                    .withDetails({
-                      kind: 'error',
-                      loc: instr.value.value.loc,
-                      message: `Cannot access ref value during render`,
-                    })
-                    .withDetails({
-                      kind: 'hint',
-                      message:
-                        'To initialize a ref only once, check that the ref is null with the pattern `if (ref.current == null) { ref.current = ... }`',
-                    }),
-                );
-                break;
-              }
-            }
-            validateNoRefValueAccess(errors, env, instr.value.value);
-            break;
-          }
           case 'BinaryExpression': {
             const left = env.get(instr.value.left.identifier.id);
             const right = env.get(instr.value.right.identifier.id);

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

@@ -11,23 +11,16 @@ import {
   ErrorCategory,
 } from '../CompilerError';
 import {
-  Environment,
   HIRFunction,
   IdentifierId,
   isSetStateType,
   isUseEffectHookType,
   isUseInsertionEffectHookType,
   isUseLayoutEffectHookType,
-  isUseRefType,
-  isRefValueType,
   Place,
 } from '../HIR';
-import {
-  eachInstructionLValue,
-  eachInstructionValueOperand,
-} from '../HIR/visitors';
+import {eachInstructionValueOperand} from '../HIR/visitors';
 import {Result} from '../Utils/Result';
-import {Iterable_some} from '../Utils/utils';
 
 /**
  * Validates against calling setState in the body of an effect (useEffect and friends),
@@ -39,7 +32,6 @@ import {Iterable_some} from '../Utils/utils';
  */
 export function validateNoSetStateInEffects(
   fn: HIRFunction,
-  env: Environment,
 ): Result<void, CompilerError> {
   const setStateFunctions: Map<IdentifierId, Place> = new Map();
   const errors = new CompilerError();
@@ -80,7 +72,6 @@ export function validateNoSetStateInEffects(
             const callee = getSetStateCall(
               instr.value.loweredFunc.func,
               setStateFunctions,
-              env,
             );
             if (callee !== null) {
               setStateFunctions.set(instr.lvalue.identifier.id, callee);
@@ -138,42 +129,9 @@ export function validateNoSetStateInEffects(
 function getSetStateCall(
   fn: HIRFunction,
   setStateFunctions: Map<IdentifierId, Place>,
-  env: Environment,
 ): Place | null {
-  const refDerivedValues: Set<IdentifierId> = new Set();
-
-  const isDerivedFromRef = (place: Place): boolean => {
-    return (
-      refDerivedValues.has(place.identifier.id) ||
-      isUseRefType(place.identifier) ||
-      isRefValueType(place.identifier)
-    );
-  };
-
   for (const [, block] of fn.body.blocks) {
     for (const instr of block.instructions) {
-      if (env.config.enableAllowSetStateFromRefsInEffects) {
-        const hasRefOperand = Iterable_some(
-          eachInstructionValueOperand(instr.value),
-          isDerivedFromRef,
-        );
-
-        if (hasRefOperand) {
-          for (const lvalue of eachInstructionLValue(instr)) {
-            refDerivedValues.add(lvalue.identifier.id);
-          }
-        }
-
-        if (
-          instr.value.kind === 'PropertyLoad' &&
-          instr.value.property === 'current' &&
-          (isUseRefType(instr.value.object.identifier) ||
-            isRefValueType(instr.value.object.identifier))
-        ) {
-          refDerivedValues.add(instr.lvalue.identifier.id);
-        }
-      }
-
       switch (instr.value.kind) {
         case 'LoadLocal': {
           if (setStateFunctions.has(instr.value.place.identifier.id)) {
@@ -203,21 +161,6 @@ function getSetStateCall(
             isSetStateType(callee.identifier) ||
             setStateFunctions.has(callee.identifier.id)
           ) {
-            if (env.config.enableAllowSetStateFromRefsInEffects) {
-              const arg = instr.value.args.at(0);
-              if (
-                arg !== undefined &&
-                arg.kind === 'Identifier' &&
-                refDerivedValues.has(arg.identifier.id)
-              ) {
-                /**
-                 * The one special case where we allow setStates in effects is in the very specific
-                 * scenario where the value being set is derived from a ref. For example this may
-                 * be needed when initial layout measurements from refs need to be stored in state.
-                 */
-                return null;
-              }
-            }
             /*
              * TODO: once we support multiple locations per error, we should link to the
              * original Place in the case that setStateFunction.has(callee)

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-ref-initialization-undefined.expect.md

@@ -1,42 +0,0 @@
-
-## Input
-
-```javascript
-//@flow
-import {useRef} from 'react';
-
-component C() {
-  const r = useRef(null);
-  if (r.current == undefined) {
-    r.current = 1;
-  }
-}
-
-export const FIXTURE_ENTRYPOINT = {
-  fn: C,
-  params: [{}],
-};
-
-```
-
-## Code
-
-```javascript
-import { useRef } from "react";
-
-function C() {
-  const r = useRef(null);
-  if (r.current == undefined) {
-    r.current = 1;
-  }
-}
-
-export const FIXTURE_ENTRYPOINT = {
-  fn: C,
-  params: [{}],
-};
-
-```
-      
-### Eval output
-(kind: ok) 

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-ref-initialization-undefined.js

@@ -1,14 +0,0 @@
-//@flow
-import {useRef} from 'react';
-
-component C() {
-  const r = useRef(null);
-  if (r.current == undefined) {
-    r.current = 1;
-  }
-}
-
-export const FIXTURE_ENTRYPOINT = {
-  fn: C,
-  params: [{}],
-};

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-ref-access-render-unary.expect.md

@@ -1,78 +0,0 @@
-
-## Input
-
-```javascript
-//@flow
-import {useRef} from 'react';
-
-component C() {
-  const r = useRef(null);
-  const current = !r.current;
-  return <div>{current}</div>;
-}
-
-export const FIXTURE_ENTRYPOINT = {
-  fn: C,
-  params: [{}],
-};
-
-```
-
-
-## Error
-
-```
-Found 4 errors:
-
-Error: Cannot access refs during render
-
-React refs are values that are not needed for rendering. Refs should only be accessed outside of render, such as in event handlers or effects. Accessing a ref value (the `current` property) during render can cause your component not to update as expected (https://react.dev/reference/react/useRef).
-
-  4 | component C() {
-  5 |   const r = useRef(null);
-> 6 |   const current = !r.current;
-    |                    ^^^^^^^^^ Cannot access ref value during render
-  7 |   return <div>{current}</div>;
-  8 | }
-  9 |
-
-To initialize a ref only once, check that the ref is null with the pattern `if (ref.current == null) { ref.current = ... }`
-
-Error: Cannot access refs during render
-
-React refs are values that are not needed for rendering. Refs should only be accessed outside of render, such as in event handlers or effects. Accessing a ref value (the `current` property) during render can cause your component not to update as expected (https://react.dev/reference/react/useRef).
-
-  4 | component C() {
-  5 |   const r = useRef(null);
-> 6 |   const current = !r.current;
-    |                   ^^^^^^^^^^ Cannot access ref value during render
-  7 |   return <div>{current}</div>;
-  8 | }
-  9 |
-
-Error: Cannot access refs during render
-
-React refs are values that are not needed for rendering. Refs should only be accessed outside of render, such as in event handlers or effects. Accessing a ref value (the `current` property) during render can cause your component not to update as expected (https://react.dev/reference/react/useRef).
-
-   5 |   const r = useRef(null);
-   6 |   const current = !r.current;
->  7 |   return <div>{current}</div>;
-     |                ^^^^^^^ Cannot access ref value during render
-   8 | }
-   9 |
-  10 | export const FIXTURE_ENTRYPOINT = {
-
-Error: Cannot access refs during render
-
-React refs are values that are not needed for rendering. Refs should only be accessed outside of render, such as in event handlers or effects. Accessing a ref value (the `current` property) during render can cause your component not to update as expected (https://react.dev/reference/react/useRef).
-
-   5 |   const r = useRef(null);
-   6 |   const current = !r.current;
->  7 |   return <div>{current}</div>;
-     |                ^^^^^^^ Cannot access ref value during render
-   8 | }
-   9 |
-  10 | export const FIXTURE_ENTRYPOINT = {
-```
-          
-      

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-ref-access-render-unary.js

@@ -1,13 +0,0 @@
-//@flow
-import {useRef} from 'react';
-
-component C() {
-  const r = useRef(null);
-  const current = !r.current;
-  return <div>{current}</div>;
-}
-
-export const FIXTURE_ENTRYPOINT = {
-  fn: C,
-  params: [{}],
-};

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-ref-initialization-unary-not.expect.md

@@ -1,43 +0,0 @@
-
-## Input
-
-```javascript
-//@flow
-import {useRef} from 'react';
-
-component C() {
-  const r = useRef(null);
-  if (!r.current) {
-    r.current = 1;
-  }
-}
-
-export const FIXTURE_ENTRYPOINT = {
-  fn: C,
-  params: [{}],
-};
-
-```
-
-
-## Error
-
-```
-Found 1 error:
-
-Error: Cannot access refs during render
-
-React refs are values that are not needed for rendering. Refs should only be accessed outside of render, such as in event handlers or effects. Accessing a ref value (the `current` property) during render can cause your component not to update as expected (https://react.dev/reference/react/useRef).
-
-  4 | component C() {
-  5 |   const r = useRef(null);
-> 6 |   if (!r.current) {
-    |        ^^^^^^^^^ Cannot access ref value during render
-  7 |     r.current = 1;
-  8 |   }
-  9 | }
-
-To initialize a ref only once, check that the ref is null with the pattern `if (ref.current == null) { ref.current = ... }`
-```
-          
-      

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-ref-initialization-unary-not.js

@@ -1,14 +0,0 @@
-//@flow
-import {useRef} from 'react';
-
-component C() {
-  const r = useRef(null);
-  if (!r.current) {
-    r.current = 1;
-  }
-}
-
-export const FIXTURE_ENTRYPOINT = {
-  fn: C,
-  params: [{}],
-};

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-unconditional-set-state-hook-return-in-render.expect.md

@@ -1,55 +0,0 @@
-
-## Input
-
-```javascript
-// @validateNoSetStateInRender @enableTreatSetIdentifiersAsStateSetters
-function Component() {
-  const [state, setState] = useCustomState(0);
-  const aliased = setState;
-
-  setState(1);
-  aliased(2);
-
-  return state;
-}
-
-function useCustomState(init) {
-  return useState(init);
-}
-
-```
-
-
-## Error
-
-```
-Found 2 errors:
-
-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-unconditional-set-state-hook-return-in-render.ts:6:2
-  4 |   const aliased = setState;
-  5 |
-> 6 |   setState(1);
-    |   ^^^^^^^^ Found setState() in render
-  7 |   aliased(2);
-  8 |
-  9 |   return state;
-
-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-unconditional-set-state-hook-return-in-render.ts:7:2
-   5 |
-   6 |   setState(1);
->  7 |   aliased(2);
-     |   ^^^^^^^ Found setState() in render
-   8 |
-   9 |   return state;
-  10 | }
-```
-          
-      

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-unconditional-set-state-hook-return-in-render.js

@@ -1,14 +0,0 @@
-// @validateNoSetStateInRender @enableTreatSetIdentifiersAsStateSetters
-function Component() {
-  const [state, setState] = useCustomState(0);
-  const aliased = setState;
-
-  setState(1);
-  aliased(2);
-
-  return state;
-}
-
-function useCustomState(init) {
-  return useState(init);
-}

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-unconditional-set-state-prop-in-render.expect.md

@@ -1,50 +0,0 @@
-
-## Input
-
-```javascript
-// @validateNoSetStateInRender @enableTreatSetIdentifiersAsStateSetters
-function Component({setX}) {
-  const aliased = setX;
-
-  setX(1);
-  aliased(2);
-
-  return x;
-}
-
-```
-
-
-## Error
-
-```
-Found 2 errors:
-
-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-unconditional-set-state-prop-in-render.ts:5:2
-  3 |   const aliased = setX;
-  4 |
-> 5 |   setX(1);
-    |   ^^^^ Found setState() in render
-  6 |   aliased(2);
-  7 |
-  8 |   return x;
-
-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-unconditional-set-state-prop-in-render.ts:6:2
-  4 |
-  5 |   setX(1);
-> 6 |   aliased(2);
-    |   ^^^^^^^ Found setState() in render
-  7 |
-  8 |   return x;
-  9 | }
-```
-          
-      

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-unconditional-set-state-prop-in-render.js

@@ -1,9 +0,0 @@
-// @validateNoSetStateInRender @enableTreatSetIdentifiersAsStateSetters
-function Component({setX}) {
-  const aliased = setX;
-
-  setX(1);
-  aliased(2);
-
-  return x;
-}

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-allow-assigning-to-inferred-ref-prop-in-callback.expect.md

@@ -1,48 +0,0 @@
-
-## Input
-
-```javascript
-// @validateRefAccessDuringRender
-
-function useHook(parentRef) {
-  // Some components accept a union of "callback" refs and ref objects, which
-  // we can't currently represent
-  const elementRef = useRef(null);
-  const handler = instance => {
-    elementRef.current = instance;
-    if (parentRef != null) {
-      if (typeof parentRef === 'function') {
-        // This call infers the type of `parentRef` as a function...
-        parentRef(instance);
-      } else {
-        // So this assignment fails since we don't know its a ref
-        parentRef.current = instance;
-      }
-    }
-  };
-  return handler;
-}
-
-```
-
-
-## Error
-
-```
-Found 1 error:
-
-Error: This value cannot be modified
-
-Modifying component props or hook arguments is not allowed. Consider using a local variable instead.
-
-error.todo-allow-assigning-to-inferred-ref-prop-in-callback.ts:15:8
-  13 |       } else {
-  14 |         // So this assignment fails since we don't know its a ref
-> 15 |         parentRef.current = instance;
-     |         ^^^^^^^^^ `parentRef` cannot be modified
-  16 |       }
-  17 |     }
-  18 |   };
-```
-          
-      

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-allow-assigning-to-inferred-ref-prop-in-callback.js

@@ -1,20 +0,0 @@
-// @validateRefAccessDuringRender
-
-function useHook(parentRef) {
-  // Some components accept a union of "callback" refs and ref objects, which
-  // we can't currently represent
-  const elementRef = useRef(null);
-  const handler = instance => {
-    elementRef.current = instance;
-    if (parentRef != null) {
-      if (typeof parentRef === 'function') {
-        // This call infers the type of `parentRef` as a function...
-        parentRef(instance);
-      } else {
-        // So this assignment fails since we don't know its a ref
-        parentRef.current = instance;
-      }
-    }
-  };
-  return handler;
-}

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/name-anonymous-functions.expect.md

@@ -4,19 +4,15 @@
 ```javascript
 // @enableNameAnonymousFunctions
 
-import {useCallback, useEffect} from 'react';
+import {useEffect} from 'react';
 import {identity, Stringify, useIdentity} from 'shared-runtime';
 import * as SharedRuntime from 'shared-runtime';
 
 function Component(props) {
   function named() {
     const inner = () => props.named;
-    const innerIdentity = identity(() => props.named);
-    return inner(innerIdentity());
+    return inner();
   }
-  const callback = useCallback(() => {
-    return 'ok';
-  }, []);
   const namedVariable = function () {
     return props.namedVariable;
   };
@@ -34,7 +30,6 @@ function Component(props) {
   return (
     <>
       {named()}
-      {callback()}
       {namedVariable()}
       {methodCall()}
       {call()}
@@ -68,7 +63,7 @@ export const TODO_FIXTURE_ENTRYPOINT = {
 ```javascript
 import { c as _c } from "react/compiler-runtime"; // @enableNameAnonymousFunctions
 
-import { useCallback, useEffect } from "react";
+import { useEffect } from "react";
 import { identity, Stringify, useIdentity } from "shared-runtime";
 import * as SharedRuntime from "shared-runtime";
 
@@ -80,12 +75,7 @@ function Component(props) {
       const inner = { "Component[named > inner]": () => props.named }[
         "Component[named > inner]"
       ];
-      const innerIdentity = identity(
-        { "Component[named > identity()]": () => props.named }[
-          "Component[named > identity()]"
-        ],
-      );
-      return inner(innerIdentity());
+      return inner();
     };
     $[0] = props.named;
     $[1] = t0;
@@ -93,8 +83,6 @@ function Component(props) {
     t0 = $[1];
   }
   const named = t0;
-
-  const callback = _ComponentCallback;
   let t1;
   if ($[2] !== props.namedVariable) {
     t1 = {
@@ -209,62 +197,57 @@ function Component(props) {
   } else {
     t9 = $[18];
   }
-  const t10 = callback();
-  let t11;
+  let t10;
   if ($[19] !== namedVariable) {
-    t11 = namedVariable();
+    t10 = namedVariable();
     $[19] = namedVariable;
-    $[20] = t11;
+    $[20] = t10;
   } else {
-    t11 = $[20];
+    t10 = $[20];
   }
-  const t12 = methodCall();
-  const t13 = call();
-  let t14;
+  const t11 = methodCall();
+  const t12 = call();
+  let t13;
   if ($[21] !== hookArgument) {
-    t14 = hookArgument();
+    t13 = hookArgument();
     $[21] = hookArgument;
-    $[22] = t14;
+    $[22] = t13;
   } else {
-    t14 = $[22];
+    t13 = $[22];
   }
-  let t15;
+  let t14;
   if (
     $[23] !== builtinElementAttr ||
     $[24] !== namedElementAttr ||
-    $[25] !== t11 ||
-    $[26] !== t12 ||
-    $[27] !== t13 ||
-    $[28] !== t14 ||
+    $[25] !== t10 ||
+    $[26] !== t11 ||
+    $[27] !== t12 ||
+    $[28] !== t13 ||
     $[29] !== t9
   ) {
-    t15 = (
+    t14 = (
       <>
         {t9}
         {t10}
         {t11}
         {t12}
-        {t13}
         {builtinElementAttr}
         {namedElementAttr}
-        {t14}
+        {t13}
       </>
     );
     $[23] = builtinElementAttr;
     $[24] = namedElementAttr;
-    $[25] = t11;
-    $[26] = t12;
-    $[27] = t13;
-    $[28] = t14;
+    $[25] = t10;
+    $[26] = t11;
+    $[27] = t12;
+    $[28] = t13;
     $[29] = t9;
-    $[30] = t15;
+    $[30] = t14;
   } else {
-    t15 = $[30];
+    t14 = $[30];
   }
-  return t15;
-}
-function _ComponentCallback() {
-  return "ok";
+  return t14;
 }
 
 export const TODO_FIXTURE_ENTRYPOINT = {

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/name-anonymous-functions.js

@@ -1,18 +1,14 @@
 // @enableNameAnonymousFunctions
 
-import {useCallback, useEffect} from 'react';
+import {useEffect} from 'react';
 import {identity, Stringify, useIdentity} from 'shared-runtime';
 import * as SharedRuntime from 'shared-runtime';
 
 function Component(props) {
   function named() {
     const inner = () => props.named;
-    const innerIdentity = identity(() => props.named);
-    return inner(innerIdentity());
+    return inner();
   }
-  const callback = useCallback(() => {
-    return 'ok';
-  }, []);
   const namedVariable = function () {
     return props.namedVariable;
   };
@@ -30,7 +26,6 @@ function Component(props) {
   return (
     <>
       {named()}
-      {callback()}
       {namedVariable()}
       {methodCall()}
       {call()}

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-dispatch-spread-event-marks-event-frozen.expect.md

@@ -1,82 +0,0 @@
-
-## Input
-
-```javascript
-// @compilationMode:"infer"
-function Component() {
-  const dispatch = useDispatch();
-  // const [state, setState] = useState(0);
-
-  return (
-    <div>
-      <input
-        type="file"
-        onChange={event => {
-          dispatch(...event.target);
-          event.target.value = '';
-        }}
-      />
-    </div>
-  );
-}
-
-function useDispatch() {
-  'use no memo';
-  // skip compilation to make it easier to debug the above function
-  return (...values) => {
-    console.log(...values);
-  };
-}
-
-export const FIXTURE_ENTRYPOINT = {
-  fn: Component,
-  params: [{}],
-};
-
-```
-
-## Code
-
-```javascript
-import { c as _c } from "react/compiler-runtime"; // @compilationMode:"infer"
-function Component() {
-  const $ = _c(2);
-  const dispatch = useDispatch();
-  let t0;
-  if ($[0] !== dispatch) {
-    t0 = (
-      <div>
-        <input
-          type="file"
-          onChange={(event) => {
-            dispatch(...event.target);
-            event.target.value = "";
-          }}
-        />
-      </div>
-    );
-    $[0] = dispatch;
-    $[1] = t0;
-  } else {
-    t0 = $[1];
-  }
-  return t0;
-}
-
-function useDispatch() {
-  "use no memo";
-  // skip compilation to make it easier to debug the above function
-  return (...values) => {
-    console.log(...values);
-  };
-}
-
-export const FIXTURE_ENTRYPOINT = {
-  fn: Component,
-  params: [{}],
-};
-
-```
-      
-### Eval output
-(kind: ok) <div><input type="file"></div>

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-dispatch-spread-event-marks-event-frozen.js

@@ -1,30 +0,0 @@
-// @compilationMode:"infer"
-function Component() {
-  const dispatch = useDispatch();
-  // const [state, setState] = useState(0);
-
-  return (
-    <div>
-      <input
-        type="file"
-        onChange={event => {
-          dispatch(...event.target);
-          event.target.value = '';
-        }}
-      />
-    </div>
-  );
-}
-
-function useDispatch() {
-  'use no memo';
-  // skip compilation to make it easier to debug the above function
-  return (...values) => {
-    console.log(...values);
-  };
-}
-
-export const FIXTURE_ENTRYPOINT = {
-  fn: Component,
-  params: [{}],
-};

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ts-instantiation-default-param.expect.md

@@ -1,62 +0,0 @@
-
-## Input
-
-```javascript
-function id<T>(x: T): T {
-  return x;
-}
-
-export function Component<T = string>({fn = id<T>}: {fn?: (x: T) => T}) {
-  const value = fn('hi' as T);
-  return <div>{String(value)}</div>;
-}
-
-export const FIXTURE_ENTRYPOINT = {
-  fn: Component,
-  params: [{}],
-};
-
-```
-
-## Code
-
-```javascript
-import { c as _c } from "react/compiler-runtime";
-function id(x) {
-  return x;
-}
-
-export function Component(t0) {
-  const $ = _c(4);
-  const { fn: t1 } = t0;
-  const fn = t1 === undefined ? id : t1;
-  let t2;
-  if ($[0] !== fn) {
-    t2 = fn("hi" as T);
-    $[0] = fn;
-    $[1] = t2;
-  } else {
-    t2 = $[1];
-  }
-  const value = t2;
-  const t3 = String(value);
-  let t4;
-  if ($[2] !== t3) {
-    t4 = <div>{t3}</div>;
-    $[2] = t3;
-    $[3] = t4;
-  } else {
-    t4 = $[3];
-  }
-  return t4;
-}
-
-export const FIXTURE_ENTRYPOINT = {
-  fn: Component,
-  params: [{}],
-};
-
-```
-      
-### Eval output
-(kind: ok) <div>hi</div>

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ts-instantiation-default-param.tsx

@@ -1,13 +0,0 @@
-function id<T>(x: T): T {
-  return x;
-}
-
-export function Component<T = string>({fn = id<T>}: {fn?: (x: T) => T}) {
-  const value = fn('hi' as T);
-  return <div>{String(value)}</div>;
-}
-
-export const FIXTURE_ENTRYPOINT = {
-  fn: Component,
-  params: [{}],
-};

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useEffect/derived-state-one-time-init-no-error.expect.md

@@ -0,0 +1,87 @@
+
+## Input
+
+```javascript
+// @validateNoDerivedComputationsInEffects
+import {useEffect, useState} from 'react';
+
+function Component({initialName}) {
+  const [name, setName] = useState('');
+
+  useEffect(() => {
+    setName(initialName);
+  }, []);
+
+  return (
+    <div>
+      <input value={name} onChange={e => setName(e.target.value)} />
+    </div>
+  );
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{initialName: 'John'}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // @validateNoDerivedComputationsInEffects
+import { useEffect, useState } from "react";
+
+function Component(t0) {
+  const $ = _c(6);
+  const { initialName } = t0;
+  const [name, setName] = useState("");
+  let t1;
+  if ($[0] !== initialName) {
+    t1 = () => {
+      setName(initialName);
+    };
+    $[0] = initialName;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  let t2;
+  if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
+    t2 = [];
+    $[2] = t2;
+  } else {
+    t2 = $[2];
+  }
+  useEffect(t1, t2);
+  let t3;
+  if ($[3] === Symbol.for("react.memo_cache_sentinel")) {
+    t3 = (e) => setName(e.target.value);
+    $[3] = t3;
+  } else {
+    t3 = $[3];
+  }
+  let t4;
+  if ($[4] !== name) {
+    t4 = (
+      <div>
+        <input value={name} onChange={t3} />
+      </div>
+    );
+    $[4] = name;
+    $[5] = t4;
+  } else {
+    t4 = $[5];
+  }
+  return t4;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ initialName: "John" }],
+};
+
+```
+      
+### Eval output
+(kind: ok) <div><input value="John"></div>

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useEffect/derived-state-one-time-init-no-error.js

@@ -0,0 +1,21 @@
+// @validateNoDerivedComputationsInEffects
+import {useEffect, useState} from 'react';
+
+function Component({initialName}) {
+  const [name, setName] = useState('');
+
+  useEffect(() => {
+    setName(initialName);
+  }, []);
+
+  return (
+    <div>
+      <input value={name} onChange={e => setName(e.target.value)} />
+    </div>
+  );
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{initialName: 'John'}],
+};

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useEffect/derived-state-with-conditional-no-error.expect.md

@@ -0,0 +1,79 @@
+
+## Input
+
+```javascript
+// @validateNoDerivedComputationsInEffects
+import {useEffect, useState} from 'react';
+
+function Component({value, enabled}) {
+  const [localValue, setLocalValue] = useState('');
+
+  useEffect(() => {
+    if (enabled) {
+      setLocalValue(value);
+    } else {
+      setLocalValue('disabled');
+    }
+  }, [value, enabled]);
+
+  return <div>{localValue}</div>;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{value: 'test', enabled: true}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // @validateNoDerivedComputationsInEffects
+import { useEffect, useState } from "react";
+
+function Component(t0) {
+  const $ = _c(6);
+  const { value, enabled } = t0;
+  const [localValue, setLocalValue] = useState("");
+  let t1;
+  let t2;
+  if ($[0] !== enabled || $[1] !== value) {
+    t1 = () => {
+      if (enabled) {
+        setLocalValue(value);
+      } else {
+        setLocalValue("disabled");
+      }
+    };
+
+    t2 = [value, enabled];
+    $[0] = enabled;
+    $[1] = value;
+    $[2] = t1;
+    $[3] = t2;
+  } else {
+    t1 = $[2];
+    t2 = $[3];
+  }
+  useEffect(t1, t2);
+  let t3;
+  if ($[4] !== localValue) {
+    t3 = <div>{localValue}</div>;
+    $[4] = localValue;
+    $[5] = t3;
+  } else {
+    t3 = $[5];
+  }
+  return t3;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ value: "test", enabled: true }],
+};
+
+```
+      
+### Eval output
+(kind: ok) <div>test</div>

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useEffect/derived-state-with-conditional-no-error.js

@@ -0,0 +1,21 @@
+// @validateNoDerivedComputationsInEffects
+import {useEffect, useState} from 'react';
+
+function Component({value, enabled}) {
+  const [localValue, setLocalValue] = useState('');
+
+  useEffect(() => {
+    if (enabled) {
+      setLocalValue(value);
+    } else {
+      setLocalValue('disabled');
+    }
+  }, [value, enabled]);
+
+  return <div>{localValue}</div>;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{value: 'test', enabled: true}],
+};

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useEffect/derived-state-with-side-effects-no-error.expect.md

@@ -0,0 +1,74 @@
+
+## Input
+
+```javascript
+// @validateNoDerivedComputationsInEffects
+import {useEffect, useState} from 'react';
+
+function Component({value}) {
+  const [localValue, setLocalValue] = useState('');
+
+  useEffect(() => {
+    console.log('Value changed:', value);
+    setLocalValue(value);
+    document.title = `Value: ${value}`;
+  }, [value]);
+
+  return <div>{localValue}</div>;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{value: 'test'}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // @validateNoDerivedComputationsInEffects
+import { useEffect, useState } from "react";
+
+function Component(t0) {
+  const $ = _c(5);
+  const { value } = t0;
+  const [localValue, setLocalValue] = useState("");
+  let t1;
+  let t2;
+  if ($[0] !== value) {
+    t1 = () => {
+      console.log("Value changed:", value);
+      setLocalValue(value);
+      document.title = `Value: ${value}`;
+    };
+    t2 = [value];
+    $[0] = value;
+    $[1] = t1;
+    $[2] = t2;
+  } else {
+    t1 = $[1];
+    t2 = $[2];
+  }
+  useEffect(t1, t2);
+  let t3;
+  if ($[3] !== localValue) {
+    t3 = <div>{localValue}</div>;
+    $[3] = localValue;
+    $[4] = t3;
+  } else {
+    t3 = $[4];
+  }
+  return t3;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ value: "test" }],
+};
+
+```
+      
+### Eval output
+(kind: ok) <div>test</div>
+logs: ['Value changed:','test']

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useEffect/derived-state-with-side-effects-no-error.js

@@ -0,0 +1,19 @@
+// @validateNoDerivedComputationsInEffects
+import {useEffect, useState} from 'react';
+
+function Component({value}) {
+  const [localValue, setLocalValue] = useState('');
+
+  useEffect(() => {
+    console.log('Value changed:', value);
+    setLocalValue(value);
+    document.title = `Value: ${value}`;
+  }, [value]);
+
+  return <div>{localValue}</div>;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{value: 'test'}],
+};

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useEffect/error.bug-derived-state-from-mixed-deps.expect.md

@@ -0,0 +1,49 @@
+
+## Input
+
+```javascript
+// @validateNoDerivedComputationsInEffects
+import {useEffect, useState} from 'react';
+
+function Component({prefix}) {
+  const [name, setName] = useState('');
+  const [displayName, setDisplayName] = useState('');
+
+  useEffect(() => {
+    setDisplayName(prefix + name);
+  }, [prefix, name]);
+
+  return (
+    <div>
+      <input value={name} onChange={e => setName(e.target.value)} />
+      <div>{displayName}</div>
+    </div>
+  );
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{prefix: 'Hello, '}],
+};
+
+```
+
+
+## Error
+
+```
+Found 1 error:
+
+Error: Values derived from props and state should be calculated during render, not in an effect. (https://react.dev/learn/you-might-not-need-an-effect#updating-state-based-on-props-or-state)
+
+error.derived-state-from-mixed-deps-no-error.ts:9:4
+   7 |
+   8 |   useEffect(() => {
+>  9 |     setDisplayName(prefix + name);
+     |     ^^^^^^^^^^^^^^ Values derived from props and state should be calculated during render, not in an effect. (https://react.dev/learn/you-might-not-need-an-effect#updating-state-based-on-props-or-state)
+  10 |   }, [prefix, name]);
+  11 |
+  12 |   return (
+```
+          
+      

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useEffect/error.bug-derived-state-from-mixed-deps.js

@@ -0,0 +1,23 @@
+// @validateNoDerivedComputationsInEffects
+import {useEffect, useState} from 'react';
+
+function Component({prefix}) {
+  const [name, setName] = useState('');
+  const [displayName, setDisplayName] = useState('');
+
+  useEffect(() => {
+    setDisplayName(prefix + name);
+  }, [prefix, name]);
+
+  return (
+    <div>
+      <input value={name} onChange={e => setName(e.target.value)} />
+      <div>{displayName}</div>
+    </div>
+  );
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{prefix: 'Hello, '}],
+};

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useEffect/error.invalid-derived-state-from-props-destructured.expect.md

@@ -0,0 +1,43 @@
+
+## Input
+
+```javascript
+// @validateNoDerivedComputationsInEffects
+import {useEffect, useState} from 'react';
+
+function Component({user: {firstName, lastName}}) {
+  const [fullName, setFullName] = useState('');
+
+  useEffect(() => {
+    setFullName(firstName + ' ' + lastName);
+  }, [firstName, lastName]);
+
+  return <div>{fullName}</div>;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{user: {firstName: 'John', lastName: 'Doe'}}],
+};
+
+```
+
+
+## Error
+
+```
+Found 1 error:
+
+Error: Values derived from props and state should be calculated during render, not in an effect. (https://react.dev/learn/you-might-not-need-an-effect#updating-state-based-on-props-or-state)
+
+error.invalid-derived-state-from-props-destructured.ts:8:4
+   6 |
+   7 |   useEffect(() => {
+>  8 |     setFullName(firstName + ' ' + lastName);
+     |     ^^^^^^^^^^^ Values derived from props and state should be calculated during render, not in an effect. (https://react.dev/learn/you-might-not-need-an-effect#updating-state-based-on-props-or-state)
+   9 |   }, [firstName, lastName]);
+  10 |
+  11 |   return <div>{fullName}</div>;
+```
+          
+      

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useEffect/error.invalid-derived-state-from-props-destructured.js

@@ -0,0 +1,17 @@
+// @validateNoDerivedComputationsInEffects
+import {useEffect, useState} from 'react';
+
+function Component({user: {firstName, lastName}}) {
+  const [fullName, setFullName] = useState('');
+
+  useEffect(() => {
+    setFullName(firstName + ' ' + lastName);
+  }, [firstName, lastName]);
+
+  return <div>{fullName}</div>;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{user: {firstName: 'John', lastName: 'Doe'}}],
+};

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useEffect/error.invalid-derived-state-from-props-in-effect.expect.md

@@ -0,0 +1,43 @@
+
+## Input
+
+```javascript
+// @validateNoDerivedComputationsInEffects
+import {useEffect, useState} from 'react';
+
+function Component({firstName, lastName}) {
+  const [fullName, setFullName] = useState('');
+
+  useEffect(() => {
+    setFullName(firstName + ' ' + lastName);
+  }, [firstName, lastName]);
+
+  return <div>{fullName}</div>;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{firstName: 'John', lastName: 'Doe'}],
+};
+
+```
+
+
+## Error
+
+```
+Found 1 error:
+
+Error: Values derived from props and state should be calculated during render, not in an effect. (https://react.dev/learn/you-might-not-need-an-effect#updating-state-based-on-props-or-state)
+
+error.invalid-derived-state-from-props-in-effect.ts:8:4
+   6 |
+   7 |   useEffect(() => {
+>  8 |     setFullName(firstName + ' ' + lastName);
+     |     ^^^^^^^^^^^ Values derived from props and state should be calculated during render, not in an effect. (https://react.dev/learn/you-might-not-need-an-effect#updating-state-based-on-props-or-state)
+   9 |   }, [firstName, lastName]);
+  10 |
+  11 |   return <div>{fullName}</div>;
+```
+          
+      

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useEffect/error.invalid-derived-state-from-props-in-effect.js

@@ -0,0 +1,17 @@
+// @validateNoDerivedComputationsInEffects
+import {useEffect, useState} from 'react';
+
+function Component({firstName, lastName}) {
+  const [fullName, setFullName] = useState('');
+
+  useEffect(() => {
+    setFullName(firstName + ' ' + lastName);
+  }, [firstName, lastName]);
+
+  return <div>{fullName}</div>;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{firstName: 'John', lastName: 'Doe'}],
+};

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useEffect/error.invalid-derived-state-from-state-in-effect.expect.md

@@ -0,0 +1,51 @@
+
+## Input
+
+```javascript
+// @validateNoDerivedComputationsInEffects
+import {useEffect, useState} from 'react';
+
+function Component() {
+  const [firstName, setFirstName] = useState('John');
+  const [lastName, setLastName] = useState('Doe');
+  const [fullName, setFullName] = useState('');
+
+  useEffect(() => {
+    setFullName(firstName + ' ' + lastName);
+  }, [firstName, lastName]);
+
+  return (
+    <div>
+      <input value={firstName} onChange={e => setFirstName(e.target.value)} />
+      <input value={lastName} onChange={e => setLastName(e.target.value)} />
+      <div>{fullName}</div>
+    </div>
+  );
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [],
+};
+
+```
+
+
+## Error
+
+```
+Found 1 error:
+
+Error: Values derived from props and state should be calculated during render, not in an effect. (https://react.dev/learn/you-might-not-need-an-effect#updating-state-based-on-props-or-state)
+
+error.invalid-derived-state-from-state-in-effect.ts:10:4
+   8 |
+   9 |   useEffect(() => {
+> 10 |     setFullName(firstName + ' ' + lastName);
+     |     ^^^^^^^^^^^ Values derived from props and state should be calculated during render, not in an effect. (https://react.dev/learn/you-might-not-need-an-effect#updating-state-based-on-props-or-state)
+  11 |   }, [firstName, lastName]);
+  12 |
+  13 |   return (
+```
+          
+      

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useEffect/error.invalid-derived-state-from-state-in-effect.js

@@ -0,0 +1,25 @@
+// @validateNoDerivedComputationsInEffects
+import {useEffect, useState} from 'react';
+
+function Component() {
+  const [firstName, setFirstName] = useState('John');
+  const [lastName, setLastName] = useState('Doe');
+  const [fullName, setFullName] = useState('');
+
+  useEffect(() => {
+    setFullName(firstName + ' ' + lastName);
+  }, [firstName, lastName]);
+
+  return (
+    <div>
+      <input value={firstName} onChange={e => setFirstName(e.target.value)} />
+      <input value={lastName} onChange={e => setLastName(e.target.value)} />
+      <div>{fullName}</div>
+    </div>
+  );
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [],
+};

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useEffect/invalid-derived-state-from-props-computed.expect.md

@@ -0,0 +1,72 @@
+
+## Input
+
+```javascript
+// @validateNoDerivedComputationsInEffects
+import {useEffect, useState} from 'react';
+
+function Component(props) {
+  const [displayValue, setDisplayValue] = useState('');
+
+  useEffect(() => {
+    const computed = props.prefix + props.value + props.suffix;
+    setDisplayValue(computed);
+  }, [props.prefix, props.value, props.suffix]);
+
+  return <div>{displayValue}</div>;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{prefix: '[', value: 'test', suffix: ']'}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // @validateNoDerivedComputationsInEffects
+import { useEffect, useState } from "react";
+
+function Component(props) {
+  const $ = _c(7);
+  const [displayValue, setDisplayValue] = useState("");
+  let t0;
+  let t1;
+  if ($[0] !== props.prefix || $[1] !== props.suffix || $[2] !== props.value) {
+    t0 = () => {
+      const computed = props.prefix + props.value + props.suffix;
+      setDisplayValue(computed);
+    };
+    t1 = [props.prefix, props.value, props.suffix];
+    $[0] = props.prefix;
+    $[1] = props.suffix;
+    $[2] = props.value;
+    $[3] = t0;
+    $[4] = t1;
+  } else {
+    t0 = $[3];
+    t1 = $[4];
+  }
+  useEffect(t0, t1);
+  let t2;
+  if ($[5] !== displayValue) {
+    t2 = <div>{displayValue}</div>;
+    $[5] = displayValue;
+    $[6] = t2;
+  } else {
+    t2 = $[6];
+  }
+  return t2;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ prefix: "[", value: "test", suffix: "]" }],
+};
+
+```
+      
+### Eval output
+(kind: ok) <div>[test]</div>

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useEffect/invalid-derived-state-from-props-computed.js

@@ -0,0 +1,18 @@
+// @validateNoDerivedComputationsInEffects
+import {useEffect, useState} from 'react';
+
+function Component(props) {
+  const [displayValue, setDisplayValue] = useState('');
+
+  useEffect(() => {
+    const computed = props.prefix + props.value + props.suffix;
+    setDisplayValue(computed);
+  }, [props.prefix, props.value, props.suffix]);
+
+  return <div>{displayValue}</div>;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{prefix: '[', value: 'test', suffix: ']'}],
+};

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/valid-set-state-in-useEffect-from-ref.expect.md

@@ -1,63 +0,0 @@
-
-## Input
-
-```javascript
-// @validateNoSetStateInEffects
-import {useState, useRef, useEffect} from 'react';
-
-function Tooltip() {
-  const ref = useRef(null);
-  const [tooltipHeight, setTooltipHeight] = useState(0);
-
-  useEffect(() => {
-    const {height} = ref.current.getBoundingClientRect();
-    setTooltipHeight(height);
-  }, []);
-
-  return tooltipHeight;
-}
-
-export const FIXTURE_ENTRYPOINT = {
-  fn: Tooltip,
-  params: [],
-};
-
-```
-
-## Code
-
-```javascript
-import { c as _c } from "react/compiler-runtime"; // @validateNoSetStateInEffects
-import { useState, useRef, useEffect } from "react";
-
-function Tooltip() {
-  const $ = _c(2);
-  const ref = useRef(null);
-  const [tooltipHeight, setTooltipHeight] = useState(0);
-  let t0;
-  let t1;
-  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
-    t0 = () => {
-      const { height } = ref.current.getBoundingClientRect();
-      setTooltipHeight(height);
-    };
-    t1 = [];
-    $[0] = t0;
-    $[1] = t1;
-  } else {
-    t0 = $[0];
-    t1 = $[1];
-  }
-  useEffect(t0, t1);
-  return tooltipHeight;
-}
-
-export const FIXTURE_ENTRYPOINT = {
-  fn: Tooltip,
-  params: [],
-};
-
-```
-      
-### Eval output
-(kind: exception) Cannot read properties of null (reading 'getBoundingClientRect')

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/valid-set-state-in-useEffect-from-ref.js

@@ -1,19 +0,0 @@
-// @validateNoSetStateInEffects
-import {useState, useRef, useEffect} from 'react';
-
-function Tooltip() {
-  const ref = useRef(null);
-  const [tooltipHeight, setTooltipHeight] = useState(0);
-
-  useEffect(() => {
-    const {height} = ref.current.getBoundingClientRect();
-    setTooltipHeight(height);
-  }, []);
-
-  return tooltipHeight;
-}
-
-export const FIXTURE_ENTRYPOINT = {
-  fn: Tooltip,
-  params: [],
-};

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/valid-setState-in-effect-from-ref-arithmetic.expect.md

@@ -1,68 +0,0 @@
-
-## Input
-
-```javascript
-// @validateNoSetStateInEffects @enableAllowSetStateFromRefsInEffects
-import {useState, useRef, useLayoutEffect} from 'react';
-
-function Component() {
-  const ref = useRef({size: 5});
-  const [computedSize, setComputedSize] = useState(0);
-
-  useLayoutEffect(() => {
-    setComputedSize(ref.current.size * 10);
-  }, []);
-
-  return computedSize;
-}
-
-export const FIXTURE_ENTRYPOINT = {
-  fn: Component,
-  params: [],
-};
-
-```
-
-## Code
-
-```javascript
-import { c as _c } from "react/compiler-runtime"; // @validateNoSetStateInEffects @enableAllowSetStateFromRefsInEffects
-import { useState, useRef, useLayoutEffect } from "react";
-
-function Component() {
-  const $ = _c(3);
-  let t0;
-  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
-    t0 = { size: 5 };
-    $[0] = t0;
-  } else {
-    t0 = $[0];
-  }
-  const ref = useRef(t0);
-  const [computedSize, setComputedSize] = useState(0);
-  let t1;
-  let t2;
-  if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
-    t1 = () => {
-      setComputedSize(ref.current.size * 10);
-    };
-    t2 = [];
-    $[1] = t1;
-    $[2] = t2;
-  } else {
-    t1 = $[1];
-    t2 = $[2];
-  }
-  useLayoutEffect(t1, t2);
-  return computedSize;
-}
-
-export const FIXTURE_ENTRYPOINT = {
-  fn: Component,
-  params: [],
-};
-
-```
-      
-### Eval output
-(kind: ok) 50

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/valid-setState-in-effect-from-ref-arithmetic.js

@@ -1,18 +0,0 @@
-// @validateNoSetStateInEffects @enableAllowSetStateFromRefsInEffects
-import {useState, useRef, useLayoutEffect} from 'react';
-
-function Component() {
-  const ref = useRef({size: 5});
-  const [computedSize, setComputedSize] = useState(0);
-
-  useLayoutEffect(() => {
-    setComputedSize(ref.current.size * 10);
-  }, []);
-
-  return computedSize;
-}
-
-export const FIXTURE_ENTRYPOINT = {
-  fn: Component,
-  params: [],
-};

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/valid-setState-in-effect-from-ref-array-index.expect.md

@@ -1,69 +0,0 @@
-
-## Input
-
-```javascript
-// @validateNoSetStateInEffects @enableAllowSetStateFromRefsInEffects
-import {useState, useRef, useEffect} from 'react';
-
-function Component() {
-  const ref = useRef([1, 2, 3, 4, 5]);
-  const [value, setValue] = useState(0);
-
-  useEffect(() => {
-    const index = 2;
-    setValue(ref.current[index]);
-  }, []);
-
-  return value;
-}
-
-export const FIXTURE_ENTRYPOINT = {
-  fn: Component,
-  params: [],
-};
-
-```
-
-## Code
-
-```javascript
-import { c as _c } from "react/compiler-runtime"; // @validateNoSetStateInEffects @enableAllowSetStateFromRefsInEffects
-import { useState, useRef, useEffect } from "react";
-
-function Component() {
-  const $ = _c(3);
-  let t0;
-  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
-    t0 = [1, 2, 3, 4, 5];
-    $[0] = t0;
-  } else {
-    t0 = $[0];
-  }
-  const ref = useRef(t0);
-  const [value, setValue] = useState(0);
-  let t1;
-  let t2;
-  if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
-    t1 = () => {
-      setValue(ref.current[2]);
-    };
-    t2 = [];
-    $[1] = t1;
-    $[2] = t2;
-  } else {
-    t1 = $[1];
-    t2 = $[2];
-  }
-  useEffect(t1, t2);
-  return value;
-}
-
-export const FIXTURE_ENTRYPOINT = {
-  fn: Component,
-  params: [],
-};
-
-```
-      
-### Eval output
-(kind: ok) 3

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/valid-setState-in-effect-from-ref-array-index.js

@@ -1,19 +0,0 @@
-// @validateNoSetStateInEffects @enableAllowSetStateFromRefsInEffects
-import {useState, useRef, useEffect} from 'react';
-
-function Component() {
-  const ref = useRef([1, 2, 3, 4, 5]);
-  const [value, setValue] = useState(0);
-
-  useEffect(() => {
-    const index = 2;
-    setValue(ref.current[index]);
-  }, []);
-
-  return value;
-}
-
-export const FIXTURE_ENTRYPOINT = {
-  fn: Component,
-  params: [],
-};

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/valid-setState-in-effect-from-ref-function-call.expect.md

@@ -1,75 +0,0 @@
-
-## Input
-
-```javascript
-// @validateNoSetStateInEffects @enableAllowSetStateFromRefsInEffects
-import {useState, useRef, useEffect} from 'react';
-
-function Component() {
-  const ref = useRef(null);
-  const [width, setWidth] = useState(0);
-
-  useEffect(() => {
-    function getBoundingRect(ref) {
-      if (ref.current) {
-        return ref.current.getBoundingClientRect?.()?.width ?? 100;
-      }
-      return 100;
-    }
-
-    setWidth(getBoundingRect(ref));
-  }, []);
-
-  return width;
-}
-
-export const FIXTURE_ENTRYPOINT = {
-  fn: Component,
-  params: [],
-};
-
-```
-
-## Code
-
-```javascript
-import { c as _c } from "react/compiler-runtime"; // @validateNoSetStateInEffects @enableAllowSetStateFromRefsInEffects
-import { useState, useRef, useEffect } from "react";
-
-function Component() {
-  const $ = _c(2);
-  const ref = useRef(null);
-  const [width, setWidth] = useState(0);
-  let t0;
-  let t1;
-  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
-    t0 = () => {
-      const getBoundingRect = function getBoundingRect(ref_0) {
-        if (ref_0.current) {
-          return ref_0.current.getBoundingClientRect?.()?.width ?? 100;
-        }
-        return 100;
-      };
-
-      setWidth(getBoundingRect(ref));
-    };
-    t1 = [];
-    $[0] = t0;
-    $[1] = t1;
-  } else {
-    t0 = $[0];
-    t1 = $[1];
-  }
-  useEffect(t0, t1);
-  return width;
-}
-
-export const FIXTURE_ENTRYPOINT = {
-  fn: Component,
-  params: [],
-};
-
-```
-      
-### Eval output
-(kind: ok) 100

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/valid-setState-in-effect-from-ref-function-call.js

@@ -1,25 +0,0 @@
-// @validateNoSetStateInEffects @enableAllowSetStateFromRefsInEffects
-import {useState, useRef, useEffect} from 'react';
-
-function Component() {
-  const ref = useRef(null);
-  const [width, setWidth] = useState(0);
-
-  useEffect(() => {
-    function getBoundingRect(ref) {
-      if (ref.current) {
-        return ref.current.getBoundingClientRect?.()?.width ?? 100;
-      }
-      return 100;
-    }
-
-    setWidth(getBoundingRect(ref));
-  }, []);
-
-  return width;
-}
-
-export const FIXTURE_ENTRYPOINT = {
-  fn: Component,
-  params: [],
-};

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/valid-setState-in-useLayoutEffect-from-ref.expect.md

@@ -1,63 +0,0 @@
-
-## Input
-
-```javascript
-// @validateNoSetStateInEffects @enableAllowSetStateFromRefsInEffects
-import {useState, useRef, useLayoutEffect} from 'react';
-
-function Tooltip() {
-  const ref = useRef(null);
-  const [tooltipHeight, setTooltipHeight] = useState(0);
-
-  useLayoutEffect(() => {
-    const {height} = ref.current.getBoundingClientRect();
-    setTooltipHeight(height);
-  }, []);
-
-  return tooltipHeight;
-}
-
-export const FIXTURE_ENTRYPOINT = {
-  fn: Tooltip,
-  params: [],
-};
-
-```
-
-## Code
-
-```javascript
-import { c as _c } from "react/compiler-runtime"; // @validateNoSetStateInEffects @enableAllowSetStateFromRefsInEffects
-import { useState, useRef, useLayoutEffect } from "react";
-
-function Tooltip() {
-  const $ = _c(2);
-  const ref = useRef(null);
-  const [tooltipHeight, setTooltipHeight] = useState(0);
-  let t0;
-  let t1;
-  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
-    t0 = () => {
-      const { height } = ref.current.getBoundingClientRect();
-      setTooltipHeight(height);
-    };
-    t1 = [];
-    $[0] = t0;
-    $[1] = t1;
-  } else {
-    t0 = $[0];
-    t1 = $[1];
-  }
-  useLayoutEffect(t0, t1);
-  return tooltipHeight;
-}
-
-export const FIXTURE_ENTRYPOINT = {
-  fn: Tooltip,
-  params: [],
-};
-
-```
-      
-### Eval output
-(kind: exception) Cannot read properties of null (reading 'getBoundingClientRect')

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/valid-setState-in-useLayoutEffect-from-ref.js

@@ -1,19 +0,0 @@
-// @validateNoSetStateInEffects @enableAllowSetStateFromRefsInEffects
-import {useState, useRef, useLayoutEffect} from 'react';
-
-function Tooltip() {
-  const ref = useRef(null);
-  const [tooltipHeight, setTooltipHeight] = useState(0);
-
-  useLayoutEffect(() => {
-    const {height} = ref.current.getBoundingClientRect();
-    setTooltipHeight(height);
-  }, []);
-
-  return tooltipHeight;
-}
-
-export const FIXTURE_ENTRYPOINT = {
-  fn: Tooltip,
-  params: [],
-};

fixtures/view-transition/src/components/Page.js

@@ -1,7 +1,7 @@
 import React, {
   unstable_addTransitionType as addTransitionType,
   unstable_ViewTransition as ViewTransition,
-  Activity,
+  unstable_Activity as Activity,
   useLayoutEffect,
   useEffect,
   useState,
@@ -50,8 +50,7 @@ function Component() {
       <p>
         <img
           src="https://react.dev/_next/image?url=%2Fimages%2Fteam%2Fsebmarkbage.jpg&w=3840&q=75"
-          width="400"
-          height="248"
+          width="300"
         />
       </p>
     </ViewTransition>

fixtures/view-transition/src/components/Transitions.module.css

@@ -56,10 +56,10 @@
 }
 
 ::view-transition-new(.enter-slide-right):only-child {
-  animation: enter-slide-right ease-in 0.25s forwards;
+  animation: enter-slide-right ease-in 0.25s;
 }
 ::view-transition-old(.exit-slide-left):only-child {
-  animation: exit-slide-left ease-in 0.25s forwards;
+  animation: exit-slide-left ease-in 0.25s;
 }
 
 :root:active-view-transition-type(navigation-back) {

packages/internal-test-utils/ReactInternalTestUtils.js

@@ -16,7 +16,6 @@ import {
   clearErrors,
   createLogAssertion,
 } from './consoleMock';
-export {getDebugInfo} from './debugInfo';
 export {act, serverAct} from './internalAct';
 const {assertConsoleLogsCleared} = require('internal-test-utils/consoleMock');
 

packages/internal-test-utils/debugInfo.js

@@ -1,131 +0,0 @@
-'use strict';
-
-const path = require('path');
-
-const repoRoot = path.resolve(__dirname, '../../');
-
-type DebugInfoConfig = {
-  ignoreProps?: boolean,
-  ignoreRscStreamInfo?: boolean,
-  useFixedTime?: boolean,
-  useV8Stack?: boolean,
-};
-
-function formatV8Stack(stack) {
-  let v8StyleStack = '';
-  if (stack) {
-    for (let i = 0; i < stack.length; i++) {
-      const [name] = stack[i];
-      if (v8StyleStack !== '') {
-        v8StyleStack += '\n';
-      }
-      v8StyleStack += '    in ' + name + ' (at **)';
-    }
-  }
-  return v8StyleStack;
-}
-
-function normalizeStack(stack) {
-  if (!stack) {
-    return stack;
-  }
-  const copy = [];
-  for (let i = 0; i < stack.length; i++) {
-    const [name, file, line, col, enclosingLine, enclosingCol] = stack[i];
-    copy.push([
-      name,
-      file.replace(repoRoot, ''),
-      line,
-      col,
-      enclosingLine,
-      enclosingCol,
-    ]);
-  }
-  return copy;
-}
-
-function normalizeIOInfo(config: DebugInfoConfig, ioInfo) {
-  const {debugTask, debugStack, debugLocation, ...copy} = ioInfo;
-  if (ioInfo.stack) {
-    copy.stack = config.useV8Stack
-      ? formatV8Stack(ioInfo.stack)
-      : normalizeStack(ioInfo.stack);
-  }
-  if (ioInfo.owner) {
-    copy.owner = normalizeDebugInfo(config, ioInfo.owner);
-  }
-  if (typeof ioInfo.start === 'number' && config.useFixedTime) {
-    copy.start = 0;
-  }
-  if (typeof ioInfo.end === 'number' && config.useFixedTime) {
-    copy.end = 0;
-  }
-  const promise = ioInfo.value;
-  if (promise) {
-    promise.then(); // init
-    if (promise.status === 'fulfilled') {
-      if (ioInfo.name === 'RSC stream') {
-        copy.byteSize = 0;
-        copy.value = {
-          value: 'stream',
-        };
-      } else {
-        copy.value = {
-          value: promise.value,
-        };
-      }
-    } else if (promise.status === 'rejected') {
-      copy.value = {
-        reason: promise.reason,
-      };
-    } else {
-      copy.value = {
-        status: promise.status,
-      };
-    }
-  }
-  return copy;
-}
-
-function normalizeDebugInfo(config: DebugInfoConfig, original) {
-  const {debugTask, debugStack, debugLocation, ...debugInfo} = original;
-  if (original.owner) {
-    debugInfo.owner = normalizeDebugInfo(config, original.owner);
-  }
-  if (original.awaited) {
-    debugInfo.awaited = normalizeIOInfo(config, original.awaited);
-  }
-  if (debugInfo.props && config.ignoreProps) {
-    debugInfo.props = {};
-  }
-  if (Array.isArray(debugInfo.stack)) {
-    debugInfo.stack = config.useV8Stack
-      ? formatV8Stack(debugInfo.stack)
-      : normalizeStack(debugInfo.stack);
-    return debugInfo;
-  } else if (typeof debugInfo.time === 'number' && config.useFixedTime) {
-    return {...debugInfo, time: 0};
-  } else {
-    return debugInfo;
-  }
-}
-
-export function getDebugInfo(config: DebugInfoConfig, obj) {
-  const debugInfo = obj._debugInfo;
-  if (debugInfo) {
-    const copy = [];
-    for (let i = 0; i < debugInfo.length; i++) {
-      if (
-        debugInfo[i].awaited &&
-        debugInfo[i].awaited.name === 'RSC stream' &&
-        config.ignoreRscStreamInfo
-      ) {
-        // Ignore RSC stream I/O info.
-      } else {
-        copy.push(normalizeDebugInfo(config, debugInfo[i]));
-      }
-    }
-    return copy;
-  }
-  return debugInfo;
-}

packages/react-art/src/ReactFiberConfigART.js

@@ -609,15 +609,13 @@ export function preloadInstance(type, props) {
   return true;
 }
 
-export function startSuspendingCommit() {
-  return null;
-}
+export function startSuspendingCommit() {}
 
-export function suspendInstance(state, instance, type, props) {}
+export function suspendInstance(instance, type, props) {}
 
-export function suspendOnActiveViewTransition(state, container) {}
+export function suspendOnActiveViewTransition(container) {}
 
-export function waitForCommitToBeReady(timeoutOffset) {
+export function waitForCommitToBeReady() {
   return null;
 }
 

packages/react-client/src/ReactFlightClient.js

@@ -3181,27 +3181,11 @@ function resolveErrorDev(
         'An error occurred in the Server Components render but no message was provided',
     ),
   );
-
-  let ownerTask: null | ConsoleTask = null;
-  if (errorInfo.owner != null) {
-    const ownerRef = errorInfo.owner.slice(1);
-    // TODO: This is not resilient to the owner loading later in an Error like a debug channel.
-    // The whole error serialization should probably go through the regular model at least for DEV.
-    const owner = getOutlinedModel(response, ownerRef, {}, '', createModel);
-    if (owner !== null) {
-      ownerTask = initializeFakeTask(response, owner);
-    }
-  }
-
-  if (ownerTask === null) {
-    const rootTask = getRootTask(response, env);
-    if (rootTask != null) {
-      error = rootTask.run(callStack);
-    } else {
-      error = callStack();
-    }
+  const rootTask = getRootTask(response, env);
+  if (rootTask != null) {
+    error = rootTask.run(callStack);
   } else {
-    error = ownerTask.run(callStack);
+    error = callStack();
   }
 
   (error: any).name = name;

packages/react-client/src/__tests__/ReactFlight-test.js

@@ -33,6 +33,20 @@ function normalizeCodeLocInfo(str) {
   );
 }
 
+function formatV8Stack(stack) {
+  let v8StyleStack = '';
+  if (stack) {
+    for (let i = 0; i < stack.length; i++) {
+      const [name] = stack[i];
+      if (v8StyleStack !== '') {
+        v8StyleStack += '\n';
+      }
+      v8StyleStack += '    in ' + name + ' (at **)';
+    }
+  }
+  return v8StyleStack;
+}
+
 const repoRoot = path.resolve(__dirname, '../../../../');
 function normalizeReactCodeLocInfo(str) {
   const repoRootForRegexp = repoRoot.replace(/\//g, '\\/');
@@ -53,6 +67,35 @@ function getErrorForJestMatcher(error) {
   };
 }
 
+function normalizeComponentInfo(debugInfo) {
+  if (Array.isArray(debugInfo.stack)) {
+    const {debugTask, debugStack, debugLocation, ...copy} = debugInfo;
+    copy.stack = formatV8Stack(debugInfo.stack);
+    if (debugInfo.owner) {
+      copy.owner = normalizeComponentInfo(debugInfo.owner);
+    }
+    return copy;
+  } else {
+    return debugInfo;
+  }
+}
+
+function getDebugInfo(obj) {
+  const debugInfo = obj._debugInfo;
+  if (debugInfo) {
+    const copy = [];
+    for (let i = 0; i < debugInfo.length; i++) {
+      if (debugInfo[i].awaited && debugInfo[i].awaited.name === 'RSC stream') {
+        // Ignore RSC stream I/O info.
+      } else {
+        copy.push(normalizeComponentInfo(debugInfo[i]));
+      }
+    }
+    return copy;
+  }
+  return debugInfo;
+}
+
 const finalizationRegistries = [];
 function FinalizationRegistryMock(callback) {
   this._heldValues = [];
@@ -89,7 +132,6 @@ let NoErrorExpected;
 let Scheduler;
 let assertLog;
 let assertConsoleErrorDev;
-let getDebugInfo;
 
 describe('ReactFlight', () => {
   beforeEach(() => {
@@ -127,11 +169,6 @@ describe('ReactFlight', () => {
     assertLog = InternalTestUtils.assertLog;
     assertConsoleErrorDev = InternalTestUtils.assertConsoleErrorDev;
 
-    getDebugInfo = InternalTestUtils.getDebugInfo.bind(null, {
-      useV8Stack: true,
-      ignoreRscStreamInfo: true,
-    });
-
     ErrorBoundary = class extends React.Component {
       state = {hasError: false, error: null};
       static getDerivedStateFromError(error) {

packages/react-client/src/__tests__/ReactFlightDebugChannel-test.js

@@ -18,12 +18,50 @@ if (typeof File === 'undefined' || typeof FormData === 'undefined') {
   global.FormData = require('undici').FormData;
 }
 
+function formatV8Stack(stack) {
+  let v8StyleStack = '';
+  if (stack) {
+    for (let i = 0; i < stack.length; i++) {
+      const [name] = stack[i];
+      if (v8StyleStack !== '') {
+        v8StyleStack += '\n';
+      }
+      v8StyleStack += '    in ' + name + ' (at **)';
+    }
+  }
+  return v8StyleStack;
+}
+
+function normalizeComponentInfo(debugInfo) {
+  if (Array.isArray(debugInfo.stack)) {
+    const {debugTask, debugStack, ...copy} = debugInfo;
+    copy.stack = formatV8Stack(debugInfo.stack);
+    if (debugInfo.owner) {
+      copy.owner = normalizeComponentInfo(debugInfo.owner);
+    }
+    return copy;
+  } else {
+    return debugInfo;
+  }
+}
+
+function getDebugInfo(obj) {
+  const debugInfo = obj._debugInfo;
+  if (debugInfo) {
+    const copy = [];
+    for (let i = 0; i < debugInfo.length; i++) {
+      copy.push(normalizeComponentInfo(debugInfo[i]));
+    }
+    return copy;
+  }
+  return debugInfo;
+}
+
 let act;
 let React;
 let ReactNoop;
 let ReactNoopFlightServer;
 let ReactNoopFlightClient;
-let getDebugInfo;
 
 describe('ReactFlight', () => {
   beforeEach(() => {
@@ -53,11 +91,6 @@ describe('ReactFlight', () => {
     ReactNoop = require('react-noop-renderer');
     ReactNoopFlightClient = require('react-noop-renderer/flight-client');
     act = require('internal-test-utils').act;
-
-    getDebugInfo = require('internal-test-utils').getDebugInfo.bind(null, {
-      useV8Stack: true,
-      ignoreRscStreamInfo: true,
-    });
   });
 
   afterEach(() => {

packages/react-devtools-core/webpack.standalone.js

@@ -108,7 +108,6 @@ module.exports = {
           {
             loader: 'workerize-loader',
             options: {
-              // Workers would have to be exposed on a public path in order to outline them.
               inline: true,
               name: '[name]',
             },

packages/react-devtools-extensions/build.js

@@ -6,7 +6,7 @@ const archiver = require('archiver');
 const {execSync} = require('child_process');
 const {readFileSync, writeFileSync, createWriteStream} = require('fs');
 const {copy, ensureDir, move, remove, pathExistsSync} = require('fs-extra');
-const {join, resolve, basename} = require('path');
+const {join, resolve} = require('path');
 const {getGitCommit} = require('./utils');
 
 // These files are copied along with Webpack-bundled files
@@ -66,31 +66,22 @@ const build = async (tempPath, manifestPath, envExtension = {}) => {
       stdio: 'inherit',
     },
   );
+  execSync(
+    `${webpackPath} --config webpack.backend.js --output-path ${binPath}`,
+    {
+      cwd: __dirname,
+      env: mergedEnv,
+      stdio: 'inherit',
+    },
+  );
 
   // Make temp dir
   await ensureDir(zipPath);
 
   const copiedManifestPath = join(zipPath, 'manifest.json');
 
-  let webpackStatsFilePath = null;
   // Copy unbuilt source files to zip dir to be packaged:
-  await copy(binPath, join(zipPath, 'build'), {
-    filter: filePath => {
-      if (basename(filePath).startsWith('webpack-stats.')) {
-        webpackStatsFilePath = filePath;
-        // The ZIP is the actual extension and doesn't need this metadata.
-        return false;
-      }
-      return true;
-    },
-  });
-  if (webpackStatsFilePath !== null) {
-    await copy(
-      webpackStatsFilePath,
-      join(tempPath, basename(webpackStatsFilePath)),
-    );
-    webpackStatsFilePath = join(tempPath, basename(webpackStatsFilePath));
-  }
+  await copy(binPath, join(zipPath, 'build'));
   await copy(manifestPath, copiedManifestPath);
   await Promise.all(
     STATIC_FILES.map(file => copy(join(__dirname, file), join(zipPath, file))),
@@ -129,11 +120,9 @@ const build = async (tempPath, manifestPath, envExtension = {}) => {
     archive.finalize();
     zipStream.on('close', () => resolvePromise());
   });
-
-  return webpackStatsFilePath;
 };
 
-const postProcess = async (tempPath, destinationPath, webpackStatsFilePath) => {
+const postProcess = async (tempPath, destinationPath) => {
   const unpackedSourcePath = join(tempPath, 'zip');
   const packedSourcePath = join(tempPath, 'ReactDevTools.zip');
   const packedDestPath = join(destinationPath, 'ReactDevTools.zip');
@@ -141,14 +130,6 @@ const postProcess = async (tempPath, destinationPath, webpackStatsFilePath) => {
 
   await move(unpackedSourcePath, unpackedDestPath); // Copy built files to destination
   await move(packedSourcePath, packedDestPath); // Copy built files to destination
-  if (webpackStatsFilePath !== null) {
-    await move(
-      webpackStatsFilePath,
-      join(destinationPath, basename(webpackStatsFilePath)),
-    );
-  } else {
-    console.log('No webpack-stats.json file was generated.');
-  }
   await remove(tempPath); // Clean up temp directory and files
 };
 
@@ -177,14 +158,10 @@ const main = async buildId => {
     const tempPath = join(__dirname, 'build', buildId);
     await ensureLocalBuild();
     await preProcess(destinationPath, tempPath);
-    const webpackStatsFilePath = await build(
-      tempPath,
-      manifestPath,
-      envExtension,
-    );
+    await build(tempPath, manifestPath, envExtension);
 
     const builtUnpackedPath = join(destinationPath, 'unpacked');
-    await postProcess(tempPath, destinationPath, webpackStatsFilePath);
+    await postProcess(tempPath, destinationPath);
 
     return builtUnpackedPath;
   } catch (error) {

packages/react-devtools-extensions/package.json

@@ -65,7 +65,6 @@
     "webpack": "^5.82.1",
     "webpack-cli": "^5.1.1",
     "webpack-dev-server": "^4.15.0",
-    "webpack-stats-plugin": "^1.1.3",
     "workerize-loader": "^2.0.2"
   },
   "dependencies": {

packages/react-devtools-extensions/src/main/fetchFileWithCaching.js

@@ -82,7 +82,7 @@ const fetchFromPage = async (url, resolve, reject) => {
   debugLog('[main] fetchFromPage()', url);
 
   function onPortMessage({payload, source}) {
-    if (source === 'react-devtools-background' && payload?.url === url) {
+    if (source === 'react-devtools-background') {
       switch (payload?.type) {
         case 'fetch-file-with-cache-complete':
           chrome.runtime.onMessage.removeListener(onPortMessage);

packages/react-devtools-extensions/src/main/index.js

@@ -24,7 +24,6 @@ import {
   normalizeUrlIfValid,
 } from 'react-devtools-shared/src/utils';
 import {checkConditions} from 'react-devtools-shared/src/devtools/views/Editor/utils';
-import * as parseHookNames from 'react-devtools-shared/src/hooks/parseHookNames';
 
 import {
   setBrowserSelectionFromReact,
@@ -41,12 +40,6 @@ import getProfilingFlags from './getProfilingFlags';
 import debounce from './debounce';
 import './requestAnimationFramePolyfill';
 
-const resolvedParseHookNames = Promise.resolve(parseHookNames);
-// DevTools assumes this is a dynamically imported module. Since we outline
-// workers in this bundle, we can sync require the module since it's just a thin
-// wrapper around calling the worker.
-const hookNamesModuleLoaderFunction = () => resolvedParseHookNames;
-
 function createBridge() {
   bridge = new Bridge({
     listen(fn) {
@@ -195,6 +188,12 @@ function createBridgeAndStore() {
     );
   };
 
+  // TODO (Webpack 5) Hopefully we can remove this prop after the Webpack 5 migration.
+  const hookNamesModuleLoaderFunction = () =>
+    import(
+      /* webpackChunkName: 'parseHookNames' */ 'react-devtools-shared/src/hooks/parseHookNames'
+    );
+
   root = createRoot(document.createElement('div'));
 
   render = (overrideTab = mostRecentOverrideTab) => {

packages/react-devtools-extensions/webpack.backend.js

@@ -0,0 +1,118 @@
+'use strict';
+
+const {resolve, isAbsolute, relative} = require('path');
+const Webpack = require('webpack');
+
+const {resolveFeatureFlags} = require('react-devtools-shared/buildUtils');
+const SourceMapIgnoreListPlugin = require('react-devtools-shared/SourceMapIgnoreListPlugin');
+
+const {GITHUB_URL, getVersionString} = require('./utils');
+
+const NODE_ENV = process.env.NODE_ENV;
+if (!NODE_ENV) {
+  console.error('NODE_ENV not set');
+  process.exit(1);
+}
+
+const builtModulesDir = resolve(
+  __dirname,
+  '..',
+  '..',
+  'build',
+  'oss-experimental',
+);
+
+const __DEV__ = NODE_ENV === 'development';
+
+const DEVTOOLS_VERSION = getVersionString(process.env.DEVTOOLS_VERSION);
+
+const IS_CHROME = process.env.IS_CHROME === 'true';
+const IS_FIREFOX = process.env.IS_FIREFOX === 'true';
+const IS_EDGE = process.env.IS_EDGE === 'true';
+
+const featureFlagTarget = process.env.FEATURE_FLAG_TARGET || 'extension-oss';
+
+module.exports = {
+  mode: __DEV__ ? 'development' : 'production',
+  devtool: false,
+  entry: {
+    backend: './src/backend.js',
+  },
+  output: {
+    path: __dirname + '/build',
+    filename: 'react_devtools_backend_compact.js',
+  },
+  node: {
+    global: false,
+  },
+  resolve: {
+    alias: {
+      react: resolve(builtModulesDir, 'react'),
+      'react-debug-tools': resolve(builtModulesDir, 'react-debug-tools'),
+      'react-devtools-feature-flags': resolveFeatureFlags(featureFlagTarget),
+      'react-dom': resolve(builtModulesDir, 'react-dom'),
+      'react-is': resolve(builtModulesDir, 'react-is'),
+      scheduler: resolve(builtModulesDir, 'scheduler'),
+    },
+  },
+  optimization: {
+    minimize: false,
+  },
+  plugins: [
+    new Webpack.ProvidePlugin({
+      process: 'process/browser',
+    }),
+    new Webpack.DefinePlugin({
+      __DEV__: true,
+      __PROFILE__: false,
+      __DEV____DEV__: true,
+      // By importing `shared/` we may import ReactFeatureFlags
+      __EXPERIMENTAL__: true,
+      'process.env.DEVTOOLS_PACKAGE': `"react-devtools-extensions"`,
+      'process.env.DEVTOOLS_VERSION': `"${DEVTOOLS_VERSION}"`,
+      'process.env.GITHUB_URL': `"${GITHUB_URL}"`,
+      'process.env.IS_CHROME': IS_CHROME,
+      'process.env.IS_FIREFOX': IS_FIREFOX,
+      'process.env.IS_EDGE': IS_EDGE,
+      __IS_CHROME__: IS_CHROME,
+      __IS_FIREFOX__: IS_FIREFOX,
+      __IS_EDGE__: IS_EDGE,
+      __IS_NATIVE__: false,
+      __IS_INTERNAL_MCP_BUILD__: false,
+    }),
+    new Webpack.SourceMapDevToolPlugin({
+      filename: '[file].map',
+      noSources: !__DEV__,
+      // https://github.com/webpack/webpack/issues/3603#issuecomment-1743147144
+      moduleFilenameTemplate(info) {
+        const {absoluteResourcePath, namespace, resourcePath} = info;
+
+        if (isAbsolute(absoluteResourcePath)) {
+          return relative(__dirname + '/build', absoluteResourcePath);
+        }
+
+        // Mimic Webpack's default behavior:
+        return `webpack://${namespace}/${resourcePath}`;
+      },
+    }),
+    new SourceMapIgnoreListPlugin({
+      shouldIgnoreSource: () => !__DEV__,
+    }),
+  ],
+  module: {
+    rules: [
+      {
+        test: /\.js$/,
+        loader: 'babel-loader',
+        options: {
+          configFile: resolve(
+            __dirname,
+            '..',
+            'react-devtools-shared',
+            'babel.config.js',
+          ),
+        },
+      },
+    ],
+  },
+};

packages/react-devtools-extensions/webpack.config.js

@@ -6,7 +6,6 @@ const TerserPlugin = require('terser-webpack-plugin');
 const {GITHUB_URL, getVersionString} = require('./utils');
 const {resolveFeatureFlags} = require('react-devtools-shared/buildUtils');
 const SourceMapIgnoreListPlugin = require('react-devtools-shared/SourceMapIgnoreListPlugin');
-const {StatsWriterPlugin} = require('webpack-stats-plugin');
 
 const NODE_ENV = process.env.NODE_ENV;
 if (!NODE_ENV) {
@@ -38,21 +37,6 @@ const IS_INTERNAL_MCP_BUILD = process.env.IS_INTERNAL_MCP_BUILD === 'true';
 
 const featureFlagTarget = process.env.FEATURE_FLAG_TARGET || 'extension-oss';
 
-let statsFileName = `webpack-stats.${featureFlagTarget}.${__DEV__ ? 'development' : 'production'}`;
-if (IS_CHROME) {
-  statsFileName += `.chrome`;
-}
-if (IS_FIREFOX) {
-  statsFileName += `.firefox`;
-}
-if (IS_EDGE) {
-  statsFileName += `.edge`;
-}
-if (IS_INTERNAL_MCP_BUILD) {
-  statsFileName += `.mcp`;
-}
-statsFileName += '.json';
-
 const babelOptions = {
   configFile: resolve(
     __dirname,
@@ -66,7 +50,6 @@ module.exports = {
   mode: __DEV__ ? 'development' : 'production',
   devtool: false,
   entry: {
-    backend: './src/backend.js',
     background: './src/background/index.js',
     backendManager: './src/contentScripts/backendManager.js',
     fileFetcher: './src/contentScripts/fileFetcher.js',
@@ -80,14 +63,7 @@ module.exports = {
   output: {
     path: __dirname + '/build',
     publicPath: '/build/',
-    filename: chunkData => {
-      switch (chunkData.chunk.name) {
-        case 'backend':
-          return 'react_devtools_backend_compact.js';
-        default:
-          return '[name].js';
-      }
-    },
+    filename: '[name].js',
     chunkFilename: '[name].chunk.js',
   },
   node: {
@@ -127,6 +103,7 @@ module.exports = {
   plugins: [
     new Webpack.ProvidePlugin({
       process: 'process/browser',
+      Buffer: ['buffer', 'Buffer'],
     }),
     new Webpack.DefinePlugin({
       __DEV__,
@@ -149,7 +126,7 @@ module.exports = {
     }),
     new Webpack.SourceMapDevToolPlugin({
       filename: '[file].map',
-      include: ['installHook.js', 'react_devtools_backend_compact.js'],
+      include: 'installHook.js',
       noSources: !__DEV__,
       // https://github.com/webpack/webpack/issues/3603#issuecomment-1743147144
       moduleFilenameTemplate(info) {
@@ -171,7 +148,6 @@ module.exports = {
         }
 
         const contentScriptNamesToIgnoreList = [
-          'react_devtools_backend_compact',
           // This is where we override console
           'installHook',
         ];
@@ -237,10 +213,6 @@ module.exports = {
         );
       },
     },
-    new StatsWriterPlugin({
-      stats: 'verbose',
-      filename: statsFileName,
-    }),
   ],
   module: {
     defaultRules: [
@@ -261,7 +233,7 @@ module.exports = {
           {
             loader: 'workerize-loader',
             options: {
-              inline: false,
+              inline: true,
               name: '[name]',
             },
           },

packages/react-devtools-fusebox/webpack.config.frontend.js

@@ -74,6 +74,7 @@ module.exports = {
     new MiniCssExtractPlugin(),
     new Webpack.ProvidePlugin({
       process: 'process/browser',
+      Buffer: ['buffer', 'Buffer'],
     }),
     new Webpack.DefinePlugin({
       __DEV__,
@@ -101,7 +102,6 @@ module.exports = {
           {
             loader: 'workerize-loader',
             options: {
-              // Workers would have to be exposed on a public path in order to outline them.
               inline: true,
               name: '[name]',
             },

packages/react-devtools-inline/__tests__/__e2e__/components.test.js

@@ -93,9 +93,7 @@ test.describe('Components', () => {
 
         const name = isEditable.name
           ? existingNameElements[0].value
-          : existingNameElements[0].innerText
-              // remove trailing colon
-              .slice(0, -1);
+          : existingNameElements[0].innerText;
         const value = isEditable.value
           ? existingValueElements[0].value
           : existingValueElements[0].innerText;

packages/react-devtools-inline/webpack.config.js

@@ -65,6 +65,7 @@ module.exports = {
   plugins: [
     new Webpack.ProvidePlugin({
       process: 'process/browser',
+      Buffer: ['buffer', 'Buffer'],
     }),
     new Webpack.DefinePlugin({
       __DEV__,
@@ -93,7 +94,6 @@ module.exports = {
           {
             loader: 'workerize-loader',
             options: {
-              // Workers would have to be exposed on a public path in order to outline them.
               inline: true,
               name: '[name]',
             },

packages/react-devtools-shared/package.json

@@ -10,11 +10,11 @@
     "react-dom-15": "npm:react-dom@^15"
   },
   "dependencies": {
-    "@babel/parser": "^7.28.3",
-    "@babel/preset-env": "7.26.9",
+    "@babel/parser": "^7.12.5",
+    "@babel/preset-env": "^7.11.0",
     "@babel/preset-flow": "^7.10.4",
     "@babel/runtime": "^7.11.2",
-    "@babel/traverse": "^7.28.3",
+    "@babel/traverse": "^7.12.5",
     "@reach/menu-button": "^0.16.1",
     "@reach/tooltip": "^0.16.0",
     "clipboard-js": "^0.3.6",