fix(benchmarks): use correct usage of snabbdom API

aidenybai · Oct 11, 2021 · b2421d6 · b2421d6
1 parent 3fbb4cf
commit b2421d6
Show file tree

Hide file tree

Showing 11 changed files with 71 additions and 59 deletions.
diff --git a/benchmarks/benchmark.mjs b/benchmarks/benchmark.mjs
@@ -29,7 +29,12 @@ export const removeKeys = (vnode) => {
   }
 };
 
-export const clone = (vnode) => {
+// Virtual DOM libraries like snabbdom, virtual-dom will
+// mutate the vnode, even though the vnode must be
+// immutable for the benchmark. For this case, we deep
+// copy the vnode. This ensures compatibility throughout
+// the suite tests.
+export const vnodeAdapter = (vnode) => {
   const clonedVNode = _.cloneDeep(vnode);
   removeKeys(clonedVNode);
   return clonedVNode;

diff --git a/benchmarks/suites/appendManyRowsToLargeTable.jsx b/benchmarks/suites/appendManyRowsToLargeTable.jsx
@@ -3,13 +3,14 @@
  * @description appending 1,000 to a table of 10,000 rows.
  */
 
-import { createElement, patch } from '../../src/index';
-import { Suite, clone } from '../benchmark';
+import { createElement, compose, childrenDriver } from '../../src/index';
+import { Suite, vnodeAdapter } from '../benchmark';
 import { buildData } from '../data';
 import * as tiny_vdom from '../tiny-vdom';
 import * as virtual_dom from 'virtual-dom';
 import * as snabbdom from 'snabbdom';
 
+const patch = compose([childrenDriver]);
 const data = buildData(10000);
 const createVNode = () => (
   <table>
@@ -31,15 +32,15 @@ const suite = Suite('append many rows to large table (appending 1,000 to a table
     patch(el(), vnode);
   },
   'tiny-vdom': () => {
-    tiny_vdom.patch(el(), clone(vnode), clone(oldVNode));
+    tiny_vdom.patch(el(), vnodeAdapter(vnode), vnodeAdapter(oldVNode));
   },
   'virtual-dom': () => {
-    const patches = virtual_dom.diff(clone(oldVNode), clone(vnode));
+    const patches = virtual_dom.diff(vnodeAdapter(oldVNode), vnodeAdapter(vnode));
     virtual_dom.patch(el(), patches);
   },
   snabbdom: () => {
-    const patch = snabbdom.init([snabbdom.propsModule]);
-    patch(el(), clone(vnode));
+    const patch = snabbdom.init([]);
+    patch(snabbdom.toVNode(el()), vnodeAdapter(vnode));
   },
   DOM: () => {
     const elClone = el();

diff --git a/benchmarks/suites/clearRows.jsx b/benchmarks/suites/clearRows.jsx
@@ -3,13 +3,14 @@
  * @description clearing a table with 1,000 rows
  */
 
-import { createElement, patch } from '../../src/index';
-import { Suite, clone } from '../benchmark';
+import { createElement, compose, childrenDriver } from '../../src/index';
+import { Suite, vnodeAdapter } from '../benchmark';
 import { buildData } from '../data';
 import * as tiny_vdom from '../tiny-vdom';
 import * as virtual_dom from 'virtual-dom';
 import * as snabbdom from 'snabbdom';
 
+const patch = compose([childrenDriver]);
 const data = buildData(1000);
 const oldVNode = (
   <table>
@@ -29,15 +30,15 @@ const suite = Suite('clear rows (clearing a table with 1,000 rows)', {
     patch(el(), vnode);
   },
   'tiny-vdom': () => {
-    tiny_vdom.patch(el(), clone(vnode), clone(oldVNode));
+    tiny_vdom.patch(el(), vnodeAdapter(vnode), vnodeAdapter(oldVNode));
   },
   'virtual-dom': () => {
-    const patches = virtual_dom.diff(clone(oldVNode), clone(vnode));
+    const patches = virtual_dom.diff(vnodeAdapter(oldVNode), vnodeAdapter(vnode));
     virtual_dom.patch(el(), patches);
   },
   snabbdom: () => {
-    const patch = snabbdom.init([snabbdom.propsModule]);
-    patch(el(), clone(vnode));
+    const patch = snabbdom.init([]);
+    patch(snabbdom.toVNode(el()), vnodeAdapter(vnode));
   },
   DOM: () => {
     const elClone = el();

diff --git a/benchmarks/suites/createManyRows.jsx b/benchmarks/suites/createManyRows.jsx
@@ -3,13 +3,14 @@
  * @description creating 10,000 rows
  */
 
-import { createElement, patch } from '../../src/index';
-import { Suite, clone } from '../benchmark';
+import { createElement, compose, childrenDriver } from '../../src/index';
+import { Suite, vnodeAdapter } from '../benchmark';
 import { buildData } from '../data';
 import * as tiny_vdom from '../tiny-vdom';
 import * as virtual_dom from 'virtual-dom';
 import * as snabbdom from 'snabbdom';
 
+const patch = compose([childrenDriver]);
 const data = buildData(10000);
 const oldVNode = <table></table>;
 const el = () => createElement(oldVNode);
@@ -29,15 +30,15 @@ const suite = Suite('create many rows (creating 10,000 rows)', {
     patch(el(), vnode);
   },
   'tiny-vdom': () => {
-    tiny_vdom.patch(el(), clone(vnode), clone(oldVNode));
+    tiny_vdom.patch(el(), vnodeAdapter(vnode), vnodeAdapter(oldVNode));
   },
   'virtual-dom': () => {
-    const patches = virtual_dom.diff(clone(oldVNode), clone(vnode));
+    const patches = virtual_dom.diff(vnodeAdapter(oldVNode), vnodeAdapter(vnode));
     virtual_dom.patch(el(), patches);
   },
   snabbdom: () => {
-    const patch = snabbdom.init([snabbdom.propsModule]);
-    patch(el(), clone(vnode));
+    const patch = snabbdom.init([]);
+    patch(snabbdom.toVNode(el()), vnodeAdapter(vnode));
   },
   DOM: () => {
     const elClone = el();

diff --git a/benchmarks/suites/createRows.jsx b/benchmarks/suites/createRows.jsx
@@ -3,13 +3,14 @@
  * @description creating 1,000 rows
  */
 
-import { createElement, patch } from '../../src/index';
-import { Suite, clone } from '../benchmark';
+import { createElement, compose, childrenDriver } from '../../src/index';
+import { Suite, vnodeAdapter } from '../benchmark';
 import { buildData } from '../data';
 import * as tiny_vdom from '../tiny-vdom';
 import * as virtual_dom from 'virtual-dom';
 import * as snabbdom from 'snabbdom';
 
+const patch = compose([childrenDriver]);
 const data = buildData(10000);
 const oldVNode = <table></table>;
 const el = () => createElement(oldVNode);
@@ -29,15 +30,15 @@ const suite = Suite('create rows (creating 1,000 rows)', {
     patch(el(), vnode);
   },
   'tiny-vdom': () => {
-    tiny_vdom.patch(el(), clone(vnode), clone(oldVNode));
+    tiny_vdom.patch(el(), vnodeAdapter(vnode), vnodeAdapter(oldVNode));
   },
   'virtual-dom': () => {
-    const patches = virtual_dom.diff(clone(oldVNode), clone(vnode));
+    const patches = virtual_dom.diff(vnodeAdapter(oldVNode), vnodeAdapter(vnode));
     virtual_dom.patch(el(), patches);
   },
   snabbdom: () => {
-    const patch = snabbdom.init([snabbdom.propsModule]);
-    patch(el(), clone(vnode));
+    const patch = snabbdom.init([]);
+    patch(snabbdom.toVNode(el()), vnodeAdapter(vnode));
   },
   DOM: () => {
     const elClone = el();

diff --git a/benchmarks/suites/partialUpdate.jsx b/benchmarks/suites/partialUpdate.jsx
@@ -3,13 +3,14 @@
  * @description updating every 10th row for 1,000 rows
  */
 
-import { createElement, patch, UPDATE } from '../../src/index';
-import { Suite, clone } from '../benchmark';
+import { createElement, compose, childrenDriver, UPDATE } from '../../src/index';
+import { Suite, vnodeAdapter } from '../benchmark';
 import { buildData } from '../data';
 import * as tiny_vdom from '../tiny-vdom';
 import * as virtual_dom from 'virtual-dom';
 import * as snabbdom from 'snabbdom';
 
+const patch = compose([childrenDriver]);
 const data = buildData(1000);
 const oldVNode = (
   <table>
@@ -44,15 +45,15 @@ const suite = Suite('partial update (updating every 10th row for 1,000 rows)', {
     patch(el(), vnode);
   },
   'tiny-vdom': () => {
-    tiny_vdom.patch(el(), clone(vnode), clone(oldVNode));
+    tiny_vdom.patch(el(), vnodeAdapter(vnode), vnodeAdapter(oldVNode));
   },
   'virtual-dom': () => {
-    const patches = virtual_dom.diff(clone(oldVNode), clone(vnode));
+    const patches = virtual_dom.diff(vnodeAdapter(oldVNode), vnodeAdapter(vnode));
     virtual_dom.patch(el(), patches);
   },
   snabbdom: () => {
-    const patch = snabbdom.init([snabbdom.propsModule]);
-    patch(el(), clone(vnode));
+    const patch = snabbdom.init([]);
+    patch(snabbdom.toVNode(el()), vnodeAdapter(vnode));
   },
   DOM: () => {
     const elClone = el();

diff --git a/benchmarks/suites/removeRow.jsx b/benchmarks/suites/removeRow.jsx
@@ -3,13 +3,14 @@
  * @description removing one row
  */
 
-import { createElement, DELETE, patch } from '../../src/index';
-import { Suite, clone } from '../benchmark';
+import { createElement, DELETE, compose, childrenDriver } from '../../src/index';
+import { Suite, vnodeAdapter } from '../benchmark';
 import { buildData } from '../data';
 import * as tiny_vdom from '../tiny-vdom';
 import * as virtual_dom from 'virtual-dom';
 import * as snabbdom from 'snabbdom';
 
+const patch = compose([childrenDriver]);
 const data = buildData(1000);
 const oldVNode = (
   <table>
@@ -41,15 +42,15 @@ const suite = Suite('remove row (removing one row)', {
     patch(el(), vnode);
   },
   'tiny-vdom': () => {
-    tiny_vdom.patch(el(), clone(vnode), clone(oldVNode));
+    tiny_vdom.patch(el(), vnodeAdapter(vnode), vnodeAdapter(oldVNode));
   },
   'virtual-dom': () => {
-    const patches = virtual_dom.diff(clone(oldVNode), clone(vnode));
+    const patches = virtual_dom.diff(vnodeAdapter(oldVNode), vnodeAdapter(vnode));
     virtual_dom.patch(el(), patches);
   },
   snabbdom: () => {
-    const patch = snabbdom.init([snabbdom.propsModule]);
-    patch(el(), clone(vnode));
+    const patch = snabbdom.init([]);
+    patch(snabbdom.toVNode(el()), vnodeAdapter(vnode));
   },
   DOM: () => {
     const elClone = el();

diff --git a/benchmarks/suites/replaceAllRows.jsx b/benchmarks/suites/replaceAllRows.jsx
@@ -3,13 +3,14 @@
  * @description updating all 1,000 rows
  */
 
-import { createElement, patch } from '../../src/index';
-import { Suite, clone } from '../benchmark';
+import { createElement, compose, childrenDriver } from '../../src/index';
+import { Suite, vnodeAdapter } from '../benchmark';
 import { buildData } from '../data';
 import * as tiny_vdom from '../tiny-vdom';
 import * as virtual_dom from 'virtual-dom';
 import * as snabbdom from 'snabbdom';
 
+const patch = compose([childrenDriver]);
 const shuffleArray = (array) => {
   for (
     let i = array.length - 1 - Math.floor(Math.random() * (data.length / 3 + 1));
@@ -44,15 +45,15 @@ const suite = Suite('replace all rows (updating all 1,000 rows)', {
     patch(el(), vnode);
   },
   'tiny-vdom': () => {
-    tiny_vdom.patch(el(), clone(vnode), clone(oldVNode));
+    tiny_vdom.patch(el(), vnodeAdapter(vnode), vnodeAdapter(oldVNode));
   },
   'virtual-dom': () => {
-    const patches = virtual_dom.diff(clone(oldVNode), clone(vnode));
+    const patches = virtual_dom.diff(vnodeAdapter(oldVNode), vnodeAdapter(vnode));
     virtual_dom.patch(el(), patches);
   },
   snabbdom: () => {
-    const patch = snabbdom.init([snabbdom.propsModule]);
-    patch(el(), clone(vnode));
+    const patch = snabbdom.init([]);
+    patch(snabbdom.toVNode(el()), vnodeAdapter(vnode));
   },
   DOM: () => {
     el().childNodes.forEach((tr, i) => {

diff --git a/benchmarks/suites/selectRow.jsx b/benchmarks/suites/selectRow.jsx
@@ -3,13 +3,14 @@
  * @description highlighting a selected row
  */
 
-import { createElement, patch } from '../../src/index';
-import { Suite, clone } from '../benchmark';
+import { createElement, compose, childrenDriver } from '../../src/index';
+import { Suite, vnodeAdapter } from '../benchmark';
 import { buildData } from '../data';
 import * as tiny_vdom from '../tiny-vdom';
 import * as virtual_dom from 'virtual-dom';
 import * as snabbdom from 'snabbdom';
 
+const patch = compose([childrenDriver]);
 const data = buildData(1000);
 const createVNode = () => (
   <table>
@@ -31,15 +32,15 @@ const suite = Suite('select row (highlighting a selected row)', {
     patch(el(), vnode);
   },
   'tiny-vdom': () => {
-    tiny_vdom.patch(el(), clone(vnode), clone(oldVNode));
+    tiny_vdom.patch(el(), vnodeAdapter(vnode), vnodeAdapter(oldVNode));
   },
   'virtual-dom': () => {
-    const patches = virtual_dom.diff(clone(oldVNode), clone(vnode));
+    const patches = virtual_dom.diff(vnodeAdapter(oldVNode), vnodeAdapter(vnode));
     virtual_dom.patch(el(), patches);
   },
   snabbdom: () => {
-    const patch = snabbdom.init([snabbdom.propsModule]);
-    patch(el(), clone(vnode));
+    const patch = snabbdom.init([]);
+    patch(snabbdom.toVNode(el()), vnodeAdapter(vnode));
   },
   DOM: () => {
     el().childNodes[row].style.background = 'red';

diff --git a/benchmarks/suites/swapRows.jsx b/benchmarks/suites/swapRows.jsx
@@ -3,13 +3,14 @@
  * @description swap 2 rows for table with 1,000 rows
  */
 
-import { createElement, patch, UPDATE } from '../../src/index';
-import { Suite, clone } from '../benchmark';
+import { createElement, compose, childrenDriver, UPDATE } from '../../src/index';
+import { Suite, vnodeAdapter } from '../benchmark';
 import { buildData } from '../data';
 import * as tiny_vdom from '../tiny-vdom';
 import * as virtual_dom from 'virtual-dom';
 import * as snabbdom from 'snabbdom';
 
+const patch = compose([childrenDriver]);
 const data = buildData(1000);
 const oldVNode = (
   <table>
@@ -45,15 +46,15 @@ const suite = Suite('swap rows (swap 2 rows for table with 1,000 rows)', {
     patch(el(), vnode);
   },
   'tiny-vdom': () => {
-    tiny_vdom.patch(el(), clone(vnode), clone(oldVNode));
+    tiny_vdom.patch(el(), vnodeAdapter(vnode), vnodeAdapter(oldVNode));
   },
   'virtual-dom': () => {
-    const patches = virtual_dom.diff(clone(oldVNode), clone(vnode));
+    const patches = virtual_dom.diff(vnodeAdapter(oldVNode), vnodeAdapter(vnode));
     virtual_dom.patch(el(), patches);
   },
   snabbdom: () => {
-    const patch = snabbdom.init([snabbdom.propsModule]);
-    patch(el(), clone(vnode));
+    const patch = snabbdom.init([]);
+    patch(snabbdom.toVNode(el()), vnodeAdapter(vnode));
   },
   DOM: () => {
     const elClone = el();

diff --git a/src/patch.ts b/src/patch.ts
@@ -11,9 +11,7 @@ export const flushWorkStack = (
   workStack: VTask[],
   commit: VCommit = (task: VTask): void => task(),
 ): void => {
-  for (let i = 0; i < workStack.length; ++i) {
-    commit(workStack[i]);
-  }
+  for (let i = 0; i < workStack.length; ++i) commit(workStack[i]);
 };
 
 /**
@@ -76,4 +74,4 @@ export const compose =
 /**
  * Diffs two VNodes and modifies the DOM node based on the necessary changes
  */
-export const patch = compose([propsDriver, childrenDriver]);
+export const patch = compose([childrenDriver, propsDriver]);