Use a web worker to dispatch messages back and forth.

* https://survivejs.com/webpack/techniques/web-workers/

4 files changed, 28 insertions, 14 deletions

diff --git a/package-lock.json b/package-lock.json
index 93a0e4c..c6c43a5 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -12587,6 +12587,16 @@
         "errno": "~0.1.7"
       }
     },
+    "worker-loader": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/worker-loader/-/worker-loader-2.0.0.tgz",
+      "integrity": "sha512-tnvNp4K3KQOpfRnD20m8xltE3eWh89Ye+5oj7wXEEHKac1P4oZ6p9oTj8/8ExqoSBnk9nu5Pr4nKfQ1hn2APJw==",
+      "dev": true,
+      "requires": {
+        "loader-utils": "^1.0.0",
+        "schema-utils": "^0.4.0"
+      }
+    },
     "wrap-ansi": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-2.1.0.tgz",
diff --git a/package.json b/package.json
index 2aa93a0..d7954db 100644
--- a/package.json
+++ b/package.json
@@ -43,7 +43,8 @@
     "webpack": "^4.16.5",
     "webpack-cli": "^3.1.0",
     "webpack-dev-server": "^3.1.5",
-    "webpack-merge": "^4.1.4"
+    "webpack-merge": "^4.1.4",
+    "worker-loader": "^2.0.0"
   },
   "dependencies": {
     "purecss": "^1.0.0",
diff --git a/src/component.js b/src/component.js
index 5ea970b..75dc72f 100644
--- a/src/component.js
+++ b/src/component.js
@@ -1,17 +1,17 @@
-export default (text = HELLO) => {
-  const element = document.createElement("div");
-  element.className = "pure-button";
-  element.innerHTML = text;
+import Worker from "worker-loader!./worker";
 
-  element.onclick = () => {
-    import("./lazy")
-      .then(lazy => {
-        element.textContent = lazy.default;
-      })
-      .catch(error => {
-        console.error(error);
-      })
-  }
+export default () => {
+  const element = document.createElement("h1");
+  const worker = new Worker();
+  const state = { text: "foo" };
+
+  worker.addEventListener("message", ({ data: { text } }) => {
+    state.text = text;
+    element.innerHTML = text;
+  });
+
+  element.innerHTML = state.text;
+  element.onclick = () => worker.postMessage({ text: state.text });
 
   return element;
 };
diff --git a/src/worker.js b/src/worker.js
new file mode 100644
index 0000000..ee22ac2
--- /dev/null
+++ b/src/worker.js
@@ -0,0 +1,3 @@
+self.onmessage = ({ data: { text } }) => {
+  self.postMessage({ text: text + text });
+};