@angular/build 18.0.0-next.3

package/src/tools/sass/sass-service.js

@@ -0,0 +1,213 @@
+"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.SassWorkerImplementation = void 0;
+const node_path_1 = require("node:path");
+const node_url_1 = require("node:url");
+const node_worker_threads_1 = require("node:worker_threads");
+const environment_options_1 = require("../../utils/environment-options");
+/**
+ * The maximum number of Workers that will be created to execute render requests.
+ */
+const MAX_RENDER_WORKERS = environment_options_1.maxWorkers;
+/**
+ * A Sass renderer implementation that provides an interface that can be used by Webpack's
+ * `sass-loader`. The implementation uses a Worker thread to perform the Sass rendering
+ * with the `dart-sass` package.  The `dart-sass` synchronous render function is used within
+ * the worker which can be up to two times faster than the asynchronous variant.
+ */
+class SassWorkerImplementation {
+    rebase;
+    workers = [];
+    availableWorkers = [];
+    requests = new Map();
+    workerPath = (0, node_path_1.join)(__dirname, './worker.js');
+    idCounter = 1;
+    nextWorkerIndex = 0;
+    constructor(rebase = false) {
+        this.rebase = rebase;
+    }
+    /**
+     * Provides information about the Sass implementation.
+     * This mimics enough of the `dart-sass` value to be used with the `sass-loader`.
+     */
+    get info() {
+        return 'dart-sass\tworker';
+    }
+    /**
+     * The synchronous render function is not used by the `sass-loader`.
+     */
+    compileString() {
+        throw new Error('Sass compileString is not supported.');
+    }
+    /**
+     * Asynchronously request a Sass stylesheet to be renderered.
+     *
+     * @param source The contents to compile.
+     * @param options The `dart-sass` options to use when rendering the stylesheet.
+     */
+    compileStringAsync(source, options) {
+        // The `functions`, `logger` and `importer` options are JavaScript functions that cannot be transferred.
+        // If any additional function options are added in the future, they must be excluded as well.
+        const { functions, importers, url, logger, ...serializableOptions } = options;
+        // The CLI's configuration does not use or expose the ability to defined custom Sass functions
+        if (functions && Object.keys(functions).length > 0) {
+            throw new Error('Sass custom functions are not supported.');
+        }
+        return new Promise((resolve, reject) => {
+            let workerIndex = this.availableWorkers.pop();
+            if (workerIndex === undefined) {
+                if (this.workers.length < MAX_RENDER_WORKERS) {
+                    workerIndex = this.workers.length;
+                    this.workers.push(this.createWorker());
+                }
+                else {
+                    workerIndex = this.nextWorkerIndex++;
+                    if (this.nextWorkerIndex >= this.workers.length) {
+                        this.nextWorkerIndex = 0;
+                    }
+                }
+            }
+            const callback = (error, result) => {
+                if (error) {
+                    const url = error.span?.url;
+                    if (url) {
+                        error.span.url = (0, node_url_1.pathToFileURL)(url);
+                    }
+                    reject(error);
+                    return;
+                }
+                if (!result) {
+                    reject(new Error('No result.'));
+                    return;
+                }
+                resolve(result);
+            };
+            const request = this.createRequest(workerIndex, callback, logger, importers);
+            this.requests.set(request.id, request);
+            this.workers[workerIndex].postMessage({
+                id: request.id,
+                source,
+                hasImporter: !!importers?.length,
+                hasLogger: !!logger,
+                rebase: this.rebase,
+                options: {
+                    ...serializableOptions,
+                    // URL is not serializable so to convert to string here and back to URL in the worker.
+                    url: url ? (0, node_url_1.fileURLToPath)(url) : undefined,
+                },
+            });
+        });
+    }
+    /**
+     * Shutdown the Sass render worker.
+     * Executing this method will stop any pending render requests.
+     */
+    close() {
+        for (const worker of this.workers) {
+            try {
+                void worker.terminate();
+            }
+            catch { }
+        }
+        this.requests.clear();
+    }
+    createWorker() {
+        const { port1: mainImporterPort, port2: workerImporterPort } = new node_worker_threads_1.MessageChannel();
+        const importerSignal = new Int32Array(new SharedArrayBuffer(4));
+        const worker = new node_worker_threads_1.Worker(this.workerPath, {
+            workerData: { workerImporterPort, importerSignal },
+            transferList: [workerImporterPort],
+        });
+        worker.on('message', (response) => {
+            const request = this.requests.get(response.id);
+            if (!request) {
+                return;
+            }
+            this.requests.delete(response.id);
+            this.availableWorkers.push(request.workerIndex);
+            if (response.warnings && request.logger?.warn) {
+                for (const { message, span, ...options } of response.warnings) {
+                    request.logger.warn(message, {
+                        ...options,
+                        span: span && {
+                            ...span,
+                            url: span.url ? (0, node_url_1.pathToFileURL)(span.url) : undefined,
+                        },
+                    });
+                }
+            }
+            if (response.result) {
+                request.callback(undefined, {
+                    ...response.result,
+                    // URL is not serializable so in the worker we convert to string and here back to URL.
+                    loadedUrls: response.result.loadedUrls.map((p) => (0, node_url_1.pathToFileURL)(p)),
+                });
+            }
+            else {
+                request.callback(response.error);
+            }
+        });
+        mainImporterPort.on('message', ({ id, url, options }) => {
+            const request = this.requests.get(id);
+            if (!request?.importers) {
+                mainImporterPort.postMessage(null);
+                Atomics.store(importerSignal, 0, 1);
+                Atomics.notify(importerSignal, 0);
+                return;
+            }
+            this.processImporters(request.importers, url, {
+                ...options,
+                // URL is not serializable so in the worker we convert to string and here back to URL.
+                containingUrl: options.containingUrl
+                    ? (0, node_url_1.pathToFileURL)(options.containingUrl)
+                    : null,
+            })
+                .then((result) => {
+                mainImporterPort.postMessage(result);
+            })
+                .catch((error) => {
+                mainImporterPort.postMessage(error);
+            })
+                .finally(() => {
+                Atomics.store(importerSignal, 0, 1);
+                Atomics.notify(importerSignal, 0);
+            });
+        });
+        mainImporterPort.unref();
+        return worker;
+    }
+    async processImporters(importers, url, options) {
+        for (const importer of importers) {
+            if (!this.isFileImporter(importer)) {
+                // Importer
+                throw new Error('Only File Importers are supported.');
+            }
+            // File importer (Can be sync or aync).
+            const result = await importer.findFileUrl(url, options);
+            if (result) {
+                return (0, node_url_1.fileURLToPath)(result);
+            }
+        }
+        return null;
+    }
+    createRequest(workerIndex, callback, logger, importers) {
+        return {
+            id: this.idCounter++,
+            workerIndex,
+            callback,
+            logger,
+            importers,
+        };
+    }
+    isFileImporter(value) {
+        return 'findFileUrl' in value;
+    }
+}
+exports.SassWorkerImplementation = SassWorkerImplementation;

package/src/tools/sass/worker.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 {};

package/src/tools/sass/worker.js

@@ -0,0 +1,192 @@
+"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 __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const remapping_1 = __importDefault(require("@ampproject/remapping"));
+const node_path_1 = require("node:path");
+const node_url_1 = require("node:url");
+const node_worker_threads_1 = require("node:worker_threads");
+const sass_1 = require("sass");
+const rebasing_importer_1 = require("./rebasing-importer");
+if (!node_worker_threads_1.parentPort || !node_worker_threads_1.workerData) {
+    throw new Error('Sass worker must be executed as a Worker.');
+}
+// The importer variables are used to proxy import requests to the main thread
+const { workerImporterPort, importerSignal } = node_worker_threads_1.workerData;
+node_worker_threads_1.parentPort.on('message', (message) => {
+    if (!node_worker_threads_1.parentPort) {
+        throw new Error('"parentPort" is not defined. Sass worker must be executed as a Worker.');
+    }
+    const { id, hasImporter, hasLogger, source, options, rebase } = message;
+    const entryDirectory = (0, node_path_1.dirname)(options.url);
+    let warnings;
+    try {
+        const directoryCache = new Map();
+        const rebaseSourceMaps = options.sourceMap ? new Map() : undefined;
+        if (hasImporter) {
+            // When a custom importer function is present, the importer request must be proxied
+            // back to the main thread where it can be executed.
+            // This process must be synchronous from the perspective of dart-sass. The `Atomics`
+            // functions combined with the shared memory `importSignal` and the Node.js
+            // `receiveMessageOnPort` function are used to ensure synchronous behavior.
+            const proxyImporter = {
+                findFileUrl: (url, options) => {
+                    Atomics.store(importerSignal, 0, 0);
+                    workerImporterPort.postMessage({
+                        id,
+                        url,
+                        options: {
+                            ...options,
+                            containingUrl: options.containingUrl ? (0, node_url_1.fileURLToPath)(options.containingUrl) : null,
+                        },
+                    });
+                    Atomics.wait(importerSignal, 0, 0);
+                    const result = (0, node_worker_threads_1.receiveMessageOnPort)(workerImporterPort)?.message;
+                    return result ? (0, node_url_1.pathToFileURL)(result) : null;
+                },
+            };
+            options.importers = [
+                rebase
+                    ? (0, rebasing_importer_1.sassBindWorkaround)(new rebasing_importer_1.ModuleUrlRebasingImporter(entryDirectory, directoryCache, rebaseSourceMaps, proxyImporter.findFileUrl))
+                    : proxyImporter,
+            ];
+        }
+        if (rebase && options.loadPaths?.length) {
+            options.importers ??= [];
+            options.importers.push((0, rebasing_importer_1.sassBindWorkaround)(new rebasing_importer_1.LoadPathsUrlRebasingImporter(entryDirectory, directoryCache, rebaseSourceMaps, options.loadPaths)));
+            options.loadPaths = undefined;
+        }
+        let relativeImporter;
+        if (rebase) {
+            relativeImporter = (0, rebasing_importer_1.sassBindWorkaround)(new rebasing_importer_1.RelativeUrlRebasingImporter(entryDirectory, directoryCache, rebaseSourceMaps));
+        }
+        // The synchronous Sass render function can be up to two times faster than the async variant
+        const result = (0, sass_1.compileString)(source, {
+            ...options,
+            // URL is not serializable so to convert to string in the parent and back to URL here.
+            url: (0, node_url_1.pathToFileURL)(options.url),
+            // The `importer` option (singular) handles relative imports
+            importer: relativeImporter,
+            logger: hasLogger
+                ? {
+                    warn(message, warnOptions) {
+                        warnings ??= [];
+                        warnings.push({
+                            ...warnOptions,
+                            message,
+                            span: warnOptions.span && convertSourceSpan(warnOptions.span),
+                            ...convertDeprecation(warnOptions.deprecation, 
+                            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                            warnOptions.deprecationType),
+                        });
+                    },
+                }
+                : undefined,
+        });
+        if (result.sourceMap && rebaseSourceMaps?.size) {
+            // Merge the intermediate rebasing source maps into the final Sass generated source map.
+            // Casting is required due to small but compatible differences in typings between the packages.
+            result.sourceMap = (0, remapping_1.default)(result.sourceMap, 
+            // To prevent an infinite lookup loop, skip getting the source when the rebasing source map
+            // is referencing its original self.
+            (file, context) => (file !== context.importer ? rebaseSourceMaps.get(file) : null));
+        }
+        node_worker_threads_1.parentPort.postMessage({
+            id,
+            warnings,
+            result: {
+                ...result,
+                // URL is not serializable so to convert to string here and back to URL in the parent.
+                loadedUrls: result.loadedUrls.map((p) => (0, node_url_1.fileURLToPath)(p)),
+            },
+        });
+    }
+    catch (error) {
+        // Needed because V8 will only serialize the message and stack properties of an Error instance.
+        if (error instanceof sass_1.Exception) {
+            const { span, message, stack, sassMessage, sassStack } = error;
+            node_worker_threads_1.parentPort.postMessage({
+                id,
+                warnings,
+                error: {
+                    span: convertSourceSpan(span),
+                    message,
+                    stack,
+                    sassMessage,
+                    sassStack,
+                },
+            });
+        }
+        else if (error instanceof Error) {
+            const { message, stack } = error;
+            node_worker_threads_1.parentPort.postMessage({ id, warnings, error: { message, stack } });
+        }
+        else {
+            node_worker_threads_1.parentPort.postMessage({
+                id,
+                warnings,
+                error: { message: 'An unknown error has occurred.' },
+            });
+        }
+    }
+});
+/**
+ * Converts a Sass SourceSpan object into a serializable form.
+ * The SourceSpan object contains a URL property which must be converted into a string.
+ * Also, most of the interface's properties are get accessors and are not automatically
+ * serialized when sent back from the worker.
+ *
+ * @param span The Sass SourceSpan object to convert.
+ * @returns A serializable form of the SourceSpan object.
+ */
+function convertSourceSpan(span) {
+    return {
+        text: span.text,
+        context: span.context,
+        end: {
+            column: span.end.column,
+            offset: span.end.offset,
+            line: span.end.line,
+        },
+        start: {
+            column: span.start.column,
+            offset: span.start.offset,
+            line: span.start.line,
+        },
+        url: span.url ? (0, node_url_1.fileURLToPath)(span.url) : undefined,
+    };
+}
+function convertDeprecation(deprecation, deprecationType) {
+    if (!deprecation || !deprecationType) {
+        return { deprecation: false };
+    }
+    const { obsoleteIn, deprecatedIn, ...rest } = deprecationType;
+    return {
+        deprecation: true,
+        deprecationType: {
+            ...rest,
+            obsoleteIn: obsoleteIn
+                ? {
+                    major: obsoleteIn.major,
+                    minor: obsoleteIn.minor,
+                    patch: obsoleteIn.patch,
+                }
+                : null,
+            deprecatedIn: deprecatedIn
+                ? {
+                    major: deprecatedIn.major,
+                    minor: deprecatedIn.minor,
+                    patch: deprecatedIn.patch,
+                }
+                : null,
+        },
+    };
+}

package/src/tools/vite/angular-memory-plugin.d.ts

@@ -0,0 +1,24 @@
+/**
+ * @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 { Connect, Plugin } from 'vite';
+export interface AngularMemoryPluginOptions {
+    workspaceRoot: string;
+    virtualProjectRoot: string;
+    outputFiles: Map<string, {
+        contents: Uint8Array;
+        servable: boolean;
+    }>;
+    assets: Map<string, string>;
+    ssr: boolean;
+    external?: string[];
+    extensionMiddleware?: Connect.NextHandleFunction[];
+    extraHeaders?: Record<string, string>;
+    indexHtmlTransformer?: (content: string) => Promise<string>;
+    normalizePath: (path: string) => string;
+}
+export declare function createAngularMemoryPlugin(options: AngularMemoryPluginOptions): Plugin;