refactor: create a common plugin to generate virtual modules

alan-agius4 · clydin · commit b83dc4463b4f · 2023-06-02T09:45:23.000-04:00
This commit adds a new plugin to enable us to create virtual modules more easily.
diff --git a/packages/angular_devkit/build_angular/src/builders/browser-esbuild/global-scripts.ts b/packages/angular_devkit/build_angular/src/builders/browser-esbuild/global-scripts.ts
@@ -15,6 +15,7 @@ import { assertIsError } from '../../utils/error';
 import { LoadResultCache, createCachedLoad } from './load-result-cache';
 import type { NormalizedBrowserOptions } from './options';
 import { createSourcemapIngorelistPlugin } from './sourcemap-ignorelist-plugin';
+import { createVirtualModulePlugin } from './virtual-module-plugin';
 
 /**
  * Create an esbuild 'build' options object for all global scripts defined in the user provied
@@ -71,84 +72,62 @@ export function createGlobalScriptsBundleOptions(
     preserveSymlinks,
     plugins: [
       createSourcemapIngorelistPlugin(),
-      {
-        name: 'angular-global-scripts',
-        setup(build) {
-          build.onResolve({ filter: /^angular:script\/global:/ }, (args) => {
-            if (args.kind !== 'entry-point') {
-              return null;
-            }
-
-            return {
-              // Add the `js` extension here so that esbuild generates an output file with the extension
-              path: args.path.slice(namespace.length + 1) + '.js',
-              namespace,
-            };
-          });
-          // All references within a global script should be considered external. This maintains the runtime
-          // behavior of the script as if it were added directly to a script element for referenced imports.
-          build.onResolve({ filter: /./, namespace }, ({ path }) => {
-            return {
-              path,
-              external: true,
-            };
-          });
-          build.onLoad(
-            { filter: /./, namespace },
-            createCachedLoad(loadCache, async (args) => {
-              const files = globalScripts.find(
-                ({ name }) => name === args.path.slice(0, -3),
-              )?.files;
-              assert(files, `Invalid operation: global scripts name not found [${args.path}]`);
+      createVirtualModulePlugin({
+        namespace,
+        external: true,
+        // Add the `js` extension here so that esbuild generates an output file with the extension
+        transformPath: (path) => path.slice(namespace.length + 1) + '.js',
+        loadContent: (args, build) =>
+          createCachedLoad(loadCache, async (args) => {
+            const files = globalScripts.find(({ name }) => name === args.path.slice(0, -3))?.files;
+            assert(files, `Invalid operation: global scripts name not found [${args.path}]`);
 
-              // Global scripts are concatenated using magic-string instead of bundled via esbuild.
-              const bundleContent = new Bundle();
-              const watchFiles = [];
-              for (const filename of files) {
-                let fileContent;
-                try {
-                  // Attempt to read as a relative path from the workspace root
-                  fileContent = await readFile(path.join(workspaceRoot, filename), 'utf-8');
-                  watchFiles.push(filename);
-                } catch (e) {
-                  assertIsError(e);
-                  if (e.code !== 'ENOENT') {
-                    throw e;
-                  }
-
-                  // If not found attempt to resolve as a module specifier
-                  const resolveResult = await build.resolve(filename, {
-                    kind: 'entry-point',
-                    resolveDir: workspaceRoot,
-                  });
+            // Global scripts are concatenated using magic-string instead of bundled via esbuild.
+            const bundleContent = new Bundle();
+            const watchFiles = [];
+            for (const filename of files) {
+              let fileContent;
+              try {
+                // Attempt to read as a relative path from the workspace root
+                fileContent = await readFile(path.join(workspaceRoot, filename), 'utf-8');
+                watchFiles.push(filename);
+              } catch (e) {
+                assertIsError(e);
+                if (e.code !== 'ENOENT') {
+                  throw e;
+                }
 
-                  if (resolveResult.errors.length) {
-                    // Remove resolution failure notes about marking as external since it doesn't apply
-                    // to global scripts.
-                    resolveResult.errors.forEach((error) => (error.notes = []));
+                // If not found attempt to resolve as a module specifier
+                const resolveResult = await build.resolve(filename, {
+                  kind: 'entry-point',
+                  resolveDir: workspaceRoot,
+                });
 
-                    return {
-                      errors: resolveResult.errors,
-                      warnings: resolveResult.warnings,
-                    };
-                  }
+                if (resolveResult.errors.length) {
+                  // Remove resolution failure notes about marking as external since it doesn't apply
+                  // to global scripts.
+                  resolveResult.errors.forEach((error) => (error.notes = []));
 
-                  watchFiles.push(path.relative(resolveResult.path, workspaceRoot));
-                  fileContent = await readFile(resolveResult.path, 'utf-8');
+                  return {
+                    errors: resolveResult.errors,
+                    warnings: resolveResult.warnings,
+                  };
                 }
 
-                bundleContent.addSource(new MagicString(fileContent, { filename }));
+                watchFiles.push(path.relative(resolveResult.path, workspaceRoot));
+                fileContent = await readFile(resolveResult.path, 'utf-8');
               }
 
-              return {
-                contents: bundleContent.toString(),
-                loader: 'js',
-                watchFiles,
-              };
-            }),
-          );
-        },
-      },
+              bundleContent.addSource(new MagicString(fileContent, { filename }));
+            }
+
+            return {
+              contents: bundleContent.toString(),
+              loader: 'js',
+              watchFiles,
+            };
+          }).call(build, args),
+      }),
     ],
   };
 }
diff --git a/packages/angular_devkit/build_angular/src/builders/browser-esbuild/global-styles.ts b/packages/angular_devkit/build_angular/src/builders/browser-esbuild/global-styles.ts
@@ -11,6 +11,7 @@ import assert from 'node:assert';
 import { LoadResultCache } from './load-result-cache';
 import { NormalizedBrowserOptions } from './options';
 import { createStylesheetBundleOptions } from './stylesheets/bundle-options';
+import { createVirtualModulePlugin } from './virtual-module-plugin';
 
 export function createGlobalStylesBundleOptions(
   options: NormalizedBrowserOptions,
@@ -69,20 +70,11 @@ export function createGlobalStylesBundleOptions(
   buildOptions.legalComments = options.extractLicenses ? 'none' : 'eof';
   buildOptions.entryPoints = entryPoints;
 
-  buildOptions.plugins.unshift({
-    name: 'angular-global-styles',
-    setup(build) {
-      build.onResolve({ filter: /^angular:styles\/global;/ }, (args) => {
-        if (args.kind !== 'entry-point') {
-          return null;
-        }
-
-        return {
-          path: args.path.split(';', 2)[1],
-          namespace,
-        };
-      });
-      build.onLoad({ filter: /./, namespace }, (args) => {
+  buildOptions.plugins.unshift(
+    createVirtualModulePlugin({
+      namespace,
+      transformPath: (path) => path.split(';', 2)[1],
+      loadContent: (args) => {
         const files = globalStyles.find(({ name }) => name === args.path)?.files;
         assert(files, `global style name should always be found [${args.path}]`);
 
@@ -91,9 +83,9 @@ export function createGlobalStylesBundleOptions(
           loader: 'css',
           resolveDir: workspaceRoot,
         };
-      });
-    },
-  });
+      },
+    }),
+  );
 
   return buildOptions;
 }
diff --git a/packages/angular_devkit/build_angular/src/builders/browser-esbuild/index.ts b/packages/angular_devkit/build_angular/src/builders/browser-esbuild/index.ts
@@ -33,6 +33,7 @@ import { BrowserEsbuildOptions, NormalizedBrowserOptions, normalizeOptions } fro
 import { Schema as BrowserBuilderOptions } from './schema';
 import { createSourcemapIngorelistPlugin } from './sourcemap-ignorelist-plugin';
 import { shutdownSassWorkerPool } from './stylesheets/sass-language';
+import { createVirtualModulePlugin } from './virtual-module-plugin';
 import type { ChangedFiles } from './watcher';
 
 const compressAsync = promisify(brotliCompress);
@@ -470,28 +471,16 @@ function createCodeBundleOptions(
       ['polyfills']: namespace,
     };
 
-    buildOptions.plugins?.unshift({
-      name: 'angular-polyfills',
-      setup(build) {
-        build.onResolve({ filter: /^angular:polyfills$/ }, (args) => {
-          if (args.kind !== 'entry-point') {
-            return null;
-          }
-
-          return {
-            path: 'entry',
-            namespace,
-          };
-        });
-        build.onLoad({ filter: /./, namespace }, () => {
-          return {
-            contents: polyfills.map((file) => `import '${file.replace(/\\/g, '/')}';`).join('\n'),
-            loader: 'js',
-            resolveDir: workspaceRoot,
-          };
-        });
-      },
-    });
+    buildOptions.plugins?.unshift(
+      createVirtualModulePlugin({
+        namespace,
+        loadContent: () => ({
+          contents: polyfills.map((file) => `import '${file.replace(/\\/g, '/')}';`).join('\n'),
+          loader: 'js',
+          resolveDir: workspaceRoot,
+        }),
+      }),
+    );
   }
 
   return buildOptions;
diff --git a/packages/angular_devkit/build_angular/src/builders/browser-esbuild/virtual-module-plugin.ts b/packages/angular_devkit/build_angular/src/builders/browser-esbuild/virtual-module-plugin.ts
@@ -0,0 +1,63 @@
+/**
+ * @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 { OnLoadArgs, Plugin, PluginBuild } from 'esbuild';
+
+/**
+ * Options for the createVirtualModulePlugin
+ * @see createVirtualModulePlugin
+ */
+export interface VirtualModulePluginOptions {
+  /** Namespace. Example: `angular:polyfills`. */
+  namespace: string;
+  /** If the generated module should be marked as external. */
+  external?: boolean;
+  /** Method to transform the onResolve path. */
+  transformPath?: (path: string) => string;
+  /** Method to provide the module content. */
+  loadContent: (
+    args: OnLoadArgs,
+    build: PluginBuild,
+  ) => ReturnType<Parameters<PluginBuild['onLoad']>[1]>;
+}
+
+/**
+ * Creates an esbuild plugin that generated virtual modules.
+ *
+ * @returns An esbuild plugin.
+ */
+export function createVirtualModulePlugin(options: VirtualModulePluginOptions): Plugin {
+  const { namespace, external, transformPath: pathTransformer, loadContent } = options;
+
+  return {
+    name: namespace.replace(/[/:]/g, '-'),
+    setup(build): void {
+      build.onResolve({ filter: new RegExp('^' + namespace) }, ({ kind, path }) => {
+        if (kind !== 'entry-point') {
+          return null;
+        }
+
+        return {
+          path: pathTransformer?.(path) ?? path,
+          namespace,
+        };
+      });
+
+      if (external) {
+        build.onResolve({ filter: /./, namespace }, ({ path }) => {
+          return {
+            path,
+            external: true,
+          };
+        });
+      }
+
+      build.onLoad({ filter: /./, namespace }, (args) => loadContent(args, build));
+    },
+  };
+}
