Compiler: unfork prettier config (#30205)

Updates the prettier config to format all `.ts` and `.tsx` files in the
repo using the existing defaults and removing overrides.

The first commit in this PR contains the config changes, the second is
just the result of running `yarn prettier-all`.

Author: kassens

.prettierrc.js

@@ -1,10 +1,6 @@
 'use strict';
 
-const {
-  compilerPaths,
-  esNextPaths,
-  typescriptPaths,
-} = require('./scripts/shared/pathsByLanguageVersion');
+const {esNextPaths} = require('./scripts/shared/pathsByLanguageVersion');
 
 module.exports = {
   bracketSpacing: false,
@@ -28,25 +24,11 @@ module.exports = {
       },
     },
     {
-      files: typescriptPaths,
+      files: ['*.ts', '*.tsx'],
       options: {
         trailingComma: 'all',
         parser: 'typescript',
       },
     },
-    {
-      files: compilerPaths,
-      options: {
-        requirePragma: false,
-        parser: 'babel-ts',
-        semi: true,
-        singleQuote: false,
-        trailingComma: 'es5',
-        bracketSpacing: true,
-        bracketSameLine: false,
-        printWidth: 80,
-        arrowParens: 'always',
-      },
-    },
   ],
 };

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

@@ -5,8 +5,8 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { expect, test } from "@playwright/test";
-import { encodeStore, type Store } from "../../lib/stores";
+import {expect, test} from '@playwright/test';
+import {encodeStore, type Store} from '../../lib/stores';
 
 const STORE: Store = {
   source: `export default function TestComponent({ x }) {
@@ -17,33 +17,33 @@ const STORE: Store = {
 const HASH = encodeStore(STORE);
 
 function concat(data: Array<string>): string {
-  return data.join("");
+  return data.join('');
 }
 
-test("editor should compile successfully", async ({ page }) => {
-  await page.goto(`/#${HASH}`, { waitUntil: "networkidle" });
+test('editor should compile successfully', async ({page}) => {
+  await page.goto(`/#${HASH}`, {waitUntil: 'networkidle'});
   await page.screenshot({
     fullPage: true,
-    path: "test-results/00-on-networkidle.png",
+    path: 'test-results/00-on-networkidle.png',
   });
 
   // User input from hash compiles
   await page.screenshot({
     fullPage: true,
-    path: "test-results/01-show-js-before.png",
+    path: 'test-results/01-show-js-before.png',
   });
   const userInput =
-    (await page.locator(".monaco-editor").nth(2).allInnerTexts()) ?? [];
-  expect(concat(userInput)).toMatchSnapshot("user-input.txt");
+    (await page.locator('.monaco-editor').nth(2).allInnerTexts()) ?? [];
+  expect(concat(userInput)).toMatchSnapshot('user-input.txt');
 
   // Reset button works
-  page.on("dialog", (dialog) => dialog.accept());
-  await page.getByRole("button", { name: "Reset" }).click();
+  page.on('dialog', dialog => dialog.accept());
+  await page.getByRole('button', {name: 'Reset'}).click();
   await page.screenshot({
     fullPage: true,
-    path: "test-results/02-show-js-after.png",
+    path: 'test-results/02-show-js-after.png',
   });
   const defaultInput =
-    (await page.locator(".monaco-editor").nth(2).allInnerTexts()) ?? [];
-  expect(concat(defaultInput)).toMatchSnapshot("default-input.txt");
+    (await page.locator('.monaco-editor').nth(2).allInnerTexts()) ?? [];
+  expect(concat(defaultInput)).toMatchSnapshot('default-input.txt');
 });

compiler/apps/playground/app/index.tsx

@@ -5,25 +5,24 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import type { NextPage } from "next";
-import Head from "next/head";
-import { SnackbarProvider } from "notistack";
-import { Editor, Header, StoreProvider } from "../components";
-import MessageSnackbar from "../components/Message";
+import type {NextPage} from 'next';
+import Head from 'next/head';
+import {SnackbarProvider} from 'notistack';
+import {Editor, Header, StoreProvider} from '../components';
+import MessageSnackbar from '../components/Message';
 
 const Home: NextPage = () => {
   return (
     <div className="flex flex-col w-screen h-screen font-light">
       <Head>
         <title>
-          {process.env.NODE_ENV === "development"
-            ? "[DEV] React Compiler Playground"
-            : "React Compiler Playground"}
+          {process.env.NODE_ENV === 'development'
+            ? '[DEV] React Compiler Playground'
+            : 'React Compiler Playground'}
         </title>
         <meta
           name="viewport"
-          content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"
-        ></meta>
+          content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"></meta>
         <link rel="icon" href="/favicon.ico" />
         <link rel="manifest" href="/site.webmanifest" />
         <link
@@ -45,8 +44,7 @@ const Home: NextPage = () => {
         <SnackbarProvider
           preventDuplicate
           maxSnack={10}
-          Components={{ message: MessageSnackbar }}
-        >
+          Components={{message: MessageSnackbar}}>
           <Header />
           <Editor />
         </SnackbarProvider>

compiler/apps/playground/app/layout.tsx

@@ -5,26 +5,21 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import "../styles/globals.css";
+import '../styles/globals.css';
 
-export default function RootLayout({
-  children,
-}: {
-  children: React.ReactNode;
-}) {
-  "use no memo";
+export default function RootLayout({children}: {children: React.ReactNode}) {
+  'use no memo';
   return (
     <html lang="en">
       <head>
         <title>
-          {process.env.NODE_ENV === "development"
-            ? "[DEV] React Compiler Playground"
-            : "React Compiler Playground"}
+          {process.env.NODE_ENV === 'development'
+            ? '[DEV] React Compiler Playground'
+            : 'React Compiler Playground'}
         </title>
         <meta
           name="viewport"
-          content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"
-        ></meta>
+          content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"></meta>
         <link rel="icon" href="/favicon.ico" />
         <link rel="manifest" href="/site.webmanifest" />
         <link

compiler/apps/playground/app/page.tsx

@@ -5,20 +5,19 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-"use client";
+'use client';
 
-import { SnackbarProvider } from "notistack";
-import { Editor, Header, StoreProvider } from "../components";
-import MessageSnackbar from "../components/Message";
+import {SnackbarProvider} from 'notistack';
+import {Editor, Header, StoreProvider} from '../components';
+import MessageSnackbar from '../components/Message';
 
 export default function Hoot() {
   return (
     <StoreProvider>
       <SnackbarProvider
         preventDuplicate
         maxSnack={10}
-        Components={{ message: MessageSnackbar }}
-      >
+        Components={{message: MessageSnackbar}}>
         <Header />
         <Editor />
       </SnackbarProvider>

compiler/apps/playground/babel.config.js

@@ -8,12 +8,12 @@
 module.exports = function (api) {
   api.cache(true);
   return {
-    presets: ["next/babel"],
+    presets: ['next/babel'],
     plugins: [
       [
-        "babel-plugin-react-compiler",
+        'babel-plugin-react-compiler',
         {
-          runtimeModule: "react-compiler-runtime",
+          runtimeModule: 'react-compiler-runtime',
         },
       ],
     ],

compiler/apps/playground/colors.js

@@ -11,86 +11,86 @@
 
 module.exports = {
   // Text colors
-  primary: "#23272F", // gray-90
-  "primary-dark": "#F6F7F9", // gray-5
-  secondary: "#404756", // gray-70
-  "secondary-dark": "#EBECF0", // gray-10
-  link: "#087EA4", // blue-50
-  "link-dark": "#149ECA", // blue-40
-  syntax: "#EBECF0", // gray-10
-  wash: "#FFFFFF",
-  "wash-dark": "#23272F", // gray-90
-  card: "#F6F7F9", // gray-05
-  "card-dark": "#343A46", // gray-80
-  highlight: "#E6F7FF", // blue-10
-  "highlight-dark": "rgba(88,175,223,.1)",
-  border: "#EBECF0", // gray-10
-  "border-dark": "#343A46", // gray-80
-  "secondary-button": "#EBECF0", // gray-10
-  "secondary-button-dark": "#404756", // gray-70
+  primary: '#23272F', // gray-90
+  'primary-dark': '#F6F7F9', // gray-5
+  secondary: '#404756', // gray-70
+  'secondary-dark': '#EBECF0', // gray-10
+  link: '#087EA4', // blue-50
+  'link-dark': '#149ECA', // blue-40
+  syntax: '#EBECF0', // gray-10
+  wash: '#FFFFFF',
+  'wash-dark': '#23272F', // gray-90
+  card: '#F6F7F9', // gray-05
+  'card-dark': '#343A46', // gray-80
+  highlight: '#E6F7FF', // blue-10
+  'highlight-dark': 'rgba(88,175,223,.1)',
+  border: '#EBECF0', // gray-10
+  'border-dark': '#343A46', // gray-80
+  'secondary-button': '#EBECF0', // gray-10
+  'secondary-button-dark': '#404756', // gray-70
 
   // Gray
-  "gray-95": "#16181D",
-  "gray-90": "#23272F",
-  "gray-80": "#343A46",
-  "gray-70": "#404756",
-  "gray-60": "#4E5769",
-  "gray-50": "#5E687E", // unused
-  "gray-40": "#78839B",
-  "gray-30": "#99A1B3",
-  "gray-20": "#BCC1CD",
-  "gray-10": "#EBECF0",
-  "gray-5": "#F6F7F9",
+  'gray-95': '#16181D',
+  'gray-90': '#23272F',
+  'gray-80': '#343A46',
+  'gray-70': '#404756',
+  'gray-60': '#4E5769',
+  'gray-50': '#5E687E', // unused
+  'gray-40': '#78839B',
+  'gray-30': '#99A1B3',
+  'gray-20': '#BCC1CD',
+  'gray-10': '#EBECF0',
+  'gray-5': '#F6F7F9',
 
   // Blue
-  "blue-60": "#045975",
-  "blue-50": "#087EA4",
-  "blue-40": "#149ECA", // Brand Blue
-  "blue-30": "#58C4DC", // unused
-  "blue-20": "#ABE2ED",
-  "blue-10": "#E6F7FF", // todo: doesn't match illustrations
-  "blue-5": "#E6F6FA",
+  'blue-60': '#045975',
+  'blue-50': '#087EA4',
+  'blue-40': '#149ECA', // Brand Blue
+  'blue-30': '#58C4DC', // unused
+  'blue-20': '#ABE2ED',
+  'blue-10': '#E6F7FF', // todo: doesn't match illustrations
+  'blue-5': '#E6F6FA',
 
   // Yellow
-  "yellow-60": "#B65700",
-  "yellow-50": "#C76A15",
-  "yellow-40": "#DB7D27", // unused
-  "yellow-30": "#FABD62", // unused
-  "yellow-20": "#FCDEB0", // unused
-  "yellow-10": "#FDE7C7",
-  "yellow-5": "#FEF5E7",
+  'yellow-60': '#B65700',
+  'yellow-50': '#C76A15',
+  'yellow-40': '#DB7D27', // unused
+  'yellow-30': '#FABD62', // unused
+  'yellow-20': '#FCDEB0', // unused
+  'yellow-10': '#FDE7C7',
+  'yellow-5': '#FEF5E7',
 
   // Purple
-  "purple-60": "#2B3491", // unused
-  "purple-50": "#575FB7",
-  "purple-40": "#6B75DB",
-  "purple-30": "#8891EC",
-  "purple-20": "#C3C8F5", // unused
-  "purple-10": "#E7E9FB",
-  "purple-5": "#F3F4FD",
+  'purple-60': '#2B3491', // unused
+  'purple-50': '#575FB7',
+  'purple-40': '#6B75DB',
+  'purple-30': '#8891EC',
+  'purple-20': '#C3C8F5', // unused
+  'purple-10': '#E7E9FB',
+  'purple-5': '#F3F4FD',
 
   // Green
-  "green-60": "#2B6E62",
-  "green-50": "#388F7F",
-  "green-40": "#44AC99",
-  "green-30": "#7FCCBF",
-  "green-20": "#ABDED5",
-  "green-10": "#E5F5F2",
-  "green-5": "#F4FBF9",
+  'green-60': '#2B6E62',
+  'green-50': '#388F7F',
+  'green-40': '#44AC99',
+  'green-30': '#7FCCBF',
+  'green-20': '#ABDED5',
+  'green-10': '#E5F5F2',
+  'green-5': '#F4FBF9',
 
   // RED
-  "red-60": "#712D28",
-  "red-50": "#A6423A", // unused
-  "red-40": "#C1554D",
-  "red-30": "#D07D77",
-  "red-20": "#E5B7B3", // unused
-  "red-10": "#F2DBD9", // unused
-  "red-5": "#FAF1F0",
+  'red-60': '#712D28',
+  'red-50': '#A6423A', // unused
+  'red-40': '#C1554D',
+  'red-30': '#D07D77',
+  'red-20': '#E5B7B3', // unused
+  'red-10': '#F2DBD9', // unused
+  'red-5': '#FAF1F0',
 
   // MISC
-  "code-block": "#99a1b30f", // gray-30 @ 6%
-  "gradient-blue": "#58C4DC", // Only used for the landing gradient for now.
+  'code-block': '#99a1b30f', // gray-30 @ 6%
+  'gradient-blue': '#58C4DC', // Only used for the landing gradient for now.
   github: {
-    highlight: "#fffbdd",
+    highlight: '#fffbdd',
   },
 };