Make go-app compatible with GopherJS

pkg/app/app.go

@@ -26,11 +26,11 @@ import (
 const (
 	// IsClient reports whether the code is running as a client in the
 	// WebAssembly binary (app.wasm).
-	IsClient = runtime.GOARCH == "wasm" && runtime.GOOS == "js"
+	IsClient = runtime.GOOS == "js"
 
 	// IsServer reports whether the code is running on a server for
 	// pre-rendering purposes.
-	IsServer = runtime.GOARCH != "wasm" || runtime.GOOS != "js"
+	IsServer = runtime.GOOS != "js"
 
 	orientationChangeDelay = time.Millisecond * 500
 	engineUpdateRate       = 120

pkg/app/gen/app.js

@@ -6,16 +6,13 @@ var goappOnUpdate = function () {};
 var goappOnAppInstallChange = function () {};
 
 const goappEnv = {{.Env}};
-const goappLoadingLabel = "{{.LoadingLabel}}";
-const goappWasmContentLengthHeader = "{{.WasmContentLengthHeader}}";
 
 let goappServiceWorkerRegistration;
 let deferredPrompt = null;
 
 goappInitServiceWorker();
 goappWatchForUpdate();
 goappWatchForInstallable();
-goappInitWebAssembly();
 
 // -----------------------------------------------------------------------------
 // Service Worker
@@ -185,101 +182,3 @@ function goappKeepBodyClean() {
 
   return () => mutationObserver.disconnect();
 }
-
-// -----------------------------------------------------------------------------
-// Web Assembly
-// -----------------------------------------------------------------------------
-async function goappInitWebAssembly() {
-  if (!goappCanLoadWebAssembly()) {
-    document.getElementById("app-wasm-loader").style.display = "none";
-    return;
-  }
-
-  let instantiateStreaming = WebAssembly.instantiateStreaming;
-  if (!instantiateStreaming) {
-    instantiateStreaming = async (resp, importObject) => {
-      const source = await (await resp).arrayBuffer();
-      return await WebAssembly.instantiate(source, importObject);
-    };
-  }
-
-  const loaderIcon = document.getElementById("app-wasm-loader-icon");
-  const loaderLabel = document.getElementById("app-wasm-loader-label");
-
-  try {
-    const showProgress = (progress) => {
-      loaderLabel.innerText = goappLoadingLabel.replace("{progress}", progress);
-    };
-    showProgress(0);
-
-    const go = new Go();
-    const wasm = await instantiateStreaming(
-      fetchWithProgress("{{.Wasm}}", showProgress),
-      go.importObject
-    );
-
-    go.run(wasm.instance);
-  } catch (err) {
-    loaderIcon.className = "goapp-logo";
-    loaderLabel.innerText = err;
-    console.error("loading wasm failed: ", err);
-  }
-}
-
-function goappCanLoadWebAssembly() {
-  return !/bot|googlebot|crawler|spider|robot|crawling/i.test(
-    navigator.userAgent
-  );
-}
-
-async function fetchWithProgress(url, progess) {
-  const response = await fetch(url);
-
-  let contentLength;
-  try {
-    contentLength = response.headers.get(goappWasmContentLengthHeader);
-  } catch {}
-  if (!goappWasmContentLengthHeader || !contentLength) {
-    contentLength = response.headers.get("Content-Length");
-  }
-
-  const total = parseInt(contentLength, 10);
-  let loaded = 0;
-
-  const progressHandler = function (loaded, total) {
-    progess(Math.round((loaded * 100) / total));
-  };
-
-  var res = new Response(
-    new ReadableStream(
-      {
-        async start(controller) {
-          var reader = response.body.getReader();
-          for (;;) {
-            var { done, value } = await reader.read();
-
-            if (done) {
-              progressHandler(total, total);
-              break;
-            }
-
-            loaded += value.byteLength;
-            progressHandler(loaded, total);
-            controller.enqueue(value);
-          }
-          controller.close();
-        },
-      },
-      {
-        status: response.status,
-        statusText: response.statusText,
-      }
-    )
-  );
-
-  for (var pair of response.headers.entries()) {
-    res.headers.set(pair[0], pair[1]);
-  }
-
-  return res;
-}

pkg/app/gen/driver-wasm.js

@@ -0,0 +1,102 @@
+// -----------------------------------------------------------------------------
+// Web Assembly
+// -----------------------------------------------------------------------------
+const goappLoadingLabel = "{{.LoadingLabel}}";
+const goappWasmContentLengthHeader = "{{.WasmContentLengthHeader}}";
+
+goappInitWebAssembly();
+
+async function goappInitWebAssembly() {
+  if (!goappCanLoadWebAssembly()) {
+    document.getElementById("app-wasm-loader").style.display = "none";
+    return;
+  }
+
+  let instantiateStreaming = WebAssembly.instantiateStreaming;
+  if (!instantiateStreaming) {
+    instantiateStreaming = async (resp, importObject) => {
+      const source = await (await resp).arrayBuffer();
+      return await WebAssembly.instantiate(source, importObject);
+    };
+  }
+
+  const loaderIcon = document.getElementById("app-wasm-loader-icon");
+  const loaderLabel = document.getElementById("app-wasm-loader-label");
+
+  try {
+    const showProgress = (progress) => {
+      loaderLabel.innerText = goappLoadingLabel.replace("{progress}", progress);
+    };
+    showProgress(0);
+
+    const go = new Go();
+    const wasm = await instantiateStreaming(
+      fetchWithProgress("{{.Wasm}}", showProgress),
+      go.importObject
+    );
+
+    go.run(wasm.instance);
+  } catch (err) {
+    loaderIcon.className = "goapp-logo";
+    loaderLabel.innerText = err;
+    console.error("loading wasm failed: ", err);
+  }
+}
+
+function goappCanLoadWebAssembly() {
+  return !/bot|googlebot|crawler|spider|robot|crawling/i.test(
+    navigator.userAgent
+  );
+}
+
+async function fetchWithProgress(url, progess) {
+  const response = await fetch(url);
+
+  let contentLength;
+  try {
+    contentLength = response.headers.get(goappWasmContentLengthHeader);
+  } catch {}
+  if (!goappWasmContentLengthHeader || !contentLength) {
+    contentLength = response.headers.get("Content-Length");
+  }
+
+  const total = parseInt(contentLength, 10);
+  let loaded = 0;
+
+  const progressHandler = function (loaded, total) {
+    progess(Math.round((loaded * 100) / total));
+  };
+
+  var res = new Response(
+    new ReadableStream(
+      {
+        async start(controller) {
+          var reader = response.body.getReader();
+          for (;;) {
+            var { done, value } = await reader.read();
+
+            if (done) {
+              progressHandler(total, total);
+              break;
+            }
+
+            loaded += value.byteLength;
+            progressHandler(loaded, total);
+            controller.enqueue(value);
+          }
+          controller.close();
+        },
+      },
+      {
+        status: response.status,
+        statusText: response.statusText,
+      }
+    )
+  );
+
+  for (var pair of response.headers.entries()) {
+    res.headers.set(pair[0], pair[1]);
+  }
+
+  return res;
+}

pkg/app/gen/scripts.go

@@ -18,7 +18,7 @@ func main() {
 	}
 	defer f.Close()
 
-	fmt.Fprintln(f, "//go:build !wasm")
+	fmt.Fprintln(f, "//go:build !js")
 	fmt.Fprintln(f)
 	fmt.Fprintln(f, "package app")
 	fmt.Fprintln(f)
@@ -44,6 +44,10 @@ func main() {
 				"wasm_exec.js",
 			),
 		},
+		{
+			Var:      "wasmDriverJS",
+			Filename: "gen/driver-wasm.js",
+		},
 		{
 			Var:      "appJS",
 			Filename: "gen/app.js",