@angular-devkit/build-angular 17.0.0-rc.1 → 17.0.0-rc.3

package/src/utils/server-rendering/fetch-patch.js

@@ -0,0 +1,66 @@
+"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.patchFetchToLoadInMemoryAssets = void 0;
+const mrmime_1 = require("mrmime");
+const promises_1 = require("node:fs/promises");
+const node_path_1 = require("node:path");
+const node_worker_threads_1 = require("node:worker_threads");
+const undici_1 = require("undici");
+/**
+ * This is passed as workerData when setting up the worker via the `piscina` package.
+ */
+const { assetFiles } = node_worker_threads_1.workerData;
+const assetsCache = new Map();
+const RESOLVE_PROTOCOL = 'resolve:';
+function patchFetchToLoadInMemoryAssets() {
+    const global = globalThis;
+    const originalFetch = global.fetch;
+    const patchedFetch = async (input, init) => {
+        let url;
+        if (input instanceof URL) {
+            url = input;
+        }
+        else if (typeof input === 'string') {
+            url = new URL(input, RESOLVE_PROTOCOL + '//');
+        }
+        else if (typeof input === 'object' && 'url' in input) {
+            url = new URL(input.url, RESOLVE_PROTOCOL + '//');
+        }
+        else {
+            return originalFetch(input, init);
+        }
+        const { pathname, protocol } = url;
+        if (protocol !== RESOLVE_PROTOCOL || !assetFiles[pathname]) {
+            // Only handle relative requests or files that are in assets.
+            return originalFetch(input, init);
+        }
+        const cachedAsset = assetsCache.get(pathname);
+        if (cachedAsset) {
+            const { content, headers } = cachedAsset;
+            return new undici_1.Response(content, {
+                headers,
+            });
+        }
+        const extension = (0, node_path_1.extname)(pathname);
+        const mimeType = (0, mrmime_1.lookup)(extension);
+        const content = await (0, promises_1.readFile)(assetFiles[pathname]);
+        const headers = mimeType
+            ? {
+                'Content-Type': mimeType,
+            }
+            : undefined;
+        assetsCache.set(pathname, { headers, content });
+        return new undici_1.Response(content, {
+            headers,
+        });
+    };
+    global.fetch = patchedFetch;
+}
+exports.patchFetchToLoadInMemoryAssets = patchFetchToLoadInMemoryAssets;

package/src/utils/server-rendering/prerender.js

@@ -16,7 +16,6 @@ const node_path_1 = require("node:path");
 const piscina_1 = __importDefault(require("piscina"));
 const bundler_context_1 = require("../../tools/esbuild/bundler-context");
 const node_18_utils_1 = require("./esm-in-memory-loader/node-18-utils");
-const prerender_server_1 = require("./prerender-server");
 async function prerenderPages(workspaceRoot, appShellOptions = {}, prerenderOptions = {}, outputFiles, assets, document, sourcemap = false, inlineCriticalCss = false, maxThreads = 1, verbose = false) {
     const outputFilesForWorker = {};
     const serverBundlesSourceMaps = new Map();
@@ -45,37 +44,33 @@ async function prerenderPages(workspaceRoot, appShellOptions = {}, prerenderOpti
         }
     }
     serverBundlesSourceMaps.clear();
-    // Start server to handle HTTP requests to assets.
-    // TODO: consider starting this is a seperate process to avoid any blocks to the main thread.
-    const { address: assetsServerAddress, close: closeAssetsServer } = await (0, prerender_server_1.startServer)(assets);
-    try {
-        // Get routes to prerender
-        const { routes: allRoutes, warnings: routesWarnings } = await getAllRoutes(workspaceRoot, outputFilesForWorker, document, appShellOptions, prerenderOptions, sourcemap, verbose, assetsServerAddress);
-        if (routesWarnings?.length) {
-            warnings.push(...routesWarnings);
-        }
-        if (allRoutes.size < 1) {
-            return {
-                errors,
-                warnings,
-                output: {},
-                prerenderedRoutes: allRoutes,
-            };
-        }
-        // Render routes
-        const { warnings: renderingWarnings, errors: renderingErrors, output, } = await renderPages(sourcemap, allRoutes, maxThreads, workspaceRoot, outputFilesForWorker, inlineCriticalCss, document, assetsServerAddress, appShellOptions);
-        errors.push(...renderingErrors);
-        warnings.push(...renderingWarnings);
+    const assetsReversed = {};
+    for (const { source, destination } of assets) {
+        assetsReversed[addLeadingSlash(destination.replace(/\\/g, node_path_1.posix.sep))] = source;
+    }
+    // Get routes to prerender
+    const { routes: allRoutes, warnings: routesWarnings } = await getAllRoutes(workspaceRoot, outputFilesForWorker, assetsReversed, document, appShellOptions, prerenderOptions, sourcemap, verbose);
+    if (routesWarnings?.length) {
+        warnings.push(...routesWarnings);
+    }
+    if (allRoutes.size < 1) {
         return {
             errors,
             warnings,
-            output,
+            output: {},
             prerenderedRoutes: allRoutes,
         };
     }
-    finally {
-        void closeAssetsServer?.();
-    }
+    // Render routes
+    const { warnings: renderingWarnings, errors: renderingErrors, output, } = await renderPages(sourcemap, allRoutes, maxThreads, workspaceRoot, outputFilesForWorker, assetsReversed, inlineCriticalCss, document, appShellOptions);
+    errors.push(...renderingErrors);
+    warnings.push(...renderingWarnings);
+    return {
+        errors,
+        warnings,
+        output,
+        prerenderedRoutes: allRoutes,
+    };
 }
 exports.prerenderPages = prerenderPages;
 class RoutesSet extends Set {
@@ -83,7 +78,7 @@ class RoutesSet extends Set {
         return super.add(addLeadingSlash(value));
     }
 }
-async function renderPages(sourcemap, allRoutes, maxThreads, workspaceRoot, outputFilesForWorker, inlineCriticalCss, document, baseUrl, appShellOptions) {
+async function renderPages(sourcemap, allRoutes, maxThreads, workspaceRoot, outputFilesForWorker, assetFilesForWorker, inlineCriticalCss, document, appShellOptions) {
     const output = {};
     const warnings = [];
     const errors = [];
@@ -97,9 +92,9 @@ async function renderPages(sourcemap, allRoutes, maxThreads, workspaceRoot, outp
         workerData: {
             workspaceRoot,
             outputFiles: outputFilesForWorker,
+            assetFiles: assetFilesForWorker,
             inlineCriticalCss,
             document,
-            baseUrl,
         },
         execArgv: workerExecArgv,
     });
@@ -139,7 +134,7 @@ async function renderPages(sourcemap, allRoutes, maxThreads, workspaceRoot, outp
         output,
     };
 }
-async function getAllRoutes(workspaceRoot, outputFilesForWorker, document, appShellOptions, prerenderOptions, sourcemap, verbose, assetsServerAddress) {
+async function getAllRoutes(workspaceRoot, outputFilesForWorker, assetFilesForWorker, document, appShellOptions, prerenderOptions, sourcemap, verbose) {
     const { routesFile, discoverRoutes } = prerenderOptions;
     const routes = new RoutesSet();
     const { route: appShellRoute } = appShellOptions;
@@ -165,9 +160,9 @@ async function getAllRoutes(workspaceRoot, outputFilesForWorker, document, appSh
         workerData: {
             workspaceRoot,
             outputFiles: outputFilesForWorker,
+            assetFiles: assetFilesForWorker,
             document,
             verbose,
-            url: assetsServerAddress,
         },
         execArgv: workerExecArgv,
     });

package/src/utils/server-rendering/render-worker.d.ts

@@ -10,11 +10,13 @@ import { RenderResult, ServerContext } from './render-page';
 export interface RenderWorkerData extends ESMInMemoryFileLoaderWorkerData {
     document: string;
     inlineCriticalCss?: boolean;
-    baseUrl: string;
+    assetFiles: Record</** Destination */ string, /** Source */ string>;
 }
 export interface RenderOptions {
     route: string;
     serverContext: ServerContext;
 }
 /** Renders an application based on a provided options. */
-export default function (options: RenderOptions): Promise<RenderResult>;
+declare function render(options: RenderOptions): Promise<RenderResult>;
+declare const _default: typeof render;
+export default _default;

package/src/utils/server-rendering/render-worker.js

@@ -8,19 +8,23 @@
  */
 Object.defineProperty(exports, "__esModule", { value: true });
 const node_worker_threads_1 = require("node:worker_threads");
+const fetch_patch_1 = require("./fetch-patch");
 const render_page_1 = require("./render-page");
 /**
  * This is passed as workerData when setting up the worker via the `piscina` package.
  */
-const { outputFiles, document, inlineCriticalCss, baseUrl } = node_worker_threads_1.workerData;
+const { outputFiles, document, inlineCriticalCss } = node_worker_threads_1.workerData;
 /** Renders an application based on a provided options. */
-function default_1(options) {
+async function render(options) {
     return (0, render_page_1.renderPage)({
         ...options,
-        route: baseUrl + options.route,
         outputFiles,
         document,
         inlineCriticalCss,
     });
 }
-exports.default = default_1;
+function initialize() {
+    (0, fetch_patch_1.patchFetchToLoadInMemoryAssets)();
+    return render;
+}
+exports.default = initialize();

package/src/utils/server-rendering/routes-extractor-worker.d.ts

@@ -9,11 +9,13 @@ import type { ESMInMemoryFileLoaderWorkerData } from './esm-in-memory-loader/loa
 export interface RoutesExtractorWorkerData extends ESMInMemoryFileLoaderWorkerData {
     document: string;
     verbose: boolean;
-    url: string;
-    assetsServerAddress: string;
+    assetFiles: Record</** Destination */ string, /** Source */ string>;
 }
 export interface RoutersExtractorWorkerResult {
     routes: string[];
     warnings?: string[];
 }
-export default function (): Promise<RoutersExtractorWorkerResult>;
+/** Renders an application based on a provided options. */
+declare function extractRoutes(): Promise<RoutersExtractorWorkerResult>;
+declare const _default: typeof extractRoutes;
+export default _default;

package/src/utils/server-rendering/routes-extractor-worker.js

@@ -9,17 +9,19 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const node_worker_threads_1 = require("node:worker_threads");
 const load_esm_1 = require("../load-esm");
+const fetch_patch_1 = require("./fetch-patch");
 /**
  * This is passed as workerData when setting up the worker via the `piscina` package.
  */
-const { document, verbose, url } = node_worker_threads_1.workerData;
-async function default_1() {
+const { document, verbose } = node_worker_threads_1.workerData;
+/** Renders an application based on a provided options. */
+async function extractRoutes() {
     const { extractRoutes } = await (0, load_esm_1.loadEsmModule)('./render-utils.server.mjs');
     const { default: bootstrapAppFnOrModule } = await (0, load_esm_1.loadEsmModule)('./main.server.mjs');
     const skippedRedirects = [];
     const skippedOthers = [];
     const routes = [];
-    for await (const { route, success, redirect } of extractRoutes(bootstrapAppFnOrModule, document, url)) {
+    for await (const { route, success, redirect } of extractRoutes(bootstrapAppFnOrModule, document)) {
         if (success) {
             routes.push(route);
             continue;
@@ -44,4 +46,8 @@ async function default_1() {
     }
     return { routes, warnings };
 }
-exports.default = default_1;
+function initialize() {
+    (0, fetch_patch_1.patchFetchToLoadInMemoryAssets)();
+    return extractRoutes;
+}
+exports.default = initialize();

package/src/tools/esbuild/javascript-transfomer-plugin.d.ts

@@ -1,19 +0,0 @@
-/**
- * @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 type { Plugin } from 'esbuild';
-import { JavaScriptTransformerOptions } from './javascript-transformer';
-export interface JavaScriptTransformerPluginOptions extends JavaScriptTransformerOptions {
-    babelFileCache?: Map<string, Uint8Array>;
-    maxWorkers: number;
-}
-/**
- * Creates a plugin that Transformers JavaScript using Babel.
- *
- * @returns An esbuild plugin.
- */
-export declare function createJavaScriptTransformerPlugin(options: JavaScriptTransformerPluginOptions): Plugin;

package/src/tools/esbuild/javascript-transfomer-plugin.js

@@ -1,51 +0,0 @@
-"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.createJavaScriptTransformerPlugin = void 0;
-const javascript_transformer_1 = require("./javascript-transformer");
-/**
- * Creates a plugin that Transformers JavaScript using Babel.
- *
- * @returns An esbuild plugin.
- */
-function createJavaScriptTransformerPlugin(options) {
-    return {
-        name: 'angular-javascript-transformer',
-        setup(build) {
-            let javascriptTransformer;
-            const { sourcemap, thirdPartySourcemaps, advancedOptimizations, jit, babelFileCache, maxWorkers, } = options;
-            build.onLoad({ filter: /\.[cm]?js$/ }, async (args) => {
-                // The filename is currently used as a cache key. Since the cache is memory only,
-                // the options cannot change and do not need to be represented in the key. If the
-                // cache is later stored to disk, then the options that affect transform output
-                // would need to be added to the key as well as a check for any change of content.
-                let contents = babelFileCache?.get(args.path);
-                if (contents === undefined) {
-                    // Initialize a worker pool for JavaScript transformations
-                    javascriptTransformer ??= new javascript_transformer_1.JavaScriptTransformer({
-                        sourcemap,
-                        thirdPartySourcemaps,
-                        advancedOptimizations,
-                        jit,
-                    }, maxWorkers);
-                    contents = await javascriptTransformer.transformFile(args.path, jit);
-                    babelFileCache?.set(args.path, contents);
-                }
-                return {
-                    contents,
-                    loader: 'js',
-                };
-            });
-            build.onDispose(() => {
-                void javascriptTransformer?.close();
-            });
-        },
-    };
-}
-exports.createJavaScriptTransformerPlugin = createJavaScriptTransformerPlugin;

package/src/utils/server-rendering/prerender-server.d.ts

@@ -1,21 +0,0 @@
-/**
- * @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 { BuildOutputAsset } from '../../tools/esbuild/bundler-execution-result';
-/**
- * Start a server that can handle HTTP requests to assets.
- *
- * @example
- * ```ts
- * httpClient.get('/assets/content.json');
- * ```
- * @returns the server address.
- */
-export declare function startServer(assets: Readonly<BuildOutputAsset[]>): Promise<{
-    address: string;
-    close?: () => void;
-}>;

package/src/utils/server-rendering/prerender-server.js

@@ -1,102 +0,0 @@
-"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.startServer = void 0;
-const mrmime_1 = require("mrmime");
-const promises_1 = require("node:fs/promises");
-const node_http_1 = require("node:http");
-const node_path_1 = require("node:path");
-/**
- * Start a server that can handle HTTP requests to assets.
- *
- * @example
- * ```ts
- * httpClient.get('/assets/content.json');
- * ```
- * @returns the server address.
- */
-async function startServer(assets) {
-    if (Object.keys(assets).length === 0) {
-        return {
-            address: '',
-        };
-    }
-    const assetsReversed = {};
-    for (const { source, destination } of assets) {
-        assetsReversed[addLeadingSlash(destination.replace(/\\/g, node_path_1.posix.sep))] = source;
-    }
-    const assetsCache = new Map();
-    const server = (0, node_http_1.createServer)(requestHandler(assetsReversed, assetsCache));
-    await new Promise((resolve) => {
-        server.listen(0, '127.0.0.1', resolve);
-    });
-    const serverAddress = server.address();
-    let address;
-    if (!serverAddress) {
-        address = '';
-    }
-    else if (typeof serverAddress === 'string') {
-        address = serverAddress;
-    }
-    else {
-        const { port, address: host } = serverAddress;
-        address = `http://${host}:${port}`;
-    }
-    return {
-        address,
-        close: () => {
-            assetsCache.clear();
-            server.unref();
-            server.close();
-        },
-    };
-}
-exports.startServer = startServer;
-function requestHandler(assetsReversed, assetsCache) {
-    return (req, res) => {
-        if (!req.url) {
-            res.destroy(new Error('Request url was empty.'));
-            return;
-        }
-        const { pathname } = new URL(req.url, 'resolve://');
-        const asset = assetsReversed[pathname];
-        if (!asset) {
-            res.statusCode = 404;
-            res.statusMessage = 'Asset not found.';
-            res.end();
-            return;
-        }
-        const cachedAsset = assetsCache.get(pathname);
-        if (cachedAsset) {
-            const { content, mimeType } = cachedAsset;
-            if (mimeType) {
-                res.setHeader('Content-Type', mimeType);
-            }
-            res.end(content);
-            return;
-        }
-        (0, promises_1.readFile)(asset)
-            .then((content) => {
-            const extension = (0, node_path_1.extname)(pathname);
-            const mimeType = (0, mrmime_1.lookup)(extension);
-            assetsCache.set(pathname, {
-                mimeType,
-                content,
-            });
-            if (mimeType) {
-                res.setHeader('Content-Type', mimeType);
-            }
-            res.end(content);
-        })
-            .catch((e) => res.destroy(e));
-    };
-}
-function addLeadingSlash(value) {
-    return value.charAt(0) === '/' ? value : '/' + value;
-}