Playground uses new pragma parser, shows config being used

The playground now uses the new pragma parser so it's guaranteed to use the 
right defaults and have consistent parsing with snap/sprout. In addition, we now 
emit a debug event from the compiler which contains pretty-printed environment 
config, making it easy to check which settings are being applied in playground. 

<img width="3008" alt="Screenshot 2023-10-05 at 11 05 58 AM" 
src="https://github.com/facebook/react-forget/assets/6425824/2417f40c-1320-4c39-a661-a4e34e3d69c4">

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

@@ -11,6 +11,7 @@ import * as t from "@babel/types";
 import {
   Effect,
   Hook,
+  parseConfigPragma,
   printHIR,
   printReactiveFunction,
   run,
@@ -108,56 +109,6 @@ const COMMON_HOOKS: Array<[string, Hook]> = [
   ],
 ];
 
-function parsePragma(pragma: string) {
-  let memoizeJsxElements = true;
-  let enableAssumeHooksFollowRulesOfReact = false;
-  let disableAllMemoization = false;
-  let validateRefAccessDuringRender = true;
-  let enableEmitFreeze = null;
-  let validateHooksUsage = true;
-  let validateFrozenLambdas = true;
-  let assertValidMutableRanges = true;
-
-  if (pragma.includes("@memoizeJsxElements false")) {
-    memoizeJsxElements = false;
-  }
-  if (pragma.includes("@enableAssumeHooksFollowRulesOfReact true")) {
-    enableAssumeHooksFollowRulesOfReact = true;
-  }
-  if (pragma.includes("@disableAllMemoization true")) {
-    disableAllMemoization = true;
-  }
-  if (pragma.includes("@validateRefAccessDuringRender false")) {
-    validateRefAccessDuringRender = false;
-  }
-  if (pragma.includes("@enableEmitFreeze")) {
-    enableEmitFreeze = {
-      source: "react-forget-runtime",
-      importSpecifierName: "makeReadOnly",
-    };
-  }
-  if (pragma.includes("@validateHooksUsage false")) {
-    validateHooksUsage = false;
-  }
-  if (pragma.includes("@validateFrozenLambdas false")) {
-    validateHooksUsage = false;
-  }
-  if (pragma.includes("@assertValidMutableRanges false")) {
-    assertValidMutableRanges = false;
-  }
-
-  return {
-    enableAssumeHooksFollowRulesOfReact,
-    disableAllMemoization,
-    memoizeJsxElements,
-    validateHooksUsage,
-    validateRefAccessDuringRender,
-    validateFrozenLambdas,
-    enableEmitFreeze,
-    assertValidMutableRanges,
-  };
-}
-
 function compile(source: string): CompilerOutput {
   const results = new Map<string, PrintedCompilerPipelineValue[]>();
   const upsert = (result: PrintedCompilerPipelineValue) => {
@@ -171,12 +122,12 @@ function compile(source: string): CompilerOutput {
   try {
     // Extract the first line to quickly check for custom test directives
     const pragma = source.substring(0, source.indexOf("\n"));
-    const options = parsePragma(pragma);
+    const config = parseConfigPragma(pragma);
 
     for (const fn of parseFunctions(source)) {
       for (const result of run(fn, {
+        ...config,
         customHooks: new Map([...COMMON_HOOKS]),
-        ...options,
       })) {
         const fnName = fn.node.id?.name ?? null;
         switch (result.kind) {

compiler/packages/babel-plugin-react-forget/src/Entrypoint/Pipeline.ts

@@ -7,6 +7,7 @@
 
 import { NodePath } from "@babel/traverse";
 import * as t from "@babel/types";
+import prettyFormat from "pretty-format";
 import { lowerToForest } from "../Forest";
 import {
   HIRFunction,
@@ -60,6 +61,7 @@ import { eliminateRedundantPhi, enterSSA, leaveSSA } from "../SSA";
 import { inferTypes } from "../TypeInference";
 import {
   logCodegenFunction,
+  logDebug,
   logHIRFunction,
   logReactiveFunction,
 } from "../Utils/logger";
@@ -86,6 +88,11 @@ export function* run(
 ): Generator<CompilerPipelineValue, CodegenFunction> {
   const contextIdentifiers = findContextIdentifiers(func);
   const env = new Environment(config ?? null, contextIdentifiers);
+  yield {
+    kind: "debug",
+    name: "EnvironmentConfig",
+    value: prettyFormat(env.config),
+  };
   const ast = yield* runWithEnvironment(func, env);
   return ast;
 }
@@ -373,6 +380,7 @@ export function log(value: CompilerPipelineValue): CompilerPipelineValue {
       break;
     }
     case "debug": {
+      logDebug(value.name, value.value);
       break;
     }
     default: {

compiler/packages/babel-plugin-react-forget/src/Utils/logger.ts

@@ -21,6 +21,12 @@ export function toggleLogging(enabled: boolean): void {
   ENABLED = enabled;
 }
 
+export function logDebug(step: string, value: string): void {
+  if (ENABLED) {
+    process.stdout.write(`${chalk.gray(step)}:\n${value}\n\n`);
+  }
+}
+
 export function logHIR(step: string, ir: HIR): void {
   if (ENABLED) {
     const printed = printHIR(ir);