Use web workers to load the route snapper. #23

... doesn't work, we can't ship a WASM thing across the web worker
channels

app.js

@@ -223,7 +223,7 @@ export class App {
         }
       });
 
-      this.routeSnapper = await setupRouteSnapper(this);
+      await setupRouteSnapper(this);
     });
 
     document.getElementById("basemaps").onchange = (e) => {
@@ -405,7 +405,11 @@ async function setupRouteSnapper(app) {
   console.log(`Grabbing ${url}`);
   try {
     const mapBytes = await fetchWithProgress(url, "snap-progress");
-    window.routeSnapper = new RouteSnapper(app, mapBytes);
+    const worker = new Worker("route-snapper/worker.js");
+    worker.onmessage = (e) => {
+      app.routeSnapper = new RouteSnapper(app, e.data);
+    };
+    worker.postMessage(mapBytes);
   } catch (err) {
     console.log(`Route snapper broke: ${err}`);
     document.getElementById("snap-tool").innerHTML = "Failed to load";

route-snapper/lib.js

@@ -1,20 +1,10 @@
-// Weird workaround to make WASM work in web workers. See
-// https://rustwasm.github.io/wasm-bindgen/examples/wasm-in-web-worker.html
-const { JsRouteSnapper } = wasm_bindgen;
-async function setup() {
-  await wasm_bindgen("./route-snapper/pkg/route_snapper_bg.wasm");
-}
-setup();
-
 export class RouteSnapper {
-  constructor(app, mapBytes) {
+  constructor(app, inner) {
     const circleRadiusPixels = 10;
 
     this.app = app;
     this.map = app.map;
-    console.time("Deserialize and setup JsRouteSnapper");
-    this.inner = new JsRouteSnapper(mapBytes);
-    console.timeEnd("Deserialize and setup JsRouteSnapper");
+    this.inner = inner;
     console.log("JsRouteSnapper ready, waiting for idle event");
     this.active = false;
 

route-snapper/worker.js

@@ -0,0 +1,25 @@
+importScripts("./pkg/route_snapper.js");
+
+console.log("Hi from worker");
+
+// Weird workaround to make WASM work in web workers. See
+// https://rustwasm.github.io/wasm-bindgen/examples/wasm-in-web-worker.html
+const { JsRouteSnapper } = wasm_bindgen;
+async function setup() {
+console.log("Hi from setup");
+  await wasm_bindgen("./pkg/route_snapper_bg.wasm");
+console.log("setup done");
+}
+//setup();
+
+// Web worker magic
+self.onmessage = async (e) => {
+	console.log("got msg");
+	await setup();
+	console.log("now doing stuff");
+  console.time("Deserialize and setup JsRouteSnapper");
+  const inner = new JsRouteSnapper(e.data);
+	console.log("cool done, now pass it back");
+  console.timeEnd("Deserialize and setup JsRouteSnapper");
+  self.postMessage(inner);
+};

scheme.html

@@ -9,8 +9,6 @@
     <script src="deps/maplibre-gl.js"></script>
     <script src="deps/geojson-extent.js"></script>
     <script src="deps/mapbox-gl-draw.js"></script>
-    <!-- Weird ES module workaround -->
-    <script src="route-snapper/pkg/route_snapper.js"></script>
 
     <script type="module">
       import { App } from "./app.js";