diff --git a/app/.env.example b/app/.env.example index 7bdb11e92e5..d8184d802b3 100644 --- a/app/.env.example +++ b/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_ENABLE_REACT_COMPILER=True \ No newline at end of file diff --git a/app/README.md b/app/README.md index 74417f3d92f..cbc827f01d8 100644 --- a/app/README.md +++ b/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_ENABLE_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: diff --git a/app/package.json b/app/package.json index ba811259c99..70d829acad8 100644 --- a/app/package.json +++ b/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", diff --git a/app/pnpm-lock.yaml b/app/pnpm-lock.yaml index b2232153daf..f631f8a0453 100644 --- a/app/pnpm-lock.yaml +++ b/app/pnpm-lock.yaml @@ -268,6 +268,9 @@ importers: '@vitejs/plugin-react': specifier: ^4.7.0 version: 4.7.0(vite@6.4.1(@types/node@22.17.0)(jiti@2.6.1)(yaml@2.8.0)) + babel-plugin-react-compiler: + specifier: 1.0.0 + version: 1.0.0 babel-plugin-relay: specifier: ^20.1.1 version: 20.1.1 @@ -430,6 +433,10 @@ packages: resolution: {integrity: sha512-D2hP9eA+Sqx1kBZgzxZh0y1trbuU+JoDkiEwqhQ36nodYqJwyEIhPSdMNd7lOm/4io72luTPWH20Yda0xOuUow==} engines: {node: '>=6.9.0'} + '@babel/helper-validator-identifier@7.28.5': + resolution: {integrity: sha512-qSs4ifwzKJSV39ucNjsvc6WVHs6b7S03sOh2OcHF9UHfVPqWWALUsNUVzhSBiItjRZoLHx7nIarVjqKVusUZ1Q==} + engines: {node: '>=6.9.0'} + '@babel/helper-validator-option@7.27.1': resolution: {integrity: sha512-YvjJow9FxbhFFKDSuFnVCe2WxXk1zWc22fFePVNEaWJEu8IrZVlda6N0uHwzZrUM1il7NC9Mlp4MaJYbYd9JSg==} engines: {node: '>=6.9.0'} @@ -475,6 +482,10 @@ packages: resolution: {integrity: sha512-ruv7Ae4J5dUYULmeXw1gmb7rYRz57OWCPM57pHojnLq/3Z1CK2lNSLTCVjxVk1F/TZHwOZZrOWi0ur95BbLxNQ==} engines: {node: '>=6.9.0'} + '@babel/types@7.28.5': + resolution: {integrity: sha512-qQ5m48eI/MFLQ5PxQj4PFaprjyCTLI37ElWMmNs0K8Lk3dVeOdNpB3ks8jc7yM5CDmVC73eMVk/trk3fgmrUpA==} + engines: {node: '>=6.9.0'} + '@chromatic-com/storybook@3.2.7': resolution: {integrity: sha512-fCGhk4cd3VA8RNg55MZL5CScdHqljsQcL9g6Ss7YuobHpSo9yytEWNdgMd5QxAHSPBlLGFHjnSmliM3G/BeBqw==} engines: {node: '>=16.0.0', yarn: '>=1.22.18'} @@ -2451,6 +2462,9 @@ packages: resolution: {integrity: sha512-Cg7TFGpIr01vOQNODXOOaGz2NpCU5gl8x1qJFbb6hbZxR7XrcE2vtbAsTAbJ7/xwJtUuJEw8K8Zr/AE0LHlesg==} engines: {node: '>=10', npm: '>=6'} + babel-plugin-react-compiler@1.0.0: + resolution: {integrity: sha512-Ixm8tFfoKKIPYdCCKYTsqv+Fd4IJ0DQqMyEimo+pxUOMUR9cVPlwTrFt9Avu+3cb6Zp3mAzl+t1MrG2fxxKsxw==} + babel-plugin-relay@20.1.1: resolution: {integrity: sha512-BWlqLPiHbxZTxlyng2rVgsZCwztHNje7H8FR4c+UKy3ErQJBG6BKLr9vUdeR7mAZCH2v0sOAxNhG6zR1FrWjAg==} @@ -5217,7 +5231,7 @@ snapshots: '@babel/helper-module-imports@7.27.1': dependencies: '@babel/traverse': 7.28.0 - '@babel/types': 7.28.2 + '@babel/types': 7.28.5 transitivePeerDependencies: - supports-color @@ -5236,6 +5250,8 @@ snapshots: '@babel/helper-validator-identifier@7.27.1': {} + '@babel/helper-validator-identifier@7.28.5': {} + '@babel/helper-validator-option@7.27.1': {} '@babel/helpers@7.28.2': @@ -5284,6 +5300,11 @@ snapshots: '@babel/helper-string-parser': 7.27.1 '@babel/helper-validator-identifier': 7.27.1 + '@babel/types@7.28.5': + dependencies: + '@babel/helper-string-parser': 7.27.1 + '@babel/helper-validator-identifier': 7.28.5 + '@chromatic-com/storybook@3.2.7(react@19.2.0)(storybook@8.6.14(prettier@3.6.2))': dependencies: chromatic: 11.29.0 @@ -7895,6 +7916,10 @@ snapshots: cosmiconfig: 7.1.0 resolve: 1.22.10 + babel-plugin-react-compiler@1.0.0: + dependencies: + '@babel/types': 7.28.5 + babel-plugin-relay@20.1.1: dependencies: babel-plugin-macros: 2.8.0 diff --git a/app/vite.config.mts b/app/vite.config.mts index ba1aea4ad82..7b1aefffa20 100644 --- a/app/vite.config.mts +++ b/app/vite.config.mts @@ -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(), ];