impl lightning worker component / add proxy js resource

Author: stomita

force-app/main/default/aura/LightningWebWorker/LightningWebWorker.cmp

@@ -1,4 +1,15 @@
-<aura:component >
-  <aura:attribute name="proxy" type="String" required="true" default="" />
-  <lightning:container class="invisible" src="{!v.proxy}" />
+<aura:component access="global">
+  <aura:attribute name="proxy" type="String" required="true" default="" access="global" />
+  <aura:handler name="init" value="{!this}" action="{!c.init}" />
+  <ltng:require
+    scripts="{!$Resource.LightningWebWorkerProxyJS + '/client.js'}"
+    afterScriptsLoaded="{!c.initScript}"
+  />
+  <lightning:container
+    aura:id="lightning-container"
+    class="invisible"
+    src="{!v.proxy}"
+    onmessage="{!c.handleMessage}"
+    onerror="{!c.handleError}"
+  />
 </aura:component>

force-app/main/default/aura/LightningWebWorker/LightningWebWorker.css

@@ -1,10 +1,10 @@
 .THIS {
-  width: 0;
-  height: 0;
+  width: 0px;
+  height: 0px;
 }
 .THIS iframe.invisible {
-  width: 0;
-  height: 0;
+  width: 0px;
+  height: 0px;
   outline: none;
   visibility: hidden;
 }

force-app/main/default/aura/LightningWebWorker/LightningWebWorkerController.js

@@ -0,0 +1,25 @@
+({
+  init: function (cmp, evt, helper) {
+    window.Worker = helper.declareWorker(cmp);
+  },
+  initScript: function (cmp, evt, helper) {
+    helper.scriptLoaded = true;
+    if (helper.containerLoaded) {
+      helper.initWorker(cmp);
+    }
+  },
+  handleMessage: function (cmp, evt, helper) {
+    var payload = evt.getParams().payload;
+    if (payload.name === "server:ready" && !helper.containerLoaded) {
+      helper.containerLoaded = true;
+      if (helper.scriptLoaded) {
+        helper.initWorker(cmp);
+      }
+    } else if (payload.name === "server:message") {
+      helper.dispatchWorkerMessage(cmp, payload.value);
+    }
+  },
+  handleError: function () {
+    console.log("handleError", arguments);
+  },
+});

force-app/main/default/aura/LightningWebWorker/LightningWebWorkerHelper.js

@@ -0,0 +1,68 @@
+({
+  scriptLoaded: false,
+
+  containerLoaded: false,
+
+  declareWorker: function (cmp) {
+    var id = 0;
+    window._ltngWebWorkers = {};
+    var container = cmp.find("lightning-container");
+    var Worker = function (url, options) {
+      var instanceId = String(++id);
+      this.instanceId = instanceId;
+      this.url = url;
+      this.options = options;
+      this.requestQueue = [];
+      this.client = null;
+      // if the worker client script is already loaded
+      if (window.LightningWebWorkerClient) {
+        this.client = LightningWebWorkerClient.create(this, container);
+      }
+      window._ltngWebWorkers[instanceId] = this;
+    };
+    Worker.prototype.postMessage = function () {
+      if (this.client) {
+        this.client.postMessage.apply(this.client, arguments);
+      } else {
+        this.requestQueue.push(["postMessage", arguments]);
+      }
+    };
+    Worker.prototype.addEventListener = function () {
+      if (this.client) {
+        this.client.addEventListener.apply(this.client, arguments);
+      } else {
+        this.requestQueue.push(["addEventListener", arguments]);
+      }
+    };
+    return Worker;
+  },
+
+  initWorker: function (cmp) {
+    if (!window.LightningWebWorkerClient) {
+      console.error("load error: LightningWebWorkerClient is not found");
+      return;
+    }
+    var container = cmp.find("lightning-container");
+    container.message({ name: "worker:init", value: Date.now().toString() });
+    for (var instanceId in window._ltngWebWorkers) {
+      var instance = window._ltngWebWorkers[instanceId];
+      if (!instance.client) {
+        instance.client = LightningWebWorkerClient.create(instance, container);
+      }
+    }
+  },
+
+  dispatchWorkerMessage: function (cmp, message) {
+    if (!window.LightningWebWorkerClient) {
+      console.error("load error: LightningWebWorkerClient is not found");
+      return;
+    }
+    const instanceId = message.instanceId;
+    var instance = window._ltngWebWorkers[instanceId];
+    var e = new MessageEvent(message.type, {
+      data: message.data,
+      origin: "",
+    });
+    instance.client.receiveEvent(e);
+  },
+});

force-app/main/default/staticresources/LightningWebWorkerProxyJS.resource-meta.xml

@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<StaticResource xmlns="http://soap.sforce.com/2006/04/metadata">
+    <cacheControl>Private</cacheControl>
+    <contentType>application/zip</contentType>
+</StaticResource>

force-app/main/default/staticresources/LightningWebWorkerProxyJS/.gitignore

@@ -0,0 +1,2 @@
+*.js
+*.js.map