[compiler] Run prettier, fix snap

After this is merged, I'll add it to .git-blame-ignore-revs. I can't do
it now as the hash will change after ghstack lands this stack.

ghstack-source-id: 8e90bf2614d10fe8735d15e70f6b10565e34e0a4
Pull Request resolved: #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

@@ -43,7 +43,7 @@ import {
 } from "./Output";
 
 function parseFunctions(
-  source: string,
+  source: string
 ): Array<
   NodePath<
     t.FunctionDeclaration | t.ArrowFunctionExpression | t.FunctionExpression
@@ -148,7 +148,7 @@ function isHookName(s: string): boolean {
 }
 
 function getReactFunctionType(
-  id: NodePath<t.Identifier | null | undefined>,
+  id: NodePath<t.Identifier | null | undefined>
 ): ReactFunctionType {
   if (id && id.node && id.isIdentifier()) {
     if (isHookName(id.node.name)) {
@@ -189,7 +189,7 @@ function compile(source: string): CompilerOutput {
             severity: ErrorSeverity.Todo,
             loc: fn.node.loc ?? null,
             suggestions: null,
-          }),
+          })
         );
         continue;
       }
@@ -205,7 +205,7 @@ function compile(source: string): CompilerOutput {
         "_c",
         null,
         null,
-        null,
+        null
       )) {
         const fnName = fn.node.id?.name ?? null;
         switch (result.kind) {
@@ -274,7 +274,7 @@ function compile(source: string): CompilerOutput {
           reason: `Unexpected failure when transforming input! ${err}`,
           loc: null,
           suggestions: null,
-        }),
+        })
       );
     }
   }
@@ -291,7 +291,7 @@ export default function Editor() {
   const { enqueueSnackbar } = useSnackbar();
   const compilerOutput = useMemo(
     () => compile(deferredStore.source),
-    [deferredStore.source],
+    [deferredStore.source]
   );
 
   useMountEffect(() => {
@@ -305,7 +305,7 @@ export default function Editor() {
         ...createMessage(
           "Bad URL - fell back to the default Playground.",
           MessageLevel.Info,
-          MessageSource.Playground,
+          MessageSource.Playground
         ),
       });
       mountStore = defaultStore;
@@ -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/Input.tsx

@@ -76,7 +76,7 @@ export default function Input({ errors }: Props) {
       allowSyntheticDefaultImports: true,
     };
     monaco.languages.typescript.javascriptDefaults.setCompilerOptions(
-      tscOptions,
+      tscOptions
     );
     monaco.languages.typescript.typescriptDefaults.setCompilerOptions({
       ...tscOptions,

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

@@ -106,7 +106,7 @@ async function tabify(source: string, compilerOutput: CompilerOutput) {
         output={text}
         diff={lastPassOutput ?? null}
         showInfoPanel={true}
-      ></TextTabContent>,
+      ></TextTabContent>
     );
     lastPassOutput = text;
   }
@@ -122,7 +122,7 @@ async function tabify(source: string, compilerOutput: CompilerOutput) {
         output={code}
         diff={null}
         showInfoPanel={false}
-      ></TextTabContent>,
+      ></TextTabContent>
     );
     if (sourceMapUrl) {
       reorderedTabs.set(
@@ -133,7 +133,7 @@ async function tabify(source: string, compilerOutput: CompilerOutput) {
             className="w-full h-monaco_small sm:h-monaco"
             title="Generated Code"
           />
-        </>,
+        </>
       );
     }
   }
@@ -145,16 +145,16 @@ async function tabify(source: string, compilerOutput: CompilerOutput) {
 
 async function codegen(
   ast: t.Program,
-  source: string,
+  source: string
 ): Promise<{ code: any; sourceMapUrl: string | null }> {
   const generated = generate(
     ast,
     { sourceMaps: true, sourceFileName: "input.js" },
-    source,
+    source
   );
   const sourceMapUrl = getSourceMapUrl(
     generated.code,
-    JSON.stringify(generated.map),
+    JSON.stringify(generated.map)
   );
   const codegenOutput = await prettier.format(generated.code, {
     semi: true,
@@ -172,14 +172,14 @@ function getSourceMapUrl(code: string, map: string): string | null {
   code = utf16ToUTF8(code);
   map = utf16ToUTF8(map);
   return `https://evanw.github.io/source-map-visualization/#${btoa(
-    `${code.length}\0${code}${map.length}\0${map}`,
+    `${code.length}\0${code}${map.length}\0${map}`
   )}`;
 }
 
 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(),
+    () => new Map()
   );
   useEffect(() => {
     tabify(store.source, compilerOutput).then((tabs) => {

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/Header.tsx

@@ -50,7 +50,7 @@ export default function Header() {
         <Logo
           className={clsx(
             "w-8 h-8 text-link",
-            process.env.NODE_ENV === "development" && "text-yellow-600",
+            process.env.NODE_ENV === "development" && "text-yellow-600"
           )}
         />
         <p className="hidden select-none sm:block">React Compiler Playground</p>

compiler/apps/playground/components/Icons/IconGitHub.tsx

@@ -21,5 +21,5 @@ export const IconGitHub = memo<JSX.IntrinsicElements["svg"]>(
         <path d="M10 0a10 10 0 0 0-3.16 19.49c.5.1.68-.22.68-.48l-.01-1.7c-2.78.6-3.37-1.34-3.37-1.34-.46-1.16-1.11-1.47-1.11-1.47-.9-.62.07-.6.07-.6 1 .07 1.53 1.03 1.53 1.03.9 1.52 2.34 1.08 2.91.83.1-.65.35-1.09.63-1.34-2.22-.25-4.55-1.11-4.55-4.94 0-1.1.39-1.99 1.03-2.69a3.6 3.6 0 0 1 .1-2.64s.84-.27 2.75 1.02a9.58 9.58 0 0 1 5 0c1.91-1.3 2.75-1.02 2.75-1.02.55 1.37.2 2.4.1 2.64.64.7 1.03 1.6 1.03 2.69 0 3.84-2.34 4.68-4.57 4.93.36.31.68.92.68 1.85l-.01 2.75c0 .26.18.58.69.48A10 10 0 0 0 10 0"></path>
       </svg>
     );
-  },
+  }
 );

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/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/reactCompilerMonacoDiagnostics.ts

@@ -14,7 +14,7 @@ import { MarkerSeverity, type editor } from "monaco-editor";
 
 function mapReactCompilerSeverityToMonaco(
   level: ErrorSeverity,
-  monaco: Monaco,
+  monaco: Monaco
 ): MarkerSeverity {
   switch (level) {
     case ErrorSeverity.Todo:
@@ -26,7 +26,7 @@ function mapReactCompilerSeverityToMonaco(
 
 function mapReactCompilerDiagnosticToMonacoMarker(
   detail: CompilerErrorDetail,
-  monaco: Monaco,
+  monaco: Monaco
 ): editor.IMarkerData | null {
   if (detail.loc == null || typeof detail.loc === "symbol") {
     return null;
@@ -70,7 +70,7 @@ export function renderReactCompilerMarkers({
           marker.startLineNumber,
           marker.startColumn,
           marker.endLineNumber,
-          marker.endColumn,
+          marker.endColumn
         ),
         options: {
           isWholeLine: true,
@@ -83,7 +83,7 @@ export function renderReactCompilerMarkers({
     monaco.editor.setModelMarkers(model, "owner", []);
     decorations = model.deltaDecorations(
       model.getAllDecorations().map((d) => d.id),
-      [],
+      []
     );
   }
 }

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,

compiler/apps/playground/next.config.js

@@ -23,15 +23,15 @@ const nextConfig = {
         new MonacoWebpackPlugin({
           languages: ["typescript", "javascript"],
           filename: "static/[name].worker.js",
-        }),
+        })
       );
     }
 
     config.resolve.alias = {
       ...config.resolve.alias,
       "react-compiler-runtime": path.resolve(
         __dirname,
-        "../../packages/react-compiler-runtime",
+        "../../packages/react-compiler-runtime"
       ),
     };
 

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

@@ -78,7 +78,7 @@ export type ReactiveInstructionStatement = {
 };
 
 export type ReactiveTerminalStatement<
-  Tterminal extends ReactiveTerminal = ReactiveTerminal
+  Tterminal extends ReactiveTerminal = ReactiveTerminal,
 > = {
   kind: "terminal";
   terminal: Tterminal;

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

@@ -876,7 +876,7 @@ export function mapTerminalSuccessors(
 
 export function terminalHasFallthrough<
   T extends Terminal,
-  U extends T & { fallthrough: BlockId }
+  U extends T & { fallthrough: BlockId },
 >(terminal: T): terminal is U {
   switch (terminal.kind) {
     case "maybe-throw":

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

@@ -257,7 +257,7 @@ export type Transformed<T> =
   | { kind: "replace-many"; value: Array<T> };
 
 export class ReactiveFunctionTransform<
-  TState = void
+  TState = void,
 > extends ReactiveFunctionVisitor<TState> {
   override traverseBlock(block: ReactiveBlock, state: TState): void {
     let nextBlock: ReactiveBlock | null = null;

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allocating-logical-expression-instruction-scope.expect.md

@@ -24,8 +24,7 @@ export const FIXTURE_ENTRYPOINT = {
 ## Code
 
 ```javascript
-import { c as _c } from "react/compiler-runtime";
-/**
+import { c as _c } from "react/compiler-runtime"; /**
  * This is a weird case as data has type `BuiltInMixedReadonly`.
  * The only scoped value we currently infer in this program is the
  * PropertyLoad `data?.toString`.