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> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<title>Example</title> <title>Go Mod WASM Example</title>
</head> </head>
<body> <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> <script src="main.js"></script>
</body> </body>

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

@ -39,11 +39,11 @@ func newReturnError(goErr error) js.Value {
} }
// Using this wrapper makes it possible to throw errors in go-fashion. // 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. // 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. // Inversely, it will automatically give the result value if that property exists.
// All go functions directly returned via wasm should keep this in mind. // All Go functions directly returned via wasm should keep this in mind.
func wrapGoFunc(f func(js.Value, []js.Value) (interface{}, error)) js.Func { func wrapGoFunc(f func(js.Value, []js.Value) (interface{}, error)) js.Func {
return js.FuncOf(func(this js.Value, args []js.Value) interface{} { return js.FuncOf(func(this js.Value, args []js.Value) interface{} {
res, err := f(this, args) 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. // 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. // 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. // with JavaScript.
func helloName(_ js.Value, args []js.Value) (interface{}, error) { func helloName(_ js.Value, args []js.Value) (interface{}, error) {
return fmt.Sprintf("Hello, %s!", args[0].String()), nil 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; const { hello, helloName } = wasm;
(async () => { const value = document.getElementById("value");
console.log(await hello()); const input = document.getElementById("input");
console.log(await helloName("world")); 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. * 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. * 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; 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__; const bridge = g.__go_wasm__;
@ -40,7 +40,7 @@ function wrapper(goFunc) {
/** /**
* Sleep is used when awaiting for Go Wasm to initialize. * Sleep is used when awaiting for Go Wasm to initialize.
* It uses the lowest possible sane delay time (via requestAnimationFrame). * 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. * 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 * @returns {Promise} an always-resolving promise when a tick has been completed
@ -79,7 +79,7 @@ export default function (getBytes) {
init(); init();
setTimeout(() => { setTimeout(() => {
if (bridge.__ready__ !== true) { 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); }, maxTime);
@ -98,7 +98,7 @@ export default function (getBytes) {
res(bridge[key]); res(bridge[key]);
if (args.length !== 0) { 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; return;
} }