From 07cdcc61f772ad6d9ec88b6b9fd877316b579fca Mon Sep 17 00:00:00 2001 From: Adrian Cole Date: Wed, 7 Sep 2022 16:04:55 +0800 Subject: examples: adds summary of wasm examples and fixes callback bug This adds a summary of each wasm example, as before it was a bit unclear how to do so. This also fixes the callback example which was broken. Fixes #2568 Signed-off-by: Adrian Cole --- src/examples/wasm/README.md | 22 ++++++++++------------ src/examples/wasm/callback/wasm.go | 2 ++ 2 files changed, 12 insertions(+), 12 deletions(-) diff --git a/src/examples/wasm/README.md b/src/examples/wasm/README.md index 0975b587c..b80c33d35 100644 --- a/src/examples/wasm/README.md +++ b/src/examples/wasm/README.md @@ -21,12 +21,14 @@ $ tinygo build -o ./wasm.wasm -target wasm ./main/main.go This creates a `wasm.wasm` file, which we can load in JavaScript and execute in a browser. -This examples folder contains two examples that can be built using `make`: - -```bash -$ make export -``` - +Next, choose which example you want to use: +* [callback](callback): Defines and configures callbacks in Wasm. +* [export](export): Defines callbacks in Wasm, but configures them in JavaScript. +* [invoke](invoke): Invokes a function defined in JavaScript from Wasm. +* [main](main): Prints a message to the JavaScript console from Wasm. +* [slices](slices): Splits an Array defined in JavaScript from Wasm. + +Let's say you chose [main](main), you'd build it like so: ```bash $ make main ``` @@ -42,12 +44,8 @@ Serving ./html on http://localhost:8080 Use your web browser to visit http://localhost:8080. -* The wasm "export" example displays a simple math equation using HTML, with -the result calculated dynamically using WebAssembly. Changing any of the -values on the left hand side triggers the exported wasm `update` function to -recalculate the result. -* The wasm "main" example uses `println` to write to your browser JavaScript -console. You may need to open the browser development tools console to see it. +* Tip: Open the browser development tools (e.g. Right-click, Inspect in + FireFox) to see console output. ## How it works diff --git a/src/examples/wasm/callback/wasm.go b/src/examples/wasm/callback/wasm.go index da86550b4..f350f496c 100644 --- a/src/examples/wasm/callback/wasm.go +++ b/src/examples/wasm/callback/wasm.go @@ -8,10 +8,12 @@ import ( var a, b int func main() { + wait := make(chan struct{}, 0) document := js.Global().Get("document") document.Call("getElementById", "a").Set("oninput", updater(&a)) document.Call("getElementById", "b").Set("oninput", updater(&b)) update() + <-wait } func updater(n *int) js.Func { -- cgit v1.2.3