build: align formatting config with other repos

Aligns the Prettier config with the other Angular projects.

Author: crisbeto

.prettierrc.json

@@ -1,9 +1,11 @@
 {
-  "semi": true,
-  "trailingComma": "es5",
+  "printWidth": 100,
   "singleQuote": true,
-  "printWidth": 80,
-  "tabWidth": 2,
+  "trailingComma": "all",
+  "quoteProps": "preserve",
+  "bracketSpacing": false,
+  "arrowParens": "avoid",
+  "embeddedLanguageFormatting": "off",
   "overrides": [
     {
       "files": "*.html",

report-app/report-server.ts

@@ -5,14 +5,11 @@ import {
   writeResponseToNodeResponse,
 } from '@angular/ssr/node';
 import express from 'express';
-import { dirname, isAbsolute, join, resolve } from 'node:path';
-import { fileURLToPath } from 'node:url';
-import {
-  FetchedLocalReports,
-  fetchReportsFromDisk,
-} from '../runner/reporting/report-local-disk';
-import { RunInfo } from '../runner/shared-interfaces';
-import { convertV2ReportToV3Report } from '../runner/reporting/migrations/v2_to_v3';
+import {dirname, isAbsolute, join, resolve} from 'node:path';
+import {fileURLToPath} from 'node:url';
+import {FetchedLocalReports, fetchReportsFromDisk} from '../runner/reporting/report-local-disk';
+import {RunInfo} from '../runner/shared-interfaces';
+import {convertV2ReportToV3Report} from '../runner/reporting/migrations/v2_to_v3';
 
 const app = express();
 const reportsLoader = await getReportLoader();
@@ -50,7 +47,7 @@ app.get('/api/reports/:id', async (req, res) => {
   }
 
   // Convert potential older v2 reports.
-  result = result.map((r) => convertV2ReportToV3Report(r));
+  result = result.map(r => convertV2ReportToV3Report(r));
 
   res.json(result);
 });
@@ -60,13 +57,13 @@ app.use(
     maxAge: '1y',
     index: false,
     redirect: false,
-  })
+  }),
 );
 
 app.use('/**', (req, res, next) => {
   angularApp
     .handle(req)
-    .then((response) => {
+    .then(response => {
       return response ? writeResponseToNodeResponse(response, res) : next();
     })
     .catch(next);
@@ -85,22 +82,19 @@ export const reqHandler = createNodeRequestHandler(app);
 
 interface ReportLoader {
   getGroupedReports: (groupId: string) => Promise<RunInfo[]>;
-  getGroupsList: () => Promise<{ id: string }[]>;
+  getGroupsList: () => Promise<{id: string}[]>;
   configureEndpoints?: (expressApp: typeof app) => Promise<void>;
 }
 
 /** Gets the server options from the command line. */
 function getOptions() {
   const defaultPort = 4200;
   const envPort = process.env['CODEGEN_REPORTS_PORT'];
-  const reportsRoot =
-    process.env['CODEGEN_REPORTS_DIR'] || './.web-codegen-scorer/reports';
+  const reportsRoot = process.env['CODEGEN_REPORTS_DIR'] || './.web-codegen-scorer/reports';
 
   return {
     port: envPort ? parseInt(envPort) || defaultPort : defaultPort,
-    reportsRoot: isAbsolute(reportsRoot)
-      ? reportsRoot
-      : join(process.cwd(), reportsRoot),
+    reportsRoot: isAbsolute(reportsRoot) ? reportsRoot : join(process.cwd(), reportsRoot),
   };
 }
 
@@ -118,9 +112,7 @@ async function getReportLoader() {
   const loaderImportPath = isAbsolute(reportLoaderPath)
     ? reportLoaderPath
     : join(process.cwd(), reportLoaderPath);
-  const importResult: { default: ReportLoader } = await import(
-    /* @vite-ignore */ loaderImportPath
-  );
+  const importResult: {default: ReportLoader} = await import(/* @vite-ignore */ loaderImportPath);
 
   if (
     !importResult.default ||
@@ -129,7 +121,7 @@ async function getReportLoader() {
   ) {
     throw new Error(
       'Invalid remote import loader. The file must have a default export ' +
-        'with `getGroupedReports` and `getGroupsList` functions.'
+        'with `getGroupedReports` and `getGroupsList` functions.',
     );
   }
 
@@ -140,7 +132,7 @@ async function resolveLocalData(directory: string) {
   // Reuse the same promise so that concurrent requests get the same response.
   if (!localDataPromise) {
     let resolveFn: (data: FetchedLocalReports) => void;
-    localDataPromise = new Promise((resolve) => (resolveFn = resolve));
+    localDataPromise = new Promise(resolve => (resolveFn = resolve));
     resolveFn!(await fetchReportsFromDisk(directory));
   }
 

report-app/src/app/app.config.server.ts

@@ -1,6 +1,6 @@
-import { provideServerRendering, RenderMode, withRoutes } from '@angular/ssr';
-import { mergeApplicationConfig, ApplicationConfig } from '@angular/core';
-import { appConfig } from './app.config';
+import {provideServerRendering, RenderMode, withRoutes} from '@angular/ssr';
+import {mergeApplicationConfig, ApplicationConfig} from '@angular/core';
+import {appConfig} from './app.config';
 
 const ssrAppConfig: ApplicationConfig = {
   providers: [
@@ -11,7 +11,7 @@ const ssrAppConfig: ApplicationConfig = {
           path: '**',
           renderMode: RenderMode.Server,
         },
-      ])
+      ]),
     ),
   ],
 };

report-app/src/app/app.config.ts

@@ -5,20 +5,16 @@ import {
   provideBrowserGlobalErrorListeners,
   provideZoneChangeDetection,
 } from '@angular/core';
-import {
-  provideRouter,
-  withComponentInputBinding,
-  withViewTransitions,
-} from '@angular/router';
+import {provideRouter, withComponentInputBinding, withViewTransitions} from '@angular/router';
 
-import { routes } from './app.routes';
-import { provideHttpClient, withFetch } from '@angular/common/http';
-import { GoogleChartsLoader } from './services/google-charts-loader';
+import {routes} from './app.routes';
+import {provideHttpClient, withFetch} from '@angular/common/http';
+import {GoogleChartsLoader} from './services/google-charts-loader';
 
 export const appConfig: ApplicationConfig = {
   providers: [
     provideBrowserGlobalErrorListeners(),
-    provideZoneChangeDetection({ eventCoalescing: true }),
+    provideZoneChangeDetection({eventCoalescing: true}),
     provideRouter(routes, withComponentInputBinding(), withViewTransitions()),
     provideHttpClient(withFetch()),
     provideAppInitializer(() => inject(GoogleChartsLoader).initialize()),

report-app/src/app/app.routes.ts

@@ -1,7 +1,7 @@
-import { Routes } from '@angular/router';
-import { ReportViewer } from './pages/report-viewer/report-viewer';
-import { ComparisonPage } from './pages/comparison/comparison';
-import { ReportListComponent } from './pages/report-list/report-list';
+import {Routes} from '@angular/router';
+import {ReportViewer} from './pages/report-viewer/report-viewer';
+import {ComparisonPage} from './pages/comparison/comparison';
+import {ReportListComponent} from './pages/report-list/report-list';
 
 export const routes: Routes = [
   {

report-app/src/app/app.spec.ts

@@ -1,5 +1,5 @@
-import { TestBed } from '@angular/core/testing';
-import { App } from './app';
+import {TestBed} from '@angular/core/testing';
+import {App} from './app';
 
 describe('App', () => {
   beforeEach(async () => {
@@ -18,8 +18,6 @@ describe('App', () => {
     const fixture = TestBed.createComponent(App);
     fixture.detectChanges();
     const compiled = fixture.nativeElement as HTMLElement;
-    expect(compiled.querySelector('h1')?.textContent).toContain(
-      'Hello, report-app'
-    );
+    expect(compiled.querySelector('h1')?.textContent).toContain('Hello, report-app');
   });
 });

report-app/src/app/app.ts

@@ -1,8 +1,8 @@
-import { Component, inject, PLATFORM_ID } from '@angular/core';
-import { RouterLink, RouterLinkActive, RouterOutlet } from '@angular/router';
-import { ReportsFetcher } from './services/reports-fetcher';
-import { isPlatformServer } from '@angular/common';
-import { AppColorMode } from './services/app-color-mode';
+import {Component, inject, PLATFORM_ID} from '@angular/core';
+import {RouterLink, RouterLinkActive, RouterOutlet} from '@angular/router';
+import {ReportsFetcher} from './services/reports-fetcher';
+import {isPlatformServer} from '@angular/common';
+import {AppColorMode} from './services/app-color-mode';
 
 @Component({
   selector: 'app-root',
@@ -21,8 +21,6 @@ export class App {
   protected groupsError = this.reportsFetcher.reportGroupsError;
 
   protected toggleColorMode() {
-    this.colorModeService.setColorMode(
-      this.colorMode() === 'light' ? 'dark' : 'light'
-    );
+    this.colorModeService.setColorMode(this.colorMode() === 'light' ? 'dark' : 'light');
   }
 }

report-app/src/app/pages/comparison/comparison.ts

@@ -1,13 +1,13 @@
-import { Component, computed, inject, linkedSignal } from '@angular/core';
-import { toSignal } from '@angular/core/rxjs-interop';
-import { map } from 'rxjs';
-import { ComparisonScoreDistribution } from '../../shared/comparison/comparison-score-distribution';
-import { ComparisonBuildDistribution } from '../../shared/comparison/comparison-build-distribution';
-import { ModelComparisonData } from '../../shared/comparison/comparison-data';
-import { ReportsFetcher } from '../../services/reports-fetcher';
-import { ReportSelect } from '../../shared/report-select/report-select';
-import { ComparisonRuntimeDistribution } from '../../shared/comparison/comparison-runtime-distribution';
-import { ActivatedRoute } from '@angular/router';
+import {Component, computed, inject, linkedSignal} from '@angular/core';
+import {toSignal} from '@angular/core/rxjs-interop';
+import {map} from 'rxjs';
+import {ComparisonScoreDistribution} from '../../shared/comparison/comparison-score-distribution';
+import {ComparisonBuildDistribution} from '../../shared/comparison/comparison-build-distribution';
+import {ModelComparisonData} from '../../shared/comparison/comparison-data';
+import {ReportsFetcher} from '../../services/reports-fetcher';
+import {ReportSelect} from '../../shared/report-select/report-select';
+import {ComparisonRuntimeDistribution} from '../../shared/comparison/comparison-runtime-distribution';
+import {ActivatedRoute} from '@angular/router';
 
 @Component({
   templateUrl: './comparison.html',
@@ -31,10 +31,10 @@ export class ComparisonPage {
     }),
     computation: () => {
       const allGroups = this.groups();
-      const results: { reportName: string; groupId: string | null }[] = [];
+      const results: {reportName: string; groupId: string | null}[] = [];
 
-      this.selectedGroups().forEach((id) => {
-        const correspondingGroup = allGroups.find((group) => group.id === id);
+      this.selectedGroups().forEach(id => {
+        const correspondingGroup = allGroups.find(group => group.id === id);
 
         if (correspondingGroup) {
           results.push({
@@ -50,34 +50,33 @@ export class ComparisonPage {
 
   readonly selectedGroups = toSignal<string[]>(
     this.route.queryParams.pipe(
-      map((params) => {
+      map(params => {
         const ids = params['groups'];
         return ids && Array.isArray(ids) ? ids : [];
-      })
+      }),
     ),
-    { requireSync: true }
+    {requireSync: true},
   );
 
   readonly comparisonModelData = computed(() => {
     const allGroups = this.groups();
     const selectedGroups = this.groupsToCompare()
-      .map((g) => ({
+      .map(g => ({
         reportName: g.reportName,
-        group: allGroups.find((current) => current.id === g.groupId)!,
+        group: allGroups.find(current => current.id === g.groupId)!,
       }))
-      .filter((g) => !!g.group);
+      .filter(g => !!g.group);
 
     if (selectedGroups.length < 2) {
       return null;
     }
 
     return {
       averageAppsCount: Math.floor(
-        selectedGroups.reduce((acc, r) => r.group.appsCount + acc, 0) /
-          selectedGroups.length
+        selectedGroups.reduce((acc, r) => r.group.appsCount + acc, 0) / selectedGroups.length,
       ),
       series: [
-        ...selectedGroups.map((r) => ({
+        ...selectedGroups.map(r => ({
           name: r.reportName,
           stats: r.group.stats,
           appsCount: r.group.appsCount,
@@ -86,15 +85,15 @@ export class ComparisonPage {
     } satisfies ModelComparisonData;
   });
 
-  protected updateReportName(report: { reportName: string }, newName: string) {
+  protected updateReportName(report: {reportName: string}, newName: string) {
     report.reportName = newName;
     this.groupsToCompare.set([...this.groupsToCompare()]);
   }
 
   protected setSelectedGroup(index: number, groupId: string | undefined) {
     const allGroups = this.groups();
     const current = this.groupsToCompare();
-    const correspondingGroup = allGroups.find((group) => group.id === groupId);
+    const correspondingGroup = allGroups.find(group => group.id === groupId);
 
     if (correspondingGroup) {
       current[index] = {