Team-Ortix
/
golang-wasm
2
0
Fork 2
Code Issues Pull Requests 2 Projects Releases Wiki Activity

feat(example/basic): add interactive page to demonstrate WASM working

pull/5/head
ALI Hamza 2021-03-22 13:46:19 +07:00
parent 0575df54c6
commit 219682c472
Signed by: hamza
GPG Key ID: 22473A32291F8CB6
5 changed files with 38 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
example/basic/dist/index.html vendored
Unescape Escape View File

@ -3,10 +3,23 @@
<head>
<meta charset="utf-8" />
<title>Example</title>
<title>Go Mod WASM Example</title>
</head>
<body>
<h1>This is an example Go WASM Project.</h1>
<h3>
<a href="https://gitea.teamortix.com/Team-Ortix/go-mod-wasm/src/branch/master/example/basic/src/api/main.go">
Sample Go code
</a>
</h3>
<h2>Value from Go:</h2>
<h3 id="value">&nbsp;</h3>
<h2>Call function from Go:</h2>
<input type="text" id="input" value="Team Ortix" />
<h3 id="funcValue">&nbsp;</h3>
<script src="main.js"></script>
</body>

8
example/basic/src/api/bridge.go
Unescape Escape View File

@ -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)

2
example/basic/src/api/main.go
Unescape Escape View File

@ -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

18
example/basic/src/index.js
Unescape Escape View File

@ -2,7 +2,17 @@ import wasm from './api/main.go';
const { hello, helloName } = wasm;
(async () => {
console.log(await hello());
console.log(await helloName("world"));
})()
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()

10
src/bridge.js
Unescape Escape View File

@ -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;
}