fixup: review feedback

Author: vicb

packages/open-next/src/build/createServerBundle.ts

@@ -14,7 +14,10 @@ import { getCrossPlatformPathRegex } from "../utils/regex.js";
 import { bundleNextServer } from "./bundleNextServer.js";
 import { compileCache } from "./compileCache.js";
 import { copyTracedFiles } from "./copyTracedFiles.js";
-import { generateEdgeBundle } from "./edge/createEdgeBundle.js";
+import {
+  copyMiddlewareResources,
+  generateEdgeBundle,
+} from "./edge/createEdgeBundle.js";
 import * as buildHelper from "./helper.js";
 import { installDependencies } from "./installDeps.js";
 import { type CodePatcher, applyCodePatches } from "./patch/codePatcher.js";
@@ -168,16 +171,12 @@ async function generateBundle(
     const middlewareManifest = loadMiddlewareManifest(
       path.join(options.appBuildOutputPath, ".next"),
     );
-    const wasmFiles = middlewareManifest.middleware["/"]?.wasm ?? [];
-    if (wasmFiles.length > 0) {
-      fs.mkdirSync(path.join(outPackagePath, "wasm"), { recursive: true });
-      for (const wasmFile of wasmFiles) {
-        fs.copyFileSync(
-          path.join(options.appBuildOutputPath, ".next", wasmFile.filePath),
-          path.join(outPackagePath, `wasm/${wasmFile.name}.wasm`),
-        );
-      }
-    }
+
+    copyMiddlewareResources(
+      options,
+      middlewareManifest.middleware["/"],
+      outPackagePath,
+    );
   }
 
   // Copy open-next.config.mjs

packages/open-next/src/build/edge/createEdgeBundle.ts

@@ -57,7 +57,7 @@ export async function buildEdgeBundle({
   name,
   additionalPlugins: additionalPluginsFn,
 }: BuildEdgeBundleOptions) {
-  const isInCloudfare = await isEdgeRuntime(overrides);
+  const isInCloudflare = await isEdgeRuntime(overrides);
   function override<T extends keyof Override>(target: T) {
     return typeof overrides?.[target] === "string"
       ? overrides[target]
@@ -103,7 +103,7 @@ export async function buildEdgeBundle({
         openNextEdgePlugins({
           middlewareInfo,
           nextDir: path.join(options.appBuildOutputPath, ".next"),
-          isInCloudfare,
+          isInCloudflare,
         }),
         ...additionalPlugins,
         // The content updater plugin must be the last plugin
@@ -146,7 +146,7 @@ Object.defineProperty = function(o, p, a) {
 };
 
   ${
-    isInCloudfare
+    isInCloudflare
       ? ""
       : `
   const require = (await import("node:module")).createRequire(import.meta.url);
@@ -209,25 +209,7 @@ export async function generateEdgeBundle(
   }
   const middlewareInfo = functions[0];
 
-  //Copy wasm files
-  const wasmFiles = middlewareInfo.wasm;
-  mkdirSync(path.join(outputDir, "wasm"), { recursive: true });
-  for (const wasmFile of wasmFiles) {
-    fs.copyFileSync(
-      path.join(buildOutputDotNextDir, wasmFile.filePath),
-      path.join(outputDir, `wasm/${wasmFile.name}.wasm`),
-    );
-  }
-
-  // Copy assets
-  const assets = middlewareInfo.assets;
-  mkdirSync(path.join(outputDir, "assets"), { recursive: true });
-  for (const asset of assets) {
-    fs.copyFileSync(
-      path.join(buildOutputDotNextDir, asset.filePath),
-      path.join(outputDir, `assets/${asset.name}`),
-    );
-  }
+  copyMiddlewareResources(options, middlewareInfo, outputDir);
 
   await buildEdgeBundle({
     middlewareInfo,
@@ -240,3 +222,28 @@ export async function generateEdgeBundle(
     additionalPlugins,
   });
 }
+
+/**
+ * Copy wasm files and assets into the destDir.
+ */
+export function copyMiddlewareResources(
+  options: BuildOptions,
+  middlewareInfo: MiddlewareInfo | undefined,
+  destDir: string,
+) {
+  mkdirSync(path.join(destDir, "wasm"), { recursive: true });
+  for (const file of middlewareInfo?.wasm ?? []) {
+    fs.copyFileSync(
+      path.join(options.appBuildOutputPath, ".next", file.filePath),
+      path.join(destDir, `wasm/${file.name}.wasm`),
+    );
+  }
+
+  mkdirSync(path.join(destDir, "assets"), { recursive: true });
+  for (const file of middlewareInfo?.assets ?? []) {
+    fs.copyFileSync(
+      path.join(options.appBuildOutputPath, ".next", file.filePath),
+      path.join(destDir, `assets/${file.name}`),
+    );
+  }
+}

packages/open-next/src/plugins/edge.ts

@@ -24,19 +24,19 @@ import { getCrossPlatformPathRegex } from "../utils/regex.js";
 export interface IPluginSettings {
   nextDir: string;
   middlewareInfo?: MiddlewareInfo;
-  isInCloudfare?: boolean;
+  isInCloudflare?: boolean;
 }
 
 /**
  * @param opts.nextDir - The path to the .next directory
  * @param opts.middlewareInfo - Information about the middleware
- * @param opts.isInCloudfare - Whether the code runs on the cloudflare runtime
+ * @param opts.isInCloudflare - Whether the code runs on the cloudflare runtime
  * @returns
  */
 export function openNextEdgePlugins({
   nextDir,
   middlewareInfo,
-  isInCloudfare,
+  isInCloudflare,
 }: IPluginSettings): Plugin {
   const entryFiles =
     middlewareInfo?.files.map((file: string) => path.join(nextDir, file)) ?? [];
@@ -94,7 +94,7 @@ globalThis.self = globalThis;
 globalThis._ROUTES = ${JSON.stringify(routes)};
 
 ${
-  isInCloudfare
+  isInCloudflare
     ? ""
     : `
 import {readFileSync} from "node:fs";
@@ -138,15 +138,7 @@ if (!globalThis.URLPattern) {
 }
 `
 }
-${wasmFiles
-  .map((file, i) =>
-    isInCloudfare
-      ? // Decorate the name to avoid name collisions
-        `import __OpenNextWasm${i} from './wasm/${file.name}.wasm';
-globalThis.${file.name} = __OpenNextWasm${i}`
-      : `const ${file.name} = readFileSync(path.join(__dirname,'/wasm/${file.name}.wasm'));`,
-  )
-  .join("\n")}
+${importWasm(wasmFiles, { isInCloudflare })}
 ${entryFiles.map((file) => `require("${file}");`).join("\n")}
 ${contents}
         `;
@@ -205,3 +197,22 @@ ${contents}
     },
   };
 }
+
+function importWasm(
+  files: MiddlewareInfo["wasm"],
+  { isInCloudflare }: { isInCloudflare?: boolean },
+) {
+  return files
+    .map(({ name }) => {
+      if (isInCloudflare) {
+        // As `.next/server/src/middleware.js` references the name,
+        // using `import ${name} from '...'` would cause ESBuild to rename the import.
+        // We use `globalThis.${name}` to make sure `middleware.js` reference name will match.
+        return `import __onw_${name}__ from './wasm/${name}.wasm'
+globalThis.${name} = __onw_${name}__`;
+      }
+
+      return `const ${name} = readFileSync(path.join(__dirname,'/wasm/${name}.wasm'));`;
+    })
+    .join("\n");
+}