v13.0.0-30 -- distribution files

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "yjs",
-  "version": "13.0.0-32",
+  "version": "13.0.0-30",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "yjs",
-  "version": "13.0.0-32",
+  "version": "13.0.0-30",
   "description": "A framework for real-time p2p shared editing on any data",
   "main": "./y.node.js",
   "browser": "./y.js",

src/Type/y-xml/YXmlElement.js

@@ -5,7 +5,7 @@ import YMap from '../YMap.js'
 import YXmlFragment from './YXmlFragment.js'
 
 export default class YXmlElement extends YXmlFragment {
-  constructor (arg1, arg2, _document) {
+  constructor (arg1, arg2) {
     super()
     this.nodeName = null
     this._scrollElement = null
@@ -13,7 +13,7 @@ export default class YXmlElement extends YXmlFragment {
       this.nodeName = arg1.toUpperCase()
     } else if (arg1 != null && arg1.nodeType != null && arg1.nodeType === arg1.ELEMENT_NODE) {
       this.nodeName = arg1.nodeName
-      this._setDom(arg1, _document)
+      this._setDom(arg1)
     } else {
       this.nodeName = 'UNDEFINED'
     }
@@ -26,12 +26,14 @@ export default class YXmlElement extends YXmlFragment {
     struct.nodeName = this.nodeName
     return struct
   }
-  _setDom (dom, _document) {
+  _setDom (dom) {
     if (this._dom != null) {
       throw new Error('Only call this method if you know what you are doing ;)')
     } else if (dom._yxml != null) { // TODO do i need to check this? - no.. but for dev purps..
       throw new Error('Already bound to an YXml type')
     } else {
+      this._dom = dom
+      dom._yxml = this
       // tag is already set in constructor
       // set attributes
       let attrNames = []
@@ -44,8 +46,8 @@ export default class YXmlElement extends YXmlFragment {
         let attrValue = dom.getAttribute(attrName)
         this.setAttribute(attrName, attrValue)
       }
-      this.insertDomElements(0, Array.prototype.slice.call(dom.childNodes), _document)
+      this.insertDomElements(0, Array.prototype.slice.call(dom.childNodes))
-      this._bindToDom(dom, _document)
+      this._bindToDom(dom)
       return dom
     }
   }
@@ -113,6 +115,7 @@ export default class YXmlElement extends YXmlFragment {
     let dom = this._dom
     if (dom == null) {
       dom = _document.createElement(this.nodeName)
+      this._dom = dom
       dom._yxml = this
       let attrs = this.getAttributes()
       for (let key in attrs) {
@@ -121,7 +124,7 @@ export default class YXmlElement extends YXmlFragment {
       this.forEach(yxml => {
         dom.appendChild(yxml.getDom(_document))
       })
-      this._bindToDom(dom, _document)
+      this._bindToDom(dom)
     }
     return dom
   }

src/Type/y-xml/YXmlFragment.js

@@ -9,7 +9,7 @@ import YXmlEvent from './YXmlEvent.js'
 import { logID } from '../../MessageHandler/messageToString.js'
 import diff from 'fast-diff'
 
-function domToYXml (parent, doms, _document) {
+function domToYXml (parent, doms) {
   const types = []
   doms.forEach(d => {
     if (d._yxml != null && d._yxml !== false) {
@@ -20,7 +20,7 @@ function domToYXml (parent, doms, _document) {
       if (d.nodeType === d.TEXT_NODE) {
         type = new YXmlText(d)
       } else if (d.nodeType === d.ELEMENT_NODE) {
-        type = new YXmlFragment._YXmlElement(d, parent._domFilter, _document)
+        type = new YXmlFragment._YXmlElement(d, parent._domFilter)
       } else {
         throw new Error('Unsupported node!')
       }
@@ -98,9 +98,7 @@ export default class YXmlFragment extends YArray {
         } catch (e) {
           console.error(e)
         }
-        if (this._domObserver !== null) {
+        this._domObserver.takeRecords()
-          this._domObserver.takeRecords()
-        }
         token = true
       }
     }
@@ -164,116 +162,113 @@ export default class YXmlFragment extends YArray {
       this._dom = null
     }
   }
-  insertDomElementsAfter (prev, doms, _document) {
+  insertDomElementsAfter (prev, doms) {
-    const types = domToYXml(this, doms, _document)
+    const types = domToYXml(this, doms)
     this.insertAfter(prev, types)
     return types
   }
-  insertDomElements (pos, doms, _document) {
+  insertDomElements (pos, doms) {
-    const types = domToYXml(this, doms, _document)
+    const types = domToYXml(this, doms)
     this.insert(pos, types)
     return types
   }
   getDom () {
     return this._dom
   }
-  bindToDom (dom, _document) {
+  bindToDom (dom) {
     if (this._dom != null) {
       this._unbindFromDom()
     }
     if (dom._yxml != null) {
       dom._yxml._unbindFromDom()
     }
+    if (MutationObserver == null) {
+      throw new Error('Not able to bind to a DOM element, because MutationObserver is not available!')
+    }
     dom.innerHTML = ''
+    this._dom = dom
+    dom._yxml = this
     this.forEach(t => {
-      dom.insertBefore(t.getDom(_document), null)
+      dom.insertBefore(t.getDom(), null)
     })
-    this._bindToDom(dom, _document)
+    this._bindToDom(dom)
   }
   // binds to a dom element
   // Only call if dom and YXml are isomorph
-  _bindToDom (dom, _document) {
+  _bindToDom (dom) {
-    _document = _document || document
+    if (this._parent === null || this._parent._dom != null || typeof MutationObserver === 'undefined') {
-    this._dom = dom
+      // only bind if parent did not already bind
-    dom._yxml = this
-    // TODO: refine this..
-    if ((this.constructor !== YXmlFragment && this._parent !== this._y) || this._parent === null) {
-      // TODO: only top level YXmlFragment can bind. Also allow YXmlElements..
       return
     }
+    this._y.on('beforeTransaction', () => {
+      this._domObserverListener(this._domObserver.takeRecords())
+    })
     this._y.on('beforeTransaction', beforeTransactionSelectionFixer)
     this._y.on('afterTransaction', afterTransactionSelectionFixer)
     // Apply Y.Xml events to dom
-    this.observeDeep(events => {
+    this.observeDeep(reflectChangesOnDom.bind(this))
-      reflectChangesOnDom.call(this, events, _document)
-    })
     // Apply Dom changes on Y.Xml
-    if (typeof MutationObserver !== 'undefined') {
+    this._domObserverListener = mutations => {
-      this._y.on('beforeTransaction', () => {
+      this._mutualExclude(() => {
-        this._domObserverListener(this._domObserver.takeRecords())
+        this._y.transact(() => {
-      })
+          let diffChildren = new Set()
-      this._domObserverListener = mutations => {
+          mutations.forEach(mutation => {
-        this._mutualExclude(() => {
+            const dom = mutation.target
-          this._y.transact(() => {
+            const yxml = dom._yxml
-            let diffChildren = new Set()
+            if (yxml == null) {
-            mutations.forEach(mutation => {
+              // dom element is filtered
-              const dom = mutation.target
+              return
-              const yxml = dom._yxml
+            }
-              if (yxml == null) {
+            switch (mutation.type) {
-                // dom element is filtered
+              case 'characterData':
-                return
+                var diffs = diff(yxml.toString(), dom.nodeValue)
-              }
+                var pos = 0
-              switch (mutation.type) {
+                for (var i = 0; i < diffs.length; i++) {
-                case 'characterData':
+                  var d = diffs[i]
-                  var diffs = diff(yxml.toString(), dom.nodeValue)
+                  if (d[0] === 0) { // EQUAL
-                  var pos = 0
+                    pos += d[1].length
-                  for (var i = 0; i < diffs.length; i++) {
+                  } else if (d[0] === -1) { // DELETE
-                    var d = diffs[i]
+                    yxml.delete(pos, d[1].length)
-                    if (d[0] === 0) { // EQUAL
+                  } else { // INSERT
-                      pos += d[1].length
+                    yxml.insert(pos, d[1])
-                    } else if (d[0] === -1) { // DELETE
+                    pos += d[1].length
-                      yxml.delete(pos, d[1].length)
+                  }
-                    } else { // INSERT
+                }
-                      yxml.insert(pos, d[1])
+                break
-                      pos += d[1].length
+              case 'attributes':
+                let name = mutation.attributeName
+                // check if filter accepts attribute
+                if (this._domFilter(dom, [name]).length > 0 && this.constructor !== YXmlFragment) {
+                  var val = dom.getAttribute(name)
+                  if (yxml.getAttribute(name) !== val) {
+                    if (val == null) {
+                      yxml.removeAttribute(name)
+                    } else {
+                      yxml.setAttribute(name, val)
                     }
                   }
-                  break
+                }
-                case 'attributes':
+                break
-                  let name = mutation.attributeName
+              case 'childList':
-                  // check if filter accepts attribute
+                diffChildren.add(mutation.target)
-                  if (this._domFilter(dom, [name]).length > 0 && yxml.constructor !== YXmlFragment) {
+                break
-                    var val = dom.getAttribute(name)
-                    if (yxml.getAttribute(name) !== val) {
-                      if (val == null) {
-                        yxml.removeAttribute(name)
-                      } else {
-                        yxml.setAttribute(name, val)
-                      }
-                    }
-                  }
-                  break
-                case 'childList':
-                  diffChildren.add(mutation.target)
-                  break
-              }
-            })
-            for (let dom of diffChildren) {
-              if (dom._yxml != null && dom._yxml !== false) {
-                applyChangesFromDom(dom)
-              }
             }
           })
+          for (let dom of diffChildren) {
+            if (dom._yxml != null && dom._yxml !== false) {
+              applyChangesFromDom(dom)
+            }
+          }
         })
-      }
-      this._domObserver = new MutationObserver(this._domObserverListener)
-      this._domObserver.observe(dom, {
-        childList: true,
-        attributes: true,
-        characterData: true,
-        subtree: true
       })
     }
+    this._domObserver = new MutationObserver(this._domObserverListener)
+    this._domObserver.observe(dom, {
+      childList: true,
+      attributes: true,
+      characterData: true,
+      subtree: true
+    })
     return dom
   }
   _logString () {

src/Type/y-xml/utils.js

@@ -135,7 +135,7 @@ export function applyChangesFromDom (dom) {
   }
 }
 
-export function reflectChangesOnDom (events, _document) {
+export function reflectChangesOnDom (events) {
   // Make sure that no filtered attributes are applied to the structure
   // if they were, delete them
   /*
@@ -183,9 +183,9 @@ export function reflectChangesOnDom (events, _document) {
           })
           if (event.childListChanged) {
             // create fragment of undeleted nodes
-            const fragment = _document.createDocumentFragment()
+            const fragment = document.createDocumentFragment()
             yxml.forEach(function (t) {
-              fragment.appendChild(t.getDom(_document))
+              fragment.append(t.getDom())
             })
             // remove remainding nodes
             let lastChild = dom.lastChild
@@ -194,7 +194,7 @@ export function reflectChangesOnDom (events, _document) {
               lastChild = dom.lastChild
             }
             // insert fragment of undeleted nodes
-            dom.appendChild(fragment)
+            dom.append(fragment)
           }
         }
         /* TODO: smartscrolling

tests-lib/helper.js

@@ -153,7 +153,7 @@ export async function initArrays (t, opts) {
     result['array' + i] = y.define('array', Y.Array)
     result['map' + i] = y.define('map', Y.Map)
     result['xml' + i] = y.define('xml', Y.XmlElement)
-    y.get('xml').setDomFilter(function (d, attrs) {
+    y.get('xml', Y.Xml).setDomFilter(function (d, attrs) {
       if (d.nodeName === 'HIDDEN') {
         return null
       } else {

y.node.js

@@ -1,7 +1,7 @@
 
 /**
  * yjs - A framework for real-time p2p shared editing on any data
- * @version v13.0.0-32
+ * @version v13.0.0-30
  * @license MIT
  */
 
@@ -2776,7 +2776,7 @@ function applyChangesFromDom (dom) {
   }
 }
 
-function reflectChangesOnDom (events, _document) {
+function reflectChangesOnDom (events) {
   // Make sure that no filtered attributes are applied to the structure
   // if they were, delete them
   /*
@@ -2824,9 +2824,9 @@ function reflectChangesOnDom (events, _document) {
           });
           if (event.childListChanged) {
             // create fragment of undeleted nodes
-            const fragment = _document.createDocumentFragment();
+            const fragment = document.createDocumentFragment();
             yxml.forEach(function (t) {
-              fragment.appendChild(t.getDom(_document));
+              fragment.append(t.getDom());
             });
             // remove remainding nodes
             let lastChild = dom.lastChild;
@@ -2835,7 +2835,7 @@ function reflectChangesOnDom (events, _document) {
               lastChild = dom.lastChild;
             }
             // insert fragment of undeleted nodes
-            dom.appendChild(fragment);
+            dom.append(fragment);
           }
         }
         /* TODO: smartscrolling
@@ -3778,7 +3778,7 @@ function merge_tuples (diffs, start, length) {
 
 /* global MutationObserver */
 
-function domToYXml (parent, doms, _document) {
+function domToYXml (parent, doms) {
   const types = [];
   doms.forEach(d => {
     if (d._yxml != null && d._yxml !== false) {
@@ -3789,7 +3789,7 @@ function domToYXml (parent, doms, _document) {
       if (d.nodeType === d.TEXT_NODE) {
         type = new YXmlText(d);
       } else if (d.nodeType === d.ELEMENT_NODE) {
-        type = new YXmlFragment._YXmlElement(d, parent._domFilter, _document);
+        type = new YXmlFragment._YXmlElement(d, parent._domFilter);
       } else {
         throw new Error('Unsupported node!')
       }
@@ -3867,9 +3867,7 @@ class YXmlFragment extends YArray {
         } catch (e) {
           console.error(e);
         }
-        if (this._domObserver !== null) {
+        this._domObserver.takeRecords();
-          this._domObserver.takeRecords();
-        }
         token = true;
       }
     };
@@ -3933,116 +3931,113 @@ class YXmlFragment extends YArray {
       this._dom = null;
     }
   }
-  insertDomElementsAfter (prev, doms, _document) {
+  insertDomElementsAfter (prev, doms) {
-    const types = domToYXml(this, doms, _document);
+    const types = domToYXml(this, doms);
     this.insertAfter(prev, types);
     return types
   }
-  insertDomElements (pos, doms, _document) {
+  insertDomElements (pos, doms) {
-    const types = domToYXml(this, doms, _document);
+    const types = domToYXml(this, doms);
     this.insert(pos, types);
     return types
   }
   getDom () {
     return this._dom
   }
-  bindToDom (dom, _document) {
+  bindToDom (dom) {
     if (this._dom != null) {
       this._unbindFromDom();
     }
     if (dom._yxml != null) {
       dom._yxml._unbindFromDom();
     }
+    if (MutationObserver == null) {
+      throw new Error('Not able to bind to a DOM element, because MutationObserver is not available!')
+    }
     dom.innerHTML = '';
+    this._dom = dom;
+    dom._yxml = this;
     this.forEach(t => {
-      dom.insertBefore(t.getDom(_document), null);
+      dom.insertBefore(t.getDom(), null);
     });
-    this._bindToDom(dom, _document);
+    this._bindToDom(dom);
   }
   // binds to a dom element
   // Only call if dom and YXml are isomorph
-  _bindToDom (dom, _document) {
+  _bindToDom (dom) {
-    _document = _document || document;
+    if (this._parent === null || this._parent._dom != null || typeof MutationObserver === 'undefined') {
-    this._dom = dom;
+      // only bind if parent did not already bind
-    dom._yxml = this;
-    // TODO: refine this..
-    if ((this.constructor !== YXmlFragment && this._parent !== this._y) || this._parent === null) {
-      // TODO: only top level YXmlFragment can bind. Also allow YXmlElements..
       return
     }
+    this._y.on('beforeTransaction', () => {
+      this._domObserverListener(this._domObserver.takeRecords());
+    });
     this._y.on('beforeTransaction', beforeTransactionSelectionFixer);
     this._y.on('afterTransaction', afterTransactionSelectionFixer);
     // Apply Y.Xml events to dom
-    this.observeDeep(events => {
+    this.observeDeep(reflectChangesOnDom.bind(this));
-      reflectChangesOnDom.call(this, events, _document);
-    });
     // Apply Dom changes on Y.Xml
-    if (typeof MutationObserver !== 'undefined') {
+    this._domObserverListener = mutations => {
-      this._y.on('beforeTransaction', () => {
+      this._mutualExclude(() => {
-        this._domObserverListener(this._domObserver.takeRecords());
+        this._y.transact(() => {
-      });
+          let diffChildren = new Set();
-      this._domObserverListener = mutations => {
+          mutations.forEach(mutation => {
-        this._mutualExclude(() => {
+            const dom = mutation.target;
-          this._y.transact(() => {
+            const yxml = dom._yxml;
-            let diffChildren = new Set();
+            if (yxml == null) {
-            mutations.forEach(mutation => {
+              // dom element is filtered
-              const dom = mutation.target;
+              return
-              const yxml = dom._yxml;
+            }
-              if (yxml == null) {
+            switch (mutation.type) {
-                // dom element is filtered
+              case 'characterData':
-                return
+                var diffs = diff_1(yxml.toString(), dom.nodeValue);
-              }
+                var pos = 0;
-              switch (mutation.type) {
+                for (var i = 0; i < diffs.length; i++) {
-                case 'characterData':
+                  var d = diffs[i];
-                  var diffs = diff_1(yxml.toString(), dom.nodeValue);
+                  if (d[0] === 0) { // EQUAL
-                  var pos = 0;
+                    pos += d[1].length;
-                  for (var i = 0; i < diffs.length; i++) {
+                  } else if (d[0] === -1) { // DELETE
-                    var d = diffs[i];
+                    yxml.delete(pos, d[1].length);
-                    if (d[0] === 0) { // EQUAL
+                  } else { // INSERT
-                      pos += d[1].length;
+                    yxml.insert(pos, d[1]);
-                    } else if (d[0] === -1) { // DELETE
+                    pos += d[1].length;
-                      yxml.delete(pos, d[1].length);
+                  }
-                    } else { // INSERT
+                }
-                      yxml.insert(pos, d[1]);
+                break
-                      pos += d[1].length;
+              case 'attributes':
+                let name = mutation.attributeName;
+                // check if filter accepts attribute
+                if (this._domFilter(dom, [name]).length > 0 && this.constructor !== YXmlFragment) {
+                  var val = dom.getAttribute(name);
+                  if (yxml.getAttribute(name) !== val) {
+                    if (val == null) {
+                      yxml.removeAttribute(name);
+                    } else {
+                      yxml.setAttribute(name, val);
                     }
                   }
-                  break
+                }
-                case 'attributes':
+                break
-                  let name = mutation.attributeName;
+              case 'childList':
-                  // check if filter accepts attribute
+                diffChildren.add(mutation.target);
-                  if (this._domFilter(dom, [name]).length > 0 && yxml.constructor !== YXmlFragment) {
+                break
-                    var val = dom.getAttribute(name);
-                    if (yxml.getAttribute(name) !== val) {
-                      if (val == null) {
-                        yxml.removeAttribute(name);
-                      } else {
-                        yxml.setAttribute(name, val);
-                      }
-                    }
-                  }
-                  break
-                case 'childList':
-                  diffChildren.add(mutation.target);
-                  break
-              }
-            });
-            for (let dom of diffChildren) {
-              if (dom._yxml != null && dom._yxml !== false) {
-                applyChangesFromDom(dom);
-              }
             }
           });
+          for (let dom of diffChildren) {
+            if (dom._yxml != null && dom._yxml !== false) {
+              applyChangesFromDom(dom);
+            }
+          }
         });
-      };
-      this._domObserver = new MutationObserver(this._domObserverListener);
-      this._domObserver.observe(dom, {
-        childList: true,
-        attributes: true,
-        characterData: true,
-        subtree: true
       });
-    }
+    };
+    this._domObserver = new MutationObserver(this._domObserverListener);
+    this._domObserver.observe(dom, {
+      childList: true,
+      attributes: true,
+      characterData: true,
+      subtree: true
+    });
     return dom
   }
   _logString () {
@@ -4054,7 +4049,7 @@ class YXmlFragment extends YArray {
 
 // import diff from 'fast-diff'
 class YXmlElement extends YXmlFragment {
-  constructor (arg1, arg2, _document) {
+  constructor (arg1, arg2) {
     super();
     this.nodeName = null;
     this._scrollElement = null;
@@ -4062,7 +4057,7 @@ class YXmlElement extends YXmlFragment {
       this.nodeName = arg1.toUpperCase();
     } else if (arg1 != null && arg1.nodeType != null && arg1.nodeType === arg1.ELEMENT_NODE) {
       this.nodeName = arg1.nodeName;
-      this._setDom(arg1, _document);
+      this._setDom(arg1);
     } else {
       this.nodeName = 'UNDEFINED';
     }
@@ -4075,12 +4070,14 @@ class YXmlElement extends YXmlFragment {
     struct.nodeName = this.nodeName;
     return struct
   }
-  _setDom (dom, _document) {
+  _setDom (dom) {
     if (this._dom != null) {
       throw new Error('Only call this method if you know what you are doing ;)')
     } else if (dom._yxml != null) { // TODO do i need to check this? - no.. but for dev purps..
       throw new Error('Already bound to an YXml type')
     } else {
+      this._dom = dom;
+      dom._yxml = this;
       // tag is already set in constructor
       // set attributes
       let attrNames = [];
@@ -4093,8 +4090,8 @@ class YXmlElement extends YXmlFragment {
         let attrValue = dom.getAttribute(attrName);
         this.setAttribute(attrName, attrValue);
       }
-      this.insertDomElements(0, Array.prototype.slice.call(dom.childNodes), _document);
+      this.insertDomElements(0, Array.prototype.slice.call(dom.childNodes));
-      this._bindToDom(dom, _document);
+      this._bindToDom(dom);
       return dom
     }
   }
@@ -4162,6 +4159,7 @@ class YXmlElement extends YXmlFragment {
     let dom = this._dom;
     if (dom == null) {
       dom = _document.createElement(this.nodeName);
+      this._dom = dom;
       dom._yxml = this;
       let attrs = this.getAttributes();
       for (let key in attrs) {
@@ -4170,7 +4168,7 @@ class YXmlElement extends YXmlFragment {
       this.forEach(yxml => {
         dom.appendChild(yxml.getDom(_document));
       });
-      this._bindToDom(dom, _document);
+      this._bindToDom(dom);
     }
     return dom
   }

y.test.js

@@ -1,8 +1,8 @@
 (function (global, factory) {
-	typeof exports === 'object' && typeof module !== 'undefined' ? factory() :
+	typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
-	typeof define === 'function' && define.amd ? define(factory) :
+	typeof define === 'function' && define.amd ? define(['exports'], factory) :
-	(factory());
+	(factory((global['y-tests'] = {})));
-}(this, (function () { 'use strict';
+}(this, (function (exports) { 'use strict';
 
 class N {
   // A created node is always red!
@@ -1448,6 +1448,10 @@ function logID (id) {
   }
 }
 
+/**
+ * Delete all items in an ID-range
+ * TODO: implement getItemCleanStartNode for better performance (only one lookup)
+ */
 function deleteItemRange (y, user, clock, range) {
   const createDelete = y.connector._forwardAppliedStructs;
   let item = y.os.getItemCleanStart(new ID(user, clock));
@@ -1552,6 +1556,13 @@ function transactionTypeChanged (y, type, sub) {
   }
 }
 
+/**
+ * Helper utility to split an Item (see _splitAt)
+ * - copy all properties from a to b
+ * - connect a to b
+ * - assigns the correct _id
+ * - save b to os
+ */
 function splitHelper (y, a, b, diff) {
   const aID = a._id;
   b._id = new ID(aID.user, aID.clock + diff);
@@ -1902,6 +1913,7 @@ class EventHandler {
   }
 }
 
+// restructure children as if they were inserted one after another
 function integrateChildren (y, start) {
   let right;
   do {
@@ -2761,7 +2773,7 @@ function applyChangesFromDom (dom) {
   }
 }
 
-function reflectChangesOnDom (events, _document) {
+function reflectChangesOnDom (events) {
   // Make sure that no filtered attributes are applied to the structure
   // if they were, delete them
   /*
@@ -2809,9 +2821,9 @@ function reflectChangesOnDom (events, _document) {
           });
           if (event.childListChanged) {
             // create fragment of undeleted nodes
-            const fragment = _document.createDocumentFragment();
+            const fragment = document.createDocumentFragment();
             yxml.forEach(function (t) {
-              fragment.appendChild(t.getDom(_document));
+              fragment.append(t.getDom());
             });
             // remove remainding nodes
             let lastChild = dom.lastChild;
@@ -2820,7 +2832,7 @@ function reflectChangesOnDom (events, _document) {
               lastChild = dom.lastChild;
             }
             // insert fragment of undeleted nodes
-            dom.appendChild(fragment);
+            dom.append(fragment);
           }
         }
         /* TODO: smartscrolling
@@ -2941,7 +2953,7 @@ let relativeSelection = null;
 
 let beforeTransactionSelectionFixer;
 if (typeof getSelection !== 'undefined') {
-  beforeTransactionSelectionFixer = function _beforeTransactionSelectionFixer (y, transaction, remote) {
+  beforeTransactionSelectionFixer = function _beforeTransactionSelectionFixer (y, remote) {
     if (!remote) {
       return
     }
@@ -2964,7 +2976,7 @@ if (typeof getSelection !== 'undefined') {
   beforeTransactionSelectionFixer = function _fakeBeforeTransactionSelectionFixer () {};
 }
 
-function afterTransactionSelectionFixer (y, transaction, remote) {
+function afterTransactionSelectionFixer (y, remote) {
   if (relativeSelection === null || !remote) {
     return
   }
@@ -3763,7 +3775,7 @@ function merge_tuples (diffs, start, length) {
 
 /* global MutationObserver */
 
-function domToYXml (parent, doms, _document) {
+function domToYXml (parent, doms) {
   const types = [];
   doms.forEach(d => {
     if (d._yxml != null && d._yxml !== false) {
@@ -3774,7 +3786,7 @@ function domToYXml (parent, doms, _document) {
       if (d.nodeType === d.TEXT_NODE) {
         type = new YXmlText(d);
       } else if (d.nodeType === d.ELEMENT_NODE) {
-        type = new YXmlFragment._YXmlElement(d, parent._domFilter, _document);
+        type = new YXmlFragment._YXmlElement(d, parent._domFilter);
       } else {
         throw new Error('Unsupported node!')
       }
@@ -3852,9 +3864,7 @@ class YXmlFragment extends YArray {
         } catch (e) {
           console.error(e);
         }
-        if (this._domObserver !== null) {
+        this._domObserver.takeRecords();
-          this._domObserver.takeRecords();
-        }
         token = true;
       }
     };
@@ -3918,116 +3928,113 @@ class YXmlFragment extends YArray {
       this._dom = null;
     }
   }
-  insertDomElementsAfter (prev, doms, _document) {
+  insertDomElementsAfter (prev, doms) {
-    const types = domToYXml(this, doms, _document);
+    const types = domToYXml(this, doms);
     this.insertAfter(prev, types);
     return types
   }
-  insertDomElements (pos, doms, _document) {
+  insertDomElements (pos, doms) {
-    const types = domToYXml(this, doms, _document);
+    const types = domToYXml(this, doms);
     this.insert(pos, types);
     return types
   }
   getDom () {
     return this._dom
   }
-  bindToDom (dom, _document) {
+  bindToDom (dom) {
     if (this._dom != null) {
       this._unbindFromDom();
     }
     if (dom._yxml != null) {
       dom._yxml._unbindFromDom();
     }
+    if (MutationObserver == null) {
+      throw new Error('Not able to bind to a DOM element, because MutationObserver is not available!')
+    }
     dom.innerHTML = '';
+    this._dom = dom;
+    dom._yxml = this;
     this.forEach(t => {
-      dom.insertBefore(t.getDom(_document), null);
+      dom.insertBefore(t.getDom(), null);
     });
-    this._bindToDom(dom, _document);
+    this._bindToDom(dom);
   }
   // binds to a dom element
   // Only call if dom and YXml are isomorph
-  _bindToDom (dom, _document) {
+  _bindToDom (dom) {
-    _document = _document || document;
+    if (this._parent === null || this._parent._dom != null || typeof MutationObserver === 'undefined') {
-    this._dom = dom;
+      // only bind if parent did not already bind
-    dom._yxml = this;
-    // TODO: refine this..
-    if ((this.constructor !== YXmlFragment && this._parent !== this._y) || this._parent === null) {
-      // TODO: only top level YXmlFragment can bind. Also allow YXmlElements..
       return
     }
+    this._y.on('beforeTransaction', () => {
+      this._domObserverListener(this._domObserver.takeRecords());
+    });
     this._y.on('beforeTransaction', beforeTransactionSelectionFixer);
     this._y.on('afterTransaction', afterTransactionSelectionFixer);
     // Apply Y.Xml events to dom
-    this.observeDeep(events => {
+    this.observeDeep(reflectChangesOnDom.bind(this));
-      reflectChangesOnDom.call(this, events, _document);
-    });
     // Apply Dom changes on Y.Xml
-    if (typeof MutationObserver !== 'undefined') {
+    this._domObserverListener = mutations => {
-      this._y.on('beforeTransaction', () => {
+      this._mutualExclude(() => {
-        this._domObserverListener(this._domObserver.takeRecords());
+        this._y.transact(() => {
-      });
+          let diffChildren = new Set();
-      this._domObserverListener = mutations => {
+          mutations.forEach(mutation => {
-        this._mutualExclude(() => {
+            const dom = mutation.target;
-          this._y.transact(() => {
+            const yxml = dom._yxml;
-            let diffChildren = new Set();
+            if (yxml == null) {
-            mutations.forEach(mutation => {
+              // dom element is filtered
-              const dom = mutation.target;
+              return
-              const yxml = dom._yxml;
+            }
-              if (yxml == null) {
+            switch (mutation.type) {
-                // dom element is filtered
+              case 'characterData':
-                return
+                var diffs = diff_1(yxml.toString(), dom.nodeValue);
-              }
+                var pos = 0;
-              switch (mutation.type) {
+                for (var i = 0; i < diffs.length; i++) {
-                case 'characterData':
+                  var d = diffs[i];
-                  var diffs = diff_1(yxml.toString(), dom.nodeValue);
+                  if (d[0] === 0) { // EQUAL
-                  var pos = 0;
+                    pos += d[1].length;
-                  for (var i = 0; i < diffs.length; i++) {
+                  } else if (d[0] === -1) { // DELETE
-                    var d = diffs[i];
+                    yxml.delete(pos, d[1].length);
-                    if (d[0] === 0) { // EQUAL
+                  } else { // INSERT
-                      pos += d[1].length;
+                    yxml.insert(pos, d[1]);
-                    } else if (d[0] === -1) { // DELETE
+                    pos += d[1].length;
-                      yxml.delete(pos, d[1].length);
+                  }
-                    } else { // INSERT
+                }
-                      yxml.insert(pos, d[1]);
+                break
-                      pos += d[1].length;
+              case 'attributes':
+                let name = mutation.attributeName;
+                // check if filter accepts attribute
+                if (this._domFilter(dom, [name]).length > 0 && this.constructor !== YXmlFragment) {
+                  var val = dom.getAttribute(name);
+                  if (yxml.getAttribute(name) !== val) {
+                    if (val == null) {
+                      yxml.removeAttribute(name);
+                    } else {
+                      yxml.setAttribute(name, val);
                     }
                   }
-                  break
+                }
-                case 'attributes':
+                break
-                  let name = mutation.attributeName;
+              case 'childList':
-                  // check if filter accepts attribute
+                diffChildren.add(mutation.target);
-                  if (this._domFilter(dom, [name]).length > 0 && this.constructor !== YXmlFragment) {
+                break
-                    var val = dom.getAttribute(name);
-                    if (yxml.getAttribute(name) !== val) {
-                      if (val == null) {
-                        yxml.removeAttribute(name);
-                      } else {
-                        yxml.setAttribute(name, val);
-                      }
-                    }
-                  }
-                  break
-                case 'childList':
-                  diffChildren.add(mutation.target);
-                  break
-              }
-            });
-            for (let dom of diffChildren) {
-              if (dom._yxml != null && dom._yxml !== false) {
-                applyChangesFromDom(dom);
-              }
             }
           });
+          for (let dom of diffChildren) {
+            if (dom._yxml != null && dom._yxml !== false) {
+              applyChangesFromDom(dom);
+            }
+          }
         });
-      };
-      this._domObserver = new MutationObserver(this._domObserverListener);
-      this._domObserver.observe(dom, {
-        childList: true,
-        attributes: true,
-        characterData: true,
-        subtree: true
       });
-    }
+    };
+    this._domObserver = new MutationObserver(this._domObserverListener);
+    this._domObserver.observe(dom, {
+      childList: true,
+      attributes: true,
+      characterData: true,
+      subtree: true
+    });
     return dom
   }
   _logString () {
@@ -4039,7 +4046,7 @@ class YXmlFragment extends YArray {
 
 // import diff from 'fast-diff'
 class YXmlElement extends YXmlFragment {
-  constructor (arg1, arg2, _document) {
+  constructor (arg1, arg2) {
     super();
     this.nodeName = null;
     this._scrollElement = null;
@@ -4047,7 +4054,7 @@ class YXmlElement extends YXmlFragment {
       this.nodeName = arg1.toUpperCase();
     } else if (arg1 != null && arg1.nodeType != null && arg1.nodeType === arg1.ELEMENT_NODE) {
       this.nodeName = arg1.nodeName;
-      this._setDom(arg1, _document);
+      this._setDom(arg1);
     } else {
       this.nodeName = 'UNDEFINED';
     }
@@ -4060,12 +4067,14 @@ class YXmlElement extends YXmlFragment {
     struct.nodeName = this.nodeName;
     return struct
   }
-  _setDom (dom, _document) {
+  _setDom (dom) {
     if (this._dom != null) {
       throw new Error('Only call this method if you know what you are doing ;)')
     } else if (dom._yxml != null) { // TODO do i need to check this? - no.. but for dev purps..
       throw new Error('Already bound to an YXml type')
     } else {
+      this._dom = dom;
+      dom._yxml = this;
       // tag is already set in constructor
       // set attributes
       let attrNames = [];
@@ -4078,8 +4087,8 @@ class YXmlElement extends YXmlFragment {
         let attrValue = dom.getAttribute(attrName);
         this.setAttribute(attrName, attrValue);
       }
-      this.insertDomElements(0, Array.prototype.slice.call(dom.childNodes), _document);
+      this.insertDomElements(0, Array.prototype.slice.call(dom.childNodes));
-      this._bindToDom(dom, _document);
+      this._bindToDom(dom);
       return dom
     }
   }
@@ -4147,6 +4156,7 @@ class YXmlElement extends YXmlFragment {
     let dom = this._dom;
     if (dom == null) {
       dom = _document.createElement(this.nodeName);
+      this._dom = dom;
       dom._yxml = this;
       let attrs = this.getAttributes();
       for (let key in attrs) {
@@ -4155,7 +4165,7 @@ class YXmlElement extends YXmlFragment {
       this.forEach(yxml => {
         dom.appendChild(yxml.getDom(_document));
       });
-      this._bindToDom(dom, _document);
+      this._bindToDom(dom);
     }
     return dom
   }
@@ -4396,16 +4406,16 @@ class NamedEventHandler {
 }
 
 class ReverseOperation {
-  constructor (y, transaction) {
+  constructor (y) {
     this.created = new Date();
-    const beforeState = transaction.beforeState;
+    const beforeState = y._transaction.beforeState;
     this.toState = new ID(y.userID, y.ss.getState(y.userID) - 1);
     if (beforeState.has(y.userID)) {
       this.fromState = new ID(y.userID, beforeState.get(y.userID));
     } else {
       this.fromState = this.toState;
     }
-    this.deletedStructs = transaction.deletedStructs;
+    this.deletedStructs = y._transaction.deletedStructs;
   }
 }
 
@@ -4465,9 +4475,9 @@ class UndoManager {
     this._redoing = false;
     const y = scope._y;
     this.y = y;
-    y.on('afterTransaction', (y, transaction, remote) => {
+    y.on('afterTransaction', (y, remote) => {
-      if (!remote && transaction.changedParentTypes.has(scope)) {
+      if (!remote && y._transaction.changedParentTypes.has(scope)) {
-        let reverseOperation = new ReverseOperation(y, transaction);
+        let reverseOperation = new ReverseOperation(y);
         if (!this._undoing) {
           let lastUndoOp = this._undoBuffer.length > 0 ? this._undoBuffer[this._undoBuffer.length - 1] : null;
           if (lastUndoOp !== null && reverseOperation.created - lastUndoOp.created <= options.captureTimeout) {
@@ -4524,7 +4534,7 @@ var y = d * 365.25;
  * @api public
  */
 
-var index = function(val, options) {
+var ms = function(val, options) {
   options = options || {};
   var type = typeof val;
   if (type === 'string' && val.length > 0) {
@@ -4666,7 +4676,7 @@ exports.coerce = coerce;
 exports.disable = disable;
 exports.enable = enable;
 exports.enabled = enabled;
-exports.humanize = index;
+exports.humanize = ms;
 
 /**
  * The currently active debug mode names, and names to skip.
@@ -4725,8 +4735,8 @@ function createDebug(namespace) {
 
     // set `diff` timestamp
     var curr = +new Date();
-    var ms = curr - (prevTime || curr);
+    var ms$$1 = curr - (prevTime || curr);
-    self.diff = ms;
+    self.diff = ms$$1;
     self.prev = prevTime;
     self.curr = curr;
     prevTime = curr;
@@ -4745,19 +4755,19 @@ function createDebug(namespace) {
     }
 
     // apply any `formatters` transformations
-    var index$$1 = 0;
+    var index = 0;
     args[0] = args[0].replace(/%([a-zA-Z%])/g, function(match, format) {
       // if we encounter an escaped % then don't increase the array index
       if (match === '%%') return match;
-      index$$1++;
+      index++;
       var formatter = exports.formatters[format];
       if ('function' === typeof formatter) {
-        var val = args[index$$1];
+        var val = args[index];
         match = formatter.call(self, val);
 
         // now we need to remove `args[index]` since it's inlined in the `format`
-        args.splice(index$$1, 1);
+        args.splice(index, 1);
-        index$$1--;
+        index--;
       }
       return match;
     });
@@ -5423,8 +5433,8 @@ class Y$2 extends NamedEventHandler {
   transact (f, remote = false) {
     let initialCall = this._transaction === null;
     if (initialCall) {
+      this.emit('beforeTransaction', this, remote);
       this._transaction = new Transaction(this);
-      this.emit('beforeTransaction', this, this._transaction, remote);
     }
     try {
       f(this);
@@ -5455,8 +5465,11 @@ class Y$2 extends NamedEventHandler {
           type._deepEventHandler.callEventListeners(transaction, events);
         }
       });
-      // when all changes & events are processed, emit afterTransaction event
+      if (this._transaction === null) {
-      this.emit('afterTransaction', this, transaction, remote);
+        // when all changes & events are processed, emit afterTransaction event
+        // only when there are no more transactions
+        this.emit('afterTransaction', this, remote);
+      }
     }
   }
   // fake _start for root properties (y.set('name', type))
@@ -5726,7 +5739,7 @@ if (typeof Y !== 'undefined') {
 }
 
 var chance_1 = createCommonjsModule(function (module, exports) {
-//  Chance.js 1.0.10
+//  Chance.js 1.0.12
 //  http://chancejs.com
 //  (c) 2013 Victor Quinn
 //  Chance may be freely distributed or modified under the MIT license.
@@ -5791,7 +5804,7 @@ var chance_1 = createCommonjsModule(function (module, exports) {
         return this;
     }
 
-    Chance.prototype.VERSION = "1.0.10";
+    Chance.prototype.VERSION = "1.0.12";
 
     // Random helper functions
     function initOptions(options, defaults) {
@@ -6010,6 +6023,16 @@ var chance_1 = createCommonjsModule(function (module, exports) {
 		return integer.toString(16);
     };
 
+    Chance.prototype.letter = function(options) {
+        options = initOptions(options, {casing: 'lower'});
+        var pool = "abcdefghijklmnopqrstuvwxyz";
+        var letter = this.character({pool: pool});
+        if (options.casing === 'upper') {
+            letter = letter.toUpperCase();
+        }
+        return letter;
+    };
+
     /**
      *  Return a random string
      *
@@ -6952,8 +6975,25 @@ var chance_1 = createCommonjsModule(function (module, exports) {
         return this.word({length: options.length}) + '@' + (options.domain || this.domain());
     };
 
+    /**
+     * #Description:
+     * ===============================================
+     * Generate a random Facebook id, aka fbid.
+     *
+     * NOTE: At the moment (Sep 2017), Facebook ids are
+     * "numeric strings" of length 16.
+     * However, Facebook Graph API documentation states that
+     * "it is extremely likely to change over time".
+     * @see https://developers.facebook.com/docs/graph-api/overview/
+     *
+     * #Examples:
+     * ===============================================
+     * chance.fbid() => '1000035231661304'
+     *
+     * @return [string] facebook id
+     */
     Chance.prototype.fbid = function () {
-        return parseInt('10000' + this.natural({max: 100000000000}), 10);
+        return '10000' + this.string({pool: "1234567890", length: 11});
     };
 
     Chance.prototype.google_analytics = function () {
@@ -7794,8 +7834,72 @@ var chance_1 = createCommonjsModule(function (module, exports) {
 
     // -- End Regional
 
+    // -- Music --
+
+    Chance.prototype.note = function(options) {
+      // choices for 'notes' option:
+      // flatKey - chromatic scale with flat notes (default)
+      // sharpKey - chromatic scale with sharp notes
+      // flats - just flat notes
+      // sharps - just sharp notes
+      // naturals - just natural notes
+      // all - naturals, sharps and flats
+      options = initOptions(options, { notes : 'flatKey'});
+      var scales = {
+        naturals: ['C', 'D', 'E', 'F', 'G', 'A', 'B'],
+        flats: ['D♭', 'E♭', 'G♭', 'A♭', 'B♭'],
+        sharps: ['C♯', 'D♯', 'F♯', 'G♯', 'A♯']
+      };
+      scales.all = scales.naturals.concat(scales.flats.concat(scales.sharps));
+      scales.flatKey = scales.naturals.concat(scales.flats);
+      scales.sharpKey = scales.naturals.concat(scales.sharps);
+      return this.pickone(scales[options.notes]);
+    };
+
+    Chance.prototype.midi_note = function(options) {
+      var min = 0;
+      var max = 127;
+      options = initOptions(options, { min : min, max : max });
+      return this.integer({min: options.min, max: options.max});
+    };
+
+    Chance.prototype.chord_quality = function(options) {
+      options = initOptions(options, { jazz: true });
+      var chord_qualities = ['maj', 'min', 'aug', 'dim'];
+      if (options.jazz){
+        chord_qualities = [
+          'maj7',
+          'min7',
+          '7',
+          'sus',
+          'dim',
+          'ø'
+        ];
+      }
+      return this.pickone(chord_qualities);
+    };
+
+    Chance.prototype.chord = function (options) {
+      options = initOptions(options);
+      return this.note(options) + this.chord_quality(options);
+    };
+
+    Chance.prototype.tempo = function (options) {
+      var min = 40;
+      var max = 320;
+      options = initOptions(options, {min: min, max: max});
+      return this.integer({min: options.min, max: options.max});
+    };
+
+    // -- End Music
+
     // -- Miscellaneous --
 
+    // Coin - Flip, flip, flipadelphia
+    Chance.prototype.coin = function(options) {
+      return this.bool() ? "heads" : "tails";
+    };
+
     // Dice - For all the board game geeks out there, myself included ;)
     function diceFn (range) {
         return function () {
@@ -12985,6 +13089,19 @@ var chance_1 = createCommonjsModule(function (module, exports) {
 
 var chance_2 = chance_1.Chance;
 
+/**
+ * Try to merge all items in os with their successors.
+ *
+ * Some transformations (like delete) fragment items.
+ * Item(c: 'ab') + Delete(1,1) + Delete(0, 1) -> Item(c: 'a',deleted);Item(c: 'b',deleted)
+ *
+ * This functions merges the fragmented nodes together:
+ * Item(c: 'a',deleted);Item(c: 'b',deleted) -> Item(c: 'ab', deleted)
+ *
+ * TODO: The Tree implementation does not support deletions in-spot.
+ *       This is why all deletions must be performed after the traversal.
+ *
+ */
 function defragmentItemContent (y) {
   const os = y.os;
   if (os.length < 2) {
@@ -13142,7 +13259,7 @@ async function initArrays (t, opts) {
     result['array' + i] = y.define('array', Y$1.Array);
     result['map' + i] = y.define('map', Y$1.Map);
     result['xml' + i] = y.define('xml', Y$1.XmlElement);
-    y.get('xml').setDomFilter(function (d, attrs) {
+    y.get('xml', Y$1.Xml).setDomFilter(function (d, attrs) {
       if (d.nodeName === 'HIDDEN') {
         return null
       } else {
@@ -13263,7 +13380,7 @@ async function applyRandomTests (t, mods, iterations) {
   return initInformation
 }
 
-var index$1$1 = function (str) {
+var index$1 = function (str) {
 	return encodeURIComponent(str).replace(/[!'()*]/g, function (c) {
 		return '%' + c.charCodeAt(0).toString(16).toUpperCase();
 	});
@@ -13449,7 +13566,7 @@ function parserForArrayFormat(opts) {
 
 function encode(value, opts) {
 	if (opts.encode) {
-		return opts.strict ? index$1$1(value) : encodeURIComponent(value);
+		return opts.strict ? index$1(value) : encodeURIComponent(value);
 	}
 
 	return value;
@@ -13561,7 +13678,7 @@ var stringify = function (obj, opts) {
 	}).join('&') : '';
 };
 
-var index$2 = {
+var index = {
 	extract: extract,
 	parse: parse$1,
 	stringify: stringify
@@ -13576,7 +13693,7 @@ const browserSupport =
 
 function createTestLink (params) {
   if (typeof location !== 'undefined') {
-    var query = index$2.parse(location.search);
+    var query = index.parse(location.search);
     delete query.test;
     delete query.seed;
     delete query.args;
@@ -13586,7 +13703,7 @@ function createTestLink (params) {
         query[name] = params[name];
       }
     }
-    return location.protocol + '//' + location.host + location.pathname + '?' + index$2.stringify(query) + location.hash
+    return location.protocol + '//' + location.host + location.pathname + '?' + index.stringify(query) + location.hash
   }
 }
 
@@ -13597,7 +13714,7 @@ class TestHandler {
     this.repeatingRun = 0;
     this.tests = {};
     if (typeof location !== 'undefined') {
-      this.opts = index$2.parse(location.search);
+      this.opts = index.parse(location.search);
       if (this.opts.case != null) {
         this.opts.case = Number(this.opts.case);
       }
@@ -13738,7 +13855,7 @@ function createCommonjsModule$1(fn, module) {
 	return module = { exports: {} }, fn(module, module.exports), module.exports;
 }
 
-var isBrowser = typeof index$2 !== 'undefined';
+var isBrowser = typeof index !== 'undefined';
 
 var environment = {
 	isBrowser: isBrowser
@@ -18287,8 +18404,8 @@ var stacktraceGps = createCommonjsModule$1(function (module, exports) {
      * @returns {String} original representation of the base64-encoded string.
      */
     function _atob(b64str) {
-        if (typeof index$2 !== 'undefined' && index$2.atob) {
+        if (typeof index !== 'undefined' && index.atob) {
-            return index$2.atob(b64str);
+            return index.atob(b64str);
         } else {
             throw new Error('You must supply a polyfill for window.atob in this environment');
         }
@@ -18798,7 +18915,7 @@ var stacktrace = createCommonjsModule$1(function (module, exports) {
 }));
 });
 
-index$2.stacktrace = stacktrace;
+index.stacktrace = stacktrace;
 
 function test (testDescription, ...args) {
   let location = stacktrace.getSync()[1];
@@ -18807,9 +18924,6 @@ function test (testDescription, ...args) {
   testHandler.register(testCase);
 }
 
-
-//# sourceMappingURL=cutest.mjs.map
-
 test('set property', async function xml0 (t) {
   var { users, xml0, xml1 } = await initArrays(t, { users: 2 });
   xml0.setAttribute('height', 10);
@@ -19214,5 +19328,7 @@ test('y-xml: Random tests (1000)', async function xmlRandom1000 (t) {
   await applyRandomTests(t, xmlTransactions, 1000);
 });
 
+Object.defineProperty(exports, '__esModule', { value: true });
+
 })));
 //# sourceMappingURL=y.test.js.map