Load async Wasm and JSON imports in parallel (#17818)

nicolo-ribaudo · web-flow · commit de54b9b2afa2 · 2026-03-02T23:07:38.000+01:00
diff --git a/packages/babel-helper-import-to-platform-api/src/index.ts b/packages/babel-helper-import-to-platform-api/src/index.ts
@@ -1,4 +1,4 @@
-import { types as t, template, type File } from "@babel/core";
+import { type NodePath, types as t, template, type File } from "@babel/core";
 import type { Targets } from "@babel/helper-compilation-targets";
 import { addNamed } from "@babel/helper-module-imports";
 
@@ -268,7 +268,7 @@ export function importToPlatformApi(
   };
 }
 
-export function buildParallelStaticImports(
+function buildParallelStaticImports(
   data: { id: t.Identifier; fetch: t.Expression }[],
   needsAwait: boolean,
 ): t.VariableDeclaration | null {
@@ -301,3 +301,44 @@ export function buildParallelStaticImports(
 
   return t.variableDeclaration("const", declarators);
 }
+
+const PREV_PARALLEL_IMPORTS = new WeakMap<
+  t.Program,
+  {
+    node: t.Statement;
+    data: { id: t.Identifier; fetch: t.Expression }[];
+    needsAwait: boolean;
+  }
+>();
+
+export function injectParallelStaticImports(
+  programPath: NodePath<t.Program>,
+  data: { id: t.Identifier; fetch: t.Expression }[],
+  needsAwait: boolean,
+): void {
+  if (data.length === 0) return;
+
+  const program = programPath.node;
+  const prev = PREV_PARALLEL_IMPORTS.get(program);
+  let replacementIndex = -1;
+
+  if (prev) {
+    replacementIndex = program.body.indexOf(prev.node);
+    if (replacementIndex === -1) {
+      PREV_PARALLEL_IMPORTS.delete(program);
+    } else {
+      data = prev.data.concat(data);
+      needsAwait ||= prev.needsAwait;
+    }
+  }
+
+  const varDecl = buildParallelStaticImports(data, needsAwait);
+
+  PREV_PARALLEL_IMPORTS.set(program, { node: varDecl, data, needsAwait });
+
+  if (replacementIndex === -1) {
+    programPath.unshiftContainer("body", varDecl);
+  } else {
+    programPath.get(`body.${replacementIndex}`).replaceWith(varDecl);
+  }
+}
diff --git a/packages/babel-plugin-proposal-import-wasm-source/package.json b/packages/babel-plugin-proposal-import-wasm-source/package.json
@@ -41,7 +41,8 @@
   },
   "devDependencies": {
     "@babel/core": "workspace:^",
-    "@babel/helper-plugin-test-runner": "workspace:^"
+    "@babel/helper-plugin-test-runner": "workspace:^",
+    "@babel/plugin-transform-json-modules": "workspace:^"
   },
   "engines": {
     "node": "^20.19.0 || >=22.12.0"
diff --git a/packages/babel-plugin-proposal-import-wasm-source/src/index.ts b/packages/babel-plugin-proposal-import-wasm-source/src/index.ts
@@ -4,7 +4,7 @@ import syntaxImportSourcePhase from "@babel/plugin-syntax-import-source";
 
 import {
   importToPlatformApi,
-  buildParallelStaticImports,
+  injectParallelStaticImports,
   type Pieces,
   type Builders,
 } from "@babel/helper-import-to-platform-api";
@@ -79,8 +79,7 @@ export default declare(api => {
           decl.remove();
         }
 
-        const decl = buildParallelStaticImports(data, helper.needsAwait);
-        if (decl) path.unshiftContainer("body", decl);
+        injectParallelStaticImports(path, data, helper.needsAwait);
       },
 
       ImportExpression(path) {
diff --git a/packages/babel-plugin-proposal-import-wasm-source/test/fixtures/browser-and-node-esm/parallel-json-import/input.js b/packages/babel-plugin-proposal-import-wasm-source/test/fixtures/browser-and-node-esm/parallel-json-import/input.js
@@ -0,0 +1,4 @@
+import source s1 from "./x1.wasm";
+import source s2 from "./x2.wasm";
+import j1 from "./x1.wasm" with { type: "json" };
+import j2 from "./x2.wasm" with { type: "json" };
diff --git a/packages/babel-plugin-proposal-import-wasm-source/test/fixtures/browser-and-node-esm/parallel-json-import/options.json b/packages/babel-plugin-proposal-import-wasm-source/test/fixtures/browser-and-node-esm/parallel-json-import/options.json
@@ -0,0 +1,5 @@
+{
+  "sourceType": "module",
+  "targets": { "firefox": "110", "node": "20.6" },
+  "plugins": ["proposal-import-wasm-source", "transform-json-modules"]
+}
diff --git a/packages/babel-plugin-proposal-import-wasm-source/test/fixtures/browser-and-node-esm/parallel-json-import/output.mjs b/packages/babel-plugin-proposal-import-wasm-source/test/fixtures/browser-and-node-esm/parallel-json-import/output.mjs
@@ -0,0 +1 @@
+const [s1, s2, j1, j2] = await Promise.all([typeof process === "object" && process.versions?.node ? import("fs").then(fs => fs.promises.readFile(new URL(import.meta.resolve("./x1.wasm")))).then(WebAssembly.compile) : WebAssembly.compileStreaming(fetch(import.meta.resolve("./x1.wasm"))), typeof process === "object" && process.versions?.node ? import("fs").then(fs => fs.promises.readFile(new URL(import.meta.resolve("./x2.wasm")))).then(WebAssembly.compile) : WebAssembly.compileStreaming(fetch(import.meta.resolve("./x2.wasm"))), typeof process === "object" && process.versions?.node ? import("fs").then(fs => fs.promises.readFile(new URL(import.meta.resolve("./x1.wasm")))).then(JSON.parse) : fetch(import.meta.resolve("./x1.wasm")).then(r => r.json()), typeof process === "object" && process.versions?.node ? import("fs").then(fs => fs.promises.readFile(new URL(import.meta.resolve("./x2.wasm")))).then(JSON.parse) : fetch(import.meta.resolve("./x2.wasm")).then(r => r.json())]);
diff --git a/packages/babel-plugin-proposal-import-wasm-source/test/fixtures/browser/parallel-json-import/input.js b/packages/babel-plugin-proposal-import-wasm-source/test/fixtures/browser/parallel-json-import/input.js
@@ -0,0 +1,4 @@
+import source s1 from "./x1.wasm";
+import source s2 from "./x2.wasm";
+import j1 from "./x1.wasm" with { type: "json" };
+import j2 from "./x2.wasm" with { type: "json" };
diff --git a/packages/babel-plugin-proposal-import-wasm-source/test/fixtures/browser/parallel-json-import/options.json b/packages/babel-plugin-proposal-import-wasm-source/test/fixtures/browser/parallel-json-import/options.json
@@ -0,0 +1,5 @@
+{
+  "sourceType": "module",
+  "targets": { "firefox": "110" },
+  "plugins": ["proposal-import-wasm-source", "transform-json-modules"]
+}
diff --git a/packages/babel-plugin-proposal-import-wasm-source/test/fixtures/browser/parallel-json-import/output.mjs b/packages/babel-plugin-proposal-import-wasm-source/test/fixtures/browser/parallel-json-import/output.mjs
@@ -0,0 +1 @@
+const [s1, s2, j1, j2] = await Promise.all([WebAssembly.compileStreaming(fetch(import.meta.resolve("./x1.wasm"))), WebAssembly.compileStreaming(fetch(import.meta.resolve("./x2.wasm"))), fetch(import.meta.resolve("./x1.wasm")).then(r => r.json()), fetch(import.meta.resolve("./x2.wasm")).then(r => r.json())]);
diff --git a/packages/babel-plugin-proposal-import-wasm-source/test/fixtures/node-cjs/parallel-json-import/input.js b/packages/babel-plugin-proposal-import-wasm-source/test/fixtures/node-cjs/parallel-json-import/input.js
@@ -0,0 +1,4 @@
+import source s1 from "./x1.wasm";
+import source s2 from "./x2.wasm";
+import j1 from "./x1.wasm" with { type: "json" };
+import j2 from "./x2.wasm" with { type: "json" };
diff --git a/packages/babel-plugin-proposal-import-wasm-source/test/fixtures/node-cjs/parallel-json-import/options.json b/packages/babel-plugin-proposal-import-wasm-source/test/fixtures/node-cjs/parallel-json-import/options.json
@@ -0,0 +1,5 @@
+{
+  "sourceType": "module",
+  "targets": { "node": "20.6" },
+  "plugins": ["proposal-import-wasm-source", "transform-json-modules", "transform-modules-commonjs"]
+}
diff --git a/packages/babel-plugin-proposal-import-wasm-source/test/fixtures/node-cjs/parallel-json-import/output.js b/packages/babel-plugin-proposal-import-wasm-source/test/fixtures/node-cjs/parallel-json-import/output.js
@@ -0,0 +1,6 @@
+"use strict";
+
+const s1 = new WebAssembly.Module(require("fs").readFileSync(require.resolve("./x1.wasm"))),
+  s2 = new WebAssembly.Module(require("fs").readFileSync(require.resolve("./x2.wasm"))),
+  j1 = JSON.parse(require("fs").readFileSync(require.resolve("./x1.wasm"))),
+  j2 = JSON.parse(require("fs").readFileSync(require.resolve("./x2.wasm")));
diff --git a/packages/babel-plugin-proposal-import-wasm-source/test/fixtures/node-esm/parallel-json-import/input.js b/packages/babel-plugin-proposal-import-wasm-source/test/fixtures/node-esm/parallel-json-import/input.js
@@ -0,0 +1,4 @@
+import source s1 from "./x1.wasm";
+import source s2 from "./x2.wasm";
+import j1 from "./x1.wasm" with { type: "json" };
+import j2 from "./x2.wasm" with { type: "json" };
diff --git a/packages/babel-plugin-proposal-import-wasm-source/test/fixtures/node-esm/parallel-json-import/options.json b/packages/babel-plugin-proposal-import-wasm-source/test/fixtures/node-esm/parallel-json-import/options.json
@@ -0,0 +1,5 @@
+{
+  "sourceType": "module",
+  "targets": { "node": "20.6" },
+  "plugins": ["proposal-import-wasm-source", "transform-json-modules"]
+}
diff --git a/packages/babel-plugin-proposal-import-wasm-source/test/fixtures/node-esm/parallel-json-import/output.mjs b/packages/babel-plugin-proposal-import-wasm-source/test/fixtures/node-esm/parallel-json-import/output.mjs
@@ -0,0 +1,5 @@
+import { readFileSync as _readFileSync, readFileSync as _readFileSync2, readFileSync as _readFileSync3, readFileSync as _readFileSync4 } from "fs";
+const s1 = new WebAssembly.Module(_readFileSync(new URL(import.meta.resolve("./x1.wasm")))),
+  s2 = new WebAssembly.Module(_readFileSync2(new URL(import.meta.resolve("./x2.wasm")))),
+  j1 = JSON.parse(_readFileSync3(new URL(import.meta.resolve("./x1.wasm")))),
+  j2 = JSON.parse(_readFileSync4(new URL(import.meta.resolve("./x2.wasm"))));
diff --git a/packages/babel-plugin-transform-json-modules/src/index.ts b/packages/babel-plugin-transform-json-modules/src/index.ts
@@ -2,7 +2,7 @@ import { declare } from "@babel/helper-plugin-utils";
 import type { types as t, File } from "@babel/core";
 import {
   importToPlatformApi,
-  buildParallelStaticImports,
+  injectParallelStaticImports,
   type Pieces,
   type Builders,
 } from "@babel/helper-import-to-platform-api";
@@ -115,10 +115,8 @@ export default declare((api, options: Options) => {
           data.push({ id, fetch });
           decl.remove();
         }
-        if (data.length === 0) return;
 
-        const decl = buildParallelStaticImports(data, helper.needsAwait);
-        if (decl) path.unshiftContainer("body", decl);
+        injectParallelStaticImports(path, data, helper.needsAwait);
       },
     },
   };
diff --git a/yarn.lock b/yarn.lock
@@ -1614,6 +1614,7 @@ __metadata:
     "@babel/helper-plugin-test-runner": "workspace:^"
     "@babel/helper-plugin-utils": "workspace:^"
     "@babel/plugin-syntax-import-source": "workspace:^"
+    "@babel/plugin-transform-json-modules": "workspace:^"
   peerDependencies:
     "@babel/core": "workspace:^"
   languageName: unknown

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1 @@`
	`1`	+const [s1, s2, j1, j2] = await Promise.all([typeof process === "object" && process.versions?.node ? import("fs").then(fs => fs.promises.readFile(new URL(import.meta.resolve("./x1.wasm")))).then(WebAssembly.compile) : WebAssembly.compileStreaming(fetch(import.meta.resolve("./x1.wasm"))), typeof process === "object" && process.versions?.node ? import("fs").then(fs => fs.promises.readFile(new URL(import.meta.resolve("./x2.wasm")))).then(WebAssembly.compile) : WebAssembly.compileStreaming(fetch(import.meta.resolve("./x2.wasm"))), typeof process === "object" && process.versions?.node ? import("fs").then(fs => fs.promises.readFile(new URL(import.meta.resolve("./x1.wasm")))).then(JSON.parse) : fetch(import.meta.resolve("./x1.wasm")).then(r => r.json()), typeof process === "object" && process.versions?.node ? import("fs").then(fs => fs.promises.readFile(new URL(import.meta.resolve("./x2.wasm")))).then(JSON.parse) : fetch(import.meta.resolve("./x2.wasm")).then(r => r.json())]);
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1 @@`
	`1`	`+const [s1, s2, j1, j2] = await Promise.all([WebAssembly.compileStreaming(fetch(import.meta.resolve("./x1.wasm"))), WebAssembly.compileStreaming(fetch(import.meta.resolve("./x2.wasm"))), fetch(import.meta.resolve("./x1.wasm")).then(r => r.json()), fetch(import.meta.resolve("./x2.wasm")).then(r => r.json())]);`