[compiler][be] Playground now compiles entire program (facebook#31774)

Compiler playground now runs the entire program through
`babel-plugin-react-compiler` instead of a custom pipeline which
previously duplicated function inference logic from `Program.ts`. In
addition, the playground output reflects the tranformed file (instead of
a "virtual file" of manually concatenated functions).

This helps with the following:
- Reduce potential discrepencies between playground and babel plugin
behavior. See attached fixture output for an example where we previously
diverged.
- Let playground users see compiler-inserted imports (e.g. `_c` or
`useFire`)

This also helps us repurpose playground into a more general tool for
compiler-users instead of just for compiler engineers.
- imports and other functions are preserved.
We differentiate between imports and globals in many cases (e.g.
`inferEffectDeps`), so it may be misleading to omit imports in printed
output
- playground now shows other program-changing behavior like position of
outlined functions and hoisted declarations
- emitted compiled functions do not need synthetic names
---
[//]: # (BEGIN SAPLING FOOTER)
Stack created with [Sapling](https://sapling-scm.com). Best reviewed
with [ReviewStack](https://reviewstack.dev/facebook/react/pull/31774).
* facebook#31809
* __->__ facebook#31774

Author: mofeiZ

compiler/apps/playground/__tests__/e2e/__snapshots__/page.spec.ts/01-user-output.txt

@@ -1,4 +1,5 @@
-function TestComponent(t0) {
+import { c as _c } from "react/compiler-runtime";
+export default function TestComponent(t0) {
   const $ = _c(2);
   const { x } = t0;
   let t1;

compiler/apps/playground/__tests__/e2e/__snapshots__/page.spec.ts/02-default-output.txt

@@ -1,4 +1,5 @@
-function MyApp() {
+import { c as _c } from "react/compiler-runtime";
+export default function MyApp() {
   const $ = _c(1);
   let t0;
   if ($[0] === Symbol.for("react.memo_cache_sentinel")) {

compiler/apps/playground/__tests__/e2e/__snapshots__/page.spec.ts/module-scope-use-memo-output.txt

@@ -1,4 +1,6 @@
-function TestComponent(t0) {
+"use memo";
+import { c as _c } from "react/compiler-runtime";
+export default function TestComponent(t0) {
   const $ = _c(2);
   const { x } = t0;
   let t1;

compiler/apps/playground/__tests__/e2e/__snapshots__/page.spec.ts/module-scope-use-no-memo-output.txt

@@ -1,3 +1,4 @@
-function TestComponent({ x }) {
+"use no memo";
+export default function TestComponent({ x }) {
   return <Button>{x}</Button>;
 }

compiler/apps/playground/__tests__/e2e/__snapshots__/page.spec.ts/parse-flow-output.txt

@@ -0,0 +1,14 @@
+import { c as _c } from "react/compiler-runtime";
+function useFoo(propVal) {
+  const $ = _c(2);
+  const t0 = (propVal.baz: number);
+  let t1;
+  if ($[0] !== t0) {
+    t1 = <div>{t0}</div>;
+    $[0] = t0;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  return t1;
+}

compiler/apps/playground/__tests__/e2e/__snapshots__/page.spec.ts/parse-typescript-output.txt

@@ -0,0 +1,20 @@
+import { c as _c } from "react/compiler-runtime";
+function Foo() {
+  const $ = _c(2);
+  let t0;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t0 = foo();
+    $[0] = t0;
+  } else {
+    t0 = $[0];
+  }
+  const x = t0 as number;
+  let t1;
+  if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
+    t1 = <div>{x}</div>;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  return t1;
+}

compiler/apps/playground/__tests__/e2e/__snapshots__/page.spec.ts/todo-function-scope-does-not-beat-module-scope-output.txt

@@ -0,0 +1,5 @@
+"use no memo";
+function TestComponent({ x }) {
+  "use memo";
+  return <Button>{x}</Button>;
+}

compiler/apps/playground/__tests__/e2e/__snapshots__/page.spec.ts/use-memo-output.txt

@@ -1,3 +1,4 @@
+import { c as _c } from "react/compiler-runtime";
 function TestComponent(t0) {
   "use memo";
   const $ = _c(2);
@@ -12,7 +13,7 @@ function TestComponent(t0) {
   }
   return t1;
 }
-function anonymous_1(t0) {
+const TestComponent2 = (t0) => {
   "use memo";
   const $ = _c(2);
   const { x } = t0;
@@ -25,4 +26,4 @@ function anonymous_1(t0) {
     t1 = $[1];
   }
   return t1;
-}
+};

compiler/apps/playground/__tests__/e2e/__snapshots__/page.spec.ts/use-no-memo-output.txt

@@ -1,8 +1,8 @@
-function anonymous_1() {
+const TestComponent = function () {
   "use no memo";
   return <Button>{x}</Button>;
-}
-function anonymous_3({ x }) {
+};
+const TestComponent2 = ({ x }) => {
   "use no memo";
   return <Button>{x}</Button>;
-}
+};

compiler/apps/playground/__tests__/e2e/page.spec.ts

@@ -9,11 +9,11 @@ import {expect, test} from '@playwright/test';
 import {encodeStore, type Store} from '../../lib/stores';
 import {format} from 'prettier';
 
-function print(data: Array<string>): Promise<string> {
+function formatPrint(data: Array<string>): Promise<string> {
   return format(data.join(''), {parser: 'babel'});
 }
 
-const DIRECTIVE_TEST_CASES = [
+const TEST_CASE_INPUTS = [
   {
     name: 'module-scope-use-memo',
     input: `
@@ -55,14 +55,34 @@ const TestComponent2 = ({ x }) => {
 };`,
   },
   {
-    name: 'function-scope-beats-module-scope',
+    name: 'todo-function-scope-does-not-beat-module-scope',
     input: `
 'use no memo';
 function TestComponent({ x }) {
   'use memo';
   return <Button>{x}</Button>;
 }`,
   },
+  {
+    name: 'parse-typescript',
+    input: `
+function Foo() {
+  const x = foo() as number;
+  return <div>{x}</div>;
+}
+`,
+    noFormat: true,
+  },
+  {
+    name: 'parse-flow',
+    input: `
+// @flow
+function useFoo(propVal: {+baz: number}) {
+  return <div>{(propVal.baz as number)}</div>;
+}
+    `,
+    noFormat: true,
+  },
 ];
 
 test('editor should open successfully', async ({page}) => {
@@ -90,7 +110,7 @@ test('editor should compile from hash successfully', async ({page}) => {
   });
   const text =
     (await page.locator('.monaco-editor').nth(1).allInnerTexts()) ?? [];
-  const output = await print(text);
+  const output = await formatPrint(text);
 
   expect(output).not.toEqual('');
   expect(output).toMatchSnapshot('01-user-output.txt');
@@ -115,14 +135,14 @@ test('reset button works', async ({page}) => {
   });
   const text =
     (await page.locator('.monaco-editor').nth(1).allInnerTexts()) ?? [];
-  const output = await print(text);
+  const output = await formatPrint(text);
 
   expect(output).not.toEqual('');
   expect(output).toMatchSnapshot('02-default-output.txt');
 });
 
-DIRECTIVE_TEST_CASES.forEach((t, idx) =>
-  test(`directives work: ${t.name}`, async ({page}) => {
+TEST_CASE_INPUTS.forEach((t, idx) =>
+  test(`playground compiles: ${t.name}`, async ({page}) => {
     const store: Store = {
       source: t.input,
     };
@@ -135,7 +155,12 @@ DIRECTIVE_TEST_CASES.forEach((t, idx) =>
 
     const text =
       (await page.locator('.monaco-editor').nth(1).allInnerTexts()) ?? [];
-    const output = await print(text);
+    let output: string;
+    if (t.noFormat) {
+      output = text.join('');
+    } else {
+      output = await formatPrint(text);
+    }
 
     expect(output).not.toEqual('');
     expect(output).toMatchSnapshot(`${t.name}-output.txt`);