Merge branch 'main' into arrow-function-with-implicit-return

Author: dimaMachina

.eslintrc.js

@@ -303,7 +303,6 @@ module.exports = {
       ERROR,
       {isProductionUserAppCode: true},
     ],
-    'react-internal/no-to-warn-dev-within-to-throw': ERROR,
     'react-internal/warning-args': ERROR,
     'react-internal/no-production-logging': ERROR,
   },
@@ -590,6 +589,11 @@ module.exports = {
     WheelEventHandler: 'readonly',
     FinalizationRegistry: 'readonly',
     Omit: 'readonly',
+    Keyframe: 'readonly',
+    PropertyIndexedKeyframes: 'readonly',
+    KeyframeAnimationOptions: 'readonly',
+    GetAnimationsOptions: 'readonly',
+    Animatable: 'readonly',
 
     spyOnDev: 'readonly',
     spyOnDevAndProd: 'readonly',

.github/workflows/compiler_playground.yml

@@ -38,11 +38,7 @@ jobs:
         with:
           path: "**/node_modules"
           key: compiler-node_modules-${{ runner.arch }}-${{ runner.os }}-${{ hashFiles('compiler/**/yarn.lock') }}
-      - name: yarn install compiler
-        run: yarn install --frozen-lockfile
-        working-directory: compiler
-      - name: yarn install playground
-        run: yarn install --frozen-lockfile
+      - run: yarn install --frozen-lockfile
       - run: npx playwright install --with-deps chromium
       - run: CI=true yarn test
       - run: ls -R test-results

.github/workflows/shared_discord_notify.yml

@@ -0,0 +1,21 @@
+name: (Shared) Discord Notify
+
+on:
+  pull_request_target:
+    types: [labeled]
+
+jobs:
+  notify:
+    if: ${{ github.event.label.name == 'React Core Team' }}
+    runs-on: ubuntu-latest
+    steps:
+      - name: Discord Webhook Action
+        uses: tsickert/discord-webhook@v6.0.0
+        with:
+          webhook-url: ${{ secrets.DISCORD_WEBHOOK_URL }}
+          embed-author-name: ${{ github.event.pull_request.user.login }}
+          embed-author-url: ${{ github.event.pull_request.user.html_url }}
+          embed-author-icon-url: ${{ github.event.pull_request.user.avatar_url }}
+          embed-title: '#${{ github.event.number }} (+${{github.event.pull_request.additions}} -${{github.event.pull_request.deletions}}): ${{ github.event.pull_request.title }}'
+          embed-description: ${{ github.event.pull_request.body }}
+          embed-url: ${{ github.event.pull_request.html_url }}

compiler/apps/playground/__tests__/e2e/__snapshots__/page.spec.ts/compilationMode-all-output.txt

@@ -0,0 +1,13 @@
+import { c as _c } from "react/compiler-runtime"; // 
+        @compilationMode(all)
+function nonReactFn() {
+  const $ = _c(1);
+  let t0;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t0 = {};
+    $[0] = t0;
+  } else {
+    t0 = $[0];
+  }
+  return t0;
+}

compiler/apps/playground/__tests__/e2e/__snapshots__/page.spec.ts/compilationMode-infer-output.txt

@@ -0,0 +1,4 @@
+// @compilationMode(infer)
+function nonReactFn() {
+  return {};
+}

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

@@ -79,6 +79,24 @@ function Foo() {
 // @flow
 function useFoo(propVal: {+baz: number}) {
   return <div>{(propVal.baz as number)}</div>;
+}
+    `,
+    noFormat: true,
+  },
+  {
+    name: 'compilationMode-infer',
+    input: `// @compilationMode(infer)
+function nonReactFn() {
+  return {};
+}
+    `,
+    noFormat: true,
+  },
+  {
+    name: 'compilationMode-all',
+    input: `// @compilationMode(all)
+function nonReactFn() {
+  return {};
 }
     `,
     noFormat: true,

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

@@ -20,7 +20,6 @@ import BabelPluginReactCompiler, {
   CompilerPipelineValue,
   parsePluginOptions,
 } from 'babel-plugin-react-compiler/src';
-import {type EnvironmentConfig} from 'babel-plugin-react-compiler/src/HIR/Environment';
 import clsx from 'clsx';
 import invariant from 'invariant';
 import {useSnackbar} from 'notistack';
@@ -69,24 +68,14 @@ function parseInput(
 function invokeCompiler(
   source: string,
   language: 'flow' | 'typescript',
-  environment: EnvironmentConfig,
-  logIR: (pipelineValue: CompilerPipelineValue) => void,
+  options: PluginOptions,
 ): CompilerTransformOutput {
-  const opts: PluginOptions = parsePluginOptions({
-    logger: {
-      debugLogIRs: logIR,
-      logEvent: () => {},
-    },
-    environment,
-    compilationMode: 'all',
-    panicThreshold: 'all_errors',
-  });
   const ast = parseInput(source, language);
   let result = transformFromAstSync(ast, source, {
     filename: '_playgroundFile.js',
     highlightCode: false,
     retainLines: true,
-    plugins: [[BabelPluginReactCompiler, opts]],
+    plugins: [[BabelPluginReactCompiler, options]],
     ast: true,
     sourceType: 'module',
     configFile: false,
@@ -172,51 +161,59 @@ function compile(source: string): [CompilerOutput, 'flow' | 'typescript'] {
   try {
     // Extract the first line to quickly check for custom test directives
     const pragma = source.substring(0, source.indexOf('\n'));
-    const config = parseConfigPragmaForTests(pragma);
-
-    transformOutput = invokeCompiler(
-      source,
-      language,
-      {...config, customHooks: new Map([...COMMON_HOOKS])},
-      result => {
-        switch (result.kind) {
-          case 'ast': {
-            break;
-          }
-          case 'hir': {
-            upsert({
-              kind: 'hir',
-              fnName: result.value.id,
-              name: result.name,
-              value: printFunctionWithOutlined(result.value),
-            });
-            break;
-          }
-          case 'reactive': {
-            upsert({
-              kind: 'reactive',
-              fnName: result.value.id,
-              name: result.name,
-              value: printReactiveFunctionWithOutlined(result.value),
-            });
-            break;
-          }
-          case 'debug': {
-            upsert({
-              kind: 'debug',
-              fnName: null,
-              name: result.name,
-              value: result.value,
-            });
-            break;
-          }
-          default: {
-            const _: never = result;
-            throw new Error(`Unhandled result ${result}`);
-          }
+    const logIR = (result: CompilerPipelineValue): void => {
+      switch (result.kind) {
+        case 'ast': {
+          break;
+        }
+        case 'hir': {
+          upsert({
+            kind: 'hir',
+            fnName: result.value.id,
+            name: result.name,
+            value: printFunctionWithOutlined(result.value),
+          });
+          break;
+        }
+        case 'reactive': {
+          upsert({
+            kind: 'reactive',
+            fnName: result.value.id,
+            name: result.name,
+            value: printReactiveFunctionWithOutlined(result.value),
+          });
+          break;
         }
+        case 'debug': {
+          upsert({
+            kind: 'debug',
+            fnName: null,
+            name: result.name,
+            value: result.value,
+          });
+          break;
+        }
+        default: {
+          const _: never = result;
+          throw new Error(`Unhandled result ${result}`);
+        }
+      }
+    };
+    const parsedOptions = parseConfigPragmaForTests(pragma, {
+      compilationMode: 'infer',
+    });
+    const opts: PluginOptions = parsePluginOptions({
+      ...parsedOptions,
+      environment: {
+        ...parsedOptions.environment,
+        customHooks: new Map([...COMMON_HOOKS]),
       },
-    );
+      logger: {
+        debugLogIRs: logIR,
+        logEvent: () => {},
+      },
+    });
+    transformOutput = invokeCompiler(source, language, opts);
   } catch (err) {
     /**
      * error might be an invariant violation or other runtime error

compiler/apps/playground/package.json

@@ -3,10 +3,11 @@
   "version": "0.1.0",
   "private": true,
   "scripts": {
-    "dev": "cd ../.. && concurrently --kill-others -n compiler,runtime,playground \"yarn workspace babel-plugin-react-compiler run build --watch\" \"yarn workspace react-compiler-runtime run build --watch\" \"wait-on packages/babel-plugin-react-compiler/dist/index.js && cd apps/playground && NODE_ENV=development next dev\"",
+    "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": "yarn build:compiler && next build",
     "postbuild": "node ./scripts/downloadFonts.js",
+    "preinstall": "cd ../.. && yarn install --frozen-lockfile",
     "postinstall": "./scripts/link-compiler.sh",
     "vercel-build": "yarn build",
     "start": "next start",

compiler/package.json

@@ -15,7 +15,7 @@
     "start": "yarn workspace playground run start",
     "next": "yarn workspace playground run dev",
     "build": "yarn workspaces run build",
-    "dev": "echo 'DEPRECATED: use `cd apps/playground && yarn dev` instead!' && sleep 5 && cd apps/playground && yarn dev",
+    "dev": "cd apps/playground && yarn dev",
     "test": "yarn workspaces run test",
     "snap": "yarn workspace babel-plugin-react-compiler run snap",
     "snap:build": "yarn workspace snap run build",
@@ -26,25 +26,23 @@
     "react-is": "0.0.0-experimental-4beb1fd8-20241118"
   },
   "devDependencies": {
-    "@rollup/plugin-commonjs": "^25.0.7",
-    "@rollup/plugin-json": "^6.1.0",
-    "@rollup/plugin-node-resolve": "^15.2.3",
-    "@rollup/plugin-terser": "^0.4.4",
-    "@rollup/plugin-typescript": "^11.1.6",
     "@tsconfig/strictest": "^2.0.5",
     "concurrently": "^7.4.0",
+    "esbuild": "^0.24.2",
     "folder-hash": "^4.0.4",
+    "npm-dts": "^1.3.13",
     "object-assign": "^4.1.1",
     "ora": "5.4.1",
     "prettier": "^3.3.3",
-    "prettier-plugin-hermes-parser": "^0.25.1",
+    "prettier-plugin-hermes-parser": "^0.26.0",
     "prompt-promise": "^1.0.3",
-    "rollup": "^4.22.4",
-    "rollup-plugin-banner2": "^1.2.3",
-    "rollup-plugin-prettier": "^4.1.1",
+    "rimraf": "^5.0.10",
     "typescript": "^5.4.3",
     "wait-on": "^7.2.0",
     "yargs": "^17.7.2"
   },
+  "resolutions": {
+    "rimraf": "5.0.10"
+  },
   "packageManager": "yarn@1.22.22"
 }

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

@@ -9,14 +9,15 @@
     "!*.tsbuildinfo"
   ],
   "scripts": {
-    "build": "rimraf dist && rollup --config --bundleConfigAsCjs",
+    "build": "rimraf dist && scripts/build.js",
     "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: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"
+    "lint": "yarn eslint src",
+    "watch": "scripts/build.js --watch"
   },
   "dependencies": {
     "@babel/types": "^7.19.0"
@@ -49,7 +50,6 @@
     "pretty-format": "^24",
     "react": "0.0.0-experimental-4beb1fd8-20241118",
     "react-dom": "0.0.0-experimental-4beb1fd8-20241118",
-    "rimraf": "^3.0.2",
     "ts-jest": "^29.1.1",
     "ts-node": "^10.9.2",
     "zod": "^3.22.4",