fix(benchmarks): hundred not rendering correctly due to vnode ref

benchmarks/benchmark.ts

@@ -1,9 +1,10 @@
 import Benchmark from 'benchmark';
 import { VNode } from 'million';
-import { h } from 'snabbdom';
-import VirtualDom_VNode from 'virtual-dom/vnode/vnode';
-import VirtualDom_VText from 'virtual-dom/vnode/vtext';
-import { el } from 'simple-virtual-dom';
+import * as hundred from 'hundred';
+import * as snabbdom from 'snabbdom';
+import virtual_dom_VNode from 'virtual-dom/vnode/vnode';
+import virtual_dom_VText from 'virtual-dom/vnode/vtext';
+import * as simple_virtual_dom from 'simple-virtual-dom';
 import _ from 'lodash';
 
 // avoid `Cannot read property 'parentNode' of undefined` error in runScript
@@ -28,19 +29,25 @@ export const Suite = (name: string, tests: Record<string, Function>) => {
 export const snabbdomAdapter = (vnode: VNode): any => {
   if (typeof vnode === 'string') return vnode;
   // @ts-ignore
-  return _.clone(h(vnode.tag, null, vnode.children.map(snabbdomAdapter)));
+  return _.clone(snabbdom.h(vnode.tag, null, vnode.children.map(snabbdomAdapter)));
 };
 
 export const virtualDomAdapter = (vnode: VNode): any => {
-  if (typeof vnode === 'string') return new VirtualDom_VText(vnode);
+  if (typeof vnode === 'string') return new virtual_dom_VText(vnode);
   // @ts-ignore
-  return _.clone(new VirtualDom_VNode(vnode.tag, {}, vnode.children.map(virtualDomAdapter)));
+  return _.clone(new virtual_dom_VNode(vnode.tag, {}, vnode.children.map(virtualDomAdapter)));
 };
 
 export const simpleVirtualDomAdapter = (vnode: VNode): any => {
   if (typeof vnode === 'string') return vnode;
   // @ts-ignore
-  return _.clone(el(vnode.tag, {}, vnode.children.map(simpleVirtualDomAdapter)));
+  return _.clone(simple_virtual_dom.el(vnode.tag, {}, vnode.children.map(simpleVirtualDomAdapter)));
+};
+
+export const hundredAdapter = (vnode: VNode): any => {
+  if (typeof vnode === 'string') return vnode;
+  // @ts-ignore
+  return _.clone(hundred.h(vnode.tag, {}, vnode.children.map(hundredAdapter)));
 };
 
 export default benchmark;

benchmarks/suites/appendManyRowsToLargeTable.tsx

@@ -9,7 +9,13 @@ import { createElement } from 'packages/million';
 import * as simple_virtual_dom from 'simple-virtual-dom';
 import * as snabbdom from 'snabbdom';
 import * as virtual_dom from 'virtual-dom';
-import { simpleVirtualDomAdapter, snabbdomAdapter, Suite, virtualDomAdapter } from '../benchmark';
+import {
+  hundredAdapter,
+  simpleVirtualDomAdapter,
+  snabbdomAdapter,
+  Suite,
+  virtualDomAdapter,
+} from '../benchmark';
 import { buildData, patch } from '../data';
 
 const data = buildData(10000);
@@ -33,7 +39,7 @@ const suite = Suite('append many rows to large table (appending 1,000 to a table
     patch(el(), vnode);
   },
   hundred: () => {
-    hundred.patch(el(), vnode, oldVNode);
+    hundred.patch(el(), hundredAdapter(vnode), hundredAdapter(oldVNode));
   },
   'simple-virtual-dom': () => {
     const patches = simple_virtual_dom.diff(

benchmarks/suites/clearRows.tsx

@@ -9,7 +9,13 @@ import { createElement } from 'packages/million';
 import * as simple_virtual_dom from 'simple-virtual-dom';
 import * as snabbdom from 'snabbdom';
 import * as virtual_dom from 'virtual-dom';
-import { simpleVirtualDomAdapter, snabbdomAdapter, Suite, virtualDomAdapter } from '../benchmark';
+import {
+  hundredAdapter,
+  simpleVirtualDomAdapter,
+  snabbdomAdapter,
+  Suite,
+  virtualDomAdapter,
+} from '../benchmark';
 import { buildData, patch } from '../data';
 
 const data = buildData(1000);
@@ -31,7 +37,7 @@ const suite = Suite('clear rows (clearing a table with 1,000 rows)', {
     patch(el(), vnode);
   },
   hundred: () => {
-    hundred.patch(el(), vnode, oldVNode);
+    hundred.patch(el(), hundredAdapter(vnode), hundredAdapter(oldVNode));
   },
   'simple-virtual-dom': () => {
     const patches = simple_virtual_dom.diff(

benchmarks/suites/createManyRows.tsx

@@ -9,7 +9,13 @@ import { createElement } from 'packages/million';
 import * as simple_virtual_dom from 'simple-virtual-dom';
 import * as snabbdom from 'snabbdom';
 import * as virtual_dom from 'virtual-dom';
-import { simpleVirtualDomAdapter, snabbdomAdapter, Suite, virtualDomAdapter } from '../benchmark';
+import {
+  hundredAdapter,
+  simpleVirtualDomAdapter,
+  snabbdomAdapter,
+  Suite,
+  virtualDomAdapter,
+} from '../benchmark';
 import { buildData, patch } from '../data';
 
 const data = buildData(10000);
@@ -31,7 +37,7 @@ const suite = Suite('create many rows (creating 10,000 rows)', {
     patch(el(), vnode);
   },
   hundred: () => {
-    hundred.patch(el(), vnode, oldVNode);
+    hundred.patch(el(), hundredAdapter(vnode), hundredAdapter(oldVNode));
   },
   'simple-virtual-dom': () => {
     const patches = simple_virtual_dom.diff(

benchmarks/suites/createRows.tsx

@@ -9,7 +9,13 @@ import { createElement } from 'packages/million';
 import * as simple_virtual_dom from 'simple-virtual-dom';
 import * as snabbdom from 'snabbdom';
 import * as virtual_dom from 'virtual-dom';
-import { simpleVirtualDomAdapter, snabbdomAdapter, Suite, virtualDomAdapter } from '../benchmark';
+import {
+  hundredAdapter,
+  simpleVirtualDomAdapter,
+  snabbdomAdapter,
+  Suite,
+  virtualDomAdapter,
+} from '../benchmark';
 import { buildData, patch } from '../data';
 
 const data = buildData(10000);
@@ -31,7 +37,7 @@ const suite = Suite('create rows (creating 1,000 rows)', {
     patch(el(), vnode);
   },
   hundred: () => {
-    hundred.patch(el(), vnode, oldVNode);
+    hundred.patch(el(), hundredAdapter(vnode), hundredAdapter(oldVNode));
   },
   'simple-virtual-dom': () => {
     const patches = simple_virtual_dom.diff(

benchmarks/suites/partialUpdate.tsx

@@ -9,7 +9,13 @@ import { createElement } from 'packages/million';
 import * as simple_virtual_dom from 'simple-virtual-dom';
 import * as snabbdom from 'snabbdom';
 import * as virtual_dom from 'virtual-dom';
-import { simpleVirtualDomAdapter, snabbdomAdapter, Suite, virtualDomAdapter } from '../benchmark';
+import {
+  hundredAdapter,
+  simpleVirtualDomAdapter,
+  snabbdomAdapter,
+  Suite,
+  virtualDomAdapter,
+} from '../benchmark';
 import { buildData, patch } from '../data';
 
 const data = buildData(1000);
@@ -40,7 +46,7 @@ const suite = Suite('partial update (updating every 10th row for 1,000 rows)', {
     patch(el(), vnode);
   },
   hundred: () => {
-    hundred.patch(el(), vnode, oldVNode);
+    hundred.patch(el(), hundredAdapter(vnode), hundredAdapter(oldVNode));
   },
   'simple-virtual-dom': () => {
     const patches = simple_virtual_dom.diff(

benchmarks/suites/removeRow.tsx

@@ -9,7 +9,13 @@ import { createElement, Deltas } from 'packages/million';
 import * as simple_virtual_dom from 'simple-virtual-dom';
 import * as snabbdom from 'snabbdom';
 import * as virtual_dom from 'virtual-dom';
-import { simpleVirtualDomAdapter, snabbdomAdapter, Suite, virtualDomAdapter } from '../benchmark';
+import {
+  hundredAdapter,
+  simpleVirtualDomAdapter,
+  snabbdomAdapter,
+  Suite,
+  virtualDomAdapter,
+} from '../benchmark';
 import { buildData, patch } from '../data';
 
 const data = buildData(1000);
@@ -43,7 +49,7 @@ const suite = Suite('remove row (removing one row)', {
     patch(el(), vnode);
   },
   hundred: () => {
-    hundred.patch(el(), vnode, oldVNode);
+    hundred.patch(el(), hundredAdapter(vnode), hundredAdapter(oldVNode));
   },
   'simple-virtual-dom': () => {
     const patches = simple_virtual_dom.diff(

benchmarks/suites/replaceAllRows.tsx

@@ -9,7 +9,13 @@ import { createElement } from 'packages/million';
 import * as simple_virtual_dom from 'simple-virtual-dom';
 import * as snabbdom from 'snabbdom';
 import * as virtual_dom from 'virtual-dom';
-import { simpleVirtualDomAdapter, snabbdomAdapter, Suite, virtualDomAdapter } from '../benchmark';
+import {
+  hundredAdapter,
+  simpleVirtualDomAdapter,
+  snabbdomAdapter,
+  Suite,
+  virtualDomAdapter,
+} from '../benchmark';
 import { buildData, patch } from '../data';
 
 const shuffleArray = (array: unknown[]) => {
@@ -46,7 +52,7 @@ const suite = Suite('replace all rows (updating all 1,000 rows)', {
     patch(el(), vnode);
   },
   hundred: () => {
-    hundred.patch(el(), vnode, oldVNode);
+    hundred.patch(el(), hundredAdapter(vnode), hundredAdapter(oldVNode));
   },
   'simple-virtual-dom': () => {
     const patches = simple_virtual_dom.diff(

benchmarks/suites/selectRow.tsx

@@ -9,7 +9,13 @@ import { createElement } from 'packages/million';
 import * as simple_virtual_dom from 'simple-virtual-dom';
 import * as snabbdom from 'snabbdom';
 import * as virtual_dom from 'virtual-dom';
-import { simpleVirtualDomAdapter, snabbdomAdapter, Suite, virtualDomAdapter } from '../benchmark';
+import {
+  hundredAdapter,
+  simpleVirtualDomAdapter,
+  snabbdomAdapter,
+  Suite,
+  virtualDomAdapter,
+} from '../benchmark';
 import { buildData, patch } from '../data';
 
 const data = buildData(1000);
@@ -33,7 +39,7 @@ const suite = Suite('select row (highlighting a selected row)', {
     patch(el(), vnode);
   },
   hundred: () => {
-    hundred.patch(el(), vnode, oldVNode);
+    hundred.patch(el(), hundredAdapter(vnode), hundredAdapter(oldVNode));
   },
   'simple-virtual-dom': () => {
     const patches = simple_virtual_dom.diff(

benchmarks/suites/swapRows.tsx

@@ -9,7 +9,13 @@ import { createElement, Deltas } from 'packages/million';
 import * as simple_virtual_dom from 'simple-virtual-dom';
 import * as snabbdom from 'snabbdom';
 import * as virtual_dom from 'virtual-dom';
-import { simpleVirtualDomAdapter, snabbdomAdapter, Suite, virtualDomAdapter } from '../benchmark';
+import {
+  hundredAdapter,
+  simpleVirtualDomAdapter,
+  snabbdomAdapter,
+  Suite,
+  virtualDomAdapter,
+} from '../benchmark';
 import { buildData, patch } from '../data';
 
 const data = buildData(1000);
@@ -47,7 +53,7 @@ const suite = Suite('swap rows (swap 2 rows for table with 1,000 rows)', {
     patch(el(), vnode);
   },
   hundred: () => {
-    hundred.patch(el(), vnode, oldVNode);
+    hundred.patch(el(), hundredAdapter(vnode), hundredAdapter(oldVNode));
   },
   'simple-virtual-dom': () => {
     const patches = simple_virtual_dom.diff(