refactor: migrate router to prettier formatting (#54318)

Migrate formatting to prettier for router from clang-format

PR Close #54318

Author: josephperrott

.ng-dev/format.mts

@@ -20,6 +20,7 @@ export const format: FormatConfig = {
       'packages/examples/**/*.{js,ts}',
       'packages/misc/**/*.{js,ts}',
       'packages/private/**/*.{js,ts}',
+      'packages/router/**/*.{js,ts}',
       'packages/service-worker/**/*.{js,ts}',
       'packages/upgrade/**/*.{js,ts}',
 
@@ -33,7 +34,7 @@ export const format: FormatConfig = {
   },
   'clang-format': {
     'matchers': [
-      //'**/*.{js,ts}',
+      '**/*.{js,ts}',
       // TODO: burn down format failures and remove aio and integration exceptions.
       '!aio/**',
       '!integration/**',
@@ -70,6 +71,7 @@ export const format: FormatConfig = {
       '!packages/examples/**/*.{js,ts}',
       '!packages/misc/**/*.{js,ts}',
       '!packages/private/**/*.{js,ts}',
+      '!packages/router/**/*.{js,ts}',
       '!packages/service-worker/**/*.{js,ts}',
       '!packages/upgrade/**/*.{js,ts}',
     ],

.prettierrc

@@ -2,6 +2,7 @@
   "printWidth": 100,
   "tabWidth": 2,
   "tabs": false,
+  "embeddedLanguageFormatting": "off",
   "singleQuote": true,
   "semicolon": true,
   "quoteProps": "preserve",

packages/router/src/apply_redirects.ts

@@ -16,9 +16,8 @@ import {navigationCancelingError} from './navigation_canceling_error';
 import {Params, PRIMARY_OUTLET} from './shared';
 import {UrlSegment, UrlSegmentGroup, UrlSerializer, UrlTree} from './url_tree';
 
-
 export class NoMatch {
-  public segmentGroup: UrlSegmentGroup|null;
+  public segmentGroup: UrlSegmentGroup | null;
 
   constructor(segmentGroup?: UrlSegmentGroup) {
     this.segmentGroup = segmentGroup || null;
@@ -40,23 +39,30 @@ export function absoluteRedirect(newTree: UrlTree): Observable<any> {
 }
 
 export function namedOutletsRedirect(redirectTo: string): Observable<any> {
-  return throwError(new RuntimeError(
+  return throwError(
+    new RuntimeError(
       RuntimeErrorCode.NAMED_OUTLET_REDIRECT,
       (typeof ngDevMode === 'undefined' || ngDevMode) &&
-          `Only absolute redirects can have named outlets. redirectTo: '${redirectTo}'`));
+        `Only absolute redirects can have named outlets. redirectTo: '${redirectTo}'`,
+    ),
+  );
 }
 
 export function canLoadFails(route: Route): Observable<LoadedRouterConfig> {
-  return throwError(navigationCancelingError(
+  return throwError(
+    navigationCancelingError(
       (typeof ngDevMode === 'undefined' || ngDevMode) &&
-          `Cannot load children because the guard of the route "path: '${
-              route.path}'" returned false`,
-      NavigationCancellationCode.GuardRejected));
+        `Cannot load children because the guard of the route "path: '${route.path}'" returned false`,
+      NavigationCancellationCode.GuardRejected,
+    ),
+  );
 }
 
-
 export class ApplyRedirects {
-  constructor(private urlSerializer: UrlSerializer, private urlTree: UrlTree) {}
+  constructor(
+    private urlSerializer: UrlSerializer,
+    private urlTree: UrlTree,
+  ) {}
 
   lineralizeSegments(route: Route, urlTree: UrlTree): Observable<UrlSegment[]> {
     let res: UrlSegment[] = [];
@@ -76,22 +82,34 @@ export class ApplyRedirects {
   }
 
   applyRedirectCommands(
-      segments: UrlSegment[], redirectTo: string, posParams: {[k: string]: UrlSegment}): UrlTree {
+    segments: UrlSegment[],
+    redirectTo: string,
+    posParams: {[k: string]: UrlSegment},
+  ): UrlTree {
     const newTree = this.applyRedirectCreateUrlTree(
-        redirectTo, this.urlSerializer.parse(redirectTo), segments, posParams);
+      redirectTo,
+      this.urlSerializer.parse(redirectTo),
+      segments,
+      posParams,
+    );
     if (redirectTo.startsWith('/')) {
       throw new AbsoluteRedirect(newTree);
     }
     return newTree;
   }
 
   applyRedirectCreateUrlTree(
-      redirectTo: string, urlTree: UrlTree, segments: UrlSegment[],
-      posParams: {[k: string]: UrlSegment}): UrlTree {
+    redirectTo: string,
+    urlTree: UrlTree,
+    segments: UrlSegment[],
+    posParams: {[k: string]: UrlSegment},
+  ): UrlTree {
     const newRoot = this.createSegmentGroup(redirectTo, urlTree.root, segments, posParams);
     return new UrlTree(
-        newRoot, this.createQueryParams(urlTree.queryParams, this.urlTree.queryParams),
-        urlTree.fragment);
+      newRoot,
+      this.createQueryParams(urlTree.queryParams, this.urlTree.queryParams),
+      urlTree.fragment,
+    );
   }
 
   createQueryParams(redirectToParams: Params, actualParams: Params): Params {
@@ -109,8 +127,11 @@ export class ApplyRedirects {
   }
 
   createSegmentGroup(
-      redirectTo: string, group: UrlSegmentGroup, segments: UrlSegment[],
-      posParams: {[k: string]: UrlSegment}): UrlSegmentGroup {
+    redirectTo: string,
+    group: UrlSegmentGroup,
+    segments: UrlSegment[],
+    posParams: {[k: string]: UrlSegment},
+  ): UrlSegmentGroup {
     const updatedSegments = this.createSegments(redirectTo, group.segments, segments, posParams);
 
     let children: {[n: string]: UrlSegmentGroup} = {};
@@ -122,22 +143,30 @@ export class ApplyRedirects {
   }
 
   createSegments(
-      redirectTo: string, redirectToSegments: UrlSegment[], actualSegments: UrlSegment[],
-      posParams: {[k: string]: UrlSegment}): UrlSegment[] {
-    return redirectToSegments.map(
-        s => s.path.startsWith(':') ? this.findPosParam(redirectTo, s, posParams) :
-                                      this.findOrReturn(s, actualSegments));
+    redirectTo: string,
+    redirectToSegments: UrlSegment[],
+    actualSegments: UrlSegment[],
+    posParams: {[k: string]: UrlSegment},
+  ): UrlSegment[] {
+    return redirectToSegments.map((s) =>
+      s.path.startsWith(':')
+        ? this.findPosParam(redirectTo, s, posParams)
+        : this.findOrReturn(s, actualSegments),
+    );
   }
 
   findPosParam(
-      redirectTo: string, redirectToUrlSegment: UrlSegment,
-      posParams: {[k: string]: UrlSegment}): UrlSegment {
+    redirectTo: string,
+    redirectToUrlSegment: UrlSegment,
+    posParams: {[k: string]: UrlSegment},
+  ): UrlSegment {
     const pos = posParams[redirectToUrlSegment.path.substring(1)];
     if (!pos)
       throw new RuntimeError(
-          RuntimeErrorCode.MISSING_REDIRECT,
-          (typeof ngDevMode === 'undefined' || ngDevMode) &&
-              `Cannot redirect to '${redirectTo}'. Cannot find '${redirectToUrlSegment.path}'.`);
+        RuntimeErrorCode.MISSING_REDIRECT,
+        (typeof ngDevMode === 'undefined' || ngDevMode) &&
+          `Cannot redirect to '${redirectTo}'. Cannot find '${redirectToUrlSegment.path}'.`,
+      );
     return pos;
   }
 

packages/router/src/components/empty_outlet.ts

@@ -24,7 +24,6 @@ import {RouterOutlet} from '../directives/router_outlet';
   imports: [RouterOutlet],
   standalone: true,
 })
-export class ɵEmptyOutletComponent {
-}
+export class ɵEmptyOutletComponent {}
 
 export {ɵEmptyOutletComponent as EmptyOutletComponent};

packages/router/src/create_router_state.ts

@@ -9,19 +9,28 @@
 import {BehaviorSubject} from 'rxjs';
 
 import {DetachedRouteHandleInternal, RouteReuseStrategy} from './route_reuse_strategy';
-import {ActivatedRoute, ActivatedRouteSnapshot, RouterState, RouterStateSnapshot} from './router_state';
+import {
+  ActivatedRoute,
+  ActivatedRouteSnapshot,
+  RouterState,
+  RouterStateSnapshot,
+} from './router_state';
 import {TreeNode} from './utils/tree';
 
 export function createRouterState(
-    routeReuseStrategy: RouteReuseStrategy, curr: RouterStateSnapshot,
-    prevState: RouterState): RouterState {
+  routeReuseStrategy: RouteReuseStrategy,
+  curr: RouterStateSnapshot,
+  prevState: RouterState,
+): RouterState {
   const root = createNode(routeReuseStrategy, curr._root, prevState ? prevState._root : undefined);
   return new RouterState(root, curr);
 }
 
 function createNode(
-    routeReuseStrategy: RouteReuseStrategy, curr: TreeNode<ActivatedRouteSnapshot>,
-    prevState?: TreeNode<ActivatedRoute>): TreeNode<ActivatedRoute> {
+  routeReuseStrategy: RouteReuseStrategy,
+  curr: TreeNode<ActivatedRouteSnapshot>,
+  prevState?: TreeNode<ActivatedRoute>,
+): TreeNode<ActivatedRoute> {
   // reuse an activated route that is currently displayed on the screen
   if (prevState && routeReuseStrategy.shouldReuseRoute(curr.value, prevState.value.snapshot)) {
     const value = prevState.value;
@@ -35,21 +44,23 @@ function createNode(
       if (detachedRouteHandle !== null) {
         const tree = (detachedRouteHandle as DetachedRouteHandleInternal).route;
         tree.value._futureSnapshot = curr.value;
-        tree.children = curr.children.map(c => createNode(routeReuseStrategy, c));
+        tree.children = curr.children.map((c) => createNode(routeReuseStrategy, c));
         return tree;
       }
     }
 
     const value = createActivatedRoute(curr.value);
-    const children = curr.children.map(c => createNode(routeReuseStrategy, c));
+    const children = curr.children.map((c) => createNode(routeReuseStrategy, c));
     return new TreeNode<ActivatedRoute>(value, children);
   }
 }
 
 function createOrReuseChildren(
-    routeReuseStrategy: RouteReuseStrategy, curr: TreeNode<ActivatedRouteSnapshot>,
-    prevState: TreeNode<ActivatedRoute>) {
-  return curr.children.map(child => {
+  routeReuseStrategy: RouteReuseStrategy,
+  curr: TreeNode<ActivatedRouteSnapshot>,
+  prevState: TreeNode<ActivatedRoute>,
+) {
+  return curr.children.map((child) => {
     for (const p of prevState.children) {
       if (routeReuseStrategy.shouldReuseRoute(child.value, p.value.snapshot)) {
         return createNode(routeReuseStrategy, child, p);
@@ -61,6 +72,13 @@ function createOrReuseChildren(
 
 function createActivatedRoute(c: ActivatedRouteSnapshot) {
   return new ActivatedRoute(
-      new BehaviorSubject(c.url), new BehaviorSubject(c.params), new BehaviorSubject(c.queryParams),
-      new BehaviorSubject(c.fragment), new BehaviorSubject(c.data), c.outlet, c.component, c);
+    new BehaviorSubject(c.url),
+    new BehaviorSubject(c.params),
+    new BehaviorSubject(c.queryParams),
+    new BehaviorSubject(c.fragment),
+    new BehaviorSubject(c.data),
+    c.outlet,
+    c.component,
+    c,
+  );
 }