[compiler][be] Playground now uses tsup bundled plugin (#32759)
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`. --- [//]: # (BEGIN SAPLING FOOTER) Stack created with [Sapling](https://sapling-scm.com). Best reviewed with [ReviewStack](https://reviewstack.dev/facebook/react/pull/32759). * __->__ #32759 * #32758
mofeiZ committed
Mar 26, 2025 at 14:31 UTC
254114616a24e0ed66468570b00d34bfabf9f73b
6 files changed
+9
-12
compiler/apps/playground/components/Editor/EditorImpl.tsx
+3
-3
@@ -19,7 +19,9 @@ import BabelPluginReactCompiler, {
19
PluginOptions,
20
CompilerPipelineValue,
21
parsePluginOptions,
22
-} from 'babel-plugin-react-compiler/src';
22
+ printReactiveFunctionWithOutlined,
23
+ printFunctionWithOutlined,
24
+} from 'babel-plugin-react-compiler';
25
import clsx from 'clsx';
26
import invariant from 'invariant';
27
import {useSnackbar} from 'notistack';
@@ -41,8 +43,6 @@ import {
43
default as Output,
44
PrintedCompilerPipelineValue,
45
} from './Output';
44
-import {printFunctionWithOutlined} from 'babel-plugin-react-compiler/src/HIR/PrintHIR';
45
-import {printReactiveFunctionWithOutlined} from 'babel-plugin-react-compiler/src/ReactiveScopes/PrintReactiveFunction';
46
import {transformFromAstSync} from '@babel/core';
47
48
function parseInput(
compiler/apps/playground/components/Editor/Input.tsx
+1
-1
@@ -6,7 +6,7 @@
6
*/
7
8
import MonacoEditor, {loader, type Monaco} from '@monaco-editor/react';
9
-import {CompilerErrorDetail} from 'babel-plugin-react-compiler/src';
9
+import {CompilerErrorDetail} from 'babel-plugin-react-compiler';
10
import invariant from 'invariant';
11
import type {editor} from 'monaco-editor';
12
import * as monaco from 'monaco-editor';
compiler/apps/playground/components/Editor/Output.tsx
+1
-1
@@ -11,7 +11,7 @@ import {
11
InformationCircleIcon,
12
} from '@heroicons/react/outline';
13
import MonacoEditor, {DiffEditor} from '@monaco-editor/react';
14
-import {type CompilerError} from 'babel-plugin-react-compiler/src';
14
+import {type CompilerError} from 'babel-plugin-react-compiler';
15
import parserBabel from 'prettier/plugins/babel';
16
import * as prettierPluginEstree from 'prettier/plugins/estree';
17
import * as prettier from 'prettier/standalone';
compiler/apps/playground/lib/reactCompilerMonacoDiagnostics.ts
+2
-5
@@ -6,10 +6,7 @@
6
*/
7
8
import {Monaco} from '@monaco-editor/react';
9
-import {
10
- CompilerErrorDetail,
11
- ErrorSeverity,
12
-} from 'babel-plugin-react-compiler/src';
9
+import {CompilerErrorDetail, ErrorSeverity} from 'babel-plugin-react-compiler';
10
import {MarkerSeverity, type editor} from 'monaco-editor';
11
12
function mapReactCompilerSeverityToMonaco(
@@ -54,7 +51,7 @@ export function renderReactCompilerMarkers({
51
model,
52
details,
53
}: ReactCompilerMarkerConfig): void {
57
- let markers = [];
54
+ const markers: Array<editor.IMarkerData> = [];
55
for (const detail of details) {
56
const marker = mapReactCompilerDiagnosticToMonacoMarker(detail, monaco);
57
if (marker == null) {
compiler/apps/playground/package.json
+1
-1
@@ -4,7 +4,7 @@
4
"private": true,
5
"scripts": {
6
"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\"",
7
- "build:compiler": "cd ../.. && concurrently -n compiler,runtime \"yarn workspace babel-plugin-react-compiler run build\" \"yarn workspace react-compiler-runtime run build\"",
7
+ "build:compiler": "cd ../.. && concurrently -n compiler,runtime \"yarn workspace babel-plugin-react-compiler run build --dts\" \"yarn workspace react-compiler-runtime run build\"",
8
"build": "yarn build:compiler && next build",
9
"postbuild": "node ./scripts/downloadFonts.js",
10
"preinstall": "cd ../.. && yarn install --frozen-lockfile",
compiler/packages/babel-plugin-react-compiler/package.json
+1
-1
@@ -17,7 +17,7 @@
17
"snap:ci": "yarn snap:build && yarn snap",
18
"ts:analyze-trace": "scripts/ts-analyze-trace.sh",
19
"lint": "yarn eslint src",
20
- "watch": "yarn build --watch"
20
+ "watch": "yarn build --dts --watch"
21
},
22
"dependencies": {
23
"@babel/types": "^7.26.0"