refactor(@angular-devkit/build-angular): move internal bundle output processing into esbuild bundle helper

The path adjustments and initial file logic for index file generation are now centralized in the esbuild
build helper function. This allows usage of the functionality in multiple areas of the build system.

Author: clydin

packages/angular_devkit/build_angular/src/builders/browser-esbuild/esbuild.ts

@@ -17,6 +17,8 @@ import {
   build,
   formatMessages,
 } from 'esbuild';
+import { basename, extname, relative } from 'node:path';
+import { FileInfo } from '../../utils/index-file/augment-index-html';
 
 /**
  * Determines if an unknown value is an esbuild BuildFailure error object thrown by esbuild.
@@ -39,16 +41,20 @@ export function isEsBuildFailure(value: unknown): value is BuildFailure {
  * warnings and errors for the attempted build.
  */
 export async function bundle(
+  workspaceRoot: string,
   optionsOrInvalidate: BuildOptions | BuildInvalidate,
 ): Promise<
-  (BuildResult & { outputFiles: OutputFile[] }) | (BuildFailure & { outputFiles?: never })
+  | (BuildResult & { outputFiles: OutputFile[]; initialFiles: FileInfo[] })
+  | (BuildFailure & { outputFiles?: never })
 > {
+  let result;
   try {
     if (typeof optionsOrInvalidate === 'function') {
-      return (await optionsOrInvalidate()) as BuildResult & { outputFiles: OutputFile[] };
+      result = (await optionsOrInvalidate()) as BuildResult & { outputFiles: OutputFile[] };
     } else {
-      return await build({
+      result = await build({
         ...optionsOrInvalidate,
+        metafile: true,
         write: false,
       });
     }
@@ -60,6 +66,27 @@ export async function bundle(
       throw failure;
     }
   }
+
+  const initialFiles: FileInfo[] = [];
+  for (const outputFile of result.outputFiles) {
+    // Entries in the metafile are relative to the `absWorkingDir` option which is set to the workspaceRoot
+    const relativeFilePath = relative(workspaceRoot, outputFile.path);
+    const entryPoint = result.metafile?.outputs[relativeFilePath]?.entryPoint;
+
+    outputFile.path = relativeFilePath;
+
+    if (entryPoint) {
+      // An entryPoint value indicates an initial file
+      initialFiles.push({
+        file: outputFile.path,
+        // The first part of the filename is the name of file (e.g., "polyfills" for "polyfills.7S5G3MDY.js")
+        name: basename(outputFile.path).split('.')[0],
+        extension: extname(outputFile.path),
+      });
+    }
+  }
+
+  return { ...result, initialFiles };
 }
 
 export async function logMessages(

packages/angular_devkit/build_angular/src/builders/browser-esbuild/index.ts

@@ -92,7 +92,10 @@ async function execute(
 
   const [codeResults, styleResults] = await Promise.all([
     // Execute esbuild to bundle the application code
-    bundle(rebuildState?.codeRebuild ?? createCodeBundleOptions(options, target, codeBundleCache)),
+    bundle(
+      workspaceRoot,
+      rebuildState?.codeRebuild ?? createCodeBundleOptions(options, target, codeBundleCache),
+    ),
     // Execute esbuild to bundle the global stylesheets
     bundleGlobalStylesheets(options, target),
   ]);
@@ -108,31 +111,9 @@ async function execute(
     return new ExecutionResult(false, rebuildState?.codeRebuild, codeBundleCache);
   }
 
-  // Structure the code bundling output files
-  const initialFiles: FileInfo[] = [];
-  const outputFiles: OutputFile[] = [];
-  for (const outputFile of codeResults.outputFiles) {
-    // Entries in the metafile are relative to the `absWorkingDir` option which is set to the workspaceRoot
-    const relativeFilePath = path.relative(workspaceRoot, outputFile.path);
-    const entryPoint = codeResults.metafile?.outputs[relativeFilePath]?.entryPoint;
-
-    outputFile.path = relativeFilePath;
-
-    if (entryPoint) {
-      // An entryPoint value indicates an initial file
-      initialFiles.push({
-        file: outputFile.path,
-        // The first part of the filename is the name of file (e.g., "polyfills" for "polyfills.7S5G3MDY.js")
-        name: path.basename(outputFile.path).split('.')[0],
-        extension: path.extname(outputFile.path),
-      });
-    }
-    outputFiles.push(outputFile);
-  }
-
-  // Add global stylesheets output files
-  outputFiles.push(...styleResults.outputFiles);
-  initialFiles.push(...styleResults.initialFiles);
+  // Combine the bundling output files
+  const initialFiles: FileInfo[] = [...codeResults.initialFiles, ...styleResults.initialFiles];
+  const outputFiles: OutputFile[] = [...codeResults.outputFiles, ...styleResults.outputFiles];
 
   // Return if the global stylesheet bundling has errors
   if (styleResults.errors.length) {
@@ -268,7 +249,6 @@ function createCodeBundleOptions(
     conditions: ['es2020', 'es2015', 'module'],
     resolveExtensions: ['.ts', '.tsx', '.mjs', '.js'],
     logLevel: options.verbose ? 'debug' : 'silent',
-    metafile: true,
     minify: optimizationOptions.scripts,
     pure: ['forwardRef'],
     outdir: workspaceRoot,

packages/angular_devkit/build_angular/src/builders/browser-esbuild/stylesheets.ts

@@ -28,7 +28,7 @@ async function bundleStylesheet(
   options: BundleStylesheetOptions,
 ) {
   // Execute esbuild
-  const result = await bundle({
+  const result = await bundle(options.workspaceRoot, {
     ...entry,
     absWorkingDir: options.workspaceRoot,
     bundle: true,
@@ -58,7 +58,6 @@ async function bundleStylesheet(
   const resourceFiles: OutputFile[] = [];
   if (result.outputFiles) {
     for (const outputFile of result.outputFiles) {
-      outputFile.path = path.relative(options.workspaceRoot, outputFile.path);
       const filename = path.basename(outputFile.path);
       if (filename.endsWith('.css')) {
         outputPath = outputFile.path;