From 219682c4724e1063bd49bd08ee46934a44b1a826 Mon Sep 17 00:00:00 2001 From: Hamza Ali Date: Mon, 22 Mar 2021 13:46:19 +0700 Subject: [PATCH] feat(example/basic): add interactive page to demonstrate WASM working --- example/basic/dist/index.html | 15 ++++++++++++++- example/basic/src/api/bridge.go | 8 ++++---- example/basic/src/api/main.go | 2 +- example/basic/src/index.js | 18 ++++++++++++++---- src/bridge.js | 10 +++++----- 5 files changed, 38 insertions(+), 15 deletions(-) diff --git a/example/basic/dist/index.html b/example/basic/dist/index.html index b2ca710..0814cfc 100644 --- a/example/basic/dist/index.html +++ b/example/basic/dist/index.html @@ -3,10 +3,23 @@ - Example + Go Mod WASM Example +

This is an example Go WASM Project.

+

+ + Sample Go code + +

+ +

Value from Go:

+

 

+ +

Call function from Go:

+ +

 

diff --git a/example/basic/src/api/bridge.go b/example/basic/src/api/bridge.go index 5456395..bca3fb5 100644 --- a/example/basic/src/api/bridge.go +++ b/example/basic/src/api/bridge.go @@ -14,7 +14,7 @@ var ( // Wrapper is a simple JS function that when called with a Go Function, will return a new function that will throw // if the property `error` is an instance of JavaScript's `error`. // - // All Go functions in the bridgeName proxy are expected to be the result of calling wrapper with the Go function. + // All Go functions in the bridgeName proxy are expected to be the result of calling wrapper with the Go function. wrapper js.Value ) @@ -39,11 +39,11 @@ func newReturnError(goErr error) js.Value { } // Using this wrapper makes it possible to throw errors in go-fashion. -// This means that all wrapped functions must return error and a value. +// This means that all wrapped functions must return value and an error (respectively). // // The __wrapper__ function from JS will automatically throw if the returned object has an 'error' property. -// Inversly, it will automatically give the result value if that property exists. -// All go functions directly returned via wasm should keep this in mind. +// Inversely, it will automatically give the result value if that property exists. +// All Go functions directly returned via wasm should keep this in mind. func wrapGoFunc(f func(js.Value, []js.Value) (interface{}, error)) js.Func { return js.FuncOf(func(this js.Value, args []js.Value) interface{} { res, err := f(this, args) diff --git a/example/basic/src/api/main.go b/example/basic/src/api/main.go index b9adc29..283bb1e 100644 --- a/example/basic/src/api/main.go +++ b/example/basic/src/api/main.go @@ -13,7 +13,7 @@ const hello = "Hello!" // If returning a non-nil error value, the resulting promise will be rejected by API consumers. // The rejected value will JavaScript's Error, with the message being the go error's message. // -// See other examples which use the Go wasm bridge api, which show more flexibility and type safety when interacting +// See other examples which use the Go WASM bridge api, which show more flexibility and type safety when interacting // with JavaScript. func helloName(_ js.Value, args []js.Value) (interface{}, error) { return fmt.Sprintf("Hello, %s!", args[0].String()), nil diff --git a/example/basic/src/index.js b/example/basic/src/index.js index b491452..020dbc6 100644 --- a/example/basic/src/index.js +++ b/example/basic/src/index.js @@ -2,7 +2,17 @@ import wasm from './api/main.go'; const { hello, helloName } = wasm; -(async () => { - console.log(await hello()); - console.log(await helloName("world")); -})() \ No newline at end of file +const value = document.getElementById("value"); +const input = document.getElementById("input"); +const funcValue = document.getElementById("funcValue"); + +const run = async () => { + value.innerText = await hello(); + + funcValue.innerText = await helloName(input.value); + input.addEventListener("keyup", async (e) => { + funcValue.innerText = await helloName(e.target.value); + }) +} + +run() \ No newline at end of file diff --git a/src/bridge.js b/src/bridge.js index dda61f2..4c85da6 100644 --- a/src/bridge.js +++ b/src/bridge.js @@ -7,12 +7,12 @@ if (!g.__go_wasm__) { /** * The maximum amount of time that we would expect Wasm to take to initialize. * If it doesn't initialize after this time, we send a warning to console. - * Most likely something has gone wrong if it takes more than 3 sconds to initialize. + * Most likely something has gone wrong if it takes more than 3 seconds to initialize. */ const maxTime = 3 * 1000; /** - * bridge is an easier way to refer to the Go wasm object. + * bridge is an easier way to refer to the Go WASM object. */ const bridge = g.__go_wasm__; @@ -40,7 +40,7 @@ function wrapper(goFunc) { /** * Sleep is used when awaiting for Go Wasm to initialize. * It uses the lowest possible sane delay time (via requestAnimationFrame). - * However, if the window is not focused, the function never returns. + * However, if the window is not focused, requestAnimationFrame never returns. * A timeout will ensure to be called after 50 ms, regardless of whether or not the tab is in focus. * * @returns {Promise} an always-resolving promise when a tick has been completed @@ -79,7 +79,7 @@ export default function (getBytes) { init(); setTimeout(() => { if (bridge.__ready__ !== true) { - console.warn("Golang Wasm Bridge (__go_wasm__.__ready__) still not true after max time"); + console.warn("Golang WASM Bridge (__go_wasm__.__ready__) still not true after max time"); } }, maxTime); @@ -98,7 +98,7 @@ export default function (getBytes) { res(bridge[key]); if (args.length !== 0) { - console.warn("Retrieved value from web assembly returned non-error type, however called with arguments.") + console.warn("Retrieved value from WASM returned non-error type, however called with arguments.") } return; }