refactor(@angular/ssr): bundle Critters

This commit bundles the Critters library to ensure compatibility with Nodeless environments. Additionally, all licenses for bundled libraries, including Critters, are now included in the package. This helps maintain compliance with open-source license requirements.

package.json

@@ -199,6 +199,7 @@
     "tslib": "2.6.3",
     "typescript": "5.5.4",
     "undici": "6.19.8",
+    "unenv": "^1.10.0",
     "verdaccio": "5.32.1",
     "verdaccio-auth-memory": "^10.0.0",
     "vite": "5.4.2",

packages/angular/build/BUILD.bazel

@@ -79,6 +79,7 @@ ts_library(
         "@npm//browserslist",
         "@npm//critters",
         "@npm//esbuild",
+        "@npm//esbuild-wasm",
         "@npm//fast-glob",
         "@npm//https-proxy-agent",
         "@npm//listr2",

packages/angular/build/src/typings.d.ts

@@ -0,0 +1,19 @@
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.dev/license
+ */
+
+// The `bundled_critters` causes issues with module mappings in Bazel,
+// leading to unexpected behavior with esbuild. Specifically, the problem occurs
+// when esbuild resolves to a different module or version than expected, due to
+// how Bazel handles module mappings.
+//
+// This change aims to resolve esbuild types correctly and maintain consistency
+// in the Bazel build process.
+
+declare module 'esbuild' {
+  export * from 'esbuild-wasm';
+}

packages/angular/ssr/BUILD.bazel

@@ -18,12 +18,12 @@ ts_library(
     ),
     module_name = "@angular/ssr",
     deps = [
+        "//packages/angular/ssr/third_party/critters:bundled_critters_lib",
         "@npm//@angular/common",
         "@npm//@angular/core",
         "@npm//@angular/platform-server",
         "@npm//@angular/router",
         "@npm//@types/node",
-        "@npm//critters",
     ],
 )
 
@@ -32,8 +32,15 @@ ng_package(
     package_name = "@angular/ssr",
     srcs = [
         ":package.json",
+        "//packages/angular/ssr/third_party/critters:bundled_critters_lib",
+    ],
+    externals = [
+        "express",
+        "../../third_party/critters",
+    ],
+    nested_packages = [
+        "//packages/angular/ssr/schematics:npm_package",
     ],
-    nested_packages = ["//packages/angular/ssr/schematics:npm_package"],
     tags = ["release-package"],
     deps = [
         ":ssr",

packages/angular/ssr/package.json

@@ -13,7 +13,6 @@
     "save": "dependencies"
   },
   "dependencies": {
-    "critters": "0.0.24",
     "tslib": "^2.3.0"
   },
   "peerDependencies": {

packages/angular/ssr/src/app.ts

@@ -14,6 +14,7 @@ import { Hooks } from './hooks';
 import { getAngularAppManifest } from './manifest';
 import { ServerRouter } from './routes/router';
 import { REQUEST, REQUEST_CONTEXT, RESPONSE_INIT } from './tokens';
+import { InlineCriticalCssProcessor } from './utils/inline-critical-css';
 import { renderAngular } from './utils/ng';
 
 /**
@@ -52,6 +53,11 @@ export class AngularServerApp {
    */
   private router: ServerRouter | undefined;
 
+  /**
+   * The `inlineCriticalCssProcessor` is responsible for handling critical CSS inlining.
+   */
+  private inlineCriticalCssProcessor: InlineCriticalCssProcessor | undefined;
+
   /**
    * Renders a response for the given HTTP request using the server application.
    *
@@ -177,10 +183,38 @@ export class AngularServerApp {
       html = await hooks.run('html:transform:pre', { html });
     }
 
-    return new Response(
-      await renderAngular(html, manifest.bootstrap(), new URL(request.url), platformProviders),
-      responseInit,
-    );
+    html = await renderAngular(html, manifest.bootstrap(), new URL(request.url), platformProviders);
+
+    if (manifest.inlineCriticalCss) {
+      // Optionally inline critical CSS.
+      const inlineCriticalCssProcessor = this.getOrCreateInlineCssProcessor();
+      html = await inlineCriticalCssProcessor.process(html);
+    }
+
+    return new Response(html, responseInit);
+  }
+
+  /**
+   * Retrieves or creates the inline critical CSS processor.
+   * If one does not exist, it initializes a new instance.
+   *
+   * @returns The inline critical CSS processor instance.
+   */
+  private getOrCreateInlineCssProcessor(): InlineCriticalCssProcessor {
+    let inlineCriticalCssProcessor = this.inlineCriticalCssProcessor;
+
+    if (!inlineCriticalCssProcessor) {
+      inlineCriticalCssProcessor = new InlineCriticalCssProcessor();
+      inlineCriticalCssProcessor.readFile = (path: string) => {
+        const fileName = path.split('/').pop() ?? path;
+
+        return this.assets.getServerAsset(fileName);
+      };
+
+      this.inlineCriticalCssProcessor = inlineCriticalCssProcessor;
+    }
+
+    return inlineCriticalCssProcessor;
   }
 }
 

packages/angular/ssr/src/common-engine/common-engine.ts

@@ -11,7 +11,7 @@ import { renderApplication, renderModule, ɵSERVER_CONTEXT } from '@angular/plat
 import * as fs from 'node:fs';
 import { dirname, join, normalize, resolve } from 'node:path';
 import { URL } from 'node:url';
-import { InlineCriticalCssProcessor, InlineCriticalCssResult } from './inline-css-processor';
+import { CommonEngineInlineCriticalCssProcessor } from './inline-css-processor';
 import {
   noopRunMethodAndMeasurePerf,
   printPerformanceLogs,
@@ -55,14 +55,10 @@ export interface CommonEngineRenderOptions {
 
 export class CommonEngine {
   private readonly templateCache = new Map<string, string>();
-  private readonly inlineCriticalCssProcessor: InlineCriticalCssProcessor;
+  private readonly inlineCriticalCssProcessor = new CommonEngineInlineCriticalCssProcessor();
   private readonly pageIsSSG = new Map<string, boolean>();
 
-  constructor(private options?: CommonEngineOptions) {
-    this.inlineCriticalCssProcessor = new InlineCriticalCssProcessor({
-      minify: false,
-    });
-  }
+  constructor(private options?: CommonEngineOptions) {}
 
   /**
    * Render an HTML document for a specific URL with specified
@@ -81,17 +77,12 @@ export class CommonEngine {
       html = await runMethod('Render Page', () => this.renderApplication(opts));
 
       if (opts.inlineCriticalCss !== false) {
-        const { content, errors, warnings } = await runMethod('Inline Critical CSS', () =>
+        const content = await runMethod('Inline Critical CSS', () =>
           // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
           this.inlineCriticalCss(html!, opts),
         );
 
         html = content;
-
-        // eslint-disable-next-line no-console
-        warnings?.forEach((m) => console.warn(m));
-        // eslint-disable-next-line no-console
-        errors?.forEach((m) => console.error(m));
       }
     }
 
@@ -102,13 +93,11 @@ export class CommonEngine {
     return html;
   }
 
-  private inlineCriticalCss(
-    html: string,
-    opts: CommonEngineRenderOptions,
-  ): Promise<InlineCriticalCssResult> {
-    return this.inlineCriticalCssProcessor.process(html, {
-      outputPath: opts.publicPath ?? (opts.documentFilePath ? dirname(opts.documentFilePath) : ''),
-    });
+  private inlineCriticalCss(html: string, opts: CommonEngineRenderOptions): Promise<string> {
+    const outputPath =
+      opts.publicPath ?? (opts.documentFilePath ? dirname(opts.documentFilePath) : '');
+
+    return this.inlineCriticalCssProcessor.process(html, outputPath);
   }
 
   private async retrieveSSGPage(opts: CommonEngineRenderOptions): Promise<string | undefined> {