feat(turbopack): support loading WebAssembly in the edge runtime (#59013

)

packages/next-swc/crates/next-api/src/app.rs

@@ -3,6 +3,7 @@ use std::collections::HashMap;
 use anyhow::{bail, Context, Result};
 use indexmap::IndexSet;
 use next_core::{
+    all_assets_from_entries,
     app_structure::{
         get_entrypoints, Entrypoint as AppEntrypoint, Entrypoints as AppEntrypoints, LoaderTree,
         MetadataItem,
@@ -63,6 +64,7 @@ use crate::{
         collect_chunk_group, collect_evaluated_chunk_group, collect_next_dynamic_imports,
         DynamicImportedChunks,
     },
+    middleware::{get_js_paths_from_root, get_wasm_paths_from_root, wasm_paths_to_bindings},
     project::Project,
     route::{Endpoint, Route, Routes, WrittenEndpoint},
     server_actions::create_server_actions_manifest,
@@ -844,7 +846,9 @@ impl AppEndpoint {
                     app_entry.rsc_entry.ident(),
                     Vc::cell(evaluatable_assets.clone()),
                 );
-                server_assets.extend(files.await?.iter().copied());
+                let files_value = files.await?;
+
+                server_assets.extend(files_value.iter().copied());
 
                 // the next-edge-ssr-loader templates expect the manifests to be stored in
                 // global variables defined in these files
@@ -856,44 +860,21 @@ impl AppEndpoint {
                     "server/middleware-react-loadable-manifest.js".to_string(),
                     "server/next-font-manifest.js".to_string(),
                 ];
+                let mut wasm_paths_from_root = vec![];
 
                 let node_root_value = node_root.await?;
 
-                let middleware_paths_from_root = middleware_assets
-                    .iter()
-                    .map({
-                        let node_root_value = node_root_value.clone();
-                        move |&file| {
-                            let node_root_value = node_root_value.clone();
-                            async move {
-                                Ok(node_root_value
-                                    .get_path_to(&*file.ident().path().await?)
-                                    .filter(|path| path.ends_with(".js"))
-                                    .map(|path| path.to_string()))
-                            }
-                        }
-                    })
-                    .try_flat_join()
-                    .await?;
+                file_paths_from_root
+                    .extend(get_js_paths_from_root(&node_root_value, &middleware_assets).await?);
+                file_paths_from_root
+                    .extend(get_js_paths_from_root(&node_root_value, &files_value).await?);
 
-                file_paths_from_root.extend(middleware_paths_from_root);
+                let all_output_assets = all_assets_from_entries(files).await?;
 
-                let rsc_paths_from_root = files
-                    .await?
-                    .iter()
-                    .map(move |&file| {
-                        let node_root_value = node_root_value.clone();
-                        async move {
-                            Ok(node_root_value
-                                .get_path_to(&*file.ident().path().await?)
-                                .filter(|path| path.ends_with(".js"))
-                                .map(|path| path.to_string()))
-                        }
-                    })
-                    .try_flat_join()
-                    .await?;
-
-                file_paths_from_root.extend(rsc_paths_from_root);
+                wasm_paths_from_root
+                    .extend(get_wasm_paths_from_root(&node_root_value, &middleware_assets).await?);
+                wasm_paths_from_root
+                    .extend(get_wasm_paths_from_root(&node_root_value, &all_output_assets).await?);
 
                 let entry_file = "app-edge-has-no-entrypoint".to_string();
 
@@ -907,6 +888,7 @@ impl AppEndpoint {
                 };
                 let edge_function_definition = EdgeFunctionDefinition {
                     files: file_paths_from_root,
+                    wasm: wasm_paths_to_bindings(wasm_paths_from_root),
                     name: app_entry.pathname.to_string(),
                     page: app_entry.original_name.clone(),
                     regions: app_entry

packages/next-swc/crates/next-api/src/instrumentation.rs

@@ -1,12 +1,13 @@
-use anyhow::{bail, Context, Result};
+use anyhow::{bail, Result};
 use next_core::{
+    all_assets_from_entries,
     mode::NextMode,
     next_edge::entry::wrap_edge_entry,
     next_manifests::{InstrumentationDefinition, MiddlewaresManifestV2},
     next_server::{get_server_chunking_context, get_server_runtime_entries, ServerContextType},
 };
 use tracing::Instrument;
-use turbo_tasks::{Completion, TryJoinIterExt, Value, Vc};
+use turbo_tasks::{Completion, Value, Vc};
 use turbopack_binding::{
     turbo::tasks_fs::{File, FileContent},
     turbopack::{
@@ -23,6 +24,7 @@ use turbopack_binding::{
 };
 
 use crate::{
+    middleware::{get_js_paths_from_root, get_wasm_paths_from_root, wasm_paths_to_bindings},
     project::Project,
     route::{Endpoint, WrittenEndpoint},
     server_paths::all_server_paths,
@@ -123,26 +125,23 @@ impl InstrumentationEndpoint {
         let this = self.await?;
 
         if this.is_edge {
-            let mut output_assets = self.edge_files().await?.clone_value();
+            let edge_files = self.edge_files();
+            let mut output_assets = edge_files.await?.clone_value();
 
             let node_root = this.project.node_root();
+            let node_root_value = node_root.await?;
 
-            let files_paths_from_root = {
-                let node_root = &node_root.await?;
-                output_assets
-                    .iter()
-                    .map(|&file| async move {
-                        Ok(node_root
-                            .get_path_to(&*file.ident().path().await?)
-                            .context("middleware file path must be inside the node root")?
-                            .to_string())
-                    })
-                    .try_join()
-                    .await?
-            };
+            let file_paths_from_root =
+                get_js_paths_from_root(&node_root_value, &output_assets).await?;
+
+            let all_output_assets = all_assets_from_entries(edge_files).await?;
+
+            let wasm_paths_from_root =
+                get_wasm_paths_from_root(&node_root_value, &all_output_assets).await?;
 
             let instrumentation_definition = InstrumentationDefinition {
-                files: files_paths_from_root,
+                files: file_paths_from_root,
+                wasm: wasm_paths_to_bindings(wasm_paths_from_root),
                 name: "instrumentation".to_string(),
                 ..Default::default()
             };

packages/next-swc/crates/next-api/src/middleware.rs

@@ -1,16 +1,19 @@
 use anyhow::{bail, Context, Result};
 use next_core::{
+    all_assets_from_entries,
     middleware::get_middleware_module,
     mode::NextMode,
     next_edge::entry::wrap_edge_entry,
-    next_manifests::{EdgeFunctionDefinition, MiddlewareMatcher, MiddlewaresManifestV2},
+    next_manifests::{
+        AssetBinding, EdgeFunctionDefinition, MiddlewareMatcher, MiddlewaresManifestV2,
+    },
     next_server::{get_server_runtime_entries, ServerContextType},
     util::parse_config_from_source,
 };
 use tracing::Instrument;
-use turbo_tasks::{Completion, TryJoinIterExt, Value, Vc};
+use turbo_tasks::{Completion, TryFlatJoinIterExt, Value, Vc};
 use turbopack_binding::{
-    turbo::tasks_fs::{File, FileContent},
+    turbo::tasks_fs::{File, FileContent, FileSystemPath},
     turbopack::{
         core::{
             asset::AssetContent,
@@ -101,23 +104,18 @@ impl MiddlewareEndpoint {
 
         let config = parse_config_from_source(this.userland_module);
 
-        let mut output_assets = self.edge_files().await?.clone_value();
+        let edge_files = self.edge_files();
+        let mut output_assets = edge_files.await?.clone_value();
 
         let node_root = this.project.node_root();
+        let node_root_value = node_root.await?;
 
-        let files_paths_from_root = {
-            let node_root = &node_root.await?;
-            output_assets
-                .iter()
-                .map(|&file| async move {
-                    Ok(node_root
-                        .get_path_to(&*file.ident().path().await?)
-                        .context("middleware file path must be inside the node root")?
-                        .to_string())
-                })
-                .try_join()
-                .await?
-        };
+        let file_paths_from_root = get_js_paths_from_root(&node_root_value, &output_assets).await?;
+
+        let all_output_assets = all_assets_from_entries(edge_files).await?;
+
+        let wasm_paths_from_root =
+            get_wasm_paths_from_root(&node_root_value, &all_output_assets).await?;
 
         let matchers = if let Some(matchers) = config.await?.matcher.as_ref() {
             matchers
@@ -136,7 +134,8 @@ impl MiddlewareEndpoint {
         };
 
         let edge_function_definition = EdgeFunctionDefinition {
-            files: files_paths_from_root,
+            files: file_paths_from_root,
+            wasm: wasm_paths_to_bindings(wasm_paths_from_root),
             name: "middleware".to_string(),
             page: "/".to_string(),
             regions: None,
@@ -197,3 +196,80 @@ impl Endpoint for MiddlewareEndpoint {
         Completion::immutable()
     }
 }
+
+pub(crate) async fn get_paths_from_root(
+    root: &FileSystemPath,
+    output_assets: &[Vc<Box<dyn OutputAsset>>],
+    filter: impl FnOnce(&str) -> bool + Copy,
+) -> Result<Vec<String>> {
+    output_assets
+        .iter()
+        .map({
+            move |&file| async move {
+                let path = &*file.ident().path().await?;
+                let relative = root
+                    .get_path_to(path)
+                    .context("file path must be inside the root")?;
+
+                Ok(if filter(relative) {
+                    Some(relative.to_string())
+                } else {
+                    None
+                })
+            }
+        })
+        .try_flat_join()
+        .await
+}
+
+pub(crate) async fn get_js_paths_from_root(
+    root: &FileSystemPath,
+    output_assets: &[Vc<Box<dyn OutputAsset>>],
+) -> Result<Vec<String>> {
+    get_paths_from_root(root, output_assets, |path| path.ends_with(".js")).await
+}
+
+pub(crate) async fn get_wasm_paths_from_root(
+    root: &FileSystemPath,
+    output_assets: &[Vc<Box<dyn OutputAsset>>],
+) -> Result<Vec<String>> {
+    get_paths_from_root(root, output_assets, |path| path.ends_with(".wasm")).await
+}
+
+fn get_file_stem(path: &str) -> &str {
+    let file_name = if let Some((_, file_name)) = path.rsplit_once('/') {
+        file_name
+    } else {
+        path
+    };
+
+    if let Some((stem, _)) = file_name.split_once('.') {
+        if stem.is_empty() {
+            file_name
+        } else {
+            stem
+        }
+    } else {
+        file_name
+    }
+}
+
+pub(crate) fn wasm_paths_to_bindings(paths: Vec<String>) -> Vec<AssetBinding> {
+    paths
+        .into_iter()
+        .map(|path| {
+            let stem = get_file_stem(&path);
+
+            // very simple escaping just replacing unsupported characters with `_`
+            let escaped = stem.replace(
+                |c: char| !c.is_ascii_alphanumeric() && c != '$' && c != '_',
+                "_",
+            );
+
+            AssetBinding {
+                name: format!("wasm_{}", escaped),
+                file_path: path,
+            }
+        })
+        .collect()
+}

packages/next-swc/crates/next-api/src/pages.rs

@@ -3,7 +3,7 @@ use std::collections::HashMap;
 use anyhow::{bail, Context, Result};
 use indexmap::IndexMap;
 use next_core::{
-    create_page_loader_entry_module, get_asset_path_from_pathname,
+    all_assets_from_entries, create_page_loader_entry_module, get_asset_path_from_pathname,
     get_edge_resolve_options_context,
     mode::NextMode,
     next_client::{
@@ -70,6 +70,7 @@ use crate::{
         collect_chunk_group, collect_evaluated_chunk_group, collect_next_dynamic_imports,
         DynamicImportedChunks,
     },
+    middleware::{get_js_paths_from_root, get_wasm_paths_from_root, wasm_paths_to_bindings},
     project::Project,
     route::{Endpoint, Route, Routes, WrittenEndpoint},
     server_paths::all_server_paths,
@@ -992,22 +993,17 @@ impl PageEndpoint {
                     "server/middleware-react-loadable-manifest.js".to_string(),
                     "server/next-font-manifest.js".to_string(),
                 ];
+                let mut wasm_paths_from_root = vec![];
 
                 let node_root_value = node_root.await?;
-                let middleware_paths_from_root: Vec<String> = files_value
-                    .iter()
-                    .map(move |&file| {
-                        let node_root_value = node_root_value.clone();
-                        async move {
-                            Ok(node_root_value
-                                .get_path_to(&*file.ident().path().await?)
-                                .map(|path| path.to_string()))
-                        }
-                    })
-                    .try_flat_join()
-                    .await?;
 
-                file_paths_from_root.extend(middleware_paths_from_root);
+                file_paths_from_root
+                    .extend(get_js_paths_from_root(&node_root_value, &files_value).await?);
+
+                let all_output_assets = all_assets_from_entries(files).await?;
+
+                wasm_paths_from_root
+                    .extend(get_wasm_paths_from_root(&node_root_value, &all_output_assets).await?);
 
                 let pathname = this.pathname.await?;
                 let named_regex = get_named_middleware_regex(&pathname);
@@ -1019,6 +1015,7 @@ impl PageEndpoint {
                 let original_name = this.original_name.await?;
                 let edge_function_definition = EdgeFunctionDefinition {
                     files: file_paths_from_root,
+                    wasm: wasm_paths_to_bindings(wasm_paths_from_root),
                     name: pathname.to_string(),
                     page: original_name.to_string(),
                     regions: None,

packages/next-swc/crates/next-api/src/server_actions.rs

@@ -96,9 +96,10 @@ async fn build_server_actions_loader(
         let module_name = import_map
             .entry(*module)
             .or_insert_with(|| format!("ACTIONS_MODULE{index}"));
-        write!(
+        writeln!(
             contents,
-            "  '{hash_id}': (...args) => (0, require('{module_name}')['{name}'])(...args),",
+            "  '{hash_id}': (...args) => Promise.resolve(require('{module_name}')).then(mod => \
+             (0, mod['{name}'])(...args)),",
         )?;
     }
     write!(contents, "}});")?;

packages/next-swc/crates/next-core/src/next_edge/context.rs

@@ -123,6 +123,7 @@ pub async fn get_edge_resolve_options_context(
 
     let resolve_options_context = ResolveOptionsContext {
         enable_node_modules: Some(project_path.root().resolve().await?),
+        enable_edge_node_externals: true,
         custom_conditions,
         import_map: Some(next_edge_import_map),
         module: true,