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

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

@@ -12,12 +12,12 @@
     "build": "rimraf dist && tsup",
     "test": "./scripts/link-react-compiler-runtime.sh && yarn snap:ci",
     "jest": "yarn build && ts-node node_modules/.bin/jest",
-    "snap": "node ../snap/dist/main.js",
+    "snap": "yarn workspace snap run snap",
     "snap:build": "yarn workspace snap run build",
     "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"

compiler/packages/babel-plugin-react-compiler/src/HIR/index.ts

@@ -32,5 +32,5 @@ export {
 } from './HIRBuilder';
 export {mergeConsecutiveBlocks} from './MergeConsecutiveBlocks';
 export {mergeOverlappingReactiveScopesHIR} from './MergeOverlappingReactiveScopesHIR';
-export {printFunction, printHIR} from './PrintHIR';
+export {printFunction, printHIR, printFunctionWithOutlined} from './PrintHIR';
 export {pruneUnusedLabelsHIR} from './PruneUnusedLabelsHIR';

compiler/packages/babel-plugin-react-compiler/src/ReactiveScopes/index.ts

@@ -14,7 +14,10 @@ export {extractScopeDeclarationsFromDestructuring} from './ExtractScopeDeclarati
 export {inferReactiveScopeVariables} from './InferReactiveScopeVariables';
 export {memoizeFbtAndMacroOperandsInSameScope} from './MemoizeFbtAndMacroOperandsInSameScope';
 export {mergeReactiveScopesThatInvalidateTogether} from './MergeReactiveScopesThatInvalidateTogether';
-export {printReactiveFunction} from './PrintReactiveFunction';
+export {
+  printReactiveFunction,
+  printReactiveFunctionWithOutlined,
+} from './PrintReactiveFunction';
 export {promoteUsedTemporaries} from './PromoteUsedTemporaries';
 export {propagateEarlyReturns} from './PropagateEarlyReturns';
 export {pruneAllReactiveScopes} from './PruneAllReactiveScopes';

compiler/packages/babel-plugin-react-compiler/src/index.ts

@@ -32,13 +32,17 @@ export {
   ValueKind,
   parseConfigPragmaForTests,
   printHIR,
+  printFunctionWithOutlined,
   validateEnvironmentConfig,
   type EnvironmentConfig,
   type ExternalFunction,
   type Hook,
   type SourceLocation,
 } from './HIR';
-export {printReactiveFunction} from './ReactiveScopes';
+export {
+  printReactiveFunction,
+  printReactiveFunctionWithOutlined,
+} from './ReactiveScopes';
 declare global {
   let __DEV__: boolean | null | undefined;
 }

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

@@ -4,7 +4,7 @@
     "module": "ES2015",
     "moduleResolution": "Bundler",
     "rootDir": "src",
-    "outDir": "dist",
+    "noEmit": true,
     "jsx": "react-jsxdev",
     // weaken strictness from preset
     "importsNotUsedAsValues": "remove",

compiler/packages/snap/package.json

@@ -11,6 +11,7 @@
   "scripts": {
     "postinstall": "./scripts/link-react-compiler-runtime.sh && perl -p -i -e 's/react\\.element/react.transitional.element/' ../../node_modules/fbt/lib/FbtReactUtil.js && perl -p -i -e 's/didWarnAboutUsingAct = false;/didWarnAboutUsingAct = true;/' ../../node_modules/react-dom/cjs/react-dom-test-utils.development.js",
     "build": "rimraf dist && concurrently -n snap,runtime \"tsc --build\" \"yarn --silent workspace react-compiler-runtime build\"",
+    "snap": "node dist/main.js",
     "test": "echo 'no tests'",
     "prettier": "prettier --write 'src/**/*.ts'"
   },
@@ -40,8 +41,7 @@
   },
   "devDependencies": {
     "@babel/core": "^7.19.1",
-    "@babel/parser": "^7.19.1",
-    "@babel/plugin-syntax-typescript": "^7.18.6",
+    "@babel/parser": "^7.20.15",
     "@babel/plugin-transform-modules-commonjs": "^7.18.6",
     "@babel/preset-react": "^7.18.6",
     "@babel/traverse": "^7.19.1",

compiler/packages/snap/src/constants.ts

@@ -9,40 +9,22 @@ import path from 'path';
 
 // We assume this is run from `babel-plugin-react-compiler`
 export const PROJECT_ROOT = path.normalize(
-  path.join(process.cwd(), '..', '..'),
+  path.join(process.cwd(), '..', 'babel-plugin-react-compiler'),
 );
-export const COMPILER_PATH = path.join(
-  process.cwd(),
-  'dist',
-  'Babel',
-  'BabelPlugin.js',
-);
-export const COMPILER_INDEX_PATH = path.join(process.cwd(), 'dist', 'index');
-export const PRINT_HIR_PATH = path.join(
-  process.cwd(),
-  'dist',
-  'HIR',
-  'PrintHIR.js',
-);
-export const PRINT_REACTIVE_IR_PATH = path.join(
-  process.cwd(),
-  'dist',
-  'ReactiveScopes',
-  'PrintReactiveFunction.js',
-);
-export const PARSE_CONFIG_PRAGMA_PATH = path.join(
-  process.cwd(),
-  'dist',
-  'HIR',
-  'Environment.js',
+
+export const PROJECT_SRC = path.normalize(
+  path.join(PROJECT_ROOT, 'dist', 'index.js'),
 );
+export const PRINT_HIR_IMPORT = 'printFunctionWithOutlined';
+export const PRINT_REACTIVE_IR_IMPORT = 'printReactiveFunction';
+export const PARSE_CONFIG_PRAGMA_IMPORT = 'parseConfigPragmaForTests';
 export const FIXTURES_PATH = path.join(
-  process.cwd(),
+  PROJECT_ROOT,
   'src',
   '__tests__',
   'fixtures',
   'compiler',
 );
 export const SNAPSHOT_EXTENSION = '.expect.md';
 export const FILTER_FILENAME = 'testfilter.txt';
-export const FILTER_PATH = path.join(process.cwd(), FILTER_FILENAME);
+export const FILTER_PATH = path.join(PROJECT_ROOT, FILTER_FILENAME);

compiler/packages/snap/src/runner-watch.ts

@@ -8,15 +8,16 @@
 import watcher from '@parcel/watcher';
 import path from 'path';
 import ts from 'typescript';
-import {FILTER_FILENAME, FIXTURES_PATH} from './constants';
+import {FILTER_FILENAME, FIXTURES_PATH, PROJECT_ROOT} from './constants';
 import {TestFilter, readTestFilter} from './fixture-utils';
+import {execSync} from 'child_process';
 
 export function watchSrc(
   onStart: () => void,
   onComplete: (isSuccess: boolean) => void,
 ): ts.WatchOfConfigFile<ts.SemanticDiagnosticsBuilderProgram> {
   const configPath = ts.findConfigFile(
-    /*searchPath*/ './',
+    /*searchPath*/ PROJECT_ROOT,
     ts.sys.fileExists,
     'tsconfig.json',
   );
@@ -26,10 +27,7 @@ export function watchSrc(
   const createProgram = ts.createSemanticDiagnosticsBuilderProgram;
   const host = ts.createWatchCompilerHost(
     configPath,
-    ts.convertCompilerOptionsFromJson(
-      {module: 'commonjs', outDir: 'dist', sourceMap: true},
-      '.',
-    ).options,
+    undefined,
     ts.sys,
     createProgram,
     () => {}, // we manually report errors in afterProgramCreate
@@ -41,9 +39,11 @@ export function watchSrc(
     onStart();
     return origCreateProgram(rootNames, options, host, oldProgram);
   };
-  const origPostProgramCreate = host.afterProgramCreate;
   host.afterProgramCreate = program => {
-    origPostProgramCreate!(program);
+    /**
+     * Avoid calling original postProgramCreate because it always emits tsc
+     * compilation output
+     */
 
     // syntactic diagnostics refer to javascript syntax
     const errors = program
@@ -172,13 +172,23 @@ function subscribeTsc(
       // Notify the user when compilation starts but don't clear the screen yet
       console.log('\nCompiling...');
     },
-    isSuccess => {
+    isTypecheckSuccess => {
+      let isCompilerBuildValid = false;
+      if (isTypecheckSuccess) {
+        try {
+          execSync('yarn build', {cwd: PROJECT_ROOT});
+          console.log('Built compiler successfully with tsup');
+          isCompilerBuildValid = true;
+        } catch (e) {
+          console.warn('Failed to build compiler with tsup:', e);
+        }
+      }
       // Bump the compiler version after a build finishes
       // and re-run tests
-      if (isSuccess) {
+      if (isCompilerBuildValid) {
         state.compilerVersion++;
       }
-      state.isCompilerBuildValid = isSuccess;
+      state.isCompilerBuildValid = isCompilerBuildValid;
       state.mode.action = RunnerAction.Test;
       onChange(state);
     },

compiler/packages/snap/src/runner-worker.ts

@@ -12,16 +12,19 @@ import type {printFunctionWithOutlined as PrintFunctionWithOutlined} from 'babel
 import type {printReactiveFunctionWithOutlined as PrintReactiveFunctionWithOutlined} from 'babel-plugin-react-compiler/src/ReactiveScopes/PrintReactiveFunction';
 import {TransformResult, transformFixtureInput} from './compiler';
 import {
-  COMPILER_PATH,
-  COMPILER_INDEX_PATH,
-  PARSE_CONFIG_PRAGMA_PATH,
-  PRINT_HIR_PATH,
-  PRINT_REACTIVE_IR_PATH,
+  PARSE_CONFIG_PRAGMA_IMPORT,
+  PRINT_HIR_IMPORT,
+  PRINT_REACTIVE_IR_IMPORT,
+  PROJECT_SRC,
 } from './constants';
 import {TestFixture, getBasename, isExpectError} from './fixture-utils';
 import {TestResult, writeOutputToString} from './reporter';
 import {runSprout} from './sprout';
-import {CompilerPipelineValue} from 'babel-plugin-react-compiler/src';
+import type {
+  CompilerPipelineValue,
+  Effect,
+  ValueKind,
+} from 'babel-plugin-react-compiler/src';
 import chalk from 'chalk';
 
 const originalConsoleError = console.error;
@@ -61,22 +64,29 @@ async function compile(
   let compileResult: TransformResult | null = null;
   let error: string | null = null;
   try {
+    const importedCompilerPlugin = require(PROJECT_SRC) as Record<
+      string,
+      unknown
+    >;
+
     // NOTE: we intentionally require lazily here so that we can clear the require cache
     // and load fresh versions of the compiler when `compilerVersion` changes.
-    const {default: BabelPluginReactCompiler} = require(COMPILER_PATH) as {
-      default: PluginObj;
-    };
-    const {Effect: EffectEnum, ValueKind: ValueKindEnum} = require(
-      COMPILER_INDEX_PATH,
-    );
-    const {printFunctionWithOutlined} = require(PRINT_HIR_PATH) as {
-      printFunctionWithOutlined: typeof PrintFunctionWithOutlined;
-    };
-    const {printReactiveFunctionWithOutlined} = require(
-      PRINT_REACTIVE_IR_PATH,
-    ) as {
-      printReactiveFunctionWithOutlined: typeof PrintReactiveFunctionWithOutlined;
-    };
+    const BabelPluginReactCompiler = importedCompilerPlugin[
+      'default'
+    ] as PluginObj;
+    const EffectEnum = importedCompilerPlugin['Effect'] as typeof Effect;
+    const ValueKindEnum = importedCompilerPlugin[
+      'ValueKind'
+    ] as typeof ValueKind;
+    const printFunctionWithOutlined = importedCompilerPlugin[
+      PRINT_HIR_IMPORT
+    ] as typeof PrintFunctionWithOutlined;
+    const printReactiveFunctionWithOutlined = importedCompilerPlugin[
+      PRINT_REACTIVE_IR_IMPORT
+    ] as typeof PrintReactiveFunctionWithOutlined;
+    const parseConfigPragmaForTests = importedCompilerPlugin[
+      PARSE_CONFIG_PRAGMA_IMPORT
+    ] as typeof ParseConfigPragma;
 
     let lastLogged: string | null = null;
     const debugIRLogger = shouldLog
@@ -106,9 +116,6 @@ async function compile(
           }
         }
       : () => {};
-    const {parseConfigPragmaForTests} = require(PARSE_CONFIG_PRAGMA_PATH) as {
-      parseConfigPragmaForTests: typeof ParseConfigPragma;
-    };
 
     // only try logging if we filtered out all but one fixture,
     // since console log order is non-deterministic