[compiler][be] Playground now uses tsup bundled plugin

Followup to https://github.com/facebook/react/pull/32758.

This moves playground to use the tsup bundled plugin instead of webpack-built `babel-plugin-react-compiler`

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

@@ -19,7 +19,9 @@ import BabelPluginReactCompiler, {
   PluginOptions,
   CompilerPipelineValue,
   parsePluginOptions,
-} from 'babel-plugin-react-compiler/src';
+  printReactiveFunctionWithOutlined,
+  printFunctionWithOutlined,
+} from 'babel-plugin-react-compiler';
 import clsx from 'clsx';
 import invariant from 'invariant';
 import {useSnackbar} from 'notistack';
@@ -41,8 +43,6 @@ import {
   default as Output,
   PrintedCompilerPipelineValue,
 } from './Output';
-import {printFunctionWithOutlined} from 'babel-plugin-react-compiler/src/HIR/PrintHIR';
-import {printReactiveFunctionWithOutlined} from 'babel-plugin-react-compiler/src/ReactiveScopes/PrintReactiveFunction';
 import {transformFromAstSync} from '@babel/core';
 
 function parseInput(

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

@@ -6,7 +6,7 @@
  */
 
 import MonacoEditor, {loader, type Monaco} from '@monaco-editor/react';
-import {CompilerErrorDetail} from 'babel-plugin-react-compiler/src';
+import {CompilerErrorDetail} from 'babel-plugin-react-compiler';
 import invariant from 'invariant';
 import type {editor} from 'monaco-editor';
 import * as monaco from 'monaco-editor';

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

@@ -11,7 +11,7 @@ import {
   InformationCircleIcon,
 } from '@heroicons/react/outline';
 import MonacoEditor, {DiffEditor} from '@monaco-editor/react';
-import {type CompilerError} from 'babel-plugin-react-compiler/src';
+import {type CompilerError} from 'babel-plugin-react-compiler';
 import parserBabel from 'prettier/plugins/babel';
 import * as prettierPluginEstree from 'prettier/plugins/estree';
 import * as prettier from 'prettier/standalone';

compiler/apps/playground/lib/reactCompilerMonacoDiagnostics.ts

@@ -6,10 +6,7 @@
  */
 
 import {Monaco} from '@monaco-editor/react';
-import {
-  CompilerErrorDetail,
-  ErrorSeverity,
-} from 'babel-plugin-react-compiler/src';
+import {CompilerErrorDetail, ErrorSeverity} from 'babel-plugin-react-compiler';
 import {MarkerSeverity, type editor} from 'monaco-editor';
 
 function mapReactCompilerSeverityToMonaco(
@@ -54,7 +51,7 @@ export function renderReactCompilerMarkers({
   model,
   details,
 }: ReactCompilerMarkerConfig): void {
-  let markers = [];
+  const markers: Array<editor.IMarkerData> = [];
   for (const detail of details) {
     const marker = mapReactCompilerDiagnosticToMonacoMarker(detail, monaco);
     if (marker == null) {

compiler/apps/playground/package.json

@@ -4,7 +4,7 @@
   "private": true,
   "scripts": {
     "dev": "cd ../.. && concurrently --kill-others -n compiler,runtime,playground \"yarn workspace babel-plugin-react-compiler run watch\" \"yarn workspace react-compiler-runtime run watch\" \"wait-on packages/babel-plugin-react-compiler/dist/index.js && cd apps/playground && NODE_ENV=development next dev\"",
-    "build:compiler": "cd ../.. && concurrently -n compiler,runtime \"yarn workspace babel-plugin-react-compiler run build\" \"yarn workspace react-compiler-runtime run build\"",
+    "build:compiler": "cd ../.. && concurrently -n compiler,runtime \"yarn workspace babel-plugin-react-compiler run build --dts\" \"yarn workspace react-compiler-runtime run build\"",
     "build": "yarn build:compiler && next build",
     "postbuild": "node ./scripts/downloadFonts.js",
     "preinstall": "cd ../.. && yarn install --frozen-lockfile",

compiler/packages/babel-plugin-react-compiler/package.json

@@ -17,7 +17,7 @@
     "snap:ci": "yarn snap:build && yarn snap",
     "ts:analyze-trace": "scripts/ts-analyze-trace.sh",
     "lint": "yarn eslint src",
-    "watch": "yarn build --watch"
+    "watch": "yarn build --dts --watch"
   },
   "dependencies": {
     "@babel/types": "^7.26.0"