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

hhhapz · hhhapz · commit 5ff9d6fd0e98 · 2021-03-24T20:09:14.000+07:00
diff --git a/example/basic/dist/index.html b/example/basic/dist/index.html
@@ -7,6 +7,19 @@
 </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>
 
diff --git 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
@@ -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
@@ -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()
diff --git 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;
                         }
