[compiler] Run prettier, fix snap

This commit will be ignored in .git-blame-ignore-revs

ghstack-source-id: ac728261488a49034dd2b8f23d4b58fd23c87f46
Pull Request resolved: facebook/react#29214

.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/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/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;

compiler/packages/babel-plugin-react-compiler/scripts/jest/makeSnapshotResolver.js

@@ -14,7 +14,7 @@ module.exports = function makeSnapshotResolver(useForget) {
     resolveTestPath: (snapshotFilePath, snapshotExtension) =>
       snapshotFilePath.slice(
         0,
-        -modeExtension.length - snapshotExtension.length
+        -modeExtension.length - snapshotExtension.length,
       ),
 
     testPathForConsistencyCheck: "some/__tests__/example.test.js",

compiler/packages/babel-plugin-react-compiler/scripts/jest/makeTransform.ts

@@ -48,7 +48,7 @@ module.exports = (useForget: boolean) => {
                      * (see https://github.com/jestjs/jest/blob/v29.6.2/packages/babel-jest/src/index.ts#L84)
                      */
                     compilerCacheKey: execSync(
-                      "yarn --silent --cwd ../.. hash packages/babel-plugin-react-compiler/dist"
+                      "yarn --silent --cwd ../.. hash packages/babel-plugin-react-compiler/dist",
                     ).toString(),
                     transformOptionsCacheKey: forgetOptions,
                     e2eTransformerCacheKey,
@@ -169,7 +169,7 @@ function ReactForgetFunctionTransform() {
         const filename = basename(state.file.opts.filename);
         if (fn.node.loc && fn.node.id) {
           console.log(
-            ` Compiling ${filename}:${fn.node.loc.start.line}:${fn.node.loc.start.column}  ${fn.node.id.name}`
+            ` Compiling ${filename}:${fn.node.loc.start.line}:${fn.node.loc.start.column}  ${fn.node.id.name}`,
           );
         } else {
           console.log(` Compiling ${filename} ${fn.node.id?.name}`);
@@ -183,7 +183,7 @@ function ReactForgetFunctionTransform() {
         "_c",
         null,
         null,
-        null
+        null,
       );
       compiledFns.add(compiled);
 
@@ -192,7 +192,7 @@ function ReactForgetFunctionTransform() {
         compiled.params,
         compiled.body,
         compiled.generator,
-        compiled.async
+        compiled.async,
       );
       fn.replaceWith(fun);
       fn.skip();

compiler/packages/babel-plugin-react-compiler/src/Babel/BabelPlugin.ts

@@ -18,7 +18,7 @@ import {
  * @returns
  */
 export default function BabelPluginReactCompiler(
-  _babel: typeof BabelCore
+  _babel: typeof BabelCore,
 ): BabelCore.PluginObj {
   return {
     name: "react-forget",

compiler/packages/babel-plugin-react-compiler/src/Babel/RunReactCompilerBabelPlugin.ts

@@ -18,7 +18,7 @@ export function runBabelPluginReactCompiler(
   file: string,
   language: "flow" | "typescript",
   options: Partial<PluginOptions> | null,
-  includeAst: boolean = false
+  includeAst: boolean = false,
 ): BabelCore.BabelFileResult {
   const ast = BabelParser.parse(text, {
     sourceFilename: file,
@@ -39,7 +39,7 @@ export function runBabelPluginReactCompiler(
   });
   invariant(
     result?.code != null,
-    `Expected BabelPluginReactForget to codegen successfully, got: ${result}`
+    `Expected BabelPluginReactForget to codegen successfully, got: ${result}`,
   );
   return result;
 }