order observer and transaction cleanups after one another

src/types/YText.js

@@ -215,10 +215,10 @@ const insertAttributes = (transaction, parent, left, right, currentAttributes, a
   // insert format-start items
   for (let key in attributes) {
     const val = attributes[key]
-    const currentVal = currentAttributes.get(key)
+    const currentVal = currentAttributes.get(key) || null
     if (currentVal !== val) {
       // save negated attribute (set null if currentVal undefined)
-      negatedAttributes.set(key, currentVal || null)
+      negatedAttributes.set(key, currentVal)
       left = new ItemFormat(nextID(transaction), left, left === null ? null : left.lastId, right, right === null ? null : right.id, parent, null, key, val)
       left.integrate(transaction)
     }

src/utils/Transaction.js

@@ -129,17 +129,27 @@ export const nextID = transaction => {
  * @function
  */
 export const transact = (y, f) => {
+  const transactionCleanups = y._transactionCleanups
   let initialCall = false
   if (y._transaction === null) {
     initialCall = true
     y._transaction = new Transaction(y)
+    transactionCleanups.push(y._transaction)
     y.emit('beforeTransaction', [y._transaction, y])
   }
-  const transaction = y._transaction
   try {
-    f(transaction)
+    f(y._transaction)
   } finally {
-    if (initialCall) {
+    if (initialCall && transactionCleanups[0] === y._transaction) {
+      // The first transaction ended, now process observer calls.
+      // Observer call may create new transactions for which we need to call the observers and do cleanup.
+      // We don't want to nest these calls, so we execute these calls one after another
+      for (let i = 0; i < transactionCleanups.length; i++) {
+        const transaction = transactionCleanups[i]
+        const store = transaction.y.store
+        const ds = transaction.deleteSet
+        sortAndMergeDeleteSet(ds)
+        transaction.afterState = getStates(transaction.y.store)
         y._transaction = null
         y.emit('beforeObserverCalls', [transaction, y])
         // emit change events on changed types
@@ -159,13 +169,6 @@ export const transact = (y, f) => {
           // because we know it has at least one element
           callEventHandlerListeners(type._dEH, events, transaction)
         })
-      // only call afterTransaction listeners if anything changed
-      transaction.afterState = getStates(transaction.y.store)
-      // when all changes & events are processed, emit afterTransaction event
-      // transaction cleanup
-      const store = transaction.y.store
-      const ds = transaction.deleteSet
-      sortAndMergeDeleteSet(ds)
         y.emit('afterTransaction', [transaction, y])
         // replace deleted items with ItemDeleted / GC
         for (const [client, deleteItems] of ds.clients) {
@@ -243,7 +246,11 @@ export const transact = (y, f) => {
             tryToMergeWithLeft(structs, replacedStructPos)
           }
         }
+        // @todo Merge all the transactions into one and provide send the data as a single update message
+        // @todo implement a dedicatet event that we can use to send updates to other peer
         y.emit('afterTransactionCleanup', [transaction, y])
       }
+      y._transactionCleanups = []
+    }
   }
 }

src/utils/Y.js

@@ -39,6 +39,11 @@ export class Y extends Observable {
      * @private
      */
     this._transaction = null
+    /**
+     * @type {Array<Transaction>}
+     * @private
+     */
+    this._transactionCleanups = []
   }
   /**
    * Changes that happen inside of a transaction are bundled. This means that

tests/testHelper.js

@@ -233,7 +233,7 @@ export class TestConnector {
  * @template T
  * @param {t.TestCase} tc
  * @param {{users?:number}} conf
- * @param {InitTestObjectCallback<T>} initTestObject
+ * @param {InitTestObjectCallback<T>} [initTestObject]
  * @return {{testObjects:Array<any>,testConnector:TestConnector,users:Array<TestYInstance>,array0:Y.Array<any>,array1:Y.Array<any>,array2:Y.Array<any>,map0:Y.Map<any>,map1:Y.Map<any>,map2:Y.Map<any>,map3:Y.Map<any>,text0:Y.Text,text1:Y.Text,text2:Y.Text,xml0:Y.XmlElement,xml1:Y.XmlElement,xml2:Y.XmlElement}}
  */
 export const init = (tc, { users = 5 } = {}, initTestObject) => {
@@ -256,7 +256,7 @@ export const init = (tc, { users = 5 } = {}, initTestObject) => {
     result['text' + i] = y.get('text', Y.Text)
   }
   testConnector.syncAll()
-  result.testObjects = result.users.map(initTestObject)
+  result.testObjects = result.users.map(initTestObject || (() => null))
   // @ts-ignore
   return result
 }

tests/y-array.tests.js

@@ -144,6 +144,32 @@ export const testInsertAndDeleteEvents = tc => {
   compare(users)
 }
 
+/**
+ * @param {t.TestCase} tc
+ */
+export const testNestedObserverEvents = tc => {
+  const { array0, users } = init(tc, { users: 2 })
+  /**
+   * @type {Array<number>}
+   */
+  const vals = []
+  array0.observe(e => {
+    if (array0.length === 1) {
+      // inserting, will call this observer again
+      // we expect that this observer is called after this event handler finishedn
+      array0.insert(1, [1])
+      vals.push(0)
+    } else {
+      // this should be called the second time an element is inserted (above case)
+      vals.push(1)
+    }
+  })
+  array0.insert(0, [0])
+  t.compareArrays(vals, [0, 1])
+  t.compareArrays(array0.toArray(), [0, 1])
+  compare(users)
+}
+
 /**
  * @param {t.TestCase} tc
  */