snapshot

bridge.txt

@@ -0,0 +1,19 @@
+The bridge with the current baredom.impl.dom can render like this. There are two arrays with the dom node connectivity numbers. There is another array which has a pointer to a live Node in the old situation.
+1) Go through the two arrays simultaneously and compare all node properties except for children. If the Node type or QName is different, create a new Node there and put it in the array of live Nodes. The old node is lost now (perhaps it can go in a cache and be reused). This step might be faster if we do:
+  1a) collect all redundant nodes in a cache
+  1b) put the nodes back where applicable or create new ones
+  1c) flush the cache
+2) Go through the two arrays from root through to all children and move around nodes that are in the wrong position. We just look at parent en previousSibling and call insertBefore() to update if needed.
+
+
+http://stackoverflow.com/questions/16071211/using-transferable-objects-from-a-web-worker
+
+send:
+self.postMessage(arr.buffer, [arr.buffer]);
+
+receive:
+theWorker.addEventListener('message', function(ev) {
+    var arr = new Float64Array(ev.data);  // just cast it to the desired type - no copy made
+    // ...
+});
+

src/baredom/core/EventTargetDom.js

@@ -0,0 +1,19 @@
+/*jslint emptyblock: true, unparam: true*/
+/*global baredom*/
+/**
+ * Interface to an XML document.
+ * @class
+ * @interface
+ * @extends baredom.core.ReadOnlyDom
+ */
+baredom.core.EventTargetDom = function () {"use strict"; };
+/**
+ * @param {!Object} event
+ * @return {undefined}
+ */
+baredom.core.EventTargetDom.prototype.getObservedEvents = function (event) {"use strict"; };
+/**
+ * @param {!Object} event
+ * @return {undefined}
+ */
+baredom.core.EventTargetDom.prototype.handleEvent = function (event) {"use strict"; };

src/baredom/impl/EventProxy.js

@@ -0,0 +1,126 @@
+/*global baredom, assert, ModificationListener*/
+/**
+ * @constructor
+ * @param {!baredom.core.Dom} dom
+ */
+baredom.impl.EventProxy = function (dom) {
+    "use strict";
+    var /**@type{!Object.<number,!Object.<string,!Array.<function(*):(boolean|undefined)>>>}*/
+        handlers = {},
+        /**@type{!Object.<string,number>}*/
+        observedEvents = {};
+    /**
+     * @param {string} eventType
+     */
+    function increaseEventCount(eventType) {
+        if (observedEvents.hasOwnProperty(eventType)) {
+            observedEvents[eventType] += 1;
+        } else {
+            observedEvents[eventType] = 1;
+        }
+    }
+    /**
+     * @param {string} eventType
+     * @param {number} amount
+     */
+    function reduceEventCount(eventType, amount) {
+        observedEvents[eventType] -= amount;
+        if (observedEvents[eventType] <= 0) {
+            delete observedEvents[eventType];
+        }
+    }
+    /**
+     * @param {number} target
+     * @param {string} eventType
+     * @param {function(number)} handler
+     */
+    this.addEventListener = function (target, eventType, handler) {
+        var h = handlers[target], hs, i;
+        if (h === undefined) {
+            h = handlers[target] = {};
+        }
+        hs = /**@type{!Array.<function(*):(boolean|undefined)>|undefined}*/(h[eventType]);
+        if (hs === undefined) {
+            hs = h[eventType] = [];
+        }
+        i = hs.indexOf(handler);
+        if (i === -1) {
+            hs.push(handler);
+            increaseEventCount(eventType);
+        }
+    };
+    /**
+     * @param {number} target
+     * @param {string} eventType
+     * @param {function(number)} handler
+     */
+    this.removeEventListener = function (target, eventType, handler) {
+        var h = handlers[target], hs, i;
+        if (h !== undefined) {
+            hs = h[eventType];
+            if (hs !== undefined) {
+                i = hs.indexOf(handler);
+                if (i !== -1) {
+                    if (hs.length === 1) {
+                        delete h[eventType];
+                    } else {
+                        hs.splice(i, 1);
+                    }
+                    reduceEventCount(eventType, 1);
+                }
+            }
+        }
+    };
+    /**
+     * @param {number} target
+     */
+    this.removeEventListeners = function (target) {
+        var h = handlers[target], hs,
+            /**@type{string}*/
+            eventType;
+        if (h !== undefined) {
+            for (eventType in h) {
+                if (h.hasOwnProperty(eventType)) {
+                    hs = h[eventType];
+                    reduceEventCount(eventType, hs.length);
+                }
+            }
+            delete handlers[target];
+        }
+    };
+    /**
+     * @param {number} target
+     * @param {string} eventType
+     * @param {*} event
+     */
+    function handleEvent(target, eventType, event) {
+        var h = handlers[target], handler, i, l;
+        if (h !== undefined) {
+            handler = h[eventType];
+            if (handler !== undefined) {
+                l = handler.length;
+                for (i = 0; i < l; i += 1) {
+                    handler[i](event);
+                }
+            }
+        }
+    }
+    /**
+     * @param {number} target
+     * @param {string} eventType
+     * @param {*} event
+     */
+    this.handleEvent = function (target, eventType, event) {
+        // TODO: bubble properly
+        while (target !== 0) {
+            handleEvent(target, eventType, event);
+            target = dom.getParentNode(target);
+        }
+    };
+    /**
+     * @return {!Array.<string>}
+     */
+    this.getObservedEvents = function () {
+        return Object.keys(observedEvents);
+    };
+};

src/baredom/w3c/Event.js

@@ -0,0 +1,13 @@
+/*jslint emptyblock: true, unparam: true*/
+/**
+ * @interface
+ */
+function Event() {"use strict"; }
+/**
+ * @type {!EventTarget}
+ */
+Event.prototype.target;
+/**
+ * @type {string}
+ */
+Event.prototype.type;

test.html

@@ -0,0 +1,96 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
+  "http://www.w3.org/TR/html4/loose.dtd">
+<html>
+<head>
+  <title>Performance test</title>
+
+  <!-- include source files here... -->
+  <script type="text/javascript" src="src/packages.js"></script>
+  <script type="text/javascript" src="src/baredom/core/ReadOnlyDom.js"></script>
+  <script type="text/javascript" src="src/baredom/core/Dom.js"></script>
+  <script type="text/javascript" src="src/baredom/core/ObservableDom.js"></script>
+  <script type="text/javascript" src="src/baredom/impl/QName.js"></script>
+  <script type="text/javascript" src="src/baredom/impl/Dom.js"></script>
+  <script type="text/javascript" src="src/baredom/impl/EventProxy.js"></script>
+  <script type="text/javascript" src="src/baredom/impl/DomBridge.js"></script>
+  <script type="text/javascript" src="src/baredom/impl/w3c/NodeList.js"></script>
+  <script type="text/javascript" src="src/baredom/impl/w3c/Node.js"></script>
+  <script type="text/javascript" src="src/baredom/impl/w3c/Attr.js"></script>
+  <script type="text/javascript" src="src/baredom/impl/w3c/Document.js"></script>
+  <script type="text/javascript" src="src/baredom/impl/w3c/Element.js"></script>
+  <script type="text/javascript">
+
+function addRandomTexts(bridge) {
+    var vdom = bridge.getVirtualDom(),
+        qname = vdom.getQNames().getQName(document.body.namespaceURI, "div"),
+        nodes = [],
+        n = 0,
+        interval;
+    function changeTexts() {
+        var i;
+        for (i = 0; i < 1000; i += 1) {
+            j = Math.floor(Math.random() * 1000);
+            if (nodes[j]) {
+                vdom.removeNode(nodes[j]);
+            }
+            if (j % 5) {
+                nodes[j] = vdom.insertText(Math.random() + " ", vdom.getDocumentElement(), 0);
+            } else {
+                nodes[j] = vdom.insertElement(qname, vdom.getDocumentElement(), 0);
+            }
+        }
+        n += 1;
+        if (n > 1000) {
+            window.clearInterval(interval);
+        }
+    }
+    interval = window.setInterval(changeTexts, 0);
+    window.setInterval(function () {
+        bridge.render();
+    }, 40);
+}
+function initVDom(vdom) {
+    var qname = vdom.getQNames().getQName(document.body.namespaceURI, "span"),
+        span1 = vdom.insertElement(qname, vdom.getDocumentElement(), 0),
+        span2 = vdom.insertElement(qname, span1, 0),
+        text = vdom.insertText("HELLO", span2, 0);
+    vdom.addEventListener(span1, "click", function (e) {
+        console.log("span1 " + e.target);
+        console.log(e);
+    });
+    vdom.addEventListener(span2, "click", function (e) {
+        console.log("span2 " + e.target);
+        console.log(e);
+    });
+}
+function textTest() {
+    var text = document.createTextNode("click me!"),
+        div1 = document.createElement("div"),
+        div2 = document.createElement("div");
+    document.body.appendChild(div1);
+    div1.appendChild(div2);
+    div2.appendChild(text);
+    text.addEventListener("click", function (e) {
+        console.log(e.target);
+    });
+    div1.addEventListener("click", function (e) {
+        console.log(e);
+    });
+}
+function init() {
+//    textTest();
+    var qnames = new baredom.impl.QName(),
+        qname = qnames.getQName(document.body.namespaceURI, "div"),
+        vdom = new baredom.impl.Dom(qnames, qname),
+        div = document.createElementNS(document.body.namespaceURI, "div"),
+        bridge = new baredom.impl.DomBridge(vdom, div);
+    initVDom(vdom);
+    bridge.render();
+    document.body.appendChild(div);
+    addRandomTexts(bridge);
+}
+  </script>
+</head>
+<body onload="init()">
+</body>
+</html>