refactor(@angular-devkit/build-angular): create reusable internal cache infrastructure

Several parts of application builder use slightly different variants of an in-memory
cache. To avoid duplication of code, unified cache infrastructure is now available for
use internally. This also allows for expanded use in other areas of the build system
including the future potential for adding additional backing cache stores.

Author: clydin

packages/angular_devkit/build_angular/src/tools/esbuild/angular/component-stylesheets.ts

@@ -10,32 +10,20 @@ import { OutputFile } from 'esbuild';
 import { createHash } from 'node:crypto';
 import path from 'node:path';
 import { BuildOutputFileType, BundleContextResult, BundlerContext } from '../bundler-context';
+import { MemoryCache } from '../cache';
 import {
   BundleStylesheetOptions,
   createStylesheetBundleOptions,
 } from '../stylesheets/bundle-options';
 
-class BundlerContextCache extends Map<string, BundlerContext> {
-  getOrCreate(key: string, creator: () => BundlerContext): BundlerContext {
-    let value = this.get(key);
-
-    if (value === undefined) {
-      value = creator();
-      this.set(key, value);
-    }
-
-    return value;
-  }
-}
-
 /**
  * Bundles component stylesheets. A stylesheet can be either an inline stylesheet that
  * is contained within the Component's metadata definition or an external file referenced
  * from the Component's metadata definition.
  */
 export class ComponentStylesheetBundler {
-  readonly #fileContexts = new BundlerContextCache();
-  readonly #inlineContexts = new BundlerContextCache();
+  readonly #fileContexts = new MemoryCache<BundlerContext>();
+  readonly #inlineContexts = new MemoryCache<BundlerContext>();
 
   /**
    *
@@ -48,7 +36,7 @@ export class ComponentStylesheetBundler {
   ) {}
 
   async bundleFile(entry: string) {
-    const bundlerContext = this.#fileContexts.getOrCreate(entry, () => {
+    const bundlerContext = await this.#fileContexts.getOrCreate(entry, () => {
       return new BundlerContext(this.options.workspaceRoot, this.incremental, (loadCache) => {
         const buildOptions = createStylesheetBundleOptions(this.options, loadCache);
         buildOptions.entryPoints = [entry];
@@ -67,7 +55,7 @@ export class ComponentStylesheetBundler {
     const id = createHash('sha256').update(data).digest('hex');
     const entry = [language, id, filename].join(';');
 
-    const bundlerContext = this.#inlineContexts.getOrCreate(entry, () => {
+    const bundlerContext = await this.#inlineContexts.getOrCreate(entry, () => {
       const namespace = 'angular:styles/component';
 
       return new BundlerContext(this.options.workspaceRoot, this.incremental, (loadCache) => {

packages/angular_devkit/build_angular/src/tools/esbuild/cache.ts

@@ -0,0 +1,129 @@
+/**
+ * @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
+ */
+
+/**
+ * @fileoverview
+ * Provides infrastructure for common caching functionality within the build system.
+ */
+
+/**
+ * A backing data store for one or more Cache instances.
+ * The interface is intentionally designed to support using a JavaScript
+ * Map instance as a potential cache store.
+ */
+export interface CacheStore<V> {
+  /**
+   * Returns the specified value from the cache store or `undefined` if not found.
+   * @param key The key to retrieve from the store.
+   */
+  get(key: string): V | undefined | Promise<V | undefined>;
+
+  /**
+   * Returns whether the provided key is present in the cache store.
+   * @param key The key to check from the store.
+   */
+  has(key: string): boolean | Promise<boolean>;
+
+  /**
+   * Adds a new value to the cache store if the key is not present.
+   * Updates the value for the key if already present.
+   * @param key The key to associate with the value in the cache store.
+   * @param value The value to add to the cache store.
+   */
+  set(key: string, value: V): this | Promise<this>;
+}
+
+/**
+ * A cache object that allows accessing and storing key/value pairs in
+ * an underlying CacheStore. This class is the primary method for consumers
+ * to use a cache.
+ */
+export class Cache<V, S extends CacheStore<V> = CacheStore<V>> {
+  constructor(
+    protected readonly store: S,
+    readonly namespace?: string,
+  ) {}
+
+  /**
+   * Prefixes a key with the cache namespace if present.
+   * @param key A key string to prefix.
+   * @returns A prefixed key if a namespace is present. Otherwise the provided key.
+   */
+  protected withNamespace(key: string): string {
+    if (this.namespace) {
+      return `${this.namespace}:${key}`;
+    }
+
+    return key;
+  }
+
+  /**
+   * Gets the value associated with a provided key if available.
+   * Otherwise, creates a value using the factory creator function, puts the value
+   * in the cache, and returns the new value.
+   * @param key A key associated with the value.
+   * @param creator A factory function for the value if no value is present.
+   * @returns A value associated with the provided key.
+   */
+  async getOrCreate(key: string, creator: () => V | Promise<V>): Promise<V> {
+    const namespacedKey = this.withNamespace(key);
+    let value = await this.store.get(namespacedKey);
+
+    if (value === undefined) {
+      value = await creator();
+      await this.store.set(namespacedKey, value);
+    }
+
+    return value;
+  }
+
+  /**
+   * Gets the value associated with a provided key if available.
+   * @param key A key associated with the value.
+   * @returns A value associated with the provided key if present. Otherwise, `undefined`.
+   */
+  async get(key: string): Promise<V | undefined> {
+    const value = await this.store.get(this.withNamespace(key));
+
+    return value;
+  }
+
+  /**
+   * Puts a value in the cache and associates it with the provided key.
+   * If the key is already present, the value is updated instead.
+   * @param key A key associated with the value.
+   * @param value A value to put in the cache.
+   */
+  async put(key: string, value: V): Promise<void> {
+    await this.store.set(this.withNamespace(key), value);
+  }
+}
+
+/**
+ * A lightweight in-memory cache implementation based on a JavaScript Map object.
+ */
+export class MemoryCache<V> extends Cache<V, Map<string, V>> {
+  constructor() {
+    super(new Map());
+  }
+
+  /**
+   * Removes all entries from the cache instance.
+   */
+  clear() {
+    this.store.clear();
+  }
+
+  /**
+   * Provides all the values currently present in the cache instance.
+   * @returns An iterable of all values in the cache.
+   */
+  values() {
+    return this.store.values();
+  }
+}

packages/angular_devkit/build_angular/src/tools/esbuild/stylesheets/sass-language.ts

@@ -11,6 +11,7 @@ import { dirname, join, relative } from 'node:path';
 import { fileURLToPath, pathToFileURL } from 'node:url';
 import type { CanonicalizeContext, CompileResult, Exception, Syntax } from 'sass';
 import type { SassWorkerImplementation } from '../../sass/sass-service';
+import { MemoryCache } from '../cache';
 import { StylesheetLanguage, StylesheetPluginOptions } from './stylesheet-plugin-factory';
 
 let sassWorkerPool: SassWorkerImplementation | undefined;
@@ -68,19 +69,6 @@ function parsePackageName(url: string): { packageName: string; readonly pathSegm
   };
 }
 
-class Cache<K, V> extends Map<K, V> {
-  async getOrCreate(key: K, creator: () => V | Promise<V>): Promise<V> {
-    let value = this.get(key);
-
-    if (value === undefined) {
-      value = await creator();
-      this.set(key, value);
-    }
-
-    return value;
-  }
-}
-
 async function compileString(
   data: string,
   filePath: string,
@@ -104,8 +92,8 @@ async function compileString(
   // A null value indicates that the cached resolution attempt failed to find a location and
   // later stage resolution should be attempted. This avoids potentially expensive repeat
   // failing resolution attempts.
-  const resolutionCache = new Cache<string, URL | null>();
-  const packageRootCache = new Cache<string, string | null>();
+  const resolutionCache = new MemoryCache<URL | null>();
+  const packageRootCache = new MemoryCache<string | null>();
 
   const warnings: PartialMessage[] = [];
   try {