From e63a082ddad4d40dd0d0e4cd11b39cb147e608be Mon Sep 17 00:00:00 2001
From: Lakshan Perera <lakshan@supabase.io>
Date: Thu, 16 Jan 2025 09:55:31 +1100
Subject: [PATCH] chore(docs): Added a guide on using wasm modules in Edge
 Functions (#32811)

* chore(docs): Added a guide on using wasm modules in Edge Functions

* update example

* WASM -> Wasm

* fix page title
---
 .../NavigationMenu.constants.ts               |  4 +
 apps/docs/content/guides/functions/wasm.mdx   | 87 +++++++++++++++++++
 examples/edge-functions/supabase/config.toml  |  2 +-
 .../wasm-modules/add-wasm/src/lib.rs          |  2 +-
 4 files changed, 93 insertions(+), 2 deletions(-)
 create mode 100644 apps/docs/content/guides/functions/wasm.mdx

diff --git a/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.constants.ts b/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.constants.ts
index 7d1ca8e9e5d..b5be6e4812a 100644
--- a/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.constants.ts
+++ b/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.constants.ts
@@ -1359,6 +1359,10 @@ export const functions: NavMenuConstant = {
           name: 'Running AI Models',
           url: '/guides/functions/ai-models',
         },
+        {
+          name: 'Wasm modules',
+          url: '/guides/functions/wasm',
+        },
         {
           name: 'Deploying with CI / CD pipelines',
           url: '/guides/functions/cicd-workflow',
diff --git a/apps/docs/content/guides/functions/wasm.mdx b/apps/docs/content/guides/functions/wasm.mdx
new file mode 100644
index 00000000000..af0bf32a0f5
--- /dev/null
+++ b/apps/docs/content/guides/functions/wasm.mdx
@@ -0,0 +1,87 @@
+---
+id: 'function-wasm'
+title: 'Using Wasm modules'
+description: 'How to use WebAssembly in Edge Functions.'
+subtitle: 'How to use WebAssembly in Edge Functions.'
+---
+
+Edge Functions supports running [WebAssembly (Wasm)](https://developer.mozilla.org/en-US/docs/WebAssembly) modules. WebAssembly is useful if you want to optimize code that's slower to run in JavaScript or require low-level manipulation.
+
+It also gives you the option to port existing libraries written in other languages to be used with JavaScript. For example, [MagickWasm](https://supabase.com/docs/guides/functions/examples/image-manipulation), which does image manipulation and transforms, is a port of an existing C library to WebAssembly.
+
+### Writing a Wasm module
+
+You can use different languages and SDKs to write Wasm modules. For this tutorial, we will write a simple Wasm module in Rust that adds two numbers.
+
+Follow this [guide on writing Wasm modules in Rust](https://developer.mozilla.org/en-US/docs/WebAssembly/Rust_to_Wasm) to setup your dev environment.
+
+Create a new Edge Function called `wasm-add`.
+
+```bash
+supabase functions new wasm-add
+```
+
+Create a new Cargo project for the Wasm module inside the function's directory:
+
+```bash
+cd supabase/functions/wasm-add
+cargo new --lib add-wasm
+```
+
+Add the following code to `add-wasm/src/lib.rs`.
+
+<$CodeSample
+path="edge-functions/supabase/functions/wasm-modules/add-wasm/src/lib.rs"
+lines={[[1, -1]]}
+meta="lib.rs"
+/>
+
+Update the `add-wasm/Cargo.toml` to include the `wasm-bindgen` dependency.
+
+<$CodeSample
+path="edge-functions/supabase/functions/wasm-modules/add-wasm/Cargo.toml"
+lines={[[1, -1]]}
+meta="Cargo.toml"
+/>
+
+After that we can build the package, by running:
+
+```bash
+wasm-pack build --target deno
+```
+
+This will produce a Wasm binary file inside `add-wasm/pkg` directory.
+
+### Calling the Wasm module from the Edge Function
+
+Now let's update the Edge Function to call `add` from the Wasm module.
+
+<$CodeSample
+path="edge-functions/supabase/functions/wasm-modules/index.ts"
+lines={[[1, -1]]}
+meta="index.ts"
+/>
+
+<Admonition type="info">
+  Supabase Edge Functions currently use Deno 1.46. From [Deno 2.1, importing Wasm
+  modules](https://deno.com/blog/v2.1) will require even less boilerplate code.
+</Admonition>
+
+### Bundle and deploy the Edge Function
+
+Before deploying the Edge Function, we need to ensure it bundles the Wasm module with it. We can do this by defining it in the `static_files` for the function in `superbase/config.toml`.
+
+<Admonition type="info">
+  You will need update Supabase CLI to 2.7.0 or higher for the `static_files` support.
+</Admonition>
+
+```toml
+[functions.wasm-add]
+static_files = [ "./functions/wasm-add/add-wasm/pkg/*.wasm"]
+```
+
+Deploy the function by running:
+
+```bash
+supabase functions deploy wasm-add
+```
diff --git a/examples/edge-functions/supabase/config.toml b/examples/edge-functions/supabase/config.toml
index dbf1d6d2d1b..1a5297f00e3 100644
--- a/examples/edge-functions/supabase/config.toml
+++ b/examples/edge-functions/supabase/config.toml
@@ -75,4 +75,4 @@ objects_path = "./buckets/images"
 import_map = "./functions/import_map.json"
 
 [functions.wasm-modules]
-static_files = [ "./functions/wasm-modules/add-wasm/pkg/add_wasm_bg.wasm"]
+static_files = [ "./functions/wasm-modules/add-wasm/pkg/*.wasm"]
diff --git a/examples/edge-functions/supabase/functions/wasm-modules/add-wasm/src/lib.rs b/examples/edge-functions/supabase/functions/wasm-modules/add-wasm/src/lib.rs
index 57fd95b9f99..ad4ffde34f4 100644
--- a/examples/edge-functions/supabase/functions/wasm-modules/add-wasm/src/lib.rs
+++ b/examples/edge-functions/supabase/functions/wasm-modules/add-wasm/src/lib.rs
@@ -2,5 +2,5 @@ use wasm_bindgen::prelude::*;
 
 #[wasm_bindgen]
 pub fn add(a: u32, b: u32) -> u32 {
-    a + b + 100
+    a + b
 }