@angular/build 18.1.0-rc.0 → 18.1.0

package/src/tools/esbuild/utils.js

@@ -11,20 +11,21 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.logBuildStats = logBuildStats;
+exports.getChunkNameFromMetafile = getChunkNameFromMetafile;
 exports.calculateEstimatedTransferSizes = calculateEstimatedTransferSizes;
 exports.withSpinner = withSpinner;
 exports.withNoProgress = withNoProgress;
 exports.getFeatureSupport = getFeatureSupport;
 exports.writeResultFiles = writeResultFiles;
 exports.emitFilesToDisk = emitFilesToDisk;
-exports.createOutputFileFromText = createOutputFileFromText;
-exports.createOutputFileFromData = createOutputFileFromData;
+exports.createOutputFile = createOutputFile;
 exports.convertOutputFile = convertOutputFile;
 exports.transformSupportedBrowsersToTargets = transformSupportedBrowsersToTargets;
 exports.getSupportedNodeTargets = getSupportedNodeTargets;
 exports.createJsonBuildManifest = createJsonBuildManifest;
 exports.logMessages = logMessages;
 exports.isZonelessApp = isZonelessApp;
+exports.getEntryPointName = getEntryPointName;
 const esbuild_1 = require("esbuild");
 const node_crypto_1 = require("node:crypto");
 const node_fs_1 = require("node:fs");
@@ -36,40 +37,29 @@ const semver_1 = require("semver");
 const spinner_1 = require("../../utils/spinner");
 const stats_table_1 = require("../../utils/stats-table");
 const bundler_context_1 = require("./bundler-context");
-function logBuildStats(metafile, initial, budgetFailures, colors, changedFiles, estimatedTransferSizes, ssrOutputEnabled, verbose) {
+function logBuildStats(metafile, outputFiles, initial, budgetFailures, colors, changedFiles, estimatedTransferSizes, ssrOutputEnabled, verbose) {
     const browserStats = [];
     const serverStats = [];
     let unchangedCount = 0;
-    for (const [file, output] of Object.entries(metafile.outputs)) {
+    for (const { path: file, size, type } of outputFiles) {
         // Only display JavaScript and CSS files
         if (!/\.(?:css|m?js)$/.test(file)) {
             continue;
         }
-        // Skip internal component resources
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        if (output['ng-component']) {
-            continue;
-        }
         // Show only changed files if a changed list is provided
         if (changedFiles && !changedFiles.has(file)) {
             ++unchangedCount;
             continue;
         }
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        const isPlatformServer = output['ng-platform-server'];
+        const isPlatformServer = type === bundler_context_1.BuildOutputFileType.Server;
         if (isPlatformServer && !ssrOutputEnabled) {
             // Only log server build stats when SSR is enabled.
             continue;
         }
-        let name = initial.get(file)?.name;
-        if (name === undefined && output.entryPoint) {
-            name = (0, node_path_1.basename)(output.entryPoint)
-                .replace(/\.[cm]?[jt]s$/, '')
-                .replace(/[\\/.]/g, '-');
-        }
+        const name = initial.get(file)?.name ?? getChunkNameFromMetafile(metafile, file);
         const stat = {
             initial: initial.has(file),
-            stats: [file, name ?? '-', output.bytes, estimatedTransferSizes?.get(file) ?? '-'],
+            stats: [file, name ?? '-', size, estimatedTransferSizes?.get(file) ?? '-'],
         };
         if (isPlatformServer) {
             serverStats.push(stat);
@@ -90,6 +80,11 @@ function logBuildStats(metafile, initial, budgetFailures, colors, changedFiles,
     }
     return '';
 }
+function getChunkNameFromMetafile(metafile, file) {
+    if (metafile.outputs[file]?.entryPoint) {
+        return getEntryPointName(metafile.outputs[file].entryPoint);
+    }
+}
 async function calculateEstimatedTransferSizes(outputFiles) {
     const sizes = new Map();
     if (outputFiles.length <= 0) {
@@ -158,8 +153,6 @@ function getFeatureSupport(target, nativeAsyncAwait) {
         // will be used instead which provides a workaround for the performance issue.
         // For more details: https://bugs.chromium.org/p/v8/issues/detail?id=11536
         'object-rest-spread': false,
-        // Using top-level-await is not guaranteed to be safe with some code optimizations.
-        'top-level-await': false,
     };
     // Detect Safari browser versions that have a class field behavior bug
     // See: https://github.com/angular/angular-cli/issues/24355#issuecomment-1333477033
@@ -245,49 +238,91 @@ async function emitFilesToDisk(files, writeFileCallback) {
         await Promise.all(actions);
     }
 }
-function createOutputFileFromText(path, text, type) {
-    return {
-        path,
-        text,
-        type,
-        get hash() {
-            return (0, node_crypto_1.createHash)('sha256').update(this.text).digest('hex');
-        },
-        get contents() {
-            return Buffer.from(this.text, 'utf-8');
-        },
-        clone() {
-            return createOutputFileFromText(this.path, this.text, this.type);
-        },
-    };
+function createOutputFile(path, data, type) {
+    if (typeof data === 'string') {
+        let cachedContents = null;
+        let cachedText = data;
+        let cachedHash = null;
+        return {
+            path,
+            type,
+            get contents() {
+                cachedContents ??= new TextEncoder().encode(data);
+                return cachedContents;
+            },
+            set contents(value) {
+                cachedContents = value;
+                cachedText = null;
+            },
+            get text() {
+                cachedText ??= new TextDecoder('utf-8').decode(this.contents);
+                return cachedText;
+            },
+            get size() {
+                return this.contents.byteLength;
+            },
+            get hash() {
+                cachedHash ??= (0, node_crypto_1.createHash)('sha256')
+                    .update(cachedText ?? this.contents)
+                    .digest('hex');
+                return cachedHash;
+            },
+            clone() {
+                return createOutputFile(this.path, cachedText ?? this.contents, this.type);
+            },
+        };
+    }
+    else {
+        let cachedContents = data;
+        let cachedText = null;
+        let cachedHash = null;
+        return {
+            get contents() {
+                return cachedContents;
+            },
+            set contents(value) {
+                cachedContents = value;
+                cachedText = null;
+            },
+            path,
+            type,
+            get size() {
+                return this.contents.byteLength;
+            },
+            get text() {
+                cachedText ??= new TextDecoder('utf-8').decode(this.contents);
+                return cachedText;
+            },
+            get hash() {
+                cachedHash ??= (0, node_crypto_1.createHash)('sha256').update(this.contents).digest('hex');
+                return cachedHash;
+            },
+            clone() {
+                return createOutputFile(this.path, this.contents, this.type);
+            },
+        };
+    }
 }
-function createOutputFileFromData(path, data, type) {
+function convertOutputFile(file, type) {
+    let { contents: cachedContents } = file;
+    let cachedText = null;
     return {
-        path,
-        type,
-        get text() {
-            return Buffer.from(data.buffer, data.byteOffset, data.byteLength).toString('utf-8');
-        },
-        get hash() {
-            return (0, node_crypto_1.createHash)('sha256').update(this.text).digest('hex');
-        },
         get contents() {
-            return data;
+            return cachedContents;
         },
-        clone() {
-            return createOutputFileFromData(this.path, this.contents, this.type);
+        set contents(value) {
+            cachedContents = value;
+            cachedText = null;
         },
-    };
-}
-function convertOutputFile(file, type) {
-    const { path, contents, hash } = file;
-    return {
-        contents,
-        hash,
-        path,
+        hash: file.hash,
+        path: file.path,
         type,
+        get size() {
+            return this.contents.byteLength;
+        },
         get text() {
-            return Buffer.from(this.contents.buffer, this.contents.byteOffset, this.contents.byteLength).toString('utf-8');
+            cachedText ??= new TextDecoder('utf-8').decode(this.contents);
+            return cachedText;
         },
         clone() {
             return convertOutputFile(this, this.type);
@@ -389,3 +424,9 @@ function isZonelessApp(polyfills) {
     // TODO: Instead, we should rely on the presence of zone.js in the polyfills build metadata.
     return !polyfills?.some((p) => p === 'zone.js' || /\.[mc]?[jt]s$/.test(p));
 }
+function getEntryPointName(entryPoint) {
+    return (0, node_path_1.basename)(entryPoint)
+        .replace(/(.*:)/, '') // global:bundle.css  -> bundle.css
+        .replace(/\.[cm]?[jt]s$/, '')
+        .replace(/[\\/.]/g, '-');
+}

package/src/tools/esbuild/wasm-plugin.d.ts

@@ -0,0 +1,28 @@
+/**
+ * @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
+ */
+import type { Plugin } from 'esbuild';
+import { LoadResultCache } from './load-result-cache';
+/**
+ * Options for the Angular WASM esbuild plugin
+ * @see createWasmPlugin
+ */
+export interface WasmPluginOptions {
+    /** Allow generation of async (proposal compliant) WASM imports. This requires zoneless to enable async/await. */
+    allowAsync?: boolean;
+    /** Load results cache. */
+    cache?: LoadResultCache;
+}
+/**
+ * Creates an esbuild plugin to use WASM files with import statements and expressions.
+ * The default behavior follows the WebAssembly/ES mode integration proposal found at
+ * https://github.com/WebAssembly/esm-integration/tree/main/proposals/esm-integration.
+ * This behavior requires top-level await support which is only available in zoneless
+ * Angular applications.
+ * @returns An esbuild plugin.
+ */
+export declare function createWasmPlugin(options: WasmPluginOptions): Plugin;

package/src/tools/esbuild/wasm-plugin.js

@@ -0,0 +1,210 @@
+"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
+ */
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createWasmPlugin = createWasmPlugin;
+const node_assert_1 = __importDefault(require("node:assert"));
+const node_crypto_1 = require("node:crypto");
+const promises_1 = require("node:fs/promises");
+const node_path_1 = require("node:path");
+const error_1 = require("../../utils/error");
+const load_result_cache_1 = require("./load-result-cache");
+const WASM_INIT_NAMESPACE = 'angular:wasm:init';
+const WASM_CONTENTS_NAMESPACE = 'angular:wasm:contents';
+const WASM_RESOLVE_SYMBOL = Symbol('WASM_RESOLVE_SYMBOL');
+// See: https://github.com/tc39/proposal-regexp-unicode-property-escapes/blob/fe6d07fad74cd0192d154966baa1e95e7cda78a1/README.md#other-examples
+const ecmaIdentifierNameRegExp = /^(?:[$_\p{ID_Start}])(?:[$_\u200C\u200D\p{ID_Continue}])*$/u;
+/**
+ * Creates an esbuild plugin to use WASM files with import statements and expressions.
+ * The default behavior follows the WebAssembly/ES mode integration proposal found at
+ * https://github.com/WebAssembly/esm-integration/tree/main/proposals/esm-integration.
+ * This behavior requires top-level await support which is only available in zoneless
+ * Angular applications.
+ * @returns An esbuild plugin.
+ */
+function createWasmPlugin(options) {
+    const { allowAsync = false, cache } = options;
+    return {
+        name: 'angular-wasm',
+        setup(build) {
+            build.onResolve({ filter: /.wasm$/ }, async (args) => {
+                // Skip if already resolving the WASM file to avoid infinite resolution
+                if (args.pluginData?.[WASM_RESOLVE_SYMBOL]) {
+                    return;
+                }
+                // Skip if not an import statement or expression
+                if (args.kind !== 'import-statement' && args.kind !== 'dynamic-import') {
+                    return;
+                }
+                // When in the initialization namespace, the content has already been resolved
+                // and only needs to be loaded for use with the initialization code.
+                if (args.namespace === WASM_INIT_NAMESPACE) {
+                    return {
+                        namespace: WASM_CONTENTS_NAMESPACE,
+                        path: (0, node_path_1.join)(args.resolveDir, args.path),
+                        pluginData: args.pluginData,
+                    };
+                }
+                // Skip if a custom loader is defined
+                if (build.initialOptions.loader?.['.wasm'] || args.with['loader']) {
+                    return;
+                }
+                // Attempt full resolution of the WASM file
+                const resolveOptions = {
+                    ...args,
+                    pluginData: { [WASM_RESOLVE_SYMBOL]: true },
+                };
+                // The "path" property will cause an error if used in the resolve call
+                delete resolveOptions.path;
+                const result = await build.resolve(args.path, resolveOptions);
+                // Skip if there are errors, is external, or another plugin resolves to a custom namespace
+                if (result.errors.length > 0 || result.external || result.namespace !== 'file') {
+                    // Reuse already resolved result
+                    return result;
+                }
+                return {
+                    ...result,
+                    namespace: WASM_INIT_NAMESPACE,
+                };
+            });
+            build.onLoad({ filter: /.wasm$/, namespace: WASM_INIT_NAMESPACE }, (0, load_result_cache_1.createCachedLoad)(cache, async (args) => {
+                // Ensure async mode is supported
+                if (!allowAsync) {
+                    return {
+                        errors: [
+                            {
+                                text: 'WASM/ES module integration imports are not supported with Zone.js applications',
+                                notes: [
+                                    {
+                                        text: 'Information about zoneless Angular applications can be found here: https://angular.dev/guide/experimental/zoneless',
+                                    },
+                                ],
+                            },
+                        ],
+                    };
+                }
+                const wasmContents = await (0, promises_1.readFile)(args.path);
+                // Inline WASM code less than 10kB
+                const inlineWasm = wasmContents.byteLength < 10_000;
+                // Add import of WASM contents
+                let initContents = `import ${inlineWasm ? 'wasmData' : 'wasmPath'} from ${JSON.stringify((0, node_path_1.basename)(args.path))}`;
+                initContents += inlineWasm ? ' with { loader: "binary" };' : ';\n\n';
+                // Read from the file system when on Node.js (SSR) and not inline
+                if (!inlineWasm && build.initialOptions.platform === 'node') {
+                    initContents += 'import { readFile } from "node:fs/promises";\n';
+                    initContents +=
+                        'const wasmData = await readFile(new URL(wasmPath, import.meta.url));\n';
+                }
+                // Create initialization function
+                initContents += generateInitHelper(!inlineWasm && build.initialOptions.platform !== 'node', wasmContents);
+                // Analyze WASM for imports and exports
+                let importModuleNames, exportNames;
+                try {
+                    const wasm = await WebAssembly.compile(wasmContents);
+                    importModuleNames = new Set(WebAssembly.Module.imports(wasm).map((value) => value.module));
+                    exportNames = WebAssembly.Module.exports(wasm).map((value) => value.name);
+                }
+                catch (error) {
+                    (0, error_1.assertIsError)(error);
+                    return {
+                        errors: [{ text: 'Unable to analyze WASM file', notes: [{ text: error.message }] }],
+                    };
+                }
+                // Ensure export names are valid JavaScript identifiers
+                const invalidExportNames = exportNames.filter((name) => !ecmaIdentifierNameRegExp.test(name));
+                if (invalidExportNames.length > 0) {
+                    return {
+                        errors: invalidExportNames.map((name) => ({
+                            text: 'WASM export names must be valid JavaScript identifiers',
+                            notes: [
+                                {
+                                    text: `The export "${name}" is not valid. The WASM file should be updated to remove this error.`,
+                                },
+                            ],
+                        })),
+                    };
+                }
+                // Add import statements and setup import object
+                initContents += 'const importObject = Object.create(null);\n';
+                let importIndex = 0;
+                for (const moduleName of importModuleNames) {
+                    // Add a namespace import for each module name
+                    initContents += `import * as wasm_import_${++importIndex} from ${JSON.stringify(moduleName)};\n`;
+                    // Add the namespace object to the import object
+                    initContents += `importObject[${JSON.stringify(moduleName)}] = wasm_import_${importIndex};\n`;
+                }
+                // Instantiate the module
+                initContents += 'const instance = await init(importObject);\n';
+                // Add exports
+                const exportNameList = exportNames.join(', ');
+                initContents += `const { ${exportNameList} } = instance.exports;\n`;
+                initContents += `export { ${exportNameList} }\n`;
+                return {
+                    contents: initContents,
+                    loader: 'js',
+                    resolveDir: (0, node_path_1.dirname)(args.path),
+                    pluginData: { wasmContents },
+                    watchFiles: [args.path],
+                };
+            }));
+            build.onLoad({ filter: /.wasm$/, namespace: WASM_CONTENTS_NAMESPACE }, async (args) => {
+                const contents = args.pluginData.wasmContents ?? (await (0, promises_1.readFile)(args.path));
+                let loader = 'file';
+                if (args.with.loader) {
+                    (0, node_assert_1.default)(args.with.loader === 'binary' || args.with.loader === 'file', 'WASM loader type should only be binary or file.');
+                    loader = args.with.loader;
+                }
+                return {
+                    contents,
+                    loader,
+                    watchFiles: [args.path],
+                };
+            });
+        },
+    };
+}
+/**
+ * Generates the string content of the WASM initialization helper function.
+ * This function supports both file fetching and inline byte data depending on
+ * the preferred option for the WASM file. When fetching, an integrity hash is
+ * also generated and used with the fetch action.
+ *
+ * @param streaming Uses fetch and WebAssembly.instantiateStreaming.
+ * @param wasmContents The binary contents to generate an integrity hash.
+ * @returns A string containing the initialization function.
+ */
+function generateInitHelper(streaming, wasmContents) {
+    let resultContents;
+    if (streaming) {
+        const fetchOptions = {
+            integrity: 'sha256-' + (0, node_crypto_1.createHash)('sha-256').update(wasmContents).digest('base64'),
+        };
+        const fetchContents = `fetch(new URL(wasmPath, import.meta.url), ${JSON.stringify(fetchOptions)})`;
+        resultContents = `await WebAssembly.instantiateStreaming(${fetchContents}, imports)`;
+    }
+    else {
+        resultContents = 'await WebAssembly.instantiate(wasmData, imports)';
+    }
+    const contents = `
+let mod;
+async function init(imports) {
+  if (mod) {
+    return await WebAssembly.instantiate(mod, imports);
+  }
+
+  const result = ${resultContents};
+  mod = result.module;
+
+  return result.instance;
+}
+`;
+    return contents;
+}

package/src/tools/esbuild/wasm.d.ts

@@ -0,0 +1,25 @@
+/**
+ * @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
+ */
+
+/** @fileoverview
+ * TypeScript does not provide a separate lib for WASM types and the Node.js
+ * types (`@types/node`) does not contain them either. This type definition
+ * file provides type information for the subset of functionality required
+ * by the Angular build process. Ideally this can be removed when the WASM
+ * type situation has improved.
+ */
+
+declare namespace WebAssembly {
+  class Module {
+    constructor(data: Uint8Array);
+
+    static imports(mod: Module): { module: string; name: string }[];
+    static exports(mode: Module): { name: string }[];
+  }
+  function compile(data: Uint8Array): Promise<Module>;
+}

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

@@ -6,18 +6,15 @@
  * found in the LICENSE file at https://angular.dev/license
  */
 import type { Connect, Plugin } from 'vite';
+import { AngularMemoryOutputFiles } from './utils';
 export interface AngularMemoryPluginOptions {
     workspaceRoot: string;
     virtualProjectRoot: string;
-    outputFiles: Map<string, {
-        contents: Uint8Array;
-        servable: boolean;
-    }>;
+    outputFiles: AngularMemoryOutputFiles;
     assets: Map<string, string>;
     ssr: boolean;
     external?: string[];
     extensionMiddleware?: Connect.NextHandleFunction[];
-    extraHeaders?: Record<string, string>;
     indexHtmlTransformer?: (content: string) => Promise<string>;
     normalizePath: (path: string) => string;
 }