feat: implement SourceTransformTracker for deduplication of source transformations

Author: YieldRay

docs/src/Icon.tsx

@@ -1,7 +1,7 @@
 import { forwardRef, useId } from "react";
 import type { CSSProperties, SVGProps } from "react";
 
-// export { default as Stack } from "./Stack";
+export { default as Stack } from "./Stack.tsx";
 
 export interface IconProps extends Omit<SVGProps<SVGSVGElement>, "path" | "color" | "rotate"> {
   path: string;

src/module-tsx.ts

@@ -10,6 +10,7 @@ import {
   isRelativeSpecifier,
 } from "./specifier.ts";
 import { addReactImport, needsReactImport } from "./react.ts";
+import { SourceTransformTracker } from "./source-tracker.ts";
 import { createSourceFile, printSourceFile, transform } from "./ts.ts";
 
 interface ModuleTSXConfig {
@@ -38,6 +39,7 @@ export class ModuleTSX extends EventTarget implements IModuleTSX {
   public readonly baseUrl: string;
   public readonly importMap: ImportMapData;
   public readonly fetch: (url: string) => Promise<Response>;
+  private readonly sourceTracker = new SourceTransformTracker<ResourceType>();
   private readonly fetchText = async (url: string) => {
     return this.fetch(url).then((res) => res.text());
   };
@@ -89,15 +91,19 @@ export class ModuleTSX extends EventTarget implements IModuleTSX {
 
   /** Transform module source code and return a blob URL with the transformed content */
   private async transformSourceModule(sourceType: ResourceType, sourceUrl: string, sourceCode: string) {
-    if (this._sourceMap.has(sourceUrl)) {
-      return this._sourceMap.get(sourceUrl)!;
+    const cachedBlobUrl = this.sourceTracker.get(sourceType, sourceUrl);
+    if (cachedBlobUrl) {
+      return cachedBlobUrl;
     }
-    const loader = this.getLoaderByResourceType(sourceType);
-    const code = `import.meta.url=${JSON.stringify(sourceUrl)};\n` + (await loader(sourceUrl, sourceCode));
-    const blob = new Blob([code], { type: "text/javascript" });
-    const blobUrl = URL.createObjectURL(blob);
-    this._track(sourceUrl, blobUrl);
-    return blobUrl;
+
+    return this.sourceTracker.runWithDedup(sourceType, sourceUrl, async () => {
+      const loader = this.getLoaderByResourceType(sourceType);
+      const code = `import.meta.url=${JSON.stringify(sourceUrl)};\n` + (await loader(sourceUrl, sourceCode));
+      const blob = new Blob([code], { type: "text/javascript" });
+      const blobUrl = URL.createObjectURL(blob);
+      this.sourceTracker.set(sourceType, sourceUrl, blobUrl);
+      return blobUrl;
+    });
   }
 
   private getLoaderByResourceType(type: ResourceType): Loader {
@@ -211,12 +217,6 @@ export class ModuleTSX extends EventTarget implements IModuleTSX {
     return resolved;
   }
 
-  private _sourceMap: Map<string, string> = new Map<string, string>();
-  private _blobMap: Map<string, string> = new Map<string, string>();
-  private _track(sourceUrl: string, blobUrl: string) {
-    this._sourceMap.set(sourceUrl, blobUrl);
-    this._blobMap.set(blobUrl, sourceUrl);
-  }
 }
 
 type ResourceType = "esm" | "css" | "css-module";

src/source-tracker.ts

@@ -0,0 +1,41 @@
+export class SourceTransformTracker<TSourceType extends string> {
+  private readonly sourceMap = new Map<string, string>();
+  private readonly inFlightSourceMap = new Map<string, Promise<string>>();
+  private readonly blobMap = new Map<string, string>();
+
+  public get(sourceType: TSourceType, sourceUrl: string): string | undefined {
+    return this.sourceMap.get(this.getSourceKey(sourceType, sourceUrl));
+  }
+
+  public set(sourceType: TSourceType, sourceUrl: string, blobUrl: string): void {
+    this.sourceMap.set(this.getSourceKey(sourceType, sourceUrl), blobUrl);
+    this.blobMap.set(blobUrl, sourceUrl);
+  }
+
+  public getSourceUrlByBlob(blobUrl: string): string | undefined {
+    return this.blobMap.get(blobUrl);
+  }
+
+  public runWithDedup(
+    sourceType: TSourceType,
+    sourceUrl: string,
+    run: () => Promise<string>,
+  ): Promise<string> {
+    const sourceKey = this.getSourceKey(sourceType, sourceUrl);
+    const inFlight = this.inFlightSourceMap.get(sourceKey);
+    if (inFlight) {
+      return inFlight;
+    }
+
+    const task = run();
+    this.inFlightSourceMap.set(sourceKey, task);
+
+    return task.finally(() => {
+      this.inFlightSourceMap.delete(sourceKey);
+    });
+  }
+
+  private getSourceKey(sourceType: TSourceType, sourceUrl: string): string {
+    return `${sourceType}:${sourceUrl}`;
+  }
+}