@nx/angular-rspack 24.0.0-beta.2 → 24.0.0-beta.4

package/dist/lib/ssr/server-assets.js

@@ -1,42 +1,50 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.createBrowserOutputServerAssets = createBrowserOutputServerAssets;
+exports.CRITICAL_CSS_FILE = exports.INDEX_CSR_HTML = exports.INDEX_SERVER_HTML = void 0;
+exports.createServerAssets = createServerAssets;
+exports.readCriticalCss = readCriticalCss;
 const node_fs_1 = require("node:fs");
 const promises_1 = require("node:fs/promises");
 const node_path_1 = require("node:path");
+/** The document server rendering renders into, in the server output. */
+exports.INDEX_SERVER_HTML = 'index.server.html';
+/** The document served for client-rendered routes, in the server output. */
+exports.INDEX_CSR_HTML = 'index.csr.html';
 /**
- * Builds the `assets` table of the Angular app manifest from the browser
- * output that sits next to the server bundle. The esbuild application
- * builder inlines these assets into the server output at build time; here
- * only the directory listing and file stats are read when the server process
- * starts and contents are read lazily, so a restarted process always serves
- * the current build output and rebuilds never have to invalidate the SSR
- * entry module (whose injected code would otherwise embed stale index
- * contents under output hashing).
+ * The app manifest's critical CSS fields for `@angular/ssr` >= 22.2, in the
+ * server output.
+ */
+exports.CRITICAL_CSS_FILE = 'critical-css.json';
+/**
+ * Builds the `assets` table of the Angular app manifest from the build
+ * output. The esbuild application builder inlines these assets into the
+ * server output at build time; here only directory listings and file stats
+ * are read when the server process starts and contents are read lazily, so a
+ * restarted process always serves the current build output and rebuilds never
+ * have to invalidate the SSR entry module (whose injected code would
+ * otherwise embed stale index contents under output hashing).
  *
- * The table maps the emitted index html to the `index.server.html` and
- * `index.csr.html` names the `@angular/ssr` render path looks up. Top-level
- * stylesheets are included only when critical CSS inlining is enabled: the
- * inliner, which fetches them by file name, is their only consumer.
+ * The index documents come from the server output. Top-level stylesheets of
+ * the browser output are included only when `inlineCriticalCss` is set: the
+ * inliner of `@angular/ssr` < 22.2, which fetches them by file name, is their
+ * only consumer.
  *
  * This module is bundled into the user's server bundle, so it must only
  * import node builtins.
  */
-function createBrowserOutputServerAssets(browserOutputPath, indexOutputName, inlineCriticalCss) {
+function createServerAssets(serverOutputPath, browserOutputPath, inlineCriticalCss) {
     const assets = {};
-    let entries;
-    try {
-        entries = (0, node_fs_1.readdirSync)(browserOutputPath);
-    }
-    catch (error) {
-        if (error.code !== 'ENOENT') {
-            throw error;
-        }
-        // Without a browser output there is nothing to serve; rendering reports
-        // the missing asset.
-        return assets;
-    }
     if (inlineCriticalCss) {
+        let entries = [];
+        try {
+            entries = (0, node_fs_1.readdirSync)(browserOutputPath);
+        }
+        catch (error) {
+            if (error.code !== 'ENOENT') {
+                throw error;
+            }
+            // Without a browser output there is nothing to inline.
+        }
         for (const entry of entries) {
             if ((0, node_path_1.extname)(entry) === '.css') {
                 const asset = createDiskAsset((0, node_path_1.join)(browserOutputPath, entry));
@@ -46,18 +54,33 @@ function createBrowserOutputServerAssets(browserOutputPath, indexOutputName, inl
             }
         }
     }
-    if (indexOutputName) {
-        const indexAsset = createDiskAsset((0, node_path_1.join)(browserOutputPath, indexOutputName));
-        if (indexAsset) {
-            // Never registered under its emitted name: the engine serves a table
-            // hit for a prerender-marked route as-is, so an `index.html` key would
-            // serve the un-rendered CSR shell for `/` instead of rendering it.
-            assets['index.server.html'] = indexAsset;
-            assets['index.csr.html'] = indexAsset;
+    for (const name of [exports.INDEX_SERVER_HTML, exports.INDEX_CSR_HTML]) {
+        const asset = createDiskAsset((0, node_path_1.join)(serverOutputPath, name));
+        if (asset) {
+            assets[name] = asset;
         }
     }
     return assets;
 }
+/**
+ * Reads the `criticalCssPlans` and `nonce` app manifest fields, which
+ * `@angular/ssr` >= 22.2 inlines critical CSS with.
+ */
+function readCriticalCss(serverOutputPath) {
+    let content;
+    try {
+        content = (0, node_fs_1.readFileSync)((0, node_path_1.join)(serverOutputPath, exports.CRITICAL_CSS_FILE), 'utf-8');
+    }
+    catch (error) {
+        if (error.code !== 'ENOENT') {
+            throw error;
+        }
+        // Never emitted, as when the browser build failed; rendering then skips
+        // critical CSS inlining.
+        return {};
+    }
+    return JSON.parse(content);
+}
 function createDiskAsset(filePath) {
     try {
         (0, node_fs_1.statSync)(filePath);

package/dist/lib/utils/beasties.d.ts

@@ -0,0 +1,35 @@
+/**
+ * A compiled stylesheet in the serialized form `@angular/ssr` reads from the
+ * app manifest's `criticalCssPlans`.
+ */
+export type CriticalCssPlan = unknown[];
+export interface BeastiesCompiler {
+    compileSheet(css: string, options: {
+        href: string;
+    }): unknown;
+    encodePlan(sheet: unknown): CriticalCssPlan;
+}
+export interface BeastiesRuntime {
+    createProcessor(plans: CriticalCssPlan[], options: {
+        preload: 'media-script';
+        preloadFonts: boolean;
+        inlineFonts: boolean;
+        noscriptFallback: boolean;
+        cache: boolean;
+        logger: {
+            warn: (message: string) => void;
+        };
+    }): {
+        process(html: string, options: {
+            nonce: string | undefined;
+        }): string;
+    };
+}
+/**
+ * Loads an entry point of the beasties copy `@angular/build` (>= 22.2)
+ * depends on, so the plans compiled at build time and the runtime applying
+ * them during prerendering come from the same version.
+ */
+export declare function loadAngularBuildBeasties(entryPoint: 'compiler'): Promise<BeastiesCompiler>;
+export declare function loadAngularBuildBeasties(entryPoint: 'runtime'): Promise<BeastiesRuntime>;
+//# sourceMappingURL=beasties.d.ts.map

package/dist/lib/utils/beasties.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"beasties.d.ts","sourceRoot":"","sources":["../../../src/lib/utils/beasties.ts"],"names":[],"mappings":"AAIA;;;GAGG;AACH,MAAM,MAAM,eAAe,GAAG,OAAO,EAAE,CAAC;AAExC,MAAM,WAAW,gBAAgB;IAC/B,YAAY,CAAC,GAAG,EAAE,MAAM,EAAE,OAAO,EAAE;QAAE,IAAI,EAAE,MAAM,CAAA;KAAE,GAAG,OAAO,CAAC;IAC9D,UAAU,CAAC,KAAK,EAAE,OAAO,GAAG,eAAe,CAAC;CAC7C;AAED,MAAM,WAAW,eAAe;IAC9B,eAAe,CACb,KAAK,EAAE,eAAe,EAAE,EACxB,OAAO,EAAE;QACP,OAAO,EAAE,cAAc,CAAC;QACxB,YAAY,EAAE,OAAO,CAAC;QACtB,WAAW,EAAE,OAAO,CAAC;QACrB,gBAAgB,EAAE,OAAO,CAAC;QAC1B,KAAK,EAAE,OAAO,CAAC;QACf,MAAM,EAAE;YAAE,IAAI,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAA;SAAE,CAAC;KAC7C,GACA;QAAE,OAAO,CAAC,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE;YAAE,KAAK,EAAE,MAAM,GAAG,SAAS,CAAA;SAAE,GAAG,MAAM,CAAA;KAAE,CAAC;CAC9E;AAED;;;;GAIG;AACH,wBAAgB,wBAAwB,CACtC,UAAU,EAAE,UAAU,GACrB,OAAO,CAAC,gBAAgB,CAAC,CAAC;AAC7B,wBAAgB,wBAAwB,CACtC,UAAU,EAAE,SAAS,GACpB,OAAO,CAAC,eAAe,CAAC,CAAC"}

package/dist/lib/utils/beasties.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.loadAngularBuildBeasties = loadAngularBuildBeasties;
+const node_path_1 = require("node:path");
+const node_url_1 = require("node:url");
+const misc_helpers_1 = require("./misc-helpers");
+function loadAngularBuildBeasties(entryPoint) {
+    const angularBuildDir = (0, node_path_1.dirname)(require.resolve('@angular/build/package.json'));
+    // The entry points are ESM only.
+    return (0, misc_helpers_1.loadEsmModule)((0, node_url_1.pathToFileURL)(require.resolve(`beasties/${entryPoint}`, { paths: [angularBuildDir] })));
+}

package/dist/lib/utils/index-file/ngcm-attribute.d.ts

@@ -0,0 +1,16 @@
+/**
+ * @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
+ */
+/**
+ * Transforms the provided HTML by adding the `ngcm` attribute to the `<body>` tag.
+ * This is used in the client-side rendered (CSR) version of `index.html` to prevent hydration warnings.
+ *
+ * @param html The HTML markup to be transformed.
+ * @returns A promise that resolves to the transformed HTML string with the necessary modifications.
+ */
+export declare function addNgcmAttribute(html: string): Promise<string>;
+//# sourceMappingURL=ngcm-attribute.d.ts.map

package/dist/lib/utils/index-file/ngcm-attribute.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ngcm-attribute.d.ts","sourceRoot":"","sources":["../../../../src/lib/utils/index-file/ngcm-attribute.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAaH;;;;;;GAMG;AACH,wBAAsB,gBAAgB,CAAC,IAAI,EAAE,MAAM,GAAG,OAAO,CAAC,MAAM,CAAC,CAepE"}

package/dist/lib/utils/index-file/ngcm-attribute.js

@@ -0,0 +1,37 @@
+"use strict";
+/**
+ * @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
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.addNgcmAttribute = addNgcmAttribute;
+const html_rewriting_stream_1 = require("./html-rewriting-stream");
+/**
+ * Defines a name of an attribute that is added to the `<body>` tag
+ * in the `index.html` file in case a given route was configured
+ * with `RenderMode.Client`. 'cm' is an abbreviation for "Client Mode".
+ *
+ * @see https://github.com/angular/angular/pull/58004
+ */
+const CLIENT_RENDER_MODE_FLAG = 'ngcm';
+/**
+ * Transforms the provided HTML by adding the `ngcm` attribute to the `<body>` tag.
+ * This is used in the client-side rendered (CSR) version of `index.html` to prevent hydration warnings.
+ *
+ * @param html The HTML markup to be transformed.
+ * @returns A promise that resolves to the transformed HTML string with the necessary modifications.
+ */
+async function addNgcmAttribute(html) {
+    const { rewriter, transformedContent } = await (0, html_rewriting_stream_1.htmlRewritingStream)(html);
+    rewriter.on('startTag', (tag) => {
+        if (tag.tagName === 'body' &&
+            !tag.attrs.some((attr) => attr.name === CLIENT_RENDER_MODE_FLAG)) {
+            tag.attrs.push({ name: CLIENT_RENDER_MODE_FLAG, value: '' });
+        }
+        rewriter.emitStartTag(tag);
+    });
+    return transformedContent();
+}

package/dist/lib/utils/index-file/nonce.d.ts

@@ -0,0 +1,15 @@
+/**
+ * @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
+ */
+/**
+ * Finds the `ngCspNonce` value and copies it to all inline `<style>` and `<script> `tags.
+ * @param html Markup that should be processed.
+ */
+export declare function addNonce(html: string): Promise<string>;
+/** Finds the Angular nonce in an HTML string. */
+export declare function findNonce(html: string): Promise<string | null>;
+//# sourceMappingURL=nonce.d.ts.map

package/dist/lib/utils/index-file/nonce.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"nonce.d.ts","sourceRoot":"","sources":["../../../../src/lib/utils/index-file/nonce.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAUH;;;GAGG;AACH,wBAAsB,QAAQ,CAAC,IAAI,EAAE,MAAM,GAAG,OAAO,CAAC,MAAM,CAAC,CAqB5D;AAED,iDAAiD;AACjD,wBAAsB,SAAS,CAAC,IAAI,EAAE,MAAM,GAAG,OAAO,CAAC,MAAM,GAAG,IAAI,CAAC,CAsBpE"}

package/dist/lib/utils/index-file/nonce.js

@@ -0,0 +1,54 @@
+"use strict";
+/**
+ * @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
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.addNonce = addNonce;
+exports.findNonce = findNonce;
+const html_rewriting_stream_1 = require("./html-rewriting-stream");
+/**
+ * Pattern matching the name of the Angular nonce attribute. Note that this is
+ * case-insensitive, because HTML attribute names are case-insensitive as well.
+ */
+const NONCE_ATTR_PATTERN = /ngCspNonce/i;
+/**
+ * Finds the `ngCspNonce` value and copies it to all inline `<style>` and `<script> `tags.
+ * @param html Markup that should be processed.
+ */
+async function addNonce(html) {
+    const nonce = await findNonce(html);
+    if (!nonce) {
+        return html;
+    }
+    const { rewriter, transformedContent } = await (0, html_rewriting_stream_1.htmlRewritingStream)(html);
+    rewriter.on('startTag', (tag) => {
+        if ((tag.tagName === 'style' || tag.tagName === 'script') &&
+            !tag.attrs.some((attr) => attr.name === 'nonce')) {
+            tag.attrs.push({ name: 'nonce', value: nonce });
+        }
+        rewriter.emitStartTag(tag);
+    });
+    return transformedContent();
+}
+/** Finds the Angular nonce in an HTML string. */
+async function findNonce(html) {
+    // Inexpensive check to avoid parsing the HTML when we're sure there's no nonce.
+    if (!NONCE_ATTR_PATTERN.test(html)) {
+        return null;
+    }
+    const { rewriter, transformedContent } = await (0, html_rewriting_stream_1.htmlRewritingStream)(html);
+    let nonce = null;
+    rewriter.on('startTag', (tag) => {
+        const nonceAttr = tag.attrs.find((attr) => NONCE_ATTR_PATTERN.test(attr.name));
+        if (nonceAttr?.value) {
+            nonce = nonceAttr.value;
+            rewriter.stop(); // Stop parsing since we've found the nonce.
+        }
+    });
+    await transformedContent();
+    return nonce;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nx/angular-rspack",
-  "version": "24.0.0-beta.2",
+  "version": "24.0.0-beta.4",
   "private": false,
   "publishConfig": {
     "access": "public"
@@ -56,8 +56,8 @@
     "@ampproject/remapping": "2.3.0",
     "@babel/core": "^7.29.6",
     "@discoveryjs/json-ext": "0.6.3",
-    "@nx/angular-rspack-compiler": "24.0.0-beta.2",
-    "@nx/devkit": "24.0.0-beta.2",
+    "@nx/angular-rspack-compiler": "24.0.0-beta.4",
+    "@nx/devkit": "24.0.0-beta.4",
     "ansi-colors": "4.1.3",
     "autoprefixer": "^10.4.9",
     "deepmerge": "^4.3.1",