13.0.0-76

.babelrc

@@ -1,12 +0,0 @@
-{
-  "presets": [
-    ["latest", {
-      "es2015": {
-        "modules": false
-      }
-    }]
-  ],
-  "plugins": [
-    "external-helpers"
-  ]
-}

.esdoc.json

@@ -1,6 +1,7 @@
 {
-  "source": "./src",
+  "source": ".",
   "destination": "./docs",
+  "excludes": ["build", "node_modules", "tests-lib", "test"],
   "plugins": [{
     "name": "esdoc-standard-plugin",
     "option": {

.flowconfig

@@ -1,14 +0,0 @@
-[ignore]
-.*/node_modules/.*
-.*/dist/.*
-.*/build/.*
-
-[include]
-./src/
-./tests-lib/
-./test/
-
-[libs]
-./declarations/
-
-[options]

.gitignore

@@ -2,6 +2,7 @@ node_modules
 bower_components
 docs
 /y.*
-/examples/yjs-dist.js*
+/examples_all/*/index.dist.*
 .vscode
 .yjsPersisted
+build

.jsdoc.json

@@ -0,0 +1,50 @@
+{
+  "sourceType": "module",
+  "tags": {
+    "allowUnknownTags": true,
+    "dictionaries": ["jsdoc"]
+  },
+  "source": {
+    "include": ["./types", "./utils/UndoManager.js", "./utils/Y.js", "./provider", "./bindings"],
+    "includePattern": ".js$"
+  },
+  "plugins": [
+    "plugins/markdown"
+  ],
+  "templates": {
+    "referenceTitle": "Yjs",
+    "disableSort": false,
+    "useCollapsibles": true,
+    "collapse": true,
+    "resources": {
+      "y-js.org": "yjs.website"
+    },
+    "logo": {
+      "url": "https://user-images.githubusercontent.com/5553757/48975307-61efb100-f06d-11e8-9177-ee895e5916e5.png",
+      "width": "162px",
+      "height": "162px",
+      "link": "/"
+    },
+    "tabNames": {
+      "api": "API",
+      "tutorials": "Examples"
+    },
+    "footerText": "Shared Editing",
+    "css": [
+      "./style.css"
+    ],
+    "default": {
+      "staticFiles": {
+          "include": ["examples/"]
+      }
+    }
+  },
+  "opts": {
+    "destination": "./docs/",
+    "encoding": "utf8",
+    "private": false,
+    "recurse": true,
+    "template": "./node_modules/tui-jsdoc-template",
+    "tutorials": "./examples"
+  }
+}

README.md

@@ -1,5 +1,5 @@
 
-# ![Yjs](http://y-js.org/images/yjs.png)
+# ![Yjs](https://user-images.githubusercontent.com/5553757/48975307-61efb100-f06d-11e8-9177-ee895e5916e5.png)
 
 Yjs is a framework for offline-first p2p shared editing on structured data like
 text, richtext, json, or XML. It is fairly easy to get started, as Yjs hides
@@ -66,7 +66,7 @@ missing modules.
 
 ### CDN
 ```
-<script src="https://cdn.jsdelivr.net/npm/yjs@12/src/y.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/yjs@12/dist/y.js"></script>
 <script src="https://cdn.jsdelivr.net/npm/y-array@10/dist/y-array.js"></script>
 <script src="https://cdn.jsdelivr.net/npm/y-websockets-client@8/dist/y-websockets-client.js"></script>
 <script src="https://cdn.jsdelivr.net/npm/y-memory@8/dist/y-memory.js"></script>
@@ -248,7 +248,7 @@ The promise returns an instance of Y. We denote it with a lower case `y`.
   * y-websockets-client aways waits to sync with the server
 * y.connector.disconnect()
   * Force to disconnect this instance from the other instances
-* y.connector.reconnect()
+* y.connector.connect()
   * Try to reconnect to the other instances (needs to be supported by the
     connector)
   * Not supported by y-xmpp

README.v13.md

@@ -0,0 +1,21 @@
+# ![Yjs](https://user-images.githubusercontent.com/5553757/48975307-61efb100-f06d-11e8-9177-ee895e5916e5.png)
+> A CRDT library with a powerful abstraction of shared data
+
+Yjs v13 is a work in progress.
+
+### Typescript Declarations
+
+Until [this](https://github.com/Microsoft/TypeScript/issues/7546) is fixed, the only way to get type declarations is by adding Yjs to the list of checked files:
+
+```json
+{
+  "compilerOptions": {
+    "allowJs": true,
+    "checkJs": true,
+    ..
+  },
+  "include": [
+    "./node_modules/yjs/"
+  ]
+}
+```

bindings/dom.js

@@ -0,0 +1 @@
+export * from './dom/DomBinding.js'

bindings/dom/DomBinding.js

@@ -0,0 +1,248 @@
+/**
+ * @module bindings/dom
+ */
+
+/* global MutationObserver, getSelection */
+
+import { fromRelativePosition } from '../../utils/relativePosition.js'
+import { createMutex } from '../../lib/mutex.js'
+import { createAssociation, removeAssociation } from './util.js'
+import { beforeTransactionSelectionFixer, afterTransactionSelectionFixer, getCurrentRelativeSelection } from './selection.js'
+import { defaultFilter, applyFilterOnType } from './filter.js'
+import { typeObserver } from './typeObserver.js'
+import { domObserver } from './domObserver.js'
+import { YXmlFragment } from '../../types/YXmlElement.js' // eslint-disable-line
+
+/**
+ * @callback DomFilter
+ * @param {string} nodeName
+ * @param {Map<string, string>} attrs
+ * @return {Map | null}
+ */
+
+/**
+ * A binding that binds the children of a YXmlFragment to a DOM element.
+ *
+ * This binding is automatically destroyed when its parent is deleted.
+ *
+ * @example
+ * const div = document.createElement('div')
+ * const type = y.define('xml', Y.XmlFragment)
+ * const binding = new Y.QuillBinding(type, div)
+ *
+ * @class
+ */
+export class DomBinding {
+  /**
+   * @param {YXmlFragment} type The bind source. This is the ultimate source of
+   *                            truth.
+   * @param {Element} target The bind target. Mirrors the target.
+   * @param {Object} [opts] Optional configurations
+
+   * @param {DomFilter} [opts.filter=defaultFilter] The filter function to use.
+   * @param {Document} [opts.document=document] The filter function to use.
+   * @param {Object} [opts.hooks] The filter function to use.
+   * @param {Element} [opts.scrollingElement=null] The filter function to use.
+   */
+  constructor (type, target, opts = {}) {
+    // Binding handles textType as this.type and domTextarea as this.target
+    /**
+     * The Yjs type that is bound to `target`
+     * @type {YXmlFragment}
+     */
+    this.type = type
+    /**
+     * The target that `type` is bound to.
+     * @type {Element}
+     */
+    this.target = target
+    /**
+     * @private
+     */
+    this._mutualExclude = createMutex()
+    this.opts = opts
+    opts.document = opts.document || document
+    opts.hooks = opts.hooks || {}
+    this.scrollingElement = opts.scrollingElement || null
+    /**
+     * Maps each DOM element to the type that it is associated with.
+     * @type {Map}
+     */
+    this.domToType = new Map()
+    /**
+     * Maps each YXml type to the DOM element that it is associated with.
+     * @type {Map}
+     */
+    this.typeToDom = new Map()
+    /**
+     * Defines which DOM attributes and elements to filter out.
+     * Also filters remote changes.
+     * @type {DomFilter}
+     */
+    this.filter = opts.filter || defaultFilter
+    // set initial value
+    target.innerHTML = ''
+    type.forEach(child => {
+      target.insertBefore(child.toDom(opts.document, opts.hooks, this), null)
+    })
+    this._typeObserver = typeObserver.bind(this)
+    this._domObserver = mutations => {
+      domObserver.call(this, mutations, opts.document)
+    }
+    type.observeDeep(this._typeObserver)
+    this._mutationObserver = new MutationObserver(this._domObserver)
+    this._mutationObserver.observe(target, {
+      childList: true,
+      attributes: true,
+      characterData: true,
+      subtree: true
+    })
+    this._currentSel = null
+    this._selectionchange = () => {
+      this._currentSel = getCurrentRelativeSelection(this)
+    }
+    document.addEventListener('selectionchange', this._selectionchange)
+    const y = type._y
+    this.y = y
+    // Force flush dom changes before Type changes are applied (they might
+    // modify the dom)
+    this._beforeTransactionHandler = y => {
+      this._domObserver(this._mutationObserver.takeRecords())
+      this._mutualExclude(() => {
+        beforeTransactionSelectionFixer(this)
+      })
+    }
+    y.on('beforeTransaction', this._beforeTransactionHandler)
+    this._afterTransactionHandler = (y, transaction) => {
+      this._mutualExclude(() => {
+        afterTransactionSelectionFixer(this)
+      })
+      // remove associations
+      // TODO: this could be done more efficiently
+      // e.g. Always delete using the following approach, or removeAssociation
+      // in dom/type-observer..
+      transaction.deletedStructs.forEach(type => {
+        const dom = this.typeToDom.get(type)
+        if (dom !== undefined) {
+          removeAssociation(this, dom, type)
+        }
+      })
+    }
+    y.on('afterTransaction', this._afterTransactionHandler)
+    // Before calling observers, apply dom filter to all changed and new types.
+    this._beforeObserverCallsHandler = (y, transaction) => {
+      // Apply dom filter to new and changed types
+      transaction.changedTypes.forEach((subs, type) => {
+        // Only check attributes. New types are filtered below.
+        if ((subs.size > 1 || (subs.size === 1 && subs.has(null) === false))) {
+          applyFilterOnType(y, this, type)
+        }
+      })
+      transaction.newTypes.forEach(type => {
+        applyFilterOnType(y, this, type)
+      })
+    }
+    y.on('beforeObserverCalls', this._beforeObserverCallsHandler)
+    createAssociation(this, target, type)
+  }
+
+  flushDomChanges () {
+    this._domObserver(this._mutationObserver.takeRecords())
+  }
+
+  /**
+   * NOTE:
+   * * does not apply filter to existing elements!
+   * * only guarantees that changes are filtered locally. Remote sites may see different content.
+   *
+   * @param {DomFilter} filter The filter function to use from now on.
+   */
+  setFilter (filter) {
+    this.filter = filter
+    // TODO: apply filter to all elements
+  }
+
+  _getUndoStackInfo () {
+    return this.getSelection()
+  }
+
+  _restoreUndoStackInfo (info) {
+    this.restoreSelection(info)
+  }
+
+  getSelection () {
+    return this._currentSel
+  }
+
+  restoreSelection (selection) {
+    if (selection !== null) {
+      const { to, from } = selection
+      /**
+       * There is little information on the difference between anchor/focus and base/extent.
+       * MDN doesn't even mention base/extent anymore.. though you still have to call
+       * setBaseAndExtent to change the selection..
+       * I can observe that base/extend refer to notes higher up in the xml hierachy.
+       * Espesially for undo/redo this is preferred. If this becomes a problem in the future,
+       * we should probably go back to anchor/focus.
+       */
+      const browserSelection = getSelection()
+      let { baseNode, baseOffset, extentNode, extentOffset } = browserSelection
+      if (from !== null) {
+        let sel = fromRelativePosition(this.y, from)
+        if (sel !== null) {
+          let node = this.typeToDom.get(sel.type)
+          let offset = sel.offset
+          if (node !== baseNode || offset !== baseOffset) {
+            baseNode = node
+            baseOffset = offset
+          }
+        }
+      }
+      if (to !== null) {
+        let sel = fromRelativePosition(this.y, to)
+        if (sel !== null) {
+          let node = this.typeToDom.get(sel.type)
+          let offset = sel.offset
+          if (node !== extentNode || offset !== extentOffset) {
+            extentNode = node
+            extentOffset = offset
+          }
+        }
+      }
+      browserSelection.setBaseAndExtent(
+        baseNode,
+        baseOffset,
+        extentNode,
+        extentOffset
+      )
+    }
+  }
+
+  /**
+   * Remove all properties that are handled by this class.
+   */
+  destroy () {
+    this.domToType = null
+    this.typeToDom = null
+    this.type.unobserveDeep(this._typeObserver)
+    this._mutationObserver.disconnect()
+    const y = this.type._y
+    y.off('beforeTransaction', this._beforeTransactionHandler)
+    y.off('beforeObserverCalls', this._beforeObserverCallsHandler)
+    y.off('afterTransaction', this._afterTransactionHandler)
+    document.removeEventListener('selectionchange', this._selectionchange)
+    this.type = null
+    this.target = null
+  }
+}
+
+/**
+ * A filter defines which elements and attributes to share.
+ * Return null if the node should be filtered. Otherwise return the Map of
+ * accepted attributes.
+ *
+ * @callback FilterFunction
+ * @param {string} nodeName
+ * @param {Map} attrs
+ * @return {Map|null}
+ */

bindings/dom/domObserver.js

@@ -1,11 +1,14 @@
+/**
+ * @module bindings/dom
+ */
 
-import YXmlHook from '../../Types/YXml/YXmlHook.mjs'
+import { YXmlHook } from '../../types/YXmlHook.js'
 import {
   iterateUntilUndeleted,
   removeAssociation,
-  insertNodeHelper } from './util.mjs'
-import diff from '../../Util/simpleDiff.mjs'
-import YXmlFragment from '../../Types/YXml/YXmlFragment.mjs'
+  insertNodeHelper } from './util.js'
+import { simpleDiff } from '../../lib/diff.js'
+import { YXmlFragment } from '../../types/YXmlElement.js'
 
 /**
  * 1. Check if any of the nodes was deleted
@@ -17,9 +20,11 @@ import YXmlFragment from '../../Types/YXml/YXmlFragment.mjs'
  *       recreate a new yxml element that is bound to that node.
  *       You can detect that a node was moved because expectedId
  *       !== actualId in the list
+ *
+ * @function
  * @private
  */
-function applyChangesFromDom (binding, dom, yxml, _document) {
+const applyChangesFromDom = (binding, dom, yxml, _document) => {
   if (yxml == null || yxml === false || yxml.constructor === YXmlHook) {
     return
   }
@@ -32,7 +37,7 @@ function applyChangesFromDom (binding, dom, yxml, _document) {
     }
   }
   // 1. Check if any of the nodes was deleted
-  yxml.forEach(function (childType) {
+  yxml.forEach(childType => {
     if (knownChildren.has(childType) === false) {
       childType._delete(y)
       removeAssociation(binding, binding.typeToDom.get(childType), childType)
@@ -82,8 +87,9 @@ function applyChangesFromDom (binding, dom, yxml, _document) {
 
 /**
  * @private
+ * @function
  */
-export default function domObserver (mutations, _document) {
+export function domObserver (mutations, _document) {
   this._mutualExclude(() => {
     this.type._y.transact(() => {
       let diffChildren = new Set()
@@ -107,7 +113,7 @@ export default function domObserver (mutations, _document) {
         }
         switch (mutation.type) {
           case 'characterData':
-            var change = diff(yxml.toString(), dom.nodeValue)
+            var change = simpleDiff(yxml.toString(), dom.nodeValue)
             yxml.delete(change.pos, change.remove)
             yxml.insert(change.pos, change.insert)
             break

bindings/dom/domToType.js

@@ -0,0 +1,74 @@
+/**
+ * @module bindings/dom
+ */
+
+/* eslint-env browser */
+import { YXmlText } from '../../types/YXmlText.js'
+import { YXmlHook } from '../../types/YXmlHook.js'
+import { YXmlElement } from '../../types/YXmlElement.js'
+import { createAssociation, domsToTypes } from './util.js'
+import { filterDomAttributes, defaultFilter } from './filter.js'
+import { DomBinding } from './DomBinding.js' // eslint-disable-line
+
+/**
+ * @callback DomFilter
+ * @param {string} nodeName
+ * @param {Map<string, string>} attrs
+ * @return {Map | null}
+ */
+
+/**
+ * Creates a Yjs type (YXml) based on the contents of a DOM Element.
+ *
+ * @function
+ * @param {Element|Text} element The DOM Element
+ * @param {?Document} _document Optional. Provide the global document object
+ * @param {Object<string, any>} [hooks = {}] Optional. Set of Yjs Hooks
+ * @param {DomFilter} [filter=defaultFilter] Optional. Dom element filter
+ * @param {?DomBinding} binding Warning: This property is for internal use only!
+ * @return {YXmlElement | YXmlText | false}
+ */
+export const domToType = (element, _document = document, hooks = {}, filter = defaultFilter, binding) => {
+  /**
+   * @type {any}
+   */
+  let type = null
+  if (element instanceof Element) {
+    let hookName = null
+    let hook
+    // configure `hookName !== undefined` if element is a hook.
+    if (element.hasAttribute('data-yjs-hook')) {
+      hookName = element.getAttribute('data-yjs-hook')
+      hook = hooks[hookName]
+      if (hook === undefined) {
+        console.error(`Unknown hook "${hookName}". Deleting yjsHook dataset property.`)
+        element.removeAttribute('data-yjs-hook')
+        hookName = null
+      }
+    }
+    if (hookName === null) {
+      // Not a hook
+      const attrs = filterDomAttributes(element, filter)
+      if (attrs === null) {
+        type = false
+      } else {
+        type = new YXmlElement(element.nodeName)
+        attrs.forEach((val, key) => {
+          type.setAttribute(key, val)
+        })
+        type.insert(0, domsToTypes(element.childNodes, document, hooks, filter, binding))
+      }
+    } else {
+      // Is a hook
+      type = new YXmlHook(hookName)
+      hook.fillType(element, type)
+    }
+  } else if (element instanceof Text) {
+    type = new YXmlText()
+    type.insert(0, element.nodeValue)
+  } else {
+    throw new Error('Can\'t transform this node type to a YXml type!')
+  }
+  createAssociation(binding, element, type)
+  return type
+}

bindings/dom/filter.js

@@ -1,22 +1,33 @@
-import isParentOf from '../../Util/isParentOf.mjs'
+/**
+ * @module bindings/dom
+ */
+
+import { Y } from '../../utils/Y.js' // eslint-disable-line
+import { YXmlElement, YXmlFragment } from '../../types/YXmlElement.js' // eslint-disable-line
+import { isParentOf } from '../../utils/isParentOf.js'
+import { DomBinding } from './DomBinding.js' // eslint-disable-line
 
 /**
  * Default filter method (does nothing).
  *
+ * @function
  * @param {String} nodeName The nodeName of the element
  * @param {Map} attrs Map of key-value pairs that are attributes of the node.
  * @return {Map | null} The allowed attributes or null, if the element should be
  *                      filtered.
  */
-export function defaultFilter (nodeName, attrs) {
+export const defaultFilter = (nodeName, attrs) => {
   // TODO: implement basic filter that filters out dangerous properties!
   return attrs
 }
 
 /**
- *
+ * @private
+ * @function
+ * @param {Element} dom
+ * @param {Function} filter
  */
-export function filterDomAttributes (dom, filter) {
+export const filterDomAttributes = (dom, filter) => {
   const attrs = new Map()
   for (let i = dom.attributes.length - 1; i >= 0; i--) {
     const attr = dom.attributes[i]
@@ -28,14 +39,14 @@ export function filterDomAttributes (dom, filter) {
 /**
  * Applies a filter on a type.
  *
+ * @private
+ * @function
  * @param {Y} y The Yjs instance.
  * @param {DomBinding} binding The DOM binding instance that has the dom filter.
  * @param {YXmlElement | YXmlFragment } type The type to apply the filter to.
- *
- * @private
  */
-export function applyFilterOnType (y, binding, type) {
-  if (isParentOf(binding.type, type)) {
+export const applyFilterOnType = (y, binding, type) => {
+  if (isParentOf(binding.type, type) && type instanceof YXmlElement) {
     const nodeName = type.nodeName
     let attributes = new Map()
     if (type.getAttributes !== undefined) {
@@ -46,7 +57,7 @@ export function applyFilterOnType (y, binding, type) {
     }
     const filteredAttributes = binding.filter(nodeName, new Map(attributes))
     if (filteredAttributes === null) {
-      type._delete(y)
+      type._delete(y, true)
     } else {
       // iterate original attributes
       attributes.forEach((value, key) => {

bindings/dom/selection.js

@@ -0,0 +1,49 @@
+/**
+ * @module bindings/dom
+ */
+
+/* globals getSelection */
+
+import { getRelativePosition } from '../../utils/relativePosition.js'
+
+let relativeSelection = null
+
+/**
+ * @private
+ */
+const _getCurrentRelativeSelection = domBinding => {
+  const { baseNode, baseOffset, extentNode, extentOffset } = getSelection()
+  const baseNodeType = domBinding.domToType.get(baseNode)
+  const extentNodeType = domBinding.domToType.get(extentNode)
+  if (baseNodeType !== undefined && extentNodeType !== undefined) {
+    return {
+      from: getRelativePosition(baseNodeType, baseOffset),
+      to: getRelativePosition(extentNodeType, extentOffset)
+    }
+  }
+  return null
+}
+
+/**
+ * @private
+ */
+export const getCurrentRelativeSelection = typeof getSelection !== 'undefined' ? _getCurrentRelativeSelection : domBinding => null
+
+/**
+ * @private
+ */
+export const beforeTransactionSelectionFixer = domBinding => {
+  relativeSelection = getCurrentRelativeSelection(domBinding)
+}
+
+/**
+ * Reset the browser range after every transaction.
+ * This prevents any collapsing issues with the local selection.
+ *
+ * @private
+ */
+export const afterTransactionSelectionFixer = domBinding => {
+  if (relativeSelection !== null) {
+    domBinding.restoreSelection(relativeSelection)
+  }
+}

bindings/dom/typeObserver.js

@@ -1,10 +1,15 @@
+/**
+ * @module bindings/dom
+ */
+
+/* eslint-env browser */
 /* global getSelection */
 
-import YXmlText from '../../Types/YXml/YXmlText.mjs'
-import YXmlHook from '../../Types/YXml/YXmlHook.mjs'
-import { removeDomChildrenUntilElementFound } from './util.mjs'
+import { YXmlText } from '../../types/YXmlText.js'
+import { YXmlHook } from '../../types/YXmlHook.js'
+import { removeDomChildrenUntilElementFound } from './util.js'
 
-function findScrollReference (scrollingElement) {
+const findScrollReference = scrollingElement => {
   if (scrollingElement !== null) {
     let anchor = getSelection().anchorNode
     if (anchor == null) {
@@ -17,17 +22,23 @@ function findScrollReference (scrollingElement) {
         }
       }
     } else {
-      if (anchor.nodeType === document.TEXT_NODE) {
-        anchor = anchor.parentElement
+      /**
+       * @type {Element}
+       */
+      let elem = anchor.parentElement
+      if (anchor instanceof Element) {
+        elem = anchor
+      }
+      return {
+        elem,
+        top: elem.getBoundingClientRect().top
       }
-      const top = anchor.getBoundingClientRect().top
-      return { elem: anchor, top: top }
     }
   }
   return null
 }
 
-function fixScroll (scrollingElement, ref) {
+const fixScroll = (scrollingElement, ref) => {
   if (ref !== null) {
     const { elem, top } = ref
     const currentTop = elem.getBoundingClientRect().top
@@ -41,7 +52,7 @@ function fixScroll (scrollingElement, ref) {
 /**
  * @private
  */
-export default function typeObserver (events) {
+export const typeObserver = function (events) {
   this._mutualExclude(() => {
     const scrollRef = findScrollReference(this.scrollingElement)
     events.forEach(event => {

bindings/dom/util.js

@@ -1,12 +1,16 @@
+/**
+ * @module bindings/dom
+ */
 
-import domToType from './domToType.mjs'
+import { domToType } from './domToType.js'
+import { DomBinding } from './DomBinding.js' // eslint-disable-line
 
 /**
  * Iterates items until an undeleted item is found.
  *
  * @private
  */
-export function iterateUntilUndeleted (item) {
+export const iterateUntilUndeleted = item => {
   while (item !== null && item._deleted) {
     item = item._right
   }
@@ -17,12 +21,14 @@ export function iterateUntilUndeleted (item) {
  * Removes an association (the information that a DOM element belongs to a
  * type).
  *
+ * @private
+ * @function
  * @param {DomBinding} domBinding The binding object
  * @param {Element} dom The dom that is to be associated with type
  * @param {YXmlElement|YXmlHook} type The type that is to be associated with dom
  *
  */
-export function removeAssociation (domBinding, dom, type) {
+export const removeAssociation = (domBinding, dom, type) => {
   domBinding.domToType.delete(dom)
   domBinding.typeToDom.delete(type)
 }
@@ -31,12 +37,14 @@ export function removeAssociation (domBinding, dom, type) {
  * Creates an association (the information that a DOM element belongs to a
  * type).
  *
+ * @private
+ * @function
  * @param {DomBinding} domBinding The binding object
- * @param {Element} dom The dom that is to be associated with type
- * @param {YXmlElement|YXmlHook} type The type that is to be associated with dom
+ * @param {DocumentFragment|Element|Text} dom The dom that is to be associated with type
+ * @param {YXmlFragment|YXmlElement|YXmlHook|YXmlText} type The type that is to be associated with dom
  *
  */
-export function createAssociation (domBinding, dom, type) {
+export const createAssociation = (domBinding, dom, type) => {
   if (domBinding !== undefined) {
     domBinding.domToType.set(dom, type)
     domBinding.typeToDom.set(type, dom)
@@ -47,11 +55,13 @@ export function createAssociation (domBinding, dom, type) {
  * If oldDom is associated with a type, associate newDom with the type and
  * forget about oldDom. If oldDom is not associated with any type, nothing happens.
  *
+ * @private
+ * @function
  * @param {DomBinding} domBinding The binding object
  * @param {Element} oldDom The existing dom
  * @param {Element} newDom The new dom object
  */
-export function switchAssociation (domBinding, oldDom, newDom) {
+export const switchAssociation = (domBinding, oldDom, newDom) => {
   if (domBinding !== undefined) {
     const type = domBinding.domToType.get(oldDom)
     if (type !== undefined) {
@@ -66,6 +76,8 @@ export function switchAssociation (domBinding, oldDom, newDom) {
  * The Dom elements will be bound to a new YXmlElement and inserted at the
  * specified position.
  *
+ * @private
+ * @function
  * @param {YXmlElement} type The type in which to insert DOM elements.
  * @param {YXmlElement|null} prev The reference node. New YxmlElements are
  *                           inserted after this node. Set null to insert at
@@ -74,15 +86,13 @@ export function switchAssociation (domBinding, oldDom, newDom) {
  * @param {?Document} _document Optional. Provide the global document object.
  * @param {DomBinding} binding The dom binding
  * @return {Array<YXmlElement>} The YxmlElements that are inserted.
- *
- * @private
  */
-export function insertDomElementsAfter (type, prev, doms, _document, binding) {
+export const insertDomElementsAfter = (type, prev, doms, _document, binding) => {
   const types = domsToTypes(doms, _document, binding.opts.hooks, binding.filter, binding)
   return type.insertAfter(prev, types)
 }
 
-export function domsToTypes (doms, _document, hooks, filter, binding) {
+export const domsToTypes = (doms, _document, hooks, filter, binding) => {
   const types = []
   for (let dom of doms) {
     const t = domToType(dom, _document, hooks, filter, binding)
@@ -95,8 +105,9 @@ export function domsToTypes (doms, _document, hooks, filter, binding) {
 
 /**
  * @private
+ * @function
  */
-export function insertNodeHelper (yxml, prevExpectedNode, child, _document, binding) {
+export const insertNodeHelper = (yxml, prevExpectedNode, child, _document, binding) => {
   let insertedNodes = insertDomElementsAfter(yxml, prevExpectedNode, [child], _document, binding)
   if (insertedNodes.length > 0) {
     return insertedNodes[0]
@@ -108,14 +119,14 @@ export function insertNodeHelper (yxml, prevExpectedNode, child, _document, bind
 /**
  * Remove children until `elem` is found.
  *
+ * @private
+ * @function
  * @param {Element} parent The parent of `elem` and `currentChild`.
- * @param {Element} currentChild Start removing elements with `currentChild`. If
+ * @param {Node} currentChild Start removing elements with `currentChild`. If
  *                               `currentChild` is `elem` it won't be removed.
  * @param {Element|null} elem The elemnt to look for.
- *
- * @private
  */
-export function removeDomChildrenUntilElementFound (parent, currentChild, elem) {
+export const removeDomChildrenUntilElementFound = (parent, currentChild, elem) => {
   while (currentChild !== elem) {
     const del = currentChild
     currentChild = currentChild.nextSibling

bindings/prosemirror.js

@@ -0,0 +1,633 @@
+/**
+ * @module bindings/prosemirror
+ */
+
+import { YText } from '../types/YText.js' // eslint-disable-line
+import { YXmlElement, YXmlFragment } from '../types/YXmlElement.js' // eslint-disable-line
+import { createMutex } from '../lib/mutex.js'
+import * as PModel from 'prosemirror-model'
+import { EditorView,  Decoration, DecorationSet } from 'prosemirror-view' // eslint-disable-line
+import { Plugin, PluginKey, EditorState, TextSelection } from 'prosemirror-state' // eslint-disable-line
+import * as math from '../lib/math.js'
+import * as object from '../lib/object.js'
+import * as YPos from '../utils/relativePosition.js'
+
+/**
+ * @typedef {Map<YText | YXmlElement | YXmlFragment, PModel.Node>} ProsemirrorMapping
+ */
+
+/**
+ * The unique prosemirror plugin key for prosemirrorPlugin.
+ *
+ * @public
+ */
+export const prosemirrorPluginKey = new PluginKey('yjs')
+
+/**
+ * This plugin listens to changes in prosemirror view and keeps yXmlState and view in sync.
+ *
+ * This plugin also keeps references to the type and the shared document so other plugins can access it.
+ * @param {YXmlFragment} yXmlFragment
+ * @return {Plugin} Returns a prosemirror plugin that binds to this type
+ */
+export const prosemirrorPlugin = yXmlFragment => {
+  const pluginState = {
+    type: yXmlFragment,
+    y: yXmlFragment._y,
+    binding: null
+  }
+  let changedInitialContent = false
+  const plugin = new Plugin({
+    key: prosemirrorPluginKey,
+    state: {
+      init: (initargs, state) => {
+        return pluginState
+      },
+      apply: (tr, pluginState) => {
+        // update Yjs state when apply is called. We need to do this here to compute the correct cursor decorations with the cursor plugin
+        if (pluginState.binding !== null && (changedInitialContent || tr.doc.content.size > 4)) {
+          changedInitialContent = true
+          pluginState.binding._prosemirrorChanged(tr.doc)
+        }
+        return pluginState
+      }
+    },
+    view: view => {
+      const binding = new ProsemirrorBinding(yXmlFragment, view)
+      pluginState.binding = binding
+      return {
+        update: () => {
+          if (changedInitialContent || view.state.doc.content.size > 4) {
+            changedInitialContent = true
+            binding._prosemirrorChanged(view.state.doc)
+          }
+        },
+        destroy: () => {
+          binding.destroy()
+        }
+      }
+    }
+  })
+  return plugin
+}
+
+/**
+ * The unique prosemirror plugin key for cursorPlugin.type
+ *
+ * @public
+ */
+export const cursorPluginKey = new PluginKey('yjs-cursor')
+
+/**
+ * A prosemirror plugin that listens to awareness information on Yjs.
+ * This requires that a `prosemirrorPlugin` is also bound to the prosemirror.
+ *
+ * @public
+ */
+export const cursorPlugin = new Plugin({
+  key: cursorPluginKey,
+  props: {
+    decorations: state => {
+      const ystate = prosemirrorPluginKey.getState(state)
+      const y = ystate.y
+      const awareness = y.getAwarenessInfo()
+      const decorations = []
+      awareness.forEach((aw, userID) => {
+        if (aw.cursor != null) {
+          let user = aw.user || {}
+          if (user.color == null) {
+            user.color = '#ffa50070'
+          }
+          if (user.name == null) {
+            user.name = `User: ${userID}`
+          }
+          let anchor = relativePositionToAbsolutePosition(ystate.type, aw.cursor.anchor || null, ystate.binding.mapping)
+          let head = relativePositionToAbsolutePosition(ystate.type, aw.cursor.head || null, ystate.binding.mapping)
+          if (anchor !== null && head !== null) {
+            let maxsize = math.max(state.doc.content.size - 1, 0)
+            anchor = math.min(anchor, maxsize)
+            head = math.min(head, maxsize)
+            decorations.push(Decoration.widget(head, () => {
+              const cursor = document.createElement('span')
+              cursor.classList.add('ProseMirror-yjs-cursor')
+              cursor.setAttribute('style', `border-color: ${user.color}`)
+              const userDiv = document.createElement('div')
+              userDiv.setAttribute('style', `background-color: ${user.color}`)
+              userDiv.insertBefore(document.createTextNode(user.name), null)
+              cursor.insertBefore(userDiv, null)
+              return cursor
+            }, { key: userID + '' }))
+            const from = math.min(anchor, head)
+            const to = math.max(anchor, head)
+            decorations.push(Decoration.inline(from, to, { style: `background-color: ${user.color}` }))
+          }
+        }
+      })
+      return DecorationSet.create(state.doc, decorations)
+    }
+  },
+  view: view => {
+    const ystate = prosemirrorPluginKey.getState(view.state)
+    const y = ystate.y
+    const awarenessListener = () => {
+      view.updateState(view.state)
+    }
+    const updateCursorInfo = () => {
+      const current = y.getLocalAwarenessInfo()
+      if (view.hasFocus()) {
+        const anchor = absolutePositionToRelativePosition(view.state.selection.anchor, ystate.type, ystate.binding.mapping)
+        const head = absolutePositionToRelativePosition(view.state.selection.head, ystate.type, ystate.binding.mapping)
+        if (current.cursor == null || !YPos.equal(current.cursor.anchor, anchor) || !YPos.equal(current.cursor.head, head)) {
+          y.setAwarenessField('cursor', {
+            anchor, head
+          })
+        }
+      } else if (current.cursor !== null) {
+        y.setAwarenessField('cursor', null)
+      }
+    }
+    y.on('awareness', awarenessListener)
+    view.dom.addEventListener('focusin', updateCursorInfo)
+    view.dom.addEventListener('focusout', updateCursorInfo)
+    return {
+      update: updateCursorInfo,
+      destroy: () => {
+        const y = prosemirrorPluginKey.getState(view.state).y
+        y.setAwarenessField('cursor', null)
+        y.off('awareness', awarenessListener)
+      }
+    }
+  }
+})
+
+/**
+ * Transforms a Prosemirror based absolute position to a Yjs based relative position.
+ *
+ * @param {number} pos
+ * @param {YXmlFragment} type
+ * @param {ProsemirrorMapping} mapping
+ * @return {any} relative position
+ */
+export const absolutePositionToRelativePosition = (pos, type, mapping) => {
+  if (pos === 0) {
+    return YPos.getRelativePosition(type, 0)
+  }
+  let n = type._first
+  if (n !== null) {
+    while (type !== n) {
+      const pNodeSize = (mapping.get(n) || { nodeSize: 0 }).nodeSize
+      if (n.constructor === YText) {
+        if (n.length >= pos) {
+          return YPos.getRelativePosition(n, pos)
+        } else {
+          pos -= n.length
+        }
+        if (n._next !== null) {
+          n = n._next
+        } else {
+          do {
+            n = n._parent
+            pos--
+          } while (n._next === null && n !== type)
+          if (n !== type) {
+            n = n._next
+          }
+        }
+      } else if (n._first !== null && pos < pNodeSize) {
+        n = n._first
+        pos--
+      } else {
+        if (pos === 1 && n.length === 0 && pNodeSize > 1) {
+          // edge case, should end in this paragraph
+          return ['endof', n._id.user, n._id.clock, null, null]
+        }
+        pos -= pNodeSize
+        if (n._next !== null) {
+          n = n._next
+        } else {
+          if (pos === 0) {
+            n = n._parent
+            return ['endof', n._id.user, n._id.clock || null, n._id.name || null, n._id.type || null]
+          }
+          do {
+            n = n._parent
+            pos--
+          } while (n._next === null && n !== type)
+          if (n !== type) {
+            n = n._next
+          }
+        }
+      }
+      if (pos === 0 && n.constructor !== YText && n !== type) { // TODO: set to <= 0
+        return [n._id.user, n._id.clock]
+      }
+    }
+  }
+  return YPos.getRelativePosition(type, type.length)
+}
+
+/**
+ * @param {YXmlFragment} yDoc Top level type that is bound to pView
+ * @param {any} relPos Encoded Yjs based relative position
+ * @param {ProsemirrorMapping} mapping
+ */
+export const relativePositionToAbsolutePosition = (yDoc, relPos, mapping) => {
+  const decodedPos = YPos.fromRelativePosition(yDoc._y, relPos)
+  if (decodedPos === null) {
+    return null
+  }
+  let type = decodedPos.type
+  let pos = 0
+  if (type.constructor === YText) {
+    pos = decodedPos.offset
+  } else if (!type._deleted) {
+    let n = type._first
+    let i = 0
+    while (i < type.length && i < decodedPos.offset && n !== null) {
+      i++
+      pos += mapping.get(n).nodeSize
+      n = n._next
+    }
+    pos += 1 // increase because we go out of n
+  }
+  while (type !== yDoc) {
+    const parent = type._parent
+    if (!parent._deleted) {
+      pos += 1 // the start tag
+      let n = parent._first
+      // now iterate until we found type
+      while (n !== null) {
+        if (n === type) {
+          break
+        }
+        pos += mapping.get(n).nodeSize
+        n = n._next
+      }
+    }
+    type = parent
+  }
+  return pos - 1 // we don't count the most outer tag, because it is a fragment
+}
+
+/**
+ * Binding for prosemirror.
+ *
+ * @protected
+ */
+export class ProsemirrorBinding {
+  /**
+   * @param {YXmlFragment} yXmlFragment The bind source
+   * @param {EditorView} prosemirrorView The target binding
+   */
+  constructor (yXmlFragment, prosemirrorView) {
+    this.type = yXmlFragment
+    this.prosemirrorView = prosemirrorView
+    this.mux = createMutex()
+    /**
+     * @type {ProsemirrorMapping}
+     */
+    this.mapping = new Map()
+    this._observeFunction = this._typeChanged.bind(this)
+    this.y = yXmlFragment._y
+    /**
+     * current selection as relative positions in the Yjs model
+     */
+    this._relSelection = null
+    this.y.on('beforeTransaction', e => {
+      this._relSelection = {
+        anchor: absolutePositionToRelativePosition(this.prosemirrorView.state.selection.anchor, yXmlFragment, this.mapping),
+        head: absolutePositionToRelativePosition(this.prosemirrorView.state.selection.head, yXmlFragment, this.mapping)
+      }
+    })
+    yXmlFragment.observeDeep(this._observeFunction)
+  }
+  _typeChanged (events, transaction) {
+    if (events.length === 0) {
+      return
+    }
+    console.info('new types:', transaction.newTypes.size, 'deleted types:', transaction.deletedStructs.size, transaction.newTypes, transaction.deletedStructs)
+    this.mux(() => {
+      const delStruct = (_, struct) => this.mapping.delete(struct)
+      transaction.deletedStructs.forEach(struct => this.mapping.delete(struct))
+      transaction.changedTypes.forEach(delStruct)
+      transaction.changedParentTypes.forEach(delStruct)
+      const fragmentContent = this.type.toArray().map(t => createNodeIfNotExists(t, this.prosemirrorView.state.schema, this.mapping)).filter(n => n !== null)
+      const tr = this.prosemirrorView.state.tr.replace(0, this.prosemirrorView.state.doc.content.size, new PModel.Slice(new PModel.Fragment(fragmentContent), 0, 0))
+      const relSel = this._relSelection
+      if (relSel !== null && relSel.anchor !== null && relSel.head !== null) {
+        const anchor = relativePositionToAbsolutePosition(this.type, relSel.anchor, this.mapping)
+        const head = relativePositionToAbsolutePosition(this.type, relSel.head, this.mapping)
+        if (anchor !== null && head !== null) {
+          tr.setSelection(TextSelection.create(tr.doc, anchor, head))
+        }
+      }
+      this.prosemirrorView.updateState(this.prosemirrorView.state.apply(tr))
+    })
+  }
+  _prosemirrorChanged (doc) {
+    this.mux(() => {
+      updateYFragment(this.type, doc.content, this.mapping)
+    })
+  }
+  destroy () {
+    this.type.unobserveDeep(this._observeFunction)
+  }
+}
+
+/**
+ * @privateMapping
+ * @param {YXmlElement} el
+ * @param {PModel.Schema} schema
+ * @param {ProsemirrorMapping} mapping
+ * @return {PModel.Node}
+ */
+export const createNodeIfNotExists = (el, schema, mapping) => {
+  const node = mapping.get(el)
+  if (node === undefined) {
+    return createNodeFromYElement(el, schema, mapping)
+  }
+  return node
+}
+
+/**
+ * @private
+ * @param {YXmlElement} el
+ * @param {PModel.Schema} schema
+ * @param {ProsemirrorMapping} mapping
+ * @return {PModel.Node | null} Returns node if node could be created. Otherwise it deletes the yjs type and returns null
+ */
+export const createNodeFromYElement = (el, schema, mapping) => {
+  const children = []
+  el.toArray().forEach(type => {
+    if (type.constructor === YXmlElement) {
+      const n = createNodeIfNotExists(type, schema, mapping)
+      if (n !== null) {
+        children.push(n)
+      }
+    } else {
+      const ns = createTextNodesFromYText(type, schema, mapping)
+      if (ns !== null) {
+        ns.forEach(textchild => {
+          if (textchild !== null) {
+            children.push(textchild)
+          }
+        })
+      }
+    }
+  })
+  let node
+  try {
+    node = schema.node(el.nodeName.toLowerCase(), el.getAttributes(), children)
+  } catch (e) {
+    // an error occured while creating the node. This is probably a result because of a concurrent action.
+    // delete the node and do not push to children
+    el._y.transact(() => {
+      el._delete(el._y, true)
+    })
+    return null
+  }
+  mapping.set(el, node)
+  return node
+}
+
+/**
+ * @private
+ * @param {YText} text
+ * @param {PModel.Schema} schema
+ * @param {ProsemirrorMapping} mapping
+ * @return {Array<PModel.Node>}
+ */
+export const createTextNodesFromYText = (text, schema, mapping) => {
+  const nodes = []
+  const deltas = text.toDelta()
+  try {
+    for (let i = 0; i < deltas.length; i++) {
+      const delta = deltas[i]
+      const marks = []
+      for (let markName in delta.attributes) {
+        marks.push(schema.mark(markName, delta.attributes[markName]))
+      }
+      nodes.push(schema.text(delta.insert, marks))
+    }
+    if (nodes.length > 0) {
+      mapping.set(text, nodes[0]) // only map to first child, all following children are also considered bound to this type
+    }
+  } catch (e) {
+    text._y.transact(() => {
+      text._delete(text._y, true)
+    })
+    return null
+  }
+  return nodes
+}
+
+/**
+ * @private
+ * @param {PModel.Node} node
+ * @param {ProsemirrorMapping} mapping
+ * @return {YXmlElement | YText}
+ */
+export const createTypeFromNode = (node, mapping) => {
+  let type
+  if (node.isText) {
+    type = new YText()
+    const attrs = {}
+    node.marks.forEach(mark => { attrs[mark.type.name] = mark.attrs })
+    type.insert(0, node.text, attrs)
+  } else {
+    type = new YXmlElement(node.type.name)
+    for (let key in node.attrs) {
+      const val = node.attrs[key]
+      if (val !== null) {
+        type.setAttribute(key, val)
+      }
+    }
+    const ins = []
+    for (let i = 0; i < node.childCount; i++) {
+      ins.push(createTypeFromNode(node.child(i), mapping))
+    }
+    type.insert(0, ins)
+  }
+  mapping.set(type, node)
+  return type
+}
+
+const equalAttrs = (pattrs, yattrs) => {
+  const keys = Object.keys(pattrs).filter(key => pattrs[key] === null)
+  let eq = keys.length === Object.keys(yattrs).filter(key => yattrs[key] === null).length
+  for (let i = 0; i < keys.length && eq; i++) {
+    const key = keys[i]
+    eq = pattrs[key] === yattrs[key]
+  }
+  return eq
+}
+
+const equalYTextPText = (ytext, ptext) => {
+  const d = ytext.toDelta()[0]
+  return d.insert === ptext.text && object.keys(d.attributes || {}).length === ptext.marks.length && ptext.marks.every(mark => equalAttrs(d.attributes[mark.type.name], mark.attrs))
+}
+
+const equalYTypePNode = (ytype, pnode) =>
+  ytype.constructor === YText
+    ? equalYTextPText(ytype, pnode)
+    : (matchNodeName(ytype, pnode) && ytype.length === pnode.childCount && equalAttrs(ytype.getAttributes(), pnode.attrs) && ytype.toArray().every((ychild, i) => equalYTypePNode(ychild, pnode.child(i))))
+
+const computeChildEqualityFactor = (ytype, pnode, mapping) => {
+  const yChildren = ytype.toArray()
+  const pChildCnt = pnode.childCount
+  const yChildCnt = yChildren.length
+  const minCnt = math.min(yChildCnt, pChildCnt)
+  let left = 0
+  let right = 0
+  let foundMappedChild = false
+  for (; left < minCnt; left++) {
+    const leftY = yChildren[left]
+    const leftP = pnode.child(left)
+    if (mapping.get(leftY) === leftP) {
+      foundMappedChild = true// definite (good) match!
+    } else if (!equalYTypePNode(leftY, leftP)) {
+      break
+    }
+  }
+  for (; left + right < minCnt; right++) {
+    const rightY = yChildren[yChildCnt - right - 1]
+    const rightP = pnode.child(pChildCnt - right - 1)
+    if (mapping.get(rightY) !== rightP) {
+      foundMappedChild = true
+    } else if (!equalYTypePNode(rightP, rightP)) {
+      break
+    }
+  }
+  return {
+    equalityFactor: left + right,
+    foundMappedChild
+  }
+}
+
+/**
+ * @private
+ * @param {YXmlFragment} yDomFragment
+ * @param {PModel.Node} pContent
+ * @param {ProsemirrorMapping} mapping
+ */
+const updateYFragment = (yDomFragment, pContent, mapping) => {
+  if (yDomFragment instanceof YXmlElement && yDomFragment.nodeName.toLowerCase() !== pContent.type.name) {
+    throw new Error('node name mismatch!')
+  }
+  mapping.set(yDomFragment, pContent)
+  // update attributes
+  if (yDomFragment instanceof YXmlElement) {
+    const yDomAttrs = yDomFragment.getAttributes()
+    const pAttrs = pContent.attrs
+    for (let key in pAttrs) {
+      if (pAttrs[key] !== null) {
+        if (yDomAttrs[key] !== pAttrs[key]) {
+          yDomFragment.setAttribute(key, pAttrs[key])
+        }
+      } else {
+        yDomFragment.removeAttribute(key)
+      }
+    }
+    // remove all keys that are no longer in pAttrs
+    for (let key in yDomAttrs) {
+      if (pAttrs[key] === undefined) {
+        yDomFragment.removeAttribute(key)
+      }
+    }
+  }
+  // update children
+  const pChildCnt = pContent.childCount
+  const yChildren = yDomFragment.toArray()
+  const yChildCnt = yChildren.length
+  const minCnt = math.min(pChildCnt, yChildCnt)
+  let left = 0
+  let right = 0
+  // find number of matching elements from left
+  for (;left < minCnt; left++) {
+    const leftY = yChildren[left]
+    const leftP = pContent.child(left)
+    if (mapping.get(leftY) !== leftP) {
+      if (equalYTypePNode(leftY, leftP)) {
+        // update mapping
+        mapping.set(leftY, leftP)
+      } else {
+        break
+      }
+    }
+  }
+  // find number of matching elements from right
+  for (;right + left < minCnt; right++) {
+    const rightY = yChildren[yChildCnt - right - 1]
+    const rightP = pContent.child(pChildCnt - right - 1)
+    if (mapping.get(rightY) !== rightP) {
+      if (equalYTypePNode(rightY, rightP)) {
+        // update mapping
+        mapping.set(rightY, rightP)
+      } else {
+        break
+      }
+    }
+  }
+  yDomFragment._y.transact(() => {
+    // try to compare and update
+    while (yChildCnt - left - right > 0 && pChildCnt - left - right > 0) {
+      const leftY = yChildren[left]
+      const leftP = pContent.child(left)
+      const rightY = yChildren[yChildCnt - right - 1]
+      const rightP = pContent.child(pChildCnt - right - 1)
+      if (leftY.constructor === YText && leftP.isText) {
+        if (!equalYTextPText(leftY, leftP)) {
+          yDomFragment.delete(left, 1)
+          yDomFragment.insert(left, [createTypeFromNode(leftP, mapping)])
+        }
+        left += 1
+      } else {
+        let updateLeft = matchNodeName(leftY, leftP)
+        let updateRight = matchNodeName(rightY, rightP)
+        if (updateLeft && updateRight) {
+          // decide which which element to update
+          const equalityLeft = computeChildEqualityFactor(leftY, leftP, mapping)
+          const equalityRight = computeChildEqualityFactor(rightY, rightP, mapping)
+          if (equalityLeft.foundMappedChild && !equalityRight.foundMappedChild) {
+            updateRight = false
+          } else if (!equalityLeft.foundMappedChild && equalityRight.foundMappedChild) {
+            updateLeft = false
+          } else if (equalityLeft.equalityFactor < equalityRight.equalityFactor) {
+            updateLeft = false
+          } else {
+            updateRight = false
+          }
+        }
+        if (updateLeft) {
+          updateYFragment(leftY, leftP, mapping)
+          left += 1
+        } else if (updateRight) {
+          updateYFragment(rightY, rightP, mapping)
+          right += 1
+        } else {
+          yDomFragment.delete(left, 1)
+          yDomFragment.insert(left, [createTypeFromNode(leftP, mapping)])
+          left += 1
+        }
+      }
+    }
+    const yDelLen = yChildCnt - left - right
+    if (yDelLen > 0) {
+      yDomFragment.delete(left, yDelLen)
+    }
+    if (left + right < pChildCnt) {
+      const ins = []
+      for (let i = left; i < pChildCnt - right; i++) {
+        ins.push(createTypeFromNode(pContent.child(i), mapping))
+      }
+      yDomFragment.insert(left, ins)
+    }
+  })
+}
+
+/**
+ * @function
+ * @param {YXmlElement} yElement
+ * @param {any} pNode Prosemirror Node
+ */
+const matchNodeName = (yElement, pNode) => yElement.nodeName === pNode.type.name.toUpperCase()

bindings/quill.js

@@ -1,10 +1,14 @@
-import Binding from '../Binding.mjs'
+/**
+ * @module bindings/quill
+ */
 
-function typeObserver (event) {
+import { createMutex } from '../lib/mutex.js'
+
+const typeObserver = function (event) {
   const quill = this.target
   // Force flush Quill changes.
   quill.update('yjs')
-  this._mutualExclude(function () {
+  this._mutualExclude(() => {
     // Apply computed delta.
     quill.updateContents(event.delta, 'yjs')
     // Force flush Quill changes. Ignore applied changes.
@@ -12,7 +16,7 @@ function typeObserver (event) {
   })
 }
 
-function quillObserver (delta) {
+const quillObserver = function (delta) {
   this._mutualExclude(() => {
     this.type.applyDelta(delta.ops)
   })
@@ -28,14 +32,27 @@ function quillObserver (delta) {
  * // Now modifications on the DOM will be reflected in the Type, and the other
  * // way around!
  */
-export default class QuillBinding extends Binding {
+export class QuillBinding {
   /**
    * @param {YText} textType
    * @param {Quill} quill
    */
   constructor (textType, quill) {
     // Binding handles textType as this.type and quill as this.target.
-    super(textType, quill)
+    /**
+     * The Yjs type that is bound to `target`
+     * @type {YText}
+     */
+    this.type = textType
+    /**
+     * The target that `type` is bound to.
+     * @type {Quill}
+     */
+    this.target = quill
+    /**
+     * @private
+     */
+    this._mutualExclude = createMutex()
     // Set initial value.
     quill.setContents(textType.toDelta(), 'yjs')
     // Observers are handled by this class.
@@ -48,6 +65,7 @@ export default class QuillBinding extends Binding {
     // Remove everything that is handled by this class.
     this.type.unobserve(this._typeObserver)
     this.target.off('text-change', this._quillObserver)
-    super.destroy()
+    this.type = null
+    this.target = null
   }
 }

bindings/textarea.js

@@ -1,7 +1,10 @@
+/**
+ * @module bindings/textarea
+ */
 
-import Binding from '../Binding.mjs'
-import simpleDiff from '../../Util/simpleDiff.mjs'
-import { getRelativePosition, fromRelativePosition } from '../../Util/relativePosition.mjs'
+import { simpleDiff } from '../lib/diff.js'
+import { getRelativePosition, fromRelativePosition } from '../utils/relativePosition.js'
+import { createMutex } from '../lib/mutex.js'
 
 function typeObserver () {
   this._mutualExclude(() => {
@@ -35,10 +38,22 @@ function domObserver () {
  *   const binding = new Y.QuillBinding(type, textarea)
  *
  */
-export default class TextareaBinding extends Binding {
+export class TextareaBinding {
   constructor (textType, domTextarea) {
-    // Binding handles textType as this.type and domTextarea as this.target
-    super(textType, domTextarea)
+    /**
+     * The Yjs type that is bound to `target`
+     * @type {Type}
+     */
+    this.type = textType
+    /**
+     * The target that `type` is bound to.
+     * @type {*}
+     */
+    this.target = domTextarea
+    /**
+     * @private
+     */
+    this._mutualExclude = createMutex()
     // set initial value
     domTextarea.value = textType.toString()
     // Observers are handled by this class
@@ -51,6 +66,7 @@ export default class TextareaBinding extends Binding {
     // Remove everything that is handled by this class
     this.type.unobserve(this._typeObserver)
     this.target.unobserve(this._domObserver)
-    super.destroy()
+    this.type = null
+    this.target = null
   }
 }

examples/.gitignore

@@ -0,0 +1 @@
+build

examples/bower.json

@@ -1,19 +0,0 @@
-{
-  "name": "yjs-examples",
-  "version": "0.0.0",
-  "homepage": "y-js.org",
-  "authors": [
-    "Kevin Jahns <kevin.jahns@rwth-aachen.de>"
-  ],
-  "description": "Examples for Yjs",
-  "license": "MIT",
-  "ignore": [],
-  "dependencies": {
-    "quill": "^1.0.0-rc.2",
-    "ace": "~1.2.3",
-    "ace-builds": "~1.2.3",
-    "jquery": "~2.2.2",
-    "d3": "^3.5.16",
-    "codemirror": "^5.25.0"
-  }
-}

examples/dom.html

@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Yjs Prosemirror Example</title>
+    <link rel=stylesheet href="https://prosemirror.net/css/editor.css">
+    <style>
+      #content {
+        min-height: 500px;
+      }
+    </style>
+</head>
+<body>
+  <p>This example shows how to bind a YXmlFragment type to an arbitrary DOM element. We set the DOM element to contenteditable so it basically behaves like a very powerful rich-text editor.</p>
+  <p>The content of this editor is shared with every client who visits this domain.</p>
+  <hr>
+  <div class="code-html">
+
+<div id="content" contenteditable=""></div>
+  </div>
+  <!-- The actual source file for the following code is found in ./dom.js. Run `npm run watch` to compile the files -->
+  <script class="code-js" src="./build/dom.js">
+    import * as Y from 'yjs/index.js'
+    import { WebsocketProvider } from 'yjs/provider/websocket.js'
+    import { DomBinding } from 'yjs/bindings/dom.js'
+
+    const provider = new WebsocketProvider('wss://api.yjs.website')
+    const ydocument = provider.get('dom')
+    const type = ydocument.define('xml', Y.XmlFragment)
+    const binding = new DomBinding(type, document.querySelector('#content'), { scrollingElement: document.scrollingElement })
+
+    window.example = {
+      provider, ydocument, type, binding
+    }
+  </script>
+</body>
+</html>

examples/dom.js

@@ -0,0 +1,14 @@
+import * as Y from '../index.js'
+import { WebsocketProvider } from '../provider/websocket.js'
+import { DomBinding } from '../bindings/dom.js'
+
+import * as conf from './exampleConfig.js'
+
+const provider = new WebsocketProvider(conf.serverAddress)
+const ydocument = provider.get('dom')
+const type = ydocument.define('xml', Y.XmlFragment)
+const binding = new DomBinding(type, document.querySelector('#content'), { scrollingElement: document.scrollingElement })
+
+window.example = {
+  provider, ydocument, type, binding
+}

examples/exampleConfig.js

@@ -0,0 +1,9 @@
+/* eslint-env browser */
+
+const isDeployed = location.hostname === 'yjs.website'
+
+if (!isDeployed) {
+  console.log('%cYjs: Start your local websocket server by running %c`npm run websocket-server`', 'color:blue', 'color: grey; font-weight: bold')
+}
+
+export const serverAddress = isDeployed ? 'wss://api.yjs.website' : 'ws://localhost:1234'

examples/examples.json

@@ -0,0 +1,14 @@
+{
+  "prosemirror": {
+    "title": "Prosemirror Binding"
+  },
+  "textarea": {
+    "title": "Textarea Binding"
+  },
+  "quill": {
+    "title": "Quill Binding"
+  },
+  "dom": {
+    "title": "Dom Binding"
+  }
+}

examples/infiniteyjs/index.html

@@ -1,55 +0,0 @@
-<!DOCTYPE html>
-<html>
-<body>
-  <style>
-    .wrapper {
-      display: grid;
-      grid-template-columns: repeat(3, 1fr);
-      grid-gap: 7px;
-    }
-    .one {
-      grid-column: 1 ;
-    }
-    .two {
-      grid-column: 2;
-    }
-    .three {
-      grid-column: 3;
-    }
-    textarea {
-      width: calc(100% - 10px)
-    }
-    .editor-container {
-      background-color: #4caf50;
-      padding: 4px 5px 10px 5px;
-      border-radius: 11px;
-    }
-    .editor-container[disconnected] {
-      background-color: red;
-    }
-    .disconnected-info {
-      display: none;
-    }
-    .editor-container[disconnected] .disconnected-info {
-      display: inline;
-    }
-  </style>
-  <div class="wrapper">
-    <div id="container1" class="one editor-container">
-      <h1>Server 1 <span class="disconnected-info">(disconnected)</span></h1>
-      <textarea id="textarea1" rows=40 autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false"></textarea>
-    </div>
-    <div id="container2" class="two editor-container">
-      <h1>Server 2 <span class="disconnected-info">(disconnected)</span></h1>
-      <textarea id="textarea2" rows=40 autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false"></textarea>
-    </div>
-    <div id="container3" class="three editor-container">
-      <h1>Server 3 <span class="disconnected-info">(disconnected)</span></h1>
-      <textarea id="textarea3" rows=40 autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false"></textarea>
-    </div>
-  </div>
-  <script src="../../y.js"></script>
-  <script src='../../../y-websockets-client/y-websockets-client.js'></script>
-  <script src="./index.js"></script>
-</body>
-</html>

examples/infiniteyjs/index.js

@@ -1,38 +0,0 @@
-/* global Y */
-
-function bindYjsInstance (y, suffix) {
-  y.define('textarea', Y.Text).bind(document.getElementById('textarea' + suffix))
-  y.connector.socket.on('connection', function () {
-    document.getElementById('container' + suffix).removeAttribute('disconnected')
-  })
-  y.connector.socket.on('disconnect', function () {
-    document.getElementById('container' + suffix).setAttribute('disconnected', true)
-  })
-}
-
-let y1 = new Y('infinite-example', {
-  connector: {
-    name: 'websockets-client',
-    url: 'http://127.0.0.1:1234'
-  }
-})
-window.y1 = y1
-bindYjsInstance(y1, '1')
-
-let y2 = new Y('infinite-example', {
-  connector: {
-    name: 'websockets-client',
-    url: 'http://127.0.0.1:1234'
-  }
-})
-window.y2 = y2
-bindYjsInstance(y2, '2')
-
-let y3 = new Y('infinite-example', {
-  connector: {
-    name: 'websockets-client',
-    url: 'http://127.0.0.1:1234'
-  }
-})
-window.y3 = y3
-bindYjsInstance(y1, '3')

examples/notes/index.html

@@ -1,8 +0,0 @@
-<!DOCTYPE html>
-<html>
-</head>
-  <script src="./index.mjs" type="module"></script>
-</head>
-<body contenteditable="true">
-</body>
-</html>

examples/notes/index.mjs

@@ -1,48 +0,0 @@
-
-import IndexedDBPersistence from '../../src/Persistences/IndexeddbPersistence.mjs'
-import YWebsocketsConnector from '../../src/Connectors/WebsocketsConnector/WebsocketsConnector.mjs'
-import Y from '../../src/Y.mjs'
-import YXmlFragment from '../../src/Types/YXml/YXmlFragment.mjs'
-
-const yCollection = new YCollection(new YWebsocketsConnector(), new IndexedDBPersistence())
-
-const y = yCollection.getDocument('my-notes')
-
-
-
-
-
-persistence.addConnector(persistence)
-
-const y = new Y()
-await persistence.persistY(y)
-
-
-connector.connectY('html-editor', y)
-persistence.connectY('html-editor', y)
-
-
-
-
-window.connector = connector
-
-window.onload = function () {
-  window.domBinding = new DomBinding(window.yXmlType, document.body, { scrollingElement: document.scrollingElement })
-}
-
-window.y = y
-window.yXmlType = y.define('xml', YXmlFragment)
-window.undoManager = new UndoManager(window.yXmlType, {
-  captureTimeout: 500
-})
-
-document.onkeydown = function interceptUndoRedo (e) {
-  if (e.keyCode === 90 && (e.metaKey || e.ctrlKey)) {
-    if (!e.shiftKey) {
-      window.undoManager.undo()
-    } else {
-      window.undoManager.redo()
-    }
-    e.preventDefault()
-  }
-}

examples/package.json

@@ -1,23 +0,0 @@
-{
-  "name": "examples",
-  "version": "0.0.0",
-  "description": "",
-  "scripts": {
-    "dist": "rollup -c",
-    "watch": "rollup -cw"
-  },
-  "author": "Kevin Jahns",
-  "license": "MIT",
-  "dependencies": {
-    "monaco-editor": "^0.8.3",
-    "rollup": "^0.52.3"
-  },
-  "devDependencies": {
-    "standard": "^10.0.2"
-  },
-  "standard": {
-    "ignore": [
-      "bower_components"
-    ]
-  }
-}

examples/prosemirror.html

@@ -0,0 +1,84 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Yjs Prosemirror Example</title>
+    <link rel=stylesheet href="https://prosemirror.net/css/editor.css">
+    <style>
+      placeholder {
+        display: inline;
+        border: 1px solid #ccc;
+        color: #ccc;
+      }
+      placeholder:after {
+        content: "☁";
+        font-size: 200%;
+        line-height: 0.1;
+        font-weight: bold;
+      }
+      .ProseMirror img { max-width: 100px }
+      /* this is a rough fix for the first cursor position when the first paragraph is empty */
+      .ProseMirror > .ProseMirror-yjs-cursor:first-child {
+        margin-top: 16px;
+      }
+      .ProseMirror p:first-child, .ProseMirror h1:first-child, .ProseMirror h2:first-child, .ProseMirror h3:first-child, .ProseMirror h4:first-child, .ProseMirror h5:first-child, .ProseMirror h6:first-child {
+        margin-top: 16px
+      }
+      .ProseMirror-yjs-cursor {
+        position: absolute;
+        border-left: black;
+        border-left-style: solid;
+        border-left-width: 2px;
+        border-color: orange;
+        height: 1em;
+      }
+      .ProseMirror-yjs-cursor > div {
+        position: relative;
+        top: -1.05em;
+        font-size: 13px;
+        background-color: rgb(250, 129, 0);
+        font-family: serif;
+        font-style: normal;
+        font-weight: normal;
+        line-height: normal;
+        user-select: none;
+        color: white;
+        padding-left: 2px;
+        padding-right: 2px;
+      }
+    </style>
+</head>
+<body>
+  <p>This example shows how to bind a YXmlFragment type to a <a href="http://prosemirror.net">Prosemirror</a> editor.</p>
+  <p>The content of this editor is shared with every client who visits this domain.</p>
+  <div class="code-html">
+
+<div id="editor" style="margin-bottom: 23px"></div>
+<div style="display: none" id="content"></div>
+  </div>
+  <!-- The actual source file for the following code is found in ./prosemirror.js. Run `npm run watch` to compile the files -->
+  <script class="code-js" src="./build/prosemirror.js">
+import * as Y from 'yjs'
+import { WebsocketProvider } from '../provider/websocket.js'
+import { prosemirrorPlugin, cursorPlugin } from '../bindings/prosemirror'
+
+import { EditorState } from 'prosemirror-state'
+import { EditorView } from 'prosemirror-view'
+import { DOMParser } from 'prosemirror-model'
+import { schema } from 'prosemirror-schema-basic'
+import { exampleSetup } from 'prosemirror-example-setup'
+
+const provider = new WebsocketProvider('wss://api.yjs.website')
+const ydocument = provider.get('prosemirror')
+const type = ydocument.define('prosemirror', Y.XmlFragment)
+
+const prosemirrorView = new EditorView(document.querySelector('#editor'), {
+  state: EditorState.create({
+    doc: DOMParser.fromSchema(schema).parse(document.querySelector('#content')),
+    plugins: exampleSetup({schema}).concat([prosemirrorPlugin(type), cursorPlugin])
+  })
+})
+
+window.example = { provider, ydocument, type, prosemirrorView }
+  </script>
+</body>
+</html>

examples/prosemirror.js

@@ -0,0 +1,24 @@
+import * as Y from '../index.js'
+import { WebsocketProvider } from '../provider/websocket.js'
+import { prosemirrorPlugin, cursorPlugin } from '../bindings/prosemirror.js'
+
+import * as conf from './exampleConfig.js'
+
+import { EditorState } from 'prosemirror-state'
+import { EditorView } from 'prosemirror-view'
+import { DOMParser } from 'prosemirror-model'
+import { schema } from 'prosemirror-schema-basic'
+import { exampleSetup } from 'prosemirror-example-setup'
+
+const provider = new WebsocketProvider(conf.serverAddress)
+const ydocument = provider.get('prosemirror')
+const type = ydocument.define('prosemirror', Y.XmlFragment)
+
+const prosemirrorView = new EditorView(document.querySelector('#editor'), {
+  state: EditorState.create({
+    doc: DOMParser.fromSchema(schema).parse(document.querySelector('#content')),
+    plugins: exampleSetup({schema}).concat([prosemirrorPlugin(type), cursorPlugin])
+  })
+})
+
+window.example = { provider, ydocument, type, prosemirrorView }

examples/quill.html

@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Yjs Quill Example</title>
+    <link rel="stylesheet" href="https://cdn.quilljs.com/1.3.6/quill.snow.css">
+  </head>
+<body>
+  <p>This example shows how to bind a YText type to <a href="https://quilljs.com">Quill</a> editor.</p>
+  <p>The content of this editor is shared with every client who visits this domain.</p>
+  <div class="code-html">
+<div id="quill-container">
+  <div id="quill">
+  </div>
+</div>
+  </div>
+  <!-- The actual source file for the following code is found in ./quill.js. Run `npm run watch` to compile the files -->
+  <script class="code-js" src="./build/quill.js">
+import * as Y from 'yjs'
+import { WebsocketProvider } from 'yjs/provider/websocket.js'
+import { QuillBinding } from 'yjs/bindings/quill.js'
+
+import Quill from 'quill'
+
+const provider = new WebsocketProvider('wss://api.yjs.website')
+const ydocument = provider.get('quill')
+const ytext = ydocument.define('quill', Y.Text)
+
+const quill = new Quill('#quill-container', {
+  modules: {
+    toolbar: [
+      [{ header: [1, 2, false] }],
+      ['bold', 'italic', 'underline'],
+      ['image', 'code-block'],
+      [{ color: [] }, { background: [] }], // Snow theme fills in values
+      [{ script: 'sub' }, { script: 'super' }],
+      ['link', 'image'],
+      ['link', 'code-block'],
+      [{ list: 'ordered' }, { list: 'bullet' }]
+    ]
+  },
+  placeholder: 'Compose an epic...',
+  theme: 'snow' // or 'bubble'
+})
+
+window.quillBinding = new QuillBinding(ytext, quill)
+
+  </script>
+</body>
+</html>

examples/quill.js

@@ -0,0 +1,30 @@
+import * as Y from '../index.js'
+import { WebsocketProvider } from '../provider/websocket.js'
+import { QuillBinding } from '../bindings/quill.js'
+
+import * as conf from './exampleConfig.js'
+
+import Quill from 'quill'
+
+const provider = new WebsocketProvider(conf.serverAddress)
+const ydocument = provider.get('quill')
+const ytext = ydocument.define('quill', Y.Text)
+
+const quill = new Quill('#quill-container', {
+  modules: {
+    toolbar: [
+      [{ header: [1, 2, false] }],
+      ['bold', 'italic', 'underline'],
+      ['image', 'code-block'],
+      [{ color: [] }, { background: [] }], // Snow theme fills in values
+      [{ script: 'sub' }, { script: 'super' }],
+      ['link', 'image'],
+      ['link', 'code-block'],
+      [{ list: 'ordered' }, { list: 'bullet' }]
+    ]
+  },
+  placeholder: 'Compose an epic...',
+  theme: 'snow' // or 'bubble'
+})
+
+window.quillBinding = new QuillBinding(ytext, quill)

examples/quill/index.html

@@ -1,18 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-  <!-- Main Quill library -->
-  <script src="../../node_modules/quill/dist/quill.min.js"></script>
-  <link href="../../node_modules/quill/dist/quill.snow.css" rel="stylesheet">
-  <!-- Yjs Library and connector -->
-  <script src="../../y.js"></script>
-  <script src='../../../y-websockets-client/y-websockets-client.js'></script>
-</head>
-<body>
-  <div id="quill-container">
-    <div id="quill">
-    </div>
-  </div>
-  <script src="./index.js"></script>
-</body>
-</html>

examples/quill/index.js

@@ -1,33 +0,0 @@
-/* global Y, Quill */
-
-let y = new Y('quill-cursors-0', {
-  connector: {
-    name: 'websockets-client',
-    url: 'http://127.0.0.1:1234'
-  }
-})
-
-let quill = new Quill('#quill-container', {
-  modules: {
-    toolbar: [
-      [{ header: [1, 2, false] }],
-      ['bold', 'italic', 'underline'],
-      ['image', 'code-block'],
-      [{ color: [] }, { background: [] }],    // Snow theme fills in values
-      [{ script: 'sub' }, { script: 'super' }],
-      ['link', 'image'],
-      ['link', 'code-block'],
-      [{ list: 'ordered' }, { list: 'bullet' }]
-    ]
-  },
-  placeholder: 'Compose an epic...',
-  theme: 'snow'  // or 'bubble'
-})
-
-let yText = y.define('quill', Y.Text)
-
-let quillBinding = new Y.QuillBinding(yText, quill)
-window.quillBinding = quillBinding
-window.yText = yText
-window.y = y
-window.quill = quill

examples/rollup.config.js

@@ -1,29 +0,0 @@
-import nodeResolve from 'rollup-plugin-node-resolve'
-import commonjs from 'rollup-plugin-commonjs'
-
-var pkg = require('./package.json')
-
-export default {
-  input: 'yjs-dist.mjs',
-  name: 'Y',
-  output: {
-    file: 'yjs-dist.js',
-    format: 'umd'
-  },
-  plugins: [
-    nodeResolve({
-      main: true,
-      module: true,
-      browser: true
-    }),
-    commonjs()
-  ],
-  sourcemap: true,
-  banner: `
-/**
- * ${pkg.name} - ${pkg.description}
- * @version v${pkg.version}
- * @license ${pkg.license}
- */
-`
-}

examples/style.css

@@ -0,0 +1,29 @@
+footer img {
+  display: none;
+}
+
+nav .title h1 a {
+  display: none;
+}
+
+footer {
+  background-color: #b93c1d;
+}
+
+#resizer {
+  background-color: #b93c1d;
+}
+
+.main section article.readme h1:first-child img {
+  display: none;
+}
+
+.main section article.readme h1:first-child {
+  margin-bottom: 16px;
+  margin-top: 30px;
+}
+
+.main section article.readme h1:first-child::before {
+  content: "Yjs";
+  font-size: 2em;
+}

examples/textarea.html

@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Yjs Textarea Example</title>
+</head>
+<body>
+  <p>This example shows how to bind a YText type to a DOM Textarea.</p>
+  <p>The content of this textarea is shared with every client who visits this domain.</p>
+  <div class="code-html">
+
+<textarea style="width:80%;" rows=40 autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false"></textarea>
+  </div>
+  <!-- The actual source file for the following code is found in ./textarea.js. Run `npm run watch` to compile the files -->
+  <script class="code-js" src="./build/textarea.js">
+import * as Y from 'yjs'
+import { WebsocketProvider } from 'yjs/provider/websocket.js'
+import { TextareaBinding } from 'yjs/bindings/textarea.js'
+
+const provider = new WebsocketProvider('wss://api.yjs.website')
+const ydocument = provider.get('textarea')
+const type = ydocument.define('textarea', Y.Text)
+const textarea = document.querySelector('textarea')
+const binding = new TextareaBinding(type, textarea)
+
+window.textareaExample = {
+  provider, ydocument, type, textarea, binding
+}
+  </script>
+</body>
+</html>

examples/textarea.js

@@ -0,0 +1,15 @@
+import * as Y from '../index.js'
+import { WebsocketProvider } from '../provider/websocket.js'
+import { TextareaBinding } from '../bindings/textarea.js'
+
+import * as conf from './exampleConfig.js'
+
+const provider = new WebsocketProvider(conf.serverAddress)
+const ydocument = provider.get('textarea')
+const type = ydocument.define('textarea', Y.Text)
+const textarea = document.querySelector('textarea')
+const binding = new TextareaBinding(type, textarea)
+
+window.textareaExample = {
+  provider, ydocument, type, textarea, binding
+}

examples/textarea/index.html

@@ -1,9 +0,0 @@
-<!DOCTYPE html>
-<html>
-<body>
-  <textarea style="width:80%;" rows=40 autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false"></textarea>
-  <script src="../../y.js"></script>
-  <script src='../../../y-websockets-client/y-websockets-client.js'></script>
-  <script src="./index.js"></script>
-</body>
-</html>

examples/textarea/index.js

@@ -1,15 +0,0 @@
-/* global Y */
-
-let y = new Y('textarea-example', {
-  connector: {
-    name: 'websockets-client',
-    url: 'http://127.0.0.1:1234'
-  }
-})
-
-window.yTextarea = y
-
-// bind the textarea to a shared text element
-let type = y.define('textarea', Y.Text)
-let textarea = document.querySelector('textarea')
-window.binding = new Y.TextareaBinding(type, textarea)

examples/xml/index.html

@@ -1,43 +0,0 @@
-<!DOCTYPE html>
-<html>
-</head>
-  <!-- jquery is not required for YXml. It is just here for convenience, and to test batch operations. -->
-  <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
-  <script src="../../y.js"></script>
-  <script src='../../../y-websockets-client/y-websockets-client.js'></script>
-  <script src="./index.js"></script>
-</head>
-<body>
-  <h1> Shared DOM Example </h1>
-  <p> Use native DOM function or jQuery to manipulate the shared DOM (window.sharedDom). </p>
-  <div class="command">
-    <button type="button">Execute</button>
-    <input type="text" value='$(sharedDom).append("<h3>Appended headline</h3>")' size="40"/>
-  </div>
-  <div class="command">
-    <button type="button">Execute</button>
-    <input type="text" value='$(sharedDom).attr("align","right")' size="40"/>
-  </div>
-  <div class="command">
-    <button type="button">Execute</button>
-    <input type="text" value='$(sharedDom).attr("style","color:blue;")' size="40"/>
-  </div>
-
-  <script>
-    /* global $ */
-    var commands = document.querySelectorAll('.command')
-    Array.prototype.forEach.call(commands, function (command) {
-      var execute = function () {
-        // eslint-disable-next-line no-eval
-        eval(command.querySelector('input').value)
-      }
-      command.querySelector('button').onclick = execute
-      $(command.querySelector('input')).keyup(function (e) {
-        if (e.keyCode === 13) {
-          execute()
-        }
-      })
-    })
-  </script>
-</body>
-</html>

examples/xml/index.js

@@ -1,13 +0,0 @@
-/* global Y */
-
-let y = new Y('xml-example', {
-  connector: {
-    name: 'websockets-client',
-    url: 'http://127.0.0.1:1234'
-  }
-})
-
-window.yXml = y
-// bind xml type to a dom, and put it in body
-window.sharedDom = y.define('xml', Y.XmlElement).toDom()
-document.body.appendChild(window.sharedDom)

examples_all/chat/index.js

@@ -14,7 +14,7 @@ let chatprotocol = y.define('chatprotocol', Y.Array)
 let chatcontainer = document.querySelector('#chat')
 
 // This functions inserts a message at the specified position in the DOM
-function appendMessage (message, position) {
+const appendMessage = (message, position) => {
   var p = document.createElement('p')
   var uname = document.createElement('span')
   uname.appendChild(document.createTextNode(message.username + ': '))
@@ -25,7 +25,7 @@ function appendMessage (message, position) {
 
 // This function makes sure that only 7 messages exist in the chat history.
 // The rest is deleted
-function cleanupChat () {
+const cleanupChat = () => {
   if (chatprotocol.length > 7) {
     chatprotocol.delete(0, chatprotocol.length - 7)
   }
@@ -36,7 +36,7 @@ cleanupChat()
 chatprotocol.toArray().forEach(appendMessage)
 
 // whenever content changes, make sure to reflect the changes in the DOM
-chatprotocol.observe(function (event) {
+chatprotocol.observe(event => {
   // concurrent insertions may result in a history > 7, so cleanup here
   cleanupChat()
   chatcontainer.innerHTML = ''

examples_all/html-editor/index.html

@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html>
 </head>
-  <script src="./index.mjs" type="module"></script>
+  <script src="./index.js" type="module"></script>
 </head>
 <body>
     <label for="room">Room: </label>

examples_all/html-editor/index.js

@@ -1,12 +1,12 @@
 
-import YWebsocketsConnector from '../../src/Connectors/WebsocketsConnector/WebsocketsConnector.mjs'
-import Y from '../../src/Y.mjs'
-import DomBinding from '../../src/Bindings/DomBinding/DomBinding.mjs'
-import UndoManager from '../../src/Util/UndoManager.mjs'
-import YXmlFragment from '../../src/Types/YXml/YXmlFragment.mjs'
-import YXmlText from '../../src/Types/YXml/YXmlText.mjs'
-import YXmlElement from '../../src/Types/YXml/YXmlElement.mjs'
-import YIndexdDBPersistence from '../../src/Persistences/IndexedDBPersistence.mjs'
+import YWebsocketsConnector from '../../src/Connectors/WebsocketsConnector/WebsocketsConnector.js'
+import Y from '../../src/Y.js'
+import DomBinding from '../../bindings/DomBinding/DomBinding.js'
+import UndoManager from '../../src/Util/UndoManager.js'
+import YXmlFragment from '../../src/Types/YXml/YXmlFragment.js'
+import YXmlText from '../../src/Types/YXml/YXmlText.js'
+import YXmlElement from '../../src/Types/YXml/YXmlElement.js'
+import YIndexdDBPersistence from '../../src/Persistences/IndexedDBPersistence.js'
 
 const connector = new YWebsocketsConnector()
 const persistence = new YIndexdDBPersistence()

examples_all/indexeddb/index.html

@@ -18,7 +18,6 @@
     </style>
     <script src="../../y.js"></script>
     <script src='../../../y-websockets-client/y-websockets-client.js'></script>
-    <script src='../../../y-indexeddb/y-indexeddb.js'></script>
     <script src="./index.js"></script>
   </body>
 </html>

examples_all/notes/index.html

@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html>
+</head>
+  <script src="./index.js" type="module"></script>
+  <link rel="stylesheet" type="text/css" href="style.css">
+</head>
+<body>
+    <div class="sidebar">
+      <h3 id="createNoteButton">+ Create Note</h3>
+      <div class="notelist"></div>
+    </div>
+    <div class="main">
+      <h1 id="headline"></h1>
+      <div id="editor" contenteditable="true"></div>
+    </div>
+</body>
+</html>

examples_all/notes/index.js

@@ -0,0 +1,132 @@
+/* eslint-env browser */
+
+import { createYdbClient } from '../../YdbClient/index.js'
+import Y from '../../src/Y.dist.js'
+import * as ydb from '../../YdbClient/YdbClient.js'
+import DomBinding from '../../bindings/DomBinding/DomBinding.js'
+
+const uuidv4 = () => 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, c => {
+  const r = Math.random() * 16 | 0
+  return (c === 'x' ? r : (r & 0x3 | 0x8)).toString(16)
+})
+
+createYdbClient('ws://localhost:8899/ws').then(ydbclient => {
+  const y = ydbclient.getY('notelist')
+  let ynotelist = y.define('notelist', Y.Array)
+  window.ynotelist = ynotelist
+  const domNoteList = document.querySelector('.notelist')
+
+  // utils
+  const addEventListener = (element, eventname, f) => element.addEventListener(eventname, f)
+
+  // create note button
+  const createNoteButton = event => {
+    ynotelist.insert(0, [{
+      guid: uuidv4(),
+      title: 'Note #' + ynotelist.length
+    }])
+  }
+  addEventListener(document.querySelector('#createNoteButton'), 'click', createNoteButton)
+  window.createNote = createNoteButton
+  window.createNotes = n => {
+    y.transact(() => {
+      for (let i = 0; i < n; i++) {
+        createNoteButton()
+      }
+    })
+  }
+
+  // clear note list function
+  window.clearNotes = () => ynotelist.delete(0, ynotelist.length)
+
+  // update editor and editor title
+  let domBinding = null
+  const updateEditor = () => {
+    domNoteList.querySelectorAll('a').forEach(a => a.classList.remove('selected'))
+    const domNote = document.querySelector('.notelist').querySelector(`[href="${location.hash}"]`)
+    if (domNote !== null) {
+      domNote.classList.add('selected')
+      const note = ynotelist.toArray().find(note => note.guid === location.hash.slice(1))
+      if (note !== undefined) {
+        const ydoc = ydbclient.getY(note.guid)
+        const ycontent = ydoc.define('content', Y.XmlFragment)
+        if (domBinding !== null) {
+          domBinding.destroy()
+        }
+        domBinding = new DomBinding(ycontent, document.querySelector('#editor'))
+        document.querySelector('#headline').innerText = note.title
+        document.querySelector('#editor').focus()
+      }
+    }
+  }
+
+  // listen to url-hash changes
+  addEventListener(window, 'hashchange', updateEditor)
+  updateEditor()
+
+  const styleSyncedState = (div, noteSyncedState) => {
+    let classes = []
+    if (noteSyncedState.persisted) {
+      classes.push('persisted')
+    } else {
+      if (noteSyncedState.upsynced) {
+        classes.push('upsynced')
+      } else {
+        classes.push('noupsynced')
+      }
+      if (noteSyncedState.downsynced) {
+        classes.push('downsynced')
+      } else {
+        classes.push('nodownsynced')
+      }
+    }
+    div.setAttribute('class', classes.join(' '))
+  }
+
+  ydbclient.on('syncstate', event => event.updated.forEach((state, room) => {
+    const a = document.querySelector(`[href="#${room}"]`)
+    if (a !== null) {
+      styleSyncedState(a.firstChild, state)
+    }
+  }))
+
+  // render note list
+  const renderNoteList = (elementList, insertRef = domNoteList.firstChild) => {
+    const fragment = document.createDocumentFragment()
+    const addNow = elementList.splice(0, 100)
+    addNow.forEach(note => {
+      const a = document.createElement('a')
+      const div = document.createElement('div')
+      a.insertBefore(div, null)
+      a.setAttribute('href', '#' + note.guid)
+      div.innerText = note.title
+      styleSyncedState(div, ydbclient.getRoomState(note.guid))
+      fragment.insertBefore(a, null)
+    })
+    if (domBinding == null) {
+      updateEditor()
+    }
+    domNoteList.insertBefore(fragment, insertRef)
+    if (elementList.length > 0) {
+      setTimeout(() => renderNoteList(elementList, insertRef), 100)
+    }
+  }
+  {
+    const notelist = ynotelist.toArray()
+    if (notelist.length > 0) {
+      renderNoteList(notelist)
+      ydb.subscribeRooms(ydbclient, notelist.map(note => note.guid))
+    }
+  }
+  ynotelist.observe(event => {
+    const addedNotes = []
+    event.addedElements.forEach(itemJson => itemJson._content.forEach(json => addedNotes.push(json)))
+    renderNoteList(addedNotes.slice().reverse()) // renderNoteList modifies addedNotes, so first make a copy of it
+    setTimeout(() => {
+      ydb.subscribeRooms(ydbclient, addedNotes.map(note => note.guid))
+    }, 200)
+    if (domBinding === null) {
+      updateEditor()
+    }
+  })
+})

examples_all/notes/style.css

@@ -0,0 +1,100 @@
+.sidebar {
+    height: 100%; /* Full-height: remove this if you want "auto" height */
+    width: 180px; /* Set the width of the sidebar */
+    position: fixed; /* Fixed Sidebar (stay in place on scroll) */
+    z-index: 1; /* Stay on top */
+    top: 0; /* Stay at the top */
+    left: 0;
+    background-color: #111; /* Black */
+    overflow-x: hidden; /* Disable horizontal scroll */
+    padding-top: 20px;
+    color: #50abff;
+}
+
+#createNoteButton {
+    padding-left: .5em;
+    padding-top: .5em;
+    padding-bottom: .7em;
+    margin: 0;
+    cursor: pointer;
+}
+
+.notelist > a {
+  padding: 6px 8px 6px 16px;
+  text-decoration: none;
+  font-size: 13px;
+  color: #818181;
+  display: block;
+}
+
+.notelist > a.selected {
+  border-style: outset;
+}
+
+.notelist > a > div {
+  position: relative;
+  display: inline;
+}
+
+/* When you mouse over the navigation links, change their color */
+.sidebar a:hover {
+    color: #f1f1f1;
+}
+
+/* Style page content */
+.main {
+    margin-left: 180px; /* Same as the width of the sidebar */
+    padding: 0px 10px;
+}
+
+/* On smaller screens, where height is less than 450px, change the style of the sidebar (less padding and a smaller font size) */
+@media screen and (max-height: 450px) {
+    .sidebar {padding-top: 15px;}
+    .sidebar a {font-size: 18px;}
+}
+
+#editor {
+    min-height: 400px;
+}
+
+[contenteditable]:focus {
+    outline: 0px solid transparent;
+}
+
+.persisted::before { 
+  content: "✔";
+  color: green;
+  position: absolute;
+  right: -14px;
+  top: 0px;
+}
+
+.upsynced::before {
+  content: "↑";
+  color: green;
+  position: absolute;
+  right: -14px;
+  top: 0px;
+}
+
+.noupsynced::before {
+  content: "↑";
+  color: red;
+  position: absolute;
+  right: -14px;
+  top: 0px;
+}
+.downsynced::after {
+  content: "↓";
+  color: green;
+  position: absolute;
+  right: -22px;
+  top: 0px;
+}
+.nodownsynced::after {
+  content: "↓";
+  color: red;
+  position: absolute;
+  right: -22px;
+  top: 0px;
+}

examples_all/quill-cursors/index.js

@@ -20,7 +20,7 @@ let quill = new Quill('#quill-container', {
       [{ header: [1, 2, false] }],
       ['bold', 'italic', 'underline'],
       ['image', 'code-block'],
-      [{ color: [] }, { background: [] }],    // Snow theme fills in values
+      [{ color: [] }, { background: [] }], // Snow theme fills in values
       [{ script: 'sub' }, { script: 'super' }],
       ['link', 'image'],
       ['link', 'code-block'],
@@ -31,18 +31,18 @@ let quill = new Quill('#quill-container', {
     }
   },
   placeholder: 'Compose an epic...',
-  theme: 'snow'  // or 'bubble'
+  theme: 'snow' // or 'bubble'
 })
 
 let cursors = quill.getModule('cursors')
 
-function drawCursors () {
+const drawCursors = () => {
   cursors.clearCursors()
   users.map((user, userId) => {
     if (user !== myUserInfo) {
       let relativeRange = user.get('range')
-      let lastUpdated = new Date(user.get('last updated'))
-      if (lastUpdated != null && new Date() - lastUpdated < 20000 && relativeRange != null) {
+      let lastUpdated = new Date(user.get('last updated')).getTime()
+      if (lastUpdated != null && new Date().getTime() - lastUpdated < 20000 && relativeRange != null) {
         let start = Y.utils.fromRelativePosition(y, relativeRange.start).offset
         let end = Y.utils.fromRelativePosition(y, relativeRange.end).offset
         let range = { index: start, length: end - start }

examples_all/serviceworker/index.js

@@ -35,7 +35,7 @@ Y({
       toolbar: [
         [{ size: ['small', false, 'large', 'huge'] }],
         ['bold', 'italic', 'underline'],
-        [{ color: [] }, { background: [] }],    // Snow theme fills in values
+        [{ color: [] }, { background: [] }], // Snow theme fills in values
         [{ script: 'sub' }, { script: 'super' }],
         ['link', 'image'],
         ['link', 'code-block'],

index.js

@@ -0,0 +1,55 @@
+
+import './structs/Item.js'
+import { Delete } from './structs/Delete.js'
+import { ItemJSON } from './structs/ItemJSON.js'
+import { ItemString } from './structs/ItemString.js'
+import { ItemFormat } from './structs/ItemFormat.js'
+import { ItemEmbed } from './structs/ItemEmbed.js'
+import { GC } from './structs/GC.js'
+
+import { YArray } from './types/YArray.js'
+import { YMap } from './types/YMap.js'
+import { YText } from './types/YText.js'
+import { YXmlText } from './types/YXmlText.js'
+import { YXmlHook } from './types/YXmlHook.js'
+import { YXmlElement, YXmlFragment } from './types/YXmlElement.js'
+
+import { registerStruct } from './utils/structReferences.js'
+
+import * as decoding from './lib/decoding.js'
+import * as encoding from './lib/encoding.js'
+import * as awarenessProtocol from './protocols/awareness.js'
+import * as syncProtocol from './protocols/sync.js'
+import * as authProtocol from './protocols/auth.js'
+
+export { decoding, encoding, awarenessProtocol, syncProtocol, authProtocol }
+
+export { Y } from './utils/Y.js'
+export { UndoManager } from './utils/UndoManager.js'
+export { Transaction } from './utils/Transaction.js'
+
+export { YArray as Array } from './types/YArray.js'
+export { YMap as Map } from './types/YMap.js'
+export { YText as Text } from './types/YText.js'
+export { YXmlText as XmlText } from './types/YXmlText.js'
+export { YXmlHook as XmlHook } from './types/YXmlHook.js'
+export { YXmlElement as XmlElement, YXmlFragment as XmlFragment } from './types/YXmlElement.js'
+
+export { getRelativePosition, fromRelativePosition } from './utils/relativePosition.js'
+export { registerStruct } from './utils/structReferences.js'
+export * from './lib/mutex.js'
+
+registerStruct(0, GC)
+registerStruct(1, ItemJSON)
+registerStruct(2, ItemString)
+registerStruct(3, ItemFormat)
+registerStruct(4, Delete)
+
+registerStruct(5, YArray)
+registerStruct(6, YMap)
+registerStruct(7, YText)
+registerStruct(8, YXmlFragment)
+registerStruct(9, YXmlElement)
+registerStruct(10, YXmlText)
+registerStruct(11, YXmlHook)
+registerStruct(12, ItemEmbed)

lib/NamedEventHandler.js

@@ -2,7 +2,7 @@
 /**
  * Handles named events.
  */
-export default class NamedEventHandler {
+export class NamedEventHandler {
   constructor () {
     this._eventListener = new Map()
     this._stateListener = new Map()
@@ -57,7 +57,7 @@ export default class NamedEventHandler {
     let state = this._stateListener.get(name)
     if (state === undefined) {
       state = {}
-      state.promise = new Promise(function (resolve) {
+      state.promise = new Promise(resolve => {
         state.resolve = resolve
       })
       this._stateListener.set(name, state)

lib/Tree.js

@@ -1,5 +1,8 @@
+/**
+ * @module tree
+ */
 
-function rotate (tree, parent, newParent, n) {
+const rotate = (tree, parent, newParent, n) => {
   if (parent === null) {
     tree.root = newParent
     newParent._parent = null
@@ -111,10 +114,16 @@ class N {
   }
 }
 
+const isBlack = node =>
+  node !== null ? node.isBlack() : true
+
+const isRed = (node) =>
+  node !== null ? node.isRed() : false
+
 /*
  * This is a Red Black Tree implementation
  */
-export default class Tree {
+export class Tree {
   constructor () {
     this.root = null
     this.length = 0
@@ -310,12 +319,6 @@ export default class Tree {
     }
   }
   _fixDelete (n) {
-    function isBlack (node) {
-      return node !== null ? node.isBlack() : true
-    }
-    function isRed (node) {
-      return node !== null ? node.isRed() : false
-    }
     if (n.parent === null) {
       // this can only be called after the first iteration of fixDelete.
       return

lib/binary.js

@@ -0,0 +1,40 @@
+/* eslint-env browser */
+
+/**
+ * @module binary
+ */
+
+import * as string from './string.js'
+import * as globals from './globals.js'
+
+export const BITS32 = 0xFFFFFFFF
+export const BITS21 = (1 << 21) - 1
+export const BITS16 = (1 << 16) - 1
+
+export const BIT26 = 1 << 26
+export const BIT32 = 1 << 32
+
+/**
+ * @param {Uint8Array} bytes
+ * @return {string}
+ */
+export const toBase64 = bytes => {
+  let s = ''
+  for (let i = 0; i < bytes.byteLength; i++) {
+    s += string.fromCharCode(bytes[i])
+  }
+  return btoa(s)
+}
+
+/**
+ * @param {string} s
+ * @return {Uint8Array}
+ */
+export const fromBase64 = s => {
+  const a = atob(s)
+  const bytes = globals.createUint8ArrayFromLen(a.length)
+  for (let i = 0; i < a.length; i++) {
+    bytes[i] = a.charCodeAt(i)
+  }
+  return bytes
+}

lib/broadcastchannel.js

@@ -0,0 +1,72 @@
+/* eslint-env browser */
+
+import * as binary from './binary.js'
+import * as globals from './globals.js'
+
+/**
+ * @typedef {Object} Channel
+ * @property {Set<Function>} Channel.subs
+ * @property {BC} Channel.bc
+ */
+
+/**
+ * @type {Map<string, Channel>}
+ */
+const channels = new Map()
+
+class LocalStoragePolyfill {
+  constructor (room) {
+    this.room = room
+    this.onmessage = null
+    addEventListener('storage', e => e.key === room && this.onmessage !== null && this.onmessage({ data: binary.fromBase64(e.newValue) }))
+  }
+  /**
+   * @param {ArrayBuffer} data
+   */
+  postMessage (buf) {
+    if (typeof localStorage !== 'undefined') {
+      localStorage.setItem(this.room, binary.toBase64(globals.createUint8ArrayFromArrayBuffer(buf)))
+    }
+  }
+}
+
+// Use BroadcastChannel or Polyfill
+const BC = typeof BroadcastChannel === 'undefined' ? LocalStoragePolyfill : BroadcastChannel
+
+/**
+ * @param {string} room
+ * @return {Channel}
+ */
+const getChannel = room => {
+  let c = channels.get(room)
+  if (c === undefined) {
+    const subs = new Set()
+    const bc = new BC(room)
+    bc.onmessage = e => subs.forEach(sub => sub(e.data))
+    c = {
+      bc, subs
+    }
+    channels.set(room, c)
+  }
+  return c
+}
+
+/**
+ * @function
+ * @param {string} room
+ * @param {Function} f
+ */
+export const subscribe = (room, f) => getChannel(room).subs.add(f)
+
+/**
+ * Publish data to all subscribers (including subscribers on this tab)
+ *
+ * @function
+ * @param {string} room
+ * @param {ArrayBuffer} data
+ */
+export const publish = (room, data) => {
+  const c = getChannel(room)
+  c.bc.postMessage(data)
+  c.subs.forEach(sub => sub(data))
+}

lib/decoding.js

@@ -0,0 +1,207 @@
+/**
+ * @module decoding
+ */
+
+/* global Buffer */
+
+import * as globals from './globals.js'
+
+/**
+ * A Decoder handles the decoding of an ArrayBuffer.
+ */
+export class Decoder {
+  /**
+   * @param {ArrayBuffer} buffer Binary data to decode
+   */
+  constructor (buffer) {
+    this.arr = new Uint8Array(buffer)
+    this.pos = 0
+  }
+}
+
+/**
+ * @function
+ * @param {ArrayBuffer} buffer
+ * @return {Decoder}
+ */
+export const createDecoder = buffer => new Decoder(buffer)
+
+/**
+ * @function
+ * @param {Decoder} decoder
+ * @return {boolean}
+ */
+export const hasContent = decoder => decoder.pos !== decoder.arr.length
+
+/**
+ * Clone a decoder instance.
+ * Optionally set a new position parameter.
+ *
+ * @function
+ * @param {Decoder} decoder The decoder instance
+ * @param {number} [newPos] Defaults to current position
+ * @return {Decoder} A clone of `decoder`
+ */
+export const clone = (decoder, newPos = decoder.pos) => {
+  let _decoder = createDecoder(decoder.arr.buffer)
+  _decoder.pos = newPos
+  return _decoder
+}
+
+/**
+ * Read `len` bytes as an ArrayBuffer.
+ * @function
+ * @param {Decoder} decoder The decoder instance
+ * @param {number} len The length of bytes to read
+ * @return {ArrayBuffer}
+ */
+export const readArrayBuffer = (decoder, len) => {
+  const arrayBuffer = globals.createUint8ArrayFromLen(len)
+  const view = globals.createUint8ArrayFromBuffer(decoder.arr.buffer, decoder.pos, len)
+  arrayBuffer.set(view)
+  decoder.pos += len
+  return arrayBuffer.buffer
+}
+
+/**
+ * Read variable length payload as ArrayBuffer
+ * @function
+ * @param {Decoder} decoder
+ * @return {ArrayBuffer}
+ */
+export const readPayload = decoder => readArrayBuffer(decoder, readVarUint(decoder))
+
+/**
+ * Read the rest of the content as an ArrayBuffer
+ * @function
+ * @param {Decoder} decoder
+ * @return {ArrayBuffer}
+ */
+export const readTail = decoder => readArrayBuffer(decoder, decoder.arr.length - decoder.pos)
+
+/**
+ * Skip one byte, jump to the next position.
+ * @function
+ * @param {Decoder} decoder The decoder instance
+ * @return {number} The next position
+ */
+export const skip8 = decoder => decoder.pos++
+
+/**
+ * Read one byte as unsigned integer.
+ * @function
+ * @param {Decoder} decoder The decoder instance
+ * @return {number} Unsigned 8-bit integer
+ */
+export const readUint8 = decoder => decoder.arr[decoder.pos++]
+
+/**
+ * Read 4 bytes as unsigned integer.
+ *
+ * @function
+ * @param {Decoder} decoder
+ * @return {number} An unsigned integer.
+ */
+export const readUint32 = decoder => {
+  let uint =
+    decoder.arr[decoder.pos] +
+    (decoder.arr[decoder.pos + 1] << 8) +
+    (decoder.arr[decoder.pos + 2] << 16) +
+    (decoder.arr[decoder.pos + 3] << 24)
+  decoder.pos += 4
+  return uint
+}
+
+/**
+ * Look ahead without incrementing position.
+ * to the next byte and read it as unsigned integer.
+ *
+ * @function
+ * @param {Decoder} decoder
+ * @return {number} An unsigned integer.
+ */
+export const peekUint8 = decoder => decoder.arr[decoder.pos]
+
+/**
+ * Read unsigned integer (32bit) with variable length.
+ * 1/8th of the storage is used as encoding overhead.
+ *  * numbers < 2^7 is stored in one bytlength
+ *  * numbers < 2^14 is stored in two bylength
+ *
+ * @function
+ * @param {Decoder} decoder
+ * @return {number} An unsigned integer.length
+ */
+export const readVarUint = decoder => {
+  let num = 0
+  let len = 0
+  while (true) {
+    let r = decoder.arr[decoder.pos++]
+    num = num | ((r & 0b1111111) << len)
+    len += 7
+    if (r < 1 << 7) {
+      return num >>> 0 // return unsigned number!
+    }
+    if (len > 35) {
+      throw new Error('Integer out of range!')
+    }
+  }
+}
+
+/**
+ * Look ahead and read varUint without incrementing position
+ *
+ * @function
+ * @param {Decoder} decoder
+ * @return {number}
+ */
+export const peekVarUint = decoder => {
+  let pos = decoder.pos
+  let s = readVarUint(decoder)
+  decoder.pos = pos
+  return s
+}
+
+
+/**
+ * Read string of variable length
+ * * varUint is used to store the length of the string
+ *
+ * Transforming utf8 to a string is pretty expensive. The code performs 10x better
+ * when String.fromCodePoint is fed with all characters as arguments.
+ * But most environments have a maximum number of arguments per functions.
+ * For effiency reasons we apply a maximum of 10000 characters at once.
+ *
+ * @function
+ * @param {Decoder} decoder
+ * @return {String} The read String.
+ */
+export const readVarString = decoder => {
+  let remainingLen = readVarUint(decoder)
+  let encodedString = ''
+  while (remainingLen > 0) {
+    const nextLen = remainingLen < 10000 ? remainingLen : 10000
+    const bytes = new Array(nextLen)
+    for (let i = 0; i < nextLen; i++) {
+      bytes[i] = decoder.arr[decoder.pos++]
+    }
+    encodedString += String.fromCodePoint.apply(null, bytes)
+    remainingLen -= nextLen
+  }
+  return decodeURIComponent(escape(encodedString))
+}
+
+/**
+ * Look ahead and read varString without incrementing position
+ *
+ * @function
+ * @param {Decoder} decoder
+ * @return {string}
+ */
+export const peekVarString = decoder => {
+  let pos = decoder.pos
+  let s = readVarString(decoder)
+  decoder.pos = pos
+  return s
+}
+

lib/diff.js

@@ -1,3 +1,6 @@
+/**
+ * @module diff
+ */
 
 /**
  * A SimpleDiff describes a change on a String.
@@ -12,7 +15,7 @@
  *
  * @typedef {Object} SimpleDiff
  * @property {Number} pos The index where changes were applied
- * @property {Number} delete The number of characters to delete starting
+ * @property {Number} remove The number of characters to delete starting
  *                                  at `index`.
  * @property {String} insert The new text to insert at `index` after applying
  *                           `delete`
@@ -27,7 +30,7 @@
  * @param {String} b The updated version of the string
  * @return {SimpleDiff} The diff description.
  */
-export default function simpleDiff (a, b) {
+export const simpleDiff = (a, b) => {
   let left = 0 // number of same characters counting from left
   let right = 0 // number of same characters counting from right
   while (left < a.length && left < b.length && a[left] === b[left]) {

lib/encoding.js

@@ -0,0 +1,243 @@
+/**
+ * @module encoding
+ */
+import * as globals from './globals.js'
+
+const bits7 = 0b1111111
+const bits8 = 0b11111111
+
+/**
+ * A BinaryEncoder handles the encoding to an ArrayBuffer.
+ */
+export class Encoder {
+  constructor () {
+    this.cpos = 0
+    this.cbuf = globals.createUint8ArrayFromLen(1000)
+    this.bufs = []
+  }
+}
+
+/**
+ * @function
+ * @return {Encoder}
+ */
+export const createEncoder = () => new Encoder()
+
+/**
+ * The current length of the encoded data.
+ *
+ * @function
+ * @param {Encoder} encoder
+ * @return {number}
+ */
+export const length = encoder => {
+  let len = encoder.cpos
+  for (let i = 0; i < encoder.bufs.length; i++) {
+    len += encoder.bufs[i].length
+  }
+  return len
+}
+
+/**
+ * Transform to ArrayBuffer. TODO: rename to .toArrayBuffer
+ *
+ * @function
+ * @param {Encoder} encoder
+ * @return {ArrayBuffer} The created ArrayBuffer.
+ */
+export const toBuffer = encoder => {
+  const uint8arr = globals.createUint8ArrayFromLen(length(encoder))
+  let curPos = 0
+  for (let i = 0; i < encoder.bufs.length; i++) {
+    let d = encoder.bufs[i]
+    uint8arr.set(d, curPos)
+    curPos += d.length
+  }
+  uint8arr.set(globals.createUint8ArrayFromBuffer(encoder.cbuf.buffer, 0, encoder.cpos), curPos)
+  return uint8arr.buffer
+}
+
+/**
+ * Write one byte to the encoder.
+ *
+ * @function
+ * @param {Encoder} encoder
+ * @param {number} num The byte that is to be encoded.
+ */
+export const write = (encoder, num) => {
+  if (encoder.cpos === encoder.cbuf.length) {
+    encoder.bufs.push(encoder.cbuf)
+    encoder.cbuf = globals.createUint8ArrayFromLen(encoder.cbuf.length * 2)
+    encoder.cpos = 0
+  }
+  encoder.cbuf[encoder.cpos++] = num
+}
+
+/**
+ * Write one byte at a specific position.
+ * Position must already be written (i.e. encoder.length > pos)
+ *
+ * @function
+ * @param {Encoder} encoder
+ * @param {number} pos Position to which to write data
+ * @param {number} num Unsigned 8-bit integer
+ */
+export const set = (encoder, pos, num) => {
+  let buffer = null
+  // iterate all buffers and adjust position
+  for (let i = 0; i < encoder.bufs.length && buffer === null; i++) {
+    const b = encoder.bufs[i]
+    if (pos < b.length) {
+      buffer = b // found buffer
+    } else {
+      pos -= b.length
+    }
+  }
+  if (buffer === null) {
+    // use current buffer
+    buffer = encoder.cbuf
+  }
+  buffer[pos] = num
+}
+
+/**
+ * Write one byte as an unsigned integer.
+ *
+ * @function
+ * @param {Encoder} encoder
+ * @param {number} num The number that is to be encoded.
+ */
+export const writeUint8 = (encoder, num) => write(encoder, num & bits8)
+
+/**
+ * Write one byte as an unsigned Integer at a specific location.
+ *
+ * @function
+ * @param {Encoder} encoder
+ * @param {number} pos The location where the data will be written.
+ * @param {number} num The number that is to be encoded.
+ */
+export const setUint8 = (encoder, pos, num) => set(encoder, pos, num & bits8)
+
+/**
+ * Write two bytes as an unsigned integer.
+ *
+ * @function
+ * @param {Encoder} encoder
+ * @param {number} num The number that is to be encoded.
+ */
+export const writeUint16 = (encoder, num) => {
+  write(encoder, num & bits8)
+  write(encoder, (num >>> 8) & bits8)
+}
+/**
+ * Write two bytes as an unsigned integer at a specific location.
+ *
+ * @function
+ * @param {Encoder} encoder
+ * @param {number} pos The location where the data will be written.
+ * @param {number} num The number that is to be encoded.
+ */
+export const setUint16 = (encoder, pos, num) => {
+  set(encoder, pos, num & bits8)
+  set(encoder, pos + 1, (num >>> 8) & bits8)
+}
+
+/**
+ * Write two bytes as an unsigned integer
+ *
+ * @function
+ * @param {Encoder} encoder
+ * @param {number} num The number that is to be encoded.
+ */
+export const writeUint32 = (encoder, num) => {
+  for (let i = 0; i < 4; i++) {
+    write(encoder, num & bits8)
+    num >>>= 8
+  }
+}
+
+/**
+ * Write two bytes as an unsigned integer at a specific location.
+ *
+ * @function
+ * @param {Encoder} encoder
+ * @param {number} pos The location where the data will be written.
+ * @param {number} num The number that is to be encoded.
+ */
+export const setUint32 = (encoder, pos, num) => {
+  for (let i = 0; i < 4; i++) {
+    set(encoder, pos + i, num & bits8)
+    num >>>= 8
+  }
+}
+
+/**
+ * Write a variable length unsigned integer.
+ *
+ * Encodes integers in the range from [0, 4294967295] / [0, 0xffffffff]. (max 32 bit unsigned integer)
+ *
+ * @function
+ * @param {Encoder} encoder
+ * @param {number} num The number that is to be encoded.
+ */
+export const writeVarUint = (encoder, num) => {
+  while (num >= 0b10000000) {
+    write(encoder, 0b10000000 | (bits7 & num))
+    num >>>= 7
+  }
+  write(encoder, bits7 & num)
+}
+
+/**
+ * Write a variable length string.
+ *
+ * @function
+ * @param {Encoder} encoder
+ * @param {String} str The string that is to be encoded.
+ */
+export const writeVarString = (encoder, str) => {
+  const encodedString = unescape(encodeURIComponent(str))
+  const len = encodedString.length
+  writeVarUint(encoder, len)
+  for (let i = 0; i < len; i++) {
+    write(encoder, encodedString.codePointAt(i))
+  }
+}
+
+/**
+ * Write the content of another Encoder.
+ *
+ * TODO: can be improved!
+ *
+ * @function
+ * @param {Encoder} encoder The enUint8Arr
+ * @param {Encoder} append The BinaryEncoder to be written.
+ */
+export const writeBinaryEncoder = (encoder, append) => writeArrayBuffer(encoder, toBuffer(append))
+
+/**
+ * Append an arrayBuffer to the encoder.
+ *
+ * @function
+ * @param {Encoder} encoder
+ * @param {ArrayBuffer} arrayBuffer
+ */
+export const writeArrayBuffer = (encoder, arrayBuffer) => {
+  const prevBufferLen = encoder.cbuf.length
+  // TODO: Append to cbuf if possible
+  encoder.bufs.push(globals.createUint8ArrayFromBuffer(encoder.cbuf.buffer, 0, encoder.cpos))
+  encoder.bufs.push(globals.createUint8ArrayFromArrayBuffer(arrayBuffer))
+  encoder.cbuf = globals.createUint8ArrayFromLen(prevBufferLen)
+  encoder.cpos = 0
+}
+
+/**
+ * @function
+ * @param {Encoder} encoder
+ * @param {ArrayBuffer} arrayBuffer
+ */
+export const writePayload = (encoder, arrayBuffer) => {
+  writeVarUint(encoder, arrayBuffer.byteLength)
+  writeArrayBuffer(encoder, arrayBuffer)
+}

lib/encoding.test.js

@@ -0,0 +1,49 @@
+import * as encoding from './encoding.js'
+
+/**
+ * Check if binary encoding is compatible with golang binary encoding - binary.PutVarUint.
+ *
+ * Result: is compatible up to 32 bit: [0, 4294967295] / [0, 0xffffffff]. (max 32 bit unsigned integer)
+ */
+let err = null
+try {
+  const tests = [
+    { in: 0, out: [0] },
+    { in: 1, out: [1] },
+    { in: 128, out: [128, 1] },
+    { in: 200, out: [200, 1] },
+    { in: 32, out: [32] },
+    { in: 500, out: [244, 3] },
+    { in: 256, out: [128, 2] },
+    { in: 700, out: [188, 5] },
+    { in: 1024, out: [128, 8] },
+    { in: 1025, out: [129, 8] },
+    { in: 4048, out: [208, 31] },
+    { in: 5050, out: [186, 39] },
+    { in: 1000000, out: [192, 132, 61] },
+    { in: 34951959, out: [151, 166, 213, 16] },
+    { in: 2147483646, out: [254, 255, 255, 255, 7] },
+    { in: 2147483647, out: [255, 255, 255, 255, 7] },
+    { in: 2147483648, out: [128, 128, 128, 128, 8] },
+    { in: 2147483700, out: [180, 128, 128, 128, 8] },
+    { in: 4294967294, out: [254, 255, 255, 255, 15] },
+    { in: 4294967295, out: [255, 255, 255, 255, 15] }
+  ]
+  tests.forEach(test => {
+    const encoder = encoding.createEncoder()
+    encoding.writeVarUint(encoder, test.in)
+    const buffer = new Uint8Array(encoding.toBuffer(encoder))
+    if (buffer.byteLength !== test.out.length) {
+      throw new Error('Length don\'t match!')
+    }
+    for (let j = 0; j < buffer.length; j++) {
+      if (buffer[j] !== test[1][j]) {
+        throw new Error('values don\'t match!')
+      }
+    }
+  })
+} catch (error) {
+  err = error
+} finally {
+  console.log('YDB Client: Encoding varUint compatiblity test: ', err || 'success!')
+}

lib/globals.js

@@ -0,0 +1,65 @@
+/**
+ * @module globals
+ */
+
+/* eslint-env browser */
+
+export const Uint8Array_ = Uint8Array
+
+/**
+ * @param {Array<number>} arr
+ * @return {ArrayBuffer}
+ */
+export const createArrayBufferFromArray = arr => new Uint8Array_(arr).buffer
+
+export const createUint8ArrayFromLen = len => new Uint8Array_(len)
+
+/**
+ * Create Uint8Array with initial content from buffer
+ */
+export const createUint8ArrayFromBuffer = (buffer, byteOffset, length) => new Uint8Array_(buffer, byteOffset, length)
+
+/**
+ * Create Uint8Array with initial content from buffer
+ */
+export const createUint8ArrayFromArrayBuffer = arraybuffer => new Uint8Array_(arraybuffer)
+export const createArrayFromArrayBuffer = arraybuffer => Array.from(createUint8ArrayFromArrayBuffer(arraybuffer))
+
+export const createPromise = f => new Promise(f)
+
+export const createMap = () => new Map()
+export const createSet = () => new Set()
+
+/**
+ * `Promise.all` wait for all promises in the array to resolve and return the result
+ * @param {Array<Promise<any>>} arrp
+ * @return {any}
+ */
+export const pall = arrp => Promise.all(arrp)
+export const preject = reason => Promise.reject(reason)
+export const presolve = res => Promise.resolve(res)
+
+export const until = (timeout, check) => createPromise((resolve, reject) => {
+  const hasTimeout = timeout > 0
+  const untilInterval = () => {
+    if (check()) {
+      clearInterval(intervalHandle)
+      resolve()
+    } else if (hasTimeout) {
+      timeout -= 10
+      if (timeout < 0) {
+        clearInterval(intervalHandle)
+        reject(error('Timeout'))
+      }
+    }
+  }
+  const intervalHandle = setInterval(untilInterval, 10)
+})
+
+export const error = description => new Error(description)
+
+/**
+ * @param {number} t Time to wait
+ * @return {Promise} Promise that is resolved after t ms
+ */
+export const wait = t => createPromise(r => setTimeout(r, t))

lib/idb.js

@@ -0,0 +1,166 @@
+/**
+ * @module lib/idb
+ */
+
+/* eslint-env browser */
+
+import * as globals from './globals.js'
+
+/*
+ * IDB Request to Promise transformer
+ */
+export const rtop = request => globals.createPromise((resolve, reject) => {
+  request.onerror = event => reject(new Error(event.target.error))
+  request.onblocked = () => location.reload()
+  request.onsuccess = event => resolve(event.target.result)
+})
+
+/**
+ * @param {string} name
+ * @param {Function} initDB Called when the database is first created
+ * @return {Promise<IDBDatabase>}
+ */
+export const openDB = (name, initDB) => globals.createPromise((resolve, reject) => {
+  let request = indexedDB.open(name)
+  /**
+   * @param {any} event
+   */
+  request.onupgradeneeded = event => initDB(event.target.result)
+  /**
+   * @param {any} event
+   */
+  request.onerror = event => reject(new Error(event.target.error))
+  request.onblocked = () => location.reload()
+  /**
+   * @param {any} event
+   */
+  request.onsuccess = event => {
+    const db = event.target.result
+    db.onversionchange = () => { db.close() }
+    addEventListener('unload', () => db.close())
+    resolve(db)
+  }
+})
+
+export const deleteDB = name => rtop(indexedDB.deleteDatabase(name))
+
+export const createStores = (db, definitions) => definitions.forEach(d =>
+  db.createObjectStore.apply(db, d)
+)
+
+/**
+ * @param {IDBObjectStore} store
+ * @param {String | number | ArrayBuffer | Date | Array } key
+ * @return {Promise<ArrayBuffer>}
+ */
+export const get = (store, key) =>
+  rtop(store.get(key))
+
+/**
+ * @param {IDBObjectStore} store
+ * @param {String | number | ArrayBuffer | Date | IDBKeyRange | Array } key
+ */
+export const del = (store, key) =>
+  rtop(store.delete(key))
+
+/**
+ * @param {IDBObjectStore} store
+ * @param {String | number | ArrayBuffer | Date | boolean} item
+ * @param {String | number | ArrayBuffer | Date | Array} [key]
+ */
+export const put = (store, item, key) =>
+  rtop(store.put(item, key))
+
+/**
+ * @param {IDBObjectStore} store
+ * @param {String | number | ArrayBuffer | Date | boolean}  item
+ * @param {String | number | ArrayBuffer | Date | Array}  [key]
+ * @return {Promise<ArrayBuffer>}
+ */
+export const add = (store, item, key) =>
+  rtop(store.add(item, key))
+
+/**
+ * @param {IDBObjectStore} store
+ * @param {String | number | ArrayBuffer | Date}  item
+ * @return {Promise<number>}
+ */
+export const addAutoKey = (store, item) =>
+  rtop(store.add(item))
+
+/**
+ * @param {IDBObjectStore} store
+ * @param {IDBKeyRange} [range]
+ */
+export const getAll = (store, range) =>
+  rtop(store.getAll(range))
+
+/**
+ * @param {IDBObjectStore} store
+ * @param {IDBKeyRange} [range]
+ */
+export const getAllKeys = (store, range) =>
+  rtop(store.getAllKeys(range))
+
+/**
+ * @typedef KeyValuePair
+ * @type {Object}
+ * @property {any} k key
+ * @property {any} v Value
+ */
+
+/**
+ * @param {IDBObjectStore} store
+ * @param {IDBKeyRange} [range]
+ * @return {Promise<Array<KeyValuePair>>}
+ */
+export const getAllKeysValues = (store, range) =>
+  globals.pall([getAllKeys(store, range), getAll(store, range)]).then(([ks, vs]) => ks.map((k, i) => ({ k, v: vs[i] })))
+
+/**
+ * Iterate on keys and values
+ * @param {IDBObjectStore} store
+ * @param {IDBKeyRange?} keyrange
+ * @param {Function} f Return true in order to continue the cursor
+ */
+export const iterate = (store, keyrange, f) => globals.createPromise((resolve, reject) => {
+  const request = store.openCursor(keyrange)
+  request.onerror = reject
+  /**
+   * @param {any} event
+   */
+  request.onsuccess = event => {
+    const cursor = event.target.result
+    if (cursor === null) {
+      return resolve()
+    }
+    f(cursor.value, cursor.key)
+    cursor.continue()
+  }
+})
+
+/**
+ * Iterate on the keys (no values)
+ *
+ * @param {IDBObjectStore} store
+ * @param {IDBKeyRange} keyrange
+ * @param {function} f Call `idbcursor.continue()` to iterate further
+ */
+export const iterateKeys = (store, keyrange, f) => {
+  /**
+   * @param {any} event
+   */
+  store.openKeyCursor(keyrange).onsuccess = event => f(event.target.result)
+}
+
+/**
+ * Open store from transaction
+ * @param {IDBTransaction} t
+ * @param {String} store
+ * @returns {IDBObjectStore}
+ */
+export const getStore = (t, store) => t.objectStore(store)
+
+export const createIDBKeyRangeBound = (lower, upper, lowerOpen, upperOpen) => IDBKeyRange.bound(lower, upper, lowerOpen, upperOpen)
+export const createIDBKeyRangeUpperBound = (upper, upperOpen) => IDBKeyRange.upperBound(upper, upperOpen)
+export const createIDBKeyRangeLowerBound = (lower, lowerOpen) => IDBKeyRange.lowerBound(lower, lowerOpen)

lib/idb.test.js

@@ -0,0 +1,34 @@
+import * as test from './testing.js'
+import * as idb from './idb.js'
+import * as logging from './logging.js'
+
+const initTestDB = db => idb.createStores(db, [['test']])
+const testDBName = 'idb-test'
+
+const createTransaction = db => db.transaction(['test'], 'readwrite')
+/**
+ * @param {IDBTransaction} t
+ * @return {IDBObjectStore}
+ */
+const getStore = t => idb.getStore(t, 'test')
+
+idb.deleteDB(testDBName).then(() => idb.openDB(testDBName, initTestDB)).then(db => {
+  test.run('idb iteration', async testname => {
+    const t = createTransaction(db)
+    await idb.put(getStore(t), 0, ['t', 0])
+    await idb.put(getStore(t), 1, ['t', 1])
+    const valsGetAll = await idb.getAll(getStore(t))
+    if (valsGetAll.length !== 2) {
+      logging.fail('getAll does not return two values')
+    }
+    const valsIterate = []
+    const keyrange = idb.createIDBKeyRangeBound(['t', 0], ['t', 1], false, false)
+    await idb.put(getStore(t), 2, ['t', 2])
+    await idb.iterate(getStore(t), keyrange, (val, key) => {
+      valsIterate.push(val)
+    })
+    if (valsIterate.length !== 2) {
+      logging.fail('iterate does not return two values')
+    }
+  })
+})

lib/logging.js

@@ -0,0 +1,26 @@
+/**
+ * @module logging
+ */
+
+import * as globals from './globals.js'
+
+let date = new Date().getTime()
+
+const writeDate = () => {
+  const oldDate = date
+  date = new Date().getTime()
+  return date - oldDate
+}
+
+export const print = (...args) => console.log(...args)
+export const log = m => print(`%cydb-client: %c${m} %c+${writeDate()}ms`, 'color: blue;', '', 'color: blue')
+
+export const fail = m => {
+  throw new Error(m)
+}
+
+/**
+ * @param {ArrayBuffer} buffer
+ * @return {string}
+ */
+export const arrayBufferToString = buffer => JSON.stringify(Array.from(globals.createUint8ArrayFromBuffer(buffer)))

lib/math.js

@@ -0,0 +1,28 @@
+/**
+ * @module math
+ */
+export const floor = Math.floor
+
+/**
+ * @function
+ * @param {number} a
+ * @param {number} b
+ * @return {number} The sum of a and b
+ */
+export const add = (a, b) => a + b
+
+/**
+ * @function
+ * @param {number} a
+ * @param {number} b
+ * @return {number} The smaller element of a and b
+ */
+export const min = (a, b) => a < b ? a : b
+
+/**
+ * @function
+ * @param {number} a
+ * @param {number} b
+ * @return {number} The bigger element of a and b
+ */
+export const max = (a, b) => a > b ? a : b

lib/mutex.js

@@ -0,0 +1,31 @@
+
+/**
+ * Creates a mutual exclude function with the following property:
+ *
+ * @example
+ * const mutex = createMutex()
+ * mutex(() => {
+ *   // This function is immediately executed
+ *   mutex(() => {
+ *     // This function is not executed, as the mutex is already active.
+ *   })
+ * })
+ *
+ * @return {Function} A mutual exclude function
+ * @public
+ */
+export const createMutex = () => {
+  let token = true
+  return (f, g) => {
+    if (token) {
+      token = false
+      try {
+        f()
+      } finally {
+        token = true
+      }
+    } else if (g !== undefined) {
+      g()
+    }
+  }
+}

lib/number.js

@@ -0,0 +1,6 @@
+/**
+ * @module number
+ */
+
+export const MAX_SAFE_INTEGER = Number.MAX_SAFE_INTEGER
+export const MIN_SAFE_INTEGER = Number.MIN_SAFE_INTEGER

lib/object.js

@@ -0,0 +1,14 @@
+
+export const create = Object.create(null)
+
+export const keys = Object.keys
+
+export const equalFlat = (a, b) => {
+  const keys = Object.keys(a)
+  let eq = keys.length === Object.keys(b).length
+  for (let i = 0; i < keys.length && eq; i++) {
+    const key = keys[i]
+    eq = a[key] === b[key]
+  }
+  return eq
+}

lib/prng/PRNG/Mt19937.js

@@ -0,0 +1,67 @@
+/**
+ * @module prng
+ */
+const N = 624
+const M = 397
+
+const twist = (u, v) => ((((u & 0x80000000) | (v & 0x7fffffff)) >>> 1) ^ ((v & 1) ? 0x9908b0df : 0))
+
+const nextState = (state) => {
+  let p = 0
+  let j
+  for (j = N - M + 1; --j; p++) {
+    state[p] = state[p + M] ^ twist(state[p], state[p + 1])
+  }
+  for (j = M; --j; p++) {
+    state[p] = state[p + M - N] ^ twist(state[p], state[p + 1])
+  }
+  state[p] = state[p + M - N] ^ twist(state[p], state[0])
+}
+
+/**
+ * This is a port of Shawn Cokus's implementation of the original Mersenne Twister algorithm (http://www.math.sci.hiroshima-u.ac.jp/~m-mat/MT/MT2002/CODES/MTARCOK/mt19937ar-cok.c).
+ * MT has a very high period of 2^19937. Though the authors of xorshift describe that a high period is not
+ * very relevant (http://vigna.di.unimi.it/xorshift/). It is four times slower than xoroshiro128plus and
+ * needs to recompute its state after generating 624 numbers.
+ *
+ * @example
+ * const gen = new Mt19937(new Date().getTime())
+ * console.log(gen.next())
+ *
+ * @public
+ */
+export class Mt19937 {
+  /**
+   * @param {Number} seed The starting point for the random number generation. If you use the same seed, the generator will return the same sequence of random numbers.
+   */
+  constructor (seed) {
+    this.seed = seed
+    const state = new Uint32Array(N)
+    state[0] = seed
+    for (let i = 1; i < N; i++) {
+      state[i] = (Math.imul(1812433253, (state[i - 1] ^ (state[i - 1] >>> 30))) + i) & 0xFFFFFFFF
+    }
+    this._state = state
+    this._i = 0
+    nextState(this._state)
+  }
+
+  /**
+   * Generate a random signed integer.
+   *
+   * @return {Number} A 32 bit signed integer.
+   */
+  next () {
+    if (this._i === N) {
+      // need to compute a new state
+      nextState(this._state)
+      this._i = 0
+    }
+    let y = this._state[this._i++]
+    y ^= (y >>> 11)
+    y ^= (y << 7) & 0x9d2c5680
+    y ^= (y << 15) & 0xefc60000
+    y ^= (y >>> 18)
+    return y
+  }
+}

lib/prng/PRNG/PRNG.tests.js

@@ -0,0 +1,51 @@
+/**
+ * @module prng
+ */
+
+import { Mt19937 } from './Mt19937.js'
+import { Xoroshiro128plus } from './Xoroshiro128plus.js'
+import { Xorshift32 } from './Xorshift32.js'
+import * as time from '../../time.js'
+
+const DIAMETER = 300
+const NUMBERS = 10000
+
+const runPRNG = (name, Gen) => {
+  console.log('== ' + name + ' ==')
+  const gen = new Gen(1234)
+  let head = 0
+  let tails = 0
+  const date = time.getUnixTime()
+  const canvas = document.createElement('canvas')
+  canvas.height = DIAMETER
+  canvas.width = DIAMETER
+  const ctx = canvas.getContext('2d')
+  const vals = new Set()
+  ctx.fillStyle = 'blue'
+  for (let i = 0; i < NUMBERS; i++) {
+    const n = gen.next() & 0xFFFFFF
+    const x = (gen.next() >>> 0) % DIAMETER
+    const y = (gen.next() >>> 0) % DIAMETER
+    ctx.fillRect(x, y, 1, 2)
+    if ((n & 1) === 1) {
+      head++
+    } else {
+      tails++
+    }
+    if (vals.has(n)) {
+      console.warn(`The generator generated a duplicate`)
+    }
+    vals.add(n)
+  }
+  console.log('time: ', time.getUnixTime() - date)
+  console.log('head:', head, 'tails:', tails)
+  console.log('%c       ', `font-size: 200px; background: url(${canvas.toDataURL()}) no-repeat;`)
+  const h1 = document.createElement('h1')
+  h1.insertBefore(document.createTextNode(name), null)
+  document.body.insertBefore(h1, null)
+  document.body.appendChild(canvas)
+}
+
+runPRNG('mt19937', Mt19937)
+runPRNG('xoroshiro128plus', Xoroshiro128plus)
+runPRNG('xorshift32', Xorshift32)

lib/prng/PRNG/README.md

@@ -0,0 +1,5 @@
+# Pseudo Random Number Generators (PRNG)
+
+Given a seed a PRNG generates a sequence of numbers that cannot be reasonably predicted. Two PRNGs must generate the same random sequence of numbers if  given the same seed.
+
+TODO: explain what POINT is

lib/prng/PRNG/Xoroshiro128plus.js

@@ -0,0 +1,101 @@
+/**
+ * @module prng
+ */
+
+import { Xorshift32 } from './Xorshift32.js'
+
+/**
+ * This is a variant of xoroshiro128plus - the fastest full-period generator passing BigCrush without systematic failures.
+ *
+ * This implementation follows the idea of the original xoroshiro128plus implementation,
+ * but is optimized for the JavaScript runtime. I.e.
+ * * The operations are performed on 32bit integers (the original implementation works with 64bit values).
+ * * The initial 128bit state is computed based on a 32bit seed and Xorshift32.
+ * * This implementation returns two 32bit values based on the 64bit value that is computed by xoroshiro128plus.
+ *   Caution: The last addition step works slightly different than in the original implementation - the add carry of the
+ *   first 32bit addition is not carried over to the last 32bit.
+ *
+ * [Reference implementation](http://vigna.di.unimi.it/xorshift/xoroshiro128plus.c)
+ */
+export class Xoroshiro128plus {
+  constructor (seed) {
+    this.seed = seed
+    // This is a variant of Xoroshiro128plus to fill the initial state
+    const xorshift32 = new Xorshift32(seed)
+    this.state = new Uint32Array(4)
+    for (let i = 0; i < 4; i++) {
+      this.state[i] = xorshift32.next()
+    }
+    this._fresh = true
+  }
+  next () {
+    const state = this.state
+    if (this._fresh) {
+      this._fresh = false
+      return (state[0] + state[2]) & 0xFFFFFFFF
+    } else {
+      this._fresh = true
+      const s0 = state[0]
+      const s1 = state[1]
+      const s2 = state[2] ^ s0
+      const s3 = state[3] ^ s1
+      // function js_rotl (x, k) {
+      //   k = k - 32
+      //   const x1 = x[0]
+      //   const x2 = x[1]
+      //   x[0] = x2 << k | x1 >>> (32 - k)
+      //   x[1] = x1 << k | x2 >>> (32 - k)
+      // }
+      // rotl(s0, 55) // k = 23 = 55 - 32; j = 9 =  32 - 23
+      state[0] = (s1 << 23 | s0 >>> 9) ^ s2 ^ (s2 << 14 | s3 >>> 18)
+      state[1] = (s0 << 23 | s1 >>> 9) ^ s3 ^ (s3 << 14)
+      // rol(s1, 36) // k = 4 = 36 - 32; j = 23 = 32 - 9
+      state[2] = s3 << 4 | s2 >>> 28
+      state[3] = s2 << 4 | s3 >>> 28
+      return (state[1] + state[3]) & 0xFFFFFFFF
+    }
+  }
+}
+
+/*
+
+// reference implementation
+#include <stdint.h>
+#include <stdio.h>
+
+uint64_t s[2];
+
+static inline uint64_t rotl(const uint64_t x, int k) {
+    return (x << k) | (x >> (64 - k));
+}
+
+uint64_t next(void) {
+    const uint64_t s0 = s[0];
+    uint64_t s1 = s[1];
+    s1 ^= s0;
+    s[0] = rotl(s0, 55) ^ s1 ^ (s1 << 14); // a, b
+    s[1] = rotl(s1, 36); // c
+    return (s[0] + s[1]) & 0xFFFFFFFF;
+}
+
+int main(void)
+{
+    int i;
+    s[0] = 1111 | (1337ul << 32);
+    s[1] = 1234 | (9999ul << 32);
+
+    printf("1000 outputs of genrand_int31()\n");
+    for (i=0; i<100; i++) {
+        printf("%10lu ", i);
+        printf("%10lu ", next());
+        printf("- %10lu ", s[0] >> 32);
+        printf("%10lu ", (s[0] << 32) >> 32);
+        printf("%10lu ", s[1] >> 32);
+        printf("%10lu ", (s[1] << 32) >> 32);
+        printf("\n");
+        // if (i%5==4) printf("\n");
+    }
+    return 0;
+}
+
+*/

lib/prng/PRNG/Xorshift32.js

@@ -0,0 +1,29 @@
+/**
+ * @module prng
+ */
+
+/**
+ * Xorshift32 is a very simple but elegang PRNG with a period of `2^32-1`.
+ */
+export class Xorshift32 {
+  /**
+   * @param {number} seed The starting point for the random number generation. If you use the same seed, the generator will return the same sequence of random numbers.
+   */
+  constructor (seed) {
+    this.seed = seed
+    this._state = seed
+  }
+  /**
+   * Generate a random signed integer.
+   *
+   * @return {Number} A 32 bit signed integer.
+   */
+  next () {
+    let x = this._state
+    x ^= x << 13
+    x ^= x >> 17
+    x ^= x << 5
+    this._state = x
+    return x
+  }
+}

lib/prng/prng.js

@@ -0,0 +1,134 @@
+/**
+ * @module prng
+ */
+
+import * as binary from '../binary.js'
+import { fromCharCode, fromCodePoint } from '../string.js'
+import { MAX_SAFE_INTEGER, MIN_SAFE_INTEGER } from '../number.js'
+import * as math from '../math.js'
+
+import { Xoroshiro128plus as DefaultPRNG } from './PRNG/Xoroshiro128plus.js'
+
+/**
+ * Description of the function
+ *  @callback generatorNext
+ *  @return {number} A 32bit integer
+ */
+
+/**
+ * A random type generator.
+ *
+ * @typedef {Object} PRNG
+ * @property {generatorNext} next Generate new number
+ */
+
+/**
+ * Create a Xoroshiro128plus Pseudo-Random-Number-Generator.
+ * This is the fastest full-period generator passing BigCrush without systematic failures.
+ * But there are more PRNGs available in ./PRNG/.
+ *
+ * @param {number} seed A positive 32bit integer. Do not use negative numbers.
+ * @return {PRNG}
+ */
+export const createPRNG = seed => new DefaultPRNG(Math.floor(seed < 1 ? seed * binary.BITS32 : seed))
+
+/**
+ * Generates a single random bool.
+ *
+ * @param {PRNG} gen A random number generator.
+ * @return {Boolean} A random boolean
+ */
+export const bool = gen => (gen.next() & 2) === 2 // brackets are non-optional!
+
+/**
+ * Generates a random integer with 53 bit resolution.
+ *
+ * @param {PRNG} gen A random number generator.
+ * @param {Number} [min = MIN_SAFE_INTEGER] The lower bound of the allowed return values (inclusive).
+ * @param {Number} [max = MAX_SAFE_INTEGER] The upper bound of the allowed return values (inclusive).
+ * @return {Number} A random integer on [min, max]
+ */
+export const int53 = (gen, min = MIN_SAFE_INTEGER, max = MAX_SAFE_INTEGER) => math.floor(real53(gen) * (max + 1 - min) + min)
+
+/**
+ * Generates a random integer with 32 bit resolution.
+ *
+ * @param {PRNG} gen A random number generator.
+ * @param {Number} [min = MIN_SAFE_INTEGER] The lower bound of the allowed return values (inclusive).
+ * @param {Number} [max = MAX_SAFE_INTEGER] The upper bound of the allowed return values (inclusive).
+ * @return {Number} A random integer on [min, max]
+ */
+export const int32 = (gen, min = MIN_SAFE_INTEGER, max = MAX_SAFE_INTEGER) => min + ((gen.next() >>> 0) % (max + 1 - min))
+
+/**
+ * Generates a random real on [0, 1) with 32 bit resolution.
+ *
+ * @param {PRNG} gen A random number generator.
+ * @return {Number} A random real number on [0, 1).
+ */
+export const real32 = gen => (gen.next() >>> 0) / binary.BITS32
+
+/**
+ * Generates a random real on [0, 1) with 53 bit resolution.
+ *
+ * @param {PRNG} gen A random number generator.
+ * @return {Number} A random real number on [0, 1).
+ */
+export const real53 = gen => (((gen.next() >>> 5) * binary.BIT26) + (gen.next() >>> 6)) / MAX_SAFE_INTEGER
+
+/**
+ * Generates a random character from char code 32 - 126. I.e. Characters, Numbers, special characters, and Space:
+ *
+ * (Space)!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRSTUVWXYZ[/]^_`abcdefghijklmnopqrstuvwxyz{|}~
+ */
+export const char = gen => fromCharCode(int32(gen, 32, 126))
+
+/**
+ * @param {PRNG} gen
+ * @return {string} A single letter (a-z)
+ */
+export const letter = gen => fromCharCode(int32(gen, 97, 122))
+
+/**
+ * @param {PRNG} gen
+ * @return {string} A random word without spaces consisting of letters (a-z)
+ */
+export const word = gen => {
+  const len = int32(gen, 0, 20)
+  let str = ''
+  for (let i = 0; i < len; i++) {
+    str += letter(gen)
+  }
+  return str
+}
+
+/**
+ * TODO: this function produces invalid runes. Does not cover all of utf16!!
+ */
+export const utf16Rune = gen => {
+  const codepoint = int32(gen, 0, 256)
+  return fromCodePoint(codepoint)
+}
+
+/**
+ * @param {PRNG} gen
+ * @param {number} [maxlen = 20]
+ */
+export const utf16String = (gen, maxlen = 20) => {
+  const len = int32(gen, 0, maxlen)
+  let str = ''
+  for (let i = 0; i < len; i++) {
+    str += utf16Rune(gen)
+  }
+  return str
+}
+
+/**
+ * Returns one element of a given array.
+ *
+ * @param {PRNG} gen A random number generator.
+ * @param {Array<T>} array Non empty Array of possible values.
+ * @return {T} One of the values of the supplied Array.
+ * @template T
+ */
+export const oneOf = (gen, array) => array[int32(gen, 0, array.length - 1)]

lib/prng/prng.test.js

@@ -0,0 +1,114 @@
+/**
+ * @module prng
+ */
+
+/**
+ *TODO: enable tests
+import * as rt from '../rich-text/formatters.js''
+import { test } from '../test/test.js''
+import Xoroshiro128plus from './PRNG/Xoroshiro128plus.js''
+import Xorshift32 from './PRNG/Xorshift32.js''
+import MT19937 from './PRNG/Mt19937.js''
+import { generateBool, generateInt, generateInt32, generateReal, generateChar } from './random.js''
+import { MAX_SAFE_INTEGER } from '../number/constants.js''
+import { BIT32 } from '../binary/constants.js''
+
+function init (Gen) {
+  return {
+    gen: new Gen(1234)
+  }
+}
+
+const PRNGs = [
+  { name: 'Xoroshiro128plus', Gen: Xoroshiro128plus },
+  { name: 'Xorshift32', Gen: Xorshift32 },
+  { name: 'MT19937', Gen: MT19937 }
+]
+
+const ITERATONS = 1000000
+
+for (const PRNG of PRNGs) {
+  const prefix = rt.orange`${PRNG.name}:`
+
+  test(rt.plain`${prefix} generateBool`, function generateBoolTest (t) {
+    const { gen } = init(PRNG.Gen)
+    let head = 0
+    let tail = 0
+    let b
+    let i
+
+    for (i = 0; i < ITERATONS; i++) {
+      b = generateBool(gen)
+      if (b) {
+        head++
+      } else {
+        tail++
+      }
+    }
+    t.log(`Generated ${head} heads and ${tail} tails.`)
+    t.assert(tail >= Math.floor(ITERATONS * 0.49), 'Generated enough tails.')
+    t.assert(head >= Math.floor(ITERATONS * 0.49), 'Generated enough heads.')
+  })
+
+  test(rt.plain`${prefix} generateInt integers average correctly`, function averageIntTest (t) {
+    const { gen } = init(PRNG.Gen)
+    let count = 0
+    let i
+
+    for (i = 0; i < ITERATONS; i++) {
+      count += generateInt(gen, 0, 100)
+    }
+    const average = count / ITERATONS
+    const expectedAverage = 100 / 2
+    t.log(`Average is: ${average}. Expected average is ${expectedAverage}.`)
+    t.assert(Math.abs(average - expectedAverage) <= 1, 'Expected average is at most 1 off.')
+  })
+
+  test(rt.plain`${prefix} generateInt32 generates integer with 32 bits`, function generateLargeIntegers (t) {
+    const { gen } = init(PRNG.Gen)
+    let num = 0
+    let i
+    let newNum
+    for (i = 0; i < ITERATONS; i++) {
+      newNum = generateInt32(gen, 0, MAX_SAFE_INTEGER)
+      if (newNum > num) {
+        num = newNum
+      }
+    }
+    t.log(`Largest number generated is ${num} (0b${num.toString(2)})`)
+    t.assert(num > (BIT32 >>> 0), 'Largest number is 32 bits long.')
+  })
+
+  test(rt.plain`${prefix} generateReal has 53 bit resolution`, function real53bitResolution (t) {
+    const { gen } = init(PRNG.Gen)
+    let num = 0
+    let i
+    let newNum
+    for (i = 0; i < ITERATONS; i++) {
+      newNum = generateReal(gen) * MAX_SAFE_INTEGER
+      if (newNum > num) {
+        num = newNum
+      }
+    }
+    t.log(`Largest number generated is ${num}.`)
+    t.assert((MAX_SAFE_INTEGER - num) / MAX_SAFE_INTEGER < 0.01, 'Largest number is close to MAX_SAFE_INTEGER (at most 1% off).')
+  })
+
+  test(rt.plain`${prefix} generateChar generates all described characters`, function real53bitResolution (t) {
+    const { gen } = init(PRNG.Gen)
+    const charSet = new Set()
+    const chars = ' !"#$%&\'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRSTUVWXYZ[/]^_`abcdefghijklmnopqrstuvwxyz{|}~"'
+    let i
+    let char
+    for (i = chars.length - 1; i >= 0; i--) {
+      charSet.add(chars[i])
+    }
+    for (i = 0; i < ITERATONS; i++) {
+      char = generateChar(gen)
+      charSet.delete(char)
+    }
+    t.log(`Charactes missing: ${charSet.size} - generating all of "${chars}"`)
+    t.assert(charSet.size === 0, 'Generated all documented characters.')
+  })
+}
+*/

lib/random.js

@@ -0,0 +1,3 @@
+/**
+ * @module random
+ */

lib/string.js

@@ -0,0 +1,6 @@
+/**
+ * @module string
+ */
+
+export const fromCharCode = String.fromCharCode
+export const fromCodePoint = String.fromCodePoint

lib/testing.js

@@ -0,0 +1,37 @@
+/**
+ * @module testing
+ */
+
+import * as logging from './logging.js'
+import { simpleDiff } from './diff.js'
+
+export const run = async (name, f) => {
+  console.log(`%cStart:%c   ${name}`, 'color:blue;', '')
+  const start = new Date()
+  try {
+    await f(name)
+  } catch (e) {
+    logging.print(`%cFailure:%c ${name} in %c${new Date().getTime() - start.getTime()}ms`, 'color:red;font-weight:bold', '', 'color:grey')
+    throw e
+  }
+  logging.print(`%cSuccess:%c ${name} in %c${new Date().getTime() - start.getTime()}ms`, 'color:green;font-weight:bold', '', 'color:grey')
+}
+
+export const compareArrays = (as, bs) => {
+  if (as.length !== bs.length) {
+    return false
+  }
+  for (let i = 0; i < as.length; i++) {
+    if (as[i] !== bs[i]) {
+      return false
+    }
+  }
+  return true
+}
+
+export const compareStrings = (a, b) => {
+  if (a !== b) {
+    const diff = simpleDiff(a, b)
+    logging.print(`%c${a.slice(0, diff.pos)}%c${a.slice(diff.pos, diff.remove)}%c${diff.insert}%c${a.slice(diff.pos + diff.remove)}`, 'color:grey', 'color:red', 'color:green', 'color:grey')
+  }
+}

lib/time.js

@@ -0,0 +1,3 @@
+
+export const getDate = () => new Date()
+export const getUnixTime = () => getDate().getTime()

package.json

@@ -1,38 +1,55 @@
 {
   "name": "yjs",
-  "version": "13.0.0-60",
-  "description": "A framework for real-time p2p shared editing on any data",
-  "main": "./y.node.js",
-  "browser": "./y.js",
-  "module": "./src/y.js",
+  "version": "13.0.0-76",
+  "description": "A ",
+  "main": "./build/yjs.js",
+  "module": "./index.js'",
+  "sideEffects": false,
   "scripts": {
-    "start": "node --experimental-modules src/Connectors/WebsocketsConnector/server.mjs",
     "test": "npm run lint",
-    "debug": "concurrently 'rollup -wc rollup.test.js' 'cutest-serve y.test.js -o'",
-    "lint": "standard src/**/*.mjs test/**/*.mjs tests-lib/**/*.mjs",
-    "docs": "esdoc",
+    "build": "rm -rf build examples/build && PRODUCTION=1 rollup -c",
+    "watch": "rollup -wc",
+    "debug": "concurrently 'npm run watch' 'cutest-serve build/y.test.js -o'",
+    "lint": "standard **/*.js",
+    "docs": "rm -rf docs; jsdoc --configure ./.jsdoc.json --verbose --readme ./README.v13.md --package ./package.json || true",
     "serve-docs": "npm run docs && serve ./docs/",
-    "dist": "rollup -c rollup.browser.js; rollup -c rollup.node.js",
-    "watch": "concurrently 'rollup -wc rollup.browser.js' 'rollup -wc rollup.node.js'",
-    "postversion": "npm run dist",
-    "postpublish": "tag-dist-files --overwrite-existing-tag",
-    "demos": "concurrently 'node --experimental-modules src/Connectors/WebsocketsConnector/server.mjs' 'http-server'"
-  },
-  "now": {
-    "engines": {
-      "node": "10.x.x"
-    }
+    "postversion": "npm run build",
+    "websocket-server": "node ./provider/websocket/server.js",
+    "now-start": "npm run websocket-server"
   },
   "files": [
-    "y.*",
-    "src/*",
-    ".esdoc.json",
-    "docs/*"
+    "build/*",
+    "bindings/*",
+    "docs/*",
+    "examples/*",
+    "lib/*",
+    "persistences/*",
+    "protocols/*",
+    "provider/*",
+    "bindings/*",
+    "structs/*",
+    "tests/*",
+    "types/*",
+    "utils/*",
+    "index.js",
+    "README.md",
+    "LICENSE"
   ],
+  "dictionaries": {
+    "doc": "docs",
+    "example": "examples",
+    "test": "tests",
+    "lib": "./"
+  },
+  "bin": {
+    "y-websockets": "provider/websocket/server.js"
+  },
   "standard": {
     "ignore": [
-      "/y.js",
-      "/y.js.map"
+      "/build",
+      "/node_modules",
+      "/rollup.test.js",
+      "/rollup.test.js"
     ]
   },
   "repository": {
@@ -40,13 +57,7 @@
     "url": "https://github.com/y-js/yjs.git"
   },
   "keywords": [
-    "Yjs",
-    "OT",
-    "Collaboration",
-    "Synchronization",
-    "ShareJS",
-    "Coweb",
-    "Concurrency"
+    "crdt"
   ],
   "author": "Kevin Jahns",
   "email": "kevin.jahns@rwth-aachen.de",
@@ -56,32 +67,38 @@
   },
   "homepage": "http://y-js.org",
   "devDependencies": {
-    "babel-cli": "^6.24.1",
+    "@types/ws": "^6.0.1",
+    "babel-cli": "^6.26.0",
     "babel-plugin-external-helpers": "^6.22.0",
-    "babel-plugin-transform-regenerator": "^6.24.1",
+    "babel-plugin-transform-regenerator": "^6.26.0",
     "babel-plugin-transform-runtime": "^6.23.0",
     "babel-preset-latest": "^6.24.1",
-    "chance": "^1.0.9",
-    "codemirror": "^5.37.0",
-    "concurrently": "^3.4.0",
+    "concurrently": "^3.6.1",
     "cutest": "^0.1.9",
-    "esdoc": "^1.0.4",
+    "esdoc": "^1.1.0",
     "esdoc-standard-plugin": "^1.0.0",
-    "quill": "^1.3.5",
-    "quill-cursors": "^1.0.2",
+    "jsdoc": "^3.5.5",
+    "prosemirror-example-setup": "^1.0.1",
+    "prosemirror-schema-basic": "^1.0.0",
+    "prosemirror-state": "^1.2.2",
+    "prosemirror-view": "^1.6.5",
+    "quill": "^1.3.6",
+    "quill-cursors": "^1.0.3",
     "rollup": "^0.58.2",
+    "rollup-cli": "^1.0.9",
     "rollup-plugin-babel": "^2.7.1",
-    "rollup-plugin-commonjs": "^8.0.2",
-    "rollup-plugin-inject": "^2.0.0",
-    "rollup-plugin-multi-entry": "^2.0.1",
-    "rollup-plugin-node-resolve": "^3.0.0",
-    "rollup-plugin-uglify": "^1.0.2",
+    "rollup-plugin-commonjs": "^8.4.1",
+    "rollup-plugin-inject": "^2.2.0",
+    "rollup-plugin-multi-entry": "^2.0.2",
+    "rollup-plugin-node-resolve": "^3.4.0",
+    "rollup-plugin-uglify": "^6.0.0",
+    "rollup-plugin-uglify-es": "0.0.1",
     "rollup-regenerator-runtime": "^6.23.1",
     "rollup-watch": "^3.2.2",
     "standard": "^11.0.1",
-    "tag-dist-files": "^0.1.6"
+    "tui-jsdoc-template": "^1.2.2"
   },
   "dependencies": {
-    "uws": "^10.148.0"
+    "ws": "^6.1.0"
   }
 }

persistences/FilePersistence.js

@@ -1,19 +1,20 @@
+/*
 import fs from 'fs'
 import path from 'path'
-import BinaryDecoder from '../Util/Binary/Decoder.mjs'
-import BinaryEncoder from '../Util/Binary/Encoder.mjs'
-import { createMutualExclude } from '../Util/mutualExclude.mjs'
-import { encodeUpdate, encodeStructsDS, decodePersisted } from './decodePersisted.mjs'
+import * as encoding from '../lib/encoding.js'
+import * as decoding from '../lib/decoding.js'
+import { createMutex } from '../lib/mutex.js'
+import { encodeUpdate, encodeStructsDS, decodePersisted } from './decodePersisted.js'
 
 function createFilePath (persistence, roomName) {
   // TODO: filename checking!
   return path.join(persistence.dir, roomName)
 }
 
-export default class FilePersistence {
+export class FilePersistence {
   constructor (dir) {
     this.dir = dir
-    this._mutex = createMutualExclude()
+    this._mutex = createMutex()
   }
   setRemoteUpdateCounter (roomName, remoteUpdateCounter) {
     // TODO: implement
@@ -23,9 +24,9 @@ export default class FilePersistence {
     return new Promise((resolve, reject) => {
       this._mutex(() => {
         const filePath = createFilePath(this, room)
-        const updateMessage = new BinaryEncoder()
+        const updateMessage = encoding.createEncoder()
         encodeUpdate(y, encodedStructs, updateMessage)
-        fs.appendFile(filePath, Buffer.from(updateMessage.createBuffer()), (err) => {
+        fs.appendFile(filePath, Buffer.from(encoding.toBuffer(updateMessage)), (err) => {
           if (err !== null) {
             reject(err)
           } else {
@@ -37,10 +38,10 @@ export default class FilePersistence {
   }
   saveState (roomName, y) {
     return new Promise((resolve, reject) => {
-      const encoder = new BinaryEncoder()
+      const encoder = encoding.createEncoder()
       encodeStructsDS(y, encoder)
       const filePath = createFilePath(this, roomName)
-      fs.writeFile(filePath, Buffer.from(encoder.createBuffer()), (err) => {
+      fs.writeFile(filePath, Buffer.from(encoding.toBuffer(encoder)), (err) => {
         if (err !== null) {
           reject(err)
         } else {
@@ -61,7 +62,7 @@ export default class FilePersistence {
           this._mutex(() => {
             console.info(`unpacking data (${data.length})`)
             console.time('unpacking')
-            decodePersisted(y, new BinaryDecoder(data))
+            decodePersisted(y, decoding.createDecoder(data.buffer))
             console.timeEnd('unpacking')
           })
           resolve()
@@ -70,3 +71,4 @@ export default class FilePersistence {
     })
   }
 }
+*/