example loading in vuepress

3 years ago · ba9147f654
parent f25377f38b
commit ba9147f654
6 changed files with 43 additions and 13 deletions
--- a/build-wasm.sh
+++ b/build-wasm.sh
@ -1,10 +1 @@
-#!/usr/bin/env bash
-# Adapted from https://github.com/gfx-rs/wgpu/blob/master/run-wasm-example.sh
-
-set -e
-
-cargo build --bin pong --target wasm32-unknown-unknown
-
-mkdir -p target/wasm-examples/pong
-wasm-bindgen --target web --out-dir target/wasm-examples/pong target/wasm32-unknown-unknown/debug/pong.wasm
-cp index.template.html target/wasm-examples/pong/index.html
+wasm-pack build --out-dir ../../../docs/.vuepress/components/wasm/pong code/showcase/pong
--- a/code/showcase/pong/index.html
+++ b/code/showcase/pong/index.html
@ -1,11 +1,13 @@
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Pong with WASM</title>
 </head>
+
 <body>
    <script type="module">
        import init from "./pkg/pong.js";
@ -19,4 +21,5 @@
        }
    </style>
 </body>
+
 </html>
--- a/docs/.vuepress/components/RecentArticles.vue
+++ b/docs/.vuepress/components/RecentArticles.vue
@ -3,7 +3,7 @@
 <template>
 <div>
 	<ul>
-		<li v-for="post in recentFiles">
+		<li v-for="i, post in recentFiles" :key="i">
 			<a :href="post.path">{{post.title}}</a>
 		</li>
 	</ul>
--- a/docs/.vuepress/components/WasmExample.vue
+++ b/docs/.vuepress/components/WasmExample.vue
@ -0,0 +1,34 @@
+<template>
+  <div class="wasm-example">
+    <div class="error" v-if="error">
+      {{ error }}
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: { example: "" },
+  data() {
+    return {
+      error: {
+        value: "",
+        required: true,
+      },
+    };
+  },
+  async mounted() {
+    await this.$nextTick();
+
+    try {
+      const init = await import(`./wasm/${this.example}/${this.example}.js`);
+      init().then(() => {
+        console.log("WASM Loaded");
+      });
+    } catch (e) {
+      this.error = `An error occurred loading "${this.example}": ${e}`;
+      console.error(e);
+    }
+  },
+};
+</script>
--- a/docs/showcase/pong/README.md
+++ b/docs/showcase/pong/README.md
@ -263,3 +263,5 @@ I was going to have `BallBounce` play a positioned sound using a `SpatialSink`,
 ## Summary

 A fun project to work on. It was overly architected, and kinda hard to make changes, but a good experience none the less.
+
+<WasmExample example="pong"></WasmExample>
--- a/package.json
+++ b/package.json
@ -8,8 +8,8 @@
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
-    "dev": "vuepress dev docs",
-    "build": "vuepress build docs",
+    "dev": "build-wasm.sh && vuepress dev docs",
+    "build": "build-wasm.sh && vuepress build docs",
    "deploy": "sh deploy.sh"
  },
  "author": "",