feat(wasm): universal support with esm import syntax

package.json

@@ -68,7 +68,6 @@
     "@rollup/plugin-node-resolve": "^15.2.3",
     "@rollup/plugin-replace": "^5.0.5",
     "@rollup/plugin-terser": "^0.4.4",
-    "@rollup/plugin-wasm": "^6.2.2",
     "@rollup/pluginutils": "^5.1.0",
     "@types/http-proxy": "^1.17.14",
     "@vercel/nft": "^0.26.0",

src/presets/cloudflare-module.ts

@@ -19,6 +19,10 @@ export const cloudflareModule = defineNitroPreset({
       inlineDynamicImports: false,
     },
   },
+  wasm: {
+    lazy: false,
+    esmImport: true,
+  },
   hooks: {
     async compiled(nitro: Nitro) {
       await writeFile(

src/presets/cloudflare-pages.ts

@@ -29,6 +29,10 @@ export const cloudflarePages = defineNitroPreset({
     // https://github.com/unjs/nitro/pull/933
     _mime: "mime/index.js",
   },
+  wasm: {
+    lazy: false,
+    esmImport: true,
+  },
   rollupConfig: {
     output: {
       entryFileNames: "index.js",

src/presets/cloudflare.ts

@@ -12,7 +12,7 @@ export const cloudflare = defineNitroPreset({
     deploy: "npx wrangler deploy",
   },
   wasm: {
-    esmImport: true,
+    lazy: true,
   },
   hooks: {
     async compiled(nitro: Nitro) {

src/presets/vercel.ts

@@ -103,6 +103,10 @@ export const vercelEdge = defineNitroPreset({
       process: undefined,
     },
   },
+  wasm: {
+    lazy: true,
+    esmImport: true,
+  },
   hooks: {
     "rollup:before": (nitro: Nitro) => {
       deprecateSWR(nitro);

src/rollup/plugins/wasm.ts

@@ -2,17 +2,12 @@ import { createHash } from "node:crypto";
 import { promises as fs, existsSync } from "node:fs";
 import { basename, normalize } from "pathe";
 import type { Plugin } from "rollup";
-import wasmBundle from "@rollup/plugin-wasm";
 import MagicString from "magic-string";
 import { WasmOptions } from "../../types";
 
-export function wasm(options: WasmOptions): Plugin {
-  return options.esmImport ? wasmImport() : wasmBundle(options.rollup);
-}
-
 const WASM_ID_PREFIX = "\0nitro-wasm:";
 
-export function wasmImport(): Plugin {
+export function wasm(opts: WasmOptions): Plugin {
   type WasmAssetInfo = {
     fileName: string;
     id: string;
@@ -22,7 +17,6 @@ export function wasmImport(): Plugin {
 
   const wasmSources = new Map<string /* sourceFile */, WasmAssetInfo>();
   const wasmImports = new Map<string /* id */, WasmAssetInfo>();
-  const wasmGlobals = new Map<string /* global id */, WasmAssetInfo>();
 
   return <Plugin>{
     name: "nitro:wasm",
@@ -80,6 +74,7 @@ export function wasmImport(): Plugin {
       return {
         code: `export default "${asset.id}";`,
         map: null,
+        syntheticNamedExports: true,
       };
     },
     renderChunk(code, chunk, options) {
@@ -90,8 +85,6 @@ export function wasmImport(): Plugin {
         return;
       }
 
-      const isIIFE = options.format === "iife" || options.format === "umd";
-
       const s = new MagicString(code);
 
       const resolveImport = (id) => {
@@ -103,9 +96,12 @@ export function wasmImport(): Plugin {
           return null;
         }
         const nestedLevel = chunk.fileName.split("/").length - 1;
-        return (
-          (nestedLevel ? "../".repeat(nestedLevel) : "./") + asset.fileName
-        );
+        const relativeId =
+          (nestedLevel ? "../".repeat(nestedLevel) : "./") + asset.fileName;
+        return {
+          relativeId,
+          asset,
+        };
       };
 
       const ReplaceRE = new RegExp(`"(${WASM_ID_PREFIX}[^"]+)"`, "g");
@@ -117,10 +113,21 @@ export function wasmImport(): Plugin {
           );
           continue;
         }
-        let code = `await import("${resolved}").then(r => r?.default || r);`;
-        if (isIIFE) {
-          code = `undefined /* not supported */`;
+
+        let dataCode: string;
+        if (opts.esmImport) {
+          dataCode = `await import("${resolved.relativeId}").then(r => r?.default || r)`;
+        } else {
+          const base64Str = resolved.asset.source.toString("base64");
+          dataCode = `(()=>{const d=atob("${base64Str}");const s=d.length;const b=new Uint8Array(s);for(let i=0;i<s;i++)b[i]=d.charCodeAt(i);return b})()`;
         }
+
+        let code = `await WebAssembly.instantiate(${dataCode}).then(r => r?.exports||r?.instance?.exports || r);`;
+
+        if (opts.lazy) {
+          code = `(()=>{const e=async()=>{return ${code}};let _p;const p=()=>{if(!_p)_p=e();return _p;};return {then:cb=>p().then(cb),catch:cb=>p().catch(cb)}})()`;
+        }
+
         s.overwrite(match.index, match.index + match[0].length, code);
       }
       if (s.hasChanged()) {

src/types/nitro.ts

@@ -7,7 +7,6 @@ import type { NestedHooks, Hookable } from "hookable";
 import type { ConsolaInstance, LogLevel } from "consola";
 import type { WatchOptions } from "chokidar";
 import type { RollupCommonJSOptions } from "@rollup/plugin-commonjs";
-import type { RollupWasmOptions } from "@rollup/plugin-wasm";
 import type { Storage, BuiltinDriverName } from "unstorage";
 import type { ProxyServerOptions } from "httpxy";
 import type { ProxyOptions, RouterMethod } from "h3";
@@ -198,9 +197,12 @@ export interface WasmOptions {
   esmImport?: boolean;
 
   /**
-   * Options for `@rollup/plugin-wasm`, only used when `esmImport` is `false`
+   * Import `.wasm` files using a lazily evaluated promise for compatibility
    */
-  rollup?: RollupWasmOptions;
+  lazy?: boolean;
+
+  /** @deprecated */
+  rollup?: unknown;
 }
 
 export interface NitroFrameworkInfo {

test/fixture/routes/wasm/dynamic.ts

@@ -1,18 +1,6 @@
 export default defineLazyEventHandler(async () => {
-  const { sum } = await importWasm(import("~/wasm/sum.wasm" as string));
-  // const { sum } = await importWasm(import("../../wasm/sum.wasm" as string));
+  const { sum } = await import("~/wasm/sum.wasm");
   return eventHandler(() => {
     return `2+3=${sum(2, 3)}`;
   });
 });
-
-// TODO: Extract as reusable utility once stable
-async function importWasm(input: any) {
-  const _input = await input;
-  const _module = _input.default || _input;
-  const _instance =
-    typeof _module === "function"
-      ? await _module({}).then((r) => r.instance || r)
-      : await WebAssembly.instantiate(_module, {});
-  return _instance.exports;
-}

test/fixture/routes/wasm/static.ts

@@ -0,0 +1,6 @@
+import _mod from "~/wasm/sum.wasm";
+
+export default eventHandler(async () => {
+  const { sum } = await _mod;
+  return `2+3=${sum(2, 3)}`;
+});

test/fixture/tsconfig.json

@@ -9,7 +9,8 @@
     "paths": {
       "nitropack": ["../../src/index"],
       "#internal/nitro": ["../../src/runtime/index"],
-      "#internal/nitro/*": ["../../src/runtime/*"]
+      "#internal/nitro/*": ["../../src/runtime/*"],
+      "~/wasm/sum.wasm": ["./wasm/sum.d.ts"]
     }
   }
 }

test/fixture/wasm/sum.d.ts

@@ -0,0 +1 @@
+export declare function sum(a: number, b: number): number;

test/presets/cloudflare-pages.test.ts

@@ -13,6 +13,7 @@ describe("nitro:preset:cloudflare-pages", async () => {
     const mf = new Miniflare({
       modules: true,
       scriptPath: resolve(ctx.outDir, "_worker.js", "index.js"),
+      modulesRules: [{ type: "CompiledWasm", include: ["**/*.wasm"] }],
       globals: { __env__: {} },
       compatibilityFlags: ["streams_enable_constructors"],
       bindings: {