[compiler][playground] (3/N) Config override panel (#34371)

EugeneChoi4 · web-flow · commit de5a1b203e34 · 2025-09-05T10:12:01.000-04:00
## Summary Part 3 of adding a "Config Override" panel to the React compiler playground. Added a button to apply config changes to the Input panel, as well as making the tab collapsible. Added validation for the the PluginOptions type (although comes with a bit more boilerplate) to make it very obvious what the possible config errors could be. Added some toasts for trying to apply broken configs.  ## How did you test this change? https://github.com/user-attachments/assets/63ab8636-396f-45ba-aaa5-4136e62ccccc
diff --git a/compiler/apps/playground/components/Editor/ConfigEditor.tsx b/compiler/apps/playground/components/Editor/ConfigEditor.tsx
@@ -8,94 +8,176 @@
 import MonacoEditor, {loader, type Monaco} from '@monaco-editor/react';
 import type {editor} from 'monaco-editor';
 import * as monaco from 'monaco-editor';
-import {useState} 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 {
+  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(): JSX.Element {
-  const [, setMonaco] = useState<Monaco | null>(null);
+export default function ConfigEditor(): React.ReactElement {
+  const [isExpanded, setIsExpanded] = useState(false);
   const store = useStore();
   const dispatchStore = useStoreDispatch();
+  const {enqueueSnackbar} = useSnackbar();
 
-  const handleChange: (value: string | undefined) => void = async value => {
-    if (value === undefined) return;
+  const toggleExpanded = useCallback(() => {
+    setIsExpanded(prev => !prev);
+  }, []);
 
+  const handleApplyConfig: () => Promise<void> = async () => {
     try {
-      const newPragma = await generateOverridePragmaFromConfig(value);
+      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,
       );
 
-      // Update the store with both the new config and updated source
       dispatchStore({
         type: 'updateFile',
         payload: {
           source: updatedSource,
-          config: value,
-        },
-      });
-    } catch (_) {
-      dispatchStore({
-        type: 'updateFile',
-        payload: {
-          source: store.source,
-          config: value,
+          config: config,
         },
       });
+    } 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: (
     _: editor.IStandaloneCodeEditor,
     monaco: Monaco,
   ) => void = (_, monaco) => {
-    setMonaco(monaco);
+    // Add the babel-plugin-react-compiler type definitions to Monaco
+    monaco.languages.typescript.typescriptDefaults.addExtraLib(
+      //@ts-expect-error - compilerTypeDefs is a string
+      compilerTypeDefs,
+      'file:///node_modules/babel-plugin-react-compiler/dist/index.d.ts',
+    );
+    monaco.languages.typescript.typescriptDefaults.setCompilerOptions({
+      target: monaco.languages.typescript.ScriptTarget.Latest,
+      allowNonTsExtensions: true,
+      moduleResolution: monaco.languages.typescript.ModuleResolutionKind.NodeJs,
+      module: monaco.languages.typescript.ModuleKind.ESNext,
+      noEmit: true,
+      strict: false,
+      esModuleInterop: true,
+      allowSyntheticDefaultImports: true,
+      jsx: monaco.languages.typescript.JsxEmit.React,
+    });
 
-    const uri = monaco.Uri.parse(`file:///config.js`);
+    const uri = monaco.Uri.parse(`file:///config.ts`);
     const model = monaco.editor.getModel(uri);
     if (model) {
       model.updateOptions({tabSize: 2});
     }
   };
 
   return (
-    <div className="relative flex flex-col flex-none border-r border-gray-200">
-      <h2 className="p-4 duration-150 ease-in border-b cursor-default border-grey-200 font-light text-secondary">
-        Config Overrides
-      </h2>
-      <Resizable
-        minWidth={300}
-        maxWidth={600}
-        defaultSize={{width: 350, height: 'auto'}}
-        enable={{right: true}}
-        className="!h-[calc(100vh_-_3.5rem_-_4rem)]">
-        <MonacoEditor
-          path={'config.js'}
-          language={'javascript'}
-          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,
-          }}
-        />
-      </Resizable>
+    <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 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>
   );
 }
diff --git a/compiler/apps/playground/components/Editor/EditorImpl.tsx b/compiler/apps/playground/components/Editor/EditorImpl.tsx
@@ -48,7 +48,6 @@ import {
 import {transformFromAstSync} from '@babel/core';
 import {LoggerEvent} from 'babel-plugin-react-compiler/dist/Entrypoint';
 import {useSearchParams} from 'next/navigation';
-import {parseAndFormatConfig} from '../../lib/configUtils';
 
 function parseInput(
   input: string,
@@ -317,16 +316,11 @@ export default function Editor(): JSX.Element {
       mountStore = defaultStore;
     }
 
-    parseAndFormatConfig(mountStore.source).then(config => {
-      dispatchStore({
-        type: 'setStore',
-        payload: {
-          store: {
-            ...mountStore,
-            config,
-          },
-        },
-      });
+    dispatchStore({
+      type: 'setStore',
+      payload: {
+        store: mountStore,
+      },
     });
   });
 
diff --git a/compiler/apps/playground/lib/configUtils.ts b/compiler/apps/playground/lib/configUtils.ts
@@ -8,16 +8,26 @@
 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 = `(${configString})`;
+    configString = `\
+    import type { PluginOptions } from 'babel-plugin-react-compiler/dist';
+
+    (${configString} satisfies Partial<PluginOptions>)`;
   }
 
   try {
@@ -34,10 +44,10 @@ export async function parseAndFormatConfig(source: string): Promise<string> {
 }
 
 function extractCurlyBracesContent(input: string): string {
-  const startIndex = input.indexOf('{');
+  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');
+    throw new Error('No outer curly braces found in input.');
   }
   return input.slice(startIndex, endIndex + 1);
 }
@@ -49,6 +59,27 @@ function cleanContent(content: string): string {
     .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
  */
@@ -58,6 +89,8 @@ export async function generateOverridePragmaFromConfig(
   const content = extractCurlyBracesContent(formattedConfigString);
   const cleanConfig = cleanContent(content);
 
+  validateConfigAsPluginOptions(cleanConfig);
+
   // Format the config to ensure it's valid
   await prettier.format(`(${cleanConfig})`, {
     semi: false,
diff --git a/compiler/apps/playground/lib/defaultStore.ts b/compiler/apps/playground/lib/defaultStore.ts
@@ -13,9 +13,31 @@ export default function MyApp() {
 }
 `;
 
+export const defaultConfig = `\
+import type { PluginOptions } from 'babel-plugin-react-compiler/dist';
+
+({
+  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 = {
   source: index,
-  config: '',
+  config: defaultConfig,
 };
 
 export const emptyStore: Store = {
diff --git a/compiler/apps/playground/lib/stores/store.ts b/compiler/apps/playground/lib/stores/store.ts
@@ -10,7 +10,7 @@ import {
   compressToEncodedURIComponent,
   decompressFromEncodedURIComponent,
 } from 'lz-string';
-import {defaultStore} from '../defaultStore';
+import {defaultStore, defaultConfig} from '../defaultStore';
 
 /**
  * Global Store for Playground
@@ -68,10 +68,10 @@ export function initStoreFromUrlOrLocalStorage(): Store {
   invariant(isValidStore(raw), 'Invalid Store');
 
   // Add config property if missing for backwards compatibility
-  if (!('config' in raw)) {
+  if (!('config' in raw) || !raw['config']) {
     return {
       ...raw,
-      config: '',
+      config: defaultConfig,
     };
   }
 
diff --git a/compiler/packages/babel-plugin-react-compiler/src/Utils/TestUtils.ts b/compiler/packages/babel-plugin-react-compiler/src/Utils/TestUtils.ts
@@ -253,8 +253,6 @@ function parseConfigStringAsJS(
     });
   }
 
-  console.log('OVERRIDE:', parsedConfig);
-
   const environment = parseConfigPragmaEnvironmentForTest(
     '',
     defaults.environment ?? {},

Original file line number	Diff line number	Diff line change
`@@ -253,8 +253,6 @@ function parseConfigStringAsJS(`
`253`	`253`	`});`
`254`	`254`	`}`
`255`	`255`
`256`		`- console.log('OVERRIDE:', parsedConfig);`
`257`		`-`
`258`	`256`	`const environment = parseConfigPragmaEnvironmentForTest(`
`259`	`257`	`'',`
`260`	`258`	`defaults.environment ?? {},`