v13.0.0-27 -- distribution files

examples/html-editor/index.js

@@ -1,15 +1,4 @@
-/* global Y, HTMLElement, customElements */
+/* global Y */
-
-class MagicTable extends HTMLElement {
-  constructor () {
-    super()
-    var shadow = this.attachShadow({mode: 'open'})
-    setTimeout(() => {
-      shadow.append(this.childNodes[0])
-    }, 1000)
-  }
-}
-customElements.define('magic-table', MagicTable)
 
 // initialize a shared object. This function call returns a promise!
 let y = new Y({
@@ -28,14 +17,17 @@ window.onload = function () {
   window.yXmlType.bindToDom(document.body)
 }
 window.undoManager = new Y.utils.UndoManager(window.yXmlType, {
-  captureTimeout: 500
+  captureTimeout: 0
 })
 
 document.onkeydown = function interceptUndoRedo (e) {
   if (e.keyCode === 90 && e.metaKey) {
+    console.log('uidtaren')
     if (!e.shiftKey) {
+      console.info('Undo!')
       window.undoManager.undo()
     } else {
+      console.info('Redo!')
       window.undoManager.redo()
     }
     e.preventDefault()

package-lock.json

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

package.json

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

rollup.browser.js

@@ -5,13 +5,9 @@ import commonjs from 'rollup-plugin-commonjs'
 var pkg = require('./package.json')
 
 export default {
-  input: 'src/Y.js',
+  entry: 'src/Y.js',
-  name: 'Y',
+  moduleName: 'Y',
-  sourcemap: true,
+  format: 'umd',
-  output: {
-    file: 'y.js',
-    format: 'umd'
-  },
   plugins: [
     nodeResolve({
       main: true,
@@ -36,6 +32,8 @@ export default {
       }
     })
   ],
+  dest: 'y.js',
+  sourceMap: true,
   banner: `
 /**
  * ${pkg.name} - ${pkg.description}

rollup.node.js

@@ -3,13 +3,9 @@ import commonjs from 'rollup-plugin-commonjs'
 var pkg = require('./package.json')
 
 export default {
-  input: 'src/y-dist.cjs.js',
+  entry: 'src/y-dist.cjs.js',
-  nameame: 'Y',
+  moduleName: 'Y',
-  sourcemap: true,
+  format: 'cjs',
-  output: {
-    file: 'y.node.js',
-    format: 'cjs'
-  },
   plugins: [
     nodeResolve({
       main: true,
@@ -18,6 +14,8 @@ export default {
     }),
     commonjs()
   ],
+  dest: 'y.node.js',
+  sourceMap: true,
   banner: `
 /**
  * ${pkg.name} - ${pkg.description}

rollup.test.js

@@ -3,13 +3,9 @@ import commonjs from 'rollup-plugin-commonjs'
 import multiEntry from 'rollup-plugin-multi-entry'
 
 export default {
-  input: 'test/y-xml.tests.js',
+  entry: 'test/y-map.tests.js',
-  name: 'y-tests',
+  moduleName: 'y-tests',
-  sourcemap: true,
+  format: 'umd',
-  output: {
-    file: 'y.test.js',
-    format: 'umd'
-  },
   plugins: [
     nodeResolve({
       main: true,
@@ -18,5 +14,7 @@ export default {
     }),
     commonjs(),
     multiEntry()
-  ]
+  ],
+  dest: 'y.test.js',
+  sourceMap: true
 }

src/Struct/ItemJSON.js

@@ -20,13 +20,7 @@ export default class ItemJSON extends Item {
     this._content = new Array(len)
     for (let i = 0; i < len; i++) {
       const ctnt = decoder.readVarString()
-      let parsed
+      this._content[i] = JSON.parse(ctnt)
-      if (ctnt === 'undefined') {
-        parsed = undefined
-      } else {
-        parsed = JSON.parse(ctnt)
-      }
-      this._content[i] = parsed
     }
     return missing
   }
@@ -35,14 +29,7 @@ export default class ItemJSON extends Item {
     let len = this._content.length
     encoder.writeVarUint(len)
     for (let i = 0; i < len; i++) {
-      let encoded
+      encoder.writeVarString(JSON.stringify(this._content[i]))
-      let content = this._content[i]
-      if (content === undefined) {
-        encoded = 'undefined'
-      } else {
-        encoded = JSON.stringify(content)
-      }
-      encoder.writeVarString(encoded)
     }
   }
   _logString () {

src/Struct/Type.js

@@ -65,9 +65,9 @@ export default class Type extends Item {
     }
     return path
   }
-  _callEventHandler (transaction, event) {
+  _callEventHandler (event) {
-    const changedParentTypes = transaction.changedParentTypes
+    const changedParentTypes = this._y._transaction.changedParentTypes
-    this._eventHandler.callEventListeners(transaction, event)
+    this._eventHandler.callEventListeners(event)
     let type = this
     while (type !== this._y) {
       let events = changedParentTypes.get(type)

src/Type/YArray.js

@@ -12,8 +12,8 @@ class YArrayEvent extends YEvent {
 }
 
 export default class YArray extends Type {
-  _callObserver (transaction, parentSubs, remote) {
+  _callObserver (parentSubs, remote) {
-    this._callEventHandler(transaction, new YArrayEvent(this, remote))
+    this._callEventHandler(new YArrayEvent(this, remote))
   }
   get (pos) {
     let n = this._start

src/Type/YMap.js

@@ -13,8 +13,8 @@ class YMapEvent extends YEvent {
 }
 
 export default class YMap extends Type {
-  _callObserver (transaction, parentSubs, remote) {
+  _callObserver (parentSubs, remote) {
-    this._callEventHandler(transaction, new YMapEvent(this, parentSubs, remote))
+    this._callEventHandler(new YMapEvent(this, parentSubs, remote))
   }
   toJSON () {
     const map = {}

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
       }
     }
@@ -144,8 +142,8 @@ export default class YXmlFragment extends YArray {
       xml.setDomFilter(f)
     })
   }
-  _callObserver (transaction, parentSubs, remote) {
+  _callObserver (parentSubs, remote) {
-    this._callEventHandler(transaction, new YXmlEvent(this, parentSubs, remote))
+    this._callEventHandler(new YXmlEvent(this, parentSubs, remote))
   }
   toString () {
     return this.map(xml => xml.toString()).join('')
@@ -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/selection.js

@@ -7,7 +7,7 @@ let relativeSelection = null
 
 export let beforeTransactionSelectionFixer
 if (typeof getSelection !== 'undefined') {
-  beforeTransactionSelectionFixer = function _beforeTransactionSelectionFixer (y, transaction, remote) {
+  beforeTransactionSelectionFixer = function _beforeTransactionSelectionFixer (y, remote) {
     if (!remote) {
       return
     }
@@ -30,7 +30,7 @@ if (typeof getSelection !== 'undefined') {
   beforeTransactionSelectionFixer = function _fakeBeforeTransactionSelectionFixer () {}
 }
 
-export function afterTransactionSelectionFixer (y, transaction, remote) {
+export function afterTransactionSelectionFixer (y, remote) {
   if (relativeSelection === null || !remote) {
     return
   }

src/Type/y-xml/utils.js

@@ -135,33 +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
-  /*
-  events.forEach(event => {
-    const target = event.target
-    if (event.attributesChanged === undefined) {
-      // event.target is Y.XmlText
-      return
-    }
-    const keys = this._domFilter(target.nodeName, Array.from(event.attributesChanged))
-    if (keys === null) {
-      target._delete()
-    } else {
-      const removeKeys = new Set() // is a copy of event.attributesChanged
-      event.attributesChanged.forEach(key => { removeKeys.add(key) })
-      keys.forEach(key => {
-        // remove all accepted keys from removeKeys
-        removeKeys.delete(key)
-      })
-      // remove the filtered attribute
-      removeKeys.forEach(key => {
-        target.removeAttribute(key)
-      })
-    }
-  })
-  */
   this._mutualExclude(() => {
     events.forEach(event => {
       const yxml = event.target
@@ -183,9 +157,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 +168,7 @@ export function reflectChangesOnDom (events, _document) {
               lastChild = dom.lastChild
             }
             // insert fragment of undeleted nodes
-            dom.appendChild(fragment)
+            dom.append(fragment)
           }
         }
         /* TODO: smartscrolling

src/Util/EventHandler.js

@@ -17,7 +17,7 @@ export default class EventHandler {
   removeAllEventListeners () {
     this.eventListeners = []
   }
-  callEventListeners (transaction, event) {
+  callEventListeners (event) {
     for (var i = 0; i < this.eventListeners.length; i++) {
       try {
         const f = this.eventListeners[i]

src/Util/UndoManager.js

@@ -1,16 +1,16 @@
 import ID from './ID.js'
 
 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
   }
 }
 
@@ -70,9 +70,9 @@ export default 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) {

src/Y.js

@@ -15,7 +15,6 @@ import YMap from './Type/YMap.js'
 import YText from './Type/YText.js'
 import { YXmlFragment, YXmlElement, YXmlText } from './Type/y-xml/y-xml.js'
 import BinaryDecoder from './Binary/Decoder.js'
-import { getRelativePosition, fromRelativePosition } from './Util/relativePosition.js'
 
 import debug from 'debug'
 import Transaction from './Transaction.js'
@@ -45,8 +44,8 @@ export default class Y 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)
@@ -54,15 +53,13 @@ export default class Y extends NamedEventHandler {
       console.error(e)
     }
     if (initialCall) {
-      const transaction = this._transaction
-      this._transaction = null
       // emit change events on changed types
-      transaction.changedTypes.forEach(function (subs, type) {
+      this._transaction.changedTypes.forEach(function (subs, type) {
         if (!type._deleted) {
-          type._callObserver(transaction, subs, remote)
+          type._callObserver(subs, remote)
         }
       })
-      transaction.changedParentTypes.forEach(function (events, type) {
+      this._transaction.changedParentTypes.forEach(function (events, type) {
         if (!type._deleted) {
           events = events
             .filter(event =>
@@ -74,11 +71,12 @@ export default class Y extends NamedEventHandler {
             })
           // we don't have to check for events.length
           // because there is no way events is empty..
-          type._deepEventHandler.callEventListeners(transaction, events)
+          type._deepEventHandler.callEventListeners(events)
         }
       })
       // when all changes & events are processed, emit afterTransaction event
-      this.emit('afterTransaction', this, transaction, remote)
+      this.emit('afterTransaction', this, remote)
+      this._transaction = null
     }
   }
   // fake _start for root properties (y.set('name', type))
@@ -170,9 +168,7 @@ Y.XmlText = YXmlText
 
 Y.utils = {
   BinaryDecoder,
-  UndoManager,
+  UndoManager
-  getRelativePosition,
-  fromRelativePosition
 }
 
 Y.debug = debug

test/y-map.tests.js

@@ -41,8 +41,6 @@ test('basic map tests', async function map0 (t) {
 test('Basic get&set of Map property (converge via sync)', async function map1 (t) {
   let { users, map0 } = await initArrays(t, { users: 2 })
   map0.set('stuff', 'stuffy')
-  map0.set('undefined', undefined)
-  map0.set('null', null)
   t.compare(map0.get('stuff'), 'stuffy')
 
   await flushAll(t, users)
@@ -50,8 +48,6 @@ test('Basic get&set of Map property (converge via sync)', async function map1 (t
   for (let user of users) {
     var u = user.get('map', Y.Map)
     t.compare(u.get('stuff'), 'stuffy')
-    t.assert(u.get('undefined') === undefined, 'undefined')
-    t.compare(u.get('null'), null, 'null')
   }
   await compareUsers(t, users)
 })

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-27
  * @license MIT
  */
 
@@ -1899,7 +1899,7 @@ class EventHandler {
   removeAllEventListeners () {
     this.eventListeners = [];
   }
-  callEventListeners (transaction, event) {
+  callEventListeners (event) {
     for (var i = 0; i < this.eventListeners.length; i++) {
       try {
         const f = this.eventListeners[i];
@@ -1966,9 +1966,9 @@ class Type extends Item {
     }
     return path
   }
-  _callEventHandler (transaction, event) {
+  _callEventHandler (event) {
-    const changedParentTypes = transaction.changedParentTypes;
+    const changedParentTypes = this._y._transaction.changedParentTypes;
-    this._eventHandler.callEventListeners(transaction, event);
+    this._eventHandler.callEventListeners(event);
     let type = this;
     while (type !== this._y) {
       let events = changedParentTypes.get(type);
@@ -2091,13 +2091,7 @@ class ItemJSON extends Item {
     this._content = new Array(len);
     for (let i = 0; i < len; i++) {
       const ctnt = decoder.readVarString();
-      let parsed;
+      this._content[i] = JSON.parse(ctnt);
-      if (ctnt === 'undefined') {
-        parsed = undefined;
-      } else {
-        parsed = JSON.parse(ctnt);
-      }
-      this._content[i] = parsed;
     }
     return missing
   }
@@ -2106,14 +2100,7 @@ class ItemJSON extends Item {
     let len = this._content.length;
     encoder.writeVarUint(len);
     for (let i = 0; i < len; i++) {
-      let encoded;
+      encoder.writeVarString(JSON.stringify(this._content[i]));
-      let content = this._content[i];
-      if (content === undefined) {
-        encoded = 'undefined';
-      } else {
-        encoded = JSON.stringify(content);
-      }
-      encoder.writeVarString(encoded);
     }
   }
   _logString () {
@@ -2211,8 +2198,8 @@ class YArrayEvent extends YEvent {
 }
 
 class YArray extends Type {
-  _callObserver (transaction, parentSubs, remote) {
+  _callObserver (parentSubs, remote) {
-    this._callEventHandler(transaction, new YArrayEvent(this, remote));
+    this._callEventHandler(new YArrayEvent(this, remote));
   }
   get (pos) {
     let n = this._start;
@@ -2429,8 +2416,8 @@ class YMapEvent extends YEvent {
 }
 
 class YMap extends Type {
-  _callObserver (transaction, parentSubs, remote) {
+  _callObserver (parentSubs, remote) {
-    this._callEventHandler(transaction, new YMapEvent(this, parentSubs, remote));
+    this._callEventHandler(new YMapEvent(this, parentSubs, remote));
   }
   toJSON () {
     const map = {};
@@ -2776,33 +2763,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
-  /*
-  events.forEach(event => {
-    const target = event.target
-    if (event.attributesChanged === undefined) {
-      // event.target is Y.XmlText
-      return
-    }
-    const keys = this._domFilter(target.nodeName, Array.from(event.attributesChanged))
-    if (keys === null) {
-      target._delete()
-    } else {
-      const removeKeys = new Set() // is a copy of event.attributesChanged
-      event.attributesChanged.forEach(key => { removeKeys.add(key) })
-      keys.forEach(key => {
-        // remove all accepted keys from removeKeys
-        removeKeys.delete(key)
-      })
-      // remove the filtered attribute
-      removeKeys.forEach(key => {
-        target.removeAttribute(key)
-      })
-    }
-  })
-  */
   this._mutualExclude(() => {
     events.forEach(event => {
       const yxml = event.target;
@@ -2824,9 +2785,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 +2796,7 @@ function reflectChangesOnDom (events, _document) {
               lastChild = dom.lastChild;
             }
             // insert fragment of undeleted nodes
-            dom.appendChild(fragment);
+            dom.append(fragment);
           }
         }
         /* TODO: smartscrolling
@@ -2956,7 +2917,7 @@ let relativeSelection = null;
 
 let beforeTransactionSelectionFixer;
 if (typeof getSelection !== 'undefined') {
-  beforeTransactionSelectionFixer = function _beforeTransactionSelectionFixer (y, transaction, remote) {
+  beforeTransactionSelectionFixer = function _beforeTransactionSelectionFixer (y, remote) {
     if (!remote) {
       return
     }
@@ -2979,7 +2940,7 @@ if (typeof getSelection !== 'undefined') {
   beforeTransactionSelectionFixer = function _fakeBeforeTransactionSelectionFixer () {};
 }
 
-function afterTransactionSelectionFixer (y, transaction, remote) {
+function afterTransactionSelectionFixer (y, remote) {
   if (relativeSelection === null || !remote) {
     return
   }
@@ -3778,7 +3739,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 +3750,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 +3828,7 @@ class YXmlFragment extends YArray {
         } catch (e) {
           console.error(e);
         }
-        if (this._domObserver !== null) {
+        this._domObserver.takeRecords();
-          this._domObserver.takeRecords();
-        }
         token = true;
       }
     };
@@ -3913,8 +3872,8 @@ class YXmlFragment extends YArray {
       xml.setDomFilter(f);
     });
   }
-  _callObserver (transaction, parentSubs, remote) {
+  _callObserver (parentSubs, remote) {
-    this._callEventHandler(transaction, new YXmlEvent(this, parentSubs, remote));
+    this._callEventHandler(new YXmlEvent(this, parentSubs, remote));
   }
   toString () {
     return this.map(xml => xml.toString()).join('')
@@ -3933,116 +3892,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 +4010,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 +4018,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 +4031,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 +4051,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 +4120,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 +4129,7 @@ class YXmlElement extends YXmlFragment {
       this.forEach(yxml => {
         dom.appendChild(yxml.getDom(_document));
       });
-      this._bindToDom(dom, _document);
+      this._bindToDom(dom);
     }
     return dom
   }
@@ -4411,16 +4370,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;
   }
 }
 
@@ -4480,9 +4439,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) {
@@ -5438,8 +5397,8 @@ class Y$1 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);
@@ -5447,15 +5406,13 @@ class Y$1 extends NamedEventHandler {
       console.error(e);
     }
     if (initialCall) {
-      const transaction = this._transaction;
-      this._transaction = null;
       // emit change events on changed types
-      transaction.changedTypes.forEach(function (subs, type) {
+      this._transaction.changedTypes.forEach(function (subs, type) {
         if (!type._deleted) {
-          type._callObserver(transaction, subs, remote);
+          type._callObserver(subs, remote);
         }
       });
-      transaction.changedParentTypes.forEach(function (events, type) {
+      this._transaction.changedParentTypes.forEach(function (events, type) {
         if (!type._deleted) {
           events = events
             .filter(event =>
@@ -5467,11 +5424,12 @@ class Y$1 extends NamedEventHandler {
             });
           // we don't have to check for events.length
           // because there is no way events is empty..
-          type._deepEventHandler.callEventListeners(transaction, events);
+          type._deepEventHandler.callEventListeners(events);
         }
       });
       // when all changes & events are processed, emit afterTransaction event
-      this.emit('afterTransaction', this, transaction, remote);
+      this.emit('afterTransaction', this, remote);
+      this._transaction = null;
     }
   }
   // fake _start for root properties (y.set('name', type))
@@ -5563,9 +5521,7 @@ Y$1.XmlText = YXmlText;
 
 Y$1.utils = {
   BinaryDecoder,
-  UndoManager,
+  UndoManager
-  getRelativePosition,
-  fromRelativePosition
 };
 
 Y$1.debug = browser;