A Wasm playground with preact as a shell. Goal is to offer multiple sources of compiling wasm, but personally only uses my favorite: Assemblyscript. Was used as a starting ground for Wasmboy.
-
wasm/
- folder with source for wasm modules, with subdirectories for the language used. -
index.js
- base app component for the preact shell. -
playground.js
- component that interacts with the wasm module. -
dist/
- build output for wasm modules
- Install AssemblyScript.
npm install --save-dev AssemblyScript/assemblyscript
-
Install the preact cli
-
Create a preact project with the preact cli
preact create simple <project-name>
.
- Serve the react Project
npm run dev
- Create a npm script step for building wasm in your
package.json
"wasm:build": "mkdir -p dist/wasm/assemblyscript && npx asc wasm/assemblyscript/index.ts -b dist/wasm/assemblyscript/index.untouched.wasm -t dist/wasm/assemblyscript/index.untouched.wast --validate && echo \"Done!\""
- Create a npm script for watching your wasm files to build them using watch
"wasm:watch": "npx watch \"npm run wasm:build\" wasm"
- Run the wasm watcher/builder
npm run wasm:watch
Currently no docs, but in the Future, Go:
# install dependencies
npm install
# serve with hot reload at localhost:8080
npm run dev
# Watch wasm/ folder for changes, and rebuild on changes
npm run wasm:watch
# build for production with minification
npm run build
# Build the wasm into a wasm module
npm run wasm:build
# test the production build locally
npm run serve
For detailed explanation on how things work, checkout the CLI Readme.