Expose wasm files in middleware-manifest

vercel · Feb 16, 2022 · bd514e5 · bd514e5
1 parent b8fe6a7
commit bd514e5
Show file tree

Hide file tree

Showing 3 changed files with 68 additions and 5 deletions.
diff --git a/packages/next/build/webpack-config.ts b/packages/next/build/webpack-config.ts
@@ -1151,6 +1151,7 @@ export default async function getBaseWebpackConfig(
         'noop-loader',
         'next-middleware-loader',
         'next-middleware-ssr-loader',
+        'next-middleware-wasm-loader',
       ].reduce((alias, loader) => {
         // using multiple aliases to replace `resolveLoader.modules`
         alias[loader] = path.join(__dirname, 'webpack', 'loaders', loader)
@@ -1533,6 +1534,12 @@ export default async function getBaseWebpackConfig(
 
   const webpack5Config = webpackConfig as webpack5.Configuration
 
+  webpack5Config.module!.rules!.unshift({
+    test: /\.wasm$/,
+    issuerLayer: 'middleware',
+    loader: 'next-middleware-wasm-loader',
+  })
+
   webpack5Config.experiments = {
     layers: true,
     cacheUnaffected: true,

diff --git a/packages/next/build/webpack/loaders/next-middleware-wasm-loader.ts b/packages/next/build/webpack/loaders/next-middleware-wasm-loader.ts
@@ -0,0 +1,29 @@
+import type { webpack } from 'next/dist/compiled/webpack/webpack'
+import crypto from 'crypto'
+
+type WasmBinding = {
+  file: string
+  name: string
+}
+
+const MiddlewareWasmLoader: webpack.loader.Loader = function (
+  source,
+  _sourceMap
+) {
+  const cb = this.async()
+  if (!cb) throw new Error('async() must be used with wasm-loader')
+
+  const name = `wasm_${sha1(source)}`
+  const file = `middleware-chunks/${name}.wasm`
+  const binding: WasmBinding = { file, name }
+  this._module.buildInfo.nextWasmMiddlewareBinding = binding
+  this.emitFile(`/${file}`, source, undefined)
+
+  cb(null, `module.exports = globalThis[${JSON.stringify(name)}];`)
+}
+
+function sha1(source: string | Buffer) {
+  return crypto.createHash('sha1').update(source).digest('hex')
+}
+
+export default MiddlewareWasmLoader
diff --git a/packages/next/build/webpack/plugins/middleware-plugin.ts b/packages/next/build/webpack/plugins/middleware-plugin.ts
@@ -16,6 +16,11 @@ const MIDDLEWARE_FULL_ROUTE_REGEX = /^pages[/\\]?(.*)\/_middleware$/
 
 export const ssrEntries = new Map<string, { requireFlightManifest: boolean }>()
 
+type WasmBinding = {
+  name: string
+  file: string
+}
+
 export interface MiddlewareManifest {
   version: 1
   sortedMiddleware: string[]
@@ -27,6 +32,7 @@ export interface MiddlewareManifest {
       name: string
       page: string
       regexp: string
+      wasmBindings?: WasmBinding[]
     }
   }
 }
@@ -49,9 +55,14 @@ function getPageFromEntrypointName(pagePath: string) {
   return page
 }
 
+type PerRoute = {
+  envPerRoute: Map<string, string[]>
+  wasmPerRoute: Map<string, WasmBinding[]>
+}
+
 export function getEntrypointInfo(
   compilation: webpack5.Compilation,
-  envPerRoute: Map<string, string[]>,
+  { envPerRoute, wasmPerRoute }: PerRoute,
   isEdgeRuntime: boolean
 ) {
   const entrypoints = compilation.entrypoints
@@ -87,6 +98,7 @@ export function getEntrypointInfo(
 
     infos.push({
       env: envPerRoute.get(entrypoint.name) || [],
+      wasmBindings: wasmPerRoute.get(entrypoint.name) || [],
       files,
       name: entrypoint.name,
       page,
@@ -114,10 +126,14 @@ export default class MiddlewarePlugin {
   createAssets(
     compilation: webpack5.Compilation,
     assets: any,
-    envPerRoute: Map<string, string[]>,
+    { envPerRoute, wasmPerRoute }: PerRoute,
     isEdgeRuntime: boolean
   ) {
-    const infos = getEntrypointInfo(compilation, envPerRoute, isEdgeRuntime)
+    const infos = getEntrypointInfo(
+      compilation,
+      { envPerRoute, wasmPerRoute },
+      isEdgeRuntime
+    )
     infos.forEach((info) => {
       middlewareManifest.middleware[info.page] = info
     })
@@ -152,7 +168,7 @@ export function collectAssets(
   createAssets: (
     compilation: webpack5.Compilation,
     assets: any,
-    envPerRoute: Map<string, string[]>,
+    { envPerRoute, wasmPerRoute }: PerRoute,
     isEdgeRuntime: boolean
   ) => void,
   options: {
@@ -175,6 +191,7 @@ export function collectAssets(
       })
 
       const envPerRoute = new Map<string, string[]>()
+      const wasmPerRoute = new Map<string, WasmBinding[]>()
 
       compilation.hooks.afterOptimizeModules.tap(PLUGIN_NAME, () => {
         const { moduleGraph } = compilation as any
@@ -187,6 +204,7 @@ export function collectAssets(
           ) {
             const middlewareEntries = new Set<webpack5.Module>()
             const env = new Set<string>()
+            const wasmBindings = new Set<WasmBinding>()
 
             const addEntriesFromDependency = (dep: any) => {
               const module = moduleGraph.getModule(dep)
@@ -203,6 +221,9 @@ export function collectAssets(
             const queue = new Set(middlewareEntries)
             for (const module of queue) {
               const { buildInfo } = module
+              if (buildInfo.nextWasmMiddlewareBinding) {
+                wasmBindings.add(buildInfo.nextWasmMiddlewareBinding)
+              }
               if (
                 !options.dev &&
                 buildInfo &&
@@ -247,6 +268,7 @@ export function collectAssets(
             }
 
             envPerRoute.set(name, Array.from(env))
+            wasmPerRoute.set(name, Array.from(wasmBindings))
           }
         }
       })
@@ -375,7 +397,12 @@ export function collectAssets(
           stage: webpack.Compilation.PROCESS_ASSETS_STAGE_ADDITIONS,
         },
         (assets: any) => {
-          createAssets(compilation, assets, envPerRoute, options.isEdgeRuntime)
+          createAssets(
+            compilation,
+            assets,
+            { envPerRoute, wasmPerRoute },
+            options.isEdgeRuntime
+          )
         }
       )
     }