feat: react compiler behind a flag

Author: mikeldking

app/.env.example

@@ -6,3 +6,5 @@ export PHOENIX_SMTP_USERNAME=apikey
 export PHOENIX_SMTP_PASSWORD=XXXXXXXXXXXXXXXX
 # Used for running chromatic visual tests on components
 export CHROMATIC_PROJECT_TOKEN=XXXXXXX
+# Use the react-compiler
+export PHOENIX_USE_REACT_COMPILER=True

app/README.md

@@ -30,6 +30,12 @@ Before running the script above you should configure your running environment by
 
 Depending on what flows you are trying to build features for, you may want to adjust the scripts block within the [package.json](./package.json) file so that the server is serving the appropriate fixture data.
 
+### Environment Variables
+
+The following environment variables can be configured in your `.env` file:
+
+- **`PHOENIX_USE_REACT_COMPILER`**: Enable or disable the React Compiler for improved performance. Set to `True` (capital T) to enable, or omit/leave unset to disable. The React Compiler can improve performance but may introduce new errors, so proceed with caution when enabling it.
+
 ### Authentication
 
 For local development, you have two options for authentication:

app/package.json

@@ -92,6 +92,7 @@
     "@types/relay-runtime": "^19.0.3",
     "@types/three": "^0.180.0",
     "@vitejs/plugin-react": "^4.7.0",
+    "babel-plugin-react-compiler": "1.0.0",
     "babel-plugin-relay": "^20.1.1",
     "chromatic": "^11.29.0",
     "cpy-cli": "^5.0.0",
@@ -126,10 +127,10 @@
     "test:watch": "vitest",
     "test:e2e": "playwright test",
     "test:e2e:ui": "playwright test --ui",
-    "dev": "pnpm run dev:server & pnpm run build:static && pnpm run build:relay && vite",
+    "dev": "pnpm run dev:server & pnpm run dev:ui",
     "dev:offline": "pnpm run dev:server:offline & pnpm run build:static && pnpm run build:relay && vite",
     "dev:embeddings": "pnpm run dev:server:embeddings & pnpm run build:static && pnpm run build:relay && vite",
-    "dev:ui": "pnpm run build:static && pnpm run build:relay && vite",
+    "dev:ui": "source ./.env && pnpm run build:static && pnpm run build:relay && vite",
     "dev:server": "source ./.env && uv run --compile --with-requirements=../requirements/dev.txt phoenix --dev serve",
     "dev:server:offline": "python -m phoenix.server.main --dev serve",
     "dev:server:embeddings": "pnpm dev:server --with-fixture=fashion_mnist",

app/pnpm-lock.yaml

@@ -8,12 +8,33 @@ import { defineConfig } from "vite";
 import reactFallbackThrottlePlugin from "vite-plugin-react-fallback-throttle";
 import relay from "vite-plugin-relay";
 
+const useReactCompiler = process.env.PHOENIX_ENABLE_REACT_COMPILER === "True";
+
+if (useReactCompiler) {
+  // eslint-disable-next-line no-console
+  console.log(
+    "🔥 Using React Compiler. This will improve performance but also may introduce new errors. Proceed with caution."
+  );
+} else {
+  // eslint-disable-next-line no-console
+  console.log("⏼ React compiler is disabled.");
+}
 export default defineConfig(() => {
   const plugins = [
     // disable react's built-in 300ms suspense fallback timer
     // without this build plugin we see a 300ms delay on most UI interactions
     reactFallbackThrottlePlugin(),
-    react(),
+    react(
+      useReactCompiler
+        ? {
+            babel: {
+              plugins: [
+                ["babel-plugin-react-compiler", { panicThreshold: "none" }],
+              ],
+            },
+          }
+        : {}
+    ),
     relay,
     lezer(),
   ];