summaryrefslogtreecommitdiff
path: root/examples/snowpack/src/pages/guides/wasm.md
diff options
context:
space:
mode:
Diffstat (limited to 'examples/snowpack/src/pages/guides/wasm.md')
-rw-r--r--examples/snowpack/src/pages/guides/wasm.md35
1 files changed, 35 insertions, 0 deletions
diff --git a/examples/snowpack/src/pages/guides/wasm.md b/examples/snowpack/src/pages/guides/wasm.md
new file mode 100644
index 000000000..1e7ab5ac4
--- /dev/null
+++ b/examples/snowpack/src/pages/guides/wasm.md
@@ -0,0 +1,35 @@
+---
+layout: ../../layouts/content.astro
+title: 'WASM'
+tags: communityGuide
+published: true
+img: '/img/logos/wasm.svg'
+imgBackground: '#f2f2f8'
+description: How to use WASM in your Snowpack project.
+---
+
+[WASM (short for WebAssembly)](https://webassembly.org/) is a portable compilation target for programming languages, enabling deployment on the web for client and server applications.
+
+**To use WASM with Snowpack:** Use the browser's native [`WebAssembly`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly) & [`fetch`](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API) APIs to load a WASM file into your application:
+
+```js
+// Example: Load WASM in your project
+const wasm = await WebAssembly.instantiateStreaming(
+ fetch('/example.wasm'),
+ /* { ... } */
+);
+```
+
+In the future, we may add `import "/example.wasm"` ESM import support to automate this support for you. However, today WASM import support differs from bundler-to-bundler.
+
+In any case, WASM import support would just be a shortcut or wrapper around the code snippet above. You can recreate this helper today in your own project:
+
+```js
+// Example: WASM Loader (move this into some utilility/helper file for reuse)
+export function loadWasm(url, importObject = {module: {}, env: {abort() {}}}) => {
+ const result = await WebAssembly.instantiateStreaming(fetch(url), importObject);
+ return result.instance; // or, return result;
+}
+
+const wasm = await loadWasm('/example.wasm');
+```