[compiler][be] Playground now compiles entire program

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 generic tool for compiler-users instead of just compiler engineers.
- imports and other functions are preserved.
  This is important as we now differentiate between imports and globals in many cases,
- playground now shows other program-changing behavior like position of outlined functions and hoisted declarations
- emitted compiled functions do not need synthetic names

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/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

@@ -55,7 +55,7 @@ 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 }) {