Fix playground deployment (#1949)

* Fix import resolution bug and wasm32 compatibility

Signed-off-by: Yashodhan Joshi <[email protected]>

* Update playground CI

Signed-off-by: Yashodhan Joshi <[email protected]>

* Iterate on a comment

* Turn off `workflow_dispatch` in playground action

---------

Signed-off-by: Yashodhan Joshi <[email protected]>
Co-authored-by: Adrian Sampson <[email protected]>
Co-authored-by: Adrian Sampson <[email protected]>

.github/workflows/playground.yml

@@ -0,0 +1,37 @@
+name: Playground Deployment
+
+on:
+  push:
+    branches:
+      - master
+
+jobs:
+  playground:
+    name: Web Demo
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+      - name: Install Rust stable
+        uses: actions-rust-lang/setup-rust-toolchain@v1
+        with:
+            toolchain: stable
+      - name: Install wasm-pack and wasm-bindgen-cli
+        uses: taiki-e/install-action@wasm-pack
+        with:
+          tool: wasm-pack
+
+      - name: Install dependencies
+        run: npm ci
+        working-directory: ./web
+
+      - name: Build website
+        run: npm run build
+        working-directory: ./web
+
+      - name: deploy
+        uses: peaceiris/actions-gh-pages@v3
+        with:
+          publish_branch: playground
+          github_token: ${{ secrets.GITHUB_TOKEN }}
+          publish_dir: ./web/dist

calyx-frontend/src/workspace.rs

@@ -83,6 +83,7 @@ impl Workspace {
 
     // Get the absolute path to an extern. Extern can only exist on paths
     // relative to the parent.
+    #[cfg(not(target_arch = "wasm32"))]
     fn canonicalize_extern<S>(
         extern_path: S,
         parent: &Path,
@@ -186,7 +187,16 @@ impl Workspace {
         for (path, exts) in ns.externs {
             match path {
                 Some(p) => {
+                    #[cfg(not(target_arch = "wasm32"))]
                     let abs_path = Self::canonicalize_extern(p, parent)?;
+
+                    // For the WebAssembly target, we avoid depending on the filesystem to
+                    // canonicalize paths to imported files. (This canonicalization is not
+                    // necessary because imports for the WebAssembly target work differently
+                    // anyway.)
+                    #[cfg(target_arch = "wasm32")]
+                    let abs_path = p.into();
+
                     let p = self.lib.add_extern(abs_path, exts);
                     if is_source {
                         p.set_source();
@@ -210,7 +220,6 @@ impl Workspace {
         } else {
             self.components.extend(&mut ns.components.into_iter());
         }
-
         // Return the canonical location of import paths
         let deps = ns
             .imports

web/index.html

@@ -61,5 +61,5 @@ <h2> Compiler Passes </h2>
             </div>
         </div>
     </body>
-    <script src="js/index.js"></script>
+    <script src="js/index.js" type="module"></script>
 </html>

web/js/index.js

@@ -1,9 +1,8 @@
-import * as calyx from "../rust/Cargo.toml";
+import * as calyx from 'calyx';
 import config from "../data/config.json";
 import passes from "../data/passes.json";
 import calyx_info from "../calyx_hash.json";
 import { updateDiffEditor } from './diffEditor.js';
-import 'regenerator-runtime/runtime';
 
 import Prism from 'prismjs';
 import './prism-futil.js';
@@ -33,7 +32,6 @@ function createToggle(pass) {
     button.innerHTML = pass.title;
     button.onclick = function () {
         buttonSet(pass, !pass.active);
-        compile();
     };
     return button;
 }
@@ -99,6 +97,8 @@ async function getLibrary(library, root) {
             let prefix = library.split('/').slice(0, -1).join("/");
             let names = Array.from(code.matchAll(/import "(.*)";/g)).map(x => x[1]);
             let res = await fetchLibs(names, `${root}/${prefix}/`);
+            let importRegex = /import "(.*)";/g;
+            code = code.replaceAll(importRegex, "");
             for (let r of res) {
                 code += r.code;
             }