Merge pull request wasmerio#351 from wasmerio/bare-wasix-example

Add some examples for running WASI programs
rust-wasi-web · Dec 4, 2023 · e21fe0d · e21fe0d
2 parents 50d7b69 + b290c26
commit e21fe0d
Show file tree

Hide file tree

Showing 26 changed files with 1,969 additions and 7 deletions.
diff --git a/.cargo/config.toml b/.cargo/config.toml
@@ -1,7 +1,7 @@
 [build]
 target = "wasm32-unknown-unknown"
 
-[target.'cfg(target_arch = "wasm32")']
+[target.wasm32-unknown-unknown]
 # Use "wasmer" for running tests when compiled to WebAssembly
 runner = ["wasmer", "run"]
 # This is needed so the module is compiled with atomics support (shared memory)

diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
@@ -40,11 +40,43 @@ jobs:
         run: npm run build:dev
       - name: Integration Tests
         run: npm run test
-      - name: Build Examples
+
+  examples:
+    name: Build Examples
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+      - name: Install Node
+        uses: actions/setup-node@v3
+        with:
+          node-version: 16
+      - name: Setup Rust
+        uses: dsherret/rust-toolchain-file@v1
+      - name: Install wasm-pack
+        uses: taiki-e/install-action@wasm-pack
+      - name: Install wasm-strip and wasm-opt
+        run: sudo apt-get update && sudo apt-get install -y wabt binaryen
+      - name: Rust Cache
+        uses: Swatinem/rust-cache@v2
+      - name: Install JS Dependencies
+        run: npm ci
+      - name: Build Package
+        run: npm run build
+      - name: Build the wasmer.sh Example
         run: |
           npm ci
           npm run build
         working-directory: "examples/wasmer.sh"
+      - name: Build the Markdown Editor Example
+        run: |
+          npm ci
+          npm run build
+        working-directory: "examples/markdown-editor"
+      - name: Build the (Improved) Markdown Editor Example
+        run: |
+          npm ci
+          npm run build
+        working-directory: "examples/markdown-editor-improved"
 
   api-docs:
     name: API Docs
@@ -94,13 +126,17 @@ jobs:
   workflow-times:
     name: Workflow Timings
     runs-on: ubuntu-latest
-    needs: check
+    needs:
+      - check
+      - examples
     steps:
       - name: Time Reporter
         uses: Michael-F-Bryan/[email protected]
         with:
           token: ${{ secrets.GITHUB_TOKEN }}
-          jobs: Compile and Test
+          jobs: |
+            Compile and Test
+            Build Examples
           message: |
             Make sure you keep an eye on build times!
 

diff --git a/examples/markdown-editor-improved/README.md b/examples/markdown-editor-improved/README.md
@@ -0,0 +1,6 @@
+# Markdown Editor (Improved)
+
+An improved version of [the original Markdown Editor][original] which uses a
+Wasmer package instead of running a `*.wasm` file directly.
+
+[original]: ../markdown-editor/
diff --git a/examples/markdown-editor-improved/index.html b/examples/markdown-editor-improved/index.html
@@ -0,0 +1,19 @@
+<!doctype html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Wasmer Markdown Editor</title>
+    <script type="module" defer src="./index.ts"></script>
+    <link rel="stylesheet" href="./style.css">
+</head>
+
+<body>
+    <div class="editor-container">
+        <textarea id="markdown-input" placeholder="Type your Markdown here..."></textarea>
+        <iframe id="html-output"></iframe>
+    </div>
+</body>
+
+</html>
diff --git a/examples/markdown-editor-improved/index.ts b/examples/markdown-editor-improved/index.ts
@@ -0,0 +1,43 @@
+import { init, Wasmer, Command } from "@wasmer/sdk";
+
+async function initialize() {
+    await init();
+    return await Wasmer.fromRegistry("wasmer-examples/markdown-renderer");
+}
+
+function debounce(func: (...args: any[]) => void, delay: number): (...args: any[]) => void {
+    let debounceTimer: ReturnType<typeof setTimeout>;
+
+    return function(...args: any[]) {
+        clearTimeout(debounceTimer);
+        debounceTimer = setTimeout(() => func(...args), delay);
+    };
+}
+
+async function renderMarkdown(cmd: Command, markdown: string) {
+    const instance = await cmd.run();
+    const stdin = instance.stdin.getWriter();
+    const encoder = new TextEncoder();
+    await stdin.write(encoder.encode(markdown));
+    await stdin.close();
+
+    const result = await instance.wait();
+    return result.ok ? result.stdoutUtf8 : null;
+}
+
+async function main() {
+    const pkg = await initialize();
+    const output = document.getElementById("html-output") as HTMLIFrameElement;
+    const markdownInput = document.getElementById("markdown-input") as HTMLTextAreaElement;
+
+    const debouncedRender = debounce(async () => {
+        const renderedHtml = await renderMarkdown(pkg.entrypoint!, markdownInput.value);
+        if (renderedHtml) {
+            output.srcdoc = renderedHtml;
+        }
+    }, 500); // 500 milliseconds debounce period
+
+    markdownInput.addEventListener("input", debouncedRender);
+}
+
+main();