From 2b417e2a5203f108ab3a5248332e5cd8dd2f8700 Mon Sep 17 00:00:00 2001
From: Joe Savona <joesavona@fb.com>
Date: Thu, 5 Oct 2023 11:06:56 -0700
Subject: [PATCH] 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">
---
 .../playground/components/Editor/index.tsx    | 55 +------------------
 .../src/Entrypoint/Pipeline.ts                |  8 +++
 .../src/Utils/logger.ts                       |  6 ++
 3 files changed, 17 insertions(+), 52 deletions(-)

diff --git a/compiler/apps/playground/components/Editor/index.tsx b/compiler/apps/playground/components/Editor/index.tsx
index 6154b02edf..f642fcabd2 100644
--- a/compiler/apps/playground/components/Editor/index.tsx
+++ b/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) {
diff --git a/compiler/packages/babel-plugin-react-forget/src/Entrypoint/Pipeline.ts b/compiler/packages/babel-plugin-react-forget/src/Entrypoint/Pipeline.ts
index 772b1a8090..e1086d0e62 100644
--- a/compiler/packages/babel-plugin-react-forget/src/Entrypoint/Pipeline.ts
+++ b/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: {
diff --git a/compiler/packages/babel-plugin-react-forget/src/Utils/logger.ts b/compiler/packages/babel-plugin-react-forget/src/Utils/logger.ts
index 1d865dbf45..d362f8eb06 100644
--- a/compiler/packages/babel-plugin-react-forget/src/Utils/logger.ts
+++ b/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);