Added clang example

wasmerio · Oct 7, 2024 · 4e08ff6 · 4e08ff6
1 parent 1334e70
commit 4e08ff6
Show file tree

Hide file tree

Showing 4 changed files with 121 additions and 0 deletions.
diff --git a/examples/clang-cdn/README.md b/examples/clang-cdn/README.md
@@ -0,0 +1,23 @@
+# Clang with CDN + COEP/COOP headers.
+
+This example showcases how to use clang with the Wasmer SDK when using a CDN.
+
+
+You'll need to set up the COOP/COEP headers when serving the html file, so it works
+properly in the broser:
+
+```
+Cross-Origin-Embedder-Policy: require-corp
+Cross-Origin-Opener-Policy: same-origin
+```
+
+If you are unable to modify the server to send this headers when serving the html file,
+please use the [cdn-coi-serviceworker](../cdn-coi-serviceworker/) example instead.
+
+You can test this example locally with:
+
+```
+$ wasmer run . -- --port=8000
+```
+
+And then visit http://localhost:8000/
diff --git a/examples/clang-cdn/etc/config.toml b/examples/clang-cdn/etc/config.toml
@@ -0,0 +1,16 @@
+# Configuration for static-web-server.
+# https://static-web-server.net/configuration/config-file/
+
+[general]
+log-level = "info"
+
+[advanced]
+
+# Note: We need COOP and COEP for Cross-Origin Isolation
+# https://docs.wasmer.io/javascript-sdk/explainers/troubleshooting#sharedarraybuffer-and-cross-origin-isolation
+[[advanced.headers]]
+source = "**/*.{js,html,wasm}"
+headers = { Cross-Origin-Opener-Policy = "same-origin", Cross-Origin-Embedder-Policy = "require-corp" }
+[[advanced.headers]]
+source = "/"
+headers = { Cross-Origin-Opener-Policy = "same-origin", Cross-Origin-Embedder-Policy = "require-corp" }
diff --git a/examples/clang-cdn/index.html b/examples/clang-cdn/index.html
@@ -0,0 +1,63 @@
+<!-- Note: this example requires setting the COEP headers to work, see README.md -->
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Wasmer JavaScript SDK</title>
+    <script type="module">
+      import {
+        init,
+        Wasmer,
+        Directory
+      } from "https://unpkg.com/@wasmer/[email protected]/dist/index.mjs";
+
+      async function runClang() {
+
+        const status = document.getElementById("status");
+
+        status.innerHTML = "Initializing...";
+        await init();
+
+        status.innerHTML = `Fetching clang...`;
+        const clang = await Wasmer.fromRegistry("clang/clang");
+        const project = new Directory();
+        await project.writeFile("example.c",
+        `#include<stdio.h>
+
+        int main() {
+          printf("Hello World");
+          return 0;
+        }
+        `);
+
+        status.innerHTML = `Generating Wasm...`;
+
+        let instance = await clang.entrypoint.run({
+          args: ["/project/example.c", "-o", "/project/example.wasm"],
+          mount: { "/project": project },
+        });
+        const output = await instance.wait();
+
+        if (!output.ok) {
+          throw new Error(`Clang failed with exit code ${output.code}: ${output.stderr}`);
+        }
+
+        status.innerHTML = `Running Wasm...`;
+        let wasm = await project.readFile("example.wasm");
+        console.log(wasm);
+        const example = await Wasmer.fromFile(wasm);
+        const result = await example.entrypoint.run();
+        const outputExample = await result.wait();
+        console.log(outputExample.stdout);
+      }
+
+      runClang();
+    </script>
+  </head>
+
+  <body>
+    <h1 id="status"></h1>
+    <pre><code id="stdout"></code></pre>
+  </body>
+</html>
diff --git a/examples/clang-cdn/wasmer.toml b/examples/clang-cdn/wasmer.toml
@@ -0,0 +1,19 @@
+[package]
+name = "wasmer/wasmer-sh"
+version = "0.4.21"
+description = "The wasmer.sh website"
+entrypoint = "wasmer-sh"
+
+[dependencies]
+"wasmer/static-web-server" = "^1"
+
+[fs]
+"/public" = "."
+"/etc/static-web-server" = "etc"
+
+[[command]]
+name = "wasmer-sh"
+module = "wasmer/static-web-server:webserver"
+runner = "wasi"
+[command.annotations.wasi]
+env = ["SERVER_CONFIG_FILE=/etc/static-web-server/config.toml"]