[playground] Decouple playground from compiler

Currently the playground is setup as a linked workspace for the compiler which complicates our yarn workspace setup and means that snap can sometimes pull in a different version of react than was otherwise specified. There's no real reason to have these workspaces combined so let's split them up. ghstack-source-id: 56ab064b2f Pull Request resolved: https://github.com/facebook/react/pull/31081
2025-12-06 00:20:04 +01:00 · 2024-09-27 15:15:15 -04:00 · 2024-09-27 15:15:15 -04:00 · db240980a3
commit db240980a3
parent 3edc000d77
22 changed files with 4137 additions and 2647 deletions
--- a/.github/workflows/compiler_playground.yml
+++ b/.github/workflows/compiler_playground.yml
@ -15,7 +15,7 @@ env:

 defaults:
  run:
-    working-directory: compiler
+    working-directory: compiler/apps/playground

 jobs:
  playground:
@ -27,13 +27,17 @@ jobs:
        with:
          node-version-file: '.nvmrc'
          cache: yarn
-          cache-dependency-path: compiler/yarn.lock
+          cache-dependency-path: compiler/**/yarn.lock
      - name: Restore cached node_modules
        uses: actions/cache@v4
        id: node_modules
        with:
          path: "**/node_modules"
          key: ${{ runner.arch }}-${{ runner.os }}-modules-${{ hashFiles('compiler/**/yarn.lock') }}
-      - run: yarn install --frozen-lockfile
+      - name: yarn install compiler
+        run: yarn install --frozen-lockfile
+        working-directory: compiler
+      - name: yarn install playground
+        run: yarn install --frozen-lockfile
      - run: npx playwright install --with-deps chromium
-      - run: yarn workspace playground test
+      - run: yarn test
--- a/compiler/apps/playground/app/layout.tsx
+++ b/compiler/apps/playground/app/layout.tsx
@ -7,7 +7,11 @@

 import '../styles/globals.css';

-export default function RootLayout({children}: {children: React.ReactNode}) {
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}): JSX.Element {
  'use no memo';
  return (
    <html lang="en">
--- a/compiler/apps/playground/app/page.tsx
+++ b/compiler/apps/playground/app/page.tsx
@ -11,7 +11,7 @@ import {SnackbarProvider} from 'notistack';
 import {Editor, Header, StoreProvider} from '../components';
 import MessageSnackbar from '../components/Message';

-export default function Hoot() {
+export default function Page(): JSX.Element {
  return (
    <StoreProvider>
      <SnackbarProvider
--- a/compiler/apps/playground/components/Editor/EditorImpl.tsx
+++ b/compiler/apps/playground/components/Editor/EditorImpl.tsx
@ -43,7 +43,7 @@ import {
 import {printFunctionWithOutlined} from 'babel-plugin-react-compiler/src/HIR/PrintHIR';
 import {printReactiveFunctionWithOutlined} from 'babel-plugin-react-compiler/src/ReactiveScopes/PrintReactiveFunction';

-function parseInput(input: string, language: 'flow' | 'typescript') {
+function parseInput(input: string, language: 'flow' | 'typescript'): any {
  // Extract the first line to quickly check for custom test directives
  if (language === 'flow') {
    return HermesParser.parse(input, {
@ -181,9 +181,9 @@ function getFunctionIdentifier(
 }

 function compile(source: string): [CompilerOutput, 'flow' | 'typescript'] {
-  const results = new Map<string, PrintedCompilerPipelineValue[]>();
+  const results = new Map<string, Array<PrintedCompilerPipelineValue>>();
  const error = new CompilerError();
-  const upsert = (result: PrintedCompilerPipelineValue) => {
+  const upsert: (result: PrintedCompilerPipelineValue) => void = result => {
    const entry = results.get(result.name);
    if (Array.isArray(entry)) {
      entry.push(result);
@ -273,13 +273,17 @@ function compile(source: string): [CompilerOutput, 'flow' | 'typescript'] {
      }
    }
  } catch (err) {
-    // error might be an invariant violation or other runtime error
-    // (i.e. object shape that is not CompilerError)
+    /**
+     * 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.details.push(...err.details);
    } else {
-      // Handle unexpected failures by logging (to get a stack trace)
-      // and reporting
+      /**
+       * Handle unexpected failures by logging (to get a stack trace)
+       * and reporting
+       */
      console.error(err);
      error.details.push(
        new CompilerErrorDetail({
@ -297,7 +301,7 @@ function compile(source: string): [CompilerOutput, 'flow' | 'typescript'] {
  return [{kind: 'ok', results}, language];
 }

-export default function Editor() {
+export default function Editor(): JSX.Element {
  const store = useStore();
  const deferredStore = useDeferredValue(store);
  const dispatchStore = useStoreDispatch();
--- a/compiler/apps/playground/components/Editor/Input.tsx
+++ b/compiler/apps/playground/components/Editor/Input.tsx
@ -15,18 +15,17 @@ import {useEffect, useState} from 'react';
 import {renderReactCompilerMarkers} from '../../lib/reactCompilerMonacoDiagnostics';
 import {useStore, useStoreDispatch} from '../StoreContext';
 import {monacoOptions} from './monacoOptions';
-// TODO: Make TS recognize .d.ts files, in addition to loading them with webpack.
-// @ts-ignore
+// @ts-expect-error TODO: Make TS recognize .d.ts files, in addition to loading them with webpack.
 import React$Types from '../../node_modules/@types/react/index.d.ts';

 loader.config({monaco});

 type Props = {
-  errors: CompilerErrorDetail[];
+  errors: Array<CompilerErrorDetail>;
  language: 'flow' | 'typescript';
 };

-export default function Input({errors, language}: Props) {
+export default function Input({errors, language}: Props): JSX.Element {
  const [monaco, setMonaco] = useState<Monaco | null>(null);
  const store = useStore();
  const dispatchStore = useStoreDispatch();
@ -38,18 +37,19 @@ export default function Input({errors, language}: Props) {
    const model = monaco.editor.getModel(uri);
    invariant(model, 'Model must exist for the selected input file.');
    renderReactCompilerMarkers({monaco, model, details: errors});
-    // N.B. that `tabSize` is a model property, not an editor property.
-    // So, the tab size has to be set per model.
+    /**
+     * 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]);

-  const flowDiagnosticDisable = [
-    7028 /* unused label */, 6133 /* var declared but not read */,
-  ];
  useEffect(() => {
-    // Ignore "can only be used in TypeScript files." errors, since
-    // we want to support syntax highlighting for Flow (*.js) files
-    // and Flow is not a built-in language.
+    /**
+     * Ignore "can only be used in TypeScript files." errors, since
+     * we want to support syntax highlighting for Flow (*.js) files
+     * and Flow is not a built-in language.
+     */
    if (!monaco) return;
    monaco.languages.typescript.javascriptDefaults.setDiagnosticsOptions({
      diagnosticCodesToIgnore: [
@ -64,7 +64,9 @@ export default function Input({errors, language}: Props) {
        8011,
        8012,
        8013,
-        ...(language === 'flow' ? flowDiagnosticDisable : []),
+        ...(language === 'flow'
+          ? [7028 /* unused label */, 6133 /* var declared but not read */]
+          : []),
      ],
      noSemanticValidation: true,
      // Monaco can't validate Flow component syntax
@ -72,7 +74,7 @@ export default function Input({errors, language}: Props) {
    });
  }, [monaco, language]);

-  const handleChange = (value: string | undefined) => {
+  const handleChange: (value: string | undefined) => void = value => {
    if (!value) return;

    dispatchStore({
@ -83,7 +85,10 @@ export default function Input({errors, language}: Props) {
    });
  };

-  const handleMount = (_: editor.IStandaloneCodeEditor, monaco: Monaco) => {
+  const handleMount: (
+    _: editor.IStandaloneCodeEditor,
+    monaco: Monaco,
+  ) => void = (_, monaco) => {
    setMonaco(monaco);

    const tscOptions = {
@ -111,10 +116,12 @@ export default function Input({errors, language}: Props) {
    monaco.languages.typescript.javascriptDefaults.addExtraLib(...reactLib);
    monaco.languages.typescript.typescriptDefaults.addExtraLib(...reactLib);

-    // Remeasure the font in case the custom font is loaded only after
-    // Monaco Editor is mounted.
-    // N.B. that this applies also to the output editor as it seems
-    // Monaco Editor instances share the same font config.
+    /**
+     * Remeasure the font in case the custom font is loaded only after
+     * Monaco Editor is mounted.
+     * N.B. that this applies also to the output editor as it seems
+     * Monaco Editor instances share the same font config.
+     */
    document.fonts.ready.then(() => {
      monaco.editor.remeasureFonts();
    });
@ -125,14 +132,18 @@ export default function Input({errors, language}: Props) {
      <Resizable
        minWidth={650}
        enable={{right: true}}
-        // Restrict MonacoEditor's height, since the config autoLayout:true
-        // will grow the editor to fit within parent element
+        /**
+         * 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.
+          /**
+           * .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}
--- a/compiler/apps/playground/components/Editor/Output.tsx
+++ b/compiler/apps/playground/components/Editor/Output.tsx
@ -17,7 +17,7 @@ import {type CompilerError} from 'babel-plugin-react-compiler/src';
 import parserBabel from 'prettier/plugins/babel';
 import * as prettierPluginEstree from 'prettier/plugins/estree';
 import * as prettier from 'prettier/standalone';
-import {memo, useEffect, useState} from 'react';
+import {memo, ReactNode, useEffect, useState} from 'react';
 import {type Store} from '../../lib/stores';
 import TabbedWindow from '../TabbedWindow';
 import {monacoOptions} from './monacoOptions';
@ -42,10 +42,10 @@ export type PrintedCompilerPipelineValue =
  | {kind: 'debug'; name: string; fnName: string | null; value: string};

 export type CompilerOutput =
-  | {kind: 'ok'; results: Map<string, PrintedCompilerPipelineValue[]>}
+  | {kind: 'ok'; results: Map<string, Array<PrintedCompilerPipelineValue>>}
  | {
      kind: 'err';
-      results: Map<string, PrintedCompilerPipelineValue[]>;
+      results: Map<string, Array<PrintedCompilerPipelineValue>>;
      error: CompilerError;
    };

@ -54,7 +54,10 @@ type Props = {
  compilerOutput: CompilerOutput;
 };

-async function tabify(source: string, compilerOutput: CompilerOutput) {
+async function tabify(
+  source: string,
+  compilerOutput: CompilerOutput,
+): Promise<Map<string, ReactNode>> {
  const tabs = new Map<string, React.ReactNode>();
  const reorderedTabs = new Map<string, React.ReactNode>();
  const concattedResults = new Map<string, string>();
@ -112,8 +115,10 @@ async function tabify(source: string, compilerOutput: CompilerOutput) {
  }
  // Ensure that JS and the JS source map come first
  if (topLevelFnDecls.length > 0) {
-    // Make a synthetic Program so we can have a single AST with all the top level
-    // FunctionDeclarations
+    /**
+     * Make a synthetic Program so we can have a single AST with all the top level
+     * FunctionDeclarations
+     */
    const ast = t.program(topLevelFnDecls);
    const {code, sourceMapUrl} = await codegen(ast, source);
    reorderedTabs.set(
@ -175,7 +180,7 @@ function getSourceMapUrl(code: string, map: string): string | null {
  )}`;
 }

-function Output({store, compilerOutput}: Props) {
+function Output({store, compilerOutput}: Props): JSX.Element {
  const [tabsOpen, setTabsOpen] = useState<Set<string>>(() => new Set(['JS']));
  const [tabs, setTabs] = useState<Map<string, React.ReactNode>>(
    () => new Map(),
@ -236,11 +241,13 @@ function TextTabContent({
  output: string;
  diff: string | null;
  showInfoPanel: boolean;
-}) {
+}): JSX.Element {
  const [diffMode, setDiffMode] = useState(false);
  return (
-    // Restrict MonacoEditor's height, since the config autoLayout:true
-    // will grow the editor to fit within parent element
+    /**
+     * Restrict MonacoEditor's height, since the config autoLayout:true
+     * will grow the editor to fit within parent element
+     */
    <div className="w-full h-monaco_small sm:h-monaco">
      {showInfoPanel ? (
        <div className="flex items-center gap-1 bg-amber-50 p-2">
--- a/compiler/apps/playground/components/Editor/index.tsx
+++ b/compiler/apps/playground/components/Editor/index.tsx
@ -7,8 +7,10 @@

 import dynamic from 'next/dynamic';

-// monaco-editor is currently not compatible with ssr
-// https://github.com/vercel/next.js/issues/31692
+/**
+ * monaco-editor is currently not compatible with ssr
+ * https://github.com/vercel/next.js/issues/31692
+ */
 const Editor = dynamic(() => import('./EditorImpl'), {
  ssr: false,
 });
--- a/compiler/apps/playground/components/Header.tsx
+++ b/compiler/apps/playground/components/Header.tsx
@ -16,26 +16,26 @@ import {IconGitHub} from './Icons/IconGitHub';
 import Logo from './Logo';
 import {useStoreDispatch} from './StoreContext';

-export default function Header() {
+export default function Header(): JSX.Element {
  const [showCheck, setShowCheck] = useState(false);
  const dispatchStore = useStoreDispatch();
  const {enqueueSnackbar, closeSnackbar} = useSnackbar();

-  const handleReset = () => {
+  const handleReset: () => void = () => {
    if (confirm('Are you sure you want to reset the playground?')) {
-      /*
-        Close open snackbars if any. This is necessary because when displaying
-        outputs (Preview or not), we only close previous snackbars if we received
-        new messages, which is needed in order to display "Bad URL" or success
-        messages when loading Playground for the first time. Otherwise, messages
-        such as "Bad URL" will be closed by the outputs calling `closeSnackbar`.
-      */
+      /**
+       * Close open snackbars if any. This is necessary because when displaying
+       * outputs (Preview or not), we only close previous snackbars if we received
+       * new messages, which is needed in order to display "Bad URL" or success
+       * messages when loading Playground for the first time. Otherwise, messages
+       * such as "Bad URL" will be closed by the outputs calling `closeSnackbar`.
+       */
      closeSnackbar();
      dispatchStore({type: 'setStore', payload: {store: defaultStore}});
    }
  };

-  const handleShare = () => {
+  const handleShare: () => void = () => {
    navigator.clipboard.writeText(location.href).then(() => {
      enqueueSnackbar('URL copied to clipboard');
      setShowCheck(true);
--- a/compiler/apps/playground/components/Logo.tsx
+++ b/compiler/apps/playground/components/Logo.tsx
@ -7,7 +7,7 @@

 // https://github.com/reactjs/reactjs.org/blob/main/beta/src/components/Logo.tsx

-export default function Logo(props: JSX.IntrinsicElements['svg']) {
+export default function Logo(props: JSX.IntrinsicElements['svg']): JSX.Element {
  return (
    <svg
      viewBox="0 0 410 369"
--- a/compiler/apps/playground/components/StoreContext.tsx
+++ b/compiler/apps/playground/components/StoreContext.tsx
@ -29,7 +29,7 @@ export const useStoreDispatch = StoreDispatchContext.useContext;
 /**
 * Make Store and dispatch function available to all sub-components in children.
 */
-export function StoreProvider({children}: {children: ReactNode}) {
+export function StoreProvider({children}: {children: ReactNode}): JSX.Element {
  const [store, dispatch] = useReducer(storeReducer, emptyStore);

  return (
--- a/compiler/apps/playground/lib/createContext.ts
+++ b/compiler/apps/playground/lib/createContext.ts
@ -23,10 +23,13 @@ import React from 'react';
 * Instead, it throws an error when `useContext` is not called within a
 * Provider with a value.
 */
-export default function createContext<T>() {
+export default function createContext<T>(): {
+  useContext: () => NonNullable<T>;
+  Provider: React.Provider<T | null>;
+} {
  const context = React.createContext<T | null>(null);

-  function useContext() {
+  function useContext(): NonNullable<T> {
    const c = React.useContext(context);
    if (!c)
      throw new Error('useContext must be within a Provider with a value');
--- a/compiler/apps/playground/lib/reactCompilerMonacoDiagnostics.ts
+++ b/compiler/apps/playground/lib/reactCompilerMonacoDiagnostics.ts
@ -46,9 +46,9 @@ function mapReactCompilerDiagnosticToMonacoMarker(
 type ReactCompilerMarkerConfig = {
  monaco: Monaco;
  model: editor.ITextModel;
-  details: CompilerErrorDetail[];
+  details: Array<CompilerErrorDetail>;
 };
-let decorations: string[] = [];
+let decorations: Array<string> = [];
 export function renderReactCompilerMarkers({
  monaco,
  model,
--- a/compiler/apps/playground/lib/stores/store.ts
+++ b/compiler/apps/playground/lib/stores/store.ts
@ -28,7 +28,7 @@ export function decodeStore(hash: string): Store {
 /**
 * Serialize, encode, and save @param store to localStorage and update URL.
 */
-export function saveStore(store: Store) {
+export function saveStore(store: Store): void {
  const hash = encodeStore(store);
  localStorage.setItem('playgroundStore', hash);
  history.replaceState({}, '', `#${hash}`);
@ -56,8 +56,10 @@ export function initStoreFromUrlOrLocalStorage(): Store {
  const encodedSourceFromLocal = localStorage.getItem('playgroundStore');
  const encodedSource = encodedSourceFromUrl || encodedSourceFromLocal;

-  // No data in the URL and no data in the localStorage to fallback to.
-  // Initialize with the default store.
+  /**
+   * No data in the URL and no data in the localStorage to fallback to.
+   * Initialize with the default store.
+   */
  if (!encodedSource) return defaultStore;

  const raw = decodeStore(encodedSource);
--- a/compiler/apps/playground/package.json
+++ b/compiler/apps/playground/package.json
@ -3,24 +3,27 @@
  "version": "0.1.0",
  "private": true,
  "scripts": {
-    "dev": "NODE_ENV=development next dev",
-    "build": "next build && node ./scripts/downloadFonts.js",
-    "vercel-build": "yarn workspaces run build",
+    "dev": "cd ../.. && concurrently --kill-others -n compiler,runtime,playground \"yarn workspace babel-plugin-react-compiler run build --watch\" \"yarn workspace react-compiler-runtime run build --watch\" \"wait-on packages/babel-plugin-react-compiler/dist/index.js && cd apps/playground && NODE_ENV=development next dev\"",
+    "build:compiler": "cd ../.. && concurrently -n compiler,runtime \"yarn workspace babel-plugin-react-compiler run build\" \"yarn workspace react-compiler-runtime run build\"",
+    "build": "yarn build:compiler && next build",
+    "postbuild": "node ./scripts/downloadFonts.js",
+    "postinstall": "./scripts/link-compiler.sh",
+    "vercel-build": "yarn build",
    "start": "next start",
    "lint": "next lint",
    "test": "playwright test"
  },
  "dependencies": {
-    "@babel/core": "^7.19.1",
-    "@babel/generator": "^7.19.1",
-    "@babel/parser": "^7.19.1",
-    "@babel/plugin-syntax-typescript": "^7.18.6",
+    "@babel/core": "^7.18.9",
+    "@babel/generator": "^7.18.9",
+    "@babel/parser": "^7.18.9",
+    "@babel/plugin-syntax-typescript": "^7.18.9",
    "@babel/plugin-transform-block-scoping": "^7.18.9",
-    "@babel/plugin-transform-modules-commonjs": "^7.18.6",
-    "@babel/preset-react": "^7.18.6",
-    "@babel/preset-typescript": "^7.18.6",
-    "@babel/traverse": "^7.19.1",
-    "@babel/types": "^7.19.0",
+    "@babel/plugin-transform-modules-commonjs": "^7.18.9",
+    "@babel/preset-react": "^7.18.9",
+    "@babel/preset-typescript": "^7.18.9",
+    "@babel/traverse": "^7.18.9",
+    "@babel/types": "7.18.9",
    "@heroicons/react": "^1.0.6",
    "@monaco-editor/react": "^4.4.6",
    "@playwright/test": "^1.42.1",
@ -36,25 +39,23 @@
    "prettier": "^3.3.3",
    "pretty-format": "^29.3.1",
    "re-resizable": "^6.9.16",
-    "react": "18.2.0",
+    "react": "18.3.1",
    "react-compiler-runtime": "*",
-    "react-dom": "18.2.0"
+    "react-dom": "18.3.1"
  },
  "devDependencies": {
    "@types/node": "18.11.9",
-    "@types/react": "18.0.25",
-    "@types/react-dom": "18.0.9",
+    "@types/react": "18.3.9",
+    "@types/react-dom": "18.3.0",
    "autoprefixer": "^10.4.13",
    "clsx": "^1.2.1",
+    "concurrently": "^7.4.0",
    "eslint": "^8.28.0",
    "eslint-config-next": "^13.5.6",
    "hermes-parser": "^0.22.0",
    "monaco-editor-webpack-plugin": "^7.1.0",
    "postcss": "^8.4.31",
-    "tailwindcss": "^3.2.4"
-  },
-  "resolutions": {
-    "./**/@babel/parser": "7.7.4",
-    "./**/@babel/types": "7.7.4"
+    "tailwindcss": "^3.2.4",
+    "wait-on": "^7.2.0"
  }
 }
--- a/compiler/apps/playground/playwright.config.js
+++ b/compiler/apps/playground/playwright.config.js
@ -30,8 +30,7 @@ export default defineConfig({
  // Run your local dev server before starting the tests:
  // https://playwright.dev/docs/test-advanced#launching-a-development-web-server-during-the-tests
  webServer: {
-    command:
-      'yarn workspace babel-plugin-react-compiler build && yarn workspace react-compiler-runtime build && yarn dev',
+    command: 'yarn dev',
    url: baseURL,
    timeout: 300 * 1000,
    reuseExistingServer: !process.env.CI,
--- a/compiler/apps/playground/scripts/link-compiler.sh
+++ b/compiler/apps/playground/scripts/link-compiler.sh
@ -0,0 +1,15 @@
+#!/usr/bin/env bash
+# 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.
+
+set -eo pipefail
+
+HERE=$(pwd)
+
+cd ../../packages/react-compiler-runtime && yarn --silent link && cd $HERE
+cd ../../packages/babel-plugin-react-compiler && yarn --silent link && cd $HERE
+
+yarn --silent link babel-plugin-react-compiler
+yarn --silent link react-compiler-runtime
--- a/compiler/apps/playground/tsconfig.json
+++ b/compiler/apps/playground/tsconfig.json
@ -31,6 +31,7 @@
    ".next/types/**/*.ts"
  ],
  "exclude": [
-    "node_modules"
+    "node_modules",
+    "../../../**"
  ]
 }
--- a/compiler/apps/playground/yarn.lock
+++ b/compiler/apps/playground/yarn.lock
--- a/compiler/package.json
+++ b/compiler/package.json
@ -2,12 +2,7 @@
  "private": true,
  "workspaces": {
    "packages": [
-      "packages/*",
-      "apps/*"
-    ],
-    "nohoist": [
-      "**/next",
-      "**/next/**"
+      "packages/*"
    ]
  },
  "repository": {
@ -20,11 +15,11 @@
    "start": "yarn workspace playground run start",
    "next": "yarn workspace playground run dev",
    "build": "yarn workspaces run build",
-    "dev": "concurrently --kill-others -n compiler,runtime,playground \"yarn workspace babel-plugin-react-compiler run build --watch\" \"yarn workspace react-compiler-runtime run build --watch\" \"wait-on packages/babel-plugin-react-compiler/dist/index.js && yarn workspace playground run dev\"",
+    "dev": "echo 'DEPRECATED: use `cd apps/playground && yarn dev` instead!' && sleep 5 && cd apps/playground && yarn dev",
    "test": "yarn workspaces run test",
    "snap": "yarn workspace babel-plugin-react-compiler run snap",
    "snap:build": "yarn workspace snap run build",
-    "postinstall": "perl -p -i -e 's/react\\.element/react.transitional.element/' packages/snap/node_modules/fbt/lib/FbtReactUtil.js && perl -p -i -e 's/didWarnAboutUsingAct = false;/didWarnAboutUsingAct = true;/' packages/babel-plugin-react-compiler/node_modules/react-dom/cjs/react-dom-test-utils.development.js",
+    "postinstall": "perl -p -i -e 's/react\\.element/react.transitional.element/' node_modules/fbt/lib/FbtReactUtil.js && perl -p -i -e 's/didWarnAboutUsingAct = false;/didWarnAboutUsingAct = true;/' node_modules/react-dom/cjs/react-dom-test-utils.development.js",
    "npm:publish": "node scripts/release/publish"
  },
  "dependencies": {
@ -39,6 +34,7 @@
    "@tsconfig/strictest": "^2.0.5",
    "concurrently": "^7.4.0",
    "folder-hash": "^4.0.4",
+    "object-assign": "^4.1.1",
    "ora": "5.4.1",
    "prettier": "^3.3.3",
    "prettier-plugin-hermes-parser": "^0.23.0",
--- a/compiler/packages/babel-plugin-react-compiler/package.json
+++ b/compiler/packages/babel-plugin-react-compiler/package.json
@ -41,12 +41,12 @@
    "@types/invariant": "^2.2.35",
    "@types/jest": "^29.0.3",
    "@types/node": "^18.7.18",
-    "@typescript-eslint/eslint-plugin": "^7.4.0",
-    "@typescript-eslint/parser": "^7.4.0",
+    "@typescript-eslint/eslint-plugin": "^8.7.0",
+    "@typescript-eslint/parser": "^8.7.0",
    "babel-jest": "^29.0.3",
    "babel-plugin-fbt": "^1.0.0",
    "babel-plugin-fbt-runtime": "^1.0.0",
-    "eslint": "8.27.0",
+    "eslint": "^8.57.1",
    "glob": "^7.1.6",
    "jest": "^29.0.3",
    "jest-environment-jsdom": "^29.0.3",
--- a/compiler/packages/snap/package.json
+++ b/compiler/packages/snap/package.json
@ -28,7 +28,7 @@
    "babel-plugin-idx": "^3.0.3",
    "babel-plugin-syntax-hermes-parser": "^0.15.1",
    "chalk": "4",
-    "fbt": "^1.0.0",
+    "fbt": "^1.0.2",
    "glob": "^10.3.10",
    "hermes-parser": "^0.19.1",
    "jsdom": "^22.1.0",
@ -50,6 +50,7 @@
    "@types/node": "^18.7.18",
    "@typescript-eslint/eslint-plugin": "^7.4.0",
    "@typescript-eslint/parser": "^7.4.0",
+    "object-assign": "^4.1.1",
    "rimraf": "^3.0.2"
  },
  "resolutions": {
--- a/compiler/yarn.lock
+++ b/compiler/yarn.lock