feat: Add experimental web worker support.

Implements #113

Author: treshugart

package.json

@@ -11,7 +11,8 @@
     "custom-event-polyfill": "^0.2.1",
     "cz-conventional-changelog": "^1.2.0",
     "semantic-release": "^6.3.2",
-    "skatejs-build": "^12.1.0"
+    "skatejs-build": "^12.1.0",
+    "worker-loader": "^0.7.1"
   },
   "scripts": {
     "build": "sk-build",

src/diff-main.js

@@ -0,0 +1,75 @@
+import * as types from './types';
+import compareNode from './compare/node';
+import realNode from './util/real-node';
+import realNodeMap from './util/real-node-map';
+
+function diffNode (source, destination) {
+  let nodeInstructions = compareNode(source, destination);
+
+  // If there are instructions (even an empty array) it means the node can be
+  // diffed and doesn't have to be replaced. If the instructions are falsy
+  // it means that the nodes are not similar (cannot be changed) and must be
+  // replaced instead.
+  if (nodeInstructions) {
+    return nodeInstructions.concat(diff({ source, destination }));
+  }
+
+  return [{
+    destination,
+    source,
+    type: types.REPLACE_CHILD
+  }];
+}
+
+export default function diff (opts) {
+  const src = opts.source;
+  const dst = opts.destination;
+
+  if (!src || !dst) {
+    return [];
+  }
+
+  let instructions = opts.root ? diffNode(src, dst) : [];
+
+  const srcChs = src.childNodes;
+  const dstChs = dst.childNodes;
+  const srcChsLen = srcChs ? srcChs.length : 0;
+  const dstChsLen = dstChs ? dstChs.length : 0;
+
+  for (let a = 0; a < dstChsLen; a++) {
+    const curSrc = srcChs[a];
+    const curDst = dstChs[a];
+
+    // If there is no matching destination node it means we need to remove the
+    // current source node from the source.
+    if (!curSrc) {
+      instructions.push({
+        destination: dstChs[a],
+        source: src,
+        type: types.APPEND_CHILD
+      });
+      continue;
+    } else {
+      // Ensure the real node is carried over even if the destination isn't used.
+      // This is used in the render() function to keep track of the real node
+      // that corresponds to a virtual node if a virtual tree is being used.
+      if (typeof curDst.__id === 'undefined') {
+        realNodeMap.set(curDst.__id, realNode(curSrc));
+      }
+    }
+
+    instructions = instructions.concat(diffNode(curSrc, curDst));
+  }
+
+  if (dstChsLen < srcChsLen) {
+    for (let a = dstChsLen; a < srcChsLen; a++) {
+      instructions.push({
+        destination: srcChs[a],
+        source: src,
+        type: types.REMOVE_CHILD
+      });
+    }
+  }
+
+  return instructions;
+}

src/diff-worker.js

@@ -0,0 +1,6 @@
+import diff from './diff-main';
+
+self.addEventListener('message', e => {
+  const instructions = diff(e.data);
+  self.postMessage(instructions);
+});

src/diff.js

@@ -1,77 +1,18 @@
-import * as types from './types';
-import compareNode from './compare/node';
-import realNode from './util/real-node';
-import realNodeMap from './util/real-node-map';
+import diffMain from './diff-main';
+import DiffWorker from 'worker-loader!./diff-worker';
 
 const { Node } = window;
 
-function diffNode (source, destination) {
-  let nodeInstructions = compareNode(source, destination);
-
-  // If there are instructions (even an empty array) it means the node can be
-  // diffed and doesn't have to be replaced. If the instructions are falsy
-  // it means that the nodes are not similar (cannot be changed) and must be
-  // replaced instead.
-  if (nodeInstructions) {
-    return nodeInstructions.concat(diff({ source, destination }));
-  }
-
-  return [{
-    destination,
-    source,
-    type: types.REPLACE_CHILD
-  }];
+function diffWorker (opts) {
+  const worker = new DiffWorker();
+  const { done } = opts;
+  worker.addEventListener('message', e => done(e.data));
+  delete opts.done;
+  worker.postMessage(opts);
 }
 
 export default function diff (opts = {}) {
-  const src = opts.source;
-  const dst = opts.destination;
-
-  if (!src || !dst) {
-    return [];
-  }
-
-  let instructions = opts.root ? diffNode(src, dst) : [];
-
-  const srcChs = src.childNodes;
-  const dstChs = dst.childNodes;
-  const srcChsLen = srcChs ? srcChs.length : 0;
-  const dstChsLen = dstChs ? dstChs.length : 0;
-
-  for (let a = 0; a < dstChsLen; a++) {
-    const curSrc = srcChs[a];
-    const curDst = dstChs[a];
-
-    // If there is no matching destination node it means we need to remove the
-    // current source node from the source.
-    if (!curSrc) {
-      instructions.push({
-        destination: dstChs[a],
-        source: src,
-        type: types.APPEND_CHILD
-      });
-      continue;
-    } else {
-      // Ensure the real node is carried over even if the destination isn't used.
-      // This is used in the render() function to keep track of the real node
-      // that corresponds to a virtual node if a virtual tree is being used.
-      if (!(curDst instanceof Node)) {
-        realNodeMap.set(curDst, realNode(curSrc));
-      }
-    }
-
-    instructions = instructions.concat(diffNode(curSrc, curDst));
-  }
-
-  if (dstChsLen < srcChsLen) {
-    for (let a = dstChsLen; a < srcChsLen; a++) {
-      instructions.push({
-        destination: srcChs[a],
-        source: src,
-        type: types.REMOVE_CHILD
-      });
-    }
-  }
-
-  return instructions;
+  const { source, destination, done } = opts;
+  const canDiffInWorker = done && !(source instanceof Node && destination instanceof Node);
+  return canDiffInWorker ? diffWorker(opts) : diffMain(opts);
 }

src/util/real-node-map.js

@@ -1,2 +1,11 @@
-import WeakMap from './weak-map';
-export default new WeakMap();
+// import WeakMap from './weak-map';
+// export default new WeakMap();
+const map = [];
+export default {
+  get (id) {
+    return map[id];
+  },
+  set (id, node) {
+    map[id] = node;
+  }
+};

src/util/real-node.js

@@ -1,7 +1,8 @@
 import realNodeMap from './real-node-map';
 
-const { Node } = window;
+const isWindow = typeof window !== 'undefined';
+const { Node } = isWindow ? window : self;
 
 export default function (node) {
-  return node instanceof Node ? node : realNodeMap.get(node);
+  return isWindow && node instanceof Node ? node : realNodeMap.get(node.__id);
 }

src/vdom/dom.js

@@ -56,6 +56,6 @@ export default function render (el) {
     return frag;
   }
   const realNode = el.tagName ? createElement(el) : createText(el);
-  realNodeMap.set(el, realNode);
+  realNodeMap.set(el.__id, realNode);
   return realNode;
 }

src/vdom/element.js

@@ -66,10 +66,12 @@ function translateFromReact (item) {
   return item;
 }
 
+let count = 0;
 export default function element (name, attrs = {}, ...chren) {
   const isAttrsNode = isChildren(attrs);
   const data = separateData(isAttrsNode ? {} : attrs);
   const node = data.node;
+  node.__id = ++count;
   node.nodeType = 1;
   node.tagName = ensureTagName(name);
   node.attributes = data.attrs;

test/unit.js

@@ -465,3 +465,22 @@ describe('render', function () {
     });
   });
 });
+
+describe('diff worker', function () {
+  it('should do work in a worker if opts.done is specified', done => {
+    const source = sd.vdom.element('div', null, 'text 1');
+    const destination = sd.vdom.element('div', null, 'text 2');
+    const realDom = sd.vdom.dom(source);
+
+    sd.diff({
+      destination,
+      source,
+      done (instructions) {
+        assert.ok(Array.isArray(instructions));
+        sd.patch(instructions);
+        assert.ok(realDom.textContent === 'text 2');
+        done();
+      }
+    });
+  });
+});