proof-of-concept playground (#1597)

* proof-of-concept playground

* make playground part of the workspace

* do not use the workspace lints

* print

* add redirect

* color printing

* checkbox for printing skeletons

* cross-link, also make parse errors red

* allow CI to run

* I guess we cannot avoid committing this generated file

Author: bakkot

.github/workflows/playground.yml

@@ -0,0 +1,59 @@
+name: Build playground
+on:
+  push:
+    branches: [main]
+  pull_request:
+  merge_group:
+
+# Cancel any in-flight jobs for the same PR/branch so there's only one active
+# at a time
+concurrency:
+  group: ${{ github.workflow }}-${{ github.ref }}
+  cancel-in-progress: true
+
+defaults:
+  run:
+    shell: bash
+
+jobs:
+  build:
+    name: Build
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          submodules: true
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 20
+      - uses: bytecodealliance/wasmtime/.github/actions/install-rust@v20.0.0
+      - uses: cargo-bins/cargo-binstall@v1.6.9
+      - run: cargo binstall cargo-component -y
+      - run: rustup component add rustfmt # needed for cargo-component, apparently?
+      - run: npm ci
+        working-directory: playground
+      - run: npm run build
+        working-directory: playground
+
+      # also prepare to deploy GH pages on main
+      - if: github.ref == 'refs/heads/main'
+        uses: actions/configure-pages@v5
+      - if: github.ref == 'refs/heads/main'
+        uses: actions/upload-pages-artifact@v3
+        with:
+          path: "./playground/dist"
+
+  deploy:
+    name: Deploy
+    if: github.ref == 'refs/heads/main'
+    needs: build
+    permissions:
+      pages: write
+      id-token: write
+    runs-on: ubuntu-latest
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    steps:
+      - id: deployment
+        uses: actions/deploy-pages@v4

Cargo.lock

@@ -39,6 +39,7 @@ members = [
   'fuzz',
   'crates/wit-parser/fuzz',
   'crates/wit-component/dl',
+  'playground/component',
 ]
 
 [workspace.lints.rust]

Cargo.toml

@@ -0,0 +1,3 @@
+node_modules/
+component-built/
+dist/

playground/.gitignore

@@ -0,0 +1,30 @@
+# Playground
+
+This is a simple online playground for `wasm-tools parse`, available at https://bytecodealliance.gthub.io/wasm-tools/.
+
+## Building
+
+In addition to `cargo`, you'll need to have `node` and [`cargo-component`](https://github.com/bytecodealliance/cargo-Component) installed and on your path.
+
+Then
+
+```sh
+npm ci
+```
+to install dependencies and
+```sh
+npm run build
+```
+to build.
+
+Output will be placed under `dist`.
+
+## Making changes
+
+The [./component/wit/world.wit](./component/wit/world.wit) file defines the exported functions for use by the playground. After changing it you'll need to `npm run build` to regenerate the bindings file (the command will fail but still generate the bindings) and then implement the functions in [./component/src/lib.rs](./component/src/lib.rs).
+
+After `npm run build`ing again you can make use of those functions from [./src/worker.ts](./src/worker.ts), with full type safety (thanks to [`jco`](https://github.com/bytecodealliance/jco)).
+
+It is also possible to use them outside of a worker, but since they run synchronously and block their thread the playground is designed to do all calls off the main thread.
+
+To preview your changes after building you'll need to run a web server; the worker will not load from a `file:` URL. The simplest way to do this is by running `npx http-server dist`, but you can use whatever means you'd like.

playground/README.md

@@ -0,0 +1 @@
+target/

playground/component/.gitignore

@@ -0,0 +1,24 @@
+[package]
+name = "component"
+publish = false
+edition.workspace = true
+
+[dependencies]
+wit-bindgen-rt = { version = "0.26.0", features = ["bitflags"] }
+wat = { workspace = true }
+wasmprinter = { workspace = true }
+
+[lib]
+crate-type = ["cdylib"]
+
+[profile.release]
+codegen-units = 1
+opt-level = "s"
+debug = false
+strip = true
+lto = true
+
+[package.metadata.component]
+package = "component:component"
+
+[package.metadata.component.dependencies]