checks to fix loading issues if loaded as SSR

Author: seveibar

Makefile

@@ -31,7 +31,7 @@ build/module.js: setup globals.bc
 	cp yarn.lock ./module/yarn.lock
 	cp ./module-files/* ./module
 
-	parcel build ./module/webworker-worker.js -d module -o /webworker-worker-bundle.js
+	npx parcel build ./module/webworker-worker.js -d module -o /webworker-worker-bundle.js
 
 	# cd module && npm version patch && npm publish
 

module-files/webworker.js

@@ -2,53 +2,68 @@ const { version } = require("./package.json")
 let lastRequestId = -1
 
 function wrapAutoseg(urlOrVersion) {
-  if (urlOrVersion.match(/^[0-9]+\.[0-9]+\.[0-9]+$/)) {
-    urlOrVersion = `https://unpkg.com/autoseg@${urlOrVersion}/webworker-worker-bundle.js`
-  }
+  try {
+    if (
+      typeof window === "undefined" ||
+      !window.URL ||
+      !window.URL.createObjectURL
+    ) {
+      console.log(
+        "autoseg not loading- no window (why are you using the browser version?)"
+      )
+      return {}
+    }
+    if (urlOrVersion.match(/^[0-9]+\.[0-9]+\.[0-9]+$/)) {
+      urlOrVersion = `https://unpkg.com/autoseg@${urlOrVersion}/webworker-worker-bundle.js`
+    }
+
+    const blob = new Blob([`importScripts('${urlOrVersion}')`], {
+      type: "application/javascript",
+    })
+    const blobUrl = window.URL.createObjectURL(blob)
+    const webworker = new Worker(blobUrl)
+
+    // This is blocked by a unfixable CORS error
+    // const webworker = new Worker(urlOrVersion)
 
-  const blob = new Blob([`importScripts('${urlOrVersion}')`], {
-    type: "application/javascript",
-  })
-  const blobUrl = window.URL.createObjectURL(blob)
-  const webworker = new Worker(blobUrl)
-
-  // This is blocked by a unfixable CORS error
-  // const webworker = new Worker(urlOrVersion)
-
-  const functions = ["setConfig", "loadImage", "getMask"]
-
-  const obj = {}
-
-  for (const functionName of functions) {
-    const id = lastRequestId++
-    obj[functionName] = (...args) => {
-      webworker.postMessage({ functionName, args, id })
-      return new Promise((resolve, reject) => {
-        const possibleResponse = (e) => {
-          const { data } = e
-          if (!data) return
-          if (data.id === id) {
-            webworker.removeEventListener("message", possibleResponse)
-            if (data.error) {
-              reject(new Error(data.error))
-            } else {
-              // There's some issue with the serialization of the ImageData
-              // for getMask
-              if (functionName === "getMask") {
-                const { data: pixels, width, height } = data.returnValue
-                resolve(new ImageData(pixels, width, height))
+    const functions = ["setConfig", "loadImage", "getMask"]
+
+    const obj = {}
+
+    for (const functionName of functions) {
+      const id = lastRequestId++
+      obj[functionName] = (...args) => {
+        webworker.postMessage({ functionName, args, id })
+        return new Promise((resolve, reject) => {
+          const possibleResponse = (e) => {
+            const { data } = e
+            if (!data) return
+            if (data.id === id) {
+              webworker.removeEventListener("message", possibleResponse)
+              if (data.error) {
+                reject(new Error(data.error))
               } else {
-                resolve(data.returnValue)
+                // There's some issue with the serialization of the ImageData
+                // for getMask
+                if (functionName === "getMask") {
+                  const { data: pixels, width, height } = data.returnValue
+                  resolve(new ImageData(pixels, width, height))
+                } else {
+                  resolve(data.returnValue)
+                }
               }
             }
           }
-        }
-        webworker.addEventListener("message", possibleResponse)
-      })
+          webworker.addEventListener("message", possibleResponse)
+        })
+      }
     }
-  }
 
-  return obj
+    return obj
+  } catch (e) {
+    console.log(`error loading autoseg: ${e.toString()}`)
+    return {}
+  }
 }
 
 module.exports = wrapAutoseg(

package.json

@@ -1,6 +1,6 @@
 {
   "name": "autoseg",
-  "version": "0.0.10",
+  "version": "0.0.12",
   "main": "web.js",
   "repository": "[email protected]:UniversalDataTool/autoseg.git",
   "author": "seveibar <[email protected]>",
@@ -19,6 +19,7 @@
     "eslint-plugin-react": "7.x",
     "eslint-plugin-react-hooks": "2.x",
     "lodash": "^4.17.15",
+    "parcel": "^1.12.4",
     "prettier": "^2.0.5",
     "regenerator-runtime": "^0.13.7"
   }

tests/segmentation/segmentation.test.js

@@ -1,7 +1,7 @@
 const test = require("ava")
 const fs = require("fs")
 const path = require("path")
-const m = require("../../build/module-wasm-bundle.js")
+const m = require("../../build/module.js")
 const range = require("lodash/range")
 
 const f = (p) => path.join(__dirname, p)