Add self-sufficient e2e WASM example template

A sample WASM application featuring Transport WASM bridge will soon
follow. Thinking of doing an X509 public certificate verification as
an example code, as it's a good showcase of encoding/decoding of
base64 and pem container format as well as cryptographic operations.

Author: jooskim

wasm/example/build.go wasm/example/sample_wasm_app/build.go

@@ -1,3 +1,3 @@
-package example
+package sample_wasm_app
 
 //go:generate bash -c "GOARCH=wasm; GOOS=js; go build -o ${OUT_DIR}/main.wasm main.go"

wasm/example/main.go wasm/example/sample_wasm_app/main.go

@@ -1,4 +1,5 @@
 //go:build js && wasm
+// +build js,wasm
 
 // Copyright 2021 VMware, Inc.
 // SPDX-License-Identifier: BSD-2-Clause

wasm/example/server/main.go

@@ -0,0 +1,64 @@
+package main
+
+import (
+	"context"
+	"errors"
+	"github.com/vmware/transport-go/wasm/example/server/render"
+	"io/fs"
+	"log"
+	"net/http"
+	"os"
+	"os/signal"
+	"path"
+	"strings"
+	"syscall"
+)
+
+func main() {
+	sigChan := make(chan os.Signal)
+	signal.Notify(sigChan, syscall.SIGINT, syscall.SIGKILL)
+	server := exampleServer()
+
+	go func() {
+		<-sigChan
+		server.Shutdown(context.Background())
+	}()
+
+	log.Println("example server running at http://localhost:30080")
+	_ = server.ListenAndServe()
+}
+
+func exampleServer() *http.Server {
+	handler := http.NewServeMux()
+	handler.HandleFunc("/", func(w http.ResponseWriter, r *http.Request) {
+		// template
+		tmpl := render.GetTemplate(render.IndexRoute)
+		err := tmpl.Execute(w, nil)
+		if err != nil {
+			http.Error(w, err.Error(), 500)
+		}
+	})
+
+	handler.HandleFunc("/assets/", func(w http.ResponseWriter, r *http.Request) {
+		split := strings.Split(r.RequestURI[1:], "/")
+		resourcePath := path.Join("templates", strings.Join(split[1:], "/"))
+		b, err := fs.ReadFile(render.FS, resourcePath)
+		if err != nil {
+			if errors.Is(err, fs.ErrNotExist) {
+				http.NotFound(w, r)
+			} else {
+				http.Error(w, err.Error(), http.StatusInternalServerError)
+			}
+			return
+		}
+
+		w.Write(b)
+	})
+
+	s := &http.Server{
+		Addr:    ":30080",
+		Handler: handler,
+	}
+
+	return s
+}

wasm/example/server/render/template_factory.go

@@ -0,0 +1,56 @@
+package render
+
+import (
+	"embed"
+	"fmt"
+	"html/template"
+	"io"
+	"log"
+)
+
+type ExampleRoute int
+
+const (
+	IndexRoute ExampleRoute = iota
+)
+
+//go:embed templates/*
+var FS embed.FS
+
+type Tmpl struct {
+	tmpl  *template.Template
+	funcs template.FuncMap
+}
+
+func (t *Tmpl) SetFuncs(funcs template.FuncMap) {
+	t.funcs = funcs
+}
+
+func (t *Tmpl) Execute(w io.Writer, data interface{}) error {
+	return t.tmpl.Funcs(t.funcs).Execute(w, data)
+}
+
+func GetTemplate(route ExampleRoute) *Tmpl {
+	var tmpl *Tmpl
+	switch route {
+	case IndexRoute:
+		tmpl = newTemplate("templates/index.html", "templates/common.html")
+	default:
+		tmpl = newTemplate("")
+	}
+	return tmpl
+}
+
+func newTemplate(embedded ...string) *Tmpl {
+	var parsed *template.Template
+	var err error
+
+	if len(embedded) > 0 {
+		parsed, err = template.ParseFS(FS, embedded...)
+		if err != nil {
+			log.Printf("warning: some child templates could not be parsed: %v", fmt.Errorf("failed to parse child templates: %w", err))
+		}
+	}
+
+	return &Tmpl{tmpl: parsed}
+}

wasm/example/server/render/templates/common.html

@@ -0,0 +1,34 @@
+{{- define "transport_typescript_lib" }}
+<script src="https://cdn.jsdelivr.net/npm/[email protected]/bundles/rxjs.umd.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/@vmw/transport@latest/transport.umd.min.js"></script>
+<script>
+   transport.TransportEventBus.bootWithOptions(1, false, true);
+</script>
+{{- end }}
+
+{{- define "go_wasm_exec_script" }}
+<script src="/assets/wasm_exec.js"></script>
+<script>
+    if (!WebAssembly.instantiateStreaming) { // polyfill
+        WebAssembly.instantiateStreaming = async (resp, importObject) => {
+            const source = await (await resp).arrayBuffer();
+            return await WebAssembly.instantiate(source, importObject);
+        };
+    }
+
+    const go = new Go();
+    let mod, inst;
+    WebAssembly.instantiateStreaming(fetch("{{ . }}"), go.importObject).then((result) => {
+        mod = result.module;
+        inst = result.instance;
+        AppEventBus.sendResponseMessage('wasm_loaded_chan', true);
+    }).catch((err) => {
+        console.error(err);
+    });
+
+    async function run() {
+        await go.run(inst);
+        inst = await WebAssembly.instantiate(mod, go.importObject); // reset instance
+    }
+</script>
+{{- end }}

wasm/example/server/render/templates/index.html

@@ -0,0 +1,26 @@
+<!doctype html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <title>Rxjs</title>
+    <base href="/">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="icon" type="image/x-icon" href="favicon.ico">
+    {{- template "transport_typescript_lib" -}}
+    {{- template "go_wasm_exec_script" "/assets/main.wasm" -}}
+</head>
+<body>
+<h1>WASM Playground</h1>
+<script>
+    // set up a channel that wasm_exec will send a signal to once our WASM application is loaded
+    // and ready to be executed. note that if you try to run(), it will fail because the file will most likely
+    // has not yet loaded. see templates/common.html as well to see how and when the message is sent down the channel.
+    const wasmLoadedHandler = AppEventBus.listenOnce('wasm_loaded_chan');
+    wasmLoadedHandler.handle(async () => {
+        console.log('wasm bundle downloaded and loaded. executing');
+        await run();
+    });
+
+</script>
+</body>
+</html>