@angular/build 18.0.0-next.3

package/src/utils/index-file/inline-fonts.d.ts

@@ -0,0 +1,23 @@
+/**
+ * @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.io/license
+ */
+import { NormalizedCachedOptions } from '../normalize-cache';
+export interface InlineFontsOptions {
+    minify?: boolean;
+    cache?: NormalizedCachedOptions;
+}
+export declare class InlineFontsProcessor {
+    private options;
+    private readonly cachePath;
+    constructor(options: InlineFontsOptions);
+    process(content: string): Promise<string>;
+    private getResponse;
+    processURL(url: string | URL): Promise<string | undefined>;
+    canInlineRequest(url: string): boolean;
+    private getFontProviderDetails;
+    private createNormalizedUrl;
+}

package/src/utils/index-file/inline-fonts.js

@@ -0,0 +1,267 @@
+"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.io/license
+ */
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.InlineFontsProcessor = void 0;
+const https_proxy_agent_1 = require("https-proxy-agent");
+const node_crypto_1 = require("node:crypto");
+const promises_1 = require("node:fs/promises");
+const https = __importStar(require("node:https"));
+const node_path_1 = require("node:path");
+const html_rewriting_stream_1 = require("./html-rewriting-stream");
+const SUPPORTED_PROVIDERS = {
+    'fonts.googleapis.com': {
+        preconnectUrl: 'https://fonts.gstatic.com',
+    },
+    'use.typekit.net': {
+        preconnectUrl: 'https://use.typekit.net',
+    },
+};
+/**
+ * Hash algorithm used for cached files.
+ */
+const CONTENT_HASH_ALGORITHM = 'sha256';
+/**
+ * String length of the SHA-256 content hash stored in cached files.
+ */
+const CONTENT_HASH_LENGTH = 64;
+class InlineFontsProcessor {
+    options;
+    cachePath;
+    constructor(options) {
+        this.options = options;
+        const { path: cacheDirectory, enabled } = this.options.cache || {};
+        if (cacheDirectory && enabled) {
+            this.cachePath = (0, node_path_1.join)(cacheDirectory, 'angular-build-fonts');
+        }
+    }
+    async process(content) {
+        const hrefList = [];
+        const existingPreconnect = new Set();
+        // Collector link tags with href
+        const { rewriter: collectorStream, transformedContent: initCollectorStream } = await (0, html_rewriting_stream_1.htmlRewritingStream)(content);
+        collectorStream.on('startTag', (tag) => {
+            const { tagName, attrs } = tag;
+            if (tagName !== 'link') {
+                return;
+            }
+            let hrefValue;
+            let relValue;
+            for (const { name, value } of attrs) {
+                switch (name) {
+                    case 'rel':
+                        relValue = value;
+                        break;
+                    case 'href':
+                        hrefValue = value;
+                        break;
+                }
+                if (hrefValue && relValue) {
+                    switch (relValue) {
+                        case 'stylesheet':
+                            // <link rel="stylesheet" href="https://example.com/main.css">
+                            hrefList.push(hrefValue);
+                            break;
+                        case 'preconnect':
+                            // <link rel="preconnect" href="https://example.com">
+                            existingPreconnect.add(hrefValue.replace(/\/$/, ''));
+                            break;
+                    }
+                    return;
+                }
+            }
+        });
+        initCollectorStream().catch(() => {
+            // We don't really care about any errors here because it just initializes
+            // the rewriting stream, as we are waiting for `finish` below.
+        });
+        await new Promise((resolve) => collectorStream.on('finish', resolve));
+        // Download stylesheets
+        const hrefsContent = new Map();
+        const newPreconnectUrls = new Set();
+        for (const hrefItem of hrefList) {
+            const url = this.createNormalizedUrl(hrefItem);
+            if (!url) {
+                continue;
+            }
+            const content = await this.processURL(url);
+            if (content === undefined) {
+                continue;
+            }
+            hrefsContent.set(hrefItem, content);
+            // Add preconnect
+            const preconnectUrl = this.getFontProviderDetails(url)?.preconnectUrl;
+            if (preconnectUrl && !existingPreconnect.has(preconnectUrl)) {
+                newPreconnectUrls.add(preconnectUrl);
+            }
+        }
+        if (hrefsContent.size === 0) {
+            return content;
+        }
+        // Replace link with style tag.
+        const { rewriter, transformedContent } = await (0, html_rewriting_stream_1.htmlRewritingStream)(content);
+        rewriter.on('startTag', (tag) => {
+            const { tagName, attrs } = tag;
+            switch (tagName) {
+                case 'head':
+                    rewriter.emitStartTag(tag);
+                    for (const url of newPreconnectUrls) {
+                        rewriter.emitRaw(`<link rel="preconnect" href="${url}" crossorigin>`);
+                    }
+                    break;
+                case 'link':
+                    const hrefAttr = attrs.some(({ name, value }) => name === 'rel' && value === 'stylesheet') &&
+                        attrs.find(({ name, value }) => name === 'href' && hrefsContent.has(value));
+                    if (hrefAttr) {
+                        const href = hrefAttr.value;
+                        const cssContent = hrefsContent.get(href);
+                        rewriter.emitRaw(`<style>${cssContent}</style>`);
+                    }
+                    else {
+                        rewriter.emitStartTag(tag);
+                    }
+                    break;
+                default:
+                    rewriter.emitStartTag(tag);
+                    break;
+            }
+        });
+        return transformedContent();
+    }
+    async getResponse(url) {
+        let cacheFile;
+        if (this.cachePath) {
+            const key = (0, node_crypto_1.createHash)(CONTENT_HASH_ALGORITHM).update(`${url}`).digest('hex');
+            cacheFile = (0, node_path_1.join)(this.cachePath, key);
+        }
+        if (cacheFile) {
+            try {
+                const data = await (0, promises_1.readFile)(cacheFile, 'utf8');
+                // Check for valid content via stored hash
+                if (data.length > CONTENT_HASH_LENGTH) {
+                    const storedHash = data.slice(0, CONTENT_HASH_LENGTH);
+                    const content = data.slice(CONTENT_HASH_LENGTH);
+                    const contentHash = (0, node_crypto_1.createHash)(CONTENT_HASH_ALGORITHM).update(content).digest('base64');
+                    if (storedHash === contentHash) {
+                        // Return valid content
+                        return content;
+                    }
+                    else {
+                        // Delete corrupted cache content
+                        await (0, promises_1.rm)(cacheFile);
+                    }
+                }
+            }
+            catch { }
+        }
+        let agent;
+        const httpsProxy = process.env.HTTPS_PROXY ?? process.env.https_proxy;
+        if (httpsProxy) {
+            agent = new https_proxy_agent_1.HttpsProxyAgent(httpsProxy);
+        }
+        const data = await new Promise((resolve, reject) => {
+            let rawResponse = '';
+            https
+                .get(url, {
+                agent,
+                headers: {
+                    /**
+                     * Always use a Windows UA. This is because Google fonts will including hinting in fonts for Windows.
+                     * Hinting is a technique used with Windows files to improve appearance however
+                     * results in 20-50% larger file sizes.
+                     *
+                     * @see http://google3/java/com/google/fonts/css/OpenSansWebFontsCssBuilder.java?l=22
+                     * @see https://fonts.google.com/knowledge/glossary/hinting (short)
+                     * @see https://glyphsapp.com/learn/hinting-manual-truetype-hinting (deep dive)
+                     */
+                    'user-agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36',
+                },
+            }, (res) => {
+                if (res.statusCode !== 200) {
+                    reject(new Error(`Inlining of fonts failed. ${url} returned status code: ${res.statusCode}.`));
+                    return;
+                }
+                res.on('data', (chunk) => (rawResponse += chunk)).on('end', () => resolve(rawResponse));
+            })
+                .on('error', (e) => reject(new Error(`Inlining of fonts failed. An error has occurred while retrieving ${url} over the internet.\n` +
+                e.message)));
+        });
+        if (cacheFile) {
+            try {
+                const dataHash = (0, node_crypto_1.createHash)(CONTENT_HASH_ALGORITHM).update(data).digest('hex');
+                await (0, promises_1.writeFile)(cacheFile, dataHash + data);
+            }
+            catch { }
+        }
+        return data;
+    }
+    async processURL(url) {
+        const normalizedURL = url instanceof URL ? url : this.createNormalizedUrl(url);
+        if (!normalizedURL) {
+            return;
+        }
+        const provider = this.getFontProviderDetails(normalizedURL);
+        if (!provider) {
+            return undefined;
+        }
+        let cssContent = await this.getResponse(normalizedURL);
+        if (this.options.minify) {
+            cssContent = cssContent
+                // Comments.
+                .replace(/\/\*([\s\S]*?)\*\//g, '')
+                // New lines.
+                .replace(/\n/g, '')
+                // Safe spaces.
+                .replace(/\s?[{:;]\s+/g, (s) => s.trim());
+        }
+        return cssContent;
+    }
+    canInlineRequest(url) {
+        const normalizedUrl = this.createNormalizedUrl(url);
+        return normalizedUrl ? !!this.getFontProviderDetails(normalizedUrl) : false;
+    }
+    getFontProviderDetails(url) {
+        return SUPPORTED_PROVIDERS[url.hostname];
+    }
+    createNormalizedUrl(value) {
+        // Need to convert '//' to 'https://' because the URL parser will fail with '//'.
+        const url = new URL(value.startsWith('//') ? `https:${value}` : value, 'resolve://');
+        switch (url.protocol) {
+            case 'http:':
+            case 'https:':
+                url.protocol = 'https:';
+                return url;
+            default:
+                return undefined;
+        }
+    }
+}
+exports.InlineFontsProcessor = InlineFontsProcessor;

package/src/utils/index-file/nonce.d.ts

@@ -0,0 +1,12 @@
+/**
+ * @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.io/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>;

package/src/utils/index-file/nonce.js

@@ -0,0 +1,55 @@
+"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.io/license
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.addNonce = void 0;
+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 === 'src'))) &&
+            !tag.attrs.some((attr) => attr.name === 'nonce')) {
+            tag.attrs.push({ name: 'nonce', value: nonce });
+        }
+        rewriter.emitStartTag(tag);
+    });
+    return transformedContent();
+}
+exports.addNonce = addNonce;
+/** 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/src/utils/index-file/style-nonce.d.ts

@@ -0,0 +1,12 @@
+/**
+ * @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.io/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>;

package/src/utils/index-file/style-nonce.js

@@ -0,0 +1,55 @@
+"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.io/license
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.addNonce = void 0;
+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 === 'src'))) &&
+            !tag.attrs.some((attr) => attr.name === 'nonce')) {
+            tag.attrs.push({ name: 'nonce', value: nonce });
+        }
+        rewriter.emitStartTag(tag);
+    });
+    return transformedContent();
+}
+exports.addNonce = addNonce;
+/** 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/src/utils/index.d.ts

@@ -0,0 +1,11 @@
+/**
+ * @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.io/license
+ */
+export * from './normalize-asset-patterns';
+export * from './normalize-optimization';
+export * from './normalize-source-maps';
+export * from './load-proxy-config';

package/src/utils/index.js

@@ -0,0 +1,27 @@
+"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.io/license
+ */
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./normalize-asset-patterns"), exports);
+__exportStar(require("./normalize-optimization"), exports);
+__exportStar(require("./normalize-source-maps"), exports);
+__exportStar(require("./load-proxy-config"), exports);

package/src/utils/load-esm.d.ts

@@ -0,0 +1,20 @@
+/**
+ * @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.io/license
+ */
+/**
+ * This uses a dynamic import to load a module which may be ESM.
+ * CommonJS code can load ESM code via a dynamic import. Unfortunately, TypeScript
+ * will currently, unconditionally downlevel dynamic import into a require call.
+ * require calls cannot load ESM code and will result in a runtime error. To workaround
+ * this, a Function constructor is used to prevent TypeScript from changing the dynamic import.
+ * Once TypeScript provides support for keeping the dynamic import this workaround can
+ * be dropped.
+ *
+ * @param modulePath The path of the module to load.
+ * @returns A Promise that resolves to the dynamically imported module.
+ */
+export declare function loadEsmModule<T>(modulePath: string | URL): Promise<T>;

package/src/utils/load-esm.js

@@ -0,0 +1,31 @@
+"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.io/license
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.loadEsmModule = void 0;
+/**
+ * Lazily compiled dynamic import loader function.
+ */
+let load;
+/**
+ * This uses a dynamic import to load a module which may be ESM.
+ * CommonJS code can load ESM code via a dynamic import. Unfortunately, TypeScript
+ * will currently, unconditionally downlevel dynamic import into a require call.
+ * require calls cannot load ESM code and will result in a runtime error. To workaround
+ * this, a Function constructor is used to prevent TypeScript from changing the dynamic import.
+ * Once TypeScript provides support for keeping the dynamic import this workaround can
+ * be dropped.
+ *
+ * @param modulePath The path of the module to load.
+ * @returns A Promise that resolves to the dynamically imported module.
+ */
+function loadEsmModule(modulePath) {
+    load ??= new Function('modulePath', `return import(modulePath);`);
+    return load(modulePath);
+}
+exports.loadEsmModule = loadEsmModule;

package/src/utils/load-proxy-config.d.ts

@@ -0,0 +1,8 @@
+/**
+ * @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.io/license
+ */
+export declare function loadProxyConfiguration(root: string, proxyConfig: string | undefined): Promise<Record<string, object> | undefined>;