refactor(@angular/ssr): replace Map with Record in SSR manifest

alan-agius4 · alan-agius4 · commit e375edbec17a · 2024-12-03T13:58:15.000Z
Replaced `Map` with `Record` in SSR manifest to simplify structure and improve testing/setup.
diff --git a/packages/angular/build/src/utils/server-rendering/manifest.ts b/packages/angular/build/src/utils/server-rendering/manifest.ts
@@ -55,7 +55,7 @@ export function generateAngularServerAppEngineManifest(
   i18nOptions: NormalizedApplicationBuildOptions['i18nOptions'],
   baseHref: string | undefined,
 ): string {
-  const entryPointsContent: string[] = [];
+  const entryPoints: Record<string, string> = {};
 
   if (i18nOptions.shouldInline) {
     for (const locale of i18nOptions.inlineLocales) {
@@ -69,18 +69,22 @@ export function generateAngularServerAppEngineManifest(
       const end = localeWithBaseHref[localeWithBaseHref.length - 1] === '/' ? -1 : undefined;
       localeWithBaseHref = localeWithBaseHref.slice(start, end);
 
-      entryPointsContent.push(`['${localeWithBaseHref}', () => import('${importPath}')]`);
+      entryPoints[localeWithBaseHref] = `() => import('${importPath}')`;
     }
   } else {
-    entryPointsContent.push(`['', () => import('./${MAIN_SERVER_OUTPUT_FILENAME}')]`);
+    entryPoints[''] = `() => import('./${MAIN_SERVER_OUTPUT_FILENAME}')`;
   }
 
   const manifestContent = `
 export default {
   basePath: '${baseHref ?? '/'}',
-  entryPoints: new Map([${entryPointsContent.join(', \n')}]),
+  entryPoints: {
+    ${Object.entries(entryPoints)
+      .map(([key, value]) => `'${key}': ${value}`)
+      .join(',\n    ')}
+  },
 };
-  `;
+`;
 
   return manifestContent;
 }
@@ -122,7 +126,7 @@ export function generateAngularServerAppManifest(
   serverAssetsChunks: BuildOutputFile[];
 } {
   const serverAssetsChunks: BuildOutputFile[] = [];
-  const serverAssetsContent: string[] = [];
+  const serverAssets: Record<string, string> = {};
   for (const file of [...additionalHtmlOutputFiles.values(), ...outputFiles]) {
     const extension = extname(file.path);
     if (extension === '.html' || (inlineCriticalCss && extension === '.css')) {
@@ -135,9 +139,8 @@ export function generateAngularServerAppManifest(
         ),
       );
 
-      serverAssetsContent.push(
-        `['${file.path}', {size: ${file.size}, hash: '${file.hash}', text: () => import('./${jsChunkFilePath}').then(m => m.default)}]`,
-      );
+      serverAssets[file.path] =
+        `{size: ${file.size}, hash: '${file.hash}', text: () => import('./${jsChunkFilePath}').then(m => m.default)}`;
     }
   }
 
@@ -146,9 +149,13 @@ export default {
   bootstrap: () => import('./main.server.mjs').then(m => m.default),
   inlineCriticalCss: ${inlineCriticalCss},
   baseHref: '${baseHref}',
-  locale: ${locale !== undefined ? `'${locale}'` : undefined},
+  locale: ${JSON.stringify(locale)},
   routes: ${JSON.stringify(routes, undefined, 2)},
-  assets: new Map([\n${serverAssetsContent.join(', \n')}\n]),
+  assets: {
+    ${Object.entries(serverAssets)
+      .map(([key, value]) => `'${key}': ${value}`)
+      .join(',\n    ')}
+  },
 };
 `;
 
diff --git a/packages/angular/ssr/src/manifest.ts b/packages/angular/ssr/src/manifest.ts
@@ -10,7 +10,20 @@ import type { SerializableRouteTreeNode } from './routes/route-tree';
 import { AngularBootstrap } from './utils/ng';
 
 /**
- * Represents of a server asset stored in the manifest.
+ * Utility type that replaces all properties of type `Record<K, V>` with `ReadonlyMap<K, V>`.
+ */
+type TransformRecordWithReadonlyMap<T> = {
+  [K in keyof T]: T[K] extends (...args: unknown[]) => unknown // Check if it's a function
+    ? T[K] // Leave function properties untouched
+    : T[K] extends Readonly<Record<string, unknown>> // Check if it's a Readonly Record
+      ? T[K] extends Readonly<Record<infer RK, infer RV>>
+        ? ReadonlyMap<RK, RV> // Convert Readonly Record to ReadonlyMap
+        : never
+      : T[K]; // Leave other properties unchanged
+};
+
+/**
+ * Represents a server asset stored in the manifest.
  */
 export interface ServerAsset {
   /**
@@ -51,14 +64,14 @@ export interface EntryPointExports {
 /**
  * Manifest for the Angular server application engine, defining entry points.
  */
-export interface AngularAppEngineManifest {
+interface AngularAppEngineManifestConfig {
   /**
-   * A map of entry points for the server application.
-   * Each entry in the map consists of:
+   * A readonly record of entry points for the server application.
+   * Each entry consists of:
    * - `key`: The base href for the entry point.
    * - `value`: A function that returns a promise resolving to an object of type `EntryPointExports`.
    */
-  readonly entryPoints: ReadonlyMap<string, () => Promise<EntryPointExports>>;
+  readonly entryPoints: Readonly<Record<string, () => Promise<EntryPointExports>>>;
 
   /**
    * The base path for the server application.
@@ -67,23 +80,29 @@ export interface AngularAppEngineManifest {
   readonly basePath: string;
 }
 
+/**
+ * Manifest for the Angular server application engine, defining entry points.
+ */
+export type AngularAppEngineManifest =
+  TransformRecordWithReadonlyMap<AngularAppEngineManifestConfig>;
+
 /**
  * Manifest for a specific Angular server application, defining assets and bootstrap logic.
  */
-export interface AngularAppManifest {
+interface AngularAppManifestConfig {
   /**
    * The base href for the application.
    * This is used to determine the root path of the application.
    */
   readonly baseHref: string;
 
   /**
-   * A map of assets required by the server application.
-   * Each entry in the map consists of:
+   * A readonly record of assets required by the server application.
+   * Each entry consists of:
    * - `key`: The path of the asset.
-   * - `value`: A function returning a promise that resolves to the file contents of the asset.
+   * - `value`: An object of type `ServerAsset`.
    */
-  readonly assets: ReadonlyMap<string, ServerAsset>;
+  readonly assets: Readonly<Record<string, ServerAsset>>;
 
   /**
    * The bootstrap mechanism for the server application.
@@ -112,6 +131,11 @@ export interface AngularAppManifest {
   readonly locale?: string;
 }
 
+/**
+ * Manifest for a specific Angular server application, defining assets and bootstrap logic.
+ */
+export type AngularAppManifest = TransformRecordWithReadonlyMap<AngularAppManifestConfig>;
+
 /**
  * The Angular app manifest object.
  * This is used internally to store the current Angular app manifest.
@@ -123,8 +147,11 @@ let angularAppManifest: AngularAppManifest | undefined;
  *
  * @param manifest - The manifest object to set for the Angular application.
  */
-export function setAngularAppManifest(manifest: AngularAppManifest): void {
-  angularAppManifest = manifest;
+export function setAngularAppManifest(manifest: AngularAppManifestConfig): void {
+  angularAppManifest = {
+    ...manifest,
+    assets: new Map(Object.entries(manifest.assets)),
+  };
 }
 
 /**
@@ -155,8 +182,11 @@ let angularAppEngineManifest: AngularAppEngineManifest | undefined;
  *
  * @param manifest - The engine manifest object to set.
  */
-export function setAngularAppEngineManifest(manifest: AngularAppEngineManifest): void {
-  angularAppEngineManifest = manifest;
+export function setAngularAppEngineManifest(manifest: AngularAppEngineManifestConfig): void {
+  angularAppEngineManifest = {
+    ...manifest,
+    entryPoints: new Map(Object.entries(manifest.entryPoints)),
+  };
 }
 
 /**
diff --git a/packages/angular/ssr/test/app-engine_spec.ts b/packages/angular/ssr/test/app-engine_spec.ts
@@ -18,6 +18,57 @@ import { setAngularAppEngineManifest } from '../src/manifest';
 import { RenderMode } from '../src/routes/route-config';
 import { setAngularAppTestingManifest } from './testing-utils';
 
+function createEntryPoint(locale: string) {
+  return async () => {
+    @Component({
+      standalone: true,
+      selector: `app-ssr-${locale}`,
+      template: `SSR works ${locale.toUpperCase()}`,
+    })
+    class SSRComponent {}
+
+    @Component({
+      standalone: true,
+      selector: `app-ssg-${locale}`,
+      template: `SSG works ${locale.toUpperCase()}`,
+    })
+    class SSGComponent {}
+
+    setAngularAppTestingManifest(
+      [
+        { path: 'ssg', component: SSGComponent },
+        { path: 'ssr', component: SSRComponent },
+      ],
+      [
+        { path: 'ssg', renderMode: RenderMode.Prerender },
+        { path: '**', renderMode: RenderMode.Server },
+      ],
+      '/' + locale,
+      {
+        'ssg/index.html': {
+          size: 25,
+          hash: 'f799132d0a09e0fef93c68a12e443527700eb59e6f67fcb7854c3a60ff082fde',
+          text: async () => `<html>
+            <head>
+              <title>SSG page</title>
+              <base href="/${locale}" />
+            </head>
+            <body>
+              SSG works ${locale.toUpperCase()}
+            </body>
+          </html>
+        `,
+        },
+      },
+    );
+
+    return {
+      ɵgetOrCreateAngularServerApp: getOrCreateAngularServerApp,
+      ɵdestroyAngularServerApp: destroyAngularServerApp,
+    };
+  };
+}
+
 describe('AngularAppEngine', () => {
   let appEngine: AngularAppEngine;
 
@@ -28,59 +79,10 @@ describe('AngularAppEngine', () => {
       setAngularAppEngineManifest({
         // Note: Although we are testing only one locale, we need to configure two or more
         // to ensure that we test a different code path.
-        entryPoints: new Map(
-          ['it', 'en'].map((locale) => [
-            locale,
-            async () => {
-              @Component({
-                standalone: true,
-                selector: `app-ssr-${locale}`,
-                template: `SSR works ${locale.toUpperCase()}`,
-              })
-              class SSRComponent {}
-
-              @Component({
-                standalone: true,
-                selector: `app-ssg-${locale}`,
-                template: `SSG works ${locale.toUpperCase()}`,
-              })
-              class SSGComponent {}
-
-              setAngularAppTestingManifest(
-                [
-                  { path: 'ssg', component: SSGComponent },
-                  { path: 'ssr', component: SSRComponent },
-                ],
-                [
-                  { path: 'ssg', renderMode: RenderMode.Prerender },
-                  { path: '**', renderMode: RenderMode.Server },
-                ],
-                '/' + locale,
-                {
-                  'ssg/index.html': {
-                    size: 25,
-                    hash: 'f799132d0a09e0fef93c68a12e443527700eb59e6f67fcb7854c3a60ff082fde',
-                    text: async () => `<html>
-                      <head>
-                        <title>SSG page</title>
-                        <base href="/${locale}" />
-                      </head>
-                      <body>
-                        SSG works ${locale.toUpperCase()}
-                      </body>
-                    </html>
-                  `,
-                  },
-                },
-              );
-
-              return {
-                ɵgetOrCreateAngularServerApp: getOrCreateAngularServerApp,
-                ɵdestroyAngularServerApp: destroyAngularServerApp,
-              };
-            },
-          ]),
-        ),
+        entryPoints: {
+          it: createEntryPoint('it'),
+          en: createEntryPoint('en'),
+        },
         basePath: '',
       });
 
@@ -143,29 +145,26 @@ describe('AngularAppEngine', () => {
       destroyAngularServerApp();
 
       setAngularAppEngineManifest({
-        entryPoints: new Map([
-          [
-            '',
-            async () => {
-              @Component({
-                standalone: true,
-                selector: 'app-home',
-                template: `Home works`,
-              })
-              class HomeComponent {}
-
-              setAngularAppTestingManifest(
-                [{ path: 'home', component: HomeComponent }],
-                [{ path: '**', renderMode: RenderMode.Server }],
-              );
-
-              return {
-                ɵgetOrCreateAngularServerApp: getOrCreateAngularServerApp,
-                ɵdestroyAngularServerApp: destroyAngularServerApp,
-              };
-            },
-          ],
-        ]),
+        entryPoints: {
+          '': async () => {
+            @Component({
+              standalone: true,
+              selector: 'app-home',
+              template: `Home works`,
+            })
+            class HomeComponent {}
+
+            setAngularAppTestingManifest(
+              [{ path: 'home', component: HomeComponent }],
+              [{ path: '**', renderMode: RenderMode.Server }],
+            );
+
+            return {
+              ɵgetOrCreateAngularServerApp: getOrCreateAngularServerApp,
+              ɵdestroyAngularServerApp: destroyAngularServerApp,
+            };
+          },
+        },
         basePath: '',
       });
 
diff --git a/packages/angular/ssr/test/testing-utils.ts b/packages/angular/ssr/test/testing-utils.ts
