Update (base update)

[ghstack-poisoned]

.github/workflows/compiler-typescript.yml

@@ -24,6 +24,25 @@ jobs:
         run: echo "matrix=$(find packages -mindepth 1 -maxdepth 1 -type d | sed 's!packages/!!g' | tr '\n' ',' | sed s/.$// | jq -Rsc '. / "," - [""]')" >> $GITHUB_OUTPUT
 
   # Hardcoded to improve parallelism for babel-plugin-react-compiler
+  prettier:
+    name: Run prettier
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 18.x
+          cache: "yarn"
+          cache-dependency-path: compiler/yarn.lock
+      - name: Restore cached node_modules
+        uses: actions/cache@v4
+        with:
+          path: "**/node_modules"
+          key: ${{ runner.arch }}-${{ runner.os }}-modules-${{ hashFiles('compiler/**/yarn.lock') }}
+      - run: yarn install --frozen-lockfile
+      - run: yarn prettier:ci
+
+  # Hardcoded to improve parallelism
   lint:
     name: Lint babel-plugin-react-compiler
     runs-on: ubuntu-latest
@@ -40,10 +59,9 @@ jobs:
           path: "**/node_modules"
           key: ${{ runner.arch }}-${{ runner.os }}-modules-${{ hashFiles('compiler/**/yarn.lock') }}
       - run: yarn install --frozen-lockfile
-      - run: yarn workspace babel-plugin-react-compiler prettier:ci
       - run: yarn workspace babel-plugin-react-compiler lint
 
-  # Hardcoded to improve parallelism for babel-plugin-react-compiler
+  # Hardcoded to improve parallelism
   jest:
     name: Jest babel-plugin-react-compiler
     runs-on: ubuntu-latest

compiler/packages/babel-plugin-react-compiler/.eslintrc.js → compiler/.eslintrc.js

@@ -82,6 +82,7 @@ module.exports = {
     ],
     "@typescript-eslint/array-type": ["error", { default: "generic" }],
     "@typescript-eslint/triple-slash-reference": "off",
+    "@typescript-eslint/no-var-requires": "off"
   },
   parser: "@typescript-eslint/parser",
   plugins: ["@typescript-eslint"],

compiler/.git-blame-ignore-revs

@@ -1,2 +1,3 @@
 741ae6e3aa10735722a442a3c8be77af7c951204
-59cba458af27d936df8feabf641f545f431529ad
+59cba458af27d936df8feabf641f545f431529ad
+4365e2c37a4ff3396cae1f4cc4a8f4421a25b26d

compiler/.prettierignore

@@ -1,12 +1,21 @@
-.fixtures/
-bench/
 **/dist
 **/__tests__/fixtures/**/*.expect.md
 **/__tests__/fixtures/**/*.flow.js
 **/.next
-test262/
-*.md
+
+crates
+apps/playground/public
+
+**/LICENSE
+.*
+*.md*
 *.json
 *.css
 *.webmanifest
-packages/js-fuzzer
+*.map
+*.sh
+*.txt
+*.ico
+*.svg
+*.lock
+*.toml

compiler/.prettierrc.js

@@ -0,0 +1,8 @@
+const config = {
+  requirePragma: false,
+  parser: "babel-ts",
+  semi: true,
+  singleQuote: false
+}
+
+module.exports = config;

compiler/apps/playground/colors.js

@@ -5,7 +5,6 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-
 /**
  * Sync from <https://github.com/reactjs/reactjs.org/blob/main/beta/colors.js>.
  */

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

@@ -319,9 +319,7 @@ export default function Editor() {
   return (
     <>
       <div className="relative flex basis top-14">
-        <div
-          className={clsx("relative sm:basis-1/4")}
-        >
+        <div className={clsx("relative sm:basis-1/4")}>
           <Input
             errors={
               compilerOutput.kind === "err" ? compilerOutput.error.details : []

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

@@ -177,7 +177,7 @@ function getSourceMapUrl(code: string, map: string): string | null {
 }
 
 function Output({ store, compilerOutput }: Props) {
-  const [tabsOpen, setTabsOpen] = useState<Set<string>>(() => new Set(['JS']));
+  const [tabsOpen, setTabsOpen] = useState<Set<string>>(() => new Set(["JS"]));
   const [tabs, setTabs] = useState<Map<string, React.ReactNode>>(
     () => new Map(),
   );

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

@@ -13,4 +13,4 @@ const Editor = dynamic(() => import("./EditorImpl"), {
   ssr: false,
 });
 
-export default Editor;
+export default Editor;

compiler/apps/playground/components/Editor/monacoOptions.ts

@@ -5,7 +5,6 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-
 import type { EditorProps } from "@monaco-editor/react";
 
 export const monacoOptions: Partial<EditorProps["options"]> = {

compiler/apps/playground/components/Logo.tsx

@@ -5,7 +5,6 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-
 // https://github.com/reactjs/reactjs.org/blob/main/beta/src/components/Logo.tsx
 
 export default function Logo(props: JSX.IntrinsicElements["svg"]) {

compiler/apps/playground/components/Message.tsx

@@ -76,7 +76,7 @@ const Message = forwardRef<HTMLDivElement, MessageProps>(
         ) : null}
       </SnackbarContent>
     );
-  }
+  },
 );
 
 Message.displayName = "MessageComponent";

compiler/apps/playground/components/StoreContext.tsx

@@ -5,7 +5,6 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-
 import type { Dispatch, ReactNode } from "react";
 import { useReducer } from "react";
 import createContext from "../lib/createContext";

compiler/apps/playground/components/TabbedWindow.tsx

@@ -78,7 +78,7 @@ function TabbedWindowItem({
             title="Minimize tab"
             aria-label="Minimize tab"
             onClick={toggleTabs}
-            className={`p-4 duration-150 ease-in border-b cursor-pointer border-grey-200 ${hasChanged ? 'font-bold' : 'font-light'} text-secondary hover:text-link`}
+            className={`p-4 duration-150 ease-in border-b cursor-pointer border-grey-200 ${hasChanged ? "font-bold" : "font-light"} text-secondary hover:text-link`}
           >
             - {name}
           </h2>
@@ -91,7 +91,7 @@ function TabbedWindowItem({
             aria-label={`Expand compiler tab: ${name}`}
             style={{ transform: "rotate(90deg) translate(-50%)" }}
             onClick={toggleTabs}
-            className={`flex-grow-0 w-5 transition-colors duration-150 ease-in ${hasChanged ? 'font-bold' : 'font-light'} text-secondary hover:text-link`}
+            className={`flex-grow-0 w-5 transition-colors duration-150 ease-in ${hasChanged ? "font-bold" : "font-light"} text-secondary hover:text-link`}
           >
             {name}
           </button>

compiler/apps/playground/components/index.ts

@@ -5,7 +5,6 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-
 export { default as Editor } from "./Editor";
 export { default as Header } from "./Header";
 export { StoreProvider } from "./StoreContext";

compiler/apps/playground/hooks/index.ts

@@ -5,5 +5,4 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-
 export { default as useMountEffect } from "./useMountEffect";

compiler/apps/playground/hooks/useMountEffect.ts

@@ -5,7 +5,6 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-
 import type { EffectCallback } from "react";
 import { useEffect } from "react";
 

compiler/apps/playground/lib/createContext.ts

@@ -5,7 +5,6 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-
 import React from "react";
 
 /**

compiler/apps/playground/lib/stores/index.ts

@@ -5,6 +5,5 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-
 export * from "./messages";
 export * from "./store";

compiler/apps/playground/lib/stores/messages.ts

@@ -5,7 +5,6 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-
 export enum MessageSource {
   Babel,
   Forget,
@@ -28,7 +27,7 @@ export interface Message {
 export function createMessage(
   message: string,
   level: MessageLevel,
-  source: MessageSource
+  source: MessageSource,
 ): Message {
   const [title, ...body] = message.split("\n");
   const codeframe = body.length > 0 ? body.join("\n") : undefined;

compiler/apps/playground/scripts/downloadFonts.js

@@ -10,11 +10,11 @@ const { execSync } = require("child_process");
 // So that we don't need to check them into the repo.
 // See https://github.com/reactjs/reactjs.org/blob/main/beta/scripts/downloadFonts.js.
 execSync(
-  "curl https://conf.reactjs.org/fonts/Optimistic_Display_W_Lt.woff2 --output public/fonts/Optimistic_Display_W_Lt.woff2"
+  "curl https://conf.reactjs.org/fonts/Optimistic_Display_W_Lt.woff2 --output public/fonts/Optimistic_Display_W_Lt.woff2",
 );
 execSync(
-  "curl https://conf.reactjs.org/fonts/Optimistic_Display_W_Md.woff2 --output public/fonts/Optimistic_Display_W_Md.woff2"
+  "curl https://conf.reactjs.org/fonts/Optimistic_Display_W_Md.woff2 --output public/fonts/Optimistic_Display_W_Md.woff2",
 );
 execSync(
-  "curl https://conf.reactjs.org/fonts/Optimistic_Display_W_Bd.woff2 --output public/fonts/Optimistic_Display_W_Bd.woff2"
+  "curl https://conf.reactjs.org/fonts/Optimistic_Display_W_Bd.woff2 --output public/fonts/Optimistic_Display_W_Bd.woff2",
 );

compiler/package.json

@@ -24,6 +24,8 @@
     "build": "yarn workspaces run build",
     "dev": "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 && yarn workspace playground run dev\"",
     "test": "yarn workspaces run test",
+    "prettier:write": "prettier --write . --log-level=warn",
+    "prettier:ci": "prettier --check . --log-level=warn",
     "snap": "yarn workspace babel-plugin-react-compiler run snap",
     "snap:build": "yarn workspace snap run build",
     "postinstall": "perl -p -i -e 's/react\\.element/react.transitional.element/' packages/snap/node_modules/fbt/lib/FbtReactUtil.js && perl -p -i -e 's/didWarnAboutUsingAct = false;/didWarnAboutUsingAct = true;/' packages/babel-plugin-react-compiler/node_modules/react-dom/cjs/react-dom-test-utils.development.js",
@@ -40,6 +42,7 @@
     "concurrently": "^7.4.0",
     "folder-hash": "^4.0.4",
     "ora": "5.4.1",
+    "prettier": "^3.2.5",
     "prompt-promise": "^1.0.3",
     "rollup": "^4.13.2",
     "rollup-plugin-banner2": "^1.2.3",

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

@@ -15,9 +15,6 @@
     "snap:build": "yarn workspace snap run build",
     "snap:ci": "yarn snap:build && yarn snap",
     "ts:analyze-trace": "scripts/ts-analyze-trace.sh",
-    "prettier": "node ./scripts/prettier.js write-changed",
-    "prettier:all": "node ./scripts/prettier.js write",
-    "prettier:ci": "prettier --check .",
     "lint": "yarn eslint src"
   },
   "dependencies": {
@@ -53,7 +50,6 @@
     "glob": "^7.1.6",
     "jest": "^29.0.3",
     "jest-environment-jsdom": "^29.0.3",
-    "prettier": "2.8.8",
     "react": "19.0.0-beta-b498834eab-20240506",
     "react-dom": "19.0.0-beta-b498834eab-20240506",
     "rimraf": "^3.0.2",

compiler/packages/babel-plugin-react-compiler/rollup.config.js

@@ -62,7 +62,7 @@ const DEV_ROLLUP_CONFIG = {
  */
 
 "use no memo";
-`
+`,
     ),
   ],
 };

compiler/packages/babel-plugin-react-compiler/scripts/babel-plugin-annotate-react-code.ts

@@ -10,7 +10,7 @@ import { NodePath } from "@babel/core";
 import * as t from "@babel/types";
 
 export default function AnnotateReactCodeBabelPlugin(
-  _babel: typeof BabelCore
+  _babel: typeof BabelCore,
 ): BabelCore.PluginObj {
   return {
     name: "annotate-react-code",
@@ -64,15 +64,15 @@ function buildTypeOfReactForget(): t.Statement {
             t.identifier("Symbol"),
             t.identifier("for"),
             false,
-            false
+            false,
           ),
-          [t.stringLiteral("react_forget")]
+          [t.stringLiteral("react_forget")],
         ),
         true,
-        false
+        false,
       ),
-      true
-    )
+      true,
+    ),
   );
 }
 
@@ -89,7 +89,7 @@ type BabelFn =
   | NodePath<t.ArrowFunctionExpression>;
 
 export function isComponentDeclaration(
-  node: t.FunctionDeclaration
+  node: t.FunctionDeclaration,
 ): node is ComponentDeclaration {
   return Object.prototype.hasOwnProperty.call(node, "__componentDeclaration");
 }
@@ -101,7 +101,7 @@ export function isComponentDeclaration(
 function isComponentOrHookLike(
   node: NodePath<
     t.FunctionDeclaration | t.ArrowFunctionExpression | t.FunctionExpression
-  >
+  >,
 ): boolean {
   const functionName = getFunctionName(node);
   // Check if the name is component or hook like:
@@ -197,7 +197,7 @@ function isMemoCallback(path: NodePath<t.Expression>): boolean {
 
 function isReactAPI(
   path: NodePath<t.Expression | t.PrivateName | t.V8IntrinsicIdentifier>,
-  functionName: string
+  functionName: string,
 ): boolean {
   const node = path.node;
   return (
@@ -239,7 +239,7 @@ function callsHooksOrCreatesJsx(node: NodePath<t.Node>): boolean {
 function getFunctionName(
   path: NodePath<
     t.FunctionDeclaration | t.ArrowFunctionExpression | t.FunctionExpression
-  >
+  >,
 ): NodePath<t.Expression> | null {
   if (path.isFunctionDeclaration()) {
     const id = path.get("id");

compiler/packages/babel-plugin-react-compiler/scripts/build-react-hooks-fixures.js

@@ -25,7 +25,7 @@ const FIXTURES_DIR = path.join(
   "__tests__",
   "fixtures",
   "compiler",
-  "rules-of-hooks"
+  "rules-of-hooks",
 );
 
 const PRETTIER_OPTIONS = prettier.resolveConfig.sync(FIXTURES_DIR, {
@@ -53,7 +53,7 @@ for (const fixture of fixtures) {
         environment: {
           validateHooksUsage: false,
         },
-      }
+      },
     );
     // Does the fixture pass with hooks validation enabled?
     try {
@@ -65,7 +65,7 @@ for (const fixture of fixtures) {
           environment: {
             validateHooksUsage: true,
           },
-        }
+        },
       );
     } catch (e) {
       passes = false;