[compiler][playground] (1/N) Config override panel

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

@@ -0,0 +1,103 @@
+/**
+ * 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 MonacoEditor, {loader, type Monaco} from '@monaco-editor/react';
+import {parseConfigPragmaAsString} from 'babel-plugin-react-compiler';
+import type {editor} from 'monaco-editor';
+import * as monaco from 'monaco-editor';
+import parserBabel from 'prettier/plugins/babel';
+import * as prettierPluginEstree from 'prettier/plugins/estree';
+import * as prettier from 'prettier/standalone';
+import {useState, useEffect} from 'react';
+import {Resizable} from 're-resizable';
+import {useStore} from '../StoreContext';
+import {monacoOptions} from './monacoOptions';
+
+loader.config({monaco});
+
+export default function ConfigEditor(): JSX.Element {
+  const [, setMonaco] = useState<Monaco | null>(null);
+  const store = useStore();
+
+  // Parse string-based override config from pragma comment and format it
+  const [configJavaScript, setConfigJavaScript] = useState('');
+
+  useEffect(() => {
+    const pragma = store.source.substring(0, store.source.indexOf('\n'));
+    const configString = `(${parseConfigPragmaAsString(pragma)})`;
+
+    prettier
+      .format(configString, {
+        semi: true,
+        parser: 'babel-ts',
+        plugins: [parserBabel, prettierPluginEstree],
+      })
+      .then(formatted => {
+        setConfigJavaScript(formatted);
+      })
+      .catch(error => {
+        console.error('Error formatting config:', error);
+        setConfigJavaScript('({})'); // Return empty object if not valid for now
+        //TODO: Add validation and error handling for config
+      });
+    console.log('Config:', configString);
+  }, [store.source]);
+
+  const handleChange: (value: string | undefined) => void = value => {
+    if (!value) return;
+
+    // TODO: Implement sync logic to update pragma comments in the source
+    console.log('Config changed:', value);
+  };
+
+  const handleMount: (
+    _: editor.IStandaloneCodeEditor,
+    monaco: Monaco,
+  ) => void = (_, monaco) => {
+    setMonaco(monaco);
+
+    const uri = monaco.Uri.parse(`file:///config.js`);
+    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={configJavaScript}
+          onMount={handleMount}
+          onChange={handleChange}
+          options={{
+            ...monacoOptions,
+            readOnly: true,
+            lineNumbers: 'off',
+            folding: false,
+            renderLineHighlight: 'none',
+            scrollBeyondLastLine: false,
+            hideCursorInOverviewRuler: true,
+            overviewRulerBorder: false,
+            overviewRulerLanes: 0,
+            fontSize: 12,
+          }}
+        />
+      </Resizable>
+    </div>
+  );
+}

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

@@ -37,6 +37,7 @@ import {
   type Store,
 } from '../../lib/stores';
 import {useStore, useStoreDispatch} from '../StoreContext';
+import ConfigEditor from './ConfigEditor';
 import Input from './Input';
 import {
   CompilerOutput,
@@ -46,6 +47,7 @@ import {
 } 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,
@@ -291,7 +293,13 @@ export default function Editor(): JSX.Element {
     [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();
@@ -328,6 +336,7 @@ export default function Editor(): JSX.Element {
   return (
     <>
       <div className="relative flex basis top-14">
+        {shouldShowConfig && <ConfigEditor />}
         <div className={clsx('relative sm:basis-1/4')}>
           <Input language={language} errors={errors} />
         </div>

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

@@ -182,6 +182,11 @@ export function parseConfigPragmaForTests(
     environment?: PartialEnvironmentConfig;
   },
 ): PluginOptions {
+  const overridePragma = parseConfigPragmaAsString(pragma);
+  if (overridePragma !== '') {
+    return parseConfigStringAsJS(overridePragma, defaults);
+  }
+
   const environment = parseConfigPragmaEnvironmentForTest(
     pragma,
     defaults.environment ?? {},
@@ -217,3 +222,104 @@ 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}`,
+      loc: null,
+      suggestions: null,
+    });
+  }
+
+  console.log('OVERRIDE:', parsedConfig);
+
+  const options: Record<keyof PluginOptions, unknown> = {
+    ...defaultOptions,
+    panicThreshold: 'all_errors',
+    compilationMode: defaults.compilationMode,
+    environment: defaults.environment ?? defaultOptions.environment,
+  };
+
+  // Apply parsed config, merging environment if it exists
+  if (parsedConfig.environment) {
+    const mergedEnvironment = {
+      ...(options.environment as Record<string, unknown>),
+      ...parsedConfig.environment,
+    };
+
+    // Apply complex defaults for environment flags that are set to true
+    const environmentConfig: Partial<Record<keyof EnvironmentConfig, unknown>> =
+      {};
+    for (const [key, value] of Object.entries(mergedEnvironment)) {
+      if (hasOwnProperty(EnvironmentConfigSchema.shape, key)) {
+        if (value === true && key in testComplexConfigDefaults) {
+          environmentConfig[key] = testComplexConfigDefaults[key];
+        } else {
+          environmentConfig[key] = value;
+        }
+      }
+    }
+
+    // Validate environment config
+    const validatedEnvironment =
+      EnvironmentConfigSchema.safeParse(environmentConfig);
+    if (!validatedEnvironment.success) {
+      CompilerError.invariant(false, {
+        reason: 'Invalid environment configuration in config pragma',
+        description: `${fromZodError(validatedEnvironment.error)}`,
+        loc: null,
+        suggestions: null,
+      });
+    }
+
+    if (validatedEnvironment.data.enableResetCacheOnSourceFileChanges == null) {
+      validatedEnvironment.data.enableResetCacheOnSourceFileChanges = false;
+    }
+
+    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 (value === true && key in testComplexPluginOptionDefaults) {
+        options[key] = testComplexPluginOptionDefaults[key];
+      } else 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/index.ts

@@ -48,7 +48,10 @@ export {
   printReactiveFunction,
   printReactiveFunctionWithOutlined,
 } from './ReactiveScopes';
-export {parseConfigPragmaForTests} from './Utils/TestUtils';
+export {
+  parseConfigPragmaForTests,
+  parseConfigPragmaAsString,
+} from './Utils/TestUtils';
 declare global {
   let __DEV__: boolean | null | undefined;
 }