${[
+ render(TDfirst, i)`
|
${db.dbname}
- |
+ `,
+ render(TDsecond, i)`
${db.lastSample.nbQueries}
- | `.concat(db.lastSample.topFiveQueries.map((query, j, a) =>
- render(Top5, a.length * i + j)`
+ `
+ ].concat(db.lastSample.topFiveQueries.map((query, j, a) =>
+ render(TDothers, a.length * i + j)`
${query.formatElapsed}
@@ -54,6 +58,15 @@
updateTable(ENV.generateData().toArray());
+ if (!window.perfMonitor) {
+ perfMonitor = {
+ endProfile: function () {},
+ initProfiler: function () {},
+ startFPSMonitor: function () {},
+ startMemMonitor: function () {},
+ startProfile: function () {}
+ };
+ }
perfMonitor.startFPSMonitor();
perfMonitor.startMemMonitor();
// perfMonitor.initProfiler('data update');
diff --git a/test/diff.html b/test/diff.html
new file mode 100644
index 00000000..f1956f3d
--- /dev/null
+++ b/test/diff.html
@@ -0,0 +1,95 @@
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/test/dom-splicer.js b/test/dom-splicer.js
new file mode 100644
index 00000000..a258449e
--- /dev/null
+++ b/test/dom-splicer.js
@@ -0,0 +1,90 @@
+var splicer = new DOMSplicer({
+ target: document.documentElement
+});
+
+var a = document.createTextNode('a');
+var b = document.createTextNode('b');
+var c = document.createTextNode('c');
+var d = document.createTextNode('d');
+var e = document.createTextNode('e');
+var f = document.createTextNode('f');
+var g = document.createTextNode('g');
+var h = document.createTextNode('h');
+var i = document.createTextNode('i');
+
+console.time();
+splicer.splice(0, 0, a, b, c, d, e);
+console.timeEnd();
+verify(splicer);
+
+console.time();
+splicer.splice(2, 1, g);
+console.timeEnd();
+verify(splicer);
+
+splicer = new DOMSplicer({
+ target: document.createElement('div'),
+ childNodes: []
+});
+
+console.time();
+splicer.splice(0, 0, a, b, c, d, e);
+console.timeEnd();
+verify(splicer);
+
+console.time();
+splicer.splice(2, 1, g);
+console.timeEnd();
+verify(splicer);
+
+console.time();
+splicer.splice();
+console.timeEnd();
+verify(splicer);
+
+console.time();
+splicer.splice(1, 1);
+console.timeEnd();
+verify(splicer);
+
+console.time();
+splicer.splice(10);
+console.timeEnd();
+verify(splicer);
+
+console.time();
+splicer.splice(-1);
+console.timeEnd();
+verify(splicer);
+
+const fragment = document.createDocumentFragment();
+fragment.appendChild(document.createComment('placeholder'));
+splicer = new DOMSplicer({
+ before: fragment.childNodes[0]
+});
+splicer.splice(0, 0, a, b, c, d, e);
+
+splicer = new DOMSplicer({
+ target: fragment,
+ childNodes: {length: 0}
+});
+splicer.splice(0, 100);
+
+function verify(splicer) {
+ console.assert(
+ [].slice.call(splicer.childNodes).every(
+ function (node, i) {
+ return splicer.target.childNodes[i] === node;
+ }
+ ),
+ 'splicer.childNodes same as splicer.target.childNodes'
+ );
+ console.assert(
+ [].slice.call(splicer.target.childNodes).every(
+ function (node, i) {
+ return splicer.childNodes[i] === node;
+ }
+ ),
+ 'splicer.target.childNodes same as splicer.childNodes'
+ );
+}
\ No newline at end of file
diff --git a/test/domdiff.js b/test/domdiff.js
new file mode 100644
index 00000000..975142fa
--- /dev/null
+++ b/test/domdiff.js
@@ -0,0 +1,1218 @@
+var domdiff = hyperHTML.diff;
+
+var assert = tressa.assert;
+var clean = function () {
+ for (var cn = document.body.childNodes, i = cn.length; i--;) {
+ document.body.removeChild(cn[i]);
+ }
+};
+var compare = function (state, value) {
+ assert(
+ state.length === value.length &&
+ value.split('').every(function (v, i) {
+ return state[i] === nodes[v];
+ }),
+ value || '[empy]'
+ );
+};
+
+var notNull = function (any) { return any != null; };
+
+tressa.title('domdiff');
+
+assert(typeof domdiff === 'function', 'is a function');
+
+var nodes = {
+ 'a': document.createTextNode('a'),
+ 'b': document.createTextNode('b'),
+ 'c': document.createTextNode('c'),
+ 'd': document.createTextNode('d'),
+ 'e': document.createTextNode('e'),
+ 'f': document.createTextNode('f'),
+ 'g': document.createTextNode('g'),
+ 'h': document.createTextNode('h'),
+ 'i': document.createTextNode('i'),
+ 'j': document.createTextNode('j'),
+ 'k': document.createTextNode('k')
+};
+
+clean();
+
+var options = {before: document.createTextNode('-')};
+var futureState = domdiff(
+ document.body,
+ [],
+ [nodes.b, nodes.c, nodes.d]
+);
+compare(futureState, 'bcd');
+
+// same list, no changes
+futureState = domdiff(
+ document.body,
+ futureState,
+ [nodes.b, nodes.c, nodes.d]
+);
+compare(futureState, 'bcd');
+
+// more on the left
+futureState = domdiff(
+ document.body,
+ futureState,
+ [nodes.a, nodes.b, nodes.c, nodes.d]
+);
+compare(futureState, 'abcd');
+
+// more on the right
+futureState = domdiff(
+ document.body,
+ futureState,
+ [nodes.a, nodes.b, nodes.c, nodes.d, nodes.e, nodes.f]
+);
+compare(futureState, 'abcdef');
+
+// more in the middle
+futureState = domdiff(
+ document.body,
+ futureState,
+ [nodes.a, nodes.b, nodes.c, nodes.g, nodes.h, nodes.i, nodes.d, nodes.e, nodes.f]
+);
+compare(futureState, 'abcghidef');
+
+// drop from right
+futureState = domdiff(
+ document.body,
+ futureState,
+ [nodes.a, nodes.b, nodes.c, nodes.g, nodes.h, nodes.i, nodes.d, nodes.e]
+);
+compare(futureState, 'abcghide');
+
+// drop from left
+futureState = domdiff(
+ document.body,
+ futureState,
+ [nodes.c, nodes.g, nodes.h, nodes.i, nodes.d, nodes.e]
+);
+compare(futureState, 'cghide');
+
+// drop in between
+futureState = domdiff(
+ document.body,
+ futureState,
+ [nodes.c, nodes.g, nodes.d, nodes.e]
+);
+compare(futureState, 'cgde');
+
+// drop all nodes
+futureState = domdiff(
+ document.body,
+ futureState,
+ []
+);
+compare(futureState, '');
+
+domdiff(
+ document.body,
+ futureState,
+ [options.before]
+);
+
+futureState = domdiff(
+ document.body,
+ futureState,
+ [nodes.b, nodes.c, nodes.d],
+ options
+);
+compare(futureState, 'bcd');
+
+// same list, no changes with before
+futureState = domdiff(
+ document.body,
+ futureState,
+ [nodes.b, nodes.c, nodes.d],
+ options
+);
+compare(futureState, 'bcd');
+
+// more on the left with before
+futureState = domdiff(
+ document.body,
+ futureState,
+ [nodes.a, nodes.b, nodes.c, nodes.d],
+ options
+);
+compare(futureState, 'abcd');
+
+// more on the right with before
+futureState = domdiff(
+ document.body,
+ futureState,
+ [nodes.a, nodes.b, nodes.c, nodes.d, nodes.e, nodes.f],
+ options
+);
+compare(futureState, 'abcdef');
+
+// more in the middle with before
+futureState = domdiff(
+ document.body,
+ futureState,
+ [nodes.a, nodes.b, nodes.c, nodes.g, nodes.h, nodes.i, nodes.d, nodes.e, nodes.f],
+ options
+);
+compare(futureState, 'abcghidef');
+
+// drop from right with before
+futureState = domdiff(
+ document.body,
+ futureState,
+ [nodes.a, nodes.b, nodes.c, nodes.g, nodes.h, nodes.i, nodes.d, nodes.e],
+ options
+);
+compare(futureState, 'abcghide');
+
+// drop from left with before
+futureState = domdiff(
+ document.body,
+ futureState,
+ [nodes.c, nodes.g, nodes.h, nodes.i, nodes.d, nodes.e],
+ options
+);
+compare(futureState, 'cghide');
+
+// drop in between with before
+futureState = domdiff(
+ document.body,
+ futureState,
+ [nodes.c, nodes.g, nodes.d, nodes.e],
+ options
+);
+compare(futureState, 'cgde');
+
+
+// drop one in between with before
+futureState = domdiff(
+ document.body,
+ futureState,
+ [nodes.c, nodes.g, nodes.e],
+ options
+);
+compare(futureState, 'cge');
+
+// drop all nodes with before
+futureState = domdiff(
+ document.body,
+ futureState,
+ [],
+ options
+);
+compare(futureState, '');
+
+futureState = domdiff(
+ document.body,
+ futureState,
+ [nodes.a, nodes.b, nodes.c, nodes.d, nodes.e, nodes.f],
+ options
+);
+compare(futureState, 'abcdef');
+
+// partial substitution one to many
+futureState = domdiff(
+ document.body,
+ futureState,
+ [nodes.a, nodes.b, nodes.g, nodes.i, nodes.d, nodes.e, nodes.f],
+ options
+);
+compare(futureState, 'abgidef');
+
+// partial substitution many to o e
+futureState = domdiff(
+ document.body,
+ futureState,
+ [nodes.a, nodes.b, nodes.c, nodes.d, nodes.e, nodes.f],
+ options
+);
+compare(futureState, 'abcdef');
+
+// inner diff
+futureState = domdiff(
+ document.body,
+ futureState,
+ [nodes.j, nodes.g, nodes.a, nodes.b, nodes.c, nodes.d, nodes.e, nodes.f, nodes.h, nodes.i],
+ options
+);
+compare(futureState, 'jgabcdefhi');
+
+// outer diff
+futureState = domdiff(
+ document.body,
+ futureState,
+ [nodes.a, nodes.b, nodes.c, nodes.d, nodes.e, nodes.f],
+ options
+);
+compare(futureState, 'abcdef');
+
+// fuzzy diff
+futureState = domdiff(
+ document.body,
+ futureState,
+ [nodes.a, nodes.g, nodes.c, nodes.d, nodes.h, nodes.i],
+ options
+);
+compare(futureState, 'agcdhi');
+
+// fuzzy diff
+futureState = domdiff(
+ document.body,
+ futureState,
+ [nodes.i, nodes.g, nodes.a, nodes.d, nodes.h, nodes.c],
+ options
+);
+compare(futureState, 'igadhc');
+
+// reversed diff
+futureState = domdiff(
+ document.body,
+ futureState,
+ [nodes.c, nodes.h, nodes.d, nodes.a, nodes.g, nodes.i],
+ options
+);
+compare(futureState, 'chdagi');
+
+clean();
+
+var newState = domdiff(
+ document.body,
+ [],
+ [nodes.d, nodes.f, nodes.g]
+);
+compare(newState, 'dfg');
+
+newState = domdiff(
+ document.body,
+ newState,
+ [nodes.a, nodes.b, nodes.c].concat(newState)
+);
+compare(newState, 'abcdfg');
+
+newState = domdiff(
+ document.body,
+ newState,
+ [
+ nodes.a, nodes.b, nodes.c,
+ nodes.d, nodes.e, nodes.f,
+ nodes.g
+ ]
+);
+compare(newState, 'abcdefg');
+
+newState = domdiff(
+ document.body,
+ newState,
+ newState.slice().reverse()
+);
+compare(newState, 'gfedcba');
+
+newState = domdiff(
+ document.body,
+ newState,
+ [
+ nodes.f, nodes.d, nodes.b,
+ nodes.a, nodes.e, nodes.g
+ ]
+);
+compare(newState, 'fdbaeg');
+
+newState = domdiff(
+ document.body,
+ newState,
+ [
+ nodes.a, nodes.b, nodes.c,
+ nodes.d, nodes.e, nodes.f
+ ]
+);
+compare(newState, 'abcdef');
+
+newState = domdiff(
+ document.body,
+ newState,
+ [
+ nodes.a, nodes.b, nodes.c,
+ nodes.d, nodes.e, nodes.f,
+ nodes.h, nodes.i, nodes.j
+ ]
+);
+compare(newState, 'abcdefhij');
+
+newState = domdiff(
+ document.body,
+ newState,
+ [
+ nodes.a, nodes.b, nodes.c,
+ nodes.d, nodes.e, nodes.f,
+ nodes.g, nodes.h, nodes.i,
+ nodes.j, nodes.k
+ ],
+ {node: Object, compare: (a, b) => a === b}
+);
+compare(newState, 'abcdefghijk');
+
+newState = domdiff(
+ document.body,
+ newState,
+ [
+ nodes.g, nodes.h, nodes.i
+ ],
+ {node: Object}
+);
+compare(newState, 'ghi');
+
+document.body.insertBefore(nodes.f, nodes.g);
+if ('onclick' in document.body) {
+ console.log('browser only');
+ compare([].slice.call(document.body.childNodes), 'fghi');
+}
+
+clean();
+document.body.insertBefore(nodes.k, null);
+newState = domdiff(
+ document.body,
+ [],
+ [
+ nodes.c, nodes.d, nodes.e
+ ],
+ {before: nodes.k}
+);
+compare(newState, 'cde');
+
+/*
+newState = domdiff(
+ document.body,
+ newState,
+ [
+ null, nodes.c, nodes.d, nodes.e, null
+ ],
+ {before: nodes.k}
+);
+compare(newState.filter(notNull), 'cde');
+
+newState = domdiff(
+ document.body,
+ newState,
+ [
+ nodes.a, nodes.c, null, nodes.e, nodes.f
+ ],
+ {before: nodes.k}
+);
+compare(newState.filter(notNull), 'acef');
+*/
+
+newState = domdiff(
+ document.body,
+ newState,
+ [
+ nodes.c, nodes.d, nodes.e,
+ nodes.g, nodes.h, nodes.i
+ ],
+ {before: nodes.k}
+);
+compare(newState, 'cdeghi');
+
+newState = domdiff(
+ document.body,
+ newState,
+ [
+ nodes.a, nodes.b, nodes.c,
+ nodes.d, nodes.e, nodes.f,
+ nodes.g, nodes.h, nodes.i
+ ],
+ {before: nodes.k}
+);
+compare(newState, 'abcdefghi');
+
+newState = domdiff(
+ document.body,
+ newState,
+ [
+ nodes.b, nodes.a, nodes.c,
+ nodes.d, nodes.e, nodes.f,
+ nodes.g, nodes.i, nodes.h
+ ],
+ {before: nodes.k}
+);
+compare(newState, 'bacdefgih');
+
+newState = domdiff(
+ document.body,
+ newState,
+ [],
+ {before: nodes.k}
+);
+compare(newState, '');
+
+// https://github.com/snabbdom/snabbdom/blob/master/test/core.js
+tressa.log('## snabbdom - updating children');
+newState = domdiff(
+ document.body,
+ newState,
+ [nodes.a],
+ {before: nodes.k}
+);
+compare(newState, 'a');
+
+newState = domdiff(
+ document.body,
+ newState,
+ [nodes.a, nodes.b, nodes.c],
+ {before: nodes.k}
+);
+compare(newState, 'abc');
+
+newState = domdiff(
+ document.body,
+ newState,
+ [nodes.d, nodes.e],
+ {before: nodes.k}
+);
+compare(newState, 'de');
+
+newState = domdiff(
+ document.body,
+ newState,
+ [nodes.a, nodes.b, nodes.c, nodes.d, nodes.e],
+ {before: nodes.k}
+);
+compare(newState, 'abcde');
+
+newState = domdiff(
+ document.body,
+ newState,
+ [nodes.a, nodes.b, nodes.d, nodes.e],
+ {before: nodes.k}
+);
+compare(newState, 'abde');
+
+newState = domdiff(
+ document.body,
+ newState,
+ [nodes.a, nodes.b, nodes.c, nodes.d, nodes.e],
+ {before: nodes.k}
+);
+compare(newState, 'abcde');
+
+newState = domdiff(
+ document.body,
+ newState,
+ [nodes.b, nodes.c, nodes.d],
+ {before: nodes.k}
+);
+compare(newState, 'bcd');
+
+newState = domdiff(
+ document.body,
+ newState,
+ [nodes.a, nodes.b, nodes.c, nodes.d, nodes.e],
+ {before: nodes.k}
+);
+compare(newState, 'abcde');
+
+newState = domdiff(
+ document.body,
+ newState,
+ [],
+ {before: nodes.k}
+);
+compare(newState, '');
+
+newState = domdiff(
+ document.body,
+ newState,
+ [nodes.a, nodes.b, nodes.c],
+ {before: nodes.k}
+);
+compare(newState, 'abc');
+
+newState = domdiff(
+ document.body,
+ newState,
+ [nodes.a, document.createTextNode('b'), nodes.c],
+ {before: nodes.k}
+);
+assert(
+ newState[1] !== nodes.b &&
+ newState.length === 3 &&
+ newState[0] === nodes.a &&
+ newState[2] === nodes.c,
+ 'replace one child'
+);
+
+tressa.log('## snabbdom - removal of elements');
+
+newState = domdiff(
+ document.body,
+ newState,
+ [nodes.a, nodes.b, nodes.c, nodes.d, nodes.e],
+ {before: nodes.k}
+);
+compare(newState, 'abcde');
+
+newState = domdiff(
+ document.body,
+ newState,
+ [nodes.c, nodes.d, nodes.e],
+ {before: nodes.k}
+);
+compare(newState, 'cde');
+
+newState = domdiff(
+ document.body,
+ newState,
+ [nodes.a, nodes.b, nodes.c, nodes.d, nodes.e],
+ {before: nodes.k}
+);
+compare(newState, 'abcde');
+
+newState = domdiff(
+ document.body,
+ newState,
+ [nodes.a, nodes.b, nodes.c],
+ {before: nodes.k}
+);
+compare(newState, 'abc');
+
+newState = domdiff(
+ document.body,
+ newState,
+ [nodes.a, nodes.b, nodes.c, nodes.d, nodes.e],
+ {before: nodes.k}
+);
+compare(newState, 'abcde');
+
+newState = domdiff(
+ document.body,
+ newState,
+ [nodes.a, nodes.b, nodes.d, nodes.e],
+ {before: nodes.k}
+);
+compare(newState, 'abde');
+
+tressa.log('## snabbdom - element reordering');
+
+newState = domdiff(
+ document.body,
+ newState,
+ [nodes.a, nodes.b, nodes.c, nodes.d],
+ {before: nodes.k}
+);
+compare(newState, 'abcd');
+
+newState = domdiff(
+ document.body,
+ newState,
+ [nodes.b, nodes.c, nodes.a, nodes.d],
+ {before: nodes.k}
+);
+compare(newState, 'bcad');
+
+newState = domdiff(
+ document.body,
+ newState,
+ [nodes.a, nodes.b, nodes.c],
+ {before: nodes.k}
+);
+compare(newState, 'abc');
+
+newState = domdiff(
+ document.body,
+ newState,
+ [nodes.b, nodes.c, nodes.a, nodes.d],
+ {before: nodes.k}
+);
+compare(newState, 'bcad');
+
+newState = domdiff(
+ document.body,
+ newState,
+ [nodes.c, nodes.b, nodes.d],
+ {before: nodes.k}
+);
+compare(newState, 'cbd');
+
+newState = domdiff(
+ document.body,
+ newState,
+ [nodes.a, nodes.b, nodes.c],
+ {before: nodes.k}
+);
+compare(newState, 'abc');
+
+newState = domdiff(
+ document.body,
+ newState,
+ [nodes.b, nodes.c, nodes.a],
+ {before: nodes.k}
+);
+compare(newState, 'bca');
+
+newState = domdiff(
+ document.body,
+ newState,
+ [nodes.a, nodes.b, nodes.c, nodes.d],
+ {before: nodes.k}
+);
+compare(newState, 'abcd');
+
+newState = domdiff(
+ document.body,
+ newState,
+ [nodes.a, nodes.d, nodes.b, nodes.c],
+ {before: nodes.k}
+);
+compare(newState, 'adbc');
+
+newState = domdiff(
+ document.body,
+ newState,
+ [nodes.a, nodes.d, nodes.b, nodes.c],
+ {before: nodes.k}
+);
+compare(newState, 'adbc');
+
+tressa.log('## snabbdom - combination');
+
+newState = domdiff(
+ document.body,
+ newState,
+ [nodes.a, nodes.b, nodes.c, nodes.d, nodes.e],
+ {before: nodes.k}
+);
+compare(newState, 'abcde');
+
+newState = domdiff(
+ document.body,
+ newState,
+ [nodes.d, nodes.a, nodes.b, nodes.c, nodes.f],
+ {before: nodes.k}
+);
+compare(newState, 'dabcf');
+
+newState = domdiff(
+ document.body,
+ newState,
+ [nodes.a, nodes.d, nodes.e],
+ {before: nodes.k}
+);
+compare(newState, 'ade');
+
+newState = domdiff(
+ document.body,
+ newState,
+ [nodes.d, nodes.f],
+ {before: nodes.k}
+);
+compare(newState, 'df');
+
+newState = domdiff(
+ document.body,
+ newState,
+ [nodes.b, nodes.d, nodes.e],
+ {before: nodes.k}
+);
+compare(newState, 'bde');
+
+newState = domdiff(
+ document.body,
+ newState,
+ [nodes.d, nodes.e, nodes.c],
+ {before: nodes.k}
+);
+compare(newState, 'dec');
+
+newState = domdiff(
+ document.body,
+ newState,
+ [nodes.j, nodes.a, nodes.b, nodes.c],
+ {before: nodes.k}
+);
+compare(newState, 'jabc');
+
+newState = domdiff(
+ document.body,
+ newState,
+ [nodes.d, nodes.a, nodes.b, nodes.c, nodes.j, nodes.e],
+ {before: nodes.k}
+);
+compare(newState, 'dabcje');
+
+newState = domdiff(
+ document.body,
+ newState,
+ [nodes.a, nodes.b, nodes.c, nodes.d, nodes.e, nodes.f, nodes.g, nodes.h],
+ {before: nodes.k}
+);
+compare(newState, 'abcdefgh');
+
+newState = domdiff(
+ document.body,
+ newState,
+ [nodes.a, nodes.b, nodes.c, nodes.d, nodes.e, nodes.f, nodes.g, nodes.h].reverse(),
+ {before: nodes.k}
+);
+compare(newState, 'hgfedcba');
+
+newState = domdiff(
+ document.body,
+ newState,
+ [nodes.a, nodes.b, nodes.c, nodes.d, nodes.e, nodes.f],
+ {before: nodes.k}
+);
+compare(newState, 'abcdef');
+
+newState = domdiff(
+ document.body,
+ newState,
+ [nodes.e, nodes.d, nodes.c, nodes.b, nodes.f, nodes.a],
+ {before: nodes.k}
+);
+compare(newState, 'edcbfa');
+
+tressa.log('## snabbdom - random values');
+
+newState = domdiff(
+ document.body,
+ newState,
+ [nodes.a, nodes.b, nodes.c, nodes.d, nodes.e, nodes.f],
+ {before: nodes.k}
+);
+compare(newState, 'abcdef');
+
+/*
+newState = domdiff(
+ document.body,
+ newState,
+ [null, nodes.c, undefined, null, nodes.b, nodes.a, null, nodes.f, nodes.e, null, nodes.d, undefined],
+ {before: nodes.k}
+);
+compare(newState.filter(notNull), 'cbafed');
+*/
+
+newState = domdiff(
+ document.body,
+ newState,
+ [nodes.a, nodes.b, nodes.c, nodes.d, nodes.e, nodes.f],
+ {before: nodes.k}
+);
+compare(newState, 'abcdef');
+
+/*
+newState = domdiff(
+ document.body,
+ newState,
+ [null, null, undefined, null, null, undefined],
+ {before: nodes.k}
+);
+compare(newState.filter(notNull), '');
+*/
+
+newState = domdiff(
+ document.body,
+ newState,
+ [nodes.a, nodes.b, nodes.c, nodes.d, nodes.e, nodes.f].reverse(),
+ {before: nodes.k}
+);
+compare(newState, 'fedcba');
+
+clean();
+tressa.log('## snabbdom - updating children (unpinned)');
+newState = domdiff(
+ document.body,
+ [],
+ [nodes.a]
+);
+compare(newState, 'a');
+
+newState = domdiff(
+ document.body,
+ newState,
+ [nodes.a, nodes.b, nodes.c]
+);
+compare(newState, 'abc');
+
+newState = domdiff(
+ document.body,
+ newState,
+ [nodes.d, nodes.e]
+);
+compare(newState, 'de');
+
+newState = domdiff(
+ document.body,
+ newState,
+ [nodes.a, nodes.b, nodes.c, nodes.d, nodes.e]
+);
+compare(newState, 'abcde');
+
+newState = domdiff(
+ document.body,
+ newState,
+ [nodes.a, nodes.b, nodes.d, nodes.e]
+);
+compare(newState, 'abde');
+
+newState = domdiff(
+ document.body,
+ newState,
+ [nodes.a, nodes.b, nodes.c, nodes.d, nodes.e]
+);
+compare(newState, 'abcde');
+
+newState = domdiff(
+ document.body,
+ newState,
+ [nodes.b, nodes.c, nodes.d]
+);
+compare(newState, 'bcd');
+
+newState = domdiff(
+ document.body,
+ newState,
+ [nodes.a, nodes.b, nodes.c, nodes.d, nodes.e]
+);
+compare(newState, 'abcde');
+
+newState = domdiff(
+ document.body,
+ newState,
+ []
+);
+compare(newState, '');
+
+newState = domdiff(
+ document.body,
+ newState,
+ [nodes.a, nodes.b, nodes.c]
+);
+compare(newState, 'abc');
+
+newState = domdiff(
+ document.body,
+ newState,
+ [nodes.a, document.createTextNode('b'), nodes.c]
+);
+assert(
+ newState[1] !== nodes.b &&
+ newState.length === 3 &&
+ newState[0] === nodes.a &&
+ newState[2] === nodes.c,
+ 'replace one child'
+);
+
+tressa.log('## snabbdom - removal of elements (unpinned)');
+
+newState = domdiff(
+ document.body,
+ newState,
+ [nodes.a, nodes.b, nodes.c, nodes.d, nodes.e]
+);
+compare(newState, 'abcde');
+
+newState = domdiff(
+ document.body,
+ newState,
+ [nodes.c, nodes.d, nodes.e]
+);
+compare(newState, 'cde');
+
+newState = domdiff(
+ document.body,
+ newState,
+ [nodes.a, nodes.b, nodes.c, nodes.d, nodes.e]
+);
+compare(newState, 'abcde');
+
+newState = domdiff(
+ document.body,
+ newState,
+ [nodes.a, nodes.b, nodes.c]
+);
+compare(newState, 'abc');
+
+newState = domdiff(
+ document.body,
+ newState,
+ [nodes.a, nodes.b, nodes.c, nodes.d, nodes.e]
+);
+compare(newState, 'abcde');
+
+newState = domdiff(
+ document.body,
+ newState,
+ [nodes.a, nodes.b, nodes.d, nodes.e]
+);
+compare(newState, 'abde');
+
+tressa.log('## snabbdom - element reordering (unpinned)');
+
+newState = domdiff(
+ document.body,
+ newState,
+ [nodes.a, nodes.b, nodes.c, nodes.d]
+);
+compare(newState, 'abcd');
+
+newState = domdiff(
+ document.body,
+ newState,
+ [nodes.b, nodes.c, nodes.a, nodes.d]
+);
+compare(newState, 'bcad');
+
+newState = domdiff(
+ document.body,
+ newState,
+ [nodes.a, nodes.b, nodes.c]
+);
+compare(newState, 'abc');
+
+newState = domdiff(
+ document.body,
+ newState,
+ [nodes.b, nodes.c, nodes.a]
+);
+compare(newState, 'bca');
+
+newState = domdiff(
+ document.body,
+ newState,
+ [nodes.a, nodes.b, nodes.c, nodes.d]
+);
+compare(newState, 'abcd');
+
+newState = domdiff(
+ document.body,
+ newState,
+ [nodes.a, nodes.d, nodes.b, nodes.c]
+);
+compare(newState, 'adbc');
+
+newState = domdiff(
+ document.body,
+ newState,
+ [nodes.a, nodes.d, nodes.b, nodes.c]
+);
+compare(newState, 'adbc');
+
+tressa.log('## snabbdom - combination (unpinned)');
+
+newState = domdiff(
+ document.body,
+ newState,
+ [nodes.a, nodes.b, nodes.c, nodes.d, nodes.e]
+);
+compare(newState, 'abcde');
+
+newState = domdiff(
+ document.body,
+ newState,
+ [nodes.d, nodes.a, nodes.b, nodes.c, nodes.f]
+);
+compare(newState, 'dabcf');
+
+newState = domdiff(
+ document.body,
+ newState,
+ [nodes.a, nodes.d, nodes.e]
+);
+compare(newState, 'ade');
+
+newState = domdiff(
+ document.body,
+ newState,
+ [nodes.d, nodes.f]
+);
+compare(newState, 'df');
+
+newState = domdiff(
+ document.body,
+ newState,
+ [nodes.b, nodes.d, nodes.e]
+);
+compare(newState, 'bde');
+
+newState = domdiff(
+ document.body,
+ newState,
+ [nodes.d, nodes.e, nodes.c]
+);
+compare(newState, 'dec');
+
+newState = domdiff(
+ document.body,
+ newState,
+ [nodes.j, nodes.a, nodes.b, nodes.c]
+);
+compare(newState, 'jabc');
+
+newState = domdiff(
+ document.body,
+ newState,
+ [nodes.d, nodes.a, nodes.b, nodes.c, nodes.j, nodes.e]
+);
+compare(newState, 'dabcje');
+
+newState = domdiff(
+ document.body,
+ newState,
+ [nodes.a, nodes.b, nodes.c, nodes.d, nodes.e, nodes.f, nodes.g, nodes.h]
+);
+compare(newState, 'abcdefgh');
+
+newState = domdiff(
+ document.body,
+ newState,
+ [nodes.a, nodes.b, nodes.c, nodes.d, nodes.e, nodes.f, nodes.g, nodes.h].reverse()
+);
+compare(newState, 'hgfedcba');
+
+newState = domdiff(
+ document.body,
+ newState,
+ [nodes.a, nodes.b, nodes.c, nodes.d, nodes.e, nodes.f]
+);
+compare(newState, 'abcdef');
+
+newState = domdiff(
+ document.body,
+ newState,
+ [nodes.e, nodes.d, nodes.c, nodes.b, nodes.f, nodes.a]
+);
+compare(newState, 'edcbfa');
+
+tressa.log('## snabbdom - random values (unpinned)');
+
+newState = domdiff(
+ document.body,
+ newState,
+ [nodes.a, nodes.b, nodes.c, nodes.d, nodes.e, nodes.f]
+);
+compare(newState, 'abcdef');
+
+/*
+newState = domdiff(
+ document.body,
+ newState,
+ [null, nodes.c, undefined, null, nodes.b, nodes.a, null, nodes.f, nodes.e, null, nodes.d, undefined]
+);
+compare(newState.filter(notNull), 'cbafed');
+*/
+
+newState = domdiff(
+ document.body,
+ newState,
+ [nodes.a, nodes.b, nodes.c, nodes.d, nodes.e, nodes.f]
+);
+compare(newState, 'abcdef');
+
+/*
+newState = domdiff(
+ document.body,
+ newState,
+ [null, null, undefined, null, null, undefined]
+);
+compare(newState.filter(notNull), '');
+*/
+
+console.time('average');
+newState = domdiff(
+ document.body,
+ newState,
+ [nodes.a, nodes.b, nodes.c, nodes.d, nodes.e, nodes.f].reverse()
+);
+compare(newState, 'fedcba');
+console.timeEnd('average');
+
+newState = domdiff(
+ document.body,
+ newState,
+ [nodes.a]
+);
+compare(newState, 'a');
+
+newState = domdiff(
+ document.body,
+ newState,
+ [nodes.b, nodes.c, nodes.d]
+);
+compare(newState, 'bcd');
+
+newState = domdiff(
+ document.body,
+ newState,
+ [nodes.a]
+);
+compare(newState, 'a');
+
+newState = domdiff(
+ document.body,
+ newState,
+ []
+);
+
+var data = [
+ {"id": 4054, "title": "Serie 2"},
+ {"id": 3982, "title": "Serie 3"},
+ {"id": 4016, "title": "Gracias"},
+ {"id":3984, "title": "Comparte"},
+ {"id":3952, "title": "Lecciรณn 1"},
+ {"id":3955, "title": "Lecciรณn 2"}
+];
+
+var wm = {};
+
+var getItem = function (item) { return wm[item.id]; };
+
+data.forEach(function (item) {
+ wm[item.id] = document.createTextNode(item.id + ': ' + item.title);
+});
+
+newState = domdiff(
+ document.body,
+ newState,
+ data.slice().map(getItem)
+);
+
+newState = domdiff(
+ document.body,
+ newState,
+ data.slice().sort(function (a, b) {
+ return a.title.localeCompare(b.title);
+ }).map(getItem)
+);
+
+newState = domdiff(
+ document.body,
+ newState,
+ Array(1000).join('.').split('.').map(function (v, i) {
+ return document.createTextNode('' + i);
+ })
+);
+
+console.time('random');
+newState = domdiff(
+ document.body,
+ newState,
+ newState.slice().sort(function () {
+ return Math.random() < .5 ? 1 : -1;
+ })
+);
+console.timeEnd('random');
+
+console.time('reversed');
+newState = domdiff(
+ document.body,
+ newState,
+ newState.slice().reverse()
+);
+console.timeEnd('reversed');
+
+// */
+
+tressa.end();
diff --git a/test/edge.html b/test/edge.html
index a7681200..b2b36711 100644
--- a/test/edge.html
+++ b/test/edge.html
@@ -4,10 +4,10 @@
Edge test
-
+
|
+
+
+### Backers
+
+Thank you to all our backers! [[Become a backer](https://opencollective.com/hyperhtml#backer)]
+
+
+
+
+### Sponsors
+
+Thank you to all our sponsors! (please ask your company to also support this open source project by [becoming a sponsor](https://opencollective.com/hyperhtml#sponsor))
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/HELPERS.md b/HELPERS.md
new file mode 100644
index 00000000..d0f8aefb
--- /dev/null
+++ b/HELPERS.md
@@ -0,0 +1,57 @@
+## [babel-plugin-remove-ungap]
+
+Remove the [@ungap ponyfill modules] from your bundle. This will decrease the size of
+your bundle if you are targeting modern browsers only or if your build already includes
+other polyfills. This has been tested with [hyperHTML] and [lighterhtml] bundles.
+
+
+## [babel-plugin-template-html-minifier]
+
+Run [html-minifier] on hyperHTML templates.
+
+
+## [babel-plugin-bare-import-rewrite]
+
+This can be used as an alternative to [rollup-plugin-node-resolve], or can be used with certain node.js
+web servers to allow browsing live from source.
+
+Known web server integrations:
+* [fastify-babel] plugin for [fastify] enables running any babel plugins, generally expects `payload.filename` as set by [fastify-static]
+* [express-transform-bare-module-specifiers] for [express] servers
+
+
+## [vinyl-rollup]
+
+This module copies the output of rollup builds to a stream of vinyl-fs objects for [gulp].
+In addition it optionally adds files from modules that were bundled into the stream. This
+makes it easy to ensure that LICENSE and package.json files associated with bundled modules
+are published on the web server without publishing node.js server-side dependencies to the web.
+This can also be used to copy complete modules if required for licensing or if bundled code
+requires additional assets that are not part of the bundled JS (images for example).
+
+
+## [babel-plugin-bundled-import-meta]
+
+If `node_modules/some-web-component/index.js` uses `import.meta.url` to calculate the actual
+path to `node_modules/some-web-components/image.png`, rollup does not compensate. This babel
+plugin rewrites references to `import.meta.url` so it points to the original location where
+it is expected that the additional assets (images and such) can be found. This plugin works
+well with `vinyl-rollup` with `copyModules: true`.
+
+
+[babel-plugin-remove-ungap]: https://github.com/cfware/babel-plugin-remove-ungap#readme
+[@ungap ponyfill modules]: https://github.com/ungap/ungap.github.io#readme
+[hyperHTML]: https://github.com/WebReflection/hyperHTML#readme
+[lighterhtml]: https://github.com/WebReflection/lighterhtml#readme
+[babel-plugin-template-html-minifier]: https://github.com/cfware/babel-plugin-template-html-minifier#readme
+[html-minifier]: https://github.com/kangax/html-minifier#readme
+[babel-plugin-bare-import-rewrite]: https://github.com/cfware/babel-plugin-bare-import-rewrite#readme
+[rollup-plugin-node-resolve]: https://github.com/rollup/rollup-plugin-node-resolve#readme
+[fastify]: https://github.com/fastify/fastify#readme
+[fastify-babel]: https://github.com/cfware/fastify-babel#readme
+[fastify-static]: https://github.com/fastify/fastify-static#readme
+[express-transform-bare-module-specifiers]: https://github.com/nodecg/express-transform-bare-module-specifiers#readme
+[express]: https://github.com/expressjs/express#readme
+[vinyl-rollup]: https://github.com/cfware/vinyl-rollup#readme
+[gulp]: https://github.com/gulpjs/gulp#readme
+[babel-plugin-bundled-import-meta]: https://github.com/cfware/babel-plugin-bundled-import-meta#readme
diff --git a/README.md b/README.md
index d9cce1c5..72f7e51a 100644
--- a/README.md
+++ b/README.md
@@ -1,13 +1,122 @@
# hyper(HTML)
-[](https://opensource.org/licenses/ISC) [](https://travis-ci.org/WebReflection/hyperHTML) [](https://coveralls.io/github/WebReflection/hyperHTML?branch=master) [](https://github.com/WebReflection/donate)
+### Maintainance Only
+This module is great, works great, and served me greatly, but there's a pletora of modern, faster, more capable alternatives me, among many other OSS developers, offer so that if obvious bugs are proven to exist, these will be fixed, but there won't be a major release and I won't remove legacy support for stuff that, as previously mentioned, works just fine and it's battle-tested from IE to the latest Chrome.
+
+Removing that legacy support brings pretty much nothing in terms of size too: this module is already smaller than 90% of alternatives out there, dropping 0.xK so that there's less code that, behind feature detection, is not even used in modern browsers, won't benefit anyone.
+
+Thansk for your understanding and for not opening PRs which goal is to drop a check for legacy browsers ... these won't likely be merged ever as that'd be a major release update and I don't think anyone is interested in that.
+
+### ๐ฃ Community Announcement
+
+Please ask questions in the [dedicated discussions repository](https://github.com/WebReflection/discussions), to help the community around this project grow โฅ
+
+- - -
-A **Fast & Light Virtual DOM Alternative** available for [NodeJS](https://viperhtml.js.org/viper.html) and [NativeScript](https://viperhtml.js.org/native.html) too.
+A **Fast & Light Virtual DOM Alternative**.
+
+- - -
+
+[](https://github.com/WebReflection/donate) [](#backers) [](#sponsors) 
+
+[](https://coveralls.io/github/WebReflection/hyperHTML?branch=master)
+[](https://travis-ci.org/WebReflection/hyperHTML)
+[](https://opensource.org/licenses/ISC)
+[](https://greenkeeper.io/) 
+
- - -
+Following an overview of projects related, or inspired by, _hyperHTML_. For a deep comparison of current libraries, feel free to [check this gist out](https://gist.github.com/WebReflection/761052d6dae7c8207d2fcba7cdede295).
+
+
+## ยตhtml
+
+The latest, smallest, iteration of all best concept from this library since 2017, have been packaged in _~2.5K_. If it's extreme minimalism and great _DX_ that you are after, check [uhtml](https://github.com/WebReflection/uhtml#readme) out.
+
+
+## hypersimple
+
+If you've just started with template literals based projects and you like components, or you'd like to understand what's _hyperHTML_ capable of, give [hypersimple](https://github.com/WebReflection/hypersimple#readme) a try ๐
+
+
+## lighterhtml ๐ก
+
+This little brother is "_showing off_" these days, claiming better performance and unprecedented ease of use.
+
+[GitHub Repository](https://github.com/WebReflection/lighterhtml)
+
+
+## Neverland ๐๐ฆ
+
+If you like React hooks concept, don't miss this little wrap that adds 0._something_ overhead to the already lightweight hyperHTML, bringing in very similar concepts.
+
+[Blog Post](https://medium.com/@WebReflection/neverland-the-hyperhtmls-hook-a0c3e11324bb)
+
+[GitHub Repository](https://github.com/WebReflection/neverland)
+
+## Haunted ๐ฆ ๐
+
+If you also like React hooks mechanism and you'd like to combine these via hyperHTML or [HyperHTMLElement](https://github.com/WebReflection/hyperHTML-Element), try [haunted](https://github.com/matthewp/haunted#haunted--) out!
+
+
+## Bundlers
+
+You can require or import _hyperHTML_ with any bundler and in different ways.
+
+If requiring or importing from `"hyperhtml"` doesn't work, try requiring from `"hyperhtml/cjs"` for CommonJS friendly bundlers (WebPack), or `"hyperhtml/esm"` for ESM compatible bundlers (Rollup).
+
+See [HELPERS.md](./HELPERS.md) for a list of additional tools which can be helpful for building hyperHTML based web applications.
+
+- - -
+
+## Sponsors
+
+Support this project by becoming a sponsor. Your logo will show up here with a link to your website. [[Become a sponsor](https://opencollective.com/hyperhtml#sponsor)]
+
+